/*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: 0em auto 0em 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: #555555; /*#000;*/
	text-align: right;
	padding: 0 10px 0 0;
	border-right: 1px solid #863f6c; /*#09c*/
}

/*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: #8e3f6c;
	font-size: x-small;
	margin: 0px;
	padding: 0;
	width: auto;
	clear: both;
	top: 0;
	border-top: 1px solid #8e3f6c; /*#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 #8e3f6c; /*09c;*/
}

.sitenav-max{
	/*user logged in */
	/*height: 120px;*/
	height: auto;
	width: 100%;
}

.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*/
#siteNavWrapper{
	margin: 0; /*float:right*/
}

/*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-bottom: 10px;
	margin-top: 10px;
	margin-left: 10px;
}

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

#mastLogin a:hover{
	color: #8e3f6c;
	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*/


/*NOU CAROL*/
.login{
	margin: 5em auto;
	border: 1px solid #555;
	width: auto;
}

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

.login td.logo{
	width: 25em;
	background:#fff url(images/logo_inst.gif) center center no-repeat
}

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

.loginform{
	color: #000;
}

.loginform label{
	color: #000;
}

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

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

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

.loginform td #submit{
	color: #8e3f6c;
	float: right;
}

.loginform td #submit:hover{
	border: 1px solid #000;
	background-color: #eee;
}

/* FINS AQUI CAROL */



#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: #8e3f6c; /*#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: #8e3f6c; /*cfb0c0; #09C;*/
	padding: 0;
	margin: 0;
	float: left;
	border-top: 1px solid #8e3f6c; /*8c3f6c; #09c;*/
	border-bottom: 1px solid #8e3f6c; /*#09c;*/
}

/*wrapper for the site links and site <select> blocks - children are #siteNav and #tabNav */

#siteNav{
	white-space: nowrap;
}

* html body #siteNav{
	height: 1.5em;
}

/*wrapper for the site link list   - the #siteLinkList child)*/
#linkNav{
	padding: 0;
	float: left;
	margin: .2em 0;
}
* 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{
	float: right;
	padding: .2em;
}

/*the <select> contextually defined*/
#selectNav select{
	display:inline;
	font-size: .6em;
	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: .8em;
	font-weight: bold;
	margin: 0;	
	padding: 2px 0;
	/*padding: 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: #cbcc03; /*#000;*/
	cursor: text;
	text-decoration: none;
}

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

/*hover state for links to other sites*/
#siteLinkList a:hover{
	color: #cbcc03;
	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;
	font-weight: bold;
	text-decoration: none; /*underline;*/
	color: #8e3f6c; /*#09c;*/
	padding: 2px 0px 2px 4px;
/*comment these last 3 lines for a return to sanity
	width:2em;
	height:2em;
	background:url(images/warn.gif)  top left no-repeat;*/

}
#toolMenu li a:hover{
	display: block;
	text-decoration: underline;
	color: #8e3f6c; /*#09c;*/
	padding: 2px 0px 2px 4px;
}

#toolMenu li a.selected{
	display: block;
	text-decoration: none;
	text-align: center;
	/*background-color: #cbcc03; */
	border-bottom: 2px solid #cbcc03;
	border-top: 2px solid #cbcc03;
	border-left: 2px solid #cbcc03;
	border-right: 2px solid #cbcc03;
	color: #8e3f6c;
	cursor: text;
	padding: 2px 0px 2px 4px;
}

#toolMenu li a.selected:hover{
	display: block;
	text-decoration: none;
	color: #8e3f6c; /*#09c;*/
	cursor: text;
	padding: 2px 0px 2px 4px;
}

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

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

/*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 #cbcc03;  /* 8e3f6c; #09c;*/
}

#col1 .portletMainWrap{
	width: 99%;
}

#col1of2 .portletTitleWrap,#col2of2 .portletTitleWrap{
	width: 98.5%;
		border-bottom: 2px solid #cbcc03; /*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: #8e3f6c; /*#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;

}