@charset "utf-8";
/* -- generic styles ------------------------*/
div,h1,h2,h3,h4,h5,h6,p,address,ul,ol,li {
	margin: 0;
	padding: 0px;
}

body {
	font: 12px, Arial, Helvetica, sans-serif;
	line-height: 1.5;
	position: relative;
	background: #fff;
	color: rgb(0, 0, 0);
	font-weight:normal;
	font-style:normal;
	background-repeat:no-repeat;
	background-position:right;
}


/* ----------- IMAGE OBJECTS STYLES ------------------*/
#slide, #troubleshoot_slide1, #troubleshoot_slide2, #troubleshoot_slide3,  #troubleshoot_slide4 {
	position: absolute;
	width: 50px;
	height: 35px;
	z-index: 4;
	background: url(../_tmb/tmb_slide.jpg);
	background-repeat: no-repeat;
	border: #C6CDD0 solid 2px;
}

/* ----------- IMAGE OBJECTS STYLES ------------------*/
#slide:hover, #troubleshoot_slide1:hover, 
#troubleshoot_slide2:hover, #troubleshoot_slide3:hover,
#troubleshoot_slide4:hover {
	cursor: pointer;
	border: 2px solid #0e8515;
}

#rotate_scale {
	position: absolute;
	width: 200px;
	top: 60px;
	left: 442px;
	z-index: 3;
}

#troubleshoot_rotate_scale {
	position: absolute;
	width: 200px;
	top: 63px;
	left: 465px;
	z-index: 3;
}


.mark0, .mark1, .mark2, .mark3, .mark4, .mark5, 
.mark6, .mark_7, .mark8, .mark_9, .mark10 {
	width: 20px;
	height: 20px;
}

.mark0 {
	position: absolute;
	top: 90px;
	left: 130px;
}

.mark1 {
	position: absolute;
	top: 90px;
	left: 110px;
}

.mark2 {
	position: absolute;
	top: 90px;
	left: 86px;
}

.mark3 {
	position: absolute;
	top: 90px;
	left: 59px;
}

.mark4 {
	position: absolute;
	top: 90px;
	left: 32px;
}

.mark5 {
	position: absolute;
	top: 90px;
	left: 8px;
}

.mark6 {
	position: absolute;
	top: 90px;
	left: 160px;
}

.mark7 {
	position: absolute;
	top: 90px;
	left: 190px;
}

.mark8 {
	position: absolute;
	top: 90px;
	left: 212px;
}

.mark9 {
	position: absolute;
	top: 90px;
	left: 240px;
}

.mark10 {
	position: absolute;
	top: 90px;
	left: 265px;
}


#slide {
	position: absolute;
	top: 15px;
	left: 376px;
}


#troubleshoot_slide1 {
	position: absolute;
	top: 15px;
	left: 325px;
}

#troubleshoot_slide2 {
	position: absolute;
	top: 15px;
	left: 380px;
}

#troubleshoot_slide3 {
	position: absolute;
	top: 55px;
	left: 325px;
}

#troubleshoot_slide4 {
	position: absolute;
	top: 55px;
	left: 380px;
}


#slide:hover, #troubleshoot_slide:hover {
	cursor: pointer;
}

#sidebar, #troubleshoot_sidebar {
	position: absolute;
	top: 308px;
	left: 15px;
	width: 290px;
	font-weight: bold;
	z-index: 3;
}


#sidebar_onionskin {
	position: absolute;
	top: 348px;
	left: 15px;
	width: 290px;
	font-weight: bold;
}

#sidebar img.gallery, #sidebar_onionskin img.onion_gallery,
img.troubleshoot_gallery1, img.troubleshoot_gallery2,
img.troubleshoot_gallery3, img.troubleshoot_gallery4{
	padding: 2px 2px 2px 2px;
	border: 1px solid #C6CDD0;
	margin-right: 12px;
	margin-bottom: 10px;
	
}


#photoSet_onionskin {
	position: absolute;
	left: 310px;
	z-index: 1;
}

#photoSet, #troubleshoot_photoSet{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 580px;
	height: 453px;
	background-image: url(../_img/diaphragm_shadow.png);
	background-repeat: no-repeat;
	z-index: 2;

}

#diaphragm_large, #troubleshoot_diaphragm_large {
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url(../_img/black_diaphragm.png);
	width: 300px;
	height: 300px;
	z-index: 2;	
}

#scale_content, #troubleshoot_scale_content {
	position: absolute;
	top: 118px;
	left: 263px;
	width: 280px;
	height: 280px;
	z-index: 2;
	background-image: url(../_img/scale.png);
}



#photo_large_onionskin {
	position: absolute;
	top: -300px;
	left: 40px;
	width: 350px;
	height: 350px;
	z-index: 1;
	border: 1px solid #C6CDD0;
}

#photoGroup, #troubleshoot_photoGroup {
	position: absolute;
	top: 107px;
	left: 253px;
	width: 300px;
	height: 300px;
}

#photo_large {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 300px;
	height: 300px;
	z-index: 1;
	background: url(../_img/red_blood_cells_40x_n.png);
	filter: 
		blur(15px);
		-webkit-filter(15px);
		-moz-filter(15px);
		-o-filter(15px);
		-ms-filter(15px);
}

#troubleshoot_photo_large {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 300px;
	height: 300px;
	z-index: 1;
	filter: 
		blur(15px);
		-webkit-filter(15px);
		-moz-filter(15px);
		-o-filter(15px);
		-ms-filter(15px);
}



/* ----------- MICROSCOPE CONTROL STYLES ------------------*/
.btn {
    border-radius: 20px!important;
	margin-left: 2px!important;
}


.microscope_label {
	padding-left: 5px!important;
}

h1.clearLeft {
	clear:inherit;
	color: #5d53a8;	
	font-family: Arial, Helvetica, sans-serif;
	padding-left: 484px; padding-bottom: 5px;
	font-size: 14px;
	}

.sidebar1, .sidebar2, .sidebar3 {
	float: left;
	width: 60px;
	padding: 5px;	
	}

#control_position, #troubleshoot_control_position {
	position: absolute;
	top: 10px;
	left: 315px;
	width: 580px;
	background;
	height: 500px;
	background-repeat: no-repeat;
}

#info_btn_black {
	background-image: url("../images/info_btn_black.png");
	width: 150px;
	height: 35px;
	position: absolute;
	left: 205px;
	top: 5px;
	z-index: 2;
	background-repeat: no-repeat;
	background-position: 70px;
	z-index: 5;
}

#slide_title {
	position: absolute;
	top: 23px;
	left: 230px;
	font-weight: bold;
	z-index: 3;
}


#troubleshoot_slide_title1, #troubleshoot_slide_title2, 
#troubleshoot_slide_title3, #troubleshoot_slide_title4 {
	position: absolute;
	top: 18px;
	left: 165px;
	font-weight: bold;
	z-index: 3;
	width: 164px;
	line-height: 18px;
}

#info_btn_black:hover {
	background-image: url("../images/info_btn_green.png");
	cursor: pointer;
}


#labeled_diagramm {
	background-image: url("../images/labelled_microscope.jpg");
	width: 286px;
	height: 363px;
	position: relative;
	left: 10px;
	top: 50px;
	border: #C6CDD0 1px solid;
}

#instruction_p2 {
	width: 300px;
    height: 390px;
    overflow: scroll;
}


#instruction_p4 {
	width: 300px;
    height: 300px;
    overflow: scroll;
}

.instruction {
	width: 300px;
    height: 390px;
}

ol {
	padding-left: 25px;
}
#light, #troubleshoot_light {
	position: absolute;
	width: 200px !important;
	min-width: 200px !important;
	top: 10px;
	left: -5px;
	z-index: 3;
}

img .gallery:focus {
	border: solid 1px orange;
}
#light_toggle-event:focus, #troublshoot_toggle-event:focus {
	outline: thin dotted;
    outline-offset: -2px;
}


#scale {
	position: absolute;
	width: 200px;
	top: 18px;
	left: 402px;
	z-index: 3;
}

#troubleshoot_scale {
	position: absolute;
	width: 200px;
	top: 8px;
	left: 402px;
	z-index: 3;
}

#diaphragm, #troubleshoot_diaphragm {
	width: 200px;
	position: absolute;
	top: 70px;
	left: 15px;
	z-index: 3;
}


#magnification, #troubleshoot_magnification {
	width: 200px;
	position: absolute;
	top: 50px;
	left: 15px;
	z-index: 3;
}

#magnification_label, #troubleshoot_magnification_label {
	width: 200px;
	position: absolute;
	top: 87px;
	left: 17px;;
	z-index: 3;
}

#course_focus, #troubleshoot_course_focus {
	position: absolute;
	width: 220px;
	top: 120px;
	left: 15px;
	z-index: 3;
}


#fine_focus, #troubleshoot_fine_focus {
	position: absolute;
	width: 200px;
	top: 170px;
	left: 15px;
	z-index: 3;
}

#move_slide, #troubleshoot_move_slide {
	position: absolute;
	top: 220px;
	left: 15px;
	width: 250px;	
	z-index: 3;
}


#moveslide_label, #troubleshoot_moveslide_label {
	position: absolute;
	top: 41px;
	left: 52px;
	width: 110px;
	z-index: 3;

}

#pointer0 {
	position: absolute;
	top: 105px;
	left: 200px;
	width: 50px;
	line-height: 18px;
}

#pointer1 {
	position: absolute;
	top: 150px;
	left: 180px;
	width: 90px;
	line-height: 18px;
}

#pointer2 {
	position: absolute;
	top: 186px;
	left: 187px;
	width: 70px;
	line-height: 18px;
}

#pointer3 {
	position: absolute;
	top: 263px;
	left: 175px;
	width: 110px;
	line-height: 18px;
	background-color: rgba(255, 255, 255, 0.7);
}

#pointer4 {
	position: absolute;
	top: 230px;
	left: 180px;
	width: 70px;
	line-height: 18px;
	background-color: rgba(255, 255, 255, 0.7);
}

#pointer5 {
	position: absolute;
	top: 10px;
	left: 200px;
	width: 70px;
	line-height: 18px;
}


#pointer6 {
	position: absolute;
	top: 60px;
	left: 75px;
	width: 70px;
	line-height: 18px;
}

#pointer7 {
	position: absolute;
	top: 180px;
	left: 6px;
	width: 70px;
	line-height: 18px;
}

#pointer8 {
	position: absolute;
	top: 250px;
	left: 20px;
	width: 100px;
	line-height: 18px;
}

#pointer9 {
	position: absolute;
	top: 108px;
	left: 92px;
	width: 70px;
	line-height: 18px;
}


#pointer10 {
	position: absolute;
	top: 320px;
	left: 130px;
	width: 70px;
	line-height: 18px;
}

#pointer11 {
	position: absolute;
	top: 280px;
	left: 180px;
	width: 100px;
	line-height: 18px;
}

#btn_12 {
	position: relative;
	left: -15px;
}

.span_width {
	width: 40px;
}