/*==========================================
  RESET
==========================================*/


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,dfn,em,font,img,kbd,q,s,samp,small,strike,strong,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}


/*==========================================
  ELEMENTS   
==========================================*/

body {text-align: center; margin: 0;  font-size: 100%; font-family:Georgia, serif; background: #949d8d url("../img/body_bg.png") 0 -800px ;}

ul {list-style: none;  margin: 0;  padding: 0;}
body, p, dl, dt, dd, table, td, th, h1, h2, h3, h4, h5, h6 {margin: 0}
img{max-width:100%;height:auto;}
a {outline:none;}

h2 {font-family: Arial,Helvetica,sans-serif; font-weight:bold; font-size: 1.45em; color: #343f2f; margin: 0; padding: 0; clear:both; display:block; zoom: 1}

p {margin-top: 1em}

address {font-style: normal; color: #aaa; font-size: .9em;}
abbr {text-decoration:none}

/*==========================================
  LAYOUT & CLASSES
 ==========================================*/

#wrapper {text-align:left; margin:0 auto; max-width: 960px; }

#header, #intro, #content, #main, .full, .half, .last_half, #faq, dl, #footer, .cite {float: left; position:relative}
#aside, #site, address {float: right; position:relative; width: 29%}

#content { background: #eae8d3 url("../img/body-bg.jpg") center top no-repeat; background-size: cover; background-attachment:scroll; width: 100%;}

/* Header
------------------------------------------------------------------*/
#mobile-contact {display:none}
#header {width: 100%}
#intro {width: 61%}
#intro {color: #343f2f; font: small-caps 2.5em/1 Arial,Helvetica,sans-serif; margin: .5em 0 0 .9em;}
#intro .equation {color: #666; font-size: 0.7em;}
#intro em {color: #70615e; display: block; font: 1.3em/1 georgia, serif; font-style:italic; display:block; text-align: right; margin: 50px 0 20px 0; }

#site {float: right; position:relative; width: 28.1%; margin: 0; color: #e5e3d6;  font: 15px/1.3em Georgia,"Times New Roman",serif;}
#site-text {display: block; font: bold 1.5em Arial,Helvetica,sans-serif; margin: 12px 0 14px; color: #edebe2}
#honorific-suffix {font-size: .7em}
#site em { color: #eff0e5; font-style: italic; font-weight: bold}
.description {float: left; position:relative; width: 150px; text-align: right; margin: 1px 15px 0 -34px}
.photo {float: left; position:relative; ;  }

/* Section
------------------------------------------------------------------*/

#main {line-height: 1.35em; font-size: 15px;  color: #2f1717; padding: 2em 5% 0 5%; margin: 0 1% 0 2%; background: url("../img/main_bg.png") top left; width: 54%;  }
   .full {width: 100%; margin: 1em 0 1.5em 0; clear: both;}
   .half {width: 45%; margin-right: 5%}
   .last-half {width: 50%}
   #main h2 {background:  url("../img/list_decorator.gif") no-repeat center left; padding: 0 0 0 30px}
#main em {font-style: italic; font-family: Georgia,"Times New Roman",serif;  font-size: 1.2em;}
.half-list li { background: url("../img/sub_list_decorator.png") no-repeat 0 7px; list-style-type: none;margin: 0;  padding: 0 0 0 16px;}

/* Aside
------------------------------------------------------------------*/
   
#aside {margin: 80px 0 0 0; font-size: .95em; color: #2f1717;}
    #aside h2 {font-size: 1.4em; margin: 30px 0 10px; padding: 20px 0 0;}
    .decorate {background: url("../img/divide.gif") no-repeat 78px 0;} 
    #aside p {margin-right: 2em}
    .tel {font-size: 1.25em}
    .tel a {color: #2f1717 !important}
    .where {font-weight: bold; margin-top: 3em}
    .alignleft {float: left; position:relative; margin: 5px 8px 0 0}
    .image-link {border: 1px solid #ccc}
    .image-link:hover {opacity: .7}
    .extended-address {float: left; position:relative; margin: 20px 0 16px; }
    
/* Footer
------------------------------------------------------------------*/    

#faq {width: 100%; }
  #faq h2 {font-size: 1.3em; line-height: 1em; margin: 1.3em 0 .1em 1em; padding: 0;  color: #343f2f;}
  dl {font-size: .75em; width: 29%; margin: 0 0 0 1.5em}
  	dt {font-weight: bold;margin: 0 0 .7em 0;color: #000; color: #f2f1e7; font: bold 1.4em Arial,Helvetica,sans-serif; padding: .8em 0 0 0;}
  	dd {color: #2f2520; font: bold 1em/1.4em Georgia, 'Times New Roman', serif; margin:0 0 2.2em 0; padding: .5em;  background: rgba(243, 243, 234, 0.6);  border-right: 1px solid #777c68; min-height: 50px}
        .first {margin-left: 2em}
        .last {width: 28%}
  	.last dd { border-right: none;}
  
  
#footer {width: 100%; background:  url(../img/footer_bg.png) top left; color: #ddd;}
	cite, address, cite span {color: #efefef; line-height: 2.2em; font-style: normal; }
	cite {width: 80%; font-size: 1em; margin: .2em 0 0 1.5em;}
	#footer a {color: #efefef; background-color: inherit}
	address {width: 17%; font-size: 1em;}


/*==========================================
  MEDIA QUERIES
 ==========================================*/

/*----------------- mobile -----------------*/

@media only screen and (max-width:767px){
   #wrapper {width: 100%; margin: 0}
   #mobile-contact {display:block; background: url("../img/footer_bg.png"); color: #ddd; text-align:center; padding: .4em; margin-bottom: 12px}
   #content {background-position: -100px 0}
   #header,  #site, #intro , #main, .full, #aside, #footer, .half, .last_half, address {float: none}
   #site, #intro  {width: 94%; margin: 0% 3%}
   #site, #site em {color: #2f1717}
   #site-text {color: #343f2f}
   #intro {font-size: 1.15em; font-weight: bold; margin: 22px 3%; clear: both}
   #intro em {margin: 20px 0; text-align:left; font-weight:bold}
   .description {margin: 5px 10px 0 0; text-align: left }
   #intro {clear: both; padding-top: 20px}
   #main  {width: 84%; padding-bottom: 2px}
   .half, .last_half{width: 100%}
   #aside {width: 90%; margin: 0 5%; background: rgba(243, 243, 234, 0.6); background: #e5e7da\9; padding: 0 0 2.5em 6px}
   #aside h2 {margin: 10px 0 0 ; padding: 10px 0 0}
   #aside p {margin: .5em 0 0 0}
   .alignleft {margin: 2px 8px 24px 0}
   .extended-address {float: none;}     
   #faq, address{display:none}
   #footer {margin-top: 30px}
   cite {margin-left: 1em; font-size: .9em}
}


/*-------------- tablet portrait -------------*/

@media only screen and (min-width:768px) and (max-width: 1023px) {
     #wrapper {width:740px}
     #intro {font-size: 2em}
     #intro em {margin: 35px 7px 20px}
     #site {width: 30.3%; font-size: .75em; line-height: 1.3}
     #site-text {margin-left: 17px; margin-bottom: 10px}
     .description {width: 140px; margin: 5px 10px 0 -20px}
     .photo {width: 80px; margin-top: 7px}
     .decorate {background: url("../img/divide.gif") no-repeat scroll 50px 0;}
     dt { color: #343f2f; font-size: 1.25em; margin: 0 0 .4em}
     .first {width: 30%}
     .second {width: 33%}
     dd {padding: .5em .2em .5em .3em; border-right: none; background: rgba(243, 243, 234, 0.6); font-weight: 500; font-size: 1.1em; line-height: 1.35em; }
     address {width: 21%}
     #faq h2 {color: #4a3a36; margin: 1.5em 0 0 1em}
     #aside {background: rgba(243, 243, 234, 0.6); background: #e5e7da\9; padding: 0 0 6px 6px}
     .alignleft {margin: 2px 8px 24px 0}
     .extended-address {float: none;}     
}

/*-------------- ipad mini tablet portrait -------------*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
   #wrapper {width:960px; margin-left: 10px}
   #intro {font-size: 44px}
   #site-text {margin-top: 20px; margin-left: 12px;font-size: 24px}
   .photo {width: 90px; margin-top: 14px}
   .description {width: 190px; font-size: 1.3em}
   #faq {margin-top: 250px}
}



/*==========================================
  PRINT
 ==========================================*/

@media print {
    body, #wrapper, #content, #main, #intro, #site, #site-text, #site em, #main, #faq, dt, dd, #footer, cite, address, cite span {background: #fff !important; color: #333 !important}
    #main {padding-top: 0}
    #footer {padding: 12px 0 0 0; border-top: 1px solid #aaa}
    address {padding-left: 0; margin: .7em 0; width: 21%; margin-top: 0}
}