body {
	background-color: #5e5e5e;
}

div#monitorContent {
}
div.clearBottom {
	clear: both;	
	font-size:20%;
}
div#containerBottom {
	clear: both;
	height:100%;
}
div#container {
	background : #ffffff none;
}
div#mapView {
	float: left;
	width: 50%; /* ie6 only */
	overflow: hidden;
}
/* override width. invisible to ie6 */
html>body div#mapView {
	width: 50%;
}

div#gMap {
	border-right:#d1d1d1 solid 2px;
}

div#mapView img {
	float: right;
}
div#summaryView {
	background : #ffffff none;
	font-size: 100%;
	padding-top: 5px;
	min-height: 5em;
	width: 100%;
	
}
div#detailsContainer {
	background : #ffffff none;
	font-size: 100%;
}

div#summaryTitle {
	width : 13em;
}

.summaryTitleTab {
	background-color: #d1d1d1;
	font-size: 75%;
	line-height: 1.9em;
	text-align: center;
        margin-left: 2px;
	text-transform: uppercase;
	float: left;
}

.helpInfoIcon {
    background-image: url('mla/images/mla-info.png');
    background-repeat: no-repeat;
    background-position: 100% 40%; /* x y coords (right top == 100% 0%) */    
    text-align: left;
    padding-right: 16px;
}

div.wide {
	width: 400px;
}

#summaryHeader {
	float: right;
	margin-right: 10px;
	font-size: 80%;
}


#summaryHeader span, #summaryHeader div{
	/*vertical-align: middle;*/
	float: left;
}

#summaryHeader span {
    padding-right: 0.7em;
}

.recentTimeRangeFromTo { 
    display:none; 
}

.timeoutWarning {
    text-align:center;
    font-size: 85%;
}

.alittleBitOld {
    background-color: #fff9a0; /*pale yel*/
}
.veryOld {
    background-color: #ff725d; /*dull red*/
}

.timeoutWarning span {
    font-weight: bold;
    padding-right: 1em;
}

.lastUpdatedRefreshImage {
    background: #ffffff url('../images/refresh-gray.gif') no-repeat 100% 0px;
    width: 10px;
    height: 18px;
}

#summaryHeader a:hover {
    color: #000000;
    background-color: #E5E5E5; 
}

#summaries {
	border-top: #d1d1d1 solid 2px;
	border-bottom: #d1d1d1 solid 2px;
	padding-bottom: 5px;
	min-height: 4em;
	clear: both;
}

.loading {
	min-height: 4em;
	text-align: center;
	background: #d3d3d3;
	line-height: 4em;
	visibility: visible;
	width: 100%;
	cursor: progress;
}

div#detailView {
	float: left;
	width: 50%;
    /* width: 35%;   keep: was previous fix to stop tweets container from wrapping below map for ie6 only 
     might be needed again. */
}
/* override width for browsers other than ie6 */
html>body div#detailView {
    width: 50%;
}

div#detailTitle {
	background-color: #e1e1e1;
	font-size: 85%;
	line-height: 1.5em;
	text-align: left;
	padding: 3px;
	height: 1.8em;
}

div#detailTitle span.description { 
    float:left; 
    padding-left: 0.2em;
}

div#detailToolbar {
	background-color: #d1d1d1;
	font-size: 80%;
	text-align: left;
	text-transform: lowercase;
}

div#detailToolbar span{
	text-align: center;
	padding: 0px 5px 0px 5px;
}

div#detailToolbar span.current{
	background-color: #ffffff;
}

div#details {
	padding: 4px;
}

div.summary {
	line-height: 2em;
	text-align: left;
	vertical-align: bottom;
	clear: both;
}

div.summary:hover { 
    cursor: pointer; 
    cursor: hand; /*ie6+7 need this for anchors with child elements*/
    background-color: #e5e5e5; 
}

span.severityMarker {
	padding: 4px 0px 3px 35px;
	display: block;
	float:left;
	height: 18px;
}
	.med-error {
		background: transparent url(observant/images/error-icon.png) no-repeat scroll 5px center;
	}
	.med-alarm {
		background: transparent url(observant/images/error-icon.png) no-repeat scroll 5px center;
	}
	.med-info {
		background: transparent url(observant/images/ok-icon.png) no-repeat scroll 7px center;
	}

	.med-warning {
		background: transparent url(observant/images/warn-icon.png) no-repeat scroll 5px center;
	}

span.summaryName { 
    /* ** this style (specifically float:left) does make width uniform 
        but kills the a-link styes in ffox? remove for now.    
    width: 3.7em; float: left;  ** */
}
span.summarySpacer { 
    padding-right:0.5em; 
}

.detail {
	padding: 5px 5px 5px 5px;
	margin-bottom: 3px;
	font-size: 70%;
}

/* might not be used anymore - superceded by FixedWidthGrid  table.dataTable td styles */
.detail-error .detailQuantity {
	color: #FD000B;
}
.detail-warning .detailQuantity {
	color: #ffdc00;
}
.detail-alarm .detailQuantity {
    color: #ffdc00;
}
.detail-info .detailQuantity {
	color: #028d14;
}

/* names to avoid login error conflict */
.helpTipBody .errorSeverity {
    background-color: #ffffff;
    color: #FD000B;
}
.helpTipBody .warning {
    background-color: #ffffff;
    color: #F96C15; 
}
.helpTipBody .info {
    background-color: #ffffff;
    color: #028d14;
}

a {
    color: #000000;
    text-decoration: underline;
}
a:hover {
    background-color: #7f7f7f;
    color: #ffffff;
}

/* ie6+7 require hand for anchors with child elements
 * see also :progress and :help */
.stateChangeGesture { 
    cursor: pointer;
    cursor: hand;  
} 

.sourceDescription { 
    float: left; 
}
.infoDescription { 
    float: left; 
    padding-left: 0.5em; 
}

a.infoDescription { 
    text-decoration: underline; 
}

	.small-photo {
		background: transparent url(observant/images/thumbnail.png) no-repeat scroll 5px center
	}

.detailQuantity {
	font-size: 180%;
	font-weight: bold;
	float: left;
	width:  auto;
	padding-left:0.3em; 
	padding-right: 0.7em;
	text-align: left;
}

img.spark {
	vertical-align: bottom;
	padding-right: 4px;
}
.detailUnit{
	font-size: 58%;
}
.detailMessage, div.detailTimeRange {
	font-size: 110%;
	line-height: 1.8em;
	text-align: left;
	float: left;
	width: auto;
}
.detailMessage {
        padding-left: 0.8em;
}

a.detailLightbox {
	display: none !important;
}

img.detailThumb {
	float: left;
}

div.detailTimeRange {
	color: #888888;
	margin-left: 4px;
	}
	
div.detailTimeRange a:hover {
	color: #000000;
	}

.sparklineContainer .sparkline { }

.sparklineContainer .metadata,
.sparklineContainer .graphDataPoints { 
	display: none; 
}
 
#bigGraphTimeSeriesDialog {
    width: 700px;
    height: 310px;
}

.whiteText {
    color: #fff;
}

/* END CONTENT */

	img.spark {
		border: none;
}

    div#detailView a,
    div#detailView a:link,
    div#detailView a:active,
    div#detailView a:visited,
    div#detailView a.current,
    div#detailView a.current:link,
    div#detailView a.current:active,
    div#detailView a.current:visited  {
	color: #000000;
	text-decoration: none;
	/* height: 100%;   breaks flicker arrows */
	display: block;
}
    div#detailView a:hover,#detailView a:active, #detailView a:focus {
        text-decoration: none;
        background-color: #cccccc;
    }
    
/* class provided by Mike Purvis labeled marker */
.LabeledMarker_markerLabel {
    white-space: nowrap;
}

span.innerLabeledMarker { 
    font-size: 75%; 
}

span.satellite {
	background-color: #5A5748; /* earth grey */
	color: #ffffff;
	opacity: 0.75;
	filter: alpha(opacity=75);
} 

span.innerLabeledMarker .property { 
    font-size:160%;
}
/* TODO property span should inherit satellite background, currently it does not */
span.satellite .property {
    background-color: #5A5748;
    color: #ffffff;
    opacity: 0.75;
    filter: alpha(opacity=75);
} 

h3.beakwindow { color: #ffffff; margin:0; padding: 0; }

.prototip .borderRow { 
    /* ** not IE /  opacity: 0.85; / IE / filter: alpha(opacity=85); comment for now ** */ 
}    


/* #5064 ie6 and 7 beak (prototip 'stem') position issue. */
.prototip_Stem { 
    left: 0px; 
} 

/* Overflow property is critical for debuging stem positioning problems as with #5064 */
.prototip { 
    /* overflow: visible;    Keep comment */ 
    font-size: 80%;
}

.prototip .content .helpTipBody {
    text-align:left;
}

.prototip .content .helpTipBody ul {
    list-style-type: disc;
}


.prototip .content .helpLinkTooltip a {
    cursor: pointer;
    cursor: hand; /*ie 6 7*/
    color: white;
}
.prototip .content .helpLinkTooltip a:hover {
    color: black;
    background-color: white;
}


#propertySelectorTab {
    width: 90px;
}

.propertySelector {
    text-align:left;
    padding-left:1em;
}

/* keep as Property selector flow layout might be needed again */
.propertySelector span {
    padding-right:2em;
    padding-bottom: 0.8em;
    white-space: nowrap;
    float: left;
    /* width: 25%  * use this to make uniform 'column'' width (problem: long names will overflow) */
}
.propertySelector a {
    color: white;
    text-decoration:underline;    
}
.propertySelector a:hover {
    color: black;
    background-color: white;
    text-decoration: underline;    
}

#jquery-lightbox-filmstrip {
    left:0pt;
    line-height:0pt;
    position: absolute;
    text-align:center;
    top: 220px;
    width:100%;
    z-index:100;
}

.lightboxFilmstrip {
    padding-left: 6px;
}

#helpDemoImages span { 
    font-size: 500%;
    font-family: sans-serif;
    padding-left: 19px;
}
#helpDemoImages span, 
#helpDemoImages img {
  vertical-align:top;
}



.gwt-DialogBox .Caption {
  background-color: #e3e8f3;
  padding: 4px 4px 4px 8px;
  cursor: default;
  border-bottom: 1px solid #bbbbbb;
  border-top: 5px solid #d0e4f6;
}

.gwt-DialogBox .dialogContent {
}

.gwt-DialogBox .dialogMiddleCenter {
  padding: 3px;
  background: white;
}
/*set border dimensions*/
.gwt-DialogBox .dialogTopLeftInner {
  width: 5px;
  zoom: 1;
}

.gwt-DialogBox .dialogTopRightInner {
  width: 8px;
  zoom: 1;
}

.gwt-DialogBox .dialogBottomLeftInner {
  width: 5px;
  height: 8px;
  zoom: 1;
}

.gwt-DialogBox .dialogBottomRightInner {
  width: 5px;
  height: 8px;
  zoom: 1;
}

.gwt-DialogBox .dialogBottomCenter,
.gwt-DialogBox .dialogMiddleRight,
.gwt-DialogBox .dialogMiddleLeft,
.gwt-DialogBox .dialogTopLeft,
.gwt-DialogBox .dialogTopRight,
.gwt-DialogBox .dialogBottomLeft,
.gwt-DialogBox .dialogBottomRight {
    background-color: #e3e8f3; /*gwt pale blue*/
}

.modalDialogButton {
	float: right;
	padding-top: 1em;
}

.cw-DialogBox {
}

.gwt-GlassPanel {
    background-color: #000000 !important;
    filter: alpha(opacity = 40) !important; /* IE */
    opacity: 0.4 !important; /* non-IE */
    /*
      NOTE: Please do NOT use either CSS 'width' or 'height' here, as
      this would defeat much of the effort that went into GlassPanel
      in order to get it to work consistently in a variety of
      circumstances. Specifically, please resist the urge to use
      'width/height: 100%' or similar constructs.
    */
}

.prototip a.stateChangeGesture {
    color: white;
    text-decoration:underline;    
}
.prototip a.stateChangeGesture:hover {
    color: black;
    background-color: white;
    text-decoration: underline;    
}

.smallError {
    font-size: 75%;
    colour: #555555;
}