/*
Name: Ville de Caromb
URL: http://www.ville-caromb.fr
Author: Com-Ocean | http://www.com-ocean.com
Date: mis à jour en août 2011
*/


* {outline: none;}

html, body, #wrap {height: 100%;}

html {font-size: 100.01%;}

body {
  background: url(../images/bkgd_home.gif) repeat-x 0 0;
  font-family: Tahoma, Geneva, sans-serif;
	font-size: 62.5%;
	margin: 0;
}

body.visite-guidee {background-image: url(../images/bkgd_visite.gif);}
body.la-vie-est-belle {background-image: url(../images/bkgd_vie.gif);}
body.entreprendre {background-image: url(../images/bkgd_osez.gif);}
body.de-vous-a-nous {background-image: url(../images/bkgd_vous.gif);}

/* ----------------------------------------------------------------------- */
/*                             	GENERAL STYLES                             */
/* ----------------------------------------------------------------------- */


.la-vie-est-belle h1, .la-vie-est-belle h3, .la-vie-est-belle h5, .la-vie-est-belle a { color: #ED6F00;}
.visite-guidee h1, .visite-guidee h3, .visite-guidee h5, .visite-guidee a { color: #DC4094;}
.entreprendre h1, .entreprendre h3, .entreprendre h5, .entreprendre a { color: #939d03;}
.de-vous-a-nous h1, .de-vous-a-nous h3, .de-vous-a-nous h5, .de-vous-a-nous a { color: #867ABA;}


/* ----------------------------------------------------------------------- */
/*                             	LAYOUT                                     */
/* ----------------------------------------------------------------------- */

#container {
  border-left: #FFF 5px solid;
  border-right: #FFF 5px solid;
	margin: 0 auto;
	width: 970px;
}

  #main {
    background-color: #FFF;
 		min-height:520px;
  	height:auto !important;
  	height: 520px;   
    position: relative;
    width: 970px;
  }
  
    #header {
      background-color: #eeeAed;
      height: 165px;
      position: relative;
      width: 970px;
      z-index: 50;
    }
    
    .logo {float: left;}
    
    #page {padding-top: 5px;}
      
#footer {
  background-color: #eeeAed;
  clear: both;
  width: 100%;
}

	#footer-content {
    margin: 0 auto;
    width: 970px;
    padding: 20px 5px 0 5px;
  }
 

 
/* ----------------------------------------------------------------------- */
/*                             	NAVIGATION                                 */
/* ----------------------------------------------------------------------- */


  /* ___________ nav principale ___________ */

 
  #nav {
    bottom: 0;
    height: 27px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    width: auto;
    z-index: 10;
  }
  
    #nav > li {float: left; margin-left: 5px; text-align: center; width: 170px;}
    
      #nav > li > a {
        color: #FFF;
        font-size: 13px;
        font-weight: bold;
        display: block;
        height: 22px;
        padding: 5px 20px 0;
        text-transform: uppercase;
      }
      
      #nav > li > a:hover { text-decoration:  none;}
      
        /*#nav > li:hover > a, */ #nav > li.selected > a { background: url(../images/nav_arrow.png) no-repeat center bottom;}

        #nav > li#menu-la-vie-est-belle > * { background-color: #ED6F00;}
        #nav > li#menu-visite-guidee > * { background-color: #DC4094;}
        #nav > li#menu-entreprendre > * { background-color: #aeba02;}
        #nav > li#menu-de-vous-a-nous > * { background-color: #867ABA;}

   #nav > li > ul {
    width: 170px;
    color: #ffffff;
    list-style-type: none;
  }

  #nav li:hover ul,
  #nav li.sfHover ul {
  	top: 20px; /* match top ul list item height */
    left: -10px;
    padding: 0 0 0 0;
  }

  #nav ul li {
    border-top: #eeeeee 1px solid;
    color: #FFF;
    text-align: left;
  }
  
  #nav ul li a {
    color: #FFF;
    display: block;
		font-weight: bold;
		padding: 5px 10px;
    width: 150px;
  }

  #nav > li#menu-la-vie-est-belle > ul > li.selected { background-color: #f29a4d;}
  #nav > li#menu-visite-guidee > ul > li.selected { background-color: #e77ab4;}
  #nav > li#menu-entreprendre > ul > li.selected { background-color: #cbd44d;}
  #nav > li#menu-de-vous-a-nous > ul > li.selected { background-color: #aba2cf;}

    #nav > li#menu-la-vie-est-belle > ul > li.selected a { color: #a04f0b;}
    #nav > li#menu-visite-guidee > ul > li.selected a { color: #8e265e;}
    #nav > li#menu-entreprendre > ul > li.selected a { color: #636a02;}
    #nav > li#menu-de-vous-a-nous > ul > li.selected a { color: #393259;}

        #nav > li#menu-la-vie-est-belle > ul > li:hover { background-color: #f29a4d; }
        #nav > li#menu-visite-guidee > ul > li:hover { background-color: #e77ab4;}
        #nav > li#menu-entreprendre > ul > li:hover { background-color: #cbd44d;}
        #nav > li#menu-de-vous-a-nous > ul > li:hover { background-color: #aba2cf;}
  
  #nav ul li:hover a {
    color: #FFF;
    text-decoration: none;
  }
 
   /* ___________ nav secondaire ___________ */
       
   #nav2 {
    float: right;
    list-style-type: none;
    padding: 5px 0 0;
    width: auto;
  }
  
    #nav2 > li {float: left; margin-right: 5px;}
    
      #nav2 > li > a {
        color: #3D3D3D;
        font-size: 12px;
        font-weight: bold;
        padding-right: 5px;
        text-transform: uppercase;
      }
      
        #nav2 > li > a:hover, #nav2 > li.selected > a { color: #940B5D; text-decoration: none;}
       
   /* ___________ sous-nav ___________ */


	#subnav {
    background: #a6086e url(../images/subnav_gal.jpg) no-repeat 0 0;
    float: left;
 		min-height:100px;
  	height:auto !important;
    height: 100px;
    margin: 0;
    padding: 150px 0 100px 0;
    width: 270px;
  }
  
  .subnav-title {
    padding: 10px 10px 0;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
  }
  
  #searchblock {
    padding: 0 10px;
    margin-bottom: 10px;
    color: #FFF;
  }
  
  #subnav ul {
    list-style-type: none;
  }
  
  
    .visite-guidee #subnav {background: #DC4094 url(../images/subnav_visite.jpg) no-repeat 0 0;}
    .la-vie-est-belle #subnav {background: #ED6F00 url(../images/subnav_vie.jpg) no-repeat 0 0;}
    .entreprendre #subnav {background: #aeba02 url(../images/subnav_osez.jpg) no-repeat 0 0;}
    .de-vous-a-nous #subnav {background: #867ABA  url(../images/subnav_vous.jpg) no-repeat 0 0;}
    
    #subnav > ul > li {
      border-top: #cb88b0 1px solid;
      background: url(../images/nav-arrow-deroulant.png) no-repeat 7px 11px;
      padding: 6px 20px;
    }
    
   #subnav > ul > li.selected { background-color: #c36da0;}
   
    	#subnav li a { color: #FFF;font-weight: bold;}
      #subnav li a:hover {color: #fff; text-decoration: none;}
    
    #subnav li.selected li {
      border-top: #eea0ca 1px solid;
      padding: 4px 0;
    }
    #subnav ul ul, #subnav li ul { display: none; list-style-type: none; margin-top: 5px; }
    
    #subnav li.selected > ul {display: block;}
    
    #subnav li.selected li.selected li {
      border:0;
      padding: 2px 0;
      font-style : italic;
    }
    
    #subnav li.selected li a { font-weight: normal !important;}


.la-vie-est-belle #subnav > ul > li, .la-vie-est-belle #subnav > ul li.selected li { border-color: #f6b883;}
.visite-guidee #subnav > ul > li, .visite-guidee  #subnav > ul li.selected li { border-color: #eea0ca;}
.entreprendre #subnav > ul > li, .entreprendre #subnav > ul li.selected li { border-color: #dbe183;}
.de-vous-a-nous #subnav > ul > li, .de-vous-a-nous #subnav > ul li.selected li { border-color: #c4bedd;}
    
  .la-vie-est-belle #subnav li:hover { background-color: #f29a4d;}
  .visite-guidee #subnav li:hover { background-color: #e77ab4;}
  .entreprendre #subnav li:hover { background-color: #cbd44d;}
  .de-vous-a-nous #subnav li:hover { background-color: #aba2cf;}

  .la-vie-est-belle #subnav > ul > li.selected { background-color: #f29a4d;}
  .visite-guidee #subnav > ul > li.selected { background-color: #e77ab4;}
  .entreprendre #subnav > ul > li.selected { background-color: #cbd44d;}
  .de-vous-a-nous #subnav > ul > li.selected { background-color: #aba2cf;}
  
    .la-vie-est-belle #subnav li.selected > a { color: #a04f0b;}
    .visite-guidee #subnav li.selected > a { color: #8e265e;}
    .entreprendre #subnav li.selected > a { color: #636a02;}
    .de-vous-a-nous #subnav li.selected > a { color: #393259;}


/* ----------------------------------------------------------------------- */
/*                             	FOOTER                                     */
/* ----------------------------------------------------------------------- */

  #footer a {color: #000;}

	#footer-col1 {
    float: left;
    margin-right: 45px;
    width: 170px;
  }
  
  #footer-col1 img {
    margin-bottom: 5px;
  }
     
     .link-contact {
       background: url(../images/link_more_black.png) no-repeat top right;
       display: block;
       height: 21px;
       padding-right: 30px;
       width: 90px;
     }


	#footer-col2 {
    float: left;
    margin-right: 45px;
    width: 310px;
  }
  
  #footer-col2 img { float: left; margin-right: 10px;}
  
 #footer-col3 {
    float: left;
    width: 130px;
    margin-right: 45px;
  }
  
  .social {
    float: left;
    height: 30px;
    margin-right: 10px;
    width: 30px;
	}

  .fb {background-image: url(../images/icon_fb.png);}
  .yt {background-image: url(../images/icon_ytb.png);}
  .pcs {background-image: url(../images/icon_pcs.png);}
 
  #footer-col4 {
    float: left;
    width: 225px;
  }
   
  #copyright {clear: both; padding: 40px 0 10px;  }
  
    #copyright p { font-size: 11px; font-style: italic;}



/* ----------------------------------------------------------------------- */
/*                             	ACCUEIL                                    */
/* ----------------------------------------------------------------------- */


  /* ___________ BANNER ___________ */
  
#banner {
  height: 350px;
  margin-top: 5px;
  width: 970px;
}

	#banner-left {
    float: left;
    height:350px;
    width: 270px;
	}
  
  	/* méteo */
    
    #meteo {
      background-color: #EEEAED;
      height: 150px;
      margin: 5px 0 0;
      padding: 5px 10px 0;
      text-align: center;
      width: 250px;
    }
    
    .jour {
      font-size: 15px;
      font-weight: bold;
    }
    
    .meteo-jours {
      float: left;
      width: 83px;
    }
    
    	.meteo-jours p {
        font-size: 13px;
        line-height: 14px;
        margin: 0 0 5px;
			}
     .jour {font-weight: bold;}
 
     .visuel { margin-top: 10px; }
 
 /* ------------ Carroussel -------------*/

/* panes */
#flowpanes {
  float: right;
  height:350px;
  overflow:hidden;
  margin: 0;
  padding: 0;
  position:relative;
  width:695px;
}
  
  /* root element for tabs */
  #flowtabs {
    /*background:url("/images/bkgd_banner_txt.png") repeat scroll 0 0 transparent;*/
    bottom: 0;
    height: 16px;
    margin: 0;
    padding: 6px 2px 6px 10px;
    position: absolute;
    right: 0px;
    width:auto;
    z-index: 2;
  }
  
    /* single tab */
    #flowtabs li { 
      float:left; 
      list-style-type:none;
      margin:0; 
      padding:0;
      text-indent:0; 
    }
    
      /* a- tag inside single tab */
      #flowtabs li a {
        background: url(/images/square16b.gif) no-repeat 0 0;
        color: #f0f0f0;
        display: block;
        height: 16px;
        line-height: 16px;
        margin-right: 3px;
        text-align: center;
        width: 18px;  
      }
      
      /* mouseover state */
      #flowtabs a:hover     {background-color: #CB89B0; background-image: none; color: #333333; text-decoration: none;  }
  
      /* currently selected tabs */
      #flowtabs a.current   { background-image: url(/images/square16a.gif); color: #ffffff; cursor:default; }

  /* our additional wrapper element for the items */
  #flowpanes .items {
    clear:both;
    margin:0;
    padding:0;
    position:absolute;
    width:20000em;
    z-index: 2;
  }
      
  /* single pane */
  #flowpanes .items div.item {
    display:block;
    float:left;
  }

/* ----- banner -----*/
.banner {
  position: relative;
  width: 695px;
  z-index: 1;
}

.banner-caption {
  background: url(/images/bkgd_banner_txt.png) repeat 0 0;
  bottom: 40px;  
  color: #FFF;
  font-size: 12px;
  padding: 5px 30px 10px 20px;
  position: absolute;
  right: 0;
  text-align: left;
  width: 360px;
  }


.banner-caption h1, .banner-caption h2, .banner-caption h3, .banner-caption p, .banner-caption a {
  color: #FFF;
  border: none;
  font-weight: normal !important;
  margin: 0 0 10px;
}

.banner-caption h1 {
  font-family: "Arial Narrow", Arial, Helvetica, sans-serif !important;  
  font-style: normal ;
  letter-spacing: 1px;
  text-transform: uppercase;
} 

.banner-caption h2 {
  font-size: 15px;
  line-height: 22px;
}

.banner-caption p {
  font-size: 15px;
  line-height: 22px;
}

a.banner-link {color: yellow;}

  /* ___________ CONTENT HOME ___________ */


#home-page {
	margin-left: 275px;
	width: 695px;
}

  .home-col ul {
    list-style-type: none;
    padding: 0;
  }
  
    .home-col li {
      border-bottom: 1px solid #e0e0e0;
      padding: 0 0 10px 0;
      width: 295px;
    }
    
      .home-col li a {
        display: block;
        /*min-height: 36px;*/
        padding: 10px 35px 0 0;
        background-repeat: no-repeat;
        background-position: right bottom;
      }
    

#infos-locales, #manifs-evts {
  float: left;
  margin: 20px 0 20px 35px;
}

  #infos-locales li a { background-image: url('/images/link_more_green.png'); color: #383530;  }
  #manifs-evts li a { background-image: url('/images/link_more_purple.png'); color: #383530; }

#flashinfo {
  background-color: #f3f5d0;
  padding: 20px 0 20px 35px;
}

  #flashinfo li {
    border-bottom: #e4c5b0 1px solid;
    display: inline;
    float: left;
    margin-right: 35px;  
  }
  
    #flashinfo li a {
      background-image: url('/images/link_more_violet.png');
      color: #383530;
    }

/* ----------------------------------------------------------------------- */
/*                           SPECCIFIC STYLES                              */
/* ----------------------------------------------------------------------- */


  #content {
    float: right; 
    margin: 0 10px 60px 0;
    width: 660px;
  }
  
  .col1, .col2 {
    float: left;
    width: 310px;
  }
  
  .col2 { margin-left: 40px;}
  
  #home-content { padding: 0 35px 20px 35px; }

  #home-content .col1, #home-content .col2 { width: 295px;  }
  
  .col2 { margin-left: 35px;}
  
  #chemin {
  	background: url(../images/line_light.gif) repeat-x center bottom;
    color: #aeaeae !important;
    padding-bottom: 3px;
    margin-bottom: 20px;
    }
    
  #chemin a {color: #aeaeae;}
  
  .img-page { float: right; margin: 0 0 20px 20px; line-height: 16px; font-style: italic; color: #666666; text-align: center; }
  
  
    /* ___________ Journaux  ___________ */

 #journaux-list {list-style-type: none; padding: 0;}
 
 .journal-numero {
   border-bottom: #d9d9d9 1px solid;
   clear: both;
   padding: 5px 0 ;
 }
 
 	.journal-numero h3 {font-size: 14px; margin: 0 0 5px;}
	.journal-numero img { float: right;}
  
  .link-download { 
  	background: url(../images/logoPDF.png) no-repeat 0 0;
    display: block;
    height: 24px;
    padding: 8px 0 0 30px;
    }
    
  .pager {
  	border-top: #D9D9D9 5px solid;
    clear: both;
    font-size: 12px;
    text-align: center;
    padding-top: 20px;
  }  
  
  .pager a, .pager span {margin: 0 2px;}
  
  .pager span {background-color: #D9D9D9; padding: 0 4px;}
    
     /* ___________ Comptes rendus  ___________ */
     
 .cr {
   list-style-type: none;
   padding: 0;
   }  
   
   .cr li {
    border-bottom: #d9d9d9 1px solid;
    padding: 5px 0;
   }  
     

    /* ___________ list annuaire dans page  ___________ */

	.list-annuaire {
    border-top: #A6086E 5px solid;
    list-style-type: none;
    margin-top: 30px;
    padding: 10px 0 0;
  }
  
    .visite-guidee .list-annuaire {border-color: #DC4094;}
    .la-vie-est-belle .list-annuaire {border-color: #ED6F00;}
    .entreprendre .list-annuaire {border-color: #c2d000;}
     .de-vous-a-nous .list-annuaire {border-color: #867ABA ;}
    
    .list-annuaire > li {
      border-bottom: #d9d9d9 1px dotted;
      font-size: 14px;
      font-weight: bold;
      padding: 5px 0 ;
    }
    
    	.list-annuaire li ul {
        list-style-type: none;
        margin: 10px 0;
        padding: 0;
      }
      
      .list-annuaire li ul li {
        padding-left: 10px;
      }
      
      ol.results li { margin-bottom: 10px;}
      
    /* ___________ ANNUAIRE  ___________ */

      #annuaire #content {
        float: none; 
        margin: 0 20px 60px;
        width: 950px;
      }
      
					.annuaire-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
          }
          
          	.annuaire-list li { border-bottom: #d9d9d9 1px solid; padding: 4px 0;}
            

    /* ___________ ACTUALITES  ___________ */

.post_block {clear: both;}

.post_header {  
	border-bottom: #d9d9d9 1px solid;
  padding-bottom: 5px;
}
  .post_date  {
    border-right: #d9d9d9 1px solid;
    color: #808080;
    float: left;
    font-size: 11px;
    padding: 0 10px 5px 0;
    margin-right: 10px;
    text-transform: uppercase;
    }
    
   .post_title {
    font-size: 12px;
    margin: 0;
    text-transform: uppercase;
  } 
.post_inner {clear: both; margin: 20px 0 40px; }

  .post_thumbnail {float: right; margin: 0 0 20px 60px;}
  
  .link-blog a {
    background: url(../images/link_more_violet.png) no-repeat right top;
    padding: 3px 26px 3px 0;
    text-transform: uppercase;
  }

.posts_pages, .post_nav {
  border-top: #D9D9D9 5px solid;
  clear: both;
  font-size: 12px;
  padding-top: 10px;
  text-align: center;
}

  .posts_pages a, .posts_pages span {margin: 0 2px;}
  
  .posts_page_current {background-color: #D9D9D9; padding: 0 4px;}
  
  .post_prec  {
    background: url(../images/link_more_violet_2.png) no-repeat left top;
    display: block;
    float: left;
    padding: 3px 0 3px 26px;
    text-transform: uppercase;
   }

  .post_next  {
    background: url(../images/link_more_violet.png) no-repeat right top;
    display: block;
    float: right;
    padding: 3px 26px 3px 0;
    text-transform: uppercase;
   }

      /* ___________ MARCHES  ___________ */


table.liste-marche {width: 100%;}

  .liste-marche td, .liste-marche th {
    font-size: 12px;
    padding: 3px 4px;
    text-align: left;
    vertical-align: top;
   }

    .liste-marche thead th, .liste-marche tfoot th  {
      background-color: #C36DA0;
      color: #FFF;
    }
    
    .liste-marche .row_0 td { background-color: #f0f0f0;}
    .liste-marche .row_1 td { background-color: #fff;}

      /* ___________ LIENS  ___________ */

#liens table, #mp-fiche {
  padding: 0;
  border-spacing: 0;
}

#liens table td, #mp-fiche td {
  padding: 5px 10px 5px 0;
  border-bottom: 1px dotted #808080;
}


    /* ___________ CONTACT  ___________ */


  #myContactFormContainer { 
    background: url(../images/line_dark.gif) repeat-x center top;
    clear: both;
    }
  
    #myContactFormContainer textarea, #myContactFormContainer input { width: 275px;}
  
    #myContactFormContainer form {
        padding: 40px;
        width: 410px;
    }
  
    #myContactFormContainer fieldset {
      border: 0;
      padding: 0;
    }

      .required-fields {
        color: #404040;
        font-size: 11px;
        font-style: italic;
      }
  
      .form-row {
        clear: both;
        padding: 0 0 10px;
      }
  
        #myContactFormContainer label {
          color: #404040;
          display: block;
          float: left;
          font-size: 12px;
          height: 18px;
          width: 120px;
        }
  			
       #myContactFormContainer input { height: 16px;}
  
        #myContactFormContainer input, #myContactFormContainer textarea {
          border: none;
          background-color: #eeeeee;
          color: #404040;
          padding: 1px 5px;
        }

      #envoyer {
        background-color: #000 !important;
        border: 0 !important;
        color: #FFF !important;
        cursor: pointer;
        display: block;
        float: right;
				font-size: 12px;
  			font-weight: bold;
        height: 28px !important;
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 80px !important;
      }

      .error_list { 
        list-style: none;
      	margin: 10px 0 0; 
        padding: 0; 
      }
      
        .error_list li {
            background: none;
            color: #F53244;
            font-size: 12px;
            font-weight: bold;
            margin: 0;
            padding: 5px 0;
        }
   
   
     /* ___________ checkbox_list & radio_list ___________ */

    ul.checkbox_list, ul.radio_list {
      float: left;
      margin: 0 0 5px;
      padding: 0;
      width: auto;
    }
    
      ul.checkbox_list li, ul.radio_list li {
        clear: none; 
        float: left;
        list-style-type: none;
        margin-right: 10px;
      }
      
        .checkbox_list label, .radio_list label {
          display: inline;
          float: right;
          width: auto !important;
        }
        
        .checkbox_list input, .radio_list input { 
          border: 0;
          background-color: transparent !important;
          float: left;
          margin: 0 5px 0 0;
          padding: 0;
          width: auto !important;
        }


     /* ___________ Chargement AJAX ___________ */


.prettyLoader {
	background: url(/images/prettyLoader/prettyLoader.png) top left no-repeat;
	height: 30px;
	position: absolute;
	width: 30px;
	z-index: 30000;
}

.prettyLoader img {
	display: block;
	margin: 7px 0 0 7px;
}

.pl_ie6 { background-image: url(/images/prettyLoader/prettyLoader.gif); }