/*###############################################################################
#
# DrakerLabs Sentalis Framework LaYout Style Sheet 
#
# version:   1.0
# author:    adam bouchard
# email:     adam@drakerlabs.com
# website:   http://www.drakerlabs.com/
#
#
################################################################################*/

/*---------------------------------------------------------------------------*/
/*																			 */
/* =Imports
/*																			 */
/*---------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/
/*																			 */
/* =General
/*																			 */
/*---------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
  margin: 0;
  padding: 0;
}


/* Classes for clearing floats */
.clear {
	clear:both;
	font-size:1px;
	line-height:1px;
	margin:0;
	padding:0;
}
.clearLeft {clear:left;}

img {border: 0;}

/*---------------------------------------------------------------------------*/
/*																			 */
/* =Typography
/*																			 */
/*---------------------------------------------------------------------------*/

body {
  font-family: "helvetica", "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
  font-size:62%;
}

/*---------------------------------------------------------------------------*/
/*																			 */
/*	HEADER
/*																			 */
/*---------------------------------------------------------------------------*/
#logo { 
	width: 251px;
    margin:0 7px 0 0; padding:0;
	float:left;
	text-align:center;
}

#projectName {
	float:right;
	margin-right:210px;
	padding:8px 0 0 0;
	font-size:1.8em;
}

.overviewTitle {
	font-size:4.0em; 
	float:right; 
	margin:40px 120px 0 0;
}

/*---------------------------------------------------------------------------*/
/*																			 */
/* =Container (container)
/*																			 */
/*---------------------------------------------------------------------------*/
.container {
	margin:0 auto;
	padding-top:5px;
	width:972px;  /*957*/
}


/*---------------------------------------------------------------------------*/
/*																			 */
/* =Main Nav (navigation)
/*																			 */
/*---------------------------------------------------------------------------*/
.navigation {
	margin:7px 0 9px 0;
	width:695px;
	height:29px; 
	float:left;
	list-style-type:none; 
}

.navigation li {
	padding:3px 3px 0 3px; 
	margin:5px 22px 0 0; 
	font-family:helvetica;
	font-size:12px;
	text-transform:uppercase;
	display:inline; 
	float:left; 
}

.navigation li a {padding:2px 2px 2px 2px; }
.navigation li a:hover{}
.navigation .selected  {}

/*---------------------------------------------------------------------------*/
/*																			 */
/* =Sub Nav (topNav)
/*																			 */
/*---------------------------------------------------------------------------*/
.topNav {
	float: right;
	margin: 7px 0 9px 0;
	
}

.topNav li {
	display:inline; 
	float:left; 
	padding:3px 3px 0 3px;  
}

.topNav li a {}

/*---------------------------------------------------------------------------*/
/*																			 */
/* =             Main Content (content)										 */
/*																			 */
/*---------------------------------------------------------------------------*/
.content {
	float: left;
	margin:1px 5px 9px 5px;
	width:695px;
}

/*----------- Overview ------------*/
#overviewContent .projectRow{
	border-top:1px solid;
}

#overviewContent .projectRowAlarm{
	border-top:1px solid;
}
/* ===== Dials ======= */
.content .dials {
	text-align:center;
}

.content .dials div {
	float: left;
	padding-left: 20px;
	text-align: center;
}

.content .dials div .dial_caption {
	text-transform:uppercase;
	font-size:13px;
}

.content .dials div .dial_subcaption {
	font-size:12px;
	font-weight:bold;
}

/* =========== Graph ===== */
.content .graphWrapper {
	width:702px;
	margin:0 auto;
	padding-top:5px;
	clear:left;
	font-size: 110%;
	font-weight:bold;
}

#graph_holder {
	height:300px;
	border-width:1px;
	border-style:solid;
	border-bottom:none;
	border-top:none;
}

html > body div#graph_holder{
	border-top:1px solid #bbb;
}

#graph_holder img {
	border-top:none;
	border-bottom:none;
}

#topGraphQueries {margin-top:10px;}

.topButton {
	cursor:pointer; cursor:hand;
	padding:0 5px 0 5px;
	margin:4px 2px 0 1px;
}

.topButton:hover {}

.topButtonCurrent {
	cursor:pointer; cursor:hand;
	border-width:1px;
	border-style: solid;
	border-bottom: none;
	margin:4px 1px 0 0;
	padding:3px 5px 3px 5px;
}

#userDefinedDate {
	border-width:1px;
	border-style: solid;
	border-bottom-width:0px;
	text-align:center;
	padding:4px;
}

#exportData {
	margin:-4px;
	padding:4px;
	border-left-style: solid;
	border-left-width: 1px;
	float:right;
}

.export {margin-left:260px;}

.buttonExport {
	cursor:pointer; cursor:hand;
	height:30px;
	background-position:0 95%;
	font-weight:bold;
}

.buttonExportSelected {
	cursor:pointer; cursor:hand;
	margin-left:260px;
	padding-bottom:2px;
	padding-left:11px;
	padding-right:10px;
	padding-top:5px;
	border-left-style:solid;
	border-left-width: 1px;
	border-right-style:solid;
	border-right-width: 1px;
	border-top-style:solid;
	border-top-width:2px;
	font-weight:bold;
}

.buttonExport:hover {}

#bottomWrapper {
	margin-bottom:5px; 
	margin-top:0;
	border-bottom-width:1px;
	border-bottom-style:solid;
}

#bottomGraphQueries {margin:0 auto;}

.bottomButton {
	cursor:pointer; cursor:hand;
	padding:0 5px 0 5px;
	margin:4px 2px 0 1px;
}

.bottomButton:hover {}

.bottomButtonCurrent{
	cursor:pointer; cursor:hand;
	border:1px solid;
	margin:4px 1px 0 0;
	padding:3px 5px 3px 5px;
}

/*------ OPTIONS --------*/
#options {
	height:auto;
	padding:5px;
	border-left:1px solid;
	border-right:1px solid;
	border-bottom:1px solid;
}

.optionButton {
	cursor:pointer; cursor:hand;
	margin-right:10px;
	padding:3px;
	font-size:90%;
	font-family:Arial, Helvetica, sans-serif;
}

.optionButtonSelected {
	cursor:pointer; cursor:hand;
	margin-right:10px;
	padding:3px;
	font-size:90%;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:underline;
}

.optionButton:hover {text-decoration: underline;}

/* = System Status
-----------------------------------------------------------------------------*/

.content h1 {text-align:center;}

/*------- Current Alarms ----------------*/
#currentAlarms{
	font-size:14px;
	width:100%;
	border-spacing: 0;
	border-collapse: collapse;
}

#currentAlarmse tr {
	cursor:pointer; cursor:hand;
}

#currentAlarms th {padding:4px;}

#currentAlarms td {
	padding:3px 8px 3px 8px;
	border-bottom:1px solid;
	text-align:left;
} 

#currentAlarms td.colspan {
	margin:0;
	padding:0;
	border-bottom:none;
}


#currentAlarms td.colspan table {
	border-collapse: collapse;
	width:100%;
}

#currentAlarms tr td.colspan table tr td {cursor:help;}

#currentAlarms tr td.colspan table tr.alarmTriggered td.alarmTriggered {
	background-repeat:no-repeat;
	background-position:center;
	width:4px;
}

/*------- Alarm History ----------------*/
#historyTable table tr th {
	text-align:left;
	font-size:120%;
	padding:4px 2px 4px 2px;
}

.exportData {
	margin-left:450px;
	font-weight:bold;
	font-size:120%;
	cursor:pointer;cursor: hand;
}
/* =========== Alarm History ============== */
.menu form {padding-bottom: 10px;}
#historyTable {width: 680px;}
.scroll-table-head {width:680px;}

.scroll-table-body {
	width:660px;
	min-height:75px;
	max-height:300px;
}

#historyTable form {
	margin-bottom:5px;
}

#storyTable table {
	font-size:120%;	
}

#historyTable table th{
	padding:2px 4px 2px 4px;
	border:1px solid #666;
}

#historyTable table tr:hover td {
background-color:#d1e4fa;

}
#historyTable table td {
padding:3px 2px 3px 2px;
border:1px solid #666;
cursor:help;
}

#historyTable th {
	border-bottom:none;
	cursor:pointer;cursor:hand;
}

#historyTable th.sortasc {cursor: auto;},ssd
#historyTable tr {border-bottom: 1px solid;}
table#historyTable th.sortasc {}
table#historyTable th.sortdesc {}
#historyTable tr:hover td {}
 
#historyTable tr#noHover:hover td {
	color:inherit;
	background-color:inherit;
	cursor:inherit;
}

.categoryClass1 td { }
.categoryClass2 td { }
.categoryClass3 td { }
.categoryIcon1 {}
.categoryIcon2 {}
.categoryIcon3 {}

/* Removes fieldset borders. even on Opea 7 */
fieldset {border: 1px solid transparent;}

/* Home / Overview page
*****************************************************************************************/
.overviewBox {
	width:300px;
	float:left;
	margin-left:30px;
	margin-bottom:20px;
}	

.overviewBox h1 { /* these are the text titles that lay over bg_menu.jpg */
	padding:8px 0 8px 23px;
	font-size:11px;
	text-transform:uppercase;
}

.overviewBox .pad {  
	padding:2px 10px 10px 10px;
	height:150px;
	font-size:28px;
	text-align:center; 
	font-weight:bold
}

.overviewBox .pad p {
	padding:20px;
}

.overviewBox .pad p span {font-size: 16px;padding-top:10px;}

/*Home / FlashOverview
*****************************************************************************************/
.titleOverview {
	text-align:center;
	color:#024266;
}

.flashOverview {

}
/*---------------------------------------------------------------------------*/
/*																			 */
/* =Secondary Content (subContent)
/*																			 */
/*---------------------------------------------------------------------------*/
.subSection {
	width:252px;
	float:left;
}

.menu {}	

.subSection .menu h1 { /* these are the text titles that lay over bg_menu.jpg */
	padding:16px 0 8px 23px;
	font-size:11px;
	text-transform:uppercase;
}

.subSection .menu .pad {  
	padding:2px 10px 10px 10px;
	font-size:12px;
}

.subSection .menu .pad p span {font-size: 12px;}

/* =stats
-----------------------------------------------------------------------------*/

#lastTimestamp {text-align:center; margin:auto}

#dataTable {
	border-collapse:collapse;
}

#dataTable tr {
	padding:8px 0 8px 0;
	border-bottom:1px solid #000;
	text-align:left;
	cursor:help;
}

#dataTable td {
	padding:8px 0 8px 0;
	border-bottom:1px solid #BBB;
	}

#dataTable tr:hover {}

#dataTable tr td.labels {
	width:65%;
	padding-right: 40px;
	font-size:100%;
}

#dataTable tr td.values {
	font-weight:bold;
	width:35%;
	padding-right: 4px;
}
	
#dataTable tr td.values .unit {
	font-weight:normal;
	margin-left:4px;
	font-size:75%;
}

#dataTableImg {
	padding:20px;
	text-align:center;
}

table.overviewStats {
	border-collapse:collapse;
	width:100%;
	margin-bottom:10px;
}

table.overviewStats caption {
	text-align:left;
	width:100%;
	font-size:120%;
	font-weight:bold;
}

table.overviewStats td {
	font-size:120%;
	padding:2px;
}

table.overviewStats td span {
	color:#FF6600;
	font-size:90%;
	width:100px;
	
}
/* ========== Project Overview ============== */
.project_overview img {
	padding-right: 4px;
}


/*---------------------------------------------------------------------------*/
/*																			 */
/* =LIGHTBOX
/*																			 */
/*---------------------------------------------------------------------------*/
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }


#outerImageContainer{
	position: relative;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}