/* general settings */
body { margin: 0px; padding: 10px; font-size: 95%; font-family:"Courier New", Courier, mono; color: #c2a492; background: url(images/background.jpg) #1b1312 repeat-x;}

/* container properties */
p, td, th, li, pre { font-size: .9em; }
table, td p, th p, li p, li li, td td { font-size: 1em; }
hr { border-width:0px; border-top: 1px solid #c2a492; }
div .p, p label, td label { font-size: .9em; }
.p .sbutton, li .sbutton, p .sbutton, td .sbutton, th .sbutton { font-size: .89em; }
.p .dmenu, li .dmenu, p .dmenu, td .dmenu, th .dmenu { font-size: .89em; }
textarea { font-family: sans-serif; font-size: .95em; }

/* inputs with focus */
input:focus, textarea:focus { background-color:#ffd; }

/* header properties */
h1, h2, h3, h4 { color: #000; margin: 5px 5px; }
h1 a, h2 a, h3 a, h4 a { color: #000; text-decoration: none; }
h1 {font-weight: normal;}
h1 a {font-weight: bold; color: #8EB769;}
h2 { font-size: 1.3em; color:#fff;}
h3 { margin: 5px 5px 5px 0px; color: #000; font-weight: normal !important; font-size: 1.2em; }
h4 { margin: 5px 0; font-weight: bold; font-size: .9em; border-bottom:1px solid #d3e8ef; color:#798; padding: 2px;}

a { color: #8EB769; text-decoration:none; }
a:hover {text-decoration:underline;}
img { border-width: 0px; }

/* wraps the entire content of the body */
#frame { border: solid 1px #1b1312; background-color:#1b1312; padding-bottom: 10px; margin: 0px 55px; }
#frame_top { }
#frame_bottom { }

/* contains class name, login/logout, and tabs */
#header { margin:4px; border:solid 1px #1b1312; padding: 5px 5px 0px 5px; background: #D4E8EF url(images/header.jpg) repeat-x; }
#header .toplinks { float: right; padding-bottom: 2px; font-size: 0.85em; margin-bottom: 12px; }
#header .toplinks a { text-transform: lowercase; }
#header .links { float: right; padding:4px 0px; text-decoration: none; clear: both; }

/* the primary tab look (e.g. at the top of every page: Pages, Calendar, etc.) */
div.tabmenu_border { border-bottom: 1px #1B1312 solid; }
div.tabmenu { padding-left: 10px; }
.tabmenu ul { display:inline; margin: 0px; }
.tabmenu ul li { float:left; margin: 0px 10px -1px 0px; border: 1px #1B1312 solid; padding: 3px 10px; list-style: none; background: #D4E8EF; cursor: pointer; color: #333; }
.tabmenu ul li a { text-decoration: none; color: #333; }
.tabmenu ul li.selected { background: #fff; }
.tabmenu ul li.selected a { color: #000 !important; }

/* a button within a tab that displays a menu */
.tabmenu ul li.tabmenu_dropdown { padding-right: 0px; }
.tabmenu ul li.tabmenu_dropdown span {margin:0 0 0 6px; padding: 3px 0 3px 12px; background: transparent url(/images/icons/bullet_arrow_down.png) center no-repeat; border-left:1px solid #ccc;}
.tabmenu ul li.tabmenu_dropdown span:hover {background-color:#eee; }

/* contains the main page content */
#content { margin-top: 5px; padding-bottom: 10px; }

/* contains copyright information */
#footer { padding: 5px; background:url(images/logo_h_small.gif) no-repeat 0px 2px #1B1312; text-align:right; height: 33px; /* height is height of image - 5px padding top and bottom */}
#footer_home { display: block; overflow: hidden; height:0px ;padding-bottom: 40px; width: 211px; float:left; }


/***********************************************************************
    BEGIN styling for Pages                         
************************************************************************/
/* used in Pages, col1 contains the tree of pages */
/* used in Pages, col2 contains the content blocks */
#col1 { position: absolute; left: 70px; padding: 0px; width: 160px; background:url(images/nav_bg.jpg) repeat-x; border:solid 1px #1B1312;}
#col2 { margin-left: 175px; margin-right: 5px; border-width: 0px; padding: 1px 2px; }
#col1 p { margin-left: 12px; }
#col2 h3 { font-size: 14px; font-weight: bold !important; margin-bottom: 0px; font-family: Arial, "MS Trebuchet", sans-serif; margin-left: 12px; }
#col2 p { margin-left: 12px; margin-right: 12px; }

/* A two-column layout for use within thickboxes */
/* used when reading discussions & in the Embed the Web Widget wizard */
#tb_col1 { position:absolute; width: 155px; background:url(/images/nav.bg.jpg) repeat-x; border:solid 1px #cdb; overflow:auto; }
#tb_col1_btn { position:absolute; margin-left:155px; }
#tb_col2 { padding-left: 170px; }
#tb_col1.collapsible { width: 145px; }

/* used in Pages */
.pagetitle { padding: 5px 5px 7px 5px; color: #fff; margin: 5px 5px; font-size: 1.4em; font-weight: bold; }

/* used to control column layouts. First # is layout, second # is column number */ 
/* One Column */
#col_1_1 { width: 100%; }

/* Two Column Traditional */
#col_2_1 { margin-right: 200px; }
#col_2_2 { float: right; width: 195px; }

/* Three Column */
#col_3_1 { float: left; width: 34%; margin-right: 1%; }
#col_3_2 { float: left; width: 32%; margin-right: 1%; }
#col_3_3 { float: right; width: 32%; }

/* Two Column Wide Right */
#col_4_1 { float: left; width: 195px; } 
#col_4_2 { margin-left: 200px; }

/* Two Column Even */
#col_5_1 { float: left; width: 49%; margin-right: 1%; }
#col_5_2 { float: right; width: 49%; }
#widecol {padding: 0px 4px;}

/* used in Pages to display the tree of pages  */
ul.pages_tree { margin: 1em 0px; border-bottom: 1px solid #d3e8ef; padding: 0px; clear: both; }
ul.pages_tree li { position: relative; margin: 0px; border-top: 1px solid #624E46; padding: 0px; list-style: none; font-size: 0.9em; cursor: pointer; background: #d3e8ef; }
ul.pages_tree ul { margin: 0px; padding: 0px; }
ul.pages_tree ul li { margin: 0px 0px 0px 10px; font-size: 1em; }
ul.pages_tree div { padding: 1px 0px 0px 14px; overflow: hidden;  overflow: hidden }
ul.pages_tree div:hover { background-color: #fff; } /* not for IE */
ul.pages_tree div.selected { background-color: #fff; }
ul.pages_tree div.selected a:hover { background-color: #fff; }
ul.pages_tree li a { display: block; padding: 2px 0px 3px; text-decoration: none; color:#000;}
ul.pages_tree li a:hover { background-color: #fff; }

/* you MUST make these visible somehow either through use of color or images to allow the user to easily navigate their page tree */
span.bullet { position: absolute; top: 7px; left: 2px; background: url(images/bullet.gif) no-repeat 0px 0px; padding: 8px 5px; font-size: 1px; cursor: pointer; }
span.bullet_open { position: absolute; top: 0px; left: 2px; background: url(images/bullet_open.gif) no-repeat 1px 7px; padding: 8px 5px; font-size: 1px; cursor: pointer; }
span.bullet_closed { position: absolute; top: 0px; left: 2px; background: url(images/bullet_closed.gif) no-repeat 0px 5px; padding: 8px 5px; font-size: 1px; cursor: pointer; }

/* used in Pages, contains the head and body (box) of a content block */
.cms_box { border: 1px #624e46 solid; margin-bottom: 6px; }

/* used in Pages, contains the title of a content block */
.head { background-color: #624e46; color: #C2A492; font-weight: bold; border-width: 0px; padding: 5px; }

/* used in Pages, contains the body of a content block */
.box { margin:6px 0px 6px 6px; width: 97%; overflow: hidden; font-size:.9em; }
.box p { margin-top: 0px; font-size: 1em; }
.box label, .box td, .box th, .box li, .box pre { font-size: 1em; }
.box .sbutton { font-size: .89em; }

/* used in link, file, audio, video & image content blocks */
.box_table { font-size: 1.05em; }
.box_table td { font-size: 1em; white-space: nowrap; }

/* used in image content blocks, contains the image thumbnail in slideshow mode */
.showimg { text-align: center; }
.showimg .ihead { }
.showimg .ihead .r { }
.showimg .ibody { }
.showimg .ibody .r { }
.showimg .ifoot { }
.showimg .ifoot .r { }

/* used in image content blocks, contains the image thumbnail in thumbnail mode */
.thumbimg { float: left; padding: 2px 4px; white-space: nowrap; overflow: hidden; }
.thumbimg .ihead { }
.thumbimg .ihead .r { }
.thumbimg .ibody { }
.thumbimg .ibody .r { }
.thumbimg .ifoot { }
.thumbimg .ifoot .r { }

/* used for simple lists (e.g. Calendar > Popday & Announcements) */
table.list {border-collapse: collapse;}
table.list th { border-top: 1px #ccc solid; padding: 5px; background-color: #c2a492; color: #624e46; }
table.list td, table.list th { border-bottom: 1px #c2a492 solid; padding: 3px; text-align: left; }
table.list th a {color:#1A5920;}
table.hover_glow tr:hover { background-color: #624e46; }
table.hover_glow tr.noglow:hover { background-color: #fff; }

/* used in the Announcements Block */
.cms_box_annc .label { white-space: nowrap; }

/* used in the Upcoming Events Block */
.agenda_date { font-style: italic; font-size: 0.9em; font-family: "Times New Roman", Times, serif; color: #777; }
div.agenda_date { padding-top: .5em; border-bottom: 1px #ccc solid; }
.cms_box_cldr_list .cldr_list_grading_period { margin-bottom: 2px; }
.cms_box .ellipse { float: right; width: 4%; }
.cms_box .list_item { width: 94.8%; }
.detail { color: #777; font-size:.9em; }

/* used in the Mini Calendar Block */
table.cldr th { font-size: .9em; background: #f6f9f0; padding:4px; }
table.cldr td.hilite { background-color: #fdd; }
table.cldr td.today { background: url(images/bg_cal.gif) no-repeat; }
.cms_box_cldr table { font-size: .9em; }
.cms_box table.cldr td.today a {color:#1A5920;font-weight:bold;}

/* used in the YouTube & Google Video Blocks */
.video_thumb { padding-top:5px; }
.video_thumb .play { position: relative; margin-top: -65px; background: url(images/external_video_play.gif) no-repeat center center; height: 0px; padding-bottom: 24px; }

/***********************************************************************
    BEGIN Discussion
************************************************************************/
#tb_col1.discussion_menu { background-image:none; border-width: 0px; }
.post_row {padding: 4px 0px 0px;}
.post_head {background-color: #C8E3BA; border: 1px solid #C8E3BA;}
.post_action {background-color: #624E46; border-width: 0 1px 1px 1px; border-style:solid; border-color:#C8E3BA;}
.post_body {border-style: solid; border-color: #C8E3BA; border-width: 1px 1px 1px 0; background-color: #fff;}
.post_body_hidden {background-color: #eee; color: #999; }
.post_star {float: right;cursor: pointer;}
.post_unread {background-color: #60A05D; color:#fff; padding: 2px; margin: 2px 0;cursor:pointer;}
.post_unread a {color:#fe8;}
.post_draft {cursor:pointer; padding:4px;}
.post_message {background-color:#fec; border:1px solid #E07D20; padding:4px; font-size:.9em;} 
.stitle {color: #1b1312; font-weight: bold; font-size:1em;}



/***********************************************************************
    BEGIN styling for Calendar
************************************************************************/
/* used in Calendar & the Mini Calendar Block */
table.cldr { background-color: #d3e8ef; border-top: 1px #ccc solid; border-left: 1px #ccc solid; margin-bottom:8px;}
table.cldr th { font-size: .9em; background-color: #624e46;padding:4px; }
table.cldr th p { font-size: .8em; }
table.cldr td { overflow: hidden; width:14%;padding:4px; }
table.cldr td td, table.cldr th td { border: 0px; }
table.cldr td, table.cldr th { border-bottom: 1px #ccc solid; border-right: 1px #ccc solid; } 
table.cldr td p, table.cldr td td { font-size: .8em; }
table.cldr .day_header { font-size: .8em; color: #aaa; font-weight: bold; text-align: right; }
table.cldr .day_header a { color: #aaa; text-decoration: none; }
table.cldr .day_header a:hover { background-color:#fff;}
table.cldr .today .day_header a:hover { background-color:#fff; }
table.cldr td.first30 { border-bottom: 1px #dec dotted; }
table.cldr td.colhour { background-color: #e9efe0; }
table.cldr td.grey { background-color: #ececec; }
table.cldr td.grey a {color:#999;}
.cldln a:hover { background-color:#fff; }
.today .cldln a:hover { background-color:#fff; }
.cal_mo .cldln { margin-left: 20px; }
.cal_mo .day_header { margin-left: 20px; }
.cldln b { font-size: 0.8em; }
.cldln a { text-decoration: none;}
.event a { color: #1A5920; } 
.assignment a { color: #824E37; }
.box table.cldr { background-color: #1b1312;}
.box table.cldr td.hilite { background-color: #C2A492;}
.box table.cldr a {color: #1A5920;}

/* applied to the first day of a month */
/* cal_mo is applied to every first of the month */
.cal_mo {background-repeat: no-repeat;}
/* mo1 applies to the 1st of January, mo2 to February, etc. */
.cal_mo1 {background-image: url(images/month1.gif); }
.cal_mo2 {background-image: url(images/month2.gif); }
.cal_mo3 {background-image: url(images/month3.gif); }
.cal_mo4 {background-image: url(images/month4.gif); }
.cal_mo5 {background-image: url(images/month5.gif); }
.cal_mo6 {background-image: url(images/month6.gif); }
.cal_mo7 {background-image: url(images/month7.gif); }
.cal_mo8 {background-image: url(images/month8.gif); }
.cal_mo9 {background-image: url(images/month9.gif); }
.cal_mo10 {background-image: url(images/month10.gif); }
.cal_mo11 {background-image: url(images/month11.gif); }
.cal_mo12 {background-image: url(images/month12.gif); }


/***********************************************************************
    BEGIN styling for Connect Tab
************************************************************************/
/* used for the sub-tabs in the Connect tab */
ul.subtabmenu { margin: -5px 0px 10px; padding: 5px; border-bottom: 1px solid #d3e8ef; font-size: 0.9em; }
ul.subtabmenu li { list-style: none; display: inline; border: 0px #000 solid; border-right-width: 1px; padding: 0px 10px; }
ul.subtabmenu li a.selected { font-weight: bold; color: #fff; }

/* used for right-aligned items in the subtabmenu */
ul.subtabmenu li.right { border-right: none; }

/* marks a message (or group of messages) as being unread (e.g. Inbox) */
.unread { font-weight: bold; }
/* required because of the way the span.bullet is styled in this skin (e.g. Dropbox) */
.bulleted { position: relative; padding-left: 15px; }


/* primarily effects labels when viewing Inbox & dropbox messages */
td.label { vertical-align: top; }
td.right, table.list td.right { text-align: right; float: none; }

/* TODO: add th.right, table.list th.right to skins */
td.right, table.list td.right, th.right, table.list th.right { text-align: right; float: none; }

/* used for Discussions, Dropbox & Inbox to display & new items (e.g. Dropbox & Discussion Block) */
.count { font-size: .85em; font-weight: bold; color: #8EB769; }
a.count:hover { color: #8EB769; }


/***********************************************************************
    BEGIN styling for Announcements
************************************************************************/
/* used in Messages to display the vertical list of options (which we will be expanding as we upgrade haiku LMS) */
ul.vmenu { margin: 0px; padding: 0px; clear: both; }
ul.vmenu li { margin: 2px -2px 0px 4px; border-bottom-width: 1px; padding: 0px; list-style: none; font-size: .9em; cursor: pointer;  }
ul.vmenu li a { color: #000; text-decoration: none; padding: 0px 0px 0px 12px; display: block; }
ul.vmenu li:hover { background-color: #f0ffe0; }
ul.vmenu li.selected { background-color: #fff7e0; border-width: 1px 0px 1px 1px; border-color: #ccc; border-style: solid; }

table.annc td { vertical-align: bottom; }


/***********************************************************************
    BEGIN Inbox
************************************************************************/
/* a recipient of an inbox message (e.g. Inbox > Write) */
span.recipient { border: 1px solid #ddd; }
.recipient { float: left; margin: .2em .5em 0px 0px; }
.recipient span { white-space: nowrap; display: block; padding: 3px 0px 2px 4px; }

/* used for the Connect login screen (e.g. Inbox > Login) */
/* (also used in Dropbox > Login) */
.admlogin { margin:0px auto; width: 30em; border:6px solid #624e46; padding: 10px; }
.admlogin form { margin-top: 1em; }
.admlogin table { width:100%; }
.admlogin table td.label { width: 9em; text-align:right;}

/***********************************************************************
    BEGIN Dropbox
************************************************************************/
#dropbox_table, #inbox_table { padding: 5px; }
#dropbox_table td, #inbox_table td { padding: 5px; }
#dropbox_table a, #inbox_table a { text-decoration: none; }
#dropbox_table a:hover, #inbox_table a:hover {text-decoration: underline;}

/* a simple vertical list (used to list Dropbox messages & drafts) */
.vlist div { border-bottom: 1px #60A05D solid; padding: 5px; }
.vlist div div { border-width: 0px; padding: 0px; }

/* A more compact vlist */
.vlist_compact div { padding: 1px 0px; }

table.vlist { width: 100%;}
table.vlist td { margin:0px; border-bottom: 1px #ccc solid; padding: 5px; }
table.vlist td div { border-width: 0px; padding: 0px; }

.vlist_col { float: left; }
.message_list { clear: both; width: 95%; padding: 0px; font-weight: normal;}
.message_list div.vlist { margin: 0px; padding: 0.2em 5px 0.5em 20px; font-weight: normal; }
.message_list div.vlist div { font-size: 1em; list-style: none; }
.message_list div.vlist div a { color: #60A05D; }
.message_list div.vlist div a:hover { color: #60A05D; }

/* holds draft messages (also used for Discussions) */
.drafts { background-color:#C8E3BA; padding: 2px 0px 0px; margin: 0px 10px 10px; border: 1px #c2a492 solid; border-top-width: 0px; font-size: .9em; }
.drafts div.vlist { margin: 0px; padding: 0.2em 5px 0.5em 20px; font-weight: normal; }
.drafts div.vlist .label { color:#3B717F;}
.drafts div.vlist label {color:#3B717F;}
.drafts div.vlist a { color: #60A05D; }
.drafts div.vlist a:hover { color: #60A05D; }

/* Emphasizes the fact that you can attach files (e.g. when you 'Hand In' an assignment) */
.attach_files { background-color: #ffa; padding: 5px; }

/* A progress bar that is displayed while files are uploading */
div.progressBar { margin: 15px; }
#progressText { font-size: 1em; }
#progressBar { width:100%; height: 18px; border: 1px #333 solid; background-color: #fff; }
#progressBar #statusBar { display:block; height:18px; width:0; background-color:#333; border-right:solid 1px #000; }
#progressBar #statusText { display:block; padding: 0 15px; line-height:25px; position:absolute; top:0; left:0; }

/* Status icons - displayed next to a Message to indicate whether there are related attachments, posts, etc. */
/* (e.g. Inbox) */
.msg_icons { display: block; float: right; margin-left: 10px; margin-bottom: -16px; }
.staticon { padding: 16px 16px 0px 0px; font-size: 0px; background-position: top left; background-repeat: no-repeat; }
.si_attach { background-image: url(images/attach.png); }
.si_late { background-image: url(images/clock_red.png); }
.si_sticky { background: url(images/sticky.gif) top left no-repeat; }

.tb_dropbox_msg .actrow { margin: 0px -10px 0px; }

/* used for Messages & Discussions to signify a quotation */
/* (e.g. Inbox > read message) */
.title { font-weight: bold; font-size: 1.2em;}
.quote .title { color: #000; font-weight: bold; font-size: 1em; }
.quote { display: block; border-left: 2px solid #00f; padding-left: .5em; color: #00f; }
.quote .quote { border-left-color: #0f0; margin-left: -.2em; color: #0f0; }
.quote .quote .quote { border-left-color: #f00; color: #f00; }

/****
Begin Assess Styling
****/
#TBLite {background-color: #1b1312;}

/***********************************************************************
    BEGIN Attendance
************************************************************************/

/* used for the Attendance calendar view */
table.ab_cldr td { color:#aaa; background-color:#fff; }
table.ab_cldr td.abnt:hover {background-color:#ffc;}

/***********************************************************************
    BEGIN General Styling
************************************************************************/
/* decreases the font size (e.g. Discussion > 'posted x time ago') */
.small { font-size: .9em; }

/* used when there is nothing available (e.g. Inbox > Sent, in designer's pack) */
.empty_column { border-width: 0px; padding: 20px 5px 20px 5px; background-color: #c2a492; color: #777; text-align: center; font-size: .85em; }
#col2 .empty_column { border-top: 1px #ccc solid; }

/* Just-In-Time Help, see the www.myhaikuclass.com login page for an example */
/* (e.g. in the Inobx & Dropbox login pages.) */
#help_jit { position: absolute; z-index: 5000; background-color: transparent; width: 225px; font-size: .8em;}
#help_jit_message { position: relative; left: 24px; border: 1px #000 solid; padding: 7px; background-color: #fff; color:#1b1312; width: 200px; }
#help_jit_arrow_left, #help_jit_arrow_right { position: absolute; z-index: 10; }
img.help_jit { cursor: default; }

/* makes a link not a link color */
/* (e.g. What's New view) */
a.nolink, a .nolink {color:#000;}

/* displays a note (often a warning) to the user (e.g. Inbox > Login) */
.note {padding: 5px 5px 5px 25px; border: 1px solid #624e46; background: url(images/error.png) no-repeat 5px 5px #624e46; color: #c2a492; }
/* like the notice but with a different icon (currently not in the example html) */
.info {padding: 5px 5px 5px 25px; border: 1px solid #d3e8ef; background: url(images/information.png) no-repeat 5px 5px #F6F9F0; color: #798; }
.post_note { background-image: url(images/comment.png); }
/* used for late Dropbox Messages */
.late_note { border-color: #ccc; background-image: url(images/clock_red.png); background-color: #fee; color: #000; }

/* e.g. used in Connect>Dropbox>(assignment) for Assignment details */
fieldset {padding: 5px;border:1px solid #C8E3BA;margin:3px 0;}
fieldset legend {color: #798; font-size:.8em;}
fieldset.collapsible .fieldset_wrapper {overflow:auto;}
fieldset.collapsible legend a {padding-left:14px; background: url(images/bullet_open.gif) no-repeat 2px 4px; cursor: pointer;}
fieldset.collapsed {border-width:1px 0 0 0;height:1em;}
fieldset.collapsed legend a {background: url(images/bullet_closed.gif) no-repeat 2px 4px; }
fieldset.collapsed .fieldset_wrapper {display:none;}

/* AltTip, used to add text to icon-only buttons (eg Calendar next/previous month buttons & Cms My Classes tab) */
.alttip { font-size: .8em; position: absolute; top: 0px; left: 0px; background-color: #fff; color:#1b1312; border: 1px #ccc solid; padding: 5px; z-index: 150; filter:alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; }

/* usually holds .button buttons, used most often at the botom of TB "popups" */
#TB_actionBar { background-color:#624e46; border-top: 1px solid #1b1312;}
/* the .action class is being phased out, but in the meantime it should be styled similarly to #TB_actionBar */
.action { background-color: #624e46; padding: 4px; border: 1px solid #c2a492;}

/* Overrides thickbox styling */
#TB_window { border-color: #1b1312; }
#TB_window table.list th a {color:#1a5920;}
#TB_window table.list td:hover {background-color:#fff;}

#TB_ajaxContent label, #TB_ajaxContent .label {color:#3B717F;}
#TB_ajaxContent .post_unread a {color:#FFFF66;}
#TB_ajaxContent a {font-weight:bold;}

.tb_title_bar .tb_title {color: #c2a492;}
.tb_title_bar{ background-color: #624e46; border-color:#1b1312;}

/* used to hold .sbutton buttons in Connect tab (e.g. Inbox, Dropbox) */
.actrow, .tools { border: 1px #624e46 solid; padding: 5px; background:url(images/button_bar.jpg) #fff; }
.actrow label { font-size: 0.8em; }
table.actrow { padding:0px; }
table.actrow td { padding:3px; }

/* Makes an input "blend in" but still look editable when the user mouses over it */
.pinput { border: 0px; padding:2px; background-color: transparent; }
.pinput_hover { border: 1px #ccc solid; padding: 1px; background-color: #ffe; }
.pinput_focus { border: 1px #ccc solid; border-style: inset; padding: 1px; background-color: #ffe; }

/* Buttons */
/* button is used for any <input type="button" or type="submit" /> */
.button { margin: 2px; border: 1px #aaa solid; padding: 2px 20px; text-decoration: none; cursor: pointer; background-color:#60A05D; color: #d3e8ef; cursor: font-weight: bold; }
.button:hover { background-color: #1A5920; color:#8EB769; text-decoration:none; }

/* small button (e.g. Dropbox > 'Hand In' button) */
.sbutton { font-family:"Courier New", Courier, mono; padding: 1px 3px 1px 2px; margin-right: 5px; border: 1px #ccc solid; border-bottom-color: #aaa; border-right-color: #aaa;  text-decoration: none; font-size: .8em; font-weight: normal; background-color:#60A05D; color: #d3e8ef; cursor: pointer; white-space:nowrap; }
.sbutton:hover { background-color: #1A5920; color:#8EB769; text-decoration:none;}
.sbutton img { background: #eee; }
li .sbutton { font-size: 1em; }

/* used for iconic buttons (e.g. Calendar > Month arrow buttons) */
/* NOTE: this should be styled very similarly to the sbutton */
.ibutton { border: 1px #ccc solid; border-bottom-color: #aaa; border-right-color: #aaa; padding: 1px; background-color:#60A05D; color: #d3e8ef; cursor:pointer;}

/* style for dropdown menu button, NOTE: this has to be defined after sbutton */
.dmbutton { background-image: url(images/bullet_arrow_down.png); background-repeat: no-repeat; background-position: right 2px; float: left; padding:4px 18px 1px 5px; }
/* drop down menu */
.dmenu {position: absolute; border: 1px #ccc solid; background-color: #fff; font-size: .8em; cursor: pointer; z-index:5;}
.dmenu div { padding: 3px; font-size: 1em; font-weight: normal; color: #000; }
.dmenu div.hover {background-color:#60A05D; color: #d3e8ef;} 
.dmenu hr { height:0px; margin: 2px 0px; border: 0px #ccc solid; border-top-width: 1px; }
.dmenu .selected { padding-left: 25px; background-image: url(/images/icons/tick.png); background-repeat: no-repeat; background-position: 3px 3px;}
.dmenu .not_selected { padding-left: 25px; }
.dmenu .dmoption { padding-left: 25px; float: none; white-space: nowrap; }

/* big button, used for MD dialog boxes (e.g. 'One Column Page' > click one of the images) */
.bbutton { margin: 5px; padding: 5px 10px; border: 1px #ccc solid; border-bottom-color: #aaa; border-right-color: #aaa; background-color:#60A05D; color: #d3e8ef; font-size: 1em; font-weight: bold; cursor: pointer; }
.bbutton a { text-decoration: none; color: #966; }
.bbutton:hover, .bbutton:focus { border-color: #d3e8ef; background-color: #1A5920;  color:#8EB769; text-decoration:none;}

/* toggle button (e.g. Dropbox > Drafts) */
.stoggle_on { border: 1px #aaa solid; border-bottom-color: #ccc; border-right-color: #ccc; background-color: #1A5920; color:#8EB769; }
.stoggle_off { background-color:#60A05D; color: #d3e8ef; }

/* hilited button, it should stand out! (e.g. Inbox > Write) */
.hibutton {background-color:#A4D1DD; color: #1a4b5c; font-weight: bold;}
.hibutton:hover {background-color:#1A5920; color:#8EB769; text-decoration:none;}

/* disabled control (e.g. Calendar > Today button)  */
.disabled { cursor: default; color: #666; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }

/* used for error/confirmation dialogs, the overlay will completely cover the screen */
/* (e.g. 'One Column Page' > click one of the images) */
#MD_box { background-color: #624e46; border: 2px #1b1312 solid; padding: 10px; }
#MD_box input.bbutton { display: block; margin: 10px auto; width: 100%; }
#MD_overlay { background-color: #000; filter: alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; }
.md_text { color: #c2a492; margin: 4px; font-size: 1.1em; }

/* user selection (e.g. writing and Inbox Message, click 'Add recipient') */
#user_selection { width: 12em; position:absolute; display:none; height: 16em; overflow:auto; background-color: #fff; border: 1px solid #ccc; }
#user_selection .user_sel {padding: 1px; font-size: 0.9em; cursor: pointer;}
#user_selection_title {padding: 2px; font-size: 0.9em; color: #798; border-bottom: 1px solid #798;} 
a.usel_user {margin: 2px; padding: 2px; display:block; color: #1b1312; font-size:0.8em;} 
a.usel_user:hover, a.usel_user:focus {background-color:#60A05D; color: #d3e8ef; text-decoration:none;} 

/* Auto-complete search results (e.g. switching between Peer Review WikiSites in preview mode) */
.hsuggest { color: #000; }
.hsuggest div.sel {background-color:#60A05D; color:#d3e8ef;}

/* displays unobtrusive notices or errors to the user */
div.notice { position: absolute; left: 30%; margin: 0px 50px 0px 0px; padding: 7px 0px; font-size: .8em; text-align: center; color:#1b1312; }
div.notice span { position: relative; top: -7px; border: 1px #9c6a4f solid; padding: 4px 12px 4px 8px; background-color: #fff; }
a.notice_close_button { display: inline; margin: 0px 5px; border-width: 0px; padding: 0px 6px; background: #fff url(images/delete.gif) no-repeat top left; width: 16px; height: 16px; cursor: pointer; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; }

/* marks an input as required (e.g. Subject field when writing an Inbox Message) */
div.requiredField, span.requiredField { padding-right: 18px !important; background: url(/images/icons/asterisk_orange_small.png) no-repeat top right; }
div.requiredField { float: left; }

/* Notices that are inside a TB */
#TB_window div.notice { top: 25px; left: 0px; margin: 0px; padding: 0px 10%; }

/* form labels in Messages, for example */
label, .label { color: #A4D1DD; }
td .label, p .label { font-size: .9em; }

/* Used for pagination (e.g. Inbox) */
.pagination { padding: 2px; }
.pagination ul { margin: 0; padding: 0; text-align: left; }
.pagination li { list-style-type: none; display: inline; margin: 0px 1px; border: 1px solid #B3B3B3; padding: 1px 5px; background-color: #60A05D; color:#d3e8ef;}
.pagination a, .pagination a:visited { text-decoration: none; color: #d3e8ef; font-weight: normal; }
.pagination li:hover, .pagination a:active { background-color: #1A5920; }
.pagination li.currentpage { font-weight: bold; background-color: #1A5920; color:#d3e8ef; }
.pagination li.disablepage { padding: 0 5px; border: 1px solid #ccc; color: #aaa; }


/***********************************************************************
    BEGIN styles not in example html
************************************************************************/
/* text explaining validation to the user (eg, must contain only digits) */
/* (currently not in the example html) */
span.reqirement { color: #d72; font-size: .8em; }

/* for when validation fails on user input */
/* (currently not in the example html) */
.fieldWithErrors input, .fieldWithErrors select, input.fieldWithErrors, textarea.fieldWithErrors, select.fieldWithErrors { background-color: #fdd; }
.fieldWithErrors span { display: inline; color: #933; font-size: 0.9em; }
td.fieldWithErrors { background-color: #fcc; }

/* displays when there is a system error */
/* (currently not in the example html) */
div.error { margin: 5px 0px; border: #c33 2px solid; padding: 3px; font-size: .9em; }
.error { color: red; }

/* Outlines a radio button & it's label (so you know they're related) */
/* (currently not in the example html) */
.radio_opt { border:1px solid #fff; cursor: pointer; padding:2px; }
.radio_opt:hover { border:1px solid #d3e8ef; background-color:#F6F9F0; }

/* marks an attachment that cannot be downloaded */
/* this will likely only ever show up when signed in as a teacher (not effecting skins) */
/* (currently not in the example html) */
.overflow { color: #eb4; }
tr.overflow { background-color: #fff2cc; color: #000; }
table.hover_glow tr.overflow:hover { background-color: #fea; }

ul.tabmenu { padding: 0px 0px 3px 10px; margin: 0px; border: #ccc solid; border-width: 0px 0px 1px; } 
ul.tabmenu li { list-style: none; display: inline; margin: 0px 5px 0px 0px; border-width: 1px; border-color: #ccc; border-style: solid; padding: 3px 10px; background-color: #D4E8EF; cursor: pointer; } 
ul.tabmenu li:hover { background-color: #fff; } 
ul.tabmenu li a { text-decoration: none; color: #666; }
ul.tabmenu li.selected { background-color: #fff; border-bottom: 1px #fff solid; background-image: none;}
ul.tabmenu li.selected a { color: #000 !important; }

/* New for 2.2.5 */
.dsc_cur_page {background-color:#D4E8EF; }
.dsc_index_separator {border-bottom: 2px solid #A4D1DD; }
.dsc_index_unread {font-weight:bold;}
.dsc_option_unread {color:#798; }

.clickbl_menu {cursor:pointer;}
.clickbl_menu:hover, .selected_menu {background-color:#ffc;}

.expand_bar {cursor: pointer; border:1px solid #624E46; background-color:#624E46; overflow:hidden; width:10px;}
.expand_bar:hover {background-color:#A7C2A1; border-color: #A7C2A1;}

.attach_thumbs { text-align:center; font-size: 0.9em; }
.attach_thumbs .thumbimg { margin-right: 10px; }

a.selected {border-bottom: 3px solid #36A001;}

/* New for 2.7 (Embed the Web) */
.widget_content { width: 98%; border-width: 0px; overflow: hidden; }
.widget_content .widget_iframe { border-width: 0px; }
.widget_content_hidden { height: 0px; border-width: 0px; }
.widget_placeholder { width: 98%; border-width: 0px; background: #ccc; font-size: 1px; }

/* Override the default body styling & center */
body.widget_body { background: transparent; margin:0px; padding:0px; width:100%; font-size:100%; text-align: center; }

/* New for 5.x */

.compose_box {padding: 2px; border: 1px #C8E3BA solid; margin: 2px 0 2px 5px; background-color:#C8E3BA;}

/* Used for the title of a WikiSite */
#wiki_title { color: #fff; border-color: #fff; }

/* Used for the list of current Comments, display at the bottom of a Page */
#page_comments_list { margin-top: 5px; border: 1px solid #624E46; background: #fff; color: #000; }
#page_comments_list > hr { display: none; }
#page_comments_list > span { padding: 5px; background: #624E46; color: #C2A492; }
#page_comments_list .tools { margin: -1px; }
#page_comments_list table.list { margin: 0.5%; width: 99%; }
#page_comments_list table.list td { border: 1px solid #C8E3BA; }
#page_comments_list table.list .comment_head { background: #C8E3BA; }

/* Used for the TBLite for writing Comments */
#TBLite.page_comments_writer { border-color: #1B1312;
  -moz-box-shadow:0 0 15px #C8E3BA; -webkit-box-shadow:0 0 15px #C8E3BA; 
}