/* css for composition forum
   built 2006-11 cbd 
   put into use 2006-12-14
   tweak blockquote 2007-10-28
   update for move to compositionforum.com 2008-07-05
   tweak blockquote again 2009-06-12
   
   2012-0730
   		duplicate original file
   		add classes for citation
   		going to use this for CF26 and forward
   
*/

body	{
	background-image: url(http://compositionforum.com/images/main_bg.gif);
	font-family: arial,helvetica,geneva,sans-serif;
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: small;
}

#container	{ 
	width: 700px;
	margin: 0 auto;
	padding: 0;
	text-align: left;

 /* The rules below help with wrapping long URLs */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  /*
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  */
}


}

#header {
	padding: 0;
	margin: 0;
}

#navigation	{
	background-image: url(http://compositionforum.com/images/otherbackground.png);
	padding: .25em 1em .25em 1em;
	margin: 0;
	font-size: .90em;
}

#main	{
	background-image: url(http://compositionforum.com/images/whitebackground.png);
	padding: 1em;
	margin: 0;
}

#footer	{
	background-image: url(http://compositionforum.com/images/otherbackground.png);
	font-size: 0.8em;
	padding: .25em 1em .25em 1em;
	margin: 0;
}

/* sidebar used in some articles */

div.sidebar, div#sidebar	{
	float: right;
	width: 40%;
	background-color: #f1f1d7;
	margin-left: +1em;
	padding: 0 1em 0 1em;
	font-size: .9em;
}

div.rightimage, div#rightimage	{
	float: right;
	width: 40%;
	background-color: #ffffff;
	margin-left: +1em;
	padding: 0 1em 0 1em;
	font-size: .9em;
}

div.table, div#table {
	margin-left: auto; margin-right: auto;
}

/* general styles for all content */

h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; font-style: italic; }
h4 { font-size: 1em; text-decoration: underline; }

/* fix italic in h3 headlines */
h3 em { text-decoration: underline; }

h1,h2,h3,h4,p,ul,ol,dl,table,blockquote {
	padding: 0;
	margin: 0;
	border: 0;
}

a,img,li,dt,dd {
	padding: 0;
	margin: 0;
	border: 0;
}

figure, figure img, figure figcaption {
  margin: 0 auto 0 auto;
  text-align: center;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}
figure figcaption, figure blockquote {
  margin-left: 0;
  text-align: left;
}

figure pre {
  text-align: left;
}

pre, code {
  font-size: 1.2em;
}

figure.quarter {
  float: left;
  width: 25%;
  max-width: 25%;
}

figure.quarter a {
  border: none;
}

img {
  max-width: 100%;
}

dt {
	font-weight: bold;
}

blockquote { 
	/* indent comes from blockquote class */
	/* margin: 0; padding: 0;  
		no it doesn't; changed 200906
	*/
	margin-bottom: 1em;
	padding-right: +3em;
	padding-left: +3em;
}

caption { caption-side: bottom; }

/* styles to make "pipe" navigation with list */

#navigation ul {
	margin: 0;
	padding: 0;
	display: inline;
	list-style: none;
}

#navigation ul li {
	padding: 0 .1em 0 .4em;
	border-left: 2px solid #663399;
	display: inline;
	list-style: none;
}

#navigation ul li.first {
	padding-left: 0;
	border-left: none;
	display: inline;
	list-style: none;
}

/* try to fix &#($&# header image */

#header p, #header p a, #header p a img {
	padding: 0;
	margin: 0;
	border: 0;
}

#main h1, #main h2, #main h3, #main h4, #main p, #main ul, #main ol, #main dl {
	margin: 0;
}

#main h1 {
	padding-bottom: 0.5em;
}

#main h2, #main h3, #main h4 {
	padding-top: +1em;
	padding-bottom: 0.5em;
}


#main p, #main ul, #main ol, #main dl { 
	padding-bottom: 1em;
}

#main ul ul, #main ol ol, #main ol ul, #main ul ol {
  padding-bottom: 0em;
}

#main table, #main caption {
	margin-bottom: +1em;
}

/* indent lists nicely; dl implementation is incomplete */

#main ul, #main ol {
	padding-left: 3em;
}
   
#main ul ol, #main ol ul {
	padding-left: +1em;
}

#main dl {
	padding-left: 2em;
}

#main dl dd {
	padding-left: +1em;
}

/* hack to fix padding on bottom top level list when there are nested lists; this removes a gap. Need to do this automagically */

#main ul.top, #main ol.top, #main dl.top {
	padding-bottom: 0em;
}

/* I don't know why this doesn't cascade right 
   seems like just .author should do it */

#main p.issue, .issue {
	font-size: 0.85em;
}

#main p.author, .author { 
	font-style: italic; 
}

#main p.blockquote, .blockquote {
	/* padding-right: +3em;
	padding-left: +3em; 
		200906 changed this so blockquote container did it not these tags */
}

#main p.strike, .strike {
	/* strikethrough */
	text-decoration: line-through;

}

#main p.add, .add {
	/* underline  */
	text-decoration: underline;
}

#main p.abstract, .abstract {
	background-color: #f1f1d7;
	padding: 1em;
	margin-bottom: +1em;
	border: solid 1px #C9CA99;
}

#main p.copyright, .copyright {
	margin-top: +2em;
}

#main h3.edit, h3.edit {
	padding-bottom: 0;
}


/* next two styles are not used, for now, but in the markup in case we need them */
#main p.bodytext, .bodytext { }
#main p.workscited, .workscited { }

#main p.kicker, .kicker {
	font-size: 0.85em;
}

.check {
	color: red; 
	font-weight: bold;
}

/*
  Add borders to all cells in some tables with the class declaration
  'bordered'---the next two styles apply the formatting to children
*/

table {
  min-width: 100%;
}

.bordered, .bordered td, .bordered tr, .bordered th {
	border: solid 1px #C9CA99;
	border-collapse: collapse;
}

.bordered td, .bordered th {
	/* a little padding for the cells */
	padding: 0.25em;
}

td, th {
  vertical-align: top;
  min-width: 20%;
}

tr {
  vertical-align: top;
}

table.vertical td.empty-cell {
  min-width: 1%;
  max-width: 5%;
  width: 3%;
}

td.wide, th.wide {
  width: 40%;
}

td.slim, th.slim {
  min-width: 10%;
  width: 10%;
}

td.five, th.five {
  min-width: 5%;
  width: 5%;
  max-width: 5%;
}

td.ten, th.ten {
  min-width: 10%;
  width: 10%;
  max-width: 10%;
}

td.twenty, th.twenty {
  min-width: 20%;
  width: 20%;
  max-width: 20%;
}

td.thirty, th.thirty {
  min-width: 30%;
  width: 30%;
  max-width: 30%;
}

td.forty, th.forty {
  min-width: 40%;
  width: 40%;
  max-width: 40%;
}

td.fifty, th.fifty {
  min-width: 50%;
  width: 50%;
  max-width: 50%;
}

td.shaded, th.shaded, tr.shaded {
  background-color: #eee;
}

/* hide stuff intended for print only */
.printonly { 
	display: none; 
}

.skip {
    /* added 20080331 */
	position: absolute;
	left: -1000em;
	width: 20em;
}


/* Simple Floating and Clearing Elements */
.floats_left {
  float: left;
  margin-right: 1em;
}

.floats_right {
  float: right;
  margin-left: 1em;
}

.floats_left, .floats_right {
  max-width: 50%;
  margin-bottom: 1em;
}

div blockquote {
  margin-top: 1em;
}

.clears_left {
  clear: left;
}

.clears_right {
  clear: right;
}

.clears_both {
  clear: both;
}

.right-justify {
  width: 100%;
  display: inline-block;
  text-align: right;
}

.nobottommargin {
  margin-bottom: 0;
}

.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.text-centered {
  text-align: center;
}

.full-width {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* to make citations smarter than <em> */

cite.article {
  font-style: normal;
  quotes: "\201c" "\201d" "\2018" "\2019";
}

cite.article:before {
  content: open-quote;
}

cite.article:after {
  content: close-quote;
}

cite cite, i cite {
  font-style: normal;
}

cite.article cite {
  font-style: italic;
}

cite.article cite.article {
  font-style: normal;
}


/* initially for table BG shading in vol 35 BYU profile */
.arrow {
  background-image: url("http://compositionforum.com/arrow.png");
  background-repeat: no-repeat;
  background-position: 0 -50px;
  width: 33%;
}


/* Some padding between list items, e.g. footnotes */

div ol li {
  padding-bottom: 0;
}

div ol li ul, div ol li ul li, div ol li ol {
  padding-bottom: 0;
}


/* commented out by Kevin 9/30/17
#notes-section ol li, #appendices-section ol li {
  margin-bottom: 1em;
}
*/

/* Hanging indents for Works Cited entries */
div#workscited-section p {
  margin-left: 2em;
  text-indent: -2em;
}

p.citation {
  padding-left: 2em;
  text-indent: -2em;
}


/* Visual markers for distinct types of textual content */

details {
  border: 1px solid #000;
  background: rgba(255,255,0,0.25);
  padding: .5em;
  margin-bottom: .5em;
}

details summary::-webkit-details-marker {
  display:none;
}

details summary:first-of-type {
  list-style-type: none;
}

details summary:before {
  content:"+";
  float: left;
  font-size: 2em;
  font-weight: bold;
  margin: 5px 10px 0 0;
  text-align: center;
  cursor: pointer;
}

details[open] summary:before {
  content:"-";
  margin: 2px 10px 0 0;
  cursor: auto;
}

details summary:after {
  content:"(click to expand)";
  float: right;
  margin-top: -2em;
  cursor: pointer;
}

details[open] summary:after {
  content:"(click to collapse)";
  cursor: auto;
}

section.shaded, div.shaded {
  background: rgba(0,0,0,0.1);
  border: 2px dashed #000;
  padding: .5em .5em 0 .5em;
  margin-bottom: 1em;
}

section.blue, div.blue {
  background: rgba(0,255,255,0.1);
  margin-bottom: 1em;
}

section.yellow, div.yellow {
  background: rgba(255,255,0,0.25);
  margin-bottom: 1em;
}

/* expanding & sticky menu options taken 2/5/18 from:
https://designshack.net/articles/navigation/verticalaccordionav/

*/

nav.sticky {
  position: fixed;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  margin: 50px auto; /*for display only*/
  top: 5%;
  left: 5%;
  width: 15%;
  border: 3px solid #000;
}

nav.sticky .menu-item {
  background: #fff;
}

.menu-item h4 {
  border-bottom: 3px solid #000;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 5px;
  text-decoration: none;
  
  /*Gradient*/
  background: #435d6b; /* #a90329; Old browsers */
  background: -moz-linear-gradient(top, #5e8397 0%, #527384 44%, #435d6b 100%); /* -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);  FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e8397), color-stop(44%,#527384), color-stop(100%,#435d6b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5e8397 0%, #527384 44%, #435d6b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5e8397 0%, #527384 44%, #435d6b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5e8397 0%, #527384 44%, #435d6b 100%); /* IE10+ */
  background: linear-gradient(top, #5e8397 0%, #527384 44%, #435d6b 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e8397', endColorstr='#435d6b',GradientType=0 ); /* IE6-9 */
}

.menu-item-last h4 {
  border-bottom: none;
}

.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
}

.menu-item h4:hover {  
  background: #5e8397; /* #a90329; Old browsers */
  background: -moz-linear-gradient(top, #85a1b0 0%, #7091a2 44%, #5e8397 100%); /* -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);  FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#85a1b0), color-stop(44%,#7091a2), color-stop(100%,#5e8397)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #85a1b0 0%, #7091a2 44%, #5e8397 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #85a1b0 0%, #7091a2 44%, #5e8397 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #85a1b0 0%, #7091a2 44%, #5e8397 100%); /* IE10+ */
  background: linear-gradient(top, #85a1b0 0%, #7091a2 44%, #5e8397 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85a1b0', endColorstr='#5e8397',GradientType=0 ); /* IE6-9 */
}

.menu-item ul {
  background: #fff;
  font-size: 13px;
  height: 0px;
  max-width: 100%;
  list-style-type: none;
  overflow: hidden;
  margin: 0px;
  
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
 
.menu-item ul a {
  padding: .25em .5em .25em .5em;
  text-decoration: none;
  color: #000;
  display: block;
}

.menu-item:hover ul {
  height: 75px;
}

/* this allows expanding vertical menu blocks to fully collapse if they have <ul> content */
#main .menu-item ul {
  padding-bottom: 0;
}
 
.menu-item li {
  border-bottom: 2px solid #eee;
  margin-left: -2em;
}
 
.menu-item li:hover {
  background: #eee;
}


/* hides sticky, expanding menu bar for narrow screens until hamburger solution can be provided */
@media only screen and (max-width: 800px) {
  nav.sticky {
    display: none;
  }
}


/* Coloring a table's elements, first used in vol 42 for the Moravian program profile */

tbody.light-blue th, tbody.light-blue td {
  border: 1px solid #00aeef;
}

tbody.light-blue th {
  background: #00aeef;
  border-bottom: 1px solid #000;
}

tbody.dark-blue th, tbody.dark-blue td {
  border: 1px solid #005993;
}

tbody.dark-blue th {
  background: #005993;
  color: #fff;
  border-bottom: 1px solid #fff;
}

tbody.green th, tbody.green td {
  border: 1px solid #6ec829;
}

tbody.green th {
  background: #6ec829;
  color: #000;
  border-bottom: 1px solid #000;
}

tbody.orange th, tbody.orange td {
  border: 1px solid #ffac25;
}

tbody.orange th {
  background: #ffac25;
  border-bottom: 1px solid #000;
}

video {
  max-width: 100%;
}