/*
	NOTES:
	> Moz: It appears that if you don't have a "visible" border around the page-box and the browser window shrinks, 
		the left edge of the content will NOT stop at the left edge of the viewport. However, IE6 doesn't handle 
		"transparent", so we hide it via the child-selector syntax (which IE also doesn't handle).
	> If you have a repeating background that's going to be printed, the smaller it is (the more it has to repeated,
		I guess) the larger the size of the print-job sent to the printer.
*/

/* Page setup ####################################################################################################### */
body
{
	font-size:   75%; /* This sets up our ability to resize the layout with the font size (by using 'em') */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	margin:  0.5em;
	padding: 0em;
	border:  0em;
}

a
{
	text-decoration: none;
	color: blue;
}
a:hover   { text-decoration: underline; }
a:visited { color: blue; }
a:active  { color: blue; }

a.anchor { text-decoration: none; }

h3 { text-align: center; }

hr
{
	background-color: #006;
	color: #006;
	border-top: none;
	border-bottom: 1px solid;
	height: 1px;
}

.hrDashed
{
	border-bottom: 1px dashed rgb(102,102,102);
	height: 1px;
	margin-bottom: 0.5em;
}

table
{
	margin: 0em;
	padding: 0em;
	outline: 0em; border-width: 0em; border-spacing: 0em; border-collapse: collapse; /* get rid of table row/cell padding/spacing */
}
td
{ padding: 0em; }

fieldset
{
	border-width: 1px;
	border-color: rgb(150,150,150);
	border-style: solid;
	padding: 0.5em;
	margin-bottom : 0.5em;
	margin-top: 0em;
}

legend 
{
	color: black;
	padding-left: 0.25em; padding-right: 0.25em;
	margin-bottom: 1em; margin-top: 0.5em; /* discrepancies between Moz & IE rendering make us specify margin-top */
}

optgroup
{
	font-weight: normal;
	font-style: normal;
	color: gray;
}
optgroup option
{
	color: black;
}

/* General Layout ################################################################################################### */

.tblPageContainer
{
	width: 62em; /* about 800px at normal font-size */
}

.tblSectionContainer
{
	width: 100%;
	background: white;
}

.tblContainer
{
	width: 100%;
}

/* Table elements ################################################################################################### */
.tr_alt
{ background: #e5e5ff; }

.tblListing
{ width: 100%;}

.tblListing td
{
	padding: 0em 0.25em 0em 0.25em;
	border-right: 1px solid white; /* simulate cell-spacing by using the page background color */
}

.tblReport {}
.tblReport td 
{ padding: 0.25em 0.5em 0em 0.5em; }

/* Menu elements #################################################################################################### */
.m1Container /* ul */
{
	list-style: none;
	padding: 0; /* makes the li elements start immediately at the left */
	margin: 0;
}

.m1Container li
{
	float: left; /* This makes the list "stack" horizontally */
}

.m1Container li:hover .m2Container, .m1Container li.over .m2Container
{
	display: block;
}

.m1Container a
{
	display: block; /* allows the padding setting to expand the size of the linked area */
	padding: 0.5em;
}

.m1Container a:visited
{
	color: white; /* for IE */
}

.m2Container
{
	display: none; /* make the items hidden */
	padding: 0; /* allow the link to fill the area */
	position: absolute; /* when they show up, don't make the enclosing element expand */	
	border: 1px solid black;
	background: rgb(110,110,110);
}

.m2Container ul
{
	padding-left: 1em;
	margin-left: 1em;
	list-style-type: square;
}

.m2Container li
{
	float: none;
	margin-bottom: -1em;
}

.m2Container>ul li
{
	margin-bottom: auto; /* overwrite IE hack above */
}

.m2Container a
{
	font-size: smaller;
}

.mItem
{
	color: white;
	font-weight: bold;
	background: rgb(110,110,110);
}

.mItemSelected
{
	color: white;
	font-weight: bold;
	font-style: italic;
	background: rgb(150,150,150);
}

.mItemChildSelected
{
	color: white; /* this is actually ignored; weird */
	font-weight: bold;
	background: rgb(150,150,150);
}

.mItem:hover
, .mItemSelected:hover
, .mItemChildSelected:hover
{
	color: white;
	font-weight: bold;
	background: rgb(20,43,95);
	text-decoration: none;
}

.navbarBottomBar
{
	border-top: 1px solid white; /* give us a white line between this and the menu */
	height: 1em;
	background: rgb(8,80,152);
}


.bcItem
, .bcItemChildSelected 
, .bcItemSelected
{
	font-size: 0.75em;
}


/* Form elements #################################################################################################### */
.frmFieldset
{
	border-width: 1px;
	border-color: rgb(150,150,150);
	border-style: solid;
	padding: 0.5em;
	margin-bottom : 0.5em;
	margin-top: 0em;
}


.frmFieldset div
{
	clear: both;
	margin-bottom: 0.25em;
}

.frmFieldset > div
{
	/* Had to add for FF1.5; don't know if they fixed or broke something. 
	   Also, had to hide from IE because the layout gets screwed when the validators display error messages.	*/
	float: left; 
}

.frmBoxLabel
{
	float: left;
	text-align: right;
	padding-right: 0.5em;
	padding-bottom: 1em;
	width: 10em;
}

.frmBoxInput 
{
	float: left;
	text-align: left;
	padding-left: 0em;
}

.frmBoxMessage 
{
	float: left;
	font-size: smaller;
}


.frmLabel { }
.frmLabelRequired { font-weight: bold; }

.frmButton
{
	border-style: outset;
	border-width: 1px;
}

.frmTextBox { width: 15em; }

.frmInvalidInput { color: red; }

.frmCPNorm  { width: 17em; }

/* DateTimePicker ################################################################################################### */
.dtpDate { width: 6em; }
.dtpHour,
.dtpMin,
.dtpSec,
.dtpDesignator { font-size: smaller; }
.dtpTime { display: inline; white-space: nowrap; }

/* MessageBox ####################################################################################################### */
.mbInformation, .mbSuccess, .mbWarning, .mbError, .mbFailure
{
	margin: 1em 2em 0em 2em;
	background-color: rgb(250,250,250);
}

.mbSuccess { border: 1px solid green; }
.mbError, .mbFailure { border: 1px solid red; }
.mbInformation, .mbWarning { border: 1px solid black; }


/* Event List ####################################################################################################### */
.tblFootage
{
	width: 100%;
	padding: 0.5em;
}

.tblEventList
{
	margin-left: 0.25em;
	width: 100%;
}

.tblEventItem
{
	width: 100%;
	padding: 0.5em;
}
.tblEventItem td
{ padding: 0.5em; }

.tblEventItem th
{
	border-top: 1px solid black;
	background-color: #e4eaf5;
}

.elEventBeginTime
{
	font-weight: normal;
	float: left;
	padding-left: 0.5em;
}

.elEventBeginDate
{
	font-weight: normal;
	float: right;
	padding-right: 0.5em;
}

.elNavContainer
{
	width: 100%;
	margin-bottom: 0.5em;
	margin-left: 0.25em; /* line up the left edge with tblEventList */
	background: rgb(110,110,110);
}

.elNavButton
{
	background: rgb(150,150,150);
	font-size: 1.25em;
}

.elNavButton a, .elNavButton a:visited
{
	padding: 0em 1em 0em 1em;
	display: block;
	font-size: smaller;
	color: white;
}

.elNavButton a:hover
{
	text-decoration: none;
	background: rgb(20,43,95);
}

.elNavButtonSeparator
{
	width: 1px; /* keep Moz from collapsing the TD (in spite of the spacer image) */
	background: rgb(160,160,160);
	border-right: 1px solid black;
}

.elNavConjunction
{
	padding: 0em 0.5em 0em 0.5em;
	font-size: smaller;
	color: white
}

.elNavBeginDate
{
	font-size: smaller;
	font-weight: bold;
	text-align: right;
	padding: 0em 0.5em 0em 0.5em;
	color: white;
}

.elNavEndDate
{
	font-size: smaller;
	font-weight: bold;
	text-align: left;
	padding: 0em 0.5em 0em 0.5em;
	color: white;
}

.elSelectedItem
{
	background: #d5dbe6; /* a bit darker than "tblEventItem th" */
}


/* Activity Graph ################################################################################################### */
.agContainer
{
	width: 100%;
	border: 1px solid black;
	margin: 0.5em 0em 0.5em 0em;
	padding: 0em;
}

.agGraph
{ 
	width: 100%;
}

.agContainer td
{ padding: 0em 0.5em 0em 0.5em; }

.agArrow div a:hover
{
	text-decoration: none;
	background: rgb(20,43,95);
}

.agArrow div a, agArrow div a:visited
{ 
	padding: 3px 1px 3px 1px;
	background: rgb(110,110,110);
}

.agArrow div
{ padding: 3px 1px 3px 1px; } /* workaround for IE */

.agHorizLine
{
	background: black;
}

.agShowing
{
	background: #e4eaf5;
	font-size: smaller;
}

.agNotShowing
{
	background: white;
	font-size: smaller;
}

.agBeginDate
{
	float: left;
}

.agEndDate
{
	float: right;
}

/* Frame Viewer ##################################################################################################### */
.fvFrame, .fvFrameSelected 
{ 
	float: left;
	margin: 0em;
	padding: 0.5em;
}

.fvFrameSelected { background: #d5dbe6; }

.fvFrame p, .fvFrameSelected p 
{
	text-align: center;
	margin: 0.5em;
}

.fvNavButton
{
	background: rgb(150,150,150);
	font-size: 1.25em;
	padding: 0em;
}

.fvNavButton a, .fvNavButton a:visited
{
	padding: 0em 1em 0em 1em;
	display: block;
	font-size: smaller;
	color: white;
}

.fvNavButton a:hover
{
	text-decoration: none;
	background: rgb(20,43,95);
}

/* Camera Quick Picker ############################################################################################### */
.cqpItem
{
	float: left;
	margin: 0.25em;
	padding: 0.25em 0em 0.25em 0em;
	border: 1px solid black;
	width: 19.5em;
}


.cqpGroup
{
	clear: both;
	font-weight: bold;
	background: #d5dbe6;
	font-size: 1.5em;
	margin-bottom: 0.5em;
}

.cqpGroupAction
{
	clear: both;
	margin: 0.5em 0em 0em 1.5em;
}


/* Help hints ####################################################################################################### */
.help_anchor
{
	text-decoration: none;
	font-size: 0.75em;
	color: white;
	background: blue;
	padding: 0px 3px 0px 3px;
}
.help_anchor:visited { color: white; }
.help_anchor:hover { text-decoration: none; }

.help_container
{
	position: absolute;  
	visibility: hidden;
	padding: 3px;
	border: 1px solid black;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
	width: 250px;
	text-align: left;
	font-weight: normal;
	background: white;	
}