/*
Theme Name: comemai
Theme URI: http://comemai.net
Description: Custom WordPress Theme
Version: 1.0
Author: modularte
Author URI: http://modularte.de
Tags: custom, clean, basic
*/

/* =========================================================================== */
/* ! 

color tones

red tone:			#D9001A (headlines, active breadcrumb/footer-navi item)
gray1 (dark):		#3E3E3E (navigation, textcopy, quotes in headlines, footer-navi headlines)
gray2 (light):		#878787 (footer-navi items)
gray3 (lighter):	#D6D6D6 (vertical line/border - narrow column/additional content)
gray4 (lightest):	#E5E5E5 (border footer, border breadcrumb)
brownish gray:		#474139 (footer bar textcopy)

green tone:			#5BA014 ("Add To Cart" button)

*/
/* =========================================================================== */

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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;}

table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
form legend {display: none;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
ol, ul {list-style: none;}
hr {display: none; visibility: hidden;}

:focus {outline: 0; background: transparent;}
a img {outline: none; border: none;}




/* ========= */
/* ! tools   */
/* ========= */

/* clearfix */

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

.clear {display: inline-block;}

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




/* ======== */
/* ! typo   */
/* ======== */

h1, h2, h3, h4 {color: #D9001A; margin: 0 0 20px 0;}

h1 {font-size: 30px;}
h2 {font-size: 22px;}
h3 {font-size: 12px;}
h4 {font-size: 10px;}

a, a:visited {text-decoration: none; color: #3e3e3e;}
	a:hover {text-decoration: none; color: #000;}

strong {font-weight: bold;}

.green {
	color: #2e9f00;}




/* ============= */
/* ! structure   */
/* ============= */

html {
	font: 15px/19px Arial, Helvetica, Sans-Serif;
	color: #3E3E3E;
	background: #F8F8F8 url(img/bg.jpg) repeat-x top left;}

#container {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	/* background: #EE0000; */}

#header {
	width: 1000px;
	height: 97px;
	margin: 0;
	padding: 0;
	background: transparent;}

	#logo {
		margin: 18px 75px 0 50px;
		width: 204px;
		float: left;}
	
		#logo h1 a {
			text-indent: -9999px;
			margin: 0;
			padding: 0;
			display: block;
			width: 204px;
			height: 63px;
			background: url(img/logo.png) no-repeat;}
		

	#main_navi {
		width: 200px;
		margin: 48px 0 0 0;
		float: left;}
	
		#main_navi ul li a {
			cursor: pointer;
			display: block;
			text-indent: -9999px;
			width: 80px;
			height: 50px;
			margin: 0 2px 0 0;
			float: left;}

			#main_navi ul li a.store {
				width: 80px;
				height: 50px;
				background: url(img/main_navi_sprite.gif) no-repeat;}
			
				#main_navi ul li a.store:hover, #main_navi ul li a.store.active {
					background: url(img/main_navi_sprite.gif) no-repeat -80px 0;}
		
			#main_navi ul li a.why {
				width: 80px;
				height: 50px;
				background: url(img/main_navi_sprite.gif) no-repeat 0 -50px;}
			
				#main_navi ul li a.why:hover, #main_navi ul li a.why.active {
					background: url(img/main_navi_sprite.gif) no-repeat -80px -50px;}

	#socialmedia{
		margin: 0 38px 0 0;
		float: right;
		width: 86px;
		height: 33px;}

		#socialmedia ul li a {
			cursor: pointer;
			display: block;
			text-indent: -9999px;
			width: 42px;
			height: 33px;
			float: left;}
	
			#socialmedia ul li a.facebook {
				margin: 0 2px 0 0;
				width: 42px;
				height: 33px;
				background: url(img/icon_facebook.gif) no-repeat;}
	
			#socialmedia ul li a.twitter {
				width: 42px;
				height: 33px;
				background: url(img/icon_twitter.gif) no-repeat;}


	#breadcrumb {
	width: 900px;
	margin: -25px 0 33px 0;
	padding: 0 0 5px 0;
	background: transparent;
	border-bottom: 1px solid #E5E5E5;
	font-size: 11px;
	color: #D9001A;}

	#breadcrumb a {
		text-decoration: underline;}

#content {
	width: 1000px;
	margin: 0;
	padding: 0;
	background: transparent;
	/* font-size: 13px; */}

	#box_white_top {
		width: 1000px;
		height: 20px;
		margin: 0;
		padding: 0;
		background: transparent url(img/white_top.png) repeat-y top left;}

	#box_white {
		position: relative;
		/* float: left; */
		width: 900px; /* (1000px -2*50px padding) */
		margin: 0;
		padding: 15px 50px 40px 50px;
		background: transparent url(img/white_mid.png) repeat-y top left;}
		
	#box_white_home {
		position: relative;
	/* 	float: left; */
		width: 1000px; /* (1000px -2*50px padding) */
		margin: 0;
		padding: 15px 0px 0px 0px;
		background: transparent url(img/white_mid.png) repeat-y top left;}

		/* WP e-commerce shop/grid-view related style!!! */
		#box_white_shop {
			position: relative;
			float: left;
			width: 900px; /* (1000px -2*50px padding) */
			margin: 0;
			padding: 15px 50px 0px 50px;
			background: transparent url(img/white_mid.png) repeat-y top left;
			border: none;
			outline: none;}

	#box_white_bottom {
		width: 1000px;
		height: 20px;
		margin: 0;
		padding: 0;
		background: transparent url(img/white_bottom.png) repeat-y top left;}
		
	#box_gray {
		width: 900px; /* (1000px -2*50px padding) */
		margin: 0;
		padding: 40px 50px 20px 50px;
		background: transparent url(img/gray_mid.png) repeat-y top left;}

		/* WP e-commerce shop/grid-view related style!!! */
		#box_gray_shop {
		width: 900px; /* (1000px -2*50px padding) */
		margin: 100px 0 0 0;
		padding: 35px 50px 20px 50px;
		background: transparent url(img/gray_mid.png) repeat-y top left;}
		
		#box_gray_shop .widecolumn {width: 580px; margin: 40px 40px 0 0;}
		
		#box_gray_shop .narrowcolumn {width: 260px; margin: 70px 0 0 -30px;}


	#box_gray_bottom {
		width: 1000px;
		height: 20px;
		margin: 0;
		padding: 0;
		background: transparent url(img/gray_bottom.png) repeat-y top left;}
		

#footer {
	width: 900px; /* (1000px -2*50px padding) */
	margin: 0;
	padding: 20px 50px;
	clear: both;} 

	#footer_navi {
		font-size: 12px;
		line-height: 22px;
		margin: 0;
		padding: 0;}
	
		#footer_navi .column {
			width: 200px;
			margin: 0 20px 0 0;
			padding: 0;
			float: left;}
			
			#footer_navi .column h2 {
				margin: 0;
				color: #3E3E3E;
				font-weight: bold;
				font-size: 12px;
				line-height: 22px;}

			#footer_navi .column ul {
			margin: 0;
			padding: 0;}

				#footer_navi .column ul a {color: #878787;}
				
					#footer_navi .column ul a:hover {color: #000;}
					#footer ul li a.active {color: #D9001A;}

	#footer_bar {
		width: 900px;
		margin: 20px 0 0 -40px;
		padding: 20px 40px;
		border-top: 1px solid #E5E5E5;
		color: #474139;
		font-size: 11px;}

	#footer .left {width: auto; float: left; text-align: left;}
	#footer .right {width: auto; float: right; text-align: right;}




/* main elements */

p {margin: 0; padding: 0 0 20px 0;}




/* ===================== */
/* ! page related styles */
/* ===================== */

.widecolumn {width: 580px;}
.narrowcolumn {width: 260px;}
.left {float: left; margin: 0;}
.right {float: right; margin: 0 40px 0 0;}
.border_left {border-left: 1px solid #D6D6D6; padding: 0 0 0 20px;}

.teaser_right {margin: 0px 0 10px 0;}
	.teaser_right img {margin: -15px 0 20px 0; cursor:pointer;}
.teaser_right_links {width: 260px; float: left; padding: 0 0 20px 0;}
	.teaser_right_links a {text-decoration: underline; margin: 0 0 -10px 0;}

/* Home */

	#visual_home {
		widows: 978px;
		height: 532px;
		margin: 0 0 0 11px;
		padding: 0;
		text-align: center;
		overflow: hidden;}
	
	.button_to_the_store {
		margin: 0;
		padding: 0 0 0 35px;
		display: block;
		background: url(img/icon_store.gif) no-repeat -4px -2px;}
	
	.button_tell_your_friends {
		margin: 0;
		padding: 4px 0 3px 35px;
		display: block;
		background: url(img/icon_tell_your_friends.gif) no-repeat 0 2px;}
	
	/* the overlayed element */
	.overlay {
		display: none; /* initially overlay is hidden */
		opacity: 0.95;
		width: 500px; /* width after the growing animation finishes | height is automatically calculated */
		padding: 20px;
		font-size: 15px;
		text-align: left;}
	
	.overlaybox_top {
		width: 520px;
		height: 40px;
		margin: -20px 0 0 0;
		padding: 0;
		background: transparent url(img/overlaybox_bg_top.png) no-repeat top left;}
	
	.overlaybox_mid {
		width: 460px;
		margin: 0;
		padding: 0 30px;
		background: transparent url(img/overlaybox_bg_mid.png) repeat-y top left;}
		
		.overlaybox_mid h3 {font-size: 18px; line-height: 24px; color: #D9001A; margin: -10px 0 15px 0;}
		.overlaybox_mid p {color: #3E3E3E; line-height: 15px; margin: 0; padding: 0 0 0px 0;}
		.overlaybox_mid ul {list-style: disc; margin: 10px 0 10px 20px;}
			.overlaybox_mid ul li {margin: 0;}
	
	.overlaybox_bottom {
		width: 520px;
		height: 40px;
		margin: 0;
		padding: 0;
		background: transparent url(img/overlaybox_bg_bottom.png) no-repeat top left;}
	

	/* the overlayed element */
	.overlay {
		display: none; /* initially overlay is hidden */
		opacity: 0.95;
		width: 500px; /* width after the growing animation finishes | height is automatically calculated */
		padding: 20px;
		font-size: 15px;
		text-align: left;}
	
	.overlaybox_top {
		width: 520px;
		height: 40px;
		margin: 0 0 0 0;
		padding: 0;
		background: transparent url(img/overlaybox_bg_top.png) no-repeat top left;}
	
	.overlaybox_mid {
		width: 460px;
		margin: 0;
		padding: 0 30px;
		background: transparent url(img/overlaybox_bg_mid.png) repeat-y top left;}
		
		.overlaybox_mid h3 {font-size: 18px; line-height: 24px; color: #D9001A; margin: -10px 0 15px 0;}
		.overlaybox_mid p {color: #3E3E3E; line-height: 15px; margin: 0; padding: 0 0 0px 0;}
		.overlaybox_mid ul {list-style: disc; margin: 10px 0 10px 20px;}
			.overlaybox_mid ul li {margin: 0;}
	
	.overlaybox_bottom {
		width: 520px;
		height: 40px;
		margin: 0;
		padding: 0;
		background: transparent url(img/overlaybox_bg_bottom.png) no-repeat top left;}
	
			
	/* the overlayed element store page */
	
	.overlaybox_top_info {
		width: 332px;
		height: 14px;
		margin: 0px 0 0 0;
		padding: 0;
		background: transparent url(img/overlaybox_bg_top_detail.gif) no-repeat top left;}
	
	.overlaybox_mid_info {
		width: 272px;
		margin: 0;
		padding: 0 30px;
		background: transparent url(img/overlaybox_bg_mid_detail.gif) repeat-y top left;}
		
		.overlaybox_mid p {color: #3E3E3E; line-height: 12px; margin: 0; padding: 0 0 0 0;}
			
	.overlaybox_bottom_info {
		width: 332px;
		height: 40px;
		margin: 0;
		padding: 0;
		background: transparent url(img/overlaybox_bg_bottom_detail.gif) no-repeat top left;}
		
		
	.header_discount {
		background-image: url(img/header_discount.png);
		background-repeat: no-repeat;
		width: 380px;
		height: 69px;
		text-indent: -9999px;
		}
	
	/* default close button positioned on upper right corner */
	.overlay .close {
		background: url(img/close.gif) no-repeat;
		position: absolute; right:25px; top:25px;
		cursor: pointer;
		height: 19px;
		width: 19px;}

/* Store */

	.teaser_left {margin: -10px 0 10px -30px;}
		.teaser_left img {margin: 35px 0 20px 0; cursor:pointer;}
	
	.widecolumn ul {list-style: disc; margin: -20px 0 0 20px;}
	
	
	.limited_edition_badge {
		position: absolute;
		margin: -150px 0 0 -120px;
		background: url(img/limited_edition_badge.png) top left no-repeat;
		width: 84px;
		height: 84px;}
		
	.limited_edition_badge p {
		padding: 22px 10px 20px 12px;
		width: 60px;
		text-align: center;
		font-size: 12px;
		line-height: 15px;
		font-weight: bold;
		color: #FFF;
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);}
		
	.product_grid_item .limited_edition_badge {
		position: absolute;
		margin: -130px 0 0 180px;
		background: url(img/limited_edition_badge.png) top left no-repeat;
		width: 84px;
		height: 84px;}
	
	.info {background: url(img/icon_info.gif) right top no-repeat; padding: 0 0 0 0; height: 18px; width: 18px; margin: -38px 45px 0 0; display: block; text-indent: -9999px; float: right; }

	fieldset {
		margin-top: -20px;}
/*Store Customize Product */
		
	.custom_text h4{
		font-size: 18px;
		margin: 0;
		}
		
	.custom_text input{
		width: 225px;
		height: 25px;
		margin: 0 0 0 0;
		background: white;
		font-size: 15px;
		color: #3e3e3e;
		}

/* Why */

	.why_visual {
		margin: 80px auto 0 auto;
		display: block;
		text-align: center;}

/* About */

	.about_visual {
		margin: 0 auto;
		display: block;
		text-align: center;}

/* Sitemap */

	ul.sitemap {list-style: none; margin: 0 0 20px 0; line-height: 25px;}
		ul.sitemap a {text-decoration: underline; color: #3E3E3E;}
		ul.sitemap h3 {font-size: 15px; font-weight: bold; color: #3E3E3E; margin: 0;}

/* Product - Home (Store) */

	.product_grid {
		/* width: 900px; */
		/* height: 300px; */
		padding: 0;
		margin: 0;}
	
	.product {
		width: 300px;
		height: 300px;
		margin: 0 0 20px 0;
		padding: 0;
		/* background: #FFEEDD; */
		font-size: 15px;
		float: left;}
		
	.product_image_thumb_container {
		width: 280px;
		height: 214px;
		overflow: hidden;}

	.product_image_thumb_container img.product_image {margin: -42px 0 0 0;}
	
	.thumbcontainer {
		width: 80px;
		height: 80px;
		overflow: hidden;}
		
	.product_name {
		color: #d9001a;}


/* Product - Details Page (Sleeve) */
 

	.product_image_column {
		width: 600px;
		float: left;
		margin: -7px 0 0 0;
		padding: 0;}
		
	.slideshow-container {
		width: 630px;
		height: 490px;
		margin: -17px 0 0 -30px;
		}
		
	#slideshow{
		width: 630px;
		height: 490px;
		}
			
	#slideshow img{
		width: 600px;
		height: 490px;
		margin: 0 0 0 25px;}

	.thumb {
		width: 80px;
		height: 80px;
		border: 1px solid #D6D6D6;
		overflow: hidden;}

	ul.thumbs {
		width: 630px;
		height: 80px;
		margin: 20px 0 43px -16px;
		padding: 0;}
	
	ul.thumbs li {
		float: left;
		padding: 0;
		margin: 0 0 0 16px;
		list-style: none;}
		
	a.thumb {
		padding: 2px;
		display: block;}
		
	ul.thumbs li.selected a.thumb {
		border: 1px solid #D9001A;}
		
	a.thumb:focus {
		outline: none;}
		
	ul.thumbs img {
		margin: -6px 0 0 -12px;
		border: none;}
	
	.advance-link {
		position: absolute;
		margin: 0;
		padding: 0;}
	
	div.loader {
		position: absolute;
		top: 248px;
		left: 320px;
		background-image: url('img/loader.gif');
		background-repeat: no-repeat;
		background-position: center;
		width: 48px;
		height: 48px; /* This should be set to be at least the height of the largest image in the slideshow */}
	
	
	.product_details_column {
		width: 280px;
		float: right;
		margin-left: 0;
		margin: -13px 0 0 0;
		padding: 0;}
	
		.product_details_column h2 {font-size: 22px; margin: 0px 0 10px 0;}
	
	.product_form {
		width: 280px;
/* 		margin-top: -25px; */
		}

		
	.buzz-link-ltr {
		text-decoration: underline;}
		
			
	.claim {margin: 0 0 15px 0; padding: 0;}
	.price {font-size: 20px; width: 120px; height: 37px; float: left; margin: 3px 15px 0 0px; padding: 0;}
	.add_to_cart {width: 129px; height: 44px; margin: -36px 0 0 0; padding: 0; border: none;}
	
	
		/*
.add_to_cart a {display: block; width: 129px; height: 44px; margin: 0; padding: 0;}
		.add_to_cart_button {width: 129px; height: 44px; background: transparent url(img/button_add_to_cart.gif) no-repeat;}
*/
	#share-container { position: absolute; top: 550px;}
		.share {width: 300px; margin: 0px 0 60px 0; font-size:12px; position: relative;}
			.share li {height: 16px; margin: 0 0 10px 0; padding: 0; overflow: hidden; float: left;}
				.share a {
					height: 15px;
					margin: 0;
					padding: 0 0 7px 25px;
					display: block;
					float: left;
					text-decoration: underline;}
					
				.button_facebook {background: url(img/icons_share_sprite.jpg) no-repeat 0 0; width: 74px;}
				.button_twitter {background: url(img/icons_share_sprite.jpg) no-repeat 0 -15px; width: 56px;}
				.button_google_buzz {background: url(img/icons_share_sprite.jpg) no-repeat 0 -31px; width: 92px;}
	
	.sleeves_in_stock_info {margin: 0 0 20px 0;}

	.teaserbox-container {
		position: absolute;
		top: 370px;
		width: 228px;
		margin-top: 5px;
		height: auto;}
		
	.teaserbox_top {
		float: left;
		width: 278px;
		height: 20px;
		margin: -20px 0 0 0;
		padding: 0;
		overflow: hidden;
		background: transparent url(img/teaser_gift_top.gif) no-repeat top left;}
	
	.teaserbox_mid {
		width: 228px;
		margin: 0;
		padding: 0 20px 0 30px;
		background: transparent url(img/teaser_gift_mid.gif) repeat-y top left;}
		
		.teaserbox_mid h3 {font-size: 15px; color: #D9001A; margin: -3px 0 15px 0;}
		.teaserbox_mid p { font-size: 12px; color: #3E3E3E; line-height: 15px; margin: 0; padding: 0 0 5px 0;}
	
	.teaserbox_bottom {
		width: 278px;
		height: 10px;
		margin: 0 0 35px 0;
		padding: 0;
		background: transparent url(img/teaser_gift_bottom.gif) no-repeat top left;}
		
		
	.product_story {
		clear: both;
		width: 560px;
		font-size: 15px;
		margin: 10px auto 0 auto;
		padding: 30px 0 0 0;}
	
		.product_story h2 {font-size: 30px;}
	
	.sleeves_in_stock_info {margin: 0 0 20px 0;}
	


	
/* ================================================================================= */
/* ! BACKUP - styles used by the "tinymce advanced" plugin - (located in plugin dir) */
/* ================================================================================= */

.gray {color: #3E3E3E;}
.red {color: #D9001A;}

.small {font-size: 11px;}

.quote {
	font-size: 11px !important}

.quote-deal {font: 11px/11px Arial, Helvetica, Sans-Serif}

/* ################################################################################# */

/* wp-e-commerce related styles */

.wpsc_buy_button {
	/* float: left; */
	margin: -22px 0 0 0;
	font: Arial, Helvetica, Sans-Serif;
	border: none;
	width: 129px;
	height: 44px;
	background: transparent url(img/button_add_to_cart.gif) no-repeat;
	display: block;
	border: none;
	text-indent: -9999px;
	cursor: pointer;}

	



/* styling without javascript */