/* Margin and font for the entire site */
body		{
		margin: 20px;
		Font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
		Font-size: 11pt;
		background-color: #F0F0F0;
		}


/* Make our tables all look pretty */
table		{
		border-collapse: collapse;
		border-spacing: 1px;
		border: 1px gray solid;
		box-shadow: 3px 6px 4px #888888;
		}

td		{
		padding-right: 25px;
		padding-left: 6px;
		padding-top: 6px;
		padding-bottom: 6px;
		border-left: 1px #CCCCCC solid;
		border-right: 1px #CCCCCC solid;
		}

a		{
		color:blue;
		text-decoration: none;
		}

a:hover		{
		font-weight: bold;
		text-decoration: underline;
		}


/* Make our section headers look like tabs */
.tab
		{
		border-top: 1px gray solid;
		border-left: 1px gray solid;
		border-right: 1px gray solid;
		border-bottom: 1px #CCCCCC solid;
		display: inline-block;
		position: relative;
		top: 1px;
		border-radius: 5px 5px 0px 0px;
		padding: 10px 16px 10px 16px;
		background-color: #FFFFFF;
		}



/* Add a little style to our top navigation bars */
.nav		{
		border-right: 1px gray solid;
		border-bottom: 1px gray solid;
		border-radius: 0px 0px 6px 0px;
		display: inline-block;
		padding: 8px;
		box-shadow: 3px 6px 4px #888888;
		background-color: #FFFFFF;
		position: fixed;
		top: 100px;
		left: 0px;
		margin-top: -100px;
		background-color: #FFFFFF;
		opacity: 1;
		z-index: 100;
		height: 18px;
		}



/* This sets the header information as well as the font color for alternating rows in our tables */
/* Note the ROW0 and ROW1 class are alternated in the output of our programming loops, it isn't exclusively done by CSS */
.t-header	{
		background-color: #c4dff2; 
		font-weight: bold;
		height: 50px;
		}

.newsection	{
		background-color: #b4cfe2; 
		font-weight: bold;
		height: 30px;
		border: 1px #CCCCCC solid;
		}

.row0		{
		background-color: #e9edf0;
		}

.row1		{
		background-color: #ffffff;
		}


/*  These are the DIV classes for our various colored alert dots */
.yellowdot	{
		background-color: yellow;
		height: 8px;
		width: 8px;
		padding: 0px;
		margin: 0px;
		border: 1px black solid;
		display: inline-block;
		border-radius: 8px;
		}

.reddot		{
		background-color: red;
		height: 8px;
		width: 8px;
		padding: 0px;
		margin: 0px;
		border: 1px black solid;
		display: inline-block;
		border-radius: 8px;
		}

.greendot	{
		background-color: #A7DA4E;
		height: 8px;
		width: 8px;
		padding: 0px;
		margin: 0px;
		border: 1px black solid;
		display: inline-block;
		border-radius: 8px;
		}

/* This is our little logout button in the upper right of every page */
.topcorner	{
		border-right: 1px gray solid;
		border-bottom: 1px gray solid;
		border-left: 1px gray solid;
		border-radius: 0px 0px 6px 6px;
		display: inline-block;
		padding: 8px;
		box-shadow: 3px 6px 4px #888888;
		background-color: #FFFFFF;
		position: fixed;
		top: 0px;
		right: 10px;
		background-color: #FFFFFF;
		opacity: 1;
		z-index: 100;	
		height: 18px;
		}



/* Cute little blue question mark in a circle, used to make our HELP hyperlinks */
.tellmemore	{
		display: inline-block;
		background: #0000ff;
		color: #fff;
		border-radius: 50%;
		width: 15px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		text-decoration: none;
		font-weight: bold;
		font-size: 10px;
		font-family: Verdana;
		vertical-align: 1px;
		}



/* This is how we link to help documentation from text.  We want it to be obvious, but unobtrusive */
.linkmemore	{
		border-bottom: 1px dotted blue;
		text-decoration: none;
		color: black;
		}



/* All of this is for tooltip mouse-overs.  Originally used for table display of DOMAIN\USERNAME to display a  */
/* left portion nicely in the table and a full, long string in a tooltip, when they mouseover. */

.tooltip 			{
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted blue;
				}

.tooltip .tooltiptext 		{
				visibility: hidden;
	  			width: 500px;
	  			background-color: #555;
	  			color: #fff;
	  			text-align: center;
	  			border-radius: 6px;
	  			padding: 5px 0;
	  			position: absolute;
	  			z-index: 1;
	  			bottom: 125%;
	  			left: -90%;
	  			margin-left: -60px;
	  			opacity: 0;
	  			transition: opacity 0.5s;
				}

.tooltip .tooltiptext::after 	{
		  		content: "";
		  		position: absolute;
  				top: 100%;
  				left: 50%;
  				margin-left: -5px;
				border-width: 5px;
  				border-style: solid;
  				border-color: #555 transparent transparent transparent;
				}

.tooltip:hover .tooltiptext 	{
  				visibility: visible;
  				opacity: 1;
				}