@import url(reset.css);

header {
    background: #f4f4f4;/*#f4f4f4*/
    border-top: 8px solid #3f3f3f;
}
    .header-top-in {
        position: relative; max-width: 1280px; min-width: 1020px; margin: 0 auto; z-index: 5; /*outline: 1px solid #ccc;*/    
        }
    .header-top {
        background: #3f3f3f url(../images/imgrubberdivthreecol/bgHeadTop.png) left top no-repeat; padding: 5px 0 0; height: 28px; position: relative; left: 22%; 
        /*position: relative; left: 22%;Это сделано, чтобы отодвинуть картинку вправо*/
        width: 78%;
    }
        .header-top ul {    
            font: 13px "Trebuchet MS"; color: #fff; margin: 0 0 0 50px; float: left;
        }
            .header-top ul li {
                float: left; margin: 0 20px 0 0;
            }
                .header-top ul li a {
                    color: #fff;    
                }.header-top ul li a:hover {
                    text-decoration: none;    
                }
        
        .basket {
            background: url(../images/imgrubberdivthreecol/basketBlue.png) left top no-repeat; width: 213px; top: -8px; padding: 8px 0 9px 0;
            position: absolute; right: 0; margin: 0 13% 0;
        }
            .basket-btn {
                margin: 0 0 0 75px;
            }
            .basket p {
                font: 11px Tahoma, sans-serif; margin: 10px 0 9px 75px;
            }
                .basket p a {
                    color: #fff;
                }
                .basket p a:hover {
                    text-decoration: none;
                }
                .basket p img {position: relative; top: 2px; left: 11px; cursor: pointer;}
                
        .inbask {background: #eef0f2 url(../images/imgrubberdivthreecol/gradUndBasket.png)left top repeat-x; width: 213px; font: 11px Tahoma;/*eef0f2*/
                 display: none;}
        .inbask h3 {color: #7e7e7e; font-weight: bold; text-align: center; padding-top: 10px;}
        .inbask p { border-bottom: 1px solid #d4d4d4; margin: 0; padding: 10px 10px 8px 10px;}
        
        .inbask p a {color: #3272b0;}
        .inbask p a:hover {text-decoration: none;}
        .inbask p.itog {padding: 15px 0; color: #7e7e7e; border: none; text-align: center;}
        .inbask p.itog strong {color: #010101;}
        .inbask p.itog span {color: #bc0805;}       
                
        .social-top {
            float: right; cursor: default; margin: 4px 1% 0 0;
        }
        
        .social-top a {
            display: inline-block; width: 24px; height: 23px;
        }
            .social-top a .ico2Img {
                width: 24px; height: 23px; background: url(../images/imgrubberdivthreecol/socialWeb.png) no-repeat;
            }
            .social-top a .ico3Img {
                width: 24px; height: 23px; background: url(../images/imgrubberdivthreecol/socialWeb.png) -26px 0 no-repeat;
            }
.header-senter {
    max-width: 1280px; min-width: 1020px; margin: 0 auto;
    overflow: hidden; padding: 5px 0 10px 0;
}
    .head-logo {
        float: left; width: 20%; text-align: center; padding: 3px 0 0;
    }
    .head-contacts {
        float: left; width: 42%; overflow: hidden; color: #3f3f3f; margin-left: 2%;    
    }
        .head-contacts ul {
            float: left; border-left: 1px solid #d4d4d4; font: 11px Tahoma, sans-serif; line-height: 1.5; width: 27%; padding-left: 6%;    
        }
        .head-contacts ul:first-child {width: 33%; padding-left: 0; border-left: none; font: 12px "Trebuchet MS";}
        .head-contacts ul a {color: #3f3f3f; text-decoration: none;}
        .head-contacts ul a:hover {text-decoration: underline;}
        .head-contacts ul img {
            margin: 0 5px 0 0;
        }
        .head-contacts .tel-head li:nth-child(1){background: url(../images/imgrubberdivthreecol/tel_Ico.png)left top no-repeat; padding: 2px 0 0 19px;}
        .head-contacts .tel-head li:nth-child(2){background: url(../images/imgrubberdivthreecol/tel_Ico.png)left -15px no-repeat; padding: 2px 0 0 19px;}
        .head-contacts .tel-head li:nth-child(3){background: url(../images/imgrubberdivthreecol/tel_Ico.png)left -30px no-repeat; padding: 2px 0 0 19px;}
        .head-contacts .tel-head li:nth-child(4){background: url(../images/imgrubberdivthreecol/tel_Ico.png)left -45px no-repeat; padding: 2px 0 0 19px;}
    .head-order {
        float: left; width: 18%; font: 11px Tahoma; color: #303030;     
    }
    .head-order p {width: 140px; margin: 35px auto 0 auto;}/*Это новое, для блока ширина которого задана в процентах, тексту дается конкрет ширина и margin 0 auto; он выравн посредине.*/
    .head-delivery {
        float: left; width: 18%; font: 12px "Trebuchet MS";    
    }
        .head-delivery p {
            width: 160px; margin: 27px auto 0 auto; overflow: hidden; line-height: 1.5;    
        }
            .head-delivery p img {float: left; margin: 8px 10px 0 0;}
            .head-delivery p a {color: #0066cc;}
            .head-delivery p a:hover {text-decoration: none;}
.header-bottom {
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
        
}
    .header-bottom-in {
        max-width: 1280px; min-width: 1020px; margin: 0 auto;
        overflow: hidden;
    }
        .header-bottom-in nav ul {
            float: left; overflow: hidden; margin: 14px 0 0 2%;         
        }
            .header-bottom-in nav ul li {
                float: left; background: url(../images/imgrubberdivthreecol/point.png)left center no-repeat; margin: 0 15px 0 0; padding: 0 0 4px 20px; font: 14px "Trebuchet MS";        
            }
                .header-bottom-in nav ul li a {color: #0066cc;}
                .header-bottom-in nav ul li a:hover {text-decoration: none;}
            .header-bottom-in nav ul li:first-child {background: none;}
        .header-bottom-in .search {
            float: left; background: url(../images/imgrubberdivthreecol/fieldSearch.png)left center no-repeat; width: 354px; height: 22px; overflow: hidden; padding: 7px 0 0 10px; margin: 5px 0 5px 7%;
        }
        
            .header-bottom-in .search p {
                float: left; font: italic 14px "Trebuchet MS"; color: #9c9c9c;         
            }
            .header-bottom-in .search .search-txt {
                float: left; font: 14px "Trebuchet MS"; color: #666; width: 205px; margin: 0 0 0 7px; border: none;
            }
            .header-bottom-in .search .search-btn {
                float: left;
            }

/*Начало основного контента*/
/*Кнопка возврата на главную*/
.returnBut {
    position: fixed;
    width: 25px;
    height: 200px;
    left: 0;
    top: 250px;
    z-index: 10;
}
.wrapper-mainContent {
    max-width: 1280px; min-width: 1020px; margin: 36px auto 30px auto; /*outline: 1px solid #ccc;*/ /*height: 2100px;*/    
}

.left-bar {
    float: left; width: 21%; /*height: 2100px;*/ /*outline: 1px solid #999;*/
}
.nav-bar {padding: 0 0 0 17%; width: 83%;}
    .nav-bar h2 {
        font: 20px "Trebuchet MS"; color: #000; background: url(../images/imgrubberdivthreecol/h2_bg.png)left bottom no-repeat; padding: 0 0 4px 0;    
    }
    .nav-bar ul {
        font: 14px "Trebuchet MS"; margin: 0 0 30px 0;
    }
    .nav-bar ul.last_ul {margin: 0;} 
        .nav-bar ul li {
            margin: 2px 0 4px 0;
        }
        .nav-bar ul a {
            color: #0066cc;
        }
        .nav-bar ul a:hover {
            text-decoration: none;
        }
        .nav-bar ul a.special {
            color: #C11103; font-weight: bold;
        }

/*Далее выпадающее меню*/        
.mega-menu{
 

 
position: relative; /* Required */
}
.mega-menu li a {
display: block; 
 
/*padding: 12px 38px 12px 25px;*/ 
 
  

}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #f4f4f4; 

}
.mega-menu li a.dc-mega {
position: relative;
}
/* Add arrow icon to parent links */
.mega-menu li a .dc-mega-icon {
display: block; 
position: absolute; 
top: 18px; 
right: 15px; 
width: 6px; 
height: 8px; 
/*background: url(images/arrow_right.png) no-repeat 0 0;*/
}
/* Mega menu container */
.mega-menu li .sub-container {
position: absolute; /* Required */
background: #f4f4f4;
/*padding: 10px 10px 0 10px;*/ 
padding: 0; 

}
.mega-menu li .sub-container .sub {}

.mega-menu li .sub .row {
width: 100%; overflow: hidden; /* Clear floats */
}
.mega-menu li .sub li {
float: none; 
width: 150px; 
font-size: 1em; 
font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
background: none; 
border: none; 
text-shadow: none;
float: none;
color: #0066cc;/*Изменил цвет*/ 
padding: 7px 10px; 
display: block;
 
font-size: 0.9em;
}

.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000; 
text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
padding: 4px 5px 4px 20px; 
background: url(images/arrowSubMe.png) no-repeat 5px 8px; 
font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
    
color: #a32403; 
background: #efefef url(images/arrowSubMe.png) no-repeat 5px 8px;
}
.mega-menu .sub ul li {
padding-right: 0;
}
/* Styling for menu items with only 2 levels */
.mega-menu li .sub-container.non-mega .sub {
padding: 10px;}
.mega-menu li .sub-container.non-mega li {
padding: 0; 
margin: 0;
width: 210px;
}
.mega-menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px; 
background: url(images/arrowSubMe.png) no-repeat 7px 12px;
font: bold 11px Tahoma; color: #408cd9;
text-decoration: underline;/*Добавил подчеркивание*/
}
.mega-menu li .sub-container.non-mega li a:hover {
    text-decoration: none;/*Убрал подчерк и цвет*/
/*color: #a32403;*/ 
background: #efefef url(images/arrow_on.png) no-repeat 7px 12px;
}        
.discon {
    display: block; margin: 0 auto;
}    

.right-bar {
    float: right; width: 256px; /*height: 2100px;*/ /*outline: 1px solid #999;*/
}
    .banner-top img {
        margin: 0 0 4px 0;
    }
.right-promo {background: #2ca345; padding: 8px;}
    .promo {background: #fff; border-radius: 5px; padding: 17px 0 4px; text-align: center;}
        .promo h2 {
            font: bold 12px Tahoma; margin: 0 0 15px 0;
        }
            .promo h2 a {color: #408cd9;}
            .promo h2 a:hover {text-decoration: none;}
        .promo-price {font: bold 26px Tahoma; color: #b60705; margin-top: 5px;}
            .promo-price span {font: bold 12px Tahoma; color: #7e7e7e; text-decoration: line-through;}
        .promo-plus {font: bold 16px Tahoma; color: #2ca445; margin-bottom: 7px;}
        .promo p a img {margin-bottom: 7px;}
        .promo-time {font: 11px Tahoma; color: #7e7e7e;}
            .promo-time span {font: 30px Tahoma; color: #3f3f3f;}
    .promo2 {margin-bottom: 8px;}        

.main-content {
    margin: 0 256px 0 21%; /*height: 2100px;*/ 
}
    .content {
        margin: 0 2% 0 0;    
    }
    .content h1 {font: 20px "Trebuchet MS"; margin-bottom: 15px;}
        .content-catalog {
            width: 100%; border: none; background: #e0e0e0; border-spacing: 1px; margin-bottom: 45px;/*Послед правило, чтобы проявился между ячейками фоновый цвет таблицы.
            Правило border-spacing: аналог атрибута тега <table> cellspacing="" - расстояния между ячейками*/    
        }
        .content-catalog td {background: #fff; width: 33%; text-align: center;}
            .product-main {padding: 3px 10px 5px; position: relative; border: 1px solid #fff;}
            .product-main:hover {border: 1px solid #d1817d; background: #f4f4f4;}/*В наведен сост появл рамка др цвета и др фоновый цвет элемента*/
            .product-main:hover .cat-main-img {opacity: 0.3;}/*Уменьшаем прозрачность картинки*/
            .product-main:hover .product-opis {display: block;}/*В наведенном состоянии появляется блок описания*/
                .product {}
                .product-opis {position: absolute; top: 70px; left: 20px; display: none;}/*В обычном состоянии блок описания не виден*/
                .product-opis p{font: 11px Tahoma; color: #303030; text-align: left; line-height: 1.4;}
                    .content-catalog td h2 {font: bold 11px Tahoma; margin-top: 3px;}
                        .content-catalog td h2 a {color: #3272b0; text-decoration: none;}
                        .content-catalog td h2 a:hover {text-decoration: underline;}
                    .compare {font: 11px Tahoma; color: #7e7e7e; text-align: right; padding: 0 0 4px 0;}
                        .compare input {position: relative; top: 4px; margin-left: 2px;}
                    .cat-main-img {display: block; margin: 25px auto 15px auto;}
                    .cat-price {font: 11px Tahoma; color: #7e7e7e; margin: 0 0 7px 0;}
                    .cat-price span {font: bold 15px "Trebuchet MS"; color: #d81107;}
                    .cat-button {background: url(../images/imgrubberdivthreecol/twoColorButton.png) center top no-repeat; font: 11px Tahoma; padding: 3px 0 6px 0;}
                    a.buy {color: #fff;}
                    .cat-button a:hover {text-decoration: none;}
                    a.inbasket {color: #3272b0;}
        .content-bottom {background: #f4f4f4; padding: 10px;}
        .content-bottom h3 {font: bold 13px Tahoma; color: #303030;line-height: 1.4; margin-bottom: 5px;}
        .content-bottom p {font: 11px Tahoma; color: #303030; text-indent: 35px; line-height: 1.4; text-align: justify;}

footer {
    overflow: hidden; max-width: 1280px; min-width: 1000px; margin: 0 auto; background: url(../images/imgrubberdivthreecol/footer-c-bg.jpg) top repeat-x;
    font: 12px Tahoma, sans-serif;        
}
    .fleft {
        background: url(../images/imgrubberdivthreecol/fleft.png)left top no-repeat; width: 30px; height: 72px; float: left;    
    }
    .fright {
        background: url(../images/imgrubberdivthreecol/fright.png)right top no-repeat; width: 31px; height: 72px; float: right;
    }
    .foot-logo {
        float: left; margin-top: 20px;
    }
    footer p {
        float: left; margin: 25px 0 0 25px; color: #303030;
    }
    p.atstar {
        float: right; margin: 20px 31px 0 0;
    }
    
    p.atstar img {
        float: left; margin: 6px 10px 0 0;
    }
    p.atstar a {
        font-size: 10px; color: #303030;
    }
    p.atstar a:hover {
        text-decoration: none;
    }
    p.atstar a.pp {
        position: relative; top: 4px;
    }
.foot-menu {
    font:10px Taxoma; max-width: 1280px; min-width: 1000px; margin: 10px auto 20px auto; text-align: center;
}
.foot-menu a {
    color: #408cd9; margin: 0 10px;
}

.foot-menu a:hover {
    text-decoration: none;
}