body
{
background-image: url("../site/stripe.png");
background-repeat: repeat;
background-position: top right,left;
margin: 0 6px;
}

#logo {
float: right;
margin-right: -6px;
margin-bottom: 6px;
}
#logo_ew {
float: left;
margin-bottom: 6px;
}


#logo img {
float: right;
}

#mapsheet {
margin-left: 2%;
}

#footer > p > a:visited {
color: #fff;
}

.imagebox {
float:left;
width: 31.3%;
margin-left: 2%;
}

#toprow > div a > img {
max-width:100%;
}

#toprow > div > a > p {
padding:0px;
margin:0px;
margin-bottom: 30px;
}

h1 {
font-family: 'Bitter', serif;
font-weight: normal;
color: #101010;
font-size: 22pt;
padding-left: 15px;
padding-top: 35px;
}

h2 {
font-family: 'Bitter', serif;
font-weight: normal;
color: #101010;
font-size:12pt;
padding:5px;
}
h3 {font-family: 'Open Sans', Arial, 'Arial Unicode MS', Verdana, sans-serif;
font-family: 'Bitter', serif;
font-weight: normal;
color: #101010;
font-size: 14pt;
padding-left: 15px;
padding-top: 10px;
}

p, li {
font-family: 'Open Sans', Arial, 'Arial Unicode MS', Verdana, sans-serif;
color: #101010;
font-size: 11pt;
padding: 4px 17px;
}



a:link
{ text-decoration: none;
 color:#806828;
font-weight:bold; }
a:visited
{ text-decoration: none;
 color:#806828;
font-weight:bold; }
a:active
{ text-decoration: none;
 color:#806828;
font-weight:bold; }
a:hover
{ text-decoration: none;
 color:#806828;
font-weight:bold; }

#header
{
position:relative;
margin-top:8px;
min-height:340px;
width:800px;
padding:0px;
margin-left:auto;
margin-right:auto;
z-index:1;}

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



#headText
{position:relative;
text-align:left;
margin-top:5px;
height:50px;
z-index:1;
width:800px;
display:none;}

#headQuote
{position:absolute;
text-align:left;
margin-top:15px;
margin-left:575px;
background-color:rgba(253, 252, 252, 0.88);
z-index:3;
width:197px;
border-radius:50%;
padding:20px;
padding-left:0px;
display:none;}

#headQuote p {
font-style:italic;
}

#headQuote p:before {
content: "\‟   ";
font-size:80pt;
color:#000;
padding-left:0px;
padding-right:6px;
float:left;
}

#headText h1{
padding:0px;
color:#FFF; 
font-weight:bold;
padding-left:10px; 
font-size:18pt;
font-family:"Palatino Linotype", serif;
}

#headText a:link,a:visited,a:hover{
color: #000;
}

#nav
{position:absolute;
text-align:right;
background-color:#806828;
margin-left:460px;
z-index:3;
top:373px;
}

#nav #this{
font-family: 'Bitter', serif;
font-weight:bold;
color:#FFF;
font-size:12pt}



#nav a:link {
color:#FFF;
font-size:12pt}

#nav a:hover {
color:#fff;
}

.submenu {
left: -19px !important;
padding: 10px;
border-top: 2px;
border-top-style: solid;
z-index: 1;
margin-top: 19px !important;
border-color: rgb(199, 193, 113);
}

#nav ul#menu, #nav ul#menu ul.submenu {
padding:0px;
margin-right: 8px;
margin-left: 7px;
width: 325px;
height: auto;

}
#nav ul#menu li {
list-style-type:none;
display:inline-block;
padding:2px;
padding-right:5px;}

#nav ul#menu ul.submenu li
{
list-style-type:none;
display:block;
padding: 7px 0;
}

#nav ul#menu li a, #nav ul#menu ul.submenu a {
color:#fff;
padding-bottom: 55px;
font-family: 'Bitter', serif;
font-weight: 600;
}

#nav ul#menu ul.submenu a {
font-size:10pt;
padding:5px;
line-height:9pt;

}

#nav ul#menu li {
position: relative;
}

#nav ul#menu li ul.submenu {
display:none;
position: absolute;


}
#nav ul#menu li:hover ul.submenu {
display:block;
text-align:left;
top: 22px;
left:-35px;
width: 150px;
padding-bottom:5px;
background:rgba(139, 125, 80, 0.88)
}


#nav ul#menu ul.submenu li:hover{
background:#806828;
display:block;
	}
	
	
	
	
#content
{
position:relative;
z-index:0;
margin-top:-20px;
margin-left:auto;
margin-right:auto;
width:800px;
padding:0px;
min-height:300px;
background-color: #fdfcfc;
}

#content ul {
padding:0px;
list-style-type:none;
}

#content ul li {
clear:both;
font-family: 'Bitter', serif;
}

#content li {
line-height:20px;
padding:3px;}

#content ul li li {
padding-top:8px;
clear:none;
font-weight:normal;
font-size:8pt;
font-family: 'Open Sans', Arial, 'Arial Unicode MS', Verdana, sans-serif;
}

#content img 
{float:left;
padding-bottom:30px;
padding-left: 1px;
padding-right: 12px;
}


img
{border:0px;
padding:10px}



#footNav {
font-family: 'Open Sans', Arial, 'Arial Unicode MS', Verdana, sans-serif;
color: #101010;
font-size: 10pt;
padding:5px;
}

#footer
{
position: relative;
clear: both;
width: 800px;
margin-left: auto;
margin-right: auto;
height: auto;
padding: 2px 0px;
border-top: solid white 6px;
background-color: #806828;
z-index: 5;
}

#footer p {
text-align:right;
padding: 10px 12px;
margin: 0;
font-size: 8pt;
color:#fff;
}

#footer a:link {
color:#fff}
#footer a:hover {
color:#101010}


audio {
padding:3px;
width:50%;
}

.pictures
{
float: right;
width: auto;
margin: 8px 17px;
padding: 2px;
background: rgba(224, 224, 224, 1);
color: black;
}

.pictures p
{
font-size: 9pt;
font-style: italic;
text-align: left;
color: #5C4F28;
margin: 0;
margin-bottom: 2px;
padding: 5px 5px;
}

.pictures img {
padding: 2px;
padding-bottom: 6px !important;
padding-right: 2px !important;
}
.section {
float:right;
width: 47%;
margin: 0 1.5%;
}
.section-left
{
float: left;
width: 47%;
margin: 0 1.5%;
}

.section h2, .section-left h2{
background-color:#806828;
color:#fff;
border-bottom: 2px;
border-bottom-style: solid;
border-bottom-color: rgb(199, 193, 113);
padding-left: 8px;
}

ul {
list-style-type: none;
}

.section-left h3, .section h3 {
background-color: rgba(128, 104, 40, 0.7);
color: #fff;
margin-right:80px;
}

.section h3, .section-left h3, ul li  {
font-weight: bold;
font-family: 'Open Sans', Arial, 'Arial Unicode MS', Verdana, sans-serif;
font-size: 10pt;
padding-left: 5px;
padding-top: 4px;
padding-right: 2px;
padding-bottom: 5px;
}

.gallery {
width:100%;
height: auto;
max-height: 395px;
margin-left:auto;
margin-right:auto;
}

.gallery h2 {
color: #FFF;
text-align: center;
background: #806828;
border-bottom: 3px;
border-bottom-style: solid;
border-bottom-color: rgb(199, 193, 113);
}

#education {
position:absolute; 
margin-left:50%; 
left:400px;
width:150px; 
top:62px;
background-color: #fdfcfc;
}

#education h3{
background-color: rgba(128, 104, 40, 0.7);
color: #fff;
font-weight:bold;
font-size:10pt;
font-family:Trebuchet, sans-serif;
}

.mark
{font-size:20pt;
padding:0px;
padding-left:2px;
padding-right:2px;
line-height:15pt;
}

#pMark
{color:#FFAD33}
#fMark
{color:#3399FF}
#tMark
{color:#33CC33}
#wMark
{color:#00FFFF}
#cMark
{color:#FF0066}
#2Mark
{color:#003366}
#eMark
{color:#E6E600}


/* RESPONSIVE CSS */

@-ms-viewport {
	width: device-width;
}


@media screen and (max-width: 840px){

#header  {
width: 100%;
min-height: inherit;
}

#header img {
padding: 0px;
margin: 0px;
width: 100%;
}

#nav {
position: relative;
text-align: right;
background-color: #806828;
margin-left: 535px;
z-index: 3;
top: -28px;
float: right;
}

#content {
width: 100%;
}

.pictures {
max-width: 45%;
}

.pictures img {
max-width: 98%;
}

.section-left {
float: left;
width: 47%;
margin: 0 1.5%;
}

.section {
float: right;
width: 47%;
margin: 0 1.5%;
}

#footer {
width: 100%;
}





@media screen and (max-width: 650px){
.section-left {
float: left;
width:98%;
margin: 0 1%;
}

.section {
float: right;
width: 98%;
margin: 0 1%;
}

#logo img, #logo_ew img {
float: right;
max-width: 80%;
height: auto;
}



#nav a:link {
color:#FFF;
font-size:10pt}

#nav #this {
color:#FFF;
font-size:10pt}

#nav ul#menu, #nav ul#menu ul.submenu {
padding:0px;
margin-right: 8px;
margin-left: 7px;
width: 255px;
height: auto;

}

.submenu {
left:-17px !important;
top: 20px! important;
}
#nav ul#menu li {
padding-right:0px;}



#nav ul#menu ul.submenu a {
font-size:8pt;
padding:5px;
line-height:9pt;

}