html {
    font: 12px/1.2 Arial, sans-serif/*12px/1.2 sans-serif*/;
    background: #f8f8f8;

}

body {
    /*font: 12px/1.2 "Trebuchet MS", "Geneva CE", lucida, sans-serif;*/
    color: #333;
    font: inherit;
    margin: 0;
    color: #333;

}




table {
  /*  width: 100%;
*/
}

td{
    background-color:#EEE;
    padding: 5px;

}

h1 {
    color: #000000;/*#6bc3e0;*/
    font-weight: bold;
    font-size: 22px;
    margin: 25px 0 10px 0;
   /* clear: both;*/
    text-shadow: 1px 1px 0 white;
}

h2, h3 {
    font-size: 18px;
    color: #6bc3e0;
    margin: .6em 0;
    text-shadow: 1px 1px 0 white;
}

h3 {
    font-size: 16px;
    color: black;
}

ul {
    /*  list-style: none;*/

    margin-left: 10px;
    padding: 0;
}

ol {
    margin: 0;
    padding: 0;
}

ol li {
    margin: 1em 0;
}

ol li p {
    font-size: 90%;
}

code {
    color: #666;
}

hr {
    visibility: hidden;
    height: 2em;
}

img {
    border: none;
    padding: 5px;
}

input {
    font-size: 11px;
}

select {


    font-size: 11px;
}

a {

    color: #1860a8;
    padding: 3px 1px;
    font-weight: bold;
}

a:hover, a:active, a:focus {
    text-decoration: none;
}


.add-cart{
    color: #1860a8;
    padding: 3px 1px;
    font-weight: bold;
    text-decoration: underline;
}


.add-cart:hover, .add-cart:active, .add-cart:focus {
    text-decoration: none;
}


#environment {
    font-size: 70%;
    margin: 3em 0;
    padding: 1em 0;
    border-top: 1px solid #EEE;
    list-style: none;
    color: gray;
}

#ajax-spinner {
    margin: 15px 0 0 15px;
    padding: 13px;
    background: white url('../images/spinner.gif') no-repeat 50% 50%;
    font-size: 0;
    z-index: 123456;
    display: none;
}

div.flash {
    color: black;
    background: #FFF9D7;
    border: 1px solid #E2C822;
    padding: 1em;
    margin: 1em 0;
}

a[href^="error:"] {
    background: red;
    color: white;
}



#outer-wrapper{
    width: 100%;
    margin: auto;
    height: 100%;

    background-color: #f8f8f8;
    /*background-image: url( ../images/body-bg.jpg );*/
    background-position: center top;
    background-repeat: repeat-x;

}

#middle-wrapper{
    margin: 1px auto;
    padding: 0;

    background: transparent url( ../images/page-vbg.jpg ) repeat-y scroll 50% 0px;

}


#inner-wrapper{
    background: transparent;
    /*	background-image: url(../images/hat.jpg);*/
    background-repeat: no-repeat;
    background-position: center top;

}

#centering-wrapper{
    margin: auto;
    width: 1000px;
}




#header{
    height: 180px;
    background: transparent url( ../images/teplota_hlavicka_pracovni.jpg ) no-repeat center top;
    /*  padding-top: 217px;*/
    padding-left: 13px;
    /*  padding-top:14px;
      padding-top:10px;*/


}

#header{
    height: 180px;
    background: transparent url( ../images/teplota_hlavicka_pracovni.jpg ) no-repeat center top;
    /*  padding-top: 217px;*/
    padding-left: 13px;
    /*  padding-top:14px;
      padding-top:10px;*/


}

#header #top{
    height: 150px;
    width: 975px;
    /*  padding-top:14px;
      padding-top:10px;*/


}

#header #main-menu{
    /* padding-left: 30px;*/
    width: 975px;
    height: 30px;
    background-color: #54B7D9;
}


#header #top #right-header {
    float: right;
    width: 200px;
    height: 100px;
    padding-top: 40px;

}

#header #top #right-header td{
    background: none;
    padding: 0px;

}

#header #text .big{
    font-size: 24px;
    color:black;
    line-height: 50px;
}
#header #top #left-header{
    float: left;
    /*  margin-left: 600px;*/
    height: 140px;
    /*text-align: left;*/
    /* float:right;*/
    /*  margin-right: 50px;*/
    margin-left:0px;
    vertical-align: top;
    width: 600px;
    font-size: 12px;
    /*margin-bottom: 25px;*/
}

#header #top #left-header img{
    padding:0px;
    padding-left: 120px;

}



#menu-row
{margin:0px;
 height:0px;
 z-index:100;
 background: #eaeaea;
 background: #ffffff;
}

#content-wrapper {
    margin-top: 40px;
    padding-right: 20px;
    padding-left: 20px;
    width: 100%;
    width: 960px;
    min-height: 1000px;
    background: #ffffff;
}



/*
#center-col {    
    min-height: 700px;
    padding-right: 20px;
    float: left;
}*/

#eshop-wrapper {
    padding-right: 10px;
    padding-left: 10px;
    width: 980px;
    background: #ffffff;
}

#eshop-wrapper #center-col{
    width: 737px;/*580px;*/
    min-height: 700px;
    /*padding: 20px;*/
    padding: 20px;
    float: left;

    border-right: 1px solid lightgray;    
    border-left: 1px solid lightgray;
}

#eshop-wrapper #left-col{

    font: 11px/1.2 Arial, sans-serif/*12px/1.2 sans-serif*/;
    width: 200px;
    padding-top: 20px;
    min-height: 700px;

    /*padding: 20px;*/
    /* padding-right: 20px;*/
    float: left;
    margin-left: 0px;
}


#eshop-wrapper #left-col ul {
    list-style: none;
    padding: 0px;
    margin-top: 1px;
    margin: 0px;    
    background-color: white;
    border-top: 1px solid white;
}

#eshop-wrapper #left-col ul li ul {
    display: none;
    background-color: white;
    margin-bottom: 1px;
}


#eshop-wrapper #left-col .path > ul{
    display: block;
}


#eshop-wrapper #left-col li {   
    display: block;
    width: 200px;
    margin-top:1px;

}

#eshop-wrapper #left-col li li {  
}

#eshop-wrapper #left-col li a{      
    background-color: lightgray;
    text-decoration: none;
    font-weight:normal;
    padding-left: 5px;
}

#eshop-wrapper #left-col li .active, 
#eshop-wrapper #left-col li .path
{
    background-color:#eaeaea;
}

#eshop-wrapper #left-col li a:hover{  

    background-color:#ffffff;
}

#eshop-wrapper #left-col li li a{    
    padding-left: 10px;
}

#eshop-wrapper #left-col li li li a{   
    padding-left: 20px;
}


#eshop-wrapper #left-col li li li li a{   

    padding-left: 30px;
}

#eshop-wrapper #left-col ul li a{   
    display: block;


}

#center-col .control.breadcrumbs {
    width: 100%;
    font-size: 13px;
}

#center-col	#wrapper {
    margin-top: 20px;
}

#right-col{
    float: left;
    width: 167px;
    min-height: 700px;

    padding: 20px;
}

#footer-wrapper {
    clear: both;
    margin: 0 auto;
    height: 170px;
    padding: 0;
    background: transparent url( ../images/footerWrapper-bg.jpg ) no-repeat scroll center top;
}
#footer {
    margin: 0 auto;
    padding-top: 20px;
    width: 1000px;
    height: 90px;
    font-weight: bold;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
}

#footer a:link, #footer a:visited {
    color: #FFFFFF;
}
#footer a:hover {
    color: #000000;
    text-decoration: none;
}

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
/*#menu_container {margin:25px 0 50px 15px; position:relative; width:735px; height:25px; z-index:100;}*/

/* Get rid of the margin, padding and bullets in the unordered lists */
#menu, #menu ul {
    margin: 0px;
    margin-left:0px; 
    padding-left:0px; 
    list-style: none;
    background-color: #54B7D9;
    width: 1000px;
}

/* Set up the link size, color and borders */
#menu a, #menu a:visited {
    text-align: center;
    vertical-align:middle;
    display:block;
    min-width:104px;
    font-size:12px;
    color:#000000;
    height:auto;
    /* line-height:18px;*/
    text-decoration:none;
    padding:8px 9px 8px 9px;
    background: transparent;
}

#menu a.auto-size, #menu a.auto-size:visited {
    /*  width:auto;*/
}

#menu li{
    min-height: 30px;
}

/* Set up the sub level borders */
#menu li ul li a, #menu li ul li a:visited {border-width:0 1px 1px 1px;}
#menu li a.enclose, #menu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#menu > li {float:left; background: transparent /*url('images/css/hmenu.jpg')*/ repeat-x top left; /*height: 50px; */}
#menu li {background: #54b7d9 /*url('../images/hmenu.jpg')*/ repeat-x top left;}

/* For Non-IE browsers and IE7 */
#menu li:hover {position:relative;}
/* Make the hovered list color persist */
#menu li:hover > a {	color: #ffffff;
                     background: black /*url('../images/hmenu-sel.jpg')*/ repeat-x top left;
}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#menu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#menu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 0px 30px; background: transparent /*url('images/css/hmenu.jpg')*/ repeat-x top left; width:217px;}
#menu li:hover > ul.top {top:-10px;}
/* Position the first sub level beneath the top level liinks */
#menu > li:hover > ul {left:-30px; top:20px;}

/* get rid of the table */
#menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #menu li a:hover {position:relative;
                         background: transparent /*url('../images/hmenu-sel.jpg')*/ repeat-x top left; color:#c00;}

/* For accessibility of the top level menu when tabbing */
#menu li a:active, #menu li a:focus {
    background: transparent /*url('../images/hmenu-sel.jpg')*/ repeat-x top left; color:#c00;}

/* Set up the pointers for the sub level indication */
#menu li.fly {background:#22222 no-repeat right center;}
#menu li.drop {background:#7484ad  no-repeat right center;}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #menu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent;}
* html #menu li ul.top {top:-10px;}
/* keep the third level+ hidden when you hover on first level link */
#menu li a:hover ul ul{
    visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#menu li a:hover ul a:hover ul ul{
    visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#menu li a:hover ul a:hover ul a:hover ul ul{
    visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#menu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
    visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#menu li a:hover ul {
    visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

#menu li ul li a {
    /*  height: auto;*/
}

#menu > li > ul > li > ul {
    margin-left: 108px;
    margin-top:1px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#menu li a:hover ul a:hover ul{
    visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#menu li a:hover ul a:hover ul a:hover ul {
    visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#menu li a:hover ul a:hover ul a:hover ul a:hover ul {
    visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#menu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
    visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */




.price {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
}

.price-vat {
    font-size: 10px;
}

.product-right-col{
    float:right;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    min-height: 200px;
    width: 250px;
}

.product-right-col img{
    float: left;
}

.clear{
    clear: both;
}

/* puvodni na 4 dlazdice 
.filter-number{
    width:182px; float: left; padding: 0px; background-color: #eee; margin-bottom: 2px; margin-right: 2px; height: 78px;
}

.filter-base{
    width:182px; float: left; padding: 0px; background-color: #eee; margin-bottom: 2px; margin-right: 2px; height: 38px;
}*/

.filter-number{
    font-size: 11px;
    width:364px; float: left; padding: 0px; background-color: #eee; margin-bottom: 5px; margin-right: 2px; height: 65px;
}


.filter-number td{
     padding: 2px;
}

.filter-base{
    font-size: 11px;
    width:364px; float: left; padding: 0px; background-color: #eee; margin-bottom: 5px; margin-right: 2px; height: 25px;
    
}

.filter-base td{
     padding: 2px;
}

.filter-form {
	display: inline;

}

#category-product-list {

    text-align: center;
    clear: both;
}

#category-product-list .product-box {
    float:left; 
    width:167px; 
    border: 1px solid grey; 
    height: 167px; 
    padding : 5px; 
    margin: 2px; 

}
#category-product-list .product-box .image-spacer{
    height: 135px;
}

#category-product-list .product-box .image-spacer a{
    display: block;
}

.add_info{
    clear: both;
    float:none;
    font-style: italic;
    padding-top:15px;
}

.detail-product-list {

    text-align: center;
    clear: both;
}

.detail-product-list .product-box {
    float:left; 
    width:167px; 
    border: 1px solid grey; 
    height: 167px; 
    padding : 5px; 
    margin: 2px; 

}
.detail-product-list .product-box .image-spacer{
    height: 135px;
}

.detail-product-list .product-box .image-spacer a{
    display: block;
}

.subcategories {
    clear: both;
    margin-bottom: 10px;
}

.subcategories li {
    float: left;
    width: 240px;
    margin-bottom: 5px;
}

.paginator {
    text-align: center;
}


.order-confirm  {
    clear: both;
}

.cart {

    clear: both;
    width: 100%;

}

.taright{
    text-align:right;
}

.taleft{
    text-align:left;
}

.bold {
    font-weight: bold;
}

.order-confirm div {
    float: left;
    width: 350px;

    height: 200px;
}


.order-confirm div table td{
    width: 200px;

}

.order-confirm div table th{
    width: 100px;

}