/* DO-IT Video
	Style sheet created by Terrill Thompson, tft@uw.edu
  
  z-index values: 
   .able (video player)  = .5000 
   #branding = 6000 
   #search = 7000
   #videoNav = 8000 

*/

/* Main layout */
body {
	font-family: "OpenSansRegular",Arial,Helvetica,sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	background-color: #FFF;
	color: #333;
	margin: 0;
	padding: 0;
	min-width: 950px;
}
#content {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 960px;
}
#content.video-page {
  width: 90%;
}
#main {
	position: relative;
	margin: 5px 0;
	padding: 0 1em;
	border-top: 2px solid #ccc;
	min-height: 600px;
}
header {
  margin-top: 0;
  padding-top: 20px;
  height: 140px;
  position: relative;
  background-color: #F2F9FB;
}
footer {
	display: block;
	clear: both;
	background-color: #EEE;
	margin-top: 2em;
	width: 100%;
}

/* HTML elements */

h1 {
  clear: left;
	color: #000;
	font-size: 1.6em;
	margin-top: 0;
	padding-top: 0.5em;
	line-height: 1.25em;
}
h2 {
	color: #000;
	font-size: 1.4em;
}
abbr {
	border-bottom: thin dotted #000;
}
p {
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}
ul, ol {
}
ul ul {
	margin-top: 0.5em;
}
ul li, ol li {
	padding-bottom: 0.5em;
}
ol li p {
	margin-top: 0;
}
a {
  color: #3B358B; /* DO-IT purple */
  text-decoration: underline;
}
a:hover, a:active, a:focus {
	color: #fff !important;
	background: #3B358B;
	text-decoration: none;
	outline: none;
}
sup {
	font-size: 0.5em;
	color: #f00;
}

/* top (header) */

header > div {
  position: relative;
  width: 900px;
  margin: 0 auto;
}
div#site-slogan {
  color: #2b2c6c;
  font-size: 1.38462em;
  left: 126px;
  position: absolute;
  top: 60px;
  width: auto;
  bottom: 0;
}

/* DO-IT Nav */

nav#navigation {
  background-color: #2b2c6d;
  width: 100%;
}
div#menu-wrap {
  margin: 0 auto;
  padding: 0;
  width: 960px;
}
button#menuToggle {
  display: none;
}
#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#navigation li {
  float: left;
  margin: 0;
  padding: 0;
}
#navigation li a {
  font-family: "OpenSansBold",Arial,Helvetica,sans-serif;
  font-size: 1.2em;
  padding: 0.25em 20px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  display: table-cell;
  vertical-align: bottom;
}
#navigation li a:hover,
#navigation li a:focus,
#navigation li a:active {
  background-color: #0d8bb1;
  outline: none;
}
#navigation li.active {
  background-color: #0d8bb1;
/*
  background-image: url("../images/indica-nav-main.png");
  background-position: center 1.77em;
  background-repeat: repeat-x;
*/
}

/* Skip link */

a#skip-link {
  position: absolute;
  top: 30px;
  left:-10000px;
  background-color: #000;
  color: #fff;
  padding: 0 0.3em;
  text-decoration: none;
}
a#skip-link:focus {
  left: 126px;
}

/* Footer */
#footer-wrap {
  width: 960px;
  margin: 0 auto;
  padding-top: 1em;
}
footer h2 {
  font-family: "OpenSansRegular",Arial,Helvetica,sans-serif;
  color: #2b2c6c;
  font-family: "OpenSansBold",Arial,Helvetica,sans-serif;
  font-size: 1.38462em;
  font-style: normal;
  font-weight: normal;
  line-height: 1.2;
}
div.footer-block {
  float: left;
}
div.footer-block h3 {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  color: #333;
  font-family: "OpenSansBold",Arial,Helvetica,sans-serif;
  font-size: 1.07692em;
  padding: 12px 24px 10px 14px;
  text-transform: uppercase;
}
div.footer-block:first-child h3 {
  padding-left: 0;
}
div.footer-block ul {
  list-style-type: none;
  margin: 0 0 1.5em;
  padding: 0 0 0 12px;
}
div.footer-block:first-child ul {
  padding-left: 0;
}
div.footer-block li {
  padding-bottom: 1em;
  line-height: 1.3em;
}
div.footer-block li a {
  color: #333;
  text-decoration: underline;
}
div#contentinfo {
  clear: left;
  background-image: url('../images/logo-uw-footer-66x45.png');
  background-position: bottom left;
  background-repeat: no-repeat;
  padding-left: 75px;
}
div#contentinfo a {
  color: #333;
  text-decoration: underline;
}
div#contentinfo a:hover,
div#contentinfo a:focus,
div#contentinfo a:active {
  color: #FFF;
  background-color: #000;
  text-decoration: none;
  outline: none;
}


/* Search styles */

#search {
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding:0;
	width: 30em;
	min-height: 120px;
	z-index: 7000; 
}
#search form {
	padding-top: 40px;
}
#search input {
	width: 20em;
}
#search input.button {
  margin-left: 0.65em;
	width: 5em;
	font-size: 1em;
}

/* Search Results styles */

.searchResultsTime {
  font-weight: bold;
}
.searchResultsText {
}
.searchTerm {
	font-weight: bold;
	background: #ffc;
}
#searchTermTop {
  font-weight: bold;
  font-size: 1.1em;
  font-style: italic;
}
.searchTerms {
  font-weight: bold;
  font-style: italic;
}
.videoResult {
	clear: left;
}
.videoResultDetail {
	padding-left: 170px;
}
.videoResultDetail h3 a {
	color: #3B358B; /* DO-IT purple */
}
.videoResultDetail ul li a {
	font-weight: bold;
}

/* DO-IT Video site navigation */

nav#videoNav {
  position: relative;
  margin: 1em auto;
  width: 980px;
  z-index: 8000; 
}
button#videoMenuToggle {
  display: none;
}
nav#videoNav ul {
	display: block;
	margin: 0;
	padding: 0;
}
nav#videoNav li {
	display: inline;
	padding-bottom: 0.5em;
}
nav#videoNav a {
	background-color: #FFFFFF;
	color: #333399;
	border-left: 2px solid black;
	padding-left: 0.75em;
	padding-right: 0.75em;
	font-weight: bold;
	text-decoration: none;
}
nav#videoNav a:hover,
nav#videoNav a:focus,
nav#videoNav a:active {
	background-color: #3B358B; /* DO-IT Purple */
	color: #FFF;
}
nav#videoNav li:first-child a {
	border-left: none;
}

/* divs within #main */
.listDiv {
}
div.playerYes {
	padding-left: 530px; /* was 370px; */
}
div.playerNo {
	padding-left: 1.5em;
}

/* List of videos */

#videoList {
	width: 100%;
	margin-bottom: 5%;
}
#videoList h2 {
  clear: left;
  margin: 0 1.5em;
  padding: 1em 0 0;
}
#videoList ul {
	list-style-type: none;
}
#videoList ul li {
	margin-bottom: 1em;
	clear: left;
  min-height: 100px;
}
#videoList ul li div { 
  display: block;
  padding-left: 170px;
}
#videoList a {
  display: block;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: underline;
}
#videoInfo {
/* includes Video Presentation and Publication secs of video.php */
}
.listDiv li {
	padding: 0.5em;
}
.listDiv li a {
	color: #000;
}


/* DO-IT Video player styles */

#playerDiv {
	float: left;
	width: 640px;
}
#playerDiv p {
	text-align: center;
	margin: 0;
	padding: 0.25em;
}

/* Video meta */

div#videoMeta {
	position: relative;
	margin: 1em 0;
	padding-left: 20px;
	height: 100%;
	overflow: auto;
}
div.novideo {
	margin-left: 1em !important;
	width: 70% !important; /* improve readability */
}
p.novideo_msg {
	font-weight: bold;
  background-color: #ffc;
  border: 1px solid #39275B;
  padding: 0.75em;
}
h2#transcript-heading {
  margin-top: 0;
  margin-bottom: 0.45em;
}

#transcript {
  position: relative;
  height: 500px;
  overflow: auto;
}
#transcript > .able-transcript-area {
  margin-top: 0;
  margin-left: 0;
}
#transcript .able-transcript {
  padding-left: 2%;
  padding-right: 2%;
  width: 96%;
}

/* Misc. styles, listed alphabetically */
#adminList {
	list-style-type: none;
}
#adminList li {
	padding-bottom: 1em;
}
#adminList ul {
	margin-top: 1em;
	list-style-type: disc;
}
#adminList ul ul {
	list-style-type: circle;
}
.alert {
	font-weight: bold;
	padding: 1em;
	background: #FF9;
	border: 1px solid #2b2c6d;
}
p.back-home {
  margin-top: 0;
  font-weight: bold;
  font-size: 1.1em;
}
.bold {
	font-weight: bold;
}
.captionTime, .captionText {
	font-size: 1.1em;
}
.captionTime {
	font-weight: bold;
}
.captionText {
	font-style: italic;
}
.center {
	text-align: center;
}
.command {
	font-family: courier;
	padding: 0.5em;
	border: 1px solid #000;
	background: #eee;
}
#copyright a {
	text-decoration: underline !important;
}
.dvdTitle {
  font-style: italic;
  font-weight: bold;
}
.field {
	font-weight: bold;
}
.hidden {
	position: absolute;
	left: 0px;
	top: -500px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.mediaPath {
	font-style: italic;
}
/*
.narration {
	padding: 1em;
	border: thin solid #336;
	background: #fee;
	font-style: italic;
}
*/
.not_available {
  font-size: 1.2em;
}
.noVideo {
	font-weight: bold;
	font-style: italic;
}
.playerLink {
	font-weight: bold;
}
.screenreader-visible {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
}
.shortInput {
	width: 10em;
}
.shortNameSpan {
	font-style: italic;
}

#sortForm {
	margin-left: 1em;
}
#sortForm .goButton {
	padding: 0;
	width: 3em;
	font-size: 1em;
	font-weight: bold;
	height: 1.5em;
}
.subPref {
	margin-left: 1.5em;
}
.thisCaption {
	margin-left: 1em;
}
.thisVideo {
	font-weight: bold;
}
.thumbnail {
	width: 150px;
	float: left;
	border: none;
	padding-right: 1em;
}
.wide {
	padding-left: 1.5em;
}
.wide p, .wide ul {
	width: 70em;
	max-width: 70em;
}


/* expand container div to the height of floated element inside it */
/* first solution works only in browsers that support :after */
.clearfix:after {
	/* works only in browsers that support :after (not IE) */
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	font-size: 0.1em;
}
/* now the hacks for other browsers */
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

/*
 * Responsive Styles
 */

@media (max-width: 959px) {
	/* remove fixed with from content wrappers (otherwise fixed at 960%) */
	body {
    min-width: 0;
	}
  header > div,
  div#menu-wrap,
  div#content,
  div#content.video-page,
  div#footer-wrap {
    width: 98%;
  }
}
@media (max-width: 900px) {
  /* all small-screen devices */
	/* change menu style & hide it; show toggle button in its place */
  nav#navigation,
  nav#videoNav {
    width: 10em;
    position: fixed;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0.25em;
  }
  nav#navigation {
    right: 0;
    z-index: 8000;
  }
  nav#videoNav {
    right: 11em;
    z-index: 8000;
    background-color: #340449;
  }
  button#menuToggle,
  button#videoMenuToggle {
    display: block;
    color: #FFF;
    background-color: transparent;
    border: none;
    font-size: 1.1em;
    font-weight: bold;
    width: 9em;
    margin: 0 auto;
    text-decoration: none;
  }
  button#menuToggle[aria-expanded="true"],
  button#videoMenuToggle[aria-expanded="true"] {
    text-decoration: underline;
  }
  #navigation ul,
  nav#videoNav ul {
    display: none;
    margin-top: 1em;
  }
  #navigation ul li,
  #videoNav ul li {
    display: block;
    float: none;
  }
  #navigation li a,
  #videoNav li a {
    font-size: 1.1em;
    background-color: transparent;
    color: #FFF;
    border-left: none;
    display: table-cell;
    padding: 0.25em 20px;
  }

	/* change site name */
	div#site-slogan {
  	bottom: 0;
    font-size: 1em;
    left: 120px;
    top: 20px;
    position: absolute;
    width: 12em;
  }

  /* move right column beneath video player */
  div#playerDiv {
    float: none;
    margin: 0 auto;
  }
  div#videoMeta {
    width: 100%;
  }

  /* Other changes */
  #search {
    min-height: 0;
  }
  #search form {
    padding-top: 0;
  }
  main {
    padding: 1em;
  }
  main h1 {
    text-align: center;
  }
  main h2 {
    margin-top: 0;
  }
  #videoList ul {
    padding-left: 0;
  }
}
@media only screen and (max-width: 900px),
 (min-device-width: 320px) and (max-device-width: 568px),
 (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
 (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait),
 (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
  /* responsive design for all narrow-width OR (small-screen devices with orientation = portrait) */
	/* change menu style & hide it; show toggle button in its place */
  nav#navigation,
  nav#videoNav {
    width: 10em;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0.25em;
  }
  nav#navigation {
    right: 0;
    z-index: 8000;
  }
  nav#videoNav {
    right: 11em;
    z-index: 8000;
    background-color: #340449;
  }
  button#menuToggle,
  button#videoMenuToggle {
    display: block;
    color: #FFF;
    background-color: transparent;
    border: none;
    font-size: 1.1em;
    font-weight: bold;
    width: 9em;
    margin: 0 auto;
    text-decoration: none;
  }
  button#menuToggle[aria-expanded="true"],
  button#videoMenuToggle[aria-expanded="true"] {
    text-decoration: underline;
  }
  #navigation ul,
  nav#videoNav ul {
    display: none;
    margin-top: 1em;
  }
  #navigation ul li,
  #videoNav ul li {
    display: block;
    float: none;
  }
  #navigation li a,
  #videoNav li a {
    font-size: 1.1em;
    background-color: transparent;
    color: #FFF;
    border-left: none;
    display: table-cell;
    padding: 0.25em 20px;
  }

	/* change site name */
	div#site-slogan {
  	bottom: 0;
    font-size: 1em;
    left: 120px;
    top: 20px;
    position: absolute;
    width: 12em;
  }

  /* move right column beneath video player */
  div#playerDiv {
    float: none;
    margin: 0 auto;
  }
  div#videoMeta {
    width: 100%;
  }

  /* Other changes */
  #search {
    min-height: 0;
  }
  #search form {
    padding-top: 0;
  }
  main {
    padding: 1em;
  }
  main h1 {
    text-align: center;
  }
  main h2 {
    margin-top: 0;
  }
  #videoList ul {
    padding-left: 0;
  }
}
