/* ####################################################################
# Script = cyberalex.sh.css
# Description = StyleSheet for www.cyberalex.sh .
# Location : http://cyberalex.sh/css/cyberalex.sh.css
# Copyright (C) 1992-2016 CyberAlex alias Alexandre Bayard
# Contact = the [dot] cyberalex [at] yandex [dot] com
# Created on 2016-05-12 & last modified on 2016-09-14
#
#################################################################### */

/* ####################################################################
# This program is free software: you can redistribute it and/or modify it under the terms of 
# the GNU General Public License as published by the Free Software Foundation.
#
# This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; 
# without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
# See the GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License along with this program. 
# If not, see http://www.gnu.org/licenses/.
#
#################################################################### */



/* ####################################################################
	Imports
	Created on 2016-05-13 & last modified on 2016-09-14
#################################################################### */
@import url('collapsible-tree.cyberalex.sh.css');
@import url('fonts.cyberalex.sh.css');



/* ####################################################################
	Style per TAGs
	Created on 2016-05-12 & last modified on 2016-09-14
#################################################################### */

html { /* This is necessary in order to keep the footer at the page's bottom. */
	margin: 0;
	height: 100%;
	min-height:100%;
	} 

body {
	margin: 0;
	height: 98%; /* To keep the footer at the page's bottom. NB : 100% displays useless scrollbar. */
	width: 99%;
	background-color: #CCC; /* Gray80 => http://www.color-hex.com/color/cccccc */
	/* This prevents iphone landscape zoom ("automatic text adjustment"). 
	=> http://stackoverflow.com/a/27311443
	=> http://stackoverflow.com/a/2711132
	*/
	-webkit-text-size-adjust: 100%;
	}

h1, h2, h3, h4 {
	margin-top: 0.3em;
	margin-bottom: 0.4em;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
/*	border: solid red 1px; /* Just testing. */
	}

header {
	margin-bottom: 1em;
	width: 100%;
/*	border: solid pink 1px; /* Just testing. */
	}

footer { /* To keep the footer at the page's bottom. */
	position: absolute;
	bottom: 0;
	height: 2em;
	width: 99%;
	}

section {
	padding-bottom: 2em; /* Same as the footer's height, to keep the footer at the page's bottom. */
/*	border: solid orange 2px; /* Just testing. */
	}

noscript, #noscript {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: pink;
	}


/* ####################################################################
	Style per IDs : menu
	Created on 2016-05-14 & last modified on 2016-09-14
#################################################################### */

#open_menu {
	position: absolute;
	top: 0.1em;
	left: 0.2em;
	cursor:pointer;
	}

#schliessen {
	position: absolute;
	top: 0.1em;
	right: 0.2em;
	cursor: pointer;
	display: none;
	}

#le_menu {
	position: absolute;
    z-index: 1;
    height: 100%;
    width: 0;
	top: 0.1em;
/*	left: 0.2em; */
	left: 0;
    background-color: #CCCCCC;
    overflow-x: hidden;
	transition: 0.7s;
	}



/* ####################################################################
	Style per IDs : others
	Created on 2016-05-12 & last modified on 2016-09-14
#################################################################### */

#le_contenu {
	margin-top: 1em;
/*	border: solid green 1px; /* Just testing. */
	}

#le_contenu p, #le_contenu ul {
	margin-left: 20px;
	margin-right: 20px;
/*	border : red solid 1px; /* Just testing. */
	}

#le_sous_titre {
	margin-top: -1em;
	}

#logo img { /* actual dimensions are 333x69 */
	width: 222px;
	height: 46px
	}

#mainContainer { /* This block is necessary in order to keep the footer at the page's bottom. */
	position: relative; 
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	}

#titre_page {
	margin-top: 1.5em;
	}



/* ####################################################################
	Style per Classes
	Created on 2016-05-16 & last modified on 2016-09-14
#################################################################### */

/* empty */