@import url(lessons.css);
@import url(vocabulary.css);
@import url(comments.css);
@import url(surveys.css);

body {
	margin:0;
	padding:0;
	border:0;			/* This removes the border around the viewport in old versions of IE */
	width:100%;
	min-width: 600px;    /* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	background: #d8e1f1 url("../images/background.jpg") repeat-x;
}

body.accueil {
	width:955px;
	margin-left: auto;
	margin-right: auto;
}


  /*****************************************************************************/
 /* MAIN CONTAINER
/*****************************************************************************/
#container {
	margin: 5px 5px 0 5px;
	border: #000000 1px solid;
	background: #FFFFFF;
}


	  /*****************************************************************************/
	 /* HEADER
	/*****************************************************************************/
	#header {
		width:100%;
		background: #dce2ec url(../images/accueil/banniere_fond.gif) repeat-x;
		text-align: left;
	}
		
		  /*****************************************************************************/
	     /* LOGO
	    /*****************************************************************************/
		#logo {
			z-index: 10;
			background: #dce2ec url(../images/accueil/banniere_logo.gif) no-repeat;
			height: 73px;
			width: 245px;
		}		
		#language_selector {
			margin-top:15px;
			margin-right:15px;
		}
		
		  /*****************************************************************************/
	     /* HORIZONTAL MENU
	    /*****************************************************************************/
		#menu_horizontal {
			clear: both;
			border-top: #FFFFFF 2px solid;
			background-color: #CC0000;
			height: 27px;
		}
		#menu_horizontal ul {
			color:#FFFFFF;
			font-size: 13px;
			font-weight:bold;
			margin: 0 20px;
			padding-top: 4px;
			padding-left:0;
		}
		#menu_horizontal ul li {
			display: inline;
			margin: 0 6px;
		}
		#menu_horizontal ul li a:link{color:#FFFFFF; text-decoration: none;}
		#menu_horizontal ul li a:visited{color:#FFFFFF; text-decoration: none;}
		#menu_horizontal ul li a:hover{color:#FFFFFF; text-decoration: underline;}

	  /*****************************************************************************/
	 /* 1 COLUMN CONTAINER
	/*****************************************************************************/
	#content_visitor {
		clear:both;
		width:100%;
		background-color: #FFFFFF;
		margin: 0;
	}
	  	  /*****************************************************************************/
	     /* CENTRAL COLUMN 1 COLUMN VERSION
		/*****************************************************************************/
		.activator .col1_visitor {
			overflow:hidden;
			position:relative;
			margin: 0;
		}
		
		#gratuit_sticker_en{
			position: relative;
			float:right;
			height: 113px;
			width: 113px;
			right: 3px;
			top: -10px;
			background: transparent url(../images/accueil/gratuit_sticker_en.png) no-repeat;
		}
		
		#gratuit_sticker_fr{
			position: relative;
			float:right;
			height: 113px;
			width: 113px;
			right: 3px;
			top: -10px;
			background: transparent url(../images/accueil/gratuit_sticker_fr.png) no-repeat;
		}
		
		#menu_accueil{
			position: relative;
			left:45px;
			top: 0px;
		}		
		#menu_accueil .menu_accueil_bouton{
			background-image:url(../images/accueil/accueil_bouton.png);
			height:55px;
			width:527px;
			position: relative;
		}		
		#menu_accueil .menu_accueil_titre{
			font-family: verdana; color:#CC0000; font-weight:bold; font-size:18px; position:relative; left:66px	
		}		
		#menu_accueil .menu_accueil_texte{
			font-family: verdana; color:#47576B; font-style:italic; font-size:12px; position:relative; left: 69px; top:2px; font-weight:bold;
		}
		
		#preview_screenshots{
			width:500px; text-align:center; margin-right:auto; margin-left:auto;
		}
		
		#awards {	
			text-align:center; position:relative; top:-5px; margin-left: auto; margin-right:auto
		}		
		
		
	
	  /*****************************************************************************/
	 /* 3 COLUMNS CONTAINER
	/*****************************************************************************/
	.colmask {
		position: relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
		clear:both;
		overflow:hidden;		/* This chops off any overhanging divs */
		border: #FFFFFF 8px solid;
		background-color: #FFFFFF;
	}
	
		  /*****************************************************************************/
		 /* 3 COLUMN SETTINGS
		/*****************************************************************************/
		.activator {
			background:#FFFFFF;    	/* Right column background colour */
		}
			.activator .colmid {
				float:left;
				width:200%;
				margin-left:-180px; 	/* Width of right column */
				position:relative;
				right:100%;
				background:#fff;    	/* Centre column background colour */
			}
				.activator .colleft {
					float:left;
					width:100%;
					margin-left:-50%;
					position:relative;
					left:380px;         	/* Left column width + right column width */
					background: #a2b4cc;    	/* Left column background colour */
					margin-bottom: 10px;
				}
					.activator .col1wrap {
						float:left;
						width:50%;
						position:relative;
						right:180px;        	/* Width of left column */
						padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
					}
						
						  /*****************************************************************************/
						 /* CENTRAL COLUMN
						/*****************************************************************************/
						.activator .col1 {
							margin:0 198px 0 187px;     	/* Centre column side padding:
													Left padding = left column width + centre column left padding width
													Right padding = right column width + centre column right padding width */
							position:relative;
							left:200%;
							overflow:hidden;
						}						
							
							  /*****************************************************************************/
							 /* BREADCRUMB & TABS
							/*****************************************************************************/
							#breadcrumb {
								background: #ededed;
								height: 23px;
								border: #a6a6a6 1px solid;
								font-size: 13px;
								font-weight: bold;
								padding-left: 5px;
							}
							#breadcrumb table {margin:0; padding:0;}
							#breadcrumb table td {padding-left:5px;}
							#breadcrumb a:link{color:#3e4257;font-weight:bold;font-size:13px;text-decoration: none;font-style:italic; padding: 1px 3px;}
							#breadcrumb a:visited{color:#3e4257;font-weight:bold;font-size:13px;text-decoration: none;font-style:italic;padding: 1px 3px;}
							#breadcrumb a:hover{color:#3e4257;font-weight:bold;font-size:13px;text-decoration: underline;font-style:italic;padding: 1px 3px;}
							
							#menu_tab {
								margin: 0;
								padding: 0;												
							}
							
							#menu_tab table {
								background: #FFFFFF url(../images/membre/tab_fond.gif) repeat-x;
								margin: 0;
								padding: 0;
								border-collapse: collapse;
							}
							#menu_tab table td { height:38px; margin: 0; padding: 0; border: 0;}
							#menu_tab img{margin: 0; padding: 0; border: 0;}
							#menu_tab table td.selected {background:#FFFFFF url(../images/membre/tab_on_02.gif) repeat-x; height: 38px; color:#000000; font-weight: bold; font-size: 14px; text-decoration:none;}
							#menu_tab table td.deselected {background:#FFFFFF url(../images/membre/tab_off_02.gif) repeat-x; height: 38px; color:#000000; text-decoration:none;}
							#menu_tab table a:link{color:#fbad26;font-weight:bold;font-size:13px;text-decoration: none;}
							#menu_tab table a:visited{color:#fbad26;font-weight:bold;font-size:13px;text-decoration: none;}
							#menu_tab table a:hover{color:#fbad26;font-weight:bold;font-size:13px;text-decoration: underline;}
							
							
							  /*****************************************************************************/
							 /* GENERAL PURPOSE MAIN CONTENT STYLES
							/*****************************************************************************/
							h1{color:#CC0000; font-size: 1.4em;	margin-bottom: 20px;}							
							h2{color:#000000; font-size: 1.2em; margin-bottom: 15px;}
							h3{border-bottom: 2px solid #CC0000; font-size: 1.1em; margin-bottom: 10px;}
							
							p {margin: 8px; font-size:0.9em; padding-left:10px;text-align:justify;}
							
							a:link{color:#2B74AF;text-decoration: underline;}
							a:visited{color:#2B74AF;text-decoration: underline;}
							a:hover{color:#CC0000;text-decoration: underline;}
							
							table.gray {border: 2px solid #47576B;border-collapse: collapse;background-color:#E9F1FE;font-size:0.90em;margin: 13px 0px 13px 35px;color:#000000;}
							table.gray p{color:#47576B;margin:2px;}	
							table.gray td{color:#47576B;padding:3px 5px 3px 5px;border: 1px solid #FFFFFF;}
							table.gray th{background-color:#47576B;padding:5px 4px 5px 4px;font-weight:bold;color:#FFFFFF;text-align:center;font-size: 1.2em;border: 1px solid #FFFFFF;}
							

					  /*****************************************************************************/
					 /* LEFT COLUMN
					/*****************************************************************************/
					.activator .col2 {
						float:left;
						float:right;			/* This overrides the float:left above */
						width:170px;        	/* Width of left column content (left column width minus left and right padding) */
						position:relative;
						right:20px;         	/* Width of the left-hand side padding on the left column */
						padding-top: 8px;
					}
						#menu_vertical {
							width: 181px;	
							padding: 0;
							margin: 0;
							border: 0;
							border-collapse:collapse;
							text-align:left;
						}
						#menu_vertical table {margin:0; padding: 0; border-collapse:collapse; border: 0;}
						#menu_vertical table td {margin:0; padding: 0; border-collapse:collapse; border: 0;}
						#menu_vertical table .top{background: #FFFFFF url(../images/membre/menu_top.gif) no-repeat; width:181px; height:49px;}
						#menu_vertical table .button{background: #FFFFFF url(../images/membre/menu_btn.gif) no-repeat; width:181px; height:33px; padding-left:3px;}
						#menu_vertical table .bottom{background: #FFFFFF url(../images/membre/menu_bottom.gif) no-repeat; width:181px; height:15px;}
						#menu_vertical table .ss_button{background: #d0dcef url(../images/membre/menu_ss_btn.gif) no-repeat; width:181px;	height:21px; font-style:italic;	font-size: 12px; padding-left: 44px; padding-bottom: 0;	margin-bottom: 0;}
						#menu_vertical table .texte{padding-left:7px; font-size:14px; color:#3E4257;}
						#menu_vertical table .icone {width: 33px; height:33px;margin-left:2px;}
						#menu_vertical a:link{color:#3E4257;text-decoration: none;}
						#menu_vertical a:visited{color:#3E4257;text-decoration: none;}
						#menu_vertical a:hover{color:#3E4257;text-decoration: underline;}
						
						#level {	
							width: 181px;
							margin: 0;
							padding: 0;
							margin-top: 5px;
							text-align:center;
						}
						#level table {border-collapse:collapse; border:0;}
						#level table td {margin:0; padding: 0;}
						#level table td.top {height:38px;}
						#level table td.middle {background: #FFFFFF url(../images/membre/level_middle.gif) repeat-y; width:181px; height:36px; text-align:center; font-size:10px; color:#47576B; font-weight:bold;}
						#level table td.points {background: #FFFFFF url(../images/membre/points_middle.gif) no-repeat; width:151px; height:24px; }
						#level table td.bottom {background-color: #a2b4cc; height:38px;}
						#level table td.bottom img {height: 71px; width: 181px;}
						
						#extensions {
							width: 181px;	
							padding: 0;
							margin: 0;
							border: 0;
							border-collapse:collapse;
							text-align:left;
							padding: 0;
							margin: 0;
							margin-top: 0px;
						}
						#extensions table {margin:0; padding: 0; border-collapse:collapse; border: 0;}
						#extensions table td {margin:0; padding: 0; border-collapse:collapse; border: 0;}
						#extensions table .top{background: #FFFFFF url(../images/membre/extensions_top.gif) no-repeat; width:181px; height:36px;}
						#extensions table .middle{background: #FFFFFF url(../images/membre/newsletter_middle.gif) repeat-y; width:181px; height:25px; font-size:12px; text-align:center; font-weight:bold;}
						#extensions table .bottom{background: #FFFFFF url(../images/membre/newsletter_bottom.gif) no-repeat; width:181px; height:31px; text-align:center;}
						
						#forum {
							width: 181px;	
							padding: 0;
							margin: 0;
							border: 0;
							border-collapse:collapse;
							text-align:left;
							padding: 0;
							margin: 0;
							margin-top: 10px;
						}
						#forum table {margin:0; padding: 0; border-collapse:collapse; border: 0;}
						#forum table td {margin:0; padding: 0; border-collapse:collapse; border: 0;}
						#forum table .top{background: #FFFFFF url(../images/membre/forum_top.gif) no-repeat; width:181px; height:36px;}
						#forum table .bottom{background: #FFFFFF url(../images/membre/newsletter_bottom.gif) no-repeat; width:181px; height:31px; text-align:center;}
						
						
					  /*****************************************************************************/
					 /* RIGHT COLUMN
					/*****************************************************************************/
					.activator .col3 {
						float:left;
						float:right;			/* This overrides the float:left above */
						width:168px;        	/* Width of right column content (right column width minus left and right padding) */
						margin-right:30px;  	/* Width of right column right-hand padding + left column left and right padding */
						position:relative;
						left:50%;
						text-align:center;
					}
					
						#contribution_account {	
							width: 167px;
							margin: 0;
							padding: 0;
							margin-top: 0px;
							text-align:center;
						}
						#contribution_account table {border-collapse:collapse; border:0;}
						#contribution_account table td {margin:0; padding: 0;}
						#contribution_account table td.top {background: #FFFFFF url(../images/membre/contribution_account_top.gif) no-repeat; height:30px; width:167px;}
						#contribution_account table td.middle {background: #FFFFFF url(../images/membre/contribution_account_middle.gif) repeat-y; width:167px; height:55px; text-align:center; font-size:10px; color:#47576B; font-weight:bold;}
						#contribution_account table td.points {background: transparent url(../images/membre/contribution_account_points_middle.gif) center center no-repeat; width:140px; height:27px; text-align:center;}
						#contribution_account table td.button {background: transparent url(../images/membre/contribution_account_button_middle.gif) no-repeat; width:140px; height:24px; text-align:center;}
						#contribution_account table td.bottom {background: #FFFFFF url(../images/membre/contribution_account_bottom.gif) no-repeat; width:167px; height:37px; }

  /*****************************************************************************/
 /* FOOTER
/*****************************************************************************/
#footer {
	clear:both;
	margin: 5px 5px 0 5px;
	border: #000000 1px solid;
	background: #FFFFFF;
}
	#author {
		color: #47576B;
		font-size: 10px;
		text-align: center;
		padding: 15px 0 5px 0;
		margin: 0;
	}
	#cgu_link {
		color: #47576B;
		font-size: 11px;
		font-weight: bold;
		text-align: center;
		padding: 0px 0 5px 0;
		margin: 0;
	}
	#copyright {
		color: #FFFFFF;
		text-align: center;
		font-size: 14px;
		font-style: italic;
		font-weight: bold;
		height: 30px;
		background-color: #47576b;
		padding: 6px 0 0 0;
		border-bottom: #FFFFFF 10px solid;
	}
	#copyright.visitor {
		background-color: #CC0000;
	}

	

#formulaire_inscription th {font-size:1em;text-align:right;vertical-align:top; padding-left:0px;padding-right:25px;padding-top:9px; padding-bottom:7px;}
#formulaire_inscription td {vertical-align:top; padding-top:8px; padding-bottom:8px;}
#formulaire_inscription td.bord_top {padding-top:0px; padding-bottom:0px;}
#formulaire_inscription p {font-size:9pt;margin-top:2px; margin-bottom:0px;color:#47576b;}

#news{width:95%; margin: 0 auto 0 auto; }
#news h1.news{color:#47576B; font-size: 1em; margin-bottom: 2px;}
#news td.news{border-bottom: 2px solid #CC0000;}
#news h2.news{color:#47576B; font-size: 0.6em; margin-bottom: 0px;font-style:italic;}
#news p.news{font-size:0.8em;text-align:justify;margin: 5px;}