/* This css file is currently used as the Classic skin for haiku LMS. Feel free to use it as a starting point for your own skin. Also, look in the "css examples" folder for other css files to help you get started. */

/* general settings */
body { margin: 0px; padding: 10px; font-size: 95%; font-family: arial,helvetica,sans-serif; background: url(images/book.jpg) #203a47 no-repeat top left; position:relative; padding-right: 100px; }

/* container properties */
/* TODO: add 'th' to all skins */
p, td, th, li, pre { font-size: .9em; }
table, td p, th p, li p, li li, td td { font-size: 1em; }
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; }
h2 { font-size: 1.3em; color: #203a47; }
h3 { margin: 5px 5px 5px 0px; color: #000; font-weight: normal !important; font-size: 1.2em; }
h4 { margin: 5px 5px; font-weight: bold; font-size: 0.9em; }

a { color: #703635; text-decoration: none; }
table.list th a { color:#203a47;}
img { border-width: 0px; }

/* wraps the entire content of the body */
#frame { border: solid 1px #999; position:relative; top:5em; left:5em; margin: 0px auto; background: url(images/bluebox.png); }
#frame_top { }
#frame_bottom { }

/* contains class name, login/logout, and tabs */
#header { margin:4px; border:solid 1px #eee; padding: 5px 5px 0px 5px; }

#header h1 { color: #333; font-weight: hidden; font-size: 3em; font-family: Edwardian Script ITC, serif; height: 1em; overflow: hidden; }

#header .toplinks { float: right; padding-bottom: 2px; font-size: 0.85em; margin-bottom: 12px; }
.toplinks a { text-transform: lowercase; color: #FFC983;}

#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 #7181a5 solid; }
div.tabmenu { padding-left: 10px; }
.tabmenu ul { display:inline; margin: 0px; }
.tabmenu ul li { float:left; margin: 0px 5px -1px 0px; border: 1px #eee solid; padding: 3px 10px; list-style: none; background: url(images/tab.jpg) repeat-x top #fff; cursor: pointer; color: #666; font-weight:normal; }
.tabmenu ul li a { text-decoration: none; color: #7181a5; }
.tabmenu ul li.selected { background: #7181a5; border-bottom-color: #7181a5; font-weight: bolder; }
.tabmenu ul li.selected a { color: #203a47 !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; color: #333333;}

/* contains copyright information */
#footer { padding: 5px; background:url(images/logo_h_small.gif) no-repeat 0px 2px; margin-top: 6em; text-align:right; height: 33px; color: #6E7F9C;}
#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, #col2 { padding: 1px 2px; }
#col1 { position: absolute; left: 5px; width: 160px; background:url(images/nav_bg.jpg) #102835 no-repeat top left; border:solid 1px #eee;}
#col2 { margin-left: 175px; margin-right: 5px; border-width: 0px; }
#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: #203a47; margin: 5px 5px; font-size: 1.4em; font-weight: bold; }

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

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

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

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

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

/* used in Pages to display the tree of pages  */
ul.pages_tree { margin: 0px; padding: 0px; clear: both; }
ul.pages_tree li { position: relative; margin: 0px 0px 0px 4px; padding: 2px 0px; list-style: none; font-size: 0.9em; cursor: pointer; }
ul.pages_tree li a { text-decoration: none; color:#7181a5;}
ul.pages_tree ul { margin: 0px; padding: 0px; }
ul.pages_tree ul li { margin: 0px 0px 0px 10px; font-size: 1em; border-width: 0px; }
ul.pages_tree div { margin-right: -2px; padding-left: 12px;  overflow: hidden }
ul.pages_tree div:hover { background-color: #f0f0f0; }
ul.pages_tree div.selected { background-color: #ddd; border-width: 1px 0px 1px 1px; border-color: #ccc; border-style: solid; }

/* 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; background-image: url(images/bullet.gif); background-repeat: no-repeat; background-position: 0px 0px; padding: 8px 5px; font-size: 1px; cursor: pointer; }
span.bullet_closed { position: absolute; top: 0px; left: 2px; background-image: url(images/bullet_closed.gif); background-repeat: no-repeat; background-position: 0px 5px; padding: 8px 5px; font-size: 1px; cursor: pointer; }
span.bullet_open { position: absolute; top: 0px; left: 2px; background-image: url(images/bullet_open.gif); background-repeat: no-repeat; background-position: 1px 7px; padding: 8px 5px; font-size: 1px; cursor: pointer; }

tr span.bullet, tr span.bullet_closed, tr span.bullet_open { left: 1px; top:-2px; }

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

/* used in Pages, contains the title of a content block */
.head { background-color: #203a47; color: #7181a5; font-weight: bold; padding: 5px; border-width: 0px; overflow: hidden; }

/* 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 Connect tab lists and Roster (& Connect Blocks) */
table.list {border-collapse: collapse;}
table.list th { border-top: 1px #7181a5 solid; padding: 5px; background-color: #c3c9d8; color: #203a47; }
/* TODO: add {padding: 3px;} to 'table.list td' & 'table.list th' in all skins */
table.list td, table.list th { border-bottom: 1px #AFB6CB solid; padding: 3px; text-align: left; }
table.hover_glow tr:hover { background-color: #d28651; }
table.hover_glow tr.noglow:hover { background-color: #fff; }
.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: #203a47; }
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: #844101; font-size:.9em; }

/* 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 styling for Calendar
************************************************************************/

/* used in Calendar & the Mini Calendar Block */
table.cldr { border-top: 1px #CCCCCC solid; border-left: 1px #CCCCCC solid; margin-bottom:8px;}
table.cldr th { font-size: .9em; background-color: #F6F9F0;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 #CCCCCC solid; border-right: 1px #CCCCCC 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 td.first30 { border-bottom: 1px #dec dotted; }
table.cldr td.colhour { background-color: #e9efe0; }
table.cldr td.grey { background-color: #afb6cb; }
table.cldr td.grey a {color:#999;}
.cday { overflow: hidden; height: 6em; }
.cldln { overflow: hidden; height: 1.2em; }
.cal_mo .cldln { margin-left: 27px; }
.cldln b { font-size: 0.8em; }
.cldln a { text-decoration: none; }
.event a { color: #6b180f; } 
.assignment a { color: #203a47; }

/* 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); }

/* used in the Mini Calendar Block */
table.cldr th { font-size: .9em; background: #203a47; padding:4px; color: #7181a5; }
table.cldr td.hilite { background-color: #fdd; }
table.cldr td.hilite a { color: #844101; }
table.cldr td.today { background-color: #d28651; }
.cms_box_cldr table { font-size: .9em; }

/* used in agenda, calendar */
/* decreases the font size */
.small { font-size: .9em; }

/* drop down menu */
.dmenu { position: absolute; border: 1px #ccc solid; border-bottom-color: #aaa; border-right-color: #aaa; background-color: #eee; cursor: pointer; z-index: 5; }
.dmenu div { padding: 3px; font-size: 1em; font-weight: normal; color: #203a47; }
.dmenu div.hover { background-color: #d28651; } 
.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; }

/***********************************************************************
    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: #7181a5; 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; }


/***********************************************************************
    BEGIN generic styling
************************************************************************/

/* e.g. used in Connect>Dropbox>(assignment) for Assignment details */
fieldset {padding: 5px;border:1px solid #c3c9d8;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 3px; }
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; border: 1px #ccc solid; padding: 5px; z-index: 150; filter:alpha(opacity=85); -moz-opacity: 0.85; opacity: 0.85; }

/* countains action buttons */
/* used in any TB "popup" (e.g. the list of events for a given day) */
.action { background-color: #203A47; padding: 5px; }

/* used in Connect tab (e.g. Inbox, Dropbox) */
.actrow, .tools { border: 1px #c3c9d8 solid; padding: 5px; background-color: #afb6cb; }
.actrow label {font-size: 0.8em;}

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

/* small button (e.g. Calendar > Today button) */
.sbutton { padding: 1px 3px 1px 2px; margin-right: 5px; border: 1px #ccc solid; border-bottom-color: #aaa; border-right-color: #aaa; background: #c3c9d8; text-decoration: none; font-size: .8em; font-weight: normal; color: #203a47; cursor: pointer; white-space:nowrap; }
.sbutton:hover { background-color: #afb6cb;}
.sbutton img { background: #eee; }
li .sbutton { font-size: 1em; }
#col2 .bprint { margin: 6px;}

/* style for dropdown menu button, NOTE: this has to be defined before sbutton */
.dmbutton { background-image: url(/images/icons/bullet_arrow_down.png); background-repeat: no-repeat; background-position: right 2px; float: left; padding:4px 18px 1px 5px; }

/* used mainly for iconic buttons (e.g. Calendar > Month arrow buttons) */
.ibutton { border: 1px #333333 solid; border-bottom-color: #aaa; border-right-color: #aaa; padding: 1px; background-color: #c3c9d8; cursor:pointer;}

/* Big Button, used for MD dialog boxes (in case of errors or for confirmations) */
.bbutton { margin: 5px; padding: 5px 10px; border: 1px #ccc solid; border-bottom-color: #aaa; border-right-color: #aaa; background-color: #c3c9d8; color: #203a47; font-size: 1em; font-weight: bold; cursor: pointer; }
.bbutton a { text-decoration: none; color: #966; }
.bbutton:hover, .bbutton:focus { border-color: #c3c9d8; background-color: #afb6cb; }

/* Toggle button */
/* (currently not in the example html) */
.stoggle_on { border: 1px #aaa solid; border-bottom-color: #ccc; border-right-color: #ccc; background-color: #afb6cb; }
.stoggle_off { background-color: #c3c9d8; }

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

/* used for error/confirmation dialogs, the overlay will completely cover the screen */
#MD_box { background-color: #203a47; border: 2px #777 solid; padding: 10px; }
#MD_box input.bbutton { display: block; margin: 10px auto; width: 100%; }
#MD_overlay { background-color: #fff; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; }
.md_text { color: #7181a5; margin: 4px 4px; font-size: 1.1em; }

/* displays unobtrusive notices or errors to the user */
div.notice { position: absolute; margin: 0px 50px 0px 0px; padding: 2px 0px; font-size: .8em; text-align: center; width:100%;}
div.notice span { position: relative; top: -3px; border: 1px #fff solid; padding: 4px 12px 4px 8px; background-color: #c3c9d8; }
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; }

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


/***********************************************************************
    BEGIN styles not in example html
************************************************************************/
/* marks an input as required */
/* (currently not in the example html) */
div.requiredField, span.requiredField { padding-right: 18px !important; background:  url(/images/icons/asterisk_orange_small.png) no-repeat top right; }
div.requiredField { float: left; }
/* 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 */
div.error { margin: 5px 0px; border: #c33 2px solid; padding: 3px; font-size: .9em; }
.error { color: red; }

/* like error, above, but displayed within a TB "popup" */
/* (currently not in the example html) */
div.pmsg {padding: 2px; color: red; font-weight: bold; font-size: 0.8em;}

/* Just-In-Time Help, see the www.myhaikuclass.com login page for an example */
/* (currently not in the example html) */
#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; width: 200px; }
#help_jit_arrow_left, #help_jit_arrow_right { position: absolute; z-index: 10; }
img.help_jit { cursor: default; }
img.help_jit_empty { background-color: #ff0; }

/* Used for pagination */
/* (currently not in the example html) */
.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: #c3c9d8; }
.pagination a, .pagination a:visited { text-decoration: none; color: #203a47; font-weight: normal; }
.pagination li:hover, .pagination a:active { background-color: #afb6cb; }
.pagination li.currentpage { color: #203a47; font-weight: bold; background-color: #fff7df; }
.pagination li.disablepage { padding: 0 5px; border: 1px solid #ccc; color: #aaa; }

/* Used for thickboxes */
#TB_window { background: #afb6cb; color:#333333; border-color: #203a47; }
#TB_window h3 { color: #203a47; }
.tb_title_bar .tb_title {color: #7181a5; background: #203a47; } 
.tb_title_bar{ background-color: #203a47; border-bottom: 1px #203a47 solid;}

/**********************************
TODO: add to skins 
TODO: move .left, .right, etc to eclass.css & remove from skins
**********************************/
/* used when there is nothing available */
#col2 .empty_column { border-top: 1px #ccc solid; }
.empty_column { border-width: 0px; padding: 20px 5px 20px 5px; background-color: #eee; color: #999; text-align: center; font-size: .85em; }

/* vlist should be in the skins */
.vlist div { border-bottom: 1px #ccc 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 #C3C9D8 solid; padding: 5px; }
table.vlist td div { border-width: 0px; padding: 0px; }

/* used for the sub-tabs in the Connect tab */
ul.subtabmenu { margin: -5px 0px 10px; padding: 5px; border-bottom: 1px solid #eee; 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: #203a47; border-width: 0px; }

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

.unread { font-weight: bold; }
.bulleted { position: relative; padding-left: 15px; }

/* add white-space:nowrap; to sbutton */
.sbselected { background-color: #fff7df; }

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 the in-lms login screen */
.admlogin { margin:0px auto; width: 30em; border:6px solid #afb6cb; padding: 10px; }
.admlogin form { margin-top: 1em; }
.admlogin table { width:100%; }
.admlogin table td.label { width: 9em; text-align:right;}

/* used for Messages & Discussions to signify a quotation */
.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; }

/* used for Manage Attachments */
.overflow { color: #eb4; }
tr.overflow { background-color: #fff2cc; color: #000; }
table.hover_glow tr.overflow:hover { background-color: #fea; }

/* used for Discussions, Dropbox & Inbox to display & new items */
.count { font-size: .85em; font-weight: bold; color: #203a47; }
a.count:hover { color: #ffbf94; }

/***********************************************************************
    BEGIN Announcements
************************************************************************/
table.annc td { vertical-align: bottom; }

/***********************************************************************
    BEGIN Messages
************************************************************************/
span.recipient { border: 1px solid #ddd; }
.recipient { float: left; margin: .2em .5em 0px 0px; background-color: #fff; }
.recipient span { white-space: nowrap; display: block; padding: 3px 0px 2px 4px; }

table.actrow { padding:0px; }
table.actrow td { padding:3px; }

.quick_search { white-space:nowrap; width: 10em; }
.quick_search .ibutton { padding: 2px; margin-left: 5px;}

hr { border-width:0px; border-top: 1px solid #6E7F9C; }

.view_message { padding: 10px; background-color: #fff; }

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

.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: #203a47; }
.message_list div.vlist div a:hover { color: #fdd5b8; }

.drafts { background-color:#d28651; padding: 2px 0px 0px; margin: 0px 10px 10px; border: 1px #eee 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 a { color: #203a47; }
.drafts div.vlist a:hover { color: #FDD5B8; }

.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/icons/attach.png); }
.si_late { background-image: url(/images/icons/clock_red.png); }
.si_sticky { background: url(/images/sticky.gif) top left no-repeat; }

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; }

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

/***********************************************************************
    BEGIN Discussion
************************************************************************/
#tb_col1.discussion_menu { background-image:none; border-width: 0px; }
.post_row {padding: 4px 0px 0px;}
.post_head {background-color: #C3C9D8; border-right: 1px solid #c3c9d8;}
.post_action {background-color: #afb6cb; border: 1px solid #c3c9d8;}

.post_body {border-style: solid; border-color: #c3c9d8; border-width: 1px 1px 1px 0; background-color: #fff;}
.post_body a { color: #D28651; text-decoration: underline;}
.post_body_hidden {background-color: #eee; color: #999; }
.post_star {float: right;cursor: pointer;}
.post_unread {background-color: #dfa980; color:#fff; padding: 2px; margin: 2px 0;cursor:pointer;}
.post_unread a {color:#FDD5B8;}
.post_draft {cursor:pointer; padding:4px;}
.post_message {background-color:#fec; border:1px solid #E07D20; padding:4px; font-size:.9em;} 
.stitle {color: #203a47; font-weight: bold; font-size:1em;}


/*** User Selection ***/
#user_selection {width: 12em; position:absolute; display:none; height: 16em; overflow:auto; background-color: #eee; border: 1px solid #203a47; }
#user_selection .user_sel {padding: 1px; font-size: 0.9em; cursor: pointer;}
#user_selection_title {padding: 2px; font-size: 0.9em; color: #203A47; border-bottom: 1px solid #798;} 
a.usel_user {margin: 2px; padding: 2px; display:block; color: #203A47; font-size:0.8em;} 
a.usel_user:hover, a.usel_user:focus {background-color: #d28651;} 

/***********************************************************************
    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
************************************************************************/
/* makes a link not a link color */
a.nolink, a .nolink {color:#203a47;}

.note {padding: 5px 5px 5px 25px; border: 1px solid #203a47; background: url(/images/icons/error.png) no-repeat 5px 5px #203a47; color: #7181a5; }
.info {padding: 5px 5px 5px 25px; border: 1px solid #203a47; background: url(/images/icons/information.png) no-repeat 5px 5px #F6F9F0; color: #798; }
.post_note { background-image: url(/images/icons/comment.png); }
/* used for late Dropbox Messages */
.late_note { border-color: #ccc; background-image: url(/images/icons/clock_red.png); background-color: #fee; color: #000; }

/* hilited button */
.hibutton {background-color: #d28651; font-weight: bold; }

/* floating bar on bottom of thickbox */
#TB_actionBar {background-color:#203a47;}

/* 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; }

/* New for 2.2.5 */
.dsc_cur_page {background:url(images/bluebox.png); }
.dsc_index_separator {border-bottom: 2px solid #CDC2C3; }
.dsc_index_unread {font-weight:bold;}
.dsc_option_unread {color:#798; }
.dsc_cur_page .disabled {color:#fff;}

.clickbl_menu {cursor:pointer;}
.clickbl_menu .detail {color: #ddd;}
.clickbl_menu:hover .detail, #tb_dsc_outline .selected_menu .detail {color: #999;}
.clickbl_menu:hover, #tb_dsc_outline .selected_menu {background: #f0f0f0;}
#tb_paginated_posts .selected_menu {border: 3px solid #DFA980; padding: 2px 1px;}

.expand_bar {cursor: pointer; border:1px solid #ccc; background-color:#c3c9d8; overflow:hidden; width:10px;}
.expand_bar:hover {background-color:#afb6cb;}

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

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

/* for official announcements from haiku */
body .official_announcement { margin-right: -8em; padding-right: 8em; }

/* 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 #c3c9d8 solid; margin: 2px 0 2px 5px; background-color:#C8CFE2;}

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

#page_comments_list {background: #C8CFE2;}
#page_comments_list .static_bullets { margin-left: 10px;}
#TBLite {background:#C8CFE2}
#footer a {color: #FFC983;}