@charset "UTF-8";

html,
body {
	margin:0;
	padding:0;
	height:100%;
	background-color:#333333;
	
	font-family:Verdana, Helvetica, Arial, sans-serif;
	font-size:16px;
	color:white;
	}
	
a,
a:hover,
a:visited {
	color:white;
	text-decoration:none;
	}
	
#app_container {
	position:fixed;
	display:block;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	
/*	background-image:url('images/background.jpg');*/
	}
	
	
	#header {
		position:absolute;
		display:block;
		margin:0;
		padding:2px 0;
		top:0px;
		left:0px;
		width:100%;
		height:56px;
		}
		
		#app_logo {
			display:inline;
			padding:0 0 0 5px;
			height:100%;
			}
		#app_icon {
			position:relative;
			display:inline;
			padding:0 10px;
			bottom:3px;
			height:90%;
			}
		#appstore_icon {
			position:relative;
			display:inline;
			padding:0 10px;
			bottom:10px;
			height:35px;
			}
		#langage_picker {
			position:absolute;
			display:block;
			margin:0;
			padding:0;
			top:14px;
			right:12px;
			list-style:none;
			font-size:12px;
			text-align:right;
			}


	#columns_container {
		position:fixed;
		display:block;
		margin:0;
		padding-left:200px;
		padding-right:275px;
		top:60px;
		right:0px;
		bottom:14px;
		left:0px;
		user-select: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-khtml-user-select: none;
		}

		.main_container {
			height:100%;
			overflow:visible;
			}
			
			#left_container {
				position:absolute;
				left:0px;
				width:200px;
				z-index:500;	
				}
							
			#right_container {
				position:absolute;
				right:0px;
				width:275px;
				z-index:400;
				}
				
				.resize_handle_container {	/* This div defines the clickable area */
					position:absolute;
					margin:0;
					padding:0 6px;
					height:100%;
					width:3px;
					z-index:900;
/*background-color:#CCCCCC;*/
					cursor:col-resize;
   					}
					
					#left_container_resize_handle_container {
						right:-6px;
						}
						
					#right_container_resize_handle_container {
						left:-6px;
						}
					
					.resize_handle {	/* This div defines the actual drawn handle */
						position:relative;
						display:block;
						margin:0 auto;
						padding:0;
						height:100%;
						background-color:#666666;
						}
				
				#menu_container {
					position:absolute;
					margin:0;
					padding:0;
					height:100%;
					width:100%;
					overflow:auto;
					}
					
					#menu_container ul {
						margin:0;
						padding:0;
						}
					#menu_container ul li {
						margin:7px 0 3px 0;
						padding:2px 5px;

						background-color:#666666;
						font-size:14px;
						}
					#menu_container ul ul li {
						margin:0;
						padding:2px 20px;
						
						background-color:#333333;
						font-size:14px;
						}
					#menu_container ul ul li:hover {
						}
					#menu_container ul ul ul li {
						margin:0;
						padding:2px 25px;
						
						color:#999999;
						font-size:12px;
						}

					#menu_container ul ul ul li:hover {
						border-left:solid;
						border-left-width:7px;
						padding-left:18px;
						cursor:pointer;
						color:#FFFFFF;
						}					
					
			#center_container {
				position:relative;
				display:block;
				z-index:300;
background-color:black;
text-align:center;
				}
				
				.overlayed_control{
					position:absolute;
					display:block;
					margin:3px 5px;
					z-index:800;
					}
				#layout_control img {
					height:16px;
					}
				#pt_control{
					left:60px;
					text-align:left;
					}
				.series_control{
					right:0px;
					text-align:right;
					}
					
				.overlayed_control ul{
					display:none;
					margin:0px;
					padding:0px;
					list-style:none;
					}
				.overlayed_control_header {
					margin-bottom:5px;
					padding:5px;
					-webkit-border-radius:10px;	
					background-color:rgba(60,60,60,0.6);
					font-size:12px;
					}
					.overlayed_control_header:hover{
						cursor:pointer;
						color:#333333;
						background-color:rgba(255,255,255,0.8);
						}
				.overlayed_control_choice {
					padding:5px;
					background-color:rgba(60,60,60,0.6);
					font-size:12px;
					}
					.overlayed_control_choice h1 {
						margin:0;
						padding:0;
						font-size:12px;
						font-weight:normal;
						}
					.overlayed_control_choice h2 {
						margin:0;
						padding:0;
						font-size:10px;
						font-weight:normal;
						}

					.overlayed_control_choice:hover{
						cursor:pointer;
						color:#333333;
						background-color:rgba(255,255,255,0.8);
						}
					#pt_control .overlayed_control_selected,
					#layout_control .overlayed_control_selected {
						border-left:solid;
						border-left-width:7px;
						border-left-color:rgba(255,255,255,0.8);
						}

					.series_control .overlayed_control_selected {
						border-right:solid;
						border-right-width:7px;
						border-right-color:rgba(255,255,255,0.8);
						}
					
				#image_control{
					position:absolute;
					display:block;
					bottom:0px;
					width:100%;
					height:30px;
					background-color:rgba(0,0,0,0.6);
					font-size:12px;
					}
					#zoomer {
/*display:none;*/
background-color:#FF0000;
						}
						.zoom_button {
							position:relative;
							display:inline;
							padding:10px;
							}
						#zoom_scroller {
							position:absolute;
							display:inline;
							}
							#zoom_track {
								position:absolute;
								display:block;
								width:200px;
								height:10px;
background-color:#006600;
								}
							#zoom_scroll_button_area {
								position:absolute;
								padding:5px;
background-color:#993300;
display:none;
								}


				#series_container {
					position:absolute;
					display:block;
					width:100%;
					height:100%;
					overflow:hidden;
					cursor: url(images/openHand.cur), default;
					}
					
					.serie_container {
						position:relative;
						display:none;
						margin:0;
						padding:0;
						height:100%;
						width:100%;
						overflow:hidden;
						}
						
						.current_displayed_serie {
							display:inline-block;
							}
							
						.serie_zoomer {
							position:absolute;
							display:block;
							margin:auto;
							padding:0;
							width:100%;
							height:100%;
							overflow:hidden;
							z-index:100;
							}
							
						.serie_zoomer img {
							position:absolute;
							display:block;
							margin:auto;
							padding:0;
							max-width:100%;
							max-height:100%;
/*	*height:expression( ( (this.scrollHeight > 599) && (this.scrollHeight>this.scrollWidth) ) ? "600px" : "auto" ); /*IE hack */
/*
	max-height:100%;
	*width:expression( ( (this.scrollWidth > 599) && (this.scrollHeight<this.scrollWidth) ) ? "600px" : "auto" ); /* IE hack */
/*
    max-width:100%;
*/
							}

						.serie_mask {
							opacity:0.35;
							filter: alpha(opacity = 35);
							/* Hack for IE7- */
							*visibility:hidden;
							}




/*

#top_image_container {
    -moz-transition: -moz-transform 0.5s;
	-webkit-transition: -webkit-transform 0.5s;
	-o-transition: -webkit-transform 0.5s;

	width:100%;
	height:100%;

	 
	cursor: url(../images/openHand.cur), default;



}

	
.image_container {
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	margin:0px;
	padding:0px;
}


.displayed_serie {
	position:absolute;
	display:block;
	
	
	margin: auto;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
}

.serie_image {
	z-index:1;

}


.serie_mask {
	opacity:0.35;
	filter: alpha(opacity = 0);
	z-index:100;

	/* Hack for IE7- */

/*
	*visibility:hidden;
}









*/




















	
	#footer {
		position:absolute;
		bottom:0px;
		left:0px;
		padding:1px 4px;

		color:#999999;		
		font-size:10px;
		}
		
		#footer a {
			text-decoration:underline;
			}
			
.hover_mask01:hover {
	background-color:rgb(203,76,76);
	background-color: rgba(255,0,0,0.5);
	}
.hover_mask02:hover {
	background-color:rgb(76,203,76);
	background-color:rgba(0,255,0,0.5);
	}
.hover_mask03:hover {
	background-color:rgb(76,76,203);
	background-color:rgba(0,0,255,0.5);
	}
.hover_mask04:hover {
	background-color:rgb(76,203,203);
	background-color:rgba(0,255,255,0.5);
	}
.hover_mask05:hover {
	background-color:rgb(203,76,203);
	background-color:rgba(255,0,255,0.5);
	}
.hover_mask06:hover {
	background-color:rgb(203,203,76);
	background-color: rgba(255,255,0,0.5);
	}
.hover_mask07:hover {
	background-color:rgb(203,140,76);
	background-color: rgba(255,128,0,0.5);
	}
.hover_mask08:hover {
	background-color:rgb(203,76,140);
	background-color: rgba(255,0,128,0.5);
	}
.hover_mask09:hover {
	background-color:rgb(76,203,140);
	background-color: rgba(0,255,128,0.5);
	}
.hover_mask10:hover {
	background-color:rgb(140,76,203);
	background-color: rgba(128,0,255,0.5);
	}
	
#parameters {
	display:none;
	}