/*general body - used by main portal document*/ 
body{
	width: 100%;
	padding: 0;
	font-family: 'Trebuchet MS',Verdana,sans-serif;
	margin: 0;
	background: #fff;
}

/*PART 1 - MAIN LAYOUT BLOCKS*/
/*outer wrapper for portal content (decorative - child is #portalContainer )*/
#portalOuterContainer{

}

/*inner wrapper for portal content (decorative - children are #header #container and #footer )*/
#portalContainer{
}

/*wrapper for masthead  and site navigation
 two possible states - logged in headerMax, not logged in - headerMin*/
#headerMax,#headerMin{
	width: 98%;
	margin: 1em auto 0 auto;
}

/*accessibility links wrapper */
#skipNav{
}

/*wrapper for site content (includes as children #toolMenuWrap,#content and #footer)*/
#container{
	width: 98%;
	margin: 0 auto;
	border:1px solid #fff;
	clear:both
}

/*wrapper for #toolMenu - children are #worsiteLogo,#toolMenu*/
#toolMenuWrap{
	padding:.2em;
	border-bottom:1px solid #CB2DCC;
	margin-bottom:.5em;
}

/*wrapper for site content (portlets) -  children can be #col1 or #col1of2 and #col2of2 depending in the number of columns*/
#content{
	padding: 0 0 1em 0;

}

/*wrapper for footer blocks*/
#footer{
	color: #000;
	font-size: x-small;
	margin: 0px;
	padding: 0;
	width: auto;
	clear: both;
	top: 0;
	border-top: 1px solid #CB2DCC;
	text-align: center;
}

/*PART 2 - HEADER IFRAME SETTINGS*/	
/*iframe sizes for different states*/
/*gone for 2.3*/
/*.sitenav-log{
	height: 90px;
	width: 100%;
	border-bottom:1px solid #CB2DCC
}

.sitenav-max{
	height: 7.5em;
	max-height:140px;
	min-height:100px;
	width: 100%;
}

* html .sitenav-max{
	height: 8em;
	}

.sitenav-min{
	height: 2em;
	width: 100%;
}
*/
/*PART 3 - HEADER BLOCKS (BRANDING,LOGIN)*/
/*outer wrapper for contents of site navigation -  Children are #mastHead,#tabNavWrap*/
#siteNavWrapper{
	margin: 0; 
}

/*wrapper for mast head elements - children are 3 blocks - #mastLogo,#mastBanner,#mastLogin*/
#mastHead{
	font-size: .8em;
}

/*container wrapping branding images - portal outputs one /library/skin/<skin name>/images/logo_inst.gif
that can be used or hidden,can also use a background:url(images/<image name>.<ext>) in this block,or both superimposing them*/
#mastLogo{
	float: left;
	width: auto;
}

/*the portal outputs an image that can be treated here or hidden with display:none*/
#mastLogo img{
	margin: 1em .5em;
}

/*another container wrapping branding images - portal outputs one /library/skin/<skin name>/images/banner_inst.gif
that can be used or hidden,can also use a background:url(images/<image name>.<ext>) in this block,or both superimposing them*/
#mastBanner{
	width: auto;
	vertical-align: top;
	float: left;
}

/*the portal outputs an image that can be treated here or hidden with display:none*/
#mastBanner img{
	margin: 1em .5em;
}

/*container wrapping,depending on Sakai settings:1) a login form,2) a login link for CAS,3) a logout link*/
#mastLogin{
	float: right;
	text-align: right;
	padding-right: 15px;
	vertical-align: top;
}

/*the anchor for the login link for CAS above can be an image - treated here*/
#mastLogin img{
	margin-top: 0;
	border: 0;
}

/*login links for CAS,logout link*/
#mastLogin a,#mastLogin a:visited{
	color: #CB2DCC;
	margin-top: 0;
}

#mastLogin a:hover{
	color: #CB2DCC;
	text-decoration: none;
}

/*login form elements - in order,form,userid field,password field,login button - first 2 have labels associated with them,gettable as #loginForm label{
}

#loginForm is the form for login - contains children #eid #pw #submit*/
#loginForm{
	margin: 1em 0;
}

#eid{
	border: 1px solid #aaa;
	padding: 3px;
	margin-left: .5em;
	width: 7em;
}

#pw{
	border: 1px solid #aaa;
	padding: 3px;
	margin-left: .5em;
	width: 7em;
}

#loginForm label{
	color: #000;
	padding-right:1em
}

#submit{
}

#submit:hover{
	color: #CB2DCC;
}

/*block for login/logout links */
#loginLinks{
	margin: 1em 0 2em 0;
}

/*main CAS link*/
#loginLink1{
}

/*secondary CAS link*/
#loginLink2{
}

/*PART 4 - SITE NAVIGATION - children of #siteNavBlock*/
/*outer wrapper for the site navigation blocks - it is a class,not an id because it can be overloaded with other values having to do with site type
so for example <div class="tabHolder workspace"> so that different site types can be treated differently via inheritance - children are #siteNavWrap and #navBottom*/
.siteNavWrap{
	width: 100%;
	background: #CB2DCC url(images/sitenavback.jpg) top left repeat-x;
	padding: 0;
	margin: 0;
	float: left;
}

/*wrapper for the site links and site <select> blocks - children are #siteNav and #tabNav */
#siteNav{
	width:100%;
}

/*wrapper for the site link list   - the #siteLinkList child)*/
#linkNav{
	float:left
}

/*wrapper for the site <select> that is displayed when more than x sites are in the link list*/
#selectNav{
	padding: .2em;
	padding: .4em .4em .2em .2em;
	text-align: right;
	vertical-align: middle;
	float:right

}

/*the <select> contextually defined*/
#selectNav select{
	display:inline;
	font-size: .75em;
	margin: 0 3px;
	padding: 0;
}

#selectNav select option{
	background: #fff;
}

/*a ul - the li below are outer wrappers for the links to sites */
#siteLinkList{
/*	white-space: nowrap;*/
	list-style: none none none;
	font-size: .8em;
	margin: 0;	
	padding: 4px 0;
	width: auto;
}

/*list elements - children are <span> and <a>*/
#siteLinkList li{
	display: inline;
	line-height: 2em;
}

/*span shim for fine grained manipulation of link display (decorative)*/
#siteLinkList li span{
}

/*the current sites' link*/
#siteLinkList .selectedTab a,
	#siteLinkList .selectedTab a:link,
	#siteLinkList .selectedTab a:visited,
	#siteLinkList .selectedTab a:hover{
	color: #000;
	cursor: text;
	text-decoration: none;
}

/*links to other sites*/
#siteLinkList a,#siteLinkList a:link,#siteLinkList a:visited{
	color: #fff;
	padding: 2px 6px 2px 4px;
	text-decoration: underline;
	border-right: 1px solid #fff;
}

/*hover state for links to other sites*/
#siteLinkList a:hover{
	color: #fff;
	text-decoration: none;
}

.fixTabsIE{
	visibility: hidden;
	display: none;
	border-width: 0;
}

/*block in case need to display any decorative element above or below the .tabHolder block*/
#navBottom{
	display: none;
}

/*PART 5 - SITE TOOL LINKS  - children of #toolMenuWrap	*/
/*wrapper for ul that lists the links to tools*/
#toolMenu{
	text-align: right;
	width:100%;
	font-size: 80%;
	padding:.2em;
	color: #000;
	background: inherit;
}

#toolMenu ul{
	width:auto;
	list-style: none;
	margin: 0;
	padding-right: 0;
}

#toolMenu li{
	display:inline;
	margin: 0;
	width: auto;
	padding: 0;
	border: 1px solid #fff;
	text-align: right;
}

/*span shim for fine grained manipulation of link display (decorative)
*/
#toolMenu li span{
}

#toolMenu li a:link,#toolMenu li a{
	text-decoration: none;
	color: #CB2DCC;
	padding: 2px 0px 2px 4px;
}
#toolMenu li a:hover{
	text-decoration: underline;
	color: #CB2DCC;
	padding: 2px 0px 2px 4px;
}

#toolMenu li a.selected{
	text-decoration: none;
	color: #000;
	cursor: text;
	padding: 2px 0px 2px 4px;
}

#toolMenu li a.selected:hover{
	text-decoration: none;
	color: #000;
	cursor: text;
	padding: 2px 0px 2px 4px;
}

/*PART 6 - SITE AFFILIATION,SITE TYPE/STATUS AND PRESENCE - children of #toolMenuWrap	*/
/*site logo wrapper*/
#worksiteLogo{
	display: none;
}

/*site logo image - Sakai may output,depending on installation,an image here based in site affiliation. Site owner may also point to a url - overriding the Sakai provided image*/
#worksiteLogo img{
	display: block;
	margin: .5em auto;
}

/*wrapper for the string that Sakai will output based on site type (ie. project,course) this is open ended and institution specific*/
#siteType{
	display: none;
}

/*wrapper for the string that Sakai will output based on site status when status is "Unpublished"*/
#siteStatus{
	text-transform: capitalize;
	text-align: left;
	background: url(images/warn.gif) .2em center no-repeat #fff;
	border: 1px solid  #aaa;
	clear: both;
	color: #aaa;	
	font-size: 	small;
	margin: 5px 2px 15px 2px;
	padding: 3px 3px 3px 2em;
}

/*wrapper for all elements of presence display */
#presenceWrapper{
	display:none
	}

/*wrapper for title of iframe ("Users present")*/
#presenceTitle{
	font-size: .7em;
	text-align: right;
	margin-right: .5em;
}

/*of presence iframe*/
#presenceIframe{
	height: 100px;
	margin: .3em;
	width: 8.8em;
}

/*PART 7 - PORTLETS - children of #content*/
/*a page may display portlets in one column or two columns - the next three id selectors address the three possiblities - sole child of column is the .portlet */
#col1{
	
}

#col1of2{
	width: 50%;
	float: left;
	margin: 0;
}

#col2of2{
	width: 50%;
	float: right;
}

/*keep ie from doing the bad thing*/
* html #col1of2, * html #col2of2  {width: 49%;}

/*wrapper class for portlets - decorative -  contains two wrapper block children:.portletTitleWrap and  .portletMainWrap*/
.portlet{
}

/*.portletTitleWrap and .portletTitleWrap are wrappers for the tool title and tool iframe,
below they are contextually defined depending on the column as an example,as you may want to adjust the widths accordingly*/ 
#col1 .portletTitleWrap{
	width: 99%;
		border-bottom: 2px solid #CB2DCC;
}

#col1 .portletMainWrap{
	width: 99%;
}

#col1of2 .portletTitleWrap,#col2of2 .portletTitleWrap{
	width: 98.5%;
		border-bottom: 2px solid #CB2DCC;
}

#col1of2 .portletMainWrap,#col2of2 .portletMainWrap{
	width: 98.5%;
	margin-bottom: .5em;
}

.portletTitle{
	width: 100%;
	height:100%;
	overflow:hidden;
}

.portletTitle .title img{
	margin: 0;
	border:none;
/*	vertical-align: text-bottom;*/
	width: 18px;
	height: 16px;
}

.portletTitle .title{
	padding: 2px 4px 6px 4px;
	height: 1em;
	font-size: 100%;
	float: left;
	color: #000;
}

.portletTitle .title h2{
	display: inline;
	margin: 0 0 0 .2em;
	padding: 0;
	color: #555;
	font-weight: bold;
	font-size: 1em;
}

.portletTitle .title a{
	background: url(images/reload.gif) center left no-repeat;
}

.portletTitle .title a:hover{
	background: url(images/reload_h.gif) center left no-repeat;
}

.portletTitle .action{
	padding: 2px 4px 6px 2px;
	text-align: right;
	vertical-align: middle;
}

.portletTitle .action img{
	margin: 0;
	border:none;
	vertical-align: text-bottom;
	width: 16px !important;
}

.portletTitle .action a{
	background: url(images/help.gif) center right no-repeat;
}

.portletTitle .action a:hover{
	background: url(images/help_h.gif) center right no-repeat;
}

/*iframes for portlet title and portlet content*/
/*gone for 2.3*/
/*.portletTitleIframe{
	margin: 0;
	height: 1.8em;
	width: 100%;
}
*/
.portletMainIframe{
	text-align: left;
	margin-bottom: .5em;
	height: auto;
	border: none;
}

/*PART 8 - FOOTER BLOCKS - descendants of #footer TODO - unpack the 3 descendants and make them all children*/
/*wrapper for links going to external sites - links are output as a series  separated via pipes (TODO:make a list already)*/
.footerExtNav{
	padding-top: .5em;
	padding-bottom: .5em;
}

/*the links displayed inside the wrapper above*/
.footerExtNav a,.footerExtNav A:link,.footerExtNav A:visited{
	color: #000;
	text-decoration: none;
	margin: 1em;
}

.footerExtNav a:hover{
	color: #aaa;
	text-decoration: underline;
	margin: 1em;
}

/*a second wrapper - server info,build,etc*/
#footerInfo{
	font-size: xx-small;
	text-align: center;
	clear: both;
	padding-bottom: 1em;
}

#footerInfo img{
	margin-top: .5em;
	margin-bottom: .5em;
}

/*a third wrapper - reserved for copyright blurbs*/
.sakaiCopyrightInfo{
	color: #CB2DCC;
}

/*PART 8 - CONVENIENCE*/
/*used to hide various blocks from sighted users that are in the source to help with accessibility*/
.skip{
	display: inline;
	position: absolute;
	top: -999px;
	left: -999px;
	height: 0;

}

