/* Design by PixelBender.ca 
   Created March / April 2010 
   Author: tsilver@pixelbender.ca*/


/* 1-universal elements
   2-base structure ( divs, general positioning )
		a) wrapper
			i) wrapper
			ii) search
		b) header
			i) header div.primary
			ii) header div.secondary
		c) content
			i) primary
				aa) body.home
				bb) body.work
				cc) body.about, body.journal
			ii) secondary
				aa) body.home
				bb) body.work
				cc) body.about, body.journal
		d) footer
		e) typography
   3-forms 
   4-work.php pop-up effect */
   
   
div.tape {
background: url(../images/tape.gif) left top no-repeat;
display: block;
height: 100px;
}

/* 1 --------universal elements-------- */

div.clear { clear: both; height: 1px; }

body { text-align: center;
}

p { margin: 0 0 1em 0; line-height: 1.5; }

p.left { text-align: left; }



/* 2 --------base structure-------- */


/* a --------wrapper-------- */

div#wrapper {
margin: 0 auto;
min-width: 1009px;
}

div#search {
background: #44433B;
padding: 0.4em;
}


/* b --------header-------- */

header#home {
display: block;
background: url(../images/banner_bg.jpg) #E4E2DC left bottom repeat-y;
padding: 2em 5em 0 5em;
}

	
	header#home div.primary {
	float: right;
	width: 57%;
	}
	
			header#home div.primary img.logo {
			width: 30%;
			margin: 1em 0 2em 0;
			}
			
			header#home div.primary img.headline {
			width: 98%;
			}
			
			header#home div.primary img.coupon {
			width: 70%;
			margin-bottom: 5em;
			}
			
		header#home div.primary a.logo_link {
		display: block;
		}
		
		header#home div.primary a:hover.logo_link {
		background: url(../images/return.gif) right top no-repeat;
		border-bottom: none;
		}
	
	header#home div.secondary {
	float: left;
	width: 42%;
	}
	
		header#home div.secondary p {
		vertical-align: middle;
		}
		
		header#home div.secondary img {
		width: 100%;
		margin-top: 5em;
		border: none;
		}
		
			header#home div.secondary img.logo {
			width: 40%;
			margin: 1em 0 2em 0;
			}
			
			/* -- Redeem Coupon Button for Landing Page -- */
			
			header#home div.secondary a.redeem {
			display: block;
			background: url(../images/redeem_bg.jpg) left center no-repeat;
			padding: 10px 0;
			border: solid 4px #87837A;
			color: #346673;
			font-family: LeagueGothicRegular, 'Trebuchet MS', Verdana, sans-serif;
			font-size: 1.6em;
			font-weight: normal;
			text-transform: uppercase;
			}
			
				header#home div.secondary a:hover.redeem {
				color: #000;
				border-color: #000;
				}
				
				
/* c --------content-------- */

#content {
display: block;
background: url(../images/content_bg.jpg) center top repeat-x;
padding: 2em 5em;
}

		#content p img {
		float: left;
		margin: 10px 20px 0 0;
		border: none;
		}
		
		#content img.floated {
		float: left;
		margin: 10px 20px 0 0;
		border: none;
		}
		
body.work #content {
margin: 0 auto;
text-align: center;
}

	
	/* i --------primary-------- */
	
	#content div.primary {
	float: right;
	display: block;
	background: url(../images/primary_bg.jpg) #fff center top repeat-x;
	width: 55%;
	margin: 2em 0;
	padding: 1em 0;
	border: solid 2px #d9dde0;
	/* border radius */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
	}
	
		body.about #content div.primary, body.journal #content div.primary {
		width: 50%;
		padding: 1em 2em;
		text-align: left;
		}
		
			body.about #content div.primary section p img {
			float: left;
			background: #fff;
			margin: 5px 10px 10px 0;
			padding: 8px;
			border: dotted 1px #999;
			}
	
		body.home #content div.primary h1 {
		margin: 0 0 0.5em 0;
		padding-left: 0.5em;
		text-align: left;
		}
	
		#content div.primary:hover {
		border: solid 2px #aaa;
		}
		
	body.work #content div.primary, body.case_study #content div.primary {
	margin: 2em auto;
	float: none;
	display: block;
	width: 90%;
	max-width: 1200px;
	padding: 2em;
	text-align: left;
	}
	
		
		body.work #content div.primary h1, body.work #content div.primary h2, body.work #content div.primary p {
		margin-left: 475px;
		}
		
		body.case_study #content div.primary h1, body.case_study #content div.primary h2, body.case_study #content div.primary p {
		margin-left: 275px;
		}
		
			body.case_study #content div.primary p.float {
			display: inline;
			float: left;
			width: 200px;
			margin: 0 0 2em 0;
			line-height: 250px;
			}
			
				body.case_study #content div.primary p.float a:hover.fancyzoom {
				border-bottom: none;
				}
				
				body.case_study #content div.primary p.float a.fancyzoom img.detail {
				border: solid 8px #fff;
				box-shadow: 0px 0px 10px #aaa;
				-moz-box-shadow: 0px 0px 10px #aaa;
				-webkit-box-shadow: 0px 0px 10px #aaa;
				}
				
		body.journal #content div.primary section h1 + p, body.journal #content div.primary section h2 + p, body.journal #content div.primary section ul + p {
		margin-top: 1em;
		}
		
		body.journal #content div.primary section ul li {
		margin: 0.6em 0;
		}
		
		body.journal #content div.primary section ul.teasers {
		float: left;
		list-style: none;
		}
		
			body.journal #content div.primary section ul.teasers li {
			float: left;
			width: 150px;
			height: 150px;
			margin-right: 10px;
			}
		
		
	
		/* aa ---- portfolio slideshow ---- */
		
		#content div.primary ul#portfolio {
		display: block;
		margin: 0 1em;
		list-style: none;
		text-align: left;
		}
		
			#content div.primary ul#portfolio li {
			display: block;
			width: 100%;
			padding-top: 335px;
			border: solid 1px #aaa;
			}
			
				#content div.primary ul#portfolio li span {
				display: block;
				background: url(../images/portfolio_span_bg.jpg) left bottom no-repeat;
				height: 140px;
				padding: 0 0 0 150px;
				}
				
					#content div.primary ul#portfolio li span h2 {
					padding-top: 15px;
					}
					
					#content div.primary ul#portfolio li span p {
					max-width: 45em;
					padding: 0 15px 1em 0;
					}
				
			
			#content div.primary ul#portfolio li.city_reels {
			background: url(../images/cityreels_bg.jpg) left top no-repeat;
			}
			
			#content div.primary ul#portfolio li.holly_high_hopes {
			background: url(../images/holly_bg.jpg) left top no-repeat;
			}
			
			#content div.primary ul#portfolio li.fosterhub {
			background: url(../images/fosterhub_bg.jpg) left top no-repeat;
			}
			
			#content div.primary ul#portfolio li.high_hopes {
			background: url(../images/highhopes_bg.jpg) left top no-repeat;
			}
			
			#content div.primary ul#portfolio li.serenity {
			background: url(../images/serenity_bg.jpg) left top no-repeat;
			}
		
	
	/* ii --------secondary-------- */
	
	#content div.secondary {
	float: left;
	width: 40%;
	padding: 2em 0;
	text-align: left;
	}
	
		#content div.secondary section {
		display: block;
		background: url(../images/primary_bg.jpg) #fff center top repeat-x;
		margin: 0 0 2em 0;
		padding: 1em 2em;
		border: solid 2px #d9dde0;
		/* border radius */
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		}
		
			#content div.secondary section:hover {
			border: solid 2px #aaa;
			}
			
			
			#content div.secondary section.download, #content div.primary section.download {
			background: url(../images/primary_bg.jpg) #fff right top repeat-x;
			}
			
			#content div.secondary section.tweet, #content div.primary section.tweet {
			background: url(../images/primary_bg.jpg) #fff left top repeat-x;
			}
			
		body.work #content div.secondary {
		float: none;
		display: block;
		width: 86%;
		margin: 0 auto;
		text-align: center;
		}
		
			body.work #content div.secondary section {
			float: left;
			display: block;
			background: url(../images/primary_bg.jpg) #fff right top repeat-x;
			width: 22%;
			margin: 0 1% 1% 0;
			padding: 1em 2em;
			border: solid 2px #fff;
			/* border radius */
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
			box-shadow:inset 0 0 20px #999;
   			-moz-box-shadow:inset 0 0 20px #999;
   			-webkit-box-shadow:inset 0 0 20px #999;
			text-align: left;
			}
			
				
					body.work #content div.secondary section div {
					background: #ccc;
					height: 100px;
					margin: 0.7em 0 1.4em 0;
					}
					
						
						body.work #content div.secondary section div a {
						display: block;
						width: 100%;
						height: 100%;
						border-bottom: solid 6px #346673;
						}
					
							body.work #content div.secondary section div a:hover {
							border-bottom: solid 6px #000;
							}
					
						body.work #content div.secondary section div.holly {
						background: url(../images/holly_port.jpg) left top no-repeat;
						}
						
						body.work #content div.secondary section div.fosterhub {
						background: url(../images/fosterhub_port.jpg) left top no-repeat;
						}
						
						body.work #content div.secondary section div.prospector {
						background: url(../images/prospector_port.jpg) left bottom no-repeat;
						}
						
						body.work #content div.secondary section div.serenity {
						background: url(../images/serenity_port.jpg) left top no-repeat;
						}
						
						body.work #content div.secondary section div.tricities {
						background: url(../images/tricities_port.jpg) left top no-repeat;
						}
						
						body.work #content div.secondary section div.gering {
						background: url(../images/gering_port.jpg) left top no-repeat;
						}
						
					body.work #content div.secondary section p {
					font-style: italic;
					font-size: 0.9em;
					}
					
			body.journal #content div.secondary section p img {
			float: left;
			background: #fff;
			margin: 5px 10px 10px 0;
			padding: 8px;
			border: dotted 1px #999;
			}
			
			body.journal #content div.secondary section div.clear {
			margin-bottom: 0.5em;
			}
		
		


/* d --------footer-------- */

footer {
display: block;
clear: both;
background: url(../images/footer_bg.jpg) #0c343d left top repeat-x;
padding: 5em;
color: #fff;
}

/* 3 --------form styles-------- */

form label {
margin: 0;
}

form input.text-med, form input.text-short {
display: block;
margin: 0;
height: 1.6em;
border: solid 1px #999;
}

form input.button {
margin-top: 1em;
}

form select.select {
margin-bottom: 1em;
}

form textarea.textarea {
margin-bottom: 1em;
}

/* 4 --------fancy zoom pop-up styles-------- */



a#zoom_close:hover {
border-bottom: none;
}

div#zoom_content {
font-size: 1em;
}	



/* 4 --------easy slider styles-------- */

div#slider_wrapper {
float: left;
}

div#slider {
position: relative;
left: 0;
border: solid 10px #fff;
z-index: 0
box-shadow: 0 0 10px #999;
-moz-box-shadow: 0 0 10px #999;
-webkit-box-shadow: 0 0 10px #999;
}

#slicer ul {
overflow: hidden;
margin: 0;
}

#slider li {
background: #ccc;
width: 425px;
height: 340px;
overflow: hidden;
}

	#slider li a:hover {
	border-bottom: none;
	}

#prevBtn a {
float: left;
display: block;
position: relative;
top: -225px;
left: 0;
background: url(../images/prev_button.png) left center no-repeat;
width: 75px;
height: 75px;
margin-right: 295px;
z-index: 99;
text-indent: -999em;
}

#nextBtn a {
float: left;
display: block;
position: relative;
top: -225px;
left: 0;
background: url(../images/next_button.png) right center no-repeat;
width: 75px;
height: 75px;
z-index: 99;
text-indent: -999em;
}

	#prevBtn a:hover, #nextBtn a:hover {
	border-bottom: none;
	}