html { min-height:100%; }

body { font-family:"Open Sans",Arial,Sans-Serif; margin:0px; padding:0px 0px 20px 0px; text-align:center; }

body.installation { min-height:100%; background:url(img/installation.png) bottom center no-repeat; background-size:cover; }

.header { width:100%; height:164px; background:url(img/header-bg.png) top center no-repeat; background-size:cover; position:relative; }
.header .logo { width:303px; height:123px; background:url(img/logo.png) top center no-repeat; background-size:contain; position:absolute; top:0px; left:5%; }
.header .padding { padding:5px 20px 5px 180px; }
.header h1 { background:none !important; color:#fff; font-size:10pt; line-height:18px; margin:0px; }
.header h1 b { font-size:16pt; line-height:26px; }
.header h1 a { color:#fff; text-decoration:none; }
.header h2 { color:#fff; font-size:14pt; margin:0px 0px 15px 0px; }
.header .menu { width:100%; margin:0px; padding:0px; list-style:none; text-align:center; }
.header .menu li { display:inline-block; margin:0px; padding:0px 0px; }
.header .menu li a { color:#fff; line-height:25px; padding:0px 20px; text-decoration:none; }
.header .menu li a:hover { background-color:#000; }

.login { width:85%; max-width:500px; margin:40px auto; background-color:#f8f8f8; border:1px solid #f0f0f0; text-align:left; }
.login form { margin:0px; padding:20px 25px; }
.login form h2 { margin:0px 0px 15px 0px; text-align:center; }
.login form > div { margin:0px 0px 15px 0px; }
.login form > div > label,
.login form > div > input[type="text"],
.login form > div > input[type="password"],
.login form > div > button { display:block; width:100%; }
.login form > div > label { margin-bottom:5px; }
.login form > div > input[type="text"],
.login form > div > input[type="password"],
.login form > div > button { line-height:40px; border-radius:0px; font-family:"Open Sans",Arial,Sans-Serif; }
.login form > div > input[type="text"],
.login form > div > input[type="password"] { background:#fff; border:1px solid #aaa; font-size:20px; padding:0px; text-indent:50px; -webkit-appearance:none; }
.login form > div > input[type="text"]:focus,
.login form > div > input[type="password"]:focus { box-shadow:0px 0px 5px rgba(0, 100, 200, 0.5); }
.login form > div > .fa { position:absolute; width:40px; height:40px; line-height:40px; margin:1px 0px 0px 1px; text-align:center; background:#ddd; color:#fff; font-size:20px; }
.login form > div.memoriser > * { vertical-align:middle; }
.login form > div.memoriser > input[type="checkbox"] { width:20px; height:20px; border:1px solid #aaa; border-radius:0px; -webkit-appearance:none; }
.login form > div.memoriser > label { display:inline-block; width:auto; font-size:12px; margin-bottom:0px; }
.login form > div > button { height:50px; line-height:50px; background:#c41f31; color:#fff; border:0px; font-size:20px; -webkit-appearance:none; }

.info { width:85%; max-width:500px; margin:40px auto; background-color:#f8f8f8; border:1px solid #f0f0f0; text-align:left; }
.info .message { margin:0px; padding:20px 25px; }
.info .message .fa { float:left; margin:0px 20px 0px 0px; font-size:50px; }
.info .message .fa-exclamation-triangle { color:#c41f31; }
.info .boutons { margin:0px; padding:0px 25px 20px 25px; text-align:right; }
.info .boutons a { display:inline-block; height:50px; line-height:50px; padding:0px 20px; background:#c41f31; color:#fff; border:0px; font-size:20px; text-decoration:none; }

ul.filtre-ca { display:block; margin:10px 0; padding:0; text-align:center; }
ul.filtre-ca li { display:inline-block; margin:0; padding:0; }
ul.filtre-ca li a { display:block; margin:0 5px; padding:5px 10px; background:#000; color:#fff; font-size:15px; text-decoration:none; }
ul.filtre-ca li a.cur { background:#c41f31; color:#fff; }

h1 { background-color:#c41f31; color:#fff; font-size:16pt; line-height:30px; margin:20px 0 0 0; padding:5px 0; clear:both; }
.ca { display:block; height:110px; }
.ca > div { display:block; width:25.00%; float:left; }
.ca > div h2 { color:#888; font-size:16pt; line-height:24px; margin:10px 0 0 0; }
.ca > div h3 { color:#000; font-size:20pt; line-height:36px; margin:0; }
.ca > div h4 { color:#444; font-size:9pt; line-height:22px; margin:0; }
.ca > div h4 span:first-child { margin-right:15px; }
.ca > div h5 { color:#444; font-size:10pt; line-height:22px; margin:0; }
.ca > div h5.aug { color:#0a0; }
.ca > div h5.dim { color:#c00; }
.ca > div h5 span { margin-left:15px; }

#graphique { width:98%; height:400px; margin:0 auto; background-color:#ffffff; }
#graphique div div a { display:none !important; }

@media all and (max-width:768px)
{
  .header { height:82px; }
  .header .logo { width:151px; height:61px; }
  ul.filtre-ca { margin:8px 0; }
  h1 { font-size:14pt; line-height:20px; margin-top:8px; }
  .ca { height:62px; }
  .ca > div h2 { font-size:12pt; line-height:20px; margin:0; }
  .ca > div h3 { font-size:16pt; line-height:24px; }
  .ca > div h4 { font-size:8pt; line-height:18px; }
  .ca > div h4 span:first-child { margin-right:8px; }
  .ca > div h5 { font-size:9pt; line-height:18px; margin:0; }
  .ca > div h5 span { margin-left:8px; }
  .ca.annee > div h3 { letter-spacing:-1px; word-spacing:-1px; }
}

@media all and (max-width:768px) and (orientation: portrait)
{
  .ca > div { width:33.33%; }
  .ca > div.n2, .ca > div h5.n2, .ca > div h5 > span.annee { display:none; }
  .ca > div h4 { font-size:7pt; }
  .ca > div h4 span:first-child { margin-right:6px; }
  .ca > div h5 { font-size:8pt; }
  .ca > div h5 span { margin-left:8px; }
}