/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

body { text-align : center ; background : #dddddd ; background-image :url(http://cgtparis.fr/squelettes/images/coins.png) ; background-repeat : no-repeat ; background-position : 49.97% 0.72%; } 

#carte {height : 300px ;} 
#masque {width : 680px ; position : relative ; margin : 0em 0 0.5em 0em ; padding : 0em 0em 1em 1em ; box-shadow : 0px 0px 0px #ffffff ;}
#masque h4{height : 45px ; color : #ffffff ; font-size : 1.2em ; font-weight : normal ; margin : -1.5em 0 0 0em ; padding : 0.5em 0 1em 1em ; line-height : 1.5em ; background : #000000 ; box-shadow : 0px 0px 0px #ffffff ;}

#masque57 {width : 700px ; float : left ; position : relative ; margin : 2em 0 0em 0em ; padding : 0em 0em 1em 0em ; box-shadow : 0px 0px 0px #ffffff ;}

div#titreune {color : #000000 ; width : 72%; margin : 0 0 0 12em ; padding : 0.3em 2em 1em 2em ; border : 1px solid #900; border-radius : 5px ; webkit-box-shadow: 3px 5px 5px 2px #CCC; box-shadow: 3px 5px 5px 2px #CCC;} 
div#titreune2 {color : #900 ; width : 100%; margin : -0.39em 0 0 -2em ; padding : 0em 2em 0 2em ; border : 0px solid #900; border-top-left-radius: 5px ;  border-top-right-radius: 5px ; background : #ffffff ;}
#titreune2  h2 a{color : #900 ;}
#titreune2  h2 a:hover{background : #ffffff ;}

#codasliderbloc {border-bottom : 1px dotted #808080}

/* barre de titre haut de page
------------------------------------------ */

#menuhaut { position: relative; width: 1095px; height : 2em; margin: 40px auto 0px auto; padding: 5px 0 0 0 ; text-align: center; background: #000000;}
#menuhaut1 { position: absolute; left : 0em; width: 8em; text-align: center; background: #000000; border : 0px solid #e42322; }
#menuhaut1 a {font-size : 0.8em ; color:#eeeedd; } 
#menuhaut1 a:hover {color:#ffffff; background : transparent; text-decoration : none ;}
#menuhaut2 { position: absolute; left : 8em; width: 8em; text-align: center; background: #000000; border : 0px solid #e42322; }
#menuhaut2 a {font-size : 0.8em ; color:#eeeedd;}
#menuhaut2 a:hover {color:#ffffff; background : transparent; text-decoration : none ;}
#menuhaut3 { position: absolute; left : 16em; width: 8em; text-align: center; background: #000000; border : 0px solid #e42322; }
#menuhaut3 a {font-size : 0.8em ; color:#eeeedd;}
#menuhaut3 a:hover {color:#ffffff; background : transparent; text-decoration : none ;}
#menuhaut4 { position: absolute; left : 24em; width: 8em; text-align: center; background: #000000; border : 0px solid #e42322; }
#menuhaut4 a {font-size : 0.8em ; color:#eeeedd;}
#menuhaut4 a:hover {color:#ffffff; background : transparent; text-decoration : none ;}
#menuhaut5 { position: absolute; left : 32em; width: 8em; text-align: center; background: #000000; border : 0px solid #e42322; }
#menuhaut5 a {font-size : 0.8em ; color:#eeeedd;}
#menuhaut5 a:hover {color:#ffffff; background : transparent; text-decoration : none ;}
#menuhaut6 { position: absolute; left : 40em; width: 8em; text-align: center; background: #000000; border : 0px solid #e42322; }
#menuhaut6 a {font-size : 0.8em ; color:#eeeedd;}
#menuhaut6 a:hover {color:#ffffff; background : transparent; text-decoration : none ;}
#menuhaut7 { position: absolute; left : 48em; width: 8em; text-align: center; background: #000000; border : 0px solid #e42322; }
#menuhaut7 a {font-size : 0.8em ; color:#eeeedd;}
#menuhaut7 a:hover {color:#ffffff; background : transparent; text-decoration : none ;}
#menuhaut8 { position: absolute; left : 56em; width: 8em; text-align: center; background: #000000; border : 0px solid #e42322; }
#menuhaut8 a {font-size : 0.8em ; color:#eeeedd;}
#menuhaut8 a:hover {color:#ffffff; background : transparent; text-decoration : none ;}

.page { position: relative; width: 1050px; margin: 0 auto 30px auto; padding: 5px 30px 30px 30px; text-align: left; background: #ffffff; box-shadow : 2px 2px 8px #000000;}

/* 4 articles en blocs centreuax
------------------------------------------ */

#blocs {position : relative; width : 700px; height : auto; padding : 0 0px 0 0px ; background : #eeeeee ;}
#blocs td {padding : 0 2em 2em 2em;}
#blocs tbody tr:nth-child(even) td {background : #eeeeee;}
#blocs h2 {font-size : 1.2em; font-weight : bold; margin-bottom : 0.5em; line-height : 1.2em ;}
#blocs h2 a{color : #000000 ; font-size : 1em; font-weight : bold; margin-bottom : 0.5em; line-height : 1.0em ;}
#blocs h2 a:active{color : #000000 ; background : none;}
#blocs h3 {color : #808080 ; font-size : 0.8em; font-weight : normal; font-style : italic ; margin-bottom : 0.5em; line-height : 1.2em ; text-align : right ;}
#blocs p {text-align : justify; line-height : 1.2em ; }

#trait {width : 705px ; padding : 20px 0px 0 0 ; margin : 0 0 20px 0 ; border : 1px solid #808080 ; border-radius : 5px ; background : #eeeeee ; webkit-box-shadow: 3px 5px 5px 2px #CCC; box-shadow: 3px 5px 5px 2px #CCC;}

#traitdroit {padding : 0 20px 0 0 ; border-right : 30px solid #eeeeee ; background : #ffffff ;}

#socialtags {margin : 1em 0 0 0 ; padding : 0.5em 0 0 0em ;}
#retour {float : left ; margin : 10px 0px 0px -77px ; padding : 5px 5px 5px 5px ;}

.header {}
.main { padding: 0 0 1.5em 0; }
.footer { clear: both; padding: 1.5em 0 0; border-top: 2px solid; }

.wrapper { margin : 0 auto ; clear: both; float: left; width: 62%; overflow: hidden; }
.wrapper57 { margin : 0 auto ; padding : 0px 3px 0 3px; clear: both; float: left; width: 70%; overflow: hidden; }
.wrapper57 table.spip tr.odd td {box-shadow : 1px 1px 3px 0px #000000; }
.wrappertop { margin : 0 auto ; clear: both; float: left; width: 72%; overflow: hidden; }
.content { min-height: 350px; }
.aside { float: right; width: 26%; overflow: hidden; }
.asidebas { float: right; width: 35%; overflow: hidden; padding : 0 0px 0 20px;  border-left : 30px solid #eeeeee ; background : #ffffff ; }
.asidearticle { float: right; width: 30%; margin : 0 0 20px 0 ; padding : 0 10px 0 20px ; overflow: hidden; background : #eeeeee; border : 1px solid #808080 ; border-radius : 5px ;}
.asidearticle57 { float: right; width: 23%; margin : 0 0 20px 0 ; padding : 0 10px 0 20px ; overflow: hidden; background : #eeeeee; border : 1px solid #808080 ; border-radius : 5px ;}
.asidearticle60 { float: right; width: 23%; margin : 0 0 20px 0 ; padding : 0 10px 0 20px ; overflow: hidden; background : #ffffff; border : 1px solid #808080 ; border-radius : 5px ;}
.asidearticle58 { float: right; width: 23%; margin : 0 0 20px 0 ; padding : 0 10px 0 20px ; overflow: hidden; color : #ffffff ; background : #900; border : 1px solid #000000 ; border-radius : 5px ;}
.asidearticle59 { float: right; width: 23%; margin : 0 0 20px 0 ; padding : 0 10px 0 20px ; overflow: hidden; color : #000000 ; background : #ffffff; border : 1px solid #000000 ; border-radius : 5px ;}

/* centre bas 4 blocs
------------------------------------------ */
div#ligne{float: left; width:100%;height:1px;}
div#centrebas{width:100%; height: 320px; margin : 0 0 2em 0em ; padding : 0 0 0 0; background-image:url(http://www.ulcgt11.fr/images/puce12.png);}
div#centredroit{float:right; width:215px; height:320px;overflow:hidden;margin-top:5px;margin-right:10px;margin-bottom:0;margin-left:0;background-image:url(http://www.ulcgt11.fr/images/puce12.png);}
div#centredroit ul{padding : 0 10px 0 10px ;} 
div#centrecentredroit{float:left; width:215px ; height:320px ; overflow:hidden ; margin-top:5px ; margin-right: 12px ; margin-bottom:0 ; margin-left: 15px; background:#ffffff;}
div#centrecentredroit ul{padding : 0 10px 0 10px ;} 
div#centrecentregauche{float:left; width:215px; height:320px;overflow:hidden;margin-top:5px;margin-right:12px;margin-bottom:0;margin-left:0;background:#ffffff;}
div#centrecentregauche ul{padding : 0 10px 0 10px ;} 
div#centregauche{float:left; width:215px; height:320px;overflow:hidden;margin-top:5px; margin-left:15px; margin-bottom:0;margin-right:12px; padding : 0 0 0 5px ; background:#ffffff;}
div#centregauche ul{padding : 0 10px 0 10px ;} 

/* trilogie basse
------------------------------------------ */
div#trilogie {float : left ; width: 990px; height: 380px; color : #808080 ; margin : 2em 0 2em 0; padding : 10px 20px; background : #eeeeee ; border : 1px solid #808080 ; border-radius : 5px ; background : #eeeeee ; webkit-box-shadow: 3px 5px 5px 2px #CCC; box-shadow: 3px 5px 5px 2px #CCC;}
div#trilogiedroit {float:right ; width : 260px ; height :380px ; overflow : hidden ; margin-top : 5px ; margin-right : 10px ; margin-bottom : 0 ; margin-left : 0 ; }
div#trilogiecentre {float:left ; width : 280px ; height :380px ; overflow : hidden ; margin-top : 5px ; margin-right : 12px ; margin-bottom : 0 ; margin-left : 50px ; }
div#trilogiecentre ul{padding : 0 20px 0 0 ; border-right: 0px dotted #808080 ;}
div#trilogiegauche ul{padding : 0 20px 0 0 ; border-right: 0px dotted #808080 ;}
div#trilogiegauche {float:left ; width : 260px ; height :380px ; overflow : hidden ; margin-top : 5px ; margin-right : 12px ; margin-bottom : 0 ; margin-left : 0 ; }

/* trilogie haute
------------------------------------------ */
div#trilogie0{float : left ; width: 990px; height: 255px; color : #000000 ; margin : 1em 0 1em 0; padding : 0px 0px 30px 0; background : #ffffff ; border : 1px solid #900 ; border-radius : 5px ; background : #ffffff ; webkit-box-shadow: 3px 5px 5px 2px #CCC; box-shadow: 3px 5px 5px 2px #CCC;}
div#trilogie0 a {color : #808080 ; line-height : 20px ;}
div#trilogie0 a:hover {color : #808080 ; text-decoration : underline ; }

div#trilogie0droit {float : right ; width : 270px ; height :248px ; overflow : hidden ; margin-top : 0px ; margin-right : 20px ; margin-bottom : 0 ; margin-left : 10px ; padding : 10px 10px 0 5px; border-top : 0px solid #eeeeee ;border-right : 0px solid #eeeeee ; border-bottom : 0px solid #900 ; border-left : 0px solid #eeeeee ; background : #ffffff ; }
div#trilogie0droit h2 {text-transform : uppercase ; text-align : left ; font-size : 0.8em ; font-weight : bold ; margin : 1em 0 0.3em 1em ; line-height : 1.4em;}
div#trilogie0droit p {text-align : justify ; }
div#trilogie0droit img{margin : 0 0 0 10px ; box-shadow : 2px 2px 3px #808080 ; border-radius : 5px ; }

div#trilogie0centre {float:left ; width : 310px ; height :250px ; overflow : hidden ; margin-top : 0px ; margin-right : 5px ; margin-bottom : 0 ; margin-left : 12px ; padding : 10px 10px 0 20px ;  border-top : 0px solid #eeeeee ;border-right : 0px solid #eeeeee ; border-bottom : 0px solid #900 ; border-left : 0px solid #eeeeee ; background : #ffffff; }
div#trilogie0centre h2 {text-transform : uppercase ; text-align : left ; font-size : 0.8em ; font-weight : bold ; margin : 1em 0 0.3em 1em ;}
div#trilogie0centre p {text-align : justify ; }
div#trilogie0centre img{margin : 0 0 0 20px ; box-shadow : 2px 2px 3px #808080 ; border-radius : 5px ;}

div#trilogie0gauche {float:left ; width : 270px ; height :248px ; overflow : hidden ; margin-top : 0px ; margin-right : 18px ; margin-left : 20px ; margin-bottom : 0 ; padding : 10px 10px 0 0px ; border-top : 0px solid #eeeeee ;border-right : 0px solid #eeeeee ; border-bottom : 0px solid #900 ; border-left : 0px solid #eeeeee ; background : #ffffff; }
div#trilogie0gauche h2 {text-transform : uppercase ; text-align : left ; font-size : 0.8em ; font-weight : bold ; margin : 1em 0 0.3em 1em ;}
div#trilogie0gauche p {text-align : justify ; }
div#trilogie0gauche img {margin : 0 0 0 10px ; box-shadow : 2px 2px 3px #808080 ; border-radius : 5px ;}

/* inclusion reseaux sociaux
------------------------------------------ */

#facebook {width : 610px ; height : 410px ; background : #bac3e0 ; margin : 0 1em 1em 0 ; padding : 0em ; border : 1px solid #5674cb ; border-radius : 5px ; webkit-box-shadow: 3px 5px 5px 2px #CCC; box-shadow: 3px 5px 5px 2px #CCC;}
#facebook h1{text-transform : uppercase ; font-size : 2em ; font-weight : bold ; color : #eeeeee ; text-shadow : 0px 0px 0px #000000 ; text-align : center ; margin : 0px 0 5px 0; border-top : 0px solid #315c99; }

/* Entete et barre de navigation
------------------------------------------ */

.header { padding-top: 0em; padding-bottom: 0em; padding-right: 15%; border-bottom: 0px solid #eeeeee; }
.header {background-image : url("hhhhhhhhhhttp://ulcgt11.fr/squelettes/images/fond.png");}
.header {background : #ffffff;}
.header {background-repeat : repeat-x ;}
.header #logo { font-size : 1.6em ; display: block; margin: 0; padding : 0.5em 0 0em 0em ; line-height: 1; font-weight: bold; background : #fff ; border-radius : 5px ; }
.header #logo h2{ font-size : 2.5em ; display: block; margin: 0 0 0 2em ; padding : 1em 0 3em 2em ; line-height: 1; font-weight: bold; background : #fff ; border-radius : 5px ; }
.header #logo,
.header #logo a,
.header #logo a:hover { background: transparent; text-decoration: none; color: #222; }
.header #slogan {color : #ffffff ; font-size : 15px ; font-weight : bold ; letter-spacing : 5px ; line-height : 1em ;  margin: 1em 16em 0 9em; padding : 0.2em 0 0.2em 0.2em ; }
h2#slogan2 {color : #ffffff ; font-size : 15px ; font-weight : bold ; letter-spacing : 5px ; line-height : 1em ;  margin: 1em 16em 0 10em; padding : 0.2em 0 0.2em 0.2em ; background : #900 ; border-radius : 5px ; border : 1px solid #ffffff ; }
.header p {font-size : 0.8em ; line-height : 1.4em ;  margin: 0em -8em 1em 11.8em; text-align : justify ; }


/* header personnalisé de la rubrique 62
------------------------------------------ */

.header62 {width : 1000px ; height : 240px ;}
.header62 { margin : 2em 0 2em 0 ; padding-top: 0em; padding-bottom: 0em; padding-right: 0%; border-bottom: 0px solid #eeeeee; }
.header62 {background-image : url("http://cgtparis.fr/squelettes/images/bandeau62.png");}
.header62 {background-repeat : repeat-x ;}
.header62 #logo { font-size : 1.6em ; display: block; margin: 0; padding : 0.5em 0 0em 0em ; line-height: 1; font-weight: bold; background : #fff ; border-radius : 5px ; }
.header62 #logo h2{ font-size : 2.5em ; display: block; margin: 0 0 0 2em ; padding : 1em 0 3em 2em ; line-height: 1; font-weight: bold; background : #fff ; border-radius : 5px ; }
.header62 #logo,
.header62 #logo a,
.header62 #logo a:hover { background: transparent; text-decoration: none; color: #222; }
.header62 #slogan {color : #ffffff ; font-size : 15px ; font-weight : bold ; letter-spacing : 5px ; line-height : 1em ;  margin: 1em 16em 0 9em; padding : 0.2em 0 0.2em 0.2em ; }
h2#slogan2 {color : #ffffff ; font-size : 15px ; font-weight : bold ; letter-spacing : 5px ; line-height : 1em ;  margin: 1em 16em 0 10em; padding : 0.2em 0 0.2em 0.2em ; background : #900 ; border-radius : 5px ; border : 1px solid #ffffff ; }
.header62 p {font-size : 0.8em ; line-height : 1.4em ;  margin: 0em -8em 1em 11.8em; text-align : justify ; }


/* header personnalisé de la rubrique 63
------------------------------------------ */

.header63 {width : 1000px ; height : 240px ;}
.header63 { margin : 2em 0 2em 0 ; padding-top: 0em; padding-bottom: 0em; padding-right: 0%; border-bottom: 0px solid #eeeeee; }
.header63 {background-image : url("http://cgtparis.fr/squelettes/images/bandeau63.png");}
.header63 {background-repeat : repeat-x ;}
.header63 #logo { font-size : 1.6em ; display: block; margin: 0; padding : 0.5em 0 0em 0em ; line-height: 1; font-weight: bold; background : #fff ; border-radius : 5px ; }
.header63 #logo h2{ font-size : 2.5em ; display: block; margin: 0 0 0 2em ; padding : 1em 0 3em 2em ; line-height: 1; font-weight: bold; background : #fff ; border-radius : 5px ; }
.header63 #logo,
.header63 #logo a,
.header63 #logo a:hover { background: transparent; text-decoration: none; color: #222; }
.header63 #slogan {color : #ffffff ; font-size : 15px ; font-weight : bold ; letter-spacing : 5px ; line-height : 1em ;  margin: 1em 16em 0 9em; padding : 0.2em 0 0.2em 0.2em ; }
h2#slogan2 {color : #ffffff ; font-size : 15px ; font-weight : bold ; letter-spacing : 5px ; line-height : 1em ;  margin: 1em 16em 0 10em; padding : 0.2em 0 0.2em 0.2em ; background : #900 ; border-radius : 5px ; border : 1px solid #ffffff ; }
.header63 p {font-size : 0.8em ; line-height : 1.4em ;  margin: 0em -8em 1em 11.8em; text-align : justify ; }


.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.nav { height : 40px ; border: solid #eeeeee; border-width: 1px 0; }
.nav ul {}
.nav ul li {}
.nav ul li a { float: left; display: block; padding: .5em 1em; border-right: 0px solid #222; text-decoration: none; }
.nav ul li.on a { background: transparent; color: #900; font-weight: normal; border-bottom : 2px solid #900 ; }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { padding : .5em 1em ; background: transparent; color: #900; border-bottom : 2px solid #900 ; }
#formulaire_recherche { position: absolute; top: 165px; right: 28px; border: 0; }
.footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }

/* Gabarit d'impression
------------------------------------------ */
@media print {
.page,
.wrapper,
.content { width: auto; }
.nav,
.arbo,
.aside,
.footer { display: none; }
}

/* Affichage sur petits ecrans
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */
@media (max-width: 640px) {

/* passer tous les elements de largeur fixe en largeur automatique */
body,
.page,
.header,
.header62,
.main,
.footer,
.wrapper,
.content,
.aside { width: auto !important; margin: auto !important; padding: auto !important; }

.page { margin: 0; padding: 5%; }

/* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
.content,
.aside { clear: both; float: none !important; width: auto !important; }
.nav ul li a { float: none; border: 0; }
#formulaire_recherche { display: none; position: static; text-align: center; }
#sliderspip {margin : 0 0 2em 0; height : 295px ;}
#sliderspip a {color : #ffffff; background-color : #ffffff;}
#sliderspip a:hover {color : #ffffff; background-color : #ffffff;}
.pubban banniere_cube {width : 200px; heiht : 100px; background : #000000;}
.pubban banniere_cube img{webkit-box-shadow: 3px 5px 5px 2px #CCC; box-shadow: 3px 5px 5px 2px #CCC;}
.arbo { display: none; }
.footer .colophon { width: auto; float: none; }
.footer .generator { display: none; }

/* header du calendrier full-calendar */
table.fc-header td { display: block; text-align: left; }

}

/* ######### CSS for top level tabs ######### */

.tabsmenuclass ul{
overflow: hidden;
width: 1001px;
height : 40px ; 
margin: 0 0 0em 0;
padding: 0;
list-style-type: none;
background : #eeeeee;
border-top : 1px ridge #808080 ;
border-bottom : 1px ridge #808080;
}

.tabsmenuclass li{
float: left;
border-right : 1px solid #eeeeee ;
border-bottom : 1px solid #eeeeee ;
}

.tabsmenuclass a{
text-transform : uppercase ; 
display: block;
padding: 4px 17px 10px 17px;
background: #eeeeee;
color: #808080;
margin-right: 0px;
text-decoration: none;
font-size: 0.8em;
}

.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: #eeeeee;
color: #808080;
text-decoration : none ; 
padding: 3px 16px 9px 16px;
border-right : 1px solid #808080 ;
border-bottom : 1px solid #808080 ;
border-left : 1px solid #ffffff ;
border-top : 1px solid #ffffff ;
}

/* ######### CSS for sub menu container below ######### */

.mysubmenuarea {border-bottom : 1px solid #000000 ; background : #eeeeee ; }
.tabsmenucontent a {font-size : 0.8em ; text-transform : uppercase ; color : #808080 ; }
.tabsmenucontent a:hover {color : #000000 ; text-decoration : none; }

.tabsmenucontentclass{
clear: left;
background: #ffffff;
width: 99%;
height: 25px;
padding: 0 10px 0 10px;
border-bottom : 0px solid #000000 ;
}

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

.tabsmenucontentclass li{
float: left;
margin-right: 2em;
}

/* end */