body, html { margin: 0; padding: 0; }
body { background-color: #ffffff; }
body, td, th, p, div, span { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
a { color: #0000ff; font-family: Arial, Helvetica, sans-serif; }
a:hover { cursor: pointer; }
a.visited { color: #0000ff; }
input, select, textarea { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
img { border: 0 }
form { display: inline; }
/*-- Header Styles --*/
#hdrImage { display: none; }
#header { background: url(../images/hdr.jpg) no-repeat #C3D2F3; height: 60px; }
#headerLink { display: block; width: 445px; height: 55px; text-decoration: none; }
#siteNav a { padding: 0 0.5em; text-decoration: none; color: #CC0000; text-transform: uppercase;
font-size: 10px; font-weight: bold; }
#siteNav a:hover { text-decoration: underline; }
#header table { height: 57px; }
#header #login { color: #395586; text-align: right; padding: 0 5px 0 0; }
#header #siteNav { text-align: right; vertical-align: bottom; padding-bottom: 2px; }
#sectionNav { background-color: #395586; color: #C0CEE6; padding: 8px; }
#sectionNav a { color: #C0CEE6; text-decoration: none; padding: 0 0.5em; font-weight: bold; font-size: 11px; }
#sectionNav a:hover { color: #ffffff; }
/*-- Footer Syles --*/
#footer { margin-top: 1em; text-align: center; font-size: 10px; }
#footer a { text-decoration: none; padding: 0 1em; font-weight: bold; color: #0000ff; }
#footer a:hover { text-decoration: underline; }
#footer a:visited { color: #0000ff; }
/*-- Button Styles --*/
a.button { display: inline; background: url(../images/btn_bkgd.gif); padding: 5px 10px; color: #000;
border: 1px solid #999; text-decoration: none; font-weight: bold; line-height: 2.5em;
font-family: Verdana, Arial, Helvetica, sans-serif; white-space: nowrap; }
a.button:hover { color: #cc0000; }
/* Supplemental class for the button class which makes a button as the default button for a page or section */
a.defaultButton { background-image: url(../images/btn_default_bkgd.gif) }
a.defaultButton:hover { color: #fff; }
/* Supplemental class for the button class which tweaks the button style to handle a image in the left side of the button.
The icon should be 20x20px */
a.imgButton { padding-left: 5px; }
a.imgButton img { padding: 0 0 2px 0; margin: 0; border: none; vertical-align: middle; }
/* Supplemental class for the button class which tweaks the button styles to show a disabled button */
a.disabledButton { color: #aaa !important; cursor: default !important; background: url(../images/btn_bkgd.gif) !important; }
a.disabledButton:hover { color: #aaa !important; cursor: default !important; background: url(../images/btn_bkgd.gif) !important; }
/* Variant of the button class for use in settings where a smaller button is desired (eg: table cells). This is
intended to be used in place of the button class. */
a.smallButton { display: inline; background: url(../images/btn_bkgd.gif); padding: 2px 5px; color: #000;
border: 1px solid #999; text-decoration: none; font-weight: normal; line-height: 1.6em;
font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: nowrap; }
a.smallButton:hover { color: #cc0000; }
.centeredButtonBox .button { margin: 0 0.2em; }
.leftButtonBox .button { margin-right: 0.4em; }
.rightButtonBox .button { margin-left: 0.4em; }
/* This style is used in order to workaround a bug in versions of IE where tables
whose widths are specified as a percentage incorrectly determine their widths
relative to the browser window rather than their parent element. By wrapping
them in a div with a 100% width, this behavior is corrected. */
div.tablewrapper { width: 100% }
/* The viewTable class is the read-only equivalant to the inputTable class.
The name of a value is displayed as a header on the left and the values are
on the right */
table.viewTable td { padding: 8px 20px 0 4px; vertical-align: top; }
table.viewTable th { text-align: right; vertical-align: top; padding: 8px 4px 0 4px; }
table.viewTable tr.first th, table.viewTable tr.first td { padding-top: 0px; }
table.viewTable td .note { font-size: 90%; font-style: italic; }
table.horizViewTable th { text-align: left; padding-top: 10px; }
table.horizViewTable td { padding-top: 2px; }
table.horizViewTable tr.first th { padding-top: 0px; }
/* The inputTable class is used for vertical forms. The name of a value is displayed
as a header on the left and the input fields are on the right */
table.inputTable td { padding: 8px 40px 0 4px; vertical-align: top; }
table.inputTable th { text-align: right; vertical-align: top; padding: 8px 4px 0 4px; font-weight: normal; }
table.inputTable tr.first th, table.inputTable tr.first td { padding-top: 0px; }
table.inputTable th.required { font-style: italic; font-weight: bold; }
table.inputTable div.error { color: red; }
table.inputTable td.last { padding-right: 0; }
/* The inputTable2 class is used for vertical forms. The name of a value is displayed
as a header on the left and the input fields are on the right. The th is bolded */
table.inputTable2 td { padding: 5px 30px 0 5px; }
table.inputTable2 th { text-align: right; padding: 8px 0 0 0; }
table.inputTable2 tr.first th, table.inputTable2 tr.first td { padding-top: 0px; }
table.inputTable2 td.last { padding-right: 0; }
/* The dataTable class is used to provide a basic style for lists of line item
data. */
table.dataTable { border-collapse: collapse; border: solid 1px black; }
table.dataTable th { text-align: left; vertical-align: bottom; }
table.dataTable th, table.dataTable td { padding: 5px; border: solid 1px black; }
table.dataTable th, table.dataTable td,
table.dataTable th a:link, table.dataTable th a:visited, table.dataTable th a:hover { color: #000 }
table.dataTable th.sorted a { padding-left: 10px; background-repeat: no-repeat; background-position: 0% 60%; }
table.dataTable th.up a { background-image: url(../images/sort_up.gif); }
table.dataTable th.down a { background-image: url(../images/sort_down.gif); }
table.dataTable th { background-color: #cccccc; }
table.dataTable td { background-color: #E8E7F7; }
table.dataTable tr.odd td { background-color: #FAF9FE; }
table.dataTable tr.even td { background-color: #E8E7F7; }
table.dataTable td.action { background-color: #9E9ED0 }
div.dataTableActions { padding: 5px; background-color: #9E9ED0; border: solid 1px black; border-top: none; }
/* The scrollableTable class is used to provide a basic style for scrollable lists of line item
data. */
table.scrollableList { border-collapse: collapse; }
table.scrollableList td { padding: 4px 5px; border: solid 1px #D3D3D3; background-color: #FAF9FE; }
/* This is a hack style to work around IE6/7's problems with scrollable divs containing 100% width tables */
.scrollableContainer { height: 1%; }
/*-- Class Report Styles --*/
table.classReportTable th { text-align: center; vertical-align: top; }
table.classReportTable th div.subtitle { font-size: 80%; }
table.classReportTable th, table.lineItemTable td { padding: 2px 5px; }
/*-- Student Scores styles --*/
table.studentScoresTable th { text-align: center; ; vertical-align: top; }
table.studentScoresTable th, table.studentScoresTable td { padding: 2px 5px; }
table.studentScoresTable tr.unitRow td { font-weight: bold; }
table.studentScoresTable td.activity { padding-left: 2em }
table.studentScoresTable td.activityItem { padding-left: 4em }
table.studentScoresTable td.assessmentQuestion { padding-left: 6em }
table.studentScoresTable td.assessmentAnswer { padding-left: 8em }
table.studentScoresTable td.scoreCardEntity { padding-left: 6em }
table.studentScoresTable td.maxPoints { text-align: right; width: 6.5em; }
table.studentScoresTable td.points { text-align: right; width: 5em; }
table.studentScoresTable td.duration { text-align: right; width: 6em;}
table.studentScoresTable td.status { text-align: center; }
table.studentScoresTable tr.assessmentDataError td { color: red; }
table.studentScoresTable tr.unitRow td a.unitToggle { text-decoration: none; }
table.studentScoresTable td.select { text-align: center; }
table.studentScoresTable tbody.unitBodyClosed { display: none; }
table.studentScoresTable tbody.unitBodyOpen { }
#content { padding: 10px; max-width: 1100px; }
#content.noMargin { max-width: none; }
#sidebar { width: 300px; padding-right: 10px; vertical-align: top; }
#main { width: 0; vertical-align: top; }
.filterActions { margin-top: 5px; text-align: right; }
/*-- Tab Styles --*/
div.tabHeader { overflow: auto; } /* Fixes a rendering issue with IE7 */
div.tabHeader div.tab { float: left; background: #5a5d92 url(../images/purple_curve_right.gif) no-repeat top right; padding: 0 8px 0 0; }
div.tabHeader div.tab h1, div.tabHeader div.tab h2 { color: #fff; font-size: 110%;
margin: 0; padding: 4px 10px 4px 18px; text-align: center;
background: #5a5d92 url(../images/purple_curve_left.gif) no-repeat top left; }
div.tabHeader div.tab h1 { text-transform: uppercase; }
div.tabHeader div.returnLink { padding-left: 10px; float: left; padding-top: 5px; }
div.tabHeader div.returnLink a { color: #000; padding-right: 8px; background: url(../images/link_arrow_black.gif) no-repeat right 70%; font-size: 90%; }
div.tabHeader div.note { padding-left: 10px; color: #5a5d92; float: left; padding-top: 5px; }
div.tabHeader div.action { padding-right: 5px; float: right; padding-top: 5px; }
div.tabHeader div.action a { color: #000; font-size: 90%; padding-right: 8px; background: url(../images/link_arrow_black.gif) no-repeat right 70%; }
div.tabHeader div.actions { padding-right: 5px; float: right; padding-top: 5px; }
div.tabHeader div.actions a { color: #000; font-size: 90%; }
div.tabHeader div.windowClose { padding-right: 5px; float: right; padding-top: 5px; }
div.tabHeader div.windowClose a { text-decoration: none; color: #CC0000; text-transform: uppercase; font-size: 90%; font-weight: bold; }
div.tabHeader div.windowClose a:hover { text-decoration: underline; }
* html div.tabHeader { height: 1%; }
div.tabBody { background: #5a5d92; color: #fff; padding: 10px; clear: both; }
* html div.tabBody { height: 1%; }
/*-- Content Box Styles --*/
.contentBox .header { background-color: #9494B5; color: #fff; border-top: solid 1px #5a5d92; border-bottom: solid 1px #5a5d92; }
.contentBox .header h3 { color: #fff; font-size: 105%; text-transform: uppercase; margin: 0; padding: 5px 10px; }
.contentBox .header h3 span.instructions { text-transform: none; font-size: 90%; }
.contentBox .header h3 span.instructions a { color: white; }
.contentBox .header td.action { text-align: right; padding-right: 10px; }
.contentBox .header td.action a { color: #fff; font-size: 90%; padding-right: 8px; background: url(../images/link_arrow_white.gif) no-repeat right 60%; }
.contentBox .header td.headerInput { padding-left: 0; }
.contentBox .box { background-color: #CECEE7; color: #000; padding: 10px; }
.contentBox .box p.footnote { margin: 10px 0 0 20px; }
.contentBox .box .alertMessage { margin-bottom: 10px; color: black; background-color: #FFB6C1; border: solid 1px #DC143C; padding: 5px; }
#sidebar .contentBox { border: solid 1px #5a5d92; border-width: 0 1px 1px 1px; margin-bottom: 10px; }
/*-- Hideable Content Box Styles --*/
.hideToggle { display: inline; }
.showToggle { display: none; }
.contentHidden .hideToggle { display: none; }
.contentHidden .showToggle { display: inline; }
.contentHidden .hideable { display: none; }
.contentHidden .header { border-bottom: none; }
.contentBox .header td.toggleLinks { text-align: right; padding-right: 10px; }
.contentBox .header td.toggleLinks a { color: #fff; font-size: 90%; }
/* Error box style for content area errors */
.alertBox { margin-bottom: 10px; }
.alertBox .header { background-color: #DC143C; border: none }
.alertBox .box { color: black; background-color: #FFB6C1; border: solid 1px #DC143C; border-top: none; }
.alertBox ul { margin-top: 0; margin-bottom: 0; }
/*-- Query Navigation --*/
.queryNav { text-align: center; color: #000; margin: 5px auto 0 auto; }
.queryNav a { color: #000; padding: 0px 2px; }
.queryNav a.prev { padding-left: 8px; background: url(../images/querynav_prev.gif) no-repeat left 60%; }
.queryNav a.next { padding-right: 8px; background: url(../images/querynav_next.gif) no-repeat right 60%; }
.queryNav .current { font-weight: bold; font-size: 110%; }
div.pageActions { text-align: center; margin-top: 10px; }
/* This style is used to create a fixed width centered box. Note that due to bugs
in earlier versions of IE, this box must also be placed in a div with a
text-align: center */
#content .centeredEditBox {
width:500px; background-color:#E4EBF3; text-align: left; padding: 7px;
border:1px solid #B7CAE2; color:#000000; margin: 2em auto 0 auto;
}
#content .centeredEditBox h1 .section { font-size: 125%; }
#content .centeredBox { width:500px; text-align: left; padding: 7px; margin: 0 auto; }
#content .centeredEditBox h1 { margin: 5px 0; color: #003366; font-size: 100%; }
#content .centeredEditBox h1 .section { font-size: 130%; text-transform: uppercase; }
#content .centeredEditBox h1 .subsection { font-size: 115%; }
#content .centeredEditBox h2 { margin-left: 10px; font-size: 110%; text-transform: uppercase; }
#content .centeredEditBox h2 a { font-size: 80%; text-transform: none; }
#content .centeredEditBox h3 { font-size: 110%; margin-bottom: 10px; font-style: normal; }
#content .centeredEditBox .actions { text-align: center; margin-top: 5px; }
#content .centeredBox h1 { margin: 5px 0; color: #003366; font-size: 100%; }
#content .centeredBox h1 .section { font-size: 130%; text-transform: uppercase; }
#content .centeredBox h1 .subsection { font-size: 115%; }
#content .centeredBox h2 { margin-left: 10px; font-size: 110%; text-transform: uppercase; }
#content .centeredBox h2 a { font-size: 80%; text-transform: none; }
#content .centeredBox h3 { font-size: 110%; margin-bottom: 10px; font-style: normal; }
#content .centeredBox .actions { text-align: center; margin-top: 5px; }
/* These styles are used for two column select tables such as the ones used in the class roster
and purge selected users wizards */
table.twoColumnSelectTable { margin-bottom: 5px; }
table.twoColumnSelectTable td.twoColumnSelectHeader { border: solid 1px #5A5D92; padding: 5px 10px; }
table.twoColumnSelectTable td.twoColumnSelectHeader h4 { font-size: 100%; margin: 0; padding: 0; font-weight: bold; }
table.twoColumnSelectTable td.twoColumnSelectHeader h4 span.count { font-weight: normal; white-space: nowrap; }
table.twoColumnSelectTable td.twoColumnSelectCell { border: solid 1px #5A5D92; border-top: none; }
table.twoColumnSelectTable td.availableHeader { background-color: #9494B5; color: white; }
table.twoColumnSelectTable td.availableHeader td { color: white; } /* Fix for IE5.5 inerhitance issues */
table.twoColumnSelectTable td.availableHeader a { color: #fff; padding-right: 8px; background: url(../images/link_arrow_white.gif) no-repeat right 70%; }
table.twoColumnSelectTable td.selectedHeader { background-color: #FAD793; color: #000; }
table.twoColumnSelectTable td.selectedHeader td { color: #000; } /* Fix for IE5.5 inerhitance issues */
table.twoColumnSelectTable td.selectedHeader a { color: #fff; padding-right: 8px; background: url(../images/link_arrow_white.gif) no-repeat right 70%; }
/* These styles are used for displaying the standard-activities tables used in various reports. They are similar to the dataTable
style except that cell borders do not rely on the border-collapse attribute to prevent border doubling. Instead, the first row of
the table and the first cell in each row show be flagged with a "first" class. This style is need because under low-bandwith
situations, the browsers tend to choke on border-collapse for large tables. */
/* Standard Activities */
table.standardActivitiesTable { border: solid 1px black; }
table.standardActivitiesTable th, table.standardActivitiesTable td {
vertical-align: top; padding: 2px 5px; border-top: solid 1px black; border-left: solid 1px black; }
table.standardActivitiesTable tr.first th, table.standardActivitiesTable tr.first td { border-top-width: 0; }
table.standardActivitiesTable th.first, table.standardActivitiesTable td.first { border-left-width: 0; }
table.standardActivitiesTable th, table.standardActivitiesTable td,
table.standardActivitiesTable th a:link, table.standardActivitiesTable th a:visited, table.standardActivitiesTable th a:hover { color: #000 }
table.standardActivitiesTable th { background-color: #cccccc; }
table.standardActivitiesTable td { background-color: #E8E7F7; }
table.standardActivitiesTable tr.odd td { background-color: #FAF9FE; }
table.standardActivitiesTable tr.even td { background-color: #E8E7F7; }
table.standardActivitiesTable th { text-align: center; }
/* Activity Standards */
table.activityStandardsTable { border: solid 1px black; }
table.activityStandardsTable th, table.activityStandardsTable td {
vertical-align: top; padding: 2px 5px; border-top: solid 1px black; border-left: solid 1px black; }
table.activityStandardsTable tr.first th, table.activityStandardsTable tr.first td { border-top-width: 0; }
table.activityStandardsTable th.first, table.activityStandardsTable td.first { border-left-width: 0; }
table.activityStandardsTable th, table.activityStandardsTable td,
table.activityStandardsTable th a:link, table.activityStandardsTable th a:visited, table.activityStandardsTable th a:hover { color: #000 }
table.activityStandardsTable th { background-color: #cccccc; }
table.activityStandardsTable td { background-color: #E8E7F7; }
table.activityStandardsTable tr.odd td { background-color: #FAF9FE; }
table.activityStandardsTable tr.even td { background-color: #E8E7F7; }
table.activityStandardsTable th { text-align: center; }
table.activityStandardsTable tr.unitRow td { font-weight: bold; }
table.activityStandardsTable td.activity { padding-left: 2em; }
table.activityStandardsTable td.standards standardsLink { white-space: nowrap; }
/* This is the style for displaying a class icon within a class report page */
div.classIconImage { border: solid 1px black; background-color: white; float: left; padding: 6px; }
div.classIconImage img { padding: 0; margin: 0; }
/* These styles control the appearance of the busy dialog that shows up for certain long-running operations */
#busyDialog { z-index: 250; position: absolute; top: -1000px; left: -1000px; border: solid 2px #5A5D92; }
#busyDialog .header { border-top: none; }
#busyDialog .box { color: black; border: none; border-top: none; }
#busyDialogMessage p { margin: 1em; font-size: 125%; }
/* These styles are for displaying "modal" dialogs against a greyed out background
The original idea for them came from http://www.subimage.com/dhtml/subModal/
*/
#modalBackgroundMask {
position: absolute;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .4;
filter: alpha(opacity=40);
/* this hack is so it works in IE
* I find setting the color in the css gives me more flexibility
* than the PNG solution.
*/
background-color:transparent !important;
background-color: #333333;
/* this hack is for opera support
* you can uncomment the background-image if you don't care about opera.
* this gives you the flexibility to use any bg color that you want, instead of the png
*/
background-image/**/: url(../images/modal_mask_bg.png) !important; /* For browsers Moz, Opera, etc. */
background-image:none;
background-repeat: repeat;
cursor: wait;
display:none;
}
/* Hack style to hide select boxes on IE since they do not honor z-index */
* html body.showingModal select { visibility: hidden; }