/* tool-base.css  - base values - focus on positioning, margins, paddings 
- all skins in a given instalation then can participate in these definitions 
- and still style things differently in tool.css*/
/*first pass at a printable sheet - essentially omitting from the print all controls,
and reformatting info for the print media.
If your institution is somehow heavy in Internet Explorer Win 5.5 users this will merit
testing as this browser in some configurations will sometimes apply these definitions to the screen */
@media print  {
   body {
	font-size: 9pt !important;
	margin: 0 !important;
	padding: 0 !important;
}

	h3, h4, h5, h6{
	width: 50%;
}

	.navIntraTool,.navIntraToolLink, .itemAction, .act,.listNav, .viewNav, .navPanel, .screenOnly {
	display: none;
}

	a:link, a:visited{
	text-decoration: underline !important;
}

	table{
	font-size: inherit !important;
}

	.listHier th {
	background: #fff !important;
	font-weight: bold !important;
	border-bottom: 1px dashed #555;
}

	.portletBody {
	padding: 0 !important;
}

}
/* SECTION 1 - STANDARD COMPONENTS*/
body{
	padding: 0;
	margin: 0;
}

hr{
	height: 0;
}

h3,h4,h5, h6{
	padding: .2em 0;
}

a img{
	border: 0;
}

fieldset{
	border: none;
	margin-top: 1em;
	padding: 0;
}

legend{
	font-weight: bold;
	color: #000;
	font-size: 100%;
	margin-left: 0;
	padding-left: 0;
}

iframe{
	margin-top: 2px;
}

table{
	font-size: 1em;
}
code {
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:1em;
}

/* SECTION 2 - LAYOUT*/
/*only child of body (example: any tool)*/
.portletBody{
	padding: 1px 1px 1em 1px;
	border-width: 0px;
	border-color: #fff;
	border-style: solid;
}
.portletMainWrap > .portletBody {
    word-wrap:break-word
}
.portletMainWrap > .portletBody img {
    max-width: 100%;
    height: auto !important;
}
.helpBody {
	padding: 0 1em 1em 1em
	} 


/*for web content - 2 states of the body > div that used instead of div.portletBody in web content), with toolbar, without*/
/*see  a course site web contentn tool  - as instructor and as student - ends with a IE hack needed to make the make the bottom scrolbar (when present) behave.*/
/*the margin/padding adjustments for both are to avoid https://bugzilla.mozilla.org/show_bug.cgi?id=361768 they essentially tuck the iframe borders "underneath" the outside of the containing block*/
.wcwmenu{
	padding: .1em 0;
	margin: -.2em 0;
}
.wcwomenu{
	padding: 0;
	margin: -.1em 0 -1em 0;
}

* html #wciframe{
	margin-bottom:1em
}

/* SECTION 3 - TABULAR DATA LAYOUTS*/
/*itemSummary: table for displaying the details of an item - layout is th-td, th-td*/
/*see an announcement*/
.itemSummary, .itemSummaryLite{
	margin: .5em 0;
}

/*format the th - since jsf cannot do <th> vertically in a column,
 certain tds are classed (header) in jsf based tools to render the same as the th*/
.itemSummary th, .itemSummary td.header, .itemSummaryLite td.header{
	font-weight: bold;
	color: #555;
	white-space: nowrap;
	vertical-align: top;
	text-align: left;
	padding: .3em 1em .3em .3em;
}

table.itemSummary td, td.itemSummaryLite{
	text-align: left;
	padding: .3em 1em;
	vertical-align: top;
}

table.itemSummary caption, caption.itemSummaryLite {
	text-align: left;
	font-weight: bold;
	padding: 1em 0 0 0;
}

/*table and cells for displaying a flat or hierarchical list of tabular data*/
/*see an annoucement, assignment list*/
table.listHier{
	font-size: 1em;
	width: 100%;
	clear: both;
	margin-top: .5em;
	border:none; /*keep ff from giving it a border*/
}

table.listHier th{
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
	padding: .3em;
}

table.listHier td{
	padding: .3em;
}

table.listHier td img{
	margin-right: .2em;
	vertical-align: text-top;
}

table.listHier td a:hover,
table.listHier th a:hover{
	text-decoration: none;
}

/*a column in a table that contains only a very small icon - all cells in the column have that class */
/*see an announcement list where one announcement has an attachment*/
table.listHier .attach{
	width: .5em;
}

/*make the currently sorted column header text bold,apply to <th> tag*/
/*see gradebook roster*/
.currentSort{
	font-weight: bold;
}

/*make the not currently sorted column header text not bold,apply to <th> tag*/
/*see gradebook roster*/
.notCurrentSort{
	font-weight: normal;
	text-decoration: none;
}

/*list used everywhere to list attachments to an item*/
/*see an announcement with attachments*/
ul.attachList{
	margin: 1em 0;
	padding: 0;
}

ul.attachList img{
	vertical-align: middle;
	margin: 0 1em 0 0;
}

ul.attachList li{
	list-style: none;
	margin: 0 0 .3em 0;
}

/*SECTION 4 -  NAVIGATION */
/*navPanel is the parent of any navigation subpanel - provides for clearing the floats of the inner pannels, styling of pannel groups*/
/*see announcement list*/
.navPanel{
	clear: both;
	margin: 5px 0 0 0;
	overflow: hidden;
	height: 100%;
}

/*boxes controls and filters on views ("view by"*/
/*see announcement list*/
.viewNav{
	font-size: 1em;
	padding: .2em;
	float: left;
	width: auto;
	line-height: 2em;
	margin: 0 .1em;
}

.viewNav label{
	padding-right: 1em;
}

/*formish elements in the listView subpanel - see schedule list, range of events filters*/
.viewNav .shorttext{
	margin: 0;
	clear:both
}

.viewNav .shorttext label{
	width: 8em;
	float: left;
}

.viewNav .labelindnt{
	margin-left: 10em !important;
}

/* listNav: boxes paging controls on list views,  searchNav: boxes searching controls on views */
/*see announcement list, email archive list*/
.listNav,.searchNav{
	float: right;
	vertical-align: bottom;
	padding: 0;
	font-size: 1em;
	text-align: right;
	line-height: 2em;
	clear: right;
	margin: .2em;
}

/* tan hack:  ie6 will wrap all the input children of these unless told not to do so */
* html body .listNav, * html body .searchNav {
	white-space: nowrap;
}

/*these panels will sometimes have a block with instructions, status markers, etc - we can get at it via inheritance*/
.listNav div.instruction, .searchNav div.instruction{
	text-align: center;
	font-size: .9em;
    font-family: verdana, arial, helvetica, sans-serif\0/;
}
/*listNav inputs have punct. marks as labels, adding a screen reader only fieldset with the real label makes them usable */
div.listNav fieldset { 
     display:inline; 
     margin:0; 
     padding:0; 
   } 
div.listNav legend { 
     display:inline; 
     margin:0; 
     padding:0; 
     position: absolute !important; 
     top:1px;
     left:1px; 
     clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
     clip: rect(1px, 1px, 1px, 1px); 
} 

/*searchNav panel has a special text input*/
.searchNav input.searchField{
	background-color: #fff;
	padding: 2px;
}

/*boxes a set of controls for navigating through a series of items - ie. emails, announcements*/
/*see an announcement */
.itemNav{
	float: right;
	vertical-align: bottom;
	text-align: right;
	line-height: 2em;
	clear: both;
	margin: .5em;
	white-space: nowrap;
}

.itemNav a{
	white-space: nowrap;
}

* html body .itemNav input{
	font-size: 85%;
}

.itemNav input{
	font-size: 90%;
}
/*for link controls in views */
/*see calendar */
.viewLinkControl
{
	padding:.5em 0
}

/*for abc or 123 navigators*/
/*not sure where used - samigo?*/
span.abc{
	letter-spacing: .2em;
	color: #555;
}

span.abc a:hover{
	font-weight: bold;
	color: maroon;
	text-decoration: none;
}

span.abc a,span.abc a:link{
	font-weight: bold;
}

/*navigator for a view's global actions (i.e. actions not associated with particular items)*/
/*used in samigo - gradebook*/
.navViewAction{
	background-color: #CCC;
	text-align: center;
	font-size: .8em;
	padding: .3em;
	vertical-align: middle;
}

table.discTria img, .topicHeadings img,  .msgHeadings img{
	vertical-align: text-top;
	margin:0 .3em;
}
.discTria h4{
	display:inline;
}
.discTria .itemAction a{
	border:1px solid #555 !important;
	padding:.3em .6em !important;
	background:#eee;
	
}
.discTria .itemAction a:hover{
	border:1px solid #555 !important;
	background:#fff;
}


/*a block that contains a twistie and a title - used to hide then reveal optional elements*/
/*see or preview an assignment*/
.discTria{
	background-color: #CCC;
	padding: .3em;
}

/*block to act on items it is listed under*/
/*see list of links under an assignment in assignment list*/
.itemAction{
	font-size: .85em;
	font-family: verdana,arial;
	margin: .1em 0 0 .5em;
	line-height: 1.6em;
	color: #888;
	padding: 2px;
}

/*itemAction will become a list for 2.6*/
.itemAction li{
	list-style: none;
	display: inline;
}
h4 + div.itemAction{
	margin: .1em 0 0 1.5em;
}

/*toolbar - turn into a list for 2.6 - default list render here, style in tool.css*/
.navIntraTool li{
	list-style: none;
	display: inline;
	margin:0 !important;
	padding:0 !important;
	color: #777
}

.navIntraTool li span a{
	margin:0 !important;
	padding:0 !important;
}
/*for tool bar items that have icons*/
.navIntraTool li span a img{
	vertical-align: bottom;
}
.navIntraTool li span, .navIntraTool li span.current, .navIntraTool li span.inactive{
	border-left:1px solid #ccc;
	margin:0;
	padding:0 5px 0 8px
}
/*special style for the first item, namely no border-left. Note: tools will define the first
 * toolbar item thus: ".navIntraTool li.firstToolBarItem span" for legacy browsers like IE 6. Since IE6 is no
 * longer supported switching to the more flexible first-child pseudo class. Next 2 are to 
 * deal with some things in site-setup
*/

.navIntraTool .realToolBarLink span {
    border:none;
}
.navIntraTool .realToolBarLink ~ .realToolBarLink span{
    border-left:1px solid #ccc;
}
.navIntraTool li:first-child span {
	border:none;
	margin:0;
	padding: 0 5px 0 8px;
}
/*some toolbars have input type=text, and the next item (fieldSibling) is a submit link*/
.navIntraTool li span.formItem,.navIntraTool li span.fieldSibling  {
	margin:0;
	border:none;
	padding:0;
}
.navIntraTool li span.fieldSibling {
	padding: 0 5px 0 0;
}
/*style for item that would be a link if you were not at the page already*/
.navIntraTool li span.current{
	color:#777;
}

.navIntraTool li span.inactive{
	color:#777;
}

/*for action controls */
/*create any item type*/
.act{
	padding: 1em 0;
}

/*the default action in this control - keep in mind that anything you do to it (except to the font) will make 
you loose the native buttonishness affordance of the os/browser  - empty here - color defiend in tool.css*/
.act input.active{
}

/* SECTION 5 INDENTING CLASSES:use these classes with <div> blocks to structure layout hierarchically.*/
.indnt0,.tier0{
	margin-left: 0  !important;
}

.indnt1,.tier1{
	margin-left: 1em  !important;
}

.indnt2,.tier2{
	margin-left: 2em  !important;
}

.indnt3,.tier3{
	margin-left: 3em  !important;
}

.indnt4,.tier4{
	margin-left: 4em  !important;
}

.indnt5,.tier5{
	margin-left: 5em  !important;
}

.indnt6,.tier6{
	margin-left: 6em  !important;
}

.indnt7,.tier7{
	margin-left: 7em  !important;
}

.indnt8,.tier8{
	margin-left: 8em  !important;
}

.indnt9,.tier9{
	margin-left: 9em  !important;
}

.indnt10,.tier10{
	margin-left: 10em  !important;
}

.pad0{
	padding-left: 0  !important;
}

/*SECTION 6 MESSAGES */
/*for status text in wizards
ie - site creation*/
.step{
	background-color: #eee;
	padding: .3em .5em;
}

/*for instructions*/
/*create an announcement*/
.instruction{
	line-height: 1.3em;
	margin: .5em 0;
}

/* indicate status change */
/*see: join or unjoin sites*/
.information{
	background-color: transparent;
	background-image: url('images/info.gif');
	background-position: 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid #888;
	display: block;
	width: 80%;
	clear: both;
	color: #888;
	font-size: 1em;
	margin: 5px 0px;
	padding: 5px 5px 5px 25px !important;
}

/*indicate success*/
/*see: create a gradebook assignment*/
.success{
	background-color: #fff;
	background-image: url('images/check.gif');
	background-position: 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid #4a4;
	display: block;
	width: 80%;
	clear: both;
	color: #000;
	font-size: 1em;
	margin: 5px 0px;
	padding: 5px 5px 5px 25px !important;
}

/*indicate failed validation, non-system errors*/
/*TODO: consolidate - validationEmbedded used in gradebook, validation in many places, alertMessage legacy*/
/*see: create an announcement but "forget" to give it a title*/
.validationEmbedded,.validation,.alertMessage{
	background: #fff url(images/warn.gif) 5px 5px no-repeat;
	border: 1px solid #b11;
	display: block;
	width: 80%;
	font-size: 1em;
	clear: both;
	color: #b11;
	margin: 5px 0;
	padding: 5px 5px 5px 25px !important;
}
ul.alertMessage{
   list-style-type: none;
}
/*yet another way to indicate a field that failed validation - treats just the label color via inheritance*/
/*create a resource but forget a required field*/
.validFail label{
	color: #b11 !important;
}

/*when displaying a validaiton failure inline (used with a span)*/
.alertMessageInline{
	background: #fff url(images/warn.gif) 5px 5px no-repeat;
	border: 1px solid #b11;
	width: 80%;
	font-size: 1em;
	color: #b11;
	margin: 5px 0px 5px 0;
	padding: 5px 5px 5px 25px;
}

.error{
}

.fatalerror{
}

/*highlight certain texts*/
/*see: create a draft announcement - see the list*/
.highlight{
	color: #b01111;
}

/*see: top of resources*/
.breadCrumb{
	clear: both;
	margin: 1em 0;
}

/*see: top of resources*/
h3 .breadCrumb{
	clear: both;
	font-size: .8em;
}

/*
new message types - see http://bugs.sakaiproject.org/jira/browse/SAK-14197 
and for usage http://www.umich.edu/~gsilver/messages/
*/
.messageError,.messageValidation,.messageConfirmation,.messageSuccess,.messageInformation,.messageInstruction,.messageProgress{/*common to all messages types*/ margin:.5em 0;padding:3px 3px 3px 2em !important;background-position:3px 3px;background-repeat:no-repeat;height:100%;overflow:hidden;clear:both}
.messageError{background-image:url(images/exclamation.png);background-color:#fbb;border:1px solid #c00}
.messageValidation{background-image:url(images/error.png);background-color:#fee;border:1px solid #f55}
.messageConfirmation{background-image:url(images/asterisk_orange.png);background-color:#ffe;border:1px solid #b71}
.messageSuccess{background-image:url(images/accept.png);background-color:#dec;border:1px solid #9c6}
.messageInformation{background-image:url(images/bell.png);background-color:#eee;border:1px solid #ccc;color:#000}
.messageInstruction{background-color:#fff;color:#555;padding:3px .3em 3px 0}
.messageProgress{background-image:url(images/progress.gif);background-color:transparent;border:1px solid #9c6}
.messageError h4,.messageValidation h4,.messageConfirmation h4,.messageSuccess h4,.messageInformation h4,.messageInstruction h4,.messageProgress h4{display:inline}
h4.message,h5.message,h6.message,p.message{font-size:1em;float:left;width:90%;padding:0 .2em;margin:0}
ul.message{list-style:none;width:90%;margin:0;padding:0;float:left;background-position:3px 3px !important;background-repeat:no-repeat}
ul.message li{list-style:none;margin:0;padding:0 0 5px 0}
p.closeMe{float:right;width:2em;cursor:pointer;text-align:right;margin:0;padding:0;clear:right}
em.closeMe{font-style:normal;cursor:pointer;padding-left:1em}
.messageContent{clear:both;margin-top:2em}
.messageError .messageError,.messageValidation .messageValidation,.messageInformation .messageInformation,.messageConfirmation .messageConfirmation,.messageSuccess .messageSuccess,.messageInstruction .messageInstruction,.messageProgress .messageProgress{background-image:none;border:none;padding-left:0}
/*SECTION 7 DATA PANELS*/
/*panels of normal text can have a header (ie - title) and a footer element (ie - metadata such as author, date, etc)*/
/*see synoptic view of announcements*/
h3.textPanelHeader,h4.textPanelHeader,h5.textPanelHeader, h6.textPanelHeader{
	font-size: 1em;
	color: #555;
	margin: 1em 1em .2em 0;
}

.textPanel{
	margin: .5em 0;
}

.textPanel > div.disc * {
	margin: inherit;
}

.textPanel > div.disc p {
	margin: 5px 0;
}

.textPanelFooter{
	font-size: 85%;
	margin: 0;
	color: #555;
	font-weight: normal;
}

/*for panels that "look" like forms but are read only ie. assignment preview - student view*/
/*see: preview an assignment - view the student view*/
.inopPanel {
	border: 1px solid #eee;
	padding: 1em;
	background: #fff url(images/ib.gif) top left repeat;
}

/*to highlight info or controls in some high threshhold situations*/
/*do an assignment that requires honor code check as a student*/
.highlightPanel {
	margin: 1em 0;
	padding: .5em;
}

/*to isolate blocks of data in low threshhold situations*/
/*see admin / memory / status*/
.infoPanel{
	padding: .3em;
	width: 99%;
}

.infoPanelHead{
	padding: .3em;
}

/*for separating data blocks*/
hr.itemSeparator{
	height: 1px;
	border-style: solid;
	border-width: 1px 0 0 0;
}

/* SECTION 8 FORM ELEMENTS
	all form elements are formed by a label/input pair wrapped in a block - with JSF based tools it is another matter 
	.shorttext - label / input (type=text)
	.filepicker - label / input (type=file)
	.longtext - label / textarea
	.checkbox - input (type=checkbox or radio)
	*/
	
/*	see: create a resource*/
	
/*these two have a border that needs to match the background to avoid some tedious problems in IE*/	
.shorttext,.longtext,.filepicker{
	margin: .4em 1em;
	border: 1px solid #fff;
}
.shorttext{
	clear:both;
}
.shorttext label,.filepicker  label{
	margin-right: 1em;
	width: 14.5em;
	font-weight: normal;
	float: left;
}
#attachForm .shorttext label, #attachForm .filepicker  label{
	min-width: 19.5em;
}

.shorttext input[type="text"]{
	padding: .1em .3em;
	border: 1px solid #888;
}
.shorttext input[type="password"]{
	padding: .1em .3em;
	border: 1px solid #888;
}

.shorttext input.disabled{
	background:#eee
}
textarea{
	margin-top: .5em;
}

/*border that needs to match the background to avoid some tedious problems in IE	*/
.checkbox{
	margin: .2em 0;
	border: 1px solid #fff;
}

/*certain longtext/label pairs need to display label and control on separate lines - their label is classed "block"*/
label.block{
	display: block;
}
/*all RT Editors should be composed of an iframe inside of a longtext div*/
/*bellow padding is to avoid FF ghost borders*/
.longtext iframe{
		padding: 0.2em 0em 0em 0em;
}

/*input type="file" are classed "upload" YMMV*/
input.upload{
}

/*some forms need to be displayed inline*/
.inlineForm{
	margin: 0;
	padding: 0;
	display: inline;
}

.inlineForm a{
	border: none;
	background-color: transparent;
}

/*SECTION 9 MISC*/
/*all purpose clearing action when nature of prec or following items floating nature is in doubt*/
.clear {
	margin: 1em 0;
	clear: both;
}

/*informational texts intended for screen readers - renders offscreen*/
.skip, .fl-offScreen-hidden {
	display: inline;
	position: absolute;
	top: -999px;
	left: -999px;
	height: 0;
}
/*"inactive" gets applied to a container whose children you want to make look grayed out (not inactive per se) - applies to all textual elements and images
placeholder till more standard way of doing it*/
.inactive img{
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50), progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) !important;
	opacity:.50 !important;
}
.inactive *
{
	color: #999 !important;
}
.inactiveBack, .inactiveBack:hover{
    background:#F7F7F7 !important;
}

/*external login form formatting*/
.login, .join{
	margin: 5em auto;
	border: 1px solid #555;
	width: auto;
}

.login th, .join th{
	background-color: #eee;
	padding: .5em;
	border-bottom: 1px solid #555;
}

.login td.logo, .join td.logo{
	width: 13em;
	background:#fff url(../image/sakai.jpg) top left no-repeat
}

.login td.form, .login td.form{
	padding: .5em;
}

.loginform{
	color: #fff;
}

.loginform label, .joinform label{
	color: #fff;
}

.loginform td {
	padding: .3em;
	color: #fff;
}

.loginform td #eid, .loginform td #pw {
	padding:.2em;
	font-family:verdana, arial, helvetica, sans-serif;
	border: 1px solid #AAAAAA;
}

.loginform td #submit{
	color:#09C;
	float: right;
}

.loginform td .loginsubmit {
        color:#09C;
}

#login-choice {
	border-spacing: 0;
	text-align: center;
}

/*
Buttons dont have hover anymore
.loginform td #submit:hover{
	border: 1px solid #888; 
	background-color: #eee;
}
*/

/*SECTION 10 JSF HACKS*/
/*Tools based on JSF have some unique rendering requirements dictated by the way jsf chooses to render standard html components*/
/* IE gives forms a top margin unless told not to
this affects jsf based tools*/
.portletBody form{
	margin-top: 0;
}

/*for jsf label/input pairs that need to be rendered in a table (because otherwise they will not work)*/
.jsfFormTable{
	padding: 0;
}

/*in order to get the label/imput pair to work in jsf, they need to be wrapped up in a table in 
order to display them in the same cell they need to be wrapped in a h:panelGroup, which for some
 reason renders as a span. In order for the required star to "show" that span needs to be a block
  level element. So - if the input is required, add the "required" class to the h:panelGroup
   (in addition to the shorttext, checkbox or longtext classes) pant, pant...*/
.jsfFormTable .required{
	display: block;
	margin-left: -.2em;
}

.jsfFormTable td{
	padding: .3em 0;
	vertical-align: top;
}

.jsfFormTable td .reqStar{
	margin: 0 .2em 0 0;
}

.jsfFormTable td .labelindnt{
	margin-left: 17.5em !important;
}

.jsfFormTable td .shorttext {
	margin: 0;
}

.jsfFormTable td .shorttext label{
	width: 17em;
}

.jsfFormTable td .required input {
	margin-left: -.6em;
}

/*since jsf multiple radio are rendered in a table, substract the padding of the parent td with a negative margin */
td table.checkbox {
	margin: 0;
}

/*so that the same table does not inherit the padding from the parent*/
td table.checkbox td{
	padding: 0;
}

/*to avoid IE drawing a border around the input*/
table.checkbox label input {
	border: 1px solid #fff;
}

/*SECTION 11 WIDGETS*/
/*list manager - two side by side select items,children of table.sidebyside*/
/*see: preferences / tab management or site info / create a group*/
.sidebyside{
}

.sidebyside th{
	padding: .3em;
	text-align: left;
	font-weight: normal;
}

.sidebyside td{
	padding: .3em;
}

.sidebyside select{
	width: 18em;
}
.sidebyside select.notsbs{
	width: auto;
}


/*messagecenter stuff*/
.msgAdvSearch {
	float:right;
}
.msgAdvSearch td{
}
.msgNav{
float:right;
text-align: right;
white-space: nowrap;
}
.unreadMsg{
font-weight: bold;
}

.bordered{
	border: 1px solid #000000;
	padding: 0.5em;
}
/*span surrounding folder icons - used to decorate them (new in dropbox, locked, etc.)
a fake border makes the icon and the title align for IE8*/
span.nil{
	border:0px solid transparent
}
span.nil a{
	border:0px solid transparent
}

/*any list (ul) of messages in a synoptic list view*/
.synopticList{
	margin:0;
	padding:0;
	list-style: none;
    height:100%;
    overflow: hidden;
}
/*a list item - children are h3.textPanelHeader, p.textPanelFooter, div.textPanel*/
.synopticList li{ 
	padding:0;
	margin:.5em 0 ;
} 

/*styles for reorderer (content, assignments, announcements)*/
#reorder-list-sortingToolBar{
	font-size:.9em;
	border:1px solid #ccc;
	background:#ffe;
	margin:1em 0;
	padding:5px;
	width:90%
}
#reorder-list-sortingToolBar a{
	outline:none;
}
#reorder-list {
	font-size:.9em;	
	margin:0;
	padding:0;
	width:90%
}
#reorder-list li {
	list-style:none;
	padding:5px;
	margin:5px 0;
	background:#eee;
	border:1px solid #ddd;
	width: 100%;
}
#reorder-list li:focus {
	border:1px solid #555
}
#reorder-list li span.grabHandle{
	display:block;
	float:left;
	width:5em;
	padding-right:0;
}
#reorder-list li span.grabHandle input{
	margin-top:-2px;
}

#reorder-list li .title{
	display:block;
	float:left;
	width:45%;
    overflow: hidden;
    white-space: nowrap;
	}
#reorder-list li span{
	padding-right:2em;
}

.fl-reorderer-movable-selected{
	border: none; outline: none
}
/*marks a drop zone*/
.fl-reorderer-dropMarker {
	/*width: 50%;*/
	height: 30px; /*ok*/
	background:#fff !important;
	border:1px dashed #ccc !important
}
.fl-reorderer-movable-hover {
	/*hover over a selectable item*/ 
	cursor: move 
}
.fl-reorderer-movable-dragging {
	/* item left behind */
	background: #fff;
	color: #555 !important;
	border:1px dashed #ccc !important;
	outline:none;
}
.fl-reorderer-avatar {
	/*item being dragged*/ 
	opacity: 0.55;
	list-style:none;
	background: #bea !important;
	width: 50% !important
}
.fl-reorderer-avatar * {display: none }
.fl-reorderer-avatar .title {display:block;margin:5px;font-weight: bold;font-size:1.2em }
.fl-ProgEnhance-enhanced,.fl-progEnhance-enhanced{display:none;}
.fl-offScreen-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.recentMove { background: #def !important;border:1px solid #7bf !important}

.audioaudio {
    visibility: hidden\9;
    visibility: hidden\10;
}

.audioobject {
    visibility: hidden;
    visibility: visible\9;
    visibility: visible\10;
}