/* ==== Scroll down to find where to put your styles :) ==== */

/*  HTML5 ✰ Boilerplate  */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font-size:12px; font-family:Arial, Helvetica, sans-serif; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
/*ul, ol { margin-left: 2em; }*/
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #556090; color:#fff; text-shadow: none; }
::selection { background:#556090; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #556090; }

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

body, select, input, textarea {  color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.shown { display: inline; visibility: visible; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/*
    // ========================================== \\
   ||                                              ||
   ||               Your styles !                  ||
   ||                                              ||
    \\ ========================================== //
*/

.png_bg{}

@font-face {
    font-family: 'DINLight';
    src: url('../font/dinpro-light-webfont.eot');
    src: url('../font/dinpro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/dinpro-light-webfont.woff') format('woff'),
         url('../font/dinpro-light-webfont.ttf') format('truetype'),
         url('../font/dinpro-light-webfont.svg#DINLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DINMedium';
    src: url('../font/dinpro-medium-webfont.eot');
    src: url('../font/dinpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/dinpro-medium-webfont.woff') format('woff'),
         url('../font/dinpro-medium-webfont.ttf') format('truetype'),
         url('../font/dinpro-medium-webfont.svg#DINMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DINBold';
    src: url('../font/dinpro-bold-webfont.eot');
    src: url('../font/dinpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/dinpro-bold-webfont.woff') format('woff'),
         url('../font/dinpro-bold-webfont.ttf') format('truetype'),
         url('../font/dinpro-bold-webfont.svg#DINBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.css3PIE {
    display:block; position:relative;
	
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
	
    -webkit-box-shadow: #444 0 0 5px;
    -moz-box-shadow: #444 0 0 5px;
    box-shadow: #444 0 0 5px;
	
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF));
    background: -moz-linear-gradient(#EEF, #FFF 70%);
    background: linear-gradient(#EEF, #FFF 70%);
    -pie-background: linear-gradient(#EEF, #FFF 70%);

    behavior: url("tpl/css/PIE.htc");
	
    /*-pie-png-fix: true;  fixe la transparence
    -pie-watch-ancestors: 1; verifie régulièrement si éléments parents changent classe
    -pie-poll:true; verifie régulièrement si taille élément change*/
}

/*----------------------------------------------
        common
--------------------------------------------------*/

body {
    overflow: hidden;
    background: #23306b url('../img/bg/bg.png') center top repeat; color: #fff;
    font-family: Tahoma, sans-serif;
}


.center {
    margin: 0 auto; width: 965px;
}

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

li {
    margin: 0; padding: 0;
}

a, a:active, a:visited {
    color: #fff;
    text-decoration: none;
}


/*----------------------------------------------
        main
--------------------------------------------------*/

#container {
    padding: 0;
    background: #23306b url('../img/bg/bg_left.png') center top repeat-x; color: #fff;
}

/*----------------------------------------------
        header
--------------------------------------------------*/

#header {
    position: relative; z-index: 10;
}

#lang {
    position: absolute; top: 5px; right: 0;
}


#lang ul {
    float: left;
}

#lang ul li {
    float: left;
    margin: 0 0 0 1px;
}

#lang ul li a {
    display: block;
    padding: 2px 8px;
    color: #162f5e; background: #4eb0df;
}

#lang ul li a:hover {
    background: #162f5e; color: #fff;
}

#lang ul li.active a {
    color: #fff; background: #556090;
}

/*----------------------------------------------
        left
--------------------------------------------------*/


#left {
    float: left;
}

#left .content {
    width: 488px; padding: 25px 0 130px 5px; min-height: 550px;
    background: url('../img/bg/shadow.png') right top no-repeat;
}

h1 {
    margin: 0 0 25px;
    font-family: 'DINLight', Tahoma, sans-serif; font-weight: 100; font-size: 2.833em; line-height: 0.9em;
}

.ie7 h1 {
    width: 700px;
}

h1 span {
    display: block; float: left; clear: both;
    padding: 0 7px 0 3px;
}

h1 span.jaune {
    padding: 4px 7px 4px 3px;
    background: #eb9f00; color: #363a42;
}

h1 strong {
    font-family: 'DINBold', Tahoma, sans-serif; font-weight: normal;
}


#left .content ul {
    position: relative;
    margin: 0 0 0 -15px;
}

.ie7 #left .content ul {
    margin: 0 0 0 -10px;
}

#left .content ul li {
    float: left; position: relative;
    margin: 0 0 20px 20px;
}

#left .content ul li a {
    display: block; position: relative;
    background: #fff;
    line-height: 0;
    -webkit-box-shadow: #444 0 0 5px;
    -moz-box-shadow: #444 0 0 5px;
    box-shadow: #444 0 0 5px;
    behavior: url("tpl/css/PIE.htc");
}

#left .content ul li a span {
    display: block; position: absolute; bottom: 8px; left: 10px; right: 10px;
    padding: 7px 10px;
    font-family: 'DINMedium', Tahoma, sans-serif; font-weight: normal; text-align: center; line-height: normal; font-size: 1.500em;
    cursor: pointer;
    background: #b0226f; color: #fff;
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#ca3b88), to(#b0226f));
    background: -moz-linear-gradient(#ca3b88, #b0226f 70%);
    background: linear-gradient(#ca3b88, #b0226f 70%);
    -pie-background: linear-gradient(#ca3b88, #b0226f 70%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: #444 0 0 3px;
    -moz-box-shadow: #444 0 0 3px;
    box-shadow: #444 0 0 3px;
    behavior: url("tpl/css/PIE.htc"); -pie-watch-ancestors: 1;
}

#left .content ul li a:hover span {
    background: #d6910e; color: #363a42;
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#f0ab27), to(#d6910e));
    background: -moz-linear-gradient(#f0ab27, #d6910e 70%);
    background: linear-gradient(#f0ab27, #d6910e 70%);
    -pie-background: linear-gradient(#f0ab27, #d6910e 70%);
}

/*----------------------------------------------
        right
--------------------------------------------------*/

#right {
    position: absolute; top: 0; left: 50%; right: 0;
    height: 750px; margin: 0 0 0 16px; min-width: 480px;
    background: #2e3b73 url('../img/bg/bg_right.png') center top repeat-x; color: #fff;
}

#carte {
    position: absolute; top: 0; left: 160px; z-index: 0;
}

#right .content {
    position: relative;
    width: 435px; padding: 105px 0 0 30px;
}

#right .content .texte {
    overflow: auto;
    /*height: 305px;*/
}

#right .content .texte p {
    margin: 0 0 10px;
    font-size: 0.917em;
}

#right .content .texte ul {
    margin: 0 0 10px 5px;
    font-size: 0.917em;
}

#right .content .texte ul li {
    padding: 0 0 0 10px; margin: 0 0 10px;
    background: url('../img/bg/puce.png') left 3px no-repeat;
}

#right .content .texte a {
    color: #fff;
    text-decoration: underline; font-weight: bold; white-space: nowrap;
}

h2 {
    margin: 0 0 15px;
    font-family: 'DINBold', Tahoma, sans-serif; font-weight: normal; font-size: 1.833em; text-transform: uppercase;
}

#bandeau {
    position: relative; left: -30px;
    padding: 10px 10px 20px 20px; width: 100%; margin: 10px 0 0;
    color: #162f5e;
    text-align: center;
    background: #53b5e5;
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#53b5e5), to(#2d8fbf));
    background: -moz-linear-gradient(#53b5e5, #2d8fbf 70%);
    background: linear-gradient(#53b5e5, #2d8fbf 70%);
    -pie-background: linear-gradient(#53b5e5, #2d8fbf 70%);
    -webkit-box-shadow: #162f5e 4px 0 6px;
    -moz-box-shadow: #162f5e 4px 0 6px;
    box-shadow: #162f5e 4px 0 6px;
    behavior: url("tpl/css/PIE.htc");
}

h3 {
    margin: 0 0 10px;
    font-family: 'DINLight', Tahoma, sans-serif; font-weight: 100; font-size: 1.500em;
}

h3 strong {
    text-transform: uppercase;
    font-family: 'DINBold', Tahoma, sans-serif; font-weight: normal;
}

h3 strong span {
    font-size: 0.778em;
}

#bandeau a {
    position: relative;
    min-width: 200px; padding: 7px 10px; margin: 0 auto;
    font-family: 'DINBold', Tahoma, sans-serif; font-weight: normal; font-size: 1.500em; text-transform: uppercase;
    background: #153879; color: #fff;
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#3a5d9e), to(#153879));
    background: -moz-linear-gradient(#3a5d9e, #153879 70%);
    background: linear-gradient(#3a5d9e, #153879 70%);
    -pie-background: linear-gradient(#3a5d9e, #153879 70%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: #162f5e 0 0 3px;
    -moz-box-shadow: #162f5e 0 0 3px;
    box-shadow: #162f5e 0 0 3px;
    behavior: url("tpl/css/PIE.htc"); -pie-watch-ancestors: 1;
}

#bandeau a:hover {
    background: #d6910e; color: #363a42;
    background: -webkit-gradient(linear, 0 0, 0 70%, from(#f0ab27), to(#d6910e));
    background: -moz-linear-gradient(#f0ab27, #d6910e 70%);
    background: linear-gradient(#f0ab27, #d6910e 70%);
    -pie-background: linear-gradient(#f0ab27, #d6910e 70%);
}

/*----------------------------------------------
        footer
--------------------------------------------------*/

#footer {
    position: relative; top: -125px;
    color: #ddd;
    font-size: 0.917em;
}

/**/.partenaire {
    position: relative; top: -6px;
}

.partenaire a {
    display: inline-block; position: relative;
    margin: 0 2px -7px 0;
}

.partenaire a:hover {
    top: -1px; left: 1px;
}

.partenaire a img {
    margin: 0 0 -7px;
}

#footer ul li {
    float: left;
    padding: 0 10px;
}

#footer ul li + li {
    border-left: 1px solid #99b;
}

#footer ul li a {
    color: #ddd;
}

#footer ul li a:hover {
    text-decoration: underline;
}

.mentions {
    float: right;
}

#acti {
    display: inline-block; position: relative; top: 3px;
    margin: -5px -10px 0 0;
}

#acti:hover {
    top: 4px; left: 1px;
}

/*----------------------------------------------
        twitter
--------------------------------------------------*/

#twitter_bandeau {
    position: fixed; bottom: 0; left: 0; right: 0;
    
    border-top: 1px solid #fff;
    background: #579dbd; color: #162f5e;
}

#twitter_bandeau .center {
    position: relative;
    padding: 3px 0;
}

#twitter_pic {
    position: absolute; bottom: 0; left: -50px;
    width: 48px; height: 33px;
    background: url('../img/bg/twitter.png') left 3px no-repeat;
}

#twitter_bandeau ul li {
    float: left; position: relative; overflow: visible;
}

#twitter_bandeau ul li + li {
    border-left: 1px solid #9cd;
     padding: 0 0 0 10px; margin: 0 0 0 10px;height: 33px; 
     line-height: 33px;
    
}

#twitter_bandeau #flux_twitter {
    width: 650px;
}

#twitter_bandeau #flux_twitter ul li {
    height: 33px; padding: 0;
    line-height: 33px; padding: 0 0 0 5px;
}

#twitter_bandeau #flux_twitter ul li + li {
    padding: 0 0 0 5px; margin: 0;
    border: none;
    
}

#twitter_bandeau #flux_twitter ul li p {
    display: inline-block;
    line-height: normal; font-size: 1em;
    vertical-align: middle;
}

#twitter_bandeau #flux_twitter ul li p .date {
    font-size: 0.917em;
    font-weight: bold;
}

#twitter_bandeau ul li a {
    display: inline-block; position: relative;
    color: #162f5e;
    line-height: normal; font-size: 0.917em;
    vertical-align: middle;
}

#twitter_bandeau ul li a:hover {
    text-decoration: underline;
}

#twitter_bandeau ul li p {
    display: inline-block;
    line-height: normal; font-size: 0.917em;
    vertical-align: middle;
}

#stop_twitter {
    width: 105px;
    text-align: center;
}

.no-js #stop_twitter {
    display: none;
}

#twitter:hover,
#facebook:hover {
    top: 1px; left: 1px;
}
/*
    // ========================================== \\
   ||                                              ||
   ||               styles @medias                  ||
   ||                                              ||
    \\ ========================================== //
*/


@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}

@media screen and (max-width: 950px) {

  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
  
  .center {
      width: auto;
  }
  
  #left {
      float: none;
  }
  
  #left .content {
      padding: 25px 0 25px 5px;background:transparent;
  }
  
  #right {
      position: relative; left: 0;
      margin: 0; min-width: 0; height: auto;
  }
  
  #right .content {
      padding: 105px 10px 0 10px; width: auto;
  }
  
  #right .content .texte {
      overflow: visible;
      height: auto;
  }
  
  #footer {
      top: 0;
      margin: 20px 0;
  }
  
  #footer ul:before, #footer ul:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
  #footer ul:after { clear: both; }
  
  #footer ul {
      float: none;
  }
  
  .mentions {
    margin: 10px 0 0;
  }
  
  #twitter_bandeau {
      position: relative; clear: both;
  }
  
  #twitter_bandeau #flux_twitter {
      width: auto;
  }
  
  #twitter_bandeau #flux_twitter ul li {
      height: auto;
  }
	#bandeau  {left:0;padding:10px 2% 10px 2%;width:96%;}
	#left .content {padding:25px 2%;}
	#right .content .texte a {
	white-space: normal;
	}
	#lang {
	right: 5px;
	}
}
@media screen and (max-width: 600px) {
  
  #left .content {
      width:auto;
  }
  #footer ul li + li {
  border:none;
	padding:3px 10px;
	}
	.partenaire {
	padding: 0 0 15px 0;
	}
}

@media screen and (max-width: 480px) {
  #left .content ul {
    margin: 0 2%;
    position: relative;
    width: 96%;
	}
  #left .content ul li {
    float: none;
    margin: 0 auto 20px;
    position: relative;
	}
  #left .content ul li a{
    background: url('../img/bg/entry_bg.jpg') 0 0 repeat-x #fff;
	}
  #left .content ul li a img{
    margin: 0 auto;
	display:block;
	}
	#bandeau a {display:block;clear:both;margin:0 0 10px;min-width:40px;}
	#footer ul li {
	float: none;
	}
	#twitter_bandeau ul li + li {
	border:none;
	}
	#twitter_bandeau ul li + li {margin:0 10px 0 0;}

}

@media print {
  * { text-shadow: none !important; filter:none !important;
    -ms-filter: none !important; } 
    abbr[title]:after { content: " (" attr(title) ")"; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3{ page-break-after: avoid; }
    
    @page {
        size: portrait 21cm 29.7cm;
        margin:2cm;
    }
}