/*
 * mathtutor.css
 * cascading style sheet for the web application
 *
 * author: Casey R Hickerson <casey@cs.cmu.edu>
 *
 * Copyright (c) 2009 Carnegie Mellon University, All Rights Reserved
 */



/*
 * GENERAL DEFAULTS
 */

* {
    margin: 0px; padding: 0px; border: 0px;
}

body {
    background-color: #eff;
    background-image: url("/images/background/background.png");
    background-repeat: repeat;
    font-family: verdana, "deja vu sans condensed", helvetica, arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    line-height: 140%;
}

table {
    border: 0px;
    border-spacing: 0px;
}

/*
 * TEXT STYLES
 */

p {
    line-height: 160%;
    margin: 0 0 8px 0px;
}

h1 {
    font-size: 24px;
    font-weight: normal;
    line-height: 160%;
    margin-bottom: 8px;
}

h2 {
    font-size: 18px;
    font-weight: normal;
    line-height: 160%;
    margin-bottom: 6px;
}

h3 {
    font-size: 14px;
    font-weight: normal;
    line-height: 160%;
    margin-bottom: 6px;
}

a {
    color: #262;
    text-decoration: none;
}
a:hover {
    color: #c33;
    text-decoration: none;
}

blockquote {
    margin: 0 50px 0 25px;
}

pre, code {
    font-family: monaco, "deja vu sans mono", "courier new", monospace;
}

ul {
    margin: 7px 0 7px 15px;
    padding: 0px;
}

ul.hanging {
    list-style-position: outside;
    margin-left: 0px;
}

li.even {
    background-color: #ddd;
}

.copyright {
    font-size: 10px;
    line-height: 13px;
    color: #333;
}
.blurb { /* used on front page */
    font-size: 12px;
    line-height: 15px;
}



/*
 * LAYOUT STYLES
 */

body.plain {
    background-color: #fff;
    background: none;
}

body.modal {
    background-color: #9cf;
    background: none;
}

div#modal {
    height: 100%;
}

/* page - centered container for floating page; optimized for 1024x768 */
#page {
    position: relative;
		width: 1000px;
    margin: 0 auto;
    font-size: 12px;
}

/* header - the site title, welcome message and logout button */
#header {
    position: relative; left: 0px; top: 0px;
    width: 1000px; height: 50px;
    background-color: #9c3;
    text-align: left;
    color: #333;
}

body.front #header {
    height: 80px;
    background-color: transparent;
    margin-bottom: 10px;
    color: #696;
}

#header #header_left {
    position: absolute; left: 10px; bottom: 10px;
    margin: 0px; padding: 0px;
    font-size: 24px;
    font-weight: bold;
}

body.front #header #header_left {
    position: absolute; left: 10px; bottom: 10px;
    margin: 0px; padding: 0px;
    font-size: 32px;
}

#header #header_left a {
    text-decoration: none;
    color: #333;
}

#header #header_left a:hover {
    color: #933;
    text-decoration: none;
}

#header #header_right {
    position: absolute; bottom: 15px; right: 15px;
    margin: 0px; padding: 0px;
    text-align: right;
}

/* navbar -- horizontal navigation bar below header and above breadcrumbs; curently unused */
#navbar {
    position: relative; top: 0px; left: 0px;
    display: block;
    padding: 5px 0 5px 0px;
    text-align: left;
    font-size: 13px;
    color: #69c;
}

#navbar ul {
    display: inline;
    margin: 0px; padding: 5px;
}

#navbar li {
    display: inline;
    margin: 0px; padding: 0px;
}

#navbar ul a {
    padding: 4px 5px 4px 5px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #369;
}

#navbar ul a:hover,
#navbar ul a:active {
    padding: 3px 4px 3px 4px;
    border: 1px solid #369;
    background-color: #fff;
    color: #369;
}

#navbar ul a:active,
#navbar ul a.selected,
#navbar ul a.selected:hover {
    background-color: #369;
    color: #fff;
    text-decoration: none;
    cursor: default;
}

/* breadcrumbs - navigating backwards within the hierarchy */
#breadcrumbs {
    margin: 5px 0 5px 10px;
    font-size: 11px;
    min-height: 17px;
}

#breadcrumbs ul {
    margin: 0px;
    list-style: none;
}

#breadcrumbs ul li {
    display: inline;
}

/* main - content on the left, sidebar on the right */
#main {
    width: 1000px;
    margin: 0px;
    text-align: left;
}

#main #content {
    float: left;
    width: 660px;
    margin-bottom: 20px;
}

#main #sidebar {
    float: right;
    width: 310px;
}

/* sidebar navigation, i.e., the main menu */
#main #sidebar ul {
    width: 100%;
    margin: 0px; padding: 0px;
    border-spacing: 0px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    list-style: none;
    background: none;
}

#main #sidebar ul.dark {
    border-top: 1px solid #666;
    border-bottom: 1px solid #333;
}

#main #sidebar ul li {
    width: 100%;
    margin: 0px; padding: 0px;
    display: inline;
}

#main #sidebar ul li a {
  display: block;
  margin: 0px;
  padding: 3px 0 3px 0px;
  font-size: 12px;
  text-indent: 5px;
  text-decoration: none;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  background: none;
  color: #fff;
}

#main #sidebar ul.dark li a {
  border-top: 1px solid #333;
  border-bottom: 1px solid #666;
  color: #333;
  background: none;
}

#main #sidebar ul li a:hover {
  background-color: #fff;
  border-top: 1px solid #fff;
  color: #333;
}

#main #sidebar ul.dark li a:hover {
    background-color: #333;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    color: #fff;
}

#main #sidebar ul li a.selected {
  background-color: #eee;
  color: #000;
}

#main #sidebar ul.dark li a.selected {
    background-color: #369;
    color: #369;
}

/* footer - below #main; currently unused */
#footer {
  position: relative; left: 10px; top: 10px;
  width: 980px;
  padding: 10px 0 10px 0px;
  font-size: 10px;
  color: #333;
}

#footer ul {
  margin: 10px 0 10px 0;
  list-style: none;
  font-size: 12px;
}

#footer ul li {
  display: inline;
  margin-right: 10px;
}



/*
 * CONTAINER STYLES
 */

/* used by NiftyCornersCube to indicate rounded corners */
/* IE 8 requires a width value */
.rounded_tl { width: 100%; }
.rounded_tr { width: 100%; }
.rounded_br { width: 100%; }
.rounded_bl { width: 100%; }
.horzbar {background: #000000; width: 100%; height: 1px;}


/* project and sponsor information on front page */
div.project_info {
    font-size: 14px;
    padding: 20px;
}

div.project_info .tutorImages {
    position: relative;
    text-align: center;
    margin: 0 auto;
}

div.project_info .tutorImage {
    margin: 10px 20px 5px 20px; padding: 0;
    background-color: #fff;
    border: 1px solid #666;
    font-size: 18px;
}

div.project_info .tutorImage:hover {
    background-color: #fcc;
}

div.project_info ul.two_column {
    float: left;
    width: 100%;
    margin: 5px auto 10px auto; padding: 0;
}

div.project_info ul.two_column li {
    float: left;
    width: 40%;
    margin-left: 10%; 
    padding: 0;
}

div.project_info a { }

div.project_info h1 {
    font-weight: bold;
}

div.project_info h2 {
    font-weight: bold;
}

div.project_info h2 img {
    vertical-align: text-bottom;
    margin-bottom: 3px;
}

div.sponsor_info {
    font-size: 10px;
    margin: 20px 0px 0px 0px;
    text-align: center;
}

div.sponsor_info img {
    margin: 0px 5px 0px 5px;
}

/* containers for problem content */
div#problem_container {
    margin: 0; padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

span#problem_caption {
    position: relative;
    margin: 5px 10px 0 auto;
    text-align: center;
    font-size: 16px;
    font-family: helvetica, arial, sans-serif;
    height: 16px;
    color: red;
}

#problem_caption a {
    position: relative;
    margin: 10px 5px 0 5px;
    text-align: center;
}

#problem_caption a.current {
    color: red;
    font-weight: bold
}

div#problem_content {
    position: relative;
    margin: 0 auto;
    padding-top: 10px;
    text-align: center;
    z-index: 1000;
}

/* reCAPTCHA on the contact page */
div#recaptcha_image {
    margin-bottom: 5px;
    border: 1px solid #666;
    background-color: #fff;
}

div#recaptcha_only_if_image {
    float: left;
}

div#recaptcha_only_if_audio {
    float: left;
}

div#recaptcha_response_field {
    float: right;
}

/* dashboard view -- for a user's home page */
div.dashboard {
    position: relative;
    width: 640px; min-height: 420px;
    margin: 0px; padding: 0 0 25px 0px;
    overflow: hidden;
}

div.dashboard .more_link {
    position: absolute;
    bottom: 0px; right: 0px;
    padding: 10px;
    font-size: 12px;
    font-weight: bold;
}

div.dashboard div.panel {
    position: relative;
    width: 300px; 
    min-height: 120px;
    margin: 0px 10px 10px 0px;
    padding: 20px 5px 20px 5px;
    background-color: #fff;
}

div.dashboard div.panel.wide {
    width: 620px;
}

div.dashboard div.panel .title {
    position: absolute;
    left: 5px; top: 5px;
    font-weight: bold;
    color: #933;
}

div.dashboard div.panel .title a {
    color: inherit;
}

div.dashboard div.panel div.classbox {
		padding: 5px;
		padding-top: 20px;
		padding-bottom: 10px;
		width: 140px;
}

div.dashboard div.panel table {
    width: 280px;
    border-spacing: 0px;
    font-size: 10px;
}

div.dashboard div.panel .message {
    margin-left: 15px;
    font-size: 18px;
    color: #933;
}

div.dashboard div.panel ul {
    padding: 0px;
}

div.dashboard div.panel ul li {
    display: block;
    margin: 0px; padding: 0 0 2px 0;
    font-size: 10px;
    list-style: none;
}

div.dashboard div.panel .more_link {
    position: absolute;
    right: 0px;
    font-size: 10px;
}

div.dashboard div.panel .more_link a {
    padding: 4px;
    margin: 0 1px 0 2px;
}

div.dashboard div.panel .more_link a:hover {
    padding: 3px;
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background: #ddd;
}

/* tab_view, panel_view and wizard
 * present information with one panel, tabbed panels or sequential panels */

/* control tabs for tab_view */
div.tab_view ul.tabs {
    position: relative; top: 0px; left: 0px;
    width: 640px;
    margin: 0px; padding: 0px;
    list-style: none;
}

div.tab_view ul.tabs li {
    float: left;
}

div.tab_view ul.tabs li a {
    display: block;
    padding: 5px 15px 5px 15px;
    border-left: 1px solid #ccc; 
    border-right: 1px solid #888; 
    border-top: 1px solid #ccc;
    background-color: #aaa;
    text-decoration: none;
    font-weight: bold;
    color: #444;
}

div.tab_view ul.tabs li a:hover {
    background-color: #ccc;
    text-decoration: none;
    cursor: default;
}

div.tab_view ul.tabs li a.active-tab {
    border-left: 1px solid #fff; 
    border-right: 1px solid #aaa; 
    border-top: 1px solid #fff;
    background-color: #eee;
    text-decoration: none;
    cursor: default;
}

/* panel containers and panels */
div.tab_view div.panels,
div.panel_view,
div.wizard {
    position: relative;
    width: 100%;
}

div.tab_view div.panels {
    background-color: #eee;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #bbb;
    border-right: 1px solid #bbb;
}

div.tab_view div.panels div.panel {
    display: none;
}

div.tab_view div.panels div.panel.active-tab-body {
    display: block;
}

div.panel_view {
    padding-bottom: 40px;
    min-height: 410px;
}

div#modal div.wizard {
    height: 100%;
}

div#modal div.panel_view {
    height: 100%;
}

div.wizard div.panel {
    padding-bottom: 40px;
    min-height: 400px;
    display: none;
}

div#modal div.wizard div.panel {
    height: 100%;
}

div.wizard div.panel.active-panel {
    display: block;
}

/* panel content layout */
div.panel_view div.title,
div.tab_view div.panel div.title,
div.wizard div.panel .title {
    margin: 10px 10px 0 10px;
    font-weight: normal;
    font-size: 18px;
    line-height: 160%;
}

 

div.panel_view div.subtitle,
div.tab_view div.panel div.subtitle,
div.wizard div.panel div.subtitle {
    margin: 5px 10px 0 10px;
    color: #333;
}

div.panel_view div.content,
div.tab_view div.panel .content,
div.wizard div.panel div.content {
    margin: 20px 10px 0 10px;
}

div.panel_view .indented,
div.tab_view div.panel .indented,
div.wizard div.panel .indented {
    margin-left: 60px;
    margin-right: 30px;
}

div.panel_view .scrollable,
div.tab_view div.panel .scrollable,
div.wizard div.panel div.scrollable {
  overflow-x: hidden;
  overflow-y: scroll;
}

div.panel_view .navigation,
div.tab_view div.panel .navigation,
div.wizard div.panel div.navigation {
    position: absolute; bottom: 10px; right: 10px;
    width: 610px; height: 25px;
    text-align: right;
}

div.wizard div.panel p {
    margin-top: 5px; margin-bottom: 5px;
}

div.panel_view table,
div.tab_view div.panel table,
div.wizard div.panel table {
    border-spacing: 0px;
}

div.panel_view td,
div.tab_view div.panel td {
    vertical-align: top;
    padding: 3px 0 3px 0;
}

div.panel_view td.padded,
div.tab_view div.panel td.padded,
div.wizard div.panel td.padded {
    padding-right: 50px;
    padding-left: 10px;
    padding-bottom: 10px;
    vertical-align: top;
}

/* list - for large lists of things (students, problem sets, etc.) */
div.list {
    width: 640px;
    margin: 0px; padding: 0px;
    display: block;
    border: 1px solid #bbb;
    background-color: #ccc;
}

div.tab_view div.list { width: 620px; }
div.wizard div.list { width: 100%; }

/* scrollable portion */
div.list div.scrollable {
  background-color: #fff;
  height: 297px;
  overflow-x: hidden;
  overflow-y: scroll;  
}

div.list a {
  text-decoration: none;
}

div.list a:hover {
  text-decoration: none;
}

/* table-based lists (fixed order) */
div.list table {
    width: 100%;
    margin: 0; padding: 0; 
    background-color: #fff;
    border-collapse: collapse;
    border: none;
}

div.list table.header {
    background-color: #ccc;
    padding-right: 16px;
    border-collapse: separate;
    height: 24px;
}

div.list table.footer {
    background-color: #ccc;
    padding-right: 16px;
    border-collapse: separate;
}

div.list table.header td {
    font-weight: bold;
    font-size: 10px;
}

div.list tr.odd:hover {
    background-color: #eef;
}

div.list tr.even {
    background-color: #ddd;
}

div.list tr.even:hover {
    background-color: #ccd;
}

div.list tr.odd_inner:hover {
    background-color: #eef;
}

div.list tr.even_inner {
    background-color: #eee;
}

div.list tr.even_inner:hover {
    background-color: #dde;
}

div.list td {
    padding: 4px 2px 4px 0;
    font-size: 10px;
}

div.list td.unshaded {
    background-color: #fff !important;
}

/* ul-based lists (adjustable lists) */

div.list div.header {
    height: 22px;
    margin: 0; padding: 4px 18px 2px 2px;
    font-size: 10px;
    font-weight: bold;
    background-color: #ccc;
}

div.list div.footer {
    height: 22px;
    margin: 0;
    padding-top: 6px;
    padding-left: 4px;
    font-size: 10px;
    background-color: #ccc;
}

div.list ul {
    margin: 0px; padding: 0px;
    list-style: none;
}

div.list li {
    display: block;
    height: 25px;
    overflow: hidden;
    font-size: 10px;
}

div.list li .item {
    display: block;
    height: 20px;
    margin: 2px; padding: 2px 0 0 0px;
}

div.list li.sortable .item {
    cursor: move;
}

div.list li.sortable .item:hover {
    margin: 1px;
    border: 1px solid #444;
}

div.list li div.item:active {
    opacity: 0.5;
}

div.filter .pulldown {
    padding: 2px;
    margin-top: 4px;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    background-color: #fff;
}

div.classfilter .pulldown {
    padding: 2px;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    background-color: #fff;
}

/* column widths */

/* TODO: change td.foo to column_foo for clarity and flexibility */
td.spacer            { width: 5px; }
td.checkbox          { width: 25px; text-align: center; }
td.userName          { width: 90px; }
td.firstName         { width: 100px; }
td.middleInitial     { width: 15px; }
td.lastName          { width: 125px; }
td.name              { width: 2.0in; }
td.problemName			 { width: 100px; }
td.actions2          { width: 100px; }
td.actions3          { width: 150px; }
td.actions4          { width: 200px; }

.column_spacer     { width: 5px; }
.column_checkbox   { width: 25px; text-align: center; }
.column_icon       { width: 26px; text-align: center; }
.column_strand     { width: 100px; }
.column_problemSet { width: 200px; }
.column_problemSet_narrow { width: 100px; }
.column_term       { width: 50px; }
.column_gradeLevel { width: 50px; }
.column_status     { width: 60px; } 
.column_statusWide { width: 80px; } 
.column_score      { width: 35px; vertical-align: top; }
.column_date       { width: 70px; }
.column_time       { width: 65px; }
.column_id         { width: 100px; }
.column_school     { width: 150px; }
.column_school_narrow     { width: 75px; }
.column_teacher    { width: 75px; }
.column_progress   { width: 400px; }
.column_actions1   { width: 50px; }
.column_actions2   { width: 100px; }
.column_actions3   { width: 150px; }
.column_actions4   { width: 200px; }
.column_firstname  { width: 1.375in; }
.column_lastname   { width: 1.375in; }
.column_name       { width: 2.0in; }
.column_username   { width: 1.125in; }
.column_message    { color: #933; font-weight: bold; }

/* report legend styles */
table.legend {
    margin-top: 3px;
}

table.legend td {
    font-size: 10px;
    padding: 2px 4px;
}

table.legend td.icon img {
    padding-left: 4px;
    padding-right: 2px;
}

/* progress table -- in the teacher's sidebar and dashboard */
table.progress {
    width: 100%;
    margin-top: 10px;
    vertical-align: top;
    font-size: 10px;
}

table.progress tr {
    border-collapse: collapse;
}

table.progress tr td {
    vertical-align: middle;
    padding: 2px 0 2px 8px;
    text-align: left;
}

/* sidebar-specific styles  */
table.progress tr.header td {
    font-size: 10px;
    font-weight: bold;
}

table.progress tr.odd {
    background-color: #fff;
}

table.progress tr.odd:hover {
    background-color: #eef;
}

table.progress tr.even {
    background-color: #ddd;
}

table.progress tr.even:hover {
    background-color: #ccf;
}

table.progress .name {
    height: 16px;
    min-width: 75px;
    margin-bottom: 4px;
    font-weight: bold;
    vertical-align: top;
}

table.progress .progress {
    vertical-align: middle;
}

table.progress .icons {
    display: inline-table;
    vertical-align: middle;
    height: 16px;
}

div.dashboard table.progress .name {
    width: 75px;
}

/* problem sets */

div.tutor {
    text-align: center;
    font-size: 10px;
    margin: 5px 0;    
}

/* CONTAINER STYLES */

/* the base container for all text and other objects */
.box {
    padding: 10px;
}

.top {
    margin-bottom: 10px;
}

.bottom {
    margin-top: 10px;
}

/* float-based alignment */
.left {
    float: left;
}

.right  {
    float: right;
}

.clearer {
    clear: both;
    overflow: hidden;
    height: 0px;
}

/* simple center and right alignment */
.center-align {
    text-align: center;
    clear: left;
}

.right-align {
    text-align: right;
    clear: left;
}

/* these create vertical spaces of varying sizes; used in the sidebar */
.spacer {
    height: 10px;
    overflow: hidden;
    clear: both;
}

.halfspacer {
    height: 5px;
    overflow: hidden;
    clear: both;
}

.doublespacer {
    height: 20px;
    font-size: 20px;
}

/* hide something */
.hidden { 
    visibility: hidden;
}

/* vertical centering classes */
/* see http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */
/* these cause problems with CSS validation */

/*
div.middle_outer { height: 100%; width: 100%; overflow: hidden; display: table; #position: relative; }
div.middle_spacer { display: table-cell; vertical-align: middle; #position: absolute; #top: 50%; }
div.middle_inner { #position: relative; #top: -50%; }
*/

/* trim text to a single line */
.trim_line {
    height: 1.6em;
    overflow: hidden;
}



/*
 * COLORS
 */

.shaded, .shade        { background-color: #9cf; }
.shade_header          { background-color: #9c3; }
.shade_content         { background-color: #fff; }

/* sidebar messages of varying importance */

.sidebar_message_notice {
    background-color: #9c3;
    color: #333;
}

.sidebar_message_warning {
    background-color: #c96;
    color: #fff;
}

.sidebar_message_error {
    background-color: #933;
    color: #fff;
}

.sidebar_message_announcement {
    border: 1px solid #333;
    background-color: #036;
    color: #eee;
}

/* menu colors
 * green: students; blue: teachers; red: administrators */

.sidebar_menu_student {
    background-color: #9c3;
}

.sidebar_menu_teacher {
    background-color: #369;
}

.sidebar_menu_sysadmin {
    background-color: #933;
}

.shade_current   { background-color: #9c3; }
.shade_inactive  { background-color: #ddd; }
.shade_active    { background-color: #9cf; }

/* colors used elsewhere */

.black           { color: #000000; }
.darkgray        { color: #333333; }
.gray            { color: #666666; }
.lightgray       { color: #999999; }
.brightgray      { color: #cccccc; }
.smoke           { color: #eeeeee; }
.white           { color: #ffffff; }
.cream           { color: #ffff99; }
.red             { color: #cc6666; }
.orange          { color: #cc9966; }
.olive           { color: #cccc66; }
.green           { color: #669933; }
.grass           { color: #99cc33; }
.sage            { color: #99cc66; }
.deepblue        { color: #003366; }
.darkblue        { color: #336699; }
.blue            { color: #6699cc; }
.lightblue       { color: #99ccff; }
.brightblue      { color: #ccffff; }
.purple          { color: #9966cc; }
.crimson         { color: #993333; }

.black_bg        { background-color: #000000; }
.darkgray_bg     { background-color: #333333; }
.gray_bg         { background-color: #666666; }
.lightgray_bg    { background-color: #999999; }
.brightgray_bg   { background-color: #cccccc; }
.smoke_bg        { background-color: #eeeeee; }
.white_bg        { background-color: #ffffff; }
.cream_bg        { background-color: #ffff99; }

.red_bg          { background-color: #cc6666; }
.orange_bg       { background-color: #cc9966; }
.purple_bg       { background-color: #9966cc; }
.crimson_bg      { background-color: #993333; }

.darkgreen_bg    { background-color: #336633; }
.green_bg        { background-color: #669933; }
.lightgreen_bg   { background-color: #88bb55; }
.grass_bg        { background-color: #99cc33; }
.sage_bg         { background-color: #99cc66; }
.olive_bg        { background-color: #cccc66; }
.brightgreen_bg  { background-color: #ccffcc; }

.deepblue_bg     { background-color: #003366; }
.darkblue_bg     { background-color: #336699; }
.blue_bg         { background-color: #6699cc; }
.lightblue_bg    { background-color: #99ccff; }
.brightblue_bg   { background-color: #ddeeff; }

/*
 * INLINE OBJECT STYLES
 */

/* progress icons */
/* note: currently disabled to improve site performance */

img.progress_icon_large {
    width: 16px; height: 16px;
    margin: 0px; padding: 0px;
    float: left;
}

img.progress_icon_small {
    width: 8px; height: 8px;
    margin: 0px; padding: 0px;
    float: left;
}

/* simple rectangular button */

.button {
    display: inline-block;
    padding: 1px 3px 1px 3px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    background-color: #ccc;
    font-size: 11px;
    color: #000;
}

.button:hover {
    background-color: #bbb;
    text-decoration: none;
    color: #000;
}

.button:active {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #ddd;
    text-decoration: none;
    color: #000;
}

/* rectangular button with highights and shadows
 * ex. Cancel entry of a new assignment */

.raised_button {
    display: inline-block;
    padding: 4px 6px 4px 6px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    background-color: #ccc;
    text-decoration: none;
    font-size: 11px;
    color: #000;
}

.raised_button:hover {
    background-color: #bbb;
    text-decoration: none;
    color: #000;
}

.raised_button:active {
    border-top-color: #ccc;
    border-left-color: #ccc;
    border-bottom-color: #fff;
    border-right-color: #fff;
    background-color: #ddd;
    text-decoration: none;
    color: #000;
}

.raised_button_inactive {
    display: inline-block;
    padding: 4px 6px 4px 6px;
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-right: 1px solid #bbb;
    background-color: #eee;
    text-decoration: none;
    font-size: 11px;
    color: #000;
}

/* rectangular button for submitting a form
 * ex. Create a new assignment */

.submit_button {
    display: inline-block;
    padding: 3px 2px 2px 2px;
    border-top: 3px double #fff;
    border-left: 3px double #fff;
    border-bottom: 3px double #aaa;
    border-right: 3px double #aaa;
    background-color: #ccc;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    color: #000;
}

.submit_button:hover {
    background-color: #bbb;
    text-decoration: none;
    color: #000;
}

.submit_button:active {
    border-top-color: #bbb;
    border-left-color: #bbb;
    border-bottom-color: #fff;
    border-right-color: #fff;
    background-color: #ddd;
    text-decoration: none;
}

/* red button; used for potentially dangerous actions
 * ex. Drop a student from a class */

.red_button {
    display: inline-block;
    padding: 3px 5px 3px 5px;
    border-top: 1px solid #c66;
    border-left: 1px solid #c66;
    border-bottom: 1px solid #600;
    border-right: 1px solid #600;
    background-color: #933;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

.red_button:hover {
    background-color: #b55;
    color: #fff;
}

.red_button:active {
    border-top: 1px solid #711;
    border-left: 1px solid #711;
    border-bottom: 1px solid #d77;
    border-right: 1px solid #d77;
    background-color: #a44;
    color: #fff;
}

/* green button; used to contrast the red button */

.green_button {
    display: inline-block;
    padding: 3px 5px 3px 5px;
    border-top: 1px solid #ad4;
    border-left: 1px solid #ad4;
    border-bottom: 1px solid #690;
    border-right: 1px solid #690;
    background-color: #8b2;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

.green_button:hover {
    background-color: #9c3;
    color: #fff;
}

.green_button:active {
    border-left-color: #360;
    border-top-color: #360;
    border-right-color: #9c6;
    border-bottom-color: #9c6;
    text-decoration: none;
    background-color: #693;
    color: #fff;
}

/* small button; used when space is a premium
 * ex. the login button */

.small_button {
    display: inline-block;
    padding: 0px 3px 0px 3px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    background-color: #ccc;
    text-decoration: none;
    font-size: 9px;
    color: #000;
}

.small_button:hover {
    background-color: #bbb;
    text-decoration: none;
    color: #000;
}

.small_button:active {
    border-top-color: #ccc;
    border-left-color: #ccc;
    border-bottom-color: #fff;
    border-right-color: #fff;
    background-color: #ddd;
    text-decoration: none;
    color: #000;
}

/* large button; used when attention is desirable
 * ex. the Contact Us button */

.large_button {
    display: inline-block;
    padding: 8px 12px 8px 12px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    background-color: #ccc;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    color: #000;
}

.large_button:hover {
    background-color: #bbb;
    text-decoration: none;
    color: #000;
}

.large_button:active {
    border-top-color: #bbb;
    border-left-color: #bbb;
    border-bottom-color: #fff;
    border-right-color: #fff;
    background-color: #ddd;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    color: #000;
}



/*
 * FORM OBJECT STYLES
 */

/* single-selection pulldowns */
.pulldown {
    padding: 2px;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    background-color: #fff;
}

/* single line text entry areas */
.textarea {
    padding: 2px;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    background-color: #fff;    
}

/* multi-line text entry areas */
.textfield {
    padding: 3px;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    background-color: #fff;    
}

/* radio buttons, check boxes and 16x16 icons */
.inline_radio {
    vertical-align: -3px;
    margin-right: 5px;
}

.inline_checkbox {
    vertical-align: -3px;
}

.inline_icon {
    background-color: inherit;
    vertical-align: -4px;
}