@media screen{

head {background-color:#DFBD79;
}

div#top {width:100%; background-color: #F1D5A5; padding:5px; border-top-left-radius: 45px; 
border-bottom-right-radius: 45px; font-family: arial, helvetica, sans-serif;}
div#bannerImage {float:left}
div#bannerImage img {width:150px}
div#title{font-size:30px; font-weight:bold; color:#FF0000;}
/*div#title h2 {text-align:center;}*/
div#title a { text-decoration:none;}

div.boilerplate span {text-indent:5px;
    color:#63604F;
    margin-left:1em;
    display:block;
    font-size:smaller;
    line-height:1.4em;}
    
div.boilerplate img {position: relative; top:7px; right: -2px }




body {background-color: #fffae6 /*#EDE3B8*/; color: #70003D; 
                        font-family: "Times New Roman", Times, Georgia, serif; padding:15px; line-height:1.2em;}


div#main {line-height:1.2em;}
div#heading {width:100%; position: relative}
div#courseInfo {width:40%; float:left;}
div#picture {width:60%; float:right;}
img#goblinMarket {max-width:600px; width:100%; margin-left:2em; margin-bottom: 2em;}
img#frontis {position: absolute; top: -30px; max-width:300px; width:100%; margin-left:2em; margin-bottom: 2em;}
h1 {color:#0F046A; display:inline; letter-spacing:1.5px; font-size: 2.5em; text-align:center; padding: 2px;}



h2 {color:#00056B; font-size: 1.3em; text-align:left; 
}
h3 {color:#990033;
 font-size: 1.1em; text-align:left; padding:3px
}
h4{color:#990033; display:inline-block; font-family:"Trebuchet MS", Helvetica, sans-serif; font-size: 1em; text-align:left;
    
}

q {quotes:'“' '”' '‘' '’'; 
}

cite.sub {font-style:normal;}
cite.sub::before {content:'“'; 
}
cite.sub::after {content:'”';
}

q cite.sub::before {content: '‘'}
q cite.sub::after {content: '’'}
cite.sub cite.sub::before {content: '‘'}
cite.sub cite.sub::after {content: '’'}

/*title {color:#FEE0D2}*/
/*
img[style] {position: relative; top: 20px;}*/
img
{padding:2px;}

p {display:block; padding:2px 2px 2px 2px}

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #AA0000;
    margin: 1em 0; padding: 0; }
    
    

    
span.italic {font-style: italic;}

span.strong {font-weight:bold;}

span.smaller {display:inline-block;; font-size:0.8em; line-height:1.2em; padding:2px}

span.code {color:#B20000
}

ul.circle

li {display: block; padding: 5px 5px 5px 5px; line-height:1.2em}

ul li ul.square

ul li ul li {display:block; font-size:smaller; line-height:1.2em}

a:link {color:#00056B;}      /* unvisited link */
a:visited {color:#333399
;}  /* visited link */
a:hover {color:#003197;}  /* mouse over link */
a:active {color:#003197;}  /* selected link */

table { border-collapse: collapse; width: 100%;
border: 2px solid #BF9E7D;
/*border: 0*/
}

tr {border-collapse: collapse; border: 0}

th
{ border-collapse: collapse;
border: 1px solid  #BF9E7D;
background-color: #E1C99B;
padding: 1px;
vertical-align:top;
}

td 
{ border-collapse: collapse;
border: 1px solid  #BF9E7D;
padding: 7px;
vertical-align:top;
}


th:nth-child(1), td:nth-child(1) {
width:12%; text-align:center;   
}

th:nth-child(2), td:nth-child(2) {
width:44%;  
}

th:nth-child(3), td:nth-child(3) {
width:44%;  
}

/*table tr th, table tr td 
{ border-collapse: collapse;
border: 1px solid  #BF9E7D;
padding: 15px;
vertical-align:top;
}*/

}

@page {
size: 8.5in 11in;/* width height */ padding:10em;
}

@media print{

 
 body {background-color: white; color: black; font-family: arial, helvetica, sans-serif; font-size:10pt;  }
div.container {background-color:white; width:90%;   }   
    
 table {width:100%;border-collapse: collapse; 
border: 1px solid black }   
th, td
{
border: 1px solid  black;
vertical-align:middle;
}
  tr, th, td {page-break-inside: avoid;} 
  th:nth-child(1), td:nth-child(1) {
width:12%; text-align:center;   
}

th:nth-child(2), td:nth-child(2) {
width:44%;  
}

th:nth-child(3), td:nth-child(3) {
width:44%;  
}
   p {page-break-inside:avoid;}
   li {page-break-inside: avoid; }
   h1, h2, h3, h4 {page-break-inside: avoid; page-break-after: avoid; line-height:1.15em;}
   div#bannerImage {float:left}
div#bannerImage img {width:150px}
div#main {line-height:1.1em;}
div#heading {width:100%}
div#courseInfo {width:40%; float:left;}
div#picture {width:60%; float:right;}
img#goblinMarket {max-width:300px; width:100%; margin-left:2em; margin-bottom: 2em;}
img#frontis {max-width:200px; width:100%; margin-left:2em; margin-bottom: 2em;}
}