/**********************************************/
/* @name: style.css                           */
/* @date: 19/09/06 - 25/09/06                 */
/* @desc: COF II (the return)                 */
/* @auth: remy@enova-tech.net	              */
/**********************************************/

/** General Elements ***/
*{
	padding:0;
	margin:0;
	text-align:justify;
}
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	background-color:white;
	min-width:770px;
}

/* Links */ 
a:link, a:visited{
	color:#FF8A00;
	text-decoration:none;
	font-weight: bold;
}
a:hover{
	color:#FF5A00;
	text-decoration:none;
	font-weight: bold;
	border-bottom:1px dotted #FFA000;
}

/* remove link:hover/img border   */
a img, #top a:hover, a:hover img{
	border:0;  
} 

/* img */
a img.opacity40{
	opacity:0.4;
	filter:alpha(opacity=40);
}
a img.opacity60{
	opacity:0.6;
	filter:alpha(opacity=60);
}
a:hover img{
	opacity:1;
	filter:alpha(opacity=100);
}
img.left{
	float:left;
	margin:0 5px 0 15px;
}
img.right{
	float:right;
	margin:0 5px 0 15px;
}

/* Titles */ 
h1{
	font-size:xx-large;
}

/******* CONTENT ******************************/
#content{
	clear:both;
	float:left;
	margin:0 1% 0 2%;
	_margin-left:1%;
	padding:0px 0 20px 0;
	font-size:middle;
	/*width: 550px;*/
	width:69%;
	max-width:800px;
}
#content h1{
	padding:10px 10px 10px 15px;
	background: url("../pix/inner/layout/arrow_h1.jpg") no-repeat;
	background-position: left 55%;
	font-size:1.15em;
	font-weight:bold;
	color:#FFA200;
}
#content h2{
	color:#0060AF;
	padding:10px;
	font-size:1.05em;
}

#content #illustration{
	float:right;
	margin-left:15px;
	margin-bottom:15px;
	margin-top:0px;
	clear:both;
}

#content ul{
	margin-top:2px;
	margin-bottom:10px;
}

#content help{
	display:block;
	padding:10px 10px 10px 40px;
	background: url("../pix/inner/icons/help.jpg") no-repeat;
	background-position: 10px 55%;
	color:#0060AF;
	font-size:1.05em;
}

#content ul li{
	 background-image: url(../pix/inner/layout/puce.jpg);
	 background-repeat: no-repeat;
	 background-position: 10px 6px;
	 list-style-type: none;
	 padding-left: 30px;
}

#content p{
	/*padding:5px 10px 5px 10px;*/
}
#content p.img{
	text-align:center;
}

/** Forms */
#content input.button{
	padding:2px;
	font-size:0.85em;
	font-weight:bold;
	border:1px solid #9D9D9D;
	-moz-border-radius: 5px;
	border-radius:5px; /* CSS3*/
	color: white;
	background-color:#C9C9C9;
}

#content input.button:hover{
	background-color:#9D9D9D;
}

/** Tables */
#content table{
	width:100%;
	margin:15px 0 15px 0;
	font-size:0.85em;
	border-collapse: collapse;
	border:1px solid #FFB900;
}

#content table tr{
	padding:0;
	margin:0;
}

#content table tr td{
	padding:10px;
	background-color:white;
	color:#636363;
	border:1px dotted #FFB900;
	border-left:1px solid #FFB900;
	border-right:1px solid #FFB900;
}

#content table thead tr td{
	background-color:#FFFDEC;
	font-weight:bold;
}

#content table tr td a{
	color:#636363;
	font-weight:normal;
}
#content table tr td a:hover{
	color:black;
	border:0;
}
#content table tr.subtitle2 td{
	background-color:#FFFCE6;
	font-weight:bold;
	color:#3B3B3B;
	text-align:center;
	border:1px solid #FFB900;
}
.ecoute{
	background: url("../pix/inner/icons/sound.jpg") no-repeat;
	padding:5px 5px 5px 28px;
}

/** Bubble */
#content .bubble{
	border:1px solid #FFCB36;
	-moz-border-radius: 10px;
	border-radius:10px; /* CSS3*/
	padding:10px;
	padding-bottom:0;
	margin-top:15px;
	width:95%;
}

#content .bubble#illustrated
{
	margin-right:160px;
}

#content .bubble h2{
	padding:0;
}
#content .bubble img{
	float:left;
	margin:-5px 0 0 -2px;
}
#content .bubble p, #content .bubble h2{
	padding:1px;
}
#content .spacer, .bubble .spacer{
	background: url("../pix/inner/layout/bubble.jpg") no-repeat;
	background-position: 30% 0px;
	z-index:2;
	margin-top:-1px;
}
.spacer#s1{background-position: 10% 0px;}
.spacer#s2{background-position: 30% 0px;}
.spacer#s3{background-position: 50% 0px;}
.spacer#s4{background-position: 70% 0px;}
.spacer#s5{background-position: 90% 0px;}

/** Sequence */
#content .level h2{
	padding:0 0 12px 0;
	text-align:center;
	background: url("../pix/inner/layout/line_style1.jpg") repeat-x bottom;
}
#content .sequence{
	float: left;
	width:18%;
	margin:1%;
	_margin:2px;
}
#content .sequence ul{
	padding:2px;
	padding-top:10px;
}
#content .sequence ul li{
	background-image: none;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	list-style: none;
	text-align:center;
	margin:3px 0 3px 0;
	padding:5px  0 5px 0;
	background-color:#FFF8D7;
	border: 1px solid #FEE077;
	font-weight:bold;
}
#content .sequence ul li.complete{
	background-color:#FEE077;
}
#content .sequence ul li.current{
	background-color:#FFC049;
}
#content .sequence ul li#test{
	background-color:white;
	color:red;
	padding-left:13px;
	background:url("../pix/inner/icons/unchecked.jpg") no-repeat  5px center;
	font-size:x-small;
	text-align:center;
	border:0;
}
#content .sequence ul li.complete#test{
	background:url("../pix/inner/icons/checked.jpg") no-repeat  5px center;
	color:#37A235;
}

#content .sequence ul li.pending#test{
	background:url("../pix/inner/icons/current.jpg") no-repeat  5px center;
}

#content .sequence ul li#first{
	-moz-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
}
#content .sequence ul li#last{
	-moz-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
	margin-bottom:8px;
}
#content .sequence li#test a{color:red;}
#content .sequence li#test a:hover{border-color:red;}
#content .sequence li.complete#test a{color:#37A235;}
#content .sequence li.complete#test a:hover{border-color:#37A235;}
#content .sequence li.pending#test a{color:#3485c7;}
#content .sequence li.pending#test a:hover{border-color:#3485c7;}
#content .sequence ul li a{color:#333333;}
#content .sequence ul li a:hover{color:black;border-color:black;}

#navbutton_wrapper{
	
}
#navbutton_wrapper hr{
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
}

#navbutton_wrapper a.linknext,
#navbutton_wrapper a.linkprev{
	display:block;
	width:165px;
	height:39px;
	margin-top:15px;
	padding:3px 3px 3px 3px;
	font-size:14px;
	color:#fff;
}
#navbutton_wrapper a.linknext{
	float:right;
	text-align:right;
	padding-right:35px;
	background:url("../inner/student/images/arrow_next.jpg") no-repeat top center;
}
#navbutton_wrapper a.linknext.notallowed{
	float:right;
	text-align:right;
	padding-right:35px;
	background:url("../inner/student/images/arrow_next_deactivated.jpg") no-repeat top center;
	color:#999;
	cursor:default;
}
#navbutton_wrapper a.linknext.notallowed:hover{
	background-position:top center;
	color:#999;
	cursor:default;
}
#navbutton_wrapper a.linkprev{
	float:left;
	text-align:left;
	padding-left:35px;
	background:url("../inner/student/images/arrow_previous.jpg") no-repeat top center;
}
#navbutton_wrapper a.linknext:hover,
#navbutton_wrapper a.linkprev:hover{
	background-position:center -45px;
	border-bottom:0;
	color:#636363;
}

/** Stats */
#content .stats{
	padding:10px 0 0 5px;
	clear:both;
}
#content .stats .progress1{
	float:left;
	width:90%; 
	margin:0.4em 0 0 4px;
	border:1px solid #393939;
}
#content .stats .progress1 div{
	background:red;
	font-size:5px;
	border-right:1px solid #791501;
}
#content .stats .progress2{
	float:left; 
	width:6%; 
	text-align:left;
	padding-left:5px;
}
#content .stats .info{
	float:left;
	margin: 2px 15px 5px 5px;
}

/******* FOOTER ******************************/
#footer{
	clear:both;
	bottom: 0;
	font-size:0.75em;
	border-top: 1px solid #C5C5C5;
	background-color: #F2F2F2;
}
#footer a{
	color:#646464;
	font-weight:normal;
}
#footer a:hover{
	color:#646464;
	border-bottom:1px dotted #646464;
}
#footer .nav{
	float:left;	
	margin:-23px 0 0 74%;
	_margin-left:37%; /* IE */
	padding:5px 0.5% 5px 0.5%;
	width:21%;
	min-width:185px;
	max-width:220px;
	text-align:center;
	background-color: #F2F2F2;
	border:1px solid #C5C5C5;
	border-bottom:0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius:10px 10px 0 0; /* CSS3*/
}
#footer p{
	padding:5px 5px 5px 10px;
	background-color: #F2F2F2;
}
#footer .nav img{
	vertical-align:bottom;
}

/*** popup recommend ****/
#facebox #recommend{
	color:#777;
}
#facebox #recommend h1{
	font-size:16px;
	margin-bottom:10px;
}
#facebox #recommend p{
	font-size:12px;
	margin-bottom:10px;
}
#facebox #recommend fieldset{
	padding:10px;
}
	
#facebox #recommend span.green{ color:#74d138; font-size:20px; }
#facebox #recommend legend{ color:#74d138; font-size:12px; padding:0 10px 0 10px;}

#facebox #recommend label{
	display:block; 
	float:left;
	width:25%;
	font-size:13px;
	padding-left:10px;
	margin-bottom:5px;
}
#facebox #recommend label.error{
	display:block;
	width:100%;
	color:red;
}
#facebox #recommend input.text{
	display:block;
	border:1px solid #636363;
	float:left;
	width:70%;
	padding-right:10px;
	margin-bottom:5px;
}
#facebox #recommend input.text.error{
	border-color:red;
}
#facebox #recommend .terms{
	font-size:10px;
	margin-top:5px;
}
#facebox #recommend .action{
	text-align:center;
}
#facebox #recommend .action .recommendnow{
	float:none;
	background:url(../pix/plaingreen_btn.jpg);
	height:34px;
	width:206px;
	color:#fff;
	border:0px;
	text-align:center;
	font-weight:bold;
	cursor:pointer;
}
/**** popup help ******/
#contextual_help{
	background:url("../inner/student/images/help1.png") no-repeat 5px top;
	padding:5px 5px 5px 80px;
	display:none;
}
#contextual_help{
	font-size:12px;
}
#contextual_help input.close{
	width:25%;
	text-align:center;
}
#contextual_help input.nevershowagain{
	width:70%;
	text-align:center;
}

/**** popup welcome ***/
#welcome_popup{
	background:url("../inner/student/images/help1.png") no-repeat 5px top;
	padding:5px 5px 5px 80px;
}
#welcome_popup h1{
	color:orange;
	font-size:18px;
	border-bottom:0;
	margin-bottom:7px;
}
#welcome_popup input.close{
	background:#FFC049 url("../inner/student/images/go-arrow.gif") no-repeat right center;
	height:40px;
	color:#fff;
	font-size:18px;
	width:250px;
	text-align:center;
	margin-top:10px;
	border:2px solid #ffaa07;
	cursor:pointer;
}
#welcome_popup input.close:hover{
	background-color:#ffaa07;
	border-color:#FFC049;
}

hr{
	clear:both;
	visibility:hidden;
	height:0px;
	margin:0;
	padding:0;
}