/* Flash Messages */

#flash {
  font-size: 20px;
  text-align: center;
  display:none;
}

.flash_html {
  display: inline;
}

.flash_ajax{
  display:block;
  margin:0 auto 0 -200px;
  position:fixed;
  top:0px;
  left:50%;
  width:400px;
  z-index:1003;
  color:#222;
}

.flash_html div, .flash_ajax div {
  text-align: center;
  font-size: 14px;
  margin: 0px auto;
  width: 400px;
  padding: 5px 40px;
  background-color: #FFFDD7;
  border-bottom: 3px solid #FDFBA8;
  border-left: 3px solid #FDFBA8;
  border-right: 3px solid #FDFBA8;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}

.flash_ajax div.flash_error,
.flash_html div.flash_error,
.flash_ajax div.flash_critical,
.flash_html div.flash_critical {
  border-color: #FF0000;
  background-color: #FFBABA;
}

/* Portal Wrappers */

.wrapper {
  margin: 0 auto;
  width: 950px;
}

#company-support-portal {
  padding: 0 0 30px;
  overflow: hidden;
}

/* Breadcrumbs */

#breadcrumbs {
  color: #666;
  font-weight: bold;
  line-height: 30px;
  margin: 0 0 10px;
  width: 100%;
}

#status-update {
  margin-top: -4px;
  margin-right: -10px;
}

#status-update .myaccount-form {
  padding-top: 0;
}

/* Portal Company Header */

#company-header {
  background: #000;
  padding: 12px 0;
}

#company-header a {
  color: #FFF;
}

#company-header a:hover {
  color: #999;
  text-decoration: none;
}

#customer-account {
  float: right;
  color: #FFF;
  margin: 3px 0 0;
}

#customer-account span {
  float: left;
  padding: 4px 9px;
  font-weight: bold;
}

#customer-account a {
  float: left;
  display: inline-block;
  padding: 4px 9px;
  background: #2B2B2B;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#customer-account a:hover {
  background: #3B3B3B;
  color: #FFF;
}

/* Portal Support Header */

#support-header {
  background: #E5E5E5;
  border-bottom: 1px solid #ACACAC;
  margin: 0 0 30px;
  padding: 20px 0;
}

#support-header .wrapper {
  position: relative;
}

#support-header h2 {
  font-size: 32px;
  text-shadow: 0 1px 0 #FFF;
}

/* Support Side Column */

#support-side {
  float: left;
  margin: 0 0 0 20px;
  width: 230px;
}

#support-side .content {
  margin: 0 0 40px;
}

#support-side h3 {
  border-bottom: 1px solid #ccc;
  margin: 21px 0 30px 0;
  padding: 0 0 20px 0;
}

#support-side ul {
  list-style: none;
}

#support-side li {
  margin: 0 0 5px;
}

/* Support Side Column Twitter */

#tweets .tweet_avatar {
  display: none;
}

#tweets .tweet_time a {
  color: #999;
  display: block;
}

#tweets li {
  margin: 0 0 20px;
  line-height: 18px;
}

/* Support Side Twitter Widget */

#support-side .twitter-timeline-rendered {
  margin-top: 20px;
}

#support-side a.twitter-timeline {
  clear: both;
  display: block;
  margin-top: 20px;
}

/* Support Main Column */


#support-main .headline-image {
  margin-top: 5px;
}

/* Support Main Column Headers */

/*#support-main h4 {
  margin: 0 0 30px;
}*/

#support-main h5 {
  margin: 0 0 9px;
}

#support-main h5 a {
  background: #EEE;
  color: #666;
  font-size: 11px;
  padding: 3px 7px;
  margin: -2px 0 0 9px;
  position: absolute;
  text-decoration: none;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
}

/* Dashboard */

#support-main .dashboard h5 a:hover {
  text-decoration: none;
  color: #FFF;
  background: #254689;
}

#support-main .dashboard td {
  border-bottom: 1px solid #CCC;
  padding: 20px 0 10px;
}

#support-main .dashboard .row1 td {
  padding: 0 0 10px;
}

#support-main .dashboard .last td {
  border-bottom: none;
}

#support-main .dashboard .topic {
  margin: 0;
}


#support-main .dashboard .topic li {
  margin: 0 0 5px;
}

#support-main .dashboard .topic li.featured a {
  background: #FAFBCA;
  font-weight: bold;
}

#support-main .dashboard h5.questions {
  background-position: 0 -109px;
}

/* Article Lists */

#support-main .articles ul {
  list-style: none;
}

#support-main .articles h4 {
  margin: 0 0 5px;
  font-weight: normal;
}

#support-main .articles li {
  margin: 0 0 30px;
}

#support-main .articles li.question.featured {
  background-position: 0 -138px;
}

#support-main .articles li.article.featured {
  background-position: 0 -415px;
}

#support-main .articles li.featured h4 a {
  font-weight: bold;
  background: #FAFBCA;
}

#support-main .articles li p {
  margin: 0 0 5px;
  color: #777;
}

#support-main .articles .condensed {
  background: #FFFDF4;
  border: 1px solid #E3DEBF;
  margin: 0 0 30px;
  padding: 20px 20px 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

#support-main .articles .condensed li {
  margin: 0;
  padding: 0;
}

#support-main .articles .condensed h4 {
  font-size: 15px;
}

#support-main .articles .condensed p {
  margin: 0 0 20px 30px;
  color: #777;
}

#support-main .articles .condensed a {
  margin: 0 0 20px 30px;
}

/* Article List Metas */

#support-main #search-results .meta,
#support-main .articles .meta {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
  color: #333;
  margin: 5px 0;
}



#support-main .articles .meta .count,
#support-main .articles .meta .date,
#support-main .question-details .meta .name {
  margin: 0 5px 0 0;
  padding: 0 5px 0 0;
  border-right: 1px solid #DDD;
}

/* Article List Toggles */

#toggle {
  margin: 44px 0 22px;
  border-bottom: 1px solid #B8C2CC;
  margin-top: 0;
  padding-bottom: 0;
}

#toggle h3 {
  padding-top: 0;
}

#toggle div {
  float: right;
  margin: -38px 0 0 0;
}

#toggle a {
  background: #FFF;
  color: #666;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 7px;
  text-decoration: none;
  text-transform: uppercase;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
}

#toggle a:hover {
  text-decoration: none;
  color: #FFF;
  background: #254689;
}

#toggle .active, #toggle a.active:hover {
  background: #DDD;
  color: #000;
}

/* Page Title */

#support-main .title {
  border-bottom: 1px solid #CCC;
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
}

#support-main .title h3 {
  margin: 0 0 3px;
  padding: 0;
  border: 0;
}

#support-main .title .meta {
  margin: 0;
  font-weight: bold;
}

/* Article View & Question View */

#support-main .article-content h1,
#support-main .article-content h2,
#support-main .article-content h3,
#support-main .article-content h4,
#support-main .article-content h5,
#support-main .answer-details h1,
#support-main .answer-details h2,
#support-main .answer-details h3,
#support-main .answer-details h4,
#support-main .answer-details h5, {
  margin: 0 0 20px;
}

#support-main .article-content h1, #support-main .answer-details h1 {
  font-size: 22px;
}

#support-main .article-content h2, #support-main .answer-details h2 {
  font-size: 20px;
}

#support-main .article-content h3, #support-main .answer-details h3 {
  font-size: 18px;
}

#support-main .article-content h4, #support-main .answer-details h4 {
  font-size: 16px;
}

#support-main .article-content h5, #support-main .answer-details h5 {
  font-size: 15px;
}

#support-main .article-content ul, ol, #support-main .answer-details ul, #support-main .answer-details ol {
  margin-left:15px;
  list-style-position:inside;
}
#support-main .article-content p {
  margin:0;
}
#support-main .article-content blockquote, #support-main .article-content q,
#support-main .answer-details blockquote, #support-main .answer-details q {
  margin: 0.80em 0 0.80em 20px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  quotes: "" "";
}
#support-main .article-content blockquote p, #support-main .article-content q p,
#support-main .answer-details blockquote p, #support-main .answer-details q p {
  margin: 0;
  padding: 0.80em;
  color: #666;
  background: inherit;
}

/* Article View Attachments */

#attachments {
  border-bottom: 1px solid #CCC;
  padding: 0 0 20px;
  margin: 20px 0 0;
}

#attachments ul {
  list-style: none;
}

/* Article View Rating */

#rate_article_container {
  margin: 20px 0 0 0;
}

#rate_article div {
  color: #265007;
  float: left;
  width: 100%;
  margin: 0 0 6px;
  font-style: italic;
  height: 1%;
}

#rate_article_container .rate-link-down {
  color: #9b0909;
}

#rate_article_container .rate-link-down a {
  background-position: center -28px;
}

#rate_article_container span {
  float: left;
}

/* Question View */

#support-main .question {
  padding: 0;
}

#support-main .question .question-body {
  background: #FFFDF4;
  border-bottom: 1px solid #E3DEBF;
  margin: 0 0 20px;
  overflow: hidden;
  padding: 20px 20px 0;
}

#support-main .question .gravatar-wrapper {
  float: left;
  border: 1px solid #CCC;
  width: 56px;
  height: 56px;
}

#support-main .question .gravatar {
  float: left;
  border: 3px solid #FFF;
}

#support-main .question .question-details {
  padding: 0 0 0 70px;
}

#support-main .question .question-details h3 {
  border: 0;
  margin: 0 0 5px;
  padding: 0;
}

#support-main .question .question-details .meta {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}
#support-main .question .meta {
  font-weight: bold;
  margin: 0 0 10px;
}

/* Question Answers */

#support-main .question .replies {
  padding: 0 20px;
  margin: 0 0 20px;
}

#support-main .question .replies h4 {
  border-bottom: 1px solid #CCC;
  font-size: 15px;
  margin: 0;
  padding: 10px 0;
  text-transform: uppercase;
}

#support-main .question .replies.agents .reply {
  background: #FFF;
  padding: 20px 0 0;
}

#support-main .question .reply {
  margin: 0;
  overflow: hidden;
  height: 1%;
  padding: 20px 0 0 70px;
  position: relative;
}

#support-main .question .answer-details,
#support-main .myportal .interaction-details {
  padding: 0 0 0 70px;
}

#support-main .question .answer-details .meta {
  float: left;
  width: 100%;
  margin: 0;
}

#support-main .question .answer-details .meta span {
  display: block;
}

#support-main .question .answer-details .meta span.date {
  float: none;
  display: block;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
}

#support-main .question .answer-details .meta span.date-short {
  float: none;
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
}

#support-main .question .answer-details .answer-body {
  margin-bottom: 20px;
}

#support-main .interactions .interaction-details .interaction-body {
  margin-top: 10px;
}

/* Question View Rating */

#support-main .question .answer-rating {
  font-size: 20px;
  height: 53px;
  line-height: 20px;
  position: absolute;
  margin: 0 0 0 -70px;
  *margin: 0 0 0 -120px;
  text-align: center;
  width: 54px;
}

#support-main .question .answer-rating div {
  border: 1px solid #CCC;
  padding: 4px;
  height: 48px;
  overflow: hidden;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}


#support-main .question .answer-rating .decrement {
  background-position: center -25px;
}

#support-main .question .dialog {
  display: none;
}

#support-main .question .rating-true .score {
  display: inline-block;
  margin: 5px 0 0 0;
}

#support-main .question .rating-true .dialog {
  display: inline-block;
  color: #999;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
}

#support-main .question .score-positive {
  color: #396905;
}

#support-main .question .score-negative {
  color: #69050c;
}

/* Question View and Private Portal Reply Form */

#support-main .question #form,
#support-main .myportal #form {
  background: #f8f8f8;
  border: 1px solid #CCC;
  margin: 20px;
  padding: 20px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

#support-main .question .form-notice,
#support-main .myportal .form-notice {
  border-top: 1px solid #DDD;
  margin: 0 20px 20px;
  padding: 15px 0 0 0;
}

#support-main .question #form h4,
#support-main .myportal #form h4 {
  font-size: 15px;
  text-transform: uppercase;
  margin: 0 0 20px;
  padding: 0;
}

#support-main .question #form .input-block input[type=text],
#support-main .question #form .input-block textarea,
#support-main .myportal #form .input-block textarea {
  width: 610px;
}

/* Pre Create Headers */

#support-main .pre-create h4 {
  margin: 0 0 30px 0;
}

#support-main .pre-create ul h4 {
  margin: 0;
}

/* Support Forms */

#form .label {
  display: block;
  font-weight: bold;
  margin: 0 0 5px;
}

#form .label span {
  color: #999;
}

#form .input-block input[type=text],
#form .input-block textarea {
  /*display: block;*/
  font-size: 13px;
  margin: 0 0 20px;
  width: 650px;
}

#form .input-block textarea {
  height: 200px;
}

#form .input-block select {
  margin: 0 0 20px;
}

#form .input-button .disabled {
  background-position: 0 -38px;
}

#form .input-button img {
  display: none;
  margin: 7px 0 0 5px;
  position: absolute;
}

#form label.invalid {
  color: red;
  display: inline-block;
  margin: -20px 0 20px 0;
}

/* Pagination */

#paginate_block {
  margin: 0;
  text-align: center;
  width: 100%;
}

#paginate_block .pagination {
  height: auto;
  margin: 0;
  padding-top: 0;
  width: auto;
}

#paginate_block .current {
  background-color: #fff;
  border: 1px solid #CCC;
  padding: 4px;
}

/* Small Search */

.support-search-small div {
  position: relative;
}

.support-search-small #q {
  border: 0;
  border: 1px solid #CCC;
  color: #000;
  font-size: 13px;
  font-weight: bold;
  height: auto;
  margin-left: 0;
  margin-top: 0;
  padding: 7px 30px 7px 5px;
  width: 195px;
  outline: none;
  outline-width: 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

/* Big Search */

.support-search-big {
/*background: #E5E5E5;
border: 1px solid #CCC;
border-bottom-color: #ACACAC;
margin: 0pt 0pt 20px;
padding: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;*/
}

.support-search-big .outer {
  position: relative;
}

.support-search-big .inner {
  background: #FFF;
  border: 1px solid #CCC;
  border-top-color: #999;
  overflow: hidden;
  height: 37px;
  margin: 0;
  padding: 0 5px;
  width: 796px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.support-search-big #q {
  font-size: 18px;
  border: 0pt none;
  width: 100%;
  padding: 9px 0;
  margin: 0;
  outline: none;
  outline-width: 0;
  background: none;
}

/* Footer */

#footer {
  display: block;
  clear: both;
  text-align: center;
}

#question-mask {
  color: #AAA;
  position: absolute;
  width: 90%;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  display: block;
  text-overflow: ellipsis;
}

.question-big {
  font-size: 18px;
  top: 8px;
  left: 10px;
}

.question-small {
  font-size: 13px;
  top: 0;
  left: 0;
  padding: 8px;
  font-weight: bold;
}

.search-bg {
  display: none;
}

.highlight{
  background-color: #FFFAE1;
}

/* Modals */

#modal-screen {
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
}

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
}

#modal .inner {
  background: rgba(0,0,0,0.4);
  width: 700px;
  left: 50%;
  top: 50%;
  margin: -230px 0 0 -350px;
  position: absolute;
  padding: 5px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

#modal .inner h1 {
  text-align: center;
  font-size: 27px;
  padding: 25px 0 0;
}

#modal .inner p.subheader {
  font-size: 18px !important;
  color: #767676 !important;
  text-align: center;
  margin: 4px 0 30px 0;
}

#modal .inner .input-button {
  text-align: center;
  padding: 0 0 30px;
  font-size: 12px;
  font-weight: bold;
}

#modal .inner .input-button input {
  margin: 0 0 0 10px;
}

#modal .inner .note {
  text-align: center;
  color: #616161;
  margin: 0 0 20px 0 !important;
  font-size: 15px;
  font-style: italic;
}

#modal .main {
  background: #FFF;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#modal .close {
  float: right;
  margin: -16px -16px 0 0;
}

/* Auto Completion */

.ui-autocomplete {
  background: #FFF;
  border: 1px solid #C0C0C0;
  width: 100px;
  list-style: none;
  margin: 0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.ui-autocomplete a {
  padding: 9px;
  cursor: pointer;
  display: block;
}

.ui-autocomplete a:hover,
.ui-autocomplete a.ui-state-hover {
  background: #FFFAE1;
  text-decoration: none;
}

.ui-autocomplete li:first-child a {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}

.ui-autocomplete li:last-child a {
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}

.ui-autocomplete .QnaThread {
  background-position: 0 -106px;
}

.ui-autocomplete .article-autocomplete-subject {
  display: block;
  font-weight: bold;
  font-size: 15px;
}

.ui-autocomplete .article-autocomplete-body {
  display: block;
  font-size: 13px;
  color: #666;
}

/* Get Satisfaction Styles */

.gs_search_result {
  width:100% !important;
}

#gs_Sidebar_Results .tweet_time, .gs-search-result {
  padding-left: 20px;
}

#gs_search_title h5 {
  font-size:20px;
  border-bottom:1px solid #DDDDDD;
  margin:0 0 20px;
  padding:0 0 20px;
}

#question-best-answer {
  border: 1px solid #ddd;
  background: #FFF;
  border-radius: 5px;
  margin: 0 0 25px 70px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 20px 20px 0;
}

#support-main .agent-answer-label {
  margin: 0 0 10px;
}

#support-main #question-best-answer .reply {
  height: 1%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

#support-main .best-answer-green a {
  color: #6db400;
}

#support-main .best-answer-green a:hover {
  text-decoration: none;
}

#support-main #question-best-answer-heading {
  margin: 30px 0 10px 0;
}

#social-share {
  float: left;
  width: 80px;
  margin-left: -90px;
}

#social-share .share-btn {
  margin: 0 auto 15px auto;
  width: 60px;
  text-align: center;
}

#social-share .share-btn .fb-like {
  margin-left: 6px;
}

/* Private Portal */

.table .a-casechannel {
  width: 20px;
}

.table .a-caseid {
  width: 100px;
}

.table .a-casesubject {
  width: 65%;
}

#a-cases-filter {
  margin-right: 10px;
}

#support-main .myportal .content {
  background: #FFF;
}

.myportal-label {
  margin: 0 0 8px 0;
  padding-left: 22px;
  background: url('../images/mail.png') 0 0 no-repeat;
}

.myportal .mycases-filters {
  padding: 20px 0 0 0;

}

.myportal .a-selectbox {
  border: 1px solid #BEBEBE;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #FFF;
  -webkit-border-image: none;
  display: block;
  float: left;
  padding: 4px;
  text-decoration: none;
  zoom: 1;
}

.myportal .a-selectbox select {
  background: url("/images/arrow_down.png") right 0px no-repeat;
  border: none;
  box-sizing: border-box;
  white-space: pre;
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  padding: 2px 3px;
  font-size: 12px;
  width: 190px;
}

.myportal .a-checkbox {
  float: left;
  margin: 5px;
  color: #333;
  font-size: 11px;
}

.myportal-button, .myportal-button:visited {
  float: right;
  padding: 8px 6px;
  border: 0;
  background: url(/images/portal/button.gif) 0 0 repeat-x;
  font-weight: bold;
  font-size: 11px;
  display: block;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #fff !important;
  text-transform: uppercase;
}

.myportal-button:hover {
  text-decoration: none;
}

.myportal .mycases {
/*  background:##E5E5E5;
  width: 100%;
  border-collapse:collapse;
  font:normal 12px verdana, arial, helvetica, sans-serif;
  margin: 0px 0px 30px 0px;
  -moz-box-shadow: 0 3px 4px #CCC;
  -webkit-box-shadow: 0 3px 4px #CCC;*/
}

.myportal .mycases caption {
  border:1px solid #5C443A;
  color:#5C443A;
  font-weight:bold;
  letter-spacing:20px;
  padding:6px 4px 8px 0px;
  text-align:center;
  text-transform:uppercase;
}

/*.myportal .mycases td, th {
  color:#363636;
  padding: 11px 5px;
}*/

/*.myportal .mycases tr {
  background: #FFF;
  border: 1px solid #ccc;
}*/

/*.myportal .mycases tbody tr:hover {
  cursor: pointer;
}

.myportal .mycases thead th, tfoot th {
  background: #E8E8E8;
  font-size: 10px;
  font-weight: bold;
  color:#666;
  padding: 6px 5px;
  text-align:left;
  text-transform:uppercase;
}
*/
.myportal .mycases a {
  text-decoration:none;
}

.myportal .mycases a:hover {
  text-decoration: underline;
}

.myportal .mycases tbody th, .myportal .mycases tbody td {
  text-align:left;
  vertical-align:middle;
}

.myportal .mycases tfoot td {
  background:#5C443A;
  color:#FFFFFF;
  padding-top:3px;
}

.myportal .mycases .a-casechannel {
  text-align: center;
  vertical-align: middle;
  width: 20px;
  padding: 11px 0 11px 11px;
}

.myportal .case-block{
  float: left;
  margin-right: 60px;
}

.myportal .a-caseid {
  padding-left: 15px;
}

.myportal .a-caseid, .myportal .a-casestatus {
  width: 70px;
}

.myportal .a-casecreated {
  width: 60px;
}

#support-main .case {
  padding: 0;
}

#support-main .myportal .case-details, #support-main .myportal .interaction {
  padding: 25px 20px;
}

#support-main .myportal .interaction {
  min-height: 60px;
  padding-bottom: 0;
}

#support-main .myportal .case-details {
  background-color: #fffdef;
}

#support-main .myportal .case-details h3 {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  width: 510px;
  font-size: 18px;
  vertical-align: top;
  float: left;
}

#support-main .myportal .status {
  float: right;
  font-weight: bold;
}

#support-main .myportal .status img {
  vertical-align: middle;
}

#support-main .myportal .status .a-New,
#support-main .myportal .status .a-Open,
#support-main .myportal .status .a-Pending,
#support-main .myportal .status .a-Resolved,
#support-main .myportal .status .a-Closed {
  color: #fff;
  padding: 2px 8px;
  font-weight:bold;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

#support-main .myportal .status .a-New {
  background-color: #5B75AF;
  border: #465A86 1px solid;
}

#support-main .myportal .status .a-Open {
  background-color: #61A00F;
  border: #4A7B0B 1px solid;
}

#support-main .myportal .status .a-Pending {
  background-color: #DE901B;
  border: #AA6E14 1px solid;
}

#support-main .myportal .status .a-Resolved {
  background-color: #A5A5A5;
  border: #7E7E7E 1px solid;
}

#support-main .myportal .status .a-Closed {
  background-color: #DE901B;
  border: #AA6E14 1px solid;
}

#support-main .myportal .meta {
  clear: both;
  color: #888;
  line-height: 16px;
}

#support-main .myportal .meta strong {
  color: #000;
}

.myportal #paginate_block .pagination {
  background-color: transparent;
}

/* Private Portal - Case Detail */

#support-main .myportal .case-details .meta span.date,
#support-main .myportal .interaction-details span.date {
  margin: 0;
  color: #888;
}

#support-main .myportal .interaction-details span.date {
  float: right;
  text-align: right;
}

#support-main .myportal .meta .case-data {
  list-style: none;
  width: 50%;
  float: left;
  position: relative;
}

#support-main .myportal .meta .case-dates {
  list-style: none;
  width: 50%;
  float: right;
  position: relative;
}

#support-main .myportal .meta .case-dates strong {
  display: inline-block;
  text-align: right;
  width: 50%;
  *display: inline;
  zoom: 1;
}

#support-main .myportal .meta .name {
  font-weight: bold;
  text-transform: uppercase;
}

#support-main .myportal .interactions {
  border-top: 1px solid #E3DEBF;
  padding-bottom: 20px;
}

#customer-account a {
  margin-left: 9px;
}

#support-main .myportal .gravatar-wrapper {
  position: absolute;
  border: 1px solid #CCC;
  width: 56px;
  height: 56px;
}

#support-main .myportal .gravatar {
  float: left;
  border: 3px solid #FFF;
}

#support-main .myportal .gravatar.twitter-avatar {
  border: 4px solid #fff;
}

#support-main .myportal .interaction-details .meta {
  width: 100%;
  margin: 0;
}

#support-main .myportal .interactions .system-message {
  padding: 15px 20px 0 20px;
  color: #aaa;
  font-size: 12px;
}

#support-main .myportal .interactions .chat {
  padding: 18px 20px 10px;
}

#support-main .myportal .interactions .chat .interaction-details {
  padding: 0;
}

#support-main .myportal .interactions .chat .interaction-details .meta span {
  color:#000;
  font-weight:bold;
}

#support-main .myportal .interactions .chat .interaction-details .meta span.date {
  color: #888;
  font-weight: normal;
}

#support-main .myportal .interactions .chat .interaction-body {
  padding-right: 50px;
  margin-top: 5px;
}

#support-main .myportal .case-footer {
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding: 25px 20px 0;
}

#support-main .myportal .case-footer p {
  margin-bottom: 5px;
}

/* Private Portal - My Profile */

.myaccount-form {
  padding-top: 20px;
}

.myaccount-form .new_customer_contact_email {
  padding: 30px 0;
  border-top: 1px solid #DDD;
}

.myaccount-form div img {
  vertical-align: middle;
}

.myaccount-form div[id^="email_"],
.myaccount-form div[id^="twitter_user_"],
.myaccount-form div[id^="facebook_user_"],
.myaccount-form div[id^="add_"] {
  padding: 15px 0;
  font-size: 14px;
  color: #666;
  position: relative;
  border-top: 1px solid #DDD;
}

.myaccount-form div[id^="twitter_user_"] form div,
.myaccount-form div[id^="facebook_user_"] form div {
  position: absolute;
  top: 10px;
  right: 0px;
}

.myaccount-form div[id^="email_"] div[id^="delete_"] form div {
  position: absolute;
  top: 10px;
  right: 78px;
}

.myaccount-form input[id^="update_status"]:disabled {
  cursor: help;
}

.myaccount-form div[id^="verified_"] input,
.myaccount-form div[id^="delete_"] input,
.myaccount-form input[id^="update_status"],
.myaccount-form input[id^="update_status"]:disabled {
  background-color: #f9f9f9;
  border: 1px solid #cfcfcf;
  color: #666;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
  padding: 6px 15px 7px;
  height: 30px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
}

.myaccount-form div[id^="verified_"] input:hover,
.myaccount-form div[id^="delete_"] input:hover,
.myaccount-form input[id^="update_status"]:hover {
  background-color: #fff;
  border-color: #b4b4b4;
}

.myaccount-form div[id^="email_"]:hover,
.myaccount-form div[id^="twitter_user_"]:hover,
.myaccount-form div[id^="facebook_user_"]:hover,
.myaccount-form div[id^="add_"]:hover {
  background-color:#f9f9f9;
}

#authentication-verification-copy {
  display: inline-block;
  padding-left: 20px;
  width: 50%;
  zoom: 1;
  *display: inline;
}

.authentication_verification-form {
  display: inline-block;
  height: 100px;
  zoom: 1;
  *display: inline;
}

.authentication_verification-form form {
  background-color: #eefaff;
  display: inline-block;
  padding: 25px 20px;
  zoom: 1;
  *display: inline;
}

.myaccount-form .verified,
.authentication_verification-form .verified {
  position: absolute;
  top: 10px;
  right: 0;
  color: #3d8933;
  padding: 7px 1px 0 0;
  font-weight: bold;
  font-size: 13px;
}

.myaccount-form div[id^="email_"] .verified form div,
.myaccount-form div[id^="twitter_user_"] .verified form div,
.myaccount-form div[id^="facebook_user_"] .verified form div {
  margin-top: -7px;
}

.myaccount-form input[type="text"],
.authentication_verification-form input[type="text"] {
  font-size: 12px;
  border: 1px solid #C0C0C0;
  float: left;
  margin: 0 5px 8px 0;
  width: 195px;
  padding: 8px 4px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.myaccount-form button,
.authentication_verification-form button {
  height: 32px;
  padding: 0 6px;
  border: 1px solid #C0C0C0;
  background: url('/images/portal/button.gif') 0 0 repeat-x;
  color: #FFF;
  cursor: pointer;
  border: 0;
  float: left;
  margin: 0;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.myaccount-form label.invalid,
.authentication_verification-form label.invalid {
  font-weight: normal;
  display: block !important;
  clear: both;
  margin: 10px 0 20px 0;
}

/* Private Portal - Login and Registration */

.login-form, .registration-form, .forgotpw-form, .alternatelogins {
  padding: 20px 0;
}

.alternatelogins {
  float: right;
  padding: 20px 0;
}

.login-form .field label, .registration-form .field label, .forgotpw-form .field label {
  font-weight: bold;
  font-size: 14px;
  display: block;
}

.login-form .field input, .registration-form .field input, .forgotpw-form .field input {
  font-size: 14px;
  border: 1px solid #999;
  display: block;
  margin: 4px 0 15px 0;
  width: 250px;
  padding: 8px 4px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.login-form .actions input {
  width: 80px;
  margin-bottom: 40px;
}

.login-form .newaccount, .login-form .forgotpw {
  font-weight: bold;
  float: left;
}

.login-form .forgotpw {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid #999;
}

.registration-form label.invalid,
.forgotpw-form label.invalid {
  font-weight: normal;
  display: block;
  margin: -10px 0 20px 0;
}

.login-form form {
  float: left;
  width: 330px;
}

.left-divider {
  border-left: 1px solid #ccc;
}

.alternatelogins {
  float: left;
  height: 200px;
  padding-left: 25px;
}

.alternatelogins div {
  margin: 0 0 20px 0;
}

.alternatelogins a,
#add_facebook input,
#add_twitter input {
  position: relative;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-size: 20px;
  padding: 0 1em;
  border: 1px solid #999;
  border-radius: 2px;
  margin: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  color: #222;
  background: #fff;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance: none;
  *overflow: visible;
  *display: inline;
  *zoom: 1;
}

.alternatelogins a:hover,
.alternatelogins a:focus,
.alternatelogins a:active,
#add_facebook input,
#add_twitter input {
  color: #222;
  text-decoration: none;
}

.alternatelogins a:before {
  content: "";
  float: left;
  width: 36px;
  height: 36px;
  background: url(/images/portal/auth-icons.png) no-repeat 99px 99px;
}

.alternatelogins #twitter,
#add_twitter input {
  border-color: #a6cde6;
  color: #327695;
  background: #cfe4f0;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f5f7), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(#f1f5f7, rgba(255,255,255,0));
  background-image: -moz-linear-gradient(#f1f5f7, rgba(255,255,255,0));
  background-image: -ms-linear-gradient(#f1f5f7, rgba(255,255,255,0));
  background-image: -o-linear-gradient(#f1f5f7, rgba(255,255,255,0));
  background-image: linear-gradient(#f1f5f7, rgba(255,255,255,0));
  -webkit-box-shadow: inset 0 1px 0 #fff;
  box-shadow: inset 0 1px 0 #fff;
}

.alternatelogins #twitter:hover,
.alternatelogins #twitter:focus,
.alternatelogins #twitter:active,
#add_twitter input:hover,
#add_twitter input:focus,
#add_twitter input:active {
  color: #327695;
  border-color: #8dc2e4;
  background-color: #cadde9;
}

.alternatelogins #twitter:active,
#add_twitter input:active {
  background: #cadde9;
  -webkit-box-shadow: inset 0 1px 0 #bbd6e7;
  box-shadow: inset 0 1px 0 #bbd6e7;
}

.alternatelogins #twitter:before {
  margin: 0 0.6em 0 -0.6em;
  background-position: -36px -22px;
}

.alternatelogins #facebook,
#add_facebook input {
  border-color: #29447e;
  border-bottom-color: #1a356e;
  color: #fff;
  background-color: #5872a7;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
  background-image: -webkit-linear-gradient(#637bad, #5872a7);
  background-image: -moz-linear-gradient(#637bad, #5872a7);
  background-image: -ms-linear-gradient(#637bad, #5872a7);
  background-image: -o-linear-gradient(#637bad, #5872a7);
  background-image: linear-gradient(#637bad, #5872a7);
  -webkit-box-shadow: inset 0 1px 0 #879ac0;
  box-shadow: inset 0 1px 0 #879ac0;
}

.alternatelogins #facebook:hover,
.alternatelogins #facebook:focus,
#add_facebook input:hover,
#add_facebook input:focus {
  color: #fff;
  background-color: #3b5998;
}

.alternatelogins #facebook:active,
#add_facebook input:active {
  color: #fff;
  background: #4f6aa3;
  -webkit-box-shadow: inset 0 1px 0 #45619d;
  box-shadow: inset 0 1px 0 #45619d;
}

.alternatelogins #facebook:before {
  border-right: 1px solid #465f94;
  margin: 0 1em 0 -1em;
  background-position: 0 -22px;
}

#add_facebook input,
#add_twitter input {
  height: 22px;
  font-size: 11px;
  line-height: 22px;
  padding-left: 35px;
}

#add_facebook input {
  background: url(/images/portal/auth-icons.png) no-repeat -265px -25px #5872a7;
}

#registration-in-progress {
  display: none;
  padding: 5px;
  background-color: #fffdef;
  border-color: 2px solid #ede9c2;
}

#registration-in-progress img {
  float: left;
  margin-right: 5px;
}

#add_twitter input {
  background: url(/images/portal/auth-icons.png) no-repeat -261px 0 #cfe4f0;
}

.desk-external-variables {
  display: none;
}


.hidden {
  display: none;
}

.desk_file_upload {
  overflow: hidden;
}

.desk_file_upload input[type=file] {
  float: left;
  outline:none;
  position: relative;
  text-align: right;
  -moz-opacity:0 ;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
  width:100%;
  height:100%;
  margin-left: -99999px;
}

.desk_file_upload input[type=button] {
  float: left;
}

.desk_file_upload .faux-file-field {
  padding: 0 8px 0 0;
  margin: 0;
  z-index: 1;
  float: left;
}

.desk_file_upload .faux-file-field input[type=text] {
  width:180px !important;
}

/**
* Overrides
*/
@media(max-width: 768px) {
  #social-share {
    display: none;
  }
}

label.invalid {
  color: #A94442;
  margin-top: 5px;
}
.form-control.invalid {
  border-color: #A94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.search-wrap {
  margin-bottom: 20px;
}

#breadcrumbs {
  padding: 8px 15px;
  margin-bottom: 22px;
  list-style: none;
  background-color: #F5F5F5;
  border-radius: 0;
}
/**
 * UM-Flint 
 */
.well h4 {
  margin-top:0;
}

#interactions .media-body .well {
  margin-bottom: 0;
  margin-top: 10px;
}

.panel .panel-body ul {
  margin-bottom: 0;
}

## Added for Video.js by joelhowa ##
/*!
 * Video.js Default Styles (http://videojs.com)
 * Version 4.6.4
 * Create your own skin at http://designer.videojs.com
 * */
/* SKIN
 * ================================================================================
 * The main class name for all skin-specific styles. To make your own skin,
 * replace all occurances of 'vjs-default-skin' with a new name. Then add your new
 * skin name to your video tag instead of the default skin.
 * e.g. <video class="video-js my-skin-name">
 * */
.vjs-default-skin {
  color: #cccccc;
}
/* Custom Icon Font
 * --------------------------------------------------------------------------------
 * The control icons are from a custom font. Each icon corresponds to a character
 * (e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
 * */
@font-face {
  font-family: 'VideoJS';
  src: url('font/vjs.eot');
  src: url('font/vjs.eot?#iefix') format('embedded-opentype'), url('font/vjs.woff') format('woff'), url('font/vjs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Base UI Component Classes
 * --------------------------------------------------------------------------------
 * */
/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
  /* Replace browser focus hightlight with handle highlight */
  outline: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  /* background-color-with-alpha */
  background-color: #333333;
  background-color: rgba(51, 51, 51, 0.9);
}
.vjs-default-skin .vjs-slider:focus {
  /* box-shadow */
  -webkit-box-shadow: 0 0 2em #ffffff;
  -moz-box-shadow: 0 0 2em #ffffff;
  box-shadow: 0 0 2em #ffffff;
}
.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}
.vjs-default-skin .vjs-slider-handle:before {
  content: "\e009";
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0em 0em 1em #fff;
  position: absolute;
  top: 0;
  left: 0;
  /* Rotate the square icon to make a diamond */
  /* transform */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* Control Bar
 * --------------------------------------------------------------------------------
 * The default control bar that is a container for most of the controls.
 * */
.vjs-default-skin .vjs-control-bar {
  /* Start hidden */
  display: none;
  position: absolute;
  /* Place control bar at the bottom of the player box/video.
 *      If you want more margin below the control bar, add more height. */
  bottom: 0;
  /* Use left/right to stretch to 100% width of player div */
  left: 0;
  right: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
}
/* Show the control bar only once the video has started playing */
.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block;
  /* Visibility needed to make sure things hide in older browsers too. */

  visibility: visible;
  opacity: 1;
  /* transition */
  -webkit-transition: visibility 0.1s, opacity 0.1s;
  -moz-transition: visibility 0.1s, opacity 0.1s;
  -o-transition: visibility 0.1s, opacity 0.1s;
  transition: visibility 0.1s, opacity 0.1s;
}
/* Hide the control bar when the video is playing and the user is inactive  */
.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* transition */
  -webkit-transition: visibility 1s, opacity 1s;
  -moz-transition: visibility 1s, opacity 1s;
  -o-transition: visibility 1s, opacity 1s;
  transition: visibility 1s, opacity 1s;
}
.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
  display: none;
}
.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
  display: none;
}
/* The control bar shouldn't show after an error */
.vjs-default-skin.vjs-error .vjs-control-bar {
  display: none;
}
/* IE8 is flakey with fonts, and you have to change the actual content to force
 * fonts to show/hide properly.
 *   - "\9" IE8 hack didn't work for this
 *     - Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
 *     */
@media \0screen {
  .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
    content: "";
  }
}
/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em;
}
/* FontAwsome button icons */
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em #ffffff;
}
.vjs-default-skin .vjs-control:focus {
  /*  outline: 0; */
  /* keyboard-only users cannot see the focus on several of the UI elements when
 *   this is set to 0 */

}
/* Hide control text visually, but have it available for screenreaders */
.vjs-default-skin .vjs-control-text {
  /* hide-visually */
  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;
}
.vjs-default-skin .vjs-play-control:before {
  content: "\e001";
}
.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e002";
}
/* Playback toggle
 * --------------------------------------------------------------------------------
 * */
.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value {
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.vjs-default-skin .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
  width: 4em;
  left: -2em;
  list-style: none;
}
/* Volume/Mute
 * -------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right;
}
.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e006";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004";
}
.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005";
}
.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right;
}
.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em;
}
.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  /* assuming volume starts at 1.0 */

  width: 100%;
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}
.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em;
  /* Assumes volume starts at 1.0. If you change the size of the
 *      handle relative to the volume bar, you'll need to update this value
 *           too. */

  left: 4.5em;
}
.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em;
}
.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em;
}
/* Progress
 * --------------------------------------------------------------------------------
 * */
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;
  /* Shrink the bar slower than it grows. */
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
/* On hover, make the progress bar grow to something that's more clickable.
 *     This simply changes the overall font for the progress bar, and this
 *         updates both the em-based widths and heights, as wells as the icon font */
.vjs-default-skin:hover .vjs-progress-control {
  font-size: .9em;
  /* Even though we're not changing the top/height, we need to include them in
 *       the transition so they're handled correctly. */

  /* transition */
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  height: 100%;
}
/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* updated by javascript during playback */

  width: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0;
}
.vjs-default-skin .vjs-play-progress {
  /*
 *     Using a data URI to create the white diagonal lines with a transparent
 *           background. Surprisingly works in IE8.
 *                 Created using http://www.patternify.com
 *                     Changing the first color value will change the bar color.
 *                         Also using a paralax effect to make the lines move backwards.
 *                               The -50% left position makes that happen.
 *                                 */

  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}
.vjs-default-skin .vjs-load-progress {
  background: #646464 /* IE8- Fallback */;
  background: rgba(255, 255, 255, 0.4);
}
.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%;
}
.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em /* Minor adjustment */;
}
/* Live Mode
 * --------------------------------------------------------------------------------
 * */
.vjs-default-skin.vjs-live .vjs-time-controls,
.vjs-default-skin.vjs-live .vjs-time-divider,
.vjs-default-skin.vjs-live .vjs-progress-control {
  display: none;
}
.vjs-default-skin.vjs-live .vjs-live-display {
  display: block;
}
/* Live Display
 * --------------------------------------------------------------------------------
 * */
.vjs-default-skin .vjs-live-display {
  display: none;
  font-size: 1em;
  line-height: 3em;
}
/* Time Display
 * --------------------------------------------------------------------------------
 * */
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em;
}
.vjs-default-skin .vjs-current-time {
  float: left;
}
.vjs-default-skin .vjs-duration {
  float: left;
}
/* Remaining time is in the HTML, but not included in default design */
.vjs-default-skin .vjs-remaining-time {
  display: none;
  float: left;
}
.vjs-time-divider {
  float: left;
  line-height: 3em;
}
/* Fullscreen
 * --------------------------------------------------------------------------------
 * */
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right;
}
.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e000";
}
/* Switch to the exit icon when the player is in fullscreen */
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b";
}
/* Big Play Button (play button at start)
 * --------------------------------------------------------------------------------
 * Positioning of the play button in the center or other corners can be done more
 * easily in the skin designer. http://designer.videojs.com/
 * */
.vjs-default-skin .vjs-big-play-button {
  left: 0.5em;
  top: 0.5em;
  font-size: 3em;
  display: block;
  z-index: 2;
  position: absolute;
  width: 4em;
  height: 2.6em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  /* Need a slightly gray bg so it can be seen on black backgrounds */
  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  border: 0.1em solid #3b4249;
  /* border-radius */
  -webkit-border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  border-radius: 0.8em;
  /* box-shadow */
  -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
  /* transition */
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
/* Optionally center */
.vjs-default-skin.vjs-big-play-centered .vjs-big-play-button {
  /* Center it horizontally */
  left: 50%;
  margin-left: -2.1em;
  /* Center it vertically */
  top: 50%;
  margin-top: -1.4000000000000001em;
}
/* Hide if controls are disabled */
.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
  display: none;
}
/* Hide when video starts playing */
.vjs-default-skin.vjs-has-started .vjs-big-play-button {
  display: none;
}
/* Hide on mobile devices. Remove when we stop using native controls
 *     by default on mobile  */
.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
  display: none;
}
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
  border-color: #fff;
  /* IE8 needs a non-glow hover state */
  background-color: #505050;
  background-color: rgba(50, 50, 50, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 3em #ffffff;
  -moz-box-shadow: 0 0 3em #ffffff;
  box-shadow: 0 0 3em #ffffff;
  /* transition */
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
}
.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  font-family: VideoJS;
  /* In order to center the play icon vertically we need to set the line height
 *      to the same as the button height */

  line-height: 2.6em;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center /* Needed for IE8 */;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.vjs-error .vjs-big-play-button {
  display: none;
}
/* Error Display
 * --------------------------------------------------------------------------------
 * */
.vjs-error-display {
  display: none;
}
.vjs-error .vjs-error-display {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.vjs-error .vjs-error-display:before {
  content: 'X';
  font-family: Arial;
  font-size: 4em;
  color: #666666;
  /* In order to center the play icon vertically we need to set the line height
 *      to the same as the button height */

  line-height: 1;
  text-shadow: 0.05em 0.05em 0.1em #000;
  text-align: center /* Needed for IE8 */;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  width: 100%;
}
.vjs-error-display div {
  position: absolute;
  font-size: 1.4em;
  text-align: center;
  bottom: 1em;
  right: 1em;
  left: 1em;
}
.vjs-error-display a,
.vjs-error-display a:visited {
  color: #F4A460;
}
/* Loading Spinner
 * --------------------------------------------------------------------------------
 * */
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 4em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
  /* animation */
  -webkit-animation: spin 1.5s infinite linear;
  -moz-animation: spin 1.5s infinite linear;
  -o-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}
/* Errors are unrecoverable without user interaction,
 *    so hide the spinner in the case of an error */
.video-js.vjs-error .vjs-loading-spinner {
  /* using !important flag because currently the loading spinner
 *      uses hide()/show() instead of classes. The !important can be
 *           removed when that's updated */

  display: none !important;
  /* ensure animation doesn't continue while hidden */

  /* animation */
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}
.vjs-default-skin .vjs-loading-spinner:before {
  content: "\e01e";
  font-family: VideoJS;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
/* Menu Buttons (Captions/Subtitles/etc.)
 * --------------------------------------------------------------------------------
 * */
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer;
}
.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em;
  /* (Width of vjs-menu - width of button) / 2 */

  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid #000000;
  /* Same width top as ul bottom */

  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */

}
/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  /* Same bottom as vjs-menu border-top */

  max-height: 15em;
  overflow: auto;
  left: -5em;
  /* Width of menu - width of button / 2 */

  /* background-color-with-alpha */
  background-color: #07141e;
  background-color: rgba(7, 20, 30, 0.7);
  /* box-shadow */
  -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
}
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
  display: block;
}
.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}
.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000;
}
.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 {
  outline: 0;
  color: #111;
  /* background-color-with-alpha */
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.75);
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em #ffffff;
  -moz-box-shadow: 0 0 1em #ffffff;
  box-shadow: 0 0 1em #ffffff;
}
.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;
  font-weight: bold;
  cursor: default;
}
/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before {
  content: "\e00c";
}
/* Captions Button */
.vjs-default-skin .vjs-captions-button:before {
  content: "\e008";
}
/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  /* box-shadow */
  -webkit-box-shadow: 0 0 1em #ffffff;
  -moz-box-shadow: 0 0 1em #ffffff;
  box-shadow: 0 0 1em #ffffff;
}
/*
 * 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.*/

  /* Provide some basic defaults for fonts */

  font-weight: normal;
  font-style: normal;
  /* Avoiding helvetica: issue #376 */

  font-family: Arial, sans-serif;
  /* Turn off user selection (text highlighting) by default.
 *      The majority of player components will not be text blocks.
 *           Text areas will need to turn user selection back on. */

  /* user-select */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* 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%;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
  overflow-y: auto;
}
.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;
  /* IE6 full-window (underscore hack) */
  _position: absolute;
}
.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}
/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%;
}
/* Hide the poster when native controls are used otherwise it covers them */
.video-js.vjs-using-native-controls .vjs-poster {
  display: none;
}
/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  /* Leave padding on left and right */
  left: 1em;
  right: 1em;
}
/* Move captions down when controls aren't being shown */
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}
/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  /* background-color-with-alpha */
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.5);
}
.video-js .vjs-subtitles {
  color: #ffffff /* Subtitles are white */;
}
.video-js .vjs-captions {
  color: #ffcc66 /* Captions are yellow */;
}
.vjs-tt-cue {
  display: block;
}
/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden {
  display: none;
}
.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible;
}
/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
 *      The .video-js classname on the video tag also isn't considered.
 *          This optional paragraph inside the video tag can provide a message to users
 *              about what's required to play video. */
.vjs-no-js {
  padding: 20px;
  color: #ccc;
  background-color: #333;
  font-size: 18px;
  font-family: Arial, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto;
}
.vjs-no-js a,
.vjs-no-js a:visited {
  color: #F4A460;
}
/* -----------------------------------------------------------------------------
 * The original source of this file lives at
 * https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
## End of Video.js - joelhowa ##