@CHARSET "UTF-8";

/**
 * CSS StyleSheet fuer QUADIO
 *
 * @author			Hans-Georg Heidemann, Interweber.de
 * @version			1.1
 * @date			2010-06-22 Received my iPad case from Hardgraft.com
 * @lastmodified	2010-09-18
 * @see				http://www.interweber.de
 * @charset			UTF-8
 *
 */



/* Generic */
.clear {clear:both;height:0;width:0;}
.clearleft {clear:left;}
.clearright {clear:right;}
.right {float:right;}
.left {float:left;}



/* Images */
#authMessage {background-image:url('../img/loginmessage-back.png');background-repeat:repeat-x;}
#backend {background-image:url('../img/bg-backendwindow.png');background-repeat:no-repeat;}
#introwindow {background-image:url('../img/bg-bigwindow.png');background-repeat:no-repeat;}
#introwindow .dbitem {background-image:url('../img/bg-dbitem-small.png');background-repeat:no-repeat;}
#loginwindow {background-image:url('../img/bg-loginwindow.png');background-repeat:no-repeat;}
#loginwindow label {text-align:right;}
 #progress-bar {
    background: url(../img/progressbar-2.png) no-repeat left center;
 }

 #progress-level {
    background: url(../img/progressbar-1.png) no-repeat left center;
 }



a.button span {background: transparent url('../img/button.png') no-repeat 0 0;}
a.smallbutton {background: transparent url('../img/button-small-end.png') no-repeat top right;}
a.smallbutton:hover {background-position: right -30px;}
a.smallbutton span {background: transparent url('../img/button-small.png') no-repeat 0 0;}
a.smallbutton:hover span {background-position: 0 -30px;}



/* Font */
#authMessage {font: 14px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-align:center;}
#flashMessage {font: 18px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#footer {text-align:center;}
#introwindow h2 {font: 18px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#loginwindow h2 {font: 18px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#loginwindow legend {font: 18px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#loginwindow label {font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#loginwindow p {font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#profile  a.smalllink {font:  11px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;}
#progress-level {
    font: 11px 'Trebuchet MS', Helvetica, Arial, sans-serif;
    text-align:center;
 }
#progress-togo {
    font: 11px 'Trebuchet MS', Helvetica, Arial, sans-serif;
    text-align:center
 }
#selectheader h1 {font: 20px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#selectheader .smalltext {line-height:2em;}
#selectcontent h3 {font: 14px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#selectcontent p {font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#welcomecontent h2 {font: 18px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#welcomecontent legend {font: 18px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#welcomecontent h3 {font: 14px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
#welcomecontent p, #welcomecontent label {font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
.bignumber {font: bold 60px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
a.button {font:bold 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;text-transform:uppercase;}
a.button:hover {font:bold 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;text-transform:uppercase;}
.correctanswer {font:bold 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
.dashboarditem li {font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;line-height:18px;}
.dashboarditem li  a {font:bold 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;line-height:18px;}
.dbitem a {font:bold 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;line-height:18px;}
.dialog a {font: 14px 'Trebuchet MS', Helvetica, Arial, sans-serif;line-height:20px;text-decoration:none;}
.dialogfalse a {font: 14px 'Trebuchet MS', Helvetica, Arial, sans-serif;line-height:20px;text-decoration:none;}
.falseanswer {font:bold 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
a.logoutlink {font: 9px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;text-transform:uppercase;}
.login legend {font:bold 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
.login label {font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
.middle {text-align:center;}
a.profilelink {font: 11px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:underline;}
.question {font:bold 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
a.resetpw {font: bold 11px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;}
.skill {text-align:center;}
.smalltext {font: 11px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
.trainings {text-align:center;}
.userstatistics {
    font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif;
}
.versioninfo {font: 9px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
.categoryitem h4, .categoryitem h4 a {font: bold 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;}
a.smallbutton {font:bold 10px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;text-transform:uppercase;}
a.smallbutton:hover {font:bold 10px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;text-transform:uppercase;}


/* Format */
body, html {height:100%;width:100%}
body > #wrap {height:auto; min-height:100%;}
#antworten {width:646px;height:544px;padding:40px 20px 0 15px;float:left;}
.inputfield {border:none;width:206px;height:21px;padding:3px 5px;}
#content {overflow:hidden;padding-bottom:100px;}
#flashMessage {float:right;margin-top:20px;margin-right:15px;width:500px;border:1px solid #982a50;padding:5px;}
#authMessage {margin-top:5px;padding:4px 10px;float:left;width:280px;height:33px;}
#footer {margin-top:-100px;height:100px;clear:both;}
#header {height:120px;}
#header img {margin:20px auto 0 130px;}
#gameheader {height:45px;padding-right:30px;width:936px;}
#gameheadersmall {height:45px;padding-right:20px;}
#introwindow {width:966px;height:774px;margin:0 auto;}
#introwindow .dbitem {width:179px;height:74px;float:left;margin:0 10px 10px 0;padding:10px;display:block;}
#introwindow h2 {margin-bottom:20px;}
#loginheader {height:100px;display:block;width:1024px;}
#loginwindow {width:450px;height:210px;padding:30px 100px 0 100px;margin:0 auto;}
#loginwindow legend {padding-bottom:20px;}
#loginwindow label {display:block;width:100px;float:left;margin-right:20px;padding-top:5px;}
#page {width:100%;height:100%;}
#profile {width:210px;height:35px;margin-left:20px;float:right;}
#profilename {width:180px;height:15px;overflow:hidden;white-space:nowrap}
 #progress {
    padding: 35px 0 0 15px;
 }

 #progress-bar {
    width: 218px;
    height: 27px;
 }

 #progress-level {
    height: 19px;
    padding-top: 8px;
 }

 #progress-togo {
    margin-top:-27px;
    height:19px;
    padding-top:8px;
 }
#selectheader {height:140px;padding-top:40px;padding-left:40px;}
#selectheader img {margin-right:10px;}
#selectitems {padding-top:40px;padding-left:40px;}
#selectcontent {padding:40px;}
#selectcontent h3 {margin-bottom:15px;}
#wrap {min-height: 100%;}
div.actions {width:200px;}
a.button {display:block;height:34px;margin:20px 25px 0 0;padding-right:25px;}
a.button span {display:block;line-height:27px;padding: 2px 0 5px 20px;margin-right:-5px;}
#categories {
    border:1px solid #CCC;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-box-shadow: 0 0 5px #fff;
    -moz-box-shadow: 0 0 5px #fff;
    -khtml-box-shadow: 0 0 5px #fff;
    box-shadow: 0 0 5px #fff;
    height:122px;
    overflow:hidden;
    padding:10px;
    width:462px;
}

.categoryitem {
	width:240px;
	height:130px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-box-shadow: 0 0 5px #333;
    -moz-box-shadow: 0 0 5px #333;
    -khtml-box-shadow: 0 0 5px #333;
    box-shadow: 0 0 5px #333;
    margin:0 15px 15px 0px;
    float:left;
    border:1px solid #ccc;
    padding:10px;
}

.correctsegment {margin-bottom:20px;}
.questionsegment {
padding:10px;
margin-bottom:20px;    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
}
.questionsegment img {float:left;margin-right:20px;}
.answerbox {float:left; display:block;min-width:150px;height:80px;margin-right:20px;margin-bottom:20px;padding:10px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;

}
.answerbox img {float:left; margin-right:20px;}
a.smallbutton {display:block;height:25px;margin-right:10px;margin-top:10px;padding-right:20px;}
a.smallbutton span {display:block;line-height:18px;padding:3px 0 5px 11px;margin-right:-11px;}



.dashboarditem {width:410px;padding:10px 20px;float:left;}
.dashboarditem.first {border-right:3px dotted #ccc;}
.dashboarditem ol {list-style:decimal;margin-left:20px;}
.dbitem {width:179px;height:74px;float:left;margin:0 10px 10px 0;padding:10px;display:block;cursor:pointer;}
.input {clear:left;float:left;}
.logout {float:right;width:93px;height:17px;text-align:center;padding-top:2px;margin-right:5px;}
.results {width:460px;height:100px;margin-right:10px;margin-bottom:10px;}
.skill {width:180px;height:100px;}
.trainings {width:160px;height:100px;float:left;}
.userprofile {padding-left:25px;width:180px;float:left;}
.middle {width:80px;height:100px;float:left;}
.quadiologo {margin:10px;}

.userstats {
	background-color: #fff;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    padding:0px 5px;
}

.userstatistics {
    border:1px solid #CCC;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -webkit-box-shadow: 0 0 5px #fff;
    -moz-box-shadow: 0 0 5px #fff;
    -khtml-box-shadow: 0 0 5px #fff;
    box-shadow: 0 0 5px #fff;
    height:100px;
    margin-top:20px;
    padding:10px;
    width:462px;
}

button {
	position: relative;
	border: 0;
	padding: 0;
	cursor: pointer;
	overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
	border: none;  /* overrides extra padding in Firefox */
}

button span {
	position: relative;
	display: block;
	white-space: nowrap;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* Safari and Google Chrome only - fix margins */
	button span {
		margin-top: -1px;
	}
}


/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
button.submitBtn {
	padding-right: 18px;
	font:bold 16px 'Trebuchet MS', Helvetica, Arial, sans-serif;text-decoration:none;text-transform:uppercase;text-align:center;
	background:  url(../img/button-end.png) no-repeat top right;
}

button.submitBtn span {
	padding: 6px 0 0 22px;
	height:27px;
	background:  url(../img/button.png) no-repeat left top;
	color:#fff;
}

button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
	background-position: right -39px;
}

button.submitBtn:hover span, button.submitBtnHover span {
	background-position: 0 -39px;
}


/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}


.loginstart, .loginsecond {
    border-left: solid 3px rgba(255, 255, 255, 0.36);
    border-top: solid 2px rgba(255, 255, 255, 0.40);
    padding: 35px 55px 35px 55px !important;
    border-radius: 20px 20px 20px 20px;
    z-index: 100;
}
.login >  button {

}

.loginbutton:hover {
    border: solid 1px #ba9338 !important;
    background: #E1D8A9!important;
    background: -webkit-gradient(linear, left top, left bottom, from(#E1D8A9), to(#CDB74A))!important;
    background: -moz-linear-gradient(top,  #E1D8A9,  #CDB74A)!important;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E1D8A9', endColorstr='#CDB74A')!important;
}


.loginbutton {
    margin-top: 15px;
    margin-bottom: 15px;
    color: #FFFFFF !important;
    border: solid 1px #147196 !important;
    background: #91BECD !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#91BECD), to(#1581A7)) !important;
    background: -moz-linear-gradient(top,  #91becd,  #1581a7) !important;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#91becd', endColorstr='#1581a7')!important;
    border-radius: 10px 10px 10px 10px !important;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 25px;
}

.loginbutton > span {
    text-transform: uppercase;
}

.loginwarning {
    background-color: transparent !important;
}

.loginalert {
    position:absolute;
    top: 0;
    right: 55px;
}

.formleft > h5 {
    float: left;
}
.formleft > div {
    float: left !important;
}

.benlog > div >label {
    display: block;
    width: 100px;
    float: left;
    margin-right: 20px;
    padding-top: 5px;
}

.benlog > div >input {
    border: none;
    width: 206px;
    height: 25px;
    padding: 3px 5px;
    margin-top: 5px;
}

.benlog > div {
    width: 100%;
}

.onboardinglog > div >label {
    display: block;
    width: 100%;
    float: left;
    margin-right: 20px;
    padding-top: 5px;
}

.onboardinglog > div >input {
    border: none;
    width: 206px;
    height: 25px;
    padding: 3px 5px;
    margin-top: 5px;
}

.onboardinglog > div {
    width: 100%;
}

.shabottom {
    background: rgba(0, 0, 0, 0.83);
    border-radius: 15px 15px 15px 15px;
    height: 10px;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px);
    z-index: 10;
    margin-top: -4px;
}

.logindiv2 {
    margin-top: 40px ;
    display: none;
}

.logina {
    font: bold 11px 'Trebuchet MS', Helvetica, Arial, sans-serif;
    text-decoration: none !important;
    color: #01759c !important;
    cursor: pointer;
}

.logina:hover {
    color: #f0c240 !important;
}

.kennwortbutton {
    margin-top: -10px;
}

.userabmelden > div > div >div {
    background: #01759c;
    border-radius: 10px 10px 0px 0px;
    margin-top: 1px;
}

.lpwk {
    width: 100% !important;
}



#introwindow_new{
	margin-top: 10px;
	box-shadow: -2px -2px 6px #888888;
	border-radius: 15px;
	border: solid 1px #4f4f4f;
	margin-bottom: 40px;
	max-height: 650px;
	overflow: scroll;
}