@charset "utf-8";
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*
@size9px: 62%;
@size10px: 77%;
@size11px: 85%;
@size12px: 93%;
@size13px: 100%;
@size14px: 108%;
@size15px: 116%;
@size16px: 123.1%;
@size17px: 131%;
@size18px: 138.5%;
@size19px: 146.5%;
@size20px: 153.9%;
@size26px: 200%;
@size30px: 232%;
@size40px: 308%;
@size80px: 616%;
*/

body {
    font-family: "franklin-gothic-urw",sans-serif;
    background: #7490b6;
    color: #fff;
    font-size: 1em;
    width: 100%;
}

html, body {height: 100%;}

#wrapper {
    min-height: 100%;
    margin: 0 10px;
}

#wrapper > section {
    overflow:auto;
    padding-bottom: 4em !important;
}  /* must be same height as the footer */

footer {
    position: relative;
    margin-top: -3em; /* negative value of footer height */
    height: 3em;
    clear:both;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

.ie7 #wrapper {
    display:table;
    height:100%;
}

h1, h2, h3, h4, h5 {
    font-weight: 300;
    padding: 0;
    margin: 0;
    line-height:1.1;
    letter-spacing: -0.04em;
}
h2 {
    font-size: 73%;
    font-weight: 500;
    text-transform: uppercase;
    color: #175457;
}

a {
    color: #fff;
    text-decoration: underline;
}
input, label, p, li {
    font-size: 85%;
    font-weight: 300;
}
p, ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 1em;
}
li > *,
p > * {
    font-size: 100%;
}
li h2 {
    font-size: 90%;
}


/* **** ADMIN *** */
.admin-logo {
    max-height: 100px;
}
.pagination-nav {
    display: flex;
    justify-content: flex-end;
}
.pagination {
    padding:0;
}
.pagination span {

    float: left;
    padding: 0 14px;
    line-height: 34px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-left-width: 0;
}

/* **** GRID **** */

.col {
    border:0px solid rgba(0,0,0,0);
    float:left;
    margin-left:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -moz-background-clip:padding-box !important;
    -webkit-background-clip:padding-box !important;
    background-clip:padding-box !important;
}

.row {
    margin-left:-20px;
}
.row.promos {
    margin-left: 0;
}
.col {
    padding:0 10px 0 0;
    position: relative;
}
.lt-ie9 .col {
    border-left:20px solid transparent;
}
.span_1 {
    width:25%;
}
.span_2 {
    width:50%;
}
.span_3 {
    width:75%;
}
.span_4 {
    margin-left:0;
    width:100%;
}

.span_1, .span_2, .span_3, .span_4{
	float: left;
}


#wrapper section > header {
    padding: 20px;
    margin-top: 10px;
    border-radius: 10px 10px 0 0;
}
#wrapper section > header img {
    max-width: 150px;
}
#wrapper > section {
    display: block;
    max-width: 1080px;
    min-width: 748px;
    margin: 0 auto;
    padding: 10px;
}



body.signedin header {
    background: rgb(0,0,0);
    background: rgba(0,0,0,0.7);
}
header .user_info {
    float: right;
    text-align: right;
    padding-top: 10px;
}
header .user_info p {
    padding: 0;
    position: relative;
}
header .message_count {
    border-radius: 10px;
    background: #e22;
    position: absolute;
    top:-10px;
    right: -15px;
    display: inline-block;
    padding: 0 5px;
    font-size: 70%;
    text-decoration: none;
}
header .message_count:hover {
    color: #fff;
    background: #c00;
}
.signedin article#main {
    background: #fff;
    color: #444;
    padding: 20px;
}

.signedin article#main a {
    color: #014548;
}
.ui {
    padding: 0 0 40px;
}
.breadcrumb,
.buttons ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#project_name {
    display:block;

}

h1#project_title {
    float: left;
}

#project_name select{
	float:right;
	background: transparent;
	width: 268px;
	padding: 5px;
	font-size: 16px;
	line-height: 1;
	border:1px solid #ccc;
	border-radius: 3px;
	height: 45px;
	/*-webkit-appearance: none;*/
}




.feedbackMessage {
    display: none;
    position: relative;
}
.msgHeader {
    background: #eee;
    border-bottom: 1px solid #ccc;
    padding: 10px;
}
.msgHeader span,
.msgBody span {
    font-weight: 500;
}
.msgBody {
	min-height:50px;
    padding: 10px;
}

.msgFooter{
	border-top:1px #ccc solid;
	background: #eee;
	position:absolute;
	width: 100%;
	bottom:0;
	padding:10px 0;
	height:30px;
}

.msgFooter .btn{
	margin-right:5px;
	float:right;
}


.stepActions {
    float: right;
    padding-top: 0.2em;
}
.lt-ie9 .stepActions li {
    display: block;
    float: left;
    margin-left: 10px;
}


.breadcrumb li,
.buttons li {
    display: inline-block;
}
.breadcrumb {
    float: left;
    border:none;
}
.ui .buttons {
    float: right;
}
.ui .breadcrumb li.active {
    background: #1c666b;
}

.ui .breadcrumb li {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 100px;
    margin: 5px 1px 0 0;
    text-indent: 15px;
    position: relative;
    text-transform: uppercase;
    font-size: 73%;
    font-weight: 500;
    text-shadow: none;
}

.ui .breadcrumb li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: -2px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

.ui .breadcrumb li:first-child:before {
    border-color: transparent;
}
.ui .breadcrumb li a {
    text-decoration: none;
    color: #fff !important;
}
.ui .breadcrumb li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -10px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #8aa9aa;
    z-index: 10;
}

.ui .breadcrumb li.active a {
    background: #1c666b;
    z-index: 100;
}

.ui .breadcrumb li.active a:after {
    border-left-color: #1c666b;
}

.ui .breadcrumb li a {
    display: block;
    background: #8aa9aa;
}




.intro {
    overflow: hidden;
    position: relative;
}
.intro .start {
    float: left;
    width: 50%;
}
.intro .start > img {
    display: block;
    margin-bottom: 20px;
}
.intro .start a {
    margin-top: 50px;
    font-size: 2em;
    text-align: left;
    min-width: 50%;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 72.5%;
    z-index: 10;
    position: relative;
}
.intro .start a p {
    padding: 0;
    font-weight: 500;
    line-height: 1.1;
}
.intro .start a > img {
    float: left;
    margin: 4px 10px 0 0;
}
.intro .start a span {
    display: block;
    font-size: 0.5em;
}
.intro .overview {
    float: right;
    width: 45%;
}
.promos {
    margin-top: 20px;
}
.promos img {
    max-width: 100%;
    display: block;
    margin: 0 0 10px;
    border-radius: 8px;
}
.promos p {
    font-size: 73%;
}

#signin > img {
    max-width: 100%;
    width: 800px;
    display: block;
    margin: 50px auto;
}
#signin .forgot {
    font-size: 85%;
}


.js .infield {
    position: relative;
}
.js .infield label {
    position: absolute;
    top: 4px;
    left: 3px;
    color: #444;
}
form#signin_form {
    margin: 0 auto;
    width: 220px;

}

#signin_form input[type=submit] {
    color:black;
}

#signin_form .forgotten_pw {
    text-decoration: none;
    display:flex;
    width: 100%;
    font-size: 14px;
    text-align: center;
    justify-content: center;
    padding:10px 0 0 0;
}

#signin_form .forgotten_pw:hover {
    color:white;

}

#signin_form dialog {
    max-width: 300px;
}

#signin_form dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
  }

#signin_form dialog a {
    color:black;

}



.formRow input {
    font-family: "franklin-gothic-urw",sans-serif;
    font-weight: 400;
    padding: 5px;
    border-radius: 5px;
    border: 0;
    margin: 0 0 5px;
    width: 210px;

    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
}
form .error {
    background: red;
    margin: -5px 10px 10px;
    padding: 3px;
    font-size: 0.8em;
    text-align: center;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
}

input.h1.error{
	text-align: left;
}

form .error:first-child {
    border-radius: 5px;
}
input[type=submit],
.buttons a,
a.btn {
    font-family: "franklin-gothic-urw",sans-serif;
    text-decoration: none;
    margin:0;
    padding: 5px;
    line-height: 1;
    border-radius: 5px;
    border: 1px solid #ddd;
    background: #f7f7f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f7f7 0%, #dddddd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f7f7 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f7f7 0%,#dddddd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f7f7 0%,#dddddd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f7f7 0%,#dddddd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    font-size: 85%;
    text-shadow: 0 -1px 1px rgba(255,255,255,0.5);
    font-weight: 500;
    display: inline-block;
    text-align: center;
    min-width: 65px;

}

input[type=submit]:hover,
.buttons a:hover,
a.btn:hover {
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.buttons a img {
    margin-top: -2px;
}
div > a.btn {
    font-size: 75%;
}

form#signin_form input[type=submit] {
    float: right;
}
.lt-ie9 input[type=password] {
    font-family: sans-serif;
}

footer {
    background: #fff;
}
footer a {
    color: #444;
}
footer ul {
    list-style: none;
    padding: 10px 0 0 10px;
    margin: 0;
    text-align: center;
}
footer ul li {
    display: inline-block;
    font-size: 85%;
    margin: 0 10px 0 0;
    padding: 0 10px 0 0;
    border-right: 1px solid #ccc;
}
footer ul li:last-child {
    border-right: none;
}

#bg {
    display: none;
}

input.h1 {
    font-size: 250%;
    font-weight: 300;
    font-family: "franklin-gothic-urw",sans-serif;
    letter-spacing: -0.04em;
    color: #175457;
    padding: 2px 2px 2px 2px;
    margin: 0;
    height:45px;
    width: auto !important;

    display: inline-block;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
    box-shadow: none;
}
p.edit {
    display: inline-block;
    padding: 0;
    color: #ccc;
    cursor: pointer;
}

.mainOptions {
    position: relative;
    background: rgb(255,255,255);
    border-radius: 0 0 8px 8px;
    min-height: 560px;
    color: #666;
    overflow-y: scroll;
    padding: 10px 10px 0 20px;
    border-top: 1px solid #ccc;
}

form.projects{
	 padding: 10px 10px 20px 20px;
}

.mainOptions tr{

	padding:10px inherit;
}

.mainOptions.noscroll {
    overflow: visible;
    padding: 10px 0 0 20px;
    border-top: none;
}

.mainOptions td{

	color:#666;
}

.mainOptions .row-color{

	background:#F6F6F6;
}

.mainOption .row-color td{

	background:#F6F6F6;
}

.mainOptions a {
    color: #175457;
}

.steps .step {
    position: relative;
    z-index: 2;
    background: #fff;
    color: #444;
    border-radius: 8px;
    float: left;
    width: 18%;
    height: 102%;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    overflow-y: auto;
    right: 2%;
    bottom: 2%;
}
.lt-ie9 .steps .step {
    border-right: 1px solid #999;
}
.steps .step .options {
    padding: 10%;
}
.mainOptions h1 {
    font-size: 110%;
    color: #999;
    padding: 0 0 1em;
}

.mainOptions h1.title{
	font-size: 250%;
	font-weight: 300;
	font-family: "franklin-gothic-urw",sans-serif;
	letter-spacing: -0.04em;
	color: #93be46;
	padding: 2px 2px 2px 0;
	margin-top: 20px;


}
.mainOptions > h1 {
    border-bottom: 1px solid #ccc;
    margin: 0 0 0 -20px;
    padding: 0 20px 0.5em;
}
.mainOptions .col h2 {
    padding: 0 0 0.5em;
}
.mainOptions .row {
    height: 94.9%;
}
.mainOptions .row .col {
    min-height: 535px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 10%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.1)), color-stop(10%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%);
    background: -o-linear-gradient(left,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%);
    background: -ms-linear-gradient(left,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%);
    background: linear-gradient(to right,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%);
}
.ie9 .mainOptions .row .col {
    filter: none;
}
.lt-ie9 .mainOptions .row .col {
    background: url(../img/construct/shadow.png) 0 0 repeat-y;
}
.mainOptions .row .col > * {
    margin-left: 20px;
}
.mainOptions input {
    font-family: "franklin-gothic-urw",sans-serif;
    padding: 1px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 100%;
}
.mainOptions h3 {
    font-weight: 500;
    padding: 0 0 0.5em;
    font-size: 83%;
}
.mainOptions .formats ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mainOptions .formats li:before,
.mainOptions .formats li:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.mainOptions .formats li:after {
    clear: both;
}
.mainOptions .formats li {
    *zoom: 1;
}
.mainOptions .formats ul {
    padding-bottom: 0.5em;
}
.mainOptions .formats li {
    margin-left: -20px;
    margin-right: -10px;
    padding: 3px 10px 3px 35px;
    font-size: 83%;
}
.mainOptions .formats .other li {
    padding: 3px 20px 3px 20px;
}
.mainOptions .formats li:hover {
    background: #014548;
    color: #fff;
}

.mainOptions .formats li:hover label{
    color: #fff;
}

.mainOptions .formats li label {
    float: left;
    padding-top: 2px;
}
.mainOptions .formats .other li label {
    font-weight: 500;
}
.mainOptions .formats li input[type=number] {
    float: right;
    width: 30px;
}
.mainOptions .formats li input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.mainOptions .formats li input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#theme-content img {
    max-height: 440px;
}


.mainOptions ol {
    padding: 0 0 0 20px;
    margin: 0;
    font-size: 95%;
}
.mainOptions .row .col:first-child {
    background: none;
    filter: none;
    border-left-width: 20px;
}
.mainOptions .row .col:first-child > * {
    margin-left: 0;
}
.mainOptions .row .col h2:first-child {
    padding-top: 20px;
}
.options ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5em;
}
.options ul li a {
    display: block;
    padding: 0.5em 13%;
    margin: 0 -13%;
}
.steps .step.sub .options ul li a {
    padding: 0.5em 20%;
    margin: 0 -20%;
}
.steps .step .options a {
    color: #999;
    text-decoration: none;
}
.steps .step .options a span {
    font-size: 100%;
    float: right;
}
.steps .step .options a:hover,
.steps .step .options li a.active {
    color: #175457;
    background: #eee;
}
.steps .step .options li a.active {
    font-weight: 500;
}
.steps .step.sub .options li a.active {
    background: #175457;
    color: #fff;
}
.steps .step.sub {
    z-index: 1;
    left: -24px;
    /*height: 100%;*/
    background: #eee;
}
.step.sub .category-options {
    padding-left: 20%;
}



.col.content label {
    display: block;
}

.col.content label.inline{
	display: inline-block;
}

textarea {
    width: 70%;
    max-width: 70%;
    height: 5em;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.col.content textarea:disabled{
	color: #666;
	cursor: default;
}

.col.content span.charCount {
    /*float: right;
    margin-right: 30%;
    color: #175457;*/
    display: none;
}

.mainOptions .queue a {
    color: #ccc;
}
.mainOptions .queue li a.active,
.mainOptions .queue a:hover {
    color: #175754;
}

.mainOptions table{
	margin-top: 10px;
}

.mainOptions table td img{
	max-width: 100%;
}

.step-5 .mainOptions table.approval td, .step-5 .mainOptions table.approval th{
	padding: 10px 20px 20px 20px;
}

.mainOptions table.approval tbody td{
	border-bottom: 1px solid #ccc;

}

.mainOptions table.approval td p{
	padding: 0;
}

.mainOptions table.approval{
	padding-left: 20px;
}

.mainOptions table thead{
	border-bottom: 1px solid #ccc;
}

.mainOptions table thead th{
	padding: 10px 0px;
	text-align: left;
	color: #175457;
	cursor: pointer;
	font-weight: normal;
}

.mainOptions table.review tbody td{
	padding-top: 40px;
	padding-bottom: 20px;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 10%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(10%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */




}

a.fancybox img{
	max-width: 100%;
}

.fancy-hidden{
	display: none;
}

/*GROUP USER DISTRIBUTE*/

.group-user-distribute label{
	width: 100px;
	display: inline-block;
}

.group-user-distribute input[type="text"]{
	width: 30px;
}

.group-user-distribute .sep{
	margin-bottom: 10px;
}

.group-user-distribute{
	position: relative;
	float: left;
	margin-top: 20px;
	padding-top: 40px;
	padding-bottom: 20px;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 10%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(10%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 10%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	width: 100%;
}

.remove-school{
	position: absolute;
	right: 20px;
	top: 40px;
}

.group-user-distribute.one .buttons{
	display: none;
}

/*STEP 5*/

.step-5 input.quality{
	width: auto;
}

.step-5 .row{
	margin-right: -20px;
}


/*APPROVAL*/

.approved{
	position: relative;
	float: left;
	width: 60%;
}

.approved h1{
	width: 50%;
	float: left;
	margin-left: 20px;

}

.generic-image img{
	float: right;

}

.message{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 45%;
}

.message p{
	width: 70%;
	float: left;
	padding-bottom: 0;
}

.message .buttons{
	position: absolute;
	bottom: 5px;
	right: 0;
}

/*PROJECTS*/

table.projects {
	border-collapse: separate;
    font-size: 0.8em;
    border-bottom: 1px solid #999;
    margin: 0 0 1em;
}
.mainOptions table.projects thead th {
    /*padding: 0 10px;*/
}
table.projects td{
	width: auto;
    padding: 10px 10px 10px 2px;
    text-transform: capitalize;
    vertical-align: top
}
table.projects td p {

    font-size: 100%;
    padding: 0;
}

table.projects tr.size-only td{

	padding: 5px 0;
}

table.projects td.approved{
	color: #93be46;

}

table.projects td.waiting{
	color: #f6a642;
}

table.projects td.declined{
	color: red;
}
.mainOptions table.projects thead th.action {
    width: 7%;
    padding: 0 5px 0;
    text-align: center;
}

table.projects td.action {

    width: 5%;
    padding: 2px 0 5px 0;
    text-align: center;
}
table.projects td.action .btn {
    padding: 2px 5px;
    margin: 5px 0 2px 0;
    min-width: 0;
}


table.projects td.action .btn img {
    display: block
}
table.projects tr.approve-row td {
    border-top: 1px solid #ddd;
}
table.projects td.projectname,
table.projects td.projectname p {
    font-weight: 500;

}

.filters{
	margin-top: 20px;
}

.filters h3{
	margin-bottom: 10px;
}

.filters .buttons ul li.active a{
	border: 1px solid #BBB;
	background: #6D6D6D;
	background: -moz-linear-gradient(top, #6D6D6D 0%, #BBB 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6D6D6D), color-stop(100%,#BBB));
	background: -webkit-linear-gradient(top, #6D6D6D 0%,#BBB 100%);
	background: -o-linear-gradient(top, #6D6D6D 0%,#BBB 100%);
	background: -ms-linear-gradient(top, #6D6D6D 0%,#BBB 100%);
	background: linear-gradient(to bottom, #6D6D6D 0%,#BBB 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6D6D6D', endColorstr='#BBBBBB',GradientType=0 );
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	color: #fff!important;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.6);
}
#edit-area ul {
    list-style: none;
    padding: 0;
}

#edit-area ul li span.charCount {
	float:none;
	margin-left:15px;
	margin-right: 0;
	font-size: 12px;
}

#fancybox-content > div {
    color: #444;
}
#fancybox-content > div > form textarea {
    width: 350px;
    height: 100px;
    margin: 0 0 1em;
    max-width: none;
}
#fancybox-content > div > form input {
    font-size: 0.75em;
    text-transform: capitalize;
}

@-moz-document url-prefix() {
   #fancybox-content > div {
       overflow: hidden !important;
   }
}


/*PROFILE*/

.form{
	margin-bottom: 10px;
	float: left;
	width: 100%;
}


label.error{
	float: left;
	margin-left: 10px;
	display: none;
	color: red;
}

.form-message p{
	padding-bottom: 0;
}

.form label{
	min-width: 150px;
	float: left;
}

.form input{
	float: left;
}

.form input.error{
	border: 1px solid red;
}

form#edit-profile-form .buttons{
	margin-top: 10px;
	margin-left: 150px;
}

/*TERMS SECTION*/

.terms-conditions{
	width: 80%;
}

.terms h2{
	font-size: 18px;
	padding-bottom:10px
}
.terms h4{

	padding-bottom:5px;
	font-size: 14px;
	font-weight: 500;
	color:#175457;
	text-transform:uppercase;
}

/*HELP SECTION*/

.helpsection{
	width: 80%;
}

.helpsection .answer{
	display: none;
	margin-top: 10px;
}

.helpsection .answer{

}

.helpsection{
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}

.helpsection .question{
	width: 100%;

}

.helpsection .question img{
/*	float: left;*/
margin-top: 3px;
float: right;
}

.helpsection h2{
	display: inline-block;
	font-size: 1em;
	cursor: pointer;
/*	background: url(../img/construct/help-arrow.png) no-repeat right;*/
}

/*/*/

::-webkit-scrollbar {
  width: 10px;
  border-radius: 0 8px 8px 0;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: rgba(153,153,153,0.7);
  border-radius: 5px;
}

/* hub css additions */

.stepActions a {
	font-size: 1em;
	text-transform: uppercase;
	padding: 8px 15px;
	position: relative;
}
#next-btn {
	background: #62898B;
    background: rgb(98,137,139);
	color: #fff !important;
	text-shadow: none;
	border-color: #014548;
	padding: 8px 25px 8px 15px;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= #62898B,endColorstr= #62898B);
}
#prev-btn {
	background: #86AFB1;
	color: #fff !important;
	text-shadow: none;
	border-color: #014548;
	padding: 8px 15px 8px 25px;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= #86AFB1,endColorstr= #86AFB1);
}
#next-btn:after {
	content: ">>";
	position: absolute;
	right: 5px;
	letter-spacing: -0.15em;
}
#prev-btn:before {
	content: "<<";
	position: absolute;
	left: 5px;
	letter-spacing: -0.15em;
}

/*
*
*
* MODAL
*
*
*/

#myModal{
	color:black;
}

#vid-overview {
  height: 100%;
  max-width: 100%;
  text-align: center;
}
.white-popup {
  position: relative;
  background: transparent;
  padding: 30px;
  box-sizing: border-box;
  width: auto;
  margin: 20px auto;
  display: inline-block;
}
.mfp-content {
  height: 100%;
  text-align: center !important;
}
#vid-overview video {
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
}

/* ==========================================================================
   Plugin classes
   ========================================================================== */

/*
VideoJS Default Styles (http://videojs.com)
Version 3.2.0
*/

/*
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* When loading the player, the video tag is replaced with a DIV,
   that will hold the video tag or object tag for other playback methods.
   The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.

   ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
   Otherwise you risk messing up control positioning and full window mode. **
*/
.video-js {
  background-color: #000; position: relative; padding: 0;

  /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
  font-size: 10px;

  /* Allow poster to be vertially aligned. */
  vertical-align: middle;
  /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
}

/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
.video-js:-moz-full-screen { position: absolute; }

/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0; margin: 0;
  height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
}
.video-js.vjs-fullscreen {
  position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
  _position: absolute; /* IE6 Full-window (underscore hack) */
}
.video-js:-webkit-full-screen {
  width: 100% !important; height: 100% !important;
}

/* Poster Styles */
.vjs-poster {
  margin: 0 auto; padding: 0; cursor: pointer;

  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
  position: relative; width: 100%; max-height: 100%;
}

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Individual tracks */
.video-js .vjs-text-track {
  display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (IE6) */
  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
.video-js .vjs-subtitles { color: #fff; }
.video-js .vjs-captions { color: #fc6; }
.vjs-tt-cue { display: block; }

/* Fading sytles, used to fade control bar. */
.vjs-fade-in {
  visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
  opacity: 1 !important;

  -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
  -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
  -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
  -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
  transition: visibility 0s linear 0s, opacity 0.3s linear;
}
.vjs-fade-out {
  visibility: hidden !important;
  opacity: 0 !important;

  -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  transition: visibility 0s linear 1.5s,opacity 1.5s linear;
}

/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */

/* The default control bar. Created by bar.js */
.vjs-default-skin .vjs-controls {
  position: absolute;
  bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  left: 0; right: 0; /* 100% width of div */
  margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
  height: 2.6em; /* Including any margin you want above or below control items */
  color: #fff; border-top: 1px solid #404040;

  /* CSS Gradient */
  /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
  background: #242424; /* Old browsers */
  background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
  /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
  background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */

  /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
  /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
  visibility: hidden;
  opacity: 0;
}

/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  position: relative; float: left;
  text-align: center; margin: 0; padding: 0;
  height: 2.6em; width: 2.6em;
}

.vjs-default-skin .vjs-control:focus {
  outline: 0;
/*  background-color: #555;*/
}

/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }


/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-play-control { width: 5em; cursor: pointer !important; }
/* Play Icon */
.vjs-default-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('../img/construct/video-js.png'); margin: 0.5em auto 0; }
.vjs-default-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('../img/construct/video-js.png') -25px 0; margin: 0.5em auto 0; }

/* Rewind
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('../img/construct/video-js.png'); margin: 0.5em auto 0; }

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-default-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('../img/construct/video-js.png') -75px -25px; margin: 0.5em auto 0; }
.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url('../img/construct/video-js.png') 0 -25px; }
.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url('../img/construct/video-js.png') -25px -25px; }
.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url('../img/construct/video-js.png') -50px -25px; }


.vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
.vjs-default-skin .vjs-volume-bar {
  position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;

  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

  background: #666;
  background: -moz-linear-gradient(top, #333, #666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
  background: -webkit-linear-gradient(top, #333, #666);
  background: -o-linear-gradient(top, #333, #666);
  background: -ms-linear-gradient(top, #333, #666);
  background: linear-gradient(top, #333, #666);
}
.vjs-default-skin .vjs-volume-level {
  position: absolute; top: 0; left: 0; height: 0.6em;

  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

  background: #fff;
  background: -moz-linear-gradient(top, #fff, #ccc);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
  background: -webkit-linear-gradient(top, #fff, #ccc);
  background: -o-linear-gradient(top, #fff, #ccc);
  background: -ms-linear-gradient(top, #fff, #ccc);
  background: linear-gradient(top, #fff, #ccc);
}
.vjs-default-skin .vjs-volume-handle {
  position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
  border: 1px solid #fff;
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
}

/* Progress
-------------------------------------------------------------------------------- */
.vjs-default-skin div.vjs-progress-control {
  position: absolute;
  left: 4.8em; right: 4.8em; /* Leave room for time displays. */
  height: 1.0em; width: auto;
  top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
  border-bottom: 1px solid #1F1F1F;
  border-top: 1px solid #222;

  /* CSS Gradient */
  background: #333;
  background: -moz-linear-gradient(top, #222, #333);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
  background: -webkit-linear-gradient(top, #222, #333);
  background: -o-linear-gradient(top, #333, #222);
  background: -ms-linear-gradient(top, #333, #222);
  background: linear-gradient(top, #333, #222);


  /* 1px top shadow */
/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  position: relative; cursor: pointer !important; /*overflow: hidden;*/
  padding: 0; margin: 0; /* Placement within the progress control item */
  height: 1.0em;
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;

  /* CSS Gradient */
  background: #111;
  background: -moz-linear-gradient(top, #111, #262626);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
  background: -webkit-linear-gradient(top, #111, #262626);
  background: -o-linear-gradient(top, #111, #262626);
  background: -ms-linear-gradient(top, #111, #262626);
  background: linear-gradient(top, #111, #262626);
}
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
  position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
  left: 0; top: 0; /*Needed for IE6*/
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;

  /*width: 0;*/
}

.vjs-default-skin .vjs-play-progress {
  /* CSS Gradient. */
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
  background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
  background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
  background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
  background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);

  background: #efefef;
  background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
  background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
  background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
  background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
  background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
}
.vjs-default-skin .vjs-load-progress {
  opacity: 0.8;

  /* CSS Gradient */
  background: #666;
  background: -moz-linear-gradient(top, #666, #333);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
  background: -webkit-linear-gradient(top, #666, #333);
  background: -o-linear-gradient(top, #666, #333);
  background: -ms-linear-gradient(top, #666, #333);
  background: linear-gradient(top, #666, #333);
}

.vjs-default-skin div.vjs-seek-handle {
  position: absolute;
  width: 16px; height: 16px; /* Match img pixles */
  margin-top: -0.3em;
  left: 0; top: 0; /*Needed for IE6*/

  background: url('../img/construct/video-js.png') 0 -50px;
  /* CSS Curved Corners. Needed to make shadows curved. */
  -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
  /* CSS Shadows */
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}

/* Time Display
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-time-controls {
  position: absolute;
  right: 0;
  height: 1.0em; width: 4.8em;
  top: -1.3em;
  border-bottom: 1px solid #1F1F1F;
  border-top: 1px solid #222;
  background-color: #333;

  font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;

  background: #333;
  background: -moz-linear-gradient(top, #222, #333);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
  background: -webkit-linear-gradient(top, #222, #333);
  background: -o-linear-gradient(top, #333, #222);
  background: -ms-linear-gradient(top, #333, #222);
  background: linear-gradient(top, #333, #222);

  /* 1px top shadow */
/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}

.vjs-default-skin .vjs-current-time { left: 0; }

.vjs-default-skin .vjs-duration { right: 0; display: none; }
.vjs-default-skin .vjs-remaining-time { right: 0; }

.vjs-time-divider { display:none; }

.vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-secondary-controls { float: right; }

.vjs-default-skin .vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-default-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('../img/construct/video-js.png') -50px 0; margin: 0.5em auto 0; }

.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background: url('../img/construct/video-js.png') -75px 0; }


/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-default-skin .vjs-big-play-button {
  display: block; /* Start hidden */ z-index: 2;
  position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -42px 0 0 -42px; text-align: center; vertical-align: center; cursor: pointer !important;
  border: 0.2em solid #fff; opacity: 0.95;
  -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;

  background: #454545;
  background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
  background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
  background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
  background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
  background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);

  /* CSS Shadows */
  -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
}

.vjs-default-skin div.vjs-big-play-button:hover {
  -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
}

.vjs-default-skin div.vjs-big-play-button span {
  position: absolute; top: 50%; left: 50%;
  display: block; width: 35px; height: 42px;
  margin: -20px 0 0 -15px; /* Using negative margin to center image. */
  background: url('../img/construct/video-js.png') -100px 0;
}

/* Loading Spinner
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-loading-spinner {
  display: none;
  position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
  margin: -28px 0 0 -28px;
  -webkit-animation-name: rotatethis;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotatethis;
  -moz-animation-duration:1s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotatethis {
  0% {-webkit-transform:scale(0.6) rotate(0deg); }
  12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
  12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
  25% {-webkit-transform:scale(0.6) rotate(45deg); }
  25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
  37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
  37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
  50% {-webkit-transform:scale(0.6) rotate(135deg);}
  50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
  62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
  62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
  75% {-webkit-transform:scale(0.6) rotate(225deg);}
  75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
  87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
  87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
  100% {-webkit-transform:scale(0.6) rotate(315deg);}
}

@-moz-keyframes rotatethis {
  0% {-moz-transform:scale(0.6) rotate(0deg);}
  12.5% {-moz-transform:scale(0.6) rotate(0deg);}
  12.51% {-moz-transform:scale(0.6) rotate(45deg);}
  25% {-moz-transform:scale(0.6) rotate(45deg);}
  25.01% {-moz-transform:scale(0.6) rotate(90deg);}
  37.5% {-moz-transform:scale(0.6) rotate(90deg);}
  37.51% {-moz-transform:scale(0.6) rotate(135deg);}
  50% {-moz-transform:scale(0.6) rotate(135deg);}
  50.01% {-moz-transform:scale(0.6) rotate(180deg);}
  62.5% {-moz-transform:scale(0.6) rotate(180deg);}
  62.51% {-moz-transform:scale(0.6) rotate(225deg);}
  75% {-moz-transform:scale(0.6) rotate(225deg);}
  75.01% {-moz-transform:scale(0.6) rotate(270deg);}
  87.5% {-moz-transform:scale(0.6) rotate(270deg);}
  87.51% {-moz-transform:scale(0.6) rotate(315deg);}
  100% {-moz-transform:scale(0.6) rotate(315deg);}
}
/* Each circle */
div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
  border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
  float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;

  border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

  background: #4d4d4d;
  background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
  background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}
/* Button Icon */
.vjs-default-skin .vjs-menu-button div { background: url('../img/construct/video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }

/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button ul {
  display: none; /* Start hidden. Hover will show. */
  opacity: 0.8;
  padding: 0; margin: 0;
  position: absolute; width: 10em; bottom: 2em; max-height: 15em;
  left: -3.5em; /* Width of menu - width of button / 2 */
  background-color: #111;
  border: 2px solid #333;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
  overflow: auto;
}

.vjs-default-skin .vjs-menu-button:focus ul,
.vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
.vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url('../img/construct/video-js.png') -125px -50px no-repeat; }
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;

  color: #fff; font-weight: bold;

  cursor: default;

  background: #4d4d4d;
  background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
  background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}

/* Subtitles Button */
.vjs-default-skin .vjs-captions-button div { background-position: -25px -75px; }
.vjs-default-skin .vjs-chapters-button div { background-position: -100px -75px; }
.vjs-default-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }

/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 *
 * Examples and documentation at: http://fancybox.net
 *
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
 *
 * Version: 1.3.4 (11/11/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

#lightboxes {
    display: none;
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-left: -20px;
	cursor: pointer;
	overflow: hidden;
	z-index: 1104;
	display: none;
}

#fancybox-loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 480px;
	background-image: url('/img/third-party/fancybox.png');
}

#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1100;
	display: none;
}

#fancybox-tmp {
	padding: 0;
	margin: 0;
	border: 0;
	overflow: auto;
	display: none;
}

#fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	z-index: 1101;
	outline: none;
	display: none;
}

#fancybox-outer {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
}

#fancybox-content {
	width: 0;
	height: 0;
	padding: 0;
	outline: none;
	position: relative;
	overflow: hidden;
	z-index: 1102;
	border: 0px solid #fff;
}

#fancybox-hide-sel-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 1101;
}

#fancybox-close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	background: transparent url('/img/third-party/fancybox.png') -40px 0px;
	cursor: pointer;
	z-index: 1103;
	display: none;
}

#fancybox-error {
	color: #444;
	font: normal 12px/20px Arial;
	padding: 14px;
	margin: 0;
}

#fancybox-img {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	line-height: 0;
	vertical-align: top;
}

#fancybox-frame {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

#fancybox-left, #fancybox-right {
	position: absolute;
	bottom: 0px;
	height: 100%;
	width: 35%;
	cursor: pointer;
	outline: none;
	background: transparent url('/img/third-party/blank.gif');
	z-index: 1102;
	display: none;
}

#fancybox-left {
	left: 0px;
}

#fancybox-right {
	right: 0px;
}

#fancybox-left-ico, #fancybox-right-ico {
	position: absolute;
	top: 50%;
	left: -9999px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	cursor: pointer;
	z-index: 1102;
	display: block;
}

#fancybox-left-ico {
	background-image: url('/img/third-party/fancybox.png');
	background-position: -40px -30px;
}

#fancybox-right-ico {
	background-image: url('/img/third-party/fancybox.png');
	background-position: -40px -60px;
}

#fancybox-left:hover, #fancybox-right:hover {
	visibility: visible; /* IE6 */
}

#fancybox-left:hover span {
	left: 20px;
}

#fancybox-right:hover span {
	left: auto;
	right: 20px;
}

.fancybox-bg {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	width: 20px;
	height: 20px;
	z-index: 1001;
}

#fancybox-bg-n {
	top: -20px;
	left: 0;
	width: 100%;
	background-image: url('/img/third-party/fancybox-x.png');
}

#fancybox-bg-ne {
	top: -20px;
	right: -20px;
	background-image: url('/img/third-party/fancybox.png');
	background-position: -40px -162px;
}

#fancybox-bg-e {
	top: 0;
	right: -20px;
	height: 100%;
	background-image: url('f/img/third-party/ancybox-y.png');
	background-position: -20px 0px;
}

#fancybox-bg-se {
	bottom: -20px;
	right: -20px;
	background-image: url('/img/third-party/fancybox.png');
	background-position: -40px -182px;
}

#fancybox-bg-s {
	bottom: -20px;
	left: 0;
	width: 100%;
	background-image: url('/img/third-party/fancybox-x.png');
	background-position: 0px -20px;
}

#fancybox-bg-sw {
	bottom: -20px;
	left: -20px;
	background-image: url('/img/third-party/fancybox.png');
	background-position: -40px -142px;
}

#fancybox-bg-w {
	top: 0;
	left: -20px;
	height: 100%;
	background-image: url('/img/third-party/fancybox-y.png');
}

#fancybox-bg-nw {
	top: -20px;
	left: -20px;
	background-image: url('/img/third-party/fancybox.png');
	background-position: -40px -122px;
}

#fancybox-title {
	font-family: Helvetica;
	font-size: 12px;
	z-index: 1102;
}

.fancybox-title-inside {
	padding-bottom: 10px;
	text-align: center;
	color: #333;
	background: #fff;
	position: relative;
}

.fancybox-title-outside {
	padding-top: 10px;
	color: #fff;
}

.fancybox-title-over {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFF;
	text-align: left;
}

#fancybox-title-over {
	padding: 10px;
	background-image: url('/img/third-party/fancy_title_over.png');
	display: block;
}

.fancybox-title-float {
	position: absolute;
	left: 0;
	bottom: -20px;
	height: 32px;
}

#fancybox-title-float-wrap {
	border: none;
	border-collapse: collapse;
	width: auto;
}

#fancybox-title-float-wrap td {
	border: none;
	white-space: nowrap;
}

#fancybox-title-float-left {
	padding: 0 0 0 15px;
	background: url('/img/third-party/fancybox.png') -40px -90px no-repeat;
}

#fancybox-title-float-main {
	color: #FFF;
	line-height: 29px;
	font-weight: bold;
	padding: 0 0 3px 0;
	background: url('/img/third-party/fancybox-x.png') 0px -40px;
}

#fancybox-title-float-right {
	padding: 0 0 0 15px;
	background: url('/img/third-party/fancybox.png') -55px -90px no-repeat;
}

/* IE6 */

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_close.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_nav_right.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_title_right.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
	height: expression(this.parentNode.clientHeight + "px");
}

#fancybox-loading.fancybox-ie6 {
	position: absolute; margin-top: 0;
	top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
}

#fancybox-loading.fancybox-ie6 div	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_loading.png', sizingMethod='scale'); }

/* IE6, IE7, IE8 */

.fancybox-ie .fancybox-bg { background: transparent !important; }

.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/third-party/fancy_shadow_nw.png', sizingMethod='scale'); }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */



@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }


}