/* --------------------- */
/* Définitions des types */
/* --------------------- */

HTML {
	border: 0px;
}
BODY {
	background: #DDEEFF;
	color: #0066FF;
	font: 12px arial,helvetica,sans-serif;
	margin: 0px;
	padding: 0px;
}
BODY.frame {
	background: #FFFFFF;
	font: 12px arial,helvetica,sans-serif;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}
FORM {
	margin: 0px;
	padding: 0px;
}
IFRAME {
	border: 0px;
	margin: 0px;
	padding: 0px;
}
H1 {
	background: #3399FF;
	border-radius : 3px 3px 0px 0px;
	color: #FFFFFF;
	font: 16px verdana,arial,helvetica,sans-serif;
	height: 22px;
	line-height: 21px;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
H2 {
	font: bold 15px verdana,arial,helvetica,sans-serif;
	margin: 0px;
	padding: 0px;
}
H3 {
	border-bottom: 1px solid #99CCFF;
	font: bold 14px verdana,arial,helvetica,sans-serif;
	margin: 20px -10px 15px -10px;
	padding: 0px 0px 0px 5px;
}
H4 {
	font: bold 13px verdana,arial,helvetica,sans-serif;
	margin: 15px -10px 10px -10px;
	padding: 0px;
}
H4:before {
	content: url("../img/puce.gif") " ";
}
H5 {
	font: bold 13px arial,helvetica,sans-serif;
	margin: 5px 0px 10px 0px;
	padding: 0px;
}
H6 {
	font: 10px arial,helvetica,sans-serif;
	margin: 8px auto;
	padding: 0px;
	text-align: center;
}
P {
	margin: 5px 0px;
	padding: 0px;
}
A {
	color: #FF6600;
	text-decoration: none;
}
A:hover {
	color: #FF6600;
	text-decoration: underline;
}
A IMG {
	border: 0px;
}
A IMG:hover {
	opacity: 70%;
	filter: saturate(170%);
/*	border: 1px solid #FF6600;*/
}
A.mini {
	font: 10px arial,helvetica,sans-serif;
}
A.copyright {
	color: #FFFFFF;
	font: 12px arial,helvetica,sans-serif;
	line-height: 20px;
	text-decoration: none;
}
A.copyright:hover {
	color: #BBDDFF;
}
A.option {
	color: #0066FF;
	display: block;
	height: 20px;
	line-height: 20px;
	padding: 0px 10px 0px 5px;
}
A.option:hover {
	background: #DDEEFF;
	border-radius: 2px;
	text-decoration: none;
}
INPUT[type=button],
INPUT[type=submit] {
	background: #3399FF;
	border: 0px;
	border-radius: 2px;
	color: #FFFFFF;
	cursor: pointer;
	font: bold 13px verdana,arial,helvetica,sans-serif;
	height: 23px;
	margin: 20px 10px;                                                            /* margin: 20px 10px 20px 10px;*/
	padding-bottom: 1px;                                                          /* Centrage vertical à vérifier ou faire line-height+1 */
	width: 100px;
}
INPUT[type=button]:hover,
INPUT[type=submit]:hover {
	background: #FFCC00;
	color: #FF3300;
}
INPUT[type=text] {
	background: #DDEEFF;
	border: 1px solid #DDEEFF;
	border-radius: 2px;
	color: #0066FF;
	font: bold 12px arial,helvetica,sans-serif;
	height: 17px;
	margin: 0px;
	padding: 0px 4px;
}
INPUT[type=text]:hover {
	border: 1px solid #0066FF;
}
INPUT[type=text]:focus {
	background: #FFFFFF;
	border: 1px solid #0066FF;
}
INPUT[type=text].captcha {
	background: #3399FF;
	border: 0px;
	border-radius: 2px;
	color: #FFFFFF;
	cursor: default;
	font: bold 29px arial,helvetica,sans-serif;
	height: 20px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	vertical-align: top;
	width: 100px;
}
INPUT[type=text].captcha:hover {
	border: 0px;
	user-select: none;
}
INPUT[type=checkbox],
INPUT[type=radio] {
	display: none;
}
INPUT[type=checkbox]+label:before {
	background: #DDEEFF;
	border: 1px solid #DDEEFF;
	border-radius: 2px;
	content: '';
	cursor: pointer;
	display: inline-block;
	height: 11px;
	margin: 1px 5px 2px 0px;
	vertical-align: middle;
	width: 11px;
}
INPUT[type=checkbox]:checked+label:before {
	background-image: url("../img/croix.gif");
}
INPUT[type=radio]+label:before {
	background: #DDEEFF;
	border: 1px solid #DDEEFF;
	border-radius: 50%;
	content: '';
	cursor: pointer;
	display: inline-block;
	height: 11px;
	margin: 1px 5px 2px 0px;
	vertical-align: middle;
	width: 11px;
}
INPUT[type=radio]:checked+label:before {
	background: #0066FF;                                                          /* box-shadow: inset 0px 0px 0px 2px #F0F8FF;*/
	box-shadow: inset 0px 0px 0px 2px #DDEEFF;                                    /* A TESTER border: 1px solid #BBDDFF;*/
}
INPUT:hover+label:before {
	border: 1px solid #0066FF;
}
LABEL {
	cursor: pointer;
	line-height: 19px;
	margin-top: 0px;
	padding-top: 0px;
	margin-right: 15px;
}
LABEL:hover {
	font-weight: bold;
}
TABLE.fast {
	border: 0px;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}
TABLE TH, TABLE TD {
	padding: 0px;
}
TABLE.tableau {
	background: #DDEEFF;
	border-radius: 2px;
	border-spacing: 3px;
	margin: 0px auto;
	padding: 0px 0px 1px 0px;
}
TABLE.bord0 {
	border-spacing: 0px;
}
TABLE.bord5 {
	border-spacing: 5px;
}
TABLE.bord10 {
	border-spacing: 10px;
}
TH.tableau {
	background: #66AAFF;
	border-radius: 2px;
	color : #FFFFFF;
	font: bold 13px verdana,arial,helvetica,sans-serif;
	height: 20px;
line-height: 20px;                                                              /* Chrome, Opera, IE : utile ? ou 21px pour descendre de 1px */
	padding: 0px 10px;
}
TH.titre {
	height: 25px;
	vertical-align: top;
	padding: 0px;
}
TD.tableau {
	padding: 0px 10px 0px 5px;
}
TD.repere {
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
TD.vignette {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 190px;
}
TEXTAREA {
	background: #DDEEFF;
	border: 1px solid #DDEEFF;
	border-radius: 2px;
	color: #0066FF;
	font: bold 12px arial,helvetica,sans-serif;
	padding: 1px 4px;
	text-align: left;
}
TEXTAREA:hover {
	border: 1px solid #0066FF;
}
TEXTAREA:focus {
	background: #FFFFFF;
	border: 1px solid #0066FF;
}
SELECT {
	background: #DDEEFF;
	border: 1px solid #DDEEFF;
	border-radius: 2px;
	color: #0066FF;
	cursor: pointer;
	font: bold 12px arial,helvetica,sans-serif;
	height: 19px;
	margin: 0px;
	padding: 1px 0px;
}
SELECT:hover {
	border: 1px solid #0066FF;
}
SELECT:focus {
	background: #FFFFFF;
	border: 1px solid #0066FF;
}
OL {
	margin: 0px 10px 10px 30px;
	padding: 0px;
}
UL {
	margin: 0px 0px 10px 30px;
	padding: 0px;
}
UL.liste {
	margin: 0px 0px 0px 15px;
	padding: 0px;
}
LI {
	margin: 1px 0px;
	padding: 0px;
}

/* ----------------------- */
/* Définitions des classes */
/* ----------------------- */

/* -------------------- MENU -------------------- */
.barre {
	float: left;
	position: relative;
	padding: 1px 15px;
}
.ligne {
	background: #99CCFF;
	height: 1px;
	margin: 2px 0px;
	padding: 0px;
}
.menu {
	background: #FFFFFF;
	border-radius: 2px;
	box-shadow: 0px 1px 4px 0px #3399CC;
	clear: both;
	list-style-type: none;
	margin: 0px;
	padding: 1px 2px;
	position: relative;
	z-index: 10;
}
.menuOff {
	color: #FFFFFF;
	cursor: default;
	font: bold 14px verdana,arial,helvetica,sans-serif;
	height: 20px;
	line-height: 19px;
}
.menuOn {
	background: #FFDD00;
	border-radius: 1px;
	color: #FF3300;
	cursor: default;
	display: block;
	font: bold 14px verdana,arial,helvetica,sans-serif;
	float: left;
	height: 20px;
	line-height: 19px;
	padding: 1px 15px;
}

/* -------------------- MISE EN PAGE-------------------- */
.bloc {
	border-radius: 2px;
	box-shadow: 0px 0px 3px 0px #3399CC;
	background: #FFFFFF;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 1px 0px; /* Bug d'affichage ??? */
}
.marge5 {
	margin: 5px;
	padding: 0px;
}
.marge30 {
	margin: 30px;
	padding: 0px;
}
.page {
	margin: 0px auto;
	padding: 0px 15px;
	width: 985px;
}
.paragraphe {
	border-radius: 2px;
	background: #BBDDFF;
	height: 20px;
	margin: 30px -10px 20px -10px;
	padding: 0px 0px 0px 5px;
}

/* -------------------- ICONES -------------------- */
.bouton {
	padding: 2px;
	height: 16px;
	width: 16px;
}
.bouton:hover {
	background: #DDEEFF;
	border-radius: 2px;
	opacity: 100%;
	filter: saturate(100%);
}
.icone16 {
	height: 16px;
	width: 16px;
	padding: 0px 5px;
	vertical-align: middle;
}
.icone32 {
	height: 32px;
	width: 32px;
	padding: 0px 5px 0px 5px;
	vertical-align: middle;
}

/* -------------------- POSITION -------------------- */
.origine {
	position: absolute;
	left: 0px;
	top: 0px;
}
.milieu {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.centre {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.aucentre {
	margin-left: auto;
	margin-right: auto;
}
.gauche {float: left;}
.droite {float: right;}
.agauche {text-align: left;}
.adroite {text-align: right;}
.enbas {vertical-align: text-bottom;/*vertical-align: bottom;*/}
.enhaut {vertical-align: text-top;/*vertical-align: top;*/}
.t5	{padding-top: 5px;}
.t10 {padding-top: 10px;}
.b5	{padding-bottom: 5px;}
.b10 {padding-bottom: 10px;}

/* -------------------- COULEUR -------------------- */
.gras {font-weight: bold;}
.cyan {color: #0066FF;}
.bleu {color: #0000EE;}
.jaune {color: #FFEE00;}
.rouge {color: #EE0000;}
.vert {color: #00CC00;}
.noir {color: #000000;}

/* -------------------- CHAMP -------------------- */

/* Projet : .cellfixe */

.cellule {
	background: #FFFFFF;
	border: 1px solid #DDEEFF;
	border-radius: 2px;
	height: 19px;
}
.pointille {
	background: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-bottom: 1px dashed #0066FF;
}
.fast {
	background: #FFFFFF;
	border: 1px solid #99CCFF;
	border-radius: 2px;
	height: 21px;
	margin: 0px 0px 10px 0px;
	padding: 1px 0px 0px 0px;
}
.fastfixe {
	background: #FFFFFF;
	border: 1px solid #99CCFF;
	border-radius: 2px;
	height: 19px;
	line-height: 20px; /* Alignement vertical identique avec Firefox, Chrome, Opera, IE et Safari */
	font-weight: bold;
	margin: 0px 0px 10px 0px;
	padding: 0px 4px;
}
.grafcet {
	background: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-radius: 0px;
	height: 21px;
}
.grafcet:hover {
	border: 1px solid #CCCCCC;
}
.etape {
	border: 1px solid #000000;
	color: #EE0000;
}
.transition {
	color: #00CC00;
}

/* -------------------- ZONES -------------------- */
.bordure {
	border: 1px solid #DDEEFF;
}
.cache {
	display: none;
}
.cellicone {
	display: table-cell; /* Alignement vertical dans DIV */
	padding: 0px;
	vertical-align: middle;
}
.message {
	display: table-cell;
	vertical-align: middle;
	padding-left: 15px;
	padding-right: 5px;
}
.probleme {
	background: #DDEEFF;
	border-radius: 2px;
	display: table;
	font: bold 13px arial,helvetica,sans-serif;
	margin: 10px auto 15px auto;
	padding: 5px 10px;
}
.consigne {
	background: #FFFFFF;
	border: 1px solid #99CCFF;
	border-radius: 2px;
	display: table;
	margin: 15px auto 20px auto;
	padding: 3px 20px;
}
.definition {
	background: #DDEEFF;
	border-radius: 2px;
	display: table;
	font-weight: bold;
	margin: 10px 0px 10px 0px;
	padding: 5px 10px;
}
.encart {
	background: #DDEEFF;
	border-radius: 2px;
	display: table;
	margin: 20px auto 25px auto;
	padding: 5px 15px;
}
.ressource {
	border: 1px solid #99CCFF;
	border-radius: 2px;
	display: table;
	margin: 10px 0px 15px 0px;
	padding: 2px 15px 2px 10px;
}
.question {
	font-style: italic;
	margin: 5px 0px;
	padding: 0px;
}
.reponse {
/*	border: 1px dotted #99CCFF;*/ /* Pour débugage */
	padding: 5px 0px 5px 10px;
}

/* -------------------- TAG -------------------- */
.rss {                                                                          /* ??? */
	margin: 10px 20px 10px 10px;
	padding: 0px;
}
.tag {
	float: right;
	height: 15px;
	margin: 2px 0px 0px 3px;
	vertical-align: top;
	width: 80px;
}
.tag-menu {
	height: 12px;
	margin: 4px 10px;
	width: 22px;
}
.tag-pied {
	height: 12px;
	margin: 3px 0px 0px 0px;
	vertical-align: top;
	width: 22px;
}
.touche {
	background: #3399FF;
	border: 1px solid #3399FF;
	border-radius: 2px;
	color : #FFFFFF;
	font-weight: bold;
	padding: 0px 5px;
}

/* ---------------------------- */
/* Définitions des identifiants */
/* ---------------------------- */

#bandeau {
	background: #3399FF;
}
#barre-menu {
	background: #0066FF;
	height: 22px;
	box-shadow: 0px 1px 5px 0px #3399CC;
	margin: 0px 0px 20px 0px;
}
#entete {
	height: 50px;
}
#colonne {
	float: right;
	margin: 0px;
	padding: 0px;
	width: 170px;
}
#corps {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 800px;
}
#barre-pied {
	background: #0066FF;
	box-shadow: 0px 0px 5px 0px #3399CC;
	height: 20px;
	margin-top: 5px;
	padding-top: 1px;
}
#pied {
	background: #3399FF;
	margin: 0px;
	padding-top: 30px;
	padding-bottom: 30px;
}
#horloge {
	font: 30px arial,helvetica,sans-serif;
}

/* -------------------- IMPRIMANTE -------------------- */
@media print {
	HTML:before {
		color: #FF0000;
		font: 12px arial,helvetica,sans-serif;
		white-space: pre-wrap;
		content: "\A\A
___________________________________________________________________\A\A
DROIT D'AUTEUR  et  PROPRIETE INTELLECTUELLE\A
___________________________________________________________________\A\A\A
Le site Techno-Logique.com est sous licence Creative Commons 3.0 (BY-NC-ND) :\A\A\9
- Vous pouvez afficher et projeter l'oeuvre sans modification mais toute autre\A\9
reproduction ou diffusion est strictement interdite.\A\A\9
-  Vous devez attribuer l'oeuvre de la manière indiquée par l'auteur de l'oeuvre\A\9
ou le titulaire des droits (mais pas d'une manière qui suggérerait qu'ils vous\A\9
soutiennent ou approuvent votre utilisation de l'oeuvre).\A\A\9
- Vous n'avez pas le droit d'utiliser cette oeuvre à des fins commerciales.\A\A\9
- Si vous modifiez, transformez ou adaptez cette oeuvre, vous n'avez pas le\A\9
droit de distribuer ou mettre à disposition la création qui en résulte.\A\A
Le non respect de ces conditions pourra donner lieu à des poursuites.\A\A
___________________________________________________________________\A
\A9\A9  2012-2021 Techno-Logique.com (BY-NC-ND 3.0)";
/* La suite ne fonctionne pas avec Chrome et Opera :
		content: url("https://www.techno-logique.com/img/btn-cc.gif");
		position: fixed;
		top: 0px;
		left: 0px;*/
	}
	BODY {
		display: none;
	}
}