/* ============================================================
  GLOBAL RESET CSS
============================================================ */
/**
 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
 * Richard Clark (http://richclarkdesign.com)
 * http://cssreset.com
 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    /*vertical-align:baseline;*/
    background:transparent;
}
body {
    line-height:1;
    overflow: hidden;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

label{
	font-weight: normal !important;
}

/* ============================================================
  EFFECT - BOOTSTRAP EDIT
============================================================ */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
  .container{
    width: 100%;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
  .container{
    width: 100%;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
  .container{
  }
}

body, video, .video-view{
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 0px;
  padding-left: 0px;
}

#question, #success, #fail{
  font-size: 1.2em;
  margin: 5px 0px;
  text-align: center;
  color: white;
}

#answer tr td label{
  font-size: 1.0em;
  color: white;
  cursor:pointer;
  text-align: center;
}

#answer tr td label:not(:first-of-type){
  padding-left: 35px;
}

.overlay{
  position: absolute;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.8);
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  border-radius: 10px;
}

.overlay .row{
	margin: 0px 10px;
}


/* ============================================================
  EFFECT - ICON BOUNCE IN
============================================================ */
#effect .overlay {
  top: 0;
  bottom: 0;
  /*opacity: 0;*/
}

#effect .img.hover .overlay {
  opacity: 1;
}
#effect .img.hover .overlay .expand {
  top: 10px;/*Edit Top title*/
  opacity: 1;
}

#effect .overlay .expand {
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.expand {
  display: block;
  position: absolute;
  z-index: 100;
  color: #fff;
}

#success,#fail{
  display: none;
}

#submit{
  text-align: center;
}

#error_font{
  color: #f00;
}

input[type="checkbox"], input[type="radio"]{
  cursor:pointer;
}


/* ============================================================
  ICON BOUNCE IN SUBMIT ANSWER
============================================================ */
a.btn {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  /*
  font: 20px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  */
  font-size: 0.9em;
  padding: 6px 25px;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);

  border-radius: .5em;
  -moz-border-radius: .5em;
  -webkit-border-radius: .5em; 

  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
a.btn:hover {
  color: white;
  text-decoration: none;
}
a.btn:active {
  position: relative;
  top: 1px;
}

a.submit {
  margin: 15px 0px;
  text-align: center;
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
a.submit:hover {
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
a.submit:active {
  color: #fcd3a5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

#question img.img-question-answer{
  max-width: 680px;
  max-height: 220px;
  margin: auto;
}

#answer img.img-question-answer{
  max-width: 480px;
  max-height: 300px;
  margin: auto;
  display: inline-block;
}

#question table,
#answer .table-answer table{
  display: inline-block;
}
#question table td,
#answer .table-answer table td{
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  color: white;
  text-align: center;
}
#answer .table-answer .answer-choice tr td label,
#answer .table-answer .answer-choice tr td{
	vertical-align: top;
	text-align: left;
	border:none;
	outline:none;
}

#answer .table-answer .answer-choice tr td{
	padding-top: 3px;
}
#answer .table-answer .answer-choice tr td:nth-child(1){
	padding: 4px 0px;
}
#answer .table-answer .answer-choice tr td:nth-child(2){
	padding-right: 5px;
}


/* ============================================================
  TABLE IN ANSWER
============================================================ */
#answer tr {
    padding: 0px;
    border: 0px solid #fff;
    color: #fff;
    text-align: left;
}
#answer tr>td {
    border: #c0c0c0;
    padding: 4px 10px;
}
.table-responsive {
  border: 0px solid #ddd;
  margin: 5px 0px;
}
input[type='checkbox'],
input[type='radio']{
  margin: 0px !important;
}

/* Class Custom */
.hl_red, .hl_green, .hl_yellow, .hl_blue, .hl_purple{
  padding: 0px 4px;
  margin: 0px -4px;
  border-radius: 2px;
  display:inline-block;
}
.hl_red{
  background: rgba(229, 0, 0, 1);
}
.hl_green{
  background: rgba(0, 229, 0, 1);
}
.hl_yellow{
  background: rgba(229, 229, 0, 1);
}
.hl_blue{
  background: rgba(0, 229, 229, 1);
}
.hl_purple{
  background: rgba(200, 0, 200, 1);
}
.font_red{
  color: rgba(229, 0, 0, 1);
}
.font_green{
  color: rgba(0, 229, 0, 1);
}
.font_yellow{
  color: rgba(229, 229, 0, 1);
}
.font_blue{
  color: rgba(0, 229, 229, 1);
}
.font_purple{
  color: rgba(200, 0, 200, 1);
}
.underline{
  text-decoration: underline;
}
.bold{
  font-weight: bold;
}
.italic {
  font-style: italic;
}

#success-content:before{
  content: "Great job! You are now ready to move on to the next section. \A Proceed to the Objective & Introduction section of this lesson, or work through \A the video again using the Start Over button.";
  white-space: pre;
}
#fail-content:before{
  content: "It looks like you could use some help, so a message will be sent to your teacher. \A Click on the Continue button below to try again.";
  white-space: pre;
}
.t {
   width:auto;
}
.f {
   width:auto;
}

.no_border, .no_border table, .no_border td, .no_border tr{
	border-style: none !important;
}