@font-face{
    font-family:'Annie';
    src:url('../fonts/Annie/annie-use-your-telescope-v6-latin-regular.eot');
    src:url('../fonts/Annie/annie-use-your-telescope-v6-latin-regular.eot?#iefix') format('embedded-opentype'),
            url('../fonts/Annie/annie-use-your-telescope-v6-latin-regular.woff') format('woff'),
            url('../fonts/Annie/annie-use-your-telescope-v6-latin-regular.ttf') format('truetype'),
            url('../fonts/Annie/annie-use-your-telescope-v6-latin-regular.svg#annie-use-your-telescope-v6-latin-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
    
@font-face {
    font-family:'learn2fly';
    src:url('../fonts/learn2fly/icomoon.eot');
    src:url('../fonts/learn2fly/icomoon.eot?#iefix') format('embedded-opentype'),
            url('../fonts/learn2fly/icomoon.woff') format('woff'),
            url('../fonts/learn2fly/icomoon.ttf') format('truetype'),
            url('../fonts/learn2fly/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}




/* ==========================================================================
   General Styles
   ========================================================================== */

html, body{
    height:100%;
}

body{
    color: #4d4d4d;
    font: 93.75% 'rooney-sans',Arial,Helvetica;
    font-weight: normal; 
    font-style: normal;
    overflow-y: scroll;
    overflow-x: hidden;
}

strong{
    font-weight:700; 
}

h1{
    font-size:1.8em;
    font-weight:normal;
}

h2{ 
    font-size:1.3em;
    font-weight:normal;
}

a:link,
a:visited,
a:focus{
    color:#4d4d4d;/*same as body*/
    text-decoration:none;
}

img,
video{
    max-height:100%;
    max-width:100%;
}

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

#wrapper{
    max-width:960px;
    padding:0 4%;
    height:100%;
    margin:50px auto 10px;
    position:relative;
/*    max-height:500px;
    border-bottom:1px dashed #000;*/
}

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

#content,
#header,
#footer{
   min-width:640px; 
}

/* ==========================================================================
   Global Styles
   ========================================================================== */

.visible{
    display:block!important;
}

.invisible{
    display:none!important;
}

.last{
    margin-right:0!important;
}

/*inactive Elements*/
.inactive{
    opacity:0.2;
    filter:alpha(opacity=20); /* For IE8 and earlier */
    cursor:default!important;
    pointer-events: none;
}

.inactive:hover{
    opacity:0.2;
}

.borderRadius{/*Sets Radius to Elements*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.block{
    display:block;
}

.pageIcon{ /*square Icon for Chapter-Numbers and Symbols*/
    width:50px;
    height:50px;
    background-color:#999c9f;
    position:relative;
    font-weight:800;
    font-size:37px;
    color:#fff;
    text-align:center;
    line-height:50px;
    float:left;
}

.blueFontColor{
    color:#92cae4;
}

.blueBackgroundColor{
    background-color:#92cae4;
}

.borderBox{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/*Header*/
#header{
   height:70px;
   width:100%;
   border-bottom:1px solid #b3b3b3;
   top:0;
   position:fixed;
   background: #f5f5f6 url('layoutdata/noise_bg_100_100.png') repeat;/*same as Body*/
   z-index:999;
   overflow:hidden;
}

#headerWrapper{
    padding:10px;
}

#header #pageHeadline{
    float:left;
    margin: 5px 0 0 20px;
}

#header #pageProgress{
    position:relative;
    float:right;
}

#header #progressCircle{
    height:50px;
    width:50px;
    position:relative;
    overflow:hidden;
    float:right;
}

#header #progressCircle #inner,
#header #progressCircle:before{/*Header Progress*/
    font-size:50px;
    cursor:default;
}

#header #pageProgress #remainingExamTime{
    width:100px;
    float:left;
    line-height:50px;
}

#header #admin:before{
    content: "\e901";
}

/*Footer*/
#footer{
   height:70px;
   bottom:0;
   left:0;
   right:0;
   position:fixed;
   z-index:999;
   background: #f5f5f6 url('layoutdata/noise_bg_100_100.png') repeat;/*same as Body*/
}

#footerWrapper{
    border-top: 1px solid #b3b3b3;
    padding-left: 140px;   /* LC width */
    padding-right: 140px;  /* RC width */
}


#footer #areaRight{
    float:right;
    height:100%;
    width:140px;
    margin-right: -140px;
}

#footer #areaLeft{
    float:left;
    height:100%;
    width:140px;
    margin-left: -140px;
}

#areaLeft .bigButton{
   -webkit-box-shadow: inset -1px 1px 0px #fff;
   box-shadow: inset -1px 1px 0px #fff;
   border-right: 1px solid #b3b3b3;
   border-left:0;
}


#footer #areaMiddle{
    float:left;
    height:100%;
    width:100%;
    min-width:360px; /*width of page control*/
    position:relative;
}

#footer #areaMiddle #controlArea{
    margin:0 auto;
    height:100%;
    width:360px;
}

#footer #areaMiddle #mediaControl{
    width:180px;
    float:left;
}

#footer #areaMiddle #progressBar{
    position:absolute;
    top:-1px;
    left:-1px;
    height:4px;
    background-color:#92cae4;
    width:0;
}

#footer #areaMiddle .controlElement{ /*visible even if there is no arrow*/
    float:left;
    width:70px;
    margin:0 10px;
    height:70px;
    text-align:center;
}

#footer #areaMiddle #mediaControl .controlElement{
    margin:0 auto;
    float:none;
}

#footer #areaMiddle a ,
#footer #areaMiddle button { 
    width:100%;
    height:100%;
    display:block;
}

#footer #areaMiddle a.controlElement:hover:before,
#footer #areaMiddle button.controlElement:hover:before{
    /*color:#d2d2d2;*/
    opacity:0.7;
}

#footer #areaMiddle .controlElement:before{
    color:#bfbfbf;
    font-size:40px;
    font-family: 'learn2fly';
    line-height:70px;
}

#footer #areaMiddle .controlElement.colorBlue:before{
    color:#92cae4;
}

#footer #areaMiddle #btnPageBack:before{
    content: "\e607";
    font-size:45px;
}

#footer #areaMiddle #btnPageForward:before{
    content: "\e600";
    font-size:45px;
}

#footer #btnPlayResume{
    cursor:default;
}

#footer #btnPlayResume.play,
#footer #btnPlayResume.resume{
    cursor:pointer!important;
}


#footer .play:before{
   content: "\e601";
   font-size:35px;
 
}

#footer .resume:before{
   content: "\e602";
   font-size:35px;
   
}

#footer .spinner{
   background: url('layoutdata/spinner_50x50.gif') center center no-repeat;
}



#footer #home:before{
   content: "\e605";
   font-size:35px;
}

#footer #menu:before{
   content: "\e604";
   font-size:30px;
}

#footer #ask:before{
   content: "\e608";
   font-size:38px;
}

#footer #logout:before{
   content: "\e60c";
}

#footer #volume:before{
   content: "\e60a";
}

#footer #volume.active:before{
   content: "\e60a";
}

#footer #user:before{
    content: "\e606";
}

#footer .dialog{
   width:auto;
   height:auto;
   position:absolute;
   z-index:999;
   bottom:80px;
   left:80px;
   background-color:#989C9F;
   -webkit-box-shadow:  5px 5px 10px 0px #cccccc;
   box-shadow:  5px 5px 10px 0px #cccccc;
   color:#ededed;
   display:block;
   visibility:hidden;
   transition:opacity 0.2s ease;
   opacity:0;
}

#footer .dialog.dialogShow{
    visibility:visible!important;
    opacity:1;
}

#footer .dialog.dialogHide{
    visibility:hidden!important;
    opacity:0;
}

#footer .dialog .dialogGraphic{
   width:19px;
   height:16px;
   bottom:-16px;
   left:38px;
   position:absolute;
   background: url('layoutdata/dialog_grafic_19_16.png') no-repeat center center;
}

#footer #areaRight .dialog .dialogGraphic{ /*for right-standing-dialogs*/
   right:20px;
   left:auto;
}

#footer .dialog .dialogContentArea,
#footer .dialog .dialogContentHeadline{
    padding:10px;
}

#footer .dialog .dialogContentArea{
   border-top: 1px solid #bfbfbf;
}

#footer .dialog .dialogContentHeadline{
    border-bottom: 1px solid #6b6b6b;
    font-size:1.3em;
}

/*Chapter Overview*/
#footer #menuWrapper #unitOverview .unit .unitTitle{
    line-height:30px;
    color:#fff;
    margin-bottom:5px;
    padding:0 8px;
}

#footer #menuWrapper #unitOverview .unit .unitTitle span{
    font-weight:700;
    width:32px;
    display:block;
    float:left;
}

#footer #menuWrapper .dialog{
    min-width:200px;
}

#footer #menuWrapper .dialogContentArea a{
    display:block;
}

#footer #menuWrapper #unitOverview a.unitTitle:hover{
    background-color:#BFBFBF;
}

#footer #questionWrapper .dialog{
    width:auto;
    height:350px;
    position:absolute;
    right:70px;
    left:auto;
}

#footer #questionWrapper .dialogContentArea{
    width:400px;
    position:relative;
}

#footer #questionWrapper #inputWindow #userQuestionField textarea{
    width:96%;
    height:200px;
    margin-bottom:12px;
    resize:none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding:2%;
    font-family: 'rooney-sans';
}

#footer #questionWrapper #inputWindow #sendSupportQuestion p{
    text-align:right;
}

#footer #questionWrapper #inputWindow #sendSupportQuestion button{
    width:100px;
    height:35px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color:#92CAE4;
    color:#fff;
    font-family: 'rooney-sans';
}

#footer #questionWrapper #thxWindow{
    display:none;
    position:absolute;
    left:0;
    top:10px;
    padding:10px;
    width:100%;
    box-sizing:border-box;
}


/*specific dialogs*/
#footer #volumeWrapper .dialog{
    width:auto;
    height:300px;
    position:absolute;
    right:10px;
    left:auto;
}

#footer #volumeWrapper #volume_slider{
    background-color:#fff;
    border-radius:12px;
    height:200px;
    width:12px;
    margin:0 auto;
    position:relative;
    border-top:12px solid #fff;
    margin-top:8px;  
}

#footer #volumeWrapper #volume_slider .ui-slider-handle{
    width:12px;
    height:12px;
    border-radius:100%;
    background-color:#92cae4;
    position:absolute;
    z-index:2;
}

#footer #userDialogWrapper .dialogContentArea{
    margin-bottom:50px;
}

#footer #userDialogWrapper .dialogContentArea li{
    line-height:25px;
}

#footer #userDialogWrapper .dialogContentArea li span{
    font-weight:700;
}

/*Big Buttons (Controll)*/
.bigButton{
   width:69px; /*Border 1px*/
   height:70px;
   padding:0;
   float:left;
   text-align:center;
   -webkit-box-shadow: inset 1px 1px 0px #fff;
   box-shadow: inset 1px 1px 0px #fff;
   border-left: 1px solid #b3b3b3; 
   position:relative;
   cursor:pointer;
}

.bigButton:before{
    color:#bfbfbf;
    font-size:32px;
    font-family: 'learn2fly';
    line-height:70px;
}

.bigButton:hover:before{
    /*color:#d2d2d2;*/
    opacity:0.7;
}

/*Progress Arcs*/
#progressCircle:before{
    color:#fff;
    content: "\61"; /*full arc*/
    float:left;
    font-family: 'learn2fly';
    position:relative;
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#progressCircle #inner{ /*Background Circle*/
    color:#92CAE4;
    float:left;
    font-family: 'learn2fly';
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position:absolute;
    top:0;
    left:0;
}

#progressCircle .arc0:before{
    content: "\61";
    color:#fff;
}

#progressCircle .arc1:before{
    content: "\62";
}

#progressCircle .arc2:before{
    content: "\63";
}

#progressCircle .arc3:before{
    content: "\64";
}

#progressCircle .arc4:before{
    content: "\65";
}

#progressCircle .arc5:before{
    content: "\66";
}

#progressCircle .arc6:before{
    content: "\67";
}

#progressCircle .arc7:before{
    content: "\68";
}

#progressCircle .arc8:before{
    content: "\69";
}

#progressCircle .arc9:before{
    content: "\6a";
}

#progressCircle .arc10:before{
    content: "\6b";
}

#progressCircle .arc11:before{
    content: "\6c";
}

#progressCircle .arc12:before{
    content: "\6d";
}

#progressCircle .arc13:before{
    content: "\6e";
}

#progressCircle .arc14:before{
    content: "\6f";
}

#progressCircle .arc15:before{
    content: "\70";
}

#progressCircle .arc16:before{
    content: "\71";
}


/* ==========================================================================
   Login-Page + Admin-Page
   ========================================================================== */



.login .btn,
.admin .btn{
    background-color:#999C9F;
    color:#fff;
    text-align:center;
}

.login .left{
    margin-top:60px;
    width:45%;
    float:left;
}

.login .right{
    width:45%;/*due to border*/
    margin-left:10%;
    text-align:center;
    min-height:300px;
    float:left;
}

.login form{
    width:90%;
}

.login .pageIcon,
.admin .pageIcon{
    background-color:#999c9f;
}

.login .pageIcon:before,
.admin .pageIcon:before{
    color:#fff;
    font-family: 'learn2fly';
    content: "\e606";
    font-size:30px;
}

.login #error,
.admin #error{
    margin-bottom:20px;
    color:#c90000;
}

.login label,
.admin label{
    display:block;
    margin-bottom:5px;
}

.login input,
.admin input,
.login .btn,
.admin .btn,
.login textarea,
.admin textarea{
    width:100%;
    line-height:35px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display:block;
}

.login input,
.admin input,
.login textarea,
.admin textarea{
    margin-bottom:20px;
    font-family:'rooney-sans';
    color:#4d4d4d;
    padding:0 2%;
    height:35px;
    box-sizing:border-box;
}

.admin select{
   margin-bottom:20px; 
}

.admin form{
    width:400px;
}

.login #footer{
    display:none;
}

.admin .pageIcon:before{
    content: "\e901";
    font-size:30px;
}

.admin table{
    width:100%;
    margin:30px 0;
}

.admin tr:first-child{
    font-weight:700;
}

.admin td{
    padding:5px;
}

.admin td .userStatus{
    width:10px;
    height:10px;
    border-radius:100%;
    background-color: #92cae4;
}

.admin td .userStatus.passed{
    background-color: #B2C210   
}

.admin td .userStatus.failed{
    background-color: #EC4D14;   
}

.admin tr:nth-child(even){
    background-color:#bfbfbf;
}

.admin #wrapper{
    max-width:95%;
}

.admin #backendNav{
    margin-bottom:30px;
}

.admin #backendNav .btn{
    background-color:#92cae4;
    width:300px;
    margin-right:10px;
    float:left;
}

.admin #backendNav .btn:hover{
    background-color:#999C9F;
}

/* ==========================================================================
   Content-Site
   ========================================================================== */

#content{
    padding:70px 0;
    position:relative;
}


#background{ /*Background-Div*/
    background: #f5f5f6 url('layoutdata/noise_bg_100_100.png') repeat;
    position:fixed;
    width:100%;
    height:100%;
}

/* ==========================================================================
   Home-Page
   ========================================================================== */

.home #wrapper{
    height:100%;
    max-width:100%;
    margin:0;
    padding:0;
    position:relative;
}

.home #headerWrapper .pageIcon:before{
    content: "\e605";
    color:#fff;
    font-family: 'learn2fly';
    font-size:35px;
}

.home #headerWrapper .pageIcon{
    background-color:#999c9f;
}

.home #headerWrapper #pageProgress{ /*Logout @home*/
    position:absolute;
    top:0;
    right:0;
}

.home #headerWrapper #username{
    float:left;
    margin-right:20px;
    font-size:0.727em;
    margin-top:5px;
}


/*Workaround for unwanted Border*/
.home a:visited {
    color:#fff;
    
}

.home a:visited .chapterTitle {
    color:#4D4D4D;
    
}

.home .chapterOverview{ /*Wrapper for Chapter*/
   border-bottom:2px solid;
   border-color:#fff!important;
   padding:30px 4%;
}

.home .chapterOverview .pageIcon{
   float:left;
   margin-right:30px;
   height:70px;
   line-height:70px;
   width:70px;
   font-size:3.214em;
}

.home .chapterOverview .pageIcon.inactive {
    background-color:#BFBFBF!important; 
}

.home .chapterOverview .chapterThumbnail{
   float:left;
   width:127px;
   height:71px;
   position:relative;
   background-color:transparent;
   margin-right:40px;
   -webkit-box-shadow:  5px 5px 10px 0px #cccccc;
   box-shadow:  5px 5px 10px 0px #cccccc;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;

}

.home .chapterOverview .chapterThumbnail img{
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
} 

.home .chapterOverview .chapterTitle h1{
   margin-bottom:4px;
}

.home .chapterOverview .progress{
   width:30px;
   height:30px;
   right:-15px;
   top:-15px;
   position:absolute;
}


.home .chapterOverview .progress #progressCircle #inner,
.home .chapterOverview .progress #progressCircle:before{
    width:30px;
    height:30px;
    font-size:30px;
}


.home #footer #areaRight{
    width:70px;
}

.home #footer #areaMiddle{
    display:none;
}

.home #footer #questionWrapper .dialog{
    right:20px;
}

/* ==========================================================================
   Error
   ========================================================================== */

.errorPage #header{
    display:none;
}

@media screen and (max-width: 1024px) {
    
    body{
        font-size:81.25%;
    }
    
    #wrapper{
        margin-top:30px;
    }

}

@media screen and (max-width: 768px) {
    
    h1{
        font-size:1.3em;
    }

}