/********************************************************************************************************************* TEACHER.CSS Internet Management System (c) Copyright HEC Software, October 2006 Programmed by Kevin Owens This is our main stylesheet for the teacher administration system. Revision 10.23.2006 - Significant changes have been made so that pages will render correctly in IE6, IE7, and Firefox. **********************************************************************************************************************/ /* Affects the tag. */ body { font-family: Verdana, Arial, sans-serif; font-size: 10pt; margin: 0px; text-align: center; } /* Reports use this a lot. */ h1, .title { color: #086BCE; font-size: 14pt; font-weight: normal; height: 34px; line-height: 14pt; padding: 5px; } /* Reports use this a lot. */ h2, .subtitle { color: #086BCE; font-size: 12pt; height: 24px; line-height: 12pt; padding: 5px; } hr { color: #999999; height: 1px; } img { border: 0px; } .property { background-color: #dddddd; width: 130px; } .value { background-color: #eeeeee; width: 155px; } input { font-family: Verdana, Arial, sans-serif; font-size: 8pt; width: 160px; } input.checkbox, input.radio { width: 18px; } input .textfield { margin:3px; height:20px; width:200px; } select { font-family: Verdana, Arial, sans-serif; font-size: 8pt; width: 160px; } table { border: 1px solid #000000; font-size: 10px; width: 350px; } td { padding: 3px; vertical-align: top; } th { text-align: right; /* Don't specify a width here. I use the tag too generally. */ } /*********************************************************************************************************************/ /* Shared Styles */ /*********************************************************************************************************************/ #basicdetails { /* Used in Student Details */ height: 300px; position: relative; } #basicdetails table { width: 100%; } /* All of our content within the body is kept in this "container" div. */ #container { background-color: #EEF6FF; height: 100%; /* Fill at least the whole screen. */ width: 779px; padding: 0px; text-align: left; } /* All of our content within the body is kept in this "container" div. */ #container_popup { background-color: #EEF6FF; height: 100%; /* Fill at least the whole screen. */ width: 100%; padding: 0px; text-align: left; } #dashboard { height: 34px; width: 779px; /* Basically, at 800x600, this is how much room we have available. */ } /* For links within the dashboard button */ #dashboard .button { background-image: url(img/navbutton.gif); color: #ffffff; cursor: pointer; display: inline; font-family: Verdana; font-size: 14pt; height: 34px; margin-right: 1px; padding: 2px; text-decoration: none; width: 155px; } /* The dashboard button upon mouse over. */ #dashboard .button:hover, #dashboard .buttonover { background-image: url(img/navbutton.gif); background-position: -155px 0; color: #ffffff; cursor: pointer; display: inline; font-family: Verdana; font-size: 14pt; height: 34px; margin-right: 1px; padding: 2px; text-decoration: none; width: 155px; } /* This way, links within the buttons won't look blue/purple and underlined. */ #dashboard .button a, #dashboard .button:hover a, #dashboard .buttonover a { color: #ffffff; text-decoration: none; } #groupfilter { display: none; } #lessondetails { /* Used in Student Details */ border: 1px solid #000000; padding: 3px; position: relative; width: 350px; } #lessondetailsexpanded { /* Used in Student Details */ float: right; padding: 3px; position: relative; width: 200px; } #lessondetailsexpanded table { width: 200px; } #moredetails { /* Used in Student Details */ height: 300px; position: relative; } #moredetails table { width: 100%; } #wizard table { font-size: 10pt; } /* Named styles */ .applet { margin-top: 10px; text-align: center; width: 779px; } .biglink { cursor: pointer; height: 90px; } .biglinkhover { background-color: #ffffcc; cursor: pointer; height: 90px; } .boxedheader { background-color: #f0f0f0; border: 1px solid #cccccc; font-weight: normal; padding: 5px; text-align: center; } /* This is used in _header.asp, under the logo bar and the dashboard, to inform the user of where he is in the site hierarchy. */ .breadcrumbs { background-color: #ffffff; height: 24px; padding: 3px; width: 779px; } .breadcrumbs img { margin-right: 5px; vertical-align: text-top; } .dark { background-color: #dddddd; } /* Used for displaying error messages. */ .error { background-color: #ff0000; color: #ffffff; font-weight: bold; padding: 5px; } /* In _header.asp, this is for the line with the logo, the help link, and the search box.*/ .header { background-color: #ffffff; height: 34px; /* The same height as the dashboard links */ padding: 0px; width: 779px; /* The maximum space available in 800x600 */ } .header img { vertical-align: text-top; margin: 0px; } .header .right { float: right; padding: 7px; } .hidden { display: none; } .label { text-align:right; width:100px; float:left; padding:5px; margin:0; margin-top: 5px; } /* This style is used as a container for all the content on the left panel of the screen, including About This Page and Options. */ .leftpanel { float: left; margin-left: 2px; width: 200px; } .light { background-color: #eeeeee; } /* The main content of the page (the "meat"). */ .main { float: right; width: 567px; } /* This is similar to .error or .warning. */ .message { background-color: #eeeeee; border: 1px solid #333333; color: #000000; font-weight: bold; padding: 5px; } .nobr { display:none; } .lsnblank { /* Used in Student Details. Just as a placeholder to make it more even. */ display: inline; height: 32px; margin: 4px; position: relative; vertical-align: middle; width: 32px; } .lsnouter { /* Used in Student Details. Just as a placeholder to make it more even. */ float: left; } .lsnblack, .lsnblackover { /* Used in Student Details */ background-color: #000000; color: #ffffff; cursor: pointer; font-family: Verdana; font-size: 8pt; height: 32px; margin: 4px; position: relative; text-align: center; vertical-align: middle; width: 32px; } .lsngray, .lsngrayover { /* Used in Student Details */ background-color: #B7B7B7; color: #777777; cursor: pointer; font-family: Verdana; font-size: 8pt; height: 32px; margin: 4px; position: relative; text-align: center; vertical-align: middle; width: 32px; } .lsngreen, .lsngreenover { /* Used in Student Details */ background-color: #0F752B; color: #ffffff; cursor: pointer; font-family: Verdana; font-size: 8pt; height: 32px; margin: 4px; position: relative; text-align: center; vertical-align: middle; width: 32px; } .lsnred, .lsnredover { /* Used in Student Details */ background-color: #FA0707; color: #ffffff; cursor: pointer; font-family: Verdana; font-size: 8pt; height: 32px; margin: 4px; position: relative; text-align: center; vertical-align: middle; width: 32px; } .lsnyellow, .lsnyellowover { /* Used in Student Details */ background-color: #FFF334; color: #000000; cursor: pointer; font-family: Verdana; font-size: 8pt; height: 32px; margin: 4px; position: relative; text-align: center; vertical-align: middle; width: 32px; } /* This is used to contain a set of links, or options, in the left-panel of a screen. */ .optionheader { color: #ffffff; background: url("img/optionset_header.gif") no-repeat top; font-size: 12pt; height: 26px; margin-top: 10px; padding: 4px; text-align: right; } .optionset { background-color: #ffffff; border: 1px solid #0066cc; padding: 5px; } /* Close the gap on FireFox and IE7 only. IE6 will ignore this rule. */ html>body .optionset { margin-top:-8px; } .optionset a { display: block; } .optionset img { margin-right: 10px; vertical-align: text-top; } .printonly, .printonlyrow { /* Only display when printing. */ display: none; } .reportcontainer { overflow: auto; width:570px; } /* This is used for the tags in reports. */ .reportcontent { background-color: #ffffff; margin-top: 15px; width: 570px; } .reportheader { /* This is used for the main table headers in reports. It has a different-looking counterpart in PRINT.CSS. */ padding-bottom: 4px; padding-top: 4px; text-align: center; color: #ffffff; background-color: #086BCE; } .reportth { /* This is used for the

tags in reports, like the Student Listing report. */ padding-bottom: 4px; padding-top: 4px; text-align: center; color: #ffffff; background-color: #086BCE; } .reportth a { color: #ffffff; } /* These are used in Student Details. These are the buttons like "Basic Information," "Extended Information," and "Lessons & Overrides." */ .tab { border: 1px solid #cccccc; cursor: pointer; float: left; padding: 5px; padding-left: 10px; text-align: center; width: 172px; } .tabhighlighted { background-color: #3366FF; color: #FFFFFF; float: left; font-weight: bold; border: 1px solid #cccccc; padding: 5px; text-align: center; width: 172px; } /* This is a container used to contain the View Group and Find Student options in the Class Roll. */ .topoptions { margin-bottom: 10px; height: 40px; width: 570px; } /* This is a smaller div, which is used in the Class Roll. */ .viewgroup { float: left; padding-top: 2px; text-align: center; width: 250px; } .viewgroup img { vertical-align: top; } .viewgroup .tiny { display: inline; font-size: 8px; } /* Used for displaying warning messages. */ .warning { background-color: #ffff00; color: #000000; font-weight: bold; padding: 5px; } /*********************************************************************************************************************/ /* Unique Styles */ /*********************************************************************************************************************/ a.dashheader { /* This style is for the "You are here" text on the dashboard. */ font-size: 20pt; margin-left: 10px; vertical-align: middle; } img.dashicon { /* This is used for the little link icons in the dashboard. */ vertical-align: middle; } img.go { /* This is used in the Class Roll for the "Go" button. */ cursor: pointer; vertical-align: middle; } img.thumb { /* This is used for the thumbnail pictures on the Teacher's Desk main page. */ float: left; } .studentlist { border: 1px solid #333333; border-collapse: collapse; width:570px; } .studentlist tr { background-color: #ffffff; border: 1px solid #cccccc; } .studentlist td { border: 1px solid #cccccc; } .studentlist th { background-color: #7EBEFF; border: 1px solid #000000; font-weight: normal; text-align: center; } /* This will only be read by IE on the Mac: */ .studentlist tr.studentlist_highlight { background-color: yellow; cursor: pointer; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ .studentlist tr.studentlist_highlight { background-color: #ffffcc; cursor: pointer; } /* End IE5-Mac hack */ .studentlist tr.studentlist_plain { background-color: white; } /* TEACHER_V2.CSS Internet Management System (c) Copyright HEC Software, February 2005 Programmed by Kevin Owens This CSS file is primarily meant to be used in harmony with the regular TEACHER.CSS, only replacing what elements have been causing compatability issues with non-IE browsers (e.g., FireFox.) */ html, body { height: 100%; /* I'm not sure if this line is necessary, but it sure doesn't hurt. */ min-height: 100%; /* Stretch to the bottom of the screen in FireFox. */ } body { text-align: center; /* Center stuff in IE */ /*min-width: 600px; /* This is so that half of #container does not hang off the left of the page in FireFox. */ } /* I'll hardly ever want a border around my images. */ a img { border: 0px; } table { font-size: 10px; } /* All of our content within the body is kept in this "container" div. */ #container { margin: 0 auto; /* Center in FireFox. */ /*width: 600px;*/ text-align:left; /* For non-IE browsers, don't center the inner text. */ } #container { min-height: 100%; } .leftpanel { margin-right: 2px; /* Having a right margin of >2px makes _browse_roll.asp work in FireFox, but not IE. */ } /* Except for IE, include a margin so that there is some space between leftpanel and main. */ html>body .leftpanel { margin-right: 10px; } /* For links within the dashboard button */ #dashboard .button { /* Stuff I know works */ float: left; /* Experimental stuff different from TEACHER.CSS */ display: block; /* Identical with TEACHER.CSS */ background-image: url(img/navbutton.gif); color: #ffffff; cursor: pointer; font-family: Verdana; font-size: 14pt; margin-right: 1px; padding: 2px; text-decoration: none; width: 155px; } /* Set it up for all browsers */ #dashboard .button .dashtext, #dashboard .buttonover .dashtext, #dashboard .button:hover .dashtext { float: right; padding: 3px; width: 110px; } /* Now make what hacks are necessary just for FireFox */ html>body #dashboard .button .dashtext, #dashboard .buttonover .dashtext, #dashboard .button:hover .dashtext { padding: 5px; } /* Only FireFox will see this; IE ignores the child selector property (the html>body) */ html>body #dashboard .button { padding: 0px; } /* The dashboard button upon mouse over. */ #dashboard .button:hover, #dashboard .buttonover { cursor: pointer; float: left; } /* Only FireFox will see this; IE ignores the child selector property (the html>body) */ html>body #dashboard .button:hover, html>body #dashboard .buttonover { padding: 0px; } html>body img.dashicon { /* This is used for the little link icons in the dashboard. */ margin:2px; } .optionset a { display: inline; } .optionset img { margin-right: 5px; } #loading { padding-top: 100px; }