/**
 * TYPOGRAFIE
 */
a {
	text-decoration: none;
	color: #c90;
}
a:hover,
a:active {
	color: #333;
	text-decoration: underline;
}
a img {
	border: 0;
}
#content h1 {
	font-size: 30px;
	line-height: 30px;
	padding: 0;
	margin: 15px 0 0 0;
	color: #333;
	font-weight: bold;
}
#content h2 {
	font-size: 20px;
	line-height: 20px;
	padding: 0;
	margin: 20px 0 14px 0;
	color: #c90;
	font-weight: normal;
}
/* velikost a rakovani h3 a mensich by melo byt stejne jako u textu */
#content h3, #content h4, #content h5, #content h6 {
	font-size: 14px;
	line-height: 20px;
	color: #09c;
	font-weight: bold;
	margin: 10px 0 0 0;
	padding: 0;
}
/* zde je nastaveno radkovani textu - ovlivnuje i radkovani parametru */
#content p, #content li, #content td {
	color: #333;
	font-size: 14px;
	line-height: 20px;
	padding: 0;
	margin: 0;
	text-align: justify;
}
#content ul, #content ol, #content li {
	padding: 0;
	margin: 0;
}
/* odsazeni odrazek od leveho okraje */
#content li {
	list-style-position: outside;
	margin-left: 20px;
}

#content .article li {
	text-align: left;
}
#content h1.hide {
    display: none;
}
#content div.welcome {
    text-align: center;
    font-weight: bold;
}
/**
 * LAYOUT
 */
body, html {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #eee;
	font-size: 14px;
}
#main {
	width: 908px;
	background: #fff url('../img/main-bg.png') repeat-y;
	margin: 46px auto;
}
.cleaner {
	clear: both;
}
.table-2col,
.table-3col {
	width: 880px;
	clear: both;
}
.table-2col .column,
.table-3col .column {
	float: left;
	margin-right: 20px;
}
/* sirka 2 a 3 sloupcu */
.table-2col .column {
	width: 420px;
}
.table-3col .column {
	width: 273px;
}


/**
 * HLAVICKA
 */
#header {
	background: url('../img/header-bg.png') no-repeat;
	height: 181px;
	padding: 4px 4px 0 4px;
	position: relative;
}
#header .logo {
	position: absolute;
	left: 50px;
	top: -46px;
	width: 200px;
	height: 200px;
	background: url('../img/logo.png') no-repeat;
	padding: 0 4px 4px 4px;
}
#header .logo span {
	display: none;
}
#header .logo a {
	display: block;
	width: 200px;
	height: 200px;
}
/* menu */
#header ul.menu {
	margin: 20px 15px 0 0;
	padding: 0;
	float: right;
}
#header ul.menu li {
	list-style-type: none;
	padding: 0 10px;
	margin: 0;
	height: 18px;
	float: left;
	border-left: 2px solid #eee;
}
#header ul.menu li.first {
	border-left: none;
}
#header ul.menu li a {
	line-height: 20px;
	font-size: 20px;
	color: #999;
	position: relative;
	top: -2px;
}
#header ul.menu li a:hover {
	color: #333;
}
/* slogan */
#header .slogan {
	margin: 60px 25px 0 0;
	float: right;
	clear: right;
}
#header .slogan p {
	padding: 0;
	margin: 0;
	font-size: 20px;
	line-height: 20px;
	color: #c90;
}


/**
 * OBSAH
 */
#content {
	margin: 0 4px;
	padding: 0 20px;
}

.smile {
    background:  url('../img/smile.png') no-repeat right top;
}
.why {
    background:  url('../img/why.png') no-repeat right top;
}
.ship {
    background:  url('../img/ship.png') no-repeat right top;
}

/**
 * DETAIL PRODUKTU
 */
#content .product-detail {
	margin-top: 9px;
	width: 870px;
	position: relative;
	left: -10px;
	padding: 0 0 10px 10px;
}

/* proklik na detail */
/* - hover po najeti na detail produktu */
#content .product-detail.clickable,
#content .product-detail.clickable * {
	cursor: pointer;
}
#content .product-detail.clickable:hover {
	background-color: #eee;
}
#content .product-detail.clickable:hover h1 {
	text-decoration: underline;
}

/* jmeno produktu */
#content .product-detail div.name-price {
	width: 340px;
	float: left;
}
#content .product-detail div.name h1 {
	margin-top: 6px;
}
#content .product-detail div.name h1 a {
	color: #333;
}
#content .product-detail div.name h2 {
	margin-top: 2px;
	color: #999;
}

/* obrazek */
/*  - nejlepe moc neupravovat, napr. sirka se musi menit a prepocitavat na spouste mist */
#content .product-detail div.image {
	text-align: center;
	line-height: 1px;
}
#content .product-detail div.image,
#content .product-detail div.image a,
#content .product-detail div.image .no-shadow-top,
#content .product-detail div.image .no-shadow-bottom,
#content .product-detail div.image .no-shadow,
#content .product-detail div.image .shadow-top,
#content .product-detail div.image .shadow-bottom,
#content .product-detail div.image .shadow {
	float: right;
	display: block;
}
#content .product-detail div.image a {
	width: 520px;
}
#content .product-detail div.image a:hover {
	background-color: #eee;
}
#content .product-detail div.image .no-shadow-top,
#content .product-detail div.image .shadow-top {
	width: 508px;
	padding: 6px;
}
#content .product-detail div.image .no-shadow-bottom,
#content .product-detail div.image .shadow-bottom {
	width: 508px;
	padding: 9px 0px;
}
#content .product-detail div.image .no-shadow,
#content .product-detail div.image .shadow {
	width: 500px;
	padding: 0 4px;
}
#content .product-detail div.image .shadow-top {
	background: url('../img/image-top-bg.png') no-repeat 6px 6px;
}
#content .product-detail div.image .shadow-bottom {
	background: url('../img/image-bottom-bg.png') no-repeat left bottom;
}
#content .product-detail div.image .shadow {
	background: url('../img/image-bg.png') repeat-y;
}
#content .product-detail div.image a .shadow {
	cursor: pointer;
}

/* popis + parametry */
#content .product-detail .table-2col h2 {
	margin-top: 12px;
}

/* parametry */
/* sirka policek s parametry - | 205px | 10px | 205px | */
#content .product-detail div.params li,
#content .product-detail div.price li {
	list-style-type: none;
	clear: left;
	margin: 0;
}
#content .product-detail div.params .label,
#content .product-detail div.price .label {
	width: 205px;
	float: left;
	text-align: right;
	display: block;
	color: #999;
}
#content .product-detail div.params .value,
#content .product-detail div.price .value {
	margin-left: 215px;
	display: block;
}

/* cena */
/* sirka policek s cenou - | 165px | 10px | 165px | */
#content .product-detail div.price .value {
	margin-left: 175px;
}
#content .product-detail div.price .label {
	width: 165px;
}
/* popisek ceny vypada jako h2 */
#content .product-detail div.price li.price .label {
	font-size: 20px;
	line-height: 20px;
	padding: 0;
	margin: 14px 0 0 0;
	color: #c90;
	width: auto;
	font-weight: normal;
}
/* samotna cena - cervena */
#content .product-detail div.price li.price .value {
	color: #c00;
	font-size: 30px;
	line-height: 30px;
	font-weight: bold;
	clear: left;
	margin: 0;
	padding: 13px 0 16px 0;
	text-align: center; 
}
/* sleva */
#content .product-detail div.price li.discount .value, #content .form-box span.price {
	color: #c00;
}
#content .product-detail div.price li.availability {
	padding-top: 15px;
}
/* ruzne stavy dostupnosti */
#content .product-detail div.price li.availability .value {
	color: #c90;
}
#content .product-detail div.price li.availability.available .value {
	color: #090;
}
#content .product-detail div.price li.availability.not-available .value {
	color: #c00;
}




/**
 * VYPIS PRODUKTU
 */
#content .products-list {
	clear: both;
	position: relative;
	left: -10px;
	width: 879px;
	padding: 7px 0 0 0;
}
/* pri zmene sirky/vysky nezapomenout prepocitat rozmery i zde */
#content .products-list .product,
#content .products-list .product a {
	float: left;
	width: 293px;
	height: 328px;
	overflow: hidden;
}
#content .products-list .product a:hover {
	background-color: #eee;
}
/* sirka a vyska obrazku - nezapomenout zmenit i line-height pro spravne centrovani! */
#content .products-list .product .image {
	display: block;
	width: 273px;
	height: 273px;
	line-height: 273px;
	font-size: 1px;
	background: url('../img/thumb-shadow.png') no-repeat;
	padding: 4px;
	margin: 8px 6px 0 6px;
	text-align: center;
	cursor: pointer;
}
#content .products-list .product .image img {
	vertical-align: middle;
}
#content .products-list .product .label {
	display: block;
	margin: 7px 10px 0 10px;
	color: #333;
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
}


/**
 * RAZENI A STRANKOVANI
 */
/* odsazeni paginace - zezhora pomoci margin-top, zezdola pomoci height */
#content .pagination .table-2col {
	margin-top: 19px;
	height: 15px;
}
#content .pagination span {
	float: left;
	border-left: 1px solid #999;
	padding: 0 3px;
	height: 10px;
}
#content .pagination span.label,
#content .pagination span.first {
	border-left: none;
}
#content .pagination span.label {
	color: #999;
	margin-right: 5px;
	position: relative;
	top: -4px;
}
#content .pagination a {
	position: relative;
	top: -4px;
}
#content .pagination a.active {
	color: #333;
}
#content .pagination .pages {
	float: right;
}


/**
 * FORMULARE OBECNE
 */
#content .form-box {
	margin: 20px 0 0 0;
	width: 860px;
	position: relative;
	left: -10px;
	padding: 10px 10px 5px 10px;
}
#content .form-box form {
	margin: 0;
	padding: 0;
}
#content .form-box h2 {
	margin: 0 0 10px 0;
	padding: 0;
}
#content .form-box .field {
	margin-bottom: 5px;
	clear: left;
}
#content .form-box .field label {
	/* sirka popisku policek */
	width: 75px;
	float: left;
	text-align: right;
	color: #999;
	font-size: 14px;
	line-height: 20px;
}
#content .form-box .field label.require {
	color: #333;
}
#content .form-box .field .value {
	/* odsazeni policek od leve strany = sirka popisku policek + 12px */
	margin-left: 87px;
	display: block;	
}
#content .form-box .field .value input,
#content .form-box .field .value textarea {
	width: 334px;
	max-width: 334px;
	border: 1px solid;
	background-color: #fff;
	line-height: 16px;
	padding: 1px 2px;
	font-size: 14px;
	color: #333;
}
#content .form-box .field .value input {
	height: 16px;
}
#content .form-box .field .value textarea {
	height: 89px;
}
#content .form-box .field.checkbox {
	height: 20px;
}
#content .form-box .field.checkbox input {
	float: left;
	margin: 0;
	width: auto;
	margin-right: 5px;
}
#content .form-box .field.checkbox label {
	width: 400px;
	text-align: left;
	line-height: 16px;
	font-size: 14px;
}
#content .form-box .errorlist li {
	display: block;	
	list-style-type: none;
	padding: 0;
	margin: 0;
	color: #c00;
}
#content .form-box .fields-left .errorlist li {
	margin-left: 87px;
}
#content .form-box .fields-left {
	float: left;
	width: 420px;
}
#content .form-box .fields-right {
	float: right;
	width: 420px;
}
#content .form-box .field.submit input {
	width: 428px;
	border: 0;
	padding: 4px;
	margin: 0;
	cursor: pointer;
	text-indent: -9999em;

	position: absolute;
	right: 6px;
	bottom: 8px;
}

/**
 * OBJEDNAVKOVY FORMULAR
 */
#content .form-box.order {
	background-color: #ffd;
}
#content .form-box.order .field .value input,
#content .form-box.order .field .value textarea {
	border-color: #c90;
}
#content .form-box.order .field.submit input:hover {
	background: url('../img/order-submit.png') no-repeat 0px 0px;
	height: 176px;
}
#content .form-box.order .field.submit input, #content .form-box.order .field.submit input:active {
	background: url('../img/order-submit.png') no-repeat 0px -176px;
	height: 176px;
}

/**
 * FORMULAR S DOTAZEM
 */
#content .form-box.question {
	background-color: #def;
}
#content .form-box.question h2 {
	color: #09c;
}
#content .form-box.question .field .value input,
#content .form-box.question .field .value textarea {
	border-color: #09c;
}
#content .form-box.question .field.submit input:hover {
	background: url('../img/question-submit.png') no-repeat 0px 0px;
	height: 126px;
}
#content .form-box.question .field.submit input, #content .form-box.question .field.submit input:active {
	background: url('../img/question-submit.png') no-repeat 0px -126px;
	height: 126px;
}

#content .form-box .field .value input:focus,
#content .form-box .field .value textarea:focus {
	border-color: #333;
}

/**
 * PATICKA
 */
#footer {
	padding: 11px 19px 12px;
	background: url('../img/footer-bg.png') no-repeat left bottom;
	height: 12px;
	/* odsazeni paticky odshora */
	margin: 20px 0 0 0;
}
#footer ul.menu {
	padding: 0;
	margin: 0;
	float: left;
}
#footer ul.menu li {
	float: left;
	list-style-type: none;
	padding: 0 5px;
	margin: 0;
	height: 10px;
	border-left: 1px solid #ddd;
}
#footer ul.menu li.first {
	border-left: none;
}
#footer ul.menu li a,
#footer ul.menu li span {
	line-height: 12px;
	font-size: 12px;
	position: relative;
	top: -4px;
}
#footer ul.menu li a {
	color: #c90;
}
#footer ul.menu li a:hover {
	color: #333;
}
/* odkazy vpravo */
#footer ul.right {
	float: right;
}
#footer ul.right li,
#footer ul.right li a,
#footer ul.right li span {
	color: #999;
}