/**
 * screen.css
 *
 * This is the main css document for the application for display on screen.
 *
 * @colordef		#0B486B; Blue (~~Text color~~)
 * @colordef		#0B4567; Blue light (gradient top)
 * @colordef		#093854; Blue dark (gradient bottom)
 * @colordef		#00142D; Blue border (gradient border)
 * @colordef		#083047; Blue innershadow (button innershadow)

 * @colordef		#FFB418; Yellow
 * @colordef		#FBC504; Yellow light (gradient top)
 * @colordef		#FFA12B; Yellow dark (gradient bottom)
 * @colordef		#DC9B00; Yellow border (gradient border)
 * @colordef		#D68029; Yellow innershadow (button innershadow)

 * @colordef		#A8DBA8; Green light (custom labels)
 * @colordef		#3B8686; Green dark (predefined labels)
 * @colordef		#79BD9A; Green light (gradient top)
 * @colordef		#3D8887; Green dark (gradient bottom)
 * @colordef		#0E4646; Green border (gradient border)
 * @colordef		#307776; Green header bottom border top (applied to header as border-bottom)
 * @colordef		#0E4646; Green header bottom border bottom (applied to hgroup as border-top)
 * @colordef		#3B8686; Green innershadow (nav text-shadow)

 * @colordef		#EEEEEE; Gray light (list-button hover)
 * @colordef		#CCCCCC; Gray medium-light (borders)
 * @colordef		#E0E0E0; Gray medium-dark (list-button active)
 * @colordef		#666666; Gray Dark (form and link text)

 *
 */

/**
 * Import
 *
 * @section			Import of global stylesheets
 */

@import url("reset.css");

.tbxDebug {
	width:100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Typography ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

html {
	-webkit-text-size-adjust: none;
}

body, input, button, .button, select {
	font-family: "Gudea", Helvetica, Arial, sans-serif;
	color:#0B486B;
}

body {
	font-size:1.5em;
}
input, button, .button, select {
	font-size:1em;
}

@media only screen and (max-width: 600px) {
	body { 
		font-size:1em;
	}
	ul.normalList li {
		background:transparent url('/_images/arrow-small.gif') no-repeat 0 0.2em !important;
	}
}

button, .button {
	font-weight:bold;
	font-size:1.4em;
}

h1 { font-size:1.4em; line-height:1.2em; font-weight:bold; }
.titleLogin h2, fieldset h3, p { font-size:1em; line-height:1.2em; font-weight:normal; }

h2 { font-size:1.3em; line-height:1.2em; font-weight:bold; }
h3 { font-size:1.2em; line-height:1.2em; font-weight:bold; }

ul.normalList, ol.normalList {
	margin:0 0 1.0em 0;
}
ul.normalList li, ol.normalList li {
	padding:0 0 0.5em 1.5em;
	background-color:transparent !important;
}
ul.normalList li {
	background:transparent url('/_images/arrow.gif') no-repeat 0 0.2em;
}

img.logos {
	width:100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Global Layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

html, body {
	height: 100% !important;
	width: 100%;
}
body {
	background:#EEEEEE url('/_images/bgBody.png');
}
form {
	min-width:320px;
	max-width:800px;

	min-height: 100%;

	/*min-height:120%;*/
	background:#FFFFFF;
	margin:0 auto 0 auto;
	overflow:hidden;
	-moz-box-shadow:    0 0 6px 2px #CCCCCC;
	-webkit-box-shadow: 0 0 6px 2px #CCCCCC;
	box-shadow:         0 0 6px 2px #CCCCCC;
	position:relative;
}

a {
	color:#666666;
}

/* ~~~~~~~~~~ Header ~~~~~~~~~~ */

.header {
	height:3.5em;
	text-align:center;
	border-bottom-style:solid;
	border-bottom-width:1px;
	position:relative;
	z-index:1;
	-moz-box-shadow:    0 0 10px 2px #999999;
	-webkit-box-shadow: 0 0 10px 2px #999999;
	box-shadow:         0 0 10px 2px #999999;
}
	.header img {
		margin:0.5em 1.8em;
		height:80%;
	}


/* ~~~~~~~~~~ Section ~~~~~~~~~~ */

.hgroup, fieldset, .content, .bottomLink, .dropDownCategories {
	padding-left:1.8em;
	padding-right:1.8em;
}
.hgroup, .bottomLink {
	padding-top:0.7em;
	padding-bottom:0.5em;
}
.content, fieldset, .dropDownCategories {
	padding-top:1.5em;
	padding-bottom:1.2em;
}

/* ~~~~~~~~~~ Section > Title ~~~~~~~~~~ */

.hgroup {
	background-color:#0B486B;
	color:#ffffff;
	border-top:solid 1px #0E4646;
	border-bottom:solid 1px #00142D;
}
.titleLogin {
	background-color:#ffffff;
	background-image:url('/_images/bgLogin.png');
	border-bottom:solid 1px #CCCCCC;
	color:#0B486B;
	padding-top:1.3em;
	padding-bottom:1.3em;
}
.titleLogin h3 {
	color:Red;
}

/* ~~~~~~~~~~ Section > Fieldset ~~~~~~~~~~ */

	legend {
		display:none;
	}
	label {
		display:block;
	}
	a.button {
		display:block;
		text-align:center;
		text-decoration:none;
		line-height:1.3em;
	}
	fieldset input, select, button, .button, .input-wrapper {
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		width:100%;
		display:block;
		background-color:#FFFFFF;
		color:#666666;
		margin:0 0 0.5em 0;
		padding:0.8em;
		border:solid 1px #A5B8C2;
		-moz-border-radius: 0.5em;
		-webkit-border-radius: 0.5em;
		border-radius: 0.5em;
		-moz-box-shadow:    inset 0 0 10px #CCCCCC;
		-webkit-box-shadow: inset 0 0 10px #CCCCCC;
		box-shadow:         inset 0 0 10px #CCCCCC;
		
	}
    .validation-message {
        float: right;
        margin: -1.2em 0.5em 0 0;
        color: red;
    }
    .validation-error {
        border-color: red;
    }
     .input-wrapper input {
        padding:0;
        margin:0;
		border: none;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
     }
	select {
		padding:0.78em 0.8em 0.75em 0.68em;
	}
	.checkboxList {
		display:block;
		padding:1.4em 0 2em 0;
		zoom:1;
	}
	.container:before, .container:after {
		content:"";
		display:table;
	}
	.container:after {
		clear:both;
	}
	.checkboxList label {
		margin:0; padding:0 0 0 10px;
		display:inline;
		float:left;
		line-height:18px;
	}
	.checkboxList input {
		width:20px; height:20px;
		float:left;
		margin:0; padding:0;
		border:inherit;
		
		-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: content-box;    /* Firefox, other Gecko */
		box-sizing: content-box;         /* Opera/IE 8+ */
		display:inherit;
		background-color:inherit;
		color:inherit;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
		-moz-box-shadow:    none;
		-webkit-box-shadow: none;
		box-shadow:         none;
	}
	#tbxEmail {
		/*text-transform:lowercase;*/
	}
	button, .button {
		border:outset 1px #666666;
		margin:0.8em 0 0.4em 0;
		padding:0.5em 0;
		cursor:pointer;
		-moz-border-radius: 0.4em;
		-webkit-border-radius: 0.4em;
		border-radius: 0.4em;
		-moz-box-shadow:    inset 0 0 15px #083047;
		-webkit-box-shadow: inset 0 0 15px #083047;
		box-shadow:         inset 0 0 15px #083047;
	}
	button:hover, .button:hover {
		-moz-box-shadow:    inset 0 0 15px #D68029;
		-webkit-box-shadow: inset 0 0 15px #D68029;
		box-shadow:         inset 0 0 15px #D68029;
	}
	button:active, button.selected, .button:active, .button.selected {
		border-style:inset !important;
		-moz-box-shadow:    inset 0 0 20px #D68029;
		-webkit-box-shadow: inset 0 0 20px #D68029;
		box-shadow:         inset 0 0 20px #D68029;
	}
	button.disabled, .button.disabled, button.disabled:hover, .button.disabled:hover, button.disabled:active, .button.disabled:active {
		background:#999999 !important;
		color:#CCCCCC;
		border-style:inset !important;
		border-color:#999999 !important;
		-moz-box-shadow:    inset 0 0 20px #666666;
		-webkit-box-shadow: inset 0 0 20px #666666;
		box-shadow:         inset 0 0 20px #666666;
		cursor:text;
		cursor:wait;
	}
	.disabled {
		opacity: .4;
	}
	
/* ~~~~~~~~~~ Section > ul ~~~~~~~~~~ */

.section {
	height: 100%;
}

.section ul li {
	background-color:#E0E0E0;
	/*word-wrap: break-word;*/
}
li.labelPredefined {
	background-color:#3B8686 !important;
}
li.labelCustom {
	background-color:#A8DBA8 !important;
}
	.section ul li a {
		text-decoration:none;
		display:block;
		padding:1.3em 5em 1.3em 1em;
		margin-left:0.8em;
		background-color:#FFFFFF;
		position:relative;
		border-bottom:solid 1px #CCCCCC;
	}
	.section ul li a.void {
		cursor:default;
		color:#999999;
	}
	.section ul li a.void:hover {
		background-color:#FFFFFF;
	}
	.section ul li a:hover {
		background-color:#EEEEEE;
	}
	.section ul li a:active {
		background-color:#E0E0E0;
	}
		img.icon {
			display:block;
			border:none; outline:none;
			overflow:hidden;
			position:absolute;
			width:1.5em; height:1.5em;
			right:1em; top:50%;
			margin:-0.75em 0 0 0;
		}
		img.iconPlay {
			width:1.8em; height:1.8em;
			right:0.9em; top:50%;
			margin:-0.9em 0 0 0;
		}

/* ~~~~~~~~~~ Nav ~~~~~~~~~~ */

.nav {
	height:3.5em;
	overflow:hidden;
	border-bottom-style:solid;
	border-bottom-width:1px;
	position:relative;
	z-index:1;
	-moz-box-shadow:    0 0 10px 2px #083047;
	-webkit-box-shadow: 0 0 10px 2px #083047;
	box-shadow:         0 0 10px 2px #083047;
}
	.nav ul li {
		width:20%; height:3.5em;
		float:left;
		background-image:url('/_images/navDivider.png');
		background-repeat:no-repeat;
		background-position:right center;
		background-size:2px 60%;
		overflow:hidden;
	}
	.nav ul li:last-child {
		background-image:none;
	}
	.nav ul li a {
		display:block;
		width:100%; height:4.2em;
		overflow:hidden;
		text-align:center;
		line-height:7em;
		text-decoration:none;
		color:#FFFFFF;
		text-transform:uppercase;
		text-shadow: #2a5550 1px 1px 1px;
		font-size:0.85em;
		font-size:0.8em;
		position:relative;
	}
	.nav ul li a img {
		display:block;
		border:none; outline:none;
		margin:0; padding:0;
		position:absolute;
		left:0; top:0;
		width:8em;
		left:50%;
		margin-left:-4em;
	}
	
	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Gradient, shadows, borders and corners ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~ Gradients ~~~~~~~~~~ */
.gradientBlue, button, .button {
	color:#FFFFFF;
	background-color:#0B486B;
	border-color:#00142D !important;
	background-image: linear-gradient(bottom, rgb(9,56,84) 24%, rgb(11,69,103) 100%);
	background-image: -o-linear-gradient(bottom, rgb(9,56,84) 24%, rgb(11,69,103) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(9,56,84) 24%, rgb(11,69,103) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(9,56,84) 24%, rgb(11,69,103) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(9,56,84) 24%, rgb(11,69,103) 100%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.24, rgb(9,56,84)),
		color-stop(1, rgb(11,69,103))
	);
}
.gradientGreen, .header, .nav {
	color:#FFFFFF;
	background-color:#3D8887;
	border-color:#0E4646 !important;
	background-image: linear-gradient(bottom, rgb(61,136,135) 24%, rgb(121,189,154) 100%);
	background-image: -o-linear-gradient(bottom, rgb(61,136,135) 24%, rgb(121,189,154) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(61,136,135) 24%, rgb(121,189,154) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(61,136,135) 24%, rgb(121,189,154) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(61,136,135) 24%, rgb(121,189,154) 100%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.24, rgb(61,136,135)),
		color-stop(1, rgb(121,189,154))
	);
}
.header {
	border-color:#307776 !important;
}
.gradientYellow, button:hover, .button:hover, .nav li.hover, .nav li.selected {
	color:#0B486B;
	background-color:#FFB418;
	border-color:#DC9B00 !important;
	background-image: linear-gradient(bottom, rgb(255,160,43) 24%, rgb(251,197,4) 100%) !important;
	background-image: -o-linear-gradient(bottom, rgb(255,160,43) 24%, rgb(251,197,4) 100%) !important;
	background-image: -moz-linear-gradient(bottom, rgb(255,160,43) 24%, rgb(251,197,4) 100%) !important;
	background-image: -webkit-linear-gradient(bottom, rgb(255,160,43) 24%, rgb(251,197,4) 100%) !important;
	background-image: -ms-linear-gradient(bottom, rgb(255,160,43) 24%, rgb(251,197,4) 100%) !important;

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.24, rgb(255,160,43)),
		color-stop(1, rgb(251,197,4))
	) !important;
	background-repeat:repeat !important;
	background-position:0 0 !important;
	background-size:auto !important;
}

/* ~~~~~~~~~~ Border ~~~~~~~~~~ */
.border, .borderBottom {
	border:solid 1px #CCCCCC;
}
.borderBottom {
	border-top:none;
	border-right:none;
	border-left:none;
}

/* ~~~~~~~~~~ Shadow ~~~~~~~~~~ */
.shadow {
  -moz-box-shadow:    0 0 6px 2px #CCCCCC;
  -webkit-box-shadow: 0 0 6px 2px #CCCCCC;
  box-shadow:         0 0 6px 2px #CCCCCC;
}
.innerShadow {
   -moz-box-shadow:    inset 0 0 10px #CCCCCC;
   -webkit-box-shadow: inset 0 0 10px #CCCCCC;
   box-shadow:         inset 0 0 10px #CCCCCC;
}

/* ~~~~~~~~~~ Rounded corners ~~~~~~~~~~ */
.rounded {
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Misc. classes ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.errMsg {
	padding-bottom:1em;
	color:Red;
}
.topLink {
	display:block;
	background-image:url('/_images/bgLogin.png');
	padding-top:1.0em;
	padding-bottom:1.0em;
	border-top:solid 1px #CCCCCC;
	border-bottom:solid 1px #CCCCCC;
	color:#666666;
	text-align:center;
}

.bottomLink {
	display:block;
	background-image:url('/_images/bgLogin.png');
	padding-top:1.0em;
	padding-bottom:1.0em;
	border-top:solid 1px #CCCCCC;
	border-bottom:solid 1px #CCCCCC;
	color:#666666;
	text-align:center;
	height: 100%;
}

.paddingTop {
	padding-top:0.5em;
}
.paddingBottom {
	padding-bottom:1em;
}
.marginTop {
	margin-top:0.5em;
}
.marginBottom {
	margin-bottom:1em;
}
.cannotDeleteMessage {
	display:inline-block;
	margin-top:2em;
	font-size:0.8em;
	color:#999999;
	text-decoration:none;
}
.underline {
	text-decoration:underline;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Flash / Object aspect ratio ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.aspectRatio {
	color:#666666;
	background:#C5C5C5;
	position: relative;
	padding-bottom: 75%; /* = aspectratio 4 : 3 */
	overflow: hidden;
	text-align:center;
}
.aspectRatio span {
	display:block;
	position:absolute;
	width:90%;
	left:50%; top:50%;
	margin:-33% -45%;
}
.aspectRatio iframe,  
.aspectRatio object,  
.aspectRatio embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Page: Video ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div#flashReplacer, #flashReplacer_wrapper {
	width:auto !important;
	height:auto !important;
	position:static !important;
}
#flashReplacer_video_wrapper {
	position:absolute;
	left:0; top:0;
}
#flashReplacer_jwplayer_dock, #flashReplacer_jwplayer_controlbar {
	opacity:1 !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Page: record ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.recordContainer {
	padding:1em;
	display:block;
	border:solid 1px #CCCCCC;
	background:#EEEEEE;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
	-moz-box-shadow:    inset 0 0 15px #CCCCCC;
	-webkit-box-shadow: inset 0 0 15px #CCCCCC;
	box-shadow:         inset 0 0 15px #CCCCCC;
}
.videoContainer {
	padding:0;
	display:block;
	background:#EEEEEE;
}
.videoContainer {
	display:none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Page: Category ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#pnlGetLightVersionLink {
	padding-top:1.5em;
	padding-bottom:1.8em;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Page: Settings > videos ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.dropDownCategories {
	background-color:#ffffff;
	background-image:url('/_images/bgLogin.png');
	border-bottom:solid 1px #CCCCCC;
	color:#0B486B;
}

#showVideosButton {
	display:none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Page: Upload ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#progress {
	padding: 1.5em;
    text-align: center;
}

#progress p {
	padding: 1em;
}




.noUsername {
    font-size: 22px;
    /*font-size: 1em;*/
    line-height: 2.2em;
    font-weight: normal;
    font-family: "Gudea", Helvetica, Arial, sans-serif;
}

#dialog-bsl-login {
    text-align: center;
}