@media print {
    div.dontbreak {
    	page-break-inside: avoid;
    	position:relative;
    }
}

.example
{
    FONT-SIZE: 8pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.copyright
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}
BODY
{
    FONT-SIZE: 10pt;
    MARGIN: 0pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    BACKGROUND-COLOR: #f3f0f0
}
P
{
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
OL
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
UL
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
DD
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
HR
{
    MARGIN-TOP: 0pt;
    MARGIN-BOTTOM: 0pt;
    COLOR: #333366
}
H1
{
    MARGIN-TOP: 10pt;
    FONT-WEIGHT: normal;
    FONT-SIZE: 16pt;
    MARGIN-BOTTOM: 5px;
    COLOR: #333366;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    border-bottom: 1px solid #333366
}
H2
{
    MARGIN-TOP: 0pt;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    MARGIN-BOTTOM: 10px;
    COLOR: #333366;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
H3
{
    MARGIN-TOP: 0pt;
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    MARGIN-BOTTOM: 0pt;
    COLOR: #333366;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}

A
{
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none;
    white-space:nowrap;
}

a:hover{
	text-decoration:underline}
	
A.dark:link
{
    FONT-WEIGHT: bold;
    COLOR: #333366;
    TEXT-DECORATION: none
}
A.dark:visited
{
    FONT-WEIGHT: bold;
    COLOR: #333366;
    TEXT-DECORATION: none
}
A.dark:hover
{
    FONT-WEIGHT: bold;
    COLOR: #333366;
    TEXT-DECORATION: underline
}
A.dark:active
{
    FONT-WEIGHT: bold;
    COLOR: #333366;
    TEXT-DECORATION: underline
}
A.light:link
{
    FONT-WEIGHT: bold;
    COLOR: #ffffff;
    TEXT-DECORATION: none
}
A.light:visited
{
    FONT-WEIGHT: bold;
    COLOR: #ffffff;
    TEXT-DECORATION: none
}
A.light:hover
{
    FONT-WEIGHT: bold;
    COLOR: #ffffff;
    TEXT-DECORATION: underline
}
A.light:active
{
    FONT-WEIGHT: bold;
    COLOR: #ffffff;
    TEXT-DECORATION: underline
}
A.two:link
{
    FONT-SIZE: 10pt;
    COLOR: #3333cc;
    TEXT-DECORATION: none;
}
A.two:visited
{
    FONT-SIZE: 10pt;
    COLOR: #3333cc;
    TEXT-DECORATION: none;
}
A.two:hover
{
    FONT-SIZE: 10pt;
    COLOR: #3333cc;
    TEXT-DECORATION: underline;
}
A.two:active
{
    FONT-SIZE: 10pt;
    COLOR: #3333cc;
    TEXT-DECORATION: none;
    font-weight:bold
}

A.button{
	-webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: Arial;
  color: #f3f0f0;
  font-size: 12px;
  font-weight: bold;
	background: #333366;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin:4px;
  display:inline-block;
  text-align:center;
  text-transform: uppercase;
  min-width:60px; /*this is usually helpful because it makes sets of buttons same*/
	
}

a.button:hover{
	background-color:#cccc99;
	text-decoration:none;
	border-color: #cccc99;}


.hmenu
{
    FONT-WEIGHT: 900;
    FONT-SIZE: 9pt;
    COLOR: #333366;
    TEXT-INDENT: 4pt;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}
.hfilled
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    COLOR: #333366;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}
.labelfilled
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: #333366;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}

	
.radiolabel
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}
.formlabel
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}
.studentlabel
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}
.hotindicator
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: #3333cc;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}
TABLE
{
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
TD
{
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
TD.filled
{
    BACKGROUND-COLOR: #cccc99
}
TD.filledimage
{
    BACKGROUND-IMAGE: url(../images/nav/stretch.gif);
    BACKGROUND-COLOR: #f3f0f0
}
/*************************************************single forms ******/
h1.singleformtitle{
	float:left;
	width:75%}

div.singleformtopbutton{
	float:left;}
	
div.formrow{
	padding:5px 10px;
	clear:both;
	overflow:hidden;
	width:100%;
	word-break: break-word;
	margin: 0px 0px 5px 0px;}
	
div.formrow label{
	font-weight:bold;
}
div.formrow h2.formsectionheading{
	margin-left:-10px;
	margin-top: 20px;
	padding:6px;
	background-color:#e8e3e3;
	border-radius:2px;
	}
	
div.formrow .formleft{
	width:20%;
	float:left;
	padding-right:10px;
}

div.formrow .clear{
	clear:both;
}
div .formrowlined{
	 border-bottom:1px solid grey
}

div.formrow .formright{
	float:left;
	width:75%;
	padding-left:5px;
}

div.formrow .narrow{
	width:35%;
	padding-left:10px; /*inset from header*/
}

div.formrowthreecolumn .formleft{
	width:30%;
	float:left;
}

div.formrowthreecolumn .formmid{
	float:left;
	width:20%;
	margin-top:45px;  /*buttons not at top*/
}
div.formrowthreecolumn .formright{
	width:35%;
	float:left;
}

div.formrowlongform .formleft{
	width:20%
}

div.formrowlongform .formmid{
	float:left;
	width:20%;
}
div.formrowlongform .formright{
	width:55%
}

/* these two are for better wrapping for radio buttons*/
.flex-label {
  display: flex;
  padding-bottom:5px;
  font-weight:normal;
}
input[type=radio] {
  margin-right: 12px;
}



div.buttons,
div.formrow .buttons{
	margin-top:10px;
	text-align:center;
	
	}
div.formrow .buttons{
	float:left;}
	
div.formrow .sectiondisabled,
div.formrow .sectiondisabled input:disabled, 
div.formrow .sectiondisabled textarea:disabled,
div.formrow .sectiondisabled p,
div.formrow .sectiondisabled a,
div.formrow .sectiondisabled a:visited{
	color:darkgrey}
	
	
.requiredfields{
	  FONT-SIZE: 9pt;
	  font-weight:bold;
    COLOR: #333366;
    FONT-STYLE: normal;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    margin:5px 0px;
}

.required:before{ 
	content:"* "; 
}
	
/*******************************************list pages*****************************/
TABLE.list{
    BORDER-COLLAPSE: collapse;
    /*width:500px;*/
}

TABLE.list tbody{
	VERTICAL-ALIGN: top;
}

table.list td{
	padding:2px 8px;
	vertical-align:top;
	text-align: left;
}

table.alignmiddle td{
	padding:2px 8px;
	vertical-align:middle;
}

/*adding these 12/23 hen changing to Tahoma for readability of 1lL1iI*/

th{font-weight:normal}
select{font-family: Tahoma, Verdana , Arial, sans-serif;}
input{font-family: Tahoma, Verdana , Arial, sans-serif;}

th,
table.list td.darkbackground,
table.list td.DarkBackground
{
    BORDER: medium none;
    /*FONT-WEIGHT: bold;  dropping as of December 2023*/
    FONT-SIZE: 10pt;
    PADDING: 2px 8px;
    COLOR: #333366;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    BACKGROUND-COLOR: #cccc99;
    TEXT-ALIGN: left;
    TEXT-DECORATION: none;
    vertical-align:bottom;
    white-space:nowrap;
}
table.listlined{
	border-top:1px solid grey}	
	
table.listlined tr{
	border-bottom:1px solid grey}	

table.list a{
	color:black;}
    
table.list a.two{
	font-weight:bold;
	color:#3333cc;}
	
table.list TD.darkbackground a.two,
table.list TD.DarkBackground a.two,
table.list th a.two{
	color:#333366}		
	

.listdata
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #000000;
    FONT-STYLE: italic;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.list
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}


/*******************************************/
/**** error and instruction code***********/
/*******************************************/
.instruction
{
    margin-top:1px;
    FONT-SIZE: 9pt;
    COLOR: #333366;
    FONT-STYLE: normal;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    max-width:650px;/*max size so it doesn't push buttons out*/
}
.instruction UL
{
    FONT-SIZE: 8pt;
    COLOR: #333366;
    FONT-STYLE: normal;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.instruction LI
{
    FONT-SIZE: 8pt;
    COLOR: #333366;
    FONT-STYLE: normal;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.instructionalert,
.instructionalert A {
    COLOR: #F62217;
}

.instruction A{
    COLOR: #333366;
    text-decoration:underline;
}
div.instruction{
	margin-top:10px;
	margin-bottom:5px;}

.comment
{
    FONT-SIZE: 10pt;
    COLOR: #cc3300;
    FONT-STYLE: normal;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}


TABLE.chart
{
    BORDER-RIGHT: 1pt solid;
    BORDER-TOP: 1pt solid;
    BORDER-LEFT: 1pt solid;
    BORDER-BOTTOM: 1pt solid
}

.inactive
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #666666;
    FONT-STYLE: italic;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.formbutton
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #f3f0f0;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans serif;
    BACKGROUND-COLOR: #000080
}
.tableheader
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    COLOR: #333366;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}

.errortext
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: #cc0000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.errortext A
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: #cc0000;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.headertext
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 16pt;
    COLOR: #02407d;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}

.helpLOName
{
    FONT-WEIGHT: bold;
    FONT-SIZE: large;
    COLOR: #3333cc;
    TEXT-DECORATION: underline
}
.helpScaleLevel
{
    FONT-WEIGHT: bold;
    FONT-SIZE: medium;
    COLOR: #3333cc
}
.helpTaskName
{
    FONT-WEIGHT: 900;
    FONT-SIZE: x-large;
    COLOR: black;
    TEXT-ALIGN: center
}

TD.gridtoprow
{
    BORDER-LEFT: #333366 1px solid;
    BORDER-BOTTOM: #333366 1px solid;
    WHITE-SPACE: nowrap;
    TEXT-ALIGN: center
}
TD.gridleftheader
{
    BORDER-LEFT: #333366 1px solid;
    BORDER-BOTTOM: #333366 1px solid
}
TD.grid
{
    BORDER-LEFT: #333366 1px solid;
    BORDER-BOTTOM: #333366 1px solid;
    WHITE-SPACE: nowrap
}
TABLE.tgrid
{
    BORDER-RIGHT: #333366 1px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #333366 1px solid;
    PADDING-LEFT: 2px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px
}




/*****************************************/
/*  reliability page  styles */
/*****************************************/
td.ratingmatch{
  vertical-align: middle; 
	FONT-WEIGHT: normal;
  FONT-SIZE: 10pt;
  FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
  text-align:center;
}

div.ratingnomatch {
	vertical-align: middle; 
	background-color: #cccc9926;
	background-repeat: no-repeat;
	border: solid 2px #cccc99;
	border-radius: 6px;
	overflow: hidden;
	padding: 5px 10px;
	display: inline-block;
}

span.ratingnomatch,
td.ratingnomatch{
  vertical-align: middle; 
	FONT-WEIGHT: bold;
  FONT-SIZE: 10pt;
  COLOR: #E60000;
  FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
  text-align:center;
}




/*****************************************/
/*  bar graph styles */
/*****************************************/

/* used on graph pages when scrunched */
.popup
{
   position: absolute; left:0; top:0; width:125;
   border-style:solid;
   border-width:1;
   border-color:333366;
   background-color:white;
   padding:5px;
   color:black;
   font-family:Arial;
   font-size:10pt;
   z-index:2;
   visibility:hidden;
}

.bartitle
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    COLOR: #333366;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.barpercentage
{
    FONT-SIZE: 7pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , arial, sans-serif
}
.barlabel
{
    FONT-SIZE: 7pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , arial, sans-serif
}
.barlabelsmall
{
    FONT-SIZE: 7pt;
    COLOR: black;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.barwhite
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    COLOR: white;
    FONT-STYLE: normal;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.barblack
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    COLOR: black;
    FONT-STYLE: normal;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.barwhitesmall
{
    FONT-SIZE: 6pt;
    COLOR: white;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.barblacksmall
{
    FONT-SIZE: 6pt;
    COLOR: black;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.barblacksmallextra
{
		display:none;
    FONT-SIZE: 3pt;
    COLOR: black;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.barwhitesmallextra
{
		display:none;    
		FONT-SIZE: 3pt;
    COLOR: white;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif
}
.barkey
{
    FONT-SIZE: 8pt;
    COLOR: #000000;
    FONT-FAMILY: Tahoma, Verdana , arial, sans-serif
}
TD.gridlines
{
/*    BACKGROUND-IMAGE: url(../examples/images/gridlines.gif)  not working as of 2022. What is this used for??*/  
}
/*****  page layout**************/
body,html{
	margin:0px;
	height:100%;
}

#pagewrapper{
	min-height:100%;
	position:relative;
}

/*****************************************/
/***********header ***********************/
/*****************************************/
#header{
	}
	
#header A:link
{
    FONT-SIZE: 9pt;
    COLOR: #ffffff;
    TEXT-DECORATION: none
}
#header A:visited
{
    FONT-SIZE: 9pt;
    COLOR: #ffffff;
    TEXT-DECORATION: none
}
#header A:hover
{
    FONT-SIZE: 9pt;
    COLOR: #ffffff;
    TEXT-DECORATION: underline
}
#header A:active
{
    FONT-SIZE: 9pt;
    COLOR: #ffffff;
    TEXT-DECORATION: none
}

	
#maincontent{
	margin-top:10px; /*on the live site this is needed to create the space below header and above help icon. Too much space on localhost*/
	margin-left:258px;
	padding-bottom:85px;
	display:inline-block;
	min-width:650px;  /*added this for short long form but it had been commented out, why?*/
/*		width:650px;*/
}

#maincontentprinterfriendly{
	margin:10px;
}

#maincontent .links{
	width:100%;
	max-width:80vw; /*80% of view port means right links wont be out of view */
	clear:both;
	
}

/*div.buttons a,
div.buttons a:visited,
#maincontent .links a,
#maincontent .links a:visited{	
	font-weight:bold;
	COLOR: #3333cc;
  TEXT-DECORATION: none;
}
*/	
#maincontent .leftlinks{
	float:left;
	text-align:left; 
	width:33%;
	margin-bottom:10px;
}

#maincontent .midlinks{
	float:left;
	text-align:center; 
	width:33%;
	margin-bottom:10px;
}
		
#maincontent .rightlinks{
	float:right;
	text-align:right; 
	width:33%;
	margin-bottom:10px;
	}
	

#footer{
	width:95%;
	height:75px;
	position:absolute;
	bottom:0;
	left:0;
}

/***********************************************************************/
/*****  specific to menu  **************/
/***********************************************************************/
/*entire menu
   hook to 150 shy of the bottom to make the color extend to the footer*/
#menu{
	position:absolute;
	top:75px;
	bottom:150px;
}
/*stretch the narrow color band from the menu to the bottom of the page*/

#menuinnercolor{
	position:absolute;	
	min-height:100%; !important
	height:auto;
	width:221px;
	background:#cccc99;
}

/*little section of logo that extends down into nav*/
.menulogo{
	background:#cccc99;
	width:221px;}

.menulogo img{
	display:block;
	border:none;}
	
/*header items which are made up of three sections left right center. Teh center section has two images top and bottom and the text.*/
.menuheader{
	width:260px;}
	
.menuheadertext {
    background:#333366;
    color:#f3f0f0;
    font-family: Tahoma, Verdana , Arial, sans-serif;
    padding:2px;
    font-size:12px;
    font-weight:900;
    height:11px;
    min-height:11px;
    line-height:11px;
    overflow:hidden;
    white-space:nowrap;    
}    
.menuleft,
.menucenter, 
.menuright {
    padding:0px;
    height:27px;
}

.menuleft {
    float: left;
    width:22px;
    text-align:right;
    background:#cccc99
}

.menucenter {
    float: left;
    width:199px;
    background:#cccc99;
}

.menuright {
    float: left;
    width:27px;
    background:#f3f0f0
}

.menucenter img{
    display: block;
    width:200px
}

/*individual sub items*/
.menusub{
    margin:0px;
    white-space:nowrap;
    clear:both;
    padding:3px;
    background:#cccc99;
    padding-left:30px;
    width:188px;
    text-align:left;
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    TEXT-INDENT: 8pt;
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
    TEXT-DECORATION: none
}


div.menusub a{
		COLOR: #333366;
    TEXT-DECORATION: none
}

div.menusub a:hover{
	text-decoration:underline;}

/***********************************************************************/
/*Schools and users*/
/***********************************************************************/
	
	table#HierarchyList tr{
		vertical-align:bottom 
	}
	table#HierarchyList tr.odd{
		background:rgb(216, 216, 217)
	}
	
	table#HierarchyList tr.HiClass2a-District td{
		border-top:1px solid grey;
		padding-top:15px;
		}
		
	table#HierarchyList td.action{
		 text-align:left;
		}
	
	table#HierarchyList td.Client{
		padding-left:0px;
	}
	table#HierarchyList td.District{
		padding-left:25px;
	}
	
	table#HierarchyList td.school{
		padding-left:50px}

	table#HierarchyList td.students{
		padding-left:75px;
		padding-top:5px;
	}
	
	table#HierarchyList td.leaf{
		padding-left:105px;
		padding-top:3px;
		padding-bottom:3px;
	}
	
	
	table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}


/*rotated text on certain grid headers*/
	.table-header-rotated {
  border-collapse: collapse;
  width:0; /*override*/
  }
    
 .table-header-rotated th {
    padding: 5px 12px;
  }

 .table-header-rotated td {
  
   /* width: 30px;
    text-align: center;  something wrong, this is only supposed to be for th.td in mobile? hmm.*/
    padding: 12px 5px;

  }

  /* to make sure last rotated column header doesn't disappear*/
  td.extraplaceholder{	
	border-top:none;
	border-bottom:none;
	}
  

  th.rotate {
    height: 100px;
    white-space: nowrap;
  }
  
  th.rotate div {
  	transform: rotate(315deg);
    width: 30px;

  }
 
 a{color:#333366;}
a:hover {
	    text-decoration: underline;
	    color:#0056b3
	}
  
}