@charset "UTF-8";
/* 
CSS stylesheet for Nestle Waters Sacramento
Initial site design July 2009 by Chris Kennedy
www.ckladesign.com
*/

/* Colors 
Text sky blue: #00a0c4
Lighter sky blue: #d3e6ed
Text light grey: #737373
Text darker grey: #474747
Lightest grey: #c3c3c3
Updates box blue: #d2e6ed
*/

* {margin: 0; padding: 0;}
a:link, a:visited {color: #00a0c4; text-decoration:none;}
a:hover, a:active {color: #00a0c4; text-decoration:underline;}
body {background: #96b8c5 url(../site_graphics/background.jpg) repeat-x; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
h1, h2, h3, h4 {font-weight:normal;}
h1, h2 {color: #00a0c4; font-size: 1.3em; margin-bottom: 3px;}
h3, h4 {color: #000; font-size: 1em; margin-top: 16px;}
p, ul, ol {font-size: .8em; line-height: 1.4;}
p {margin: 12px 0 12px 0;}
hr {margin: 12px 0;}

.callout, .pullquote {font-size: 1em; color: #737373;}
.list {margin-left: 22px;}
.pullquote {padding: 6px 14px; border-top: 1px solid #c3c3c3; border-bottom: 1px solid #c3c3c3; line-height: 1.2;}
.signup {width: 220px; height: 26px; background: #fff url(../site_graphics/input_box.gif) top left no-repeat; margin: 9px 0; padding-left: 4px; padding-top: 6px; font-size: .9em; color: #c3c3c3;}
.signup:focus {color: #333;}
.development_note {color: red;}


/* setting background color */
#header, #branding, .top_item, #main_image, #secondary_images, #welcome, #updates, #footer, #left_navigation, #primary_content, #photography {background-color:#fff;}

/* universal page elements (in order of appearance, top to bottom) */
#wrapper {width: 800px; margin: 0 auto;}

#header {width: 800px; height: 140px; clear: both;}

#branding {width: 225px; float: left; clear: right;}
#branding h1 {width: 225px; height: 120px; background:url(../site_graphics/branding.jpg) no-repeat;}
#branding span {display:none;}

.top_item {width: 141px; height: 100px; float: left; clear: right; padding-top: 20px; color: #737373;}
.top_item p {border-left: 1px solid #c3c3c3; padding: 0 5px 0 9px;}
.top_item a {font-size: 1.3em;}

#footer {width: 800px; height: 200px; clear: both; text-align:center; color: #939393; padding-top: 30px; background: #fff url(../site_graphics/footer_hline.gif) top left no-repeat;}
#footer ul {list-style: none; margin-bottom: 16px;}
#footer li {display: inline; padding: 0 20px; border-right: 1px solid #c3c3c3;}
#footer li.noborder {border-right: 1px solid #fff;}
#footer img {margin: 0 10px;}
#footer p {font-size: .7em;}

/*Home page elements */

#images {width:800px; clear: both;}

#main_image {float: left; clear: right; width: 530px;}

#secondary_images {float: left; clear: right; width: 270px;}
#secondary_images img {margin-bottom: 1px;}

#main_image img, #secondary_images img {border: none;}

#welcome, #updates {height:420px; float: left; clear: right;}
#welcome {
	width: 530px;
	height: 570px;
}

#welcome h2 {padding: 30px 0 0 20px;}
#welcome p {padding: 0 20px;}

#updates {
	width: 270px;
	background: #fff url(../site_graphics/updates_box.jpg) top left no-repeat;
	height: 386px;
}
#updates h2 {padding: 45px 30px 0 20px; margin-bottom: 12px; font-size: 1em;}
#updates p {padding: 0 30px 0 20px; margin-bottom: 12px;}

#updates form {margin-left: 20px; width: 220px;}

#Metro {
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	float: left;
	height: 172px;
	width: 237px;
	padding-top: 12px;
	padding-left: 33px;
}

/* inner page elements */
.navigation ul {list-style: none; color: #474747; padding: 0 20px 20px 30px;}

.primary {padding-right: 100px;}
.primary ul {list-style: disc; margin-left: 22px; padding-left: 22px; padding-top: 6px;}

#primary_content {width: 800px; padding-top: 10px; padding-bottom: 30px;}

#photography {width: 800px; height: 173px; text-align: center; clear: both;}