@charset "utf-8";

/* CSS Document 
Thema Name: Klett Module
Thema URI: http://welsch.com
Description: Klett Module Template
Author: Vani Schäfer, Danny Ruch
Author URI: http://welsch.com/
Version: 1.2
License: Copyright Welsch & Partner
License URI: http://welsch.com
*/

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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {

cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

/* allow selection on input fields */ 

.selection-enabled {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
a { cursor: pointer; }



body {font: 12px/16px Arial, Helvetica, sans-serif;	color: #000; background: #ffffff; padding: 20px 0 0 0;
}

/*###################################### global styles ######################################*/

ol, ul {list-style: none;}

sup, sub {height: 0; line-height: 1; vertical-align: baseline; position: relative;}
sup {bottom: 1ex;
font-size:10px;}
sub {top: .5ex;
font-size:10px;}
.hidden {display:none;}

a:link {color: #336699;}

.special-border {
-moz-border-radius-topright: 2px; border-top-right-radius: 2px;
-moz-border-radius-topleft: 15px; border-top-left-radius: 15px;}


/*###################################### main construction ######################################*/
/*
-moz-border-radius: 8px 0 0 8px; 
-webkit-border-radius: 8px 0 0 8px; 
-khtml-border-radius: 8px 0 0 8px; 
border-radius: 8px 0 0 8px; 
*/

#container {display: block; width: 800px; margin: 0 auto;}

#header {background-repeat:no-repeat; position: relative; height: 38px; margin-bottom: 5px; 
width: 800; overflow:hidden;}

#contentContainer {
    left: 0; width: 798px;
    border-style: solid;

    background: #fff;
}
#moduleContainer{
	height:526px;
}

#mainContent {height: 524px; width: 798px; position:relative; border-width: 1px;border-style: solid}


#titleContainer {
    width: 100%; height: 24px; overflow: hidden; border-width: 0 1px 0 1px; border-style:solid;
}

#title {display: block; height: 21px; width: 602px; float: left; padding: 4px 0 0 ; overflow:hidden; color:#ffffff}


#title div {font-size: 14px; float:left; padding-left:15px;}
#title div a {float: left; font-size: 12px;	padding-left: 15px;	cursor: pointer;}

#controls {float: left; height: 24px; width: 196px; overflow:hidden; background:url("../images/layout/titelcontainer-bg.png") no-repeat scroll}
#controls ul {padding: 0 0 0; float: right;}
#controls li {float:left; width:24px;}



#check-answer, #sound-control, #textinfo, #beginning, #prev, #next, #end, #videoPlay, #videoPause, #videoRewind, #toggle-bildinfo, .control-element {
width: 24px; height: 22px; margin-top: 2px; cursor: pointer; background-repeat: no-repeat;}

#check-answer {background-image:url(../images/icons/check.png);} 
#check-answer:hover {background-image:url(../images/icons/check_hi.png);} 

#videoPause {background-image:url(../images/icons/pause.png);} 
#videoPause:hover, #videoPause.active {background-image:url(../images/icons/pause_hi.png);} 
#sound-control {background-image:url(../images/icons/sound.png); }
#sound-control:hover, #sound-control.active {background-image:url(../images/icons/sound_hi.png);}
#textinfo {background-image:url(../images/icons/text.png); }
#textinfo:hover, #textinfo.active {background-image:url(../images/icons/text_hi.png);}
.control-element.beginning, #beginning, #videoRewind {background-image:url(../images/icons/toStart.png);}
.control-element.beginning:hover, #beginning:hover, #videoRewind:hover {background-image:url(../images/icons/toStart_hi.png);}

#prev {background-image:url(../images/icons/backwards.png);}
#prev:hover {background-image:url(../images/icons/backwards_hi.png);}
#next, #videoPlay  {background-image:url(../images/icons/forwards.png);}
#next:hover, #videoPlay:hover, #videoPlay.active {background-image:url(../images/icons/forwards_hi.png);}
#end {background-image:url(../images/icons/toEnd.png);}
#end:hover {background-image:url(../images/icons/toEnd_hi.png);}
#toggle-bildinfo {background-image:url(../images/icons/info.png);}
#toggle-bildinfo:hover {background-image:url(../images/icons/info_hi.png);}




#videoPause.disabled, #videoPause.disabled:hover {cursor:default; background-image:url(../images/icons/grey-pause.png);} 
#sound-control.disabled, #sound-control.disabled:hover {cursor:default; background-image:url(../images/icons/grey-sound.png); }
#textinfo.disabled, #textinfo.disabled:hover {cursor:default; background-image:url(../images/icons/grey-text.png); }
.control-element.beginning.disabled, #beginning.disabled, #videoRewind.disabled, .control-element.beginning.disabled:hover, #beginning.disabled:hover, #videoRewind.disabled:hover {cursor:default; background-image:url(../images/icons/grey-toStart.png);}
#prev.disabled, #prev.disabled:hover {cursor:default; background-image:url(../images/icons/grey-backwards.png);}
#next.disabled, #videoPlay.disabled, #next.disabled:hover, #videoPlay.disabled:hover  {cursor:default; background-image:url(../images/icons/grey-forwards.png);}
#end.disabled, #end.disabled:hover {cursor:default; background-image:url(../images/icons/grey-toEnd.png);}
#toggle-bildinfo.disabled, #toggle-bildinfo.disabled:hover {cursor:default; background-image:url(../images/icons/grey-info.png);}





#slidenumber {width:40px !important; line-height: 24px; height: 24px; margin-right: 6px; text-align:center;}


#footer {clear: both; height: 33px; width: 100%; margin-top: 3px;}
#footer ul {float:right;padding:5px; border-left:1px solid #fff;}
#info {cursor:pointer;}



/*###################################### info ######################################*/

#mediainfo-container {clear:both;	width: 778px; height: 104px; padding: 0 10px 0 10px; overflow: auto; border-style: solid; border-width:1px;}
#mediainfo-container .textColumn {height: 98px; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;  overflow:auto;}
#mediainfo-container .aufgabetextColumn {width: 100%; padding: 4px 0 0 0; height: 98px; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;  }


/*###################################### impressum ######################################*/

#infoContainer {
    position: absolute; top: 58px; width: 798px; height:652px; 
    border-top-width: 1px; 
    border-top-style: solid; 
    display:block;
    border-width: 1px 1px 0 1px;
    border-style:solid;
    background: #fff; 
    visibility: hidden; 
    margin-top:3px;
    z-index:20;
}
noscript #infoContainer {
    visibility:visible;
}
.noscript-err {
    color:#F00;
    font-weight: bold;
}
#infoContainer h1 {display:block; height: 25px; width: 798px; }
#infoContainer h1 .div1 {float: left; color: #000; height: 21px; width: 755px; padding: 4px 0 0 20px;}
#infoContainer h1 .div2 {float: right; text-align: right; height: 23px; width: 23px; padding: 0;}
#infoContainer h1 a {display: block; height: 23px; width: 23px;  text-align: right;
background-image:url(../images/layout/btn-close.png); backround-repeat: no-repeat; cursor:pointer; }
#infoContainer h1 a:hover {background:url(../images/layout/btn-close-hover.png);}

#infoContent p,
#infoContent h1,
#infoContent h2,
#infoContent h3,
#infoContent h4 {
font-size: 12px; margin: 2em 0 2em 20px;}

#infoContent {padding-top: 8px; text-align: left; width: 100%;	height: 578px;}
#infoContent .infoContentBox {width: 780px;}
#infoContent .infoContentBoxSmall {float: left; width: 370px;}
#infoContent a {text-decoration:none;}
#infoContent a:hover {}

/* Info-Navigation */
#infoNavigation {width:798px; height:27px; padding: 7px 0 0 0; border-bottom-width: 1px; border-style:solid;}

#infoNavigation li {float: left; height: 22px; line-height: 22px; padding: 0 20px; margin-top: 4px; text-align: center; cursor:pointer;
 border-width: 1px; border-style:solid;  }

#infoNavigation a {display: block;}




/* theme specific stylesheets */
#mediainfo-container, #mainContent, #infoContainer, #titleContainer, #infoContainer, #infoNavigation, #infoNavigation li {
    border-color: #f99d27;
}

#header {
    background-image:url(../images/layout/header.gif);
}

#title, #footer {
    background-color: #f99d27; 
}


/* light color */
#infoNavigation li {
    background-color: #FFFFFF; 
    color: #336699;
}
#infoContainer h1, #infoNavigation li.selected{
	background-color: #FDD8A9;
}
#controls {
    background-color: #FFEDA9; 
}

.template-error {
font-size:13px; 
color:#000;
background-color:#F99;
width:150px;
cursor:default;
padding:5px;
}

.text-control-links a {color: #336699; }
.text-control-links + .text-control-links a {border-left: 1px solid #ffffff;}
.text-control-links.selected a, .text-control-links a:hover, .text-control-links a.active {color: #ffffff;}