/* Basic HTML elements */
body {
    color: #000;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
	font-weight: normal;
}
  
p, h1, h2, h3, h4, dd {
	margin-bottom: 1em;
}

a:link, a:visited {
	color: #06C;
}

a:hover, a:active {
	color: #333;
}

dt {
	font-weight: bold;
}

dd {
	padding-left: 20px;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

ul {
	list-style: square;
	list-style-position: inside;
}

ul li {
	margin-bottom: 0.5em;
}

/* Main elements */
#pageWrapper {
	color: black;
	margin: 0 auto;
	padding: 8px;
	max-width: 980px;
	position: relative;
}
#header {
    /* This makes it hard to override */
	/* margin: 0;
	padding: 0; */
}
#container {
	margin: 0; 
	padding: 0 0 10px 0;
	border: 1px solid #999;
	background: #fff;
	color: inherit;
	clear: both;
    /* And rounded corners */
	/* border-radius: 0 0 8px 8px / 0 0 8px 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px; */
}
#monthSummary {
	background-color: #ddd;
	margin: 0;
	padding: 5px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa)); /* for webkit browsers */
    background-image: -webkit-linear-gradient(top, #ddd, #aaa);
    background-image: -moz-linear-gradient(top, #ddd, #aaa);	
    background-image: -ms-linear-gradient(top, #ddd, #aaa);
    background-image: linear-gradient(to top, #ddd, #aaa);
}
#monthSummary h3 {
	background: transparent url(../../images/icon-quickview.png) 0 0 no-repeat;
	color: #000;
	font-size: 1.2em;
	font-weight: bold;
	padding: 5px 0 10px 24px;
	margin: 0 0 5px 0;
}
#monthSummary>table {
	width: 100%;
}
#monthSummary td {
	font-size: 10px;
	color: #333;
  	padding: 2px 4px;
}
#pageContent {
	padding: 10px;
	margin: 0;
	/* max-width: 790px; */
}

/* Page header stuff */
h1#mainTitle {
	color: #000;
	background-color: transparent;
	font-weight: bold;	
	margin: 0;
	padding: 0;
}
h2#pageTitle {
	color: #666;
	background-color: transparent;
	margin: 6px 0 4px 0;
	padding: 0;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
}
#mobileToolbar {
	/* Hidden in main view always. */
	display: none;
}

/* Block Code */
#sessionInfo {
	position: absolute;
	top: 0;
	right: 0;
	margin: 6px;
	text-align: right;
	font-size: 1.25em;
}

#tabs {
	clear: both;
	margin: 10px 0 0 0;
	padding: 0 0 4px 0;
	background-color: #999;
	width: 100%;
	overflow: auto;
	
	background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666)); /* for webkit browsers */
	background-image: -webkit-linear-gradient(top,  #999,  #666);
    background-image: -moz-linear-gradient(top,  #999,  #666);	
    background-image: -ms-linear-gradient(top,  #999,  #666);
    background-image: linear-gradient(to top,  #999,  #666);

	/* And rounded corners */
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5), 0 -1px 0 #fff;
}
ul#maintabs {
	list-style: none;
	margin: 0;
	padding: 4px 10px;
}
ul#maintabs li.on {
	float: left;
	margin: 0;
	padding: 0 0 0 20px;
	text-align: center;
	color: #000;
}
ul#maintabs li.on a:link, ul#maintabs li.on a:visited, 
ul#maintabs li.on a:hover, ul#maintabs li.on a:active {
	background-color: #ccc;
	/* And a cross-browser gradient */
	/***
	* Note: If customers don't like this default blue colour for tabs, I
	* recommend overriding the values in a customer-specific stylesheet
	*/
	/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccefff', endColorstr='#7ca3c8'); */ /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ccefff), to(#7ca3c8)); /* for webkit browsers */
    background-image: -webkit-linear-gradient(top,  #ccefff,  #7ca3c8);
    background-image: -moz-linear-gradient(top,  #ccefff,  #7ca3c8);
    background-image: -ms-linear-gradient(top, #ccefff, #7ca3c8);
    background-image: linear-gradient(to top, #ccefff, #7ca3c8);

	color: #000;
	text-shadow: 0 1px 1px #fff, 0 -1px 1px #bbb;
	font-weight: bold;
	padding: 4px 8px 6px 8px;
	margin: 0;
	display: block;
	text-decoration: none;

	/* Rounded border, where supported */
	border-radius: 5px;
	
	/* And a tiny bit more styling */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 -1px 0 #fff;
}
ul#maintabs li {
	float: left;
	margin: 0;
	padding: 0 0 0 20px;
	text-align: center;
	color: #000;
	text-decoration: none;
}
ul#maintabs li a:link, ul#maintabs li a:visited, ul#maintabs li a:hover, ul#maintabs li a:active {
    color: #ccc;
    text-shadow: 0 1px 1px #eee, 0 -1px 1px #333;
	padding: 4px 8px 6px 8px;
	margin: 0;
	display: block;
	text-decoration: none;
}
ul#maintabs li a:hover, ul#maintabs li a:active {
	color: #fff;
}

.errorText {
	font-size: 13px;
	color: #900;
	font-weight: bold;
	padding: 5px 0 5px 28px;
	background: transparent url(../../images/icon-warning.png) no-repeat top left;
}
.inlineHelp {
	font-size: smaller;
	color: #666;
	background: transparent;
}
td.inlineHelp {
	padding: 0 0 9px 0;
}
.instructionText {
	padding: 4px;
	font-size: 1.2em;
	font-style: italic;
}
.warningText {
	padding: 8px 15px;
	color: #333;
	background-color: #ffffe3;
	border: #c5c5a9 1px solid;
	font-size: 1.25em;
	font-style: italic;
}
.section {
	margin: 5px 0 2em -10px;
	padding: 0 0 0 18px;

}
h2.sectionTop {
    margin: 5px 0 0.5em 0;
    color: #3d3f45;
	background: transparent;
	text-transform: uppercase;
	font-size: 1.75em;
}

/* Notes viewer */
a.notesView:link, a.notesView:visited, a.notesView:hover,  a.notesView:active  {
	text-decoration: none;
	position: relative;
}
a.notesView span, a.notesView:link span, a.notesView:visited span, a.notesView:active span {
	display: none;
}
a.notesView:hover span {
	display: block;
	position: absolute;
	top: 0;
	left: 24px;
	background: #ffc;
	color: #333;
	border: 1px solid #999;
	padding: 4px;
	width: 200px;
}

/* Tables */
table caption {
	text-align: left;
	margin: 0;
	padding: 5px 0 0 24px;
	font-size: 13px;
	font-weight: bold;
	height: 24px;
	background: transparent url(../../images/icon-table.png) no-repeat top left;
	color: #000;
}
table th {
   text-align: center; 
   font-weight: bold;
   color: #000;
   vertical-align: middle;
   padding-bottom: 4px;
}
table.full {
   margin: 0;
   width: 100%;
}
table.enclosed {
   width: 100%;
   clear: both;
}
table.normal th, table.normal td {
	padding: 4px;
}
table.enclosed th, table.normal th {
   background-color: #ccc;
   border: 1px solid #ccc;
   padding: 2px;
}
table.enclosed td, table.normal td {
   border: 1px solid #CCC;
   padding: 2px;
}
table.enclosed tr {
   background-color: #EEE;
}
form table td, form table th {
	padding: 2px;
	vertical-align: top;
}
form table td input, form table td select {
	position: relative;
	top: 0px;
}
tfoot td {
   font-weight: bold;
}
td.subTableHeading {
	font-weight: bold;
	font-size: 1.3em;
}

table.enclosed td.name { text-align: left; }
table.enclosed td.multiple { text-align: center; }
table.enclosed td.title { text-align: center; }
table.enclosed td.number { text-align: right; }
table.enclosed td.left { text-align: left; }
table.enclosed td.right { text-align: right; }
table.enclosed td.center { text-align: center; }
table.enclosed th.name { text-align: left; }
table.enclosed th.multiple { text-align: center; }
table.enclosed th.title { text-align: center; }
table.enclosed th.number { text-align: right; }
table.enclosed th.left { text-align: left; }
table.enclosed th.right { text-align: right; }
table.enclosed th.center { text-align: center; }

table.floated {
	float: left;
	margin-right: 20px;
}

th.left {
	text-align: left;
}
table.half, .half { 
   width: 50%;
}
table th.small {
   font-size: 1.0em;
   text-align: left;
}
table td.center, .center {
   vertical-align: middle;
   text-align: center;
}
table td.active {
   text-align: center;
   background: #eee;
   color: #040;
}
table td.inactive {
   text-align: center;
   background: #eee;
   color: #400;
}

div.graph {
	width: 100%;
	height: 300px;
	margin-top: 10px;
}
#reportConfig {
	margin-bottom: 1.5em;
}
table.dateTypeOptionSelected {
	background-color: #ddd;
}

/************OLD***************/

label {
   font-weight: bold;
   text-align: right;
}

form {
   padding: 0; margin: 0;
}


h3.enclosed {
   border: 1px solid #ccc;
   padding: 5px;
}


div.left {
  clear: left;
  margin: 0;
  padding: 0;
  width: 48%;
  float: left;
}

div.right {	
  margin: 0;
  padding: 0;
  text-align: left;
  width: 50%;
  float: left;
}

div.center {
    margin-left:auto;
    margin-right:auto;
    width:70%;
}

div.col {
  padding: 0 20px;
  text-align: left;
}

div.left .col {
  padding: 0 70px 40px 6px;
}

div.right .col {
  min-width: 200px;
  padding: 0 20px;
}

ul#list { list-style-type:none; }

/* Generic Classes */

.button {
   display: none;
   vertical-align: middle;
   margin-right: 1em;
   border-bottom: none !important;
   background: none !important;
}

.note {
	background: #EEE;
	padding: 4px;
	font-family: tahoma,verdana,sans-serif;
	font-size: 0.85em;
	line-height: 130%;
}

.bg-dark {
   background-color: #EDEBE3;
}

.bg-mid {
   background-color: #FFF3B3;
}

.bg-light {
   background-color: #FFFAE1;
}
background: #ddd;

.spacer {
   clear:both;
   width:0;
   height:0;
}

.small {
   font-size: 9px;
}

/* Containers */
#bottom {
   margin: 0 auto;
   text-align: right;
   padding: 0;
}

/* End Containers */
ul#subtabs {

}

ul#subtabs li {
   margin: 0; padding:0;
   display: inline;
   list-style: none;
}

ul#subtabs a:hover {
   background: #FFF7CD;
}

ul#subtabs a:link, ul#subtabs a:visited {
   float: left;
   color: black;
   border: 1px solid #666666;
    padding: 5px 7px 7px 7px; /* for All other Browsers */
   text-decoration: none;
}

ul#subtabs a:link.on, ul#subtabs a:visited.on {
	float: left;
   color: black;
	background: #FFF3B3;
   font-weight: bold;
}

.inputLarge {
	width: 300px;
}
.inputMedium {
	width: 120px;
}

/* End Tabs */

   
/*-------------------------------------------------
 *  LOGIN SCREEN (.login is body class)
 *-------------------------------------------------
 */

.login div.container {
   margin: 60px auto 20px auto;
}

.login h1 {
   margin-bottom: 20px;
}

.login dl {
   margin: 10px 0 0 0;
}

.login p {
   margin: 10px 0 0 0;
}

.login dt {
   float: left;
   width: 80px;
   font-size: 1.0em;
   line-height: 24px;
}

.login dd {
   margin: 0 0 5px 90px;
   font-size: 1.0em;
   line-height: 24px;
   color: #666;
   margin-left: 80px;
}

.login input {
   font-size: 1.0em;
}

.login dd span {
   color: #ccc;
}

.login input#username {
   width: 300px;
}

.login input#password {
   width: 150px;
   margin-right: 5px;
}

.login input#emailpassword {
   vertical-align: middle;
   margin-right: 5px;
}

.login div.AlertGood,
.login div.AlertBad {
   margin: 10px 0 20px 0;
}

.login div.dialog {
   width: 400px;
   border: 5px solid #ccc;
   padding: 15px 20px 10px 20px;
   text-align: left;
   background: #fff;
}

.login form {
   border: 0px;
   padding: 0px;
}

/* End Login Screen */

/* Fieldsets */
fieldset {
   clear: both;
   border: 1px solid #BFBBAC;
   margin: 5px 5px 5px 0;
   padding: 5px;
   width: auto;
}

fieldset legend {
   background: white;
   font-size: 1.2em;
   font-weight: bold;
}


fieldset.popup_left { 
    clear: none;
    float: left;
    width: 47%;
}

fieldset.popup_right { 
    clear: none;
    float: right;
    width: 47%;
}

table.auto td, table.auto th {
   padding: 2px 3px;
}

p.notes {
    font-size: 12px;
}

/*------------------------------------*\
	IPHONE - We should probably remove these styles
\*------------------------------------*/
@media screen and (max-device-width: 480px) {
	body {
  		font-family: Arial, Verdana, sans-serif;
        text-size-adjust: none;  
        padding: 5px;
	}
	img {
	  max-width:100%;
	  height:auto;
	}
	#tabs {
		display: none;
		position: fixed;
		top: 29px;
		width: auto;
		min-width: 50%;
		border-radius: 5px;
	}
	ul#maintabs li, ul#maintabs li.on {
		float: none;
		display: block;
		padding: 2px 4px;
	}
	#mobileToolbar {
		display: block;
		background-color: #555;
		color: #fff;
		width: auto;
		padding: 6px;
		margin-bottom: 1em;
		font-size: 1.3em;
		background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* for webkit browsers */
        background-image: -webkit-linear-gradient(top,  #555,  #333);
        background-image: -moz-linear-gradient(top,  #555,  #333);
        background-image: -ms-linear-gradient(top, #555, #333);
        background-image: linear-gradient(to top, #555, #333);

		/* And a tiny bit more styling */
        box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 -1px 0 #fff;
		
		overflow: auto;
	}
	#mobileToolbar a:link, #mobileToolbar a:visited {
		color: #fff;
	}
	#mobileToolbar span.mobileMenuLink {
		display: block;
		float: left;
		width: 40%;
		font-weight: bold;
	}
	#mobileToolbar span.mobileMenuLink a {
		border: #ddd 1px solid;
		padding: 0 15px;
		text-decoration: none;
		border-top: rgba(255, 255, 255, .3) solid 1px;
		border-left: rgba(255, 255, 255, .1) solid 1px;
		border-right: rgba(255, 255, 255, .1) solid 1px;
		border-bottom: rgba(0, 0, 0, .3) solid 1px;
	    box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 -1px 0 #fff;
	}
	#mobileToolbar span.logout {
		display: block;
		float: right;
		width: 40%;
		text-align: right;
	}
	#sessionInfo {
		position: relative;
		top: 0;
		left: 0;
	}
	#monthSummary {
		float: none;
		width: auto;
		clear: both;
	}
	#monthSummary h3 {
		margin-bottom: 0;
		padding-bottom: 2px;
	}
	.instructionText {
		display: none;
	}
   .notesView {
      display: none;
   }

	.inputLarge {
		width: 175px;
	}
	.inputMedium {
		width: 100px;
	}
	
	table.enclosed {
		/* These are usually huge tables, and until they're properly stripped down to fit their
		  content on the iPhone, I think they should be dropped. */
		display: none;
	}
}