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

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;
}
.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*/
.wcwmenu{
	padding: 0;
	margin: 3px 0 -1em  0;
}

.wcwomenu{
	padding: 0;
	margin: -.3em 0 -1em 0;
}

iframe#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: normal;
	font-family: Arial,Helvetica,sans-serif;
	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;
}

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

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

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

/*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;
}
/*used as background class for recent items in dropbox, anywhere*/
 .recentItem{
      padding: 0 2px 0 0;
      background: url(images/new_item_back.gif) top right no-repeat
 }
  .recentItem a:link{
     text-decoration:none !important;
 } 
/*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;
}

h4 + div.itemAction{
	margin: .1em 0 0 1.5em;
}

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

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

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

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

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

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

/*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)
	.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 label,.filepicker  label{
	margin-right: 1em;
	width: 14.5em;
	font-weight: normal;
	float: left;
}

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

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

/*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{
	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;
	-moz-opacity:.50 !important;
}
.inactive *
{
	color: #999 !important;
}


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

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

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

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

.loginform{
	color: #fff;
}

.loginform label{
	color: #fff;
}

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

.loginform td #eid{
	width: 10.6em;
}

.loginform td #pwd{
	width: 10em;
}

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

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

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

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


/* Make a list based css menu */
ul.makeMenu, ul.makeMenu ul {
  width: auto;
  border: 1px solid #ddd !important;
  background:#fff; 
  padding: 3px;
 	cursor: default;
 	 margin-left: 0px;
	display:inline;
	position: relative;
	text-align: left;
	white-space: nowrap;
}

ul.makeMenu{
	background:#eee url(images/makemenu.gif) top left repeat-x
}

ul.makeMenu:hover{
	color:#2A5EAB;
	border:1px solid #000  !important;
	background:#eee url(images/makemenu-h.gif) top left repeat-x
}	

.listHier ul.makeMenu img{
	margin-right: 0;
	vertical-align: middle;
}

ul.makeMenu li {
  list-style-type: none;
  margin: 0px; 
/*  padding:5px; 
  position: relative;
  color: #000000;
  display:inline;*/
}

ul.makeMenu li > ul {
  display: none;
  	width: 14em;
	background-color:#ffffff;
	background-image:none;
	position:absolute;
	border:1px solid #000 !important;
	margin-top:0px;
 	z-index:3
}

.makeMenuChild{
  display: none;
  position: absolute;
	width: 14em;
	background-color:#ffffff;
	background-image:none;
	position:absolute;
	border:1px solid #666 !important;
	margin-top:0px;
 	z-index:3
}

.makeMenuChild li{
	padding:0 !important;
}
ul.makeMenu li a { display: block; width: 100%; text-decoration: underline;   padding:6px; color:#35B !important;	}
ul.makeMenu li a:active{outline:none;}
ul.makeMenu li a:hover, ul.makeMenu li a.CSStoHighLink { color: #000 !important; }
ul.makeMenu li:hover > a { color: #000; }

ul.makeMenu li.menuClose{
	display:block;
	height:100%;
	font-size:.9em;
	font-weight: bold;
	border-bottom:1px solid blue;
}
ul.makeMenu li.menuClose:hover{
	border-bottom:1px solid green;
}
ul.makeMenu li.menuClose a {
	display:block;
	color:blue !important;
	text-align: right;
	text-decoration: none !important;
	height:20px;
	padding:3px 0;
	outline:none;
}
ul.makeMenu li.menuClose a:hover {
	color:green !important;
	text-decoration: none !important;
}

.centerLines td{
    /*need to add the important here to override tool.css */
	vertical-align: middle !important;
}
.menuOpen{
	cursor:pointer;
}
/*any list (ul) of messages in a synoptic list view*/
.synopticList{
	margin:0;
	list-style:none;
	padding:0;
}
/*a list item - children are h3.textPanelHeader, p.textPanelFooter, div.textPanel*/
.synopticList li{ 
	padding:0;
	margin:.5em 0 ;
} 

/*toolbar - turn into a list for 2.6 (leave here 
in 2.5.x since it is orthogonal and might forget to update when
we move to 2.6 )*/
.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*/
.navIntraTool li.firstToolBarItem 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;
}
/*
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;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}