/*
******************************************************************************************************************************************************
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================
/*	M A I N   S T Y L E S   F O R   A L L   R E S O L U T I O N S
======================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
******************************************************************************************************************************************************
*/

/*
******************************************************************************************************************************************************
======================================================================================================================================================
/*	T A G - S T Y L E S
======================================================================================================================================================
******************************************************************************************************************************************************
*/

body		{
		 margin:0;
		 /*background-image:url('../gfx/bg_tile.jpg');*/
		 background-position:bottom;
		 background-repeat:repeat-x;
		 background-size:contain;
		 background-color:#FAF5F0;
		}
		
div 		{
		-webkit-box-sizing: border-box;
	     -moz-box-sizing: border-box;
	     box-sizing: border-box;
	     font-family: Helvetica, Calibri;
		}
li		{
		line-height:auto;
		}
a		{
		color:#C70;
		text-decoration:none;
		font-size:14px;
		}
a:before	{
		content:'\2192\00a0';
		}
		
#preloader{
		position:absolute;
		width:100%;
		height:100%;
		background-color:rgba(255,255,255,.8);
		z-index:10000;
		}
#preloader img{
		position:absolute;
		left:50%;
		top:50%;
		margin:-25px 0 0 -25px;
		}
#progressInfo{
		position:absolute;
		left:50%;
		top:50%;
		width:360px;
		text-align:center;
		margin:35px 0 0 -180px;
		}
#progressBar{
		position:absolute;
		left:50%;
		top:50%;
		width:360px;
		height:10px;
		margin:100px 0 0 -180px;
		border:1px solid grey;
		}
#progress{
		position:absolute;
		left:0;
		top:0;
		width:0px;
		height:8px;
		background-color:#ff9900;
		}

/*
******************************************************************************************************************************************************
======================================================================================================================================================
/*	T A G - S T Y L E S   E N D E
======================================================================================================================================================
******************************************************************************************************************************************************
*/
/*
******************************************************************************************************************************************************
======================================================================================================================================================
/*	T E X T - S T Y L E S
======================================================================================================================================================
******************************************************************************************************************************************************
*/
.pageTitle, .topic, .headline{
			font-family:'Lucida Grande', 'Malgun Gothic';
			}
			
.pageTitle	{
			font-size:22px;
			display:inline;
			font-weight:thin;
			color:#666;
			}
.topic		{
			float:left;
			width:95%;
			font-size:18px;
			margin-left:5px;
			color:#666;
			border-top:1px dotted grey;
			}
.headline		{
			font-size:18pt;
			color:#666;
			}
.bodyCopy, .lead	{
			font-size:14px;
			line-height:125%;
			max-width:400px;
			color:#666;
			}
/*
******************************************************************************************************************************************************
======================================================================================================================================================
/*	T E X T - S T Y L E S   E N D E
======================================================================================================================================================
******************************************************************************************************************************************************
*/
/*
******************************************************************************************************************************************************
======================================================================================================================================================
/*	S C H A L T F L Ä C H E N
======================================================================================================================================================
******************************************************************************************************************************************************
*/
/*
******************************************************************************************************************************************************
/*	L E F T C O L
******************************************************************************************************************************************************
*/	
	#menu	{
			padding:0 18px;
			width:100%;
			background-color:#FAF0D2;
			}
	#iconbar	{
			width:100%;
			height:30px;
			background-color:#FF9900;
			padding:2px 0 0 15px;;
			}
	#btnHome	{
			width:40px;
			height:26px;
			background-image:url('../gfx/home.png');
			background-position: center center;
			background-repeat:no-repeat;
			background-size:50px;
			background-color:#FF9900;
			border-right:1px solid white;
			display:inline-block;
			}
	#btnHelp{
			width:35px;
			height:26px;
			background-image:url('../gfx/help.png');
			background-position: center center;
			background-repeat:no-repeat;
			background-size:45px;
			background-color:#FF9900;
			border-right:1px solid white;
			display:inline-block;
			}
	.topItem	{
			border:1px solid white;
			background:white;
			box-shadow:0px 0px 10px rgba(255,153,0,.75);
			float:left;
			position:relative;
			cursor:pointer;
			}
	.topItem_hover	{
			border:1px solid #FF9900;
			box-shadow:0px 0px 5px rgba(255,153,0,.5);
			}
	.mainBtnLabel{
			position:absolute;
			left:0px;
			padding:3px 5px;
			background-color:#F90;
			font-size:16px;
			color:white;
			text-align:center;
			box-shadow:0px 0px 5px rgba(255,153,0,.5);
			}
	.mainBtnLabel_hover{
			background-color:#FAF0D2;
			color:#C70;
			}
	.mainBtnLabel_active{
			background-color:#FAF0D2;
			color:grey;
			}
					
	#male, #female, #kids, #skin, #muscels, #organs, #skeleton, #psyche, #hormones, #cardio, #nervs{
			background-position: top center;
			background-repeat:no-repeat;
			background-size:contain;
			}
	#male, #female, #kids{
			background-size:75%;
			background-position:center top ;
			}
	#male	{
			background-image:url('../gfx/btn_male.png');
			}
	#female	{
			background-image:url('../gfx/btn_female.png');
			}
	#kids	{
			background-image:url('../img/kids.png');
			}
	#skin	{
			background-image:url('../gfx/btn_skin.png');
			}
	#muscels	{
			background-image:url('../gfx/btn_muscels.png');
			}
	#organs	{
			background-image:url('../gfx/btn_organs.png');
			}
	#skeleton	{
			background-image:url('../gfx/btn_skeleton.png');
			}
	#psyche	{
			background-image:url('../gfx/icon_psyche.jpg');
			}
	#hormones	{
			background-image:url('../gfx/icon_hormone.jpg');
			}
	#cardio	{
			background-image:url('../gfx/btn_cardio.png');
			display:none;
			}
	#nervs	{
			background-image:url('../gfx/btn_nervs.png');
			display:none;
			}
/*
******************************************************************************************************************************************************
/*	C E N T E R C O L
******************************************************************************************************************************************************
*/
	#shield{
			width:100%; height:100%;
			background-image:url('../img/kids.png');
			background-color: white;
			background-position:top center;
			background-repeat:no-repeat;
			background-size:contain;
			opacity:0.9;
			display:none;
			}
	#transform{
			position:absolute;
			top:20px;
			left:20px;
			width:100px;
			height:105px;
			background-image:url('../gfx/rotate.png');
			background-size:contain;
			background-repeat:no-repeat;
			}
	#btn_back, #btn_fwd{
			position:absolute;
			top:0px;
			width:50px;
			height:105px;
			background-size:contain;
			background-repeat:no-repeat;
			cursor:pointer;
			}
	#btn_back	{
			left:0px;
			}
	#btn_fwd	{
			right:0px;
			}
			
	#scaleBtn{
			position:absolute;
			bottom:-15px; left:-14px; 
			width:30px; height:30px; 
			background-color:rgba(255,153,0,.5);
			box-shadow:0px 0px 5px rgba(0,0,0,0.15);
			border:1px solid white;
			border-radius:25px;
			cursor:pointer;
			}
			
	#scaleBar	{
			position:absolute;
			top:170px; left:68px;
			width:4px; height:200px;
			border:1px solid #F90;
			border-radius:2px;
			background-color:rgba(255,255,255,0.5);
			box-shadow:0px 0px 5px rgba(0,0,0,0.15); 
			}
	#zoomin, #zoomout{
			position:absolute;
			top:120px; left:55px;
			width:30px; height:30px;
			color:#F90;
			font-size:40px;
			text-align:center;
			}
	#zoomout	{
			top:350px;
			font-size:60px;
			}
			
	/*#fwdBtn	{
			top:50%; right:20px; 
			width:50px; height:50px;
			background-image:url('../gfx/fwd.png');
			background-size:contain;
			background-position:center center;
			display:none;
			}
	#rewBtn	{
			 top:50%; left:20px; 
			 width:50px; height:50px; 
			background-image:url('../gfx/back.png');
			background-size:contain;
			display:none;
			}*/
			
			
	#tabBtn	{
			position:absolute;
			top:150px;
			left:-50px;
			width:50px;
			height:150px;
			background-color:#F90;
			border-radius:10px 0 0 10px;
			display:none;
			}
	.areas	{
			 position:absolute;
			 /*border:1px solid green;*/
			 border-radius:100px;
			 background:transparent;
			 cursor:pointer;
			}
	#a_0_0	{
			border-radius:70px 70px 30px 30px;
			border-bottom:rgba(255,153,0,.25);
			}
	#a_0_0[title^='Hirn']	{
			border-radius:70px;
			border-bottom:rgba(255,153,0,.25);
			}
	#a_1_0[title^='Lunge']	{
			border-radius:100px 10px 100px 10px;
			}
	#a_1_1[title^='Lunge']	{
			border-radius:10px 100px 10px 100px;
			}
			
	#a_2_0[title^='Speise']	{
			border-radius:10px 10px 0px 0px;
			}
	#a_2_1[title^='Speise']	{
			border-radius:0px 0px 0px 10px;
			}
			
			
	#a_4_0[title^='Leber']	{
			border-radius:50px;
			}
			
	#a_8_0[title^='Darm']	{
			border-radius:20px;
			}
			
	#a_0_1	{
			border-radius:0 0 70px 70px;
			border-top:none;
			}
	#a_2_0[title^='Schulter'], #a_3_0[title^='Schulter']{			
			-webkit-transform: rotate(7deg);
			-ms-transform: rotate(7deg);
			-o-transform: rotate(7deg);
			transform: rotate(7deg);
			}
	#a_2_1[title^='Schulter'], #a_3_1[title^='Schulter']{			
			-webkit-transform: rotate(-7deg);
			-ms-transform: rotate(-7deg);
			-o-transform: rotate(-7deg);
			transform: rotate(-7deg);
			}
	#a_6_1[title^='Beine']{			
			-webkit-transform: rotate(5deg);
			-ms-transform: rotate(7deg);
			-o-transform: rotate(7deg);
			transform: rotate(4deg);
			}
	#a_6_0[title^='Beine']{			
			-webkit-transform: rotate(-5deg);
			-ms-transform: rotate(-7deg);
			-o-transform: rotate(-7deg);
			transform: rotate(-4deg);
			}
/*
******************************************************************************************************************************************************
/*	R I G H T C O L
******************************************************************************************************************************************************
*/	
	#btnSubMenu, #closeHelp	{
			position:absolute;
			width:30px;
			height:30px;
			right:15px;
			background-image:url('../gfx/btn_menu.png');
			background-color:#FF9900;
			background-size:contain;
			opacity:0.5;
			cursor:pointer;
			}
	#btnSubMenu{
			display:none;
			}
	#closeHelp{
			background-image:url('../gfx/btn_close.png');
			opacity:1;
			}
/*
******************************************************************************************************************************************************
======================================================================================================================================================
/*	S C H A L T F L Ä C H E N   E N D E
======================================================================================================================================================
******************************************************************************************************************************************************
*/
/*
******************************************************************************************************************************************************
======================================================================================================================================================
/*	D I V - S T Y L E S
======================================================================================================================================================
******************************************************************************************************************************************************
*/	
/*
******************************************************************************************************************************************************
/*	L E F T C O L
******************************************************************************************************************************************************
*/			
	#leftcol	{
			position:absolute;
			left:0;
			top:0;
			z-index:2;
			}
	
	#logo	{
			background-repeat:no-repeat;
			background-size:contain;
			}
/*
******************************************************************************************************************************************************
/*	C E N T E R C O L
******************************************************************************************************************************************************
*/	
	#centercol{
			position:absolute;
			top:0;
			height:100%;
			z-index:0;
			overflow:hidden;
			background-color:white;
			border-left:1px dotted grey;
			border-right:1px dotted grey;
			}
	#picsFrame{
			width:100%;
			height:100%;
			overflow:hidden;
			}
	#pics, #lastPic	{
			height:100%;
			background-image:url('../img/male/skin/skin_0001.png');
			background-position: center center;
			background-repeat:no-repeat;
			background-size:contain;
			}
	#hovered, #clicked {
			position:absolute;
			width:100%;
			height:100%;
			background-position: center center;
			background-repeat:no-repeat;
			background-size:contain;
			display:none;
			}
	#hovered	{
			opacity:.35;
			}		
	#shield_alt	{
			position:absolute;
			bottom:0px; left:0;
			width:100%; height:100px;
			background-color:rgba(255,255,255,0); 
			}	
/*
******************************************************************************************************************************************************
/*	R I G H T C O L
******************************************************************************************************************************************************
*/			
	#rightcol	{
			position:absolute;
			height:100%;
			z-index:3;
			}
	#rightcol #header, #rightcol #diseaseText div, #help{
			width:95%;
			}		
					
	#header	{
			padding:5px 0 5px 15px;
			color:#666;
			height:auto;
			min-height:120px;
			}
	#diseaseText .topic{
			display:none;
			}
	#diseaseText div, #help div{
			margin:5px 20px 10px 15px;
			}
	#help .bodyCopy{
			font-size:12px;
			}
	#help img{
			margin:0 5px 10px 0;
			}
	#subMenu	{
			width:500px;
			/*border:1px solid blue;*/
			}
	#submenuBar{
			width:100%;
			height:30px;
			background-color:#FF9900;
	}
	#submenuTitle{
			height:30px;
			padding:5px 0 5px 15px;
			color:white;
			float:left;
			white-space:nowrap;
	}
	#submenuTree{
			display:none;
	}
	#submenuTree div{
			width:500px;
			height:auto;
			/*text-indent:-15px;*/
			padding:5px 10% 5px 15px;
			background-color:#FAF0D2;
			color:#C70;
			border-bottom:1px solid #ccc;
	}
/*
******************************************************************************************************************************************************
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================
/*	M A I N   S T Y L E S   F O R   B I G   S C R E E N S
======================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
******************************************************************************************************************************************************
*/
@media only screen and (min-width: 1281px) and (max-width: 3000px) {	
			
/*
******************************************************************************************************************************************************
/*	L E F T C O L
******************************************************************************************************************************************************
*/			
	#leftcol	{
			width:340px;
			}
	
	#logo	{
			width:300px;
			height:120px;
			margin:20px;
			background-image:url('../gfx/logo_cts_sb.png');
			background-position: left top;
			}
	.topItem	{
			margin:0 2px 5px;
			}
/*
******************************************************************************************************************************************************
/*	M I D C O L
******************************************************************************************************************************************************
*/			
	#centercol{
			left:340px;			
			width:100%;
			}
/*
******************************************************************************************************************************************************
/*	R I G H T C O L
******************************************************************************************************************************************************
*/	
			
	#rightcol	{
			top:0;
			right:0;
			width:600px;
			height:100%;
			overflow-y:scroll;
			}

	#header	{
			height:auto;
			}
	#help img{
			float:left;
			margin:0 15px 10px 0;
			}
}
/*
******************************************************************************************************************************************************
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================
/*	M A I N   S T Y L E S   F O R   T A B L E T S  ( 1 2 8 0 P X )
======================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
******************************************************************************************************************************************************
*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) {

/*
******************************************************************************************************************************************************
/*	L E F T C O L
******************************************************************************************************************************************************
*/	
	#leftcol	{
			width:270px;
			}
	#logo	{
			width:270px;
			height:85px;
			margin:20px;
			background-image:url('../gfx/logo_cts_sb.png');
			background-position: left top;
			background-repeat:no-repeat;
			background-size:contain;
			}
	.topic	{
			font-size:16px;
			}
	.topItem, #male, #female, #kids	{
			margin:0px 2px 10px;
			}
	.mainBtnLabel{
			font-size:12px;
			}
/*
******************************************************************************************************************************************************
/*	C E N T E R C O L
******************************************************************************************************************************************************
*/
	#centercol{
			left:270px;			
			width:100%;
			}
	#pics, #newPic	{
			/*border:1px solid lightgrey;*/
			width:100%;
			}
/*
******************************************************************************************************************************************************
/*	R I G H T C O L
******************************************************************************************************************************************************
*/
	#rightcol	{
			top:0;
			right:0px;
			width:210px;
			height:100%;
			/*overflow-y:scroll;*/

			}
	#header	{
			height:auto;
			}
	.pageTitle{
			font-size:18pt;
			}
	.lead	{
			max-width:310px;
			}
}
/*
******************************************************************************************************************************************************
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================
/*	M A I N   S T Y L E S   F O R   T A B L E T S  ( 1 0 2 4 P X )
======================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
******************************************************************************************************************************************************
*/
@media only screen and (min-width: 801px) and (max-width: 1024px) {

/*
******************************************************************************************************************************************************
/*	L E F T C O L
******************************************************************************************************************************************************
*/
	#leftcol	{
			width:220px;
			}
	#logo	{
			width:180px;
			height:70px;
			margin:20px;
			background-image:url('../gfx/logo_cts_sb.png');
			background-position: left top;
			background-repeat:no-repeat;
			background-size:contain;
			}
	.topic	{
			font-size:16px;
			}
	.topItem	{
			margin:0 2px 15px;
			}
	#male, #female, #kids{
			width:61px;
			}
	.mainBtnLabel{
			font-size:12px;
			}			
/*
******************************************************************************************************************************************************
/*	M I D C O L
******************************************************************************************************************************************************
*/
	#centercol{
			left:200px;
			width:100%;
			}
	#pics, #newPic	{
			/*border:1px solid lightgrey;*/
			width:100%;
			}
/*
******************************************************************************************************************************************************
/*	R I G H T C O L
******************************************************************************************************************************************************
*/
	#rightcol	{
			top:0;
			right:0px;
			width:310px;
			height:100%;
			/*overflow-y:scroll;*/
			}
	#header	{
			height:auto;
			}
	.pageTitle{
			font-size:18pt;
			}
	.lead	{
			max-width:310px;
			}
	#help	{
			width:310px;
			overflow-y:scroll;
			}
	#diseaseText div{
			width:270px !important;
			}
}
/*
******************************************************************************************************************************************************
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
======================================================================================================================================================
/*	M A I N   S T Y L E S   F O R   T A B L E T S  P O R T R A I T   ( 8 0 0 P X )
======================================================================================================================================================
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
******************************************************************************************************************************************************
*/

@media only screen and (min-width: 101px) and (max-width: 800px) {
	
/***********************************************************************/
			
	#leftcol	{
			width:150px;
			}
	
	#logo	{
			width:110px;
			height:50px;
			margin:20px;
			background-image:url('../gfx/logo_cts_sb.png');
			background-position: left top;
			background-repeat:no-repeat;
			background-size:contain;
			}
	.topItem	{
			margin:0px 2px 5px;
			}
	#male, #female{
			background-size:cover;
			}
	#female	{
			margin-left:0px;
			}
	#kids	{
			background-size:80px;
			background-position: center -35px;
			width:100px;
			}
	#menu .topic	{
			font-size:12px;
			width:100px;
			}
	.mainBtnLabel{
			font-size:12px;
			}
			
/***********************************************************************/
			
	#centercol{			
			width:50%;
			}
	#pics, #newPic	{
			/*border:1px solid lightgrey;*/
			width:100%;
			}
			
/***********************************************************************/
			
	#rightcol	{
			width:500px;
			top:0;
			right:0px;
			height:100%;
			background-color:rgba(250,245,240,0.95);
			border-left:1px solid darkgrey;
			}
	#help	{
			width:500px;
			overflow-y:scroll;
			}
	#help img{
			float:left;
			margin:0 15px 10px 0;
			}
	#header	{
			height:150px;
			}
	#tabBtn	{
			position:absolute;
			top:150px;
			left:-50px;
			width:50px;
			height:150px;
			background-color:#F90;
			border-radius:10px 0 0 10px;
			display:block;
			}
	#tabBtn #label{
			margin-top:100px;
			-webkit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			transform: rotate(-90deg);
			color:white;
			}
}		
/***********************************************************************/