@charset "utf-8";
/* MetEye CSS
 * Version: 3.0: MetEye Redesign.
 */
@import 'xtheme.css';

#no-container { position:relative; float:none; padding: 0px 20px; }
#no-container.fullwidth p#breadcrumb { margin: 0 0 0.4em; }
#content { width: 100%; }

/* core css overridden by Ext */
h1#core-title { display: block; float: left; clear: none; overflow: auto; margin: 0 0 0.4em; width: 100%; font-weight: normal; font-style: normal; text-decoration: none; font-family: Arial, sans-serif; font-size: 22px; }
h1#core-title span.heading { color: #333; margin-left: -1px; }
h1#core-title span.heading-spacer { color: #333; margin-left: 2px; }
h1#core-title span.heading-extra { margin-left: 4px; color: #666; }
h1#core-title span.heading-tm { color: #666; font-size:12px; vertical-align: top; }

/* From weather.css for the warnings summary */
#state-warnings {
    margin-bottom: 4px;
    position: relative;
    width: 925px;
}
#state-warnings p.warning {
    display: block;
    height: 26px;
    width: 100%;
    margin-left: 2px;
    padding: 6px 0 0 38px;
    background-color: #FBE983;
    background-image: url('/images/meteye/warning.png');
    background-repeat: no-repeat;
    background-position: 6px 5px;
    font-size: 15px;
    font-weight: normal;
    color: black;
}
p.warning a {color: black; text-decoration: none;}
p.warning a:hover {text-decoration: underline;}

/* Styling for links: help, faq, etc. */
.notes-icon {
    background-image: url(/images/meteye/infobar-sprite.png);
    width: 22px;
    height: 22px;
    display: block;
    float: left;
    margin-right: 10px;
}
a.notes-icon span {
    position: absolute;
    left: -9999px;
}
a#about-link { background-position: 0 0; }
a#about-link:hover { background-position: 0 -22px; }
a#help-link { background-position: 0 -44px; }
a#help-link:hover { background-position: 0 -66px; }
a#feedback-link { background-position: 0 -88px; }
a#feedback-link:hover { background-position: 0 -110px; }
a#text-view-link {
    display:block;
    width: 40px;
    height: 35px;
    padding-left:50px;
    font-size: 14px;
    background: url('/images/meteye/icon-dashboard-switcher.png') no-repeat;
    overflow:visible;
}


a.note {
    padding: 0px 3px;
    color: #595959;
    font-family:Arial, sans-serif;
    font-size: 13px;
    line-height: 16px;
    text-decoration: none;
}
a.note:hover {text-decoration: underline;}
#notes-top {
    position: absolute;
    top: 23px;
    right: 200px;
    z-index: 100;
    line-height: 22px;
    display: block;
    float: left;
    clear: none;
}
#notes-top-right {
    position: absolute;
    top: 16px;
    right: 25px;
    font-weight: bold;
    color: #333;
    overflow: visible;
}
#notes-top-right a.note:hover {
    color: #C30;
    text-decoration: none;
}

/* Styling for Ext panel layout */
.mainpanel { width: 966px;  height: 780px; margin-left: -2px; }
.sidepanel { width: 245px; }
.northpanel { height: 34px; }
.southpanel { height: 100px; background: url('/images/meteye/ref-layers-bg.png') repeat-x; border-radius: 3px; }

#main-map { border: none; }
.olMap { background-color: #dae7ef; /* helps mask transition lines in Chrome */ }

/* #north-controls */
#location-control {
    padding: 4px 4px 2px 4px;
    font-size:15px;
    color: #fff;
    background: #e8e3f2;
    border-radius: 3px;
}
.location-search-input {
    /* Width is set in map.js */
    height: 20px!important; /* gets overridden by Ext */
    vertical-align: middle;
    font: normal 12px arial, helvetica, verdana, sans-serif;
    color: #666;
    background-image: none;
    border: 1px solid #c2c2c2;
}
.location-search-input-item {
    font: 12px arial, helvetica, verdana, sans-serif;
    padding: 3px;
    border: 1px solid #fff;
    border-bottom: 1px solid #eeeeee;
    white-space: normal;
    color: #666;
}
.location-search-error {
    font: 12px arial, helvetica, verdana, sans-serif;
    padding: 3px;
    white-space: normal;
    color: #eb6060;
}
.location-button {
    float: left;
    margin-left: 4px;
}
.geo-icon {
    width: 17px;
    height: 17px;
    background: url('/images/meteye/geo-icon-sprite.png') no-repeat;
}
.geo-icon-inactive {
    padding-left: 21px!important;
    background-position: 0 0!important;
}
.geo-icon-active {
    background-position: 0 -17px!important;
}
.button-label {
    font: 12px arial,helvetica,verdana,sans-serif;
    padding: 2px 4px;
}

.timezone-wrapper {
    width: 130px;
    position: absolute;
    margin-top: 1px;
    top: 4px;
    right: 4px;
}
.timezone-select {
    font: normal 11px tahoma, arial, helvetica, verdana, sans-serif;
    color: #444;
    background-image: none;
    border: 1px solid #fff;
    vertical-align: top;
}
#timezone-label {
    padding: 4px 0 0 13px;
    font: 11px tahoma, arial, helvetica, verdana, sans-serif;
    vertical-align: middle;
    color: #444;
}

/***** Left hand menu note: some styles are in xtheme.css ****/
.accordion-item-body {
    padding: 8px 8px 8px 12px;
}

.button-wrap {
    width: 100%
    display: block;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 7px;
}
.menu-button {
    font: 11px arial,tahoma,sans-serif;
    color: #333;
    background: #e1e1e1;
    border-radius: 2px;
    height: 17px;
    padding-top: 3px;
    text-align: center;
    width: 46px;
    cursor: pointer;
}
.menu-button-margin { margin-left: 10px; }
a.menu-button {
    text-decoration: none;
    color: #333;
    display:block;
    height: 17px;
    line-height: 14px;
    width: 60px;
}
.menu-button:hover, a.menu-button:hover {
    background: #333;
    color: #fff;
}

.check-group-header {
    margin: 5px 0px 4px 0px;
    color: #666;
    font-weight: bold;
}
div.wide-legend-wrap {
    margin-top: 3px;
    margin-left: 17px;
    width: 100%;
    display: block;
}
.radio-subheading-first {
    margin-top: 0;
}
.radio-subheading {
    color: #666;
    font: bold 12px arial,helvetica,verdana,sans-serif;
    margin-top: 4px;
    margin-bottom:2px;
    display: block;
}
.issue-label {
    color: #777;
    font: 11px tahoma, arial, helvetica, verdana, sans-serif;
    margin-top: 5px;
    margin-left: 18px;
    margin-bottom: 1px;
    display: block;
}
.issue-label-disabled {
    color: #ccc;
}

/* South panel styling */
#reference-control {
    padding: 4px 4px 2px 6px;
}
#reference-control .x-form-check-wrap {
    float: left;
    margin-right: 12px;
}
#reference-control .x-form-check-wrap label {
    font: 11px arial;
    color: #444;
}
.reference-legend {
    overflow: hidden;
    vertical-align: middle;
    margin-left: 4px;
}
.overlay-legend {
    overflow: hidden;
    vertical-align: bottom;
    margin-left: 4px;
}

/* Fix for search box checkbox position */
.x-form-check-wrap input { vertical-align: middle; }
#reference-control .x-table-layout-cell { width: 135px; }

/* Layout tweaks */
.left { float: left; }
.right { float: right; }
.hidden { display: none; }
.clearFloat { width: 0px; height: 0px; clear: both; }
/* FIX FOR IE7 - some panels showing invisible divs for headers that do not exist */
.ghost-panel-fix { line-height: 0px; height: 0px; border: none; }

/* Timeline Styles */
div.tl ul li a { background-color: #DDEFBE; }
div.tl div.noGrpBar { background-color: #D3F39E; }
div.tl div.ul li li a, div.tl div.ul li div.noData { background-color: #D3F39E; }
div.tl div.ul li li a { background-color: #caec91; }
div.tl ul li.activeGroup a { background-color: #B3DC6C; color: #000; }
div.tl ul li.activeGroup li a { background-color: #CAEC91; border-left: 3px solid #FFF; }
div.tl ul li a .expandedLabel{ display: none; }
div.tl ul li.activeGroup a .expandedLabel{ display: inline; }
/* hover states for accessibility improvement */
div.tl ul li a {
    -webkit-transition: background-color 400ms ease-in-out, color 300ms ease-in-out;
    -moz-transition: background-color 400ms ease-in-out, color 300ms ease-in-out;
    -o-transition: background-color 400ms ease-in-out, color 300ms ease-in-out;
    -ms-transition: background-color 400ms ease-in-out, color 300ms ease-in-out;
    transition: background-color 400ms ease-in-out, color 300ms ease-in-out;
}
div.tl ul li a:hover {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}
div.tl ul li li a.active:hover { background-color: #9fe1e7; }
div.tl ul li.activeGroup a:hover { background-color: #B3DC6C; }
div.tl ul li.activeGroup a.expanded:hover { background-color: #B3DC6C; }
div.tl ul li a.collapsed:hover {  background-color: #B3DC6C; }
/* TODO: outline on play / pause not working */
.play:focus { outline: 1px dotted #333; }

div.tl ul li li a.active { background-color: #9fe1e7;  color: #000; }
div.tl ul li li a.fromactive { background-color: #e2ebd6; color: inherit; }
div.tl ul li li a.toactive { background-color: #93b854; }
div.tl li a.group span.long { display: inline; }
div.tl li a.group span.short { display: none; }
div.tl a { font-weight: normal; }
#BOM-timeline-control { background: #fff; height: 48px;}
#BOM-timeline-control ul { list-style-image: none;}

/***** help interaction styles *****/
.help-scrollable { width: 456px; height:412px; padding-right: 20px; overflow: auto; }
.help-subcategory { height:382px;}
.disclaimer-buttons { width: 142px; margin-top: 10px; float: right; }
.disclaimer-buttons-top {overflow: hidden; position: absolute; top: 20px; right: 29px; }
.disclaimer-tm { font-size:12px; vertical-align: top; }
.faq-content { width: 660px; height: 395px; padding-right: 20px;}
.help-content { height:445px; }
.close-modal { position: absolute; top: 8px; right: 8px; cursor: pointer; }
.close-modal:hover { opacity: 0.5; }

/* from help.css */
.popup-container { margin: 10px 0; padding: 10px 10px 10px 20px; width: 675px; font-family:Verdana, Geneva, sans-serif; font-size: 11px; position: relative; }
/* .popup-container.no-height-limit { margin: 0; padding: 10px; } */
.popup-container hr { display: block; border: none; border-top: 1px dotted #ccc; height: 1px; margin: 10px 0; }
.popup-container h2 { font-weight:normal; font-family:Arial, Helvetica, sans-serif; color:#C00; font-size:18px; margin: 0 0 10px; }
.popup-container h3 { color: #C00; font-weight: normal; font-size: 12px; margin-top: 1em; }
.popup-container dl p { margin: 0.5em 0; }
.popup-container dt { margin-bottom: 0.5em; font-weight: bold; color: #444; }
.popup-container dd { margin: 0 0 1.5em 1.5em; }
.popup-container ol { padding-left: 2em; margin: 0.2em 0 0 0.2em; list-style: decimal outside none; }
.popup-container ul { padding-left: 2em; margin: 0.2em 0 0; list-style: none outside url("/images/ui/symbols/bullet.gif"); }
.popup-container li { margin-bottom: 0.2em; }

.help-menu { width: 190px; height: 350px; position: absolute; top: 10px; left: 10px; background-color:#fff; padding-right:10px; border-right:2px dotted #ccc; }
.help-menu a:link, .help-menu a:visited { text-decoration: none; color: #C00; }
.help-menu a:hover { text-decoration: underline; color: #000; }
.help-menu ol { margin-left: 30px; text-ident: 0; padding: 0; }
.help-menu ol ol { margin: 0.2em 0 0.5em 20px; list-style-position: ouside; }
.help-menu h2 { font-size: 1.1em; font-weight: normal; color: #222; padding-bottom: 0.3em; border-bottom: 2px solid #ccc; }

.help-content { width: 446px; margin-left: 205px; padding-right: 30px; }
.help-content a:link, .help-content a:visited { color: #0066CC; }
.help-content a:hover { text-decoration: underline; color: #000; }
.help-content ul { margin: 0 0 1em;  }
.help-content ul ul, .help-content ol ul { margin: 0.5em 0 1em;  }
.help-content li { line-height: 1.2em; }
.help-content li br, .help-content p br { line-height: 0.5em; }
.help-content h2 { font-size:1.7em; margin: 0 0 0.7em; }
.help-content h2.parent { font-size: 1.4em; color: #444; margin-bottom: 0.2em; font-weight: bold; }
.help-content h3 { font-size: 1.2em; margin: 0 0 0.7em; }
.help-content p { margin: 0 0 1em; }
.help-content .warning { background-color: #FBE983; padding: 0.1em;}
.help-content .note { border: 1px dotted #ccc; background-color: #f5f5f5; padding: 0.8em 1em; }
.help-content .tip { border: 1px dotted #FFCC33; background-color: #FFFFCC; padding: 0.8em 1em; }
.help-content .blue { color: #0066CC; }
.help-content strong { color: #333; }
.help-content dl.help-time-zone { overflow: auto; margin-bottom: 1em; }
.help-content dl.help-time-zone dt { float: left; clear: left; font-weight: bold; width: 50px; margin: 0 0 0.5em; }
.help-content dl.help-time-zone dd { float: left; clear: none; width: 380px; margin: 0 0 0.5em; }

.about-menu { width: 180px; height: 300px; padding-right: 18px; }
.about-menu .highlight { border: 1px solid #FFCC33; background-color: #FFFFCC; color: #000; padding: 0.9em 0.7em 0.2em; margin-top: 2em; }
.about-menu .highlight p { white-space: normal; margin: 0 0 0.5em; }
.about-menu .highlight strong { font-weight: bold; }
.about-menu ul { margin: 0 0 0 2px; text-ident: 0; padding: 0; list-style-type: none; list-style-image: none; }
.about-menu ul li { margin-bottom: 0.5em; }

.popup-content { height: 400px; position: static; }

.popup-container ol.faq-list { list-style: decimal outside none; padding: 0 2em 0 3em;}
.faq-list li {  margin-bottom: 0.5em; }
.faq-list li a { color: #C00; text-decoration: none; }
.faq-list li a:hover { text-decoration: underline; }
.faq-list li .answer { display: none; margin: 0 0 0.8em; padding-bottom: 0.8em; border-bottom: 1px dotted #ccc;}
.faq-list li .answer p { margin: 0.5em 0 0; }
.faq-list li .answer a { color: #0066CC; }

ol.upper-roman { list-style-type: upper-roman; }
ol.lower-roman { list-style-type: lower-roman; }
ol.upper-alpha { list-style-type: upper-alpha; }
ol.lower-alpha { list-style-type: lower-alpha; }

/* Styles stolen by ExtJS from core: */
.help-content ul, .disc-content ul, #disclaimer-accept ul { list-style: none outside url('/images/ui/symbols/bullet.gif'); }
.disc-content ul li, #disclaimer-accept ul li { line-height: 1.4em;  }
.help-content strong, .disc-content strong, #disclaimer-accept strong { font-weight: bold; }
.feedback-content p, .disc-content p, #disclaimer-accept p { margin: 1em 1em 1em 0; }
/* feedback popup */
.feedback-content { width: 681px; height: 500px; margin: 10px 12px 10px 0px; overflow: auto; overflow-x: hidden; }
.feedback-content h2 { padding-top:0px; font-weight:normal; font-family:Arial, Helvetica, sans-serif; color:#C00; font-size:18px; }
.feedback-content h3 { font-size: 13px; line-height: 16px; margin: 13px 0 13px 0;}
.feedback-content input { margin: 3px 3px 3px 4px; }
.feedback-content textarea { font-size:12px; display: none;}
.feedback-content textarea.feedback-defect { display: block;}
.feedback-form-group h3 { margin: 1em 0; }
.feedback-form-group label { margin-right: 7px; margin-bottom: 2px; }
.feedback-form-buttons { margin: 1em 0; }
.feedback-form-buttons input { margin-left: 0px; padding-left: 6px; padding-right: 6px; }
#id_4826_8680 { width: 300px; height: 80px; font-size:12px; } /* textarea */

/* registration page */
.elabel { width: 145px; float:left;}
.elabel label { font-weight: bold; }
.einput { width: 180px; float:left;}

/* Popup Styling */
.clusteredPopup {
    font: 11px Tahoma, sans-serif;
    max-height: 300px;
    overflow: auto;
    padding: 5px;
    background: #fff;
}

.clusteredPopup dt {
    color: #000;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
    text-indent: 32px;
    padding: 2px 0 9px;
    margin-bottom: 5px;
    background: #fff url('/images/meteye/cluster-bg.png') 5px 0px no-repeat;
}

.clusteredPopup dd a {
    display: block;
    width: 100%;
    border-bottom: 1px dotted #bbb;
    line-height: 2.5em;
    text-indent: 32px;
    padding-bottom: 0px;
    text-decoration: none;
    background: #fff url('/images/symbols/small/sunny.png') 2px 1px no-repeat;
    color: #0167cc;
}
.clusteredPopup dd:last-child a { border-bottom: none; }
.clusteredPopup dd.sunny a { background-image: url('/images/symbols/small/sunny.png')}
.clusteredPopup dd.clear a { background-image: url('/images/symbols/small/clear.png')}
.clusteredPopup dd.partly-cloudy a { background-image: url('/images/symbols/small/partly-cloudy.png')}
.clusteredPopup dd.cloudy a { background-image: url('/images/symbols/small/cloudy.png')}
.clusteredPopup dd.hazy a { background-image: url('/images/symbols/small/hazy.png')}
.clusteredPopup dd.light-rain a { background-image: url('/images/symbols/small/light-rain.png')}
.clusteredPopup dd.wind a { background-image: url('/images/symbols/small/wind.png')}
.clusteredPopup dd.fog a { background-image: url('/images/symbols/small/fog.png')}
.clusteredPopup dd.showers a { background-image: url('/images/symbols/small/showers.png')}
.clusteredPopup dd.rain a { background-image: url('/images/symbols/small/rain.png')}
.clusteredPopup dd.dust a { background-image: url('/images/symbols/small/dust.png')}
.clusteredPopup dd.frost a { background-image: url('/images/symbols/small/frost.png')}
.clusteredPopup dd.snow a { background-image: url('/images/symbols/small/snow.png')}
.clusteredPopup dd.storm a { background-image: url('/images/symbols/small/storm.png')}
.clusteredPopup dd.light-showers a { background-image: url('/images/symbols/small/light-showers.png')}


.pT {background: #fff; padding: 5px; margin: 0; font-family: Tahoma, sans-serif; font-size: 11px}
.pT h2 {display: none}
.pT {background: #fff;}
.pT table {width: 490px}
.pT table, .pT td, .pT th {border-collapse: collapse; background: #fff; clear: both; text-align: center; border-right: none}
.pT th {padding: 3px 0}
.pT td {text-align: center; padding: 3px 1px; vertical-align: top; border: 1px dotted #bbb; border-right: none}
.pT td img {margin: 1px 0;}
.pT td.first, .pT th.first {width: 100px; border: none; border-right: 1px solid #e6e6e6; text-align: right; color: #595959; font-weight: normal; padding-right: 6px; vertical-align: middle;}
.pT .expand td {border-bottom: none; padding: 4px 3px 3px 3px;}
.pT .expand td.first { padding: 9px 7px 0 0; color: #333; vertical-align: baseline;}
.pT th {font-weight: normal; color: #000; border: 1px dotted #bbb; border-top: none; border-right: none}

.pT td.max {font-size: 13px; color: #c00; line-height: 23px;}
.pT td.min {font-size: 13px; color: #2d66cc}
.pT td.rain {color: #060}
.pT th strong {display: block;}
.pT caption {display: none;}

.pT .more_detail, .pT .less_detail { display:block; width: 40px; margin: 3px 0 0 4px; }
.pT .more_detail:hover, .pT .less_detail:hover { color: #fff; }

.pT .precis-text {display: none;}
.x-window-header-text {display: block; cursor: default; font-family: Tahoma, sans-serif; font-size: 11px; color: #000; padding-left: 10px; line-height: 28px; vertical-align: bottom;}
.x-window-header-text a.text-view-link {
    position: absolute;
    top: 5px;
    right: 45px;
    padding-left: 21px;
    background: url(/images/meteye/icon-dash-switcher-mini.png) center left no-repeat;
    display: block;
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
.x-window-header-text a.text-view-link:hover {text-decoration: underline;}

.pT .save-loc-button { position: absolute; top: 10px; left: 9px; background: #e8e3f2; width: 90px; }
.pT .save-loc-button:hover { background: #333; color: #fff; }

.pT .day h2 {display: block; color: #000; font-weight: normal; text-indent: 128px; line-height: 22px; border-top: 1px solid #fff; position: relative; z-index: 100}
.pT .day th {font-size: 10px; padding: 3px 2px}
.pT .day th {border: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #f5f5f5}
.pT .day td {border: none; border-top: 1px dotted #ccc; background: #f5f5f5; line-height: 15px;}
.day td.first {text-indent: 12px; vertical-align: baseline;}
.pT .day table {width: 490px}
.pT td.highlight, .pT th.highlight {background: #f0f0f0}
.pT tr.expanded_detail td {background: #fff url('/images/meteye/theme/popup-border.png') bottom center repeat-x}
.pT tr.expanded_detail td.highlight {padding-bottom: 15px; background: #f0f0f0 url('/images/meteye/theme/popup-expand.png') bottom center no-repeat; border-bottom: none;}
.pT .day h2.loading-indicator {background-position: 50% 50%; text-indent: 50px; text-align: center; margin: 0 ; line-height: 30px; padding-top: 5px}
.pT .day span.wind_units {display: block;}

.pT td.wind_dir {padding-bottom: 17px; background: #f5f5f5 url('/images/meteye/weather_icons/wind_arrow/NE.png') 50% 100% no-repeat; }

.pT td.wind_dir.N {background-image: url('/images/meteye/weather_icons/wind_arrow/n.png'); }
.pT td.wind_dir.NNE {background-image: url('/images/meteye/weather_icons/wind_arrow/nne.png'); }
.pT td.wind_dir.NE {background-image: url('/images/meteye/weather_icons/wind_arrow/ne.png'); }
.pT td.wind_dir.ENE {background-image: url('/images/meteye/weather_icons/wind_arrow/ene.png'); }
.pT td.wind_dir.E {background-image: url('/images/meteye/weather_icons/wind_arrow/e.png'); }
.pT td.wind_dir.ESE {background-image: url('/images/meteye/weather_icons/wind_arrow/ese.png'); }
.pT td.wind_dir.SE {background-image: url('/images/meteye/weather_icons/wind_arrow/se.png'); }
.pT td.wind_dir.SSE {background-image: url('/images/meteye/weather_icons/wind_arrow/sse.png'); }
.pT td.wind_dir.S {background-image: url('/images/meteye/weather_icons/wind_arrow/s.png'); }
.pT td.wind_dir.SSW {background-image: url('/images/meteye/weather_icons/wind_arrow/ssw.png'); }
.pT td.wind_dir.SW {background-image: url('/images/meteye/weather_icons/wind_arrow/sw.png'); }
.pT td.wind_dir.WSW {background-image: url('/images/meteye/weather_icons/wind_arrow/wsw.png'); }
.pT td.wind_dir.W {background-image: url('/images/meteye/weather_icons/wind_arrow/w.png'); }
.pT td.wind_dir.WNW {background-image: url('/images/meteye/weather_icons/wind_arrow/wnw.png'); }
.pT td.wind_dir.NW {background-image: url('/images/meteye/weather_icons/wind_arrow/nw.png'); }
.pT td.wind_dir.NNW {background-image: url('/images/meteye/weather_icons/wind_arrow/nnw.png'); }

/* IE Popup Hacks */
.pT tr.expanded_detail td {background: #f0f0f0 url('/images/meteye/theme/popup-border.png') bottom center repeat-x\9; border-bottom: none\9;}
.pT .day h2, .pT .day h2.loading-indicator {margin-top: 0\9;}
*+html .day td.first {text-indent: 0px}

/* BOM Controls */
.olControlPermalink { display: none; }
.bomOLControlMousePosition { bottom: 3px; right: 3px; box-shadow: none; }
.bomOLControlScaleLine { bottom: 3px; left: 3px; box-shadow: none; }
.bom-keyboard-focus { outline: 1px dotted gray; }
#spinner {
    position: absolute;
    top: 11px;
    right: 142px;
    z-index: 1;
    width: 43px;
    height: 11px;
    background-image: url('/images/meteye/loading-spinner.gif');
}

/* HTML Legend */
.hl-body { margin-top: 1px; border: 1px solid #e6e6e6; background: #fff; padding: 0 5px 6px 8px; }
.hl-title { font: bold 11px/26px tahoma, arial, helvetica, verdana, sans-serif; padding-left: 1px; line-height: 18px; }
.hl-wrap { margin-top: 5px; }
.hl-block { display: block; overflow: hidden; line-height: 26px; clear: both; padding-top: 2px; }
.hl-icon { float: left; width: 12px; height: 12px; }
.hl-icon-outline { width: 10px; height: 10px; border: 1px solid #cccccc; }
.hl-block span.hl-name { float: left; margin-left: 6px; font: normal 11px tahoma, arial, helvetica, verdana, sans-serif; vertical-align: top; }
.hl-block span.hl-extra { float: right; margin-right: 6px; font: normal 11px tahoma, arial, helvetica, verdana, sans-serif; vertical-align: top; }
.hl-block span.hl-nodata { float: left; margin-left: 5px; font: italic 11px tahoma, arial, helvetica, verdana, sans-serif; vertical-align: top; color: #777777; }
.hl-block span.hl-nodata { width: 90px; }
.hl-separator { clear: both; height: 0; padding-top: 8px; background-color: #fff; border-bottom: 1px dotted #c3c3c3; }
.hl-spacer { padding-top: 10px; }
.hl-single-column { padding-left: 2px; }
.hl-column-left { float: left; min-width: 50px; }
.hl-column-right { float: right; }

/* Inset window */
.inset-window { box-shadow: 2px 2px 2px #888; background: #fff;}
.inset-content { padding: 2px 0 6px 6px; }
.x-inset-header { color: #666; font: bold 12px arial,helvetica,verdana,sans-serif; line-height: 25px; margin-left:8px; }
a.inset-trigger { margin-right:3px; color: #06c; font-family: Arial,sans-serif; font-size: 11px; text-decoration: none;  position: absolute; right: 0; top: 0; }
a.inset-trigger:hover { color: #fa573c; }
#accordion-menu .x-form-check-wrap { width: 217px!important; overflow:visible;}
.inset-trigger-pos-fix { margin-right:0!important; }

/* Info window */
.info-window { box-shadow: 2px 2px 2px #888; background: #fff;}
.info-content { margin: 2px 0 12px 6px; padding-right:15px;}
.x-info-header { color: #666; font: bold 12px arial,helvetica,verdana,sans-serif; line-height: 25px; margin-left:8px; }
.info-title { color: #c00; font: bold 11px arial,helvetica,verdana,sans-serif; line-height: 14px; }
.info-body { color: #333; font: normal 11px arial,helvetica,verdana,sans-serif; margin-bottom:12px; }
.info-body p { padding-top: 5px; }

/* jScrollPane default styles */
.jspContainer { overflow: hidden; position: relative; }
.jspPane { position: absolute; }
.jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red; }
.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red; }
.jspVerticalBar *,
.jspHorizontalBar * { margin: 0; padding: 0; }
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { background: #dde; position: relative; }
.jspDrag { background: #bbd; position: relative; top: 0; left: 0; cursor: pointer; }
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled { cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow { height: 16px; }
.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }

/* jScrollPane overrides */
.jspScrollable { outline: none; }
.jspVerticalBar { width: 10px; }
.jspTrack {	background-color: #EBEBEB; }
.jspDrag { background-color: #D8D8D8; }
.jspArrow { background-color: #888; }
.jspArrow.jspDisabled { background-color: #777; }
.jspVerticalBar .jspArrow { height: 10px; }
.jspHorizontalBar .jspArrow { width: 10px; }