/* Title: GEOS Theme 					*/
/* Ryuzine Version: 0.9.4					*/
/* Creator: Kristiana Hansen				*/
/* Contact: software@kmhcreative.com		*/
/* License: Freeware						*/
/* Comments: Designed for 8-bit				*/
/*==========================================*/

@font-face {
    font-family: 'SilkscreenNormal';
    src: url('fonts/Silkscreen/slkscr-webfont.eot');
    src: url('fonts/Silkscreen/slkscr-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Silkscreen/slkscr-webfont.woff') format('woff'),
         url('fonts/Silkscreen/slkscr-webfont.ttf') format('truetype'),
         url('fonts/Silkscreen/slkscr-webfont.svg#SilkscreenNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SilkscreenBold';
    src: url('fonts/Silkscreen/slkscrb-webfont.eot');
    src: url('fonts/Silkscreen/slkscrb-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Silkscreen/slkscrb-webfont.woff') format('woff'),
         url('fonts/Silkscreen/slkscrb-webfont.ttf') format('truetype'),
         url('fonts/Silkscreen/slkscrb-webfont.svg#SilkscreenBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SilkscreenExpandedNormal';
    src: url('fonts/Silkscreen/slkscre-webfont.eot');
    src: url('fonts/Silkscreen/slkscre-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Silkscreen/slkscre-webfont.woff') format('woff'),
         url('fonts/Silkscreen/slkscre-webfont.ttf') format('truetype'),
         url('fonts/Silkscreen/slkscre-webfont.svg#SilkscreenExpandedNormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SilkscreenExpandedBold';
    src: url('fonts/Silkscreen/slkscreb-webfont.eot');
    src: url('fonts/Silkscreen/slkscreb-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Silkscreen/slkscreb-webfont.woff') format('woff'),
         url('fonts/Silkscreen/slkscreb-webfont.ttf') format('truetype'),
         url('fonts/Silkscreen/slkscreb-webfont.svg#SilkscreenExpandedBold') format('svg');
    font-weight: normal;
    font-style: normal;

}



body {

	background: rgb(50,50,100) url('images/background.gif') 0 0 repeat;
	font-family: SilkscreenNormal !important;
	
}

#binder {
	position: fixed; /* Fixes scroll problem for pages */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0 0 45px 0;
	padding: 0;
}


.plank p {
	width: 55%;
	margin: 12px auto;
	text-align: left;
	font-size: 18px;
		color: #545454; 
	background: #ccc;
	border: 1px solid #545454;
		-webkit-box-shadow: 10px 10px 0px #545454;
		-moz-box-shadow: 10px 10px 0px #545454;
		box-shadow: 10px 10px 0px #545454;
}
	.plank a {
		text-decoration: none;
		color: #663300;
	}

.plank .salute, .plank h1, .plank h2, .plank h3, .plank h4 {
	width: 100%;
	text-align: center;
	font-size: 48px;
		color: #545454; 
}
	/* Show Controls Button */
	#controltoggle {
		color: #fff;
		background: rgba(0,0,0,.75);
	}
	
	
	
.caption, .ryubox p {
	font-family: SilkscreenNormal;
}

/* Splash "Loading..." Page */
/*==========================*/
#splash {		
	color: white;
	background: #a5a5ff;
}
	#splashblock {
		width: 360px;
		height: 248px;
		background: url('images/C64_loadscreen.gif') 0 0 no-repeat;
	}
	
	.splash-title {
		visibility: hidden;
	}
	
	.splash-port {
		visibility: hidden;
		}
	
	.splash-notice {
		visibility: hidden;
	}
	
	
/* Panel Title Bar and Button Text Colors */
.title {
	font-size: 18px;
	color: #545454;
	font-family: SilkscreenNormal;
	line-height: 24px;
	background: #CCC;
	display: table;
	margin: 0 auto;
}

.button p {
	color: #000;
	font-size: 12px;
	font-weight: bold;
	text-transform: lowercase;
}

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

	/* Apply to ALL Navbars & Tabbars */
	.navbars, .titlebar {
		border-bottom: 1px solid #000;
		background: #ccc url('images/titlebar.gif');
		height: 24px;
	}
	
	.tabbars {
		border-top: 1px solid #000;
		background: #ccc;
}
	
	

/* Generic Panel and Button Styles */
/*=================================*/
	/* Panel Appearances (applies to ALL Panels) */
	.panel, .minipanel {
	}
	
		.panel .title {
			font-weight: bolder;
			line-height: 24px;
			color: ##545454;
			text-align: center;
			margin: 0 auto;
			display: table;
			background: #ccc;
		}
		.panel .titlebar {
			border-bottom: 1px solid #333;
			height: 24px;
			background: #ccc url('images/titlebar.gif');
		}

		.panel .titlebar .button {
		display: block;
		border: 2px solid #545454;
		border-radius: 0;
		height: 20px;
		margin: 0;
		top: -24px;
		background: #CCC;
		}
		
		.panel .titlebar .button p {
		color: #CCC;
		font-size: 1px;
		font-weight: bold;
		border-bottom: 4px solid #545454;
		margin: -12px auto 0 auto;
		width: 20px;
		text-align: center;
}
		
		.pointer {
			background: #000;
			position: relative;
			background: #000;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.70);
			-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.70);
			box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.70);
			z-index: 0;
		}
	/* Panel Sub-Type Appearances */
	.panel_A { /* Used for Help & TOC */
		background: #fff;
	}
		.panel_A .titlebar {

		}
		.panel_A .area {
			background: #fff;
		}
	
	.panel_B { /* Used for Fonts & Share */	
		background: #ccc; /* old browsers */
		border: 2px solid #545454;
		-webkit-box-shadow: 10px 10px 0px #545454;
		-moz-box-shadow: 10px 10px 0px #545454;
		box-shadow: 10px 10px 0px #545454;
	}
		.panel_B .titlebar {

		}
		.panel_B .area {
		
		}
	
	.panel_C { /* Used for Views */
		background: #ccc;
	}
		.panel_C .titlebar {
			display: block;
		}
		.panel_C.area {
		
		}


	/* Dialog Boxes */
	.dialog {
background: rgb(119,119,119);
background: -moz-linear-gradient(top, rgb(119,119,119) 0%, rgb(0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(119,119,119)), color-stop(100%,rgb(0,0,0)));
background: -webkit-linear-gradient(top, rgb(119,119,119) 0%,rgb(0,0,0) 100%);
background: -o-linear-gradient(top, rgb(119,119,119) 0%,rgb(0,0,0) 100%);
background: -ms-linear-gradient(top, rgb(119,119,119) 0%,rgb(0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#000000',GradientType=0 );
background: linear-gradient(top, rgb(119,119,119) 0%,rgb(0,0,0) 100%);
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	
	/* Button Appearances */
	.button { /* Default Generic Button */
		height: 44px;
		margin-top: 0;
		border: none;
		border-right: 2px dotted #545454;
		border-left: 2px dotted #545454;
		background: #ccc;
	}
	.button:hover {
		background: #545454;
		border-right: 2px dotted #ccc;
	}
	
	.type1 { /* Standard Button */

	}
	.type1:hover, .type1:focus {
	}
		.type1 p {
			font-family: SilkscreenNormal;
			color: #545454;
			line-height: 44px;
		}
		.type1:hover p, .type1:focus p {
			color: #ccc;
		}
	
	.type2 { /* Blue Button */
	top: -3px;
	background: #ccc;
	border: 2px solid #545454;
}
	
	.type2:hover, .type2:focus {
	background: #4040e0;
}
		.type2 p {
			color: #545454;
		}
		
		.type2:hover p, .type2:focus p {
			color: #ccc;
		}
	
	.type3 { /* Widebutton */
		width: 100%;
		height: 46px;
		border: none;
		border-top: none;
		border-bottom: 2px dotted #545454;
		background: #ccc;
		-moz-border-radius: 0;
		-webit-border-radius: 0;
		border-radius: 0;
		margin: 0;
}
	
	.type3:hover, .type3:focus {
	border: none;
	border-top: none;
	border-bottom: 2px dotted #ccc;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
background: #4040e0;
	}
	
		.type3 p {
			text-align: left;
			margin-left: 10px;
			font-size: 16px;
			font-weight: normal;
			color: #545454;
			font-family: SilkscreenNormal;
		}
		.type3 span {
			float: right;
			font-family: SilkscreenBold;
			margin-top: -32px;
			color: #545454;
			margin-right: 20px;
		}
		
		.type3:hover p, .type3:focus p, .type3:hover span, .type3:focus span {
			color: #ccc;
		}
		
		
	.type4 { /* Wide Cancel Button */
		width: 100%;
		height: 46px;
		border: none;
		border-top: none;
		border-bottom: 2px dotted #545454;
		background: #ccc;
		-moz-border-radius: 0;
		-webit-border-radius: 0;
		border-radius: 0;
		margin: 0;
		}
	
	.type4:hover, .type4:focus {
	border: none;
	border-top: none;
	border-bottom: 2px dotted #ccc;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
background: #4040e0;
}
	
		.type4 p {
			text-align: left;
			margin-left: 10px;
			font-size: 16px;
			font-weight: normal;
			color: #545454;
			font-family: SilkscreenNormal;
		}
		
		.type4 span {
			float: right;
			font-family: SilkscreenBold;
			margin-top: -32px;
			color: #545454;
			margin-right: 20px;
		}
		
		.type4:hover p, .type4:focus p, .type4:hover span, .type4:focus span {
			color: #ccc;
		}
		
		
	.arrow {
		display: none;
	}
	
		.arrow:hover {
		}
	

		.back .button {
			left: 2px;
			width: 50px;
			margin-top: -6px;
			border: 2px solid #545454;
			height: 20px;
		}	
		.back .arrow {

		}
		

		.next .button {
			width: 50px;
			margin-top: -6px;
			border: 2px solid #545454;
			height: 20px;
		}
		.next .arrow {

		}
		/* 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: #545454;
			color: #ccc;
		}
		.back:hover .arrow, .back:focus .arrow,
		.next:hover .arrow, .next:focus .arrow {

		}

.margin-arrow {
	opacity: .50;
}

.flipleft .margin-arrow {
	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 #000;
	opacity: 1.0;
}

.flipright .margin-arrow {
	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 #000;
	opacity: 1.0;
}


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

	/* Assigned Dynamically to Hide or Show Controls */
	.navbars_hide {
		top: 0px; 		/* <--- 0 = show always | -45 = hide */
		/* If hiding controls and using banner ad option	*/
		/* leave this at zero and change it only for the	*/
		/* Phone Portrait below	or ad will not work right	*/
	}
	.navbars_show {
		top: 0px;
	}
	
	.tabbars_hide {
		bottom: 0px; 		/* <--- 0 = show always | -45 = hide */
	}
	.tabbars_show {
		bottom: 0px;
	}
	
	#navbar0 {
		height: 24px;
	}
		#navbar0 .back {
			margin-top: -24px;
			margin-left: 0px;
		}
		#navbar0 .next {
			margin-top: -24px;
			margin-right: 0px;
		}
		#navbar0 .next p, #navbar0 .back p {
			line-height: 20px;
		}
		
	#tabbar0 {
	
	}
	
	/* Tabbar Button Spacing */ 
	#helpbutton {
		margin-top: -44px;
		margin-left: 0px;
	}
	#tocbutton {
		margin-top: 0px;
	}
	#morebutton1 {
		margin-top: -44px;
		margin-right: 0px;
	}
	#lessbutton1 {
		margin-top: 0px;
		margin-left: 0px;
	}
	#fontbutton {
		margin-top: 0px;
		margin-left: 0px;
	}
	#viewsbutton{
		margin-top: 0px;
		margin-right: 0px;
	}
	#morebutton2 {
		margin-top: 0px;
		margin-right: 0px;
	}
	#lessbutton2{
		margin-top: -44px;
		margin-left: 0px;
	}
	#sharebutton{
		margin-top: 0px;
	}
	#optbutton {
		margin-top: -44px;
		margin-right: 0px;
	}	
	#aboutbutton {
		border-top: 2px dotted #545454;
	}

	/* Help Panel */	
	.helpIN {
		bottom: 0%;
	}
	
	.helpOUT {
		bottom: -200%;
	}


		#help_panel .area {

		}
	
	/* Table of contents panel */
	.tocIN {
		bottom: 0%;
	}
	
	.tocOUT {
		bottom: -200%;
	}
	
		#toc_panel .area {
			background: #ccc;
		}
		
		#toc_panel ul {

		}
			#toc_panel ul li {
				height: 47px;
				border-bottom: 2px dotted #545454;
				border-top: none;
			}
				#toc_panel ul li a {
					font-weight: normal;
					font-size: 16px;
					line-height: 46px;
					font-family: SilkscreenNormal;
				}
				
				#toc_panel ul li .cequals {
					float: right;
					font-family: SilkscreenBold;
					margin-top: -32px;
					color: #545454;
					margin-right: 20px;
				}
				
	/* 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 {
		color: #545454;
		font-weight: normal;
	}
	.list_down {
	border-top: 1px solid #9c732b;
	border-bottom: 1px solid #9b7637;
background: #4040e0;
}
	.list_down a {
		color: #ccc;
	}

/* Size & Position of Fonts Panel */
/*================================*/

		#font_panel .area div:hover, #font_panel .area div:focus {
			background: #4040e0;
		}
		#font_panel .area .sub-button-left {
			border-right: 1px dotted #545454;
		}
		#font_panel .area .sub-button-right {
			border-left: 1px dotted #545454;
		}

	.fontIN {
		bottom: 70px;
	}
	
	.fontOUT {
		bottom: -200px;
	}

		#font_panel .area p {
			color: #545454;
			font-family: SilkscreenBold;
		}
		
		#font_panel .area div:hover p, #font_panel .area div:focus p {
			color: #ccc;
		}
		
		#font_panel .pointer { display: none; }
/* Views Panel */
	#views_panel {
		position: absolute;
		width: 100%;
		height: 100%;
		margin-bottom: 0;
	}
		#views_panel area {
			height: 100%;
			position: relative;
			overflow-x: hidden;
			overflow-y: auto;
		}

	.viewsIN {
		bottom: 0%;
	}
	.viewsOUT{
		bottom: -200%;
	}
	
/* Share Panel */	
	#shareit {
		margin-top:2px;
		height: 24px;
		border: 2px solid #545454;
	}
		#shareit p {
			line-height: 22px;
			font-family: SilkscreenNormal;
		}
	#shareinput {
		font-family: SilkscreenNormal;
		color: #ccc;
		background: #545454;
		border: none;
	}
	#share_panel .pointer { display: none; }
		
	.shareIN {
		bottom: 70px;
	}
	
	.shareOUT{
		bottom: -150px;
	}

/* 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: #ccc;
			
		}
		#upbox #altoptdone {
			display: block;
		}
		
		#opt_panel ul {
			margin: 0px;
			width: auto;
		}
			#opt_panel ul li {
				height: 47px;
				background: none;
				border-top: none;
				border-bottom: 2px dotted #545454;
			}
				#opt_panel ul li a {
					width: 100%;
					display: block;
					font-family: SilkscreenNormal;
					font-weight: bold;
					font-size: 18px;
					line-height: 43px;
					text-decoration: none;
					margin-left: 10px;
					-webkit-touch-callout: none;
				}
	.optitem {
		line-height: 47px;
		font-weight: normal;
		color: #545454;
		padding-left: 10px;
	}
		.opt-disabled {
			color: #999;
		}
	.opt-track {
	border: 2px solid #545454;
	background: none;
	overflow: hidden;
	float: right;
	position: relative;
	z-index: 0;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	}
	.opt-slider {
		position: absolute;
		text-align: right;
		text-transform: uppercase;
		font-weight: bold;
	}
		.opt-slider .on-label {
			position: absolute;
			left: 8px; top: 0;
			width: 20px;
			height: 20px;
			background: none;
		}
			.on-label .on-txt {
				display: block;
			}
			.on-label .on-sym {
				display: none;
			}
			
	.opt-button {
		border: 1px solid #545454;
		background: #4040e0;
	}
	
		.opt-track .off-label {
			display: block;
			left: 84px;
		}
			.off-label .off-txt {
				display: block;
			}
			
		.optON {
			left: 0px;
		}
		.optOFF {
			left: -54px;
		}

		#opt_panel ul .opt-first {
		}
		
		#opt_panel ul .opt-last {
		}
		
		#opt_panel ul .opt-solo {
		}
		
		#opt_panel .smallprint {
			text-align: center;
			color: #333;
			font-size: 14px;
			margin: 10px;
		}
		
	.banneradbox p {
			background: black;
			color: #fff;
		}
	.bmark { /* Appears in upper right corner of every page */
		background: url('images/bookmark.png') 0 0 no-repeat;
	}
		#bmark:hover, #bmark:focus {
			background: url('images/dogear.png') 0 0 no-repeat;
		}

/*==============================================*/
/*	Desktop										*/
/*==============================================*/
@media only screen and (min-width: 1600px)  {
	/* Apply to ALL Navbars & Tabbars */
	.navbars, .titlebar {
	}
	
	.tabbars {
	}
	
	.button p {
	}
	
	.type1 {
	}
	.type1:hover, .type1:focus {
	}
		.type1 p {
/*			text-shadow: 0px -1px 1px #333, 1px 0px 1px #666; */
		}
		.type1:hover p, .type1:focus p {
		}
	

	.type2 { /* Blue Button */
}
	
	.type2:hover, .type2:focus {
}
		.type2 p {
		}
		
		.type2:hover p, .type2:focus p {
		}	
		
	.type3 { /* Widebutton */
	}
		.type3:hover, .type3:focus {
		}
		.type3:hover p, .type3:focus p {
		}
		
	.type4 { /* Wide Cancel Button */
	}
	
	.type4:hover, .type4:focus {
	}
		.type4:hover p, .type4:focus p {

		}

	.panel {

	}
		.panel .title {
		}

	/* Panel Sub-Type Appearances */
	.panel_A { /* Used for Help & TOC */
		border: 2px solid #545454;
		box-shadow: 10px 10px 0px #545454;
		-moz-box-shadow: 10px 10px 0px #545454;
		-webkit-box-shadow: 10px 10px 0px #545454;
		-ms-box-shadow: 10px 10px 0px #545454;
		background: #ccc;
	}

		.panel_A .titlebar {
		}
		.panel_A .area {
		}
		.panel_A .pointer {
			display: none;
		}
	
	.panel_B { /* Used for Fonts & Share */

	}
		.panel_B .titlebar {

		}
		.panel_B .area {
		
		}
	
	.panel_C { /* Used for Views */
		border: 2px solid #545454;
		box-shadow: 10px 10px 0px #545454;
		-moz-box-shadow: 10px 10px 0px #545454;
		-webkit-box-shadow: 10px 10px 0px #545454;
		-ms-box-shadow: 10px 10px 0px #545454;
		background: #ccc;
	}
		.panel_C .titlebar {
		}
		.panel_C.area {
		background: #ccc;
		}

/* Size & Position of Help Panel */
/*===============================*/
	#help_panel {
		position: absolute;
		left: 20px;
		bottom: 95px;
		width: 	50%;
		height: 80%;
		margin: -30px auto;
	}
	
	.helpIN {
		z-index: 20;
		opacity: 1;
	}
	
	.helpOUT {
		opacity: 0;
		z-index: 1;
	}
		#help_panel .area {
		margin: 0px auto;
		width: 97%;
		height: 95%;
		}
		
		#helptext .infomargin {
		margin: 15px;
		}
		
		#help_panel .pointer {
		}

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

	}
	
	.tocIN {
		z-index: 20;
		opacity: 1.0;
	}
	
	.tocOUT {
		opacity: 0;
		z-index: 1;
	}
		#toc_panel .area {
		margin: 0;
		width: 325px;
		}

		
	.list_down {
}
/* Size & Position of Views Panel */
/*================================*/
	#views_panel {
		position: absolute;
		right: 20px;
		bottom: 65px;
		padding-top: 0;
		width: 	300px;
		height: 215px;
		margin: 0;
		overflow: visible;
	}
	
	.viewsIN {
		z-index: 20;
		opacity: 1;
	}
	
	.viewsOUT {
		opacity: 0;
		z-index: 1;
	}
	
	#views_panel .pointer {
		display: none;
	}
/* Fonts Panel Button Hover */
	#font_panel .area div:hover, #font_panel .area div:focus {
		}
		
	.fontIN {
		bottom: 70px;
	}
	
	.fontOUT {
		bottom: -200px;
	}
		#font_panel .area p {
		}
		
		#font_panel .area div:hover p, #font_panel .area div:focus p {
		}	
	.shareIN {
		bottom: 70px;
	}
	
	.shareOUT{
		bottom: -150px;
	}
			/* Options Panel */
/*=============================*/
	#opt_panel {
		position: absolute;
		right: 20px;
		bottom: 65px;
		width: 	350px;
		height: 365px;
		margin: 0;
		overflow: visible;
	}
	
	.optIN {
		opacity: 1;
		z-index: 20;
	}
	
	.optOUT {
		opacity: 0;
		z-index: 1;
	}
	
		#opt_panel .area {
			height: 340px;
			margin: 0;
		}
		
		#opt_panel .smallprint {
			font-size: 12px;
		}
}


/*==============================================*/
/* Tablet UI (Landscape)							*/
/*==============================================*/
@media only screen and (min-width: 1024px) and (max-width: 1599px) {
	/* Apply to ALL Navbars & Tabbars */
	.navbars, .titlebar {
	}
	
	.tabbars {
	}
	
	.button p {
	}
	
	.type1 {
	}
	.type1:hover, .type1:focus {
	}
		.type1 p {
/*			text-shadow: 0px -1px 1px #333, 1px 0px 1px #666; */
		}
		.type1:hover p, .type1:focus p {
		}
	

	.type2 { /* Blue Button */
}
	
	.type2:hover, .type2:focus {
}
		.type2 p {
		}
		
		.type2:hover p, .type2:focus p {
		}	
		
	.type3 { /* Widebutton */
	}
		.type3:hover, .type3:focus {
		}
		.type3:hover p, .type3:focus p {
		}
		
	.type4 { /* Wide Cancel Button */
	}
	
	.type4:hover, .type4:focus {
	}
		.type4:hover p, .type4:focus p {

		}

	.panel {

	}
		.panel .title {
		}

	/* Panel Sub-Type Appearances */
	.panel_A { /* Used for Help & TOC */
		border: 2px solid #545454;
		box-shadow: 10px 10px 0px #545454;
		-moz-box-shadow: 10px 10px 0px #545454;
		-webkit-box-shadow: 10px 10px 0px #545454;
		-ms-box-shadow: 10px 10px 0px #545454;
		background: #ccc;
	}

		.panel_A .titlebar {
		}
		.panel_A .area {
		}
		.panel_A .pointer {
			display: none;
		}
	
	.panel_B { /* Used for Fonts & Share */

	}
		.panel_B .titlebar {

		}
		.panel_B .area {
		
		}
	
	.panel_C { /* Used for Views */
		border: 2px solid #545454;
		box-shadow: 10px 10px 0px #545454;
		-moz-box-shadow: 10px 10px 0px #545454;
		-webkit-box-shadow: 10px 10px 0px #545454;
		-ms-box-shadow: 10px 10px 0px #545454;
		background: #ccc;
	}
		.panel_C .titlebar {
		}
		.panel_C.area {
		background: #ccc;
		}

/* Size & Position of Help Panel */
/*===============================*/
	#help_panel {
		position: absolute;
		left: 20px;
		bottom: 95px;
		width: 	50%;
		height: 80%;
		margin: -30px auto;
	}
	
	.helpIN {
		z-index: 20;
		opacity: 1;
	}
	
	.helpOUT {
		opacity: 0;
		z-index: 1;
	}
		#help_panel .area {
		margin: 0px auto;
		width: 97%;
		height: 95%;
		}
		
		#helptext .infomargin {
		margin: 15px;
		}
		
		#help_panel .pointer {
		}

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

	}
	
	.tocIN {
		z-index: 20;
		opacity: 1.0;
	}
	
	.tocOUT {
		opacity: 0;
		z-index: 1;
	}
		#toc_panel .area {
		margin: 0;
		width: 325px;
		}

		
	.list_down {
}
/* Size & Position of Views Panel */
/*================================*/
	#views_panel {
		position: absolute;
		right: 20px;
		bottom: 65px;
		padding-top: 0;
		width: 	300px;
		height: 215px;
		margin: 0;
		overflow: visible;
	}
	
	.viewsIN {
		z-index: 20;
		opacity: 1;
	}
	
	.viewsOUT {
		opacity: 0;
		z-index: 1;
	}
	
	#views_panel .pointer {
		display: none;
	}
/* Fonts Panel Button Hover */
	#font_panel .area div:hover, #font_panel .area div:focus {
		}
		
	.fontIN {
		bottom: 70px;
	}
	
	.fontOUT {
		bottom: -200px;
	}
		#font_panel .area p {
		}
		
		#font_panel .area div:hover p, #font_panel .area div:focus p {
		}	
	.shareIN {
		bottom: 70px;
	}
	
	.shareOUT{
		bottom: -150px;
	}
			/* Options Panel */
/*=============================*/
	#opt_panel {
		position: absolute;
		right: 20px;
		bottom: 65px;
		width: 	350px;
		height: 365px;
		margin: 0;
		overflow: visible;
	}
	
	.optIN {
		opacity: 1;
		z-index: 20;
	}
	
	.optOUT {
		opacity: 0;
		z-index: 1;
	}
	
		#opt_panel .area {
			height: 340px;
			margin: 0;
		}
		
		#opt_panel .smallprint {
			font-size: 12px;
		}
}

/*==============================================*/
/* Tablet UI (portrait)							*/
/*==============================================*/
@media only screen and (min-width: 600px) and (max-width: 1023px) {
	/* Apply to ALL Navbars & Tabbars */
	.navbars, .titlebar {
	}
	
	.tabbars {
	}
	
	.button p {
	}
	
	.type1 {
	}
	.type1:hover, .type1:focus {
	}
		.type1 p {
/*			text-shadow: 0px -1px 1px #333, 1px 0px 1px #666; */
		}
		.type1:hover p, .type1:focus p {
		}
	

	.type2 { /* Blue Button */
}
	
	.type2:hover, .type2:focus {
}
		.type2 p {
		}
		
		.type2:hover p, .type2:focus p {
		}	
		
	.type3 { /* Widebutton */
	}
		.type3:hover, .type3:focus {
		}
		.type3:hover p, .type3:focus p {
		}
		
	.type4 { /* Wide Cancel Button */
	}
	
	.type4:hover, .type4:focus {
	}
		.type4:hover p, .type4:focus p {

		}

	.panel {

	}
		.panel .title {
		}

	/* Panel Sub-Type Appearances */
	.panel_A { /* Used for Help & TOC */
		border: 2px solid #545454;
		box-shadow: 10px 10px 0px #545454;
		-moz-box-shadow: 10px 10px 0px #545454;
		-webkit-box-shadow: 10px 10px 0px #545454;
		-ms-box-shadow: 10px 10px 0px #545454;
		background: #ccc;
	}

		.panel_A .titlebar {
		}
		.panel_A .area {
		}
		.panel_A .pointer {
			display: none;
		}
	
	.panel_B { /* Used for Fonts & Share */

	}
		.panel_B .titlebar {

		}
		.panel_B .area {
		
		}
	
	.panel_C { /* Used for Views */
		border: 2px solid #545454;
		box-shadow: 10px 10px 0px #545454;
		-moz-box-shadow: 10px 10px 0px #545454;
		-webkit-box-shadow: 10px 10px 0px #545454;
		-ms-box-shadow: 10px 10px 0px #545454;
		background: #ccc;
	}
		.panel_C .titlebar {
		}
		.panel_C.area {
		background: #ccc;
		}

/* Size & Position of Help Panel */
/*===============================*/
	#help_panel {
		position: absolute;
		left: 20px;
		bottom: 95px;
		width: 	50%;
		height: 80%;
		margin: -30px auto;
	}
	
	.helpIN {
		z-index: 20;
		opacity: 1;
	}
	
	.helpOUT {
		opacity: 0;
		z-index: 1;
	}
		#help_panel .area {
		margin: 0px auto;
		width: 97%;
		height: 95%;
		}
		
		#helptext .infomargin {
		margin: 15px;
		}
		
		#help_panel .pointer {
		}

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

	}
	
	.tocIN {
		z-index: 20;
		opacity: 1.0;
	}
	
	.tocOUT {
		opacity: 0;
		z-index: 1;
	}
		#toc_panel .area {
		margin: 0;
		width: 325px;
		}

		
	.list_down {
}
/* Size & Position of Views Panel */
/*================================*/
	#views_panel {
		position: absolute;
		right: 20px;
		bottom: 65px;
		padding-top: 0;
		width: 	300px;
		height: 215px;
		margin: 0;
		overflow: visible;
	}
	
	.viewsIN {
		z-index: 20;
		opacity: 1;
	}
	
	.viewsOUT {
		opacity: 0;
		z-index: 1;
	}
	
	#views_panel .pointer {
		display: none;
	}
/* Fonts Panel Button Hover */
	#font_panel .area div:hover, #font_panel .area div:focus {
		}
		
	.fontIN {
		bottom: 70px;
	}
	
	.fontOUT {
		bottom: -200px;
	}
		#font_panel .area p {
		}
		
		#font_panel .area div:hover p, #font_panel .area div:focus p {
		}	
	.shareIN {
		bottom: 70px;
	}
	
	.shareOUT{
		bottom: -150px;
	}
			/* Options Panel */
/*=============================*/
	#opt_panel {
		position: absolute;
		right: 20px;
		bottom: 65px;
		width: 	350px;
		height: 365px;
		margin: 0;
		overflow: visible;
	}
	
	.optIN {
		opacity: 1;
		z-index: 20;
	}
	
	.optOUT {
		opacity: 0;
		z-index: 1;
	}
	
		#opt_panel .area {
			height: 340px;
			margin: 0;
		}
		
		#opt_panel .smallprint {
			font-size: 12px;
		}
}



/*==============================================*/
/* Phone UI (Landscape)							*/
/*==============================================*/
@media only screen and (min-width: 480px) and (max-width: 599px) {


}




/*==============================================*/
/* Phone UI (Portrait)							*/
/*==============================================*/
@media only screen and (max-width: 479px) and (orientation:portrait) {
	.navbars_hide {

	}
	.navbars_show {

	}		
}