@media print {
    div.dontbreak {
    	page-break-inside: avoid;
    	position:relative;
    }
}
.example
{
    FONT-SIZE: 8pt;
    
    
}
.copyright
{
    FONT-SIZE: 10pt; 
    TEXT-DECORATION: none
}
BODY
{
 /*   FONT-SIZE: 10pt;*/
    MARGIN: 0pt;
    BACKGROUND-COLOR: #f3f0f0
}
P
{
 /*   FONT-SIZE: 10pt;*/
    
    
}
OL
{
    
 /*   FONT-SIZE: 10pt;*/    
    
}
UL
{
    
 /*   FONT-SIZE: 10pt;*/
    
    
}

LI {
	/*margin-bottom:12px; if you put this back, change the instruction version to tighter. for mobileAuthorActivityList*/ 
}
DD
{
    
  /*   FONT-SIZE: 10pt;*/
    
    
}
HR
{
    MARGIN-TOP: 0pt;
    MARGIN-BOTTOM: 0pt;
    COLOR: #333366
}
H1
{
    MARGIN-TOP: 10pt;
    border-bottom: 1px solid #333366;
    COLOR: #333366;
}
H2
{
			border-bottom: 1px solid #333366;
   COLOR: #333366;
}
H3
{
    MARGIN-TOP: 0pt;
    MARGIN-BOTTOM: 0pt;
    COLOR: #333366;
}

A{
    TEXT-DECORATION: none;
 /*   white-space:nowrap;*/
 		COLOR: #333366;}

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.button{
	-webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  font-family: Tahoma, Verdana , Arial, sans-serif;
  color: #f3f0f0;
 /*   FONT-SIZE: 12pt;*/
  
  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-light{
	border:1px solid #5C5C85;
	color:#333366;
  background:transparent;
  font-weight: normal;
	text-transform: initial;
	font-size:smaller;
	padding: 3px 6px 3px 6px;
}

A.button-vertical{
	display:block;
	width:fit-content;
}	

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


/*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;}

.hmenu
{
    FONT-WEIGHT: 900;
 /*   FONT-SIZE: 9pt;*/
    COLOR: #333366;
    TEXT-INDENT: 4pt;
    TEXT-DECORATION: none
}
.hfilled
{
    FONT-WEIGHT: bold;
 /*   FONT-SIZE: 12pt;*/
    COLOR: #333366;
    TEXT-DECORATION: none
}
.labelfilled
{
    FONT-WEIGHT: bold;
 /*   FONT-SIZE: 10pt;*/
    COLOR: #333366;
    TEXT-DECORATION: none
}

	
.radiolabel
{
    
 /*   FONT-SIZE: 10pt;*/

    
    TEXT-DECORATION: none
}
.formlabel
{
    
   /*   FONT-SIZE: 10pt;*/

    
    TEXT-DECORATION: none
}
.studentlabel
{
    FONT-WEIGHT: bold;
   /*   FONT-SIZE: 10pt;*/

    
    TEXT-DECORATION: none
}
.hotindicator
{
    FONT-WEIGHT: bold;
    /*   FONT-SIZE: 10pt;*/

    COLOR: #3333cc;
    TEXT-DECORATION: none
}
TABLE
{
	/*table-layout:fixed;   taking this out because otherwise grid  student name overlaps, but I think it's needed somewhere else - probably reliablity? so need to refine tables.*/
	width:100% /*needed on http://localhost/mobileAuthorActivityList.asp so becareful if you drop this*/
  /*   FONT-SIZE: 10pt;*/
    
    
}
TD
{
   /*   FONT-SIZE: 10pt;*/
  
    
}
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;
  display: -webkit-flex;
  padding-bottom:5px;
  font-weight:normal;
}


.flex-label input[type=radio] {
  margin-right: 12px;
}

/*matches input*/
.radiowrap {
	display:table;
	height: 55px;
	border-bottom: 1px solid #cccc99;}

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;*/
    font-size: smaller;
    margin:5px 0px;
    color: red;
}

.required:before{ 
	content:"* "
	color:red; 
}
	
/*******************************************list pages*****************************/
TABLE.list{
    BORDER-COLLAPSE: collapse;
    border:none;
    margin:20px;
}
	
table.listlined tr{
	border-bottom:1px solid grey;
	height:60px;
}	
	
	
table.list td{
	padding:5px;
	text-align:left;
	/*white-space:nowrap; had to take out for mobileAuthorActivityList.asp so be careful if you put this back*/
  
}

table.list th{
  FONT-WEIGHT: bold;
  PADDING: 2px;
  COLOR: #333366;
  TEXT-ALIGN: left;
  TEXT-DECORATION: none;
  vertical-align:bottom;
  white-space:nowrap;
}


	


.listdata
{
    
  /*   FONT-SIZE: 10pt;*/
    
    FONT-STYLE: italic;
    
}
.list
{
    
  /*   FONT-SIZE: 10pt;*/
    
}


/*******************************************/
/**** error and instruction code***********/
/*******************************************/
.instruction
{
  COLOR: darkgrey;
	font-size: smaller;
}
.instruction UL
{
   COLOR: darkgrey;
   font-size: smaller;
}

.instruction LI
{
   COLOR: darkgrey;
   font-size: smaller;
}
.instructionalert {
    COLOR: #F62217;
    font-size: smaller;
    line-height:1.3
}

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

div.instruction-under{
	margin-left:25px;
	margin-top:0px}

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

.inactive
{
    
    /*   FONT-SIZE: 10pt;*/
 COLOR: #666666;
    FONT-STYLE: italic;
    
}
.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;
    
}

.errortext
{
    FONT-WEIGHT: bold;
 /*   FONT-SIZE: 10pt;*/
    COLOR: #cc0000;
    
}
.errortext A
{
    FONT-WEIGHT: bold;
  /*   FONT-SIZE: 10pt;*/
    COLOR: #cc0000;
    
}
.headertext
{
    
 /*   FONT-SIZE: 16pt;*/
    COLOR: #02407d;
    
}

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


label{
	margin-bottom:0px;}

/*****************************************/
/*  reliability page  styles */
/*****************************************/
/*hidability really belongs in an include*/
table.table-hideable{
	border-collapse:collapse;
	text-align:center;
}
			
.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width 0.5s, margin 0.5s;
  text-align:center;
}

.table-hideable .btn-condensed {
  background-color: transparent;
	border: none;
}

.table-hideable .hide-col {
  display:none;
}

table.table-clickablerow  tr:hover td {
  background: #efefef;
  cursor: pointer;
}


/*reliability tables*/

.table-reliability td:nth-child(1){
	   /* font-weight:bold*/}
	    
	    

.table-reliability th.ratername, 
.table-reliability th.raternamedisplay{
	height: 125px;
  border: none; 
  vertical-align: bottom;
}

.table-reliability td.ratersummarycell{
	text-align:right;}

.table-reliability th.hideicon{
	border-bottom: 1px solid grey; 
}


.table-reliability td.loggedinrater{
	background-color:#cccc9947; /*translucent version of our beige*/
}	
 
 
.table-reliability td{
	  vertical-align:top;
	  border-bottom: 1px dotted lightgrey;
	  border-right: 1px dotted lightgrey; 
	  padding:5px;
	  
} 

.table-reliability td.rating{
	text-align:center; 
}


/*not only in the table, need in the instructional text*/
div.ratingdisplaynomatch {
	background-color: #cccc9926;
	border: solid 2px #cccc99;
	border-radius: 6px;
	overflow: hidden;
	padding: 2px 4px;
	display: inline-block;
	FONT-WEIGHT: bold;
  COLOR: #E60000;
}

.table-reliability td.rating div.lgcomment:not(:empty),
.table-reliability td.rating div.overallcomment:not(:empty) {
	border-top:1px dashed lightgrey}

.table-reliability td.rating div.overallcommentgrid:not(:empty) {
	border-top:none}
	
/*for testing only	
.table-lg .includeme{
	color:red;}*/
/*****************************************/
/*  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:Tahoma, Verdana , Arial, sans-serif;;
   /*font-size:10pt;*/
   z-index:2;
   visibility:hidden;
}

.bartitle
{
    FONT-WEIGHT: bold;
  /*   FONT-SIZE: 12pt;*/

    COLOR: #333366;
    
}
.barpercentage
{
  /*   FONT-SIZE: 7pt;*/

    
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
}
.barlabel
{
  /*   FONT-SIZE: 7pt;*/
  
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
}
.barlabelsmall
{
   /*   FONT-SIZE: 7pt;*/
 COLOR: black;
    
}
.barwhite
{
    
   /*   FONT-SIZE:9pt;*/
 COLOR: white;
    FONT-STYLE: normal;
    
}
.barblack
{
    
    /*   FONT-SIZE:9pt;*/
    COLOR: black;
    FONT-STYLE: normal;
    
}
.barwhitesmall
{
   /*   FONT-SIZE:6pt;*/
    COLOR: white;
    
}
.barblacksmall
{
   /*   FONT-SIZE:6pt;*/
    COLOR: black;
    
}
.barblacksmallextra
{
		display:none;
   /*   FONT-SIZE:3pt;*/
    COLOR: black;
    
}
.barwhitesmallextra
{
		display:none;    
	   /*   FONT-SIZE:3pt;*/
     COLOR: white;
    
}
.barkey
{
    /*   FONT-SIZE:8pt;*/
     
    FONT-FAMILY: Tahoma, Verdana , Arial, sans-serif;
}
TD.gridlines
{
    BACKGROUND-IMAGE: url(../examples/images/gridlines.gif)
}


/*****  page layout**************/
body,html{
	margin:0px;
	height:100%;
  font-size: 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;
}
*/	
.leftlinks{
	float:left;
	text-align:left; 
	width:50%;
	margin-bottom:10px;
}

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

#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;
    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;
    TEXT-DECORATION: none
}

.MobileHomeMenu .menusub{
	width:auto;
	background: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" 
	}



/* Style the navigation menu */
	.topnav {
	  overflow: hidden;
	  background-color: #333366;
	  /* position: relative;*/
	  float: right;
	}

/* Hide the links inside the navigation menu (except for logo/home) */
	.topnav #myLinks {
	  display: none;
	  position: absolute;
	  top: 30px;
	  right: 0px;
	  background: #333366;
	  
	}

	/* Style navigation menu links */
	.topnav a {
		color: white;
	  padding: 6px 16px;
	  text-decoration: none;
	/*   FONT-SIZE:17px;*/
	    display: block;
	  /* position: relative; */
	  text-align:right;
	}

	#header A:link {
	/*   FONT-SIZE:16px	;*/
	  }

/* Style the hamburger menu */
.topnav a.icon {
	font-size: 16pt;
  background: #333366;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  /* background-color: #04AA6D; */
  color: white;
}

a {
	color:#333366;
}

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

/*rotated text on certain grid headers*/
	.table-header-rotated {
  border-collapse: collapse
  /*width:0; /*override*/ /*-- no idea why this is like his. Screwing up the main grid so taking it out 10/28/22*/
   }
  
	.table-header-rotated thead th{
		border:none
	}  

	.table-header-rotated td{
		border:none
	}
    
  .table-header-rotated th {
    padding: 5px 10px;
  }

  .table-header-rotated th td {
  
    width: 30px;
    text-align: center;
    padding: 10px 5px;

  }

  /* to make sure last rotated column header doesn't disappear*/
 .table-header-rotated td.extraplaceholder{	
	border-top:none;
	border-bottom:none;
	}
  
  th.rotate {
  	height:125px; /* used on the grid page but not on reliablity*/
    text-align: center;
  	text-align: -webkit-center;
		white-space: nowrap;
  }
  
  th.rotate div {
  	transform: rotate(315deg);
    width: 30px;

  }
 




/***************************************************************/
/*For hide/show students on MobileAssessment Event*/
/***************************************************************/
	
/*style="width:90vw;padding-top:3px;padding-bottom:3px;background-color:#cccc99; text-decoration:underline; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-flow: row wrap; justify-content: space-around;"*/
div.scaleandtable{ 
	display: flex; 
	display: -webkit-flex;
	flex-direction: row-reverse;
}
	
	
table.table-lg{
	margin-right:50px;
	margin-left:10px
}

td.studentpercent{
	text-align:right
}
	
div.scaleandtable{
	justify-content: flex-end;
}
	
	
@media  (max-width: 600px) {
  div.scaleandtable{
  	flex-direction: column;
  }
  div.scale{
		padding-top: 20px;
	}
}
	
 
input[type="radio"].yesno:checked + label{

}
 
 
input[type="radio"].yesno{
	display:none;
 }
  
label.yesno {	
 	margin-right:5px;
}

tr.studentrow-hidden{
	display:none;
}

.wrapfield {

  width: 100%;
  position: relative;
  padding-top:10px;
  margin-top:10px;
  /*border-bottom: 2px solid #d9d9d9;*/
}


.submenu{
	border-top: 2px solid #5C5C85; 
	/*margin-top:20px; this was not looking right in the activity edit page*/ 
	text-align:justify; 
	font-size:smaller; 
	padding:5px;
	background-color:lightgrey
}

.submenu ul{
		list-style-type: none;
    padding: 0px;
    display: table;
    table-layout: fixed;
    width: 100%;}

.submenu li{
	padding: 2px; 
	display:table-cell; 
	width: 50px;
	text-align: center;
}

.submenu.disabledsubmenu li:hover{
	text-decoration:none;
	pointer-events:none;
	background-color:lightgrey
}

.submenu li:hover{
/*	text-decoration:underline;*/
	background-color:darkgrey;
	border-radius:5px;
}

/***********************************************************************/
/*Styling for form fields edit/display in use on Mobile Author Activity Edit and similar pages*/
/***********************************************************************/
/*chronos-taskpermissions and chronos-ilopermissons are based on the 
/* user's securiy level (admin or teacher) */
/* and the published setting and rating use for the task. */
/* see details in MobileAuthorActivityEdit */
/*chronos-enabled & chronos-disabled are setup to only display fields when chronos-taskpermission-allowed
/*-enabled and -disabled open and close a block so user sees only one open block at a time.*/
/*chronos-enabled-display looks like chronos-enabled but doesn't go away when you disable*/


/* options are 
chronos-taskpermission-allowed
chronos-taskpermission-changepublishonly
chronos-taskpermission-denied
chronos-taskpermission-textonly  (can't add/delete LGs)

 
chronos-ilopermission-allowed
chronos-ilopermission-changepublishonly	
chronos-ilopermission-denied
chronos-ilopermission-textonly  (can't add/delete scale eleements)
*/



/*used for the "use" button which admins can't see becasue they don't teach classes.*/
div.container .chronos-hideforadminuser{
	display:none}
	
div.chronos-enabled-display input,
div.chronos-enabled-display div.radiowrap,
div.chronos-enabled-display textarea,
div.container.chronos-enabled input,
div.container.chronos-enabled div.radiowrap,
div.container.chronos-enabled textarea{
	background:#f3f3fd;	
}
div.chronos-enabled-display input,
div.chronos-enabled-display div.radiowrap,
div.container.chronos-enabled input,
div.container.chronos-enabled div.radiowrap{	
	padding:10px;
}

div.chronos-enabled-display textarea,
div.container.chronos-enabled textarea{
	padding:2px;
}


div.container.chronos-taskpermission-textonly.chronos-enabled .instruction,
div.container.chronos-taskpermission-textonly.chronos-enabled .label-input100,
div.container.chronos-taskpermission-textonly.chronos-enabled .showonedit,
div.container.chronos-taskpermission-allowed.chronos-enabled .instruction,
div.container.chronos-taskpermission-allowed.chronos-enabled .label-input100,
div.container.chronos-taskpermission-allowed.chronos-enabled .showonedit,
div.container.chronos-ilopermission-textonly.chronos-enabled .instruction,
div.container.chronos-ilopermission-textonly.chronos-enabled .label-input100,
div.container.chronos-ilopermission-textonly.chronos-enabled .showonedit,
div.container.chronos-ilopermission-allowed.chronos-enabled .instruction,
div.container.chronos-ilopermission-allowed.chronos-enabled .label-input100,
div.container.chronos-ilopermission-allowed.chronos-enabled .showonedit{
	display:block;
}

div.container.chronos-taskpermission-textonly.chronos-enabled .requiredfields,
div.container.chronos-taskpermission-allowed.chronos-enabled .requiredfields,
div.container.chronos-ilopermission-textonly.chronos-enabled .requiredfields,
div.container.chronos-ilopermission-allowed.chronos-enabled .requiredfields,{
	display:inline
}

div.container.chronos-disabled input,
div.container.chronos-disabled textarea,
div.container.chronos-disabled div.radiowrap{
	background:white;
	padding:5px;
}


/*note this is not container.chronos-taskpermission-textonly.  It is just div.  
That's because the flag is set on pagewrapper
since it impacts the lgactionsubmenus in every container.*/
div.chronos-taskpermission-changepublishonly .lgactionsubmenu,
div.chronos-taskpermission-textonly .lgactionsubmenu,
div.chronos-taskpermission-denied .lgactionsubmenu	{
	display:none;
}

div.chronos-taskpermission-allowed .lgactionsubmenu{
	display:block;
}

div.container.chronos-taskpermission-changepublishonly .instruction,
div.container.chronos-taskpermission-changepublishonly .label-input100,
div.container.chronos-taskpermission-changepublishonly .showonedit,
div.container.chronos-taskpermission-changepublishonly .requiredfields,
div.container.chronos-taskpermission-denied .instruction,
div.container.chronos-taskpermission-denied .label-input100,
div.container.chronos-taskpermission-denied .showonedit,
div.container.chronos-taskpermission-denied .requiredfields,
div.container.chronos-disabled .instruction,
div.container.chronos-disabled .label-input100,
div.container.chronos-disabled .showonedit,
div.container.chronos-disabled .requiredfields,
div.container.chronos-ilopermission-changepublishonly .instruction,
div.container.chronos-ilopermission-changepublishonly .label-input100,
div.container.chronos-ilopermission-changepublishonly .showonedit,
div.container.chronos-ilopermission-changepublishonly .requiredfields,
div.container.chronos-ilopermission-denied .instruction,
div.container.chronos-ilopermission-denied .label-input100,
div.container.chronos-ilopermission-denied .showonedit,
div.container.chronos-ilopermission-denied .requiredfields,
div.container.chronos-disabled .instruction{
	display:none
}

/*items that show only when you are in display mode*/
div.container-activity.chronos-taskpermission-textonly.chronos-enabled .showondisplay,
div.container-activity.chronos-taskpermission-allowed.chronos-enabled .showondisplay,
div.container-lg.chronos-ilopermission-textonly.chronos-enabled .showondisplay,
div.container-lg.chronos-ilopermission-allowed.chronos-enabled .showondisplay{
	display:none;
}

div.container-activity.chronos-disabled .showondisplay{
	display:block;
}

/*hide selected things having to do with adding/removing scales when in text mode*/

div.container-lg.chronos-ilopermission-textonly.chronos-enabled .donotshowontext{
	display:none;}

/*ony for special case where we allow re-publish*/
div.container.chronos-taskpermission-changepublishonly.chronos-enabled .instruction.showonchangepublish,
div.container.chronos-taskpermission-changepublishonly.chronos-enabled .label-input100.showonchangepublish,
div.container.chronos-taskpermission-changepublishonly.chronos-enabled .showonedit.showonchangepublish,
div.container.chronos-taskpermission-changepublishonly.chronos-enabled .requiredfields.showonchangepublish,
div.container.chronos-ilopermission-changepublishonly.chronos-enabled .instruction.showonchangepublish,
div.container.chronos-ilopermission-changepublishonly.chronos-enabled .label-input100.showonchangepublish,
div.container.chronos-ilopermission-changepublishonly.chronos-enabled .showonedit.showonchangepublish,
div.container.chronos-ilopermission-changepublishonly.chronos-enabled .showonchangepublish{
	display:block;
}




/********************************************************************************/
/* Edit/NonEdit icons on Mobile Assessment Edit
/********************************************************************************/
/*editing and have permissions to do so --> neither edit nor non-edit icon shows*/
div.container.chronos-enabled.chronos-taskpermission-changepublishonly .noteditableicon,
div.container.chronos-enabled.chronos-taskpermission-textonly .noteditableicon,
div.container.chronos-enabled.chronos-taskpermission-allowed .noteditableicon,
div.container.chronos-enabled.chronos-taskpermission-changepublishonly .editicon,
div.container.chronos-enabled.chronos-taskpermission-textonly .editicon,
div.container.chronos-enabled.chronos-taskpermission-allowed .editicon,
div.container.chronos-enabled.chronos-ilopermission-changepublishonly .noteditableicon,
div.container.chronos-enabled.chronos-ilopermission-textonly .noteditableicon,
div.container.chronos-enabled.chronos-ilopermission-allowed .noteditableicon,
div.container.chronos-enabled.chronos-ilopermission-changepublishonly .editicon,
div.container.chronos-enabled.chronos-ilopermission-textonly .editicon,
div.container.chronos-enabled.chronos-ilopermission-allowed .editicon{
	display:none}
			
/*not editing, and have permission to edit, so sohow edit icon*/
div.container.chronos-disabled.chronos-taskpermission-changepublishonly .editicon,
div.container.chronos-disabled.chronos-taskpermission-textonly .editicon,
div.container.chronos-disabled.chronos-taskpermission-allowed .editicon,
div.container.chronos-disabled.chronos-ilopermission-changepublishonly .editicon,
div.container.chronos-disabled.chronos-ilopermission-textonly .editicon,
div.container.chronos-disabled.chronos-ilopermission-allowed .editicon{
	display:block}
	
/*not editing, and have permission to edit, so hide notedit icon*/
div.container.chronos-disabled.chronos-taskpermission-changepublishonly .noteditableicon,
div.container.chronos-disabled.chronos-taskpermission-textonly .noteditableicon,
div.container.chronos-disabled.chronos-taskpermission-allowed .noteditableicon,
div.container.chronos-disabled.chronos-ilopermission-changepublishonly .noteditableicon,
div.container.chronos-disabled.chronos-ilopermission-textonly .noteditableicon,
div.container.chronos-disabled.chronos-ilopermission-allowed .noteditableicon{
	display:none}
	
	
/*not editing, and no permission to edit, so hide edit icon*/
div.container.chronos-disabled.chronos-taskpermission-denied .editicon,
div.container.chronos-disabled.chronos-ilopermission-denied .editicon{
	display:none}
	
/*not editing, and have permission to edit, so hide notedit icon*/
div.container.chronos-disabled.chronos-taskpermission-denied .noteditableicon,
div.container.chronos-disabled.chronos-ilopermission-denied .noteditableicon{
	display:block}	
	
/*editing but you really don't have permissions to do so, so it's like you aren't really editing, so keep the not edit icon showing and the edit one hidden*/		
div.container.chronos-enabled.chronos-taskpermission-denied .noteditableicon,
div.container.chronos-enabled.chronos-ilopermission-denied .noteditableicon{
	display:block}

div.container.chronos-enabled.chronos-taskpermission-denied .editicon,
div.container.chronos-enabled.chronos-ilopermission-denied .editicon{
	display:none}
	

/**alignment for text of scale*/
div.container.chronos-disabled div.scaledescriptiondisplay.showondisplay{
	/*display:table*/
}

/**** this seems like usage grid, right? <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/

table.iloinfo td,
table.iloinfo th{
	padding:5px}
	
table.iloinfo span.OverZero{
	color:red}

.grip.sortable{
	display:block;
}

.grip.not-sortable{
	display:none;
}


body{
	cursor: default
}

/*ajax call move cursor to waiting indicator*/
body.wait *, body.wait
{
    cursor: progress !important;
 
}		




/*the end*/}