/*NOTE:This file is linked to after the tool_base.css file inside of tools. It provides for skinning.*/
/*many of the definitions below exist also in tool_base.css - the duplication allows for one instalation with many different looks sharing some common elements
*/

/*SECTION 1 GENERIC SELECTORS*/
body{
	font-family: 'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-size: 80%;
}	

/*stub in tool_base.css - skinned here */

hr.itemSeparator{
	height: 1px;
	border-color: #27d;
	border-color: #27d;
	border-style: solid;
	border-width: 1px 0 0 0;
}

/*SECTION 2 LINKS*/
a:link{
	color: #35b;
	text-decoration: none;
}

a:visited{
	color: #53b;
	text-decoration: none;
}

a:hover,a:active{
	color: #33f;
	text-decoration: underline !important;
}

a:focus{
	color: #33f;
	text-decoration: underline !important;
}

/*links inside the calendar tool tables*/
table.calendar td a:hover{
	text-decoration: underline;
}
/*links inside the <th>  of the standard list table*/
.listHier th a:link,.listHier th a:visited{
	color: #35b;
	text-decoration: underline;
	border: none;
}

.listHier th a:hover{
	color: #33f;
	text-decoration: underline;
}

/*some links are jscripted so the href is the same - cannot provide visited functionality - so make both the same*/
/*see: list of assignments - the cells are classed with "specialLink" */ 
.specialLink a:link,.specialLink a:visited{
	color: #35b;
	text-decoration: none;
}

.specialLink a:hover{
	color: #33f;
	text-decoration: underline;
}
/*links in resources - selected for move*/
tr.selectedMove a:link,tr.selectedMove a:visited{
	color: silver;
}

/*links associated with an item in alist*/
/*see links below announcement title in ann list*/
.itemAction  a,.itemAction  a:link{
	color: #337;
	line-height: 2em;
	white-space: nowrap;
	text-decoration: none;
	border-style: solid;
	border-width: 0px 1px 1px 0px;
	margin-bottom:2em;
	margin-top:.2em;
	padding: .15em;
	background-color: #eee8e0;
}

.itemAction  a:visited{
		color: #337;
	text-decoration: none;
	margin-bottom:.2em;
}

.itemAction  a:hover{
	color: #27d; /*for ie*/
	background-color: #d6ddd3;
	margin-bottom:2em;
	margin-top:.2em;
	padding: .15em;
}

html>body .itemAction  a:hover{
	color: #27d;
	text-decoration: none !important; /*for other browsers*/
	border-bottom: 1px solid #000;
	margin-bottom:2em;
	margin-top:.2em;
	padding: .15em;
}

/*certain links are highlighted in resources after a selection*/
/*see "Paste copied here" after ccopying a selection in resources*/
.itemAction a.highlightlink{
	font-weight: bold;
}
/*links in resources - selected for move "deaden" the link*/
tr.selectedMove .itemAction a:link,tr.selectedMove .itemAction a:visited{
	color: silver;
	text-decoration: none;
	border-bottom: none;
}

/*links for the generic toolbar  - inline-block is there to make IE behave
see: http://www.quirksmode.org/bugreports/archives/2005/07/Wrapped_inlinenowrap_elements_lose_padding_left_in.html*/
.navIntraTool a, .navIntraTool a:link{
	margin: .5em .2em;
	text-decoration: none;
	color:#000;
	white-space: nowrap;
	padding:2px;
	border-style:solid;
	border-width:1px;
	border-color:#fff #333377 #333377 #fff;
	background:#EEE8E0;

}
* html .navIntraTool a, * html  .navIntraTool a:link{
	display:inline-block
}	
.navIntraTool a:visited{
		margin: .5em .2em;
	text-decoration: none;
	color:#000;
	white-space: nowrap;
	padding:2px;
	border-style:solid;
	border-width:1px;
	border-color:#fff #333377 #333377 #fff;
	background:#EEE8E0;
	display:inline-block

}

.navIntraTool a:hover{
	border-style:solid;
	border-width:1px;
	border-color:#fff #000 #000 #fff;
	background: #D6DDD3;
	color: #33f;
	text-decoration: underline;
}

.navIntraTool a:active{
	color: #33f;
	text-decoration: none;
}

/*where one is at in hierarchy - can be static or active links*/
.breadCrumb {
	font-size: 1.2em;
}
/*for accessib. some breadcrumbs have h3 children - format like normal text*/
.breadCrumb h3,.breadCrumb h4,.breadCrumb h5, .breadCrumb h6{
	font-size:85%
}

.breadCrumb a:link,.breadCrumb a:visited{
	color: #35b;
	text-decoration: none;
}

.breadCrumb a:hover{
	color: #33f;
	text-decoration: underline;
}


/*SECTION 3 CALENDAR SELECTORS*/
/*recommend - decide your palette first - then substitute colors here*/
table.calendar{
	background-color: #ffc;
}

table.calendar th{
	background-color: #ffc;
	font-weight: normal;
	text-align: center;
	border-collapse: collapse;
}

.bgActivity{
	background-color: #99FF33;
	border: 1px solid #27d;
	text-align: right;
}

.bgWithoutActivity{
	background-color: #fff;
	border: 1px solid #bbb;
	text-align: right;
}

.borderGrayYear{
	background-color: #eee;
	border: 1px solid #bbb;
	text-align: right;
}

.borderGrayDayWeek{
	border-bottom: none;
	border-collapse: collapse;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	border-top: 1px solid #bbb;
}

.borderGrayBackground{
	background-color: #99FF33;
	border-bottom: none;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	border-top: 1px solid #bbb;
}

.borderGrayTodayBgCenter{
	background-color: #ffc;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #bbb;
}

.borderGrayTodayEmptyMiddleBottom{
	background-color: white;
	border: 1px solid #bbb;
}

.borderGrayTodayEmptyMiddleCenter{
	background-color: white;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	border-top: 1px solid #bbb;
}

.borderGrayTodayLeftBottom{
	border-bottom: 1px solid #bbb;
	border-left: 1px solid #000;
	border-right: 1px solid #bbb;
	border-top: 1px solid #bbb;
}

.borderGrayTodayLeftCenter{
	border-left: 1px solid #000;
	border-right: 1px solid #bbb;
	border-top: 1px solid #bbb;
}

.borderGrayTodayMiddleCenter{
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	border-top: 1px solid #bbb;
}

.borderGrayTodayRightBottom{
	border-bottom: 1px solid #bbb;
	border-left: 1px solid #bbb;
	border-right: 1px solid #000;
	border-top: 1px solid #bbb;
}

.borderGrayTodayRightCenter{
	border-left: 1px solid #bbb;
	border-right: 1px solid #000;
	border-top: 1px solid #bbb;
}

.borderOnlyLeftDay{
	background-color: #99FF33;
	border-left: 1px solid #bbb;
}

.borderOnlyLeft{
	border-left: 1px solid #bbb;
}

.borderToday{
	border: 1px solid #000;
}

.borderTodayCenter{
	border-bottom: 1px solid #bbb;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #bbb;
}

.borderTodayTop{
	border-bottom: 1px solid #bbb;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #000;
}

.borderTodayWithActivity{
	background-color: #ffc;
	border: 1px solid #000;
	text-align: right;
}

.borderTodayWithoutActivity{
	background-color: #FFF;
	border: 1px solid #000;
	text-align: right;
}

.borderTopLeft{
	background-color: #99FF33;
	border-left: 1px solid #bbb;
	border-right: 1px solid  #bbb;
	border-top: 1px solid #bbb;
}

.borderTopLeftWhite{
	border-left: 1px solid #bbb;
	border-right: 1px solid  #bbb;
	border-top: 1px solid #bbb;
}

.borderWhiteYear{
	background-color: #ffc;
	border: 1px solid #fff;
	text-align: center;
}

.borderWhite{
	border-bottom: none;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
}

.borderGrayTodayCenter,.borderOnlyLeftTodayCenter{
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #bbb;
}

.borderGrayTodayEmptyRightBottom,.borderGrayTodayEmptyRightCenter{
	background-color: white;
	border-left: 1px solid #bbb;
	border-right: 1px solid #000;
	border-top: 1px solid #bbb;
}

.borderGrayTodayMiddleBottom,.borderFullGray,.borderGrayMonth{
	border: 1px solid #bbb;
}

.borderTodayBottom,.borderGrayTodayBottom,.borderOnlyLeftTodayBottom{
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #bbb;
}

table.calendar .event{
	background-color: #99FF33;
}

.timeCells{
	background:#eee
}

/*SECTION 4 TABULAR DATA*/

/*skinned header of standard tab. data table*/
.listHier th{
	background-color: #F6F5ED;
}
/*skinned cell of standard tab. data table*/
.listHier td{
	vertical-align: top;
	padding: .4em;
}

/*lines - provides rules and hover effects on some tables*/
table.lines{
	border-collapse: collapse;
}

table.lines tr:hover{
	background-color: #ffc;
}

table.lines td{
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #eee;
}
	
/*some rows needed to be excluded from the rule and hover - see resources see other sites toggle*/
table.lines tr.exclude:hover{
	background: transparent;
}

/*substracts the rules from the lines class- mantain the hover*/
table.nolines td{
	border-bottom: 0px solid #bbb;
	border-top: 0px solid #eee;
}
/*when an item has been copied - signal this*/
/*see resources*/
tr.selectedCopy{
	background: #ffd;
}

tr.selectedCopy td{
	border-top: 2px solid #bbb;
	border-bottom: 2px solid #bbb;
}
/*when an item has been cut - signal this*/
tr.selectedMove{
	color: silver;
	background: #eee;
}

tr.selectedMove td{
	border-top: 2px dotted #bbb;
	border-bottom: 2px dotted #bbb;
}
/*some rows need highlighting*/
/*see announcement 3rd view option*/
tr.highLightRow{
	background:#ddd;
}

tr.highLightRow:hover{
	background:#ddd !important;
}
tr.lightHighLightRow{
	background:#ffd;
}	
/*remove the arrow indicating rows (in resources after a selection, in discussion, etc)*/
.lines td.selected img{
	display: none;
}

/*when a row contained a searched for item has been found*/
/*see: discussion*/
tr.selectedFound{
	background: #cff;
}
/*skinned info for disclosure toggle*/
/*see: assignment*/
.discTria{
	background-color: #ddd;
	font-family: Arial,Helvetica,sans-serif;
}

/*SECTION 6 HIERARCHY*/

/*headers are used in many places for structuring things semantically - these are the plain headers - below there are others contextually defined*/
h2,h6{ 
	color: #555; 
	padding: 0; 
	font-weight: bold; 
	font-family: Arial,Helvetica,sans-serif; 
	margin: 1em 0; 
	background-color: transparent !important; 
} 


h2{
	font-size: 130%;
}

h3{
	font-size: 110%;
}

h4,h5,h6 {
	font-size: 100%;
}
h3,h4,h5{ 
	color: #555; 
	padding: 0; 
	font-weight: bold; 
	font-family: Arial,Helvetica,sans-serif; 
	margin: 1em 0 0 0; 
	background-color: transparent !important; 
} 
/*headers when they occur in a table*/
/*want to make them look like normal text - but structure the content*/
/*see: resources, any legacy list*/
.listHier th h3,.listHier th h4,.listHier th h5,.listHier th h6,.listHier td h3,.listHier td h4,.listHier td h5,.listHier td h6{
	margin: 0;
	padding: 0;
	color:#000;
	font-size: 1em;
	background: none;
	font-weight: normal;
	font-family: 'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif !important;
}

/*SECTION 7 INPUTS*/
/*see: create any item*/
label{
	color: #000;
	font-family: Arial,Helvetica,sans-serif;
	font-weight: normal;
	margin-top: .3em;
}

/*a required marker for a shorttext label/input pair*/
.shorttext .reqStar{
	color: #b11;
	width: auto;
	margin: 0 0 0 -1em;
	font-weight: bold;
	font-size: 1em;
	padding: 0;
}


/*for alignment when an element need the same left-margin as the input of a shorttext label/input pair*/
.labelindnt{
	font-size: 1em;
	margin: 0 0 0 17em !important;
}

.shorttext input{
}

.shorttext input:focus{
	border: 1px solid #000;
}

textarea{
	padding: .1em .3em;
	border: 1px solid #bbb;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 100%;
}

textarea:focus{
	border: 1px solid #000;
}


/*SECTION 8 TOOLBAR*/
/*see: any tool*/
.navIntraTool{
	background-color: #fff;	
	padding:.5em 0;
	margin: 0;
	line-height: 2em;
	border-bottom:1px  solid #D6DDD3;
	text-align: left;
	font-size: .9em;
	font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
}

/*ie does not understand font sizing well - so fix here with the star hack*/
* html .navIntraTool{
	font-size:.85em;
}
.navIntraTool:hover{
	border-bottom:1px solid silver;
}
.navIntraTool .searchField{
	border:1px solid silver;
	font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
	font-size: 1em;
	padding:.2em;
}
.navIntraTool .searchField:focus{border-color:#000}
/*some toolbars will have input buttons*/	
/*see: resources as instructor*/
.navIntraToolLink input{
	padding: 0;
	border: none;
	background: transparent;
}

.navIntraToolLink input.disabled{
	padding-bottom: 1px;
	border-bottom: none;
	background: transparent;
}

.navIntraToolLink input.enabled{
	color: #35b;
	border-bottom: 1px solid #35b;
	background: transparent;
}



/*SECTION 9 MESSAGES*/
/*see: create any item*/
.instruction{
	color: #555;
}
/*see: create a site*/
.step{
	font-size: 90%;
	height: auto;
}

/*the generic required marker*/
/*see: create any item*/
.reqStar{
	color: #b11;
	width: auto;
	margin-left: -1em;
	font-weight: bold;
	font-size: 1em;
	padding: 0;
	float: left;
	border-top: 3px solid #fff;
}
/*the required marker for a longtext label/input pair*/
/*see: create any item with a textarea*/
.longtext .reqStar{
	color: #b11;
	font-size: 1.2em;
	font-weight: normal;
	padding: 0 0 0 .1em;
	float: left;
}
/*when need to display the required marker inline as a part of a text*/
/*see: create any item - instruction message about requireed fields*/
.reqStarInline{
	color: #b11;
	font-size: 1.2em;
	vertical-align: middle;
	width: 1em;
}

/*inline blob used to indicate progress (see: upload a resource say)
visibility gets toggled*/
#submitnotif{
	background: #fff url(../images/warn.gif) .3em .3em no-repeat;
	border: 1px solid #b11;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	clear: none;
	color: #b11;
	font-size: small;
	text-decoration: blink;
	vertical-align: text-top;
	margin: 0;
	padding: 5px 5px 5px 25px;
}
/*SECTION 10 NAV  PANELS*/
/*positioning etc., are defined in base - here just the skin info*/
/*see any list with more than 20 items - announcements - for example*/
.navPanel{
	background-color:#fff
}
/*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 */
/*create any item - like an announcement*/
.act .active {
	color:#CC6633
}

/*SECTION 10 DATA PANELS*/
.highlightPanel
{
	border:1px solid #eee;
}

.infoPanel{
	border: 1px solid #27d;
}

.infoPanelHead{
	border: 1px solid #27d;
	background: #27d;
	color: #ffd;
}
/*see: topic content in discussion*/
.hierItemBlock, .hierItemBlockWrapper{
	padding: 0 .5em .5em .5em;
	border: 1px solid silver;
	margin-top: .5em;
	margin-bottom: .5em;
	width:auto;
	background: #fff;
}

table.hierItemBlock td{
	width:100%;
}
table.hierItemBlock td h4,table.hierItemBlock td h5,table.hierItemBlock td h6,
.hierItemBlockChild h4,.hierItemBlockChild h5,.hierItemBlockChild h6{
	display:inline;
}

.hierItemBlockWrapper {
	background: #FFFFF1;
	padding-top: 0.5em;
}

.hierItemBlock h4.textPanelHeader, .hierItemBlock h5.textPanelHeader, .hierItemBlock h6.textPanelHeader{
	border-bottom: 1px solid silver;	
	margin: 0 -.4em 1.0em -.4em;
	padding:.5em;
	background: #ffd !important;
}

.hierItemBlockChild{
	margin:.5em 0;
	margin-left:0.5em;
	padding:.5em;
	border-top:1px solid silver;
}

.hierItemBlockChild td{
	padding:.3em;
}

/*SECTION 11 LAYOUT REQUIRED IN SPECIFIC TOOLS*/
.chatListHeadWrapper{
	padding:.2em;
	margin-bottom: .5em;
	border-bottom: 1px dotted silver;
}

#chatPresenceHeadWrapper{
	margin-bottom: .5em;
	padding: 0 0  .2em .2em;
	border-bottom: 1px dotted silver;
}

#chatListWrapper{
	width: 83%;
	padding-bottom: .5em;
	float: left;
}

#chatPresenceWrapper{
	width: 16%;
	float: left;
	border-left: 1px dotted silver;
}

#chatList{
	margin: 0;
	padding-left: 1.2em;
	list-style: none;
	width: 96%;
}

#chatList li {
	margin: .2em 0 0 2em;
	padding: .2em 0;
	text-indent: -3em;
	line-height: 1.2em;
}

#chatList li .chatDate{
	font-size: .8em;
}

.discussionToolBarIframe{
	height: 5em;
	width: 100%;
}

#discussionLayoutTop-Bottom{
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: silver;
	clear: both;
	width: 100%;
}

#discussionLayoutTop-Bottom .discussionListWrapper{
	padding: 0;
	vertical-align: top;
}

#discussionLayoutTop-Bottom .discussionItemWrapper{
	padding: 0;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: silver;
	vertical-align: top;
}

#discussionLayoutLeft-Right{
	border-top: 1px solid silver;
	clear: both;
}

#discussionLayoutLeft-Right .discussionListWrapper{
	padding: 0;
	width: 50%;
	vertical-align: top;
}

#discussionLayoutLeft-Right .discussionItemWrapper{
	padding: 0;
	width: 50%;
	vertical-align: top;
/*	border-left: 1px solid orange;*/
	padding-left:.2em
}

tr.selectedFound td{

}


.rosterImage{
	border:1px solid #bbb;
	height: 75px;
	width:75px
}

.profileTable
{
	width:100%;

	
}
.rosterImageCol{
	width:80px;
	vertical-align:top
}

.profileData
{
	padding-left:2em;
	vertical-align:top
}
.profileData span{
	display:block
}
.profileSearch
{
	width:40%;
	text-align: right;
	vertical-align:top;

}
.profileSearch table
{
	border:1px solid #fff
}
.profileSearch span
{
	text-align:left
}
.profileSearchResultsNav
{
float:right
}
.profileSearchResultsList
{
float:right;
clear:both;
text-align:right;
margin-right:0;
width:auto !important
}
.profileSearchResultsListSingle
{
	text-align:left
}



/*SECTION 12 PORTAL THINGS*/

/*below for "presence in chat" functionality*/
.presenceList{
	font-size: .8em;
	list-style: none;
	margin: 0;
	padding-left: .1em;
}

.presenceList li {
	padding: 0 0 0 .7em;
	margin-bottom: .2em;
}

/*see presense list when one member is in chat room*/
.presenceList li.inChat {
	background: url(images/chatpresicon.gif) -.1em center no-repeat;
}

/*some definitions overriding tool_base.css for the external xlogin screen*/
.loginform label{
	color: #000;

}
.login td.logo{
	width: 13em;
	background:#fff url(images/logo_inst.gif) 1em 1em no-repeat
	
}
table.login{
border-left:1px solid #dedede;
border-right:1px solid #dedede;
border-top:0px solid #dedede;
border-bottom:1px solid #dedede;
}
table.login th{
	background: url(images/menu_bg.gif) repeat-x top #f1f4f6;
border-bottom:1px solid #dedede;
font-size:14px;
}
table.loginform td{color:#555555}

table.loginform td input{width:110px;}
input#submit{width:80px; line-height:22px;}

/*temp work for mneme - will incorporate later to the rest 
tables will be of various types according to their function and meaning - tableFlat, tableAction, tableHierarchical, tableItemSummary 
right now "namespaced" for mneme only to avoid any possible conflicts*/
.samSection .tableAction td {
	vertical-align:middle
}
.samSection .tableAction td input{
	margin: 0 5px 1px 1px;
	vertical-align:top;
}
.samSection .tableAction td label{
	border:1px solid #bbb;
	padding:0 3px;
	background: #ddd;
}
.samSection{
	margin-left: 4em;
	margin-right: 4em;
	margin-top:2em;
	margin-bottom:2em;
}
.samSectionHeader{
	margin-left: -2em;
	margin-right: -2em;
}

/* 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:#07b;
	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{
	vertical-align: middle;
}
.menuOpen{
	cursor:pointer;
}