/** Styles  Mediathek allgemein */

* {padding:0; margin:0}

body {
margin: 0px auto; 
font: 11px Verdana;
color: #333;
text-align: center;
background: #fff; 
}

#wrap {
width: 870px;
background: #fff;
border-left: 1px solid #AF1414;
border-right: 1px solid #AF1414;
margin: 0px auto;
padding: 20px 50px 0px 50px;
text-align: left;
overflow: hidden;
}

* html #wrap {
overflow: visible;
width: 970px;

}


#header {
padding: 10px 0px 20px 0px;
margin-bottom: 20px;
width: 870px;
height: 60px;
text-align: right;
background: url(img/logo_videothek2.gif) no-repeat 0px 10px;
}

* html #header {
height: 90px;
}


#footer {
width: 870px;
clear: both;	
text-align: right;
color: #999;
margin: 30px 0px 10px 0px;
}

#content {
width: 620px;
float: right;
margin: 0px 10px 30px 30px;
}


#site {
width: 630px;
}


#links {
width: 190px;
float: left;
margin-right: 20px;
}





#media_ges {
font-size: 10px;
margin-top: 3px; 
float: left;
width: 190px;
}

#meistgesehen {
color: #ccc;
font-size: 10px;
margin-top: 3px;
float: right;
width: 440px;
}


#vonbis {
font-size: 10px;
margin: 62px 2px 0px 0px;
float: right;
}



.details_area {
width: 355px;
float: left;
margin-right: 40px;
}

#right {
width: 225px;
float: right;
}

#vonbis2 {
font-size: 10px;
color: #333;

}

#mediengefunden {
font-size: 10px;
color: #333;
margin-bottom: 2px;
}

#info {
margin-top: 10px;
}

.small {
font-size: 10px;
}

h2 {
font-size: 12px;
margin-bottom: 5px;
}

ul.channel {
margin: 0px ;
padding: 0px;
}

#channels {
margin: 55px 0px -5px 0px;
padding: 7px 0px 0px 97px;
float: left;
width: 475px;
height: 20px;
background: url(img/logo_klein.gif) no-repeat 0px 0px;
}

* html #channels {
width: 572px;

}

li.channel {
list-style: none;
display: inline;
background-color: #fff;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
color: #ccc;
} 

li.channel-active {
border-bottom: 1px solid #f5f5f5;
}

input.suchfeld,input.button {

font: 10px Verdana;
color: #333;
width: 124px;
border: 1px solid #ccc;
background: #fff;
padding: 2px;
}

* html input.suchfeld {

width: 128px;
padding: 2px;
height: 18px;
}

input.button {
width: 90px;
padding: 1px;
cursor: pointer;
}


.resultitem   {
padding: -2px;
}




ul.navi {
margin: 0px ;
padding: 0px;
list-style: none;
list-style-image: none;
}

li.navi {
margin: 8px 0px 8px 0px;
padding: 0px;
list-style-image: none;
list-style: none;
}


fieldset {
padding: 0px 15px 15px 15px;
border: 1px solid #ccc;
margin-top: 10px;
}

legend {
padding: 0px 5px 0px 5px;
color: #333;
font-weight: bold;
}



/** Styles  Mediathek Links */


a.a_active{
 font-size: 10px;
 color: #333; 
}

a,a:link {color: #ee0000; text-decoration: none; outline:none;}
a:hover {color: #ee0000; text-decoration: underline; outline:none;}

a.small,a.small:link {font-size: 10px; color: #333; text-decoration: none; outline:none;}
a.small:hover {font-size: 10px; color: #999; text-decoration: none; outline:none;}
a.small:active {font-size: 10px; color: #333; text-decoration: none; outline:none;}
a.small.selected {font-size: 10px; font-weight: bold; color: #333; text-decoration: none; outline:none;}

a.navi,a.navi:link,a.navi:visited {
font-size: 13px; 
color: #af1314;
padding: 0px 0px 0px 20px;
text-decoration: none; 
outline:none; 
background: url(img/cube.gif) no-repeat 0px 4px;
}

a.navi:hover { background: url(img/cube_full.gif) no-repeat 0px 4px; }


a.pfeilunten,a.pfeilunten:link,a.pfeilunten:visited {
font-size: 10px; 
color: #333; 
padding: 0px 0px 0px 20px; 
text-decoration: none; 
outline:none;
background: url(img/pfeil_unten.gif) no-repeat 0px -1px;
}

a.pfeilunten:hover {color: #999;}


a.pfeiloben,a.pfeiloben:link,a.pfeiloben:visited {
font-size: 10px; 
color: #333; 
padding: 0px 0px 0px 20px; 
text-decoration: none; 
outline:none; 
background: url(img/pfeil_oben.gif) no-repeat 0px -1px;
}

a.pfeiloben:hover {color: #999;}


/** Styles  Mediathek Karusell */

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
margin: 0px;
padding: 0px;
}

.jcarousel-clip {
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}

.jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
float: left;
list-style: none;
/* We set the width/height explicitly. No width/height causes infinite loops. */
width: 75px;
height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
z-index: 3;
display: none;
}

.jcarousel-prev {
z-index: 3;
display: none;
}


#wrap2 {
color: #ccc;
/*margin: 0 12%;*/
margin: 0px;
padding: 0px;
   }

/**  Horizontal carousel  */

.jcarousel-skin-tango .jcarousel-container {
background: url(img/back_horizontal.jpg) repeat-x 0px 0px;
border: 1px solid #ddd;
margin: 0px;
padding: 0px;
	 

}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 598px;
padding: 10px 15px 10px 15px;
height: 135px;
}

* html .jcarousel-skin-tango .jcarousel-container-horizontal {
width: 628px;
height: 145px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width:  603px;
height: 135px;
padding: 0px;
margin: -42px 0px 0px 0px;
}

* html .jcarousel-skin-tango .jcarousel-clip-horizontal {
width:  593px;
height: 130px;
}

.jcarousel-skin-tango .jcarousel-item {
width: 110px;
height: 120px;
border: 0px solid #ccc;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 11px;
width: 110px;
height: 140px;
}



.jcarousel-skin-tango .jcarousel-item-placeholder {
background: url(img/loading-small.gif) no-repeat 30px 40px;
color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: relative;
top: 124px;
left: 590px;
width: 24px;
height: 23px;
cursor: pointer;
background: transparent url(img/next-horizontal2.png) no-repeat 0 0;
opacity: .9;
filter: alpha(opacity=90);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: 0px 0;
opacity: 0.6;
filter: alpha(opacity=60);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: 0px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: 0px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: relative;
top: 147px;
left: 565px;
width: 24px;
height: 23px;
cursor: pointer;
background: transparent url(img/prev-horizontal2.png) no-repeat 0 0;
opacity: .9;
filter: alpha(opacity=90);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: 0px 0;
opacity: 0.6;
filter: alpha(opacity=60);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: 0px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: 0px 0;
}

/**  *  Vertical carousel */

.jcarousel-skin-tango .jcarousel-container-vertical {
width: 224px;
height: 330px;
background: #fff;
margin: 0px;
padding: 0px;
border: 1px solid #fff;
	
}



.jcarousel-skin-tango .jcarousel-clip-vertical {
width:  224px;
height: 320px;
margin: -42px 0px 0px 0px;
padding: 0px;
}



.jcarousel-skin-tango .jcarousel-item-vertical {
margin: 5px 0px 0px 0px;
padding: 2px 2px 1px 4px;
height:70px;
width:216px;
background: url(img/back_vertical.jpg) repeat-x 0px 0px;
font-size: 10px;
border: 1px solid #ddd;
}

* html .jcarousel-skin-tango .jcarousel-item-vertical {
height:75px;
width:223px;
}

/**  Vertical Buttons */


.jcarousel-skin-tango .jcarousel-next-vertical {
position: relative;
top:303px;
left: 200px;
width: 24px;
height: 23px;
cursor: pointer;
background: transparent url(img/next-vertical.png) no-repeat 0 0;
opacity: .9;
filter: alpha(opacity=90);
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
background-position: 0px 0;
opacity: 0.6;
filter: alpha(opacity=60);
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
background-position: 0 0px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
cursor: default;
background-position: 0 0px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
position: relative;
top:326px;
left: 175px;
width: 24px;
height: 23px;
cursor: pointer;
background: transparent url(img/prev-vertical.png) no-repeat 0 0;
opacity: .9;
filter: alpha(opacity=90);
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
background-position: 0px 0;
opacity: 0.6;
filter: alpha(opacity=60);
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
background-position: 0 0px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
cursor: default;
background-position: 0 0px;
}

/**  uploadscript errors */

p.showerror, ul.showerror{
border:1px solid red;
color:red;
font-size:11px;
list-style-type:square;
margin:0 0 5px;
padding:5px 5px 5px 20px;
position:relative;
}

.errorfield {
background-color:#FFEFCE;
border:1px solid Red;
}