@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    #tabsNav {
        display: none;
    }
}


/* bg tabs area  */
#tabsArea{  background: #f0f0f0 url(/xtpl/i/tabs_bg_bt.gif) 0 100% repeat-x; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.bgLeft{ background: url(/xtpl/i/tabs_bg_left.png) 0 100% no-repeat; margin-left: -1px}
.bgTop{ background: url(/xtpl/i/tabs_bg_tp.png) 0 0 repeat-x; margin-right: -1px; }
.bgTopLeft{ background: url(/xtpl/i/tabs_bg_tp_left.png) 0 0 no-repeat; padding-left: 1px; position: relative; height:335px; overflow:hidden;  }
/* red bottom button*/
#tabsArea .btn{  background: url(/xtpl/i/tabs_bg_right.png) 100% 0 no-repeat; margin-bottom: 0; position: absolute; right: 0; bottom: 0; width: 276px;    }
#tabsArea .btn a{ text-indent: 115px; }


/* Tabs Skin */
#tabsNav { list-style: none; float: left; width: 100%; display: inline-block;}
#tabsNav li { float: left; min-width: 76px; /* be nice to Opera */ width: 14.2%; }
#tabsNav a, #tabsNav a span { display: block; }
#tabsNav a { z-index: 2; text-align: center; text-decoration: none; white-space: nowrap; /* required in IE 6 */}
#tabsNav .tabs-selected a, #tabsNav .tabs-selected a:hover, #tabsNav a:focus, #tabsNav a:active { background: url(/xtpl/menu/tabright0.png) 100% 0 no-repeat; outline: 0; /* prevent dotted border in Firefox */ }
#tabsNav a:hover{ background: url(/xtpl/menu/tabright1.png) 100% 0 no-repeat; }
#tabsNav a, #tabsNav .tabs-disabled a:hover, #tabsNav .tabs-disabled a:focus, #tabsNav .tabs-disabled a:active { background: url(/xtpl/menu/tabright.png) 100% 0 no-repeat; }
#tabsNav a span { height: 86px; /* IE 6 treats height as min-height */ min-height: 86px; }
*>#tabsNav a span { /* hide from IE 6 */ width: auto; height: auto; }
#tabsNav .tabs-selected a span, #tabsNav .tabs-selected a:hover span, #tabsNav a:focus span, #tabsNav a:active span { background: url(/xtpl/menu/tableft0.png) 0 0 no-repeat; }
#tabsNav a:hover span{ background: url(/xtpl/menu/tableft1.png) 0 0 no-repeat; }
#tabsNav a span, #tabsNav .tabs-disabled a:hover span, #tabsNav .tabs-disabled a:focus span, #tabsNav .tabs-disabled a:active span { background: url(/xtpl/menu/tableft.png) 0 0 no-repeat; }
#tabsNav .tabs-selected a:link, #tabsNav .tabs-selected a:visited, #tabsNav .tabs-disabled a:link, #tabsNav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; }
#tabsNav a:hover, #tabsNav a:focus, #tabsNav a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer; }
#tabsNav .tabs-disabled { opacity: .4; }

.tabs-container { float: left; width: 100%; _float: none; _width: auto; _height:0;    }
.tabs-container a{ color: #777; }


/* tabs content */
#tabs{ height: 300px; overflow: hidden; }
#tabs .left{float:left; width: 45%; height: 145px; overflow: hidden; margin: 20px 20px 0 30px; display:inline}
#tabs .right{ float:left;  width: 40%; height: 182px; overflow: hidden; margin-top: 15px; margin-right: 10px}
#sm li a{ font-size: 12px; }
#sm li{ padding: 3px 0; }
#tab1 #sm li{ padding: 5px 0; }
.headerTab{ text-indent: -9000px; overflow: hidden; height: 65px; width: 220px; }