@charset "utf-8";
/**
 **************************************************
 * SWATCH / swatch.tv
 * main.css
 *
 * @author: Alexander Heinze
 * @version: 1.0
 **************************************************
**/



/**
 **************************************************
 * CSS RESET
 *
 * @description: general reset for all browsers
 **************************************************
**/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	padding:0;
	border:0;
	margin:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

h1,h2,h3,h4,h5,h6,strong,b,th,dt {
	font-size:100%;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

img,abbr,acronym {
	border:0;
}

em,i,dfn,cite,var,address {
	font-style:normal;
}

pre,code {
	font-family:'courier new',courier,mono;
	font-size:11px;
}

q:before,q:after {
	content:'';
}

:focus {
	outline:0;
}





/**
 **************************************************
 HELPER CLASSES
 *
 * @description: helper classes for common problems or quick fixes
 **************************************************
**/
.clearOnly {
	clear:both;
}

.clear {
	clear:both;
	height:0;
	font-size:0;
	line-height:0;
}

.left {
	float:left !important;
}

.right {
	float:right !important;
}

.noPadding {
	padding:0 !important;
}

.noMargin {
	margin:0 !important;
}

.marginTop20 {
	margin-top:20px !important;
}

.moreMarginTop {
	margin-top:40px !important;
}

.none {
	display:none !important;
}

.hidden {
	visibility:hidden !important;
}

.error {
	color:red;
	font-weight:bold;
}

.noCase {
	text-transform:none !important;
}

.sprite,
.sprite a {
	text-indent:-99999px;
	font-size:0;
	line-height:0;
}

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix {
	display:inline-block;
}

/* Hide from IE Mac \*/.clearfix{ display:block; }/* End hide from IE Mac */




/**
 **************************************************
 GENERAL DEFINITIONS
 *
 * @description: define the basic appearance of the site
 **************************************************
**/
html {
	height:100%;
	/*Defaults to ~16px across browsers*/
	/*font-size:100.01%;*/
	/*Defaults to ~12px across browsers*/
	font-size:75.01%;

}

body {
	/* this changes two for ie6 */
	/*height:100%*/
        padding-bottom:25px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:11px;
        /*font-size:76%;*/
	/*line-height calculates to 18px (~12px * 1.5 = ~18px)*/
	line-height:16px;
	color:#666;
	/*Testing the text-rythm at ~18px*/
	background:#f1f1f1;
}

h1 {
        font-family:arial;
        font-size:22px;
        font-weight:normal;
        line-height:22px;
        text-transform:uppercase;
}

a:link,
a:active,
a:visited {
	color:#666;
}

a:hover {
	text-decoration:none;
}

strong,b {
	font-weight:bold;
}

em,i {
	font-style:italic;
}

form {

}

form legend {
	display:none;
}

form label {
	clear:left;
	float:left;
	width:135px;
}

form label em {
	font-style:normal;
	color:red;
}

form input.text,
form input.checkbox,
form input.radio,
form select,
form textarea {
	float:left;
	width:284px;
	padding:2px 2px 1px 2px;
	border:1px solid #4c4c4c;
	margin:0 0 8px 0;
	font:inherit;
	color:#ffffff;
        background:#000000;
}

/* BEN: FF 3.6X seems to have std-bg-color now. Overriding */
form select {
	background-color:#000000;
}

form textarea {
	height:64px;
}

form input.checkbox,
form input.radio {
	width:auto;
	height:auto;
	border:0 none;
	margin:3px 0 5px 1px;
        !margin-top:0;
}

form select {
	/* Selects have wrong box model. Add all paddings/margins/borders from above */
	width:200px;
	height:21px;
	padding:0;
}

/* Selects with a defined size (listboxes) */
form select.listbox {
	height:auto;
}

form select option {
}

/*
form input.submit,
form input.reset,
form input.button {
        width:auto;
	padding:3px 10px 3px 10px;
	border:0;
	margin:0 0 5px 0;
        text-align:center;
	color:#888;
        text-transform:uppercase;
	background:#d6d6d6
}
*/

form p {
	clear:left;
	margin-bottom:10px;
}




/**
 **************************************************
 LAYOUT
 *
 * @description: building the design
 **************************************************
**/
#page {
	position:relative;
	width:960px;
	margin:0 auto;
}

#header {
	position:relative;
	width:940px;
	height:72px;
	padding:0 10px 0 10px;
	background:url(../images/page-bg.gif) top left repeat-y;

}

#logo {
        position:absolute;
        top:25px;
        left:47px;
        text-align:left;
}

a#navLang {
        position:absolute;
        height:20px;
        top:0;
        right:27px;
        list-style:none;
        z-index:600;
}

#content {
	position:relative;
	width:910px;
	padding:0 25px 25px 25px;
	font-size:11px;
	background:url(../images/page-bg.gif) top left repeat-y;
}

#primaryContent {
        position:relative;
}


ol#navBreadcrumb {
        float:left;
        margin-left:5px;
}

ul#navMain {
        position:relative;
        width:350px;
        height:30px;
        margin-left:5px;
        list-style:none;
}

#navAccount {
        position:absolute;
        bottom:19px;
        right:28px;
}

form#searchform {
        position:absolute;
        top:-9px;
        right:0;
        width:200px;
        height:23px;
        padding:8px 10px 3px 8px;
        background:url(../images/searchform-bg.gif) top left no-repeat;
}

#footer {
	position:relative;
	width:910px;
	height:50px;
	padding:0 25px 0 25px;
	text-align:right;
	font-size:9px;
	color:#999;
	background:url(../images/footer-bg.png) top left no-repeat;
	z-index:5000;
}




/**
 **************************************************
 LAYOUT SPECIFIC (LOGO,NAVIGATION,SEARCHBOX...)
 *
 * @description: detailed formatting of the basic elements
 **************************************************
**/
/* *** MAIN NAVIGATION *** */
ul#navMain li {
        float:left;
        margin-right:15px;
        font-family:helvetica,arial;
        font-size:16px;
        text-transform:uppercase;
}

ul#navMain li a {
        color:#bdbaba;
        text-decoration:none;
}

ul#navMain li a.home:hover,
ul#navMain li.active a.home {
        color:#474747;
}

ul#navMain li a.sport:hover,
ul#navMain li.active a.sport {
        color:#eb0000;
}

ul#navMain li a.art:hover,
ul#navMain li.active a.art {
        color:#0073e1;
}

ul#navMain li a.fashion:hover,
ul#navMain li.active a.fashion {
        color:#fa7fdc;
}

ul#navMain li a.live:hover,
ul#navMain li.active a.live {
        color:#474747;
}


/* *** ACCOUNT NAVIGATION *** */
#navAccount a,
#myAlternativeContent p {
        margin-left:25px;
        color:#474747;
        font-size:12px;
        text-decoration:none;
}

#myAlternativeContent p {
	margin: 20px;
	text-transform: uppercase;
}

/* *** SEARCHFORM *** */
form#searchform input.text {
        width:175px;
        border:0;
        text-transform:uppercase;
        color:#bdbaba;
        background:none;
}

form#searchform input.submit {
        width:13px;
        height:12px;
        padding:0;
        border:0;
        margin:3px 0 0 7px;
        background:none;
}


/* *** BREADCRUMB NAVIGATION *** */
ol#navBreadcrumb li {
	float:left;
        margin:0 5px 0 0;
        font-size:9px;
        color:#bdbaba;
}

ol#navBreadcrumb li .beatanzeige {
	width:30px;
	padding:0;
	border:0;
	margin:0 5px 0 0;
	color:#999;
	font-size:9px;
	background-color:transparent;
}

ol#navBreadcrumb li .beats{
	text-decoration:none;
}

ol#navBreadcrumb li.act {
	font-weight:bold;
}

ol#navBreadcrumb li a {
        color:#bdbaba;
	text-decoration:underline;
}

ol#navBreadcrumb li a:hover {
	text-decoration:none;
}


/*** Live-Stream ***/
a.backlink {
	font-family:helvetica,arial;
	font-size:16px;
	text-transform:uppercase;
}


/* *** FOOTER *** */
ul#navMeta,
ul#navMisc {
	position:absolute;
	height:16px;
	right:33px;
	top:35px;
	list-style:none;
	text-align:right;
	font-size:9px;
}

ul#navMeta {
	top:5px;
}

ul#navMeta li,
ul#navMisc li {
	display:inline;
	margin:0 0 0 4px;
	color:#999;
}

ul#navMeta li a,
ul#navMisc li a {
	color:#999;
	text-decoration:none;
}

ul#navMeta li a:hover,
ul#navMisc li a:hover {
	text-decoration:underline;
}

ul#navMeta li.active a,
ul#navMisc li.active a {
	color:#df2b26;
}

ul#footerTools {
	position:absolute;
	width:auto;
	left:47px;
	top:5px;
}

ul#footerTools li {
	display:inline-block;
	float:left;
}

li.twitter {
	margin-left:5px;
	padding-left:5px;
	background:url(../images/footertools-bg.gif) top left no-repeat;
}

li.mobile {
	margin-left:5px;
	padding-left:5px;
	background:url(../images/footertools-bg.gif) top left no-repeat;
}

ul#footerTools span.link,
ul#footerTools span.link a {
	display:block;
	width:49px;
	height:10px;
	margin-top:1px;
	margin-left:5px;
	background:url(../images/facebook.gif) top left no-repeat;
}

ul#footerTools span.link a {
	border:0;
	margin-top:0;
	margin-left:0;
	/* this for the ie6 */
	color:#f2f2f2;
	text-decoration:none;
	background:transparent;
}

ul#footerTools li.facebook span.link a:hover {
	background:url(../images/facebook.gif) bottom left no-repeat;
}

ul#footerTools li.twitter span.link,
ul#footerTools li.twitter span.link a {
	width:47px;
	background:url(../images/twitter.gif) top left no-repeat;
}

ul#footerTools li.twitter span.link a {
	background:transparent;
}

ul#footerTools li.twitter span.link a:hover {
	background:url(../images/twitter.gif) bottom left no-repeat;
}

ul#footerTools li.mobile span.link, ul#footerTools li.mobile span.link a {
    background: url("../images/mobile.gif") no-repeat scroll left top transparent;
    height: 15px;
    margin-top: 0;
    width: 54px;
}
ul#footerTools li.mobile span.link a {
    background: none repeat scroll 0 0 transparent;
}
ul#footerTools li.mobile span.link a:hover {
    background: url("../images/mobile.gif") no-repeat scroll left bottom transparent;
}


/**
 **************************************************
 CONTENT
 *
 * @description: content elements in shadow
 **************************************************
**/
a.arrow {
    padding-left:12px;
    margin-right:3px;
    margin-bottom:3px;
    text-decoration:none;
    background-position:0 3px;
    background-repeat:no-repeat;
}

a.white {
    color:#fff !important;
    background-image:url(../images/ico-arrow-w-6.gif);
}

a.gray {
    color:#BDBABA !important;
    background-image:url(../images/ico-arrow-g-7.gif);
}

a.grayLarge {
	color: #c7c7c7;
	background-position: 0 1px;
	background-image:url(../images/ico-arrow-g-large.gif);
}



/**
 **************************************************
 SEARCH
 *
 * @description: form overrides for shadowbox
 **************************************************
**/
/* BACK TO SEARCH */
div#backToSearch a {
    margin-top:-15px;
}

.results {
    position:relative;
    height:685px;
    margin:20px 0 0 5px;
}

.results .videos {
    position:relative;
    height:650px;
    margin-top:10px;
}

.results .videos li {
    position:relative;
    float:left;
    width:146px;
    height:83px;
    overflow:hidden;
   /* margin:0 40px 20px 0;*/
}

.results .videos li.last {
    margin-right:0;
}

.results .videos li div {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:146px;
    height:83px;
    background:url(../images/search-item-bg.png) top left no-repeat;
}

.results .videos li a {
    display:block;
    width:138px;
    height:72px;
    padding:4px;
    color:#fff;
    text-decoration:none;
    border-bottom:3px solid #000000;
}

.results .videos li a.sport,
.results .videos li a.sport-1 {
    border-color:#eb0000;
}

.results .videos li a.art,
.results .videos li a.art-1 {
    border-color:#0073e1;
}

.results .videos li a.fashion,
.results .videos li a.fashion-1 {
    border-color:#fa7fdc;
}


.results span.prev,
.results span.next {
    display:block;
    position:absolute;
    top:50%;
    left:0;
    margin-left:-20px;
    margin-top:-25px;
    width:30px;
    height:49px;
    background:url(../images/prev.gif) top left no-repeat;
}

.results span.next {
    left:auto;
    right:0;
    margin-left:0;
    margin-right:-15px;
    background:url(../images/next.gif) top left no-repeat;
}

.results span.prev a,
.results span.next a {
    display:block;
    width:30px;
    height:49px;
    background:transparent;
}

.results span.prev a:hover {
    background:url(../images/prev.gif) bottom left no-repeat;
}

.results span.next a:hover {
    background:url(../images/next.gif) bottom left no-repeat;
}





/**
 **************************************************
 SEARCH
 *
 * @description: form overrides for shadowbox
 **************************************************
**/
.pageBrowser {
    float:right;
    margin-top:25px;
}

.pageBrowser li {
    display:block;
    float:left;
    height:11px;
    padding-right:6px;
    line-height:11px;
    margin-right:6px;
    font-weight:bold;
    background:url(../images/pagebrowser-page.gif) top right no-repeat;
}

.pageBrowser li a {
    display:inline-block;
    height:11px;
    font-weight:normal;
    line-height:10px;
    text-decoration:none;
}

.pageBrowser li.next,
.pageBrowser li.prev,
.pageBrowser li.last,
.pageBrowser li.first {
    padding-right:0;
    background:none;
}

.pageBrowser li.last a,
.pageBrowser li.first a {
    display:block;
    width:8px;
    background:url(../images/pagebrowser-firstpage.gif) top left no-repeat;
}

.pageBrowser li.last a {
    background:url(../images/pagebrowser-lastpage.gif) top left no-repeat;
}

.pageBrowser li.next a,
.pageBrowser li.prev a {
    display:block;
    width:6px;
    background:url(../images/pagebrowser-prev.gif) top left no-repeat;
}

.pageBrowser li.next a {
    background:url(../images/pagebrowser-next.gif) top left no-repeat;
}

object#flash {
	width: 910px;
	height: 736px;
}

div#flashWrap {
	margin-top: 5px;
}



/**
 **************************************************
 SHADOW BOX
 *
 * @description: general definitions for overlays,
 * layer ect.
 **************************************************
**/
#sb-info {
        background:url(../images/sb-title-bg.gif) top left repeat-x;
}

#sb-wrapper #sb-wrapper-inner {
	border:none;
}

#sb-title {
	display:none;
}

#sb-body {
    background:#000 url(../images/sb-body-bg.gif) top left repeat-x;
}

iframe#sb-player {
	overflow: hidden;
}

/**
 **************************************************
 DEFINITIONS 404 ERROR PAGE
 *
 * @description: define the appearance of the 404 error page
 **************************************************
**/
#image404 {
	padding-left: 5px;
		
}
#error404 {
	padding-top: 20px;	
	padding-left: 20px;
}
.home404 a:link, a:active, a:visited{
	color: #FF110E;	
	text-decoration: none;
}