/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 14px; line-height: 1.231; }

body, button, input, select, textarea { font-family:Helvetica, Arial, sans-serif; color: #555; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #d30000; color: #fff; text-shadow: none; }
::selection { background: #d30000; color: #fff; text-shadow: none; }
#page1 ::-moz-selection { color:transparent; background: #fff;}
#page1 ::selection { color:transparent; background: #fff; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #d30000; }
a:visited { color: #b07e7e; }
a:hover { color: #f00; text-decoration:none; }
a:focus { outline: thin dotted; }

a.sources { color: #8a8781; }
a.sources:visited { color: #8a8781; }
a.sources:hover { color: #8a8781; text-decoration:none; }
a.sources:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

p {line-height:1.5em;}

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
h1, h2, h3, h4, h5, h6 { font-weight:normal;text-align:center;}


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/* button styles from bootstrap.css */
.btn {
	display:inline-block;
	background:#c00 url(../img/bg_btn.png);
	border:1px solid #930000;
	border-top:1px solid #c75e5e;
	color:#fff;
	cursor:pointer;
	font-size:16px;
	padding: 10px 15px;
	margin:0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space:nowrap;
	line-height: normal;
}
.btn:active,
.btn:hover {
	background:#c00000;
	border:1px solid #c75e5e;
	border-bottom:1px solid #c75e5e;
}
.btn-small {
	padding: 4px 10px 4px;
	font-size: 13px;
	background:#555;
	border-color:#444;
	background-image:none;
}
.btn-small:active,
.btn-small:hover {
	background:#666;
	border-color:#555;
}

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Richard Westenra
   ========================================================================== */

body {
	background:#fff;
	color:#555;
}
	.message {color:#c00; text-align: center; font-size:14px; font-weight:400; margin:30px;}
	#jsMessage,
	#ie6Message {
		display:none;
	}
	.no-js #jsMessage,
	.ie6 #ie6Message {
		display:block;
	}
	.wrapper {
		width:960px;
		margin:0 auto;
	}
	header {
		padding:15px 0 30px;
	}
		header h1 {
			font-size:43px;
			color:#c00;
			margin:0 0 6px;
			font-weight:bold;
			text-align: center;
		}
		header h2 {
			font-weight:normal;
			font-size:18px;
			margin:0;
			text-align: center;
		}
			#ereader {
				width:570px;
				height:750px;
				position:relative;
				background:#666 url(../img/shine.png) 65px -22px no-repeat;
				border:4px solid #666;
				-moz-border-radius:26px;
				-webkit-border-radius:26px;
				-o-border-radius:26px;
				border-radius:26px;
				-moz-box-shadow:5px 5px 12px #ddd;
				-webkit-box-shadow:5px 5px 12px #ddd;
				-ms-box-shadow:5px 5px 12px #ddd);
				-o-box-shadow:5px 5px 12px #ddd;
				box-shadow:5px 5px 12px #ddd;
				behavior:url(js/mylibs/PIE.htc);
			}
			.ie6 #ereader,
				.ie6 #screen {
				background-image:none;
			}
				#instructions, #prompt {
					text-align:center;
				}
				.alert {
					background:#fff;
					border:3px solid #eee;
					width:360px;
					padding:15px 15px 25px;
					position:absolute;
					left:90px;
					top:180px;
					z-index:5;
					color:#333;
					-moz-border-radius:6px;
					-webkit-border-radius:6px;
					-o-border-radius:6px;
					border-radius:6px;
					-moz-box-shadow:0 0 50px rgba(0,0,0,0.2);
					-webkit-box-shadow:0 0 50px rgba(0,0,0,0.2);
					-o-box-shadow:0 0 50px rgba(0,0,0,0.2);
					box-shadow:0 0 50px rgba(0,0,0,0.2);
				}
					.buttonContainer {
						text-align:center;
						margin-bottom:0;
					}
				#config {
					top:80px;
				}
					#config .alertTop {
						padding:15px 25px 0;
					}
						#config h3 {
							font-size:26px;
							text-align:center;
							margin:6px 0 15px;
							font-weight:bold;
						}
						.slider {clear:both; padding-bottom:10px;}	
							.ui-widget-content { border: 1px solid #aaa; background: #fff; color: #222; }
							.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
							.ui-slider { position: relative; text-align: left; }
							.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
							.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
							
							.ui-slider-horizontal { height: .8em; margin:12px 0 10px; }
							.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
							.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
							.ui-slider-horizontal .ui-slider-range-min { left: 0; }
							.ui-slider-horizontal .ui-slider-range-max { right: 0; }
							
							.ui-slider-vertical { width: .8em; height: 100px; }
							.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
							.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
							.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
							.ui-slider-vertical .ui-slider-range-max { top: 0; }
							.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6; font-weight: normal; color: #555; }
							.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555; text-decoration: none; }
							.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999; background: #dadada; font-weight: normal; color: #212121; }
							.ui-state-hover a, .ui-state-hover a:hover { color: #212121/; text-decoration: none; }
							.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #fff; font-weight: normal; color: #212121; }
							.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
							.ui-widget :active { outline: none; }
							.bookSelector {
								padding:5px 0;
							}
								.bookSelector div {
									padding:5px 0 5px 15px;
								}
				#configbutton {
					text-align:left;
					position:absolute;
					top:6px;
					right:7px;
					background:none;
					border:none;
					cursor:pointer;
					color:#555;
					text-shadow:0 1px 1px #bbb;
					font-weight:bold;
					text-transform:uppercase;
					font-size:12px;
					width:95px;
					height:33px;
					padding:0;
				}
					#configbutton .cogLabel {
						height:15px;
						padding-top:9px;
						display:block;
						float:left;
					}	
					#configbutton .cog {
						float:right;
						background:url(../img/arrowsprite.png) no-repeat 0 -139px;
						width:33px;
						height:33px;
						display:block;
					}
					#configbutton:hover .cog {
						background-position:-35px -139px;
					}
					#configbutton.on .cog {
						background-position:-70px -139px;
					}
				#screen {
					color:#555;
					border:#ddd 4px solid;
					background:#ddd url(../img/shine.png) 31px -67px no-repeat;
					position:relative;
					left:30px;
					top:40px;
					width:500px;
					height:600px;
					-moz-border-radius:16px;
					-webkit-border-radius:16px;
					-o-border-radius:16px;
					border-radius:16px;
					behavior:url(js/mylibs/PIE.htc);
				}
					#screen .ePage {
						position:absolute;
						height:550px;
						width:450px;
						padding:20px;
						margin:5px;
						-moz-transition:all linear 0.3s;
						-webkit-transition:all linear 0.3s;
						-o-transition:all linear 0.3s;
						transition:all linear 0.3s;
						overflow:auto;
					}
					#page1 {
						font-family: 'Droid Serif', serif;
					}
					#page1,
					#page2 {
						color:#555;
					}
					#page1.blur,
					.blur {
						color:transparent;
						text-shadow:0 0 8px #333;
					}
					.oldie .blur p {
						display:none;
					}
						.title {
							font-size:0.8em;
							text-align:right;
							margin:0px 0 20px;
							opacity:0.4;
						}
						#quiz {
							padding-left:20px;
							margin-bottom:30px;
						}
							#quiz li {
								margin:15px 0;
							}
								#quiz li p {
									margin:0;
									padding:3px 0 5px;
								}
								#quiz li label {
									display:block;
									padding:0 0 5px;
								}
									#quiz li label input {
										margin-right:5px;
									}
					h2.result {
						font-size:24px;
						margin:10px 0 0px;
						color:#666;
					}
						h2.result .wpm {
							font-size:44px;
							color:#c00;
							font-weight:bold;
						}
					#rankings {
						height:340px;
						outline:none;
						margin:0 -15px;
					}
						#rankings ul {
							padding:0;
							margin:0;
							position:relative;
						}
						#markers {
							height:250px;
							overflow:hidden;
							border-bottom:2px solid #aaa;
						}
							#rankings ul li {
								list-style:none;
								position:absolute;
								font-family:sans-serif;
								font-size:13px;
							}
							#markers .notYou {
								top:235px;
								z-index:2;
								color:#111;
								opacity:0.45;
								width:0;
								height:15px;
								border-left:1px solid #aaa;
							}
								#markers .notYou span {
									display:block;
									-moz-transform:rotate(270deg);
									-webkit-transform:rotate(270deg);
									-o-transform:rotate(270deg);
									-ms-transform:rotate(270deg);
									transform:rotate(270deg);
									width:350px;
									height:20px;
									margin:-193px 0 0 -173px;
								}
								.no-csstransforms #markers .notYou span {
									filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
									position:relative;
									top:-185px;
									margin-left:-10px;
								}
							#markers .you {
								background:url(../img/arrowsprite.png) 0 0 no-repeat;
								top:114px;
								margin-left:-47px;
								width:91px;
								height:136px;
								z-index:1;
								opacity:0.7;
							}
						#units {
						}
							#units .unit {
								width:80px;
								height:10px;
								top:0;
								border-left:1px solid #aaa;
							}
								#units .unit span {
									margin:12px 0 0 -41px;
									width:80px;
									display:block;
									text-align:center;
								}
						#wpmLabel {
							font-size:14px;
							color:#666;
							position:absolute;
							left:0;
							top:200px;
						}
						.oldie #wpmLabel {
							top:20px;
						}
					#books {
						position:relative;
						padding-bottom:50px;
					}
						#books h4 {
							text-align:center;
							font-size:30px;
							font-weight:bold;
							margin:90px 0 30px;
							line-height:1.2em;
							color:#888;
						}
							.jcarousel-clip {
								overflow:hidden;
								width:450px;
								margin:0 auto 15px;
								border-top:2px solid #ccc;
								border-bottom:2px solid #ccc;
								padding:15px 0;
							}
								.jcarousel-item {
									width:450px;
									display:block;
									text-align:center;
									font-size:37px;
									line-height:1em;
								}
									.jcarousel-item .bTitle {
										font-size:36px;
										line-height:1.2em;
									}
									.jcarousel-item .bAuthor {
										font-size:24px;
										white-space:nowrap;
									}
									.jcarousel-item .bTime {
										font-size:24px;
										white-space:nowrap;
									}
									.jcarousel-item small {
										opacity:0.7;
										font-size:16px;
									}
						.jcarousel-prev {float:left;}
						.jcarousel-next {float:right;}
					#ereaders {
						padding-bottom:60px;
					}
						#ereaders h4 {
							font-size:24px;
							line-height:1.5em;
							text-align:center;
							margin:30px 0 5px;
							font-weight:bold;
						}
						#ereaders p {
							text-align:center;
							margin:0 0 30px;
							font-size:13px;
						}
						#ereaders ul {
							font-family:sans-serif;
							font-size:12px;
						}
						 #y {
							position:relative;
							list-style:none;
							padding:0 0 1px 10px;
							margin:0;
							border-right:1px solid #bbb;
							width:4px;
							float:left;
						}
							 #y li {
								position:absolute;
								width:4px;
								height:0px;
								border-top:1px solid #bbb;
								color:#777;
							}
								#y li span {
									margin:-7px 0 0 -25px;	
									display:block;
									text-align:center;
								}
						#x {
							list-style:none;
							padding:0 10px 0 20px;
							margin:0;
							border-bottom:1px solid #bbb;
							display:block;
							float:left;
							width:388px;
						}
							#x li {
								float:left;
								display:block;
								position:relative;
								width:48px;
							}
								#x li span.bar {
									display:block;
									background:#777;
									color:#eee;
									width:30px;
									margin-left:10px;
									opacity:0.7;
								}
									#x li span.bar span {
										display:block;
										text-align:center;
										padding-top:13px;
										font-size:11px;
									}
								#x li span.label {
									display:block;
									text-align:center;
									padding-top:10px;
									opacity:0.7;
									color:#555;
								}
								#x li:hover span.bar,
								#x li:hover span.label {
									opacity:1;
							}
					#page6 h4 {
						text-align:center;
						font-size:20px;
						font-weight:bold;
						margin:20px 0 0;
					}
					#tweetLikePost {
						width:226px;
						padding:20px 0 0 17px;
						margin:0 auto;
						clear:both;
					}
						.tweetLikePost {
							float:left;
						}
						#twitter_button {
							padding-right:30px;
						}
						#like_button {
							padding-right:20px;
						}
					h4.embed {
						border-top:1px solid #ccc;
						padding-top:20px;
						text-align:center;
					}
					textarea.embed {
						margin:10px auto 0px;
						text-align:left;
						background:#ccc;
						background:rgba(255,255,255,0.6);
						border:3px solid #aaa;
						padding:13px;
						-moz-border-radius:5px;
						-webkit-border-radius:5px;
						-o-border-radius:5px;
						border-radius:5px;
						line-height:1.6em;
						-moz-transition:background linear 0.2s, border-color linear 0.2s;
						-webkit-transition:background linear 0.2s, border-color linear 0.2s;
						-o-transition:background linear 0.2s, border-color linear 0.2s;
						transition:background linear 0.2s, border-color linear 0.2s;
						width:420px;
					}
					textarea.embed:hover,
					textarea.embed:focus {
						background:#fff;
						border-color:#999;
					}
					p.embed {
						font-size:12px;
						text-align:center;
					}
					p.copy {
						font-size:14px;
						text-align:left;
						padding:0 80px 0 80px;
					}
					p.footer {
						font-size:14px;
						text-align:left;
					}
					
					.links {
						font-size:10px;
						color:#8a8781;
						text-align:left;
						padding:0 80px 0 80px;
					}
	#controls {
		text-align:center;
		top:65px;
		left:0;
		position:relative;
	}
	#credit {
		padding:20px 0 20px;
		margin-top:40px;
		border-top: #4f4741 dashed 1px;
	}
		#credit ul a {
			color:#8c847d;
		}
		#credit ul {
			list-style:none;
			padding:0;
			margin:0;
			font-size:10px;
		}
				


/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}


/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer {
	overflow: hidden;
	position: relative;
}

.jspPane {
	position: absolute;
}

.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
}

.jspHorizontalBar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 18px;
}

.jspVerticalBar *,
.jspHorizontalBar * {
	margin: 0;
	padding: 0;
}

.jspCap {
	display: none;
}

.jspHorizontalBar .jspCap {
	float: left;
}

.jspTrack {
	background:#ccc;
	position: relative;
	height:3px;
}

.jspDrag {
	position: relative;
	left: 0;
	cursor: pointer;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}

.jspHorizontalBar .jspTrack {
	float: left;
}
	.jspHorizontalBar .jspDrag {
		top: -7px;
		background: #7b271c;
		border:1px solid #63261e;
		float: left;
		height: 16px;
	}
	.jspHorizontalBar .jspDrag:hover,
	.jspHorizontalBar .jspDrag:active,
	.jspHorizontalBar .jspDrag:focus {
		background: #b63323;
		border:1px solid #802115;
	}

.jspArrow {
	background:url(../img/arrowsprite.png) no-repeat;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled {
	cursor: default;
}

.jspVerticalBar .jspArrow {
	height: 16px;
}

.jspHorizontalBar .jspArrow {
	width: 16px;
	height: 100%;
	float: left;
	margin-top:-7px;
}
.jspHorizontalBar .jspArrowLeft {background-position:1px -175px;}
.jspHorizontalBar .jspArrowRight {background-position:-13px -175px;}
.jspHorizontalBar .jspArrowLeft:hover {background-position:-31px -175px;}
.jspHorizontalBar .jspArrowRight:hover {background-position:-45px -175px;}
.jspHorizontalBar .jspArrowLeft.jspDisabled {background-position:-63px -175px;}
.jspHorizontalBar .jspArrowRight.jspDisabled {background-position:-77px -175px;}

.jspVerticalBar .jspArrow:focus {
	outline: none;
}

.jspCorner {
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
	margin: 0 -3px 0 0;
}




#wrapall .c00 {
	margin-top: 10px !important; }
  
  .wrapper #modules p a img {
	border: 2px solid transparent; }
  
  #wrapall {
	text-align: left;
	margin: 0 auto;
	float: none;
	padding: 0;
	width: 960px;
	position: relative;
	background-color: #fff;
	clear: both; }
	#wrapall iframe {
	  display: block;
	  margin: 0 auto; }
  
  @media only screen and (max-width: 1440px) and (min-width: 1025px) {
	#wrapall {
	  width: 100% !important; }
	.wrapper {
	  width: 100%; } }
  
  @media only screen and (max-width: 1024px) and (min-width: 821px) {
	#wrapall {
	  width: 100% !important; }
	  #wrapall .c00 {
		width: 100% !important; }
		#wrapall .c00 #z_wrapper {
		  overflow: hidden;
		  padding-top: 10%;
		  position: relative; }
		#wrapall .c00 iframe {
		  width: 100% !important;
		  height: 100% !important;
		  left: 0;
		  position: absolute;
		  top: 0; }
	.wrapper {
	  width: 100%; }
	  .wrapper textarea {
		width: 97% !important;
		margin: 0px 10px 0px 10px !important; }
	  .wrapper #modules {
		text-align: center; }
		.wrapper #modules table {
		  width: 100%; }
		.wrapper #modules p {
		  width: 100% !important;
		  margin-left: 0px !important;
		  height: 100% !important; }
	p.copy, p.embed, .links {
	  padding: 0px 10px !important; }
	p.copy, .links {
	  font-size: 14px !important; } }
  
  @media only screen and (max-width: 820px) and (min-width: 601px) {
	#wrapall {
	  width: 100% !important;
	  display: inline-block; }
	  #wrapall .c00 {
		width: 100% !important; }
		#wrapall .c00 #z_wrapper {
		  overflow: hidden;
		  padding-top: 20%;
		  position: relative; }
		#wrapall .c00 iframe {
		  width: 100% !important;
		  height: 100% !important;
		  left: 0;
		  position: absolute;
		  top: 0; }
	.wrapper {
	  width: 100%; }
	  .wrapper textarea {
		width: 97% !important;
		margin: 0px 10px 0px 10px !important; }
	  .wrapper #modules {
		text-align: center; }
		.wrapper #modules p {
		  width: 100% !important;
		  margin-left: 0px !important;
		  height: 100% !important; }
	p.copy, p.embed, .links {
	  padding: 0px 10px !important; }
	p.copy, .links {
	  font-size: 14px !important; } }
  
  @media only screen and (max-width: 600px) {
	#wrapall {
	  width: 100% !important; }
	  #wrapall .c00 {
		width: 100% !important; }
		#wrapall .c00 #z_wrapper {
		  overflow: hidden;
		  padding-top: 40%;
		  position: relative; }
		#wrapall .c00 iframe {
		  width: 100% !important;
		  height: 100% !important;
		  left: 0;
		  position: absolute;
		  top: 0; }
	.wrapper {
	  width: 100%;
	  display: inline-block; }
	  .wrapper textarea {
		width: 97% !important;
		margin: 0px 10px 0px 10px !important; }
	  .wrapper #modules {
		text-align: center; }
		.wrapper #modules p {
		  width: 100% !important;
		  margin-left: 0px !important;
		  height: 100% !important; }
		.wrapper #modules img {
		  width: 100%;
		  height: 100%; }
	#ereader {
	  border-radius: 0px !important;
	  width: 100% !important;
	  border: 0px solid transparent !important; }
	#config {
	  margin: auto;
	  top: 0px;
	  bottom: 0px;
	  right: 0px;
	  left: 0px;
	  width: 75%;
	  height: 55% !important; }
	#instructions {
	  margin: auto;
	  top: 0px;
	  bottom: 0px;
	  right: 0px;
	  left: 0px;
	  width: 75%;
	  height: 15%; }
	#screen {
	  width: auto !important;
	  left: 0px !important;
	  border-radius: 0px !important; }
	#screen .ePage {
	  width: 90% !important; }
	header h1 {
	  font-size: 31px !important; }
	p.copy, p.embed, .links {
	  padding: 0px 10px !important; }
	p.copy, .links {
	  font-size: 14px !important; } }