/* 	The following selectors change ALL text on the site to relative-sized, scaleable font EXCEPT for the navigation styles -- those should still be defined with pixel-based sizing */

body {
	font : 79%/100% arial, helvetica, sans-serif;
	margin : 0;
	}

div, p, span, li, td, table	{font-size : 1em;}


/* 	Design Styles: OVCR */

ul#designNavList li a:hover, ul#designNavList li#active a:hover	{
	background: transparent;
}

ul#designNavList		{
	text-align: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
	width: 140px;
	}
		
	
.designMainText {
	width: 95%;
	padding: 20px;
	vertical-align: top;
	margin-right : 10px;
}

* html .designMainText	{
	width: 100%;
	margin-right : 0px;
	}

.designBgRed {
	background: #621010;
}

.designBgWhite {
	background: #FFFFFF;
}

.designBgBlue {
	background: #000066;
}	


.designUserName {
	font-family: arial, helvetica, verdana, sans-serif;
	background: #621010;
	color: white;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	display: block;
	width: 162px;
}

.designUserText {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.designProfileText {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	font-size: 12px;
	text-align: center;
}

.designProfileText:visited {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	font-size: 12px;
	text-decoration: none;
}

.designProfileText:link {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	font-size: 12px;
	text-decoration: none;
}

.designProfileText:hover {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	text-decoration: underline;
}

.designLeftNav {
	font-family: arial, helvetica, verdana, sans-serif;
	FONT-SIZE: 11px;
	vertical-align: top;
	background: #000066;
	width: 162px;
}

.designNavText {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	font-size: 11px;
	padding-left: 5px;
}

.designLeftNav p {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	font-size: 11px;
	margin: 0;
	padding-bottom: 10px;
}

.designNavText:visited {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	font-size: 11px;
	text-decoration: none;
}

.designNavText:link {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	font-size: 11px;
	text-decoration: none;
}

.designNavText:hover {
	font-family: arial, helvetica, verdana, sans-serif;
	color: white;
	text-decoration: underline;
}

.designLoginText {
	font-family: verdana, arial, sans-serif;
	color: white;
	font-size: 11px;
}


/*	Standard Styles */

h1 {
	font-family: arial, helvetica, verdana, sans-serif;
    color: #000066;
	font-size: 1.6em;
}

h2 {
	font-family: arial, helvetica, verdana, sans-serif;
    color: #990000;
	font-size: 1.2em;
}

h3 {
	font-family: arial, helvetica, verdana, sans-serif;
    color: #000066;
	font-size: 1em;
}

a:visited {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #0000FF;
	text-decoration: underline;
}

a:hover {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #990000;
	text-decoration: none;
}

a:link {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #0000FF;
	
}

a img	{
	text-decoration: none;
	}

.buttonLink a:visited {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #0000FF;
	text-decoration: none;
}

.buttonLink a:hover {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #990000;
	text-decoration: underline;
}

.buttonLink a:link {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #0000FF;
	text-decoration: none;
}

.footer {
	font-family: arial, helvetica, verdana, sans-serif;
	font-size: 90%;
	color: #333333;
	text-align: center;
	clear: both;
}

.footer:visited {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #666699;
	text-decoration: none;
}

.footer:link {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #0000FF;
	text-decoration: none;
}

.footer:hover {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #990000;
	text-decoration: underline;
}



/* Table Designs */


.noBorderTable {
	border: none 0px #ffffff;
	border-style:none;
	border-width:0px;
}

.horizontalTable {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #000000;
	BORDER: 1px solid #000066;
	BORDER-COLLAPSE: collapse;
	PADDING: 1px;
	MARGIN: 0px; 
	COLOR: black; 
	BACKGROUND-COLOR: white; 
	border-spacing: 1px; 
	empty-cells: show
}

.horizontalTable td {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #000000;
	margin: 0px;
	padding: 5px 8px;
	border: 1px solid #ddd;
	BORDER-COLLAPSE: collapse;
	COLOR: black; 
	BACKGROUND-COLOR: white; 
	border-spacing: 1px; 
	empty-cells: show
}

.horizontalTable TH {
	font-family: arial, helvetica, verdana, sans-serif;
	BORDER: 1px solid #ddd;
	BORDER-COLLAPSE: collapse;
	padding: 6px 4px;
	MARGIN: 0px; 
	COLOR: black; 
	BACKGROUND-COLOR: rgb(236,236,236); 
	border-spacing: 1px; 
	empty-cells: show
}

.horizontalTableHeader TD {
	text-align:center;
	font-weight:bold;
	padding: 6px 4px;
	BORDER: 1px solid #bbb;
	BACKGROUND-COLOR: #eee; 
}

.horizontalTableAlternateRow td {
	background-color: rgb(244,244,244);
	}

tr.altRow td {
	background-color: rgb(244,244,244);
	}

.resultsTable {
	font-family: arial, helvetica, verdana, sans-serif;
	BORDER: #000066 1px solid; 
	padding: 1px; 
	margin: 0px; 
	BACKGROUND-COLOR: white; 
	empty-cells: show
}

.resultsTableHeader {
	text-align:center;
	font-weight:bold;
	BORDER: 1px solid #000066;
	BACKGROUND-COLOR: white; 
}

.resultsTable tr	{border-bottom : 1px solid #eee;}

.resultsTable TD {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #000000;
	padding: 3px 5px; 
	margin: 0px; 
	BACKGROUND-COLOR: white;
	border-bottom : 1px solid #eee;
}

.searchTable {
	font-family: arial, helvetica, verdana, sans-serif;
	BORDER: #000066 1px solid; 
	padding: 1px; 
	margin: 0px; 
	BACKGROUND-COLOR: white; 
	empty-cells: show
}

.searchTable TD {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #000000;
	padding: 1px 3px; 
	margin: 0px; 
	BACKGROUND-COLOR: white;
}

.formTable {
	font-family: arial, helvetica, verdana, sans-serif;
	BORDER: 1px solid #000066; 
	padding: 1px; 
	margin: 0px; 
	BACKGROUND-COLOR: white; 
	empty-cells: show
}

.formTable TH {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #000000;
	padding: 1px 3px; 
	margin: 0px; 
	BACKGROUND-COLOR: white;
	text-align:right;
	font-weight:bold;
}


.evaluationQuestionTable {
	border : 1px solid #bbb;
	margin-bottom : 25px;
	}

.evaluationQuestionTable th	{
	background : #ddd;
	padding : 4px 8px;
	border-bottom : 1px solid #bbb;
	text-align : left;
	}

.evaluationQuestionTable td	{
	/*background : rgb(248,248,248);
	padding : 8px;*/
	}


/* Form Designs - Custom */

.errorText {
    font-weight: bold;
	color: Red;
	}

.errormessage	{
    font-weight: bold;
	color: Red;
	}

.hidden {
	display:none;
}

.title	{
	font-weight: bold;
}

.buttonLink a	{
	COLOR: #666666;
}

a.gridLink:visited {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #660000;
	text-decoration: underline;
}

a.gridLink:hover {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #000000;
	text-decoration: underline;
}

a.gridLink:link {
	font-family: arial, helvetica, verdana, sans-serif;
	color: #990000;
	text-decoration: underline;
}

.footNote	{
	font: .86em arial, sans-serif;
	}


/* Service Pack 3 enhancements - new styles, starting with the home page     */

.centerHomeColumn{
	padding : 0px 25px 20px 0px;
	}

.announcementsHomePage	{
	margin : 25px 25px 0px 0px;
	padding : 8px;
	background : rgb(243,243,243);
	width : 95%;
	border : 1px solid #000;
	}

.rightHomeColumn	{
	margin-left:20px;
	background : rgb(243,243,243);
	border-left : 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	}

.myHeader	{
	background : #cacaca;
	font-weight : bold;
	font-size : 121%;
	padding : 7px 14px;
	border-top : 1px solid #fff;
	border-bottom : 1px solid #fff;
	}
	
.myContent	{
	padding : 14px;
	line-height: 130%;
	}
					
.courseName	{
	font-weight : bold;
	padding : 3px 0px;
	}

ul.courseList	{
	margin : 0px 0px 0px -10px;
	}

* html ul.courseList	{
	margin : 0px 15px;
	}

li.courseName	{
	padding : 3px 0px;
	font-size : 91%;
	}

.assessAlert	{
	font : 91% verdana;
	padding : 8px 12px;
	border : 1px solid #000;
	background: rgb(248,248,248);
	margin : 6px 0px 20px 0px;
	}

.assessAlert a	{
	font-weight : bold;
	margin-bottom : 19px;
	}

.homeCourseDetails	{
	margin-bottom : 15px;
	}
	
.myCourseDetails	{
	font-size : .91em;
	margin-bottom : 5px;
	}
	
.myCurrentNote	{
	font-size : .91em;
	padding : 0px 0px 16px 0px;
	}
					
.myAssessmentsNote	{
	font-size : .91em;
	padding : 15px 0px;
	}
					
tr.pageRow td {
	text-align : right;
	background : rgb(246,246,246); 
	padding : 10px 8px;
	font-size : 91%;
	}
	
tr.pageRow td a	{
	border : 1px solid #ccc;
	background : rgb(220,220,220);
	padding : 4px;
	text-decoration : none;
	margin : 0 -1px;
	}
	
tr.pageRow td a:hover	{
	background : rgb(200,200,200);
	text-decoration : none;
	}
	
tr.pageRow td a:visited	{
	text-decoration : none;
	}
	
tr.pageRow td span	{
	border : 1px solid #000;
	background :  #000;
	padding : 4px; 
	color : #fff;
	font-weight : bold;
	}

div.myCoursesCompletedHd	{
	margin : 5px 0;
	text-align:left;
	color:#000;
	}

.showHide	{
	font-size : .76em;
	font-weight : normal;
	}
	
h2.courseTitle	{
	color : #000;
	margin-top : 25px;
	}

/*  The styles in this section are for the LCMS  */

.participant	{
	margin-left : 10px;
	margin-bottom : 15px;
}

.cmControl {
	border : 1px solid #dddddd;
	padding : 4px;
	margin : 0px; 
	background-color : #eeeeee;
}

#boxFloatRight {
	float : right;
	width: 200px;
	\width: 220px;     /*  The backslash next to the width declaration is there on purpose - it's a CSS box model hack for IE 5  */
	w\idth: 200px;     /*  The backslash inside the width declaration is there on purpose - please keep as-is  */
	margin: 20px 0px 10px 20px;
	border : 1px solid #339999;
	padding : 6px;
	background-color : #e4ecf8;
	}

.boxFloatRightList {
	margin-left : 20px;
	}

.boxFloatRightList li {
	margin-bottom : 8px;
	}

.hdCMS	{
	color : #000000;
	}
/*  This section is for star rating control*/
.star-image
{
	padding: 0px;
	margin: 0px;
	position: relative;
}
.star-rating {
	list-style:none;
	margin: 3px;
	padding:0px;
	width: 100px;
	height: 20px;
	position: relative;
	background: url(/images/star_rating.gif) top left repeat-x;
}
.star-rating li{
	padding:0px;
	margin:0px;
	/*\*/
	float: left;
	/* */
}
.star-rating li a{
	display:block;
	width:20px;
	height: 20px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
	background-image:none;	
}
.star-rating li a:hover{
	background: url(/images/star_rating.gif) 0px -20px repeat-x;
	z-index: 1;
	left: 0px;	
}
.star-rating a.one-star{
	left: 0px;
}
.star-rating a.one-star:hover{
	width:20px;
}
.star-rating a.two-stars{
	left:20px;
}
.star-rating a.two-stars:hover{
	width: 40px;
}
.star-rating a.three-stars:hover{
	width: 60px;
}
.star-rating a.three-stars{
	left: 40px;
}
.star-rating a.four-stars{
	left: 60px;
}
.star-rating a.four-stars:hover{
	width: 80px;
}
.star-rating a.five-stars{
	left: 80px;
}
.star-rating a.five-stars:hover{
	width: 100px;
}
/* End of Star Rating styles */

/* Tab control styles */

a.tabcell    {
    padding: 2px 4px;
    border: 1px solid #000;
    background-color:#ccc;
    color:#000;
    text-align:center;
    text-decoration: none;
    font: 8pt Verdana, Arial, Helvetica, sans-serif;
    height: 40px;
    }
    
.tabcell:visited    {
    padding: 2px 4px;
    border: 1px solid #000;
    background-color:#ccc;
    color:#000;
    text-align:center;
    font: 8pt Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
    }
    
.tabcell:link    {
    padding: 2px 4px;
    border: 1px solid #000;
    background-color:#ccc;
    color:#000;
    text-align:center;
    font: 8pt Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
    }
    
.tabcell:hover    {
    background-color:#666;
    color: #000;
    font: 8pt Verdana, Arial, Helvetica, sans-serif;
    }
    
.selectedtabcell    {
    padding: 2px 4px;
    border: 1px solid #000;
    background-color:#fff;
    color:#666;
    text-decoration:none;
    font: 8pt Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    height: 40px;
    }
    
.selectedtabcell:visited    {
    padding: 2px 4px;
    border: 1px solid #000;
    background-color:#fff;
    color:#000000;
    text-decoration:none;
    font: 8pt Verdana, Arial, Helvetica, sans-serif;
    }
    
.selectedtabcell:link    {
    padding: 2px 4px;
    border: 1px solid #000;
    background-color:#fff;
    color:#600;
    text-decoration:none;
    font: 8pt Verdana, Arial, Helvetica, sans-serif;
    }
    
.selectedtabcell:hover    {
    font: 8pt Verdana, Arial, Helvetica, sans-serif;
    }
    
.tabstrip    {
    margin-left: -20px;
    width: 900px;
    }
    
*html, html .tabstrip    {
    width: auto;
    }
/* End of Tab Control Styles*/

a.linkButton {
  padding: 3px 8px 2px 8px;
  background: url(../../../images/linkButton_bg.gif) bottom right no-repeat;
  border-left: 1px solid #bbb;
  text-decoration: none;
  color: #333;
  text-decoration: none;
  line-height: 22px;
  margin-left: 3px;
  }

a.linkButton:visited	{text-decoration:none;}

 #box {
	font: 80%/1.6 Arial, Helvetica, sans-serif;
	color: #2D486C;
	background-color: transparent;
	margin: 0 20px 10px 0;
}


.compatibilityImages {
	padding:4px;
	border:2px double #000000;
	border-radius:25px;
	background-color: #666;
	margin: 5px;
}
.compatibilityToolWord {
	font-style: italic;
	font-weight: bold;
	color: #F00;
}


.removeButton	{
	 width: 100px;
}


.loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

    .loading-overlay .spinner {
        display: inline-block;
        width: 200px;
        height: 200px;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top-color: #000;
        animation: spin 1s linear infinite;
        margin-bottom: 10px;
    }

.loading-text {
    font-size: 16px;
    color: #000;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}