/* 
Kirby Construction Style Sheet

Colors:

-------------------- */


/* Global Styles
----------------------------------------- */
* { margin: 0; padding: 0; }
html { height: 100%; margin-bottom: 1px; }
body { text-align: center; background: url(../images/kc_body_bg.jpg) 0 0 repeat-x #DEE1DC;  font-family:Arial, Helvetica, sans-serif; font-size: 0.8em; color: #333; }
ul, li { list-style: none; }
h1 { background: inherit; color: #660000; font-size: 150%; font-weight: normal; padding-top: 0.5em; width:500px; }
h2 { background: inherit; color: #5d6349; font-size: 120%; font-weight: bold; padding-top: 0.5em; }
h3 { background: inherit; color: #600; font-size: 95%; font-weight: bold; padding: 0.7em 0; }
h4 { background: inherit; color: #900; font-size: 95%; font-weight: bold; padding: 0.7em 0; }
h5 { font-size: 100%; font-weight: bold; padding: 25px 0 10px 0; }

p { margin: 0.5em 0 1em 0; line-height: 1.33em; }
a:link { background-color: inherit; color: #06f; }
a:visited { background-color: inherit; color: #0044a9; }
a:hover { background-color: inherit; color: #036; }
a:active { background-color: inherit; color: #c6c8ca; }

.projects p { font-size: 110%; line-height: 1.5em; }

/* Divs
----------------------------------------- */
#wrapper { margin:0 auto; width: 940px; background: url(../images/kc_content_bg.jpg) 0 0 repeat-x #fff; }
#navigation { margin:0 auto; width:900px; height:80px; }
#content { margin: 0 auto; width:880px; border-bottom: 15px solid #484848;  background:url(../images/kc_main_bg.jpg) 0 0 repeat-y #fff;  }
#contentproj { margin: 0 auto; width:880px; border-bottom: 15px solid #484848; background: #fff; }
#flasharea { margin:0 auto; }


/* nav specifics
----------------------------------------- */
#navigation ul { padding:0; margin:0; list-style:none; }
#navigation li { float:left; margin:0; padding:0; width:auto; }
#navigation li a { display:block; text-indent:-9999em; height:80px; }

/* nav images normal */
#navigation .n-logo a { background: url(../images/kc_nav_logo.jpg); width:153px; }
#navigation .n-home a { background: url(../images/kc_nav_home.jpg); width:62px; }
#navigation .n-about a { background: url(../images/kc_nav_about.jpg); width:90px; }
#navigation .n-projects a { background: url(../images/kc_nav_projects.jpg); width:80px; }
#navigation .n-services a { background: url(../images/kc_nav_services.jpg); width:90px; }
#navigation .n-resources a { background: url(../images/kc_nav_resources.jpg); width:113px; }
#navigation .n-contact a { background: url(../images/kc_nav_contact.jpg); width:83px; }
#navigation .n-phone a { background: url(../images/kc_phone.jpg); width:194px; }

/* nav hover */
#navigation li a:hover { background-position:0 -80px; }

/* nav on */
.home #navigation .n-home a,
.about #navigation .n-about a ,
.projects #navigation .n-projects a ,
.services #navigation .n-services a ,
.clients #navigation .n-clients a ,
.resources #navigation .n-resources a ,
.contact #navigation .n-contact a  { background-position:0 -160px; }


/* two up
----------------------------------------- */
.maincontent { float:left; width:570px; margin:0; padding:10px 60px 0 20px; text-align:left; color:#222; background-color:#fff; }

.maincontent li { list-style: square; margin:4px 0 4px 34px; }

.projthumb { float:left; padding: 10px 0 10px 5px; width: 560px; }
.projthumb li { list-style: none; float: left; padding: 0 10px 10px 0; }
.projthumb a img { background-color: #fff; border: 1px solid #999; width: 75px; height: 75px; padding: 4px; }
.projthumb a:hover img { border: 1px solid #666; }


.sidecontent { float:left; width:210px; margin:0; padding:10px 10px 50px 10px; text-align:left; color:#222; background-color:#dcdedb; }


.projcontent { float:left; width:410px; margin:0; padding:10px 60px 0 20px; text-align:left; color:#222; background-color:#fff; }
.projcontent li { list-style: square; margin:4px 0 4px 34px; }
.projectside { float:left; width:360px; margin: 20px 0; padding:10px 10px 50px 10px; text-align:left; color:#222; background-color:#dcdedb; border:1px solid #ccc; }
.projectside li { list-style: none; }


/* two up
----------------------------------------- */
.twoup1 { float:left; width:260px; padding:0 20px 0 0; margin:0; text-align:left; }
.twoup2 { float:left; width:290px; padding:0; text-align:left; }


/* classes
----------------------------------------- */
a.ftag{ background:url(../images/kc_header.jpg) 0 0 no-repeat #DEE1DC; width:880px; height:203px; margin-left:30px; outline:none; float:left; z-index:1; text-indent:-9999px; }
a.fname{ background: url(../images/kc_header_name.jpg) 0 0 no-repeat #DEE1DC; width:880px; height:40px; margin-left:30px; outline:none; float:left; z-index:1; text-indent:-9999px;
}

.portthumb { float:left; padding: 10px 0 10px 5px; width: 360px; }
.portthumb li { float: left; padding: 0 10px 10px 0; }
.portthumb a img { background-color: #fff; border: 1px solid #999; width: 100px; height: 100px; padding: 4px; }
.portthumb a:hover img { border: 1px solid #666; }


/* Contact Form
----------------------------------------- */
.contactarea form { width: 460px; margin: 40px 0 30px 30px; }
.contactarea fieldset { padding: 0 0 10px 10px; margin: 0; border: 1px solid #003366; }
.contactarea legend { font-weight: bold; font-size: 1.2em; padding: 0 4px 8px 4px; color: #369304; background-color: #fff; }
.contactarea dt { float: left; width: 36%; text-align: right; padding: 5px 10px 0 0; }
.contactarea label.last { font-weight: bold; text-align: left; padding-left: 10px; }
.contactarea input, .contactarea textarea, .contactarea select { margin: 5px 0; border: 1px solid #a7a7a7; font-family: inherit; font-size: 1em; padding: 1px 3px; }
.contactarea input.submit { margin-top: 1em; padding: 3px; color: inherit; background-color: #FDFE9A; }
.contactarea .errorMessage { color: red; background-color: inherit; font-weight: bold; font-size: 1.1em; }


/* images
----------------------------------------- */
img.projectthumbnail { margin:3px; padding:1px; border:1px solid #555; height: 75px; width: 75px; }
img.projectimage { margin:2px; padding:1px; border:1px solid #555; }
img.projmore { margin:2px; padding:1px; border:1px solid #fff; }
img.photoleft { border:1px solid #555; float:left; height: 140px; margin:3px 20px 5px 0px; padding:1px; width:175px; }
img.photoright { border:1px solid #555; float:right; height: 140px; margin:3px 0px 5px 20px; padding:1px; width:175px; }
img.photo { background-color: #fff; border:1px solid #999; color: #000; height: 233px; padding: 5px; width: 350px; }
img.photoright2 { border:1px solid #555; float:right; margin:3px 0px 5px 20px; }

/* overridden
----------------------------------------- */
hr { background: url(../images/kc_hr_bg.jpg) repeat-x; height: 7px; border: 0; width: 100%; margin: 1.5em 0; padding-top: 5px; }


/* footer 
----------------------------------------- */
#footer { width:900px; text-align:left; padding:17px 20px 10px 20px; border-top:2px solid #222; color:inherit; background-color: #DEE1DC; font-size:0.95em; }

#footer li { display:inline; padding:0 0 0 15px; }
#footer li.first { background:none; }
#footer li a { background-color:inherit; color:#7A787E; text-decoration: underline; }
#footer a { background-color:inherit; color:#7A787E; }
#footer a:visited { background-color:inherit; color:#888; }
#footer a:hover { background-color:inherit; color:#333; }
#footer p { padding:0 12px 5px 5px; text-align:right;  }

#footer .links {float:left; width:400px; margin-top:5px; }
#footer .reserved {float:right;  width:460px; }

#footer .designer a { color:#999999; background-color:inherit; }
#footer .designer a:hover { color:#333; background-color:inherit; }

/* Self Cleared Float
----------------------------------------- */
#navigation:after,
#flasharea:after,
#content:after,
#contentproj:after,
#maincontainer:after,
#sidecontainer:after,
#footer:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

.clear { clear:both; }

.clear:after,
.maincontent:after,
.sidecontent:after,
.twoup1:after,
.twoup2:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }