@charset "UTF-8";

html {
	margin:0px;
	padding:0px;	
	height:100%;
	width:100%;
	overflow:hidden;
	background: #333333;					/* for non-css3 browsers */
}


body {
	position:absolute;
	height:100%;
	width:100%;
	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%
			);				
	font-family:Helvetica,Arial,sans-serif;
	font-size:18px;
	color:#FFFFFF;
	}
	


#app_zoomer {
	position:absolute;
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
	}

	@media screen and (min-width: 1100px),
	screen and (min-height: 750px) {
		#app_zoomer {
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-o-transform: scale(1);
			}
		}
	@media screen and (max-width: 1099px),
	screen and (max-height: 749px) {
		#app_zoomer {
			-webkit-transform: scale(0.75);
			-moz-transform: scale(0.75);
			-o-transform: scale(0.75);
			}
		}

	#menu_viewer,
	#menu_selector,
	#detail_viewer {
		width:20%;
		}


	
a {
	cursor:pointer;
	}
	
a img,
a:hover img,
a:visited img {
	border:0;
	}
	
iframe {
	width:100%;
	height:100%;
	border:none;
}

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

	}
	
#menu_viewer {
	right:50%;
	top:50%;
	margin-right:330px;
	margin-top:-300px;
	}
	
	#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;
	}
	
.menu_icon {
	position:relative;
	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%);		
	
	/* IE fix to mimic inline-block */
	zoom: 1;
    *display: inline;
		}
		

.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(255,255,255)),
		color-stop(1, rgb(0,0,255)));	
	background: -moz-linear-gradient(left top, rgb(255,255,255) 0%, rgb(0,0,255) 100%);		
		
}


	
#detail_viewer {
	left:50%;
	top:50%;
	margin-left:330px;
	margin-top:-300px;
	
	height:652px;
	}
	
#content_viewer {
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-300px;
	margin-left:-300px;
	width:600px;
	height:600px;
	padding:0px;
	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;
	-o-transition: -webkit-transform 0.5s;
	 
	cursor: url(../images/openHand.cur), default;
}

	
.image_container {
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	margin:0px;
	padding:0px;
}
	
#credits {
	display:none;
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:12px;
	padding:3px;
}
	

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


.menu_header {
	background-color:#666666;
	padding-left:10px;
	font-size:16px;
}

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

.menu_category li:hover {
}


.submenu_container {
	position:relative;
	overflow:hidden;
	-webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -o-transition: height 0.5s;
}

.submenu {
	height:auto;
	color:#777777;
	}

.submenu li {
	padding-left:10px;
}
	
.submenu li:hover {
	background-color:rgb(127,127,127);
	background-color:rgba(255,255,255,0.5);
	color:#FFFFFF;
}

.submenu_title {
	margin:0px;
	padding:2px;
	background-color:#2E2E2E;
	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;
	-o-transition: margin-left 0.1s;
	-o-transition: padding-right 0.1s;
}

.submenu_title:hover {
}






.displayed_serie {
	display:block;
	
	*height:expression( ( (this.scrollHeight > 599) && (this.scrollHeight>this.scrollWidth) ) ? "600px" : "auto" ); /*IE hack */
	max-height:600px;
	*width:expression( ( (this.scrollWidth > 599) && (this.scrollHeight<this.scrollWidth) ) ? "600px" : "auto" ); /* IE hack */
    max-width:600px;
	
	margin: auto;
    -moz-transform: scale(1);
/*	-moz-transition: opacity 0.5s;*/
    -webkit-transform: scale(1);
/*	-webkit-transition: opacity 0.5s;*/
    -o-transform: scale(1);
/*	-o-transition: opacity 0.5s;*/
}

.serie_image {
	z-index:1;

}


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

	/* Hack for IE7- */
	*visibility:hidden;
}


#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;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;*/

}

	#zoom_control {
		position:absolute;
		display:block;
		width:300px;
		height:100%;
		left:0px;
		margin:0px;
		padding:0px;
		padding-top:5px;
		}
		
		#scrubber {
			position:relative;
			display:inline-block;
			margin:0px 5px 0px 5px;
			padding:0px;
			width:160px;
			height:14px;
			
			/* IE fix to mimic inline-block */
			zoom: 1;
		    *display: inline;
			}
			
			#scrubber_rail {
				position:absolute;
				display:block;
				z-index:500;
				
				top:0px;
				left:0px;
				width:150px;
				height:3px;
				margin:6px 5px 0px 5px;
				padding:0px;
			
				background-color:#333333;
				border-color:#CCCCCC;
				border-style:solid;
				border-width:1px;
				
				*visibility:hidden;
				}
				
			#scrubber_knob {
				position:absolute;
				display:block;
				margin:-3px 0px 0px 0px;
				padding:0px;
				z-index:501;
				cursor:pointer;
				-webkit-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;
	display:block;
	bottom:50%;
	margin-bottom:302px;
	left:50%;
	margin-left:-560px;
	padding:0px;
	z-index:100;
}

#app_title {
	position:relative;
	display:inline;
	height:90px;
	}

#icon {
	position:static;
	display:inline;
	width:60px;
	margin-bottom:1px;
	margin-left:10px;
}

#language {
	position:relative;
	display:inline-block;
	bottom:15px;

	font-size:14px;
	z-index:100;

	/* IE fix to mimic inline-block */
	zoom: 1;
	*display: inline;
	}

#language a {
	position:static;
	display:block;
	width:75px;
	padding:0px;
	padding-left:10px;
	margin:0px;
	text-decoration:none;
	}


#app_store_badge {
	position:static;
	display:inline;
	margin-bottom:13px;
	margin-left:20px;
	width:100px;
}

#help_box {
	position:static;
	display:inline-block;
	bottom:20px;
	margin-left:20px;

	font:Arial, Helvetica, sans-serif;
	font-variant:normal;
	font-size:14px;

	/* IE fix to mimic inline-block */
	zoom: 1;
	*display: inline;
}

	#help_box a,
	#help_box a:hover,
	#help_box a:visited {
		color:#999999;

		position:static;
		display:block;
		padding:0px;
		margin:0px;

	}

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;
}

.linked_chapters_button {
	color:#333333;
}

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

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



.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);
	}