/*-------------------------------------------------------------------
Positiv Main Stylesheet

Version: 4.0
Last edited by: John Lytle on: 2010.04.01
Framework: The Plant System/WP Hybrid
For: Positiv Skateboards
Site Design: JL Productions (http://johnlytle.com/)

---------------------------------------------------------------------*/


/* =General Styles
---------------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

html {font: 76%/1.3 helvetica, arial, sans-serif}

body {
	margin: 0;
	background: #e2e2e2 url(/app/css/images/global/bg-body.gif) no-repeat 0 10px;
	border-top: 4px #000 solid;
	color: #666;
	text-align: center;
}


/* =Structure
---------------------------------------------------------------------*/

#container {
	position: relative;
	width: 920px;
	margin: 0 auto;
	text-align: left;
}
	
#content {
	clear: both;
	background: #fff;
	border-top: 6px solid #000;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

	.blog #content, .single #content, .archive #content, .search #content,
	.product #content, .contact #content {
		background: #fff url(/app/css/images/global/bg-content.gif) repeat-y 0 0;
	}
	

h1#logo {
	float: right;
	width: 200px;
	height: 55px;
	margin: 10px 60px 0 0;
	background: url(/app/css/images/logos/positiv-logo.png) no-repeat top left;
	text-indent: -9000px;
}
		
	#container span img {display: none;}
	

#primary-content {
	display: inline;
	float: left;
	width: 500px;
	margin: 40px;
}
	.team #primary-content,
	.tou #primary-content,
	.privacy #primary-content {
		width: 840px;
	}
	
	.product #primary-content {
		width: 525px;
		margin: 45px 0 0 20px;
		padding: 0 0 20px 0;
	}
	
#secondary-content {
	display: inline;
	float: right;
	width: 290px;
	min-height: 400px;
	margin: 0;
	padding: 50px 20px 20px 0;
	background: #efefef url(/app/css/images/global/bg-secondary-content.gif) no-repeat 0 0;
}


#site-info {
	margin: 0 auto;
	padding: 8px 0 0 10px;
	background: #ccc;
	border: 1px solid #ccc;
	text-align: left;
	font-size: 10px;
}



/* =Typography
---------------------------------------------------------------------*/

h2, h3, h4, h5, h6 {
	font-weight: bold;
	font-size: 120%;
	color: #000;
	margin: 0 0 10px 0;
}

	h2 {
		font-size: 180%;
	}
	
	#secondary-content h2 {
		font-size: 140%;
	}
	
	.product h2 {
		float: left;
	}

	.product h3 {
		font-size: 150%;
	}

	.team-stats h3 {
		color: #000;
		font-size: 170%;
		text-transform: capitalize;
	}

h4 {
	margin: 0;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 100%;
	color: #333;
}

p {
	margin-bottom: 6px;
}
	p span {font-weight: bold;}
	
p + h3, p + h4, h5 {
	margin-top: 20px;
}

	#site-info p.tagline {
		float: left;
		margin: 0;
	}
	
	p.plant {
		margin-top: 10px;
		color: #999;
		font-size: 10px;
		text-align: right;
	}
	
	p.like {
		float: left;
		margin-top: 5px;
	}

.breadcrumb {
	float: right;
	margin: 10px 0 10px 0;
}



/* =Links
---------------------------------------------------------------------*/

a {outline: none;}

a:link, a:visited {
	color: #36c;
	font-weight: bold;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	font-weight: bold;
}

a.current, li.active > a, li.current-cat a, .product #secondary-content li.active h4 > a {color: #000;}
#navigation li.active > a {color: #fff !important;}

/* =Phrase Elements
---------------------------------------------------------------------*/

hr {
	display: block;
	clear: both;
	height: 1px;
	margin: 10px 0;
	background-color: #eee;
	border: none;
	color: #eee;
}
	
strong {
	color: #666;
	font-weight: bold;
}

abbr[title] {border-bottom: 1px dotted #999}
abbr[title]:hover {cursor: help}



/* =Images
---------------------------------------------------------------------*/

a:link img, a:visited img {
	border-width: 0;
}

img.wp-post-image {
	float: left;
	margin-right: 20px;
}


/* =Classes
---------------------------------------------------------------------*/

.hide {display: none}
.small {font-size: 10px;}
.explanation {color: #900}

.explanation {
	color: #666;
	text-transform: none;
}

.error, .status {
	color: #c00;
	font-style: italic;
}
	body.error {font-style: normal;}
	
.error input.text, .error textarea {
	border: 1px #c00 solid;
}

.team-id {
	display: inline;
	float: left;
	width: 180px;
}	
	.team-id img {
		margin-top: 5px;
	}
	
.team-stats {
	display: inline;
	float: right;
	width: 625px;
	}



/* =Micro Formats
---------------------------------------------------------------------*/

div.vcard {
	display: block;
	margin: 0 0 20px 0;
}

	.vcard .org {
		font-weight: bold;
		text-transform: uppercase;
	}
	
	.vcard span.organization-unit {
		font-weight: normal;
		display: block;
		text-transform: none;
	}
	
	

/* =List Styles
---------------------------------------------------------------------*/

ul, ol, dl {
	margin-bottom: 10px;
	list-style-type: none;
}

.product.main #primary-content ul li {
	padding-left: 14px;
	background: #fff url(/app/css/images/assets/bullet.gif) no-repeat 0 2px;
}

ul#sns {
	float: right;
	margin: -5px 0 0 0;
	font-size: 10px;
}
	ul#sns li {
		display: inline;
		float: left;
		margin: 0 10px 0 0;
	}

	li.twitter a, li.facebook a, li.myspace a, li.youtube a {
		float: left;
		padding-left: 24px;
		background:transparent url(/app/css/images/assets/icon-twitter.png) no-repeat left top !important;
		line-height: 24px;
	}
	li.facebook a {background:transparent url(/app/css/images/assets/icon-facebook.png) no-repeat left top !important;}
	li.myspace a {background:transparent url(/app/css/images/assets/icon-myspace.png) no-repeat left top !important;}
	li.youtube a {background:transparent url(/app/css/images/assets/icon-youtube.png) no-repeat left top !important;}


/* =Navigation
---------------------------------------------------------------------*/

#navigation {
	clear: both;
	float: right;
	margin: 5px 20px 0 0;
	text-transform: uppercase;
}
	#navigation li {
		display: block;
		float: left;
		margin-right: 6px;		
	}	
		#navigation li a {
			padding: 4px 4px 2px 4px;
			color: #000;
			text-decoration: none;
		}
			#navigation li a:hover {
				background-color: #000;
				color: #fff;
			}

		#navigation li.active a {
			background-color: #000;
			color: #fff;
		}



/* =Blog
---------------------------------------------------------------------*/

div#hero {
	margin-bottom: 20px;
}

div.post {
	position: relative;
	clear: both;
	margin-bottom: 5px;
	padding: 10px 0 15px 0;
	border-bottom: 1px solid #eee;
}

p.post-meta {
	color: #999;
	font-weight: bold;
}

.post h3 {
	margin: 0 0 4px 0;
	font-size: 160%;
	text-transform: capitalize;
}

p.comments {
	margin: 20px 0 5px 0;
}

p.wp-caption-text {
	color: #000;
	font-style: italic;
}

.blog #secondary-content ul ul li, .archive #secondary-content ul ul li, .single #secondary-content ul ul li,  .search #secondary-content ul ul li  {
		margin: 0 0 0 8px;
	}
	
.home div.entry, .archive div.entry, .home div.entry, .search div.entry {
	margin-left: 220px;
}

.blog #secondary-content ul ul li, .archive #secondary-content ul ul li, .single #secondary-content ul ul li,  .search #secondary-content ul ul li  {
		margin: 0 0 0 8px;
	}


/* =Blog Comments
---------------------------------------------------------------------*/

ol.commentlist {
	margin: 0;
	list-style-type: none;
}	
	ol.commentlist li {
		margin: 0;
		padding: 10px;
		background: #fff;
		border-top: 1px #eee solid;
	}
		ol.commentlist li.alt {background: #eee;}
		
	.comment-status {
		display: block;
		clear: both;
		margin-top: 10px;
	}

	.comment-in-moderation {
		margin: 0 !important;
		padding: 5px 10px;
		background-color: #eee;
	}

.author {
	color: #999;
}		

cite {
	color: #333;
	font-style: normal;
	font-weight: bold;	
}



/* =Blog PageNavi Plugin
---------------------------------------------------------------------*/

.wp-pagenavi {
	margin: 10px 0 10px 0;
	padding: 10px 0 0 0;
	text-transform: uppercase;
}

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi span.pages, .wp-pagenavi a:active, .wp-pagenavi span.current {
	padding: 8px 8px 6px 8px;
	margin: 0 4px 0 0;
	background-color: #eee;
	color: #000;
	text-decoration: none;
}

.wp-pagenavi a:hover, .wp-pagenavi span.pages, .wp-pagenavi span.current, .wp-pagenavi a:active, .wp-pagenavi span.current {	
	background-color: #000;
	color: #fff;
}

.wp-pagenavi a.last {
	background-color: #fff;
	color: #fff;
}


/* =Blog Prev Next
---------------------------------------------------------------------*/

div.sub-nav {
	margin: 0 0 10px 0;
}

div.sub-nav div.prev a, div.sub-nav div.next a {
	display: inline;
	float: left;
	padding: 6px 8px;	
	background-color: #eee;
	color: #000;
}

div.sub-nav div.next a {
	float: right;
}

div.sub-nav div.prev a:hover,
div.sub-nav div.next a:hover {	
	background-color: #000;
	color: #fff;
}



/* =Product Category Navigation
---------------------------------------------------------------------*/

.product #secondary-content ul {
	margin: 0 0 5px 0;
}

	.product #secondary-content ul ul li {
		display: none;
		margin: 0;
	}

	.product #secondary-content ul li.active ul li {
		display: block !important;
	}



/* =Product Category Grid 
---------------------------------------------------------------------*/
ul.product-grid {
	clear: both;
	width: 560px;
	padding: 30px 0 0 0;
	}
	
	ul.product-grid li {
		float: left;
		width: 250px;
		margin: 0 10px 30px 10px;
		padding: 0;
		text-align: center;
	}
	ul.product-grid li span {
		clear: both;
		text-align: center;
	}
	
	ul.product-grid li img {
			border: 1px #eee solid;
		}
		ul.product-grid li img:hover {
			border: 1px #ccc solid;
		}
	
#product-display {
	clear: both;
	width: 500px;
	margin: 10px 0 0 20px;
	padding-top: 10px;
	border-top: 1px #eee solid;
}

	#product-display img#hero {
		margin: 0 0 0 30px;
	}

#product-details {
	clear: both;
	width: 520px;
	margin-left: 20px;
}

	#product-details ul {
		clear: both;
		margin: 4px 0;
	}	

	#product-details li {
		float: left;
		margin: 0 10px 2px 0;
		padding: 0 0 0 14px !important;
		background: transparent url(/app/css/images/assets/bullet.gif) no-repeat 0 2px !important;
	}



/* =Product Prev Next
---------------------------------------------------------------------*/

.product ul#prevnext {
	clear: both;
	float: right;
	width: 110px;
	height: 40px;
	font-size: 100%;
	margin-top: 10px;
}
	.product a.prev, .product a.next {
		float: left;
		display: block;
		margin: 0;
		padding: 4px;
		background: #eee;
		color: #000;
		border: none;
		text-transform: uppercase;
	}
	
	.product a.next {
		float: right;
		display: block;		
	}

	.product a.prev:hover, .product a.next:hover {
		background: #000;
		color: #fff;
	}
	

/* =Form
---------------------------------------------------------------------*/

fieldset {border: none;}
legend {display: none;}
	
label {
	display: block;
	margin: 0 0 2px 8px;
	}
	
input.text, textarea {
	display: block;
	margin-bottom: 10px;
	padding: 5px;
	background: #fff;
	border: 1px solid #ccc;
	-moz-border-radius: 8px;
}
	
	input:focus, textarea:focus {
		background: #ccc;
		border: 1px solid #999;
	}
	
	input:hover, textarea:hover {
		background: #fff;
		color: #000;
	}
	
textarea {
	height: 100px;
	width: 496px;
}

select {
	display: block;
	margin-bottom: 20px;
	padding: 2px;
	background: #fff;
	border: 1px solid #ccc;
	-moz-border-radius: 8px;
}

input.submit {
	display: inline;
	width: auto;
	margin: 2px 2px 2px 8px;
	padding: 2px;
	background: #000;
	color: #fff;
	border: none;
	text-transform: uppercase;
	overflow: visible;
}	
	input.submit:hover {
		background: #666;
	}



/* =Self-Clearing Floats
---------------------------------------------------------------------*/

#navigation:after, .section:after, div.post:after, #site-info:after, ol.commentlist li:after, #page-navi:after, #content:after, ul.product-grid:after, #product-details ul:after, div.sub-nav:after {
	display: block;
	content:'';
	clear: both;
}