/* pageContent limits width to 600px  */
/* #contentContainer limits width to 568px and font=Helvetica 12px  */
/* pageContent2 limits width to 755px  */
/* #contentContainer2 limits width to 700px and font=Helvetica 12px  */


/*  regular cell  */
td {
	vertical-align: top;
}

/*  regular header cell  */
th {
	vertical-align: top;
}

/*  shows hand courser in header row for sorting purposes  
.pointer {
	cursor: pointer;
	}
*/

/*  gray background for the even rows in a table  
tr:nth-child(even) {
  background-color: #f2f2f2
}
*/


/*  align cell contents to center  */
.center {
	text-align: center;
}

/*  align cell contents to right - example: <td class= \"right\"> */
.right {
	text-align: right;
}

/*  align cell contents to left  */
.left {
	text-align: left;
}

/*  align cell contents to bottomm  */
.bottom {
	vertical-align: bottom;
}

/*  align cell contents to top  */
.top {
	vertical-align: top;
}





/*  class =  */

.white {
	background: #ffffff
}

.red {
	background: #ffbebe
}

.pink {
	background: #ffe4e1
}

.lt_blue {
	background: #c8e3ec
}

.amber {
	background: #fcfca1
}

.green {
	background: #bfe6bf
}

.blue {
	background: #aaddfc
}

.orange {
	background: #ffa500
}

.gray {
	background: #eeeeee
}

.dk_gray {
	background: #aaaaaa
}

/* used to create a blank, short in height, row in a table. */
.short {
	font-size:2px;
}


.small_font {
	font-size:xx-small;
}

/* regular size font is 100% */
.font_150 {
	font-size: 150.0%;
}

.font_100 {
	font-size: 100.0%;
}

.font_80 {
	font-size: 80.0%;
}

.font_65 {
	font-size: 65.0%;
}

.font_60 {
	font-size: 60.0%;
}

.font_50 {
	font-size: 50.0%;
}

.font_40 {
	font-size: 40.0%;
}

.font_blue {
	font-size: 100.0%;
	color: blue;
}

/* 80 percent font size and blue color */
.font_80_blue {
	font-size: 80.0%;
	color: blue;
}



/* used to create bold borders around a single cell in a table. */

.bold_border {
		border: 4px solid #ff0000;
}

.bold_border_left {
		border-left: 4px solid #ff0000;
}

.bold_border_top {
		border-top: 4px solid #ff0000;
}


/* table row turns gray on mouse-over. */
.hoverTable tr:hover {
		background-color:#f5f5f5;
}





/* table classes that do not seem to work with the line graphs. */

.max_width_400 {
	max-width:400px;
}

table.max_width_400 td{
	max-width:400px;
}

.max_width_600 {
	max-width:600px;
}

table.max_width_600 td{
	max-width:600px;
}














/*  triangular radio buttons  */

.radio_item{
    display: none !important;
}

.label_item {
    opacity: 0.1;
}
    
.radio_item:checked + label {
    opacity: 1;
}

label {
	cursor: pointer;   
}

/*  END - triangular radio buttons  */





/*  Use this for a bold Submit button on HTML forms */
.bold-button {
/*  text-transform: uppercase;*/
	padding: 5px;
	color: blue;
	font-weight: bold;
}




















/* tool tips that hover text over button. */

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

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

.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;
}


















/*          */


body, form {
	margin:10px;
	padding:0px;
	border:0px;
	}

#title {color: #007E8A;}

#breakOut {background-color:  #5BAFB7;}

#nav_bar {

	margin-left: auto ;
	margin-right: auto ;
	}
#nav_bar a {
	  display:block;
	  float:left;
	  text-align:center;
	text-decoration: none
	}

#navigation_bar {

	margin-left: 0 ;
	margin-right: auto ;
	}
#navigation_bar a {
	  display:block;
	  float:right;
	  text-align:center;
	text-decoration: none
	}

#horizontalgap{
	float:left;
	overflow:hidden;
	height:1px;
	width:0px;
	}



.content_right {
	float: right;
	width: 600px;
	}

.content_left_80 {
	float: left;
	width: 80px;
	}

/*  used for page header to space the logo to the left of the heading. Make it 5 pixels wider than the actual logo width   */
.content_left_135 {
	float: left;
	width: 135px;
	}

.content_left_10 {
	float: left;
	width: 10px;
	}

.content_center {
	float: center;
	width: 600px;
	}

.align_right {
	position: absolute;
	right: 0px;
/*	width: 300px;*/
	}

.align_left {
	position: absolute;
	left: 200px;
	width: 300px;
	}
.align_center {
	text-align: center;
	}

/* align table to center */
table.center {
    margin-left:auto; 
    margin-right:auto;
  }






/*  Container used on Colleges web page to list the parameters in two columns */
.container {
    width: 80%;
/*    height: 280px; */
    background: aqua;
    margin: 0px;
    padding: 0px;
}
.container_one {
    width: 50%;
/*    height: 280px; */
    background: white;
    float: left;
}
.container_two {
    margin-left: 10%;
/*    height: 280px; */
    background: white;
}


.container_three {
    width: 30%;
    float: left;
}










.pop{
	position: absolute;
	visibility: hidden;
	padding: 0px 10px 3px 10px;
	top:0px;
	width: 275px;
	left:0px;
	z-index:1;
	background-color:  #5BAFB7;
	}

.subheader {
	font-size: 14px;
	font-weight: bold;
	color: #007E8A;
	letter-spacing: 1px;
	line-spacing: 1px;
	}

.subheader a {
	font-size: 14px;
	font-weight: bold;
	color: #007E8A;
	letter-spacing: 1px;
	line-spacing: 1px;
	text-decoration: none
	}

.subheader2 {
	font-size: 12px;
	font-weight: bold;
	color: #007E8A;
	}

h1 {
	border:0px;
	margin:0px;
	font-family: Arial, sans;
	font-size: 26px;
	font-weight: bold;
	color: #2C2C76;
	letter-spacing: 2px;
	text-decoration: none
	}

h2 {
	border:0px;
	margin:0px;
	margin-top:10px;
	margin-bottom:1px;
	font-family: Arial, sans;
	font-size: 20px;
	font-weight: bold;
	color: #2C2C76;
	letter-spacing: 1px;
	line-spacing: 1px;
	text-decoration: none
	}

h3 {
	border:0px;
	margin:0px;
	margin-top:5px;
	margin-bottom:1px;
	font-family: Arial, sans;
	font-size: 17px;
	color: #2C2C76;
	font-weight: bold;
	}

li {
	 margin: 0 0 0 20px; padding: 0;
	}

/*  max width of 500 pixles  */
li.five {
	 max-width: 500px
	}
	
li.six {
	 max-width: 600px
	}
	
ul {
	margin: 0 0 0 1em;
	padding: 0;
	} 
	
ul.circle {
	list-style-type: circle;
	}

br {
	  margin: 0 5px; padding: 0;
	}

p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	}

/*  max width of 500 pixels  */
p.five {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	max-width: 500px
	}
	
/*  max width of 500 pixels and indented from left  */
p.five_indent_10 {
	margin: 5px 1px 1px 10px;
	max-width: 500px
	}
	
/*  max width of 500 pixels and indented from left  */
p.five_indent_20 {
	margin: 5px 1px 1px 20px;
	max-width: 500px
	}
	
/*  max width of 500 pixels and indented from left  */
p.five_indent_30 {
	margin: 5px 1px 1px 30px;
	max-width: 500px
	}
	
/*  max width of 500 pixels and indented from left  */
p.five_indent_40 {
	margin: 5px 1px 1px 40px;
	max-width: 500px
	}
	
/*  max width of 500 pixels and indented from left  */
p.five_indent_50 {
	margin: 5px 1px 1px 50px;
	max-width: 500px
	}
	
/*  max width of 600 pixels  */
p.six {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	max-width: 600px
	}
	
/*  max width of 600 pixels  */
li.six {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	max-width: 600px
	}
	
	
.indenter  { margin: 10px 1px 1px 16px;}


/*  indents first line of text and a max width of 500 pixels  */

p.indent_50 {
	text-indent: 50px;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	max-width: 500px
	}


p.margin_40 {
	margin-left: 40px;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	max-width: 500px
	}








.chart table {
	font-size: 12px;
	border: 1px solid #042A55;
	margin: 0px;
	spacing: 0px
	}

.chart tr {
	font-size: 12px;
	border: 1px solid #042A55;
	margin: 0px;
	spacing: 0px;
	vertical-align: top
	}

.chart td {
	font-size: 12px;
	border: 1px solid #042A55;
	margin: 0px;
	spacing: 0px
	}

.chart th {
	font-size: 12px;
	font-weight: bold;
	background-color: #5BAFB7;
	background-position: left;
	color: #042A55;
	border: 1px solid #042A55;
	margin: 0px;
	spacing: 0px;
	text-align: left;
	}

strike {
	color: red;
	}

.colorText1 {
	font-size: 14px;
	font-weight: bold;
	color: #007E8A;
	letter-spacing: 1px;
	line-spacing: 1px;
	text-decoration: none
	}

.colorText2 {
	font-size: 12px;
	color: #007E8A;
	font-weight: bold;
	}

.smallText {
	font-size: 8px;
	color: #007E8A
	}

/* nav-bar buttons */
.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#42429c), to(#009AA6));
   background: -webkit-linear-gradient(top, #42429c, #009AA6);
   background: -moz-linear-gradient(top, #42429c, #009AA6);
   background: -ms-linear-gradient(top, #42429c, #009AA6);
   background: -o-linear-gradient(top, #42429c, #009AA6);
   padding: 4px 6px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 2px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: "Arial Black", Gadget, sans-serif;
   text-decoration: none;
   vertical-align: middle;
  margin-top: 10px;
  line-height: 200%;
   }
.button:hover {
   border-top-color: #28597a;
   background: #009AA6;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #ff6e15;
   }

.space {margin-top: 10px;}

/* makes horizontal rule */
.spacer { background-image: url('images/dot200.gif');
	  height: 2px;
	  margin-top: 1px;
	  background-repeat: repeat-x;
	  overflow: hidden;
	  width:80%;
	  margin-bottom: 6px;}


#pipe ul {
 margin-left: 0;
 padding-left: 0;
 display: inline;
 } #pipe ul li {
 margin-left: 0;
 padding: 3px 15px;
 border-left: 1px solid #000;
 list-style: none;
 display: inline;
 }
 
  
#pipe ul li.first {
 margin-left: 0;
 border-left: none;
 list-style: none;
 display: inline;
 }