@font-face {
    font-family: 'Tangerine';
    src: url('./fonts/Tangerine_Regular.eot');
    src: url('./fonts/Tangerine_Regular.eot?#iefix') format('embedded-opentype'),
         url('./fonts/Tangerine_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Tangerine';
    src: url('./fonts/Tangerine_Bold.eot');
    src: url('./fonts/Tangerine_Bold.eot?#iefix') format('embedded-opentype'),
         url('./fonts/Tangerine_Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Odstemplik';
    src: url('./fonts/odstemplik_bold.eot');
    src: url('./fonts/odstemplik_bold.eot?#iefix') format('embedded-opentype'),
         url('./fonts/odstemplik_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OCRA-Std';
    src: url('./fonts/OCRA-Std.eot');
    src: url('./fonts/OCRA-Std.eot?#iefix') format('embedded-opentype'),
         url('./fonts/OCRA-Std.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    margin:0;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: #FFEDC8;
    font-family: 'OCRA-Std', sans-serif;
    color: #333333;
    text-align: justify;
}
.img_left {
    float:left;
    padding: 0 10px 10px 0;
}
.img_right {
    float:right;
    padding: 0 0 10px 10px;
}

#infosOCR {
    /*display: none;*/
    width:25px;
    margin:10px;
    margin-left:0px;
    float:right;
}
#divChangeCSS {
    margin: auto;
    background-color: #555555;
    color: white;
    width: 170px;
    height: 80px;
    float: right;
    -moz-border-radius:    10px;
    -webkit-border-radius: 10px;
    border-radius:         10px;
    padding: 3px;
}
#divChangeCSS a {
    color: white
}
#apresBulle {
    float: right;
    margin-top: 7px;
    
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 20px solid #555555;
    border-bottom: 20px solid transparent;
}

header {
    /*width: 80%;*/
    margin: 0 auto 0 auto;
    background-image: url(./images/Banniere2.png);
    /*height: 300px;*/
    background-size: 100% 100%;
}
header img {
    width: 100%;
}

#wrapper {
	width:75%;
	margin: 0 auto 0 auto;
    min-height: 500px;
    max-height: 700px;
}

#sidebar2, #infos_droite {
    display: none;
}

#sidebar {
	float:left;
    width:25%;
}
#sidebar table {
    background-color: #333333;
    color: #FFEDC8;
    text-align: center;
    font-size: 1.2em;
    width: 100%;
    border-collapse: collapse;
}
#sidebar table tr th {
    background-color: #FFEDC8;
    color: #FFEDC8;
    height: 5px;
}
#sidebar table tr td {
    height: 100px;
    width: 85%;
}
#sidebar table tr td:hover {
    background-color: #555555;
    color: #FFFFDF;
}
#sidebar .pageActuelle {
    color: #333333;
    background-color: #FFFFDF;
}
#sidebar .pageActuelle:hover {
    color: #555555;
    background-color: #FFFFDF;
}
#sidebar .onglet {
    background-color: #333333;
    color: #FFEDC8;
}

#main {
	float:right;
    background-color: #FFFFDF;
	width:75%;
	margin: 0 0 20px 0;
}

h2 {
	margin-top: 0.5em;
    font-size: 1.3em;
    line-height: 1.5em;
    text-align: center;
}

article {
	margin:1em;
	padding:0 1.5em 1em 1.5em;
}
article p {
    font-family: monospace;
    font-size: 1.2em; 
    line-height: 1.5em;
}
article aside {
	margin:1em 3em;
	padding:0.5em;
}
a {
    color: #5555FF;
    text-decoration: none;
}
article #pub {
    width:50%;
    margin:auto;
    padding:10px;
    font-family: monospace;
    font-size: 1.5em;
    text-align: center;
}

/* *******************
    Liste Sites
******************* */
article #sites li, article #gestions li {
    font-family: "Verdana", "Helvetica", sans-serif;
    font-size: 12px;
/* On fixe les dimensions des éléments de notre liste. */
    width: 160px;
	height: 160px;
    text-align: center;
	font-weight: bold;
/* On modifie l'affichage pour que les éléments soient sur la même ligne. */
	display: inline-block;
/* On ajoute une petite bordure et on définit les marges.*/
	border: 1px solid #000;
	margin: 10px 10px 10px 10px;
/* Quitte à faire du CSS3, autant  avoir des coins arrondis.*/
    border-radius: 10px;
/* On centre l'arrière-plan. */
    background-position: center;
/* On modifie la position pour pouvoir ensuite placer comme on le souhaite la description des liens. */
    position: relative;
/* On n'affiche pas ce qui dépasse de nos éléments ! */
	overflow: hidden;	
}
article #sites li a, article #gestions li a {
/* Pour fixer les dimensions d'un lien, il est nécessaire de l'afficher en tant qu'élément de type block.*/
    display: block;
	width: 100%;
	height: 100%;
    text-decoration: none;
}
article #sites li span, article #gestions li span {
	display: block;
    width: 100%;
/*Mettons les coins inférieurs arrondis pour que ce soit plus propre (merci à wibix pour la remarque)*/
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
/* Position absolue pour afficher la description avec précision. */
    position: absolute;
    height: 50px;
    color: #fff;
/* Arrière-plan semi-transparent ! */
    background-color: rgba(0,0,0,0.5);
/* La taille des lignes est égale à la hauteur de l'élément. Cela permet de centrer verticalement le texte.*/
    line-height: 50px;
/* L'ordonnée de l'élément est égale à la hauteur de son parent (110px) : la description sera donc située sous son parent. */
	top: 110px;
}
/* On indique les images à afficher en arrière-plan pour chaque élément. */
#superItem1{background-image: url('./images/boutonAnaelSI.png');}

#item1{background-image: url('./images/boutonRenaissance.png');}
#item2{background-image: url('./images/boutonSaintMartin.jpg');}
#item3{background-image: url('./images/boutonZanin.jpg');}
#item4{background-image: url('./images/boutonSCMCC.png');}
#item5{background-image: url('./images/boutonSelgues.png');}
#item8{background-image: url('./images/boutonAlternatel.png');}
#item9{background-image: url('./images/boutonPizzeria.jpg');}
#itemAgenda{background-color: lightblue;}
#itemVide{background-image: url('./images/vide.jpg');}
#itemConstruction{background-image: url('./images/boutonConstruction.jpg');}
/* *******************
 ---  Liste Sites ---
******************* */

.iframe_demos {
    width: 88%;
    margin-left: 5%;
    height: 650px;
}

a input[type=button] {
    border-width : 3px;
    border-color : #555;
    border-style : outset;
    border-radius : 5px;
    padding : 5px;
    background-color : #FFEDC8;
}
.bouton_retour {
    margin: auto;
}
.bouton_retour input[type=button] {
    border-width : 3px;
    border-color : #333;
    border-style : outset;
    border-radius : 5px;
    padding : 5px;
    background-color : white;
    font-size: 1.3em;
}

/* *************************
 Captures écrans logiciels
************************* */
#captures li {
    font-family: "Verdana", "Helvetica", sans-serif;
    font-size: 12px;
/* On fixe les dimensions des éléments de notre liste. */
    width: 80%;
    margin: auto;
	height: 450px;
    text-align: center;
	font-weight: bold;
/* On modifie l'affichage pour que les éléments soient sur la même ligne. */
	display: inline-block;
/* On ajoute une petite bordure et on définit les marges.*/
	border: 1px solid #000;
	margin: 10px 10px 10px 10px;
/* Quitte à faire du CSS3, autant  avoir des coins arrondis.*/
    border-radius: 10px;
/* On centre l'arrière-plan. */
    background-position: center;
/* On modifie la position pour pouvoir ensuite placer comme on le souhaite la description des liens. */
    position: relative;
/* On n'affiche pas ce qui dépasse de nos éléments ! */
	overflow: hidden;	
}
#captures li a {
/* Pour fixer les dimensions d'un lien, il est nécessaire de l'afficher en tant qu'élément de type block.*/
    display: block;
	width: 100%;
	height: 100%;
    text-decoration: none;
}
#captures li span {
	display: block;
    width: 100%;
/*Mettons les coins inférieurs arrondis pour que ce soit plus propre (merci à wibix pour la remarque)*/
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
/* Position absolue pour afficher la description avec précision. */
    position: absolute;
    height: 50px;
    color: #fff;
/* Arrière-plan semi-transparent ! */
    background-color: rgba(0,0,0,0.5);
/* La taille des lignes est égale à la hauteur de l'élément. Cela permet de centrer verticalement le texte.*/
    line-height: 50px;
/* L'ordonnée de l'élément est égale à la hauteur de son parent (110px) : la description sera donc située sous son parent. */
	top: 400px;
}
/* ******************************
- Fin captures écrans logiciels -
****************************** */

footer {
	clear:both;
    text-align: center;
    width: 90%;
    margin: auto;
    padding:1em 0 3em 0;
}
footer a {
    text-decoration: none;
    font-weight: bold;
    color: #65302A;
}
footer a:hover {
    color: #95605A;
}