/* Reset Styles */
/*==============*/
#ryu_mask { display:none;}
	@-ms-viewport { width: device-width; }
html, body, div, applet, object, iframe,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	display: block;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
span { display: inline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Welcome / Thank You Messages */

.plank {
	position: relative;
	width: 50%;
	padding-top: 20%;
}

.plank p {
	text-align: center;
	font-size: 24px;
	margin: 0 100px;
	line-height: 26px;
}

.plank .salute, .plank h1, .plank h2, .plank h3, .plank h4 {
	text-align: center;
	font-weight: bold;
	font-size: 48px;
	line-height: 60px;
}

/* UI Top Level Containers */
/*=========================*/
html, body {
position: absolute;
top: 0; left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; 
	-ms-touch-action: none; /* hopeful fix for IE10 on touch device */
}

body {
	font-family: Arial,FreeSans,sans-serif;
	background: #666;
/*	-webkit-transform:translateZ(0); /* In theory this forces hardware accel. */
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 1s;
		-webkit-transition-delay: 0s;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 1s;
		-moz-transition-delay: 0s;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 1s;
		-o-transition-delay: 0s;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 1s;
		-ms-transition-delay: 0s;
		transition-timing-function: ease-in-out;
		transition-duration: 1s;
		transition-delay: 0s;

}

body * {
/*    -webkit-transform: translate3d(0,0,0); */
/* not to self: what was this for?  Why is this here?  possibly native scrolling fix? */
}
	#gridbox {
		position: relative;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
		margin: 0 auto;
		-webkit-transition-property: all;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 1s;
		-webkit-transition-delay: 0s;
		-moz-transition-property: all;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 1s;
		-moz-transition-delay: 0s;
		-o-transtion-property: all;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 1s;
		-o-transition-delay: 0s;
		-ms-transtion-property: all;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 1s;
		-ms-transition-delay: 0s;
		transition-property: all;
		transition-timing-function: ease-in-out;
		transition-duration: 1s;
		transition-delay: 0s;
	}
	.grid_deck {
		left: -105%;
	}
	.grid_in {
		left: 0%;
	}
	.grid_out {
		left: 105%;
	}
	
		#loadicon {
			position: absolute;
			top: 50%;
			left: 50%;
			height: 64px;
			width:64px;
			margin: -32px 0 0 -32px;
			z-index:3000;
			background: transparent url('../images/app/ui/spinbox.gif') 0 0 no-repeat;
			display: none;
		}
/* New Ryuzine Machine Theming */
#wrapper {
	background: black;
}
.machine .button {
	margin: 6px;
}
	.machine .formbutton {

	}
.workspace {
	background: #333;
	color: #eee;
}
	#go2sim {
		font-size: 12px;
		color: #fff;;
		height: 44px !important;
		line-height: 44px !important;
	}
	.tab {
		background: #333;
		color: #fff;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-o-border-radius: 0;
		-ms-border-radius: 0;
		border-radius: 0;
		border-right: 1px solid black;
		border-bottom: 1px solid #333;
	}
#export .input_screens, #databuilder .input_screens, #config_form, .input_screens {
		background: #333;
		border-top: 1px solid black;
	}
	.codebox, #inputBox { 
		background: white;
		border: 1px solid black;
		color: #000;
	}
	.ryudialog {
		border: 2px solid #fff;
		background: #333;
		color: #fff;
	}
	.machine .navbars, .machine .titlebar {
		margin-bottom: -44px;
	}
	
	.machine #navbar0 .back {
		margin-top: 5px;
	}
		
	.machine #navbar0 .next {
		margin-top: 5px;
	}

/* END RYUZINE MACHINE THEME */

#skip2nav {
 display: none;
}


#binder { /* Fine-tune centering of spreads to account for control bars */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 1s;
		-webkit-transition-delay: 0s;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 1s;
		-moz-transition-delay: 0s;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 1s;
		-o-transition-delay: 0s;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 1s;
		-ms-transition-delay: 0s;
		transition-timing-function: ease-in-out;
		transition-duration: 1s;
		transition-delay: 0s;
}
	.binder_shift, .binder_unshift {
		margin: 0;
	}

#upbox {
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 100%;
	width: 100%;
	visibility: hidden;
	display: none;
	overflow: hidden;
	z-index: 1500;

}
	#under_glass { /* Needed in tablet or desktop view */
		position: absolute;
		left: 0px;
		top: 0px;
		height: 100%;
		width: 100%;
		z-index: 10;
	}
	#upbox ul, #upbox ol, #upbox li {
		display: block;
		padding: 0;
		margin: 0;
	}

/* Control Toggle Switch (if controls are hidden) */
/*================================================*/
#switchbox {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		z-index: 975;
		visibility: visible;
		display: block;
		opacity: 1;
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: .25s;
		-moz-transition-property: opacity;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: .25s;
		-o-transition-property: opacity;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: .25s;
		-ms-transition-property: opacity;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: .25s;
		transition-property: opacity;
		transition-timing-function: ease-in-out;
		transition-duration: .25s;
	}
	
	#controltoggle {
		position: absolute;
		top: -44px;
		right: 0;
		width: 44px;
		height: 44px;
		background-color: #000;
		opacity: .25;
		-webkit-border-top-left-radius: 10px;
		-moz-border-radius-topleft: 10px;
		border-top-left-radius: 10px;
		z-index: 999;
	
		-webkit-transition: opacity;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: .25s;
		-moz-transition-property: opacity;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: .25s;
		-o-transition-property: opacity;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: .25s;
		-ms-transition-property: opacity;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: .25s;
		transition-property: opacity;
		transition-timing-function: ease-in-out;
		transition-duration: .25s;
	}
		#controltoggle:hover, #controltoggle:focus {
			opacity: .75;
		}
		#controltoggle p {
			font-family: Arial, sans-serif;
			font-size: 24px;
			text-align: center;
			margin: 0px;
			line-height: 48px;
			color: #CCC;
			font-weight: bold;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

/* Splash "Loading..." Page */
/*==========================*/
#splash {		
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	z-index: 2000;
	font-family: Arial,FreeSans,sans-serif;
	overflow: hidden;
	visibility: visible;
	color: #eee;
	display: table;
	background: #000;

	/* Uncomment block below to animate splash screen 					*/
	/* Then set parameter(s) to animate in splash_in/splash_out below 	*/
	/* 
		-webkit-transiton: all;
		-webkit-transform-origin: 50% 50%;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 1s;
		-webkit-transition-delay: 0ms;
	
		-moz-transition: all;
		-moz-transform-origin: 50% 50%;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 1s;
		-moz-transition-delay: 0s;
	
		-o-transition: all;
		-o-transform-origin: 50% 50%;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 1s;
		-o-transition-delay: 0s;
	
		-ms-transition: all;
		-ms-transform-origin: 50% 50%;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 1s;
		-ms-transition-delay: 0s;
	
		transition: all;
		transform-origin: 50% 50%;
		transition-timing-function: ease-in-out;
		transition-duration: 1s;
		transition-delay: 0s;
	*/
}

.splash_in {

}


.splash_out {

}

	#racktop {
		background: rgb(193,196,206);
	}
		#racktop h1 {
			font-size: 48px;
			font-weight: bold;
			color: #fff;
		}
	
	#splashcell {
		overflow: hidden;
		display: table-cell;
		vertical-align: middle;
	}
	
	#splashblock {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		z-index: 10;
		display: table;
	}
	
	.splash-title {
		font-size: 50px;
		font-weight: bold;
		letter-spacing: -3px;
		color: #fff; 
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: -40px;
	}
	
	.splash-port {
		font-size: 25px;
		color: #27AAE1; 
		text-align: right;
		margin-right: -5px;
		}
		.splash-port span {
			font-size:12px;
			vertical-align: super;
			margin: -5px;
		}
	
	.splash-notice {
		font-size: 25px;
		text-align: center;
		margin-top: 45px;
	}
	
	.splash-fineprint {
		position: absolute;
		bottom: 0px;
		width: 100%;
		text-align: center;
		font-size: 12px;
		}
		.splash-fineprint a {
			color: #fff;
			text-decoration: none;
		}
		.splash-fineprint a:visited {
			color: #ccc;
		}
		.splash-fineprint a:hover {
			text-decoration: underline;
		}

/* Generic Positioning Styles */
/*============================*/
	.relative {
		position: relative;
	}

	.left {
		float: left;
		display: block;
	}
	
	.right {
		float: right;
		display: block;
	}
	
	.center {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	
	.clear {
		clear: both;
		display: block;
	}
	
	.rotate45 {
		display: block;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transfrom: rotate(45deg);
		transform: rotate(45deg);
	}

	
/* Generic Percentage Width Styles */
/*=================================*/

	.quarter {
		width: 20%;
	}
	
	.half {
		width: 45%;
	}
	
	.full {
		width: 90%;
	}
	
	
/* Generic Styles for UI Labels */
.title {
	color: #fff;
	text-align: left;
    font-size: 24px;
    line-height:43px; /* Same as navbars/titlebars height */
	font-family: Arial,FreeSans,sans-serif;
	font-weight: normal;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin: 0;
}

.button p {
	font-family: Arial,FreeSans,sans-serif;
	font-size: 18px;
	font-weight: lighter;
	color: #fff;
	line-height: 30px; /* Same as button height */
	text-decoration: none;
	-webkit-appearance: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button p {	/* make sure highlight covers button */
	height: 100%;
	width: 100%;
	margin: 0;
}
	.tablabel { display: none; } /* More-Less buttons have label and symbol */

/* Generic Navbar/Tabbar Styles */
/*==============================*/

	/* Apply to ALL Navbars & Tabbars */
	.navbars, .titlebar {
		width: 100%;
		height: 44px;
		visibility: visible;
		display: block;
		overflow: hidden;
		border-bottom: 1px solid #333;
		background: #111;
	}
	
	.tabbars {
		position: absolute;
		width: 100%;
		height: 44px;
		visibility: visible;
		display: block;
		overflow: hidden;
		border-top: 1px solid #333;
		background: #111;
	}
	
	
	/* Navbar/Tabbar Slidebox */
	.controlset {
		position: absolute;
		margin: 0;
		width: 100%;
		height:100%;
		-webkit-perspective: 1000; /* iPhone flicker fix */
		-webkit-backface-visibility: hidden; /* iPhone flicker fix */
		-webkit-transition: left;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 500ms;
		-moz-transition: left;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 500ms;
		-o-transition: left;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 500ms;
		-ms-transition: left;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 500ms;
		transition: left;
		transition-timing-function: ease-in-out;
		transition-duration: 500ms;
	}
	
	.navset, .subnav {
		position: absolute;
		margin: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		-webkit-perspective: 1000; /* iPhone flicker fix */
		-webkit-backface-visibility: hidden; /* iPhone flicker fix */
		-webkit-transition: top;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 500ms;
		-moz-transition: top;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 500ms;
		-o-transition: top;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 500ms;
		-ms-transition: top;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 500ms;
		transition: top;
		transition-timing-function: ease-in-out;
		transition-duration: 500ms;
		
		-webkit-transition-delay: 200ms; /* Chrome requires a delay */
	}
	
/* Generic Panel and Button Styles */
/*=================================*/
	/* Panel Appearances (applies to ALL Panels) */
	.panel, .minipanel {
		overflow: visible;
	}
	
	
		.panel .title {
			margin: 0 0 0 8px;		
		}
		.panel .titlebar {
			height: 43px;
			overflow: hidden;
		}
		
		.panel .titlebar .button {
			position: relative;
			top: -43px; /* Minus titlebar height */
			height: 30px;
			width: 50px;
			margin: 7px;
		}
		
		.pointer {
			position: relative;
			background: #111;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			z-index: 0;
		}
	/* Panel Sub-Type Appearances */
	.panel_A { /* Used for Help & TOC */
		background: #111;
	}
		.panel_A .titlebar {
		 	display: block;
		}
		.panel_A .area {
			background: #111;
			-webkit-overflow-scrolling: touch;
		}
		.panel_A .area * {
			/* native scroll render-fix fairy dust */
		   	position: relative;
    		-webkit-transform: translate3d(0,0,0);
    	}
    	.panel_A .area .scrollbox {
    		width: 100%;
    	}
	
	.panel_B { /* Used for Fonts & Share */	
		background: #111; /* old browsers */
	}
		.panel_B .titlebar {
			display: none;
		}
		.panel_B .area {
		
		}
	
	.panel_C { /* Used for Views */
		background: #111; /* old browsers */
		border-top: 1px solid #333;
	}
		.panel_C .titlebar {
			display: none;
		}
		.panel_C .area {
			position: relative;
			z-index: 1;
		}


	/* Dialog Boxes */
	.dialog {
		background: rgb(193,196,206);
	}
	
	/* Button Appearances */
	.button { /* Default Generic Button */
		position: relative;
		height: 30px;
		text-align: center;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		background-color: #111; /* old browsers */
		border: 1px solid #fff;
	}
	.button:hover {
		background-color: #0556A5;
	}
	
	.type1 { /* Standard Button */

	}
	.type1:hover, .type1:focus {
	}
		.type1 p {
		}
		.type1:hover p, .type1:focus p {
			color: #fff;
		}
	
	.type2 { /* Blue Button */

	}
	
	.type2:hover, .type2:focus {

	}
		.type2 p {
		}
		
		.type2:hover p, .type2:focus p {
			color: #fff;
		}
	
	.type3 { /* Widebutton */
		position: relative;
		width: 90%;
		max-width: 600px;
		min-width:300px;
		height: 40px;
		margin: 0 auto 10px auto;
		float: top;
		border: 1px solid #333;
		z-index: 3;
		background: #333; /* old browsers */		
	}
	
	.type3:hover, .type3:focus {
		background: #27AAE1; /* old browsers */
	}
	
		.type3 p {
			color: #fff;
			text-align: center;
			font-size: 21px;
			line-height: 40px;
			font-family: Arial,FreeSans,sans-serif;
			font-weight: lighter;
		}
		
		.type3:hover p, .type3:focus p {
			color: #fff;
		}
		
		
	.type4 { /* Wide Cancel Button */
		position: relative;
		width: 90%;
		max-width: 600px;
		min-width:300px;
		height: 40px;
		margin: 20px auto 10px auto;
		float: top;
		border: 1px solid #fff;
		z-index: 3;
		background: #0556A5; /* old browsers */	
	}
	
	.type4:hover, .type4:focus {
		background: #27AAE1; /* old browsers */
	}
	
		.type4 p {
			color: #fff;
			text-align: center;
			font-size: 21px;
			line-height: 40px;
			font-family: Arial,FreeSans,sans-serif;
			font-weight: lighter;
		}
		.type4:hover p, .type4:focus p {
		}
		
		
	.arrow {
		position: relative;
		width: 23px;
		height: 23px;
		margin-bottom: -26px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		background: #333; /* old browsers */
		display: none;
	}
	
		.arrow:hover {
			background: #333; /* old browsers */
		}
	

		.back .button {
			left: 5px;
			width: 50px;
			margin-top: -5px;
		}	
		.back .arrow {
			left: 5px; 
		}
		

		.next .button {
			width: 50px;
			margin-top: -5px;
		}
		.next .arrow {
			left:27px;
		}
		/* If you mouse over any part of .back or .next show hover for both .button and .arrow */
		.back:hover .button, .back:focus .button,
		.next:hover .button, .next:focus .button {
			background: #0556A5;
		}
		.back:hover .arrow, .back:focus .arrow,
		.next:hover .arrow, .next:focus .arrow {
			background: #333; /* old browsers */
		}
		.double {
		display: table;
		position: relative;
		top: -40px;
		margin: 0 10px 0 10px;
		width: 20%;
		}
		.double .button {
			width: 48%;
		}
			.double .right {
				float: left;
			}			
	.firstnav, .lastnav {
		display: none;
	}

.flipleft {
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	width: 48px;
}

.margin-arrow {
	opacity: .50;
}

.flipleft .margin-arrow {
	position: absolute;
	top: 50%;
	left: 12px;
	width:0px; 
	height:0px; 
	border-top:20px solid transparent;  /* left arrow slant */
	border-bottom:20px solid transparent; /* right arrow slant */
	border-right:20px solid #ccc; /* top, add background color here */
}

.flipleft:hover .margin-arrow {
	border-right:20px solid #333;
	opacity: 1.0;
}

.flipright {
	position: absolute;
	top: 0; right: 0;
	height: 100%;
	width: 48px;
}

.flipright .margin-arrow {
	position: absolute;
	top: 50%;
	left: 15px;
	width:0px; 
	height:0px; 
	border-top:20px solid transparent;  /* left arrow slant */
	border-bottom:20px solid transparent; /* right arrow slant */
	border-left:20px solid #ccc; /* top, add background color here */
}

.flipright:hover .margin-arrow {
	border-left:20px solid #333;
	opacity: 1.0;
}

.flipper {
	display: block;
}

.flipper:hover {
	background: #ccc;
	opacity: .50;
}

/* Control Boxes Size and Positioning */
/*====================================*/
/* (navbar and tabbar go inside these)*/

	#controlbox0 {
		position: absolute;
		left: 0;
		width: 100%;
		visibility: visible;
		display: block;
		z-index: 1000;
		-webkit-transition: top, bottom;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 500ms;
		-moz-transition: top, bottom;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 500ms;
		-o-transition: top, bottom;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 500ms;
		-ms-transition: top, bottom;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 500ms;
		transition: top, bottom;
		transition-timing-function: ease-in-out;
		transition-duration: 500ms;
	}
	#controlbox1 {
		position: absolute;
		left: 0;
		width: 100%;
		height: 44px;
		visibility: visible;
		display: block;
		z-index: 1800;
		-webkit-transition: top, bottom;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 500ms;
		-moz-transition: top, bottom;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 500ms;
		-o-transition: top, bottom;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 500ms;
		-ms-transition: top, bottom;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 500ms;
		transition: top, bottom;
		transition-timing-function: ease-in-out;
		transition-duration: 500ms;
	}
		/* Assigned Dynamically to Hide or Show Controls */
		.navbars_hide {
			top: -45px; 		/* <--- 0 = show always | -45 = hide */
		}
		.navbars_show {
			top: 0px;
		}
		
		.tabbars_hide {
			bottom: -45px; 		/* <--- 0 = show always | -45 = hide */
		}
		.tabbars_show {
			bottom: 0px;
		}

/* Size & Position of Navbar and Tabbar */
/*======================================*/
	#navbar0 {
		position: absolute;
		z-index: 1;
		display: none;
	}
		#navbar0 .controlset{
			width: 100%;
		}
		#navbar0 .title {
			text-align: center;
		}
		
		.nav_deck {
			top: 45px;
		}
		
		.nav_in {
			top: 0px;
		}
		.nav_out {
			top: -45px;
		}
		
		/* Size & Position of Buttons */
		#navbar0 .back {
			position: relative;
			left: 0px;
			width: 57px;
			height: 43px;
			margin: -39px 10px 0 5px;
			padding-top: 5px;
			float: left;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
		}
		
		#navbar0 .next {
			position: relative;
			float: right;
			width: 57px;
			height: 43px;
			margin: -39px 5px 0px 10px;
			padding-top: 5px;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
		}
		
	#tabbar0 {
		width: 100%;
		height: 43px;
		visibility: visible;
		display: block;
		overflow: hidden;
	}
		.control_deck {
			left: 100%;
		}
		
		.control_in {
			left: 0%;
		}
		.control_out {
			left: -100%;
		}
		
		
	#helpbutton {
		margin-top: -32px;
		margin-left: 10px;
	}
	#tocbutton {
		margin-top: 7px;
	}
	#morebutton1 {
		margin-top: -32px;
		margin-right: 10px;
	}
	#lessbutton1 {
		margin-top: 7px;
		margin-left: 10px;
	}
	#fontbutton {
		margin-top: 7px;
		margin-left: 10px;
	}
	#viewsbutton{
		margin-top: 7px;
		margin-right: 10px;
	}
	#morebutton2 {
		margin-top: 7px;
		margin-right: 10px;
	}
	#lessbutton2{
		margin-top: -32px;
		margin-left: 10px;
	}
	#sharebutton{
		margin-top: 7px;
	}
	#optbutton{
		margin-top: -32px;
		margin-right: 10px;
	}
		#optbutton p {
			font-size: 24px;
			font-weight: normal;
		}
	/* Ryuzine Rack Buttons */
	#rackhome, #racksearch {
		margin: -40px 10px;
	}


/* Size & Position of Bookmarks Panel */
/*===============================*/
	#bmark_panel {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.bmarkIN {
		left: 0px;
		bottom: 0%;
		z-index: 20;
	}
	
	.bmarkOUT {
		left: 0px;
		bottom: -200%;
		z-index: 1;
	}
		#bmark_panel #addmark {
			z-index: 5;
			margin: 49px 5px 0 8px;
		}
	
		#bmark_panel .area {
			height: 100%;
			position: relative;
			overflow-x: hidden;
			overflow-y: auto;
			z-index: 1;
		}
		
		#bmark_panel ul {
			margin: 0;
		}
			#bmark_panel ul li {
				height: 43px;
				width: auto;
				margin: 0;
				border-bottom: 1px solid #333;
				-webkit-tap-highlight-color: rgba(0,0,0,0);
			}
				#bmark_panel ul li a {
					width: auto;
					display: block;
					font-family: Arial,FreeSans,sans-serif;
					font-weight: lighter;
					font-size: 24px;
					line-height: 43px;
					text-decoration: none;
					margin-left: 10px;
					background: url('../images/app/ui/mark.png') 0 13px no-repeat;
					padding-left:18px;
					-webkit-touch-callout: none;
				}
				
				#bmark_panel ul .button {
					width: 63px;
					margin-top: -38px;
					margin-right: 8px; 
					background: #cc0000;
				}
				
				#bmark_panel ul li .button:hover, #bmark_panel ul li .button:focus {
					background: #930000;
				}
		
/* Size & Position of Options Panel */
/*==============================*/
	#opt_panel {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.optIN {
		bottom: 0%;
		z-index: 20;
	}
	
	.optOUT {
		bottom: -200%;
		z-index: 1;
	}
	
		#opt_panel .area {
			background: #111;
			height: 100%;
			position: relative;
			overflow-x: hidden;
			overflow-y: auto;
			z-index: 1;
			
		}
		#upbox #altoptdone {
			display:none;
		}
		
		#opt_panel ul {
			margin: 10px;
			width: auto;
		}
			#opt_panel ul li {
				height: 43px;
				width: auto;
				background: #111;
				border-bottom: 1px solid #333;
				-webkit-tap-highlight-color: rgba(0,0,0,0);
				overflow: hidden;
			}
				#opt_panel ul li a {
					width: 100%;
					display: block;
					font-family: Arial,FreeSans,sans-serif;
					font-weight: bold;
					font-size: 18px;
					line-height: 43px;
					text-decoration: none;
					margin-left: 10px;
					-webkit-touch-callout: none;
				}
	.optitem {
		font-size: 18px;
		font-weight: lighter;
		color: #999;
		line-height: 43px;
		padding-left: 8px;
	}
		.opt-disabled {
			color: #333;
		}
	.opt-track {
	width: 94px;
	height: 27px;
	border: 1px solid #333;
	background: #333;
	overflow: hidden;
	margin: 8px 8px 8px -100%;
	float: right;
	position: relative;
	z-index: 0;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	.opt-slider {
		position: absolute;
		width: 150px;
		line-height: 27px;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
	}
		.opt-slider .on-label {
			position: absolute;
			left: 0; top: 0;
			width: 55px;
			height: 27px;
			background: #0556A5;
		}
			.on-label .on-txt {
				color: #fff;
				display: block;
			}
			.on-label .on-sym {
				display: none;
			}
			
	.opt-button {
		position: absolute;
		left: 54px;
		top: -1px;
		width: 40px;
		height: 27px;
		border: 1px solid #333;
		background: #000;
		text-align: center;
		cursor: pointer;
		z-index: 10;
	}
	
		.opt-track .off-label {
			position: absolute;
			top: 0;
			left: 94px;
			color: #666;
			width: 56px;
			height: 27px;
		}
			.off-label .off-txt {
				display: block;
			}
			
		.optON {
			left: 0px;
		}
		.optOFF {
			left: -55px;
		}

		#opt_panel ul .opt-first {
		}
		
		#opt_panel ul .opt-last {
		}
		
		#opt_panel ul .opt-solo {
			list-style: none;
		}

		
		#opt_panel .smallprint {
			text-align: center;
			color: #666;
			font-size: 14px;
			margin: 10px;
		}
		#aboutbutton, #altoptdone {
			min-width: 0;
		}


/* Size & Position of TOC Panel */
/*==============================*/
	#toc_panel {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.tocIN {
		left: 0px;
		bottom: 0%;
		z-index: 20;
	}
	
	.tocOUT {
		left: 0px;
		bottom: -200%;
		z-index: 1;
	}
	
		#toc_panel .area {
			height: 100%;
			position: relative;
			overflow-x: hidden;
			overflow-y: auto;
			background: #111;
			z-index: 1;
		}
		
		#toc_panel ul {
			margin: 0;
		}
			#toc_panel ul li {
				height: 43px;
				width: auto;
				margin: 0;
				border-bottom: 1px solid #333;
				-webkit-tap-highlight-color: rgba(0,0,0,0);
			}
				#toc_panel ul li a, #toc_panel ul li .label {
					width: auto;
					display: block;
					font-family: Arial,FreeSans,sans-serif;
					font-weight: lighter;
					font-size: 24px;
					line-height: 43px;
					text-decoration: none;
					margin: 0 0 0 10px;
					-webkit-touch-callout: none;
				}
				
	/* Navigation List Element Colors */
	/* Following are used by script to dynamically assign style */
	.list_up {
		/* Setting a background color obscures border radius on container */

	}
	.list_up a, .list_up .label {
		color: #999;
	}
	.list_down {
		background: #0556A5;
	}
	.list_down a, .list_down .label {
		color: #fff;
	}

/* Size & Position of Fonts Panel */
/*================================*/
	#font_panel {
		position: absolute;
		left: 2%;
		height: 40px;
		width: 186px;
	}
	
	.fontIN {
		bottom: 70px;
		z-index: 20;
	}
	
	.fontOUT {
		bottom: -200px;
		z-index: 1;
	}
	
		#font_panel .area .sub-button {
			float: left;
			width: 60px;
			height: 40px;
			z-index: 1;
			overflow: hidden;
		}
		#font_panel .area .sub-button:hover, #font_panel .area .sub-button:focus {
			background: #0556A5; /* old browsers */
		}
		#fontup {
			border-left: 2px solid #333;
			border-right: 2px solid #333;
		}
		#font_panel .area #colors {
			float: right;
		}
		#fontdn {
		}
		#font_panel .area p {
			margin: 0;
			font-family: Arial,FreeSans,sans-serif;
			font-weight: lighter;
			font-size: 16px;
			line-height: 40px;
			text-align: center;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		
		#fontbox {
			position:absolute;
			z-index:10;
			background:#111;
			border: 1px solid #111;
		}
			#fontbox p {
				color: #fff;
			}
		#colorbox {
			position:absolute;
			z-index:0;
			border: 1px solid #111;
			-webkit-transition:top;
			-webkit-transition-duration:1s;
		}
			#colorbox p {
				color: #000;
			}
				#colorbox .sub-button:hover p, 
				#colorbox .sub-button:focus p {
					color: white;
				}
				#color_black p {
					color: white;
				}
		.colorbox_IN {
			top: -60px;
		}
		.colorbox_OUT {
			top: 0px;
		}
			#color_basic {
				background: white;
			}
			#color_sepia {
				background: wheat;
				border-left: 2px solid #333;
				border-right: 2px solid #333;
			}
			#color_black {
				background: black;
			}

		#font_panel .pointer {
			position: absolute;
			top: 30px;
			left: 50%;
			width:20px; 
			height:20px;
			margin-left: -10px;
			z-index: -1;
		}

		
/* Size & Position of Views Panel */
/*================================*/
	#views_panel {
		position: absolute;
		width: 100%;
		height: auto;
		overflow: hidden;
		margin-top: 50px;
		margin-bottom: 43px;
		padding-top: 20px;
	}
	
	.viewsIN {
		bottom: 0%;
		z-index: 20;
	}
	.viewsOUT{
		bottom: -200%;
		z-index: 1;
	}
	
	#viewbutton4 { display: none; }
	
/* Size & Position of Share Panel */
/*================================*/
	#share_panel {
		position: absolute;
		left: 50%;
		width: 300px;
		height: auto;
		min-height:32px;
		margin: 0 -155px;
		padding: 5px;
		text-align: center;
	}
	
	.shareIN {
		bottom: 70px;
		z-index: 20;
	}
	
	.shareOUT{
		bottom: -300px;
		z-index: 1;
	}
	
		#sharemail {
			margin: 0 auto;
			width: 296px;
			background: transparent;
		}
			#shareinput {
				float: left;
				width: 220px;
				height: 20px;
				margin-top: 3px;
			}
				#sharemail a {
					float: right;
					text-decoration: none;
				}
				
				#shareit, #findall div {
					width: 55px;
				}
	
	#share_panel .pointer {
			position: absolute;
			bottom: -10px;
			left: 50%;
			width:20px; 
			height:20px;
			margin-left: -10px;
			z-index: -1;
	}
	
/* Size & Position of Search Panel */
/*================================*/
	#find_panel {
		position: absolute;
		left: 2%;
		width: 300px;
		height: auto;
		min-height:32px;
		margin: 0;
		padding: 5px;
		text-align: center;
	}
	
	.findIN {
		bottom: 80px;
		z-index: 20;
	}
	
	.findOUT{
		bottom: -300px;
		z-index: 1;
	}
	
		#findbox {
			margin: 0 auto;
			width: 296px;
			background: transparent;
		}
			#findinput {
				float: left;
				width: 220px;
				height: 20px;
				margin-top: 3px;
			}
				#findbox a {
					float: right;
					text-decoration: none;
				}
				
				#findit {
					width: 55px;
				}
	
	#find_panel .pointer {
			position: absolute;
			bottom: -10px;
			left:10%;
			width:20px; 
			height:20px;
			margin-left: -10px;
			z-index: -1;
	}
	
	
/* Size & Position of About Dialog */
/*=================================*/
	#about {
		position: relative;
		height: 300px;
		width: 600px;
		padding: 20px;
		margin: 0 auto;
		overflow: auto;
	}
		#aboutlogo {
			width: 200px;
			height: 72px;
			background: url('../images/app/help/ryuzine_logo.png') 0 0 no-repeat;
			margin: 0 auto;
		}
		#licensetxt {
			background: #fff;
			color: #000;
			border: 1px solid #000;
		}
			#rmlogo {
				width: 48px;
				height: 50px;
				background: url('../images/app/help/RyuMaruLogo.png') 0 0 no-repeat;
				margin: 0 auto;
			}

/* Mobile Bannerad Position & Style */
/*==================================*/
	#appbanner {
		position: absolute;
		left: 0;
		width: 100%;
		margin: 0; padding: 0;
		display: table;
		-webkit-transition: top;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 500ms;
		-moz-transition: top;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 500ms;
		-o-transition: top;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 500ms;
		-ms-transition: top;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 500ms;
		transition: top;
		transition-timing-function: ease-in-out;
		transition-duration: 500ms;
	}
		.appbanner_up {
			top: -100px;
		}
		
		.appbanner_dn {
			top: 44px;
		}
		
		.appbannerbox {
			display: table;
			margin: 0 auto;
		}
		
		.appbannerbox img {
			margin: 0 0 -5px;
		}
		
		.appbannerbox p {
			height: 20px;
			background: black;
			color: #fff;
			margin: 0;
			font-size: 10px;
			line-height: 20px;
			overflow: hidden;
		}

		.appbannerbox p span {
			float: right;
			margin-right: 5px;
		}

	.bmark { /* Appears in upper right corner of every page */
		background: url('../images/app/ui/bookmark.png') 17px 0 no-repeat;
	}
		#bmark:hover, #bmark:focus {
			background: url('../images/app/ui/dogear.png') 0 0 no-repeat;
		}
	#zoom {
		position: absolute;
		top: 0; left: 0;
		width: 44px;
		height: 44px;
		background-color: #333;
		opacity: .25;
		-webkit-border-bottom-right-radius: 10px;
		-moz-border-radius-bottomright: 10px;
		border-bottom-right-radius: 10px;
		display: none; /* Should be "none" so desktops don't see it */
	}
		#zoom p {
			font-family: Arial, sans-serif;
			font-size: 24px;
			text-align: center;
			margin: 0px;
			line-height: 48px;
			color: #CCC;
			font-weight: bold;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
	.pan_on {
		position: absolute;
		left: 1%;
		top: 1%;
		height: 98%;
		width: 98%;
		z-index: 975;
		border: 2px solid red;
		display: block;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	.pan_off {
		display: none;
	}
	

/* Bubble Guide Help */

		#helper {
			position: absolute;
			z-index:2000;
		/* Safari and Chrome */
			-webkit-transform-origin: 50% 50%;
			-webkit-transition-timing-function: ease-in-out;
			-webkit-transition-duration: 1s;
			-webkit-transition-delay: 0s;
		/* Firefox 4+ */
			-moz-transform-origin: 50% 50%;
			-moz-transition-timing-function: ease-in-out;
			-moz-transition-duration: 1s;
			-moz-transition-delay: 0s;
		/* Opera 11.10+ */
			-o-transform-origin: 50% 50%;
			-o-transition-timing-function: ease-in-out;
			-o-transition-duration: 1s;
			-o-transition-delay: 0s;
		/* IE 9+ */
			-ms-transform-origin: 50% 50%;
			-ms-transition-timing-function: ease-in-out;
			-ms-transition-duration: 1s;
			-ms-transition-delay: 0s;
		/* CSS3 Standards */
			transform-origin: 50% 50%;
			transition-timing-function: ease-in-out;
			transition-duration: 1s;
			transition-delay: 0s;
		}
		
		.helper_off {
			/* Initial position while hidden */
			display: none;
			top: 50%;
			right: auto;
			left: 50%;
			height: 276px;
			width: 276px;
			margin: -138px 0 0 -138px;
				/* Safari and Chrome */
					-webkit-transform: scale(0);
				/* Firefox 4+ */
					-moz-transform: scale(0);
				/* Opera 11.10+ */
					-o-transform: scale(0);
				/* IE 9+ */
					-ms-transform: scale(0);
				/* CSS3 Standards */
					transform: scale(0);
		}
		
		.helper_on {
			display: block;
				/* Safari and Chrome */
			-webkit-transform: scale(1);
			/* Firefox 4+ */
				-moz-transform: scale(1);
			/* Opera 11.10+ */
				-o-transform: scale(1);
			/* IE 9+ */
				-ms-transform: scale(1);
			/* CSS3 Standards */
				transform: scale(1);
		}
		
		#help_guide {
			position: absolute;
			height: 275px;
			width: 275px;
		/* Safari and Chrome */
			-webkit-transform-origin: center;
			-webkit-transform: rotate(0deg);
			-webkit-transition-timing-function: ease-in-out;
			-webkit-transition-duration: 1s;
			-webkit-transition-delay: 0s;
		/* Firefox 4+ */
			-moz-transform-origin: center;
			-moz-transform: rotate(0deg);
			-moz-transition-timing-function: ease-in-out;
			-moz-transition-duration: 1s;
			-moz-transition-delay: 0s;
		/* Opera 11.10+ */
			-o-transform-origin: center;
			-o-transform: rotate(0deg);
			-o-transition-timing-function: ease-in-out;
			-o-transition-duration: 1s;
			-o-transition-delay: 0s;
		/* IE 9+ */
			-ms-transform-origin: center;
			-ms-transform: rotate(0deg);
			-ms-transition-timing-function: ease-in-out;
			-ms-transition-duration: 1s;
			-ms-transition-delay: 0s;
		/* CSS3 Standards */
			transform-origin: center;
			transform: rotate(0deg);
			transition-timing-function: ease-in-out;
			transition-duration: 1s;
			transition-delay: 0s;
		}
			#help_arrow {
				height: 45px;
				width: 62px;
				display: block;
				margin: 0 auto;
				background: url('../images/app/help/arrow.png') 0 0 no-repeat;
			}
			
#help_box {
	position: absolute;
	top: 50px;
	left: 50px;
	height: 150px;
	width: 150px;
	margin: 0;
	padding: 10px;
	background: rgb(24,25,86);
	background: rgba(24,25,86,0.90);
	background: -moz-linear-gradient(top, rgba(44,83,158,0.90) 0%, rgba(24,25,86,0.90) 29%, rgba(24,25,86,0.90) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,0.90)), color-stop(29%,rgba(24,25,86,0.90)), color-stop(100%,rgba(24,25,86,0.90)));
	background: -webkit-linear-gradient(top, rgba(44,83,158,0.90) 0%,rgba(24,25,86,0.90) 29%,rgba(24,25,86,0.90) 100%);
	background: -o-linear-gradient(top, rgba(44,83,158,0.90) 0%,rgba(24,25,86,0.90) 29%,rgba(24,25,86,0.90) 100%);
	background: -ms-linear-gradient(top, rgba(44,83,158,0.90) 0%,rgba(24,25,86,0.90) 29%,rgba(24,25,86,0.90) 100%);
	background: linear-gradient(top, rgba(44,83,158,0.90) 0%,rgba(24,25,86,0.90) 29%,rgba(24,25,86,0.90) 100%);
	border: 2px solid #fff;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
	text-align: center;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.50);
	-ms-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.50);
}

	.help_buttons {
		position: absolute;
		bottom: 10px;
		left: 50%;
		width: 150px;
		margin-left: -75px;
	}
	
	.help_buttons input {
	height: 30px;
	min-width: 30px;
	border: 2px solid #fff;
	color: #fff;
	background: rgb(73,155,234);
	background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,155,234,1)), color-stop(100%,rgba(32,124,229,1)));
	background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%);
	background: -o-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%);
	background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );
	background: linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%);
		font-weight: bold;
		font-size: 16px;
		line-height: 10px;
		text-align: center;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.50);
		-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.50);
		-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.50);
		-ms-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.50);
}
.help_buttons input:hover, .help_button input:focus {
color: #fff;
background: rgb(44,83,158);
background: -moz-linear-gradient(top, rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1)));
background: -webkit-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
background: -o-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
background: -ms-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 );
background: linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
}
.help_buttons .playall {
	position: absolute;
	top: -175px;
	width: 100%;
}
	
.help_card {
	display: none;
	padding: 10px;
	height: 100%;
}

/* Positions */

.card0 {
	top: 50%;
	right: auto;
	left: 50%;
	height: 276px;
	width: 276px;
	margin: -138px 0 0 -138px;
}
	.card0 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(90deg);
		/* Firefox 4+ */
			-moz-transform: rotate(90deg);
		/* Opera 11.10+ */
			-o-transform: rotate(90deg);
		/* IE 9+ */
			-ms-transform: rotate(90deg);
		/* CSS3 Standards */
			transform: rotate(90deg);
	}
	.card0 #card0 {
		display: block;
	}
		
.card1 {
	top: 50%;
	right: auto;
	left: 50%;
	height: 276px;
	width: 276px;
	margin: -138px 0 0 -138px;
}
	.card1 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(-90deg);
		/* Firefox 4+ */
			-moz-transform: rotate(-90deg);
		/* Opera 11.10+ */
			-o-transform: rotate(-90deg);
		/* IE 9+ */
			-ms-transform: rotate(-90deg);
		/* CSS3 Standards */
			transform: rotate(-90deg);
	}
	.card1 #card1 {
		display: block;
	}
	
.card2 {
	top: 50%;
	right: auto;
	left: 0%;
	height: 276px;
	width: 276px;
	margin: -138px 0 0 25px;
}
	.card2 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(-90deg);
		/* Firefox 4+ */
			-moz-transform: rotate(-90deg);
		/* Opera 11.10+ */
			-o-transform: rotate(-90deg);
		/* IE 9+ */
			-ms-transform: rotate(-90deg);
		/* CSS3 Standards */
			transform: rotate(-90deg);
	}
	.card2 #card2 {
		display: block;
	}
	
.card3 {
	top: 0%;
	right: auto;
	left: 50%;
	height: 276px;
	width: 276px;
	margin: 44px 0 0 -138px;
}
	.card3 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(0deg);
		/* Firefox 4+ */
			-moz-transform: rotate(0deg);
		/* Opera 11.10+ */
			-o-transform: rotate(0deg);
		/* IE 9+ */
			-ms-transform: rotate(0deg);
		/* CSS3 Standards */
			transform: rotate(0deg);
	}
	.card3 #card3 {
		display: block;
	}

.card4 {
	top: 100%;
	right: auto;
	left: 50%;
	height: 276px;
	width: 276px;
	margin: -300px 0 0 -138px;
}
	.card4 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(180deg);
		/* Firefox 4+ */
			-moz-transform: rotate(180deg);
		/* Opera 11.10+ */
			-o-transform: rotate(180deg);
		/* IE 9+ */
			-ms-transform: rotate(180deg);
		/* CSS3 Standards */
			transform: rotate(180deg);
	}
	.card4 #card4 {
		display: block;
	}

.card5 {
	top: 100%;
	right: auto;
	left: 100%;
	height: 276px;
	width: 276px;
	margin: -300px 0 0 -276px;
}
	.card5 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(135deg);
		/* Firefox 4+ */
			-moz-transform: rotate(135deg);
		/* Opera 11.10+ */
			-o-transform: rotate(135deg);
		/* IE 9+ */
			-ms-transform: rotate(135deg);
		/* CSS3 Standards */
			transform: rotate(135deg);
	}
	.card5 #card5 {
		display: block;
	}
	
.card6 {
	top: 100%;
	right: auto;
	left: 0%;
	height: 276px;
	width: 276px;
	margin: -300px 0 0 -25px;
}
	.card6 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(180deg);
		/* Firefox 4+ */
			-moz-transform: rotate(180deg);
		/* Opera 11.10+ */
			-o-transform: rotate(180deg);
		/* IE 9+ */
			-ms-transform: rotate(180deg);
		/* CSS3 Standards */
			transform: rotate(180deg);
	}
	.card6 #card6 {
		display: block;
	}

.card7 {
	top: 75%;
	right: auto;
	left: 4%;
	height: 276px;
	width: 276px;
	margin: -300px 0 0 -25px;
}
	.card7 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(-180deg);
		/* Firefox 4+ */
			-moz-transform: rotate(-180deg);
		/* Opera 11.10+ */
			-o-transform: rotate(-180deg);
		/* IE 9+ */
			-ms-transform: rotate(-180deg);
		/* CSS3 Standards */
			transform: rotate(-180deg);
	}
	.card7 #card7 {
		display: block;
	}


.card8 {
	top: 100%;
	right: auto;
	left: 100%;
	height: 276px;
	width: 276px;
	margin: -300px 0 0 -250px;
}
	.card8 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(180deg);
		/* Firefox 4+ */
			-moz-transform: rotate(180deg);
		/* Opera 11.10+ */
			-o-transform: rotate(180deg);
		/* IE 9+ */
			-ms-transform: rotate(180deg);
		/* CSS3 Standards */
			transform: rotate(180deg);
	}
	.card8 #card8 {
		display: block;
	}

.card9 {
	top: 100%;
	right: auto;
	left: 100%;
	height: 276px;
	width: 276px;
	margin: -310px 0 0 -250px;
}
	.card9 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(150deg);
		/* Firefox 4+ */
			-moz-transform: rotate(150deg);
		/* Opera 11.10+ */
			-o-transform: rotate(150deg);
		/* IE 9+ */
			-ms-transform: rotate(150deg);
		/* CSS3 Standards */
			transform: rotate(150deg);
	}
	.card9 #card9 {
		display: block;
	}

.card10 {
	top: 100%;
	right: auto;
	left: 50%;
	height: 276px;
	width: 276px;
	margin: -300px 0 0 -138px;
}
	.card10 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(180deg);
		/* Firefox 4+ */
			-moz-transform: rotate(180deg);
		/* Opera 11.10+ */
			-o-transform: rotate(180deg);
		/* IE 9+ */
			-ms-transform: rotate(180deg);
		/* CSS3 Standards */
			transform: rotate(180deg);
	}
	.card10 #card10 {
		display: block;
	}

.card11 {
	top: 100%;
	right: auto;
	left: 100%;
	height: 276px;
	width: 276px;
	margin: -345px 0 0 -250px;
}
	.card11 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(150deg);
		/* Firefox 4+ */
			-moz-transform: rotate(150deg);
		/* Opera 11.10+ */
			-o-transform: rotate(150deg);
		/* IE 9+ */
			-ms-transform: rotate(150deg);
		/* CSS3 Standards */
			transform: rotate(150deg);
	}
	.card11 #card11 {
		display: block;
	}

.card12 {
	top: 0%;
	right: auto;
	left: 100%;
	height: 276px;
	width: 276px;
	margin: 25px 0 0 -276px;
}
	.card12 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(45deg);
		/* Firefox 4+ */
			-moz-transform: rotate(45deg);
		/* Opera 11.10+ */
			-o-transform: rotate(45deg);
		/* IE 9+ */
			-ms-transform: rotate(45deg);
		/* CSS3 Standards */
			transform: rotate(45deg);
	}
	.card12 #card12 {
		display: block;
	}
	
.card13 {
	top: 0%;
	right: auto;
	left: 75%;
	height: 276px;
	width: 276px;
	margin: 50px 0 0 -276px;
}
	.card13 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(90deg);
		/* Firefox 4+ */
			-moz-transform: rotate(90deg);
		/* Opera 11.10+ */
			-o-transform: rotate(90deg);
		/* IE 9+ */
			-ms-transform: rotate(90deg);
		/* CSS3 Standards */
			transform: rotate(90deg);
	}
	.card13 #card13 {
		display: block;
	}
	
.card14 {
	top: 0%;
	right: auto;
	left: 0%;
	height: 276px;
	width: 276px;
	margin: 25px 0 0 0px;
}
	.card14 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(-45deg);
		/* Firefox 4+ */
			-moz-transform: rotate(-45deg);
		/* Opera 11.10+ */
			-o-transform: rotate(-45deg);
		/* IE 9+ */
			-ms-transform: rotate(-45deg);
		/* CSS3 Standards */
			transform: rotate(-45deg);
	}
	.card14 #card14 {
		display: block;
	}

.card15 {
	top: 50%;
	right: auto;
	left: 50%;
	height: 276px;
	width: 276px;
	margin: -138px 0 0 -138px;
}
	.card15 #help_guide {
		/* Safari and Chrome */
			-webkit-transform: rotate(360deg);
		/* Firefox 4+ */
			-moz-transform: rotate(360deg);
		/* Opera 11.10+ */
			-o-transform: rotate(360deg);
		/* IE 9+ */
			-ms-transform: rotate(360deg);
		/* CSS3 Standards */
			transform: rotate(360deg);
	}
	.card15 #card15 {
		display: block;
	}

/* for iScroll Scrolling */
.iscrollbarV, .iScrollVerticalScrollbar {
	position:absolute !important;
	z-index:1000;
	width:8px;
	bottom:7px;
	top:2px;
	right:1px;
}

.iscrollbarV > div, .iScrollVerticalScrollbar > div {
	position:absolute;
	z-index:100;
	width:100%;

	/* The following is probably what you want to customize */
	background: rgba(0,0,0,.5);

	border:1px solid #fff;

	-webkit-background-clip:padding-box;
	-moz-background-clip:padding-box;
	-o-background-clip:padding-box;
	background-clip:padding-box;
	
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	
	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
	-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
	-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
	box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
.area .iscrollbarV, .live .iscrollbarV,
.area .iScrollVerticalScrollbar, .live .iScrollVerticalScrollbar {
	visibility: hidden;
}
.area:hover .iscrollbarV, .area:focus .iscrollbarV, 
.live:hover .iscrollbarV, .live:focus .iscrollbarV,
.area:hover .iScrollVerticalScrollbar, .area:focus .iScrollVerticalScrollbar,
.live:hover .iScrollVerticalScrollbar, .live:focus .iScrollVerticalScrollbar {
	visibility: visible;
}

.scrollbox {	/* Fix for Firefox with iScroll v4 */
	width: 100%;
}



#tocslider {
display: none;
position: relative;
height: 30px;
margin-top: 7px;
margin-left: 80px;
margin-right: 80px;
}
#tocslider_track {
position: relative;
top: 13px;
height: 2px;
background: #EEE url('../images/app/ui/slider.png') 0 0 no-repeat;
-webkit-background-size: 0% 100%;
-moz-background-size: 0% 100%;
background-size: 0% 100%;
}
#tocslider_button {
position: absolute;
width: 30px;
height: 30px;
top: -2px;
background: #111;
border: 1px solid #EEE;
box-shadow: 0px 0px 3px black;
}
	#tocslider_button p {
		line-height: 30px;
		text-align: center;
		margin: 0; padding: 0;
		color: #eee;
		font-family: Arial, sans-serif;
		font-weight: bold;
		font-size: 12px;
		-webkit-appearance: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	#tocslider_button:hover, #tocslider_button:focus {
		background: #27AAE1;
	}


#longbox{
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	width: 100%;
}
#dropbar {
	position: absolute;
	overflow: visible;
	border-bottom: 1px solid #ccc;
	display: block;
		-webkit-transition: top, bottom;
		-webkit-transition-timing-function: ease-in-out;
		-webkit-transition-duration: 500ms;
		-moz-transition: top, bottom;
		-moz-transition-timing-function: ease-in-out;
		-moz-transition-duration: 500ms;
		-o-transition: top, bottom;
		-o-transition-timing-function: ease-in-out;
		-o-transition-duration: 500ms;
		-ms-transition: top, bottom;
		-ms-transition-timing-function: ease-in-out;
		-ms-transition-duration: 500ms;
		transition: top, bottom;
		transition-timing-function: ease-in-out;
		transition-duration: 500ms;	
}
	#droptab {
		position: absolute;
		bottom: -16px;
		left: 50%;
		width: 50px;
		height: 15px;
		margin-left: -25px;
		background: black;
		background: rgba(0,0,0,.5);
		color: #eee;
		font-size: 18px;
		line-height: 15px;
		text-align: center;
		border: 1px solid #ccc;
		border-top: none;
		-webkit-border-bottom-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;		
	}
		.dropbar_show {
			top: 0px;
		}
		.dropbar_hide {
			top: -45px;
		}
	#back2rack {
		margin: 7px;
		z-index: 10;
	}
		#back2rack img {
			vertical-align: middle;
			margin: -5px 5px 0 0;
		}
#dropbar_thumbs {
	height: 100%;
	width: 70%;
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
}
	#dropbar_thumbs .thumb {
		height: 94%;
		width: 44px;
		float: right;
		margin: 2px;
		overflow: hidden;
	}
		#dropbar_thumbs .thumb a {
			border: none;
			text-decoration: none;
		}
		#dropbar_thumbs .thumb img {
			height: 100%;
			width: auto;
		}
		#numark, #unmark {
			width: 30px;
			margin: 7px;
		}
				#unmark {
/*					background: #cc0000;	*/
				}
				
				#unmark:hover, #unmark:focus {
					background: #930000;
				}
	

/*==============================================*/
/*	Desktop										*/
/*==============================================*/
@media only screen and (min-width: 1600px)  {

	.double {
		width: auto;
	}
	.quarter, .double .button {
		width: 50px;
	}
	
	.half, #fontbutton, #viewsbutton {
		width: 225px;
	}
	
	
	.navbars {
		display: none;
	}
	
	.navbars_hide, .navbars_show, .dropbar_show {
		top: 0px;
	}
	.dropbar_hide {
		top: -45px;
	}
	
	.flipper {
		visibility: visible;
	}
	
	/* Button Styles */
	
		.type3 { /* Widebutton */
		border: 1px solid #333;
		background: #111; /* old browsers */	
	}
		
		
	.type4 { /* Wide Cancel Button */
		border: 1px solid #fff;
	background: #0556A5; /* old browsers */
	}
	.panel {
		opacity: 0;
	}
	/* Panel Sub-Type Appearances */
	.panel_A { /* Used for Help & TOC */
		border: 1px solid #333;
		overflow: visible;
		background: #111; /* old browsers */
	}
		.panel_A .titlebar {
		background: #111; /* old browsers */
		border: none;
		}
		.panel_A .area {
				background: #111;
		}
	
	.panel_B { /* Used for Fonts & Share */
		background: #111; /* old browsers */
	}
		.panel_B .titlebar {
			display: none;
		}
		.panel_B .area {
		
		}
	
	.panel_C { /* Used for Views */
		border: 1px solid #333;
		z-index: 10;
		background: #111; /* old browsers */	
	}
		.panel_C .titlebar {
			display: none;
		}
		.panel_C.area {
		
		}
/* Size & Position of Help Panel */
/*===============================*/
	#bmark_panel {
		position: absolute;
		top: 50px;
		bottom: auto;
		left: auto;
		width: 	326px;
		height: 365px;
		margin: 0;
	}
	
	.bmarkIN {
		right: 50px;
		z-index: 20;
		opacity: 1;
	}
	
	.bmarkOUT {
		right: 50px;
		opacity: 0;
		z-index: 1;
	}
		#bmark_panel .area {
		margin: 0px 8px 0 8px;
		width: 309px;
		height: 305px;
		}
		
		#bmarktext .infomargin {
		margin: 15px;
		}
		
		#bmark_panel .pointer {
			display: none;
		}
		
/* Options Panel */
/*=============================*/
	#opt_panel {
		position: absolute;
		bottom: 85px;
		width: 	325px;
		height: 305px;
		margin: 0 20px 0 0;
		overflow: visible;
	}
	
	.optIN {
		right: 0;
		opacity: 1;
		z-index: 20;
	}
	
	.optOUT {
		right: 0;
		opacity: 0;
		z-index: 1;
	}
	
		#opt_panel .area {
			height: 252px;
			margin: 0 8px;
			
		}
		
		#opt_panel .smallprint {
			font-size: 12px;
		}
	#opt_panel .pointer {
		top: -17px;
		left: 0;
		width:50px; 
		height:50px; 
		margin: 0 0 0 75%;
	}


/* Size & Position of TOC Panel */
/*==============================*/
	#toc_panel {
		position: absolute;
		bottom: 85px;
		width: 	326px;
		height: 365px;
		margin-left: -163px;

	}
	
	.tocIN {
		left: 50%;
		z-index: 20;
		opacity: 1.0;
	}
	
	.tocOUT {
		left: 50%;
		opacity: 0;
		z-index: 1;
	}
		#toc_panel .area {
		margin: 0px 8px 0 8px;
		width: 309px;
		height: 305px;

		}
		
		#toc_panel .pointer {
			top: -10px;
			left: 0;
			width:50px; 
			height:50px; 
			margin: 0 auto;
		}	
		
/* Size & Position of Views Panel */
/*================================*/
	#views_panel {
		position: absolute;
		right: 0;
		bottom: 85px;
		padding-top: 10px;
		width: 	325px;
		height: auto;
		margin: 0 20px 0 0;
		overflow: visible;
	}
	
	.viewsIN {
		z-index: 20;
		opacity: 1;
	}
	
	.viewsOUT {
		opacity: 0;
		z-index: 1;
	}
	
	#views_panel .pointer {
		top: 1px;
		left: 0;
		width:50px; 
		height:50px; 
		margin: -25px auto;
	}

/* Size & Position of Fonts Panel */
/*================================*/
	#font_panel {
		position: absolute;
		left: 62px;
		height: 40px;
		width: 186px;
	}
	
	.fontIN {
		z-index: 20;
		bottom: 70px;
	}
	
	.fontOUT {
		bottom: -200px;
		z-index: 1;
	}
/* Size & Position of Share Panel */
/*================================*/
	#share_panel {
		position: absolute;
		left: 50%;
		width: 300px;
		height: auto;
		min-height: 32px;
		margin: 0 -150px;
		padding: 5px;
		text-align: center;
	}
	
	.shareIN {
		z-index: 20;
		bottom: 70px;
	}
	
	.shareOUT{
		bottom: -300px;
		z-index: 1;
	}
	
	.appbanner_dn {
		top: 0px;
	}

}


/*==============================================*/
/* Tablet UI (Landscape)							*/
/*==============================================*/
@media only screen and (min-width: 1024px) and (max-width: 1599px) {

	.double {
		width: auto;
	}
	.quarter, .double .button {
		width: 50px;
	}
	
	.half, #fontbutton, #viewsbutton {
		width: 225px;
	}

	.navbars {
		display: none;
	}
	
	.navbars_hide, .navbars_show, .dropbar_show {
		top: 0px;
	}
	.dropbar_hide {
		top: -45px;
	}
	
	.flipper {
		visibility: visible;
	}
	
	/* Button Styles */
	
		.type3 { /* Widebutton */
		border: 1px solid #333;
		background: #111; /* old browsers */	
	}
		
		
	.type4 { /* Wide Cancel Button */
		border: 1px solid #fff;
	background: #0556A5; /* old browsers */
	}
	.panel {
		opacity: 0;
	}
	/* Panel Sub-Type Appearances */
	.panel_A { /* Used for Help & TOC */
		border: 1px solid #333;
		overflow: visible;
		background: #111; /* old browsers */
	}
		.panel_A .titlebar {
		background: #111; /* old browsers */
		border: none;
		}
		.panel_A .area {
				background: #111;
		}
	
	.panel_B { /* Used for Fonts & Share */	
		background: #111; /* old browsers */
	}
		.panel_B .titlebar {
			display: none;
		}
		.panel_B .area {
		
		}
	
	.panel_C { /* Used for Views */
		border: 1px solid #333;
		z-index: 10;
		background: #111; /* old browsers */	
	}
		.panel_C .titlebar {
			display: none;
		}
		.panel_C.area {
		
		}
/* Size & Position of Help Panel */
/*===============================*/
	#bmark_panel {
		position: absolute;
		top: 50px;
		bottom: auto;
		left: auto;
		width: 	326px;
		height: 365px;
		margin: 0;
	}
	
	.bmarkIN {
		right: 50px;
		z-index: 20;
		opacity: 1;
	}
	
	.bmarkOUT {
		right: 50px;
		opacity: 0;
		z-index: 1;
	}
		#bmark_panel .area {
		margin: 0px 8px 0 8px;
		width: 309px;
		height: 305px;
		}
		
		#bmarktext .infomargin {
		margin: 15px;
		}
		
		#bmark_panel .pointer {
			display: none;
		}

/* Size & Position of TOC Panel */
/*==============================*/
	#toc_panel {
		position: absolute;
		bottom: 85px;
		width: 	326px;
		height: 365px;
		margin-left: -163px;

	}
	
	.tocIN {
		left: 50%;
		opacity: 1.0;
		z-index: 20;
	}
	
	.tocOUT {
		left: 50%;
		opacity: 0;
		z-index: 1;
	}
		#toc_panel .area {
		margin: 0px 8px 0 8px;
		width: 309px;
		height: 305px;

		}
		
		#toc_panel .pointer {
			top: -10px;
			left: 0;
			width:50px; 
			height:50px; 
			margin: 0 auto;
		}	
		
/* Size & Position of Views Panel */
/*================================*/
	#views_panel {
		position: absolute;
		right: 0;
		bottom: 85px;
		padding-top: 10px;
		width: 	325px;
		height: auto;
		margin: 0 20px 0 0;
		overflow: visible;
	}
	
	.viewsIN {
		opacity: 1;
		z-index: 20;
	}
	
	.viewsOUT {
		opacity: 0;
		z-index: 1;
	}
	
	#views_panel .pointer {
		top: 1px;
		left: 0;
		width:50px; 
		height:50px; 
		margin: -25px auto;
	}
/* Size & Position of Fonts Panel */
/*================================*/
	#font_panel {
		position: absolute;
		left: 62px;
		height: 40px;
		width: 186px;
	}
	
	.fontIN {
		bottom: 70px;
		z-index: 20;
	}
	
	.fontOUT {
		bottom: -200px;
		z-index: 1;
	}
	
	
/* Size & Position of Share Panel */
/*================================*/
	#share_panel {
		position: absolute;
		left: 50%;
		width: 300px;
		height: auto;
		min-height: 32px;
		margin: 0 -150px;
		padding: 5px;
		text-align: center;
	}
	
	.shareIN {
		bottom: 70px;
		z-index: 20;
	}
	
	.shareOUT{
		bottom: -300px;
		z-index: 1;
	}
	
	.appbanner_dn {
		top: 0px;
	}
	
	/* Options Panel */
/*=============================*/
	#opt_panel {
		position: absolute;
		bottom: 85px;
		width: 	325px;
		height: 305px;
		margin: 0 20px 0 0;
		overflow: visible;
	}
	
	.optIN {
		right: 0;
		opacity: 1;
		z-index: 20;
	}
	
	.optOUT {
		right: 0;
		opacity: 0;
		z-index: 1;
	}
	
		#opt_panel .area {
			height: 252px;
			margin: 0 8px;
			
		}
		
		#opt_panel .smallprint {
			font-size: 12px;
		}
	#opt_panel .pointer {
		top: -17px;
		left: 0;
		width:50px; 
		height:50px; 
		margin: 0 0 0 75%;
	}
	
}

/*==============================================*/
/* Tablet UI (portrait)							*/
/*==============================================*/
@media only screen and (min-width: 720px) and (max-width: 1023px) {
	.double {
		width: auto;
	}
	.quarter, .double .button {
		width: 50px;
	}
	
	.half, #fontbutton, #viewsbutton {
		width: 225px;
	}
	.navbars {
		display: none;
	}
	
	.navbars_hide, .navbars_show, .dropbar_show {
		top: 0px;
	}
	.dropbar_hide {
		top: -45px;
	}
	
	.flipper {
		visibility: visible;
	}
	
	/* Button Styles */
	
		.type3 { /* Widebutton */
		border: 1px solid #333;
		background: #111; /* old browsers */		
	}
		
		
	.type4 { /* Wide Cancel Button */
		border: 1px solid #fff;
	background: #0556A5; /* old browsers */
	}
	.panel {
		opacity: 0;
	}
	/* Panel Sub-Type Appearances */
	.panel_A { /* Used for Help & TOC */
		border: 1px solid #333;
		overflow: visible;
		background: #111; /* old browsers */
	}
		.panel_A .titlebar {
		background: #111; /* old browsers */
		border: none;
		}
		.panel_A .area {
				background: #111;
		}
	
	.panel_B { /* Used for Fonts & Share */
		background: #111; /* old browsers */
	}
		.panel_B .titlebar {
			display: none;
		}
		.panel_B .area {
		
		}
	
	.panel_C { /* Used for Views */
		border: 1px solid #333;
		z-index: 10;
		background: #111; /* old browsers */
	}
		.panel_C .titlebar {
			display: none;
		}
		.panel_C.area {
		
		}
/* Size & Position of Help Panel */
/*===============================*/
	#bmark_panel {
		position: absolute;
		top: 50px;
		bottom: auto;
		left: auto;
		width: 	326px;
		height: 365px;
		margin: 0;
	}
	
	.bmarkIN {
		right: 50px;
		z-index: 20;
		opacity: 1;
	}
	
	.bmarkOUT {
		right: 50px;
		opacity: 0;
		z-index: 1;
	}
		#bmark_panel .area {
		margin: 0px 8px 0 8px;
		width: 309px;
		height: 305px;
		}
		
		#bmarktext .infomargin {
		margin: 15px;
		}
		
		#bmark_panel .pointer {
			display: none;
		}

/* Size & Position of TOC Panel */
/*==============================*/
	#toc_panel {
		position: absolute;
		bottom: 85px;
		width: 	326px;
		height: 365px;
		margin-left: -163px;

	}
	
	.tocIN {
		left: 50%;
		opacity: 1.0;
	}
	
	.tocOUT {
		left: 50%;
		opacity: 0;
	}
	
		#toc_panel .area {
		margin: 0px 8px 0 8px;
		width: 309px;
		height: 305px;

		}
		
		#toc_panel .pointer {
			top: -10px;
			left: 0;
			width:50px; 
			height:50px; 
			margin: 0 auto;
		}	
		
/* Size & Position of Views Panel */
/*================================*/
	#views_panel {
		position: absolute;
		right: 0;
		bottom: 85px;
		padding-top: 10px;
		width: 	325px;
		height: auto;
		margin: 0 20px 0 0;
		overflow: visible;
	}
	
	.viewsIN {
		opacity: 1;
	}
	.viewsOUT {
		opacity: 0;
	}
	
	#views_panel .pointer {
		top: 1px;
		left: 0;
		width:50px; 
		height:50px; 
		margin: -25px auto;
	}
/* Size & Position of Fonts Panel */
/*================================*/
	#font_panel {
		position: absolute;
		left: 62px;
		height: 40px;
		width: 186px;
	}
	
	.fontIN {
		bottom: 70px;
	}
	
	.fontOUT {
		bottom: -200px;
	}
/* Size & Position of Share Panel */
/*================================*/
	#share_panel {
		position: absolute;
		left: 50%;
		width: 300px;
		height: auto;
		min-height: 32px;
		margin: 0 -150px;
		padding: 5px;
		text-align: center;
	}
	
	.shareIN {
		bottom: 70px;
	}
	
	.shareOUT{
		bottom: -300px;
	}
	
	.appbanner_dn {
		top: 0px;
	}

/* Options Panel */
/*=============================*/
	#opt_panel {
		position: absolute;
		bottom: 85px;
		width: 	325px;
		height: 305px;
		margin: 0 20px 0 0;
		overflow: visible;
	}
	
	.optIN {
		right: 0;
		opacity: 1;
		z-index: 20;
	}
	
	.optOUT {
		right: 0;
		opacity: 0;
		z-index: 1;
	}
	
		#opt_panel .area {
			height: 252px;
			margin: 0 8px;
			
		}
		
		#opt_panel .smallprint {
			font-size: 12px;
		}
	#opt_panel .pointer {
		top: -17px;
		left: 0;
		width:50px; 
		height:50px; 
		margin: 0 0 0 75%;
	}


}
/*==============================================*/
/* Low-Res Tablet UI (portrait)							*/
/*==============================================*/
@media only screen and (min-width: 600px) and (max-width: 719px)  {

	#pagecounter {
		display: none;
	}
	#tocslider {
		margin-left: 25%;
		margin-right: 25%;
	}
	.appbanner_dn {
		top: 0px;
	}
	.navbars_hide, .navbars_show, .dropbar_show {
		top: 0px;
	}
	.dropbar_hide {
		top: -45px;
	}
	#views_panel .pointer {
		display: none;
	}
	#dropbar_thumbs {
		width: 100%;
	}
		#dropbar_thumbs .thumb { display: none; }
	#about {
		height: 300px;
		width: 480px;
	}
}
/*==============================================*/
/* Phone UI (Landscape)							*/
/*==============================================*/
@media only screen and (min-width: 480px) and (max-width: 599px) {
	.splash-title {
		margin-bottom: -30px;
	}
	#navbar0 {
		display: none;
	}
#pagecounter {
	display: none;
}	
	.splash-port {
		text-align: center;
	}
	.navbars_hide, .navbars_show {
			top: 0px;
	}
		
	.flipper {
		visibility: visible;
	}
#views_panel {
	height: auto;
}

	.appbanner_dn {
		top: 0px;
	}
	#tocslider {
		margin-left: 25%;
		margin-right: 25%;
	}
	#dropbar_thumbs {
		width: 100%;
	}
		#dropbar_thumbs .thumb { display: none; }
	#about {
		height: 120px;
		width: 355px;
		padding: 20px;
	}
}

/*==============================================*/
/* Phone UI (Portrait)							*/
/*==============================================*/
@media only screen and (max-width: 479px) {
	.splash-title {
		margin-bottom: -30px;
	}
#navbar0 {
	display: block;
}
#pagecounter {
	display: none;
}
	.splash-port {
		text-align: center;
	}
.flipper {
	display: none;
}

#views_panel {
	height: auto;
}
/* Size & Position of Fonts Panel */
/*================================*/
	#font_panel {
		left: 2%;
	}


/* Mobile Bannerad Position & Style */
/*==================================*/
		.appbannerbox {
			width: 100%;
		}
		
		.appbannerbox img {
			width: 100%;
			margin: 0 0 -5px;
		}
/* Pan-Zoom Button */
	#zoom {
		top: 44px;
	}
	#tocslider {
		margin-left: 25%;
		margin-right: 25%;
	}
	#dropbar_thumbs {
		width: 100%;
	}
		#dropbar_thumbs .thumb { display: none; }	
	#about {
		height: 240px;
		width: 200px;
		padding: 20px;
	}
	
}

/*==============================================================*/
/* High Density Displays */
@media only screen and (-webkit-min-device-pixel-ratio : 2.0),
only screen and (min--moz-device-pixel-ration: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
#pagecounter {
	display: none;
}
	.splash-port {
		text-align: center;
	}
	/* These UI elements are the same size no matter what the screen size is */
	#bmark_panel ul li a {
		background: url('../images/app/ui/hires/mark.png') 0 13px no-repeat;
		-webkit-background-size: 11px 17px;
	}
	#help_arrow {
		background: url('../images/app/help/hires/arrow.png') 0 0 no-repeat;
		-webkit-background-size: 62px 45px;
	}
	#tocslider {
		margin-left: 25%;
		margin-right: 25%;
	}
	.bmark { /* Appears in upper right corner of every page */
		background: url('../images/app/ui/hires/bookmark.png') 17px 0 no-repeat;
		-webkit-background-size: 16px 24px;
	}
		#bmark:hover, #bmark:focus {
			background: url('../images/app/ui/hires/dogear.png') 0 0 no-repeat;
			-webkit-background-size: 50px 50px;
		}

		#aboutlogo {
			background: url('../images/app/help/hires/ryuzine_logo.png') 0 0 no-repeat;
			-webkit-background-size: 200px 72px;
		}
			#rmlogo {
				background: url('../images/app/help/hires/RyuMaruLogo.png') 0 0 no-repeat;
				-webkit-background-size: 48px 50px;
			}
	#loadicon {
		background: transparent url('../images/app/ui/hires/spinbox.gif') 0 0 no-repeat;
		-webkit-background-size: 64px 64px;
	}
	#about {
		height: 240px;
		width: 200px;
		padding: 20px;
	}

}