#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
#HTTP_HEADER{Vary: Accept-Encoding}
[(#REM)
						 ACS
				 (Plugin Spip)
		http://acs.geomaticien.org

Copyright Daniel FAIVRE, 2007-2022
Copyleft: licence GPL - Cf. LICENCES.txt

	Ce squelette definit les styles de l'espace prive pour ACS

	Note: l'entete "Vary:" sert a repousser l'entete par
	defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
	genant en cas de "rotation du cookie de session" apres
	un changement d'IP (effet de clignotement).

	ATTENTION: il faut absolument le charset sinon Firefox croit que
	c'est du text/html !
	
]#CACHE{3600*100,cache-client}
#SET{claire,##ENV{couleur_claire,dfdfdf}}
#SET{foncee,##ENV{couleur_foncee,3874b0}}

[(#REM) On DOIT redéfinir la couleur du body pour overrider la couleur définie
dans la feuille de style du set, qui est chargée.
]body.acs {
	background: #ffffff;
}
[(#REM) override de la largeur "large" de SPIP 3 & 4
].acs #page div.largeur {
	width: 100%;
}

.acs .barre_onglet {
	margin-bottom: 0;
	padding-bottom: 0;
}

.acs table { margin: 0; padding: 0; border-collapse: collapse; border-spacing:0; border: 1px;}
.acs table caption, .acs table th,.acs table tr, .acs table td {padding:0; background:none;}
.acs table.centered {margin: 0 auto; text-align:center}
[(#REM) override des coloriages de lignes de tables
].acs tbody tr:nth-child(even) td, .acs tbody tr.even td, .acs tbody tr:nth-child(even) th, .acs tbody tr.even th {background-color:transparent;}

.acs img { margin: 0; padding: 0; border: none;}
.acs hr, .editeur_composant hr {height: 1px; margin:3px; border:0; background: #GET{claire};}

.alert{
	color: red;
}
.acs_dep_ok:after {
	content: url(#CHEMIN{images/coche_ok.jpg});
}
.alert_box {
	display: block;
	background: #efefff;
	border: 1px solid darkred;
	border-radius: 5px;
	box-shadow: 2px 2px 8px #dfdfdf;
	padding: 5px;
}
[(#REM) Mise en page en colonnes - ne PAS mettre margin/padding là-dedans ! ]
.acs_colonnes {
	display: block;
	padding: 0;
	margin: 0;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}
.acs_col1, .acs_col2, .acs_col3 {
	padding: 0;
	margin: 0;
}
.acs_col1, .acs_col3 {
	width: 25%;
}
.acs_col1 {
	float: #LANG_LEFT;
}
.acs_col2 {
	float: #LANG_LEFT;
}
.acs_col3 {
	float: #LANG_RIGHT;
}
/* contenu des colonnes */
.acs_col {
	padding: 10px;
}

.acs_box {
	position: relative;
	border: thin solid #GET{foncee};
	[(#MODELE{c_css_border-radius}{r=10px})]
	background: #fff;
	margin-top: 14px;
	width: 100%;
}

.acs_box_titre {
	background: #GET{foncee};
	padding-#LANG_LEFT: 40px;
	padding-#LANG_RIGHT: 4px;
	padding-top: 2px;
	padding-bottom: 2px;[
	(#MODELE{c_css_border-radius}{r=10px}{sauf=bottom})]
	color: #ffffff;
	font-family: verdana,arial,helvetica,sans;
	font-size: 12px;
	font-weight: bold;
}
.acs_box_titre td {
	vertical-align: middle;
}
.acs_box_titre2 {
	float:right;
}
.acs_box_titre a {
	font-weight: normal;
	color: #ffffff;
}

.acs_box_texte {
	padding: 8px;
	text-align: #LANG_LEFT;[
	(#MODELE{c_css_border-radius}{r=10px}{sauf=top})]
	color: #000000;
	overflow: auto;
}
.acs_box_pages .acs_box_texte {
	max-height: 600px;
	overflow: auto;
}
.acs_box_composants {
	width: 208px;
}
.acs_box_composants_hidden {
	position: absolute;
	display : none;
}

fieldset.apercu {
	margin: 0;
	margin-bottom: 5px;
	padding: 0;
	left: -1px;
	top:-1px;
	border: thin inset #GET{claire};
	[background-color: (#VAR{acsFondColor, #ffffff});]
	[background-image: url((#ACS_CHEMIN{fond/#VAR{acsFondImage}}));]
	background-repeat: repeat;
}

.apercu legend {
	margin-left: 10px;
	padding-left: 5px;
	padding-right: 5px;
	background: #fff;
	border: thin inset #GET{claire};
	[(#MODELE{c_css_border-radius}{r=8px})]
}

.forml {
	padding:0;
	padding-left:2px;
	position: relative;
	width: 100%;
}

.formc {
	padding: 0;
	line-height: 1em;
	background: #e4e4e4;
	border: 1px solid #GET{claire};
	font-size: 12px;
	font-family: Verdana,Arial,Sans,sans-serif;
	width: 100%;
}

.led {
	border: 1px solid #GET{foncee};
	width: 1.15em;
	height: 1.15em;
	cursor:pointer;
}

.icon {
	width: 1.27em;
	height: 1.27em;
	cursor:pointer;
}

.liste_pages tr {
	vertical-align: top;
}
.liste_pages td {
	text-align: justify;
}
.liste_pages_sep {
	height: 0.5em;
}

.spip_params {
	line-height: 1em;
	color: #3874b0;
	margin-bottom: 2px;
}

.centre {
	text-align: center;
}

.btc_0 {
	background: #f2fff2;
}
.btc_1 {
	background: #ffe;
}
.btc_2 {
	background: #fff8f8;
}
.btc_3 {
	background: #f2f8ff;
}
.btc_4 {
	background: #f8fff2;
}
.nompage {
	color: black;
}
.nompage:hover {
	color: blue;
}

.widgets {
	width: 200px;
	max-height : 400px;
	overflow: auto;
}
.widgets_filter_bar {
	display: none;
}
.widgets_filter_bar a {
	display: inline-block;
	border: 1px outset #GET{foncee};
	background: #GET{claire};
	text-align: center;
	width: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: 5px 5px 0 0;
}
.widgets_filter_bar a.survol {
	background: none;
	border: 1px inset #GET{foncee};
}
.widgets_filter_bar a img {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}

.widget, .widgy {
	text-align: center;
	color: #444;
	[(#MODELE{c_css_border-radius}{r=12px})]
}
.widget:hover, .widgy:hover {
	color: black;
}

a.widgy {
	padding-#LANG_LEFT: 5px;
	padding-#LANG_RIGHT: 15px;
	background: #e5f6e8;
	border: 1px outset #GET{foncee};
	white-space: nowrap;
}
a.widgy:hover {
	background: #b4e9b4;
	border: 1px inset #GET{foncee};
}
a.widgy_overriden {
	background: #ffe5b1;
}
a.widgy_overriden:hover {
	background: #fed991;
}
a.widgy_unused {
	background: #dfdfdf;
}
a.widgy_ghost {
	background: #ef8f8f;
	animation: blinkingAlert 2s infinite;
}
@keyframes blinkingAlert{
	0%		{ background-color: #f44;}
	25%	 { background-color: #fed;}
	50%	 { background-color: #fff;}
	75%	 { background-color: #fed;}
	100%	{ background-color: #f44;}
}
.acs .widgy_included {
	border: 0;
	background: none;
	vertical-align: top;
}
.widgy_included_label {
	text-align : right;
	vertical-align: top;
}
.acs caption.wcap {
	margin: 1px;
}
.acs caption.wcapv {
	text-align: left;
}
.acs caption.wcaph {
	text-align: center;
	border-top: thin dotted #GET{foncee};
	border-bottom: thin dotted #GET{claire};
}
.acs table.wcontainerh {
	border: 0;
	border-bottom: thin dotted #GET{foncee};
}
.acs .widgy img {
	vertical-align:middle;
}

.widget {
	font-weight: bold;
	font-size: 10px;
	cursor: pointer;
	height: 24px;
	width: 180px;
	margin: 0;
	line-height: 10px;
	background: url(#CHEMIN{images/composant.png}) no-repeat;
	z-index: 998;
}
.widget_move {
	cursor: move;
	z-index: 999;
}
.widget:hover {
	color: black;
	background: url(#CHEMIN{images/composant_hover.png}) no-repeat;
}
.widget_overriden {
	background: url(#CHEMIN{images/composant_overide.png}) no-repeat;
}
.widget_overriden:hover {
	background: url(#CHEMIN{images/composant_overide_hover.png}) no-repeat;
}
.widget_unused {
	background: url(#CHEMIN{images/composant_inactif.png}) no-repeat;
}
.widget_unused:hover {
	background: url(#CHEMIN{images/composant_inactif_hover.png}) no-repeat;
}
.widget img {
	vertical-align:middle;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	margin-right: 5px;
	cursor:move;
}
.widget_unused img {
	cursor:pointer;
}
.widget a, .widgy a {
	color: black;
}
.widget a:hover, .widgy a:hover {
	color: darkgreen;
}
.widget table {
	width: 100%;
	height: 100%;
}
.widget table tr {
	vertical-align: middle;
}
.widget div {
	overflow:hidden; text-align:center;
}
.widget div a {
	display: block;
}

.ctlWidget {
	width: 180px;
	height: 24px;
	text-align: center;
	border: 1px inset #GET{foncee};
	background: #f0f0f8;
	display: inline-block;
	vertical-align: middle;
}
.ctlWidget, .c_config .ctlWidget_droppable_active, .c_config .ctlWidget_droppable_over, .c_config .ctlWidget_droppable_drop {
	border-radius: 12px;
	-moz-outline-radius: 12px;
}
.ctlWidget_droppable_active {
	outline: thin dashed #dfdfdf;
}
.ctlWidget_droppable_over {
	outline: 3px dotted lightgreen;
}
.ctlWidget_droppable_drop {
	outline: 3px dotted orange;
}

.select_widget {
	position:absolute;
	width: 160px;
	height: 18px;
	margin-left:10px;
	margin-top:2px;
	left:0;
	right:0;
}

[(#REM) Coloration syntaxique acs-spip ]
.spip_source {
	overflow: auto;
	max-height: 600px;
	border: 1px inset #dfdfdf;
}

.col_MODELE {
	color: darkblue;
}
.col_BOUCLE, .col_FIN_BOUCLE, .col_B, .col_FIN_B {
	color: darkviolet;
}
.col_REM {
	color: grey;
}
.col_TRAD {
	color: brown;
}
.col_INCLURE {
	color: blue;
}
.col_VAR {
	color: #00228f;
}
.col_BALISE {
	color: #005d00;
}

[(#REM) Styles des pinceaux ACS. Les types autres que crayon permettent d'utiliser des controleurs spécifiques ]
.crayon-icones em.crayon-pinceau {
	position : relative;
	background: url(#CHEMIN{images/pinceau.png}) no-repeat;
	height: 20px;
	width: 20px;
	top: -10px;
	right: 10px;
	cursor: pointer;
	display: none;
}
.shift > .crayon-icones em.crayon-pinceau {
	top: -15px;
	#LANG_RIGHT: -15px;
}
.crayon-hover>.crayon-icones span,.crayon-hover>.crayon-icones em.crayon-pinceau {display: block !important;}

.crayon-changed em.crayon-pinceau {
	display: none;
}

.edit_composant {
	z-index: 9000;
	position: absolute;
	display: block;
	height: auto;
	width: auto;
}

.editeur_composant .acs_box_texte{
	padding: 0;
	background: #f4f4f4;
	border: thin outset;
	font-size: 10px;
	box-shadow: 2px 2px 5px #cfcfcf;
	min-height: 200px;
}
.editeur_composant .c_config {
	padding :8px;
	max-height:400px;
	min-width: 600px;
	overflow:auto;
}
.editeur_composant .select_widget {
	position:relative;
	width: 160px;
}
.editeur_composant .pinceau-boutons {
	position:relative;
	height: 3em;
	margin: 0 10px 10px;
}
div.acsPanel {
	display: none;
}
div.acsPanelOn {
	display: block;
}
a.acsTabOn {
	font-weight: bold;
}

.c_config table {
	width: auto;
	text-align: #LANG_RIGHT;
}

.c_config td {
	vertical-align: middle;
	text-align: #LANG_RIGHT;
}

ul.grclist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.grclist li{
	margin: 0;
}

[(#REM) Controles ]
span.ctrl {
	position: relative;
	text-align: #LANG_RIGHT;
	vertical-align: middle;
	display: inline-block;
	margin: 1px;
}
span.ctrl img {
	vertical-align: middle;
}
input.acsColorCtl {
	float: #LANG_RIGHT;
	cursor: pointer;
	border: 0;
	padding: 0;
	width: 15px;
}

img.bouton_edit_composant {
	background: #e6f6e6;
	border: 2px outset #88af88;
	height:24px;
	width: 24px;
	padding: 2px;[
	(#MODELE{c_css_border-radius}{r=4px})]
}
img.bouton_edit_composant:hover {
	background: #ffefaf;
}

.acsVarControleur {
	position: absolute;
	top: 0;
	left: 0;
	min-height: 34px;
	display: block;
	z-index: 9990;
	background: #efefdf;
	border : [(#GET{foncee})] 1px solid;
	vertical-align: middle;[
	(#MODELE{c_css_border-radius}{r=0})]
}
div.acsVarControleur div.crayon-boutons {
	bottom: 2px;
	right: 2px;
}

.acsVarColorBlock {
	float: right;
	border:thin inset #000;
	height:10px;
	width:10px;
	margin: 1px;
}
[(#REM) Position de l'image signalant un chargement en ajax 
].image_loading {
	position: absolute;
}

.onlinehelp {
	color: #GET{foncee};
	cursor: default;
}

.onlinehelp .onlinehelplayer {
	font-style: normal;
}

.onlinehelp .triangle {
	vertical-align: top;
	cursor:pointer;
}

.contexthelp {
	z-index: 9998;
	#LANG_RIGHT: 0;
	margin: 0;
	margin-left: 10px;
	margin-right: 10px;
	padding: 5px;
	background: #fffefd;
	border: thin outset #GET{foncee};[
	(#MODELE{c_css_border-radius}{r=5px}{sauf=top})]

	-webkit-box-shadow: 2px 2px 5px #dfdfdf;
	-moz-box-shadow: 2px 2px 5px #dfdfdf;
	box-shadow: 2px 2px 5px #dfdfdf;
}

[(#REM) liste déroulante des valeurs de variables similaires déjà définies pour d'autres instances du composant ]
.acs_var_vals {
	position: absolute;
	z-index: 9995;
	background-color: #fff;
	border: thin inset #GET{foncee};
	border-top: 0;
	overflow: auto;
	max-height: 200px;
	cursor: pointer;
	-webkit-box-shadow: 2px 2px 5px #dfdfdf;
	-moz-box-shadow: 2px 2px 5px #dfdfdf;
	box-shadow: 2px 2px 5px #dfdfdf;
}
.acs_var_vals ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.acs_var_vals li {
	padding-left: 5px;
	padding-right: 5px;
}
.acs_var_vals li:hover {
	background-color: #GET{claire};
}

[(#REM) plieurs ]
.acs_plieur {[
	background-image: url((#CHEMIN{images/deplierhaut.gif}));
	background-repeat: no-repeat;
	background-position: 0 center;]
	padding-#LANG_LEFT: 15px;
}
.acs_plieur.plon {[
	background-image: url((#CHEMIN{images/deplierbas.gif}));]
}

[(#REM) jQueryUI settings ]
.ui-tooltip {
	white-space: pre-wrap;
}