/* ==========================================================================
   Font
   ========================================================================== */


@font-face {
    font-family: 'botanika_8-heavyregular';
    src: url('../resources/fonts/botanika-8-heavy-webfont.eot');
    src: url('../resources/fonts/botanika-8-heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../resources/fonts/botanika-8-heavy-webfont.woff') format('woff'),
         url('../resources/fonts/botanika-8-heavy-webfont.ttf') format('truetype'),
         url('../resources/fonts/botanika-8-heavy-webfont.svg#botanika_8-heavyregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'botanika_7-boldregular';
    src: url('../resources/fonts/botanika-7-bold-webfont.eot');
    src: url('../resources/fonts/botanika-7-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../resources/fonts/botanika-7-bold-webfont.woff') format('woff'),
         url('../resources/fonts/botanika-7-bold-webfont.ttf') format('truetype'),
         url('../resources/fonts/botanika-7-bold-webfont.svg#botanika_7-boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'botanika_5-demiregular';
    src: url('../resources/fonts/botanika-5-demi-webfont.eot');
    src: url('../resources/fonts/botanika-5-demi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../resources/fonts/botanika-5-demi-webfont.woff') format('woff'),
         url('../resources/fonts/botanika-5-demi-webfont.ttf') format('truetype'),
         url('../resources/fonts/botanika-5-demi-webfont.svg#botanika_5-demiregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'botanika_3-literegular';
    src: url('../resources/fonts/botanika-3-lite-webfont.eot');
    src: url('../resources/fonts/botanika-3-lite-webfont.eot?#iefix') format('embedded-opentype'),
         url('../resources/fonts/botanika-3-lite-webfont.woff') format('woff'),
         url('../resources/fonts/botanika-3-lite-webfont.ttf') format('truetype'),
         url('../resources/fonts/botanika-3-lite-webfont.svg#botanika_3-literegular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'botanika_7-bold_scbold';
    src: url('../resources/fonts/botanika-7-boldsc-webfont.eot');
    src: url('../resources/fonts/botanika-7-boldsc-webfont.eot?#iefix') format('embedded-opentype'),
         url('../resources/fonts/botanika-7-boldsc-webfont.woff') format('woff'),
         url('../resources/fonts/botanika-7-boldsc-webfont.ttf') format('truetype'),
         url('../resources/fonts/botanika-7-boldsc-webfont.svg#botanika_7-bold_scbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
		




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

/*
@media only screen (device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)   
{
	body > .splash-fog{position: fixed; bottom: 0px; left: 0px; width:1024px; height: 770px; background: rgba(50,50,50, 0.98) url('../img/rotate-img.png') no-repeat center center; z-index: 199;}
	.viewport-wrapper{position: fixed; left: 128px;}
}
*/
   
/* @media screen and (orientation:landscape) { */
/*     .viewport-wrapper { -webkit-transform: rotate(-90deg);} */

/* } */

/*
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

	body > .splash-fog{position: fixed; bottom: 0px; left: 0px; width:1024px; height: 770px; background: rgba(50,50,50, 0.98) url('../img/rotate-img.png') no-repeat center center; z-index: 199;}
	.viewport-wrapper{position: fixed; left: 128px;}

}
*/
   
   
	   
   
	html{height: 100%;}
	body { font-size: 1em; line-height: 1.4; background: #323232; color: #3f3f3f; height: 100%;}	

/* 	body > .fog{display: none;} */
	
/* 	.layout{position: absolute; width: 768px; min-height: 100%; left: 50%; margin-left: -384px; background: url('../img/layout-panel-all.jpg') no-repeat; opacity: 0.3; } */
	.viewport-wrapper{width: 768px; height: 1005px; overflow: hidden; -webkit-box-sizing: border-box;  margin: 0 auto; margin-bottom: 0px; }
	.settings-panel{position: relative;width: 100%; height: 60px; margin-bottom: 0px; margin-top: 0px; text-align: center; -webkit-box-sizing: border-box; background: #F8EF20; }
			.fog{position: absolute; width: 768px; height: 1005px; bottom: 60px; background: rgba(0,0,0,0.8); z-index: 199; display: none;}
			.settings-panel > h2{float: left; margin-top: 20px; margin-left: 20px; /* color: #6a9100;  */font-family: "botanika_7-boldregular";}
			.settings-panel > button{margin-top: 13px; /* margin-left: 30px; */ margin-left: -20px;}
			.settings-icon-big{position: relative; width: 34px; height: 34px; float: left; margin-left: 20px; margin-top: 14px;  background: url('../img/settings-icon-big.png') no-repeat; }
			
			.text-block{position: absolute; width: 728px; left: 20px; top: 190px; }

	.wrapper-1024{position: relative; width: 1536px; height: 1005px; margin: 0 auto; /* overflow: hidden;  */background: url('../img/pattern.jpg') repeat; -webkit-box-sizing: border-box; }
	.page{position: relative; width: 768px; min-height: 100%; float: left; z-index: 1;}
	
		.treatment-strategies{position: relative; float: left; width: 320px; padding-top: 35px; padding-left: 20px;}
			.treatment-strategies > h1{margin-bottom: -2px;}
			h1+ .subheader {width: 100%; margin-bottom: 12px;}
			.subheader{ font: 14px 'botanika_3-literegular'; color: #a7a7a7; margin-top: 3px; }
			.treatment-strategies > div{display: inline-block; margin-right: 5px;}
			.treatment-select{position: relative; display: inline-block; /* padding: 2px 30px 0px 12px;  */ padding: 2px 0px 2px 9px; background: #92d308; color: #ffffff; font: 16px 'botanika_5-demiregular'; line-height: 30px; }
			.ts-1{width: 110px;}
			.ts-1 > select{display: none;}
			.ts-2{width: 125px;}
			.vs{font: 17px 'botanika_7-boldregular';}

			.treatment-select:before{position: absolute; right: 10px; top: 13px; content:''; width: 10px; height: 8px; background: url('../img/select-arrow.png') 92% center no-repeat;}
			.ts-1:before{background-image: none; text-align: center;}
					
		.core-inputs{position: relative; top: 15px; right: 15px; width: 400px; float: right; padding: 20px 10px; padding-bottom: 17px; -webkit-box-sizing: border-box; border: 2px solid #e6dc02; background: rgba(233,234,234, 0.35); }
		

/* ------------------------- Core inputs */
		
			.core-inputs label{display: inline-block; width: 90px; padding-right: 6px; font: 12px 'botanika_8-heavyregular'; text-align: right; }
			.core-inputs input[type="text"] {display: none;}	


			.time-horizon label{line-height: 30px;}	
			
			
			

			
		

/* ------------------------- Core inputs */

			.input-cell{position: relative; background: #fff; font: 14px 'botanika_5-demiregular'; /* padding: 0px 5px; */ display: inline-block;  text-align: center; 
			border-radius: 6px!important;}
			
			.input-cell span{overflow: hidden; display: inline-block; text-overflow: ellipsis; text-align: center; padding: 0px 4px; -webkit-box-sizing: border-box;}
			.input-cell-big span{width: 75px;}
			.input-cell-small span{width: 69px;}
			
			
			.input-cell-big{width: 85px; height: 30px;/*  -webkit-box-sizing: border-box; */ line-height: 30px; padding-top: 2px;  border: 2px solid #f1f1f1;}
			.input-cell-small{width: 79px; height: 27px; line-height: 29px; border: 2px solid #f8ef20;}
			
			.input-stroke{border: 2px solid #92D308;}		


			
			.population{margin-top: 17px; /* float: left; */ display: inline-block;}	
			.country{/* float: right;  */display: inline-block; margin-top: 20px; margin-left: 4px;}	
			.country-select{ position: relative; height: 30px; width: 100px; display: inline-block; font: 14px 'botanika_5-demiregular'; line-height: 30px; padding-left: 5px;  background: #fff;}
			.country-select:before{position: absolute; right: 10px; top: 12px; content:''; width: 10px; height: 8px; background: url('../img/select-arrow.png') 92% center no-repeat;}

			.country label{width: 60px;}
			
			
			
			
/* ------------------------- Tree */

	.tree-header{position: absolute; width: 100%; top: 190px; text-align: center;}
	
	.tree-base{position: absolute; width: 700px; height: 385px; top: 120px; left: 28px; background: url('../img/tree-base.png') no-repeat;}


	.intervention-efficacy-button{position: absolute; top: 235px; left: 110px; width: 143px; height: 138px; background: url('../img/tree-buttons-sprite.png') no-repeat;}

	.tree-button{position: absolute; width: 126px; height: 50px; background: url('../img/tree-buttons-sprite.png') 0px 0px no-repeat; }
	.tree-button.case-button{background-position: 0px -235px;  top: 347px; left: 276px;}
	.tree-button.gp-button{background-position: 0px -135px; top: 290px; left: 391px;}
	.tree-button.hospitalization-button{background-position: 0px -185px; top: 234px; left: 506px;}
	.tree-button.end-button{background-position: 0px -285px; top: 176px; left: 620px;}
	
	

	.probability-up{position: absolute; top: 33px; }
	.probability-down{position: absolute; top: 123px;}
	
	.probabilities, .probability-loop{position: relative; left: -47px; color: #D9D017; font: 11px 'botanika_7-boldregular'; }
	.probability-loop{top: 123px; left: -144px;}

	.input-pointer-icon{position: absolute;width: 40px; height: 52px; top: -20px; left: 5px; background: url('../img/input-pointer-icon-sprite.png') no-repeat;
	    -webkit-transition: -webkit-transform 0.5s ease-in-out; -webkit-transform: scale(0.65);
	}		
	
 	.opened {z-index: 100; -webkit-transform: translate(-55px,23px) rotate(90deg) scale(1); background-position: 0px -53px;}
 	.flipped-panel .opened{-webkit-transform: translate(125px,23px) rotate(-90deg) scale(1); background-position: 0px -106px;}
 	.intervention-efficacy-button.flipped-panel .opened{-webkit-transform: translate(145px,25px) rotate(-90deg); }


	.inputs-panel{position: absolute; width: 334px; left: -10px; -webkit-box-sizing: border-box; background: #f8ef20; -webkit-box-shadow: -1px 3px 5px rgba(0,0,0,0.1); /* -webkit-filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.75)); */ z-index: 99; padding: 20px 10px 0px 10px; display: none; }
	.inputs-panel:after{content:""; position:absolute; bottom: -30px; right: 0px; border-top: 30px solid #dcd200; border-right: 30px solid transparent  }
	.inputs-panel:before{content: ""; position:absolute; bottom: -30px; left: 0px; height: 30px; width: 304px; background: #f8ef20; -webkit-box-shadow: -2px 5px 6px rgba(0,0,0,0.1); }
	.inputs-panel h2{ width: 100%; margin-bottom: 10px; font-size: 14px;text-align: center; }				
	
	.inputs-panel ul{ list-style: none; margin: 0px; padding: 0px;}
	.inputs-panel li{position: relative; padding-left: 5px; height: 53px; border-bottom: 1px solid #ebe21e;}
	.inputs-panel li:last-child{border: none;}
	
	.inputs-panel label{position: relative; width: 80px; float: left; font: 11px 'botanika_8-heavyregular'; text-transform: uppercase; }
	.probabilities-input label{width: 85px;}
	
	.input-control{width: 220px; float: left; }	
		.input-control input{display: none;}
		
	.inputs-panel > *{z-index: 99;}
	
	
	.hospitalization-button > .inputs-panel{left: -380px;}
	.end-button > .inputs-panel{left: -380px;}
	.gp-button > .inputs-panel{left: -380px;}
	
	.case-button > .inputs-panel{left: 150px;}
	.intervention-efficacy-button > .inputs-panel{left: 185px;}
	
	
	.year-wrapper{height: 53px; width: 80px; margin-left: -17px; margin-right: 15px; border-right: 1px solid #ebe21e; text-align: center; display: -webkit-box;  -webkit-box-orient: horizontal;  -webkit-box-pack: center;  -webkit-box-align: center;}
	.probabilities-input label{font: 14px 'botanika_8-heavyregular'; text-align: center;}
	.probabilities-input label span{font: 11px 'botanika_5-demiregular'; color: #a29e2e;}
	
	.probabilities-input li:last-child{border-bottom: 1px solid #ebe21e;}
	.probabilities-input li:first-child{border-top: 1px solid #ebe21e;}
	
		.end-button .probabilities-input, .case-button probabilities-input{margin-bottom: 10px;}
	
	.inputs-header{display: inline-block; margin-bottom: 6px; font: 10px 'botanika_8-heavyregular'; text-transform: uppercase;}
	.age-group{width: 80px; text-align: center; margin-left: -3px;}
	.occurance-probability{width: 200px; text-align: left!important; padding-left: 7px; }

/* ------------------------- Year switch */

	.year-switch{position: absolute; width: 58px; top: 295px; left: -3px; font: 12px 'botanika_7-boldregular'; text-align: center; line-height: 30px; }
	.year-switch > div, .outcomes-mode-switch > div{margin-bottom: 3px;}
			

/* ------------------------- Outcomes area */

	.outcomes-area{position: absolute; top: 545px; /* height: 480px;  */width: 768px; background: url('../img/outcomes-bg.jpg') no-repeat;}	
		.outcomes-data{position: relative; width: 560px; margin: 45px auto;}		
			.outcomes-data .subheader{text-align: center;}			
			.outcomes-data h2{text-align: center;}
			
			.outcomes-data-nav{text-align: center; margin-top: 15px; margin-left: 20px;}
			.next-chart-button .regular-button{position: absolute; top: 195px; left: 586px; width: 40px; height: 40px;  font-size: 22px; padding: 0px; text-align: center;}
			
			.chart{position: relative;width: 520px; height: 210px; margin-top: 42px; margin-left: -8px;}
			.chart-legend{font: 15px 'botanika_5-demiregular'; text-align: center; margin-top: 20px; }
			.blue-square{width: 9px; height: 9px; display: inline-block; background: #3dade2; margin-right: 3px;}
			
			#chartFrame{position: relative; border: none; background: transparent;}
		
		.outcomes-main-switch{position: absolute; width: 100px; left: -3px; top: 41px; text-align: center; font: 16px 'botanika_7-boldregular'; line-height: 15px;}
		.outcomes-main-switch > div {/* padding: 60px 0px 25px 0px; */ height: 115px;}
		.outcomes-main-switch .centered-inside{height: 115px;}

			.switch-icons{width: 100px; margin-bottom: 10px; background: url('../img/main-outputs-switch-icons.png') no-repeat;}
		
			.health-icon{height: 27px; background-position: center 0px;}
			.economics-icon{height: 19px; background-position: center -55px;}
			.budget-icon{height: 25px; background-position: center -93px;}
			
			.current .health-icon{background-position: center -27px;}
			.current .economics-icon{background-position: center -74px;}
			.current .budget-icon{background-position: center -118px;}
			
		
		.outcomes-mode-switch{position: absolute; width: 90px; right: -3px; top: 37px; font: 15px 'botanika_5-demiregular'; line-height: 30px; text-align: center; }

		#chart-wrapper{left: 23px;}

/* ==========================================================================
   Typography
   ========================================================================== */

	h1{margin: 0px; font-size: 22px; line-height: 22px;}
	h2{margin: 0px; font-size: 17px; line-height: 17px;}
	
	h1,h2,h3{font-family: 'botanika_8-heavyregular'; text-transform: uppercase;font-weight: normal;}
	
	label{text-transform: uppercase; }
	
	
	

	
/* ==========================================================================
   Maintainance
   ========================================================================== */
   select{position: absolute; width: 100%; left: 0px; opacity: 0; line-height: 140px;  height: 3em; min-height: 100%;}
   
    .browser-is-not-supported{
    	position: relative;
    	width: 768px;
    	height: 995px;
    	margin: 0px auto;
    	padding-top: 60px;
    	display: none; 
		font-family: 'botanika_8-heavyregular';
		text-transform: uppercase;
		font-weight: normal;    
		font-size: 30px;
		color: #f7f7f7;
		background: url('../img/model-screenshot.jpg') no-repeat;
    }
    
    .alert-text{position: absolute; z-index: 99;top: 80px; width: 750px; left: 30px;}
    .regular-fog {position: absolute; top:0; left: 0; background: rgba(0,0,0,0.83); width: 768px; height: 995px; z-index: 5;}
    .browser-is-not-supported > span {font-size: 25px;}
    .browser-is-not-supported a{font-size: 20px; color: #E6DC02; padding-left: 45px;}
   
   
	.detection-disabled{text-decoration: none; color: #3f3f3f;}

	.white-text-shadow{text-shadow: 0px -1px rgba(135, 164, 72, 0.75);}
	.outer-shadow-t1{ -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.14)}	
	
	
	.inner-shadow-t1{-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset;}
	.inner-shadow-input{-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.12) inset;}
	
	.rounded-3{border-radius: 3px;}
	.rounded-5{border-radius: 5px;}	
	
	.switch-header{font: 12px 'botanika_7-boldregular'; text-transform: uppercase; }
	.regular-button{
		font: 14px 'botanika_5-demiregular'; color: #7bb207;line-height: 30px;		
		display: inline-block;
		border: 1px solid #efefef;
		border-radius: 3px;
		padding: 0px 15px;
		padding-top: 2px;
		margin-right: 10px;
		-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.14);
		text-shadow: 0px 1px #fff;
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(top,  #ffffff 0%, #e9eaea 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e9eaea)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #ffffff 0%,#e9eaea 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #ffffff 0%,#e9eaea 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #ffffff 0%,#e9eaea 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #ffffff 0%,#e9eaea 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9eaea',GradientType=0 ); /* IE6-9 */
	}

	button:active{color: #fff; background: #92d308; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset; text-shadow: 0px -1px rgba(135, 164, 72, 0.75);}


	.fit{ -webkit-box-flex: 1;}
	.centered-inside{  display: -webkit-box;  -webkit-box-orient: horizontal;  -webkit-box-pack: center;  -webkit-box-align: center; }
	.box{display: -webkit-box;  -webkit-box-orient: horizontal;}
	
	.current{color: #fff; background: #92d308; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset; border-radius: 3px; text-shadow: 0px -1px rgba(135, 164, 72, 0.75);}
	
	* {
	  -webkit-user-select: none;
	  -khtml-user-select: none;
	  -moz-user-select: none;
	  -o-user-select: none;
	  user-select: none;
	}
	

/* ==========================================================================
   Numeric-input-panel
   ========================================================================== */
   
   .numeric-input-panel{position: absolute; top: -276px; left: 50%; margin-left: -80px; width: 160px; background: #a1d800; display: -webkit-box;  -webkit-box-orient: vertical; z-index: 199;}
   .numeric-input-panel:after{position: absolute; bottom: -22px; left: 50%; margin-left: -30px; content: ''; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid #a1d800; z-index: 95; }
      
   .population .numeric-input-panel{left: 50%; margin-left: -80px; top: 66px; box-shadow: 0px 4px 8px rgba(0,0,0,0.15);}
   .population .numeric-input-panel:after{top: -28px; border-right: 30px solid transparent; border-left: 30px solid transparent; border-bottom: 30px solid #a1d800; border-top: none;}
   .population .numeric-input-panel{left: 50%; margin-left: -80px; top: 66px; box-shadow: 0px 4px 8px rgba(0,0,0,0.15);}
   .population .numeric-input-panel:after{top: -28px; border-right: 30px solid transparent; border-left: 30px solid transparent; border-bottom: 30px solid #a1d800; border-top: none;}
   
    		.input-buttons{width: 100%; clear: both; text-align: center; padding: 14px 0px 10px 0px;}
			.circle-button{display: inline-block; width: 40px; height: 40px; color: #b8b118!important; font: 13px 'botanika_5-demiregular'; border-radius: 40px; margin-right: 1px; margin-bottom: 5px; padding: 0px; line-height: 1.5; line-height: 3.2}
			.update-cell-button{-webkit-box-flex: 1; display: block; background: #f9f000; color: #a6a000; font: 15px 'botanika_5-demiregular'; border: 0px; text-align: center; margin: 0px 15px 17px 15px; border-radius: 5px; padding: 5px 0px; box-shadow: 0px 2px 4px rgba(0,0,0,0.2);}
			.circle-button:active{background: #f9f000; color: #fff; border: 1px solid #88b600;}
			.delete-button:active{background: #f9432b;}