/**** CRITTER BUNDLE: mediaelementplayer.css ****/

.mejs-container {
	position: relative;
	background: #000;
	font-family: Helvetica, Arial;
	text-align: left;
	vertical-align: top;
}

.me-plugin {
	position: absolute;
}

.mejs-embed, .mejs-embed body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #000;
	overflow: hidden;
}

.mejs-container-fullscreen {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 1000;
}
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
	width: 100%;
	height: 100%;
}

/* Start: LAYERS */
.mejs-background {
	position: absolute;
	top: 0;
	left: 0;
}
.mejs-mediaelement {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mejs-poster {
	position: absolute;
	top: 0;
	left: 0;
}
.mejs-poster img {
	border: 0;
	padding: 0;
	border: 0;
	display: block;
}
.mejs-overlay {
	position: absolute;
	top: 0;
	left: 0;
}
.mejs-overlay-play {
	cursor: pointer;
}
.mejs-overlay-button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	margin: -50px 0 0 -50px;
	background: url('/img/mediaelement/bigplay.png') no-repeat;
}
.mejs-overlay:hover .mejs-overlay-button{
	background-position: 0 -100px ;
}
.mejs-overlay-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	background: #333;
	background: url('/img/mediaelement/background.png');
	background: rgba(0, 0, 0, 0.9);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9)));
	background: -webkit-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
	background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
	background: -o-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
	background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
	background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
}
.mejs-overlay-loading span {
	display:block;
	width: 80px;
	height: 80px;
	background: transparent url('/img/mediaelement/loading.gif') 50% 50% no-repeat;
}

/* End: LAYERS */

/* Start: CONTROL BAR */
.mejs-container .mejs-controls {
	position: absolute;
	background: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	bottom: 0;
	left: 0;
	background: url('/img/mediaelement/background.png');
	background: rgba(0, 0, 0, 0.7);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
	background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 
	background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
	background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 
	background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 	
	background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 	
	height: 30px;
	width: 100%;
}
.mejs-container .mejs-controls  div {
	list-style-type: none;
	background-image: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 26px;
	height: 26px;
	font-size: 11px;
	line-height: 11px;
	background: 0;
	font-family: Helvetica, Arial;
	border: 0;
}

.mejs-controls .mejs-button button {
	cursor: pointer;
	display: block;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	margin: 7px 5px;
	padding: 0;
	position: absolute;
	height: 16px;
	width: 16px;
	border: 0;
	background: transparent url('/img/mediaelement/controls.png') no-repeat;
}

/* :focus for accessibility */
.mejs-controls .mejs-button button:focus {
	outline: solid 1px yellow;
}

/* End: CONTROL BAR */

/* Start: Time (current / duration) */
.mejs-container .mejs-controls .mejs-time {
	color: #fff;
	display: block;
	height: 17px;
	width: auto;
	padding: 8px 3px 0 3px ;
	overflow: hidden;
	text-align: center;
	padding: auto 4px;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}
.mejs-container .mejs-controls .mejs-time span {
	font-size: 11px;
	color: #fff;
	line-height: 12px;
	display: block;
	float: left;
	margin: 1px 2px 0 0;
	width: auto;
}
/* End: Time (current / duration) */


/* Start: Play/pause */
.mejs-controls .mejs-play button {
	background-position:0 0;
}
.mejs-controls .mejs-pause button {
	background-position:0 -16px;
}
/* End: Play/pause */


/* Stop */
.mejs-controls .mejs-stop button {
	background-position: -112px 0;
}
/* End: Play/pause */

/* Start: Progress bar */
.mejs-controls div.mejs-time-rail {
	width: 200px;
	padding-top: 5px;
}
.mejs-controls .mejs-time-rail span {
	display: block;
	position: absolute;
	width: 180px;
	height: 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	cursor: pointer;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
	margin: 5px;
	background: #333;
	background: rgba(50,50,50,0.8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
	background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 
	background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
	background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
	background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
	background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
}
.mejs-controls .mejs-time-rail .mejs-time-buffering {
	width:100%;
	background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	-webkit-background-size: 15px 15px;
	-moz-background-size: 15px 15px;
	-o-background-size: 15px 15px;
	background-size: 15px 15px;
	-webkit-animation: buffering-stripes 2s linear infinite;
	-moz-animation: buffering-stripes 2s linear infinite;
	-ms-animation: buffering-stripes 2s linear infinite;
	-o-animation: buffering-stripes 2s linear infinite;
	animation: buffering-stripes 2s linear infinite;
}

@-webkit-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
@-moz-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
@-ms-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
@-o-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }
@keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} }

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: #3caac8;
	background: rgba(60,170,200,0.8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8))); 
	background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
	background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
	background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
	background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
	background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
	width: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
	width: 0;
	background: #fff;
	background: rgba(255,255,255,0.8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
	background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 
	background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
	background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
	background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
}

.mejs-controls .mejs-time-rail .mejs-time-handle {
	display: none;
	position: absolute;
	margin: 0;
	width: 10px;
	background: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
	border: solid 2px #333;
	top: -2px;
	text-align: center;
}

.mejs-controls .mejs-time-rail .mejs-time-float {
	position: absolute;
	display: none;
	background: #eee;
	width: 36px;
	height: 17px;
	border: solid 1px #333;
	top: -26px;
	margin-left: -18px;
	text-align: center;
	color: #111;
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
	margin: 2px;
	width: 30px;
	display: block;
	text-align: center;
	left: 0;
}
.mejs-controls .mejs-time-rail .mejs-time-float-corner {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	line-height: 0;
	border: solid 5px #eee;
	border-color: #eee transparent transparent transparent;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	top: 15px;
	left: 13px;

}




/*
.mejs-controls .mejs-time-rail:hover .mejs-time-handle {
	visibility:visible;
}
*/
/* End: Progress bar */

/* Start: Fullscreen */
.mejs-controls .mejs-fullscreen-button button {
	background-position:-32px 0;
}
.mejs-controls .mejs-unfullscreen button {
	background-position:-32px -16px;
}
/* End: Fullscreen */


/* Start: Mute/Volume */
.mejs-controls .mejs-volume-button {
}

.mejs-controls .mejs-mute button {
	background-position:-16px -16px;
}

.mejs-controls .mejs-unmute button {
	background-position:-16px 0;
}

.mejs-controls .mejs-volume-button {
	position: relative;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider {
	display: none;
	height: 115px;
	width: 25px;
	background: url('/img/mediaelement/background.png');
	background: rgba(50, 50, 50, 0.7);
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	top: -115px;
	left: 0;
	z-index: 1;
	position: absolute;
	margin: 0;
}
.mejs-controls .mejs-volume-button:hover {
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}
/*
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
	display: block;
}
*/

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
	position: absolute;
	left: 11px;
	top: 8px;
	width: 2px;
	height: 100px;
	background: #ddd;
	background: rgba(255, 255, 255, 0.5);
	margin: 0;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
	position: absolute;
	left: 11px;
	top: 8px;
	width: 2px;
	height: 100px;
	background: #ddd;
	background: rgba(255, 255, 255, 0.9);
	margin: 0;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
	position: absolute;
	left: 4px;
	top: -3px;
	width: 16px;
	height: 6px;
	background: #ddd;
	background: rgba(255, 255, 255, 0.9);
	cursor: N-resize;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	margin: 0;
}


/* horizontal version */

.mejs-controls div.mejs-horizontal-volume-slider {
	height: 26px;
	width: 60px;
	position: relative;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	position: absolute;
	left: 0;
	top: 11px;
	width: 50px;
	height: 8px;
	margin: 0;
	padding: 0;
	font-size: 1px;
	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;	

	background: #333;
	background: rgba(50,50,50,0.8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
	background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 
	background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
	background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
	background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
	background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));

}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	position: absolute;
	left: 0;
	top: 11px;
	width: 50px;
	height: 8px;
	margin: 0;
	padding: 0;
	font-size: 1px;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	background: #fff;
	background: rgba(255,255,255,0.8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
	background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 
	background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
	background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
	background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));

}


.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
	display: none;
}

/* End: Mute/Volume */




/* Start: TRACK (Captions and Chapters) */
.mejs-controls .mejs-captions-button {
	position: relative;
}

.mejs-controls .mejs-captions-button button {
	background-position:-48px 0;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector {
	visibility: hidden;
	position: absolute;
	bottom: 26px;
	right: -10px;
	width: 130px;
	height: 100px;
	background: url('/img/mediaelement/background.png');
	background: rgba(50,50,50,0.7);
	border: solid 1px transparent;
	padding: 10px;
	overflow: hidden;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
/*
.mejs-controls .mejs-captions-button:hover  .mejs-captions-selector {
	visibility: visible;
}
*/

.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
	margin: 0;
	padding: 0;
	display: block;
	list-style-type: none !important;
	overflow: hidden;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li{
	margin: 0 0 6px 0;
	padding: 0;
	list-style-type: none !important;
	display:block;
	color: #fff;
	overflow: hidden;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{
	clear: both;
	float: left;
	margin: 3px 3px 0 5px;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{
	width: 100px;
	float: left;
	padding: 4px 0 0 0;
	line-height: 15px;
	font-family: helvetica, arial;
	font-size: 10px;
}

.mejs-controls .mejs-captions-button .mejs-captions-translations {
	font-size: 10px;
	margin: 0 0 5px 0;
}


.mejs-chapters {
	position: absolute;
	top: 0;
	left: 0;
	-xborder-right: solid 1px #fff;
	width: 10000px;
	z-index: 1;
}
.mejs-chapters .mejs-chapter {
	position: absolute;
	float: left;
	background: #222;
	background: rgba(0, 0, 0, 0.7);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
	background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
	background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
	background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
	background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
	background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000);		
	overflow: hidden;
	border: 0;
}
.mejs-chapters .mejs-chapter .mejs-chapter-block {
	font-size: 11px;
	color: #fff;
	padding: 5px;
	display: block;
	border-right: solid 1px #333;
	border-bottom: solid 1px #333;
	cursor: pointer;
}
.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
	border-right: none;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
	/*background: #333;*/
	background: #666;
	background: rgba(102,102,102, 0.7);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
	background: -webkit-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
	background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
	background: -o-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
	background: -ms-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
	background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6));
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);		
}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{
	font-size: 12px;
	font-weight: bold;
	display: block;
	white-space:nowrap;
	text-overflow: ellipsis;
	margin: 0 0 3px 0;
	line-height: 12px;
}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{
	font-size: 12px;
	line-height: 12px;
	margin: 3px 0 4px 0;
	display: block;
	white-space:nowrap;
	text-overflow: ellipsis;
}


.mejs-captions-layer {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align:center;
	/*font-weight: bold;*/
	line-height: 22px;
	font-size: 12px;
	color: #fff;
}
.mejs-captions-layer  a {
	color: #fff;
	text-decoration: underline;
}
.mejs-captions-layer[lang=ar] {
	font-size: 20px;
	font-weight: normal;
}

.mejs-captions-position {
	position: absolute;
	width: 100%;
	bottom: 15px;
	left: 0;
}

.mejs-captions-position-hover {
	bottom: 45px;
}

.mejs-captions-text {
	padding: 3px 5px;
	background: url('/img/mediaelement/background.png');
	background: rgba(20, 20, 20, 0.8);

}
/* End: TRACK (Captions and Chapters) */



.mejs-clear {
	clear: both;
}

/* Start: ERROR */
.me-cannotplay {
}
.me-cannotplay a {
	color: #fff;
	font-weight: bold;
}
.me-cannotplay span {
	padding: 15px;
	display: block;
}
/* End: ERROR */


/* Start: Loop */
.mejs-controls .mejs-loop-off button{
	background-position: -64px -16px;
}
.mejs-controls .mejs-loop-on button {
	background-position: -64px 0;
}
/* End: Loop */

/* Start: backlight */
.mejs-controls .mejs-backlight-off button{
	background-position: -80px -16px;
}
.mejs-controls .mejs-backlight-on button {
	background-position: -80px 0;
}
/* End: backlight */


/* Start: picture controls */
.mejs-controls .mejs-picturecontrols-button{
	background-position: -96px 0;
}
/* End: picture controls */


/* context menu */
.mejs-contextmenu {
	position: absolute;
	width: 150px;
	padding: 10px;
	border-radius: 4px;
	top: 0;
	left: 0;
	background: #fff;
	border: solid 1px #999;
	z-index: 1001; /* make sure it shows on fullscreen */
}
.mejs-contextmenu .mejs-contextmenu-separator {
	height: 1px;
	font-size: 0;
	margin: 5px 6px;
	background: #333;	
}

.mejs-contextmenu .mejs-contextmenu-item {
	font-family: Helvetica, Arial;
	font-size: 12px;
	padding: 4px 6px;
	cursor: pointer;
	color: #333;	
}
.mejs-contextmenu .mejs-contextmenu-item:hover {
	background: #2C7C91;
	color: #fff;
}


/* Start: SourceChooser */
.mejs-controls .mejs-sourcechooser-button {
	position: relative;
}

.mejs-controls .mejs-sourcechooser-button button {
	background-position: -128px 0;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
	visibility: hidden;
	position: absolute;
	bottom: 26px;
	right: -10px;
	width: 130px;
	height: 100px;
	background: url('/img/mediaelement/background.png');
	background: rgba(50,50,50,0.7);
	border: solid 1px transparent;
	padding: 10px;
	overflow: hidden;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
	margin: 0;
	padding: 0;
	display: block;
	list-style-type: none !important;
	overflow: hidden;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{
	margin: 0 0 6px 0;
	padding: 0;
	list-style-type: none !important;
	display:block;
	color: #fff;
	overflow: hidden;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{
	clear: both;
	float: left;
	margin: 3px 3px 0 5px;
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{
	width: 100px;
	float: left;
	padding: 4px 0 0 0;
	line-height: 15px;
	font-family: helvetica, arial;
	font-size: 10px;
}
/* End: SourceChooser */



/**** CRITTER 	END BUNDLE: mediaelementplayer.css ****/

/**** CRITTER BUNDLE: mediaelement.css ****/

/** media controller **/

.mediaelement
{
	position: relative;
	float: left;
	clear: both;
	padding: 0px;	
	margin-bottom: 0px;
}

div.audio,
div.video {

	/* Edit the font-size to counteract inherited font sizing.
	 * Eg. 1.25em = 1 / 0.8em
	 */

	font-size:1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */

	font-family:Verdana, Arial, sans-serif;
	line-height:1.6;
	color: #666;
	border:1px solid #009be3;
	background-color:#eee;
	position:relative;
}

.mediaelement .mediacontainer
{
  position: relative;
}

.mediaelement div.fullscreen {
	/* Rules for IE6 (full-screen) */
	width:480px;
	height:270px;
	/* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
	position:static !important; position:relative;
}

.mediaelement div.fullscreen div.mediaplayer {
	top: 0;
	left: 0;
	position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
	overflow: hidden;
	z-index:1000;
	background-color: #000000;
}

.mediaelement div.fullscreen div.playergui {
	position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	z-index:1000;
}

.mediaelement div.fullscreen div.interface {
	position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
	bottom: 0;
	left: 0;
	z-index:1000;
}


.mediaelemenet div.playergui
{
  position: relative;
  width: 100%;
  left: 0px;
  right: 0px;
  height: 25px;
}

.mediaelement div.fullscreen div.controls
{
  padding: 0px 5px 0px 5px;
}

.mediaelement div.interface {
	position: relative;
	background-color:#eee;
	width:100%;
}

.mediaelement .videoplay a
{
	top: 0px;
	left: 0px;
	position: absolute;
	background-image: url("/img/start-button-small.png");
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	text-indent: -100000px;
}

.mediaelement .videoplay a:hover
{
	background-image: url("/img/start-button-small-hover.png");
}

div.progress {
	top:0px;
	left:0px;
	width:100%;
	height:10px;
}
div.seekbar {
  background: #999999;
	width:0px;
	height:100%;
	cursor: pointer;
}
div.playbar {
  background: #000000;
	width:0px;
	height:100%;
}

.mediaelement .controls a
{
	background-image: url("/img/media-controls-condensed.png");
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent:-9999px;
	display: block;
	width: 16px;
	padding: 0px;
	margin: 0px;
	height: 17px;
	float: left;
	margin: 0px 4px 0px 1px;
}

.mediaelement ul
{
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.mediaelement ul li
{
  float: left;
}



.mediaelement a.play {
	background-position: -41px -3px;
}

.mediaelement a.pause {
	background-position: -25px -3px;
}

.mediaelement a.stop {
	background-position: -77px -3px;
}

.mediaelement a.previous {
	background-position: -5px -3px;
}

.mediaelement a.next {
	background-position: -59px -3px;
}

.mediaelement a.mute {
	background-position: -95px -3px;
}

.mediaelement a.unmute {
	background-position: -95px -25px;
}

.mediaelement a.volumemax {
	background-position: -228px -3px;
}

.mediaelement a.volumemax.muted {
	background-position: -228px -25px;
}

.mediaelement a.repeat {
	background-position: -206px -24px;
	width: 18px;
}

.mediaelement a.repeatoff {
	background-position: -206px -3px;
	width: 18px;
}

.mediaelement a.showfullscreen {
	width: 24px;
	background-position: -148px -3px;
}

.mediaelement a.restorescreen {
	width: 24px;
	background-position: -176px -3px;
}

.mediaelement .controls a:hover
{
  background-position-y: -47px;
}


.mediaelement  div.progress {
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 0 0;
	background: #c6c6c6;
	height: 8px;
	margin: 0px;
}

.mediaelement  div.seekbar {
	height: 8px;
	background-color: #666666;
	cursor: pointer;
}

.mediaelement  div.playbar {
	background-color: #000000;
	border-right: 1px solid #ffffff;
	width: 1px;
	height: 16px;
}

/* The seeking class is added/removed inside jPlayer */
.mediaelement div.jp-seeking-bg {
 /*	background: url("pbar-ani.gif"); */
}

.mediaelement .transportcontrols
{
  float: left;
  clear: both;
}

.mediaelement .soundcontrols
{
  float: left;
  margin-left: 15px;
}

.mediaelement .soundcontrols div.volumebar {
	position: relative;
	float: left;
	width: 35px;
	height: 25px;
	margin-left: -5px;
}

.mediaelement .soundcontrols div.volumebar {
  position: relative;
	overflow: hidden;
	background-image: url("/img/media-controls-condensed.png");
	background-position: -110px -25px;
	background-repeat: no-repeat;
	width: 35px;
	height: 17px;
	cursor: pointer;
}

.mediaelement .soundcontrols div.volumebarvalue {
  position: absolute;
	background-image: url("/img/media-controls-condensed.png");
	background-position: -110px -3px;
	background-repeat: no-repeat;
	width: 35px;
	height: 17px;
}

.mediaelement .screencontrols
{
  float: left;
  margin-left: 15px;
}

.mediaelement .timing
{
	float: right;
}
.mediaelement .currenttime,
.mediaelement .duration {
  float: left;
	font-size: 10px;
	line-height: 17px;
}

.mediaelement .timing .duration:before
{
  content: '/';
}

/* playlist styling */

.mediaelement ol.playlist
{
  list-style-position: inside;
  clear: both;
	list-style: decimal;
	margin-left: 0px;
	padding-left: 0px;
	margin-bottom: -1px;
	font-size: 10px;
	border-bottom: 1px solid #c6c6c6;
}



.mediaelement ol.playlist li
{
  list-style-position: inside;
  color: #999999;
	border-top: 1px solid #c6c6c6;
}

.mediaelement ol a
{
	display: block;
	margin-left: -3px;
	padding-left: 3px;
	
	margin-right: -3px;
	padding-right: 3px;

	line-height: 17px;
}

.mediaelement ol a .duration
{
  line-height: 17px;
  font-weight: normal;
}


.mediaelement li.current a
{
	color: #666666;
}

.mediaelement ol li a .duration
{
	float: right;
}


/* @group NO SOLUTION error feedback */

.nosolution {
	position:absolute;
	width:390px;
	margin-left:-202px;
	left:50%;
	top: 10px;

	padding:5px;
	font-size:.8em;
	background-color:#eee;
	border:2px solid #009be3;
	color:#000;
	display:none;
}

.nosolution a {
	color:#000;
}

.nosolution span {
	font-size:1em;
	display:block;
	text-align:center;
	font-weight:bold;
}


/**** CRITTER 	END BUNDLE: mediaelement.css ****/

/**** CRITTER BUNDLE: readaloud.info.css ****/

/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

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

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

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

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

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

input, select { vertical-align: middle; }


/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */

body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }

/* Normalize monospace sizing:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Minimal base styles.
 */

/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; } 

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* Colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink! */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; }

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

/**
 * You might tweak these..
 */

body, select, input, textarea {
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* Set your base font here, to apply evenly */
  /* font-family: Georgia, serif;  */
}

/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }


/**
 * Primary styles
 *
 * Author: Dorian Fraser Moore <dorian.code@theusefularts.org>
 */

body
{
  /* font-family: Garamond, Times, Times New Roman, Serif; */
  font-family: Adobe Garamond Pro, Garamond, times new roman, times, serif; 
  width: 320px;
  font-size: 14px;  
  margin: 0px auto 13px auto;
  padding: 0px 5px 0px 5px;
}

.home .section
{
	width: 300px;
	margin: 0px 0px 0px 0px;
}

.home .slideshow img
{
	max-width: 420px;
	max-height: 320px;
	width: 100%
}

.home iframe
{
	max-width: 100%;
}

.masthead
{
  margin: 15px;
}
 

/** element styles **/

header
{
  margin-bottom: 13px;
}

header h1
{
  font-size: 23px;
  font-weight: normal;
}

h2
{
	font-weight: normal;
	font-size: 20pt;
}

h3
{
	font-weight: normal;
	font-size: 14pt;
}

h4, h5, h6
{
	font-size: 18px;
	line-height: 23px;
	font-weight: normal;
}

p, nav
{
  margin-bottom: 23px;
  font-size: 18px;
  line-height: 23px;
  text-align: justify;
}
a.twitter
{
	background-image: url('/img/twitter-16.png');
	padding-left: 18px;
	background-position: left 2px;
	background-repeat: no-repeat;
}

nav
{
	position: relative;
}

nav a
{
	display: block;
}

nav a:before,
a.nav:before
{
	content: '»';
	width: 15px;
	margin-left: -15px;
}

nav a.previous
{
	float: left;
	margin: 0px;
	padding: 0px;
}

nav a.next
{
	float: right;
	text-align: right;
}

nav a.choose
{
	top: 0px;
	text-align: center;
	position: absolute;
	left: 50%;
	width: 100px;
	margin: 0px 0px 0px -50px;
}

nav a.choose:after
{
	content: ' «';
	width: 15px;
	margin-right: -15px;
}

nav a.choose:before
{
	content: '» ';
	width: 15px;
}


nav a.next:before
{
	content: '';
	margin-left: 0;
}

nav a.next:after
{
	content: '»';
	width: 15px;
	margin-right: -15px;

}

nav a.previous:before
{
  content: '«';
	width: 15px;
	margin-left: -15px;
}

a:link,
a:visited
{
  text-decoration: none;
  color: inherit;
}

p a:link,
p a:visited
{
	color: #336	;
	border-bottom: 1px dotted #333;
	padding-bottom: 1px;
	margin-bottom: -1px;
	border-color: inherit;
}

p a:hover
{
	border-bottom-style: solid;
}

nav a
{
	margin-right: 13px;
}

/** masthead styles **/

.masthead
{
	position: relative;
}

.masthead h1
{
  font-size: 60px;
  font-weight: 500;
  color: #333;
}

.masthead form
{
	position: relative;
	left: 0px;
	width: 200px;
}

.masthead form input.text
{
	border: 1px solid #333;
	width: 120px;
	font-family: courier, monospace;
	font-size: 12px;
	padding: 3px;
	margin-right: 5px;
}

.masthead form input.button
{
	border: 1px solid #333;
	font-size: 12px;
	background: #ffffff;
}

.masthead form label,
.masthead form input
{
	clear: both;
}

/** share/addthis **/

div.share
{
	margin: 10px 0px 10px 0px;
}

/** footer styles **/

footer
{
	padding-top: 20px;
	margin-left: 15px;
}


/** general class styles **/

span.title:before,
.masthead h1:before
{
  margin-left: -0.28em; 
  content: '“';
}

span.title:after,
.masthead h1:after
{
  content: '”';
}

/** search styles **/

.search .term:before
{
  content: '“';
}

.search .term:after
{
  content: '”';
}

/** pages styles **/

/** pages **/

nav.pages
{
	text-align: center;
	margin-bottom: -1px;
}

nav.pages ul 
{
	list-style: none;
	margin: 0px auto 0px auto;
	padding: 0px;
	display: inline;
}

nav.pages ul li
{
	position: relative;
	display: inline;
	margin: 0px;
}

.pages ul li a:before
{
	content: '';
	margin: 0;
}

.pages a,
.pages span,
.pages a:link,
.pages a:visited
{
	display: block;
	margin: 0px 5px 0px 5px;
	float: left;
	position: relative;
}

.pages .current a
{
	color: #000000;
	font-weight: bold;
}

.pages a:hover
{
	text-decoration: underline;

}

.pages .inactive
{
	font-weight: bold;
	padding: 2px 3px 2px 3px;
	border: 1px solid #000000;
	color: #555555;
}


/** play button styles **/

a.play 
{
	line-height: 0px;
	position: relative;
	display: block;
	margin-bottom: 13px;
}

a.play div.play_button
{
	position: absolute;

	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-image: url('/img/start-button.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	z-index: 20;
}

a.play div.jPlayer
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-image: url('/img/start-button.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	z-index: 30;	
}

/** section styles **/

section
{
	margin: 0px 0px 20px 15px;
}

.home section
{
  width: 280px;
  float: left; 
}

/** article styles **/

article header
{
  margin-bottom: 15px;
}

.tweet
{
  margin-bottom: 13px;
}

.tweet p
{
  margin: 0px;
  padding: 0px;
}

.tweet p.byline
{
  margin-top: -5px;
  color: #999999;
  text-align: right;
  font-size: 15px; 
}

.tweet p.byline a
{
	margin-left: 5px;
	border: 0px;
}

.tweet p.byline a.twitter
{
	margin-right: 5px;
}

article footer
{
  color: #999999;
  text-align: right;
  font-size: 15px;
}

article footer a:link,
article footer a:visited
{
  color: #333;
}

article footer a:after
{
  content: ' >';
}

article section
{
  margin-top: 15px;
}

ul
{
  line-height: 21px;
  margin-top: 15px;
  margin-bottom: 15px;
}

ul li
{
  margin-bottom: 5px;
}

/** grid list style **/

ul.grid
{
	width: 290px;
	list-style: none;
	display: block;
	margin: 0px;
}

ul.grid li
{
	display: block;
	margin: 0px 0px 10px 0px;
	width: 280px;
	float: left;
}

/** latest video style **/

.home .book img,
.home .book header
{
	float: left;
}

.home .book header
{
	width: 200px;
}

.home .book .line .placeholder
{
	width: 280px;
	height: 158px;
	margin-bottom: 5px;
}

.home .book .line header
{
	position: relative;
	width: 280px;
}

.book img
{
	margin: 0px 13px 13px 0px;
}

.book .line_number
{
	float: left;
}

.book .date
{
	float: right;
	color: #999;
}

.book h2,
.book h3
{
	font-weight: normal;
	clear: right;	
}

.book h2,
.book h3
{
	font-size: 14pt;
}

span.title:before,
span.quote:before,
p.quote:before
{
  content: '“';
  margin-left: -0.28em; 
}


span.title:after,
span.quote:after,
p.quote:after
{
  content: '”';
}

/** book styles **/

section.book,
article.book
{
	width: 280px;
  max-width: 280px;
  margin-bottom: 20px;
	clear: both;
}

article.book div.cover
{
	float: left;
	margin-right: 13px;
}

article.book nav .next
{
  float: right;
	margin-right: 0px;
}

nav .loading
{
	display: block;
	padding-left: 30px;
	line-height: 24px;
	background-image: url('/img/processing-wheel-24px-trans.gif');
	background-repeat: no-repeat;
}


article.player header div
{
	margin-bottom: 13px;
	float: left;
}

article.player header h3
{
	font-size: 20pt;
}

article.player header h4
{
	line-height: 23px;
	margin-top: 8px;
	margin-bottom: -5px;
}


article.player .current
{
	text-decoration: underline;
}

article.player div.text div.book,
article.player div.text div.chapter
{
	display: none;
}

article.player div.text span.current
{
	text-decoration: underline;
}

article.player div.player,
article.player div.text
{
	position: relative;
	width: 280px;
	margin: 0px 0px 20px 0px;
	float: left;
}

article.player div.player
{
	position: fixed;
}

article.player div.text
{
	float: left;
	margin-left: 450px;
}

article.player div.player div.jplayer
{
	position: absolute;
	top: 4px;
	left: 0px;
}

article.player div.text 
{
	position: relative;
}


article.player div.player .playlist
{
	display: none;
}

/** browser styles **/

article.browser
{
	width: 280px;
	max-width: 280px;
}

article.browser header
{
	position: relative;
}

article.browser header nav
{

	margin: 0px 15px 0px 0px;
}

article.browser header nav a
{
	font-size: 18px;
	line-height: 23px;
}

/** line styles **/

.line .video_container
{
	margin-bottom: 15px;
}

.line header
{
	margin-bottom: 0px;
}

#books section.book article.line .caption
{
	float: left;
}

#books section.book article.line .share
{
	position: relative;
	float: left;
	width: 150px;
	margin-top: -1px;
	margin-left: 0px;
	white-space: nowrap;
}

/** remove form **/

div#remove
{
	text-align: center;
	font-size: 40px;
	margin-bottom: -23px;
}

form.remove
{
	text-align: center;
	margin-top: 23px;
	margin-bottom: -23px;
}

form.remove p
{
	text-align: center;
	font-weight: bold;
	margin-bottom: 0px;
}

form.remove span.element
{
	white-space: nowrap;
	display: inline-block;
	margin: 10px;
}

form.remove label
{
	margin-right: 5px;
}

p.confirmation
{
	font-size: 23px;
	color: #990000;
	text-align: center;
	margin: 23px;
}



/**
 * Non-semantic helper classes: please define your styles before this section.
 */

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

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.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: drupal.org/node/897638 */
.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; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
.clear { clear: both; }


/**
 * Media queries for responsive design.
 *
 * These follow after primary styles so they will successfully override.
 */

@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here */

}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */

  .home section
  {
    width: 420px;
    margin: 0px 30px 30px 30px;
  }  
}

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
 
 
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

@media screen and  (min-width: 768px) {
  body
  {
    margin-top: 60px;
    width: 960px;
  }
 
  .masthead
  {
    margin: 30px;
  }
  
  .home section
  {
    width: 420px;
    margin: 0px 30px 30px 30px;
  }

	/** element styles **/

	header
	{
	  margin-bottom: 13px;
	}

	header h1
	{
	  font-size: 28px;
	}

	h2
	{
		font-size: 20pt;
	}

	h3
	{
		font-size: 14pt;
	}

	h4, h5, h6
	{
		font-size: 18px;
		line-height: 23px;
	}

	p, nav
	{
	  margin-bottom: 23px;
	  font-size: 18px;
	  line-height: 23px;
	}

	nav a
	{
		font-size: 23px;
		line-height: 27px;
		display: block;
	}
	
	nav a:before,
	a.nav:before
	{
		width: 15px;
		margin-left: -15px;
	}
	
	nav a.previous
	{
		width: 150px;
	}
	
	nav a.next
	{
		width: 125px;
		margin-right: 25px;
	}
	
	nav a.choose
	{
		text-align: center;
		width: 200px;
		margin-left: -100px;
	}
	
	nav a.choose:after
	{
		width: 15px;
		margin-right: -15px;
	}
	
	nav a.choose:before
	{
		width: 15px;
	}
	
		
	nav a.next:after
	{
		width: 15px;
		margin-right: -15px;
	}
	
	nav a.previous:before
	{
		width: 15px;
		margin-left: -15px;
	}

	/** masthead styles **/

	.masthead
	{
		position: relative;
		width: 900px;
	}

	.masthead h1
	{
	  font-size: 60px;
	}

	.masthead form
	{
		text-align: right;
		position: absolute;
		bottom: 21px;
		left: 700px;
	}

	/** footer styles **/

	footer
	{
		padding-top: 30px;
		margin-left: 30px;
	}


	/** pages **/

	nav.pages
	{
		width: 890px;
	}


	/** section styles **/

	section
	{
		margin: 0px 30px 30px 30px;
	}

	.home section
	{
	  width: 420px;
	  float: left; 
	  margin: 0px 30px 20px 30px;
	}


	/** grid list style **/

	ul.grid
	{
		width: 930px;
	}

	ul.grid li
	{
		display: block;
		margin: 0px 30px 30px 0px;
		width: 280px;
		float: left;
	}

	nav
	{
		max-width: 900px;
	}

	/** latest video style **/

	.home .book
	{
		width: 420px;
	}
	
	.home .book .cover img
	{
		padding-top: 3px;
	}

	.home .book header
	{
		width: 320px;
	}


	.home .book .line .placeholder
	{
		width: 420px;
		height: 236px;
		margin-bottom: 5px;
	}

	.home .book .line header
	{
		position: relative;
		width: 420px;
	}


	/** book styles **/

	section.book
	{
		width: 900px;
		max-width: 900px;
	}

	section.book,
	article.book
	{
		max-width: 900px;
	  margin-bottom: 20px;
		clear: both;
	}


	article.player
	{
		width: 930px;
		max-width: 930px;
	}

	article.player header div
	{
		width: 420px;
		margin-right: 30px;
		margin-bottom: 13px;
		float: left;
	}

	article.player header
	{
		width: 930px;
	}

	article.player div.player,
	article.player div.text
	{
		position: relative;
		width: 420px;
		margin: 0px 30px 30px 0px;
		float: left;
	}

	article.player div.text
	{
		float: left;
		margin-left: 450px;
	}

	/** browser styles **/

	article.browser
	{
		width: 930px;
		max-width: 930px;
	}

	article.browser header
	{
		position: relative;
	}

	article.browser header nav
	{
		position: absolute;
		bottom: 0px;
		right: 0px;
		text-align: right;
		margin: 0px 30px 0px 0px;
	}
	
	article.browser header nav a
	{
		margin-right: 0px;
	}

	/** line styles **/

	.line header
	{
		margin-bottom: 0px;
	}
	
	section.books article.book
	{
		width: 960px;
	}
	
	section.books article.book .cover
	{
		min-width: 120px;
	}

	
	section.books article.book .contents
	{
		width: 340px;
		margin-top: -3px;
		float: left;
	}
	
	section.books article.book .preview 
	{
		position: relative;
		width: 340px;
		margin-right: 20px;
		float: left;
		margin: 0px;
	}	
	
	section.books article.book .preview img
	{
		margin: 0px;
	}


	#books section.book article.line .caption
	{
		float: left;
		width: 600px;
	}

	#books section.book article.line .share
	{
		position: relative;
		float: left;
		width: 150px;
		margin-left: 150px;
		white-space: nowrap;
	}

	#books section.book article.line nav
	{
		max-width: 920px;
		width: 920px;
	}

}

/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; 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; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}




/**** CRITTER 	END BUNDLE: readaloud.info.css ****/

/**** CRITTER BUNDLE:  ****/




/**** CRITTER 	END BUNDLE:  ****/