h1, h2, h3, h4, h5, h6, p, ul, li, table, tr, td, div {
  margin: 0px;
  padding: 0px;
}

a:focus, a:active {
  outline: none;
}

/* general tags */

body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #333333;
    background: url(../image/main_bg.jpg) repeat-x transparent;
}

img {
    border: none;
}

#ajax_loader {
    position: absolute;
    text-align: center;
    top: 150px;
    width: 100%;
    height: 14px;   
}

/* ids */

#container {
    position: relative;
}

#content {
    position: relative;
    overflow: hidden;
    height: 768px;
    opacity: 0;
}

#border {
    position: absolute;
    left: 200px;   
    top: 72px;
}

#page_shadow_left {
    background: url(../image/page_shadow_left.png) repeat-y transparent;  
    position: absolute;
    z-index: 5;
    width: 127px;
    height: 100%;
    top: 52px;
    left: 0;
}

#page_shadow_right {
    background: url(../image/page_shadow_right.png) repeat-y transparent;  
    position: absolute;
    z-index: 5;
    width: 127px;
    height: 100%;
    top: 52px;
    right: 0;
}

#pageSlider {
    width: 100000px;
    position: absolute;
    left: 0px;
}

#button_home {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 70px;
    height: 50px;   
    background: url(../image/button_home.png) no-repeat transparent;
    cursor: pointer;
}

#button_home a {
    padding: 35px 25px;
}

#button_home:hover {
    background: url(../image/button_home_hover.png) no-repeat transparent;         
}

#button_pages {
    position: absolute;
    top: 0px;
    right: 95px;
    width: 64px;
    height: 50px;   
    background: url(../image/button_pages.png) no-repeat transparent;
    cursor: pointer;
}

#button_toc {
    position: absolute;
    top: 5px;
    right: 35px;
    width: 40px;
    height: 36px;   
    background: url(../image/button_content.png) no-repeat transparent;
    cursor: pointer;
}

#button_toc:hover {
    background: url(../image/button_content_hover.png) no-repeat transparent;         
}

#button_additional_material {
    position: absolute;
    top: 5px;
	right: 160px;
	width: 85px;
    height: 37px;   
    background: url(../image/button_additional_material.png) no-repeat transparent;
    cursor: pointer;
    padding-left: 40px;
    padding-top: 10px;
    text-shadow: 0 1px 0 #747474;
    font-size: 18px;
    color: #aaa;
}

#button_additional_material:hover {
    background: url(../image/button_additional_material_hover.png) no-repeat transparent;
    text-shadow: 0 1px 0 #555;
    color: #99b2c4;
}

#slider_letter_small {
    position: absolute;
    top: 2px;
    left: -15px;
    height: 9px;
    width: 9px;
    background: url(../image/slider_fontsize_letter_small.png) no-repeat transparent;
}

#slider_fontsize {
    position: absolute;
    top: 18px;
    right: 200px;  
    cursor: pointer;
    display: none; 
    background: url(../image/slider_fontsize_rail.png) no-repeat transparent;
    background-position:0px 3px;
    width: 120px;
    height: 16px; 
    z-index: 3000;
}

#slider_letter_large {
    position: absolute;
    top: -3px;
    right: -20px;
    height: 18px;
    width: 17px;
    background: url(../image/slider_fontsize_letter_large.png) no-repeat transparent;
}

#slider_navigation {
    position: absolute;
	top: 107px;
	right: 58px;
    cursor: pointer;
    background: url(../image/slider_navigation_rail.png) repeat-y transparent;
    background-position:14px 0px;
    width: 25px;
    height: 200px; 
    z-index: 3000;
}

#slider_navigation .yui3-slider-rail {
    background-image: none;
    height: 200px;
}
 
#slider_navigation .yui3-slider-thumb {
    height: 27px;
    width: 25px;
    overflow: hidden;
    background: url(../image/slider_navigation_thumb.png) no-repeat transparent;
    background-position: 11px 0px;
}

#slider_navigation .yui3-slider-thumb:hover {
    background: url(../image/slider_navigation_thumb_hover.png) no-repeat transparent;
    background-position: 11px 0px;
}

#print_link {
    display:none;
    position: absolute;
    top: 9px;
    right: 30px;
    background: url(../image/button_print.png) no-repeat transparent;
}

#print_link:hover {
    background: url(../image/button_print_hover.png) no-repeat transparent;
}

#print_iframe_link {
    display:none;
    position: absolute;
    top: 9px;
    right: 30px;
    background: url(../image/button_print.png) no-repeat transparent;
}

#print_iframe_link:hover {
    background: url(../image/button_print_hover.png) no-repeat transparent;
}

/* rail image on the containing box rather than the rail element */
 
#slider_fontsize .yui3-slider-rail {
    background-image: none;
    width: 120px;
    cursor: default;
}
 
#slider_fontsize .yui3-slider-thumb {
    height: 16px;
    width: 15px;
    overflow: hidden;
    background: url(../image/slider_fontsize_thumb.png) no-repeat transparent;
    cursor: pointer;
}

#slider_fontsize .yui3-slider-thumb:hover {
    background: url(../image/slider_fontsize_thumb_hover.png) no-repeat transparent;         
}

.yui3-slider-thumb-image {
	height: 16px;
    width: 15px;
	background: url(../image/slider_fontsize_thumb.png) no-repeat transparent;
	cursor: pointer;
}

.yui3-slider-thumb-image:hover {
    background: url(../image/slider_fontsize_thumb_hover.png) no-repeat transparent;         
}

#button_pages:hover {
    background: url(../image/button_pages_hover.png) no-repeat transparent;  
}

#button_pages.active {
    background: url(../image/button_pages_hover.png) no-repeat transparent;  
}

#content h1#title {
    color: #000000;
    text-shadow:0 1px 0 #747474;
    position: absolute;
    left: 90px;
    top: 12px;
    font-size: 18px;
}

.page {
    float: left;
    position: relative;
}

div.page > img {
    margin: 8px;
    -moz-box-shadow: 2px 5px 6px #202020;
    -webkit-box-shadow: 2px 5px 6px #202020;
    box-shadow: 2px 5px 6px #202020;
}

#content a#prev-page {
    position: absolute;
    z-index: 5;
    width: 52px;
    top: 300px;
    left: 0;
    height: 130px;
	background: url(../image/gallery_button_back_p.png) no-repeat transparent;
	z-index: 6;  
}

#content a#prev-page:hover {
    background: url(../image/gallery_button_back.png) no-repeat transparent;  
}

#content a#next-page {
    position: absolute;
    z-index: 10;
    width: 52px;
    top: 300px;
    right: 0;
    height: 130px;
    background: url(../image/gallery_button_forward_p.png) no-repeat transparent;  
    z-index: 6;  
}

#content a#next-page:hover {
    background: url(../image/gallery_button_forward.png) no-repeat transparent;  
}

#content a span {
    display: none;  
}

/* html content */

.html_content {
    display: none;
}

#lightbox_div {
    color: #000000;
    background-color: #FFFFFF;
    padding:20px;
}

#lightbox_div img {
    max-width: 520px;
    margin-top: 10px;
}

#lightbox_div li
{
    margin-left: 15px;
}

/*
 * Font-Sizes
 * ----------
 * ACHTUNG: Wenn der Schriftgrad ge�ndert wird muss
 * im lmp.js der Faktor f�r die Schriftskalierung angepasst werden
 * (im Slider-Change-Event)
 * ----------
 */
 
#lightbox_div p,  #lightbox_div li {
    font-size: 80%;
    margin-top: 10px;
    margin-bottom: 10px;
}

#lightbox_div h1 {
    font-size: 150%;
    margin-top: 12px;
    margin-bottom: 12px;
    color: #00628b;
}

#lightbox_div h2 {
    font-size: 125%;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #00628b;
}

#lightbox_div h3 {
    margin-top: 20px;
    font-size: 110%;
    color: #00628b;
}

#lightbox_div h4 {
    margin-top: 15px;
    font-size: 95%;
    color: #00628b;
}


/* hotspots */

.hotspotLayer {
    position: absolute; 
    left: 0px;
    top: 0px;       
}

.hotspot {
    position: absolute;
    cursor: pointer;
    -webkit-user-select: none;
}

.hotspot a {
    display: none;
}

#hotspot_description {
	position: absolute;
	width: 150px;
	color: #000;
	opacity: 0.8;
	font-size: 10pt;
	line-height: 12pt;
	border: 1px solid black;
	border-radius: 3px;
	background: rgb(204,228,192);
	padding-left: 2px;
	cursor: default;
	-moz-box-shadow: 2px 4px 5px #505050;
	-webkit-box-shadow: 2px 4px 5px #505050;
	box-shadow: 2px 4px 5px #505050;
}

#hotspot_description_add {
	position: absolute;
	width: 150px;
	color: #000;
	opacity: 0.8;
	font-size: 10pt;
	line-height: 12pt;
	border: 1px solid black;
	border-radius: 3px;
	background: rgb(204,228,192);
	padding-left: 2px;
	cursor: default;
	-moz-box-shadow: 2px 4px 5px #505050;
	-webkit-box-shadow: 2px 4px 5px #505050;
	box-shadow: 2px 4px 5px #505050;
}

#hotspot_description_audio {
	position: absolute;
	width: 85px;
	color: #000;
	opacity: 0.8;
	font-size: 10pt;
	line-height: 12pt;
	border: 1px solid black;
	border-radius: 3px;
	background: rgb(225,207,231);
	padding-left: 2px;
	cursor: default;
	-moz-box-shadow: 2px 4px 5px #505050;
	-webkit-box-shadow: 2px 4px 5px #505050;
	box-shadow: 2px 4px 5px #505050;
}

#hotspot_description_wokrsheets {
	position: relative;
	top: 57px;
	left: 0px;
	width: 85px;
	color: #000;
	opacity: 0.8;
	font-size: 10pt;
	line-height: 12pt;
	border: 1px solid black;
	border-radius: 3px;
	background: rgb(204,228,192);
	padding-left: 2px;
	cursor: default;
	-moz-box-shadow: 2px 4px 5px #505050;
	-webkit-box-shadow: 2px 4px 5px #505050;
	box-shadow: 2px 4px 5px #505050;
}

div.page .audios {
    background: url(../image/icon_lautsprecher.png) no-repeat transparent;
    width: 150px;
    height: 90px;
    z-index: 1000;
}

div.page .exercise {
    background: url(../image/icon_exercises.png) no-repeat transparent;
    width: 150px;
    height: 90px;
    z-index: 1000;
}

div.page .vocabulary {
    background: url(../image/icon_vokabular.png) no-repeat transparent;	
    width: 150px;
    height: 90px;   
    z-index: 1000;
}

div.page .excursion {
    background: url(../image/icon_arbeitsblaetter.png) no-repeat transparent; 
    width: 150px;
    height: 90px;   
    z-index: 1000;
}

div.page .additionalmaterial, div.page .worksheets{
    background: url(../image/icon_additional_material.png) no-repeat transparent; 
    width: 55px;
    height: 55px;   
    z-index: 1000;
}

 div.page .additionalmaterial_inner{
    background: url(../image/icon_additional_material.png) no-repeat transparent; 
    width: 150px;
    height: 90px;   
    z-index: 1000;
}

div.page .arbeitsblaetter {
    background: url(../image/icon_arbeitsblaetter.png) no-repeat transparent; 
    width: 78px;
    height: 78px;   
    z-index: 1000;
}

div.page .text {
	background-color: #ffe24f;
	opacity: 0;
}

div.page .text_mouseout {
    background-color: #ffe24f;
    opacity: 0;
}

div.page .text_mouseover {
    background-color: #ffe24f;
    opacity: 0.2;
}

div.page .quiz {
    background: url(../image/icon_quiz.png) no-repeat transparent;	
	background-position: center;
}

div.page .area {
    background-color: #FFFF00;
}

/* lighbox */

#lightbox_overlay {
    position: absolute;
    top: 50px;
    left: 0px;
    background-color: #000000;
    opacity: 0;
    z-index: 10; 
}

#lightbox {
	margin: auto;
	padding-top: 7px;
    position: absolute;
    top: 40px;
    left: 10px;
    z-index: 1000;
    opacity: 1;
    background: transparent url(../image/lightbox_headshadow.png) repeat-x;
    background-color: #FFF;
}

#lightbox_content {
    width: 0px;
    height: 0px;
    background-color: #FFFFFF;
    z-index: 1001;
    color: #FFF;
    overflow-y: scroll;
}

#lightbox_close {
	position: absolute;
	background: transparent url(../image/lightbox_close2.png) no-repeat;
    width: 90px;
    height: 58px;
	top: 30px;
    left: 0px;
	margin: auto;
    z-index: -1;
    cursor: pointer;
}

#lightbox_container video {
	z-index: -10;
}

#pagingNavigation {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 155px;
    z-index: 11;
    opacity: 0;
}

#pagingNavigation #header {
    background: url(../image/navbar_header.png) no-repeat;
    height: 50px;
    width: 155px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
}

#pagingNavigation #header h2 {
    text-align: center;
    margin: 7px 0 0 0;  
    text-shadow:0 1px 0 #566a7a;
}

#pagingNavigation #footer {
    background: url(../image/navbar_footer.png) no-repeat;
    height: 12px;
    width: 155px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 12;
}

#navSliderContainer {
    position: relative;
    overflow: hidden;
    height: 600px;   
    width: 155px;
    margin-top: 42px;
    margin-bottom: 12px;
    background: url(../image/navbar_bg.png) repeat-y;
}

#navSlider {
    height: 10000px; 
    position: absolute;
    top: 0px;
}

.navEntry {
	height: 150px;
    display: block;
    position: relative;
    margin-left: 29px;
}

.navEntry:hover, .navEntry:active, .navEntry.selected {
    background-color:#444444;
}

.navEntry img {
	position: absolute;
	top: 10px;
    left: 10px;
    border: solid 1px #99a9b4;
    -moz-box-shadow: 0px 3px 6px #333333;
    -webkit-box-shadow: 0px 3px 6px #333333;
    box-shadow: 0px 3px 6px #333333;
}

.navEntry .pageNumber {
	position: absolute;
    text-align: center;
	font-size:11px;
	font-weight: bold;
    text-shadow:0 1px 0 #91a0ac;
	color: #161f26;
	line-height: 15px;
    bottom:10px;
	left:35px;
	width:30px;
	height: 17px;
}

.navEntry.selected .imageOverlay {
    position: absolute;
    width:17px;
    height: 17px;
    top: 97px;
    left: 67px;
    background: url(../image/navbar_pagecorner.png);
}

.navEntry:hover .pageNumber, .navEntry:active .pageNumber, .navEntry.selected .pageNumber {
	color: #FFFFFF;
	background: url(../image/navbar_pagenumber_bg.png);
}

.navEntry img {
    width: 73px;
}

.navEntry p {
    color: #FFFFFF;
    padding: 10px;
}

/* Menu */

#menu {
    position: absolute;
    background-color: none;
    bottom: 0px;
    left: 0;
    width: 100%;    
    height: 36px;
    z-index: 10;
    opacity: 1;
    overflow: hidden;
}

#menu_icon {
	width: 96px;
	height: 35px;
	margin: auto;
	background: url(../image/menu.png) no-repeat transparent;
}

.hidden {
    display: none;  
}

/* Loader */

#loader {
   position: absolute;
   z-index: 2000;
   top: 10px;
   left: 10px;
   display: none;
    
}

/* YUI scpecific */

.yui3-overlay {
    position:absolute;
}
 
.yui3-overlay-hidden {
    visibility:hidden
}

.yui3-widget-stacked .yui3-widget-shim {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    border: none;
    top: 0px;
    left: 0px;
    padding: 0;
    margin: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    /* 
       We'll be setting these programmatically for IE6, 
       to account for cases where height is not set 
    */
    _width: 0;
    _height: 0;
}