@charset "utf-8";
/* CSS BUILDERS ON BOARD */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Oswald:400,700);

html.authed { padding-top: 100px;}

html, body { padding: 0; margin: 0; font-family: 'Source Sans Pro', sans-serif; font-size: 15px; color: #666;}

h1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing:1px; font-weight: bold; font-size: 25px;}
h2 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing:1px; font-weight: bold; font-size: 20px;}
a { color:#EDC624; text-decoration: none; transition-property: color; transition-duration:0.3s; /* Safari */-webkit-transition-property: color; -webkit-transition-duration: 0.3s;}
p {}
a:hover { color: #666;}

a img { border: none;}

#header-extend { background-image:url('../images/header-shadow.jpg'); height: 140px; background-repeat: repeat-x;}
#header { width: 960px; margin: auto; height: 130px; position: relative;}
#logo { width: 160px; height: 120px; position: absolute; left: 0; top:0;}

#header-info { position: absolute; right: 0; top: 20px; }
#header-info p {color: #EDC624; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 20px;}

#menu {  height: 30px; width: 800px;}
ul#main { padding: 0; margin: 0; height: 30px; position: absolute; right: 0; top: 80px;}
ul#main li { list-style: none; float: left; padding-left: 35px; margin: 0;}
ul#main li a { display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;color: #fff; font-weight: 400; font-size: 15px; line-height: 30px; text-decoration: none; transition-property: color; transition-duration:0.3s; /* Safari */-webkit-transition-property: color; -webkit-transition-duration: 0.3s;}
ul#main li a:hover, ul#main li.sel a { color: #EDC624;}

ul#main.menu li ul.childmenu {display: none;  margin: 0; padding: 0; list-style: none; }

#services-menu { width: 960px; height: 40px; margin: 10px 0;}
#services-menu ul { width: 960px; padding: 0; margin: 0;}
#services-menu ul li { list-style: none; float: left; padding: 0; margin: 0;}
#services-menu ul li a { display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; font-size: 16px; padding-right: 40px; color: #999; line-height: 40px; transition-property: color; transition-duration:0.3s; /* Safari */-webkit-transition-property: color; -webkit-transition-duration: 0.3s;}
#services-menu ul li a:hover, #services-menu ul li.sel a { color: #333; text-decoration: none;} 

ul#residential-services li#residential-services a,
ul#residential-services li#residential-services a:hover,
ul#residential-services li#residential-services.sel a { font-size: 25px; line-height: 40px; border-right: solid 2px #333; margin-right: 40px; color: #333;} 

ul#commercial-services li#commercial-services a,
ul#commercial-services li#commercial-services a:hover,
ul#commercial-services li#commercial-services.sel a { font-size: 25px; line-height: 40px; border-right: solid 2px #333; margin-right: 40px; color: #333;} 


#footer-extend { background-color: #231F20; }
#footer { width: 960px; margin: auto; padding: 15px 0;}
#footer p { text-align: center; padding: 0; margin: 0;color: #fff;}
#footer a:hover { color: #fff;}

a.orcas { color: #999; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; padding-top: 20px;}
a.orcas:hover { color: #fff;}

#content { width: 960px; margin: 0 auto 40px auto; min-height: 500px;}

#banner { width: 960px; height: 350px; margin-top: -15px;}
#home-squares { margin: 15px 0 40px 0; height: 150px; }
#home-left { width: 620px; float: left;}
#home-right { width: 330px; float: right;}

#service-content { width: 960px; border-top: solid 3px #EDC624; padding: 30px 0; border-bottom: solid 1px #ccc;}
#service-left { float: left; width: 320px;}
#service-right { float: right; width: 600px;}

#col-left { float: left; width: 460px; margin-top: 20px;}
#col-right { float: right; width: 460px;margin-top: 20px;}

/* Home Banner */


.home-slider { height: 350px; width: 960px; overflow: hidden; position: relative;}
.home-slider .shadow { background-image: url('../images/banner-shadow.png'); background-repeat: repeat-x; width: 960px; height: 24px; position: absolute; left: 0 ; top: 0; z-index: 25;}

.home-slider .navigation {  width: 960px; height: 50px; position: absolute; left: 0; top: 150px; z-index: 10; }
.home-slider .navigation a.prev { width: 28px; height: 50px; display: block; float: left; background-image:url('../images/arrow-left.png'); background-repeat: no-repeat; opacity: 0.75; transition-property: opacity transition-duration:0.3s; /* Safari */-webkit-transition-property: opacity; -webkit-transition-duration: 0.3s;}
.home-slider .navigation a.next { width: 28px; height: 50px; display: block; float: right; background-image:url('../images/arrow-right.png'); background-repeat: no-repeat; opacity: 0.75; transition-property: opacity; transition-duration:0.3s; /* Safari */-webkit-transition-property: opacity; -webkit-transition-duration: 0.3s;}
.home-slider .navigation a span { display: none; }

.home-slider .navigation a.prev:hover,
.home-slider .navigation a.next:hover { opacity: 1; }

.home-slider .items { clear: both; }
.home-slider .items .item { width: 960px; height: 350px; position: absolute; left: 0; top:0;}
/* End Home Slider */

/* service sliders */
.slider { position: relative; overflow: hidden; z-index: 11; padding: 0; margin: 0;}
.slider .item { position: absolute; left: 0; top: 0; z-index: 15;}
.slider .navigation a.prev { width: 28px; height: 50px; background-image:url('../images/arrow-left.png'); background-repeat: no-repeat; position: absolute; left: 0; top: 175px; z-index: 16; opacity: 0.75; transition-property: opacity; transition-duration:0.3s; /* Safari */-webkit-transition-property: opacity; -webkit-transition-duration: 0.3s;}
.slider .navigation a.next { width: 28px; height: 50px; background-image:url('../images/arrow-right.png'); background-repeat: no-repeat; position: absolute; right: 0; top: 175px; z-index: 16; opacity: 0.75;}

.slider .navigation a:hover.prev { opacity: 0.8;}
.slider .navigation a:hover.next { opacity: 0.8;}

.services-item { width: 600px; height: 400px; position: relative; }
.services-item .items { width: 600px; height: 400px; position: absolute; left: 0; top: 0;}

.about-item { width: 460px; height: 307px; position: relative; }
.slider.about-item .navigation a.prev { top: 125px; }
.slider.about-item .navigation a.next  { top: 125px; }
/*end*/
.list-title {width: 960px; border-bottom: solid 3px #EDC624; padding: 30px 0 15px 0; margin-bottom: 20px;font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; font-size: 25px; color: #666;}
.home-squares { width: 975px; margin-bottom: 20px;}
.home-squares .square { width: 310px; height: 150px; float: left; margin: 0 15px 15px 0; }
.home-squares .square a { display: table; width: 310px; height: 150px; position: relative;}
.home-squares .square a:hover { text-decoration: none;}
.home-squares .square a .title { display: table-cell; vertical-align: middle; z-index: 20; font-family: 'Oswald', sans-serif; font-weight: bold; color: #fff; text-align: center; height: 150px; width: 310px; text-transform: uppercase; line-height: 39px; font-size: 35px;background-image:url('../images/opaque-grey.png'); background-repeat: repeat;}
.home-squares .square a:hover .title {background-image:url('../images/opaque-yellow.png'); background-repeat: repeat; text-decoration: none;}

.contact-form { width: 400px; padding: 20px 60px 20px 20px; background-color: #ccc; background-image:url('../images/form-arrow.jpg'); background-repeat: no-repeat; background-position: right top;}
.contact-form .title {  float: left; width: 90px;}
.contact-form .field { padding: 5px 0;}
.contact-form .input { width: 290px; margin-left: 110px;}
.contact-form .input input { width: 290px; border: none; padding: 3px;}
.contact-form .field.field_920 { padding-bottom: 10px;}
.contact-form .field.field_920 .input select { width: 290px; border: none; padding: 3px;}
.contact-form .field.field_921 { margin-top: 5px;} 
.contact-form .field .input textarea { width: 288px; border: none; height: 80px; font-family: Arial, Helvetica, sans-serif; padding: 3px;}
.contact-form .submit { text-align: right; width: 400px; margin-top: 10px;}
.contact-form .submit input { color: #ccc; background-color: #999; border: none; cursor: pointer; font-family: "Oswald", sans-serif; font-size: 16px; text-transform: uppercase; padding: 0 20px; transition-property: background-color; transition-duration:0.3s; /* Safari */-webkit-transition-property: background-color; -webkit-transition-duration: 0.3s;}
.contact-form .submit input:hover { background-color: #EDC624; color: #666; }

.contact-form.contact { width: 400px; padding: 20px 20px 20px 40px; background-color: #ccc; background-image:url('../images/form-arrow-contact.jpg'); background-repeat: repeat-y; background-position: left top;}
.contact-form.contact .input input { width: 284px; padding: 3px;}
.contact-form.contact .field.field_924 { padding-bottom: 10px;}
.contact-form.contact .field.field_924 .input select { width: 290px; border: none; padding: 3px;}
.contact-form.contact .field.field_925 { margin-top: 5px;}

.contact-form.home-form { width: 270px; padding: 10px 20px 10px 40px; background-color: #ccc; background-image:url('../images/form-arrow-contact.jpg'); background-repeat: no-repeat; background-position: left top;}
.contact-form.home-form .title { float: none; width: 270px;}
.contact-form.home-form .field { padding: 6px 0 0 0;}
.contact-form.home-form .input { width: 264px; margin-left: 0; }
.contact-form.home-form .input input { width: 264px; }
.contact-form.home-form .field .input textarea { width: 264px; margin-top: 5px;}
.contact-form.home-form .field.field_920 .input select { width: 264px;}
.contact-form.home-form .submit { width: 270px;}

.gallery {  }
.gallery .images { width: 975px;}
.gallery .images .image { width: 310px; height: 207px; float: left; margin: 15px 15px 0 0;}
.gallery .clear{ clear: left;}