html, body { padding: 0; margin: 0; height: 100%; }
body { background: #f3f3f3 url(images/gradient_top.png) repeat-x; font: normal 12px Arial; color: #3e3e3e; line-height: 20px; }
img { border: 0; }
a { text-decoration: none; color:#257CD6; }
a:hover { text-decoration: underline; cursor: pointer; }
li { list-style-type:none; line-height:1.2em;}
ul, ol {margin:0; padding:0;}

.browser-too-old { padding: 5px 0; font-size: 14px; background-color: #CFF1FF; text-align: center;  }
.browser-too-old a { color: #0672B2; }

h1 {font-size: 14px; margin-bottom: 10px; font-family: Georgia;  font-weight: bold; color: #061B53; text-transform: uppercase; }
h2 { font-size: 12px; margin-bottom: 10px; font-family: Georgia;  font-weight: bold; color: #061B53; text-transform: uppercase; }
h3 { font-size: 12px; font-weight: bold; color: #000; margin-bottom: 5px; }

.timestamp { font: italic 12px Georgia; color: #e7e7e7; margin-bottom: 2px; }

.debug { border: dashed 1px red !important; }


/* Common */
.columns {}
.column-left { width: 48%; float: left; }
.column-right { width: 48%; float: right; }
.none { color: Silver; }
.negative-attention { color: #c74343; }


/* Hacks */
/* Sticky footer Opera fix */
body:before { content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; }

/* Clearfix */
.clearfix:after {	content: "."; display: block;	clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block;}
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%;}


/* Forms */
.f-ajax { /* Isn't used for styling, just to support IntelliSense */ }
.f-cancellable { /* Isn't used for styling, just to support IntelliSense */ }
.f-result { /* Isn't used for styling, just to support IntelliSense */ }
.f-row { margin-bottom: 15px; }
.f-col { margin-left: 10px; float: left; }
.f-col:first-child { margin-left: 0; }
input.text.required, select.text.required, textarea.text.required { background-image: url(images/input-required-bg.png); }
input.text[disabled], select.text[disabled], textarea.text[disabled] { background: #F8F8F8; color: #898989; }
input.text.time { /* I usually just change the width here */ }
input.text.city { width: 213px; }
input.text.postal-code { width: 120px; }
input.text.security-number { width: 65px; }
input.text.date { text-align: center; width: 130px; }
input.text.money { width: 130px; }
input.text.phone { width: 215px; }
input.text.initial { width: 30px; text-transform: uppercase; }
select.text { width: 314px; padding: 7px 5px; height: 36px; }
select.text.state { width: 77px; }
select.text.month { width: 201px; }
select.text.year { width: 103px; }
select.text.day { width: 63px; }
select.text.shirt-size { width: 85px; }
textarea.text { height: 200px; }
.f-label-top { display: block; font-size: 12px; /* To add line break */ }
.f-label-top.required { /* Styles for required labels */ }
.f-label-top + input.text { display: block; margin-top: 2px; width:193px; height:23px; /* background:url(/local/css/images/search-box.jpg) 0 0 no-repeat; border:none; */ padding:0 10px;/* Adds line breaks after '.top' labels, should add for select and textarea, too */ }
.f-label-top .note { font-size: 12px; color: #b83434; font-style: normal; }
.f-label-side { float: left; width: 175px; text-align: right; margin-right: 10px; margin-top: 7px; }
.f-label-side + input.text { float: left; }
.f-label-side + .f-row-fields { float: left; }
.f-row-fields input { margin-left: 0; }
.f-row-fields label { margin-top: 6px; }
.f-row-fields label.stand-alone { float: left; }
.required-mark { color: #cc2a41; }
.f-buttons { /*padding-top: 14px;*/ margin-left: 185px; }
.f-buttons > * { float: left; }
.f-row-info { float: left; margin-left: 10px; margin-top: 10px; }
.f-row-info .help { background: url(icons/question-mark-17.png) no-repeat left top; width: 17px; height: 17px; display: block; overflow: hidden; text-indent: -9999px; }
.f-row-info .loading { background: url(images/loader.gif) no-repeat left top; width: 16px; height: 16px; display: block; overflow: hidden; text-indent: -9999px; }
.f-col .f-buttons { margin-top: 5px; }
.f-col > button { margin-top: 1px; } 
.f-alt-actions { margin-left: 6px; margin-top: 1px; /* For links such as Cancel etc. */ }
.f-note { font: normal 14px Trebuchet MS; color: #9F9F9F; text-transform: uppercase; }
.f-label-checkboxed input { display: block; float: left; }
.f-label-checkboxed span { display: block; float: left; margin-left: 2px; font: normal 12px Arial; margin-top: 2px; width: 290px; }

.f-row.device-count { font-weight: normal; font-size: 24px; line-height: 34px; padding: 15px 0 9px; }
.f-row.device-count .text { text-align: center; width: 55px; }

input.text.erroneous, textarea.text.erroneous, select.text.erroneous { background-image: url(images/input-erroneous-bg.png); border-color: #e03232; }
em.erroneous { color: Red; display: block; font-size: 12px; margin: 0; font-family: Helvetica, Arial; clear: both; margin: 0px; }
.f-col em.erroneous { margin-left: 0; }

.default-68x25-login { background: url(buttons/default-68x25-login.png) no-repeat left top; display: block; padding: 0;  width: 68px; height: 25px; border: 0; cursor: pointer; text-indent: -9999px; overflow: hidden; }
.default-68x25-login:hover { background-position: left -25px; }
.default-68x25-register { background: url(buttons/default-68x25-register.png) no-repeat left top; display: block; padding: 0; width: 68px; height: 25px; border: 0; cursor: pointer; text-indent: -9999px; overflow: hidden; }
.default-68x25-register:hover { background-position: left -25px; }
.default-68x25-recover { background: url(buttons/default-68x25-recover.png) no-repeat left top; display: block; padding: 0; width: 68px; height: 25px; border: 0; cursor: pointer; text-indent: -9999px; overflow: hidden; }
.default-68x25-recover:hover { background-position: left -25px; }

/* AJAX spinner */
div.ajax-spinner { background: url(images/loader.gif) no-repeat 3px center; padding: 5px 0 5px 25px; color: #4c4c4c; font: normal 12px Arial; margin: 0 0 0 15px; display: inline; }

/* Global */
input[type="text"],
input[type="email"],
input[type="password"] { padding: 2px; background: url(images/input_bg.png) no-repeat top left; border: 1px solid #c0c3c5; }

/* Main Layout */
#wrapper { width: 980px; clear: both; margin: 0 auto 0 auto; position: relative; }

/* -- Header */
#header { position: relative; width: 100%; height: 131px; margin: 0; padding: 0; }
a.logo { position: absolute; height: 86px; width: 231px; top: 18px; left: 10px; }

#user_info { position: absolute; width: auto; height: auto; top: 65px; right: 150px; text-align: right; }
#welcome-title { color: #000; font-family: Georgia; font-size: 14px; }
#user_info #welcome { color: #000; font-family: Georgia; font-size: 14px; }
#user_info #welcome .name { color: #2988ca; }
#user_info #welcome .separator { color: #b1b1b1; margin: 0px 10px; }
#user_info a { color: #b11c1c; }
#user_info #credits_expire { color: #767676; font-family: Arial; font-size: 12px; line-height: 14px; }

#credit_info { position: absolute; width: 118px; height: 89px; top: 0px; right: 10px; background-image: url(images/credits_left.png); color: #fff; text-align: center;  text-shadow: #333 1px 1px 2px; }
#credit_info .credits-remaining { font-size: 20px; font-family: Georgia; margin: 0; }
#credit_info div.credit-info-text { font-family: Arial; font-size: 10px; font-weight: bold; line-height: 15px; margin: 15px 0; padding: 0; text-transform: uppercase; }
#credit_info div.not-expired { margin: 10px 0 !important; }
#credit_info div.not-expired-year { margin: 5px 0 !important; }

/* -- Content */
#content { position: relative; width: 980px; height: auto; text-align: center; }
#content div.border-top { width: 980px; height: 15px; background: url(images/main_content.png) top; }
#content div.border-bottom { width: 980px; height: 15px; background: url(images/main_content.png) bottom; clear: both; }

#wide-content { width: 924px; padding: 10px 27px; background: url(images/main_content_middle.png) repeat-y; }

/* -- -- Sidebar */
#sidebar { float: left; width: 254px; height: auto; }
.sidebar-block h3 { color: #231f20; width: 254px; float: right; font-family: Georgia; font-weight: bold; font-size: 12px; text-align: left; border-bottom: 1px solid #d1d1d1; padding: 0px 0px 3px; margin: 0px 0px 8px; text-transform: uppercase; }
.sidebar-block .sidebar-body { width: 254px; float: right; text-align: left; padding: 0px 0px 3px; margin: 0px 0px 10px; font-family: Arial; font-size: 11px; color: #828282; line-height: 13px; }
.search-respond { width: 250px;  padding: 2px 4px 3px 0px; text-align: left; font-family: Arial; font-size: 11px; color: #828282; line-height: 13px; border-top: 1px solid #d1d1d1; }

#search-form input { width: 180px; }
#search-form button { margin: 0px 6px; }

/* -- -- -- Menu */
#categories-list { margin: 0; padding: 0; }
#categories-list li { position: relative; padding: 3px 0px 8px; }
#categories-list li a:hover { text-decoration: none; }
#categories-list li a:hover .category-name, 
#categories-list li a:hover .category-statistic { text-decoration: underline; }
#categories-list .category-name { font-family: Arial; font-weight: bold; font-size: 14px; color: #246a9b; border: 0; padding: 7px 0px 5px; text-transform: none; width: 254px; float: right; text-align: left; line-height: 13px; }
#categories-list .category-statistic { font-family: Arial; font-size: 11px; color: #828282; border: 0; padding: 0; }

#categories-list li.active { background: url(images/categories_list_active.png); margin: -15px -1px 0px -34px; padding: 15px 0px 0px 35px; height: 48px; }
#categories-list li.active .category-name { color: #ffffff; }
#categories-list li.active .category-statistic { color: #d8d8d8; display: block; }

/* -- -- Main Content */
#main-content { width: 650px; float: right; }
#main-content h1 { color: #5f5f5f; font-family: Georgia; font-size: 24px; text-align: left; text-transform: none; font-weight: normal; margin: 0; }

#main-content .videos-grid { width: 660px; margin: 10px 0px 0px; }

.video-box { margin: 8px 16px 20px 0px; text-align: left; width: 202px; height: 205px; float: left; }
.video-box img { background: url(images/thumbnail-stub.png) no-repeat 5px 5px; display: block; border: 1px solid #e3e3e3; padding: 5px; border-radius: 3px; -moz-border-radius: 3px; height: 140px; width: 190px; margin-bottom: 10px; text-decoration: none; display: block; }
.video-box.viewed img {opacity: 0.5; }
.video-box a:hover img { border: 1px solid #a3a3a3; }
.video-box .description-icon { background: url(images/description_icon.png) top left; cursor: pointer; border: 1px solid #e3e3e3; border-radius: 3px; -moz-border-radius: 3px; padding: 0; margin: 0; float: right; width: 24px; height: 24px; }
.video-box .description-icon:hover { border: 1px solid #a3a3a3; }
.video-box .video-description { display: none; }
.video-box .video-title { line-height: 16px; font-size: 12px; font-family: Arial; display: block; float: left; margin: 0 0 0 3px; }
.video-box.viewed .video-title { color:Gray }
.video-box.descriptionful .video-title { width: 170px; }
.video-box a { position: relative; }
.video-box a:hover { text-decoration: none; }
.video-box a:hover .video-title { text-decoration: underline; }
.video-box .start-video-link { background: url(images/thumbnail-overlay.png) no-repeat left -140px; display: block; width: 190px; height: 140px; position: absolute; top: 0; left: 0; margin: 5px; }
.video-box .start-video-link:hover { background-position: left top; }
.video-length { font-weight: bold; }

/* -- Footer */
#footer { width: 100%; height: 100px; }
#devbridge-logo { float: right; margin-right: 10px; margin-top: 5px; }

/* Dialog Layout */
#dialog-wrapper { width: 980px; clear: both; margin: 0 auto 0 auto; position: relative; font-family: Georgia; }
#dialog-wrapper .logo { width: 157px; height: 152px; top: 18px; left: 412px; }
#dialog-wrapper #header { height: 190px; }
#dialog-wrapper #content { width: 421px; height: auto; margin: 0px auto; clear: both; }
#dialog-wrapper #content div.border_top { width: 421px; height: 16px; background: url(images/dialog_content.png) top; }
#dialog-wrapper #content div.border_bottom { width: 421px; height: 16px; background: url(images/dialog_content.png) bottom; clear: both; }
#dialog-wrapper #main-content { width: 341px; height: 100%; background: url(images/dialog_content_middle.png) repeat-y; overflow: auto; text-align: left; padding: 15px 40px; }
#dialog-wrapper #main-content h1 { font-family: Georgia; font-size: 24px; color: #000; font-weight: normal; text-transform: none; margin: 0px 0px 15px; }
#dialog-wrapper .f-label-top { color: #636363; font-size: 12px; }
#dialog-wrapper input[type="email"], 
#dialog-wrapper input[type="password"],
#dialog-wrapper input[type="tel"],
#dialog-wrapper input[type="text"] { font-size: 22px; padding: 7px; width: 315px; height: 28px; }
#dialog-wrapper h4 { color: #5d5d5d; font-size: 14px; font-weight: bold; }
#dialog-wrapper p { color: #5d5d5d; font-size: 12px; }

.preview {border: solid; border-width: 1px; margin-top: 5px}

.grid { width: 100%; margin-bottom: 15px; }
.grid thead { font-family: Georgia;background: #246a9b; color: #FFF }
.grid td, .grid th { border-bottom: 1px solid #DDD; padding: 5px 5px; }
.grid tr:hover td { background-color: #e3e3e3; }
.grid tr.alt td { background-color: #F7F7F7; }
.grid .sortable { text-decoration: underline; cursor: pointer; }
.grid .sortable a { color: #FFF; }
.grid .sorted-asc  {background: #246a9b url(/local/css/icons/arrow_down.png) no-repeat scroll right 50%; }
.grid .sorted-desc {background: #246a9b url(/local/css/icons/arrow_up.png) no-repeat scroll right 50%; }

.editing { width: 600px }
.editing td.key { height:40px; width: 120px;vertical-align: middle;}
.editing td.value { height:40px; vertical-align: middle; text-align: left; padding-left: 10px }

.error-message { color: Red; display: block; font-size: 12px; margin: 0; font-family: Helvetica, Arial; margin: 0px; }

/* Invites page*/
.invitation-report { width: 100%;}
.invitation-report tr td {border-top: 1px solid #dedede;padding: 5px;text-align: left;}
.invitation-report tr:first-child  td{border-top: 0;}
.invitation-report thead{ background: #F3F3F3;padding: 5px; }
.invitation-report tr.error{ background: #FFE0E0; color: #6C6161}
#invite-result p.error { padding: 7px; color: red; }
#invite-result p.success {    padding: 7px;color: green}