/*
Title:			ETD Training
Description:	Blue Version
Author:			Visualcode Limited
Date: 			Thursday 25th October 2007.
Version:		1.0
*/


body {
	font:12px/18px "Lucida Grande", Geneva, Verdana, Tahoma, Arial, sans-serif;
	color:#333;
	margin:0;
	padding:0;
	background:#455560 url(../../images/blue/bodyBackground.png) repeat;
	}

input, 
button, 
select, 
textarea {
	font:12px/18px "Lucida Grande", Geneva, Verdana, Tahoma, Arial, sans-serif;
	}
	
a:link {
	color: #00bce4;
	text-decoration: none;
}

a:visited {
	color: #00bce4;
	text-decoration: none;
}

a:active {
	color: #00bce4;
	text-decoration: none;
}

 a:hover {
	color: #013c63;
	text-decoration: none;
}

h1, h2, h3{
	padding:0;
	margin:0;
	font-weight:normal;
	}
	
h1 {
	font-size: 1.8em;
	color: #004C86;
	}

h2 {
	color:#666;
	font-size: 1.5em;
	}

h3 {
	color:#333;
	font-size: 1.3em;
	}

hr {
	border: none;
	border-top: 1px solid #00bce4;
	height: 1px;
	margin: 10px auto 20px auto;
	padding: 0;
	color:#FFF;
	}
	


/* ______________________ Start Layout ______________________ */

#container{
	padding:0;
	margin:0;
	background:transparent url(../../images/blue/background.png) repeat-x;
	}

#wrapper {
	width:760px;
	margin:0 auto;
	}
	
#header {
	width:100%;
	height:70px;
	color:#FFF;
	padding-bottom:10px;
	}

#Logo {
	width:130px;
	height:70px;
	background:url(../../images/blue/bLogo.gif) no-repeat;
	float:left;
	}

#printLogo {
	display:none;
	position:absolute;
	left:-300px;
	top:-300px;
	}
/* ______________________ Top Navigation ______________________ */

#Top{height:30px; padding-top:25px;}

#Top a:link{color: #FFF;}
#Top a:visited{color: #FFF;}
#Top a:active{color: #FFF;}
#Top a:hover{color: #00BCE4;}


#Top ul{
	margin: 0 ;
	padding: 0;
	list-style:none;
	font-size:80%;
	}

#Top li {
	padding:0px 10px 0 10px;
	border-right:#455560 solid 1px;
	list-style:none;
	display:inline;
	text-align:center; 
	float:right;
	}

/* ______________________ Intro ______________________ */	

#intro{
	background:url(../../images/blue/introGraphic.gif) no-repeat;
	height:63px;
	padding:15px;
	margin-bottom:10px;
	}

#intro h1{
	font-weight:normal;
	color:#FFF;
	font-size:2.5em;
	}
	
/* ______________________ STAGES ______________________ */	
	
/* -------------- Stage1 Area -------------- */

.stage1{
	background:#FFF url(../../images/blue/stage1top.gif) no-repeat;
	margin-bottom:10px;
	}

.stage1alt{
	background:#FFF url(../../images/blue/stage1top2.gif) no-repeat;
	margin-bottom:10px;
	}
	
.st_inner{
	padding:15px;
	}

.st_xinha ul li{
	background:url(../../images/blue/bullet.gif) no-repeat 3px 4px;
	list-style:none;
	padding-left:30px;
	margin-bottom:10px;
	}

.st_clear{
	background:transparent url(../../images/blue/stage1bottom.gif) no-repeat left bottom;
	height:5px;
	}
	
/* -------------- Stage1 Controls -------------- */

.st_control{
	background:#3f4e58 url(../../images/blue/stageControls.gif) no-repeat left bottom;
	padding:5px 15px 10px 15px;
	color:#FFF;
	}

.st_control a{
	display:block;
	border:#FFF solid 1px;
	text-align:center;
	width:90px;
	float:right;
	margin-left:10px;
	color:#FFF;
	font-weight:bold;
	font-size:9px;
	background:#013b63 url(../../images/blue/button.gif) repeat-x;
	}
	
/* -------------- Stage2 Area -------------- */	
	
.stage2{
	margin:0;
	padding:0;
	}

.stage2 .small{
	width:250px;
	background:#FFF url(../../images/blue/sm_top.gif) no-repeat;
	float:left;
	}

.stage2 .sm_inner{
	background:transparent url(../../images/blue/sm_bottom.gif) no-repeat left bottom;
	padding:15px;
	}

.stage2 .large{
	width:500px;
	background:#FFF url(../../images/blue/lg_top.gif) no-repeat;
	float:right;
	}

.stage2 .lg_inner{
	background:transparent url(../../images/blue/lg_bottom.gif) no-repeat left bottom;
	padding:15px;
	}

.clearStage{
	clear:both;
	height:10px;
	}

/* -------------- Stage3 Area -------------- */	
	
.stage3{
	margin:0;
	padding:0;
	}

.stage3 .small{
	width:250px;
	background:#FFF url(../../images/blue/sm_top.gif) no-repeat;
	float:right;
	}

.stage3 .sm_inner{
	background:transparent url(../../images/blue/sm_bottom.gif) no-repeat left bottom;
	padding:15px;
	text-align:left;
	}

.stage3 .large{
	width:500px;
	background:#FFF url(../../images/blue/lg_top.gif) no-repeat;
	float:left;
	}

.stage3 .lg_inner{
	background:transparent url(../../images/blue/lg_bottom.gif) no-repeat left bottom;
	padding:15px;
	}

/* ______________________ Footer ______________________ */

#footer {
	padding-top:5px;
	text-align:center;
	color:#FFF;
	font-size:80%;
	}

/* ______________________ Form Elements ______________________ */

.errorMessage p{
	display:block;
	background:#fffbd1;
	padding:5px;
	border:#fff8a8 dotted 1px;
	color:#FF0000;
	}

form {
	margin:0;
	padding:0;
	margin-bottom:25px;
	}

form p {
	margin-top:5px;
	margin-bottom:4px;
	padding-bottom:5px;
	clear:left;
	}

label{
	margin-left:10px;
	display:block;
	float:left;
	width:12em;
	}

textarea{	
	width:300px;
	border:1px solid #CCC;
	font:11px/18px "Lucida Grande", Geneva, Verdana, Tahoma, Arial, sans-serif;
	background:#FFF url(../../images/blue/inputBack.gif) repeat-x left bottom;
	}

select {
	font-size:95%;
	color:#515151;
	border:#CCC solid 1px;
	}

input {
	border:#CCC solid 1px;
	padding:3px;
	background:#FFF url(../../images/blue/inputBack.gif) repeat-x left bottom;
	}

input.button,
.sm_inner input.button{
	background:#004f8b url(../../images/blue/buttonBack.gif) no-repeat left top;
	font-size:10px;
	border:#004c86 solid 1px;
	color:#FFF;
	font-weight:bold;
	}
	
input file{
	border:#CCC solid 1px;
	padding:3px;
	background:#FFF url(../../images/blue/inputBack.gif) repeat-x left bottom;
	}

.sm_inner input {
	border:#CCC solid 1px;
	padding:3px;
	background:#FFF url(../../images/blue/inputBack.gif) repeat-x left bottom;
	width:120px;
	}

.sm_inner input.button { padding:3px; }


.sm_inner label{
	margin-left:0px;
	display:block;
	float:left;
	width:8em;
	}

/* Table Layout */

table {
	margin:0 auto; 
	padding:0; 
	border-collapse:collapse; 
	border-spacing:0px;
	width:98% !important;
	}

table td{
	font-family: tahoma, arial, sans-serif;
	color:#403F3F;
	border:1px solid #ebebeb;
	padding:2px 5px;
	font-size:1em;
	}

table th {
	background-color: #d5eff8;
	border:1px solid #ebebeb;
	text-align:left;
	vertical-align:top;
	padding: 3px;
}

table thead tr td{
	background:#004f8b url(../../images/blue/buttonBack.gif) no-repeat left top;
	color:#FFF;
	}

table td.actions{
	}

table td.actions a{
	display:block;
	text-align:center;
	width:90px;
	float:right;
	margin-left:5px;
	color:#FFF;
	font-weight:bold;
	font-size:9px;
	background:#004f8b url(../../images/blue/buttonBack.gif) no-repeat left top;
	border:#004c86 solid 1px;
	color:#FFF;
	}

table td.actions a:hover{
color:#FFF000;
	}
	
table.options td{
	border:none;
	}

#editor_background table{
	margin:0; 
	padding:0; 
	border-collapse:collapse; 
	border-spacing:0px;
	width:auto !important;
	}




/* -------------- Controls -------------- */	

.controls{
	height:25px;
	}

.controls a{
	display:block;
	text-align:center;
	width:120px;
	margin:0 5px 5px 0;
	color:#FFF;
	font-weight:bold;
	font-size:9px;
	background:#004f8b url(../../images/blue/buttonBack.gif) no-repeat left top;
	border:#004c86 solid 1px;
	color:#FFF;
	}

.controls a:hover{
	color:#FFF000;
	}

/* -------------- option Controls -------------- */


.optionButton{
	background:transparent url(../../images/blue/optionBleft.gif) no-repeat left top;
	margin:0 15px;
	}

.optionButton a {
	background:transparent url(../../images/blue/optionBright.gif) no-repeat right top;
	display:block;
	vertical-align:middle;
	font-size:13px;
	font-weight:bold;
	padding:12px;
	color:#FFF;
	}

.optionButton a:hover{
	color:#013C63;
	}

/* -------------- Logo Upload -------------- */

.logoHolder{
	background:#FFF url(../../images/blue/logo.gif) no-repeat center center;
	height:100px;
	border:#CCC solid 1px;
	color:#00bce4;
	}

/* -------------- Bread Crumb Nav -------------- */

.breadCrumb{
	font-size:10px;
	}

.breadCrumb b{
	color:#004C86;
	margin-right:5px;
	}

.breadCrumb a{
	border-right:#004C86 solid 1px;
	padding-right:5px;
	margin-right:5px;
	}

/* -------------- Lists and Tables Important -------------- */

.listTitle{
	color:#004C86;
	background:#FFF;
	font-size:13px;
	}

/* -------------- Module List -------------- */

.moduleList{

	}

.moduleList ul{
	margin:0;
	padding:0;
	list-style:none;
	}

.moduleList li{
	display:block;
	clear:both;
	}

.moduleList li a{
	float:right;
	display:block;
	text-align:center;
	width:45px;
	margin:0 5px 5px 0;
	color:#FFF;
	font-weight:bold;
	font-size:9px;
	background:#004f8b url(../../images/blue/buttonBack.gif) no-repeat left top;
	color:#FFF;
	}

.moduletitle{
	float:left;
	clear:both;
	width:450px;
	border:#FFF solid 1px;
	color:#004C86;
	font-size:13px;
	padding-left:20px;
	background:transparent url(../../images/blue/listarrow.gif) no-repeat 0px 2px;
	}

.moduleList ul ul .moduletitle,
.moduleList ul ul ul .moduletitle{
	float:left;
	clear:both;
	width:350px;
	border:#FFF solid 1px;
	color:#333;
	background:#FFF;
	font-size:11px;
	padding-left:20px;
	background:transparent url(../../images/blue/listarrowGrey.gif) no-repeat 0px 2px;
	}

.moduleList ul ul{
	padding:0;
	margin:0;
	margin-left:25px;
	}	
	
.moduleList ul ul ul {
	padding:0;
	margin:0;
	margin-left:50px;
	}	

.moduleClear{
	clear:both;
	height:10px;
	}

/* -------------- Module List -------------- */
.userModuleList{
	font-size:13px;
	background:#FFF;
	padding:10px;
	border:#333 dotted 1px;
	}

.userModuleList ul{
	margin:0;
	padding:0;
	list-style:none;
	}

.userModuleList li{
	display:block;
	margin:0 5px 5px 20px;
	padding:0 0 0 20px;
	width:auto;
	background:transparent url(../../images/blue/listarrowGrey.gif) no-repeat 0px 4px;
	}

.userModuleList li a{
	display:block;
	padding:0 5px 5px 0px;
	width:auto;
	/* background:transparent url(../../images/blue/tick.gif) no-repeat right top; */
	}
	
.userModuleList li a.complete {
	display:block;
	padding:0 5px 5px 0px;
	width:auto;
	background:transparent url(../../images/blue/tick.gif) no-repeat right top;
	}
	
/* -------------- Flash Controls -------------- */	

#flashControls{
	width:75px;
	text-align:right;
	float:right;
	height:26px;
	padding:3px 3px 0 0;
	}
	
#flashControls div.play{
	background:transparent url(../../images/blue/wButtonPlay.gif) no-repeat left top;
	height:27px;
	float:right;
	}

#flashControls div.pause{
	background:transparent url(../../images/blue/wButtonPause.gif) no-repeat left top;
	height:27px;
	float:right;
	}

#flashControls a{
	background:transparent url(../../images/blue/wButtonEnd.gif) no-repeat right top;
	display:block;
	float:right;
	height:23px;
	padding:3px 15px 0px 20px;
	font-size:9px;
	}
	
/* -------------- Risk Assessment -------------- */		
	
.riskassessment, .riskassessment table {
	font:11px/18px "Lucida Grande", Geneva, Verdana, Tahoma, Arial, sans-serif;
}
.riskassessment table {	
	width: 100%;
	border-collapse:collapse;
}
.riskassessment table th, .riskassessment table td {
	border: 1px solid #00bce5;
	text-align:left;
	vertical-align:top;
	padding: 3px;
}
.riskassessment table th {
	background-color: #d5eff8;
}

.riskassessment h1 {
	font:15px/18px "Lucida Grande", Geneva, Verdana, Tahoma, Arial, sans-serif;
	font-weight:bold;
	color: #00bce5;
	padding:5pt 0; 
}
.riskassessment h2 {
	font:13px/18px "Lucida Grande", Geneva, Verdana, Tahoma, Arial, sans-serif;
	font-weight:bold;
	color: #00bce5;
	padding-top:5pt 0;	
}

.riskassessment input {
	background: none;
	background-color: #ffffff;
	width:auto;
	padding:0;
	margin:0;
}

.riskassessment input.text {
	border: 1px solid #ffffff;
	width: 98%;
}
.riskassessment textarea {
	border: 1px solid #ffffff;
	width: 98%;
	overflow: auto;
	background: none;
	background-color: #ffffff;
}


.riskassessment label {
	cursor:pointer;
	cursor:hand;
	float: none;
	width: auto;
	display:inline;
	margin-left:0;
	
}
.riskassessment label.fullwidth {
	display:block;
}

/* -------------- Risk Assessment tabs -------------- */	

#stepTab{	
	border-bottom:#CCC solid 1px;
	margin:10px 0;
	height:30px;
	padding-left:6px;
	}
	
#stepTab ul {
	list-style:none; 
	display:inline;
	padding:0;
	margin:0;
	}
	
#stepTab ul li {
	display:inline; 
	padding:0; 
	margin:0;
	background: url(../../images/blue/tabLeft.gif) no-repeat left 5px;
	border-right:2px solid #FFF;
	float:left;	
	}

#stepTab ul li a {
	color:#666;
	text-decoration:none;
	background:transparent url(../../images/blue/tabRight.gif) no-repeat right 5px;
	height:20px;
	display:block;
	padding:10px 15px 0px 15px;
	position:relative;
	text-align:center;
	font-weight:bold;
	}	
	
#stepTab li.current {
	display:inline; 
	padding:0; 
	margin:0;
	background: url(../../images/blue/tabLeftcurrent.gif) no-repeat left 0px;
	border-right:2px solid #FFF;
	float:left;	
	}

#stepTab li.current a {
	color:#00bce5;
	text-decoration:none;
	background:transparent url(../../images/blue/tabRightcurrent.gif) no-repeat right 0px;
	height:20px;
	display:block;
	padding:8px 35px 2px 15px;
	position:relative;
	text-align:center;
	font-weight:bold;
	}	


#stepTab li a:hover{
	color:#00bce5;
	}

/* -------------- Public Answers -------------- */	


.question{
	border:#CCC dotted 1px;
	background:#eff9ff url(../../images/blue/question.gif) no-repeat;
	margin-bottom:10px;
	padding:10px 0px 5px 40px;
	}

.question .html,
.question .image{		
	background:#FFF;
	margin-top:5px;
	}	
	
table.answerstable td{
	border:none;
	}

table.answerstable td.radio{
	text-align:left;
	width:30px;
	padding-left:35px;
	}
	
/* -------------- List Items Displayed  -------------- */	

.st_inner ul.list li{
	list-style:none;
	margin-bottom:10px;
	padding-left:20px;
	background:transparent url(../../images/blue/listarrow.gif) no-repeat 0px 2px;
	}

/* -------------- Product Matrix Links  -------------- */	

a.lightwindow img {
	border:none;
}

.controls { width:100%; }
.controls #btnPrev { float:left; }
.controls #btnNext { float:right; }

table.dateinput td { border:0; }

/*Styles for date picker*/

.floating{
	background-color: White;
	margin:0px;
	border:1px solid #CCC;
    font-family: Arial;
	font-size:12px;
	width:219px; /* cellwidth * 7 + cellpadding * 14 + cellborder * 14 */
	display:block;
	padding:0px;
	min-height:175px;
	}

.floating:hover{
	cursor:pointer;
	/*cursor:hand; /* If you're worried about old IE versions, turn this on.  I have it off because I hate seeing css exceptions in my debug window. ;) */
	}

.floating .calwrapper{
	display:block;
	}

.floating .calweekswrapper{
	display:block;
	border: solid 1px White;
	}

.floating .calheader{
	display: block;
	width:100%;
	text-align:center;
	color:#094867;
	font-size:13px;
	font-weight: bold;
    background-color: #F6F6F6;
    padding-bottom: 2px;
	}

.floating .caltitle{
	width:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	}

.floating .calcontrol{
	font-weight: bold;
	width:20px;
    background: transparent no-repeat center center;
	}

.floating .calcontrol:hover{
	}

.floating .calclose{
	float:right;
	display:block;
    background-image: url(/images/close.gif);
	}

.floating .calprevyear{
	float:left;
    background: url(/images/prev.gif) repeat-x left;
    width:10px;
    margin-left:2px;
	}

.floating .calnextyear{
	float:right;
    background: url(/images/next.gif) repeat-x left;
    width:10px;
    margin-right:2px;
	}

.floating .calnextmonth{
	float:right;
	background-image: url(/images/next.gif);	
	}

.floating .calprevmonth{
    float:left;
  	background-image: url(/images/prev.gif);
	}

.floating .daybox{
	float:left;
	background-color: white;
	border:1px solid white;
	width:25px;
	padding:2px;
	color:black;
	text-align:center;	
	}

.floating .dayboxvalue{
    display: none;
	}

.floating .dayboxname{
	border: 1px solid #FFF;
    background-color: #F6F6F6;
	color:#094867;
	}

.floating .dayboxsunday{
	background-color: White;
	border: 1px solid White;
	}

.floating .dayboxsaturday{
	background-color: #FFF;
	border: 1px solid White;
	}

.floating .daybox:hover{
	}

.floating .dayboxname:hover{
	}

.floating .dayinmonth{
	color:#333;
	}

.floating .dayoutmonth{
	color:#666;
	background:#F6F6F6;
	}

.floating .dayselected{
	background-color: #00BCE5;	
	color: White;
	}

.floating .daycurrent{
	border:1px solid #e8eef7;
	}

.floating .weekbox{
	width:100%;
	min-height:21px;
	display:block;
	margin-top:3px;
	background-color: #EEF3F6;
	}

.floating .endweek{
	float:left;
	}

.floating .weekboxname{
    background-color: #EEF3F6;
	}

/* User Enrollment */
input.addbutton,
input.removebutton {
	padding:0;
	border:0;
	text-indent:-9999px;
	width:20px;
	height:20px;
	display:block;
	float:left;
}

input.addbutton { background:url("../../images/add.gif") no-repeat; }
input.removebutton { background:url("../../images/remove.gif") no-repeat; }