@charset "UTF-8";


/*	---------------------------------------------------------------------------------------------------------------------------
        I - CLASS .posVert & .posHorz : élément par défaut à appliquer sur une liste. Bout de code qui évite d'être redondant et permet de gagner quelques lignes de code
        ------------------------------------------------------------------------------------------------------------------------------------------------ */
/* Propriétés identiques aux deux Class */
.posVert,
.posHorz {
    margin-left: 0;
    padding-left: 0;
}
.posVert li,
.posHorz li {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}
.posVert li a,
.posHorz li a {
    text-decoration: none;
}

/* posVert : Propriétés uniques */
.posVert li, .posVert li a {
    display: block;
}

/* posHorz : Propriétés uniques */
.posHorz li, .posHorz li a { display: block; float: left; }



/*	---------------------------------------------------------------------------------------------------------------------------
        II - Liste des différents menus
        --------------------------------------------------------------------------------------------------------------------------- */

/* 01 - Nav lang
---------------------------------------*/
#lang {
    position: absolute;
    width: 229px;
    height: 50px;
}
#lang ul {
    margin-top: 230px;
    position: absolute;
}
#lang .firstElement{
    padding-left: 67px;
}

#lang li a {
    width: 34px;
    text-align: center;
    text-transform: uppercase;
}
#lang li a:link, #lang li a:visited { color: #d0d0d0; }
#lang li a:hover, #lang li a:active, #lang li a:focus, #lang li a.active { color: #f6ae37; }

.langNavigationRightBorder{
    border-right: 1px solid #d0d0d0;
}

/* 02 - Nav topMenu
---------------------------------------*/
#topMenu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 200;
    display: none;
}
#topMenu ul {
}
#topMenu li {
    margin-left: 1px;
}
#topMenu li a {
    padding: 0 12px;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: bold;
}
#topMenu li a:link, #topMenu li a:visited { background-color: #fff; color: #173e71; }
#topMenu li a:hover, #topMenu li a:active, #topMenu li a:focus, #topMenu li a.active { background-color: #173e71; color: #fff; }


/* Rubriques avec une icône
-------------------------------- */
/* Propriétes identiques */
#topMenu li.iconContact a { padding-left: 40px; }
#topMenu li.iconContact a:link, #topMenu li.iconContact a:visited { background-position: 12px center; background-repeat: no-repeat; }
#topMenu li.iconContact a:link, #topMenu li.iconContact a:visited { background-position: 12px center;background-repeat: no-repeat; }

/* Propriétés uniques par icône */
/* 01 - contact */
#topMenu li.iconContact a:link, #topMenu li.iconContact a:visited { background-image: url(../images/template/icons/phone.png); }
#topMenu li.iconContact a:hover, #topMenu li.iconContact a:active, #topMenu li.iconContact a:focus { background-image: url(../images/template/icons/phone-white.png); }



/* 03 -Nav Main (menu principal)
---------------------------------------*/

#navWrap {
    z-index: 10000;
}

#nav {
    z-index: 10000;
}

#main {
    position: relative;
    float: left;
    width: 100%;
    height: 63px;
    z-index: 2000;
    border-bottom: 6px solid #f6ae37;
}

/* ul */
#main > ul {
    float: left;
    width: 960px;
    padding: 0 24px;
    background: #173e71;
    height: 63px;
}

/* li */
#main > ul > li { margin-right: 1px; border-right: 1px solid #1a4782;}

/* a */
#main > ul > li > a {
    /*height: 16px;*/
    /*margin-top: -6px;*/
    height: 41px;
    padding: 22px 12px 0px 12px;
    font: normal normal normal 16px/16px 'Open Sans', Arial;
}
#main > ul > li > a:link, #main > ul > li > a:visited { color: #fff; }
#main > ul > li > a:hover, #main > ul > li > a:active, #main > ul > li > a.active, #main > ul > li > a.parentActive { background-color: #f6ae37; color: #fff; }
#main > ul > li > a:focus { background-color: none; }


/* Rubrique Accueil = Cas particulier car icones
------------------------------------------- */
#main > ul > li:first-child a {
    overflow: hidden;
    width: 36px;
    text-indent: 50px;
}
#main > ul > li:first-child a:link, #main > ul > li:first-child a:visited {
    background-image: url(../images/template/icons/home.png);
    background-position: 18px 19px;
    background-repeat: no-repeat;
}
#main > ul > li:first-child a:hover, #main > ul > li:first-child a:active, #main > ul > li:first-child a:focus, #main > ul > li:first-child a.active, #main > ul > li:first-child a.parentActive { background: #f6ae37 url(../images/template/icons/home.png) 18px 19px no-repeat; }


/* Sub Menu
--------------------------*/
/* hover*/
#main ul > li {
    position: relative;
    z-index: 12000;
}
/* Géré en JQuery voir fichier navigation.js
#main ul > li:hover ul {
        display: block;
}
*/

#mainSubMenu {
    display: none;
    position: absolute;
    z-index: 12000;
    margin-top: 63px;
    width: 1012px;
    background-image: url(../images/template/submenu-background.png);
    filter:alpha(opacity=98);
    opacity:0.98;
    -moz-opacity:0.98;
    height: 260px;
    margin-left: -2px;
}

#mainSubMenu > div {
    position: absolute;
    width: 1008px;
    height: 244px;
    margin-left: 2px;
}

#mainSubMenu > div > ul > li.submenuFirstColumn{
    float: left;
    height: 244px;
    border-right: 1px solid #cccccc;
    width: 330px;
    margin-right: 1px;
}

#mainSubMenu > div.tourisme > ul > li.submenuFirstColumn > a
{
    margin-top: 30px;
}

#mainSubMenu > div > ul > li.submenuFirstColumn > a {
    text-align: center;
    width: 100%;
    font-family: "Open Sans";
    font-size: 27px;
    margin-top: 110px;
}

#mainSubMenu > div > ul > li.submenuOtherColumn{
    float: left;
    height: 244px;
    border-right: 1px solid #cccccc;
}

#mainSubMenu > div > ul > li.submenuOtherColumn > div > a{
    text-align: left;
    clear: left;
    width: 313px;
    font-family: "Open Sans";
    color: #696969;
    font-size: 14px;
    border-bottom: 1px solid #c7c7c7;
    padding-bottom: 7px;
    padding-top: 7px;
    margin-left: 10px;
    margin-right: 10px;
}

/* Classes spécifiques au sous-menu (en fonction du choix
----------------------------------------------------------------*/

#mainSubMenu > div.administration{
    border-bottom: 10px solid #82786f;
}
#mainSubMenu > div.administration > ul#children-2 > li.submenuOtherColumn > div > a:hover{
    color: #82786f;
}

#mainSubMenu > div.citoyen{
    border-bottom: 10px solid #ff7200;
}
#mainSubMenu > div.citoyen > ul#children-1 > li.submenuOtherColumn > div > a:hover{
    color: #ff7200;
}

#mainSubMenu > div.culture{
    border-bottom: 10px solid #002F2F;
}
#mainSubMenu > div.culture > ul#children-11 > li.submenuOtherColumn > div > a:hover{
    color: #002F2F;
}

#mainSubMenu > div.economie{
    border-bottom: 10px solid #0098db;
}
#mainSubMenu > div.economie > ul#children-3 > li.submenuOtherColumn > div > a:hover{
    color: #0098db;
}

#mainSubMenu > div.sante{
    border-bottom: 10px solid #d71f85;
}
#mainSubMenu > div.sante > ul#children-6 > li.submenuOtherColumn > div > a:hover{
    color: #d71f85;
}

#mainSubMenu > div.social{
    border-bottom: 10px solid #cb0044;
}
#mainSubMenu > div.social > ul#children-7 > li.submenuOtherColumn > div > a:hover{
    color: #cb0044;
}

#mainSubMenu > div.sport{
    border-bottom: 10px solid #98c02d;
}
#mainSubMenu > div.sport > ul#children-5 > li.submenuOtherColumn > div > a:hover{
    color: #98c02d;
}

#mainSubMenu > div.tourisme{
    border-bottom: 10px solid #8a5a9d;
}
#mainSubMenu > div.tourisme > ul#children-4 > li.submenuOtherColumn > div > a:hover{
    color: #8a5a9d;
}

#mainSubMenu > div.services-en-ligne{
    border-bottom: 10px solid #00b092;
}
#mainSubMenu > div.services-en-ligne > ul#children-8 > li.submenuOtherColumn > div > a:hover{
    color: #00b092;
}

/*#main ul > li ul { display: none; }*/

/* ul */
/*#main ul > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    width: 960px;
    padding: 10px;
    background: #f6ae37;
}*/
/* li & li a */
/*#main ul > li > ul li, #main ul > li > ul li a { display: block;}
#main ul > li > ul li:first-child {
    margin-top: 0;
}
#main ul > li > ul li {
    width: 100%;
    margin: 1px 0 0 0;
}*/
/* a */
/*#main ul > li > ul li a {
    /*width: 170px;*/
/*padding: 5px 10px;
font: normal normal normal 12px/14px Arial, Helvetica, sans-serif;
}
#main ul > li > ul li a:link, #main ul > li > ul li a:visited { background: url(../images/template/line-black-opacity-12pc.png) repeat-y; color: #fff; }
#main ul > li > ul li a:hover, #main ul > li > ul li a:active, #main ul > li > ul li a:focus, #main ul > li > ul li a.active { background: url(../images/template/line-black-opacity-40pc.png) repeat-y; color: #fff; }
*/

/* 04 -breadCrump
---------------------------------------*/
#breadCrump {
    float: left;
    width: 1006px;
    height: 24px;
    border: 1px solid #c4c4c4;
    background: #e4e4e4;
    overflow: hidden;
}
/* ul */
#breadCrump ul {
    float: left;
    width: 100%;
    height: 24px;
    margin-bottom: 0;
}
#breadCrump ul li { /* pas de propriétés définies */ }

/* 01 - 1er élément (Vous êtes ici) */
#breadCrump ul li:first-child {
    position: relative;
    height: 24px;
    margin-top: -2px;
    padding: 2px 10px 2px 24px;
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    background: #484848;
}

/* 02 - liens & current(dernier élément) : propriétés identiques */
#breadCrump ul li a,
#breadCrump ul li.current {
    position: relative;
    padding: 0 10px 0 25px;
    line-height: 24px;
}

/* 02 - liens : propriétés uniques */
#breadCrump ul li a { /**/ }
#breadCrump ul li a:link, #breadCrump ul li a:visited { background: #E4E4E4; color: #555; }
#breadCrump ul li a:hover, #breadCrump ul li a:active, #breadCrump ul li a:focus { background: #ccc; color: #222; }

/* 03 - current = dernier élément du breadcrump*/
#breadCrump ul li.current { color: #173e71; }


/* Petite flèche à droite du breadcrump
--------------------------*/
/* Propriétés identiques  */
#breadCrump ul li a span,
#breadCrump ul li:first-child span {
    display: block;
    position: absolute;
    top: 0;
    right: -15px;
    width: 15px;
    height: 100%;
}

/* 01 - Flèche du 1er élément du breadcrump (Vous êtes ici) */
#breadCrump ul li:first-child span { background: url(../images/template/breadcrumb-first-arrow-bg.png) left center no-repeat; }

/* 02 - Flèche des liens dans le breadcrump */
#breadCrump ul li a:link span, #breadCrump ul li a:visited span { background: url(../images/template/breadcrumb-arrow-bg.png) right center no-repeat; }
#breadCrump ul li a:hover span, #breadCrump ul li a:active span, #breadCrump ul li a:focus span{ background: url(../images/template/breadcrumb-arrow-hover-bg.png) right center no-repeat; }

/* z-index
--------------------------*/
/* 01 : Sous IE7 on va devoir gérer les z-index avec Jquery (voir navigation.js) */
#breadCrump ul li:first-child { z-index: 110; }
#breadCrump ul li a span { z-index: 120; }



/* 05 - NavEnfants
--------------------------------------- */
#navEnfants {
    float: left;
    width: 634px;
    margin-bottom: 24px;
    border: 1px solid #E0E0E0;
    background: #F8F8F8;
}
/* ul */
#navEnfants ul {
    float: left;
    width: 285px;
    margin-bottom: 0;
    padding: 16px;
}
/* li */
#navEnfants  ul li a {
    font-size: 14px;
    line-height: 22px;
    text-decoration: underline;
}



/* 06 - NavShortcut
--------------------------------------- */
#navShortcut {
    float: left;
    width: 100%;
    margin-bottom: 24px;
}
/* ul */
#navShortcut ul {
    float: left;
    width: 100%;
    margin-bottom: 0;
}
/* li */
#navShortcut ul li {
    float: left;
    width: 100%;
    margin-bottom: 1px;
}
/* a */
#navShortcut ul li a {
    padding: 16px;
    font: normal normal normal 22px/24px 'OpenSansCondensedLight', Arial;
}
/* a Hover */
#navShortcut ul li a:link, #navShortcut ul li a:visited { background: #173e71; color: #fff; }
#navShortcut ul li a:hover, #navShortcut ul li a:active, #navShortcut ul li a:focus, #navShortcut ul li a.active { background: #1b4883; color: #fff; }


/* Les cas uniques
-------------------------------*/
/* Propriétés identiques : cas avec icone */
#navShortcut ul li.contact a,
#navShortcut ul li.facebook a,
#navShortcut ul li.newsletter a {
    padding-left: 56px;
}

#navShortcut ul li.facetwit a {
    padding-left: 90px;
}

/* 01 - Nous contacter */
#navShortcut ul li.contact a:link, #navShortcut ul li.contact a:visited { background: #173e71 url(../images/template/icons/shortcut-contact.png) 16px center no-repeat; color: #fff; }
#navShortcut ul li.contact a:hover, #navShortcut ul li.contact a:active, #navShortcut ul li.contact a:focus, #navShortcut ul li.contact a.active { background: #1b4883 url(../images/template/icons/shortcut-contact.png) 16px center no-repeat; color: #fff; }
/* 02 - Facebook */
#navShortcut ul li.facebook a:link, #navShortcut ul li.facebook a:visited { background: #385694 url(../images/template/icons/shortcut-facebook.png) 16px center no-repeat; color: #fff; }
#navShortcut ul li.facebook a:hover, #navShortcut ul li.facebook a:active, #navShortcut ul li.facebook a:focus, #navShortcut ul li.facebook a.active { background: #4b6bad url(../images/template/icons/shortcut-facebook.png) 16px center no-repeat; color: #fff; }
/* 03 - S'abonner à la newsletter */
#navShortcut ul li.newsletter a:link, #navShortcut ul li.newsletter a:visited { background: #ffba00 url(../images/template/icons/shortcut-newsletter.png) 16px center no-repeat; color: #01377e; }
#navShortcut ul li.newsletter a:hover, #navShortcut ul li.newsletter a:active, #navShortcut ul li.newsletter a:focus, #navShortcut ul li.newsletter a.active { background: #ffcc00 url(../images/template/icons/shortcut-newsletter.png) 16px center no-repeat; color: #01377e; }
/* 04 - agenda */
#navShortcut ul li.agenda a:link, #navShortcut ul li.agenda a:visited { background: #ffd944; color: #685300; }
#navShortcut ul li.agenda a:hover, #navShortcut ul li.agenda a:active, #navShortcut ul li.agenda a:focus, #navShortcut ul li.agenda a.active { background: #ffe16b; color: #685300; }
/* 05 - commerces */
#navShortcut ul li.commerces a:link, #navShortcut ul li.commerces a:visited { background: #FFCC00; color: #685300; }
#navShortcut ul li.commerces a:hover, #navShortcut ul li.commerces a:active, #navShortcut ul li.commerces a:focus, #navShortcut ul li.commerces a.active { background: #FFD738; color: #685300; }
/* 06 - procedures-et-documents */
#navShortcut ul li.procedures-et-documents a:link, #navShortcut ul li.procedures-et-documents a:visited { background: #ffba00; color: #685300; }
#navShortcut ul li.procedures-et-documents a:hover, #navShortcut ul li.procedures-et-documents a:active, #navShortcut ul li.procedures-et-documents a:focus, #navShortcut ul li.procedures-et-documents a.active { background: #FFCC00; color: #685300; }
/* 07 - services-comunnaux */
#navShortcut ul li.services-comunnaux a:link, #navShortcut ul li.services-comunnaux a:visited { background: #ffae00; color: #685300; }
#navShortcut ul li.services-comunnaux a:hover, #navShortcut ul li.services-comunnaux a:active, #navShortcut ul li.services-comunnaux a:focus, #navShortcut ul li.services-comunnaux a.active { background: #ffba00; color: #685300; }

/* 02 - facetwit */
#navShortcut ul li.facetwit a:link, #navShortcut ul li.facetwit a:visited { background: #385694 url(../images/template/icons/facebook_twitter.png) 16px center no-repeat; color: #fff; }
#navShortcut ul li.facetwit a:hover, #navShortcut ul li.facetwit a:active, #navShortcut ul li.facetwit a:focus, #navShortcut ul li.facetwit a.active { background: #4b6bad url(../images/template/icons/facebook_twitter.png) 16px center no-repeat; color: #fff; }



/* 07 - .footerNav nav
---------------------------------------*/
.footerNav {
    float: left;
    width: 100%;
    margin-top: 48px;
}
/* On supprime le margin-top au 1er élément */
.footerNav:first-child { margin-top: 0; }

.footerNav nav {
    float: left;
    width: 204px;
    margin-right: 48px;
}
.footerNav nav  ul {
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.footerNav nav ul li {}
.footerNav nav ul li a {

    font: normal normal normal 11px/17px Verdana, Geneva, sans-serif;
}
#_root .footerNav nav ul li a:link, #_root .footerNav nav ul li a:visited { color: #777; text-decoration: underline; }
#_root .footerNav nav ul li a:hover, #_root .footerNav nav ul li a:active, #_root .footerNav nav ul li a:focus { color: #173e71; }


/* Code couleur par menu
------------------------------------- */
/* 01 - administration */
#page-administration #main { border-bottom-color: #82786f; } /* Couleur de la bordure du bas */
#page-administration #main > ul > li > a:hover, #page-administration #main > ul > li > a:focus, #page-administration #main > ul > li > a.active, #page-administration #main > ul > li > a.parentActive { background-color: #82786f; } /* Couleur des rubriques du 1er niveau */
#page-administration #main ul > li ul { background: #82786f; } /* Couleur des sous rubriques */

/* CLASS selected :
        Class ajouté dynamiquement avec JQuery (voir navigation.js)
        Permet d'ajouter le code couleur attribueé aux rubriques et sous-rubriques suite à l'événement CLICK
*/
#_root #main ul .administration.selected > a,
#_root #main ul .administration.selected ul { background: #82786f; }


/* 02 - citoyen */
#page-citoyen #main { border-bottom-color: #ff7200; }
#page-citoyen #main > ul > li > a:hover, #page-citoyen #main > ul > li > a:active, #page-citoyen #main > ul > li > a:focus, #page-citoyen #main > ul > li > a.active, #page-citoyen #main > ul > li > a.parentActive { background-color: #ff7200; }
#page-citoyen #main ul > li ul { background: #ff7200; }
/*CLASS selected*/
#_root #main ul .citoyen.selected > a,
#_root #main ul .citoyen.selected ul { background: #ff7200; }


/* 03 - economie */
#page-economie #main { border-bottom-color: #0098db; }
#page-economie #main > ul > li > a:hover, #page-economie #main > ul > li > a:active, #page-economie #main > ul > li > a:focus, #page-economie #main > ul > li > a.active, #page-economie #main > ul > li > a.parentActive { background-color: #0098db; }
#page-economie #main ul > li ul { background: #0098db; }
/*CLASS selected*/
#_root #main ul .economie.selected > a,
#_root #main ul .economie.selected ul { background: #0098db; }


/* 04 - sante */
#page-sante #main { border-bottom-color: #d71f85; }
#page-sante #main > ul > li > a:hover, #page-sante #main > ul > li > a:active, #page-sante #main > ul > li > a:focus, #page-sante #main > ul > li > a.active, #page-sante #main > ul > li > a.parentActive { background-color: #d71f85; }
#page-sante #main ul > li ul { background: #d71f85; }
/*CLASS selected*/
#_root #main ul .sante.selected > a,
#_root #main ul .sante.selected ul { background: #d71f85; }


/* 05 - services-en-ligne */
#page-services-en-ligne #main { border-bottom-color: #00b092; }
#page-services-en-ligne #main > ul > li > a:hover, #page-services-en-ligne #main > ul > li > a:active, #page-services-en-ligne #main > ul > li > a:focus, #page-services-en-ligne #main > ul > li > a.active, #page-services-en-ligne #main > ul > li > a.parentActive { background-color: #00b092; }
#page-services-en-ligne #main ul > li ul { background: #00b092; }
/*CLASS selected*/
#_root #main ul .services-en-ligne.selected > a,
#_root #main ul .services-en-ligne.selected ul { background: #00b092; }


/* 06 - social */
#page-social #main { border-bottom-color: #cb0044; }
#page-social #main > ul > li > a:hover, #page-social #main > ul > li > a:active, #page-social #main > ul > li > a:focus, #page-social #main > ul > li > a.active, #page-social #main > ul > li > a.parentActive { background-color: #cb0044; }
#page-social #main ul > li ul { background: #cb0044; }
/*CLASS selected*/
#_root #main ul .social.selected > a,
#_root #main ul .social.selected ul { background: #cb0044; }


/* 07 - Sport */
#page-sport #main { border-bottom-color: #98c02d; }
#page-sport #main > ul > li > a:hover, #page-sport #main > ul > li > a:active, #page-sport #main > ul > li > a:focus, #page-sport #main > ul > li > a.active, #page-sport #main > ul > li > a.parentActive { background-color: #98c02d; }
#page-sport #main ul > li ul { background: #98c02d; }
/*CLASS selected*/
#_root #main ul .sport.selected > a,
#_root #main ul .sport.selected ul { background: #98c02d ; }


/* 08 - tourisme */
#page-tourisme #main { border-bottom-color: #8a5a9d; }
#page-tourisme #main > ul > li > a:hover, #page-tourisme #main > ul > li > a:active, #page-tourisme #main > ul > li > a:focus, #page-tourisme #main > ul > li > a.active, #page-tourisme #main > ul > li > a.parentActive { background-color: #8a5a9d; }
#page-tourisme #main ul > li ul { background: #8a5a9d; }
/*CLASS selected*/
#_root #main ul .tourisme.selected > a,
#_root #main ul .tourisme.selected ul { background: #8a5a9d; }


/* 09 - culture */
#page-culture #main { border-bottom-color: #002F2F; }
#page-culture #main > ul > li > a:hover, #page-culture #main > ul > li > a:active, #page-culture #main > ul > li > a:focus, #page-culture #main > ul > li > a.active, #page-culture #main > ul > li > a.parentActive { background-color: #002F2F; }
#page-culture #main ul > li ul { background: #002F2F; }
/*CLASS selected*/
#_root #main ul .culture.selected > a,
#_root #main ul .culture.selected ul { background: #002F2F; }