@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 the given element.

In Firefox, the selection event apparently is not propagated down the
document tree if an element has -moz-user-select: none.  So in order
for this class to take effect in Firefox, .selection-enabled has to be
applied to each ancestor element as well.

Therfore, the class works in conjunction with
3-firefox-no-selection-fix.js which ascends in the document tree and
applies the class to the ancestor elements.

*/ 

.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: 1px 0 0 0;
}

.html5-video a {text-decoration:underline;}
p.html5-video { width: 300px; }
ul.html5-video {list-style-type: disc;}

/*###################################### 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;
}

#loadscreen {
    position: absolute;
    left:0px; top:0px;
    width: 798px; height:524px;
    border-style:solid;
    border-width:1px;
    display:none;
}
#loadscreen>div {
    text-align:center;
    position:absolute;
    top: 50%;
    left:50%;
    width:100px;
    height:100px;
    margin-top:-50px;
    margin-left:-50px;
}
#startup-activity-indicator, #startup-progress-bar {
    display:none;
}

#startup-progress-bar {
    width: 98px;
    height: 8px;
    border: 1px solid #8CC751;
}
#startup-progress-bar>div {
    background-color: #8CC751;
    height:8px;
}

#loadscreen.aspect-indicator #startup-activity-indicator, 
#loadscreen.aspect-progress-bar #startup-progress-bar {
    display:inline-block;
}
#header {background-repeat:no-repeat; position: relative; height: 38px; margin-bottom: 3px; 
width: 800; overflow:hidden;}

#contentContainer {
    background: #fff;
    width: 798px;
}
#moduleContainer{
    position: relative;
    height:526px;
}

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


#titleContainer {
    width: 798px; 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}

#title{color: #ffffff;}
#title div {font-size: 14px; float:left}
#title div h1 {font-size: 14px; float:left; padding-left:10px; padding-right:33px}
#title div a {float: left; font-size: 12px;	padding-left: 7px; padding-right:7px; line-height:18px;	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, .control-element.check-answer {background-image:url(../images/icons/check.png);} 
#check-answer:hover, .control-element.check-answer:hover {background-image:url(../images/icons/check_hi.png);} 

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

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




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







#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; 
    padding: 4px 10px 4px 10px; 
    border-style: solid; 
    overflow: auto; 
    border-width: 1px 1px 1px 1px;
    min-height: 100px;
}
#mediainfo-container .textColumn, #mediainfo-container .aufgabetextColumn {
    column-count: 2; 
    -moz-column-count: 2; 
    -webkit-column-count: 2;
}
#mediainfo-container .aufgabetextColumn {width: 100%; padding: 4px 0 0 0; }

#mediainfo-container { height: auto;}

#mediainfo-container.impressum-active {
    height: 100px; 
}
#mediainfo-container.impressum-active .textColumn, #mediainfo-container.impressum-active .aufgabetextColumn {
    height: 98px;
}

/*###################################### impressum ######################################*/
/* vs: 11-06-12 geändert width:652px , border-width:1px 1px 0 1px; */
#infoContainer {
    position: absolute; top: 39px; width: 798px; height:658px; 
   // border-top-width: 1px; 
    border-top-style: solid; 
    display:block;
    border-width: 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: #000000; height: 21px; width: 745px; padding: 4px 0 0 20px;}
#infoContainer h1 .div2 {float: right; text-align: right; height: 23px; width: 33px; padding: 0;}
#infoContainer h1 a {display: block; height: 23px; width: 23px;  text-align: right; margin-left:10px;
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, #loadscreen  {
    border-color: #8CC751;
}
#infoNavigation li{
	border-color: #8CC751;
}
#infoContainer,#infoNavigation{
	border-color:#8CC751;
}

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

#footer {
    background-color: #8CC751; 
}
#title{
	background-color: #8CC751;
}


/* light color */
#infoNavigation li, #loadscreen {
    background-color: #FFFFFF; 
    color: #45864E;
}
#infoContainer h1, #infoNavigation li.selected{
	background-color: #CEE7B5;
	color: #45864E;
}
#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: #45864E; }
.text-control-links + .text-control-links a {border-left: 1px solid #ffffff;}
.text-control-links.visible a, .text-control-links a:hover, .text-control-links a.active {color: #FFFFFF;}

#title .text-control-links a {
    cursor: pointer; 
}


#title .text-control-links.selected a {
   cursor:  url(Main/images/cursors/open.cur), url(../images/cursors/open.png) 9 9, n-resize;
}

#title .text-control-links.selected.visible a {
    cursor:  url(Main/images/cursors/close.cur), url(../images/cursors/close.png) 9 9, s-resize;
}


/* Colored tables using list elements or tables */
ul.colored-table li.even, table.colored-table tr.even td, table.colored-table th {
    background-color:#FFEDA9;
}    
ul.colored-table li.odd, table.colored-table tr.odd td {
    background-color:#FFFFFF;
}

ul.colored-table li.selected {
    background-color:#8CC751;
}

ul.colored-table li {
    margin:0px;
    list-style-type:none;
    padding-left:3px;
}

ul.colored-table, table.colored-table {
    border:#8CC751 2px solid;
    padding:0px;
}

table.colored-table {
    border-collapse: collapse;
}
table.colored-table td  {
    border:#8CC751 1px solid;
}

/* Multi-lined form element labels.  In order for this to work, the
input element must immediately precede the label.*/
input.has-multiline-label + label {
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    line-height: 18px;
}

input.has-multiline-label {
    display:inline;
    height:18px;
    margin-top: 0px;
    padding: 0px;
}
.image-list-marker {
    display: inline;
    vertical-align: middle;
    margin-left:5px; /*vs:23.10.12*/
}

.image-list-marker + p{
    display: inline-block;
    vertical-align: middle;
}



.formula {
    font-style: italic;
 }

.paper-grid {
    background-image: url(../images/paper-grid.png);
}

/* HACK: this should be defined with another css class instead of using !important */
.ui-draggable {
    cursor: url(Main/images/cursors/hand.cur), url(../images/cursors/hand.png) 9 9,pointer !important;
}

.ui-draggable.ui-draggable-dragging {
    cursor:  url(Main/images/cursors/hand-grab.cur), url(../images/cursors/hand-grab.png) 9 9, pointer !important;
}