/*
 * 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.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

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

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* fonts */
@font-face { font-family:JaneAustin; src:url(../fonts/janeaust-webfont.eot); src:url(../fonts/janeaust-webfont.eot?#iefix) format(embedded-opentype), url(../fonts/janeaust-webfont.woff) format(woff), url(../fonts/janeaust-webfont.ttf) format(truetype), url(../fonts/janeaust-webfont.svg#JaneAustin) format(svg); font-weight:normal; font-style:normal; }

p.audiotext { font-style: italic; font-size: 16px; color: #474747; text-shadow: #fff 0px 1px 0px; position: relative; top: 15px;}
p {font-size: 14px; font-size: 14px; color: #474747; text-shadow: #fff 0px 1px 0px; line-height: 1.5em; }
li {text-decoration: none; display: inline;}

a {text-decoration: none; color:#585858;}
a:hover {color: #004d89; text-decoration: underline;}

/* SPANS */
a.readmore { font-family: Georgia, serif; font-style: italic; font-size: 16px; color: #0983d9; text-shadow: #fff 0px 1px 0px; }
.firstletter { font-family:JaneAustin, Georgia, Times, serif; float:left; font-size:4em; color:#474747; margin-top: 35px; font-weight:bold; margin-right:.5em; }


/* GLOBAL */  
body {font-family: Georgia, serif; overflow:hidden; padding:0;margin:0; height:auto ;width:100%;}
#bgimg { position:absolute; z-index: -1; }
#container {position:absolute;z-index: 5;	overflow-y: scroll;overflow-x: hidden;height:auto;width:100%;}
#content {width:950px; height: auto; position:relative; margin: 0 auto;}
#wrapper {background:url(../images/bg-pattern.png) 0 0 repeat; height: auto;  width: 100%; position: relative; top:-20px; min-height: 400px;
  -moz-box-shadow:    3px -1px 10px 3px black;
  -webkit-box-shadow: 3px -1px 10px 3px black;
  box-shadow:         3px -1px 10px 3px black;  
}


/* HEADER */
header a { font-family: Georgia, serif; font-size: 15px; font-style: italic; color: #626262; text-shadow: #fff 0px 1px 0px; }
header a:hover { font-family: Georgia, serif; font-size: 15px; font-style: italic; text-decoration: none; color: #004d89; text-shadow: #fff 0px 1px 0px; }
header {background:url(../images/header-bg.png) 0 0 repeat; position:relative; width:100%; height: 121px;}
header .nav {background-color: #efefef; position: fixed; width: 1300px; height: 53px; margin: 67px 420px; z-index: 9;
  -webkit-border-top-left-radius: 4px; 
  -webkit-border-bottom-left-radius: 4px; 
  -moz-border-radius-topleft: 4px; 
  -moz-border-radius-bottomleft: 4px; 
  border-top-left-radius: 4px; 
  border-bottom-left-radius: 4px;
  -moz-box-shadow:    inset 0 0 10px #e0dede;
  -webkit-box-shadow: inset 0 0 10px #e0dede;
  box-shadow:         inset 0 0 10px #e0dede;
  -moz-box-shadow:    3px -1px 10px 3px black;
  -webkit-box-shadow: 3px -1px 10px 3px black;
  box-shadow:         3px -1px 10px 3px black;
}

header .nav .links {position:relative; right: 15px;}
header .content {position: relative; width: 950px; margin: 0 auto;}
header .logo {background:url(../images/header-logo.png) 0 0 no-repeat; width: 502px; height: 121px; position: relative; float: left; z-index: 9; margin: 0px -40px; top: 5px; cursor: pointer;}
header li {display: inline; padding-right:13px; cursor: pointer; font-size: 16px; font-style: italic; color: #585858;}
header li:hover {display: inline; padding-right:13px; text-decoration: underline;}


/* HOME */
.home h1 {font-family:Georgia, serif; font-size:20px; color:#474747; text-shadow:#fff 0 1px 0; font-weight:100; line-height:35px; padding-top:0.5em; }
.home .buttons {position:relative; margin: 15px -40px;}

.home p.audiotext2 { font-family: Georgia, serif; font-size: 20px; color: #474747; text-shadow: #fff 0px 1px 0px; }
.home #wrapper #content {width: 900px; position: relative; margin: 0 auto; top:45px;}
.home #wrapper .left {width: 300px; position:relative; float: left;}
.home #wrapper .left .photo {background:url(../images/home-pic.png) 0 0 no-repeat; width: 297px; height: 407px;}
.home #wrapper .right {width: 575px; position: relative; float: right; margin: 0px -10px;}


/* ABOUT */
.about .text {margin: 45px 0px; position: relative; float: left; margin-bottom: 5px; font-size: 14px; color: #474747; text-shadow: white 0px 1px 0px; line-height: 1.5em;}
/* DIGITAL MEDIA */

.dm p.audiotext4 { margin-bottom: 5px; font-size: 12px; color: #474747; text-shadow: #fff 0px 1px 0px; }
a.discog {font-style: italic; font-size: 12px; color: #2792dd; text-shadow: #fff 0px 1px 0px; }


.gallery-holder{
	position:relative;
}

#gallery{
	position:relative;
	height:384px;
	overflow: hidden;
}

#gallery img{vertical-align:top;}

#gallery .pics {
	width:875px;
	height:352px;
	position:absolute;
	left:0;
	top:0;
}

.dm .left {width: 440px; height: auto; position: relative; float: left;}
.dm .lightbox {position:relative; height: auto;}
.dm .lightbox li { margin-bottom: 10px; margin-right: 10px; float: left;}
.dm .lightbox .pics a {width:25px; height: 25px; position: relative;}
.dm .highres {font-size: 12px; color: #474747; text-shadow: #fff 0px 1px 0px; position: relative; float:left; margin: 0px -40px;}

.dm .right {position:relative; width: 450px; height: auto; float: left; margin: 30px 30px;}
.dm .right .player { margin-top: 10px; margin-bottom: 0px; float: left; position: relative; }
.dm .right .discography {position: relative; width: 450px; height: 400px;}
.dm .right .discog {position: relative; height: 60px; }


/* ENGAGEMENTS */
.engagements .left {position: relative; width: 450px; height: auto; float: left; margin: 45px 0px;}
.engagements .left .photo {background:url(../images/engagements-pic.png) 0 0 no-repeat; position: relative; width: 400px; height: 500px;}
.engagements .right {width: 400px; height: auto; float: left; margin: 45px 50px;}
.engagements .photo:after {content""; background:url(../images/spacer.png) repeat; margin-right: 20px; float: left; position: absolute; height: auto; width: 13px;}
.engagements .operas {font-size: 12px; color: #474747; text-shadow: white 0px 1px 0px; overflow: auto; max-height: 600px;}

/* PRESS */
.press .left {position: relative; width: 450px; height: auto; float: left; margin: 45px 0px;}
.press .left .photo {background:url(../images/press-pic.png) 0 0 no-repeat; position: relative; width: 400px; height: 500px;}
.press .right {width: 400px; height: auto; float: left; margin: 45px 50px;}
.press .photo:after {content""; background:url(../images/spacer.png) repeat; margin-right: 20px; float: left; position: absolute; height: auto; width: 13px;}
.press .right .press {font-size: 12px; color: #474747; text-shadow: white 0px 1px 0px; overflow: auto; max-height: 600px;}

/* REP */
.rep .left {position: relative; width: 450px; height: auto; float: left; margin: 45px 0px;}
.rep .left .photo {background:url(../images/rep-pic.png) 0 0 no-repeat; position: relative; width: 400px; height: 500px;}
.rep .right {width: 400px; height: auto; float: left; margin: 45px 50px;}
.rep .photo:after {content""; background:url(../images/spacer.png) repeat; margin-right: 20px; float: left; position: absolute; height: auto; width: 13px;}
.rep .right .rep {font-size: 12px; color: #474747; text-shadow: white 0px 1px 0px; overflow: auto; max-height: 600px;}

/* CONTACT */
.johnpic { background:url(../images/johnpic.png); float: left; position: relative;
	width: 294px; height: 407px; margin-top: 45px; left: 25px;}
.contacttext { position: relative; width: 650px; height: 407px; margin-left: 385px; margin-top: 70px; line-height: 18px;}
.contacttext h2 {font-size: 16px; font-weight: normal; color: #444; margin: 4px 0px;}
.contacttext h3 {font-size: 14px; font-weight: normal; color: #444;}


/* FOOTER */
footer {height: 100px; width: 950px; position: relative; margin: 0 auto;}
footer .content {width: 300px; position: relative; margin: 0 auto; float:right; top: 66px;}
footer .links {position: relative; margin: -10px 0px;}
footer .links a { font-style: normal; font-size: 11px; color: #004d89; text-shadow: #fff 0px 1px 0px; }
footer .links a:hover { font-style: normal; text-decoration: underline; font-size: 11px; color: #004d89; text-shadow: #fff 0px 1px 0px; }
footer .bottomtext p {font-size: 11px; color: #474747; text-shadow: #fff 0px 1px 0px; text-align: right; line-height: 1em; }

/* JsPane */

.jspContainer {overflow: hidden;position: relative;}
.jspPane {position: absolute;width:398px !important;}
.jspVerticalBar {position: absolute;top: 0;right: 0;width: 10px;height: 100%;background: transparent;margin-left:20px;}
.jspHorizontalBar {position: absolute;bottom: 0;left: 0;width: 100%;height: 10px;background: transparent;}
.jspVerticalBar *, .jspHorizontalBar * {margin: 0;padding: 0;}
.jspCap {display: none;}
.jspHorizontalBar .jspCap {float: left;}
.jspTrack {background: #b7b7b7;position: relative;-webkit-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;}
.jspDrag {background: #004479;position: relative;top: 0;left: 0;cursor: pointer;-webkit-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {float: left;height: 100%;}
.jspArrow{ background: #b7b7b7;text-indent: -20000px;display: block;cursor: pointer;}
.jspArrow.jspDisabled {cursor: default;background: transparent;}
.jspVerticalBar .jspArrow {height: 16px;}
.jspHorizontalBar .jspArrow {width: 16px;float: left;height: 100%;}
.jspVerticalBar .jspArrow:focus {outline: none;}
.jspCorner {background: #eeeef4;float: left;height: 100%;}


/* LIGHTBOX */

#jquery-overlay {position: absolute;top: 0;left: 0;z-index: 90;width: 100%;height: 500px;}
#jquery-lightbox {position: absolute;top: 0;left: 0;width: 100%;z-index: 100;text-align: center;line-height: 0;}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 auto;}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {position: absolute;top: 40%;left: 0%;height: 25%;width: 100%;text-align: center;line-height: 0;}
#lightbox-nav {position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {width: 49%;height: 100%;zoom: 1;display: block;}
#lightbox-nav-btnPrev { left: 0; float: left;}
#lightbox-nav-btnNext { right: 0; float: right;}
#lightbox-container-image-data-box {font: 10px Verdana, Helvetica, sans-serif;color: #000;background-color: #fff;margin: 0 auto;line-height: 1.4em;overflow: auto;width: 100%;padding: 0 10px 0;}
#lightbox-container-image-data {padding: 0 10px; color: #666; }
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left;text-align: left;}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {display: block; clear: left; padding-bottom: 1.0em;}			
#lightbox-secNav-btnClose {width: 66px; float: right;padding-bottom: 0.7em;	}



/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.happyworm.com/jquery/jplayer
 *
 * Skin Name: Blue Monday
 *
 * Copyright (c) 2010-2011 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Silvia Benvenuti
 * Skin Version: 4.0 (jPlayer 2.1.0)
 * Date: 1st September 2011
 */

div.jp-audio,
div.jp-video {

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

	font-size:1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
	font-style: italic;
	line-height:1.6;
	color: #666;
	/*border:1px solid #009be3;*/
	position:relative;
}
div.jp-audio {
	width:420px;
}
div.jp-video-270p {
	width:480px;
}
div.jp-video-360p {
	width:640px;
}
div.jp-video-full {
	/* 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
}

div.jp-video-full div.jp-jplayer {
	top: 0;
	left: 0;
	position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
	overflow: hidden;
	z-index:1000;
}

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

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

div.jp-interface {
	position: relative;
	/*background-color:#eee;*/
	background:#454343;
	width:100%;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

div.jp-audio div.jp-type-single div.jp-interface {
	height: 53px;
	z-index: 9999;
}
div.jp-audio div.jp-type-playlist div.jp-interface {
	height: 53px;
	z-index: 9;
}

div.jp-video div.jp-interface {
	border-top:1px solid #009be3;
}

/* @group CONTROLS */

div.jp-controls-holder {
	clear: both;
	width:440px;
	margin:0 auto;
	position: relative;
	overflow:hidden;
	top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */
}

div.jp-interface ul.jp-controls {
	list-style-type:none;
	margin:0;
	padding: 0;
	overflow:hidden;
}

div.jp-audio ul.jp-controls {
	width: 380px;
	padding:6px 20px 0 15px;
}

div.jp-video div.jp-type-single ul.jp-controls {
	width: 78px;
	margin-left: 200px;
}

div.jp-video div.jp-type-playlist ul.jp-controls {
	width: 134px;
	margin-left: 172px;
}
div.jp-video ul.jp-controls,
div.jp-interface ul.jp-controls li {
	display:inline;
	float: left;
}

div.jp-interface ul.jp-controls a {
	display:block;
	overflow:hidden;
	text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
	width:40px;
	height:40px;
}

a.jp-play {
	background: url("../images/player/player-sprite.png") -33px -29px no-repeat;
}
a.jp-play:hover {
	opacity:0.7;
}
a.jp-pause {
	background: url("../images/player/player-sprite.png") -33px 4px no-repeat;
	display: none;
}
a.jp-pause:hover {
	opacity:0.7;
}

a.jp-stop, a.jp-previous, a.jp-next {
	width:32px;
	height:28px;
	margin-top:6px;
}

a.jp-previous {
	background: url("../images/player/player-sprite.png") 0 -2px no-repeat;
}
a.jp-previous:hover {
	opacity:0.7;
}

a.jp-next {
	background: url("../images/player/player-sprite.png") -73px -2px no-repeat;
}
a.jp-next:hover {
	opacity:0.7;
}

/* @end */

/* @group progress bar */

div.jp-progress {
	overflow:hidden;
}
div.jp-audio div.jp-progress {
	position: absolute;
	top:18px;
	height:15px;
}
div.jp-audio div.jp-type-single div.jp-progress {
	left:137px;
	width:252px;
}
div.jp-audio div.jp-type-playlist div.jp-progress {
	left:137px;
	width:252px;
}
div.jp-video div.jp-progress {
	top:0px;
	left:0px;
	width:100%;
	height:10px;
}
div.jp-seek-bar {
	background: url("../images/player/player-sprite.png") -117px -8px repeat-x;
	width:0px;
	height:100%;
	cursor: pointer;
}
div.jp-play-bar {
	background: url("../images/player/player-sprite.png") -118px -28px repeat-x ;
	width:0px;
	height:100%;
	height: 13px;
	top: 2px;
	position: relative;
}

/* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg {
	/*background: url("../images/player/jplayer.blue.monday.seeking.gif");*/
}

/* @end */

/* @group volume controls */


a.jp-mute,
a.jp-unmute,
a.jp-volume-max {
	width:18px;
	height:15px;
	margin-top:12px;
}

div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
	margin-left: 210px;	
}

div.jp-audio div.jp-type-playlist a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute {
	margin-left: 154px;
}

div.jp-audio a.jp-volume-max {
	margin-left: 56px;	
}

div.jp-video a.jp-mute,
div.jp-video a.jp-unmute,
div.jp-video a.jp-volume-max {
	position: absolute;
	top:12px;
	margin-top:0;
}

div.jp-video a.jp-mute,
div.jp-video a.jp-unmute {
	left: 50px;
}


div.jp-video a.jp-volume-max {
	left: 134px;
}

a.jp-mute {
	background: url("../images/player/jplayer.blue.monday.jpg") 0 -170px no-repeat;
}
a.jp-mute:hover {
	background: url("../images/player/jplayer.blue.monday.jpg") -19px -170px no-repeat;
}
a.jp-unmute {
	background: url("../images/player/jplayer.blue.monday.jpg") -60px -170px no-repeat;
	display: none;
}
a.jp-unmute:hover {
	background: url("../images/player/jplayer.blue.monday.jpg") -79px -170px no-repeat;
}

a.jp-volume-max {
	background: url("../images/player/jplayer.blue.monday.jpg") 0 -186px no-repeat;
}
a.jp-volume-max:hover {
	background: url("../images/player/jplayer.blue.monday.jpg") -19px -186px no-repeat;
}

div.jp-volume-bar {
	position: absolute;
	overflow:hidden;
	background: url("../images/player/jplayer.blue.monday.jpg") 0 -250px repeat-x;
	width:46px;
	height:5px;
	cursor: pointer;
}
div.jp-audio div.jp-volume-bar {
	top:23px;
	left:330px;
}
div.jp-video div.jp-volume-bar {
	top:17px;
	left:72px;
}
div.jp-volume-bar-value {
	background: url("../images/player/jplayer.blue.monday.jpg") 0 -256px repeat-x;
	width:0px;
	height:5px;
}

/* @end */

/* @group current time and duration */

div.jp-audio div.jp-time-holder {
	position:absolute;
	top:50px;
}
div.jp-audio div.jp-type-single div.jp-time-holder {
	left:110px;
	width:186px;
}
div.jp-audio div.jp-type-playlist div.jp-time-holder {
	left:166px;
	width:130px;
}

div.jp-current-time,
div.jp-duration {width:60px;font-size:.64em;font-style:oblique;}
div.jp-current-time {float: left;display:inline;}
div.jp-duration {float: right;display:inline;text-align: right;}

div.jp-video div.jp-current-time {margin-left:20px;}
div.jp-video div.jp-duration {margin-right:20px;}

/* @end */

/* @group playlist */

div.jp-title {font-weight:bold;text-align:center;}

div.jp-title,
div.jp-playlist {width:100%;background-color:#b7b7b7;
  -webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	-moz-box-shadow: inset 0 0 5px #888;
	-webkit-box-shadow: inset 0 0 5px#888;
	box-shadow: inner 0 0 5px #888;
	top: -20px;
	position: relative;
	padding-top: 20px;
}
div.jp-type-single div.jp-title,
div.jp-type-playlist div.jp-title,
div.jp-type-single div.jp-playlist {border-top:none;}
div.jp-title ul,
div.jp-playlist ul {list-style-type:none;margin:0;padding:0 20px;font-size:.72em;}

div.jp-title li {padding:5px 0;font-weight:bold;}
div.jp-playlist li {padding:5px 0 4px 0px;border-bottom:1px solid #eee; display: block;}

div.jp-playlist li div {display:inline;}

/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */

div.jp-type-playlist div.jp-playlist li:last-child {padding:5px 0 5px 0px;border-bottom:none;}
div.jp-type-playlist div.jp-playlist a {color: #333;text-decoration: none;}
div.jp-type-playlist div.jp-playlist a:hover {color:#004479;}
div.jp-type-playlist div.jp-playlist a.jp-playlist-current {color:#004479;}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {float:right;display:inline;text-align:right;margin-right:10px; font-weight:bold;color:#666;}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {color:#0d88c1;}
div.jp-type-playlist div.jp-playlist span.jp-free-media {float:right;display:inline;text-align:right;margin-right:10px;}
div.jp-type-playlist div.jp-playlist span.jp-free-media a{color:#666;}
div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{color:#0d88c1;}
span.jp-artist {font-size:.8em;color:#666;}

/* @end */

div.jp-video-play {position:absolute;top:0;left:0;width:100%;cursor:pointer;background-color:rgba(0,0,0,0);}
div.jp-video-270p div.jp-video-play {height:270px;}
div.jp-video-360p div.jp-video-play {height:360px;}
div.jp-video-full div.jp-video-play {height:100%;z-index:1000;}
a.jp-video-play-icon {position:relative;display:block;width: 112px;height: 100px;margin-left:-56px;margin-top:-50px;left:50%;top:50%;background: url("../images/player/jplayer.blue.monday.video.play.png") 0 0 no-repeattext-indent:-9999px;}
div.jp-video-play:hover a.jp-video-play-icon {background: url("../images/player/jplayer.blue.monday.video.play.png") 0 -100px no-repeat;}





div.jp-jplayer audio,
div.jp-jplayer {width:0px;height:0px;}

div.jp-jplayer {background-color: #000000;}





/* @group TOGGLES */

/* The audio toggles are nested inside jp-time-holder */

ul.jp-toggles {list-style-type:none;padding:0;margin:0 auto;overflow:hidden;}

div.jp-audio .jp-type-single ul.jp-toggles {width:25px;}
div.jp-audio .jp-type-playlist ul.jp-toggles {width:55px;margin: 0;position: absolute;left: 325px;top: 50px;}

div.jp-video ul.jp-toggles {margin-top:10px;width:100px;}

ul.jp-toggles li {display:block;float:right;}

ul.jp-toggles li a {display:block;width:25px;height:18px;text-indent:-9999px;line-height:100%; /* need this for IE6 */}

a.jp-full-screen {background: url("../images/player/jplayer.blue.monday.jpg") 0 -310px no-repeat;margin-left: 20px;}

a.jp-full-screen:hover {background: url("../images/player/jplayer.blue.monday.jpg") -30px -310px no-repeat;}

a.jp-restore-screen {background: url("../images/player/jplayer.blue.monday.jpg") -60px -310px no-repeat;margin-left: 20px;}

a.jp-restore-screen:hover {background: url("../images/player/jplayer.blue.monday.jpg") -90px -310px no-repeat;}

a.jp-repeat {background: url("../images/player/jplayer.blue.monday.jpg") 0 -290px no-repeat;}

a.jp-repeat:hover {background: url("../images/player/jplayer.blue.monday.jpg") -30px -290px no-repeat;}

a.jp-repeat-off {background: url("../images/player/jplayer.blue.monday.jpg") -60px -290px no-repeat;}

a.jp-repeat-off:hover {background: url("../images/player/jplayer.blue.monday.jpg") -90px -290px no-repeat;}

a.jp-shuffle {background: url("../images/player/jplayer.blue.monday.jpg") 0 -270px no-repeat;margin-left: 5px;}

a.jp-shuffle:hover {background: url("../images/player/jplayer.blue.monday.jpg") -30px -270px no-repeat;}

a.jp-shuffle-off {background: url("../images/player/jplayer.blue.monday.jpg") -60px -270px no-repeat;margin-left: 5px;}

a.jp-shuffle-off:hover {background: url("../images/player/jplayer.blue.monday.jpg") -90px -270px no-repeat;}


/* @end */

/* @group NO SOLUTION error feedback */
.jp-no-solution {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;}
.jp-no-solution a {color:#000;}
.jp-no-solution span {font-size:1em;display:block;text-align:center;font-weight:bold;}

/* @end */








/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

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

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

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