body {
	background-image: url(../images/bg4.png);
	color:#b7aca8;
}

* {
	margin: 0;
	padding: 0;
}

#header {
	background-image:url(../images/header_bg4.png); 
	background-repeat: repeat-x;
	margin-top:0px;
	margin-left:0px;
	width: 100%;
	height: 50px;
	position: fixed;
	z-index:1;
}

#header img {
	margin-left:165px;
	margin-top:0px;
	float:left;
}	

#header p {
	margin-left:165px;
	margin-top:0px;
	float:left;
	font-family: 'Spinnaker', sans-serif;
	font-size:48px;	
	color:#f2ebe5;
}

#header p, #header p:active, #header p:visited {text-decoration:none; color:#f2ebe5;}
#header p:hover {color:#ba7b20}

#header ul {
	width:800px;
	height:50px;
	list-style-type: none;
	margin-left:600px;
	font-family: LatoLight;
}

#header li {
	float:left;	
	margin-right:20px;
	margin-top:20px;
}

#header a, #header a:active, #header a:visited {text-decoration:none; color:#ffffff;}
#header a:hover {color:#ba7b20}

#topper {
	width:100%;
	height:45px;
}

#container {
	width: 1009px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
}

#sliderWrapper {
	width:1009px;
	height:326px;
	background-image:url(../images/slider_bg2.png);
	background-repeat:no-repeat;
}

#s3slider { 
   width: 978px; /* important to be same as image width */ 
   height: 281px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   margin-left:auto;
   margin-right:auto;
}

#s3sliderContent {
   width: 978px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 978px;
   background-color: #000;
   filter: alpha(opacity=50); /* here you can set the opacity of box with text */
   -moz-opacity: 0.5; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.5; /* here you can set the opacity of box with text */
   opacity: 0.5; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.header {
	width:500px;
	margin-top:50px;
}

.header p {
	font-family: LatoRegular;
	font-style:italic;
	font-size:18px;	
	color:#a5bbc9;
}

h1 {
	font-family: 'Spinnaker', sans-serif; /*'Neucha';*/
	font-size:30px;
	margin-bottom:10px;
	color:#397195; /*7ea2b8 b7aca8*/
	text-shadow: 2px 2px #acc8d9;
}

h2 {
	font-family: 'Spinnaker', sans-serif;
	font-size:28px;
	color:#8fb8d1;
	text-shadow: 1px 1px #ffffff;
	margin-bottom:15px;
}

h3 {
	font-family: 'Spinnaker', sans-serif;
	font-size:24px;
	color:#8fb8d1;
	text-shadow: 1px 1px #ffffff;
	margin-bottom:20px;
	text-transform:uppercase;
}

h4 {
	width:700px;
	height:80px;
	margin-left:auto;
	margin-right:auto;
}

h4 a {
	font-family: 'Neucha', sans-serif;
	color:#f2ebe5;
	font-size:56px;
	text-shadow: 3px 3px #0e1c29;
	letter-spacing:14px;
	text-decoration:none;
}

h4 a, h4 a:active, h4 a:visited {text-decoration:none;}
h4 a:hover {color:#e9ce99; text-shadow: 2px 2px #0e1c29;}

h5 {
	font-family: 'Spinnaker', sans-serif;
	color:#ffffff;
	text-shadow: 1px 1px #000000;
	font-size:20px;
	text-decoration:none;
	position:relative;
	left: 22px; top: -25px;
}

h5:hover {color:#ba7b20; text-decoration:none;}

a {
	text-decoration:none;
}

#mainContent {
	width: 978px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}

#mainContent p {
	font-family: 'Spinnaker', sans-serif;
	color:#397195; /*7ea2b8 b7aca8*/
	text-shadow: 2px 2px #acc8d9;
	font-size:26px;
}

#row1 {
	width:978px;
	height:150px;
	margin-top:40px;
}

#row1 p {
	margin-top:40px;
	text-align:center;
	font-size:35px;
}

#row2 {
	width:978px;
	height:380px;
	margin-top:20px;
}

#row2c1 {
	width:320px;
	height:380px;
	float:left;
}

#row2c1 p {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:20px;
}

#row2c1 img {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#row2c2 {
	width:320px;
	height:380px;
	float:left;
}

#row2c2 p {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:20px;
}

#row2c2 img {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#row2c3 {
	width:320px;
	height:380px;
	float:left;
}

#row2c3 p {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:20px;
}

#row2c3 img {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#row3 {
	width:978px;
	height:340px;
	margin-top:20px;
}

#row3c1 {
	width:281px;
	height:340px;
	float:left;
}

#row3c1 p {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:20px;
}

#row3c1 img {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#row3c2 {
	width:321px;
	height:340px;
	float:left;
}

#row3c2 p {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:20px;
}

#row3c2 img {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#row3c3 {
	width:350px;
	height:340px;
	float:left;
}

#row3c3 p {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:20px;
}

#row3c3 img {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}


#row4 {
	width:800px;
	height:400px;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
}

#row4c1 {
	width:410px;
	height:auto;
	margin-top:50px;
	float:left;
}

#row4c2 {
	width:350px;
	height:auto;
	margin-top:60px;
	margin-left:40px;
	float:left;
}

#row4 p {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:15px;
	font-family: 'Spinnaker', sans-serif;
	color:#b4c9d8; 
	font-size:26px;
}

#row4 img {
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	text-align:center;
}

.break {
	width: 100%;
	height: 10px;
	margin-top:20px;
	background-image:url(../images/break.png);
	background-repeat:repeat-x;
}

#galleryLinks {
	width: 978px;
	height: 700px;
	margin-left:auto;
	margin-right:auto;
}

#galleryLinks a, #galleryLinks a:active, #galleryLinks a:visited {text-decoration:none; font-family: 'Spinnaker', sans-serif; font-size: 44px; color:#ffffff;} #galleryLinks a:hover {color:#7ea2b8}

#galleryLinks p {
	margin-top:155px;
	text-align:center;
}

#buttonDrawings {
	width:400px;
	height:350px;
	background-image:url(../images/button_drawings.png);
	background-repeat:no-repeat;
	float:left;
	margin-right:100px;
	margin-left:35px;
}

#buttonNewhomes {
	width:400px;
	height:350px;
	background-image:url(../images/button_newhome.png);
	background-repeat:no-repeat;
	float:left;
}

#buttonRemodels {
	width:400px;
	height:350px;
	background-image:url(../images/button_remodel.png);
	background-repeat:no-repeat;
	float:left;
	margin-right:100px;
	margin-left:25px;
}

#buttonInteriors {
	width:400px;
	height:350px;
	background-image:url(../images/button_interiors.png);
	background-repeat:no-repeat;
	float:left;
}

#drawings {
	width: 978px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}

#drawings ul {
	display: inline-block;
	width:auto;
	height:auto;	
}

#drawings li {
	margin-bottom:20px;
	margin-right:20px;
	width:130px;
	height:130px;
	float:left;
	background-image:url(../images/thumb_bg.png);
	background-repeat:no-repeat;
}

#drawings img {
	margin-left:15px;
	margin-top:15px;
}

#long {
	background:url(../images/thumb_bg3.png);
	background-repeat:no-repeat;
	height: 380px;
	width:900px;
	margin-bottom:15px;
}

.story {
	width:978px;
	height:400px;
}

#medium {
	width:430px;
	height:400px;
	background-image:url(../images/thumb_bg4.png);
	background-repeat:no-repeat;
	float:left;
}

#mediumThumb {
	width: 500px;
	height:400px;
	float:left;
	margin-left:20px;
}

.clear {
   clear: both;
}

#columnTitle {
	width:400px;
	height:80px;
	margin-top:60px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#columnTitle p {
	font-family: LatoRegular, Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#86807e;
	width:600px;
}

#newHome {
	width:1009px;
	height:600px;
}

#newhomeContent {
	width:1009px;
	height:700px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
}

#remodel {
	width:978px;
	height:600px;
	margin-left:auto;
	margin-right:auto;
}

#remodelContent {
	width:900px;
	height:700px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}

#quote {
	width:900px;
	height:170px;
	text-align:center;
}

#caseStudy {
	width:407px;
	height:608px;
	margin-left:530px;
	position:absolute;
	background-image:url(../images/casestudy.png);
	background-repeat:no-repeat;
}

.column1 {
	width:400px;
	height:auto;
	margin-left:20px;
}

.column1 p {
	font-family: LatoRegular;
	font-size:19px;	
	color:#5f8aa5;
}

.columnSmall {
	width:200px;
	height:500px;
	float:left;
	margin-right:50px;
}

.columnSmall p {
	font-family: LatoRegular;
	font-size:19px;	
	color:#5f8aa5;
}

#define {
	width:300px;
	height:auto;
	margin-left:30px;
	margin-top:30px;
	background-image:url(../images/light_bg.png);
	padding:20px;
}

#define p {
	font-family: LatoRegular;
	font-size:14px;	
	color:#5f8aa5;
}

.columnMed {
	width:250px;
	height:500px;
	float:left;
	margin-right:50px;
}

.columnMed p {
	font-family: LatoRegular;
	font-size:19px;	
	color:#5f8aa5;
}

#about {
	width:978px;
	height:700px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
}

#columnAbout {
	width:450px;
	height:600px;
	float:left;
	font-family: LatoRegular;
	font-size:19px;	
	color:#5f8aa5;
	margin-top:50px;
	margin-left:70px;
}


#columnPhoto {
	width:440px;
	height:600px;
	float:left;
}

#end {
	width:100%;
	height:420px;
	background-image:url(../images/footerMain_bg.png);
	background-repeat:repeat-x;
}

#footerMain {
	width: 100%;
	height:300px;
	background-color:#2f2f2f;
	margin-top:0px;
}

#footerMain p {
	width:700px;
	height:70px;
	padding-top:6px;
	margin-left:auto;
	margin-right:auto;
	font-family: 'Spinnaker', sans-serif;
	font-size:80px;	
	color:#f2ebe5;
	text-shadow: 3px 3px #0e1c29;
	letter-spacing:10px;
}

#address {
	width: 100%;
	height:80px;
	background-color:#2f2f2f;
	margin-top:25px;
	margin-bottom:0px;
}

#address p {
	width:900px;
	height:70px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	font-family: 'Spinnaker', sans-serif;
	font-size:20px; 
	color:#839fb7; 
	text-shadow: 2px 2px #152839;
	letter-spacing:7px;
}

#footerDark {
	width:100%;
	height:155px;
	background-image:url(../images/footer_bg.png);
	background-repeat:repeat-x;
	margin-top:300px;
}

#footerDark2 {
	width:100%;
	height:40px;
	background-image:url(../images/footer_bg2.png);
	background-repeat:repeat-x;
	margin-top:200px;
}

#footerDark p {
	width:700px;
	height:70px;
	padding-top:6px;
	margin-left:auto;
	margin-right:auto;
	font-family: 'Spinnaker', sans-serif;
	font-size:80px;	
	color:#f2ebe5;
	text-shadow: 2px 2px #397195;
	letter-spacing:10px;
}

#footer {
	width:100%;
	height:40px;
	margin-bottom:0px;
}

#footer p {
	margin-top:20px;
	text-align:center;
	font-family: 'Spinnaker', sans-serif;
	font-size:16px;	
	color:#3c3c3c;
	letter-spacing:2px;
}

@font-face {
    font-family: ArchitectsDaughter;
    src: url(../fonts/ArchitectsDaughter.ttf);
}

@font-face {
	font-family: LatoRegular;
	src: url(../fonts/Lato-Reg-webfont.ttf);
}

@font-face {
	font-family: LatoLight;
	src: url(../fonts/Lato-Lig-webfont.ttf);
}

@font-face {
	font-family: LatoBold;
	src: url(../fonts/Lato-Bol-webfont.ttf);
}