/* CSS Document */

/* Global Layout Styles */

html,body{margin:0;padding:0}

body {
font: 0.9em/1.5em "Trebuchet MS", Verdana, sans-serif;
background:#000 url(../assets/generic/CWbg.jpg) no-repeat top center;
text-align:center;
color: #fff;
margin-top:30px;
}

#container {
position:relative;
width: 760px;
margin: 0 auto;
}

#header {
position:relative;
width: 100%;
height: 100px;
margin:0;
padding:0;
}

#canvas {
float:left;
background: #000;
border: 1px solid #bba16a;
width:100%;
}

#canvas.trans {
background: none;
}

#content {
float:left;
min-height:550px;
width:750px;
}

#content.gen {background:url(../assets/generic/negative.jpg) no-repeat top right;}
#content.clipboard {background:url(../assets/generic/clients_bg.jpg) no-repeat top right;}
#content.postbg {background:url(../assets/generic/contactbg.gif) no-repeat top right;}


#navigation {
float:left;
width: 760px;
background: #bba16a;
padding: 0.3em 0;
}

#banner {
float:left;
height: 182px;
width: 760px;
border-bottom: 8px solid #946384;
margin:0;
padding:0;
}

#secondary {
padding: 0.5em 0;
width: 100%;
float:left;
border-top: 5px solid #946384;
border-bottom: 2px solid #946384;
}

#footer {
clear:both;
width: 100%;
}

/* HEADER Layout Styles */

#header h1 {

background: url(../assets/generic/chris-watt-logo.png) no-repeat right;
text-indent: -9999px;
height: 78px;
margin:0;
padding:0;
}

/* NAVIGATION Layout Styles */

#navigation ul {
margin:0;
padding:0;
display: inline;
background:red;
}

#navigation li {
margin:0;
padding:0;
text-indent: -9999px;
display:block;
float: left;
overflow:hidden;
} 

#navigation li.welcome {background: url(../assets/navigation/welcomer.gif) no-repeat -1000px -1000px;}
#navigation li.welcome a:link, #navigation li.welcome a:visited {
display:block; width:184px; height: 21px; background: url(../assets/navigation/welcome.gif) no-repeat center left;}
#navigation li.welcome a:hover, #navigation li.welcome a:active {
background: url(../assets/navigation/welcomer.gif) no-repeat center left;}

#navigation li.about {background: url(../assets/navigation/aboutr.gif) no-repeat -1000px -1000px;}
#navigation li.about a:link, #navigation li.about a:visited {
display:block; width:111px; height: 21px; background: url(../assets/navigation/about.gif) no-repeat center left;}
#navigation li.about a:hover, #navigation li.about a:active {
background: url(../assets/navigation/aboutr.gif) no-repeat center left;}

#navigation li.gallery {background: url(../assets/navigation/galleryr.gif) no-repeat -1000px -1000px;}
#navigation li.gallery a:link, #navigation li.gallery a:visited {
display:block; width:78px; height: 21px; background: url(../assets/navigation/gallery.gif) no-repeat center left;}
#navigation li.gallery a:hover, #navigation li.gallery a:active {
background: url(../assets/navigation/galleryr.gif) no-repeat center left;}

#navigation li.testimonial {background: url(../assets/navigation/testimonialsr.gif) no-repeat -1000px -1000px;}
#navigation li.testimonial a:link, #navigation li.testimonial a:visited {
display:block; width:116px; height: 21px; background: url(../assets/navigation/testimonials.gif) no-repeat center left;}
#navigation li.testimonial a:hover, #navigation li.testimonial a:active {
background: url(../assets/navigation/testimonialsr.gif) no-repeat center left;}

#navigation li.clients {background: url(../assets/navigation/clientsr.gif) no-repeat -1000px -1000px;}
#navigation li.clients a:link, #navigation li.clients a:visited {
display:block; width:78px; height: 21px; background: url(../assets/navigation/clients.gif) no-repeat center left;}
#navigation li.clients a:hover, #navigation li.clients a:active {
background: url(../assets/navigation/clientsr.gif) no-repeat center left;}

#navigation li.contact {background: url(../assets/navigation/contactr.gif) no-repeat -1000px -1000px;}
#navigation li.contact a:link, #navigation li.contact a:visited {
display:block; width:90px; height: 21px; background: url(../assets/navigation/contact.gif) no-repeat center left;}
#navigation li.contact a:hover, #navigation li.contact a:active {
background: url(../assets/navigation/contactr.gif) no-repeat center left;}

/* Highlight Page Layout Styles */

body#home a#homenav {background: url(../assets/navigation/welcomer.gif) no-repeat center left;}
body#about a#aboutnav {background: url(../assets/navigation/aboutr.gif) no-repeat center left;}
body#gallery a#gallerynav {background: url(../assets/navigation/galleryr.gif) no-repeat center left;}
body#test a#testnav {background: url(../assets/navigation/testimonialsr.gif) no-repeat center left;}
body#clients a#clientsnav {background: url(../assets/navigation/clientsr.gif) no-repeat center left;}
body#contact a#contactnav {background: url(../assets/navigation/contactr.gif) no-repeat center left;}


/* CANVAS Layout Styles */

#canvas h2.banner {
float:left;
text-indent:-9999px;
width: 760px;
height: 266px;
background:url(../assets/home/banner.jpg) no-repeat;
}

#canvas p {
float:left;
text-align:justify;
padding: 1em;
font-size:0.9em;
}

#content p {
float:left;
text-align:justify;
padding: 1em;
font-size:0.9em;
width:500px;
}

span.big {color:#bba16a; font-size:2em; font-family:"Times New Roman", Times, serif;}

#content p.narrow {
width:450px;
}

p b {color:#bba16a}

#canvas a:link, #canvas a:visited {
color: #bba16a;
text-decoration:underline;
}

#canvas a:hover, #canvas a:active {
color:#fff ;
text-decoration:none;
}

/* GALLERY Layout Styles */

div.snaps {
float:left;
background:url(../assets/gallery/dots.png) no-repeat center;
height: 180px;
width:100%;
margin:0.5em 0 1em 0;
padding:0;
}

div.snaps img {
margin:25px 3px 0 0;
padding:0;
}

div.snaps a:link img , div.snaps a:visited img  {border: 1px solid #fff;}
div.snaps a:hover img, div.snaps a:active img {border: 1px solid #bba16a;}

/* CANVAS TITLES Layout Styles */

#canvas h3 {
text-indent: -9999px;
float:left;
display:block;
height: 19px;
width: 100%;
margin: 0.8em 0 0.5em 0.5em;
padding:0;
}

#canvas h3.welcome {background: url(../assets/titles/welcome.gif) no-repeat; margin-left:0;}
#canvas h3.about {background: url(../assets/titles/about.gif) no-repeat;}
#canvas h3.pictures {background: url(../assets/titles/gallery.png) no-repeat;}
#canvas h3.testimonials {background: url(../assets/titles/testimonials.gif) no-repeat;}
#canvas h3.clients {background: url(../assets/titles/clients.gif) no-repeat;}
#canvas h3.contact {background: url(../assets/titles/contact.gif) no-repeat;}
#canvas h3.oops {background: url(../assets/titles/oops.gif) no-repeat;}
#canvas h3.thanks {background: url(../assets/titles/thanks.gif) no-repeat;}
#canvas h3.weddings {background:url(../assets/titles/weddings.png) no-repeat;}

#canvas h4 {
float:left;
text-indent: -9999px;
display:block;
width: 100%;
margin: 0 0 0 40px;
padding:0;
}

#canvas h4.food {background:url(../assets/titles/food.png) no-repeat;}
#canvas h4.pr {background:url(../assets/titles/pr.png) no-repeat;}
#canvas h4.news {background:url(../assets/titles/news.png) no-repeat;}
#canvas h4.features {background:url(../assets/titles/features.png) no-repeat;}

/* FOOTER Layout Styles */

#footer p {
font-size: 0.7em;
line-height: 1.4em;
text-align:center;
padding: 0.5em 0;
color:#999;
}

#footer p a:link, #footer p a:visited {
text-decoration:none;
color: #999;
}

#footer p a:hover, #footer p a:active {
text-decoration:underline;
color: #bba16a;
}


/* Form Layouts */

form#cwform {
padding:10px;  
font-size:1em; 
width: 500px;
float:left;
}

form#cwform p {
width:400px;
text-align:left; 
padding:15px 5px 5px 0; 
margin:0;
}

form#cwform fieldset#hidden {
display:none;
}

form#cwform fieldset#feedback p {padding:4px; margin:0;}

form#cwform fieldset {
display:block; 
border:1px dotted #bba16a; 
padding:5px 5px 5px 10px; 
margin-bottom:1em; 
line-height:1.5em;  
float:left;
width:90%;
}

form#cwform fieldset:hover {
border:1px dotted #fff; 
background: url(../assets/generic/treatment-background.gif) no-repeat top right;
}

form#cwform legend {
font-size:0.8em; 
font-weight:bold; 
border:1px solid #fff; 
margin-bottom:15px; 
padding:6px; 
background:#bba16a; 
color:#FFF;
}

* html form#cwform legend { padding:5px; margin:0;}

form#cwform label {
clear:left; 
display:block; 
float:left; 
width:150px; 
text-align:left; 
padding-right:10px; 
color:#fff; 
margin-bottom:0.5em;}

form#cwform input {
float:left;
border:1px solid #fff; 
padding-left:0.5em; 
margin-bottom:0.6em; 
width:280px; 
background:#bba16a;
color: #000;
}

fieldset#interest input {
width: 20px;
padding-top: 0.5em; 
}


form#cwform input:hover { background:#fff; border:1px solid #bba16a; color:#000;}
form#cwform input:focus {background:#fff; border:1px solid #bba16a; color:#000;}

form#cwform select {margin:0 0 1em 0.5em;}

form#cwform textarea {
float:left;
width:410px; 
height:10em; 
border:1px solid #fff; 
padding:0.5em; 
overflow:auto;
background:#bba16a;
color:#451f5d;
}

form#cwform textarea:hover { background:#fff; border:1px solid #bba16a; color:#000;}
form#cwform textarea:focus {background:#fff; border:1px solid #bba16a; color:#000;}


form#cwform #button1, form#cwform #button2 {
clear:right;
color:#fff; 
padding-right:0.5em; 
cursor:pointer; 
width:205px; 
margin-left:8px; 
background: #bba16a; 
border:1px solid; 
border-color:#999 #999 #fff #fff;
}

form#cwform #button1:hover, form#cwform #button2:hover {
color:#bba16a; 
background:#000; 
border:1px solid; 
border-color:#bba16a #bba16a #999 #999 ; 
}