/*! * Project: Breakthrough.tv Bar * Date: 2011/09/26 /* ---------------------------------------- */ @font-face { font-family: 'GeoSlab703Light'; src: url('../fonts/geomeslabtlig-webfont.eot'); src: url('../fonts/geomeslabtlig-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/geomeslabtlig-webfont.woff') format('woff'), url('../fonts/geomeslabtlig-webfont.ttf') format('truetype'), url('../fonts/geomeslabtlig-webfont.svg#GeometricSlabserif703Light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GeoSlab703Bold'; src: url('../fonts/geomeslabtbol-webfont.eot'); src: url('../fonts/geomeslabtbol-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/geomeslabtbol-webfont.woff') format('woff'), url('../fonts/geomeslabtbol-webfont.ttf') format('truetype'), url('../fonts/geomeslabtbol-webfont.svg#GeometricSlabserif703Bold') format('svg'); font-weight: bold; font-style: normal; } /*! layout -------- */ #btbar { position: relative; overflow: hidden; width: 100%; border-bottom: 5px solid #c2c2c2; background: #ee3424 url(../images/btbar-bg-a.png) repeat-x; color: #252525; font: 13px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif !important; } #btbar p { font-size: 13px;} #btbar { height: 30px; } #btbar * { list-style: none; margin: 0; padding: 0; } #btbar > .inner { position: relative; overflow: hidden; width: 950px; margin: 0 auto; } #btbar > .inner > .brand { float: left; width: 159px; height: 110px; margin: 0; padding: 0 0 50px; } #btbar > .inner > .brand a { display: block; overflow: hidden; width: 100%; height: 110px; background: url(../images/btbar-logo-a.png) 15px 50% no-repeat; font-size: 0; text-indent: -10001px; } #btbar > .inner > .brand.active { background: url(../images/btbar-arrow-a.png) 50% 110px no-repeat; } #btbar > .inner > .brand.active a { background-color: rgba(0,0,0,0.08); background-color: #ebebeb; } #btbar > .inner > .sub { display: none; position: absolute; left: 15px; right: 0; top: 122px; } #btbar > .inner > .sub.active { display: block; } #btbar > .inner > .sub h3 { float: left; padding: 0 10px 0 0; font: 15px/27px GeoSlab703Light,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: lowercase; } #btbar > .inner > .sub p.join { position: relative; float: left; padding: 0 20px 0 0; } #btbar > .inner > .sub p.join label { position: absolute; left: 10px; top: 0; font-size: 11px; line-height: 27px; text-transform: lowercase; } #btbar > .inner > .sub p.join label#label-f-country { display:none; } #btbar > .inner > .sub p.join input { width: 155px; height: 27px; padding: 0 10px; border: none; background: url(../images/btbar-subsprite-a.png) no-repeat; color: #333; font: 11px/27px Helvetica Neue,Helvetica,Arial,sans-serif; vertical-align: top; } #btbar > .inner > .sub p.join select { margin-top: 5px; width: 158px; height: 27px; padding: 0 10px; } #btbar > .inner > .sub p.join div.selector { overflow: hidden; width: 158px; display: inline-block; height: 27px; background: url(../images/btbar-country-sprite.png) no-repeat; position: relative; vertical-align: top; } #btbar > .inner > .sub p.join div.selector span { display:block !important; padding: 5px 10px !important; font-size: 11px; } #btbar > .inner > .sub p.join div.selector select { position:absolute; top: 0px; left: 0px; height: 27px; padding: 0 10px; } #btbar > .inner > .sub p.join button { overflow: hidden; width: 63px; height: 27px; margin: 0; padding: 0; border: none; background: url(../images/btbar-subsprite-a.png) -362px 0 no-repeat; text-indent: -999em; cursor: pointer; } #btbar > .inner > .sub p.join button:hover { background-position: -425px 0; } #btbar > .inner > .sub p.join + p { float: left; padding-right: 0px; line-height: 27px; text-transform: lowercase; } #btbar > .inner > .sub p.join + p a { color: #fff !important; font-weight: bold; text-decoration: none; } #btbar > .inner > .sub div.social { float: left; padding: 4px 0 0; } #btbar > .inner div.social .addthis_button_facebook_like { width: 47px; overflow: hidden; float:left; margin-left: 10px; } #btbar > .inner div.social .addthis_button_tweet { width: 56px; overflow: hidden; float:left; margin-left: 5px; } #btbar > .inner > .sub p.action { float: right; } #btbar > .inner > .sub p.action a { display: block; overflow: hidden; width: 66px; height: 27px; background: url(../images/btbar-subsprite-a.png) -229px 0 no-repeat; font-size: 0; text-indent: -10001px; } #btbar > .inner > .sub p.action a:hover, #btbar > .inner > .sub p.action a:focus, #btbar > .inner > .sub p.action a:active { background-position: -295px 0; } #btbar > .inner > .subs { position: absolute; left: 175px; right: 0; top: 122px; list-style: none; margin: 0; padding: 0; } #btbar > .inner > .subs .item { display: none; overflow: hidden; width: 100%; } #btbar > .inner > .subs .item.active { display: block; } #btbar > .inner > .subs h3 { float: left; padding: 0 10px 0 0; font: 15px/27px GeoSlab703Light,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: lowercase; } #btbar > .inner > .subs p { float: left; padding-right: 25px; line-height: 27px; text-transform: lowercase; } #btbar > .inner > .subs p a { color: #fff !important; font-weight: bold; text-decoration: none; } #btbar > .inner > .subs div.social { float: right; padding: 4px 0 0; } #btbar > .inner > .logos { position: relative; float: right; width: 790px; height: 80px; margin: 0; padding: 30px 0 0; border-left: 1px solid #d7d7d7; } #btbar > .inner > .logos .wrap { position: relative; width: 730px; padding: 0 30px; border-top: 1px solid #d7d7d7; } #btbar > .inner > .logos .items { position: relative; overflow: hidden; width: 100%; height: 86px; } #btbar > .inner > .logos .index { list-style: none; margin: 0; padding: 0; } #btbar > .inner > .logos .index li { position: absolute; left: 7px; top: 50%; margin: -10px 0 0; } #btbar > .inner > .logos .index li a { display: block; overflow: hidden; width: 16px; height: 16px; background: url(../images/btbar-index-a.png) no-repeat; font-size: 0; text-indent: -10001px; outline: none; } #btbar > .inner > .logos .index li a:hover { background-position: -16px 0; } #btbar > .inner > .logos .index li.next { left: auto; right: 7px; } #btbar > .inner > .logos .index li.next a { background-position: 0 -16px; } #btbar > .inner > .logos .index li.next a:hover { background-position: -16px -16px; } #btbar > .inner > .logos .index li.off { opacity: 0.3; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); } #btbar > .inner > .logos .slider { overflow: hidden; width: 99999px; height: 86px; } #btbar > .inner > .logos .items .item { position: relative; float: left; width: 146px; height: 79px; background: url(../images/btbar-logos-a.png) 50% 0 no-repeat; } #btbar > .inner > .logos .items .item.active { background-color: #ebebeb; } #btbar > .inner > .logos .items .item.a49 { width: 173px; background-position: 50% 0; } #btbar > .inner > .logos .items .item.a49.active { background-position: 50% -80px; } #btbar > .inner > .logos .items .item.iced { width: 107px; background-position: 50% -160px; } #btbar > .inner > .logos .items .item.iced.active { background-position: 50% -240px; } #btbar > .inner > .logos .items .item.bb { width: 113px; background-position: 50% -320px; } #btbar > .inner > .logos .items .item.bb.active { background-position: 50% -400px; } #btbar > .inner > .logos .items .item.iam { width: 160px; background-position: 50% -480px; } #btbar > .inner > .logos .items .item.iam.active { background-position: 50% -560px; } #btbar > .inner > .logos .items .item.hg { width: 177px; background-position: 50% -640px; } #btbar > .inner > .logos .items .item.hg.active { background-position: 50% -720px; } #btbar > .inner > .logos .items .item.rf { width: 160px; background-position: 50% -809px; } #btbar > .inner > .logos .items .item.rf.active { background-position: 50% -880px; } #btbar > .inner > .logos .items .item * { display: none; } #btbar > .inner > .logos .items .item :first-child { position: absolute; left: 50%; top: 79px; width: 11px; height: 7px; margin: 0 0 0 -6px; background: url(../images/btbar-arrow-a.png) no-repeat; font-size: 0; text-indent: -10001px; } #btbar > .inner > .logos .items .item.active :first-child { display: block; position: absolute; left: 50%; top: 79px; width: 11px; height: 7px; margin: 0 0 0 -6px; background: url(../images/btbar-arrow-a.png) no-repeat; font-size: 0; text-indent: -10001px; } #btbar > .inner > .toggle { position: absolute; right: 0; top: 3px; font: 13px/21px GeoSlab703Light,Helvetica Neue,Helvetica,Arial,sans-serif; text-transform: lowercase; } #btbar > .inner > .toggle a { display: block; height: 21px; padding-right: 30px; background: url(../images/btbar-toggler-a.png) 100% 0 no-repeat; color: #252525 !important; text-decoration: none !important; outline: none; } #btbar > .inner > .toggle a:hover, #btbar > .inner > .toggle a:focus, #btbar > .inner > .toggle a:active { background-position: 100% -50px; } #btbar > .inner > .toggle a.active { background-position: 100% -100px; } #btbar > .inner > .toggle a.active:hover, #btbar > .inner > .toggle a.active:focus, #btbar > .inner > .toggle a.active:active { background-position: 100% -150px; }