@media only screen and (max-device-width: 480px) { /* CSS rules for mobile here */ }

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
body, html {
	min-height: 100%;
	color: #5A5F62;
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	letter-spacing: 0px;
	font-size: 14px;
}
a { text-decoration: none; color: black; }

h1 { margin: 0 0 15px; color: #3C7D8F; font-weight: normal; letter-spacing: -2px; }
h2 { letter-spacing: -2px; font-size: 18pt; font-weight: normal; color: #A9D3DF; }

ul, li { margin: 0; padding: 0;}
.err {
	color: #F00;
	font-weight: bold;
	margin: 25px auto;
	width: 450px;
}

#page {
	width: 1000px;
	height: 100%;
	margin: 0 auto;
}

#header {
	width: 100%;
	height: 100px;
}

#header #logo {
	width: 267px;
	background: url('../images/logo.png') no-repeat transparent 0 0;
	height: 76px;
	float: left;
	margin: 5px 0 0 0;
}
	#header #logo a {
		display: block;
		width: 100%;
		height: 100%;
	}
	#header #logo span {
		font-size: 0.8em;
		font-weight: bold;
		position: absolute;
		top: 82px;
	}
	
	#header #cwb {
		width: 44px;
		background: url('../images/cwb.png') no-repeat transparent 0 0;
		height: 38px;
		float: left;
		margin: 0 0 0 165px;
		position: absolute;
		top: 70px;
	}
	#header #cwb a {
		display: block;
		width: 100%;
		height: 100%;
	}

#header #menuTop {
	float: right;
	width: 733px;
	height: 100px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -1px;
}
	#header #menuTop ul { padding: 0; margin: 0; list-style-type: none; height: 100%; }
	#header #menuTop ul li {  height: 100%; float: left; padding: 35px 15px 0 15px; background: url('../images/btnBg.jpg') no-repeat left top transparent; }
	#header #menuTop ul li:first-child {  background: url(..); }
	#header #menuTop ul li a { color: grey ;}
	#header #menuTop ul li a:hover { color: red; }
	#header #menuTop ul li.on a { font-weight: bold;}
	
#bandeau {
	height: 300px;
	background: black;
}
	#bandeau .hidden	{ display: none;}
	/*#bandeau p {margin: 0;padding: 0 1em;font-size: 1.5em;position: relative;top: -50px;line-height: 50px;height: 50px;background: black;opacity: .7;filter:alpha(opacity=70);}*/
	#bandeau #slides img { }
	#bandeau #prevNext { background: transparent;}
	#bandeau #prevNext .jFlowPrev { float: left;}
	#bandeau #prevNext .jFlowNext { float: right;}
	#bandeau #prevNext img { margin: -205px 0 0 -21px; position: relative; z-index: 9; cursor: pointer; }
	
#menu {
	width: 100%;
	height: 60px;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 12pt;
	padding-top: 15px;
}
	#menu #title { float: left; width: 140px; margin-right: 0px;}
	#menu ul { list-style-type: none; margin-top: -15px; padding: 0; display: block; width: inherit;}
	#menu ul li { display: inline; margin: 0 10px;}
	#menu a { color: #3d7f99; width: auto; height: 60px; display: inline-block; padding-top: 15px;}
	#menu a:hover, #menu a.on { color: #77acbe;}
	#menu a.on { background: url('../images/menu_hover.png') no-repeat 48% 0 transparent;}

#mainDisplay {
	width: 100%;
	min-height: 480px;
	margin: 15px 0 0 0;
	padding: 5px 0;
	color: #5A5F62;
}

	#cleft {
		width: 210px;
		font-size: 0.8em;
		float: left;
	}

		#cleft #news {
			width: 210px;
			height: 420px;
			overflow: hidden;
			float: left;
			color: #5A5F62;
			margin-bottom: 15px;
		}
			#cleft #newsTitle { height: 50px; margin-bottom: 5px; font-size: 18pt; font-weight: normal; color: #3D7C8E; }
			#cleft #newsTitle2 {  font-size: 12pt;}
			#cleft #news ul li {list-style-type: none; margin: 0; }
			#cleft #news p {margin: 0;}
			#cleft #news .frame { margin: 0 10px;}
			#cleft #news .date { margin: 0 5px 5px 0; font-weight: normal; width: 40px; height: 40px; float: left; background: url('../images/calendar.jpg') no-repeat 0 0 transparent; text-align: center; color: #3D7C8E; }
			#cleft #news .date span {  font-size: 15pt;}
			#cleft #news .titre {font-weight: bold;}
			#cleft #news .text {}
			#cleft #news .suite {text-align: right;clear: both;}
			#cleft #news .btn { display: block; height: 29px; width: 159px; background: url('../images/btn_nouvelles.png') no-repeat 0 0 transparent; float: left; }
			.sep { width: 100%; text-align: center; margin: 15px 0; border-bottom: inset 1px #DBDBDB; }

	
	#content {
		color: #000;
		width: 480px;
		padding: 15px;
		min-height: 450px;
		height: 100%;
		overflow: hidden;
		float: left;
	}
		#mainDisplay #content h1 { margin: 0 0 15px; color: #3D7C8E; font-weight: normal; }
		#mainDisplay #content h2 {}
		#mainDisplay #content h3 {}
		#mainDisplay #content p {}
		#mainDisplay #content a {}
		#mainDisplay #content table {}
		#mainDisplay #content ul { margin: 0 0 5px 10px; padding: 10px; } 
		#mainDisplay #content li { }

	#cright {
		width: 240px;
		height: 440px;
		font-size: 0.8em;
		float: right;
		margin: 0;
	}
	
		#cright #soumission {
			width: 230px;
			height: 100px;
			color: #3E4849;
		}
		#cright #compte {
			width: 230px;
			height: 100px;
			color: #3E4849;
		}
			#soumission h2{ font-size: 18pt; height: 30px; margin-bottom: 5px; font-weight: normal; color: #3D7C8E; }
			#soumission .btns { display: block; height: 29px; width: 171px; background: url('../images/btn_soumission1.png') no-repeat 0 0 transparent;
			 float: left;}
			#soumission .btnc { display: block; height: 29px; width: 271px; background: url('../images/btn_compte.png') no-repeat 0 0 transparent;
			 float: left;}
			#soumission .btna { display: block; height: 29px; width: 271px; background: url('../images/btn_Acces.png') no-repeat 0 0 transparent;
			 float: left;}
			 #soumission .btnz { display: block; height: 29px; width: 400px; background: url('../images/btn_compte.png') no-repeat 0 0 transparent;
			 float: left;}
			 
		#cright #pensee { 
			width: 200px;
			height: 175px;
			background: url('../images/bg_pensee.png') no-repeat 0 0 transparent;
		}
		
			#cright #pensee #penseeTitle { height: 50px; margin: 10px 7px; letter-spacing: -2px; font-size: 18pt; font-weight: normal; color: #A9D3DF; }
			#cright #pensee #penseeText { color: #FFFFFF; letter-spacing: 0px; font-size: 1.5em; font-weight: normal; padding: 5px; text-align: center; }
			
#realisationsDisplay {
	background: white;	
}

	#realisationsDisplay #cleft {width: 500px;font-size: 1em;}
	#realisationsDisplay #content { width: 440px; float: right;}
	#realisationsDisplay .zoom { color: #FFF; padding: 3px 0 0 5px; width: 64px; height: 27px; font-size: 14px; font-weight: normal; float: right; margin-top: 3px; background: url('../images/btn_nav.png') no-repeat 0 0 transparent; Zposition: relative; Zleft: 350px; Ztop: 35px; Zz-index: 5;}
	
#zoom { width: 1024px; margin: auto; font-family: Verdana, Geneva, sans-serif; background: black; color: #FFFFFF; padding: 15px;}
	#zoom #img { float: left; margin: 0 15px 0 0;}
	#zoom #ititle {}
	#zoom #itext {}

#soumission fieldset {
	width: 525px;
	display: none;
}
#comptePart legend {
	color: #3c7d8f;
}
#compteEnt legend {
	color: #3c7d8f;
}
#soumission legend {
	color: #3c7d8f;
}

#footer {
	width: 100%;
	height: 90px;
	font-size: 0.8em;
	display: block;
	margin-top: 15px;
	padding-top: 25px;
	background: url('../images/footerbg.gif') repeat-x 0 0 transparent;
}

	#footer #cwb { width: 39px; background: url('../images/logoCWB_footer.png') no-repeat transparent 0 0; height: 39px; margin-left: 40px;}
	#footer #cwb a { display: block; width: 100%; height: 100%; }
	#footer div { float: left; margin: 0 15px; }
	#footer #logo {
		width: 200px;
		background: url('../images/logoBW.png') no-repeat transparent 0 0;
		height: 85px;
	}
	#footer #logo a { display: block; width: 100%; height: 100%; }
	#footer #gce { width: 150px; height: 65px; color: #5A5F62; float: right; text-align: center; background: url('../images/logo_GCE.png') no-repeat right bottom transparent;}
	#footer #gce a { color: #5A5F62; display: block; width: 100%; height: 100%; }
	#footer #addthis { margin-top: 15px;}