@charset "UTF-8";

/*	CLASS actualite : Utilisé pour définir les propriétés identiques de "l'actu à la une" et "l'actu en +"
        --------------------------------------------------------------------------------------------------------------------------- */
.actualite {}

/* Titre principal  */
.actualite h2 {
    position: relative;
    margin-bottom: 0;
    text-transform: uppercase;
}

/* ul */
.actualite ul {
    float: left;
    width: 300px;
    margin-bottom: 0;
}
/* 1er élément li */
.actualite ul li:first-child { border-top: 1px dashed #ccc; }

/* li */
.actualite ul li {
    float: left;
    display: block;
    width: 100%;
    padding: 1px 0;
    border-bottom: 1px dashed #ccc;
}
/* a */
.actualite ul li a {
    position: relative;
    float: left;
    width: 286px;
    min-height: 84px;
    padding: 12px 6px;
    cursor: pointer;
}
/* a Hover && Active  */
.actualite ul li a:hover, .actualite ul li a:active, .actualite ul li a:focus, 
.actualite ul li a.active { background: #173e71; color: #fff; }

/* img */
.actualite ul li a img {
    float: left;
    width: 48px;
    height: 48px;
    margin: 0 10px 4px 0;
}

/* head */
.actualite ul li a .head {
    float: left;
    width: 228px;
    margin-bottom: 4px;
}

/* categorie */
.actualite ul li a .categorie {
    overflow: hidden;
    display: block;
    float: left;
    height: 12px;
    max-width: 142px;
    padding: 1px 3px; 
    font: normal normal normal 9px/11px Verdana, Geneva, sans-serif;
    text-transform: uppercase;
    vertical-align: text-top;
    color: #fff;
    background: #173e71;
}

/* date */
.actualite ul li a time {
    float: right;
    width: 120px;
    font: normal normal normal 10px/12px Verdana, Geneva, sans-serif;
    text-align: right;
    color: #444;
}
/* date Hover && Active */
.actualite ul li a:hover time, .actualite ul li a:active time, .actualite ul li a:focus time,
.actualite ul li a.active time{ color: #fff; }


/* Titre */
.actualite ul li a h3 {
    overflow: hidden;
    width: 228px;
    height: 32px;
    margin-bottom: 0;
    font: normal normal bold 12px/16px Verdana, Geneva, sans-serif; 
}
/* Titre : Hover && Active  */
.actualite ul li a:hover h3, .actualite ul li a:active h3, .actualite ul li a:focus h3,
.actualite ul li a.active h3 { color: #fff; }

/* Description courte  */
.actualite ul li a p {
    float: left;
    width: 100%;
    margin-bottom: 0;
    font: normal normal normal 12px/16px Verdana, Geneva, sans-serif; 
}

/* Class arrow (flèche à gauche)  */
.actualite ul li a .arrow {
    position: absolute;
    left: -9px;
    top: 50%;
    width: 9px;
    height: 16px;
    margin-top: -8px;
}
/* Class arrow Hover & Active */
.actualite ul li a:hover .arrow, .actualite ul li a:hover .focus, .actualite ul li a:active .arrow,
.actualite ul li a.active .arrow { background: url(../images/template/actu-arrow-left-bg.png) no-repeat; }

/*	I - Actu à la une
        --------------------------------------------------------------------------------------------------------------------------- */
#acuALaUne {
    float: left;
    width: 100%;
    margin-bottom: 24px;
    background: #eee;
    min-height: 372px;    
}

/* 01 - Titre principal  */
#acuALaUne h2 {
    margin: 16px 12px;
    padding-left: 32px;
    background: url(../images/template/icons/actu-a-la-une-titre.png) left 2px no-repeat;
}


/* 02 - Actualité Active (grand format à gauche) */
/* replace #current by .current*/
.currentActu {
    position: relative;
    float: left;
    display: block;
    width: 288px;
    margin-left: 12px;
} 
/* img */
.currentActu img {
    width: 288px;
    height: 288px;
}

/* Titre */
.currentActu h3 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0;
    padding: 12px;
    font-size: 13px;
    line-height: 17px;
    font-weight: bold;
    color: #fff;
    background: #173e71;
}
/* span */
.currentActu h3 span {
    overflow: hidden;
    display: block;
    width: 100%;
    min-height: 40px;
}


/* 03 - Liste des actualités : ul */
#acuALaUne ul { 
    float: right;
    padding: 0 12px 12px 12px;
}
/* a */
#acuALaUne ul li a {
    padding-top: 6px;
    padding-bottom: 6px;
}

/*	II - Actu en plus 
        --------------------------------------------------------------------------------------------------------------------------- */
#acuEnplus {
    float: left;
    width: 324px;
}
/* Titre principal */
#acuEnplus h2 { 
    padding-left: 32px;
}
/* Titre principal */
#acuEnplus > .head {
    position: relative;
    padding: 20px 12px;
    background: #f8ad3a;
}
/* Titre */
#acuEnplus h2 {
    color: #fff;
    background: url(../images/template/icons/actu-en-plus-titre.png) left center no-repeat;
}
/* arrow */
#acuEnplus > .head .arrow { 
    position: absolute; 
    display: block; 
    bottom: -12px; 
    left: 0;
    width: 100%;
    height: 12px;
    background: url(../images/template/actu-en-plus-title-arrow-bottom.png) center top no-repeat; 
    z-index: 70; 
}


/* Liste des actualités : ul */
#acuEnplus ul {
    margin-bottom: 12px;
    padding: 16px 11px 11px 11px;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #aaa;
}

/*	III - Acgenda
        --------------------------------------------------------------------------------------------------------------------------- */
#agenda {
    float: left;
    width: 288px;
    margin-right: 24px;
}

/* 01 - Titre principal */
#agenda > .head {
    position: relative;
    margin-bottom: 15px;
    padding: 20px 12px;
    background: #eee;
}
/* Titre */
#agenda h2 {
    padding-left: 32px;
    margin-bottom: 0;
    text-transform: uppercase;
    background: url(../images/template/icons/agenda-titre.png) left center no-repeat;
}

/* arrow */
#agenda > .head .arrow { 
    position: absolute; 
    display: block;  
    bottom: -15px; 
    left: 0;
    width: 100%;
    height: 15px;
    background: #cecece url(../images/template/agenda-title-arrow-bottom.png) center top no-repeat; 
    z-index: 70;
}
/* eleGraph  = Elément graphique (anneaux agenda) */
#agenda > .head .eleGraph { 
    position: absolute; 
    display: block;  
    bottom: -15px; 
    left: 0;
    width: 100%;
    height: 26px;
    background: url(../images/template/agenda-ele-graph.png) center top no-repeat; 
    z-index: 80;
}


/* 02 - Liste des événements */
#agenda ul {
    float: left;
    width: 286px;
    margin-bottom: 12px;
    border: 1px solid #cecece;
}
/* li */
#agenda ul li {
    width: 100%;
    border-top: 1px solid #cecece;
}
/* a */
#agenda ul li a {
    position: relative;
    width: 196px;
    min-height: 55px;
    padding: 12px 10px 12px 80px;
}
/* a Hover */
#agenda ul li a:link, #agenda ul li a:visited { background: #eee; }
#agenda ul li a:hover, #agenda ul li a:active, #agenda ul li a:focus { background: #ddd; }

/* date*/
#agenda ul li a time {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 100%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #385694;
}
/* a Hover */
#agenda ul li a:link time, #agenda ul li a:visited time { background: #fff; }
#agenda ul li a:hover time, #agenda ul li a:active time, #agenda ul li a:focus time { background: #173e71; color: #fff; }

/* day / month / year*/
#agenda ul li a time .day,
#agenda ul li a time .month,
#agenda ul li a time .year {
    display: block;
    text-align: center;
}
#agenda ul li a time .day { padding-top: 16px; font-size: 26px; }
#agenda ul li a time .month { font-size: 18px; }
#agenda ul li a time .year { font-size: 16px; }


/* Titre */
#agenda ul li a h3 { 
    font: normal normal normal 14px/16px Arial, Helvetica, sans-serif; 
}

/* Ville */
#agenda ul li a .city {
    font-size: 11px;
    line-height: 11px;
    text-transform: uppercase;
}


/*	IV - CLASS concernant les codes couleurs par catégorie dans un événement 
        --------------------------------------------------------------------------------------------------------------------------- */
/* replace #currentActu by .currentActu*/

/* 01 - administration */
.administration .categorie { background: #82786f !important; } /* Couleur d'arrière plan de la catégorie définie dans un événement */
.actualite ul li.administration a:hover, .actualite ul li.administration a:active, .actualite ul li.administration a:focus, .actualite ul li.administration a.active { background: #82786f; color: #fff; } /* CCouleur d'arrière plan de la catégorie définie dans un événement au SURVOLE et ACTIVE (Dans les actus à la une) */
.actualite ul li.administration a:hover .arrow, .actualite ul li.administration a:hover .focus, .actualite ul li.administration a:active .arrow, .actualite ul li.administration a.active .arrow { background: url(../images/template/custom/actu-administration-left-bg.png) no-repeat; } /* Couleur de la flèche à gauche (Dans les actus à la une)*/
.currentActu.sport h3 { background: #82786f; }

/* 02 - citoyen */
.citoyen .categorie { background: #ff7200 !important; }
.actualite ul li.citoyen a:hover, .actualite ul li.citoyen a:active, .actualite ul li.citoyen a:focus, .actualite ul li.citoyen a.active { background: #ff7200; color: #fff; }
.actualite ul li.citoyen a:hover .arrow, .actualite ul li.citoyen a:hover .focus, .actualite ul li.citoyen a:active .arrow, .actualite ul li.citoyen a.active .arrow { background: url(../images/template/custom/actu-citoyen-arrow-left-bg.png) no-repeat; }
.currentActu.citoyen h3 { background: #ff7200; }

/* 03 - economie */
.economie .categorie { background: #0098db !important; }	
.actualite ul li.economie a:hover, .actualite ul li.economie a:active, .actualite ul li.economie a:focus, .actualite ul li.economie a.active { background: #0098db; color: #fff; }
.actualite ul li.economie a:hover .arrow, .actualite ul li.economie a:hover .focus, .actualite ul li.economie a:active .arrow, .actualite ul li.economie a.active .arrow { background: url(../images/template/custom/actu-economie-arrow-left-bg.png) no-repeat; } 
.currentActu.economie h3 { background: #0098db; }

/* 04 - sante */
.sante .categorie { background: #d71f85 !important; }
.actualite ul li.sante a:hover, .actualite ul li.sante a:active, .actualite ul li.sante a:focus, .actualite ul li.sante a.active { background: #d71f85; color: #fff; }
.actualite ul li.sante a:hover .arrow, .actualite ul li.sante a:hover .focus, .actualite ul li.sante a:active .arrow, .actualite ul li.sante a.active .arrow { background: url(../images/template/custom/actu-sante-arrow-left-bg.png) no-repeat; } 
.currentActu.sante h3 { background: #d71f85; }

/* 05 - services-en-ligne */
.services-en-ligne .categorie { background: #00b092 !important; }
.actualite ul li.services-en-ligne a:hover, .actualite ul li.services-en-ligne a:active, .actualite ul li.services-en-ligne a:focus, .actualite ul li.services-en-ligne a.active { background: #00b092; color: #fff; }
.actualite ul li.services-en-ligne a:hover .arrow, .actualite ul li.services-en-ligne a:hover .focus, .actualite ul li.services-en-ligne a:active .arrow, .actualite ul li.services-en-ligne a.active .arrow { background: url(../images/template/custom/actu-services-en-ligne-arrow-left-bg.png) no-repeat; } 
.currentActu.services-en-ligne h3 { background: #00b092; }

/* 06 - social */
.social .categorie { background: #cb0044 !important; }
.actualite ul li.social a:hover, .actualite ul li.social a:active, .actualite ul li.social a:focus, .actualite ul li.social a.active { background: #cb0044; color: #fff; }
.actualite ul li.social a:hover .arrow, .actualite ul li.social a:hover .focus, .actualite ul li.social a:active .arrow, .actualite ul li.social a.active .arrow { background: url(../images/template/custom/actu-social-arrow-left-bg.png) no-repeat; } 
.currentActu.social h3 { background: #cb0044; }

/* 07 - sport */
.sport .categorie { background: #98c02d !important; }
.actualite ul li.sport a:hover, .actualite ul li.sport a:active, .actualite ul li.sport a:focus , .actualite ul li.sport a.active { background: #98c02d; color: #fff; }
.actualite ul li.sport a:hover .arrow, .actualite ul li.sport a:hover .focus, .actualite ul li.sport a:active .arrow, .actualite ul li.sport a.active .arrow { background: url(../images/template/custom/actu-sport-arrow-left-bg.png) no-repeat; } 
.currentActu.sport h3 { background: #98c02d; }

/* 08 - tourisme */
.tourisme .categorie { background: #8a5a9d !important; }
.actualite ul li.tourisme a:hover, .actualite ul li.tourisme a:active, .actualite ul li.tourisme a:focus, .actualite ul li.tourisme a.active { background: #8a5a9d; color: #fff; }
.actualite ul li.tourisme a:hover .arrow, .actualite ul li.tourisme a:hover .focus, .actualite ul li.tourisme a:active .arrow, .actualite ul li.tourisme a.active .arrow { background: url(../images/template/custom/actu-tourisme-arrow-left-bg.png) no-repeat; } 
.currentActu.tourisme h3 { background: #8a5a9d; }


/* 11 - culture */
.culture .categorie { background: #002F2F !important; }
.actualite ul li.culture a:hover, .actualite ul li.culture a:active, .actualite ul li.culture a:focus, .actualite ul li.culture a.active { background: #002F2F; color: #fff; }
.actualite ul li.culture a:hover .arrow, .actualite ul li.culture a:hover .focus, .actualite ul li.culture a:active .arrow, .actualite ul li.culture a.active .arrow { background: url(../images/template/custom/actu-tourisme-arrow-left-bg.png) no-repeat; } 
.currentActu.culture h3 { background: #002F2F; }

#page-sante div#global-contents div#contents section#page section#acuEnplus.actualite ul.posVert li.sante a:hover h3
{
    color: #fff;
}

#page-sante div#global-contents div#contents section#page section#acuALaUne.actualite div#focus.ui-tabs ul.posVert li.sante a:active.sante h3 {
    color: #fff;
}

div#page-sante div#global-contents div#contents section#page section#acuALaUne.actualite div#focus.ui-tabs-active ul.posVert li a h3 {
    color: #fff;
}

div#page-sante div#global-contents div#contents section#page section#acuALaUne.actualite div#focus.ui-tabs ul.posVert li a:hover h3 {
    color: #fff;
}

div#page-sante div#global-contents div#contents section#page section#acuALaUne.actualite div#focus.ui-tabs ul.posVert li a:focus h3 {
    color: #fff;
}

div#page-sante div#global-contents div#contents section#page section#acuALaUne.actualite div#focus.ui-tabs ul.posVert li a:active h3 {
    color: #fff;
}

.sante ui-state-default ui-corner-top ui-tabs-active ui-state-active a {
  color: #fff;  
}