@charset "UTF-8";
@import url("_rebase.css");
@import url("_layout.css");
@import url("_forms.css");

/**
(c) Tomek et Kozlika pour l'Association Dotclear - 2013
*
*   Thanks to FilamentGroup for responsive main-menu fantastic tutorial:
*   http://filamentgroup.com/lab/responsive_design_approach_for_navigation/
*/

/** =================================================================================
Common rules for dotclear.org & dotclear.net sites, 
*  Fonts
*  Currrent html tags
*  Layout
*  Classes
================================================================================== */

/**
* FONTES
* Generated by Font Squirrel (http://www.fontsquirrel.com)
*/
@font-face {
    font-family: 'ArsenalRegular';
    src: url('fonts/arsenal-regular-webfont.eot');
    src: local('☺'), url('fonts/arsenal-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/arsenal-regular-webfont.woff') format('woff'),
         url('fonts/arsenal-regular-webfont.ttf') format('truetype'),
         url('fonts/arsenal-regular-webfont.svg#ArsenalRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

}

@font-face {
    font-family: 'ArsenalItalic';
    src: url('fonts/arsenal-italic-webfont.eot');
    src: local('☺'), url('fonts/arsenal-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/arsenal-italic-webfont.woff') format('woff'),
         url('fonts/arsenal-italic-webfont.ttf') format('truetype'),
         url('fonts/arsenal-italic-webfont.svg#ArsenalItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ArsenalBoldItalic';
    src: url('fonts/arsenal-bolditalic-webfont.eot');
    src: local('☺'), url('fonts/arsenal-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/arsenal-bolditalic-webfont.woff') format('woff'),
         url('fonts/arsenal-bolditalic-webfont.ttf') format('truetype'),
         url('fonts/arsenal-bolditalic-webfont.svg#ArsenalBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SrcsansproRegular';
    src: url('fonts/srcsanspro-regular-webfont.eot');
    src: local('☺'), url('fonts/srcsanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/srcsanspro-regular-webfont.woff') format('woff'),
         url('fonts/srcsanspro-regular-webfont.ttf') format('truetype'),
         url('fonts/srcsanspro-regular-webfont.svg#SrcsansproRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
    font-family: 'SrcsansproItalic';
    src: url('fonts/srcsanspro-italic-webfont.eot');
    src: local('☺'), url('fonts/srcsanspro-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/srcsanspro-italic-webfont.woff') format('woff'),
         url('fonts/srcsanspro-italic-webfont.ttf') format('truetype'),
         url('fonts/srcsanspro-v-webfont.svg#SrcsansproItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SrcsansproBoldItalic';
    src: url('fonts/srcsanspro-bolditalic-webfont.eot');
    src: local('☺'), url('fonts/srcsanspro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/srcsanspro-bolditalic-webfont.woff') format('woff'),
         url('fonts/srcsanspro-bolditalic-webfont.ttf') format('truetype'),
         url('fonts/srcsanspro-bolditalic-webfont.svg#SrcsansproBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/**
* MISE EN FORME STANDARD DES BALISES HTML
* ======================================================
*/
body {
  background-color: #fff;
  color: #000;
  font-family: SrcsansproRegular, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;;
}
h1, h2, h3, h4, h5, h6 {
  font-family: ArsenalRegular, "arial narrow", "futura condensed", arial, sans-serif;
  margin: 1em 0 .5em;
  line-height: 1.25;
}
h1, h2, h3, h4 {
  font-weight: normal;
}
h1, .h1-like {font-size: 2.25em; margin: 0; }
h2, .h2-like {font-size: 1.75em;}
h3, .h3-like {font-size: 1.5em;}
h4, .h4-like {font-size: 1.25em;}
h5, .h5-like {font-size: 1em;}
h6, .h6-like {font-size: .75em;}
ul, ol {
  margin: 1em 0;
  padding-left: 2em;
}
p { margin: 1em 0 .5em; }
blockquote { margin: 1em 3em; }
blockquote, q { font-style: italic; }
blockquote em, q em { font-style: normal; }
cite { font-size: .9em; }
code, pre {
  font-family: "Andale mono","Courier New", Courier, mono;
  font-size: .875em;
  background: rgba(0,0,0,.04);
  padding: 2px 4px;
  }
code {
  color: #b11; 
}
pre {
    margin: 1em;
    overflow: auto;
    padding: 1px .5em;
    line-height: 1.2;
    }
hr {
    height: 1px;
    border: 0;
    border-top: 1px solid #aaa;
    width: 60%;
    height: 1px;
    }
em {
  font-family: SrcsansproItalic, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-style: normal;
}
strong {
  font-family: SrcsansproBold, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-weight: normal;
}
i, b {
  font-style: normal;
  font-weight: normal;
}
kbd {
  padding: 0 2px;
  border: 1px solid #999;
}
/* avoid top margins on first content element */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}
/* max values */
img, table, td, blockquote, code, pre, textarea, input, video {
  max-width: 100%;
}
/* pictures */
img {
  height: auto;
  vertical-align: middle;
}

/* Lists */
ul, ol, dl { margin: 1em 0 .5em 1.5em; }
ol {margin-left: 2em;}
ul ul, ol ol { margin-top: .5em; }
ul {
  list-style: url(i/bullet_cl.png);
}
ul.unstyled {
  list-style: none;
}
ul.risette {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul ul {
  list-style: url(i/bullet_tr.png);
}
ul ul ul {
  list-style: url(i/bullet_sq.png);
}
ol {
  margin: 0 0 1em 2em;
  padding: 0;
  list-style-type: decimal;
}
ol ol {
  list-style-type: upper-roman;
}
ol ol ol {
  list-style-type: lower-alpha;
}
ol ol ol ol {
  list-style-type: lower-greek;
}
dt {
  margin: 1em 0 0 0;
  padding: 0;
  font-weight: bold;
}
dd {
  margin: 0 0 0 1em;
  padding: 0;
}
/* links */
a { color: #000; }
a:hover, a:focus { color: #333; text-decoration: none; }
a:visited { color: #333; }
/* Reinforce visibility on hover and focus for better accessibility */
a:link, a:visited { transition: .3s; }
a:hover { background: #ececec; }
a:focus { background: #676e78; color: #fff; }

/**
* LAYOUT ELEMENTS  
* ======================================================
/* skip-links */
.skip-links {
  position: absolute;
}
.skip-links a {
  position: absolute;
  left: -7000px;
  padding: 0.5em;
  background: #000;
  color:#000;
  text-decoration: none;
}
.skip-links a:focus {
  position: static;
  color: #FFF;
}
/* connexion */
.compte {
  float: right;
  background: #ececec;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
  margin: 0;
  line-height: 2.2;
}
.compte a {
  text-decoration: none;
  font-weight: bold;
}
.compte p {
  padding: 0 1em;
  text-align: right;
  margin: 0;
}
.compte input[type=text], .compte input[type=password] {
  border-color: #ddd;
  background: #fff;
  font-family: inherit;
  padding: 0 4px;
}
.compte input[type=submit] {
  padding: 2px .5em;
}
/**
HEADER
------
*/
#top {
  position: relative;
  margin: 1.5em 0 0;
}
.header {
  background: #a2cbe9;
}
.header h1 {
  font-size: 1em;
  width: 15em;
  height: 3.5em;
  margin-bottom: 1.5em;
}
.header h1 a {
  display: block;
}
.header h1 a:hover, .header h1 a:focus {
  background-color: transparent;
}
.inner-header {
  height: 100%;
  padding: 0 .5em;
}
/* Jouons avec le logo */
.header h1 a:link img {
    -webkit-transition: all 0.3s linear;
     -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
       -o-transition: all 0.3s linear;
          transition: all 0.3s linear;
}
.header h1 a:hover img {
  background: transparent;
  -webkit-transform: scale(0.7) rotate(360deg);
     -moz-transform: scale(0.7) rotate(360deg);
      -ms-transform: scale(0.7) rotate(360deg);
       -o-transform: scale(0.7) rotate(360deg);
          transform: scale(0.7) rotate(360deg);
  -webkit-transition: all 0.5s linear;
     -moz-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
       -o-transition: all 0.5s linear;
          transition: all 0.5s linear;
}

/* main-nav */
#nav {
  font: normal 1em ArsenalRegular, "arial narrow", "futura condensed", arial, sans-serif;
}
.info-navs {
  position: absolute;
  left: -999em;
}
#nav ul {
  border: 1px solid #e6e6e6;
}
#nav li {
   border-bottom: 1px solid #eee;
}
#nav li:last-child {
   border-bottom: 0;
}
#nav a {
   display: block;
   padding: .5em .8em;
   text-decoration: none;
}
#nav a:hover {
   background-color: #f8f8f8;
}
#nav a:hover, #nav a:focus, #nav .cur {
  background-color: #efefef;
  color: #333;
}
#nav .cur {
   font-weight: bold;
}
#nav .cur a {
  color: #C44D58;
  font-weight: bold;
}
#nav a img {
  vertical-align: top;
}
/* sub-nav */
#subnav {
  clear: both;
  line-height: 1.8;
  background: #FFF;
}
#subnav ul {
  text-align: left;
  text-transform: uppercase;
  margin: 0 .5em;
  padding: 0 .5em;
  background: #a2cbe9;
}
#subnav li {
  display: inline;
  border-right: 1px solid #137BBB;
  padding: 0 0.5em;
  font-size: .875em;
}
#subnav li:last-child {
  border-right: none;
  padding-right: 0;
}
#subnav a {
  text-decoration: none;
}
#subnav a:hover, #subnav a:focus {
  text-decoration: underline;
}
#subnav li.cur a {
  font-weight: bold;
}
#switchlangs {
  margin: 0;
  font-size: .875em;
  line-height: 2;
}
#switchlangs a {
  text-decoration: underline;
}
.tinynav_label, .tinynav {
  display: none;
}
/**
*   Un poil de jQuery pour présenter le menu principal
*   comme un sélecteur (et une icône "hamburger")
*   Le js ajoute une class "nav-menu" au body lorsque
*   ses liens ne tiennent plus sur la même ligne
*/
.nav-menu #nav {
   text-align: left;
   margin: 0;
   position: relative;
   overflow: hidden;
   background: #FFF;
}
.nav-menu #nav a {
   padding: .5em .8em;
}
.nav-menu #nav .info-navs {
   position: absolute;
   top: 0;
   left: auto;
   right: 0;
   display: block;
   width: 4em;
   padding: .55em 0; 
   background: #ccc url(i/hamburger.png) no-repeat center .9em;
   text-indent: -999em;
   cursor: pointer;
}
.nav-menu #nav.expanded h3 {
   background-position: center .5em;
}
.nav-menu #nav li {
   clear: left;
   display: none;
}    
.nav-menu #nav.expanded li,
.nav-menu #nav li.cur {
   display: list-item;
} 
.nav-menu #nav li.cur {
   border-bottom-width: 0;
}
.nav-menu #nav.expanded li.cur {
   border-bottom-width: 1px;
}

/**
*  MEDIA QUERIES pour le header et la navigation secondaire
*
*  - mobiles : connexion centrée, espace vertical réduit,
*    logo en plus petit, items du sous-menu en "quadrillage",
*    switcher de langue sous le sous-menu
*  - écrans > 672px : menu principal sur une ligne avec onglets,
*    navigation secondaire et switcher sur une seule ligne
*/
@media screen and (max-width: 30em) {
      .compte {
        float: none;
        margin: 0 auto;
        }
      .compte p {
        text-align: center;
      }
      #top {
        margin-top: 1em;
      }
      .header h1 { 
        float: left;
        width: 44px;
        height: 38px;
        margin-bottom: .75em;
      }
      .header h1 a {
        width: 38px;
        height: 38px;
        background: transparent url(i/dotclear-mini.png) no-repeat;
      }
      .header h1 a:hover {
        background: #fff url(i/home.png) no-repeat center center;
        border-radius: .5em;
      }
      .header-img {
        display: none;
      }
      .nav-menu #nav .info-navs {
        background-color: #ececec;
        width: 38px;
      }
      .nav-menu #nav li.cur {
        background: #FFF;
      }
      #subnav ul {
        padding: 0;
        background: #FFF;
      }
      #subnav li {
        border-right: none;
        display: block;
        border-bottom: 1px solid #ccc;
        line-height: 2;
        padding: 0;
        width: 50%;
        float: left;
      }
      #subnav li:nth-child(2n+1):last-child {
        width: 100%;
      }
      #subnav li a {
        display: block;
        padding: 0 .5em;
      }
      /* on supprime la liste et on affiche 
      le sous menu en select si js est présent */
      .nav-menu #sub-nav { 
        display: none;
      }
      .nav-menu #subnav {
        position: relative;
        padding: .5em;
      }
      .nav-menu .tinynav {
        font-family: inherit;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-clip: padding-box;
        background-color: #fafafa;
        display: block;
        box-shadow: inset 0 1px 0 #fff;
        width: 100%;
      }
      /* switcher */
     #switchlangs {
        clear: both;
        margin-top: .5em;
      }
      #wrapper {
        padding-top: 1em;
      }
}
@media screen and (min-width: 42em) {
      #nav {
        text-align: right;
        background: transparent;
      }
      .info-navs {
        left: -999px;
      }
      #nav ul {
        margin-bottom: 0;
        border: none;
      }
      #nav li {
        display: inline-block;
        border-color: #cecece;
        border-bottom: none;
      }
      #nav a {
        text-decoration: none;
        display: block;
        padding: 5px 10px;
      }
      #nav a:hover, #nav a:focus, #nav .cur {
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
      #subnav ul {
        float: right;
        background: #efefef;
      }
      #subnav {
        background: #efefef;
        border-bottom: 1px solid #ccc;
      }
      #switchlangs {
        margin-left: .5em;
      }
}


/** 
WRAPPER
----------
  Les règles propres internes à chaque appli sont définies
  dans leurs css liées (Trac, blog, dokuwiki…) 
*/

#wrapper {
  clear: both;
  padding: 0 .5em;
}

/** 
FOOTER
----------
*/
#footer {
  clear: both;
  padding: 0;
  color: #4c4c4c;
  text-align: center;
  margin: 1em 0 0;
  font: normal .875em ArsenalRegular, "arial narrow", "futura condensed", arial, sans-serif;
}
#footer a {
  color: #4c4c4c;
}
.icon a {
  margin-right: .5em;
}
.icon a:hover, .icon a:focus {
  background-color: transparent;
}
.icon a:hover img, .icon a:focus img {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
       -o-transform: rotate(360deg);
          transform: rotate(360deg);
  -webkit-transition: all 0.5s linear;
     -moz-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
       -o-transition: all 0.5s linear;
          transition: all 0.5s linear;
}
.footer-content {
  background-color: #a2cbe9;
  margin-top: -1.5em;
  padding: 1.5em 0 1em;
}
.foot-nav li {
  display: inline-block;
}
.foot-nav a {
  text-decoration: none;
}
.foot-nav a:hover, .foot-nav a:focus {
  text-decoration: underline;
}
/* use with script totop.js */
#toTop {
  width:110px;
    border:1px solid #aaa;
    border-radius: 3px;
    background:#f7f7f7;
    text-align:center;
    padding:5px;
    position:fixed;
    bottom:10px;
    right:10px;
    cursor:pointer;
    display:none;
    color:#333;
    font-size: 1em;
}
/**
* CLASSES COMMUNES ET UTILITAIRES
*/
/* alternate font-sizing */
.smaller { font-size: .75em; }
.small { font-size: .875em; }
.big { font-size: 1.125em; }
.bigger { font-size: 1.25em; }
.biggest { font-size: 1.375em; }
/* text alignments */
.txtleft   { text-align: left; }
.txtright  { text-align: right; }
.txtcenter { text-align: center; }
/* elemets alignments */
.center { margin-left: auto; margin-right: auto; }
.left { float: left; }
img.left { margin-right: 1em; }
.right { float: right; }
img.right { margin-left: 1em; }
im g.left, img.right {margin-bottom: 5px; }

/* hiding content a11y */
.visually-hidden {
  position: absolute;
  left: -7000px;
  overflow: hidden;
}
/* Micro clearfix thx to Nicolas Gallagher */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
  }
.clearfix:after {
  clear: both;
  }