@charset "UTF-8";
@import "clearing.css";
@import "messages.css";
	
/**
 * Styl pro web teguza.cz
 *
 * FONT STACKS:
 * 	– text & heading: Arial, "Helvetica Neue", Helvetica, sans-serif
 * 	– menu: "Trebuchet MS", Calibri, Tahoma, sans-serif
 * 	– quotes: Baskerville, Georgia, serif
 *
 * @author Michal Kočárek <michal.kocarek@brainbox.cz>
 * @version $Id: main.css 299 2010-07-28 16:38:13Z fridge $
 * @since 2010.01.30
 */

/*
 * ========================================================
 * == Generic elements
 */
html {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	min-height: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	position: relative;
	height: 100%;
	overflow: auto;
}

#article {
	font-size: 1.1666em; /* 14px = 12px × … */
}

h1, h2, h3, h4, h5, h6 {
	color: #0c599e;
	font-weight: bold;
}
	
	h1 {
		/* Pro H1 není potřeba žádný styl, protože H1 se překryje logem brainzone */
	}
	
	h2 {
		margin-top: 0; /* Jelikož je na stránce pouze jeden, nedávejme mu horní margin */
		margin-bottom: 1em;
		font-size: 1.42857em; /* 20px = 14px × … */
		border-bottom: 2px solid;
	}
	
	h3 {
		margin-top: 2em;
		margin-bottom: 1em;
		font-size: 1.142857em; /* 16px = 14px × … */
		border-bottom: 2px solid;
		text-transform: uppercase;
	}

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

#article ul {
	
}
	
	#article ul li {
		display: list-item;
		list-style: none;
		margin: 1em 0 1em 1em;
		padding-left: 1.5em;
		background: url("../img/bullet-tick.png") 0.1em 0 no-repeat;
	}

#article a {
	color: #cb2b12;
}
	
	#article a:visited {
		color: #511B12;
	}
	
	#article a:hover,
	#article a:focus {
		text-decoration: none;
	}

/*
 * ========================================================
 * == Generic „utilities“
 */

/**
 * Custom CSS borders.
 * <div class="cb"><div class="bt"><div></div></div><div class="i1"><div class="i2"><div class="i3">
 * 	<img src="…" alt="" />
 * </div></div></div><div class="bb"><div></div></div></div>
 *
 * Image has border of width 5px. IE6 uses alternative styling with pure CSS (because of lack of PNGA).
 *
 * When floating, set width & height to the .cb element (needed for IE6 & IE7).
 */
.cb {
	
}
	
	.bt {
		height: 5px;
		margin-left: 5px;
		background: url('../img/img-border-5.png') no-repeat 100% 0;
	}
		
		.bt div {
			position: relative;
			left: -5px;
			width: 5px; height: 5px;
			background: url('../img/img-border-5.png') no-repeat 0 0;
			font-size: 0; line-height: 0;
		}

	/* Bottom corners and border */
	.bb {
		height: 5px;
		margin-left: 5px;
		background: url('../img/img-border-5.png') no-repeat 100% 100%;
	}
		
		.bb div {
			position: relative;
			left: -5px;
			width: 5px; height: 5px;
			background: url('../img/img-border-5.png') no-repeat 0 100%;
			font-size: 0; line-height: 0;
		}

	/* Left border */
	.i1 {
		padding-left: 5px;
		background: url("../img/img-border-5.png") no-repeat left -5px;
	}
		
		/* Right border */
		.i2 {
			padding-right: 5px;
			background: url("../img/img-border-5.png") no-repeat right -5px;
		}
			
			/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
			.i3 {
				display: block;
				margin: 0; padding: 0;
			}
				
				.i3 img {
					display: block;
				}
			
			.i3:after {
				content: '.'; 
				display: block; 
				height: 0; 
				clear: both; 
				visibility: hidden;
			}
			.i3 { display: inline-block; }
			.i3 { display: block; }
	
	/**
	 * IE 6 has no sexy borders, because of its lack of support for PNGA images.
	 */
	.ie6 .cb {
		
	}
		
		.ie6 .bt,
		.ie6 .bb {
			display: none;
		}
		
		.ie6 .i1 {
			/* margin + padding + border MUST form together 5px on each site */
			margin: 2px;
			padding: 2px;
			border: 1px solid #e8e8e8;
			background: #ffffff;
		}
			
			.ie6 .i2,
			.ie6 .i3 {
				padding: 0;
				background: transparent;
			}

.right {
	text-align: right;
}

.form-table {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
}
	
	.form-table td,
	.form-table th {
		line-height: 2em;
		vertical-align: top;
		padding-bottom: .25em;
	}
	
	.form-table th {
		font-weight: normal;
		padding-right: .5em;
		text-align: right;
	}
	
	.form-table .whole-row td {
		line-height: 1em;
	}
	
	.form-table em {
		color: red;
		font-weight: bold;
		padding-right: .5em;
	}
	
	.form-table .sexy {
		font-weight: normal !important;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
		
		.form-table a.sexy {
			font-weight: bold !important;
		}
	
	.form-table .hint {
		font-size: .8em;
		line-height: 1em;
	}
	
	.form-table .size-1 { width: 250px; }
	.form-table  .size-2 { width: 125px; }
	.form-table .ie6 .submit-button-row div,
	.form-table .ie7 .submit-button-row div {
		padding-left: 8px;
	}

/*
 * ========================================================
 * == Layout sections
 */

#container {
	width: 920px;
	position: relative;
	margin: 0 auto;
	
	/*outline: 1px dotted red;*/
	padding-top: 210px; /* this is instead of setting margin-top to #article */
}

#header {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
}

	#header h1 a {
		display: block;
		margin-top: 30px;
		background: top url("../img/teguza-logo.png") no-repeat;
		width: 245px; padding-top: 70px; /* stands for height */
		height: 0px; overflow: hidden;
	}
	
	#header q {
		position: absolute;
		display: block;
		top: 20px;
		right: 0px;
		background: top url("../img/teguza-slogan.png") no-repeat;
		width: 673px; padding-top: 94px; /* stands for height */
		height: 0px; overflow: hidden;
	}

	#nav.primary {
		position: absolute;
		display: block;
		top: 130px; left: 0px;
		padding: 2px 2px 12px 120px;
		width: 798px; /* 920 - padding */
		height: 48px;
		background: top left url("../img/nav-bg.png") no-repeat;
	}
		
		#nav.primary .founded-info {
			position: absolute;
			top: -1px; left: -1px;
			background: top url("../img/nav-founded-info-cs.png") no-repeat;
			width: 118px; padding-top: 54px; /* stands for height */
			height: 0px; overflow: hidden;
		}
		
		#nav.primary ul {
			display: block;
			font-family: "Trebuchet MS", Calibri, Tahoma, sans-serif;
			font-size: 16px;
		}
			
			#nav.primary ul li {
				float: left;
			}
				
				#nav.primary ul li a {
					display: inline-block;
					margin-top: .45em;
					margin-right: .5em;
					padding: .5em;
					text-decoration: none;
					color: #ffffff;
				}
					
					#nav.primary ul li a:hover,
					#nav.primary ul li a:focus {
						text-decoration: underline;
					}
					
					#nav.primary ul li a.current {
						color: #c41b1c;
						background-color: #ffffff;
						overflow: visible; /* IE7 needs this for the layout, otherwise won't display background color */
					}
			
			#nav.primary ul li.e-shop {
				float: right;
			}
				
				#nav.primary ul li.e-shop a {
					margin-left: .5em;
					font-weight: bold;
					background-image: url("../img/nav-cart.png");
					background-position: 5px;
					background-repeat: no-repeat;
					padding-left: 38px;
				}
					
					#nav.primary ul li.e-shop a.current {
						background-image: url("../img/nav-cart-hover.png");
					}

#container-article {
	overflow-y: hidden; /* clearing floats */
}
	
	.ie6 #container-article {
		zoom: 1; /* layout, as usually :) */
	}

#article {
	/*outline: 1px dotted blue;*/
	min-height: 350px;
	padding-bottom: 1em;
}
	
	.ie6 #article {
		height: 350px; /* stands for min-height */
	}

#footer {
	position: relative;
	margin-top: 40px;
	padding-bottom: 60px;
	font-weight: bold;
}
	
	#footer a {
		color: #cb2b12;
	}
		
		#footer a:hover,
		#footer a:focus {
			text-decoration: none;
		}
	
	#footer .copyright a {
		color: #5b5b5b;
	}
	
	#footer a.e-shop {
		position: absolute;
		top: -15px; right: 0;
		width: 76px; /* image width is 129px*/ height: 52px;
		padding-left: 53px;
		line-height: 44px;
		font-family: "Trebuchet MS", Calibri, Tahoma, sans-serif;
		font-size: 16px;
		font-weight: bold;
		text-decoration: none;
		color: #0c599e;
		background: url("../img/footer-eshop-btn.png") top right no-repeat;
	}
		
		#footer a.e-shop:hover,
		#footer a.e-shop:focus {
			text-decoration: underline;
		}

/*
 * ========================================================
 * == Design sections
 */

.design-main {
	background: #cbe6fe;
	color: #5b5b5b;
}
	
	.design-main #sliding-top {
		background: top url("../img/main-bg-top.png") repeat-x #ffffff;
	}
	
	.design-main #sliding-bottom {
		background: bottom repeat-x url("../img/main-bg-bottom.png");
	}
		
		.ie6 .design-main #sliding-bottom {
			zoom: 1; /* give him layout :-) */
		}

.module-eshop #aside {
	float: left;
	width: 220px;
}
	
	.module-eshop #nav.aside {
		display: block;
		border: 1px solid #013461;
	}
		
		.module-eshop #nav.aside li {
			background: #0c599f top url('../img/nav-aside-item-bg.png') repeat-x;
			padding-top: 2px;
		}
			
			.module-eshop #nav.aside li:first-child {
				background-image: none;
				padding-top: 0;
			}
		
		.module-eshop #nav.aside a {
			display: block;
			text-decoration: none;
			font-weight: bold;
			font-size: 1.2em;
			color: #ffffff;
			padding: .75em 1em;
		}
			
			.module-eshop #nav.aside a.current {
				background: #c11b1d right url('../img/nav-aside-item-arrow.png') no-repeat;
			}
			
			.module-eshop #nav.aside a:hover,
			.module-eshop #nav.aside a:focus {
				background-color: #4a84b6;
			}
			
			.ie6 .module-eshop #nav.aside a,
			.ie7 .module-eshop #nav.aside a {
				zoom: 1; /* Let’s have some layout */
			}

.module-eshop #article {
	margin-left: 260px;
	overflow-x: hidden; /* kvůli stránce s kategoriemi */
}
	
	.ie6 .module-eshop #article {
		width: 657px; /* kvůli stránce s kategoriemi */
	}

/*
 * ========================================================
 * == Page specific
 */

.page-index {
	
}
	
	.page-index .img-350x280 {
		float: left;
		margin-right: 1em;
		margin-bottom: 1em;
		width: 360px; /* 360 + 2×5 */
	}
	
		.page-sortiment .img-350x280 img {
			width: 350px;
			height: 280px;
		}
	
	.page-index #article ul.main-bullets {
		margin-left: 360px;
		padding-top: 1px;
		color: #0c599e;
		font-size: 1.142857em; /* 16px = 14 × … */
		font-weight: bold;
	}
		
		.page-index #article ul.main-bullets li {
			margin-bottom: 1.6em;
		}
	
	.page-index #article p {
		clear: left;
	}
	
	/*
	 * Sliding sortimentu na hlavní stránce
	 */
	.page-index .product-image-list .item {
		visibility: hidden;
		position: absolute;
	}
		
		.page-index .product-image-list .item-current {
			visibility: visible;
			position: static;
		}
	
	.page-index .product-list {
		overflow: hidden;
	}
	
	.page-index #article .product-list .item {
		float: left;
		border: 2px solid #d4e8f9;
		margin: 0;
		background: none;
		margin-left: 1em;
		text-decoration: none !important;
		font-size: 12px;
		line-height: 16px;
		font-weight: bold;
		width: 100px;
		padding: 0;
		background: #ffffff bottom repeat-x url('../img/main-bg-product-list-item.png');
	}
		
		.page-index #article .product-list .item-first {
			margin-left: 0;
		}
		
		.page-index .product-list .item a {
			position: relative;
			display: block;
			margin-top: 80px; /* image size */
			padding: 3px 3px 3px 3px;
			min-height: 40px;
		}
			
			.ie6 .page-index .product-list .item a {
				height: 40px; /* stands for min height */
			}
		
		.page-index .product-list .item img {
			position: absolute;
			top: -80px;
			left: 0;
			width: 100px;
			height: 80px;
		}
		
		.page-index #article .product-list .item a {
			color: #0c599e !important;
			text-decoration: none !important;
		}
		
		.page-index #article .product-list .item-current {
			border-color: #6d9bc5;
		}
		
		.page-index #article .product-list .item:hover {
			border-color: #0c599e;
			background: #0c599e;
		}
			
			.page-index #article .product-list .item:hover a {
				color: #ffffff !important;
				text-decoration: underline !important;
			}

.page-sortiment {
	
}
	
	.page-sortiment #article ul {
		
	}
		
		.page-sortiment #article ul li {
			position: relative;
			display: block;
			clear: left;
			background: transparent;
			padding-left: 0;
			margin: 1em 0;
			overflow: hidden; /* clearing floats */
			height: 215px;
		}
			
			.page-sortiment #article ul .side {
				position: absolute;
				bottom: 0;
				right: 0;
				text-align: right;
				font-size: .8em;
			}
	
	.page-sortiment .img-250x200 {
		float: left;
		margin-right: 1em;
		width: 260px; /* 250+2×5 */
	}
		
		.page-sortiment .img-250x200 img {
			width: 250px;
			height: 200px;
		}
	
	.page-sortiment h3 {
		margin-top: 1em;
		border-bottom: 0px none;
	}
	.page-sortiment #article p {
		
	}

.module-eshop {
	
}
	
	.module-eshop #header q {
		right: 190px;
		width: 480px;
		background-image: url('../img/teguza-slogan-eshop.png');
	}
	
	.module-eshop #header .cart {
		position: absolute;
		top: 0; right: 0;
		width: 187px;
		height: 96px;
		
		text-align: right;
		
		background: url('../img/header-cart-bg.png') top left no-repeat;
	}
		
		.module-eshop #header .cart a {
			display: block;
			
			margin: 0 2px;
			height: 83px;
			
			color: #0c599e !important;
			text-decoration: none;
		}
		
		.module-eshop #header .cart span {
			display: block;
			padding-top: .5em;
			padding-right: 1em;
		}
		
		.module-eshop #header .cart span.title {
			padding-top: .75em;
			font-size: 1.25em;
			color: #c11b1d;
			text-decoration: underline;
		}
			
			.module-eshop #header .cart span.title:hover,
			.module-eshop #header .cart span.title:focus {
				text-decoration: none;
			}
			
			.module-eshop #header .cart em {
				font-weight: bold;
				font-style: normal;
			}
	
	.module-eshop #article h2 {
		text-transform: uppercase;
		margin-top: .38em;
		margin-bottom: .75em;
	}
	
	.module-eshop a.sexy {
		display: inline-block;
		
		padding-left: 9px;
		line-height: 30px;
		
		text-decoration: none;
		font-weight: bold;
		
		color: #ffffff !important;
		background: #c41c1b url('../img/button-sexy.png') no-repeat left top;
	}
		
		.module-eshop a.sexy span {
			display: inline-block;
			padding-right: 9px;
			background: transparent url('../img/button-sexy.png') no-repeat right top;
			
			cursor: pointer; /* for IE6 */
		}
		
		.module-eshop a.sexy:hover,
		.module-eshop a.sexy:focus {
			background-position: left bottom;
		}
			
			.module-eshop a.sexy:hover span,
			.module-eshop a.sexy:focus span {
				background-position: right bottom;
			}
		
		.module-eshop a.sexy-buy {
			padding-left: 32px;
			background-image: url('../img/button-buy.png');
		}
			
			.module-eshop a.sexy-buy span {
				background-image: url('../img/button-buy.png');
			}
		
	.module-eshop input.sexy {
		border: 1px solid #0c599f;
		vertical-align: middle;
		margin: 0;
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
		font-size: 100%;
		font-weight: bold;
		color: #ffffff;
		background-color: #0c599f;
		padding: .2em;
		display: inline-block;
		text-rendering: auto; /* // FIX: mk 2010-03-14 02:33:07: Gecko */
	}
		
		.module-eshop input.sexy:focus {
			background-color: #ffffff;
			color: #0c599f;
		}
		
		.module-eshop #article input.sexy {
			border-color: #ffc621;
			background-color: #ffffff;
			color: #0c599f;
		}
			
			.module-eshop #article input.sexy:focus {
				border-color: #0c599f;
				background-color: #ffffff;
				color: #0c599f;
			}
		
		.module-eshop #article textarea.sexy {
			border: 1px solid #0c599f;
			font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
			font-size: 100%;
			border-color: #ffc621;
			background-color: #ffffff;
			color: #0c599f;
			text-rendering: auto; /* // FIX: mk 2010-03-14 02:33:07: Gecko */
			line-height: 1.5em;
		}
			
			.module-eshop #article textarea.sexy:focus {
				border-color: #0c599f;
				background-color: #ffffff;
				color: #0c599f;
			}
		
		.module-eshop label.sexy {
			font-weight: bold;
			color: #0c599f;
		}


.page-category {
	
}
	
	.page-category .products {
		margin-top: 1em;
		overflow-y: hidden; /* clearing floats */
		width: 105%; /* schválně – aby se sem vešel pravý margin od výrobku */
	}
		
		.page-category .products li {
			width: 160px; /* this is around 25% */
			float: left;
			overflow: hidden;
			margin: 0 .5em 2em 0;
		}
			
			.ie6 .page-category .products li {
				margin-right: .45em;
			}
			
			.page-category .products h3 {
				min-height: 28px;
				margin-top: 0;
				margin-bottom: .25em;
				border-bottom: 0 none;
				font-size: 1em;
				text-transform: none;
			}
				
				.ie6 .page-category .products h3 {
					height: 28px;
				}
				
				.page-category #article .products h3 a {
					color: #0c599e !important;
					text-decoration: none;
				}
					
					.page-category #article .products h3 a:hover,
					.page-category #article .products h3 a:focus {
						text-decoration: underline;
					}
			
			.page-category .products .photo {
				width: 160px; /* width of inner image + 10px for border */
				margin-bottom: .5em;
			}
				
				.page-category .products .photo a {
					text-decoration: none;
				}
				
				.page-category .products .photo img,
				.page-category .products .photo span {
					display: block;
					width: 150px;
					height: 113px;
				}
				
				.page-category .products .photo span {
					background-color: #f2f2f2;
					cursor: pointer;
				}
					
					.ie6 .page-category .products .photo span {
						zoom: 1;
					}
			
			.page-category .products .price {
				margin-bottom: .5em;
				font-size: .85em;
			}
			
			.page-category .products a.details {
				float: left;
				display: inline-block;
				background: left url('../img/bullet-magnify.png') no-repeat;
				font-size: .85em;
				line-height: 22px; /* image height */
				padding-left: 18px; /* image width + padding */
				color: #5d5d5d !important;
				margin-left: 5px;
			}
			
			.page-category .products a.sexy {
				float: right;
				padding-left: 7px;
				line-height: 22px;
				font-size: .85em;
			}
				
				.page-category .products a.sexy span {
					padding-right: 7px;
				}

.page-product {
	
}
	
	.page-product h2 {
		
	}
		
		.page-product h2 a {
			text-decoration: none;
			color: #0c599e !important;
		}
	
	.page-product #article .categories {
		margin-bottom: 1em;
	}
		
		.page-product #article .categories li {
			margin: .5em 0;
			background: none;
		}
		
		.page-product .categories a {
			color: #5a5b5d !important;
		}
			
			.page-product .categories a.current {
				font-weight: bold;
				text-decoration: none;
			}
				
				.page-product .categories a.current:hover,
				.page-product .categories a.current:focus {
					text-decoration: underline;
				}
	
	.page-product a.link-big-picture {
		display: block;
		position: relative;
		text-decoration: none;
	}
		
		.page-product a.link-big-picture span {
			position: absolute;
			top: 0; left: 0;
			width: 35px;
			padding-top: 35px; height: 0;
			overflow: hidden; font-size: 0; line-height: 0;
			
			background: url('../img/button-magnifier.png') top left no-repeat;
			
			cursor: pointer;
		}
			
			.page-product a.link-big-picture:hover span,
			.page-product a.link-big-picture:focus span {
				background-position: bottom left;
			}
	
	.page-product #article .sideinfo {
		
	}
		
		.page-product #article .sideinfo li {
			background: transparent;
		}
		
		.page-product #article .sideinfo li:first-child {
			margin-top: 0;
			padding-top: 1em;
		}
		
		.page-product #article .sideinfo li.price-line {
			text-align: right;
			overflow: hidden;
			padding-left: 0;
			line-height: 1.25em;
		}
			
			.page-product #article .sideinfo em {
				float: left;
				font-style: normal;
			}
			
			.page-product #article .sideinfo small {
				font-size: .85em;
			}
		
		.page-product .form-buy {
			margin-top: 3em;
			line-height: 30px;
		}
			
			.page-product .form-buy input.sexy {
				text-align: right;
				width: 2em;
			}
			
			.page-product .form-buy a.buy {
				margin-left: 1em;
				font-size: 1em;
			}
	
	.page-product h4 {
		margin: 1.5em 0 1em 0;
	}
	
	.page-product .bottominfo {
		
	}
	
	.page-product p {
		padding-left: 1em;
	}

/**
 * flockování
 */
.vzory-barev {
	overflow-x: hidden;
}
	
	.vzory-barev a {
		display: block;
		float: left;
		width: 50px;
		margin-left: 1px;
		background-color: red;
		height: 30px; line-height: 30px;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		color: #ffffff !important;
	}
		
		.vzory-barev a.bg {
			width: 48px; height: 28px;
			border: 1px solid #A8A8A8;
			color: #000000 !important;
		}
	
	.vzory-barev a:first-child {
		margin-left: 0;
	}
	
	.vzory-barev a span {
		visibility: hidden;
		cursor: pointer;
	}
		
		.vzory-barev a:hover span {
			visibility: visible;
		}

.vzory-barev-big {
	margin: 1em 0;
	overflow-x: hidden; /* clearing floats */
}

.vzory-barev-big div {
	width: 19.9%;
	height: 230px;
	float: left;
}
	.vzory-barev-big h3 {
		border-bottom: 0px none;
	}
	
	.vzory-barev-big img {
		width: 160px;
		height: 70px;
	}
	
	.vzory-barev-big em,
	.vzory-barev-big strong {
		display: block;
		margin: .5em 0 0;
	}