﻿/*Global jquery */
.field-validation-error
{
  color: Red;
  padding-left: 5px;
}
/* Disable X on jquery Dialog box */
.ui-dialog-titlebar-close
{
  display: none;
}

@charset "utf-8";
/************************************/
/*   MAIN CSS for VIDEOSELECT.COM   */
/*   Version: 1.0                   */
/*   Date: 09-18-2014               */
/*   Author: Jennifer Han           */
/************************************/

/*********************************************************/
/*                        RESETS                         */
/*********************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	outline: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	
/*********************************************************/
/*                      TYPOGRAPHY                       */
/*********************************************************/
/***** HEADERS *****/
h1, h2, h3, h4, h5 {
	font-family: "museo-sans", Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
}
h1, h2, h3 {
	letter-spacing:-1px;
}
h1{ 
	font-size: 2.5em;
}
h2 {
	color: #113660;
	font-size: 1.75em;
	margin-bottom: .5em;
}
h3 {
	color: #cb4300;
	font-size: 1.2em;
	line-height: 1.2em;
	margin-bottom: .2em;
}
h4 {
	color: #1d5698;
	font-size: 1em;
	line-height: 1.2em;
	margin-bottom: .8em;
}
h5 {
	font-size: 1em;
	margin-bottom: .8em;
}
/***** p *****/
body {
	color: #333;
	font-family: "museo-sans", Arial, sans-serif;
	font-style: normal;
}
p, ul, ol {
	font-family: "museo-sans", Arial, sans-serif;
	font-size: .9em; /* =15px */
	font-style: normal;
	font-weight: 300;
	line-height: 1.3em;
	margin-bottom: .8em;
}
footer, .foot-wraps {
	color: #555;
	font-size: .8em;
}
.bold {
	font-weight: 700;
}
/***** ul /li *****/
.bullet {
	padding: 0 .5em;
}
.desc li {
	font-size: 1em;
	list-style: none;
	margin-bottom: .3em;
}
.desc-secondary li {
	color: #555;
	float: left;
	font-size: .9em;
}
/***** a *****/
article a {
	color: #12b2da;
}
article a:hover {
	color: #28cff9;
}
article a:visited {
	color: #2193b0;
}
footer a, .foot-wraps a {
	color: #555;
}
footer a:hover, .foot-wraps a:hover {
	color: #888;
}
/***** buttons *****/
.btn {
	background: #10a2c6;
	border-top: 2px solid #51bbd5;
	border-right: none;
	border-bottom: none;
	border-left: none;
	color: #fff;
	font-size: .95em;
	font-weight: 500;
	padding: .5em;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
}
.scroll-btn-disabled {
	background: gainsboro;
	border-top: 2px solid gainsboro;
	border-right: none;
	border-bottom: none;
	border-left: none;
	color: #fff;
	font-size: 1.15em;
	font-weight: 500;
	padding: .5em;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
}
.scroll-btn {
	background: #10a2c6;
	border-top: 2px solid #51bbd5;
	border-right: none;
	border-bottom: none;
	border-left: none;
	color: #fff;
	font-size: 1.15em;
	font-weight: 500;
	padding: .5em;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
}
.btn:hover {
	color: #fff;
	background: #53dbfc;
}
.btn-back {
	float: left;
}
.btn-next {
	float: right;
}
.btn-download {
	background: url(../images/icon-file.png) left top no-repeat;
	display: block;
	height: 17px;
	line-height: 17px;
	padding-left: 17px;
}
.btn-download:hover {
	background-position: left bottom;
}
.btn-simple {
	color: #fff;
	font-size: .95em;
	font-weight: 500;
	padding: .5em;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
}
.btn-simple:hover {
	color: #eee;
}

.btn-menu {
    font-family: "museo-sans", Arial, sans-serif;
    color: #fff;
	font-size: 14px;
	font-weight: 500;
	padding: .2em;
	text-decoration: none;
    margin-left: 13px;
}

.btn-menu:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    zoom: 1;
}

#btn-home {
    background: url(../images/icon-home-normal.png) left center no-repeat;
    padding-left: 23px;
}
/*#btn-home:hover {
	background: url(../images/icon-home-hover.png) left center no-repeat;
}*/
#btn-record {
    background: url(../images/icon-record-normal.png) left center no-repeat;
    padding-left: 23px;
}
/*#btn-record:hover {
	background: url(../images/icon-record-hover.png) left center no-repeat;
}*/
#btn-logout {
    background: url(../images/icon-logout-normal.png) left center no-repeat;
    padding-left: 23px;
}
/*#btn-logout:hover {
	background: url(../images/icon-logout-hover.png) left center no-repeat;
}*/
#btn-help {
    background: url(../images/icon-help-normal.png) left center no-repeat;
    padding-left: 23px;
}
/*#btn-help:hover {
	background: url(../images/icon-help-hover.png) left center no-repeat;
}*/
.DeleteVideo {
    background: url(../images/icon-delete-normal.png) left center no-repeat;
    padding-left: 23px;
    padding-top: 2px;
}
.DeleteVideo:hover {
    background: url(../images/icon-delete-hover.png) left center no-repeat;    
}
.MobileDeleteVideo {
    background: url(../images/mobile/icon-delete.png) left center no-repeat;
    background-size: 15px 15px;
    padding-left: 17px;
}
/*********************************************************/
/*                       MAIN DIVS                       */
/*********************************************************/
#wrapper {
	width: 100%;
}
.wrapper {
	margin: 0 auto;
	width: 960px;
}
/***** HEADER *****/
header {
	background: url(../images/header-bkgd.jpg) left bottom repeat-x;
	margin-bottom: 20px;    
	/*padding-bottom: 30px;*/
}
.mobileHeader {
	background: url(../images/mobile/header-bkgd.jpg) left bottom repeat-x;
	/*margin-bottom: 20px;*/
    height: 50px;
    overflow: visible;
    background-color: white;
	/*padding-bottom: 30px;*/
}
#header-bl-logos {
	background: url(../images/div_logos.png) left no-repeat;
	float: right;
	height: 70px;
	width: 510px;
}
#logo-vs {
	/* background: url(../images/logo-vs.png) left top no-repeat; */
	float: left;
	height: 60px;
	margin-top: 8px;
	width: 240px;
}

#logo-vs img {
	max-width: 100%;
	max-height: 100%;
}


#TopMenu {
    background: none repeat scroll 0 0 white;
    margin: 5px 0 0;
    padding: 10px;
}

.WebsiteNavigation {
    background: none repeat scroll 0 0 white;
    display: inline;
    margin: 0;
    padding: 0;
}

.WebsiteNavigation li {
    display: inline;
    font-family: Arial,sans-serif;
    list-style-type: none;
    padding-left: 6px;
    padding-right: 6px;
}

.MobileHeaderImage {
    margin-top: 3px;
}

/***** MAIN CONTENT *****/
article {
	background: #eee;
	padding: 20px;
}
main {
	margin-bottom: 20px;
}
.video-desc section, .video-desc-old section, .video-desc-mobile section {
	border-bottom: 1px solid #c7c7c7;
}
.video-desc section.last-section, .video-desc-old section.last-section, .video-desc-mobile section.last-section {
	border-bottom: none;
	margin-bottom:0;
}
.desc {
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.Crop
{
    width: 100px;
    height: 98px;
    overflow: hidden;       
}

img.Crop
{
    border: 0; /* fix ie spacing between img tags */
    width: 133px;
    height: 100px;
    margin: 0 -16px;        
}

/***** FOOTER *****/
footer {
	border-top: 10px solid #10a2c6;
	padding: 15px 0;
}
footer p,
footer ul {
	width: 480px;
}
footer p {
	float: left;
}
footer ul {
	float: right;
  text-align:center
}
  footer li, .foot-wraps li {
    margin-left: 1.75em;
    float: right;
  }

    .foot-wraps li a {
      color: #555 !important;
    }

.foot-wraps p, .foot-wraps ul {
  float: left;
  display: block;
  overflow: hidden;
}

.mobileFooter {
	border-top: 5px solid #10a2c6;
    background-color: white;
    padding: 8px 0;
}
/***** COMMON STYLES *****/
article,
header,
header .wrapper,
main,
section ul,
.copy,
.links-list {
	display: block;
	overflow: hidden;
}
header h1,
header h2 {
	display: block;
	margin-bottom: 0;
}
header span {
	display: none;
	visibility: hidden;
}
p:last-child, 
ul:last-child, 
ol:last-child, 
article ul li:last-child,
article:last-child, 
article section:last-child {
	margin-bottom: 0;
}

/****** Pager **********/
*html .Pager
{
  display: inline;
}

.Pager
{   
  padding: 5px;
  display: inline-block;
  margin-top: 15px;  
}

.PageSelected 
{
  display: block;
  float: left;
  margin: 0 4px;
}

.PageSelected a
{      
  background: none repeat scroll 0 0 #4bdbff;
  text-decoration: none; 
  color: #ffffff;
  padding: 0.2em 0.4em;
  font-size: 14px;
  font-family: "museo-sans", Arial, Sans-Serif;    
}

.Page
{      
  display: block;
  float: left;
  margin: 0 4px;
}

.Page:hover
{      
  display: block;
  float: left;
  margin: 0 4px;
}

.Page a
{    
  background: none repeat scroll 0 0 #12b2da;
  text-decoration: none; 
  color: #ffffff;
  padding: 0.2em 0.4em;
  font-size: 14px;
  font-family: "museo-sans", Arial, Sans-Serif;
}

.Page a:hover
{  
  background: none repeat scroll 0 0 #4bdbff;
  cursor: pointer;
}

.Page a:visited {
    color: #ffffff;
}

.PageSelected a:visited {
    color: #ffffff;
}

.footer-links #ot-sdk-btn {
  background: none !important;
  border: none !important;
  color: #555 !important;
  padding: 0 !important;
  text-decoration: underline;
  /* font-family: "museo-sans", Arial, sans-serif !important; */
  font-size: 1.0em !important;
  /* font-weight: 300; */
  /* font-size: .8em !important; */
}

  .footer-links #ot-sdk-btn:hover {
    color: #888!important;
  }

/*Media Queries to format video player for Play.Mobile and PlayVid.Mobile views*/

/*Galaxy S4 portrait*/
@media only screen and (device-width: 1080px) and (orientation: portrait){
    #Player, #VideoPlayer {
        width: 390px !important;
        height: 240px !important;
    }
    .video-desc {
        width: 350px !important;
    }
}

/*iPhone 3,4,5 portrait*/
@media only screen and (min-device-width : 320px) and (max-device-width: 1000px) and (orientation: portrait){ 
    #Player, #VideoPlayer {
        width: 280px !important;
        height: 158px !important;
    }
    .video-desc {
        width: 240px !important;
    }
}

/*iPhone 6 portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: portrait){ 
    #Player, #VideoPlayer {
        width: 335px !important;
        height: 188px !important;
    }
    .video-desc {
        width: 295px !important;
    }
}

/*iPhone 6 Plus portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 1000px) and (orientation: portrait){ 
    #Player, #VideoPlayer {
        width: 374px !important;
        height: 210px !important;
    }
    .video-desc {
        width: 334px !important;
    }
}

/*Galaxy S5 portrait (default browser)*/
@media only screen and (min-device-width: 420px) and (max-device-width: 1000px) and (orientation: portrait){
    #Player, #VideoPlayer {
        width: 320px !important;
        height: 180px !important;
    }
    .video-desc {
        width: 280px !important;
    }
}

/*Galaxy S5 portrait, fixes initial startup problem*/
@media only screen and (device-height: 640px) and (max-device-width: 1000px) and (orientation: portrait){
    #Player, #VideoPlayer {
        width: 320px !important;
        height: 180px !important;
    }
    .video-desc {
        width: 280px !important;
    }
}

/*Galaxy S5 portrait (chrome)*/
@media only screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait){
    #Player, #VideoPlayer {
        width: 320px !important;
        height: 180px !important;
    }
    .video-desc {
        width: 280px !important;
    }
}

/*Galaxy S2 portrait (default browser)*/
/*@media only screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait){
    #Player, #VideoPlayer {
        width: 440px !important;
        height: 250px !important;
    }
    .video-desc {
        width: 400px !important;
    }
}*/

/*Galaxy S2 portrait (default browser)*/
@media only screen and (min-device-height: 800px)  and (max-device-width: 600px) and (orientation: portrait){
    #Player, #VideoPlayer {
        width: 440px !important;
        height: 250px !important;
    }
    .video-desc {
        width: 400px !important;
    }
}

/*Galaxy S2 portrait (chrome)*/
@media only screen and (device-width: 320px) and (device-height: 534px) and (orientation: portrait){
    #Player, #VideoPlayer {
        width: 280px !important;
        height: 158px !important;
    }
    .video-desc {
        width: 240px !important;
    }
}

/*iPad portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    #Player, #VideoPlayer {
        width: 728px !important;
        height: 410px !important;
    }
    .video-desc {
        width: 688px !important;
    }
}

/************************************************************************************************************/

/*iPhone 3,4 landscape*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
    #Player, #VideoPlayer {
        width: 440px !important;
        height: 220px !important;
    }
    .video-desc {
        width: 400px !important;
    }
}

/*iPhone 5 landscape*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (device-aspect-ratio: 40/71) and (orientation : landscape) { 
    #Player, #VideoPlayer {
        width: 528px !important;
        height: 220px !important;
    }
    .video-desc {
        width: 488px !important;
    }
}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape){ 
    #Player, #VideoPlayer {
        width: 627px !important;
        height: 320px !important;
    }
    .video-desc {
        width: 587px !important;
    }
}

/*iPhone 6 Plus landscape*/
@media only screen and (min-device-width: 414px) and  (max-device-width: 736px) and (orientation: landscape){ 
    #Player, #VideoPlayer {
        width: 696px !important;
        height: 350px !important;
    }
    .video-desc {
        width: 656px !important;
    }
}

/*iPad landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
    #Player, #VideoPlayer {
        width: 984px !important;
        height: 552px !important;
    }
    .video-desc {
        width: 944px !important;
    }
}

/*Galaxy S5 landscape*/
@media only screen and (device-height: 640px) and (orientation: landscape) {
    #Player, #VideoPlayer {
        width: 600px !important;
        height: 240px !important;
    }
    .video-desc {
        width: 560px !important;
    }
}

/*Galaxy S5 landscape (chrome)*/
@media only screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape){
    #Player, #VideoPlayer {
        width: 600px !important;
        height: 338px !important;
    }
    .video-desc {
        width: 560px !important;
    }
}

/*Galaxy S3 landscape*/
@media only screen and (device-height: 720px) and (orientation: landscape) {
    #Player, #VideoPlayer {
        width: 600px !important;
        height: 260px !important;
    }
    .video-desc {
        width: 560px !important;
    }
}

/*Galaxy S4 landscape*/
@media only screen and (device-height: 1920px) and (orientation: landscape) {
    #Player, #VideoPlayer {
        width: 730px !important;
        height: 300px !important;
    }
    .video-desc {
        width: 690px !important;
    }
}

/*Galaxy S2 landscape (default browser on browserstack)*/
@media only screen and (device-width: 533px) and (orientation: landscape) {
    #Player, #VideoPlayer {
        width: 493px !important;
        height: 240px !important;
    }
    .video-desc {
        width: 453px !important;
    }
}

/*Galaxy S2 landscape (default browser)*/
@media only screen and (device-height: 800px) and (orientation: landscape){
    #Player, #VideoPlayer {
        width: 760px !important;
        height: 428px !important;
    }
    .video-desc {
        width: 720px !important;
    }
}

/*Galaxy S2 landscape (chrome)*/
@media only screen and (device-height: 320px) and (device-width: 534px) and (orientation: landscape){
    #Player, #VideoPlayer {
        width: 494px !important;
        height: 240px !important;
    }
    .video-desc {
        width: 454px !important;
    }
}

.comment-link {
	background: url(../Images/icon-comment.png) left top no-repeat;
    line-height: 1em;
	padding-left: 24px;
}

p.mobile-video-error {
    font-weight: bold; 
    width: 280px;
}

/***********************************/
/* Style shortcuts */
.Cbfldb
{
    clear: both;
    float: left;
    display: block;
}
.Cbfl
{
    clear: both;
    float: left;
}
.Fldb
{
    float: left;
    display: block;
}
.Fl
{
    float: left;
}
.Fr
{
    float: right;
}
.Cb
{
    clear: both;
}
.Db
{
    display: block;
}
.Di
{
    display: inline;
}
.Dib
{
    display: inline-block;
}
.Dn
{
    display: none;
}
.FnB
{
    font-weight: bold;
}
.FnMed
{
    font-size: 14px;
}

.CenterItem
{
    text-align: center;
}
.Tal
{
    text-align: left;
}
.Tar
{
    text-align: right;
}
.Sf, .FnSm
{
    font-size: 10px;
}