/* book specific style */

body {
	
}

.header {
	
}

.nav {
	
}

/* main tags */

body {
	/* padding: 50px 0; /* account for nav bar and footer */
}

a {
	color:#444;
	text-decoration:none;
}

a:hover, a:focus {
	color:#444;
	text-decoration:none;
	cursor:pointer;
}

.tooltips,
.tooltips-player-cred,
.tooltips-norton-cred,
.tooltips-glossary,
.tooltips-focus {
	border-bottom:1px dotted #444;
	white-space:nowrap;
}

#wrapAll {
	position:absolute;
	width: 100%;
	min-height:100%;
}

#wrap {

  height: auto !important;
    /* Negative indent footer by it's height */
	margin: 0 auto 0px;
	padding: 70px 0;
}

#main {
	margin-bottom: 40px;
}

#contentContainer, .timeline_text_content_container {
	background-color: #f9f9f9;
	-moz-box-shadow:    0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow:         0px 0px 1px 0px #ccc;
}

.timeline_text_item {
	padding: 29px 50px 50px 50px;
	display: none;
}

.timeline_interval:first-child .timeline_text_item:first-child {
	display: block;
}

#quickLinks, #quickLinksImage, #quickLinksDocument {
	font-weight: normal;
	background-color: #fff;
	margin-bottom:20px;
}

#quickLinks div, #quickLinksImage div, #quickLinksDocument div{
	cursor: pointer;
	border: 1px solid #eee;
	border-left: 2px solid #000;
	padding: 2px 6px 2px 37px;
	text-indent: -31px;
	line-height: 1;
	margin-bottom: 10px;
	-moz-box-shadow: 0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow: 0px 0px 1px 0px #ccc;
	display: inline-block;
}

#quickLinks div:before, #quickLinksImage div:before, #quickLinksDocument div:before  {
	padding: 1px 4px;
	margin-right: 10px;
	font-size: 0.8em;
	background-color: #f9f9f9;
	color: #444;
	border: 1px solid #ccc;
	-moz-box-shadow: 0px 0px 2px 0px #ccc;
	-webkit-box-shadow: 0px 0px 2px 0px #ccc;
	box-shadow: 0px 0px 2px 0px #ccc;
	line-height: 2.2;
}

#quickLinks div:before {
	font-family: 'glyphicon';
	content: "\25BA";
}

#quickLinksImage div:before {
	font-family: 'glyphicon';
	content: "\E060";
}
#quickLinksDocument div:before {
	font-family: 'glyphicon';
	content: "\E022";	
}

.qlButton.active, .labels.active, .mejs-audio .button.active {

	background-color: #57d6ff;
}

#focusContentInner {
	padding: 15px 0;
	background-color: #fff;
	border: 1px solid #eee;
	-moz-box-shadow:    0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow:         0px 0px 1px 0px #ccc;
}

#learnContentInner {
	padding: 15px 20px;
	background-color: #fff;
	border: 1px solid #eee;
	-moz-box-shadow: 0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow: 0px 0px 1px 0px #ccc;
}

#learnContentInner a {
	color: #008cba;
	text-decoration: underline;
}

#focusContentMain {
	
}

#focusContentSidebar {
	
}

.brand {
	float: left;
	font-size: 14px;
	font-weight: normal;
	position: relative;
	display: block;
	line-height: 21px;
	padding: 10px 15px;
	padding-top: 12px;
	padding-bottom: 12px;
	text-shadow: 0px 1px 1px #04a2d8;
	color: #004861 !important;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin-top: 0;
	max-width: 380px;
}

.focusItems {
	display:inline-block;
	background: #eee;
	border: 1px solid #ddd;
	padding: 5px 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-khtml-border-radius: 3px;
	margin-bottom:5px;
	margin-right: 5px;
}

#player {
	padding: 140px 0 130px 0;
	background-color: #fff;
}

#controlBar {
	height: 150px;
	width: 50px;
	background-color: #f9f9f9;
	border: 2px solid #ddd;
	border-left: 1px solid #ddd;
	position: absolute;
	left: -15px;
	top: 60px;
	z-index: 100;
}

.spriteIndicator > div {
	position: absolute;
	top: -15px;
	left: -15px;
	font-weight: bold;
}

#bottomLinks {
	
}

#footer {
	font-size:small;
	background-color: #f5f5f5;
	padding: 5px;
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 0px;
}

.guide {
	min-width:320px;
	position: relative;
	border-bottom:2px solid #57d6ff;
}

#guide {
	border: 1px solid #eee;
	-moz-box-shadow:    0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow:         0px 0px 1px 0px #ccc;
}

#videos, #media, #images, #documents {
	border:1px solid #eee;
}

#video > img, #images > img {
	width:100%;
}

#musicInfo {
	padding: 0px 20px 20px 20px;
	margin-top: 20px;
}

#transcriptContent {
	padding: 0px 20px 10px 20px;
	margin-top: 20px;
}

#transcriptContent h2 a {
	vertical-align:text-top;
}

#transcriptContentInner {
	max-height: 200px;
	overflow: auto;
	background: #eee;
	border: 1px solid #ddd;
	padding: 5px 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-khtml-border-radius: 3px;
	margin-bottom: 5px;
	margin-right: 5px;
}

#transcriptLink {
	text-align:right;
	padding: 0px 10px 10px 10px;
	margin-top: 10px;
}

#listenFor {
	background-color: #fff;
}

#listenFor h3 {
	margin-top:0px;
	padding-bottom: 5px;
	border-bottom:2px solid #eee;
}

#titleWrap {
	width: inherit;
}

#composer {
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
	border-left: 2px solid #444;
	/*border: 1px solid #eee;
	background-color: #fff;
	-moz-box-shadow: 0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow: 0px 0px 1px 0px #ccc;*/
	margin: 15px;
	padding-left: 25px;
}

.portrait {
	float:left;
	padding-right:10px;
	height: 100px;
}

.notationWrap {
	padding: 2px;
	margin-top: 10px;
	margin-bottom: 20px;
	display: block;
	overflow-x: auto;
}

.notation {
	background-color: #fff;
	padding: 20px;
	display: block;
	-moz-box-shadow: 0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow: 0px 0px 1px 0px #ccc;
	overflow-x: auto;
}

.canvas {
	background-color:none;
	position: absolute;
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	cursor:pointer;
}

.labels {
	background-color: #fff;
	border: 1px solid #eee;
	border-left: 2px solid #000;
	padding: 5px;
	max-width: 120px;
	position: absolute;
	display: block !important;
	cursor:pointer;
	-moz-box-shadow:    0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow:         0px 0px 1px 0px #ccc;
}

.button {
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	border: 2px solid #444;
	height: 18px;
	width: 18px;
	background-color: #fff;
}

.spriteIndicator {
	display:none;
	width:20px;
	height:20px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #57d6ff;
	margin-top: -20px;
	position: absolute;
}

#credContainer {
	background-color: #f9f9f9;
	-moz-box-shadow: 0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow: 0px 0px 1px 0px #ccc;
}

#nortonCred {
	border: 29px solid #f9f9f9;
	padding: 0px 21px 21px 21px;
	font-weight: normal;
	background-color: #fff;
	-moz-box-shadow: inset 0 0 2px #ccc;
	-webkit-box-shadow: inset 0 0 2px #ccc;
	box-shadow: inset 0 0 2px #ccc;
}

#playerCred {
	padding: 29px 50px 50px 50px;
}

.glossTerm {
	padding-bottom: 15px;
	margin: 0 auto;
	float: none;
}

/* overwriting bootstrap */

#glossaryContent .nav > li > a {
	padding: 8px 10px;
	width: 40px;
	text-align: center;
}
.nav-tabs {
	border:none;
}

.nav-tabs > li {
	margin-bottom:0;
	border-bottom: 2px solid #fff;
}

.nav-tabs > li > a {
	border:none;
	margin-right:0;
	border-right:2px solid #fff;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
	border:none;
	background-color:#ccc;
	color:#444;
	border-right: 2px solid #fff;
}

.nav-tabs > li > a:hover {
	border:none;
	border-right: 2px solid #fff;
	background-color: #ddd;
}

.nav-tabs > li > a {
	background-color: #efefef;
}

.navbar-nav.navbar-right:last-child {
	margin-right: 0px;
}

.tab-content > .tab-pane {
	padding: 20px;
	border: none;
	border-top: none;
	background-color: #fff;
}

/* navigation */

#glossTabs {
	background-color: #eee;
	margin-bottom: -2px;
	-moz-box-shadow: inset -4px 0px 0 -2px #fff;
	-webkit-box-shadow: inset -4px 0px 0 -2px #fff;
	box-shadow: inset -4px 0px 0 -2px #fff;
}

/* tipped tooltips custom styling */

.t_ContentContainer {
	font-size: 14px !important;
	line-height: 1.2 !important;
}


/* account for larger screen sizes */

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
	#contentContainer {
		font-size: 1.2em;
	}
	#transcriptContent {
		font-size: 1.2em;
	}
	#musicInfo {
		font-size: 1.2em;
	}
	#learnContentInner {
		font-size:1.2em;
	}
	#listenFor {
		font-size: 1.2em;
	}
	.tab-content {
		font-size: 1.2em;
	}
	.t_ContentContainer {
		font-size: 1.2em !important;
	}
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
	#contentContainer {
		font-size: 1.4em;
	}
	#musicInfo {
		font-size: 1.4em;
	}
	#transcriptContent {
		font-size: 1.4em;
	}
	#learnContentInner {
		font-size:1.4em;
	}
	#listenFor {
		font-size: 1.4em;
	}
	.tab-content {
		font-size: 1.4em;
	}
	.t_ContentContainer {
		font-size: 1.4em !important;
	}
}

/* account for smaller screen size */

@media only screen and (max-width : 991px) {
	#composer {
		border:none;
		padding-left:0;
	}
	#listenFor {
		padding: 0 20px 20px 20px;
	}
	#musicInfo {
		margin-top:20px;
	}
	#focusContentMain {
		border:none !important;
	}

	#focusContentSidebar {
		border:none !important;
	}
	#titleWrap {
		display:none;
	}
	#composer {
		display:none;
	}
}

/* account for iPad and smaller devices */

@media only screen and (max-device-width : 1024px) {
	#titleWrap {
		display:none;
	}
	#listenFor {
		padding: 0 20px 20px 20px;
	}
	#composer {
		display:none;
	}
	.navbar {
		font-weight: normal !important;
	}
}


/* media player custom styling */

audio {
	width: 100%;
}

.mejs-container {
	background: #fff;
}

#mejs-custom-buttons {
	position: absolute;
	top: 110px; 
	left: 4px;
}

#mejs-custom-buttons .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(controls.svg) no-repeat;
}

#mejs-custom-buttons .mejs-play button {
	background-position: 0 0;
	outline: 2px solid #57d6ff;
}

#mejs-custom-buttons .mejs-pause button {
	background-position: 0 -16px;
}

#controlBar > div.mejs-time {
	position: absolute;
	left: 8px;
	top: 40px;
}

#replay {
	position: absolute;
	top: 90px;
	left: 13px;
	cursor: pointer;
}

#replay > img {
	width: 20px;
	height: 20px;
}

#spacer {
	width: 55px;
	list-style-type: none;
	background-image: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	height: 26px;
	font-size: 11px;
	line-height: 11px;
	font-family: Helvetica, Arial;
	border: 0;
}

#mejs-custom-buttons .mejs-button button {
	top: -62px;
	margin-left: 8px;
	border: 4px solid #fff;
	outline: 2px solid #444;
	height: 24px;
	width: 24px;
	background-color: #fff;
}

#mejs-custom-buttons .mejs-time {
	top: 26px;
	font-size: 16px;
	margin-left: 2px;
	position: absolute;
}

.mejs-currenttime {
	font-size:12px !important;
}

#mejs-custom-buttons .mejs-button {
	width:45px;
}

div.mejs-time-rail {
	position:relative;
	margin-left:25px;
}

.mejs-video {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
/*	-moz-box-shadow:    0px 0px 1px 0px #ccc;
	-webkit-box-shadow: 0px 0px 1px 0px #ccc;
	box-shadow:         0px 0px 1px 0px #ccc;*/
}

.mejs-audio {
  width: 100% !important;
  height: auto !important;
}

.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}

.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

/* media player more styling */

.mejs-container .mejs-controls {
	background:#fff;
	background-image:none;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
	background: #444;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	display:none;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
	background:#eee;
}

.mejs-controls .mejs-time-rail span {
	border-radius:0;
}

.mejs-controls .mejs-time-rail .mejs-time-float {
	display:none !important; /* gets rid of the current time float */
}

.mejs-container .mejs-controls .mejs-time span {
	color: #444;
}

.mejs-controls .mejs-button button:focus {
	/* outline: none; */
}

.mejs-audio .mejs-container .mejs-controls div {
	width:13px;
}

/* jquery dialogs */

.ui-dialog input[type="text"], .ui-dialog input[type="password"] {
	width: 100%;
}
.ui-dialog button {
	cursor:'pointer';
}