@charset "utf-8";
/* Design by Nono || Osmoz 2009/2010 */

*{
margin:0;
padding:0;
}

/******
Disposition des différents blocs & mise en place des backgrounds
-- Structuration de la page --
******/

html, body, conteneur{
	min-width:1050px;
	position:relative;
	width:100%;
	height:100%;
	background:url("images/bgMotif.jpg") top left;
}

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

#main{
	width:100%;
	background:url("images/bgMain.jpg") top center no-repeat;
}

#contenu{
	width:100%;
	background:url(images/nuages.png) top left repeat-x;
}

#page{
	width:700px;
	margin:auto;
}

#haut{
	background:url(images/header.png) top center no-repeat;
	height:150px;
	width:700px;
	margin:auto;
}

#milieu{
	background:url(images/motif.png) top center repeat-y;
}

#bas{
	height:100px;
	background:url(images/footer.png) top center no-repeat;
}

#menu{
	position:absolute;
	width:150px;
	height:300px;
	top:100px;
	right:20px;
	background-color:#5db3c4;
}

#styles{
	position:absolute;
	top:20px;
	right:20px;
}

#langues{
	position:absolute;
	top:420px;
	right:15px;
}

#links{
	position:absolute;
	top:0;
	left:0;
	width:100%;
}

#logosEcoles{
	position:absolute;
	top:418px;
	left:18px;
}

#logosEcoles img{
	margin-right:6px;
}

/******
Elements de mise en forme primaire
******/

img{
	border:0;
}

p{
	font-size:0.8em;
	line-height:14px;
}

p.texte{
	padding-left:50px;
	padding-right:50px;
	padding-bottom:20px;
	padding-top:20px;
}

h1, h2 span{
	display:none;
}

h2.principale{
width:100%;
height:100%;
background:url("images/bgPrincipale.png") top center no-repeat;
}

.spacer{
	clear:both;
}

.gras{
	font-weight:bold;
}

/******
Typographie
******/

*{
	font-family:tahoma,arial,helvetica,sans-serif;
}

/******
Mise en forme des liens
******/

#milieu p a{
	text-decoration:none;
	color:#666;
}

#milieu p a:hover{
	border:1px solid #666;
	padding:1px;
}


/******
Mise en forme des listes
******/

	/*Mise en forme de la liste correespondant au menu*/
	
#menu ul {
	width:140px;
	margin:0 auto;
	margin-top:10px;
	list-style-type:none; 
	text-align:center;
	color:#FFF;
}

#menu li{
	
	border-bottom:solid 1px #FFF;
}

#menu a{
	text-decoration:none;
	font-weight:bold;
	font-size:13px;
	color:#FFF;
	display:block;
	padding-top:8px;
	padding-bottom:8px;
}

#menu li:hover{
	background:url(images/bgLiens.png) top left repeat-x;
}
#menu #TLOLink{
        color:#ffffff;
}
#menu #TLOLink:hover{
        background: transparent url(/images/bg_event_tlo.jpg) top center repeat-x;
        color:#ffffff;
}

	/* Mise en forme du menu dynamique */

#details{
	padding:0 10px;
	font-size:12px;
	font-weight:bold;
	line-height:30px;
	color:white;
}

#details a{
	color:white;
	text-decoration:none;
}

#details a:hover{
	text-decoration:underline;
}

#details span{
	display:block;
	position:absolute;
	top:2px;
	right:5px;
	font-size:18px;
	line-height:20px;
}

#details span a{
	text-decoration:none;
	color:white;
}

#details span a:hover{
	color:#900;
	text-decoration:none;
}

#links{
	height:100px;
}

#links ul{
	list-style:none;
}

#links li{
	float:left;
	
}

#links li.active{
margin-top:-2px;	
}

#links li a{
	-moz-border-radius:0 0 10px 10px; /* CSS3 Firefox */
	-webkit-border-bottom-right-radius:10px; /* CSS3 Safari */
	-webkit-border-bottom-left-radius:10px;
	display:block;
	font-size:16px;
	font-variant:small-caps;
	padding:5px 12px;
	margin-left:5px;
	border:2px #FFF solid;
	border-top:none;
	text-decoration:none;
	color:#FFFFFF;
	background-color:#09C;
}

#links a:hover{
	text-decoration:underline;
}

#links a:focus, #links a:active{
	outline:none;
	text-decoration:underline;
}

#links #homepage a, #details.homepage{
	background-color:#44CAE3;
}

#links #associations a, #details.associations{
	background-color:#5B71B8;
}

#links #forum a, #details.forum{
	background-color:#1D8DA2;
}
#links #photos a, #details.photos{
	background-color:#0099CC;
}

#links #covoiturage a, #details.covoiturage{
	background-color:#51BD69;
}

#links #jpro a, #details.jpro{
	background-color:#87A0F5;
}

#links #campagneBDE a, #details.campagneBDE{
	background-color:#d6624f;
}

#links li p{
	position:absolute;
	margin-top:-150px;
}

	
	

/******
Mise en forme de la page de news
******/

#milieu .titre_news{
	font-weight:bolder;
	padding-left:50px;
	padding-bottom:30px;
}

#milieu .titre_news em{
	font-weight:lighter;
	font-size:10px;
	padding-left:500px;
}


#milieu .contenu_news{
	padding-left:70px;
	padding-right:70px;
	padding-bottom:20px;
        line-height: 18px;
}

#milieu .pages_news{
	padding-left:50px;
}

/******
Mise en forme de la page de présentation
******/

.fond_presentation_poles{
	background:url("images/fond_bde_osmoz.png") top center no-repeat;

}

.fond_presentation_poles_en{
	background:url("images/fond_bde_osmoz_en.png") top center no-repeat;

}

#milieu .images_poles p{
	padding-left:24px;
}

/******
Mise en forme du calendrier
******/

#calendrier{
    width:600px;
    margin:auto;
    position:relative;
    overflow:hidden;
}
#slider{
    width:600px;
    overflow:hidden;
}

#slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
}
#slider, #slider li{
    width:600px;
    height:600px;
    overflow:hidden;
}
#slider h4{
    text-align:center;
    padding:20px 0 30px 0;
}
#slider th{
    border:none;
    font-weight:lighter;
    font-size:12px;
    font-variant:small-caps;
}
#slider td{
    width:81px;
    height:70px;
    background:transparent url(/images/bg_normal.jpg) top center no-repeat;
    border:1px solid #888;
}
#slider td div{
    position:relative;
    
    width:100%;
    height:100%;
}
#slider td div.event{
    background:transparent url(/images/bg_event.jpg) top center no-repeat;
}
#slider td div.event-re{
    background:transparent url(/images/bg_event_re.jpg) top center no-repeat;
}
#slider td div.event-bde{
    background:transparent url(/images/bg_event_bde.jpg) top center no-repeat;
}
#slider td div.event-tlo{
    background:transparent url(/images/bg_event_tlo.jpg) top center no-repeat;
    color:white;
    font-weight:bold;
}

#slider div div{
    position:absolute;
    top:10px;
    left:5px;
    width:70px;
    font-size:11px;
}
#slider div p{
    position:absolute;
    top:20px;
    left:60px
}

#slider td p.date{
    position:relative;
    top:50px;
    left:60px;
}
#prevBtn,#nextBtn{
    display:block;
    position:absolute;
}
#prevBtn a,#nextBtn a{
    text-decoration:none;
    color:#777;
    display:block;
    width:60px;
    height:60px;
    font-size:14px;
}
#prevBtn a span,#nextBtn a span{
    display:none;
}
#prevBtn{
    background:transparent url(images/precedent.png) top center no-repeat;
    top:120px;
    left:100px
}
#nextBtn{
    background:transparent url(images/suivant.png) top center no-repeat;
    top:120px;
    left:445px;
}
#calendrier .texte{
    border: 1px dashed #459ADF;
    padding:1em;
    color:#333333
}
#calendrier .texte a{
    white-space:nowrap;
}


/******
Mise en forme de la section Jeux
******/

#milieu .menuJeux{
	padding-left:40px;
	width:650px;
}

#milieu .jeux{
	padding-left:30px;
	
}

/******
Mise en forme de la page de contact
******/


div.contact{
	padding-top:10px;
	float:left;
	font-size:12px;
	margin-left:60px;
        margin-top:20px;
	width:250px;
	height:110px;
	background-color:#F5F2F7;
	border:2px solid #267F79;
}

p.contact{
    margin-bottom:-20px;
}

.contact img{
	float:left;
}

.contact .mail{
	padding-left:20px;
	font-size:10px;
	font-style:italic;
}

.contact .nom{
	font-size:12px;
	font-variant:small-caps;
}

.contact .role{
	font-weight:bolder;
}

.contact .prenom{
	font-size:12px;
	
}

/******
Mise en forme de la section cours de langue
******/

#coursLangues{
	padding:0 50px 30px 50px;
}


#coursLangues table{
margin:auto;
}


#coursLangues table.recap{
margin: auto;
border:3px solid #6495ed;
border-collapse:collapse;
width:90%;
}

#coursLangues th{
margin : auto;
border:1px solid #6495ed;
padding:5px;
background-color:#EFF6FF;
}

#coursLangues td{
text-align: right;
padding: 2px;
border:1px dotted #6495ed;
}

#coursLangues caption{
text-align:left;
font-size:1.5em;
border-bottom:1px solid black;
margin-bottom:5px;
font-style:italic;
}

#coursLangues em{
color:#900;
font-size:larger;
}

#coursLangues h3{
	font-size:15px;
	font-weight:bold;
	color:#06C;
	padding-bottom:30px;
	padding-left:20px;
}
/******
Mise en forme de la page partenaire
******/

#partenaires{
	padding:0 50px ;
}

#partenaires .partenaire{
	float:left;
	width:150px;
	margin-top:10px;
	margin-bottom:15px;
	text-align:center;
}

#partenaires .partenaire img{
	border-bottom:2px solid #666;
}

#partenaires .partenaire a{
	color:#333;
	font-variant:small-caps;
}

#partenaires .partenaire .button{
	border:none;
}

#partenaires .partenaire a:hover{
	color:#666;
	text-decoration:none;
	font-variant:small-caps;
}

#partenaires h3{
	color:#069;
	font-size:20px;
	padding-left:40px;
	padding-bottom:10px;
	border-bottom:2px dotted #069;
	font-style:italic;
}



#partenaires p.texte img{
	left:20px;
	top:50px;
	position:absolute;
	border:2px #666 solid;
}

#partenaires p.texte{
	padding-left:170px;
	position:relative;
}

#partenaires p.texte em{
	font-variant:small-caps;
	font-size:18px;
}

#partenaires .spacer p{
	border-top:2px #069 groove;
	width:200px;
	margin:auto;
}

/******
Mise en forme de la section pougne
******/

#pougne p{
	padding-left:40px;
	padding-bottom:20px;
}

#pougne p.texte{
	font-size:10px;
	color:#333;
	border:1px dashed #066;
	margin:0 40px;
	padding:10px 15px;
}

#pougne a.fichier, #pougne a.dossier, #pougne a.up{
    color:#333;
    display:block;
    padding:0;
    margin:0;
    padding:5px 0 5px 40px;
    width:570px;
    
    border-bottom:#666 solid 1px;
}
#pougne a.fichier:hover, #pougne a.dossier:hover,#pougne a.up:hover{
    color:#333;
    display:block;
    padding:0;
    margin:0;
    padding:5px 0 5px 40px;
    width:570px;
    border-color:#333;
}
#pougne a.fichier{ 
    background:transparent url('/images/fichier.png') center left no-repeat;
}

#pougne a.dossier{
    background:transparent url('/images/dossier.png') center left no-repeat;
}
#pougne a.up{
    background:transparent url('/images/up.png') 88% 0% no-repeat;
    font-weight:bold;
    border:none;
    
    text-align:right;
    padding-bottom:15px;
}
#pougne a.up:hover{
    padding-bottom:15px;
    border:none;
    color:#666;
    text-align:right;

}

/*************/
/* Mise en forme de l'interface de newser
/*************/

h2.campagne{
width:100%;
height:100%;
background:url("images/bgPrincipale_campagne.png") top center no-repeat;
}
#editionNews #milieu{
    padding-left:50px;
    padding-right:40px;
}
#editionNews table{
    width:95%;
    margin:auto;
    border:1px double #888;
}
#editionNews th{
    border:2px solid #555;
    padding:0.8em;
}
#editionNews td{
    border:1px dashed #555;
    padding:1em;
}
#editionNews #milieu a{
    color:#069;
}
#editionNews #milieu a:hover{
    text-decoration:none;
    font-weight:bold;
}