/*-----------------------------------------------------
  feuille de style pour les applications perso : biblio, CD, Arduino...
  Sources :
  
  http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
  
  http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
  avec démo ici :
  http://www.alsacreations.com/xmedia/tuto/html5/sections/index.html
  
  Plusieurs types d'entrées :
  - sans préfixe (pas de . et pas de #) : on définit les styles associés aux balises standard du html5
    (en particulier : header, footer, section, article, aside, nav)
  - préfixées par un . : ce sont les styles spécifiques, auxquels on fait référence en écrivant class=
    par exemple, le style floatright utilisé pour placer une image à droite du texte, utilisé par 
    <P><img class=floatright ...>texte du paragraphe...</P>
  - préfixées par un #  : ce sont les styles associés à certains identifiants.
    par exemple, le style main, utilisé dans la balise <section id=main>
    
    padding : marge intérieure (à l'intérieur de la bordure éventuelle)
    margin : marge extérieure (à l'extérieur de la bordure éventuelle)
  
------------------------------------------------------*/

@media (min-width: 1024px) {
BODY {
  	width:1024px;
  	margin: 0 auto 0 auto;
    }
}

@media (max-width: 640px) {
  BODY {
    	padding-top:0px;
      padding-right:1em;
      padding-bottom:0px;
      padding-left:1em;
  }
}

/* Définition du comportement du contenu situé entre <dic id="wrapper"> et </div> */

#wrapper {
	width:100%;
	margin: 0 0 0 0;
}

/* Définition du comportement du contenu situé entre <section id="main"> et </section> 
    Ici on met la largeur à 100% car #sidebar n'est pas utilisé

*/

#main {
  	width:1024px;
  	margin: 0 auto 0 auto;
}

/* Ce qui suit ne concerne que le cas des écrans avec moins de 640px de large... Voir page
 http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
 pour plus d'info à ce sujet
 */
@media (max-width: 640px) {
  #main {
  	width:100%;
  	margin: 0 0 0 0;
  }
}

/* fin de la définition du comportement d'une section  <section id="main"> ...  </section> 

/* Définition du comportement du contenu situé entre <aside id="sidebar"> et </aside> 
     en fait, cela n'est pas utilisé pour ce site */

#sidebar {
	float:left;
	width:22%;
	margin-left:1%;
	margin-top:1em;
}

/* Les spécifications qui suivent s'appliquent aussi au header contenu dans une division article... */
header {
  clear:both;
  color:#5B69A6; 
  font-size: 14pt; 
  font-family:arial,sans-serif;
  margin-top: 0pt;
  margin-bottom: 0pt;
  margin-left: 0pt;
  margin-right: 0pt;
  width=100%;
  
	/* margin:1em; */
}

/*
header A:link {background:#5B69A6; color:white; font-weight: bold; text-decoration: none}
header A:visited {background:#5B69A6; color:white; font-weight: bold; text-decoration: none}
header A:hover {background:#c00; color:white; text-decoration:none}

header A:link {color:white; font-weight: bold; text-decoration: none}
header A:visited {color:white; font-weight: bold; text-decoration: none}
header A:hover {color:white; text-decoration:none}
*/

footer {
  clear:both;
  color:#5B69A6; 
  font-size: 12pt; 
  font-family:arial,sans-serif;    
}


footer A:link {background:#128F9A; color:white; font-weight: bold; text-decoration: none}
footer A:visited {background:#128F9A; color:white; font-weight: bold; text-decoration: none}
footer A:hover {background:#128F9A; color:white; text-decoration:none}


article {
	/* border:1px dashed #444; */
	/* margin:1em; */
	/* padding:1em; */
	padding: 0pt;
	margin-top: 0pt;
	margin-bottom: 0pt;
	background:#fff;
	color:black; 
	font-size: 11pt; 
	font-family:arial,sans-serif;  
}

article A:link {color:#5B69A6; font-weight: bold; text-decoration: none}
article A:visited {color:#5B69A6; font-weight: bold; text-decoration: none}
article A:hover {color:red; text-decoration:none}

article P {
	margin-top: 0pt;
	margin-bottom: 10pt;
	padding-top: 0em;
	padding-bottom:0.2em;
	color:#000000; 
	font-size: 11pt; 
	font-family:arial,sans-serif;  
}

article h1 {
	margin-top: 10pt;
	margin-bottom: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	color:#00989D; 
	font-size: 16pt; 
	font-family:arial,sans-serif;  
}

article h2 {
	margin-top: 1em;
	color:black; 
	font-size: 12pt; 
	font-family:arial,sans-serif;  
}

article header, article footer {
	border:1px #ccc;
	/* padding:1em; */
  margin-bottom:1em;
	/* background:#ddd; */
  color:black; 
  font-size: 14pt; 
  font-family:arial,sans-serif;  

}

aside {
	/*border:1px dashed #444; */
}

article aside {
	background:#fff;
	margin:1em 3em;
	padding:0.5em;
	border:1px dashed #ccc; 
}

/* Le style permet de positionner une image à droite du texte
Voir : http://css.maxdesign.com.au/floatutorial/tutorial0106.htm
pour plus d'info à ce sujet */

.floatright
{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px;
}

/* Boutons radio personnalisés
http://css.mammouthland.net/formulaire-form-input-css.php
*/
form.login {
 background-color:#FAFAFA;
 padding:10px;
 width:300px;
 }


form {
 background-color:#FAFAFA;
 padding:10px;
 width:300px;
 }

 @media (min-width: 400px) {
form {
  width:800px;
  }
} 
 
 
 
/* encadrement */
fieldset {
 padding:0 20px 20px 20px;
 margin-bottom:10px;
 border:1px solid #128F9A;
 }

/* texte dans l'encadrement */ 
legend {
 color:#128F9A;
 font-weight:bold
 }
label {
 margin-top:8px;
 display:block;
 }
label.inline {
 display:inline;
 margin-right:50px;
 }
input, textarea, select, option {
 background-color:#F3FFF3;
 }
input, textarea, select {
 padding:3px;
 border:1px solid #128F9A;
 border-radius:5px;
 margin-top:8px;
 width:260px;
 box-shadow:1px 1px 2px #C0C0C0 inset;
 }

input.login {
  width:300px;
  }
 
 
@media (min-width: 400px) {
input, textarea {
  width:700px;
  }
}  
select {
 margin-top:10px;
 }
input[type=radio] {
 margin-top: 10px;
 background-color:transparent;
 border:none;
 width:20px;
 }
input[type=checkbox] {
 margin-top: 10px;
 background-color:transparent;
 border:none;
 width:20px;
 } 
input[type=submit], input[type=reset] {
 width:100px;
 margin-left:5px;
 margin-top: 12px;
 box-shadow:1px 1px 1px #128F9A;
 cursor:pointer;
 }
 
/* Menu 
 http://sebnitu.github.io/HorizontalNav/
 
 */
 
/* 
 nav {
  background: #efefef;
  border-radius: 6px;
  font-size: 14pt; 
  font-family:arial,sans-serif;
  padding:1em;  
  border:1px dashed #444;
}
*/
nav ul {
  font-size: 14pt; 
  font-family:arial,sans-serif;
  background: #128F9A; 
  float: left;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #0e7079;
}


nav ul li {
	display:inline-block; 
  float: left;
  border-left: 1px solid #0e7079;
}

nav ul li:first-child {
  border-left: 0 none;
}
nav ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  border-top: 1px solid rgba(255,255,255, 0.25);
  border-left: 1px solid rgba(255,255,255, 0.25);
  text-decoration:none;
}
nav ul li:first-child a {
  border-left: 0 none;
}
nav ul li a:hover {
  background: #12808a;
}
nav ul li:first-child a {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
nav ul li:last-child a {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/************************

http://css.mammouthland.net/menu-horizontal-en-css.php

********************/

.choix {
font-size: 13pt;
font-family:arial,sans-serif;
text-decoration:none; 
/* width:340px; */
margin-bottom:1em;
}

.choix ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
 
.choix li {
/* margin-left:2px; */
  margin-top:0px;
  margin-right:5px;
  margin-bottom:5px;
  margin-left:5px;
  float:left; /*pour IE*/
 }
.choix ul li a {
 display:block;
 float:left;   
 width:130px;
 background-color:#006948;;
 color:white;
 text-decoration:none;
 text-align:center;
 padding:5px;
 border:2px solid;
 text-decoration:none;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
 
@media (min-width: 400px) {
.choix ul li a {
  width:120px;
  }
} 
.choix ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 text-decoration:none;
 } 
 
 /* variante pour l'affichage des compositeurs */
 
.choix2 {
font-size: 11pt;
font-family:arial,sans-serif;
text-decoration:none; 
/* width:340px; */
margin-bottom:1em;
}

.choix2 ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
 
.choix2 li {
/* margin-left:2px; */
 margin:5px;
 float:left; /*pour IE*/
 }
.choix2 ul li a {
 display:block;
 float:left;   
 width:130px;
 border-radius:6px;
 background-color:#369499;
 color:white;
 text-decoration:none;
 font-weight: normal;
 text-align:center;
 padding:5px;
 border:2px solid;
 text-decoration:none;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
 
 @media (min-width: 400px) {
.choix2 ul li a {
  width:120px;
  }
} 
 
.choix2 ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 text-decoration:none;
 }

/* variante pour les boutons en bas de page */
 
.choix3 {
font-size: 11pt;
font-family:arial,sans-serif;
text-decoration:none; 
/* width:340px; */
margin-bottom:1em;
}

.choix3 ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
 
.choix3 li {
/* margin-left:2px; */
  margin-top:30px;
  margin-right:5px;
  margin-bottom:30px;
  margin-left:5px;
  float:left; /*pour IE*/
 }
.choix3 ul li a {
 display:block;
 float:left;   
 width:52px; /*78*/
 background-color:#909090;;   /* #006948 */
 color:white;
 text-decoration:none;
 text-align:center;
 padding:5px;
 border:2px solid;
 text-decoration:none;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
 
@media (min-width: 400px) {
.choix3 ul li a {
  width:228px;
  }
} 
.choix3 ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 text-decoration:none;
 } 

/* variante pour les boutons en bas de page */
 
.choix4 {
font-size: 11pt;
font-family:arial,sans-serif;
text-decoration:none; 
/* width:340px; */
margin-bottom:1em;
}

.choix4 ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
 
.choix4 li {
/* margin-left:2px; */
  margin-top:0px;
  margin-right:5px;
  margin-bottom:0px;
  margin-left:5px;
  float:left; /*pour IE*/
 }
.choix4 ul li a {
 display:block;
 float:left;   
 width:78px; 
 background-color:#006948;;   /* #006948 */
 color:white;
 text-decoration:none;
 text-align:center;
 padding:5px;
 border:2px solid;
 text-decoration:none;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#DCDCDC #696969 #696969 #DCDCDC;
 }
 
@media (min-width: 400px) {
.choix4 ul li a {
  width:80px;
  }
} 
.choix4 ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #DCDCDC #DCDCDC #696969;
 text-decoration:none;
 } 
 
 input.bouton_large {
	font-size: 16px;
    height:40px;
    width:200px;
}

ul.space_list li { margin-bottom: 6px; }