/* 
CSS Styling and Design
author: Dustin Pfeifer
contact: dustin@dustinpfiefer.com
*/

* {
	margin:0;
	padding:0;
}

body {
	background:#ffe6b0 url("../images/background.jpg") repeat-x top;
	width:937px;
	text-align:center;
	margin:0 auto;
	font:12px "Lucida Grande", arial, sans-serif;
}

/* Layout
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#content {
	width:841px;
	margin:30px auto;
	text-align:left;
}

#left {
	float:left;
	width:515px;
}

#right {
	float:right;
	width:286px;
}

#footer {
	background:url("../images/border-green.png") repeat-x top left;
	width:841px;
	margin:0 auto;
	padding:30px 0;
	font-size:11px;
	text-transform:uppercase;
	color:#c0a772;
	clear: both;
}


/* Masthead
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#masthead {
	background:url("../images/background-masthead.jpg") no-repeat;
	height:90px;
}

p.logo a img {
	margin:0 15px 0 0;
	padding:0;
	float:left;
	border:none;
}

#nav {
	margin:0;
	padding:17px 0 0 0;
	list-style-type:none;
	text-align:left;
	float:left;
}

#nav li {
	display:inline;
}

#nav a {
	padding:0 15px;
	font:13px Georgia, serif;
	font-weight:bold;
	color:#fff;
	text-transform:uppercase;
}

#nav a:hover {
	padding:0 15px;
	font:13px Georgia, serif;
	font-weight:bold;
	color:#ee4075;
	text-transform:uppercase;
}


/* Homepage Header
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#header-home {
	height:533px;
	background:url("../images/header-home.jpg") no-repeat;
	margin:0;
}

#header-home .content {
	text-align:left;
	padding:100px 100px 0 395px;
}

#header-home .content p {
	font:16px/150% Georgia, serif;
	color:#391e00;
	font-weight:bold;
	margin:5px 0;
}

#special {
	background:url("../images/border-green.png") repeat-x top left;
	padding:30px 0 0;
	margin:30px 0 0;
}

#header-about {
	height:231px;
	background:url("../images/header-about.jpg") no-repeat;
	margin:0;
}

#header-blog {
	height:231px;
	background:url("../images/header-blog.jpg") no-repeat;
	margin:0;
}

#header-about .content p {
	font:16px/150% Georgia, serif;
	color:#391e00;
	font-weight:bold;
	margin:5px 0;
}

#header-about .content {
	text-align:left;
	padding:15px 100px 0 395px;
}

#header-pricing {
	height:231px;
	background:url("../images/header-about.jpg") no-repeat;
	margin:0;
}

#header-pricing .content p {
	font:16px/150% Georgia, serif;
	color:#391e00;
	font-weight:bold;
	margin:5px 0;
}

#header-pricing .content {
	text-align:left;
	padding:15px 100px 0 395px;
}

#header-contact {
	height:231px;
	background:url("../images/header-about.jpg") no-repeat;
	margin:0;
}

#header-contact .content p {
	font:16px/150% Georgia, serif;
	color:#391e00;
	font-weight:bold;
	margin:5px 0;
}

#header-contact .content {
	text-align:left;
	padding:15px 100px 0 395px;
}

#header-gallery {
	height:231px;
	background:url("../images/header-about.jpg") no-repeat;
	margin:0;
}

#header-gallery .content p {
	font:16px/150% Georgia, serif;
	color:#391e00;
	font-weight:bold;
	margin:5px 0;
}

#header-gallery .content {
	text-align:left;
	padding:15px 100px 0 395px;
}


/* Homepage Features
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#updates, #order, #gallery {
	width:267px;
	height:126px;
	overflow:hidden;
	float:left;
}

#updates {
	background:url("../images/background-updates.jpg") no-repeat;
	margin:0 20px 0 0;
}

#order {
	background:url("../images/background-order.jpg") no-repeat;
	margin:0 20px 0 0;
}

#gallery {
	background:url("../images/background-gallery.jpg") no-repeat;
}

#updates .in, #order .in, #gallery .in {
	padding:70px 15px 15px 15px;
}

#updates p, #order p, #gallery p {
	font-size:11px;
	color:#391e00;
	line-height:125%;
}

#updates ul {
	font-size:10px;
}

#updates li {
	display:block;
	border-bottom:1px solid #6ac7bf;
	padding:0 0 5px 0;
	margin:0 0 5px 0;
}

#updates a {
	color:#6ac7bf;
	text-decoration:none;
}

ul.info {list-style-type:none;
    font-size: 10px;
    text-transform: uppercase;
    margin: 10px 0 10px 0;}
	
	li {
    margin: 2px 0 2px 0;}
    	
	ul {list-style-type:none;
    margin: 10px 0 10px 0;}

/* Browser Adjustments
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

a, span {
	color:#6ac7bf;
}

h1 {
	font:20px/150% Georgia, serif;
	color:#ef4075;
	font-weight:bold;
}


/* Order Form
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#form input, #form select {
	background:#ccdb2a;
	border:none;
	padding:5px;
	margin:0 0 7px;
	width:200px;
}

#form fieldset {
	border:none;
	margin:0 0 20px;
}

#form legend {
	color:#89cdbe;
	font:24px/150% Georgia, serif;
	font-weight:bold;
}

#form label {
	width:80px;
	display:block;
	float:left;
	color:#939393;
	font-weight:bold;
	padding:3px 0;
}

#form #left, #form #right, #form #middle {
	float:left;
	width:145px;
}

#form #left {
	padding:0 40px 0 0;
}

#form #right {
	float:right;
	padding:0 0 0 40px;
}

#form #left input, #form #left select, #form #left label, 
#form #right input, #form #right select, #form #right label,
#form #middle input, #form #middle select, #form #middle label {
	display:block;
	float:left;
	width:100%;
}

#form #left .submit, #form #right .submit, #form #middle .submit {
	width:50%;
	cursor:pointer;
	clear:both;
}

#form .submitorder {
	width:25%;
	cursor:pointer;
}

#form #left .size, #form #right .size, #form #middle .size {
	width:25%;
}

	
/* Gallery */

.gallery {
	list-style-type:none;
	margin:10px 0 0 0;
}

.gallery dl {
	display:block;
	float:left;
	margin:15px 0 2px;
}

.gallery a {
	display:block;
	float:left;
	line-height:0;
}

.gallery img {
	width:95px;
	height:95px;
	overflow:hidden;
}



/* Browser Adjustments
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}          
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */