/*

Authour: Graphic D-Signs
Author URI: http://www.GraphicD-Signs.com
Client: DC Construction
Date: May 2010
Website: http://www.DCConstructionNJ.com
Description: This is the main stylesheet for DC Construction.

*/

@import url(reset.css);

body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; }
.main { background: url(../images/bg.jpg) no-repeat top #000000; }
.inner { background: url(../images/bginner.jpg) no-repeat top #000000; }
#container { position: relative; width: 979px; margin: 0 auto; }
p { line-height: 19px; color: #000; }
a { color: #6e1c1c; text-decoration: underline; outline: none;}
a:hover { color:#666;}

/* Navigation Styles */

#nav { position: relative; width: 980px; top: -70px; }
.navigation { position: absolute; width: 980px; margin: 0; padding: 0; list-style: none; z-index: 10000; top: 0; font-size: 12px; }
.navigation li { float: left; text-align: center; font-size: 12px;  }
.navigation li a { display: block; text-indent: -9999px; vertical-align: middle; height: 42px; text-decoration: none; text-align: center; outline: none; font-size: 12px; }

/* Home Button */
.navigation li a.nav2 { width: 90px; background: url(../images/nav.jpg) no-repeat 0 0; }
.navigation li a.nav2:hover, .navigation li.active a.nav2 { background-position: 0 -42px; }

/* About Us Button */
.navigation li a.nav3 { width: 122px; background: url(../images/nav.jpg) no-repeat -90px 0; }
.navigation li a.nav3:hover, .navigation li.active a.nav3 { background-position: -90px -42px; }

/* Services Button */
.navigation li a.nav4 { width: 116px; background: url(../images/nav.jpg) no-repeat -212px 0; }
.navigation li a.nav4:hover, .navigation li.active a.nav4 { background-position: -212px -42px; }

/* Testimonials Button */
.navigation li a.nav5 { width: 150px; background: url(../images/nav.jpg) no-repeat -328px 0; }
.navigation li a.nav5:hover, .navigation li.active a.nav5 { background-position: -328px -42px; }

/* Photo Gallery Button */
.navigation li a.nav6 { width: 161px; background: url(../images/nav.jpg) no-repeat -478px 0; }
.navigation li a.nav6:hover, .navigation li.active a.nav6 { background-position: -478px -42px; }

/* Discounts And Rebates Button */
.navigation li a.nav7 { width: 216px; background: url(../images/nav.jpg) no-repeat -638px 0; }
.navigation li a.nav7:hover, .navigation li.active a.nav7 { background-position: -638px -42px; }

/* Contact Us Button */
.navigation li a.nav8 { width: 124px; background: url(../images/nav.jpg) no-repeat -856px 0; }
.navigation li a.nav8:hover, .navigation li.active a.nav8 { background-position: -856px -42px; }

div#nav span:hover { display: block; color: #ffffff; text-decoration: none; margin: 0; background: #7F2121; text-align: center; font-size: 12px; }
#nav ul li ul a:hover { cursor: pointer; z-index: 100; height: 100%; width: 100%; /* makes the list items fill the list container (ul) */ display: block; text-decoration: none; margin: 0; text-align: center; }
#nav li ul { display: none; width: 16%; position: absolute; top: 100%; height: 100%; padding: 0; margin: 0; }
#nav li:hover > ul { display: block;}
#nav li ul li, #nav li ul li a { float: none; height: 100%; }
#nav li ul li { _display: inline; /* for IE6 */  }
#nav li ul li a { display: block; }

/* Styles for drop downs */
#nav ul li ul li span { font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: normal; letter-spacing: .03em; color: #ffffff; display: block; margin: 0; padding: 8px; text-decoration: none; text-indent: 0px; list-style-type: none; list-style-position: outside; }
#nav ul li ul { position: absolute; z-index: 1000; top: auto; display: none; text-decoration: none; list-style-type: none; padding: 2px; margin: 0px; background: #202020; -webkit-border-radius-bottomleft: 3px; -webkit-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; height: auto; }

/* Header Styles */

#header { width: 979px; height: 127px; }
#logo { position: relative; width: 488px; height: 110px; background: url(../images/logo.png) no-repeat; text-indent: -9999px; margin-top: 70px; top: -20px; left: 5px; }
#logo a { width: 488px; height: 110px; display: block; }
#slogan { width: 439px; height: 117px; background: url(../images/slogan.png) no-repeat; text-indent: -9999px; margin: -140px 0 0 540px; }

/* Flash / Main Banner Styles */

#flash { width: 979px; height: 291px; margin: -25px 0 0 0; }
#insideBanner { width: 979px; height: 214px; margin: -28px 0 0 0; }

/* Boxes Styles */

#boxes { position: relative; width: 979px; height: 276px; top: -16px; color: #000000; }
#box1 { position: absolute; width: 321px; height: 184px; top: -8px; left: 0; background: url(../images/boxesBg.png) repeat-x 0 65px; }
#box1 h3 { position: relative; z-index: 100; width: 332px; height: 66px; background: url(../images/ourServericesHeader.png) no-repeat; text-indent: -9999px; }
#box1 p { width: 280px; padding: 5px; margin: 0 0 0 15px; }
#box1 h4 a { width: 321px; height: 37px; background: url(../images/findOutMoreAbout.jpg) no-repeat; text-indent: -9999px; display: block; }

#box2 { position: absolute; width: 321px; height: 184px; top: -8px; left: 330px; background: url(../images/boxesBg.png) repeat-x 0 65px; }
#box2 h3 { position: relative; z-index: 100; width: 332px; height: 66px; top: -1px; background: url(../images/ourGalleryHeader.png) no-repeat; text-indent: -9999px; }
#box2 p { width: 280px; padding: 5px; margin: 0 0 0 15px; }
#box2 h4 a { width: 321px; height: 37px; background: url(../images/clickHereToViewGallery.jpg) no-repeat; text-indent: -9999px; display: block; }

#box3 { position: absolute; width: 321px; height: 184px; top: -8px; left: 660px; background: url(../images/boxesBg.png) repeat-x 0 65px; }
#box3 h3 { position: relative; z-index: 100; width: 332px; height: 66px; top: 3px; background: url(../images/testimonialsHeader.png) no-repeat; text-indent: -9999px; }
#box3 p { width: 280px; padding: 5px; margin: 0 0 0 15px; }
#box3 h4 a { width: 321px; height: 37px; background: url(../images/readMoreTestimonials.jpg) no-repeat; text-indent: -9999px; display: block; }

/* Content Styles */

#content { position: relative; width: 979px; min-height: 226px; height: 100%; top: -100px; background: url(../images/contentBg.jpg) repeat-x #9C9C9C; }
#content h3 { color: #7d1214; font-size: 15px; font-weight: bold; padding: 14px 0 10px 0; }
#content p { width: 945px; font-weight: bold; padding-bottom: 10px; }
#content .photo { float: left; padding: 0 10px 0 0; }
.service { margin: 0 0 0 230px; }

.list ul li { padding: 0; overflow: hidden; }
.list li { background: url(../images/bullet.gif) no-repeat scroll 0 14px transparent; line-height: 11px; padding: 11px 0 5px 17px; margin: 0 0 0 55px; }
.list li a { color: #000; font-weight: bold; text-decoration: none; }
.list li a:hover { color: #6e1c1c; font-weight:bold; }

div.outerwrap { }
/* position list chunks side by side */
div.wrapper { float: left; width: 23em; margin: 0 0 0 1em; }
/* clear float after lists */
br { clear: left; }
/* remove default spacing  to 
promote cross-browser consistency */
.wrapper ul { margin: 2px 0 0 0; padding: 1px; list-style: none; list-style-type: none; }
/* suppress normal list item numbering */
.wrapper ul li { background: url(../images/bullet.gif) no-repeat scroll 0 10px transparent;  margin: 0 0 0 3em; padding: 8px 0 5px 14px; }
.wrapper li { padding: 8px; }
/* generate new item numbers that 
continue from one list to the next */
ol li:before { list-style: inside circle; }

/* Inside Page Styles */

#contentInner { position: relative; width: 979px; min-height: 486px; height: 100%; top: 0px; background: url(../images/insideContentBg2.jpg) repeat-x #878787; padding: 0 0 10px 0; }
#contentInner .photo { float: left; padding: 0 10px 0 0; }

#contentInnerCol1 { position: absolute; width: 260px; height: 486px; left: 0; top: 0; }
#contentInnerCol1 h4 { width: 229px; height: 37px; margin: 5px; background: url(../images/moreInformation.jpg) no-repeat; text-indent: -9999px; }

#contentInnerCol2 { width: 708px; margin: 0 0 0 270px; top: 0px; height: 100%; }
#contentInnerCol2 h3 { color: #7d1214; font-size: 18px; font-weight: bold; padding: 14px 15px 10px 0; border-bottom: 1px solid #999; margin: 0 35px 0 0;}
#contentInnerCol2 h4 { color: #7d1214; font-size: 14px; font-weight: bold; padding: 15px 15px 0px 20px; font-style:italic;}
#contentInnerCol2 p { width: 660px; padding: 10px 10px 0px 20px; }

#moreInformation { width: 229px; height: 217px; margin: -2px 5px 0 5px; background: url(../images/moreInformationBg.jpg) no-repeat; }
.contentList ul li { padding: 0; overflow: hidden; }
.contentList li { background: url(../images/bullet.gif) no-repeat scroll 0 14px transparent; line-height: 17px; padding: 8px 0 5px 24px; margin: 0 0 0 1em; }
.contentList li a { color: #353232; font-weight: bold; text-decoration: none; }
.contentList li a:hover { color: #6e1c1c; font-weight:bold; }

/* Portfolio Page Styles */

#portNav { position: relative; width: 975px; top: 0; left: 2px; }
.portNav { position: absolute; width: 975px; margin: 0; padding: 0; list-style: none; z-index: 10000; top: 0; font-size: 12px; }
.portNav li { float: left; text-align: center; font-size: 12px;  }
.portNav li a { display: block; text-indent: -9999px; vertical-align: middle; height: 38px; text-decoration: none; text-align: center; outline: none; font-size: 12px; }

/* Kitchens Button */
.portNav li a.nav9 { width: 184px; background: url(../images/portfolioNav.jpg) no-repeat 0 0; }
.portNav li a.nav9:hover, .portNav li.active a.nav9 { background-position: 0 -38px; }

/* Decks Button */
.portNav li a.nav10 { width: 134px; background: url(../images/portfolioNav.jpg) no-repeat -184px 0; }
.portNav li a.nav10:hover, .portNav li.active a.nav10 { background-position: -184px -38px; }

/* Baths Button */
.portNav li a.nav11 { width: 196px; background: url(../images/portfolioNav.jpg) no-repeat -318px 0; }
.portNav li a.nav11:hover, .portNav li.active a.nav11 { background-position: -318px -38px; }

/* Basements Button */
.portNav li a.nav12 { width: 189px; background: url(../images/portfolioNav.jpg) no-repeat -514px 0; }
.portNav li a.nav12:hover, .portNav li.active a.nav12 { background-position: -514px -38px; }

/* Before and After Button */
.portNav li a.nav13 { width: 272px; background: url(../images/portfolioNav.jpg) no-repeat -703px 0; }
.portNav li a.nav13:hover, .portNav li.active a.nav13 { background-position: -703px -38px; }

#galleryHeader { position: relative; width: 975px; height: 66px; top: 38px; left: 2px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; }
.galNails { position: relative; top: 20px; left: 34px; float: left; padding-right: 6px; padding-bottom: 6px; display: block; }

/* Form Styles */

* { margin:0; padding:0;}
form,input,select,textarea { margin: 0; padding: 0; color: #000000; }
div.box { margin: 0 auto; width: 600px; position: relative; top: 50px; }
div.box h3 { color: #ffffff; font-size: 18px; text-transform: uppercase; padding: 5px 0 5px 5px; }
div.box label { width: 100%; display: block; padding: 10px 0 10px 0; }
div.box label span { display: block; color: #803234; font-size: 12px; float: left; width: 100px; text-align: right; padding: 5px 20px 0 0; }
div.box .input_text { padding: 5px 5px; }
div.box .message { padding: 7px 7px; width: 350px; background: #262626; overflow: hidden; height: 150px; }
div.box .button { margin: 0 0 10px 0; padding: 4px 7px; background: #CC0000; border: 0px; position: relative; top: 10px; left: 382px; width: 100px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left: 1px double #FF0033; border-right: 1px double #FF0033; }
.recaptchatable #recaptcha_response_field  { margin: 0 0 0 -70px; left: -5px; }

/* Footer Styles */

.main #footer { position: relative; width: 979px; height: 46px; color: #777777; background: url(../images/footer.png) no-repeat; top: -90px; }
#footer { position: relative; width: 979px; height: 46px; color: #777777; background: url(../images/footer.png) no-repeat; top: 10px; }
#footerCol1 { position: absolute; width: 385px; height: 46px; left: 40px; top: 8px; background: url(../images/footerAddress.png) no-repeat; text-indent: -9999px; }
#footerCol2 { position: absolute; width: 124px; height: 46px; left: 855px; background: url(../images/footerByGDS.png) no-repeat; text-indent: -9999px; }
#footerCol2 a { width: 124px; height: 46px; display: block; }