@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
@import url("https://fonts.googleapis.com/css?family=Inconsolata");

:root {
--color-menubar-light:#f0f0f0;
--color-menubar-border:#a4b6cf;
--color-light-border:#d0d0d0;
--color-main-dark:#264a68;
--color-main-medium:#f0f0f0;
--color-inactive-bg:#f0f0f0;
--color-inactive-fg:#d0d0d0;
--color-text:#1a4467;
--color-background:#fff;
--color-form-section:#808080;
--color-form-label:#a0a0a0;
--color-error-message:#ff0000;
--font-main:verdana,arial,sans-serif;
--font-monospaced:'inconsolata',monospace;
--font-grid:verdana,arial,sans-serif;
--font-light:tahoma,verdana,sans-serif;
--font-menu:bold 8pt verdana,sans-serif;
}

body {
font-family:var(--font-main);
font-size:10pt;
color:var(--color-text);
background-color:var(--color-background);
margin:0;
padding:0;
}

td.detail_label {
font-family:var(--font-grid);
color:#b0b0b0;
text-align:right;
font-style:italic;
vertical-align:center;
}

td.detail_label:after {
content: ":";
}

td.detail_value {
font-family:var(--font-grid);
font-weight:normal;
vertical-align:center;
padding-left: 5px;
}

#frame {
width:100%;
border-collapse:collapse;
}

#titlebar {
padding-left:18px;
position:relative;
}

#mainlogo {
float:right;
}

#cmlogo {
position:absolute;
right:0px;F
top:48px;
}

#cmlogo A {
position:absolute;
right:16px;
/*caryn was 16px*/
top:48px;
text-decoration:none;
}

#quicksearch input {
font:var(--font-menu);
font-weight:200;
font-size:8pt;
color:var(--color-text);
border:thin solid silver;
float:left;
margin-right:5px;
margin-left:5px;
background:#ffffff url(/images/search.png) left no-repeat;
padding-left:18px;
}

#mainlogo img {
/*padding:8px;*/
/*padding-right:20px;*/
padding-right:8px;
padding-top:8px;
}

#topcmdbar {
padding-top:5px;
}

.topcmdsep {
font:normal 8pt Verdana, Arial, Helvetica, Sans-Serif;
color:#000;
white-space:nowrap;
padding:0 .5em;
}

.topcmditem a,.topcmditem a:link,.topcmditem a:visited {
font:normal 8pt Verdana, Arial, Helvetica, Sans-Serif;
color:#000;
text-decoration:underline;
white-space:nowrap;
}

.topcmditem a:hover {
font:normal 8pt Verdana, Arial, Helvetica, Sans-Serif;
color:blue;
text-decoration:underline;
}

#sitenavbar {
clear:both;
}

#sitenavbar ul {
list-style-type:none;
margin:0;
padding:0;
}

#sitenavbar ul li {
float:left;
font:var(--font-menu);
border-top:1px solid var(--color-menubar-border);
border-right:1px solid var(--color-menubar-border);
background-color:var(--color-inactive-bg);
}

#sitenavbar li.divider {
border-top:1px solid var(--color-background);
border-left:1px solid var(--color-background);
background-color:var(--color-background);
width:5px;
line-height:2em;
border-collapse:separate;
}

#sitenavbar ul li a,#sitenavbar ul li a:link
#sitenavbar ul li a:visited {
font:var(--font-menu);
color:var(--color-inactive-fg);
text-decoration:none;
white-space:nowrap;
background-color:var(--color-inactive-bg);
line-height:2em;
}

#sitenavbar a:hover {
color:var(--color-main-dark);
background-color:var(--color-inactive-bg);
}

#sitenavbar .currentitem,#sitenavbar .currentitem:hover {
color:var(--color-background)!important;
background-color:var(--color-main-dark)!important;
cursor:default;
text-decoration:none;
}

#appmenubar {
font:var(--font-menu);
background-color:var(--color-menubar-light);
border-top:1px solid var(--color-menubar-border);
border-bottom:1px solid var(--color-menubar-border);
clear:both;
height:2em;
position:relative;
top:-1px;
}

ul#appmenu {
border:0 none;
list-style:none;
border-top:1px solid var(--color-menubar-border);
margin:0;
/* caryn was: 0 */
padding:0px;
}

ul#appmenu li {
border:0 none;
float:left;
display:inline;
list-style:none;
position:relative;
margin:0;
padding:0px;
}

ul#appmenu li#appmenuright {
float:right;
border-right:none;
border-left:1px solid var(--color-menubar-border);
}

ul#appmenu li#appmenuleft {
  float:left;
  border-right:none;
  /*caryn
  border-left:1px solid var(--color-menubar-border);
  */
  }

ul#appmenu input {
background-color:var(--color-menubar-light);
font:normal 8pt Verdana, Arial, Helvetica, Sans-Serif;
float:right;
margin-top:1px;
}

ul#appmenu ul {
border:0 none;
list-style:none;
display:none;
position:absolute;
top:100%;
left:-1px;
margin:0;
padding:0;
}

ul#appmenu ul li {
float:none;
display:block!important;
border-right:none;
}

ul#appmenu a {
font:var(--font-menu);
border-right:1px solid var(--color-menubar-border);
line-height:2em;
float:none!important;
display:block;
background:var(--color-menubar-light);
color:var(--color-main-dark);
text-decoration:none;
height:auto!important;
text-align:center;
white-space:nowrap;
/*caryn was padding:0 .5em; */
padding:0 .5em;
}

ul#appmenu li:hover li a,ul#appmenu li.iehover li a {
float:none;
background:var(--color-main-medium);
color:#000;
border-bottom:1px solid var(--color-menubar-border);
border-right:none;
text-align:left;
padding-left:1em;
padding-right:.5em;
}

ul#appmenu li:hover ul,ul#appmenu li.iehover ul {
display:block;
}

#contexticon {
clear:both;
float:left;
padding-left:15px;
padding-top:10px;
}

#contexticon img {
border:0 none;
}

#contexticon span {
font-size:12pt;
font-weight:700;
padding-left:10px;
vertical-align:50%;
}

#contexticon a,#contexticon a:link,#contexticon a:visited {
font-size:12pt;
font-weight:700;
text-decoration:none;
white-space:nowrap;
}

#currentuser {
text-align:right;
padding-right:10px;
color:var(--color-main-dark);
border-right:0;
font:normal 8pt Verdana, Arial, Helvetica, Sans-Serif;
}

#currentuser span {
font-weight:700;
}

#currentuser A {
color:var(--color-main-dark);
font:normal 8pt Verdana, Arial, Helvetica, Sans-Serif;
}

.actionbar {
font:var(--font-menu);
background-color:var(--color-menubar-border);
display:none;
clear:both;
padding:.6em 0;
}

.actionbar a,.actionbar a:link,.actionbar a:visited {
font:var(--font-menu);
color:#000;
text-decoration:none;
padding:0 .8em;
}

.actionbar a:hover {
font:var(--font-menu);
color:#000;
text-decoration:underline;
}

#appmain {
clear:both;
margin:10px 15px 0;
padding:5px;
}

#footer {
font:9px Verdana, Arial, Helvetica, Sans-Serif;
border-top:1px solid #e0e0e0;
color:silver;
text-align:center;
margin:10px 0;
}

.selectBoxArrow {
margin-top:1px;
float:left;
position:absolute;
right:1px;
}

.selectBoxInput {
border:0;
padding-left:1px;
height:18px;
position:absolute;
top:0;
left:0;
}

.selectBox {
border:1px solid silver;
height:20px;
}

.selectBoxOptionContainer {
position:absolute;
border:1px solid silver;
height:100px;
background-color:var(--color-background);
left:-1px;
top:20px;
visibility:hidden;
overflow:auto;
}

.selectBoxAnOption {
cursor:default;
overflow:hidden;
white-space:nowrap;
font:8pt Verdana, Arial, Helvetica, Sans-Serif;
margin:1px;
}

.dim_row,.dim_row A {
color:silver;
}

#appmain TABLE,TD#appmain {
background-color:var(--color-background);
color:var(--color-text);
}

TH {
background-color:var(--color-inactive-bg);
color:var(--color-text);
}

A:hover {
color:#048;
text-decoration:underline;
}

STRONG {
color:#048;
}

.reverse {
background-color:#669;
color:var(--color-background);
}

.roweven {
background-color:#FFC;
}

.statseven {
background-color:#F4F4F4;
}

.areatitlebar {
background-color:#669;
color:var(--color-background);
text-align:center;
font-weight:600;
}

A.areatitlebar {
font-weight:400;
}

A.areatitlebar:hover {
background-color:#ff0;
color:#000;
}

A.grpassign:hover {
color:#048;
background-color:#ff0;
}

.maincontent {
padding-left:20px;
padding-right:20px;
}

div.calendar {
position:relative;
}

.calendar,.calendar table {
border:1px solid #556;
color:#000;
cursor:default;
background:#eef;
font-family:var(--font-light);
}

.calendar .button {
text-align:center;
padding:2px;
}

.calendar .nav {
background:#778 url(menuarrow.gif) no-repeat 100% 100%;
}

.calendar thead .title {
font-weight:700;
text-align:center;
background:var(--color-background);
color:#000;
padding:2px;
}

.calendar thead .headrow {
background:#778;
color:var(--color-background);
}

.calendar thead .daynames {
background:#bdf;
}

.calendar thead .name {
border-bottom:1px solid #556;
text-align:center;
color:#000;
padding:2px;
}

.calendar thead .hilite {
background-color:#aaf;
color:#000;
border:1px solid #04f;
padding:1px;
}

.calendar thead .active {
background-color:#77c;
padding:2px 0 0 2px;
}

.calendar tbody .day {
width:2em;
color:#456;
text-align:right;
padding:2px 4px 2px 2px;
}

.calendar table .wn {
border-right:1px solid #000;
background:#bdf;
padding:2px 3px 2px 2px;
}

.calendar tbody .rowhilite td {
background:#def;
}

.calendar tbody .rowhilite td.wn {
background:#eef;
}

.calendar tbody td.hilite {
background:#def;
border:1px solid #bbb;
padding:1px 3px 1px 1px;
}

.calendar tbody td.active {
background:#cde;
padding:2px 2px 0;
}

.calendar tbody td.selected {
font-weight:700;
border:1px solid #000;
background:var(--color-background);
color:#000;
padding:1px 3px 1px 1px;
}

.calendar tbody td.today {
font-weight:700;
color:#00f;
}

.calendar tbody .disabled {
color:#999;
}

.calendar tbody .emptycell {
visibility:hidden;
}

.calendar tbody .emptyrow {
display:none;
}

.calendar tfoot .footrow {
text-align:center;
background:#556;
color:var(--color-background);
}

.calendar tfoot .ttip {
background:var(--color-background);
color:#445;
border-top:1px solid #556;
padding:1px;
}

.calendar tfoot .hilite {
background:#aaf;
border:1px solid #04f;
color:#000;
padding:1px;
}

.calendar tfoot .active {
background:#77c;
padding:2px 0 0 2px;
}

.combo {
position:absolute;
display:none;
top:0;
left:0;
width:4em;
cursor:default;
border:1px solid #655;
background:#def;
color:#000;
}

.combo .label,.combo .label-IEfix {
text-align:center;
padding:1px;
}

.combo .label-IEfix {
width:4em;
}

.combo .hilite {
background:#acf;
}

.combo .active {
border-top:1px solid #46a;
border-bottom:1px solid #46a;
background:#eef;
font-weight:700;
}

.calendar td.time {
border-top:1px solid #000;
text-align:center;
background-color:#f4f0e8;
padding:1px 0;
}

.calendar td.time .hour,.calendar td.time .minute,.calendar td.time .ampm {
border:1px solid #889;
font-weight:700;
background-color:var(--color-background);
padding:0 3px 0 4px;
}

.calendar td.time .ampm {
text-align:center;
}

.calendar td.time .colon {
font-weight:700;
padding:0 2px 0 3px;
}

.calendar td.time span.hilite {
background-color:#667;
color:var(--color-background);
border-color:#000;
}

.calendar td.time span.active {
background-color:#000;
color:#0f0;
border-color:red;
}

table.grid {
font-family:var(--font-grid);
border:thin hidden #e0e0e0;
border-collapse:collapse;
background-color:#fcfcfc;
}

table.grid th {
border:thin inset #e0e0e0;
background-color:var(--color-background);
text-align:left;
padding-left:5px;
padding-right:5px;
}

table.grid td {
border:thin inset #e0e0e0;
padding-left:5px;
padding-right:5px;
}

table.grid A:hover {
background-color:#ff0;
text-decoration:none;
}

#tabs TABLE {
border-collapse:collapse;
width:100%;
margin-top:30px;
}

#tabs TD.leftspace {
border-bottom-width:1px;
border-right-color:var(--color-menubar-border);
border-top-color:var(--color-background);
border-right-width:1px;
border-top-width:1px;
padding-left:10px;
border-bottom-color:var(--color-menubar-border);
background-color:var(--color-background);
border-style:solid solid solid none;
}

#tabs TD.here {
background-color:var(--color-background);
border-color:var(--color-menubar-border) var(--color-menubar-border) var(--color-background);
border-style:solid;
border-width:1px;
}

#tabs TD.spacer {
min-width:4px;
background-color:var(--color-background);
border-color:var(--color-background) var(--color-menubar-border) var(--color-menubar-border) var(--color-background);
border-style:solid;
border-width:1px;
}

#tabs TD {
border-top-width:1px;
background-color:#eee;
border-bottom-width:1px;
border-right-width:1px;
text-align:center;
white-space:nowrap;
border-color:var(--color-menubar-border);
border-style:solid solid solid none;
margin:0;
padding:0;
}

#tabs TD.rightspace {
border-top-width:1px;
width:100%;
background-color:var(--color-background);
border-bottom-color:var(--color-menubar-border);
border-bottom-width:1px;
border-top-color:var(--color-background);
border-style:solid none;
}

#tabs A {
display:block;
text-decoration:none;
padding:2px 10px;
}

#tabs A.here {
pointer-events:none;
cursor:default;
}

#tabunder {
margin-bottom:20px;
border-right-color:var(--color-menubar-border);
width:auto;
border-bottom-color:var(--color-menubar-border);
border-left-color:var(--color-menubar-border);
border-style:none solid solid;
border-width:1px;
padding:40px;
}

#grid A:hover {
text-decoration:underline;
}

#grid TABLE {
background-color:#fcfcfc;
}

#grid TR {
vertical-align:top;
empty-cells:show;
}

#grid TR:hover {
background-color:#f8f8f8;
}

#grid TH {
font-family:var(--font-grid);
font-size:10pt;
vertical-align:bottom;
border:thin solid var(--color-inactive-bg);
border-collapse:collapse;
border-left-style:none;
border-top-style:none;
white-space:nowrap;
color:#048;
background-color:var(--color-background);
text-align:left;
text-decoration:none;
border-width:1px;
padding:2px 5px;
}

#grid TH.noborder {
border:none;
padding:0 0 2px 5px;
}

#grid TD {
font-family:var(--font-grid);
font-size:10pt;
border:thin solid var(--color-inactive-bg);
border-collapse:collapse;
border-left-style:none;
border-top-style:none;
border-width:1px;
padding:2px 5px;
}

#appmain TH.imageheader {
white-space:normal;
text-align:center;
width:60px;
font-weight:400;
vertical-align:top;
}

#appmain IMG.imageheader {
height:50px;
width:50px;
}

#appmain P.caption {
white-space:normal;
text-align:center;
}

#loginscreen {
background-image:url(../images/loginbackground.jpg);
height: 100%; 
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-color:#000;
background-size: cover;
}

#loginscreen TD {
padding:10px 20px;
}

#loginscreen TABLE {
position:fixed;
top:50%;
left:50%;
width:350px;
height:350px;
margin-top:-175px;
margin-left:-175px;
border-collapse:separate;
border:solid #000 1px;
border-radius:10px;
-moz-border-radius:10px;
}

#dashboardgraph TABLE {
border-collapse:collapse;
border-width:0;
}

#dashboardgraph TR {
vertical-align:top;
empty-cells:show;
border-width:0;
}

#dashboardgraph TD {
text-align:center;
padding:5px 10px;
}

#dashboardgraph IFRAME {
padding-top:5px;
padding-bottom:5px;
}

#dashboardcell {
background-color:#000;
color:green;
font-family:var(--font-monospaced);
padding:5px;
}

#dashboardcell TH {
background-color:#202020;
color:green;
font-family:var(--font-monospaced);
text-align:left;
}

#passfail TABLE {
border:none;
}

#passfail TH {
background-color:var(--color-inactive-bg);
text-align:center;
font-weight:700;
vertical-align:bottom;
padding-top:5px;
padding-bottom:5px;
}

#passfail TD {
border-bottom:thin solid var(--color-inactive-bg);
}

#passfail TR {
vertical-align:top;
}

.pagination {
font-size:9pt;
padding:2px;
}

.pagination ul {
text-align:left;
margin:0;
padding:0;
}

.pagination li {
list-style-type:none;
display:inline;
padding-bottom:1px;
}

.pagination a,.pagination a:visited {
border:1px solid var(--color-light-border);
text-decoration:none;
color:var(--color-menubar-text);
padding:0 5px;
}

.pagination a:hover,.pagination a:active {
border:1px solid var(--color-light-border);
text-decoration:none;
color:var(--color-menubar-light);
background-color:var(--color-text);
}

.pagination a.currentpage {
background-color:var(--color-text);
color:var(--color-menubar-light)!important;
font-weight:700;
cursor:default;
border-color:var(--color-menubar-border);
}

.pagination a.disablelink,.pagination a.disablelink:hover {
pointer-events:none;
background-color:var(--color-background);
cursor:default;
color:var(--color-inactive-fg);
font-weight:700;
border-color:var(--color-inactive-fg);
}

.pagination a.prevnext {
text-decoration:none;
font-weight:700;
}

#dhtmltooltip {
position:absolute;
left:-300px;
width:150px;
border:1px solid #000;
background-color:var(--color-background)FE0;
visibility:hidden;
z-index:100;
filter:progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
padding:2px;
}

#dhtmlpointer {
position:absolute;
left:-300px;
z-index:101;
visibility:hidden;
}

.shortbuildpast {
background-color:var(--color-background)0f0;
}

.shortbuildpresent {
background-color:var(--color-background)fd0;
}

.completebuild {
background-color:#e0ffe0;
}

.wizardseparator {
font-weight:700;
width:100%;
border-bottom:1px solid gray;
}

.wizard_section_heading {
margin-top:2em;
margin-bottom:1em;
font-weight:700;
width:100%;
border-bottom:1px solid gray;
}

A,.grpassign {
color:#048;
text-decoration:none;
}

.rowodd,.grphead {
background-color:#CFC;
}

.calendar thead .weekend,.calendar tbody td.weekend {
color:#a66;
}

#grid INPUT,#dashboardgraph INPUT,#dashboardgraph SELECT {
color:#048;
font-weight:400;
border-color:efefef;
}

ul#appmenu a:hover,ul#appmenu li:hover a,ul#appmenu li.iehover a,ul#appmenu li:hover li a:hover,ul#appmenu li:hover li:hover a,ul#appmenu li.iehover li a:hover,ul#appmenu li.iehover li.iehover a,#tabs A:hover {
background:var(--color-main-dark);
color:var(--color-background);
}

H5,H6,SMALL,table.grid A,#tabs TD.here A:hover {
color:var(--color-text);
}

.statsodd,#tabs TD.rightspace:hover,#tabs TD.leftspace:hover,#tabs A.here:hover {
background-color:var(--color-background);
}

#tabs A:active,#tabs A.here:link,#tabs A.here:visited,#grid A {
text-decoration:none;
}

span.form_section {
margin-top:30px;
margin-left:-20px;
font-size:10pt;
font-style:italic;
font-weight:700;
color:var(--color-form-section);
display:block;
border-top: thin dotted var(--color-form-section);
}

span.form_label {
font-size:8pt;
font-style:italic;
color:var(--color-form-label);
display:block;
}

input.form_field {
margin-top:20px;
display:block;
}

span.form_field {
margin-top:20px;
display:block;
}

span.form_field_message {
display:block;
color:var(--color-error-message);
}

#teacher_dashboard {
position:absolute;
left:480px;
top:60px;
}

#student_dashboard {
position:absolute;
left:540px;
top:64px;
}

.dashboard_cell {
  width: 120px;
  height: 120px;
  display:inline;
  float:left;
  text-align:center;
}

.dashboard_cell A {
text-decoration:none;
}

.dashboard_number {
  font-size: 36pt;
}

.dashboard_number_red {
  font-size: 36pt;
  color: red;
}

.dashboard_number_yellow {
  font-size: 36pt;
  color: yellow;
}

.dashboard_number_green {
  font-size: 36pt;
  color: green;
}

.dashboard_number_label {
  font-size: 8pt;
}

span.tricol_3 {
  font-size:8pt;
  font-style:italic;
  color:var(--color-form-label);
  display:block;
}

.submitbuttondark {
     background: var(--color-main-dark);
     color: var(--color-menubar-light);
     border-radius: 20px;
     text-shadow:none;
  }
.submitbuttondark:hover {
     background: #016ABC;
     color: var(--color-menubar-light);
     border-radius: 20px;
     text-shadow:none;
}

.tab_table th {
border:thin solid #f0f0f0;
background-color:var(--color-background);
text-align:center;
}

.tab_table td {
border:1px solid #f0f0f0;
}

.tab_table table {
font-family:var(--font-grid);
font-size:8pt;
border:thin solid #f0f0f0;
background-color:var(--color-background);
}

.cell_table th {
border:thin solid #f0f0f0;
background-color:var(--color-background);
text-align:center;
border-collapse: collapse;
}

td.cell_table  {
border: 1px solid #f0f0f0; 
}

table.cell_table {
border-collapse:collapse;
font-family:var(--font-grid);
font-size:8pt;
border:1px solid #f0f0f0;
background-color:var(--color-background);
}

table.cell_table tr:first-child td {
border-top: 0;
}

table.cell_table tr td:first-child {
border-left: 0;
}

table.cell_table tr:last-child td {
border-bottom: 0;
}

table.cell_table tr td:last-child {
border-right: 0;
}