@charset "utf-8";
/* soundplayer panel */

#soundplayer {
	visibility: visible;	
	width: 390px;
	height: 36px;
}

#soundplayer_panel {
	margin: 10px auto 0px;	
	width:100%;
	max-width:760px;
}

.soundplayer_panel_content {
	padding: 15px;
	background:#F7F7F7;
}

.soundplayer_holder {
	float:left;	
    width: 55%;
}

.soundplayer_panel_image {
	float:right;
	border: solid 1px #D0D0D0;
	background-color:#FFF;
	padding: 5px;

}
.soundplayer_panel_image >img
{
	width:100%;
	height:auto;
}




.transcripthighlight {
    color: #070707 !important;
}

.abstract {
	font-size: medium;
	font-weight: normal;
	font-style: italic;
	color: #3A4E67;
}

.bordered-video { border: 2px solid #9BA6C2; margin: 0 auto; }

#caption {
	padding: 10px;
	background: #333C45;
	color: #FFF;
	font-size: small;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	border-top: 1px solid #9BA6C2;
	min-height: 3em;
	height:auto;
}
#transcript {
	padding: 10px;
	background: #FFF;
	font-size: small;
	border: 1px solid #9BA6C2;
	height: 150px;
	overflow-y:scroll !important;
	
     -webkit-overflow-scrolling: touch;
	color: #333;
	max-width:580px;
	width:100%;
}
#togglebutton {
	max-width:600px;
	width:100%;
	background-image:url(images/transcript_btn_bg.png);
	border: 1px solid #B3B0B0;
	font-size:11px;
	color:#4B4949;
	line-height:25px;
	text-indent:10px;
	
}
#hideshow{
	width:100px;
	text-align:center;
	padding-bottom:1px;
	padding-top:1px;
	font-size:12px;
	float:right;
}
/* Hover styling will not work in IE6 because of lack of pseudoclass :hover support
Considered acceptable for this demo, as most people should be on IE7 or higher. */
.span{
	line-height:12px;
	
	}
#transcript.enabled span:hover {
	background: #FF3;
	cursor: pointer;
	box-shadow: 0px 2px 2px rgba(0,0,0,.33);
	-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,.33);
	-moz-box-shadow: 0px 2px 2px rgba(0,0,0,.33);
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#CCC, offX=0, offY=1, positive=true);	
}


@media screen and (min-device-width:100px) and (max-device-width:599px), screen and (min-width:100px) and (max-width:599px){
	

#soundplayer {
	visibility: visible;	
	width: 390px;
	height: 36px;
}

#soundplayer_panel {
	margin: 10px auto 0px;	
	max-width:760px;
	width:100%;
}

.soundplayer_panel_content {
	padding: 15px;
	background:#F7F7F7;
}

.soundplayer_holder {
	float:left;	
    width: 55%;
}

.soundplayer_panel_image {
	float:left !important;
	border: solid 1px #D0D0D0;
	background-color:#FFF;
	padding:5px;
	margin-top:10px !important;

}
.soundplayer_panel_image >img
{
	width:100%;
	height:auto;
}




.transcripthighlight {
    color: #070707 !important;
}

.abstract {
	font-size: medium;
	font-weight: normal;
	font-style: italic;
	color: #3A4E67;
}

.bordered-video { border: 2px solid #9BA6C2; margin: 0 auto; }

#caption {
	padding: 10px;
	background: #333C45;
	color: #FFF;
	font-size: small;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	border-top: 1px solid #9BA6C2;
	min-height: 3em;
	height:auto;
}
#transcript {
	padding: 10px;
	background: #FFF;
	font-size: small;
	border: 1px solid #9BA6C2;
	height: 150px;
	overflow-y:scroll !important;
	-webkit-overflow-scrolling: touch;
	color: #333;
	max-width:580px;
	width:100%;
}

#transcript p{
	
	-webkit-overflow-scrolling: touch !important;
	
	}

#togglebutton {
	max-width:600px;
	width:100%;
	background-image:url(images/transcript_btn_bg.png);
	border: 1px solid #B3B0B0;
	font-size:11px;
	color:#4B4949;
	line-height:25px;
	text-indent:10px;
	
}
#hideshow{
	width:100px;
	text-align:center;
	padding-bottom:1px;
	padding-top:1px;
	font-size:12px;
	float:right;
}
/* Hover styling will not work in IE6 because of lack of pseudoclass :hover support
Considered acceptable for this demo, as most people should be on IE7 or higher. */
.span{
	line-height:12px;
	
	}
#transcript.enabled span:hover {
	background: #FF3;
	cursor: pointer;
	box-shadow: 0px 2px 2px rgba(0,0,0,.33);
	-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,.33);
	-moz-box-shadow: 0px 2px 2px rgba(0,0,0,.33);
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#CCC, offX=0, offY=1, positive=true);	
}
	
} 



@media screen and (max-width: 1024px) {
.soundplayer_holder {
	float:left;	
    width: 50%;
}
}
@media screen and (max-width: 768px) {
.soundplayer_holder {
	float:left;	
    width: 100%;
}
}