@charset "UTF-8";

html {
	height:100%;
	overflow:hidden;
}


body {
	margin:0px;
	padding:0px;	
	
	background: #333333;					/* for non-css3 browsers */
	background: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0, rgb(40,40,40)),
			color-stop(0.6, rgb(100,100,100)),
			color-stop(1, rgb(25,25,25))
			);			
	background: -moz-linear-gradient(
			center bottom,
			rgb(40,40,40) 0%,
			rgb(100,100,100) 60%,
			rgb(25,25,25) 100%
			);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
				
	
	font-family:Helvetica,Arial,sans-serif;
	font-size:18px;
	color:#FFFFFF;
	}
	

#app_zoomer {
	position:absolute;
	margin-top:-50%;
	top:50%;
	margin-left:-50%;
	left:50%;
	width:100%;
	height:100%;
	}
		
	@media screen and (max-width: 1099px) {
		#app_zoomer {
			-webkit-transform: scale(0.75);
			}
		#menu_viewer,
		#menu_selector,
		#detail_viewer {
			width:25%;
			}

		}
	@media screen and (min-width: 1100px) {
		#app_zoomer {
			-webkit-transform: scale(1);
			}
		#menu_viewer,
		#menu_selector,
		#detail_viewer {
			width:20%;
			}
		}

	
a {
	cursor:pointer;
	}
	
iframe {
	width:100%;
	height:100%;
	border:none;
}

.side_strip {
	position:absolute;
	background-color:#999999;
	width:200px;
	height:600px;
	overflow:auto;
	-webkit-border-radius:10px;
	z-index:500;
	-webkit-transition: opacity 0.5s;

	}
	
#menu_viewer {
	right:50%;
	top:50%;
	margin-right:330px;
	margin-top:-300px;
//	width:20%;
	}
	
	#menu_spinner {
		display:block;
		margin:192px auto 0px auto;
		}
	
#menu_selector {
	right:50%;
	top:50%;
	margin-right:330px;
	margin-top:310px;
	height:auto;
	text-align:center;
//	width:20%;
	}
	
.menu_icon {
	display:inline-block;
	cursor:pointer;
	height:42px;
	width:42px;
	margin: 0px 3px;
	
	background-image: -webkit-gradient(
			linear,
			left top,
			right bottom,
			color-stop(0, rgb(50,50,50)),
			color-stop(1, rgb(0,0,0)));			
	background: -moz-linear-gradient(left top, rgb(50,50,50) 0%, rgb(0,0,0) 100%);		
		}
		

.menu_icon:hover {
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, rgb(150,150,150)),
		color-stop(1, rgb(0,0,0)));	
	background: -moz-linear-gradient(left top, rgb(50,50,50) 0%, rgb(120,120,120) 100%);		
		
}

.menu_icon:enabled {
	background-image: -webkit-gradient(
		linear,
		left top,
		right bottom,
		color-stop(0, rgb(256,256,256)),
		color-stop(1, rgb(0,0,256)));	
	background: -moz-linear-gradient(left top, rgb(256,256,256) 0%, rgb(0,0,256) 100%);		
		
}


	
#detail_viewer {
	left:50%;
	top:50%;
	margin-left:330px;
	margin-top:-300px;
	
	height:652px;
//	width:20%;
	}
	
#content_viewer {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-300px;
	margin-left:-300px;
	width:600px;
	height:600px;
	background-color:#000000;
	overflow:auto;
	-webkit-border-radius:15px;
	z-index:500;

	}
	
#top_image_container {
    -moz-transition: -moz-transform 0.5s;
	-webkit-transition: -webkit-transform 0.5s;
	 
	cursor: url(../images/openHand.cur), default;
	
//	-khtml-user-select: none;
//	-moz-user-select: none;
}

	
.image_container {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
/*	-webkit-user-select: none;*/

}
	
#credits {
	display:none;
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:12px;
	padding:3px;
}
	

ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
	}
	
li {
	padding-top:2px;
	padding-bottom:2px;
	}
	


.menu_header {
	background-color:#666666;
/*	text-indent:15px;*/
	padding-left:10px;
	font-size:16px;
}

.menu_category {
	background-color:#2E2E2E;
	margin-left:-10px;
	padding-left:20px;
	font-size:14px;
}

.menu_category li:hover {
	cursor:pointer;
}


.submenu_container {
	height:0px;
	overflow:hidden;
	-webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
}

.submenu {
	height:auto;
/*	border-left-width:2px;
//	border-left-style:solid;
//	border-left-color: rgba(256,256,256,0.5);
//	-webkit-transition: border-left-color 0.5s;*/
	}

.submenu li {
	padding-left:10px;
}
	
.submenu li:hover {
	background-color:rgba(256,256,256,0.5);
}

.submenu_title {
	margin:0px;
	padding:2px;
/*	background-color:#330066;*/
	border-bottom-color:white;
	border-bottom-width:3px;
   	-moz-transition: margin-left 0.1s;
	-moz-transition: padding-right 0.1s;
	-webkit-transition: margin-left 0.1s;
	-webkit-transition: padding-right 0.1s;
}

.submenu_title:hover {
/*	margin-left: -10px;
//	padding-right: 10px;*/
}



.displayed_serie {
	display:block;
	max-height:600px;
    max-width:600px;
	margin: auto;
    -moz-transform: scale(1);
	-moz-transition: opacity 0.5s;
    -webkit-transform: scale(1);
	-webkit-transition: opacity 0.5s;
}

.serie_image {
	z-index:1;
/*	-webkit-user-select: none;*/

}

.serie_mask {
	opacity:0;
	z-index:100;
/*	-webkit-user-select: none;*/

}

#content_controler {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:310px;
	margin-left:-300px;
	width:590px;
	height:32px;;
	padding:5px;
	background-color:#999999;
	text-align:center;
	-webkit-border-radius:10px;
	
	-webkit-transition: opacity 0.5s;

}

	#zoom_control {
		position:relative;
		width:300px;
		height:100%;
		left:0px;
		padding-top:5px;
		}
		
		#scrubber {
			position:relative;
			display:inline;
			}
			
			#scrubber_rail {
				position:relative;
				z-index:500;
				
				width:150px;
				height:5px;
				margin-bottom:2.5px;
				margin-left:5px;
				margin-right:5px;
				
				background-color:#333333;
				}
				
			#scrubber_knob {
				position:absolute;
				z-index:501;
				cursor:pointer;
				-khtml-user-select: none;
				-moz-user-select:none;
				
				top:4px;
				left:0px;
				}
				
	#series_control {
		position: absolute;
		height: 100%;
		top:0px;
		padding-top:10px;
		right:0px;
		padding-right:20px;
		}
		
		#series_control a {
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 5px;
			padding-right: 5px;
			}
		
		#series_control a:hover {
			background-color:#CCCCCC;
			}

#title {
	font-family:Lucida Sans;
	font-variant:small-caps;
	font-size:70px;
	font-weight:100;
	
	position:absolute;
	bottom:50%;
	margin-bottom:302px;
	left:50%;
	margin-left:-560px;
	z-index:100;
}

#icon {
	width:60px;
	margin-bottom:-5px;
	margin-left:10px;
	-webkit-border-radius:10px;
}

#language {
	display:inline;
	font-size:14px;
	position:absolute;
	margin:10px;
	bottom:0%;
	padding-bottom:8px;
	z-index:100;
}

h1 {
	font-size:23px;
	margin-top:10px;
	margin-bottom:3px;
}

h2 {
	font-size:17px;
	margin-top:5px;
	margin-bottom:0px;
}

h3 {
	font-size:17px;
	margin:0px;
}

p {
	font-size:14px;
	margin-top:3px;
	margin-bottom:5px;
}

#detail_viewer li {
	padding-left:10px;
	padding-right:10px;
}

.interpretation_footer {
	text-align:right;
	font-size:10px;
}

.animated_hover {
	-moz-transition: background-color 0.5s;
	-webkit-transition: background-color 0.5s;
	cursor:pointer;
}

.hover_mask01:hover {
	background-color: rgba(256,0,0,0.5);
}
.hover_mask02:hover {
	background-color:rgba(0,256,0,0.5);
}
.hover_mask03:hover {
	background-color:rgba(0,0,256,0.5);
}
.hover_mask04:hover {
	background-color:rgba(0,256,256,0.5);
}
.hover_mask05:hover {
	background-color:rgba(256,0,256,0.5);
}
.hover_mask06:hover {
	background-color: rgba(256,256,0,0.5);
}