img { border-style: none; }
img.img:hover { opacity: 1.0; filter: alpha(opacity=100); } 
img.img       { opacity:  .90; filter: alpha(opacity=90); } 
img.imggray       { opacity:  .4; filter: alpha(opacity=40); } 


/* new reports menu css*/
IMG.rightarrow     {width:12px; BORDER-RIGHT: silver 0px solid; BORDER-TOP: silver 0px solid; FILTER: alpha(opacity=100); BORDER-LEFT: silver 0px solid; BORDER-BOTTOM: silver 0px solid; -moz-opacity: 1.0; opacity: 1.0 }
IMG.rightarrowopac {width:12px; BORDER-RIGHT: silver 0px solid; BORDER-TOP: silver 0px solid; FILTER: alpha(opacity=10); BORDER-LEFT: silver 0px solid; BORDER-BOTTOM: silver 0px solid; -moz-opacity: .1; opacity: 0.1 }
span.tiny  {   font-family: arial;  font-size: 9px; color: dimgray; font-weight: normal} 
span.description {  font-family: arial;  font-size: 9pt; color: dimgray; font-weight  : normal}
span.medium  {   font-family: arial;  font-size: 16px; color: dimgray; font-weight: bold} 
p.menuoff {  font-family: arial;  font-size: 12pt; color: black;     font-weight  : normal}
p.menuon  {   font-family: arial;  font-size: 12pt; color: red; font-weight: normal} 
p.reportheader {   font-family: arial;  font-size: 16pt; color: red ; font-weight: normal}	
p.small {  font-family: arial;  font-size: 9pt; color: black;     font-weight  : normal}

a.reportlink { text-align: left; font-family: arial; color: black; font-size: 12pt; border: white 0px solid; }

TD.largenamelabel      {FONT-FAMILY: arial; COLOR: dimgray; FONT-SIZE: 14pt; FONT-WEIGHT: bold; FONT-FACE: arial }
TD.largetitle          {BORDER-BOTTOM: silver 1px solid; background-color:ghostwhite;FONT-FAMILY: arial; COLOR: dimgray; FONT-SIZE: 14pt; FONT-WEIGHT: bold; FONT-FACE: arial } 
TD.largetitlewhitebackground   {FONT-FAMILY: arial; COLOR: dimgray; FONT-SIZE: 10pt; FONT-WEIGHT: bold; FONT-FACE: arial } 
TD.largetitleright     {text-align:right; BORDER-BOTTOM: silver 1px solid; background-color:ghostwhite;FONT-FAMILY: arial; COLOR: dimgray; FONT-SIZE: 14pt; FONT-WEIGHT: bold; FONT-FACE: arial } 
td.largetitleleftborder  { BORDER-LEFT: silver 1px solid; BORDER-BOTTOM: silver 1px solid; background-color:ghostwhite;FONT-FAMILY: arial; COLOR: dimgray; FONT-SIZE: 14pt; FONT-WEIGHT: bold; FONT-FACE: arial } 
td.seqoemedium { font-family: 'segoe ui'; font-size: 11pt; font-weight: bold; }	    
p.seqoemedium { padding:1px; font-family: 'segoe ui'; font-size: 11pt; font-weight: bold; }	   
body { font-family: Arial; font-size:10pt; color: Black; margin: 0px; }
h1 { font: bold 14pt Arial; margin-bottom: 40px; }
h2 { font: bold 12pt Arial; margin-bottom: 20px; }
.panel { border: silver 1px solid;  }
#DIVVideoMessages { position: absolute; top: 40px; left: 65%; width:450px; border: 1px solid silver; z-index: 99999; VISIBILITY: hidden; overflow: hidden; }
#DIVVideoDisable { position: fixed; top: 100px; left: 0; height:100%; width:100%; border: 1px solid silver; border-style: none solid; 
                   z-index: 99998; background-color:transparent; visibility: hidden; overflow: hidden; }

/* styles for large video div */
td.videotabcontrol { width:10%; border: 0px solid silver; }
td.videoselectedtabcontrol { background-color: black; width:12%; border: 1px solid silver; }
td.videotabspacer { width:5px;  border:0px}
td.videotabspacerlarge { width:30%; border:0px }
td.videotitle2 { text-align:center; color: steelblue; font-size: 10pt; vertical-align: bottom; }
td.videotitle { color: steelblue; font-size: 10pt; vertical-align: bottom; }
td.videotitlelarge { border-bottom: silver 1px dotted; font-weight: bold; text-align: left; color: black; font-size: 14pt; vertical-align: middle; }
a.videolinkmediumwhite  {font-weight: bold; text-align:left; color: white; font-size: 9pt; }
td.videotitlelargewhite { border-bottom: silver 1px dotted; font-weight: normal; text-align:left; color: white; font-size: 14pt; vertical-align: middle;  }

a.videolinklarge { font-weight: bold;text-align:center; color: black ; font-size: 12pt;  }
a.videolinksmall { border-bottom: silver 1px dotted; font-weight: normal; text-align:center; color: dimgray ; font-size: 9pt;  }
td.videoborder { border-bottom: silver 1px dotted; }
td.videolinkseparator { border-bottom: silver 1px dotted; text-align: right; color: steelblue; font-size: 9pt; }
td.videolinkmedium { text-align:left; color: dimgray ; font-size: 9pt;  }
a.videolinkmedium  { text-align:left;  font-size: 32px;  }
a.videolinkmedium2  { text-align:left;  font-size: 32px;  }


a.videotablink { font-weight: bold; text-align: center; color: dimgray; font-size: 10pt; }
a.videotablinkselected { font-weight: bold; text-align: center; color: white; font-size: 10pt; }
td.videocounter { font-weight: bold; text-align:center; width:30px; color: dimgray; font-size: 12pt; }

img.videophotoimg { border:0px; height:70px; width:70px; border-radius: 50em; }

img.rightarrow     { width:12px; border: 0px none; filter: alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0 }
img.rightarrowopac { width:12px; border: 0px none; filter: alpha(opacity=10);  -moz-opacity:  .1; opacity: 0.1 }

/*  Sitemap styles */
		 
span.tiny  {   font-family: arial;  font-size: 9pt; color: dimgray; font-weight: normal} 
span.mediumdescription {  font-family: arial;  font-size: 10pt; color: black; font-weight  : bold} 
span.largedescription {  font-family: arial;  font-size: 12pt; color: dimgray; font-weight  : bold}
span.largedata {  font-family: arial;  font-size: 12pt; color: black; font-weight  : bold}	
span.mediumdata {  font-family: arial;  font-size: 10pt; color: black; font-weight  : bold}		 
span.description {  font-family: arial;  font-size: 9pt; color: dimgray; font-weight  : normal}
span.tinydescription {  font-family: arial;  font-size: 7pt; color: dimgray; font-weight  : normal}
span.data {  font-family: arial;  font-size: 9pt; color: black; font-weight  : normal}
p.menuoff {  font-family: arial;  font-size: 12pt; color: black;     font-weight  : normal}
p.menuon  {   font-family: arial;  font-size: 12pt; color: red; font-weight: normal} 
p.reportheader {   font-family: arial;  font-size: 16pt; color: red ; font-weight: normal} 
a.particular-link {display: block; /* or inline-block; I think IE would respect it since a link is an inline-element */
                background: #fff url(path/to/image.gif) top left no-repeat; 
                text-align: left;
                line-height: 50px; } /* line height should be equal to the height of the image to vertically center using this technique */
a.inbox-link  
                {
                   
                font-size:8pt;
                /*line-height:30px;*/
                text-align:left;
                color:white; 
                background: black top left no-repeat; 
                } 
    
a.reportlink { text-align: left; font-family: arial; color: black; font-size: 12pt; border: white 0px solid; }
a.link { text-align: left; font-family: arial; color: black; font-size: 10pt; border: white 0px solid; }

div.sitemapdivcentered
{ 
    width: 100%;
    height: 49px;
}

a { color: steelblue; text-decoration: none; }
a:active { color: black; text-decoration: none }
a:hover { color: red; text-decoration: underline;  }

.sitemaptable
{
	width: 100%;
	height: 100%;
    padding-left: 140px;       /* Leave space for company logo */
	visibility: hidden;
	border: 0 none;
}
.sitemaptable.pcfe
{
    padding-left: 42%;
}

.sitemaptable td { padding: 0; margin: 0;}

.sitemaptable .right-bar {
    text-align: right;
}
.sitemaptable .personalBar td,
.sitemaptable .personalBar td:hover   /* Note need the :hover explicitly to override ".sitemaptable td:hover" in sitemap.ascx */
{
	background-color: transparent;
	padding-left: 12px;
}
.sitemaptable ul { display: block; white-space: nowrap; padding-left: 4px; }
.sitemaptable li
{
    display: inline-block;
	text-align: center;
	white-space: nowrap;
    padding: 0px 12px;
}
.sitemaptable li a { font-weight: bold; }

#dropmenudiv a { display: block; padding: 3px 0px 3px 3px; border-bottom: #e0e0e0 0px solid;
                 font-family: arial; text-decoration:none; font-size:9pt; color:black; text-indent: 3px; text-decoration: none }
#dropmenudiv a:hover { color: red; }



#dropmenudiv {
	margin-top:2px;
	padding:0;
	background-color: white;
	display:inline-block;
	visibility: hidden;
	width:800px;
	list-style:none;
	position: fixed;
	font-size:0;
	z-index: 1002;
	/*border-radius:4px;*/
	border: 1px solid silver;
	border-bottom: 4px solid black;
}


#viewdropmenudiv a { display: block; padding: 3px 0px 3px 3px; border-bottom: #e0e0e0 0px solid;
					 font-family: arial; text-decoration: none; font-size: 9pt; color: black; text-indent: 3px; text-decoration: none }
#viewdropmenudiv a:hover { color: red; }

#viewdropmenudiv {
	margin-top: 2px;
	padding: 0;
	background-color: white;
	display: inline-block;
	visibility: hidden;
	width: 800px;
	list-style: none;
	position: fixed;
	font-size: 0;
	z-index: 1002;
	/*border-radius:4px;*/
	border: 1px solid silver;
	border-bottom: 4px solid black;
}

/* End of sitemap styles */


#GettingStartedPanel {  }
#GettingStartedID { width: 100%; height: 370px; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.nowrap { white-space: nowrap; }

.left-align { text-align: left; }
.right-align { text-align: right; }

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.tahoma { font-family: Tahoma }
.red  { color: Red; }
.statusline { color: red; }

.disablediv { position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; z-index:49; visibility: hidden;
              background-color: transparent; -moz-opacity: 1.0; opacity:1.0; filter: alpha(opacity=100); }

.disabledivdark {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.8;
    z-index: 998;
    height: 100%;
    width: 100%;
}
/*  flat button colorful styles */
input.buttonflatredmediumwidth	     {width:150px;border-color:darkred;font-weight:normal;background-color:#cc1c29;color:white;height:28px;}
input.buttonflatredmediumwidth:hover { border-color:#cc1c29; background-color:#E74D59; }
input.buttonflatwhitenotopborder    {BORDER-TOP: white 0px solid;font-family:arial;font-size: 9pt;height:28px;border-color:silver;font-weight:bold;background-color:white  ; color:black;}
input.buttonflatwhiteon             {font-family:arial;font-size: 9pt; height:28px;border-color:#a0a0a0;font-weight:bold;background-color:#f0f0f0; color:black;}
input.buttonflatwhite               {font-family:arial;font-size: 9pt; height:28px;border-color:silver;font-weight:bold;background-color:white;color:black;}
input.buttonflatwhite:hover         {border-color:#a0a0a0; background-color:#f0f0f0; }
input.buttonflatwhite:disabled      {border-color:#a0a0a0; background-color:#d0d0d0; }
input.buttonflatwhitexswidth        {width:50px;font-family:arial;font-size: 9pt; height:20px;border-color:silver;font-weight:bold;background-color:white  ; color:black;}
input.buttonflatwhitexswidth:hover  {background-color:#f0f0f0; }
input.buttonflatwhitexswidthon      {width:50px;font-family:arial;font-size: 9pt; height:20px;border-color:silver;font-weight:bold;background-color:#f0f0f0  ; color:black;}

input.buttonflatwhitetinywidth    {width:80px;font-family:arial;font-size: 9pt; height:28px;border-color:silver;font-weight:bold;background-color:white  ; color:black;}
input.buttonflatwhitetinywidth:hover  {background-color:#f0f0f0; }
input.buttonflatwhitetinywidthon  {width:80px;font-family:arial;font-size: 9pt; height:28px;border-color:silver;font-weight:bold;background-color:#f0f0f0  ; color:black;}
input.buttonflatwhitesmallwidth    {width:100px;font-family:arial;font-size: 9pt; height:28px;border-color:silver;font-weight:bold;background-color:white  ; color:black;}
input.buttonflatwhitesmallwidth:hover  {background-color:#f0f0f0; }
input.buttonflatwhitesmallwidthon  {width:100px;font-family:arial;font-size: 9pt; height:28px;border-color:silver;font-weight:bold;background-color:#f0f0f0  ; color:black;}
input.buttonflatwhitemediumwidth    {width:150px;font-family:arial;font-size: 9pt; height:28px;border-color:silver;font-weight:bold;background-color:white  ; color:black;}
input.buttonflatwhitemediumwidthdisabled    {width:150px;font-family:arial;font-size: 9pt; height:28px;border-color:silver;font-weight:bold;background-color:ghostwhite  ; color:silver;}
input.buttonflatwhitemediumwidth:hover  {background-color:#f0f0f0; }
input.buttonflatwhitemediumwidthon  {width:150px;font-family:arial;font-size: 9pt; height:28px;border-color:silver;font-weight:bold;background-color:#f0f0f0  ; color:black;}
input.buttonflatsilveron   {-moz-border-radius: 2px;  -webkit-border-radius: 2px; border-color:#9a9a9a;font-weight:normal;background-color:silver; color:white;height:28px; }
input.buttonflatsilver     {-moz-border-radius: 2px;  -webkit-border-radius: 2px; border-color :#9a9a9a;font-weight:normal;background-color:#a7a7a7; color:white;height:28px;}
input.buttonflatredon	  { -moz-border-radius: 2px;  -webkit-border-radius: 2px;border-color:#cc1c29;font-weight:normal;background-color:#E74D59;color:white;height:28px;}
input.buttonflatred	  { -moz-border-radius: 2px;  -webkit-border-radius: 2px;border-color:white;font-weight:normal;background-color:#cc1c29;color:white;height:28px;}
input.buttonflatblueon	  { -moz-border-radius: 2px;  -webkit-border-radius: 2px;border-color:#43678b;font-weight:normal;background-color:#658DB5;color:white;height:28px;}
input.buttonflatblue  { -moz-border-radius: 2px;  -webkit-border-radius: 2px;border-color:#293f54;font-weight:normal;background-color:#43678b;color:white;height:28px;}
input.buttonflatgreenon    { -moz-border-radius: 2px;  -webkit-border-radius: 2px;border-color:#74b36f;font-weight:normal;background-color:#8ECA8A;color:white;height:28px;}
input.buttonflatgreen {-moz-border-radius: 2px;  -webkit-border-radius: 2px; border-color:#5ab254;font-weight:normal;background-color:#74b36f;color:white;height:28px;}
input[type=button].showmorebuttons	{width:150px;font-weight:bold;background-color:#658DB5;color:white;height:30px;}
TD.menuclassonarrow { border: 1px solid PapayaWhip; padding: 2px 0; background-color: LemonChiffon; WIDTH: 100%; FONT-FAMILY: arial; COLOR: white; FONT-SIZE: 8pt; FONT-WEIGHT: bold; }
TD.menuclassoffarrow { BORDER-BOTTOM: silver 0px dotted; BORDER-LEFT: silver 0px dotted; PADDING-BOTTOM: 2px; BACKGROUND-COLOR: transparent; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: arial; COLOR: black; FONT-SIZE: 8pt; BORDER-TOP: silver 0px dotted; FONT-WEIGHT: normal; BORDER-RIGHT: silver 0px dotted; PADDING-TOP: 2px }
input.buttonflatwhitemediumwidthshort    {width:150px;font-family:arial;font-size: 9pt; height:15px;border-color:silver;font-weight:bold;background-color:white  ; color:black;}
input.buttonflatwhitemediumwidthshortdisabled    {width:150px;font-family:arial;font-size: 9pt; height:15px;border-color:silver;font-weight:bold;background-color:ghostwhite  ; color:silver;}
input.buttonflatwhitemediumwidthshort:hover  {background-color:#f0f0f0; }
input.buttonflatwhitemediumwidthshorton  {width:150px;font-family:arial;font-size: 9pt; height:15px;border-color:silver;font-weight:bold;background-color:#f0f0f0  ; color:black;}
/* input mac-like styles: round the corners, glow on focus */ 
input, textarea  {  border: silver 1px solid;  } 
input[type=checkbox],
input[type=radio] { border: 0px none white; }
input:focus, textarea:focus  {  outline:none; border: 1px solid #4195fc; box-shadow: 0px 0px 14px #4195fc; }

/*
	Button Styles
*/
.bluebuttoncolor { border: cornflowerblue 3px solid;  color: royalblue; }
.bluebutton { background-image: url(graybuttonsmall.gif); background-color: silver; border: 1px solid silver; color: black; padding: 3px; }
.redbuttoncolor { border: red 3px solid; color: red; }
.goldbutton { background-image: url(goldbutton.jpg); border: gold 1px solid; color: black; font-size: 9pt; }


/*
	Page header styles
*/
header { }  /* header should not be fixed because contains captionSpacer; companyCaption div is fixed */
.companyCaption { height: 50px; width: 100%; position: fixed; z-index: 80; }
.captionSpacer  { height: 50px; width: 100%; }
.companyLogo	{ height: 38px; max-width: 130px; margin: 5px 0 0 8px; position: absolute; }

#divyoutube.personalBar  { z-index:999; margin: 0px 0px 0px 0%; display: inline-block; }


#divyoutube.personalBar2  { position: absolute; margin: 2px 0px 0px 60%; display: inline-block; background-image: url('/commuter/images/white-transparent-75percent.png'); }
#divyoutube.setupOptions { position: absolute; top: 6px; left: 60%; z-index: 300;  width: 350px; }
#divyoutube.showVideos   { border: dimgray 1px solid; z-index:50000;position: absolute; top: 60px; left: 10px; width: 900px; }

#header_personalBar  { display: none; }
#header_setupOptions { background-color: ghostwhite; border: 1px solid silver; z-index:3000; display: none;
					   position: absolute; top: 50px; margin-top:1px; right: 0px; width: 400px; max-height: 85%; padding: 10px; overflow: auto;}
#header_videos       { display: none; }
 
#divyoutube.personalBar  #header_personalBar  { display: block; }
#divyoutube.setupOptions #header_setupOptions { display: block; background-color: White; border: 1px solid silver; }
#divyoutube.showVideos   #header_videos { display: block; }

.personalBar table td { padding: 0; }

.setupOptions { font-size: 9pt; }
.setupOptions h3 { margin: 0; padding: 4px 8px; background-color: #f0f0f0; font-size: 14px; }
.setupOptions h4 { margin: 12px 0 4px 0; font-size: 12px; font-weight: bold; color: #323232; }
.setupOptions p { margin: 12px 0 0 0;  }
.setupOptions label { display: inline-block; vertical-align: middle; margin: 5px 20px 0 0; font-weight: normal; }
.setupOptions .two { display: inline-block; width: 45%; }
.setupOptions div.two { margin:0; }   /* internal div within a section div */
.setupOptions div.two label { line-height: inherit; }
#header_setupOptions input { margin-right: 4px; vertical-align: middle; }  /* Use id to override bootstrap input margin */
.setupOptions div.currency { margin-top: 8px; }
.setupOptions div.generalInfo { margin-top: 8px; }

.setupOptions div.mobileSetup { text-align: center; }
.setupOptions div.mobileSetup a { display: inline-block; }
.setupOptions .buttons { margin: 20px 4px 0; text-align: center; }
.setupOptions .buttons input { width: 110px; }

.setupOptions .resourceOptions .colorLegend { margin-top: 6px; }
.setupOptions .resourceOptions select { width: 140px; vertical-align: top; }
.setupOptions .resourceOptions select.colors { margin-left:12px; }
.setupOptions .days { display: inline-block; width: 60px; text-align:right;background: white;}
.setupOptions .lockdays { display: inline-block; width: 60px; text-align:right; pointer-events: none;background: #f0f0f0;}

.org-selectorTitle {margin-left:25px; font: bold 12pt Arial; }
.org-selector { margin: 8px 0 0 20px; }
.org-selector > label:first-child { margin-left: -20px; }
.org-selector .code { width: 55px; }
.org-selector .name { width: 175px; }
.org-selector label { color: #404040; }

.orgTreeDiv
{ 
    position: fixed; left: 50%; top:20%;
    background: white; border: dimgray 1px solid; 
    display: none;
}
.orgTreeDiv h2 { margin-top:8px; }
.orgTreeDiv h2 a { float: right; }

.dhtmlx-tree-div {
			position: relative;
			box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.09);
			width: 450px;
			height: 400px;
            margin:auto;
            float:none;
		}
/* Top menu styles */
/*
#SitemapDiv { position: absolute; top: 42px; left: 15px; z-index: 108; width: 99%; height: 26px; border: 1px solid #ccccff; }
*/
#SitemapDiv { }

/* Siteheader iconBar (video, broadcast, etc) */

.iconBar { margin-top: 4px; white-space: nowrap; }
.iconBar > a, .iconBar > span { display:inline-block; margin: 0px 4px; }
.iconBar img { width: 25px; margin-right: 4px; border: 0; }
.iconBar #user_menu { color: white; }
.iconBar #user_menu img { width: auto; }  /* Reset so no 25px as for other iconBar icons above */

/*
	Type ahead drop down list
*/
table.typeAheadList
{
	width: 100%; 
	background-image: url(transparent.gif);
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-spacing: 0px;
	border-collapse: collapse;
}
.typeAheadList td.menuclasson,
.typeAheadList td.menuclassoff
{
	width: 100%; 
	background-color: White;
	padding: 2px 0px 2px 2px;
	border: 1px solid silver;
	border-top-style: none;
}
.typeAheadList td.menuclasson,
.typeAheadList td.menuclassoff:hover
{
	background-image: url("/commuter/bluebackground.jpg");
	background-color: LightBlue;
}
.typeAheadList td a { display: block; font-weight: bold; color: black; font-size: 8pt; }
.typeAheadList .hiddentd { display: none; }
.typeAheadList td img { margin-right: 8px; }
.typeAheadList td strong { color: Red; text-transform: uppercase; }


/*
	Embedded additional Info
*/
table.addinfo-t tr.addinfo-r td { padding: 3px; }
table.addinfo-t tr.addinfo-r td img { vertical-align: top; }
table.addinfo-t tr.addinfo-r td.refname { color: black; }
table.addinfo-t tr.addinfo-r input,
table.addinfo-t tr.addinfo-r select { width: 240px; border: 1px solid silver; font-size: 10pt; padding: 1px; }
table.addinfo-t tr.addinfo-r input { width: 236px; } /* must be slightly shorter than select to align */
table.addinfo-t tr.addinfo-r input.date { width: 200px; }

body.dlgbody { margin-top: 0px; }
input.hidetext_cell { background-color:white; font-size:11px; text-align: left; vertical-align: bottom; border: 1px silver solid; }  
td.nofocus { font-family: arial; color: black; font-size: 10pt; font-weight: normal; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

div.sessionExpiredMessage 
{
	 position: fixed; z-index: 900; left: 50%; margin-left: -150px; top: 100px;
	 padding: 40px; font-family: Verdana; color: #204040;
	 background-color: #f4f4f4; border: 1px solid silver;
}

div.sessionExpirationNotice { 
	position: absolute; z-index: 2000; width: 450px;
	top: 50px; left: 0; right: 0; margin: 0 auto; padding: 4px 20px;
	border: solid 2px dimgray; background-color: cornsilk; font-weight: bold; }

div.sessionExpirationNotice a { color: steelblue; }
div.sessionExpirationNotice a:hover { color: cornflowerblue; text-decoration: none; }

#DoubleCalendarHere { position: relative; }

/*---------------------------------------------------------------------------------------*/
/*  Project trends in the home and project pages.                                        */
/*---------------------------------------------------------------------------------------*/
.projectProgressBar { height: 15px; }
.projectProgressBar span { display: inline-block; height: 13px; margin-right: 2px; margin-bottom: 2px;}
.projectProgressBar span.actuals { width: 6px; background-color: cyan; }
.projectProgressBar span.filler { width: 6px; background-color: silver; }
.projectProgressBar span.percent { margin-left: 8px; vertical-align: top; }
.projectProgressBar.overbudget span.actuals { background-color: red; }
.projectProgressBar.overbudget span.percent:after { content: "Over"; color: red; margin-left: 4px; }

/*.dhtmlxcalendar_dhx_skyblue {
	position: absolute;
	display: block;
	background-color: white;
	font-family: Tahoma, Helvetica;
	font-size: 11px;
	color: black;
	z-index: 1000 !important;
}


	The following two definitions needed after the upgrade to the new dhtmlx. It seems the z-index
	for popup was modified to 105 from a much larger value, so it often opens under other popup divs.
	Also, the new stylesheet has a calendar inside a popup as relative positioned, which makes
	sense; however becasue the new dhtmlxPopup implementation causes us major issues and we're
	overriding with the old	js, which seems to assign CSS attributes directly on the calendar
	elements it creates assuming positioning is absolute, incompatibly with the new skyblue 
	stylesheet. As a result	an embedded double calenar has gaps in the middle.
*/
div.dhx_popup_dhx_skyblue div.dhx_popup_area td.dhx_popup_td div.dhtmlxcalendar_dhx_skyblue { position: absolute; }
	

/* Time and Expense sheet Submit/Approve error div */
div.SubmitApproveMessages {
    display: none; position: absolute; top: 80px; width: 100%; text-align: center; z-index: 1040;  }
div.SubmitApproveMessages_Inner { 
    display: inline-block; background-color: #f4fcff; border: silver 1px solid; font-size: 9pt; min-width: 400px; }
div.SubmitApproveMessages h2 { background: url('/time/draggable.png') 0 4px repeat-x; margin: 0px; padding: 16px 0px;
                               cursor: move; }
div.SubmitApproveMessages .sheet-error { margin: 8px 30px; }
div.SubmitApproveMessages .error-table { border-spacing: 4px; border-collapse:collapse; margin: 0 20px 20px 20px; }
div.SubmitApproveMessages .error-table td { border: silver 1px solid; padding: 4px 8px; text-align: left; }
div.SubmitApproveMessages .error-table td a { font-size:7pt; color: cornflowerblue; }
div.SubmitApproveMessages .error-table thead td { font-weight: bold; }
div.SubmitApproveMessages .buttons { margin-top: 20px; }
div.SubmitApproveMessages .buttons input { margin: 8px; }
tr.markSubmitError { background-color: gold; }