@charset "UTF-8";


/* CSS Document */

/* RESET v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* advanced clearing technique 
Apply this class to the last element before the area that needs to clear. 
This eliminates the need for non-semantic extraneous mark-up, such as an empty div with clear:both applied */
.clearfix:after, .section:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix, .section {display:inline-block;}
* html .clearfix, * html .section {height:1%;}
.clearfix, .section {display:block;}



/* =End Reset 
================================================  */



body {
	background: #b7b079;
	background: #116060;
	text-align: center;
	
}

.inner { width: 980px; margin: 0 auto; padding: 12px 0; clear: both;}
#wrapper {
	/*background: #d4d792;*/
	margin: 0 auto;
	text-align: left;
}

#container {
}

#masthead {
	background: #000;
	padding: 3rem 1rem;
	border-bottom: 1px solid rgba(255,255,255,.4);
}

#masthead h1 {
	font-size: 2.5rem;
	margin: 0;
	height: 30px;
	text-align: center;
}

#mainContent {
	height: 600px;
	width: 980px;
	margin: 0 auto;
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	background: #000;
	background: rgba(0,0,0,.8);
	margin-bottom: 10px;
	position: relative;
}

.animals #mainContent {
	height: auto;
}
.chicken #mainContent {
	width: 600px;
	height: 500px;
}

.video #mainContent {
	height: 500px;
}

.about #mainContent {
	height: auto;
}

#socialBar {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 4px 8px;
	background: #fff;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.5);
}

.farm {
	background: #000 url(../images/bkg_planks.jpg) repeat-x;
}

#secondaryContent {
	width: 960px;
	padding: 0 10px 20px 10px;
	margin: 0 auto;
}

#footer {
	font-size: 14px;
	background: #b7b079;
	color: #552b2b;
	text-align: center;
}

#footer .inner { position: relative;}


.fb-like { float: left; width: 300px;}
#footer a:link, #footer a:visited { text-decoration: none; border-bottom: 1px dotted #7c6c20; color: #790000;}

#footer a:hover, #footer a:active { border-bottom: 1px dotted #660000; color: #660000;}
.section {
}

.feature {
	width: 980px;
	margin: 0 auto;
}

.chicken .feature {
	width: 600px;
	padding-top: 50px;
}

.video .feature {
	width: 600px;
	padding-top: 15px;
}

.animals .feature {
	padding-top: 15px;
	width: 900px;
}

.about .feature {
	text-align: left;
	padding: 15px 24px 24px 24px;
	color: #999;
	width: 800px;
	line-height: 20px;
}

.faq { 
	width: 500px;
	float: left;
	margin-right: 40px;
	}
	
.news, .tweet, .store {
	float: left;
	width: 250px;
}

.about .feature b, strong { color: #bbb;}
.about .feature a:link, .about .feature a:visited {
	color: #EEE7BF;
}

.about .feature a:hover, .about .feature a:active {
	color: #fff;
}

.column {
	width: 196px;
	padding: 8px;
	float: left;
	background: #eee7bf;
	margin-right: 12px;
	height: 185px;
	margin-top: 12px;
	position: relative;
	z-index: 400;
	border: 8px solid #fff;
	border: 8px solid rgba(255,255,255,.4);
	-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
	box-shadow: 0 0 2px rgba(0,0,0,.2);
}

.column:hover {
	position: relative;
	top: -4px;
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
	box-shadow: 0 0 4px rgba(0,0,0,.4);
}

.selected, .selected:hover {
	position: relative;
	top: -20px;
	-moz-box-shadow: 0 0 8px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.6);
	box-shadow: 0 0 4px rgba(0,0,0,.6);
	height: 205px;
}

ul.thumbgrid { margin: 40px auto; list-style-type: none;}
ul.thumbgrid li { 
	float: left; 
	list-style-type: none;
	width: 199px;
}
ul.thumbgrid a { 
	display: block;
	background: #222;
	margin: 6px;
	padding: 6px;
}

.thumbgrid span { 
	display: block;
	color: #ddd;
	font-size: 12px;
	text-align: center;
	margin: 1em;
	height: 20px;
}

ul.thumbgrid a:hover {
	position: relative;
	top: -2px;
	left: 2px;
}

ul.thumbgrid a:hover, ul.thumbgrid a:focus  { 
	box-shadow: -4px 4px 12px rgba(0,0,0,.8);
	-moz-box-shadow: -4px 4px 12px rgba(0,0,0,.8);
	-webkit-box-shadow: -4px 4px 12px rgba(0,0,0,.8);
}
ul.thumbgrid a:hover, ul.thumbgrid a:focus {
	-moz-transform:scale(1.05);
	-webkit-transform: scale(1.05);
	-o-transform:scale(1.05);	
	transform:scale(1.05);	
}

ul.thumbgrid a img {
	display: block;
	opacity:0.5;
	filter:alpha(opacity=50);
}

ul.thumbgrid a:hover img{
	opacity:1.0;
	filter:alpha(opacity=100);	
}


/*=LINKS */

a:link, a:visited {
	color: #790000;
}

a:hover, a:active {
	color: #C30;
}

.bio { background: #000; color: #999;margin: 0; padding: 30px 15px; text-align: left; line-height: 1.6;}
.bio strong { color: #fff;}
.bio li { margin: .75em;}
.wrapper { width: 500px; position: relative;}
.bio p { color: #aaa; margin: 2em .75em 1em .75em;}
.bio .bio-pic { float: right; margin: 1em;}
.bio h1 { margin-top: 10px;}