/*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  as well as accessibility links wrapper #skipNav 
 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{
	clear:both;
	width: 98%;
	margin: 1em auto;
	border:1px solid #000
}

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

}


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

* 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 #516C80;
	text-align: center;
}

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

.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*/
.siteNavWrap{
	margin: 0; 
	border-bottom:3px solid #fff;
	height:100%;
	overflow:auto
}
/*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;
}

#mastLogin a,#mastLogin a:visited{
	color: #fff;
	background: #69b;
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: bold;
	padding:.5em 1em .7em 1em;
	border: solid #000;
	border-width: 0 2px 2px 0;
}

#mastLogin a:hover{
	color: #fff;
	background: #504560;
	text-decoration: underline;
	border: solid #005;
	border-width: 0 2px 2px 0;
}

/*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{
	background: #039;
	color:#fff;
	font-weight: bold;
	padding:1em;
}

#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: #fff;
}

#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: #D6D6E9;
	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

}
* 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;
	text-align: right;
}

/*the <select> contextually defined*/
#selectNav select{
	display:inline;
	font-size: .8em;
	margin: 0 0 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: .9em;
	margin: 3px 0 -4px 0;	
	padding: 4px 0;
	width: auto;
}
* html #siteLinkList{
	padding: 12px 0;
}

/*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{
	background:#fff url(images/tab_sel.gif) left no-repeat;
	color: #D56633;
	font-weight: bold;
	cursor: text;
	border-right:#aaa;
	text-decoration: none;
	border-bottom: 4px solid #fff;
		border-right: 1px solid #666;
}

/*links to other sites*/
#siteLinkList a,#siteLinkList a:link,#siteLinkList a:visited{
	color: #fff;
	padding: 4px 6px 4px 10px;
	background:#2A7B64 url(images/tab.gif) left no-repeat;
	text-decoration: none;
	border-right: 1px solid #666;
}

/*hover state for links to other sites*/
#siteLinkList a:hover{
	border:none;
	background:#560 url(images/tabgh.gif) left no-repeat;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #666;
}

.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 2px;
	font-size: 80%;
	color: #000;
	background: inherit;
	text-align: left;

}

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

#toolMenu li{
	margin: 0;
	width: auto;
	padding: 0;
	text-align: left;
}

/*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;
	width:100%;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	background:#516C80;
	border:1px solid #000;
	padding: 4px;
	margin:1px

}
#toolMenu li a:hover{
	background: #DDDDFF;
	text-decoration: none;
	color: #702200;
}

#toolMenu li a.selected{
	background:#fff;
	text-decoration: none;
	color: #CC9900;
	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;
	padding-right:.2em;
	}

/*wrapper class for portlets - decorative -  contains two wrapper block children:.portletTitleWrap and  .portletMainWrap*/
.portlet{
	border:1px solid #ccc;
	padding:.5em;
	margin-top:13px;
		margin-bottom:13px;
}

/*.portletTitleWrap and .portletTitleWrap are wrappers tool title and the iframes holding the tool 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%;

}

#col1 .portletMainWrap{
	width: 99%;
}

#col1of2 .portletTitleWrap,#col2of2 .portletTitleWrap{
	width: 98.5%;
}

#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: #CC6633;
	font-weight: bold;
	font-size: 1.2em;
}

.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: 4px 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: #516C80;
}

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

}

