/*
---VN Colors---
VN Green:#A0CC3A
VN Green for Text:#709c0a
VN Dark Blue:#27475d
VN Light Blue:#1f719d
*/

/* ========= */
/* = FONTS = */
/* ========= */

@font-face {font-family: 'AllerRegular'; src: url('/_fonts/aller_rg-webfont.eot'); src: local('☺'), url('/_fonts/aller_rg-webfont.woff') format('woff'), url('/_fonts/aller_rg-webfont.ttf') format('truetype'), url('/_fonts/aller_rg-webfont.svg#webfont03bI2uQD') format('svg'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'AllerDisplayRegular'; src: url('/_fonts/allerdisplay-webfont.eot'); src: local('☺'), url('/_fonts/allerdisplay-webfont.woff') format('woff'), url('/_fonts/allerdisplay-webfont.ttf') format('truetype'), url('/_fonts/allerdisplay-webfont.svg#webfont7gi0oyL8') format('svg'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'AllerLightItalic'; src: url('/_fonts/aller_ltit-webfont.eot'); src: local('☺'), url('/_fonts/aller_ltit-webfont.woff') format('woff'), url('/_fonts/aller_ltit-webfont.ttf') format('truetype'), url('/_fonts/aller_ltit-webfont.svg#webfont7KnRqLQM') format('svg'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'AllerLightRegular'; src: url('/_fonts/aller_lt-webfont.eot'); src: local('☺'), url('/_fonts/aller_lt-webfont.woff') format('woff'), url('/_fonts/aller_lt-webfont.ttf') format('truetype'), url('/_fonts/aller_lt-webfont.svg#webfontIdbwIww0') format('svg'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'AllerItalic'; src: url('/_fonts/aller_it-webfont.eot'); src: local('☺'), url('/_fonts/aller_it-webfont.woff') format('woff'), url('/_fonts/aller_it-webfont.ttf') format('truetype'), url('/_fonts/aller_it-webfont.svg#webfontKK5MYGPD') format('svg'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'AllerBoldItalic'; src: url('/_fonts/aller_bdit-webfont.eot'); src: local('☺'), url('/_fonts/aller_bdit-webfont.woff') format('woff'), url('/_fonts/aller_bdit-webfont.ttf') format('truetype'), url('/_fonts/aller_bdit-webfont.svg#webfontKgzUjaJS') format('svg'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'AllerBold'; src: url('/_fonts/aller_bd-webfont.eot'); src: local('☺'), url('/_fonts/aller_bd-webfont.woff') format('woff'), url('/_fonts/aller_bd-webfont.ttf') format('truetype'), url('/_fonts/aller_bd-webfont.svg#webfontBOLxxu2e') format('svg'); font-weight: normal; font-style: normal; }
.AllerLight{font-weight:normal;font-style:normal;line-height:normal;font-family:'AllerLightRegular',sans-serif;font-size-adjust:0.51;}
.AllerLightItalic{font-weight:normal;font-style:normal;line-height:normal;font-family:'AllerLightItalic',sans-serif;font-size-adjust:0.51;}
.Aller{font-weight:normal;font-style:normal;line-height:normal;font-family:'AllerRegular',sans-serif;font-size-adjust:0.52;}
.AllerItalic{font-weight:normal;font-style:normal;line-height:normal;font-family:'AllerItalic',sans-serif;font-size-adjust:0.52;}
.AllerBold{font-weight:normal;font-style:normal;line-height:normal;font-family:'AllerBold',sans-serif;font-size-adjust:0.52;}
.AllerBoldItalic{font-weight:normal;font-style:normal;line-height:normal;font-family:'AllerBoldItalic',sans-serif;font-size-adjust:0.52;}
.AllerDisplay{font-weight:normal;font-style:normal;line-height:normal;font-family:'AllerDisplayRegular',sans-serif;font-size-adjust:0.52;}
.Aller i, .AllerLight i, .AllerBold i, .AllerDisplay i, {font-size-adjust:none;}

html, body {height: 100%; }
body {background: #ecede8;}
#wrap {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -71px; }
.section.first {padding-top: 77px;} /* height of sticky header #header */
.section.last {padding-bottom: 71px;} /* height of #footer */
h1, h2, h3 {font-weight:normal;font-style:normal;line-height:normal;font-family:'AllerBold',sans-serif;font-size-adjust:0.52;}
h1.not-Aller, h2.not-Aller, h3.not-Aller {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}

.dropdown-menu {background-color: #ecede8;}
.dropdown-menu a {color: #153952;}
.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {background-color: #2f84b0; }

.ng-cloak {display:none;}
.nowrap {white-space: nowrap;}

#header {height:77px; background: #27475d url('/_img/swatch-vn_gradient_stripes-64x64.png') repeat top left; margin-bottom: 0;}
#header .navbar-inner {background: none; border-bottom:1px solid #a0cc3a;}

#header .brand img {max-width:180px; position: relative;}
#header .tagline {display:none; float:left; color: #fff; font-size: 16px; margin: 12px 0 0 12px; opacity: 0.8;}
.home #header .tagline {display:block;}

#header .form-search {margin: 24px 20px 0;}
#header .form-search .btn {border-color: #355972;}

#header .search-query {background-color: #081721; border: 1px solid #355972; color:#ccc;}
#header .search-query::-webkit-input-placeholder {color: #777;}
#header .search-query:-moz-placeholder {color: #777;}
#header .search-query:-ms-input-placeholder {color: #777;}

#header .search-query:focus::-webkit-input-placeholder {color: #444;}
#header .search-query:focus:-moz-placeholder {color: #444;}
#header .search-query:focus:-ms-input-placeholder {color: #444;}

#header .search-query:focus {background-color: #111;}

.vid-container.jwp {
	margin:0;
	padding:0;
	width: auto;
	height: auto;
	overflow:visible;
}
.vid-container.jwp > .jwplayer {
	-webkit-box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
	box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}

#landing {background-color: #e4f1f4;}
.home #landing {background-color: #fff;}
#landing h1 {text-shadow:0px 3px 4px rgba(0,0,0,0.2);}
#landing .container {padding-top: 30px;}
#landing .well {background-color: #fff;}

#footer {padding:0; height: 71px;}
#footer-links {padding:0; background-color: #b6b8b2; height: 27px;}
#footer-links > ul {padding-top:4px; margin: 0 0 0 8px;}
#footer-links a {color:#777;}
#footer-links a:hover {color:#333;}
#footer-savvas-branding {padding:0; background-color: #ed6b06; height: 45px;}
#footer-savvas-branding .container {padding-bottom: 0;}
#footer-savvas-branding .savvas-logo {background: url(/_img/savvas_logo.png) no-repeat top left; float: right; width: 148px; height: 45px; }

#error-header {background-color: #fff;}

ul.inline > li {display: inline; white-space: nowrap;}
ul.inline.tutorial-tags > li {padding: 0; line-height: 22px; white-space: normal;}
.img-polaroid{padding:4px 4px 12px;}


/*
 * HOME PAGE
 */
.home, .home #wrap {background-color: #fff;}
.home .navbar .btn-navbar {display: none;}
.home .form-search.visible-phone {margin-right:38px;}
.home .form-search.visible-phone input {width:100%; background-color: #f2ffd4;}
.home .form-search.visible-phone input:focus {font-weight: bold;}
.home .browse-buttons {margin-bottom: 20px;}
.home .browse-buttons ul > li {margin-bottom: 4px;}
.home .browse-buttons ul > li > a.btn {font-size: 20px; line-height: 28px; text-align: left; padding-left: 10px;}
.home .browse-buttons ul > li > a.btn > i {opacity: 0.7; margin-right: 10px;}
.home #feature-listing .options {margin-top: 30px;}
.home #feature-listing .options:first-child {margin-top: 0;}
.home .tutor-whiteboard-img {margin-top: 50px;}

/*
 * STORY PAGE
 */
.story .story-section {margin:40px 0;}
.story .story-section h2 i {color:#2f84b0; text-shadow:0 1px 1px #fff;}
.story .icons-ul {margin-left:3em;}
.story .icons-ul > li {margin:12px 0;}
.story .icons-ul .icon-li {color:#fff; text-shadow:0 1px 4px #2f84b0;}


/**
 * SUBJECT INVENTORY PAGES
 */
.topic-page .section.content {margin-top: 30px;}
.row.related-topics {margin-bottom: 30px;}
.inventory .topic-list {padding-bottom: 30px;}
.inventory .topic-list h4:hover {text-decoration: none;}
.inventory .header .visible-tablet h1 {font-size: 24px;}
.inventory .header .visible-tablet h1 small {font-size: 18px;}
.topic-list h3, .topic-list h4, .topic-list h5, .topic-list h6 {color:#153952; text-shadow:0 1px 1px #fff; cursor: pointer;}
.topic-list h3 > a, .topic-list h4 > a, .topic-list h5 > a, .topic-list h6 > a {text-decoration: none; color:#153952;}
.topic-list h3 > i, .topic-list h4 > i, .topic-list h5 > i, .topic-list h6 > i {cursor: pointer;}
.topic-list h3:hover > i, .topic-list h4:hover > i, .topic-list h5:hover > i, .topic-list h6:hover > i {text-decoration: none;}
.inventory .subject-dropdown {display:inline; margin-left: 20px;} /*Have to use !important to counteract Bootstrap*/

.btn-toggle-all-here {margin-left: 10px;}

#tutorial-search-results {position: absolute; z-index: 99999; background-color: #fff; padding: 4px; max-width: 540px; min-width: 300px; max-height: 300px; overflow: auto; margin: 4px 20px 0 0; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
#tutorial-search-results > li {padding: 6px 6px; line-height: 16px; }
#tutorial-search-results > li:nth-child(odd) {background-color: #f4f4f4; }
#btn-reset-search {padding: 4px 8px 4px 6px;}

.topic-column {overflow:hidden; margin-top: 10px; background-color: #e2e3dc; border-radius: 6px;}
.topic-column > .nav.fade {float:left; position: relative; opacity: 0; left: 1000px; margin-bottom: 0;
	-webkit-transition: left 0.5s linear, opacity 0.5s linear;
	-moz-transition: left 0.5s linear, opacity 0.5s linear;
	-o-transition: left 0.5s linear, opacity 0.5s linear;
	transition: left 0.5s linear, opacity 0.5s linear;
}
.topic-column > .nav.fade.reverse {left: -1000px; }
.topic-column > .nav.fade.in {opacity: 1; left: 0px; }
.topic-column > .nav.fade.in.out {opacity: 0; left: -1000px; }
.topic-column > .nav.fade.in.out.reverse {left: 1000px; }

.inventory #filter-bar {margin-bottom: 12px; margin-right: 30px;}
.inventory #filter-bar input {width: 100%;}

/*.search-container {overflow: visible;}*/
.search-container ul {background-color: #e2e3dc; border-radius: 6px; width:100%;}
.search-container ul.dropdown-menu {padding-right: 10px;}
.search-container .nav-stacked .active i, .search-container .nav-stacked .active a:hover i {opacity: 1; }

.search-container .nav-stacked li {position: relative; margin: 4px; }

.search-container .nav-stacked i {opacity: .25; position: absolute; top:50%; margin-top: -7px; right:4px; }

.search-container .nav-stacked a {padding-right: 30px; background-color: #f8f8f6;}
.search-container .nav-stacked a:hover {background-color: #fff;}
.search-container .nav-stacked a:hover i {opacity: .75; }

#panel-browser {margin-bottom: 20px;}
.browser-breadcrumbs {margin-top: 10px; background-color: #ecede8; border-radius: 6px;}
.browser-breadcrumbs ul.breadcrumb {width: auto; margin: 0; padding: 4px;}
.browser-breadcrumbs ul.breadcrumb > li:before {content: "/"; margin:0 6px; }
.browser-breadcrumbs ul.breadcrumb > li:first-child:before {content: none; }
.browser-breadcrumbs ul.breadcrumb > li .dropdown-menu a:hover {text-shadow: 0 1px 1px #000; }
.browser-breadcrumbs ul.breadcrumb > li .dropdown-menu > li.disabled {background-color: #ecede8; }
.browser-breadcrumbs ul.breadcrumb > li .dropdown-menu > li.disabled a:hover {text-shadow: inherit; }

/*
 * TOPIC LIST PAGES
*/
ul.topic-list {list-style-type: none;}
ul.topic-list ul {list-style-type: none;}
.topic-list h4:hover {text-decoration: underline;}
.topic-list h4.topic2 > i {margin-top: 4px;}
.topic-list .icon-plus-sign {vertical-align: top; margin-top: 1px;}
.topic-list .icon-minus-sign {vertical-align: top; margin-top: 1px;}
.topic-list .exp-all-phone {display: none;}

/*
 * SEARCH RESULTS
*/
body.search-results {}
.search-results > li {margin-bottom: 10px; padding-top: 10px; border-top: 2px solid #e3e3e3;}
.search-results > li:first-child {border-top: none;}
.search-results .thumbnails, .search-results .thumbnail {margin:0;}
.search-results .thumbnail {background-color: #E2E3DC;}
.search-results .thumbnail img {background-color: #fff; width:100%; margin-top: 4px;}
.search-results .row h4, .search-results .row h5 {margin-top: 0}
.search-results .show-thumb-video .thumb-diagram {display:none;}
.search-results .show-thumb-diagram .thumb-video {display:none;}
.search-results .print-btn {text-align: center;}
.search-results .visible-phone h1 {font-size: 22px;}
.search-results .visible-phone h1 small {font-size: 18px;}

/*
 * VIEWTUTORIAL
*/
.section.tutorial-main {background-color: #e2e3dc;}
.section.tutorial-main ul.breadcrumb {background-color: #ecede8;}
.tut-title {letter-spacing: -1px; text-transform: lowercase; text-shadow:0px 1px 1px #fff; }
.tutorial-actions {padding-top: 18px;}
.section.tutorial-related {background-color: #ecede8; border-top: 3px solid #fff;}

/*
 * PLAYLIST LIST
 */
.playlist-list #content {background-color: #e2e3dc; padding-top: 20px;}
.playlist-list table {background-color: #ecede8;}
.playlist-list table thead {background-color: #fff;}

/*
 * MEDIA QUERIES
 */
@media (min-width: 980px) {
	#header .brand {max-height:56px; overflow: visible;}
	#header .brand img {max-width:250px; top:0px;}
	#header .tagline {margin-top: 31px; font-size: 22px;}
}
@media (max-width:979px) {
	#header {height: 61px;}
	#header .brand {max-height:20px; overflow: visible;}
	#header .brand img {max-width:180px; top:-6px;}
	#header .form-search {margin:10px 20px 10px 0px;}
	.section.first {padding-top: 0px;} /* header not sticky at smaller widths */
	.section.first.tutorial-main {padding-top: 20px;}
	.inventory .subject-dropdown {display: none;}
}
@media (min-width: 768px) {
	.home #header .tagline {display: none;}
	.inventory #filter-bar input {width: 300px;}
}
@media (max-width: 767px) {
	h1 {font-size: 22px;}
	#header {height: 51px;}
	#header .brand img {max-width:160px; top:-9px;}
	.section.full-width {padding-left:20px; padding-right:20px; margin-left:-20px; margin-right:-20px;}
	#landing {padding: 0 20px; margin: 0 -20px;}
	#landing .container {padding-top: 0px;}
	.section.tutorial-main {padding: 20px 20px; margin: 0 -20px;}
	.home #landing img {max-width: 300px; float:right;}
	.home .lead {margin-top: 20px; }
	.inventory .section.first .container {padding-top: 12px;}
	.search-results p.lead {font-size: 15px; line-height: 20px; margin-bottom: 0; }
	.search-results #search-results-heading {background-color: #e2e3dc; margin: 0 -20px; padding:20px 20px 6px;}
	.search-results #search-results-heading .form-search {margin-bottom: 10px;}
	#footer {margin: 0 -20px;}
}
@media (min-width: 640px) {
	.topic-column {width:598px; border:1px solid #b6b8b2;}
	#panel-browser-breadcrumbs {width:598px; border:1px solid #b6b8b2;}
}
@media (max-width: 639px) {
	.topic-list h1, .topic-list h2, .topic-list h3, .topic-list h4, .topic-list h5, .topic-list h6 {font-size: 14px;}
	.topic-list ul, .topic-list li {margin-left: 8px;}
	.topic-list > li {margin-left: 0px;}
	.topic-list a {font-size: 14px; display: inline-block; width: 85%;}
	.topic-list li > a {line-height: 15px; }
	.topic-list i {display: inline-block; width: 12px; }
	.topic-list .btn-toggle-all-here {display:none;}
	.topic-list .exp-all-phone {display: inline-block; vertical-align: top;}
}
@media (max-width: 480px) {
	#tutorial-search-results {min-width: 0px; }
}
video::-internal-media-controls-download-button {
  display:none;
}

video::-webkit-media-controls-enclosure {
  overflow:hidden;
}

video::-webkit-media-controls-panel {
  width: calc(100% + 30px); /* Adjust as needed */
}

@media (max-width: 768px) {
	.vid-container video {
		width: 100%;
		height: auto;
	}
	.home .tutor-whiteboard-img {margin-top: 0;}
	.tutorial-lib .form-search .search-query {
		width: calc(100% - 40px);
		background-color: #f2ffd4;
	}
	.topic-list .exp-all-phone {
		padding: 0px 0px 0px 0px;
		height: 19px;
		width: 19px;
	}
	.topic-list .video-link-a {width: 90%;}
	.topic-list .icon-facetime-video {vertical-align: top; margin: 1px 2px 0px 0px;}
	.topic-list .exp-all-phone .icon-circle-arrow-down {font-size: 9px; vertical-align: text-top; margin: 0px;}
	.topic-list .exp-all-phone .icon-circle-arrow-up {font-size: 9px; vertical-align: text-top; margin: 0px;}
}

@media (min-width: 640px) and (max-width: 1280px) {
    .topic-list .btn-toggle-all-here {display:inline-block;}
}

@media all and (max-width: 600px) and (orientation:portrait) 
{
    .topic-list h3 a {
		width: auto;
		display: contents;
	}
	.topic-list .h3 {
		/* button width */
	   margin-right: 19px;
	}
	button.exp-all-phone {
		position: absolute;
		margin-left: 2px;
	}
}