/*general body - used by main portal document and document inside of the #sitenav iframe*/ 
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 iframe containing masthead  and site navigation (3 possible classes for this iframe .sitenav-max,.sitenav-min,.sitenav-log) as well as accessibility links wrapper #skipNav */
#header{
	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: 1em auto;
	border:1px solid #fff
}

/*wrapper for #toolMenu - children are #worsiteLogo,#toolMenu*/
#toolMenuWrap{
	float: left;
	width: 9.6em;
	color: #000;
	text-align: right;
	padding:0 .5em 0 0;
	border-right:2px solid #FFF
}

#toolMenuWrap:hover{
	border-right:2px solid #09c;
	}
/*depending on site type - different hover effects for the tool menu parent block
site types are a local setting - adjust */
.workspace #toolMenuWrap:hover{
	border-right:2px solid #aaa;
}
.course #toolMenuWrap:hover{
	border-right:2px solid #FC6;
}
.project #toolMenuWrap:hover{
	border-right:2px solid #9CF;
}


/*wrapper for site content (portlets) -  children can be #col1 or #col1of2 and #col2of2 depending in the number of columns*/
#content{
	padding: 0;
	margin-top: .5em;
	margin-left: 11em;
}
/*margin tweak for IE to avoid float drop*/
* html #content{margin-left:11.3em}
/*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 #09c;
	text-align: center;
}

/*PART 2 - HEADER IFRAME SETTINGS*/	
/*iframe sizes for different states*/
.sitenav-log{
	/*user not logged in*/
	height: 90px;
	width: 100%;
	border-bottom:1px solid #09c
}

.sitenav-max{
	/*user logged in */
	height: 7.8em;
	max-height:140px;
	min-height:100px;
	width: 100%;
}

* html .sitenav-max{
	/*user logged in - iframe height tweak for IE*/
	height: 8em;
	}
.sitenav-min{
	/*no logos or banners*/
	height: 2em;
	width: 100%;
}

/*PART 3 - HEADER BLOCKS (BRANDING,LOGIN)*/
/*outer wrapper for contents of site navigation document that is displayed inside of the site navigation iframe
TODO:get it and its children onto main document. Children are #mastHead,#tabNavWrap*/
.siteNavWrap{
	margin: 0; 
	border-bottom:3px solid #fff;
	height:100%;
	overflow:auto
}
/*depending on site type - different border-bottoms for the site menu parent block
site types are a local setting - adjust */
.workspace .siteNavWrap{
	border-bottom:3px solid #aaa;
}
.course .siteNavWrap{
	border-bottom:3px solid #fc6;
}
.project .siteNavWrap{
	border-bottom:3px solid #9cf;
}



/*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: #09c;
	margin-top: 0;
}

#mastLogin a:hover{
	color: #09c;
	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: 0 .5em
}

#submit{
}

#submit:hover{
	color: #09c;
}

/*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: #09c url(images/sitenavback.jpg) top left repeat-x;
	padding: 0;
	margin: 0;
	float: left;
	border-top: 1px solid #09c;
}

/*wrapper for the site links and site <select> blocks - children are #siteNav and #tabNav */
/*note - after tag 2.2 004 - this and children are no longer nested floated boxes due to fact of site nav remaining in iframe with attendant float drop problems*/
#siteNav{
	width:100%;
}
#siteNav td{
	padding:0
}

/*wrapper for the site link list   - the #siteLinkList child)*/
#linkNav{

}
* html body  #linkNav{
/*margin-top:.2em*/
}
/*wrapper for the site <select> that is displayed when more than x sites are in the link list*/
#selectNav{
	padding: .2em .4em .2em .2em;
	text-align: 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: 1.3em;
}

/*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{
	width: 12em;
	padding: 0;
	margin: 1em 0 0 0;
	font-size: 80%;
	color: #000;
/*	clear: both;*/
	background: inherit;

}

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

#toolMenu li{

	margin: 0;
	width: auto;
	padding: 0;
	border: 1px solid #fff;
	text-align: right;
}

/*span shim for fine grained manipulation of link display (decorative)
also hide if are going to be using icon links (as background of <a> nad <li>
*/

#toolMenu li span{
/*comment this line for a return to sanity
display:none*/
}



#toolMenu li a:link,#toolMenu li a{
	display: block;
	text-decoration: underline;
	color: #09c;
	padding: 2px 0px 2px 4px;

}
#toolMenu li a:hover{
	text-decoration: none;
	color: #09c;
}

#toolMenu li a.selected{
	text-decoration: none;
	color: #000;
	cursor: text;
}

#toolMenu li a.selected:hover{
	text-decoration: none;
	color: #000;
	cursor: text;
}

/*PART 6 - SITE AFFILIATION,SITE TYPE/STATUS AND PRESENCE - children of #toolMenuWrap	*/
/*site logo wrapper*/
#worksiteLogo{
	width: 9.7em;
	height: auto;
	overflow: hidden;
	display: block;
}

/*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{
	width: 9.65em;
	margin-top: .5em;
}

/*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{
	padding-right: .5em;
}

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

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

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

/*.portletTitleWrap and .portletTitleWrap are wrappers for the iframes holding the tool title documents,
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 #09c;
}

#col1 .portletMainWrap{
	width: 99%;
}

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

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

/*iframes for portlet title and portlet content*/
.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: #09c;
}

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

}