/* CSS Document */

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

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

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

h2 {
	font-size: 14px;
	margin-bottom: 10px;
}

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

#bmiWrapper {
	width: 695px;
}

#stepper {margin-top: 20px;}
#stepper li {
	width: 40px;
	height:30px;
	background: url(../images/step.png) no-repeat;
	float: left;
	list-style: none;
	color: #fff;
	border:0px solid red;
	text-align:center;
	line-height: 30px;
	font-weight: bold;
}

#stepper li:first-child {
	width: 25px;
	height: 30px;
	background: url(../images/stepFirst.png) no-repeat;
	color: #0F527D;
	text-align: left;
	padding-left: 9px;
}
#stepper li:last-child {
	width: 29px;
	height: 30px;
	background: url(../images/stepLast.png) no-repeat;
	text-align: right;
	padding-right: 5px;
}
#stepper li.active:first-child {background: url(../images/stepFirst.png) no-repeat;}
#stepper li.active:last-child {background: url(../images/stepLastAct.png) no-repeat;}
#stepper li.active {background: url(../images/stepAct.png) no-repeat top center; color: #0F527D;}

#introText, #bmiQuest {
	margin: 30px 0;
	line-height: 18px;
	-moz-border-radius: 5px;
  	-webkit-border-radius: 5px;
  	border-radius: 5px;
	background: rgba(255, 255, 255, 0.5);
	padding: 25px 15px;	
}

#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 {
	margin-top: 30px;
	display: none;
}

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

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

#bmiQuest, #quests div {display: none;}
#bmiQuest p {font-weight: bold;}


#quests a {
	background: url(../images/bgCheckbox.png) no-repeat 0 -29px;
	display: block; 
	text-decoration: none;
	padding-left: 40px;
	line-height: 29px;
	margin: 10px 0 0 50px;
	font-weight: bold;
}

a.selected {background: url(../images/bgCheckbox.png) no-repeat 0 0 !important;}


#next {
	background: url(../images/btnNextQuest.png)  no-repeat;
	display: block; 
	height: 31px;
	width: 88px;
	float: right;
	margin-left: 10px;

	visibility:hidden;
}

#prev {
	background: url(../images/btnBack.png)  no-repeat;
	display: block; 
	height: 31px;
	width: 88px;
	float: right;
}

#bmiResult {display: none; margin-top: 30px;}
#bmiResult p {margin: 15px 0;}

.resultDescription {
    background: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
    padding: 25px 15px;
}
.resultDescription p {margin: 10px 0 !important; font-size: 14px !important;}
.resultDescription p.bmi {margin: 10px 0 !important; font-weight: bold;}

.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;}




.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;
}