/*  --------    Feuille de style     -----------  */
/* A verifier avec: http://www.css-validator.org/ */
/* ---------------------------------------------- */

/* A voir: faire des variables en css: 
http://www.w3.org/TR/css-variables/ 
A voir: comment faire des opérations arithmétiques en css
http://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html
*/


:root{
    --bgcolor:#e5eff1; /* couleur du fond */
    --fgcolor:#66cccc; /* couleur pour le menu et les entetes */
    --total_width: 930px;
    --menu_width: 150px;
    --txt_width: 780px; /* total_width - menu_width */
}

html {
  background-image:url("images/pi.jpg");
}

/* Pour debug (positionnement)
 -----> Afficher les cadres autour des boites: */
/*div {
	border: solid;
	border-width: 2px;
}*/

/*:root{
    --main-color: #66cccc;
    --bg-color: #e5eff1
}*/
/* ordre des attribut pour a: important !
cf http://www.pompage.net/traduction/cssdezero-6 */
a:link { /* lien non visite */
	color: #0000ee; /* #696; (vert pale) */
	text-decoration: none; 
	background-color: transparent;
}
a:visited { /* lien visite */
	color: #551a8b; /* #699; (plus clair, et plus sur le bleu)*/ 
	text-decoration: none; 
	background-color: transparent;
}
a:hover { /* lorsqu'on passe la souris sur le lien */
	/*color: #c93; jaune casse */
	text-decoration: underline; 
	background-color: transparent;
}
a:active { /* lorsqu'on clique sur le lien */
	color: #551a8b;
	border: outset grey;
	text-decoration: none; 
	background-color: transparent;
}
ul {
	margin-top: 5px;
}

#entete {
	height: 75px;
	margin-bottom:-15px;
}
#welcomebox {
  float: left;
  width: 750px;
  text-shadow: -6px 6px 1px grey;
	/*vertical-align: middle;*/
	padding-top: 6px;
	height: 75px; /* Mettre la meme hauteur que pour entete */
}

#langues {
  margin-left: 750px;
  text-align: right;
  padding-top:5px;
  padding-right:15px;
}
#wrapper {
  width: 930px;
  margin-left: auto;
  margin-right: auto;
  background-color: #e5eff1
}
#menu {
	clear: both; /*Permet de ne pas conditionner le positionnement du menu en fonction de la position du dernier flottant */
  width: var(--menu_width);
  float: left;
  margin-top: 8px; /* meme margin top que h2 ? (qui est le style du titre bordereau de la page) */
  background-color: #66cccc;
  /*background-color: var(--main-color);*/
}

/*#degrade_page_cv{
  height: 530px;
  background-image:linear-gradient(to bottom, #66cccc, #e5eff1);
  background-image: url(images/degrade_verti_530px.png);
}*/
#degrade_page_accueil{
	min-height: 300px;
  /* height: 300px; */
  /*background-image: url(images/degrade_verti_300px.png);*/
  /* pour faire un degrade */
	background-image:-webkit-linear-gradient(top, #66cccc, #e5eff1); /* pour chrome >10 et safari >5.1 ) */
	background-image:-moz-linear-gradient(top, #66cccc, #e5eff1); /* Firefox >3.6 */
	background-image:-ms-linear-gradient(top, #66cccc, #e5eff1); /* IE >10 */
	background-image:-o-linear-gradient(top, #66cccc, #e5eff1); /* Opera >11.10 */
	background-image:linear-gradient(top, #66cccc, #e5eff1); /* defaut */
}
#texte {
  margin-left: 170px;
  margin-right: 20px;
  width: 740px;
}
#pied {
  clear: left;
  border-top-style: solid;
  border-top-color: #484848;
  margin-top: 50px;
}
h1{
  font-family: garamond, serif;
  text-align: center;
  background-color: #66cccc;
}
h2{
  margin-top: 20px;
	margin-bottom: 9px;
}
.texte {
  margin-left: 170px;
  margin-right: 20px;
  width: 740px;
}
.cmd {
	font-family: arial; 
	text-align: center;
}
.code {
     font-family: Courier, 'Courier New', sans-serif;
     font-size: 11px;
     color: black;
     background-color: red;
     border: red;
     border-style: solid;
     border-width: 1px;
     overflow: auto;
     margin-top: 1em;
     margin-bottom: 1em;
     margin-left: 10%;
     padding: 1em;
     width: 80%;
}
.smallmarg {
	margin-top: 5px;
	margin-bottom: 5px;
}

a.info{
	position:relative;
	z-index:1;
	color:#000;
	text-decoration:none
}
 
a.info:hover{
	z-index:2;
	background-color:#FFF
}
 
a.info span{
	display: none
}
 
a.info:hover span{
	display:block;
	position:absolute;
	top:1em; left:-13em; width:15em;
	border:1px solid #000;
	background-color:#FFF;
	color:#000;
	text-align: justify;
	/*font-weight:none;*/
	padding:5px;
}

/* quote style from : http://jenniferperrin.com/blog/big-beautiful-quotes-using-just-css/
                 et : http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/ */
blockquote {
	display: block;
	position:relative;
	right:10px; left:-40px; top: -30px;
	/*border:1px black solid;*/
	/*background-color:gray;
	font-size: 20px;
	color: #444444;*/
	padding: 5px 10px;
	width: 600px;
	text-align: center;
}

/* Quote Mark Styles */
blockquote:before, blockquote:after {
	color: #5a7c87;
	display: block;
	font-size: 500%;
	width: 70px;
}

/* Left Quote */
blockquote:before {
	content: open-quote;
	height: 0;
	margin-left: -0.55em;
	margin-bottom: 30px;
}

/* Right Quote */
blockquote:after {
	content: close-quote;
	height: 0px;
	margin-top: -65px;
	margin-left: 96%;
}

blockquote p {
	margin-top: -20px;
	margin-bottom: -20px;
}

blockquote cite {
	color: #999999;
	text-align: right;
	/*font-size: 14px;*/
	display: block;
	margin-top: 3px;
}

blockquote cite:before {
	content: "\2014 \2009";
}