/* this page consists of all fundamental layout styles shared between ALL SKINS FOR THE MY COURSES PAGE */

/*++++++++++++++++++++++++++ BASIC ELEMENTS +++++++++++++++++++++++++++++++++*/

.clear { clear: both; }
.floatRight { float: right; }
.floatLeft { float: left; }
.alignCenter { text-align: center; }
.alignRight { text-align: right; }
.alert { color:#C00; }
.leftMargin {	margin-left: 10px; }
form { margin: 0;	padding: 0; }
.width20 { width: 20%; }
.width70 { width: 70%; }
.width100 { width: 100px; }
.noMarginTop { margin-top: 0; }

img {
	border: 0;
}


/*++++++++++++++++++++++++++ BASIC LAYOUT +++++++++++++++++++++++++++++++++*/
body {  
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #333;
	background: url(../images/myCoursesBorderL.gif) top left repeat-y; 
}
#wrapper {
	clear: both;
	padding: 0;
	margin: 0;
}

/*++++++++++++++++++++++++++ LEFT COLUMN +++++++++++++++++++++++++++++++++*/
#leftColumn {
	float: left;
	width: 160px;
	margin: 0;
	padding: 0;
}
#leftHeader {
	height: 110px; /* If you change this height, change leftHeaderHeight var in resize.js */
}
#leftScroller  {
	margin: 0;
	padding: 0;
	background: url(../images/myCoursesBackgroundL.jpg) top left no-repeat;
}	

/*++++++++++++++++++++++++++ LEFT COLUMN: SubMenu +++++++++++++++++++++++++++++++++*/
ul.subMenuHeader {
	margin: 0 0 10px 0;
	padding: 0;
	list-style-type: none;
	border-bottom: 1px solid #585858;
}
ul.subMenuHeader li a {
	background: #b4b4b4 url(../images/subMenuHeader.gif) top left no-repeat;
	display: block;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 34px;
	padding: 0 0 0 9px;
	height: 34px;
	color: #23429c;
	text-decoration: none;
}
ul.subMenuHeader li a:hover {
	text-decoration: underline;
}
ul.subMenuHeader li a.current, ul.subMenuHeader li div.current {
	background: #b4b4b4 url(../images/subMenuHeaderCurrent.gif) top left no-repeat;
}
ul.subMenuHeader li a.new, ul.subMenuHeader li div.new {
	background: #b4b4b4 url(../images/subMenuHeaderNew.gif) top left no-repeat;
}
ul.subMenuHeader li a.new:hover {
	background: #b4b4b4 url(../images/subMenuHeaderNew2.gif) top left no-repeat;
}

ul.subMenuHeader li div.SearchFeature {
	background: #b4b4b4 url(../images/subMenuHeader.gif) top left no-repeat;
	display: block;
	font-weight: bold;
	height: 34px;
	color: #23429c;
	text-decoration: none;
	padding-left: 6px;
	font-size: 1em;
	line-height: normal;
}
ul.subMenuHeader li div.new {
	background: #b4b4b4 url(../images/subMenuHeader.gif) top left no-repeat;
}
ul.subMenuHeader li div.current {
	background: #b4b4b4 url(../images/subMenuHeaderCurrent.gif) top left no-repeat;
}
ul.subMenuHeader li div.SearchFeature input {
	margin-top: 5px;
	width: 84px;
}
ul.subMenuHeader li div.SearchFeature a
{
	padding-left: 6px;
	background: inherit;
	font-size: .7em;
	position: absolute;
	right: 6px;
	top: 0;
	text-decoration: none;
}

ul.subMenuHeader li div.SearchFeature a.tooltip:hover span { /*the span will display just on :hover state*/
	display: block;
	position: absolute;
	line-height: 1.3em;
	text-decoration: none;
	top: -6em; 
	left: -90px; 
	border: 1px solid #0cf;
	background-color: #f3f69f; 
	color: #000;
	text-align: left;
	padding: 3px;
	font-size: 1.2em;
	width: 145px;
	font-weight: normal;
}



/*++++++++++++++++++++++++++ LEFT COLUMN: Details +++++++++++++++++++++++++++++++++*/
.posRel {
	position: relative;
}
.edit {
	color: #3053ba;
	font-weight: bold;
	font-size: .7em;
	position: absolute;
	right: 4px;
	top: 0;
}
a.tooltip {
	z-index: 24; 
	text-decoration:none;
}
a.tooltip:hover {
	z-index: 25; 
	background-color: #ff0;
}
a.tooltip span {
	display: none;
}
a.tooltip:hover span { /*the span will display just on :hover state*/
	display: block;
	position: absolute;
	top: -5em; 
	left: -12em; 
	width:15em;
	border: 1px solid #0cf;
	background-color: #f3f69f; 
	color: #000;
	text-align: left;
	padding: 3px;
	font-size: 1.2em;
	width: 150px;
	font-weight: normal;
}



.detailsHead{
	color: #585858;
	font-weight: bold;
	font-size: .9em;
	margin-left: 10px;
	background: url(../images/detailsRule.gif) bottom left no-repeat;
	display: block;
	padding-bottom: 4px;
	margin-top: 17px;
}

ul.details {
	margin: 5px 0 15px 5px;
	padding: 0;
	font-size: .99em;
	list-style-type: none;
}
ul.details input.valueField {	width: 140px; }

ul.details li a:link, ul.details li a:visited, ul.details li a:hover, ul.details li a:active  {
	color: #061868;
	font-weight: bold;
	margin-bottom: 5px;
	display: block;
	text-decoration: underline;
}
ul.details li a:hover {
	text-decoration: none;
}
ul.details li.label, ul.details li.value, ul.details li.value a {
	color: #23429d;
	font-weight: bold;
	font-size: 1em;
	padding-left: 5px;
	margin-bottom: 2px;
}
ul.details li.value a {
	font-size: .9em;
}
ul.details li.value span.label {
	position: relative; top: -1px;
}
ul.details li.value {
	color: #585a59;
	font-weight: normal;
}
ul.details input.valueField {
	color: #061868;
	font-size: smaller;
}


/*++++++++++++++++++++++++++ HEADER LEFT +++++++++++++++++++++++++++++++++*/
#header {
	height: 110px;/* If you change this height, change headerHeight var in resize.js */
	margin: 0;
	padding: 0;
	margin-left: 160px;
	position: relative;
}
#headerTL {
	height: 110px;
}
#headerTL h1, #headerTL h2 {   
	margin: 0; 
	padding: 0;  
}
#headerTL h1 { 
	position: absolute;
	top: 25px;
}
#headerTL h2 { 
	position: absolute;
	top: 55px;
}
#personalization {
	position: absolute;
	top: 78px; /* if you change this, also change this value in all alternate IE css docs */
	float: left;
}
.date {
	padding-left: 17px;
}
.menuHeader {
	position: absolute;
	top: 88px;
}


/*++++++++++++++++++++++++++ HEADER RIGHT +++++++++++++++++++++++++++++++++*/
#headerTR {
	position: absolute;
	top: 0;
	right: 0;
	height: 110px;
}
#headerTR ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#headerTR ul li {
	float: left;
}

/*++++++++++++++++++++++++++ MAIN CONTENT +++++++++++++++++++++++++++++++++*/
#contentScroller {
	padding: 0;
	margin: 0;
}
#contentScroller p {
	font-size: 1.2em;
}
#contentBody {
	padding: 10px;
	margin-left: 160px;
	/*margin-right: 160px; This would be if there was a right side column */
	background: #fff; 
	/* This would be if there was a right side column: url(../../images/skin1/myCourses/bodybackBorderR.gif) top right repeat-y */
}

/*++++++++++++++++++++++++++ MAIN CONTENT: My Courses Table - NOTICE BOX +++++++++++++++++++++++++++++++++*/
#notice {
	border: 1px solid #899ee4;
	background: #f4f4f4 url(../images/notice.gif) no-repeat;
	padding: 5px 0 10px 120px;
	margin: 10px 0 20px 0;
	vertical-align: middle;
	position: relative;
}
#notice a:link, #notice a:visited, #notice a:hover, #notice a:active {
	color: #5b5b5b;
	text-decoration: underline;

}
#notice a:hover {
	text-decoration: none;
}
#notice .close {
	position: absolute;
	top: 9px;
	right: 10px;
}

/*++++++++++++++++++++++++++ MAIN CONTENT: My Courses Table - TABS +++++++++++++++++++++++++++++++++*/
.tabL {
	background: url(../images/myCoursesTabL.gif) no-repeat;
	width: 12px;
	height: 39px;
}
.tabTxt {
	background: url(../images/myCoursesTabTxt.gif) repeat-x;
	height: 39px;
	color: #fff;
	font-weight: bold;
	line-height: 29px;
	white-space: nowrap;
}
.tabR {
	background: url(../images/myCoursesTabR.gif) no-repeat;
	width: 47px;
	height: 39px;
}
.tabR2 {
	background: url(../images/myCoursesTabR2.gif) bottom repeat-x;
	height: 39px;
}
.tabR3 {
	background: url(../images/myCoursesTabR3.gif) bottom no-repeat;
	width: 12px;
	height: 39px;
}
.tabLOff {
	background: url(../images/myCoursesTabLOff.gif) no-repeat;
	width: 12px;
	height: 39px;
}
.tabTxtOff {
	background: url(../images/myCoursesTabTxtOff.gif) repeat-x;
	height: 39px;
}
.tabTxtOff a:link, .tabTxtOff a:visited, .tabTxtOff a:hover, .tabTxtOff a:active {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	display: block;
	height: 39px;
	line-height: 29px;
}
.tabTxtOff a:hover {
	text-decoration: underline;
}
.tabROff {
	background: url(../images/myCoursesTabROff.gif) no-repeat;
	width: 47px;
	height: 39px;
}

/*++++++++++++++++++++++++++ MAIN CONTENT: My Courses Table +++++++++++++++++++++++++++++++++*/
#myCourses th {
	background: #e9e6d0;
	height: 19px;
	padding: 0;
	font-size: .9em;
	color: #152c92;
	font-weight: bold;
	border-bottom: 1px solid #666;
}
#myCourses th.numCol, #myCourses td.numCol {
	text-align: right;
}
#myCourses th.nameCol, #myCourses td.nameCol {
	padding-left: 0;
	color: #999;
}
#myCourses td.inProgress, #myCourses td.completed, #myCourses td.completed a {
	color: #606261;
	font-weight: bold;
}
#myCourses .actionCols {
	width: 90px;
	text-align: left;
}
#myCourses .actionCols a:link, #myCourses .actionCols a:visited, #myCourses .actionCols a:hover, #myCourses .actionCols a:active {
	color: #404040;
	text-decoration: underline;
}
#myCourses .actionCols a:hover {
	text-decoration: none;
}
#myCourses th.checks, #myCourses td.checks {
	width: 15px;
	padding: 0 2px;
}
#myCourses td.checks img {
	text-align: center;
}
.paddingLeft {
	padding-left: 18px;
}
.paddingRight {
	padding-right: 20px;
}

/*++++++++++++++++++++++++++ Rollover Buttons +++++++++++++++++++++++++++++++++*/
#myCourses a span {
	display: none;
}
#myCourses a:link.buttonGB, #myCourses a:visited.buttonGB, #myCourses a:hover.buttonGB, #myCourses a:active.buttonGB {
	background: url(../images/button_greenBlue.gif) no-repeat;
	width: 60px;
	height: 15px;
	display: block;
 	padding: 0;
  text-decoration: none;
	font-size: .8em;
  font-weight:bold;
  color:#333;
	line-height: 15px;
	text-align: center;
}
#myCourses a:hover.buttonGB {
	background-position:0% -15px;
	color: #fff;
}

#myCourses table.SearchResults td.taskNameCol {
	color: Black;
}
#myCourses table.SearchResults td.nameCol a {
	text-decoration: none;
}
#myCourses table.SearchResults td.nameCol a:hover {
	text-decoration: underline;
}

/*++++++++++++++++++++++++++ Progress bars +++++++++++++++++++++++++++++++++*/
.progressBar {
	height: 12px;
	background: #555;
	text-align: left;
	width:90px;
	margin: 5px 0;
}
.progressBar img {
	border: 1px solid #555;
}

/*++++++++++++++++++++++++++ MAIN CONTENT: My Courses Table Area +++++++++++++++++++++++++++++++++*/

#contentBody h2 {
	color: #27428f;
	margin: 0 0 5px 0;
	padding: 2px;
	font-size: 1.4em;
	font-weight: normal;
}
#myCourses {
	position: relative;
}
#myCourses table {
	margin-top: 16px;
}	
#myCourses table.myCourses {
	width: 100%;
	margin-bottom: 30px;
	margin-top: 0px;
}
table.myCourses a:link, table.myCourses a:visited, table.myCourses a:hover, table.myCourses a:active {
	color: #a9a9a9;
	text-decoration: none;
}
table.myCourses a:hover {
	text-decoration: none;
}
table.myCourses a:link.completed, table.myCourses a:visited.completed, table.myCourses a:hover.completed, table.myCourses a:active.completed {
	color: #606261;
	text-decoration: underline;
	font-weight: bold;
}
table.myCourses a:hover.completed {
	text-decoration: none;
}
table.myCourses a:link.inProgress, table.myCourses a:visited.inProgress, table.myCourses a:hover.inProgress, table.myCourses a:active.inProgress {
	color: #606261;
	text-decoration: underline;
	font-weight: bold;
}
table.myCourses a:hover.inProgress {
	text-decoration: none;
}
table.myCourses thead, th, .alignLeft { 
	text-align: left;
}
table.myCourses thead th { 
	color: #606261;
}
table.myCourses{
	border-bottom: 1px solid #5B5B5B;
}
table.myCourses tbody th { 
	background: #fff;
	color: #606261;
	font-size: .9em;
}
table.myCourses tbody td {
	background: #fff url(../images/myCoursesBackgroundTD.gif) top repeat-x;
}
.borderLeft {
	border-left: 1px solid #5B5B5B;
}
.borderRight {
	border-right: 1px solid #5B5B5B;
}
.under-tab {
	border: 1px solid #5B5B5B;
	border-top: none;
	background: #0F278D;
	color: #eee;
	padding: 6px 20px;
	/*position: relative;*/
}
.under-tab a {
	color: #fff;
	text-decoration: underline;
}
.under-tab a:hover {
	color: #fff;
	text-decoration: none;
}
.under-tab span.right {
	position: absolute;
	top: 5px;
	right: 10px;
}
.complete-by {
	position: absolute; 
	right: 5px; 
	line-height: 25px;
}
#myCourses th.deadline div.BackToCourses {
	display: inline;
	position: absolute;
	text-align: right;
	right: 12px;
}
#myCourses th.deadline div.instructor {
	display: inline;
	margin-left: 0px;
}
#myCourses th.deadline a {
	color: #eee;
	text-decoration: underline;
}
#myCourses th.deadline a:hover {
	text-decoration: none;
}
table.instructorBio {
	width: 100%;
}

table.instructorBio tbody {
	padding-top: 16pt;
	padding-bottom: 16pt;
}
table.instructorBio td.InstructorBio {
	text-align: left;
	width: 95%;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
table.instructorBio td.InstructorName {
	text-align: center;
}
table.instructorBio td.InstructorName span.InstructorName {
	font-style: italic;
}

#intro {
	width: 70%;
	background: #dcdde1;
	border: 1px solid #999;
	color: #5B5B5B;
	padding: 5px;
	margin-bottom: 20px;
}
#connection {
	position: absolute;
	right: 30px;
	top: 120px;
}
#connection h6 {
	margin: 0;
	font-size: 1em;
	color: #666;
}


/*++++++++++++++++++++++++++ MAIN CONTENT: Search Results +++++++++++++++++++++++++++++++++*/
p.SearchResultsStatement {
	margin-top: 20pt;
	margin-bottom: 0pt;
	text-align: center;
}
p.SearchTerm {
	margin-top: 8pt;
	margin-bottom: 20pt;
	text-align: center;
	padding-right: 20pt;	
}
p.SearchTerm span.SearchTerm {
	color: #0F278D;
	font-style: italic;
}