@import url(http://fonts.googleapis.com/css?family=Comfortaa);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400italic,700italic,400,700);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);

html {
	margin: 1em;
	padding: 0;
	background: #fff;
	color: #000;
	min-width: 27.5em;
}
body {
	margin: 0 auto;
	padding: 0 0 0 8em;
	width: 80%; max-width: 40em; min-width: 20em;
	position: relative;
	font: 1em 'Droid Sans','Open Sans','Myriad Pro',sans-serif;
}

header h1 {
	margin: 0; padding: 0; 
	font: 2em/1.5 'Comfortaa',sans-serif;
	border-bottom: 1px solid black;
	/*text-shadow: 2px 2px 5px #ddd;*/
}
h1 {
  margin: 0 0 .5em; padding: 0; 
	font: 1.5em 'Comfortaa',sans-serif;
}
#micdelfr .suff {color: #999}
#micdelfr .space {display: none}
#micdelfr {text-transform: lowercase}
#micdelfr::after {content: '.fr'}

h2 {
	margin: .6em 0 .4em;
	font: 1.2em 'Comfortaa',sans-serif; /*color: #666;*/
}
h3 {
	margin: .72em 0 .48em;
	font: 1em 'Comfortaa',sans-serif; color: #666;
}
h4 {
	margin: .9em 0 .6em;
	font-size: .8em 'Comfortaa',sans-serif; color: #999;
}

p {
	margin: .4em 0;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

header {
	margin: 0 0 1em;
}
footer {
	border-top: 1px solid black;
	padding: .5em 0;
	margin-top: 1.25em;
	font-size: .8em;
}

ul {
	margin: .4em 0;
	padding: 0 0 0 2em
}
ol {
  margin: .4em 0;
  padding: 0 0 0 2em
}
ul li, ol li {
	margin: .2em 0; padding: 0
}

/* Links */

a img {
	border:none
}

a:link,a:visited {
	color: #33C;
	text-decoration: none
}
a:focus,a:hover {
	color: #33C;
	text-decoration: underline
}
a:active {
	color: #C33;
	text-decoration: underline
}

a[hreflang]:hover {
	border-radius: .3em 0 .3em .3em
}
a[hreflang]:hover:after {
	position: absolute;
	background: black;
	color: white;
	border-radius: 0 .3em .3em 0;
	content: attr(hreflang);
	font-size: .6em;
	font-weight: bold;
	text-transform: lowercase;
	padding: .1em .3em
}

/* Nav bar */

nav {position: absolute; width: 7.5em; top: 3em; left: 0em;
  margin-top: 1px; padding-top: 1em}
nav h2 {display:none}
nav h3 {margin: 0; font-size: 0.8em}
nav ul {list-style-type: none; margin: 0 0 1em; padding: 0;}
nav ul ul {list-style-type: none; margin: 0 0 0 .5em; padding: 0;}
nav ul li {margin: 0; padding: 0;}

nav ul a:link,nav ul a:visited {color: #000}
nav ul a:hover,nav ul a:focus {background:transparent; color: #33C}
nav ul a:active {color: #C33}
a.nav-current:link,a.nav-current:visited {color: #666}
a.nav-current:hover,a.nav-current:focus {color: #33C}
a.nav-current:active {color: #C33}

nav ul.social-network-icons {display: table; margin: 0 0 1em; padding: 0}
nav ul.social-network-icons li {display: table-cell; padding: 0.1em}

#langswitch a[hreflang]:after {content: none; padding-left: 0}

/* Code */

pre,code {font-family: 'Droid Sans Mono','Andale Mono','DejaVu Sans Mono',monospace;}
.codeblock,pre {overflow: auto}
.codeblock {text-wrap: none}
pre {padding: 0.2em 0.3em; font-size: 0.8em; border: 1px dashed #CCC; background: #EEE; margin: -0.1em 0;}
pre.example {padding: 0.1em 0.2em; font-size: 0.8em; border: 1px dashed #CFC; background: #EFE;}
code {border: 1px dashed #CCC; font-size: 0.8em; background: #EEE; margin: -2px -1px; padding: 1px 2px}
pre code {border: none; font-size: 1em; background: transparent; margin: 0; padding: 0}

/* Error code */

body.errorcode h1 {
color: #C33;
font: 6em/1.0 'Comfortaa',serif;
border-bottom: 2px solid #C33;
}
body.errorcode *[lang] { font-style:italic}
body.errorcode nav { top: 6.5em }
body.errorcode footer,body.errorcode #legal {border-top: 2px solid #C33; }

/* Misc */

.collapsible-handle { cursor: pointer; padding-left: 1.2em; position: relative}
.collapsible-handle:hover {}
.collapsible-handle:before {content: '\00f0fe'; position: absolute; left: 0; top: 0.1em; font-family: 'FontAwesome'}
.collapsible-handle.extended:before {content: '\00f146'; }
.collapsible-handle.extended:hover:before {content: '\00f146'; color: #33C}
.collapsible-handle:hover:before {content: '\00f0fe'; color: #33C}