/* Reset & Basic styling */
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; }

label,input[type="submit"]{ cursor: pointer; }
input,textarea{ margin: 0; }


a {
  text-decoration: initial;
}
body {
  width: 80%;
  padding: 0 10%;
}
body > header + nav > ul {
  display: block;
}
body > header + nav > ul > li {
  display: inline-block;
  min-width: 8%;
  height: 50px;
  vertical-align: middle;
  line-height: 50px;
  text-align: center;
  margin: 0.8%;
}
body header {
  margin: 5px 0;
  padding: 5px 10px;
}
body > section > article {
  margin: 0 0 20px 0px;
  display: inline-table;
}
body > section > article > aside:only-of-type {
  float: left;
  width: 20%;
  margin-left: -25%;
  font-size: 12px;
  line-height: 1.8;
}
body > section > article[data-aside="true"] {
  margin: 0 0 20px 20%;
}
body > footer {
  display: block;
}
button[data-button="push"] {
  padding: 12px 6px;
  font-size: 1em;
  line-height: 0;
}
button,
a[data-type="button"] {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  font-size: 11px;
  padding: 0 7px 0 7px;
  margin: 0 7px 0 0;
  text-align: center;
  float: left;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  *zoom: 1;
  *margin-left: 0.3em;
}
button:before,
a[data-type="button"]:before,
button:after,
a[data-type="button"]:after {
  display: tablecontent "";
}
button:after,
a[data-type="button"]:after {
  clear: both;
}
button:first-child,
a[data-type="button"]:first-child {
  *margin-left: 0;
}
button[data-size="small"],
a[data-type="button"][data-size="small"] {
  height: 18px;
  line-height: 18px;
  font-size: 9px;
}
button[data-size="big"],
a[data-type="button"][data-size="big"] {
  height: 32px;
  line-height: 32px;
  font-size: 16px;
}
button[data-size="huge"],
a[data-type="button"][data-size="huge"] {
  height: 48px;
  line-height: 48px;
  font-size: 22px;
}
@media all and (max-width: 640px) {
  body > header + nav > ul > li {
    display: block;
    height: auto;
    vertical-align: middle;
    line-height: auto;
    text-align: center;
    margin: auto;
  }
  body > section > article {
    margin: 0px;
  }
  body > section > article > aside:only-of-type {
    float: none;
    display: block;
    width: 100%;
    margin: 0px;
  }
  body > section > article[data-aside="true"] {
    margin: 0px;
  }
  body > footer {
    display: block;
  }
}
a {
  color: #3991dd;
}
body {
  background-color: #fff;
}
button[data-button="push"] {
  background-color: #fff;
  border-top: 1px solid #ccc;
  border-left: 3px solid #e6e6e6;
  border-bottom: 5px solid #a6a6a6;
  border-right: 3px solid #b3b3b3;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  color: #5ca2dc;
  font-size: 1.2em;
  font-weight: bold;
  -webkit-transition: all 0.1s ease 0;
  -moz-transition: all 0.1s ease 0;
  -o-transition: all 0.1s ease 0;
  transition: all 0.1s ease 0;
}
button[data-button="push"]:hover {
  background-color: #fff;
  border-top: 1px solid #ccc;
  border-left: 3px solid #e6e6e6;
  border-bottom: 5px solid #a6a6a6;
  border-right: 3px solid #b3b3b3;
}
button[data-button="push"]:active {
  background-color: #fff;
  border-top: 5px solid #ccc;
  border-left: 5px solid #ccc;
  border-bottom: 1px solid #a6a6a6;
  border-right: 1px solid #b3b3b3;
  -webkit-box-shadow: inset -1px -1px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: inset -1px -1px 5px 0px rgba(0,0,0,0.15);
  -o-box-shadow: inset -1px -1px 5px 0px rgba(0,0,0,0.15);
  box-shadow: inset -1px -1px 5px 0px rgba(0,0,0,0.15);
}
button,
a[data-type="button"] {
  font-weight: bold;
  color: #474747;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  border: solid 1px #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05) , inset 0px 1px 0px 0px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05) , inset 0px 1px 0px 0px rgba(255,255,255,0.8);
  -o-box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05) , inset 0px 1px 0px 0px rgba(255,255,255,0.8);
  box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05) , inset 0px 1px 0px 0px rgba(255,255,255,0.8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ebebeb), to(#e6e6e6));
  background-repeat: repeat-x;
  filter: 'progidDXImageTransform.Microsoft.Gradient(startColorstr=btn_reg_bg_from, endColorstr=btn_reg_bg_to, GradientType=0)';
  -webkit-transition: all 0.05s linear 0;
  -moz-transition: all 0.05s linear 0;
  -o-transition: all 0.05s linear 0;
  transition: all 0.05s linear 0;
}
button:hover,
a[data-type="button"]:hover {
  background: #efefef;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2) , inset 0px 1px 0px 0px #f2f2f2;
  -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2) , inset 0px 1px 0px 0px #f2f2f2;
  -o-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2) , inset 0px 1px 0px 0px #f2f2f2;
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2) , inset 0px 1px 0px 0px #f2f2f2;
}
button:active,
a[data-type="button"]:active {
  outline: 0;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255,0.8) , inset 0 1px 3px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255,0.8) , inset 0 1px 3px 0px rgba(0,0,0,0.2);
  -o-box-shadow: 0px 1px 1px 0px rgba(255,255,255,0.8) , inset 0 1px 3px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 1px 1px 0px rgba(255,255,255,0.8) , inset 0 1px 3px 0px rgba(0,0,0,0.2);
}
body {
  font-family: 'Oxygen', sans-serif;
  color: rgba(0,0,0,0.6);
}


h1{
	font-family: GeosansLight, Calibri, arial, sans-serif;
	font-weight: bold;
	color: #383838;
	text-align: center;
	font-size: 30px;
}

h2{
	font-family: GeosansLight, Calibri, arial, sans-serif;
	font-weight: bold;
	color: #383838;
	font-size: 20px;
}

@font-face {
	font-family: "GeosansLight";
        src: url('Fonts/GeosansLight-Oblique.ttf');
}

@font-face {
	font-family: "Bebas";
        src: url('Fonts/BebasNeue.otf');
}

#logo{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -125px;
	margin-top: -100px;
}

.texte{
	width: auto;
	padding-left: 40px;
	font-family: Arial, Helvetica, sans-serif;
}

#menu{
	float: left;
	width: 320px;
        height: auto;
        position: fixed;
        top: 20px;
}

#contenu{
	width: auto;
        height: auto;
	margin-left: 320px;
        padding-left: 20px;
        border-left-color: #EEE;
        border-left-style: dashed;
        border-left-width: 1px;

}

#arbo{
	margin-top: 120px;
	padding-left: 35px;
}

#titreArbo{
	display: inline;
	text-align: center;
}

.titreContenu{
	text-align: left;
}

.completer{
	color: red;
	size: 30px;
}

.indent{
	margin-left: 10px;
}