/* This css file is provides only the most basic of basic layouts for a skin. Feel free to use it as a starting point for your own skin. */

/* document body settings */
body { margin: 0; padding: 0px; font-size: 90%; font-family: arial,helvetica,sans-serif; }

/* container properties */
/* TODO: add 'th' to all skins */
textarea { font-family: sans-serif; font-size: .95em; }

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

a { color: #33c; text-decoration: none; }
img { border: 0px; }

/* wraps the entire content of the body */
#frame { padding-bottom: 10px; margin: 0px; background: url(images/hands_bg.gif) #fff no-repeat 5px 0px; }

#frame_top { background: url(images/stripes_1.gif) no-repeat top right; }

/* contains class name, login/logout, and tabs */
#header { margin:4px; padding: 5px 5px 0px 25px; }
#header .links { float: right; padding:4px 0px; text-decoration: none; clear: both; }

#cms_page_eclass_name { padding-left: 25px; }
#header h1 { margin: 8px; padding: 30px 0px 0px 3px; height: 1.2em; overflow: hidden; }
#header h1 a { color: #000; }
#header .toplinks { float: right; margin-bottom:12px; padding-bottom: 2px; background-color: #fff; color: #c93; }
#header .toplinks a { text-transform: lowercase; color: #ea2; }

/* the primary tab look (e.g. at the top of every page: Pages, Calendar, etc.) */
div.tabmenu_border {  }
div.tabmenu { padding-left: 10px; }
.tabmenu ul { display:inline; margin: 0px; }
.tabmenu ul li { float:left; margin: 0px 5px 0px 0px; padding: 8px 12px 5px 8px; list-style: none; background: url(images/tabmenu_bg.gif) no-repeat top right #fff; cursor: pointer; color: #e00; font-weight:normal; }
.tabmenu ul li a { text-decoration: none; color: #e00; }
.tabmenu ul li.selected {  }

/* 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 5px 0 6px; padding: 3px 0 3px 12px; background: transparent url(/images/icons/bullet_arrow_down.png) center no-repeat; border-left:1px solid #e00;}
.tabmenu ul li.tabmenu_dropdown span:hover {background-color:#fcc; }

/* contains the main page content */
#content { padding-bottom: 10px; clear: both; }

/* contains copyright information */
#footer { padding: 0px 5px; text-align:right; height: 45px;}
#footer a { color: #ea2; }
#footer_home { display: block; background:url(images/logo_small.gif) no-repeat 0px 0px; overflow: hidden; height:0px ; padding-bottom: 45px; width: 220px; 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: 10px; width: 160px; }
#col2 { margin-left: 175px; margin-right: 5px; border-width: 0px; }
#col1 p { margin-left: 12px; }
h2 { color: #393; }
#col2 h3 { font-size: 14px; font-weight: bold !important; margin-bottom: 0px; 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 to control column layouts. First # is layout, second # is column number */ 
/* One Column */
#col_1_1 { width: 100%; }

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

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


/* 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: 48%; margin-right: 1%; }
#col_5_2 { float: right; width: 48%; }
#widecol {padding: 0px 4px;}

/* used in Pages to display the tree of pages  */
ul.pages_tree { margin: 0px; padding: 1.5em 0px; clear: both; background: url(images/vertical_y.gif) repeat-y top right; }
ul.pages_tree li { position: relative; margin: 0px 10px 0px 10px; padding: 2px 0px; list-style: none; cursor: pointer; }
ul.pages_tree li a { margin: 0px; color: #ea2; }
ul.pages_tree li .selected a { color: #393; }
ul.pages_tree ul { margin: 0px; padding: 0px; }
ul.pages_tree ul li { position: relative; padding: 0px; margin: 2px 0px 0px 13px; font-size: 1em; border-width: 0px 0px 0px; }

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

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

.selected span.bullet { background-image: url(images/bullet_selected.gif); }
.selected span.bullet_closed { background-image: url(images/bullet_closed_selected.gif); }
.selected span.bullet_open { background-image: url(images/bullet_open_selected.gif); }

.pagetitle { margin-left: .5em; font-size: 1.5em; font-weight: bold; color: #393; }

/* used in Pages, contains the body of a content block */
.box { margin: 6px 0px 6px 6px; width: 97%; overflow: hidden; }
.box p { margin-left: 0px !important; margin-top: 0px; }
.box label, .box td, .box th, .box li, .box pre { font-size: 1em; }
/* TODO: Include in new skins 
used in link, file, audio, video & image content blocks */
.box_table { font-size: 1.05em; }
.box_table td { font-size: 1em; white-space: nowrap; }

.cms_box { margin-bottom: 5px; padding: 0px 0px 0px 10px; background: url(images/left_top_l_b.gif) no-repeat top left; }
.cms_box .head { margin: 0px 0px 0px -3px; padding: 10px 5px; background: url(images/left_top_t_b.gif) no-repeat top left; font-size: 1.1em; font-weight: bold; color: #33c; }

/* 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 { color: #3333cc; }
/* TODO: add {padding: 3px;} to 'table.list td' & 'table.list th' in all skins */
table.list td, table.list th { padding-bottom: 5px; background: url(images/thin_horizontal_b.gif) repeat-x bottom left; text-align: left; }
table.hover_glow tr:hover { background-color: #f0ffdf; }
table.hover_glow tr.noglow:hover { background-color: #fff; }
.cms_box_annc .label { white-space: nowrap; }

/* used in the Upcoming Events Block */
.agenda_date { color: #33c; }
div.agenda_date { padding-top: .5em; background: url(images/thin_horizontal_b.gif) repeat-x bottom left; }
.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; }
table.list th .detail { color: #f00;}

/* 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
************************************************************************/
#calcontent h2 { position: relative; top: .5em; margin-right: 50%; }

/* used in Calendar & the Mini Calendar Block */
table.cldr { margin-bottom:8px; background: url(images/thin_horizontal_b.gif) repeat-x bottom left; }
table.cldr tbody { background: url(images/thin_vertical_b.gif) repeat-y top right; }
table.cldr tr { background: url(images/thin_horizontal_b.gif) repeat-x top left; }
table.cldr td { background: url(images/thin_vertical_b.gif) repeat-y top left; overflow: hidden; width:14%; padding: 4px 2px 2px 4px; }
.cms_box_cldr table.cldr th { background: url(images/thin_horizontal_b.gif) #fff repeat-x top left; }
table.cldr td p, table.cldr td td { font-size: .8em; }
table.cldr .day_header { font-size: .8em; color: #33c; font-weight: bold; text-align: right; }
table.cldr .day_header a { color: #33c; text-decoration: none; }
table.cldr td.first30 { border-bottom: 1px #dec dotted; }
table.cldr td.grey .cday { background-color: #ddf; }
table.cldr td.grey a { color: #99e; }
table.cldr td.today, table.cldr td.today a { font-weight: bold; }
.cms_box_cldr table.cldr td.today, .cms_box_cldr table.cldr td.today a  { color: #e90; }
table.cldr td.today .cday { background-color: #fea; }
table.cldr td.hilite a { background-color: #fdd; }
.cday { overflow: hidden; height: 104px; }
.cldln { overflow: hidden; height: 18px; }
.cal_mo .cldln { margin-left: 25px; }
.cldln b { font-size: 0.8em; }
.cldln a { text-decoration: none; }
.event a { color: #393; } 
.assignment a { color: #e00; }

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

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

/* the control that calls a drop down menu */
/* used in the Calendar > Jump To menu  */
.dmbutton { float: left; padding:4px 18px 1px 5px; }

/* drop down menu */
.dmenu {position: absolute; background-color: #fff; border: 1px #e00 solid; font-size: .9em; cursor: pointer; z-index:5; }
.dmenu div {padding: 3px; font-size: 1em; font-weight: normal; color: #e00;}
.dmenu div.hover {background-color: #fcc; color: #e00;} 
.dmenu hr { background: none; padding: 0px; height:0px; margin: 0px; border: 0px #e00 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 for the Announcements Tab */
ul.vmenu { margin: 0px; padding: 1.5em 0px; clear: both; background: url(images/vertical_y.gif) repeat-y top right; }
ul.vmenu li { position: relative; margin: 0px; padding: 2px 0px 2px 15px; background: url(images/bullet.gif) no-repeat 0px .3em; list-style: none; cursor: pointer; }
ul.vmenu li.selected { background-image: url(images/bullet_selected.gif); }
ul.vmenu li a { color: #ea2; }
ul.vmenu li.selected a { color: #393; }
ul.vmenu li li a { margin:0px; }
ul.vmenu ul { margin: 0px; padding: 0px; }
ul.vmenu ul li { padding: 0px; margin: 2px 0px 0px 13px; font-size: 1em; border-width: 0px 0px 0px; }
.cms_box_annc .label { font-size:.9em; white-space: nowrap; }

/***********************************************************************
    BEGIN styling for TB
************************************************************************/

#TB_overlay {}
#TB_overlay {	background: url(images/splatter_bg_b.gif) #ddf  repeat top left; filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
#TB_window { border-width: 0px; background: url(images/thin_horizontal_b.gif) #fff repeat-x top left; }
.tb_title_bar { border-width: 0px; background: url(images/thin_horizontal_b.gif) transparent repeat-x bottom left; }
.tb_title_bar .tb_title { color: #33c; font-size; font-size: 1.2em; }
#TB_actionBar { padding-top: 8px; background: url(images/thin_horizontal_b.gif) #fff repeat-x top left; }
/***********************************************************************
    BEGIN generic styling
************************************************************************/
/* TODO: Include in new skins 
e.g. used in Connect>Dropbox>(assignment) for Assignment details */
fieldset { background:transparent url(images/thin_horizontal_b.gif) repeat-x scroll left top; padding: 5px; margin:3px 0; border-width: 0px; }
fieldset legend { color: #798; background-color: #fff; }
fieldset.collapsible .fieldset_wrapper { margin:0px -5px; padding-bottom: 5px; background:transparent url(images/thin_horizontal_b.gif) repeat-x scroll left bottom; overflow:auto; }
fieldset.collapsible legend a { padding-left:18px; background: url(images/bullet_open.gif) no-repeat 1px -2px; cursor: pointer; }
fieldset.collapsed { height:1em; }
fieldset.collapsed legend a { background: url(images/bullet_closed.gif) no-repeat 0px 2px; }
fieldset.collapsed .fieldset_wrapper { display:none; }
/* TODO: marcos asked me to add this. i'm not sure where to add it */
div.requiredField, span.requiredField { padding-right: 18px !important; background: url(/images/icons/asterisk_orange_small.png) no-repeat top right; }

/* 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 #e00 solid; padding: 5px; z-index:150; color: #e00; }

.label { color: #99e; }

/* TODO: add to all skins 
used in Connect tab (e.g. Inbox, Dropbox) */
.actrow, .tools { padding: 5px; background-color: #ddf; }
.actrow label {font-size: 0.8em;}

/* 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-width: 1px; border-color: #e00; border-style: solid; padding: 2px 20px 2px 20px; background-color: #fff; text-decoration: none; cursor: pointer; color: #e00; font-weight: bold; }
.button:hover { background-color: #fcc; }

/* small button (e.g. Calendar > Today button) */
.sbutton { font-size: .9em; padding: 1px 3px 1px 2px; margin-right: 5px; border: 1px #e00 solid; background-color: #fff; text-decoration: none; font-weight: normal; color: #e00; cursor: pointer; white-space:nowrap; }
.sbutton:hover {background-color: #fcc;}

/* TODO: Include in all skins 
style for dropdown menu button, NOTE: this has to be defined before sbutton */
.dmbutton { background-image: url(images/dmenu_red.gif); background-repeat: no-repeat; background-position: right 4px; float: left; padding:4px 18px 1px 5px; }

/* used mainly for iconic buttons (e.g. Calendar > Month arrow buttons) */
.ibutton {border: 1px #e00 solid; padding: 1px; background-color: #fff; cursor:pointer;}
.ibutton:hover {background-color: #fcc;}

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

/* Toggle button */
/* (currently not in the example html) */
.stoggle_on { border: 1px #e00 solid; background-color: #fcc; }
.stoggle_off { background-color: #fff; }

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

/* displays unobtrusive notices or errors to the user */
div.notice { position: absolute; left: 25%; margin: 0px 50px 0px 0px; padding: 7px 0px; font-size: .9em; text-align: center; }
div.notice span { position: relative; top: -7px; padding: 4px 12px 7px 8px; background: #ffefc2 url(images/ajax_msg.gif) repeat-x bottom left; }
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; }

/* used for error/confirmation dialogs, the overlay will completely cover the screen */
#MD_box { background: url(images/thin_horizontal_r.gif) #fff repeat-x top left; padding: 10px; }
#MD_box input.bbutton { display: block; margin: 10px auto; width: 100%; }
#MD_overlay { background: #feb url(images/splatter_bg_y.gif) repeat top left; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; }
.md_text { color: #000; margin: 4px 4px; font-size: 1.1em; }

/* Used for pagination */
.pagination { padding: 2px; font-size: 1em; }
.pagination ul { margin: 0px; padding: 0px; text-align: left; }
.pagination li { list-style-type: none; display: inline; margin: 0px 1px; border: 1px solid #e00; padding: 1px 5px; background-color: #fff; }
.pagination a, .pagination a:visited { text-decoration: none; color: #000; font-weight: normal; }
.pagination li:hover, .pagination a:active { background-color: #fcc; }
.pagination li.currentpage { font-weight: bold; background-color: #fcc; }
.pagination div.right { font-size: 1.1em;}

/**********************************
TODO: add to skins 
TODO: move .left, .right, etc to eclass.css & remove from skins
**********************************/
/* used when there is nothing available */
#col2 .empty_column { }
.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 { background:transparent url(images/thin_horizontal_b.gif) repeat-x scroll left bottom; padding: 5px; }
.vlist div div { background:transparent; 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; }

/* used for the sub-tabs in the Connect tab */
ul.subtabmenu { margin: -5px 0px 10px; padding: 6px 6px 6px 6em; }
ul.subtabmenu li { list-style: none; display: inline; background:transparent url(images/vertical_r.gif) repeat-y scroll right top; padding: 1px 20px; }
ul.subtabmenu li a.selected { font-weight: bold; color: #3333cc; }

/* 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 #339933; 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: #000; }
a.count:hover { color: #3333cc; }

/***********************************************************************
    BEGIN Announcements
************************************************************************/
.cms_box_annc table.list td, table.list th { padding-top: 5px; }
table.annc td { vertical-align: bottom; }

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

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; padding: 5px; background: url(images/thin_horizontal_b.gif) repeat-x bottom left; }

/***********************************************************************
    BEGIN Dropbox
************************************************************************/
#dropbox_table { padding: 5px; }
#dropbox_table td { padding: 10px; }
#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 .label { font-size: .9em; }
.message_list div.vlist div a { color: #000; }
.message_list div.vlist div a:hover { color: #3333cc; }

.drafts { background-color:#ffcccc; padding: 2px 0px 0px; margin: 0px 10px 10px; border: 1px #cdb solid; border-top-width: 0px; }
.drafts div.vlist { margin: 0px; padding: 0.2em 5px 0.5em 20px; font-weight: normal; }
.drafts div.vlist a { color: #000; }
.drafts div.vlist a:hover { color: #3333cc; }

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

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

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

/***********************************************************************
    BEGIN Discussion
************************************************************************/
#tb_col1.discussion_menu { background-image:none; border-width: 0px; }
.post_row, #tb_preview_block tr { background: url(images/left_top_t_b.gif) #fff no-repeat top left; }
.post_head { margin-bottom: 5px; padding: 10px 0px 0px 10px; background: url(images/left_top_l_b.gif) no-repeat top left; }
.post_action {background-color: #fff; }
.post_body {background-color: #fff; }
.post_body_hidden {background-color: #eee; color: #999; }
.post_star {float: right;cursor: pointer;}
.post_unread {background-color: #9999ee; color:#fff; padding: 2px; margin: 2px 0;cursor:pointer;}
.post_unread a {color:#ffcccc;}
.post_draft {cursor:pointer; padding:4px;}
.post_message {background-color:#fec; border:1px solid #E07D20; padding:4px; font-size:.9em;} 
.stitle { padding-top: .5em; color: #393; font-weight: bold; font-size: 1.2em;}


/*** User Selection ***/
#user_selection {width: 12em; position:absolute; display:none; height: 16em; overflow:auto; background-color: #fff; border: 1px solid #cdb; }
#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: #000; font-size:0.8em;} 
a.usel_user:hover, a.usel_user:focus {background-color: #798; color:#fff;} 

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

.whats_new a { color: #e00; }
.whats_new table a { color: #33c; }

.note {padding: 5px 5px 5px 25px; background: url(images/thin_horizontal_b.gif) transparent repeat-x bottom left; color: #3333cc; font-weight: bold; }
.info {padding: 5px 5px 5px 25px; border: 1px solid #cdb; 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: #e00; color: #fff; }
.hibutton:hover {background-color: #393;}

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

#TBLite { background: #ea2;}

/* New for 2.2.5 */
#tb_dsc_outline { font-size: 1.1em; }

.dsc_cur_page {background-color:#fcc; }
.dsc_index_separator {border-bottom: 1px solid #e00; }
.dsc_index_unread {font-weight:bold;}
.dsc_option_unread {color:#798; }

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

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

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

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

/* for official announcements from haiku */
body .official_announcement { margin: 0px; }

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

/* Used for the list of current Comments, display at the bottom of a Page */
#page_comments_list { margin-top:20px; padding-left: 10px; background: url(images/thin_vertical_b.gif) repeat-y top left #fff; }
#page_comments_list > hr { position: relative; top: -15px; margin-bottom: -8px; }

/* Used for the TBLite for writing Comments */
#TBLite.page_comments_writer { background: #fff; }

#TBLite .tb_title_bar { margin: -10px -5px 0; padding-bottom: 5px; }
#TBLite .tb_title_bar a { padding-top: 5px; }