@font-face {
  font-family: 'Sansation';
  src: url('Sansation_Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Sansation';
  src: url('Sansation_Bold.ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'ArchitectsDaughter';
  src: url('ArchitectsDaughter.ttf');
  font-weight: normal;
  font-style: normal;
}

html {}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
  font-family: 'Sansation', Arial, Helvetica, sans-serif;
  font-size:18px;
  line-height:130%;
  background: url("background.png") repeat scroll 0% 0%;
}

body#demo-page{
  background: none;
}

#embed_player{
  margin-top: 50px;
}

header{
  background-color:#5C7069;
  height:90px;
}

a img{
border:0;
}

.nav ul, .nav-small ul, #top ul{
  list-style: none;
}

.nav ul li, .nav-small ul li, #top ul li{
  float: left;
}

.nav ul li a{
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-transform:capitalize;
  display:block;  /* IE6, IE7 line height fix */
  padding-bottom:35px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:32px;
  background-color:transparent;
  margin-top:0px;
  margin-right:0px;
  text-decoration:none;
  border-left: 1px dotted white;
  /*outline: thin dashed;*/
}

.nav ul li a#sign-in{
  border-right: 1px dotted white;
  margin-left: 200px;
}

.nav ul li a#link-contact{
  border-right: 1px dotted white;
}

.nav ul li a:hover{
  color: #DBDBDB;
}

.nav ul a.selected{
  border: none;
  outline: solid thick;
  background-color: #61777D;
}

.nav-small ul li a, #top ul li a{
  font-size: 14px;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: bold;
  text-decoration: none;
  color: #666666;
}

.nav-small ul li a:hover{
  color:#8C8C8C;
}

#top ul li a{
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: normal;
  color: #08395C;
}

#top ul li a:hover{
  color: #0997fC;
}

.logo{
  margin-left:60px;
  margin-top: 20px;
  margin-right: 25px;
  float: left;
}

.logo-small{
  float:left;
  margin-left: 50px;
  margin-right: 10px;
  margin-top: -5px;
}

#top{
   width:100%;
   background-color:#dc8;
   height:50px;
   font-size: 14px;
}

#header-col-left{
  float:left;
  margin-left:5%;
}

#header-col-right{
  float:right;
  margin-right: 5%;
  /*padding-top: 10px;*/
}

#main {
  min-height:700px; /* for modern browsers */
  height:auto !important; /* for modern browsers */
  height:700px; /* for IE5.x and IE6 */
  margin-left: 10%;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:50px;
}

#main-content{
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top right, #B5F2FB 0%, #00D2FB 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top right, #B5F2FB 0%, #00D2FB 100%);
  /* Opera */
  background-image: -o-linear-gradient(top right, #B5F2FB 0%, #00D2FB 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #B5F2FB), color-stop(1, #00D2FB));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top right, #B5F2FB 0%, #00D2FB 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom left, #B5F2FB 0%, #00D2FB 100%);
  width:800px;
  height:750px;
  margin-left: 15%;
  margin-top:30px;
  margin-bottom:50px;
}

#main-content .italic{
  font-family: 'ArchitectsDaughter';
  line-height: 110%;
}

#main-content .title{
  font-size:40px;
  text-align: center;
  padding:10px;
  color: #A6242F;
}

#main-content #explanation{
  width:90%;
  font-size: 20px;
  margin-left: 5%;
  padding-top: 10px;
}

#main-content #email-capture{
  width:90%;
  margin-left:5%;
}

#main-content table{
  margin-top:30px;
  margin-bottom: 30px;
}

#main-content #email-capture label{
  font-size:22px;
  font-weight: bold;
}

#main-content input#email{
  height:40px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-size: 23px;
padding-left: 5px;
}

#main-content input#submit{
}

#email-capture td.col1{
  width:80px;
}

#email-capture td.col2{
  width:410px;
}

.button {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background-color:#ededed;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  border:1px solid #666666;
  display:inline-block;
  color: #666666;
  font-family:arial;
  font-size:15px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
  background-color:#dfdfdf;
}.classname:active {
  position:relative;
  top:1px;
}
.button a {text-decoration:none;}

.button:hover{
  color: black;
}

.button-small{
  font-size:13px;
  padding:4px 10px;
}

#get-started{
  margin-top:20px;
  float:right;
  background-color:#D98032;
  color:white;
  font-size:20px;
  font-weight:normal;
  height:24px;
  text-shadow:none;
  padding:10px 24px;
}

#get-started:hover{
  background-color:#D95D30;
}

footer{
  clear:both;
  font-size:12px;
  background-color:#C4B98A;
  height:55px;
  padding-top:5px;
  margin-top:25px;
}

#footer-col-left{
  /*float:left;*/
  margin-left:5%;
}

#footer-col-right{
  float:right;
  margin-right: 5%;
}

#tagline, #how-it-works, #benefits, #features-overview, #automated-interviews, #auto_interview{
  height:auto !important; /* for modern browsers */
  width:900px;
}

#tagline{
  border: 1px solid #DBDBDB;
  min-height:682px; /* for modern browsers */
  height:682px; /* for IE5.x and IE6 */
  margin-top: 20px;
  font-size: 45px;
  background-color: #F5F5F5;
  background: url("blackboard.jpg")
}

#auto_interview{
  padding-top:40px;
  padding-bottom:40px;
  font-size:40px;
  /*color:#666666;*/
  line-height:120%;
}

#auto_interview span{
  text-align:center;
  display:inline-block;
}


#how-it-works{
  border-bottom: 1px solid #DBDBDB;
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
  min-height:500px; /* for modern browsers */
  height:500px; /* for IE5.x and IE6 */
  position: relative;
  background-color: white;
}

#benefits{
  border-bottom: 1px solid #DBDBDB;
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
  min-height:150px; /* for modern browsers */
  height:150px; /* for IE5.x and IE6 */
  background-color: #F5F5F5;
}

/*---------FEATURES PAGE-----------*/

/* Features Overview */

#features-overview{
  border: 1px solid #DBDBDB;
  margin-top: 20px;
}

#features-overview .feature-col-left{
  width: 50%;
  margin-left: 30px;
  float: left;
}

#features-overview .feature-col-right{
  margin-left: 30px;
}

#features-overview .feature-line-wrapper{
  margin-top: 25px;
  margin-bottom: 25px;
}

#features-overview .feature-line-wrapper span{
  padding-left: 40px;
  line-height: 50px;
}

#features-overview .feature-line-wrapper img{
  float: left;
  vertical-align: middle;
}

/* Features Detail */


.each-feature{
  padding:20px 0;
  border-bottom: 1px solid #DBDBDB;
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
  width: 900px;
  font-size: 16px;
}

.background-white{
  background-color: white;
}

.background-grey{
  background-color: #F5F5F5;
}

.image-style-1{
  margin-left: 90px;
  float: left;
  vertical-align: middle;
}

.image-style-2{
  float: left;
  margin-left: 20px;
}

.span-style-1{
  display: block;
  margin-left: 290px;
  width: 540px;
}

.span-style-2{
  display: block;
  float: left;
  margin-left: 90px;
  width: 540px;
}

.span-style-3{
  display: block;
  padding-left: 140px;
  width: 300px;
}

.span-style-4{
  display: block;
  padding-left: 590px;
  padding-right: 10px;
}

.features .column-left{
  float: left;
  width: 50%;
}

/*Image Heights for Features */
#interview-image-large, #recording-image-large, #recommend-image-large{
  margin-top: 35px;
}

#question-image-large, #speaking-image-large, #invitation-image-large{
  margin-top: 10px;
}

#writing-image-large, #dashboard-image-large{
  margin-top: -5px;
}

span#tagline-content-1, span#tagline-content-2{
  display: block;
  color: #D6D6D6;
  width: 570px;
  line-height: 120%;
}

span#tagline-content-1{
  margin-top: 140px;
  margin-left: 140px;
}

span#tagline-content-2{
  margin-top: 30px;
  margin-left: 140px;
  font-size: 30px;
}

img#files{
  margin-left: 180px;
  margin-top: 50px;
  float: left;
}

img#telephone{
  margin-left: 140px;
  margin-top: 55px;
  float: left;
}

img#candidates{
  margin-left: 140px;
  margin-top: 45px;
}

#how-it-works span {
  font-size: 35px;
  display:block;
  margin-left: 50px;
  padding-top: 35px;
  color:#666666;
}

img#how_it_works_image{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top:-180px;
  margin-left:-400px;
}

#benefits table{
  width:100%;
}

#benefits table td{
  vertical-align: middle;
  height: 185px;
  width: 50%;
}

#benefits table td.c1{
  border-bottom: solid 1px #DBDBDB;
  border-right: solid 1px #DBDBDB;
}

#benefits table td.c2{
  border-bottom: solid 1px #DBDBDB;
}

#benefits table td.c3{
  border-right: solid 1px #DBDBDB;
}

#benefits img#efficiency-image{
  margin-left: 50px;
  margin-right: 10px;
  float: left;
}

#benefits img#effective-image{
  margin-left: 40px;
  margin-right: 10px;
  margin-top: 15px;
  float: left;
}

#benefits img#collaboration-image{
  margin-left: 65px;
  margin-right: 10px;
  margin-top: 15px;
  float: left;
}

#benefits img#focus-image{
  margin-left: 50px;
  margin-right: 10px;
  margin-top: 15px;
  float: left;
}

#benefits table span.title{
  display: block;
  margin-left: 200px;
  font-size: 20px;
}

#benefits table span.description{
  display: block;
  margin-left: 200px;
  margin-top: 15px;
  padding-right: 10px;
}

.clear{
  clear: both;
}

#question-list{
  padding:20px 0;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  border-left: 1px solid #DBDBDB;
  border-right: 1px solid #DBDBDB;
  width: 900px;
  font-size: 16px;
  margin-top: 25px;
}

#question-list ul{
  list-style: none;
}

#question-list ul a{
  text-decoration: none;
  color: #666666;
}

#question-list ul a:hover{
  color: red;
}

#question-list h3{
   margin-left: 25px;
   color: #08395C;
}

.each-question{
    padding:20px 20px;
    border-bottom: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    border-right: 1px solid #DBDBDB;
    width: 860px;
    font-size: 14px;
  }

  .each-question a{
    font-weight: bold;
    font-size: 16px;
    color: #08395C;
  }

  #question-1 span{
    display: inline-block;
    margin-left: 20px;
  }

  #contact-page {
  min-height:500px; /* for modern browsers */
  height:auto !important; /* for modern browsers */
  height:500px; /* for IE5.x and IE6 */
  margin-left: auto;
  margin-right: auto;
  margin-bottom:50px;
  width: 1100px;
  margin-top: 75px;
}

  #contact-image{
    border: 1px solid #DBDBDB;
    min-height:560px; /* for modern browsers */
    height:600px; /* for IE5.x and IE6 */
    width: 550px;
    font-size: 45px;
    background-color: #F5F5F5;
    background: url("phone_real.jpg");
    float:left;
  }

  #contact-details{
    border: 1px solid grey;
    min-height:560px; /* for modern browsers */
    height:560px; /* for IE5.x and IE6 */
    width: 440px;
    margin-left: 600px;
    padding:20px 30px;
    font-size: 16px;
  }

  #contact-details h2{
    margin-top: 0;
  }

  #contact-details input{
    height: 30px;
    font-size: 16px;
  }

  #contact-details select{
    height: 30px;
    font-size: 15px;
  }

  #pricing-page{
    min-height:400px; /* for modern browsers */
    height:auto !important; /* for modern browsers */
    height:400px; /* for IE5.x and IE6 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom:50px;
    width: 1000px;
    margin-top: 75px;
  }

#pricing-page .col1, #pricing-page .col2, #pricing-page .col3{
  float: left;
  padding:10px;
  border: 1px solid grey;
  width: 280px;
  height: 400px;
}

#pricing-page .col2, #pricing-page .col3{
  margin-left: 40px;
}

#about-ampleo{
  font-size: 25px;
  font-weight: bold;
  margin-left: 50px;
  margin-top: 10px;
}

#about-ampleo span#one{
  color: #666666;
}

 #about-ampleo span#two{
  color: #08395c;
}

.about-page{
  font-size: 16px;
}

.about-page h3{
  margin:none;
  padding: none;
}

#our-approach, #our-principles, #competition{
  padding: 20px;
  line-height: 120%;
}

#about-top{
  margin-top: 40px;
  height: 300px;
  font-size: 16px;
}

#about-image{
  padding-top: 20px;
  float: left;
}

#about-image img{
  margin-left: 25px;
}

#about-text{
  margin-left: 475px;
  padding:20px 40px 0 0;
}

#about-text .top-line{
  font-size: 18px;
}

.approach-container img{
  float: left;
  margin-left: 55px;
}

.approach-container img#technology{
  margin-top: 20px;
}

.approach-container img#innovation{
  margin-top: 60px;
}

.approach-container{
  margin-top: 40px;
}

.approach-container span.approach-detail{
  display: block;
  margin-left: 200px;
  width:670px;
}

#principle-one{
  width:265px;
  float: left;
  padding: 0 20px;
  text-align: center;
}

#principle-two{
  width: 265px;
  display: inline-block;
  padding: 0 20px;
  text-align: center;
}

#principle-three{
  float: right;
  width:265px ;
  padding: 0 20px;
  text-align: center;
}

#competition{
  padding: 20px 40px;
}

.legal-content{
  font-size: 16px;
  background-color: #F5F5F5;
  padding: 30px;
  margin-top: 40px;
}

#pricing-beta{
  width: 860px;
  background-color: #F5F5F5;
  /*background-image: linear-gradient(to left bottom, rgb(181, 242, 251) 0%, rgb(0, 210, 251) 100%);*/
  padding: 50px;
}

#pricing-beta .italic{
  font-family: 'ArchitectsDaughter';
  line-height: 130%;
}

#pricing-beta #title{
  font-size:35px;
  text-align: center;
  padding:10px;
  color: #A6242F;
}

#pricing-beta #title img{
  float: left;
}

#pricing-beta #title span{
  line-height: 85px;
}

#pricing-beta #description{
  font-size: 28px;
  color: #A6242F;
}

#pricing-beta #description .benefit{
  margin-left: 45px;
  margin-top: 15px;
}

#pricing-beta #description .benefit img{
  float: left;
  margin-right: 30px;
}

#pricing-beta #description .benefit span{
  line-height: 52px;
}

#pricing-info{
  margin-left: 50px;
  margin-top: 40px;
  width: 90%;
}

#pricing-info-title{
  font-size: 22px;
  padding:10px;
  color: #A6242F;
}

#pricing-info table{
  margin-top: 10px;
  font-size: 15px;
  border-collapse: collapse;
  width: 100%;
}

#pricing-info table td{
  border: 1px solid white;
  padding:12px 8px;
}

#pricing-info table td.packets{
  text-align: center;
  width: 130px;
}

#pricing-info table tr.highlight td{
  border-top: 3px solid;
  border-bottom: 3px solid;
}

#pricing-info table tr.highlight td.end-left{
  border-left: 3px solid;
}

#pricing-info table tr.highlight td.end-right{
  border-right: 3px solid;
}

#pricing-info table tr.header td{
  font-weight: bold;
  background-color: #083A5E;
  color: white;
}

#pricing-info table tr.odd td{
  background-color: #E9EDF4;
}

#pricing-info table tr.even td{
  background-color: #D0D8E8;
}

#pricing-info table .real{
  text-decoration: line-through;
}
#pricing-info table .discount{
  font-weight: bold;
  color: red;
}

#pricing-info #other-benefits{
  margin-top: 20px;
  text-align: center;
  width: 90%;
  padding: 10px;
}

#pricing-info #other-benefits span#plus{
  font-weight: bold;
  font-size: 45px;
}

#pricing-info #other-benefits span#other-benefits-highlight{
  font-weight: bold;
  color: red;
}

#pricing-beta #pricing-contact{
  margin-left: 50px;
  margin-top: 40px;
}

#pricing-beta #pricing-contact .title{
  font-size: 22px;
  color: #A6242F;
  line-height: 120%;
}

#pricing-beta #pricing-contact .form-field{
  margin-top: 15px;
  font-size: 16px;
  margin-left: 35px;
}

#pricing-beta #pricing-contact .form-field input{
  font-size: 18px;
}

#pricing-beta #pricing-contact .form-field input#submit{
  font-size: 18px;
  width: 110px;
}

/**********************************************************/
/*************************TOUR**************************/

#tour-1{
  width: 900px;
  padding: 30px;
  border: 1px solid grey;
}

#tour-1 p{
  margin-bottom:30px;
}

#tour-1 label{
  font-weight: bold;
}

#tour-1 input{
  height: 35px;
  font-size: 16px;
}

#tour-1 form, #name-capture{
  margin-top: 10px;
  margin-left:50px;
}

#progress{
  font-weight: bold;
  margin-top: 15px;
  float: right;
  margin-bottom: 5px;
  margin-right: 15px;
}

#tour-2-main-content{
  border: 1px solid grey;
  margin-left: auto;
  margin-right: auto;
  width: 900px;
  padding:30px;
}

#candidate-text-interview{
  font-size: 16px;
  width: 90%;
}

#candidate-text-interview .question {
    border-bottom-color: #BFBFBF;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-top: 50px;
    padding-bottom: 25px;
}

.questions-left-col {
    float: left;
    font-style: italic;
    font-weight: bold;
    width: 150px;
}

.questions-right-col {
    margin-left: 150px;
    max-width: 500px;
}

#candidate-text-interview #answer-submit{
  border-bottom: none;
}

#start-interview-content {
  font-size: 16px;
  width: 85%;
  margin-left:50px;
}

#process-description {
  margin-top: 50px;
}

#call-me label{
  font-weight: bold;
}

#call-me input{
  height: 35px;
}

#call-me input#phone_number{
  font-size:20px;
}

#tour-4-main-content{
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}

#candidate-stats table {
  width: 90%;
  font-size: 15px;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 30px;
}

#candidate-stats table td {
  padding: 7px 0px 5px 7px;
  border: 1px solid white;
}

#candidate-stats td.col1, #candidate-stats td.col4 {
  width: 200px;
}

#candidate-stats td.dynamic{
  font-weight:bold;
}

.green{
  background-color: rgb(145, 233, 0) !important;
}

.orange {
    background-color: rgb(229, 210, 94) !important;
}

#candidate-stats td.col1, #candidate-stats td.col2, #candidate-stats td.col4, #candidate-stats td.col5 {
  background-color: rgb(155, 188, 177);
}

#candidate-stats td.col3{
  border:none !important;
}

#candidate-actions {
  margin-top: 20px;
}

#candidate-detail {
    background-color: #F5F5F5;
    height: auto !important;
    margin-top: 40px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 10px;
    width: 100%;
}

#candidate-detail-left {
    float: left;
    margin-right: 3%;
    width: 56%;
}

#candidate-detail-right {
    float: left;
    width: 39%;
}

.candidate-detail-section-header {
    background-color: #747C7A;
    color: white;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 10px;
    width: 100%;
}

#candidate-detail-left table, #candidate-detail-right table {
    font-size: 15px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

#candidate-detail-left table tr.answer-content, #candidate-detail-right table tr.answer-content {
    border-bottom-color: #747C7A;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

#candidate-detail-left table tr.answer-content {
    color: #0997FC;
}

#candidate-detail-left table td, #candidate-detail-right table td {
    padding-bottom: 8px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 8px;
}

#candidate-detail-left table td.col1, #candidate-detail-right table td.col1{
    width:80px;
    vertical-align: top;
}

#candidate-detail-left table, #candidate-detail-right table {
    font-size: 15px;
    width: 100%;
}

#recommended-friends, #candidate-references {
    font-size: 15px;
    margin-top: 30px;
}

#candidate-references .each-reference {
    margin-top: 20px;
    padding-left: 10px;
}

#candidate-references .references-field .references-left {
    float: left;
    font-weight: bold;
}

#candidate-references .references-field .references-right {
    margin-left: 100px;
}

#recommended-friends #list {
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 0;
    padding-top: 10px;
}

.tour-section-explanation{
    background-color: rgb(247, 153, 146);
    display: inline-block;
    font-size: 15px;
    font-style: italic;
    margin-top:10px;
    margin-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    width: 98%;
}

#tour-guide{
  width:900px;
  margin-top:25px;
  padding:30px;
  border: 1px solid grey;
  margin-bottom:30px;
}

.guide-tagline span{
  font-size:30px;
  font-weight:bold;
  line-height:90px;
}

.guide-tagline img{
  float: left;
  margin-right:30px;
}

#tour-guide span.sub{
  font-size:20px;
  padding-top:20px;
  display:inline-block;
}

img.tour-bus{
  margin-right:10px;
  vertical-align:middle;
}

a#get-started span{
  line-height:30px;
}

.tour-instructions{
  padding:30px;
  width:900px;
  border: 1px solid grey;
  margin-bottom:30px;
  background-color:#F2C074;
}

.tour-instructions img{
  vertical-align:middle;
  float:left;
}

.tour-instructions span{
  display:inline-block;
  margin-left:70px;
  width:700px;
  margin-top:10px;
}

.take-the-tour{
  width:900px;
}

#javascript-error{
  margin-top: 10px;
  color: red;
}


/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.jplayer.org
 *
 * Skin Name: Blue Monday
 *
 * Copyright (c) 2010-2012 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Silvia Benvenuti
 * Skin Version: 4.2 (jPlayer 2.2.0)
 * Date: 22nd October 2012
 */

div.jp-audio,
div.jp-audio-stream,
div.jp-video {

  /* Edit the font-size to counteract inherited font sizing.
   * Eg. 1.25em = 1 / 0.8em
   */

  font-size:0.9em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */

  font-family:Verdana, Arial, sans-serif;
  line-height:1.6;
  color: #666;
  border:1px solid #009be3;
  background-color:#eee;
}
div.jp-audio {
  width:100%;
  margin:20px 0 15px 0;
}
div.jp-audio-stream {
  width:182px;
}
div.jp-video-270p {
  width:480px;
}
div.jp-video-360p {
  width:640px;
}
div.jp-video-full {
  /* Rules for IE6 (full-screen) */
  width:480px;
  height:270px;
  /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
  position:static !important; position:relative
}

/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */
div.jp-video-full div div {
  z-index:1000;
}

div.jp-video-full div.jp-jplayer {
  top: 0;
  left: 0;
  position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
  overflow: hidden;
}

div.jp-video-full div.jp-gui {
  position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  z-index:1001; /* 1 layer above the others. */
}

div.jp-video-full div.jp-interface {
  position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
  bottom: 0;
  left: 0;
}

div.jp-interface {
  position: relative;
  background-color:#eee;
  width:100%;
}

div.jp-audio div.jp-type-single div.jp-interface {
  height:80px;
}
div.jp-audio div.jp-type-playlist div.jp-interface {
  height:80px;
}

div.jp-audio-stream div.jp-type-single div.jp-interface {
  height:80px;
}

div.jp-video div.jp-interface {
  border-top:1px solid #009be3;
}

/* @group CONTROLS */

div.jp-controls-holder {
  clear: both;
  width:440px;
  margin:0 auto;
  position: relative;
  overflow:hidden;
  top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */
}

div.jp-interface ul.jp-controls {
  list-style-type:none;
  margin:0;
  padding: 0;
  overflow:hidden;
}

div.jp-audio ul.jp-controls {
  width: 380px;
  padding:20px 20px 0 20px;
}

div.jp-audio-stream ul.jp-controls {
  width: 142px;
  padding:20px 20px 0 20px;
}

div.jp-video div.jp-type-single ul.jp-controls {
  width: 78px;
  margin-left: 200px;
}

div.jp-video div.jp-type-playlist ul.jp-controls {
  width: 134px;
  margin-left: 172px;
}
div.jp-video ul.jp-controls,
div.jp-interface ul.jp-controls li {
  display:inline;
  float: left;
}

div.jp-interface ul.jp-controls a {
  display:block;
  overflow:hidden;
  text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
  width:40px;
  height:40px;
}

a.jp-play {
  background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
}
a.jp-play:hover {
  background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
}
a.jp-pause {
  background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;
  /*display: none;*/
}
a.jp-pause:hover {
  background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
}

a.jp-stop, a.jp-previous, a.jp-next {
  width:28px;
  height:28px;
  margin-top:6px;
}

a.jp-stop {
  background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
  margin-left:10px;
}

a.jp-stop:hover {
  background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;
}

a.jp-previous {
  background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
}
a.jp-previous:hover {
  background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;
}

a.jp-next {
  background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
}
a.jp-next:hover {
  background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
}

/* @end */

/* @group progress bar */

div.jp-progress {
  overflow:hidden;
  background-color: #ddd;
}
div.jp-audio div.jp-progress {
  position: absolute;
  top:32px;
  height:15px;
}
div.jp-audio div.jp-type-single div.jp-progress {
  left:110px;
  width:156px;
}
div.jp-audio div.jp-type-playlist div.jp-progress {
  left:166px;
  width:130px;
}
div.jp-video div.jp-progress {
  top:0px;
  left:0px;
  width:100%;
  height:10px;
}
div.jp-seek-bar {
  background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
  width:0px;
  height:100%;
  cursor: pointer;
}
div.jp-play-bar {
  background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
  width:0px;
  height:100%;
}

/* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg {
  background: url("jplayer.blue.monday.seeking.gif");
}

/* @end */

/* @group volume controls */


a.jp-mute,
a.jp-unmute,
a.jp-volume-max {
  width:18px;
  height:15px;
  margin-top:12px;
}

div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
  margin-left: 185px;
}
div.jp-audio div.jp-type-playlist a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute {
  margin-left: 154px;
}

div.jp-audio-stream div.jp-type-single a.jp-mute,
div.jp-audio-stream div.jp-type-single a.jp-unmute {
  margin-left:10px;
}

div.jp-audio a.jp-volume-max,
div.jp-audio-stream a.jp-volume-max {
  margin-left: 56px;
}

div.jp-video a.jp-mute,
div.jp-video a.jp-unmute,
div.jp-video a.jp-volume-max {
  position: absolute;
  top:12px;
  margin-top:0;
}

div.jp-video a.jp-mute,
div.jp-video a.jp-unmute {
  left: 50px;
}

div.jp-video a.jp-volume-max {
  left: 134px;
}

a.jp-mute {
  background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
}
a.jp-mute:hover {
  background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
}
a.jp-unmute {
  background: url("jplayer.blue.monday.jpg") -60px -170px no-repeat;

}
a.jp-unmute:hover {
  background: url("jplayer.blue.monday.jpg") -79px -170px no-repeat;
}
a.jp-volume-max {
  background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;
}
a.jp-volume-max:hover {
  background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
}

div.jp-volume-bar {
  position: absolute;
  overflow:hidden;
  background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;
  width:46px;
  height:5px;
  cursor: pointer;
}
div.jp-audio div.jp-volume-bar {
  top:37px;
  left:300px;
}
div.jp-audio-stream div.jp-volume-bar {
  top:37px;
  left:92px;
}
div.jp-video div.jp-volume-bar {
  top:17px;
  left:72px;
}
div.jp-volume-bar-value {
  background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
  width:0px;
  height:5px;
}

/* @end */

/* @group current time and duration */

div.jp-audio div.jp-time-holder {
  position:absolute;
  top:50px;
}
div.jp-audio div.jp-type-single div.jp-time-holder {
  left:110px;
  width:156px;
}
div.jp-audio div.jp-type-playlist div.jp-time-holder {
  left:166px;
  width:130px;
}

div.jp-current-time,
div.jp-duration {
  width:60px;
  font-size:.64em;
  font-style:oblique;
}
div.jp-current-time {
  float: left;
  display:inline;
}
div.jp-duration {
  float: right;
  display:inline;
  text-align: right;
}

div.jp-video div.jp-current-time {
  margin-left:20px;
}
div.jp-video div.jp-duration {
  margin-right:20px;
}

/* @end */

/* @group playlist */

div.jp-title {
  font-weight:bold;
  text-align:center;
}

div.jp-title,
div.jp-playlist {
  width:100%;
  background-color:#ccc;
  border-top:1px solid #009be3;
}
div.jp-type-single div.jp-title,
div.jp-type-playlist div.jp-title,
div.jp-type-single div.jp-playlist {
  border-top:none;
}
div.jp-title ul,
div.jp-playlist ul {
  list-style-type:none;
  margin:0;
  padding:0 20px;
  font-size:.72em;
}

div.jp-title li {
  padding:5px 0;
  font-weight:bold;
}
div.jp-playlist li {
  padding:5px 0 4px 20px;
  border-bottom:1px solid #eee;
}

div.jp-playlist li div {
  display:inline;
}

/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */

div.jp-type-playlist div.jp-playlist li:last-child {
  padding:5px 0 5px 20px;
  border-bottom:none;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
  list-style-type:square;
  list-style-position:inside;
  padding-left:7px;
}
div.jp-type-playlist div.jp-playlist a {
  color: #333;
  text-decoration: none;
}
div.jp-type-playlist div.jp-playlist a:hover {
  color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
  color:#0d88c1;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
  float:right;
  display:inline;
  text-align:right;
  margin-right:10px;
  font-weight:bold;
  color:#666;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
  color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media {
  float:right;
  display:inline;
  text-align:right;
  margin-right:10px;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a{
  color:#666;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
  color:#0d88c1;
}
span.jp-artist {
  font-size:.8em;
  color:#666;
}

/* @end */

div.jp-video-play {
  width:100%;
  overflow:hidden; /* Important for nested negative margins to work in modern browsers */
  cursor:pointer;
  background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
}
div.jp-video-270p div.jp-video-play {
  margin-top:-270px;
  height:270px;
}
div.jp-video-360p div.jp-video-play {
  margin-top:-360px;
  height:360px;
}
div.jp-video-full div.jp-video-play {
  height:100%;
}
a.jp-video-play-icon {
  position:relative;
  display:block;
  width: 112px;
  height: 100px;

  margin-left:-56px;
  margin-top:-50px;
  left:50%;
  top:50%;

  background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat;
  text-indent:-9999px;
}
div.jp-video-play:hover a.jp-video-play-icon {
  background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
}

div.jp-jplayer audio,
div.jp-jplayer {
  width:0px;
  height:0px;
}

div.jp-jplayer {
  background-color: #000000;
}

/* @group TOGGLES */

/* The audio toggles are nested inside jp-time-holder */

ul.jp-toggles {
  list-style-type:none;
  padding:0;
  margin:0 auto;
  overflow:hidden;
}

div.jp-audio .jp-type-single ul.jp-toggles {
  width:25px;
}
div.jp-audio .jp-type-playlist ul.jp-toggles {
  width:55px;
  margin: 0;
  position: absolute;
  left: 325px;
  top: 50px;
}

div.jp-video ul.jp-toggles {
  margin-top:10px;
  width:100px;
}

ul.jp-toggles li {
  display:block;
  float:right;
}

ul.jp-toggles li a {
  display:block;
  width:25px;
  height:18px;
  text-indent:-9999px;
  line-height:100%; /* need this for IE6 */
}

a.jp-full-screen {
  background: url("jplayer.blue.monday.jpg") 0 -310px no-repeat;
  margin-left: 20px;
}

a.jp-full-screen:hover {
  background: url("jplayer.blue.monday.jpg") -30px -310px no-repeat;
}

a.jp-restore-screen {
  background: url("jplayer.blue.monday.jpg") -60px -310px no-repeat;
  margin-left: 20px;
}

a.jp-restore-screen:hover {
  background: url("jplayer.blue.monday.jpg") -90px -310px no-repeat;
}

a.jp-repeat {
  background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat;
}

a.jp-repeat:hover {
  background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat;
}

a.jp-repeat-off {
  background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat;
}

a.jp-repeat-off:hover {
  background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat;
}

a.jp-shuffle {
  background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat;
  margin-left: 5px;
}

a.jp-shuffle:hover {
  background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat;
}

a.jp-shuffle-off {
  background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat;
  margin-left: 5px;
}

a.jp-shuffle-off:hover {
  background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat;
}


/* @end */

/* @group NO SOLUTION error feedback */

.jp-no-solution {
  padding:5px;
  font-size:.8em;
  background-color:#eee;
  border:2px solid #009be3;
  color:#000;

}

.jp-no-solution a {
  color:#000;
}

.jp-no-solution span {
  font-size:1em;
  display:block;
  text-align:center;
  font-weight:bold;
}

/* @end */