@charset "UTF-8";
/* CSS Document */

/* Reset */
table, tr, th, td, p, a, h1, h2, h3, h4, ul, li { margin: 0px; padding: 0px; font-family:Verdana, Arial, Helvetica, sans-serif;}

/* Text Stylin' */
a { font-weight: normal; color: #000000; text-decoration: none;}
body { margin: 0; padding: 0; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; background-color: #FFFFFF;}
html {
    overflow-y: scroll;
}
h1 { color: #FFFFFF; text-shadow: 2px 2px 6px #282828; font-size: 2.5em;}

h2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.25em; font-style:italic; padding: .1em; padding-left: .3em; margin-bottom: 1em; background-color:#958585 ; color: #FFFFFF; text-shadow: 0px 0px 1px #999999}
h3 { padding: .5em; }

#shadow {  margin-right: auto; margin-left: auto; margin-bottom: 4px; max-width: 1200px; }
#header { background-image:url(../images/DOWCO-BG.jpg); background-repeat: no-repeat; min-height: 56px; margin: auto; display: block;}
#header h1 { padding-left: 0.5em; }
#mainblock {background-color:#EE9933; margin-top: .3em;}
#mainmenu { float: left; padding: 6px; margin-top: .1em; width: 184px; }
#mainmenu  li { padding: 0.3em; list-style-type: none;}
#mainmenu  li a { font-size: .95em; text-decoration: none; }
#mainmenu  li a:hover { color: #FFFFFF; }
#mainmenu  li .active { color: #FFFFFF; }
#content { background-color: #FFFFFF; margin-left: 196px; padding-left: 4px; padding-right: 0; min-height: 533px; -moz-box-shadow:inset 0 0 12px #EDEDED;-webkit-box-shadow:inset 0 0 12px #EDEDED;box-shadow: inset 0 0 12px #EDEDED; }
.narrow { margin-right: 196px; min-width: 804px} 
.narrow h2 {margin-right: 4px}
#staticHomeImage { height: 533px; max-width: 800px}

.project, #contactInfo { padding-bottom: 0em; margin-left: 1em; margin-right: 2em; clear: right}
.images { float: right; max-width: 80%; padding-bottom: 1em; text-align: right;  }
.title { border-bottom: 1px solid; padding-bottom: .2em; margin-bottom: .3em; font-size: 1em}
.sqft { font-style:italic; font-size: smaller; }
.location {font-size: smaller; padding-bottom: 1em}
.thumbnail { width: 175px; border:none; padding: 0 0 .5em .5em; vertical-align: top; }

.contact { font-size: 1.1em; padding: 1em; padding-left: 1em; padding-bottom: 4.2em; padding-top: 1em}

#footer { text-align:center; background-color: #FFFFFF; }

.billboard {text-align:center;}
.clearfloat { clear: both; padding-bottom: 3em}

/* Slideshow */
#slider { position: relative; overflow: hidden; }

#slider, #slider img { width: 800px; height: 533px; background-color: #958585; }

/* #slider li,#slider ul{
  padding:0;
  margin:0;
} */

/* #slider ul {
   position: absolute;
} */

#slider .slide { float: left; position: relative; display: none; }

/* For sane browsers..*/
#slider .slide:first-child{ display: block; }

#slider .slide span {
  position: absolute;
  left: 0;
  font: 1em Arial, Helvetica, sans-serif;
  opacity: 0.7; /*this is only used for non-IE on the first slide, before js is loaded, use spanOpacity option to change opacity*/
  background-color: #000;
  color: #fff;
  bottom: 0;
  padding: 10px 20px;
  width: 760px;
}
.project2 { font-size: 2.5em; }
.project3 { font-size: 1.8em; padding-bottom: .1em }
.subhead { font-size: 1.1em; }
.contractor { font-size: 1.5em; float: right; padding-bottom: .1em; }
.contractor2 { font-size: 1.5em; float: right; padding-bottom: .1em;}
.sqft2 { font-style:italic; font-size: 1.1em; float: right; clear: right;}

/* Mobile style */
@media only screen and (max-width: 800px) {
  html {max-width: 100vh; overflow-x: hidden;}
  .narrow {min-width: auto; margin: 0;}
  #header { background-image:url(../images/DOWCO-BG.jpg); width: 100vw; margin: 0; }
  h2 { display: none;}
  /* #header h1 { display: block;} */
  #shadow { width: 100vw; min-width: none; margin: 0; padding: 0; }
  #mainblock { margin-top: 0; display: flex; flex-direction: column; width: 100vw;}
  #mainmenu { padding: 0px; margin-top: .1em; width: 100vw; background-color:#EE9933; }  
  #mainmenu ul { display: flex; flex-direction: row; justify-content: center; align-items: center; }
  #mainmenu ul li { width: 33%; text-align: center; }
  #mainmenu ul li:first-child { display: none; }
  #mainmenu ul li a { font-weight:normal; color: #352525; text-shadow: 0 0 1px #DDDDDD;}
  #content { padding-top: 0.5em; margin-left: 0; padding-left: 0; max-width: 100vw; bottom: 100vh;}
  #mainmenu  li .active { color: #FFFFFF; font-size: 1.05em;}
  #slider { 
    top: -0.5em; 
  }
  #slider, #staticHomeImage { 
    max-width: 100vw; 
    width: 100vw; 
    bottom: 100vh; 
  }
  #slider, #slider img { 
    min-height: 82svh; 
    bottom: 100vh; 
  }
  /* #slider .slide span { width: 95vw; overflow: hidden;} */
  #slider .slide img { 
    /* display: block; */
    width: 100%;
  }
  #slider .slide span { 
    padding: 2vw; 
    max-width: 100vw; 
    width: 96vw; 
  }
  #overlay {width: 100vw !important; top: 0; right: 100vw}
  #outerImageContainer { max-width: 90vw; height: auto !important;}
  #imageContainer, #imageDataContainer {padding: 2vw; max-width: 86vw;height: auto;}
  #hoverNav, #nextLink, #prevLink  {max-width: 86vw; max-height: 100% !important;}
  #lightboxImage {max-width: 86vw;height: auto;} 
}