/* CSS Document */

html, body, * {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 15px;
}

body {
  color: #0F527D;
  line-height: 18px;
}

h1 {
	font-family: 'RotisSemiSansW01-ExtraB', Arial, sans-serif;
	font-size: 23px;
	margin-bottom: 15px;
	line-height: 30px;
}

a, img {outline: none; border: 0;}
a {color: #0F527D; font-size: 12px;}

#bmiWrapper {
	width: 695px;
}

#introText {margin-bottom: 15px; line-height: 18px;}

#selectGender {
	background: url(../images/selectHeader.png) no-repeat top center;
	padding: 65px 0 0 0;
}

#selectF {
	background: url(../images/selectF.png) no-repeat;
}

#selectM {
	background: url(../images/selectM.png) no-repeat;
}
	
#selectF a, #selectM a {
	display: block;
	width: 310px;
	height: 447px;
}

#selectF a {
	background: url(../images/woman.png) no-repeat center center;
}

#selectM a {
	background: url(../images/man.png) no-repeat center center;
}

#bmiCalc, #bmiResult, #bmiPerzentile {
	display: none;
}

#resultAnim {
	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	border-radius: 5px;	
	background: url(../images/bmiResultBg.png) no-repeat 320px 50% rgba(255, 255, 255, 0.1);
	padding: 15px;
	margin-bottom: 20px;
}

#disc {
	background: url(../images/bmiDisc.png) no-repeat;
	width: 294px;
	height: 294px;
	text-align: center;	
}

#disc p {
	font-size: 37px;
	font-weight: bold;
	color: #edbe04;
	text-shadow: #fff 0px 1px 1px;
}

#bmiDisc {
	margin-top: 82px;
}

#resultLabel {	
	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	border-radius: 5px;
	padding: 20px 35px;
	background: #8bbcdc;
	margin-top: 66px;
	width: 190px;
}

#resultText {
	margin-top: 10px;
	border-top: 1px solid white;
	font-size: 18px !important;
	line-height: 30px !important;
}

#resultLabel p, #resultLabel span {
	font-family: 'RotisSemiSansW01-ExtraB', Arial, sans-serif;
	font-size: 40px;
	color: #FFF;
	line-height: 40px;
}

.resultDescription, #resultDescriptionInfo {
	-moz-border-radius: 5px 5px 0 0;
  	-webkit-border-radius: 5px 5px 0 0;
  	border-radius: 5px 5px 0 0;
	background: #ffffff;
	padding: 25px 15px;	
}

.resultDescription p {float: left;}
.resultDescription p, .resultDescription span {
	font-size: 14px;
	font-weight: bold;	
	width: 410px;
	line-height: 18px;
}

#resultLongDesc {font-weight: normal !important; margin-top: 5px; font-size: 12px !important;}

.resultDescription #reCalc {
	display: block;
	width: 194px;
	height: 30px;
	float: right;
	background: url(../images/btnReCalc.png) no-repeat; 	
}

.resultDescription #reCalc:hover {
	background-position: 0 -30px;
}

#resultDescriptionInfo {
	margin-top: 20px;	
	background: url(../images/iconInfo.png) no-repeat 15px 15px rgba(255, 255, 255, 0.1);
	padding-left: 145px;
	min-height: 90px;
}

#resultDescriptionInfo p, .source p {color: #FFF;}
 
.testing {
	-moz-border-radius: 0 0 5px 5px;
  	-webkit-border-radius: 0 0 5px 5px;
  	border-radius: 0 0 5px 5px;
	background: rgba(255, 255, 255, 0.5);
	padding: 25px 15px;	
}

.testing a {
	display: block;
	width: 194px;
	height: 30px;
	float: right;
	background: url(../images/btnTest.png) no-repeat; 	
}

.testing a:hover {
	background-position: 0 -30px;
}
 
.roundTop {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.source {
	-moz-border-radius: 0 0 5px 5px;
  	-webkit-border-radius: 0 0 5px 5px;
  	border-radius: 0 0 5px 5px;
	background: rgba(255, 255, 255, 0.15);
	padding: 15px;	
}

#gender {
	width: 160px; 
	height: 310px;
	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	border-radius: 5px;	
	background: rgba(0, 114, 186, 0.1);
	text-align: center;
	margin-top: 4px;
	padding-top: 35px;
}

#bmiUi {
	background: url(../images/calcBg.png) no-repeat 142px 4px; 
	width: 535px;
	height: 385px;
}

#genderF, #genderM {
	display: block;
	width: 99px;
	height: 60px;
	float: left;
	margin-right: 80px;
	background: url(../images/btnF.png) no-repeat 50% -60px; 	
}

#genderM {
	background: url(../images/btnM.png) no-repeat 50% -60px; 	
}

#ageUi, #sizeUi, #weightUi {margin: 20px 0 0 0;}

#calcBtn {
	display: block;
	width: 201px;
	height: 30px;
	background: url(../images/calcBtn.png) no-repeat;	
	margin: 17px 0 0 238px;
}

#calcBtn:hover {
	background-position: 0 -30px;
}

#perzentile {
	background: rgba(255, 255, 255, 0.1);	
	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	border-radius: 5px;	
	height: 314px;
	margin-bottom: 20px;
	position: relative;
}	

#pin {
	background: url(../images/pin.png) no-repeat;
	width: 146px;
	height: 53px;
	position: absolute;
}

#pinArrow {
	background: url(../images/pinArrow.png) no-repeat 75px 32px;
	width: 146px;
	height: 41px;
}

.pinArrowLeft {
	background-position: 23px 32px !important;
}

.diagrammF {
	background: url(../images/diagrammF.png) no-repeat rgba(255, 255, 255, 0.1) !important;
}

.diagrammM {
	background: url(../images/diagrammM.png) no-repeat rgba(255, 255, 255, 0.1) !important;
}

.genderActive {
	background-position: center top !important;
}

.left {float: left;}
.right {float: right;}

.label {
	font-family:'RotisSemiSansW01-ExtraB', Arial, sans-serif;
	font-size: 17px;
	color: #0F527D;
	float: left;
	width: 125px;
	padding-right: 15px;
	text-align: right;
	line-height: 40px;
}

.element {
	margin: 5px 0 0 20px;
	float: left;
	width: 280px;
	overflow: visible;
}

#genderUi .label {line-height: 60px;}
#genderUi .element {width: auto; margin-top: 0; background: none;}

.dialog {
	display: block;
	width: 239px;
	height: 30px;
	background: url(../images/btnANAD.png) no-repeat;	
	margin-top: 10px;
}
.dialog:hover {
	background-position: 0 -30px;
}

/* UI SLIDER */
.ui-slider-horizontal {
	background: url(../images/ui-slider-track.png) no-repeat 0px 14px !important; 

	height: 35px !important;
	border: 0 !important;
}

.ui-slider-range {
	background: #99c0d6 !important;
	height: 2px !important;
	top: 16px !important;
	left: 1px !important;
	-moz-border-radius: 2px;
  	-webkit-border-radius: 2px;
  	border-radius: 2px;	
}

.ui-slider-handle {
	width: 40px !important;
	height: 41px !important;
	margin-left: -20px !important;
	background: url(../images/sliderBtn.png) no-repeat top center !important; 
	border: 0 !important; 
}

.sliderValue {float: left; background: url(../images/sliderValueBg.png) no-repeat; width: 63px; height: 42px; margin-left: 20px; padding: 7px 0 0 0;}
.sliderValue p {color: #9c9c9c; font-family:'RotisSemiSansW01-ExtraB', Arial, sans-serif; font-size: 14px; line-height: 13px; text-align:center; margin-left: 10px; border: 0px solid red;}

.sliderNumber {width: 400px; margin-left: -26px;}
.sliderNumber li {float: left; border: 0px solid red; list-style: none; width: 55px; text-align: center; font-family:'RotisSemiSansW01-ExtraB', Arial; color: #0073b9; }

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