@import url('reset.css');


body{
	font: 70%/1.5em Arial, Verdana, San Serif;
	color: #fff;
	background: url('../images/new_background.jpg') center 0 no-repeat #190710;
}

h1{text-indent:-9999px; height:30px; overflow:hidden;}

#p-home h1 {width:288px; background:url(../images/titles/title-home.png) no-repeat 0 0;}
#p-about h1 {width:350px;background:url(../images/titles/title-about.png) no-repeat 0 0;}
#p-portfolio h1 {width:350px; background:url(../images/titles/title-portfolio.png) no-repeat 0 0;}
#p-hire-us h1 {width:350px; background:url(../images/titles/title-hire.png) no-repeat 0 0;}
#p-contact h1 {width:350px; background:url(../images/titles/title-contact.png) no-repeat 0 0;}

h1{margin:0 0 25px 0;}
h2{font-size: 1.8em; font-weight: normal; font-family:Georgia, "Times New Roman", Times, serif; color:#FFFFCC; margin:0 0 15px 0; padding:20px 0 0 0;}
h3{font-size: 1.3em; font-weight: normal; color:#f1c8d6; margin:0 0 10px 0;}
h4{font-size: 1.3em; font-weight: normal; color:#a25f76; margin:0 0 10px 0;}
h5{font-size: 1.0em; font-weight: normal; color:#a25f76;}
h5 a{color: #bdd158;}
p{margin-bottom:15px; color:#eee;}

hr{border-top: none; border-right: none; border-left: none; border-bottom: 1px solid #87464A; padding-top:20px; margin-bottom:20px;}

img.profile-img{float:left; border:3px #fff solid; margin: 0 10px 0 0; clear:both;}
a.btn_live{background:url(../images/btn_visit.png) 0 0 no-repeat; height:31px; width:127px; display:block; overflow:hidden; text-indent:-999em;}

.highlight, a.highlight, a{color: #bdd158; text-decoration: none;}
a:hover{text-decoration: underline; }



/************************************************
	           Website Structure
*************************************************/

#container {width:1020px; margin:0 auto; padding:0;}

#header{position: relative; height: 227px;}

h2#logo_wildwoodcreative{margin:0 !important; padding:0 !important;}
h2#logo_wildwoodcreative a{
	width:300px; 
	height:149px;
	display: block;
	overflow: hidden;
	text-indent: -999em;
	background: url(../images/logo_wildwood.png) 0 0 no-repeat;
	position: absolute;
	top: 46px;
	left: 35px;
	z-index: 10;
	margin:0 !important; padding:0 !important;
}

ul#nav{position:absolute; top:0; right:38px; z-index: 20;}
ul#nav li{float:left; width:114px;}
ul#nav li a{
	background-repeat:no-repeat;
	background-position: 0 0;
	height:160px;
	width:114px;
	display: block;
	overflow: hidden;
	text-indent: -999em;
}
ul#nav li a:hover{background-position: 0 -160px;}
	ul#nav li#nav-home a{background-image:url(../images/nav/nav-home.jpg);}
	ul#nav li#nav-about a{background-image:url(../images/nav/nav-about.jpg);}
	ul#nav li#nav-portfolio a{background-image:url(../images/nav/nav-portfolio.jpg);}
	ul#nav li#nav-hireus a{background-image:url(../images/nav/nav-hire_us.jpg);}
	ul#nav li#nav-contact a{background-image:url(../images/nav/nav-email_us.jpg);}
	
	#p-home ul#nav li#nav-home a,
	#p-about ul#nav li#nav-about a,
	#p-portfolio ul#nav li#nav-portfolio a,
	#p-hire-us ul#nav li#nav-hireus a,
	#p-contact ul#nav li#nav-contact a,
	#p-contact-thankyou ul#nav li#nav-contact a{
		background-position: 0 -160px;
	}

#content{}

#primary{
	width: 883px;
	margin: 0 auto;
	padding:15px 0 20px 17px;
	float: none;
}


/* Content Styles on the Home Page*/
#p-home #primary{width:355px; float: left; margin: 0; padding: 0; background:url(../images/home-separator.png) no-repeat top right !important;}

	#text{padding:28px 28px 0 40px;}
	
	#form-container{background: url(../images/bg_form.png) 0 0 no-repeat; height:316px; padding: 55px 40px 0 60px; position: relative;}
	#form-container h2{
		background: url(../images/form-contact.gif) right 0 no-repeat; 
		overflow: hidden; 
		text-indent: -999em; 
		display: block; 
		width: 250px; 
		height: 24px; 
		margin:0 !important; 
		padding:0 0 10px 0 !important;
	}
	#form-container p{text-indent: 60px; clear: both;}
	
	form{}
	form li{margin: 0 0 12px 0;}
	form label{width: 84px; display: inline-block; text-align: right; margin: 0 13px 0 0; vertical-align: middle;}
	form input[type="text"], form textarea, form select{width: 147px; display: inline-block; background: #823d55; border: 1px solid #a25f76; padding: 2px; color: #b8cb4d; font: 100%/1.3em Arial, Helvetica, sans-serif;}
	form select{width:153px;}
	form textarea{height: 54px;}
	form li#form-comments label{vertical-align: top;}
	form li#btn-submit input{border: none; background: url(../images/btn_form.png) 0 0 no-repeat; width:83px; height:30px; position: absolute; top:285px; left:73px; color: #fff; text-transform: uppercase; padding:0 4px 6px 0; cursor: pointer;}
	
	form label.error {
	  float: none;
	  display: block;
	  color: #ff0000;
	  font-size: 10px;
	  line-height: 12px;
	  float:right;
	  width: 220px;
	  margin:0;
	}

	
#featured{width:655px; float:left; padding: 29px 0 0 8px;}
	.featured-gall{background-repeat: no-repeat; background-position: 0 0; width: 579px; height:217px; display: inline-block;}
	.featured-gall p{margin:3px 0 0 30px; font-size:0.9em;}
	#featured h2{vertical-align: bottom; }
	.btn-left, .btn-right{width: 9px; height: 190px; display: block; overflow: hidden; text-indent: -99em;}
	.btn-left{background-position: 0 0; background-repeat: no-repeat; float: left;}
	.btn-right{background-position: 0 0; background-repeat: no-repeat; float: right; margin: 0 9px 0 0;}

	#fea-web, #fea-branding, #fea-art{padding:0;}
	#fea-web h2{
		background: url(../images/portfolio-home/heading-website.png) 0 bottom no-repeat; 
		height:165px; 
		width:47px; 
		display: inline-block; 
		overflow: hidden; 
		text-indent: -999em;
		float:left;
		}
	#fea-web .featured-gall{background-image: url(../images/portfolio-home/bg_featured-web.jpg); float:left;}
	#fea-web .btn-left{background-image: url(../images/portfolio-home/btn_left-web.png);}
	#fea-web .btn-right{background-image: url(../images/portfolio-home/btn_right-web.png);}
	
	#fea-branding h2{float:left; background: url(../images/portfolio-home/heading-logo.png) 0 bottom no-repeat; height:165px; width:47px; display: inline-block; overflow: hidden; text-indent: -999em;}
	#fea-branding .featured-gall{background-image: url(../images/portfolio-home/bg_featured-brand.jpg); float:left;}
	#fea-branding .btn-left{background-image: url(../images/portfolio-home/btn_left-logo.png);}
	#fea-branding .btn-right{background-image: url(../images/portfolio-home/btn_right-logo.png);}
	
	#fea-art h2{float:left; background: url(../images/portfolio-home/heading-illustration.png) 0 bottom no-repeat; height:165px; width:47px; display: inline-block; overflow: hidden; text-indent: -999em;}
	#fea-art .featured-gall{background-image: url(../images/portfolio-home/bg_featured-art.jpg); float:left;}
	#fea-art .btn-left{background-image: url(../images/portfolio-home/btn_left-art.png);}
	#fea-art .btn-right{background-image: url(../images/portfolio-home/btn_right-art.png);}


/*about us*/
#float-container {background:none; width:220px; height:auto; padding:15px; margin:0 0 0 20px;  float:right; border:1px solid #a25f76;}

.float-right {float:right; margin:0 0 15px 15px;}
.float-left {float:left; margin:0 15px 15px 0;}

body#p-about h3.white {font:18px Georgia, "Times New Roman", Times, serif; color:#fff; padding:0 0 10px 0; font-style:italic; }
body#p-about h3.title-gennah {text-indent:-9999px; background:url(../images/titles/title_gennah.png) no-repeat 0 0; width:192px; height:49px; margin:0 0 30px 0;}
body#p-about h3.title-sarah {text-indent:-9999px; background:url(../images/titles/title_sarah.png) no-repeat 0 0; width:192px; height:49px; margin:0 0 30px 0;}
body#p-about p {color:#eee;}

ul.tick {list-style:none;}
ul.tick li {background:url(../images/icons/icon-tick.png) no-repeat 0 9px; padding:10px 0 0 30px;}

ul.profiles {margin:25px 0 0 0; padding:0; }
ul.profiles li {width:400px; float:left; padding:20px;}
ul.profiles li.gennah {}
ul.profiles li.sarah {border-left:1px solid #3d1a26; }



/*Portfolio Page*/
	#p-portfolio #web, #p-portfolio #logo, #p-portfolio #art{
		position: relative;
	}

	#p-portfolio h2{
		display: block;
		overflow: hidden;
		text-indent: -999em;
		width:169px;
		margin: 0 0 0 0;
		background-repeat: no-repeat;
		background-position: 0 0;
		margin:0 !important;
		padding:0 !important;
	}
	
	#p-portfolio #primary p.cta-click{
		text-align: right;
		position: absolute;
		top:14px;
		right:21px;
		color: #aec145;
	}
	
	#p-portfolio #web h2{background-image: url(../images/portfolio/heading-port-web.png); height:43px;}
	#p-portfolio #logo h2{background-image: url(../images/portfolio/heading-port-logo.png); height:45px;}
	#p-portfolio #art h2{background-image: url(../images/portfolio/heading-port-art.png); height:46px;}
	
	#p-portfolio #web p, #p-portfolio #logo p{
		margin:5px 0 20px 0;
	}
	
	#p-portfolio #art{
		padding: 0 0 20px 0;
	}

	ul.portfolio-list{margin: 0 0 0 0;}
	ul.portfolio-list li{
		float: left;
		background: url(../images/portfolio/bg_portfolio.png) 0 0 no-repeat;
		height:151px;
		width:166px;
		padding:3px 0 0 3px;
		margin: 0 5px 0 0;
		color: #823d55;
	}
	
	ul.portfolio-list li img{border:none;}
	ul.portfolio-list li a{text-decoration:none; color:#823d55;}
	
	.hidden-content{width:795px; margin: 0 auto; background:#190710; color:#fff; padding:0;}
	.hidden-content img{float:right; width:600px; border: 3px #fff solid;}
	.hidden-content .description{float:left; width:170px; padding-right:10px;}
	.hidden-content .description a:hove{text-decoration:none;}

	
/*Hire Us Page*/
	#form-col-left{width:400px; float:left;}
	#form-col-right{width:400px; float:left;}
	form#hire_form {margin:30px 0 0 0;}
	form#hire_form label{width:150px;}
	form#hire_form input[type="text"], form#hire_form textarea{
		width:200px;
	}
	form#hire_form select{width:206px;}
	form#hire_form li#btn-submit input{
		position: relative;
		top:0;
		left:165px;
	}
	form#hire_form label.error {
	  display: block;
	  color: #ff0000;
	  font-size: 10px;
	  line-height: 12px;
	  float:none;
	  width: 220px;
	  margin:0 0 0 150px;
	}


/*Contact Page*/
	form#contact-us {margin:30px 0 0 0; width:500px; float:left;}
	form#contact-us label {width:150px;}
	form#contact-us input[type="text"], form#contact-us textarea {
		width:200px;
	}
	
	form#contact-us select {width:206px;}
	form#contact-us li#btn-submit input {
		position: relative;
		top:0;
		left:165px;
	}
	
	form#contact-us label.error {
	  display: block;
	  color: #B7B7B7;
	  font-size: 10px;
	  line-height: 12px;
	  float:none;
	  width: 220px;
	  margin:0 0 0 150px;
	}
	
	#twitter-box {float:right; width:300px; padding:0 80px 20px 0;}
	textarea#Address {height:25px;}
	
	form#hire_form #form-comments textarea {height:125px;}
	form#hire_form li.address-list label {vertical-align:top;}


/*Footer Content*/
#footer-container {background:#190710; border-top: 1px solid #3d1a26;}
#footer-containe a {text-decoration:underline; color:#823D55;}
#footer-containe a:hover {color:#6F7E25;}

ul#footer-items {
	width: 980px;
	margin: 0 auto;
	padding:0 0 0 50px;
	height: 280px;
}

ul#footer-items li {
	float:left;
	height: 280px;
	padding-top:10px;
}

/*Footer*/
ul#footer-items li#affiliates {width: 250px; padding:10px 19px 0 40px; color: #823d55; text-align: right;}
ul#footer-items li#affiliates p {color:#823d55 !important;}

ul#footer-items li#affiliates h3#heading-friends {
	background: url(../images/heading_affiliates.gif) 0 0 no-repeat;
	height: 24px;
	width: 263px;
	display: block;
	overflow: hidden;
	text-indent: -999em;
	text-align:left;
}

ul#footer-items li#affiliates li {float:left; width:100px; height:auto;}

ul#footer-items li#affiliates li a#oscar-logo{height:50px; width:108px; background:url(../images/partner_oscar.gif) 0 0 no-repeat; display:block; overflow:hidden; text-indent:-999em;}

ul#footer-items li#follow {width: 175px; text-align: center; background:url(../images/footer-separators.gif) no-repeat top left;}
ul#footer-items li#follow ul {width: 134px; margin: 0 auto;}
ul#footer-items li#follow ul li {margin: 10px 2px 4px 12px; float: left; padding: 0; height: 60px;}
	
ul#footer-items li.cta-about {
	width:200px; 
	background:url(../images/footer-separators.gif) no-repeat top left;
	padding:10px 15px 0;
}

ul#footer-items li.cta-about img {
	float: left;
	background:url(../images/footer-separators.gif) no-repeat top left;
	margin:10px 10px 10px 0;
}

ul#footer-items li.cta-about h2 {
	display: block;
	overflow: hidden;
	text-indent: -999em;
	background-position: 0 0;
	background-repeat: no-repeat;
	width:136px;
	height:42px;
	float: left;
	margin: 0 0 5px 0;
	padding:0 0 0 0;
}

ul#footer-items li.cta-about h2#h2-gennah {
	background-image: url(../images/heading-gennah.gif);
}

ul#footer-items li.cta-about h2#h2-sarah {
	background-image: url(../images/heading-sarah.gif);
}

ul#footer-items p.cta-email {
 margin:0 0 5px 0;
 display:inline;
}

ul#footer-items li.cta-about p {
	clear: both;
	line-height:20px;
	color:#666;
}