/*
Theme Name: API
Description: Custom Template for downstairsdesignstudio.com
Version: 1.0
Author: Downstairs Design
*/


/* reset the css rules */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
:focus {outline: 0;}

/* set up some pre-determined styles */
.clear {width: 100%; height: 1px; background: transparent; clear: both;}
.wp-caption {border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px;}
.wp-caption img {margin: 0; padding: 0; border: 0 none;}
.wp-caption-dd {font-size: 8pt; line-height: 17pt; padding: 0 4px 5px; margin: 0;}
.wp-caption-text {font-size: 8pt; line-height: 17pt;}
.alignleft {float: left; border: 5px solid #fff; outline: 1px solid #ccc;}
.aligncenter {margin: 0 auto; clear: both; text-align: center; border: 5px solid #fff; outline: 1px solid #ccc;}
.alignright {float: right; border: 5px solid #fff; outline: 1px solid #ccc;}
.alignnone {border: 5px solid #fff; outline: 1px solid #ccc;}

/* Begin page styling */
html, body {background: #ebebeb; font: 12pt/16pt Arial, sans-serif; color: #000000;}
#wrapper {background: #030344 url(images/bodybg.jpg) top left repeat-x; width: 100%; margin: 0; padding: 0 0 30px 0;}



a {color: #ca3527; text-decoration: none;}
a:hover {color: #333; text-decoration: none;}

h1 {color: #6789a2; font: 28pt Arial, sans-serif;}
h1 a {color: #6789a2; font: 28pt Arial, sans-serif; text-decoration: none;}
h1 a:hover {color: #6789a2; font: 28pt Arial, sans-serif; text-decoration: underline;}

.post h1 {color: #6789a2; font: 20pt/18pt Arial, sans-serif; padding-bottom: 10px;}
.post h1 a {color: #6789a2; font: 20pt/18pt Arial, sans-serif; padding-bottom: 10px;}
.post h1 a:hover {text-decoration: underline;}

h2 {color: #6789a2; font: 22pt Arial, sans-serif;}
h3 {color: #000; font: 14pt Arial, sans-serif; font-weight: bold;}
h4 {color: #6789a2; font: 14pt Arial, sans-serif; font-weight: bold;}
h5 {color: #ca3527; font: 14pt Arial, sans-serif;  font-weight: bold;}
p {color: #000;}
caption {font: 8pt/12px Arial, sans-serif; font-style: italic;}
ul {padding-left: 10pt; margin-left: 0;}

.odd {background: #efeedf; padding: 8px 15px;}
.even {background: transparent; padding: 8px 15px;}


/* Header */
#header {background: transparent; height: 88px; width: 960px; margin: 0 auto;}
#header .logolink {float: left; width: 456px; height: 88px;}
#searchblock {position: relative; background: #efefef; width: 226px; height: 27px; float: right; margin: 40px 5px 0 0;}
#searchblock #searchform {float: left; width: 226px; height: 27px;}
#searchblock #searchform input {float: left; margin: 2px 0 0 0;}
#searchblock #searchform #search_here {width: 180px; background: transparent; margin: 2px 0 0 7px; border: 0; outline: 0; color: #757575; font-size: 10pt; font-style: italic; padding: 2px 0 0 0;}
#searchblock #searchform #searchgo {float: left;}

/* Navigation */
#navcontainer {width: 960px; height: 40px; margin: 0 auto; background: transparent url(images/navbg.jpg) top left no-repeat; font-size: 14px; position: relative; z-index: 999;}



#homeslider {position: relative; z-index: 1; width: 960px; height: 287px; margin: 0 auto; background: transparent url(images/homesliderbg.jpg) top left no-repeat; text-align: center;}
#homeslider #slides {width: 918px; height: 269px; margin: 0 auto; text-align: center; overflow: hidden; background: #000; z-index: 10;}
#homeslider img {width: 918px; height: 269px; overflow: hidden;}
#homeslider #slidenavs {font: 9pt/9pt Arial, sans-serif; position: relative; margin-top: 10px; z-index: 0;}
#homeslider #slidenavs a { color: #fff; padding: 2px 4px; margin: 0px 2px;}
#homeslider #slidenavs .activeSlide {background: #757575;}

/* Page content */
#content {width: 960px; margin: 15px auto 0 auto; background: #fff;}
#content-inner {padding: 15px;}



#leftside {width: 625px; float: left; height: 100%; font: 9pt/12pt Arial, sans-serif;}
 .highlight {float: left; width: 98%; height: 80px; background: #efeffd; font: 9pt/12pt Arial, sans-serif; padding: 10px 0 10px 10px; margin: 5px 0;}
 .highlight ul {margin-top: 8px;}
 .highlight ul li {width: 30%; float: left; display: inline-block;}
 #leftside .block {background: #e4e4e3; margin-bottom: 10px; padding: 2px;}
 #leftside .block-inner {}
 #leftside .blocktitle {width: 100%; padding: 10px 0 0 4px; height: 30px; background: transparent url(images/leftbt.jpg) top left repeat-x; color: #6789a2; font: 14pt/14pt Arial, sans-serif;}
 #leftside .blocktitle .titleleft {float: left;} 
 #leftside .blocktitle span {float: left; font-size: 11px;}
 #leftside .blocktitle .quotebutton {position: relative; float: right; top: -3px; margin-right: 6px; padding-top: 3px; height: 22px;}
 #leftside .blockcontent {padding: 4px; background: #f7f8fc;}
 #leftside .blockcontent .trailer {width: 32%; float: left; margin-right: 8px;}
 #leftside .blockcontent .trailer .treater {float: left; width: 204px; height: 128px; margin: 0 auto; background: transparent url(images/frontthumb_bg.jpg) top left no-repeat;}
 #leftside .blockcontent .trailer .treater img {width: 187px; height: 108px; overflow: hidden; margin: 9px 0 0 8px;}
 #leftside .blockcontent .trailer h3 {font: 14pt/16pt Arial, sans-serif; padding: 0 0 0 5px;}
 #leftside .blockcontent .trailer p {font: 9pt/12pt Arial, sans-serif; padding: 0 0 0 5px;}
 #leftside .blockcontent .trailer .more {font: 7pt/11pt Arial, sans-serif; float: right; padding: 0 5px 0 0;}

#rightside {width: 296px; float: left; height: 100%; margin-left: 9px; font: 10pt/14pt Arial, sans-serif;}
 #rightside .block {width: 296px; background: #e4e4e3; margin-bottom: 10px; padding: 2px;}
 #rightside .block-inner {background: #fdfdfd url(images/blockbg.jpg) top left repeat-x; padding: 4px;}
 #rightside .blocktitle {padding: 10px 0 0 4px; height: 30px; background: transparent; color: #ca3527; font: 14pt/16pt Arial, sans-serif;}
 #rightside .blocktitle img {float: left;}
 #rightside .blocktitle span {float: left; font: 14pt/16pt Arial, sans-serif; margin: 3px 0 0 8px;}
 #rightside .blockcontent {padding: 4px; color: #757575; font: 10pt/14pt Arial, sans-serif;}
 #rightside .blockcontent p {color: #757575; font: 10pt/14pt Arial, sans-serif;}
 #rightside .blockcontent a {color: #6789a2;}
 #rightside .blockcontent a:hover {text-decoration: underline;}
 #rightside .blockcontent .quotebutton {float: right; background: transparent url(images/quotebuttonbg.jpg) top left repeat-x; color: #fff; padding: 1px 5px 0 5px; height: 22px; font: 12pt/16pt Arial, sans-serif;}
 #rightside .blockcontent .quotebutton:hover {color: #ccc; text-decoration: none;}
 #rightside .blockcontent .rightred {float: right; padding: 4px 4px 0 0; color: #ca3527;}
 #rightside #apiwasteblock .blockcontent .quotebutton {margin-top: 8px; font: 12pt/16pt Arial, sans-serif;}

 #rightside #membersblock .blockcontent {height: 180px; overflow: hidden;}
 #rightside #membersblock .memberlinks {width: 100%; height: 175px; overflow: hidden; position: relative; top: -175px;}
 #rightside #membersblock .memberlinks a {float: left; width: 33%; height: 90px; background: transparent url(images/blank.gif) top left repeat;}
  #rightside #membersblock .memberlinks #link1 {width: 33%;}
  #rightside #membersblock .memberlinks #link2 {width: 33%;}
  #rightside #membersblock .memberlinks #link3 {width: 33%;}
  #rightside #membersblock .memberlinks #link4 {width: 15%;}
  #rightside #membersblock .memberlinks #link5 {width: 45%;}
  #rightside #membersblock .memberlinks #link6 {width: 33%;}


 #rightside .blockcontent .newsbox ul {float: left; list-style: none; margin: 0; padding: 0;}
 #rightside .blockcontent .newsbox .post-title {float: left; clear: none; margin: 0 5px 0 0; padding: 0; font: 11pt/14pt Arial, sans-serif;}
 #rightside .blockcontent .newsbox .post-date {float: left; clear: none; color: #b8b8b8; font: 8pt/14pt Arial, sans-serif; margin: 2px 0 0 5px; width: 25%}
 #rightside .blockcontent .newsbox p {float: left; clear: left; width: 100%; color: #757575; font: 10pt/14pt Arial, sans-serif; margin-top: 5px;}
 #rightside .blockcontent .newsbox p img {float: left; margin: 0 5px 2px 0; border: 2px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 0 2px #666; -moz-box-shadow: 0 0 2px #666; -webkit-box-shadow: 0 0 2px #666;}
 #rightside .blockcontent #morenews {float: right; padding: 4px 4px 0 0; color: #ca3527;}

.quotebutton {float: right; background: transparent url(images/quotebuttonbg.jpg) top left repeat-x; color: #fff; padding: 0 5px; height: 25px; font: 11pt/16pt Arial, sans-serif;}
.quotebutton:hover {color: #ccc; text-decoration: none;}

.gallerypage h1 img {margin: 0 10px 0 0;}
.gallerypage h1 span {font: 9pt/10pt Arial, sans-serif; color: #ca3527; margin: 0 0 0 10px;}
.gallerypage .gallery {float: left; margin: 15px 0 15px 0; width: 100%;}

.gallerypage .office_trailers h2 {font: 12pt/12pt Arial, sans-serif; color: #fff; background: url(images/officetrailer_gallery_title.jpg) top left no-repeat; width: 181px; text-align: center; padding: 3px 0 2px 0;}
.gallerypage #officetrailer_gallery {width: 900px; height: 170px; float: left; overflow: auto; padding: 8px; background: #ebe5d8;}
 
.gallerypage .modular_buildings h2 {font: 12pt/12pt Arial, sans-serif; color: #fff; background: url(images/modularbuildings_gallery_title.jpg) top left no-repeat; width: 181px; text-align: center; padding: 3px 0 2px 0;}
.gallerypage #modularbuildings_gallery {width: 900px; height: 170px; float: left; overflow: auto; padding: 8px; background: #e8e7f0;}

.gallerypage .modular_homes h2 {font: 12pt/12pt Arial, sans-serif; color: #fff; background: url(images/modularhomes_gallery_title.jpg) top left no-repeat; width: 181px; text-align: center; padding: 3px 0 2px 0;}
.gallerypage #modularhomes_gallery {width: 900px; height: 170px; float: left; overflow: scroll; padding: 8px; background: #e0e6df;}


.gallerypage .layout1 h2 {font: 12pt/12pt Arial, sans-serif; color: #fff; background: url(images/officetrailer_gallery_title.jpg) top left no-repeat; width: 181px; text-align: center; padding: 3px 0 2px 0;}
.gallerypage #layout_gallery1 {width: 900px; height: 150px; float: left; overflow: auto; padding: 8px; background: #ebe5d8;}
 
.gallerypage .layout2 h2 {font: 12pt/12pt Arial, sans-serif; color: #fff; background: url(images/modularbuildings_gallery_title.jpg) top left no-repeat; width: 181px; text-align: center; padding: 3px 0 2px 0;}
.gallerypage #layout_gallery2 {width: 900px; height: 150px; float: left; overflow: auto; padding: 8px; background: #e8e7f0;}

.gallerypage .layout3 h2 {font: 12pt/12pt Arial, sans-serif; color: #fff; background: url(images/modularhomes_gallery_title.jpg) top left no-repeat; width: 181px; text-align: center; padding: 3px 0 2px 0;}
.gallerypage #layout_gallery3 {width: 900px; height: 150px; float: left; overflow: auto; padding: 8px; background: #e0e6df;}

.gallerypage .layout4 h2 {font: 12pt/12pt Arial, sans-serif; color: #fff; background: url(images/layout4_gallery_title.jpg) top left no-repeat; width: 181px; text-align: center; padding: 3px 0 2px 0;}
.gallerypage #layout_gallery4 {width: 900px; height: 150px; float: left; overflow: auto; padding: 8px; background: #f6e6d6;}

.gallerypage .layout5 h2 {font: 12pt/12pt Arial, sans-serif; color: #fff; background: url(images/layout5_gallery_title.jpg) top left no-repeat; width: 181px; text-align: center; padding: 3px 0 2px 0;}
.gallerypage #layout_gallery5 {width: 900px; height: 150px; float: left; overflow: auto; padding: 8px; background: #f7e3de;}

.gallerypage .gallery .ngg-galleryoverview {white-space: nowrap; float: left; font-size: 12px;}
.gallerypage .gallery .ngg-gallery-thumbnail-box {width: 145px; float: left; display: inline; white-space: nowrap; text-align: center; margin: 0 20px; text-align: center;}
.gallerypage .gallery .ngg-gallery-thumbnail {width: 132px; margin: 0 auto; text-align: center; clear: both;}
.gallerypage .gallery .ngg-gallery-thumbnail a {float: left; width: 132px; height: 85px; background: url(images/sidebar-gallery-image-bg.png) top left no-repeat; clear: both;}
.gallerypage .gallery .ngg-gallery-thumbnail a img {float: left; width: 119px; height: 69px; margin: 7px 0 0 5px;}
.gallerypage .gal_projectname {width: 110%;clear: both; white-space: normal; margin-left: -5%}

/* footer */
#footer {width: 100%; height: 211px; background: transparent url(images/footbg.jpg) top left repeat-x;}
#footer-inner {width: 960px; margin: 0 auto;}
#quickabout {width: 306px; height: 170px; float: left; background: transparent url(images/quickaboutbg.jpg) top left no-repeat; margin-top: 20px;}
 #quickabout h4 {color: #ca3527; font-weight: bold; font: 12pt/18pt Arial, sans-serif; padding-top: 15px; padding-left: 8px;}
 #quickabout p {color: #323232; font-weight: bold; font: 10pt/12pt Arial, sans-serif; padding-left: 8px;}

#footlinks {width: 595px; float: left; margin: 20px 0 0 55px;}
 #footlinks #footleft {width: 257px; float: left; border-top: 1px solid #dadada; border-bottom: 1px solid #f7f7f7;}
 #footlinks #footright {width: 257px; float: left; border-top: 1px solid #dadada; border-bottom: 1px solid #f7f7f7; margin-left: 31px}
 #footlinks #footleft a, #footlinks #footright a {font-size: 13px; display: block; border-top: 1px solid #f7f7f7; border-bottom: 1px solid #dadada; padding: 3px 0 3px 15px; color: #8a8b8b;}
 #footlinks #footleft a:hover, #footlinks #footright a:hover {color: #000;}
 #footlinks p {color: #8a8b8b; font-size: 9px; margin-top: 10px;}
 #footlinks p a {color: #8a8b8b;}
 #footlinks p a:hover {color: #000;}

#footercopy {width: 600px; margin: 0 auto; text-align: center; position: relative; top: -25px; left: 80px; color: #000; font-size: 13px; font-weight: bold;}


#projectpage #bigpic {float: left; width: 529px; height: 322px; background: url(images/project_photobg.jpg) top left no-repeat;}
#projectpage #bigpic img {width: 487px; height: 275px; margin: 23px 0 0 21px;}
#projectpage #projectdesc {float: left; width: 390px; margin: 10px 0 0 5px;}
#projectpage #projectdetails {width: 100%; float: left; clear: both; margin: 15px auto 0 auto;}
#projectpage #projectdetails div {width: 30%; float: left;}
 #projectpage #projectdetails #detail1 {margin: 0 2% 0 1%;}
 #projectpage #projectdetails #detail2 {margin: 0 1% 0 2%;}
 #projectpage #projectdetails #detail3 {margin: 0 1% 0 2%;}

#projectpage #projectdetails div div.projectdetail_thumb {width: 245px; height: 155px; background: url(images/projectdetail_picbg.jpg) top left no-repeat;}
#projectpage #projectdetails div div.projectdetail_thumb img {width: 224px; height: 129px; margin: 13px 0 0 10px;} 
#projectpage #projectdetails div h2 {color: #dd0000; font: 14pt/18pt Arial, sans-serif; padding: 6px 0 0 8px;}
#projectpage #projectdetails div p {color: #676767; font: 11pt/14pt Arial, sans-serif; padding: 6px 0 0 8px;}

#projectpage #projectquotes {width: 100%; float: left; margin: 15px auto 10px auto; padding-left: 1%;}
#projectpage #projectquotes #quotebox {width: 560px; height: 209px; float: left; background: url(images/customer-quote-bg.jpg) top left no-repeat; margin: 20px 0 0 20px;}
#projectpage #projectquotes #quotebox #innerquote {padding: 20px; color: #fff; font: 10pt/16pt Arial, sans-serif; font-style: italic;}

.sidegalitems div {float: left; width: 100%; clear: both; margin: 8px 0 0 0;}
.sidegalitems div a.shutterset_ngg-images-2 {float: left; width: 132px; height: 85px; background: url(images/sidebar-gallery-image-bg.png) top left no-repeat;} 
.sidegalitems div a {width: 50%; float: left; margin: 0 0 8px 0;}
.sidegalitems div a.shutterset_ngg-images-2 img {width: 119px; height: 69px; margin: 7px 0 0 5px;}

.blog .post {padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #030343}
.blogdate {display: none;}
.blog .blogdate {display: block;}