/*==============================================================================
FEUILLE DE STYLE ARACHNOSOFT.COM - THEME FLAT

Version Initiale : 10.0
Version Actuelle : 11.0.1

Historique des Versions :
11.0.1
	- ajout de la classe arrangement-icon
11.0
	- Adaptation à l'affichage mobile
		* nouvelle classe arrangements-home-thumbnail
10.9.5
	- ajout de display: block et margin: auto pour le centrage des iframe
10.8
	- ajout des classes pour Quantcast Choice
10.3.1
	- suppression de deux propriétés de top-logo-banner pour supporter la hauteur
	  des bannières Google AdSense Adaptable (max-height et height)
10.3
	- ajout des classes menu-header-current et menu-contents-current
10.2.3
	- ajustement de la couleur rouge de mise en valeur : plus foncée (#DA1515)
10.2.2
	- liens de menu importants
10.2
	- ajout de la classe table.no-borders
	- ajout de la classe section-contents-division
	- plus de séparation entre l'entête d'un menu et son contenu
	- classe (police) spécifique pour les liens de menu indépendants
	- police spécifique pour div.social-networks
	- couleur de fond différente pour les conteneurs de menus autres que sections	
10.0.2
	- ajout de la nouvelle image de fond
	- couleur de fond des pages et des menus transparente
	- plus de body/html étiré à 100% en hauteur
	- nouvelle couleur pour les boutons de menu principaux (menu-header-link)

/*------------------------------------------------------------------------------
STYLES APPLIQUES PAR DEFAUT SUR LES BALISES PRINCIPALES
------------------------------------------------------------------------------*/

/*
 Mise à zéro de toutes les marges par défaut pour tous les éléments de la page
*/
* {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

html, body {
	color: #0A0A0A;
}

html {
	background-color: transparent;
}

body {
	background-image: url('background/texture.png');
	background-color: #252525;
	background-attachment: fixed;
	background-repeat: repeat;
	background-position: left center;	
	/* background-size: 100% 100%; */
	/*
	 Padding défini séparément afin de pouvoir être annulé par la classe no-padding
	 pour toute page qui en a besoin (entêtes en mode "frames", etc.)
	*/
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 9pt; /* taille de référence par défaut */
}

/*
body.logos {
	background-image: url('background/left-logo.png'), url('background/right-logo.png'), url('background/texture.png');
	background-color: transparent, transparent, #404040;
	background-attachment: fixed, fixed, scroll;
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: left center, right center, 0%, 0%;
	width: 224px, 224px, 70px;
	height: 508px, 224px, 70px;
}

body.left-logo {
	background-image: url('background/left-logo.png'), url('background/texture.png');
	background-color: transparent, #404040;
	background-attachment: fixed, scroll;
	background-repeat: no-repeat, repeat;
	background-position: left center, 0%, 0%;
	width: 220px, 70px;
	height: 508px, 70px;
}

body.right-logo {
	background-image: url('background/right-logo.png'), url('background/texture.png');
	background-color: transparent, #404040;
	background-attachment: fixed, scroll;
	background-repeat: no-repeat, repeat;
	background-position: right center, 0%, 0%;
	width: 224px, 70px;
	height: 508px, 70px;
}
*/

body.tiny-font-size { font-size: 5pt; }
body.small-font-size { font-size: 7pt; }
body.medium-small-font-size {	font-size: 9pt; }
body.medium-large-font-size {	font-size: 11pt; }
body.large-font-size { font-size: 13pt; }
body.huge-font-size { font-size: 15pt; }

p, p.qc-cmp-purpose-description, q, blockquote, legend {
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 100%;
	color: #0A0A0A;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
}

h4 {
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 100%;
	color: #8F0080;
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 5px;
	margin-right: 5px;
}

ul {
	margin-left: 20px;
	text-align: left;
}

li {
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 100%;
	color: #0A0A0A;
	list-style: url('lists/element.gif') circle;	
}

img {
	border-style: none;
}

table {
	border-width: 1px;
	border-style: dashed;
	border-color: #252525;
	background: #E0E0E0;
}

table.no-borders {
	border-width: 0px;
	border-style: none;
	border-color: transparent;
	background: transparent;
}

/*------------------------------------------------------------------------------
LIENS HYPERTEXTE
------------------------------------------------------------------------------*/

div.main-page a:link {text-decoration: none; color: #00FF00; font-weight: bold;}
div.main-page a:visited {text-decoration: none; color: #00FF00; font-weight: bold;}
div.main-page a:active  {text-decoration: none; color: #00FF10; font-weight: bold;}
div.main-page a:hover  {text-decoration: none; color: #00FF80; font-weight: bold;}

div.section-contents a:link, div.sub-section-contents a:link {text-decoration: none; color: #002000; font-weight: bold;}
div.section-contents a:visited, div.sub-section-contents a:visited {text-decoration: none; color: #001500; font-weight: bold;}
div.section-contents a:active, div.sub-section-contents a:active {text-decoration: none; color: #003000; font-weight: bold;}
div.section-contents a:hover, div.sub-section-contents a:hover {text-decoration: none; color: #006000; font-weight: bold;}

a.menu:link {text-decoration: none; color: #F0FFF0; font-weight: normal;}
a.menu:visited {text-decoration: none; color: #F0FFF0; font-weight: normal;}
a.menu:active {text-decoration: none; color: #F0FFF0; font-weight: normal;}
a.menu:hover {text-decoration: none; color: #00FF80; font-weight: normal;}

a:link, a.alternate:link, div.sub-section-contents a.alternate:link, div.section-contents a.alternate:link, a.qc-cmp-alt-action:link {text-decoration: none; color: #9F1010; font-weight: normal;}
a:visited, a.alternate:visited, div.sub-section-contents a.alternate:visited, div.section-contents a.alternate:visited, a.qc-cmp-alt-action:visited {text-decoration: none; color: #9F1010; font-weight: normal;}
a:active, a.alternate:active, div.sub-section-contents a.alternate:active, div.section-contents a.alternate:active, a.qc-cmp-alt-action:active {text-decoration: none; color: #9F1010; font-weight: normal;}
a:hover, a.alternate:hover, div.sub-section-contents a.alternate:hover, div.section-contents a.alternate:hover, a.qc-cmp-alt-action:hover {text-decoration: none; color: #DA1515; font-weight: normal;}

div.menu-header-link a:link {text-decoration: none; color: #9F1010; font-weight: bold; font-family: Arial, Helvetica;}
div.menu-header-link a:visited {text-decoration: none; color: #9F1010; font-weight: bold; font-family: Arial, Helvetica;}
div.menu-header-link a:active {text-decoration: none; color: #9F1010; font-weight: bold; font-family: Arial, Helvetica;}
div.menu-header-link a:hover {text-decoration: none; color: red; font-weight: bold; font-family: Arial, Helvetica;}

div.menu-header-link-featured a:link {text-decoration: none; color: white; font-weight: bold; font-family: Arial, Helvetica;}
div.menu-header-link-featured a:visited {text-decoration: none; color: white; font-weight: bold; font-family: Arial, Helvetica;}
div.menu-header-link-featured a:active {text-decoration: none; color: white; font-weight: bold; font-family: Arial, Helvetica;}
div.menu-header-link-featured a:hover {text-decoration: none; color: aqua; font-weight: bold; font-family: Arial, Helvetica;}

div.menu-header-link a.small {font-size: 85%;}

/*------------------------------------------------------------------------------
STYLES STANDARDS OU ADDITIONNELS POUVANT ETRE APPLIQUES SUR LE TEXTE
------------------------------------------------------------------------------*/

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

.small {
	font-family: MS Sans Serif, Dialog;
	font-size: 90%;
	color: #0A0A0A;
}

.highlight {
	color: #DA1515;
}
div.bottom .highlight, div.menu-single-contents .highlight {
	color: #F0FFF0;
}

.important {
	color: #9F1010;
}
div.menu-single-contents .important {
	color: #80FF80;
}

.warning {
	color: #FF8000;
}

.critical {
	color: #FF6060;
}

.scrollable-container {
	position: relative;
	overflow: hidden;
	padding: 5px;
	margin: 5px;
	background: #DAFAEF;
    border: 1px dashed;
}

.scrollable {
	position: relative;
	overflow: visible;
	white-space: nowrap;
}

/*------------------------------------------------------------------------------
STYLES ADDITIONNELS POUVANT ETRE APPLIQUES SUR DIVERS ELEMENTS
------------------------------------------------------------------------------*/

.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }

.no-padding {
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.no-margin {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.no-wrap {
	white-space: nowrap;
}

.horizontal-padding {
	padding-left: 5px;
	padding-right: 5px;
}

.horizontal-center {
	margin-left: auto;
	margin-right: auto;
}

.vertical-padding {
	padding-top: 5px;
	padding-bottom: 5px;
}

.horizontal-margin {
	margin-left: 5px;
	margin-right: 5px;
}

.vertical-margin {
	margin-top: 5px;
	margin-bottom: 5px;
}

.vertical-top { vertical-align: top; }
.vertical-center { vertical-align: middle; }
.vertical-bottom { vertical-align: bottom; }

/*------------------------------------------------------------------------------
STYLES ADDITIONNELS POUVANT ETRE APPLIQUES SUR LES TABLEAUX OU LEURS CELLULES
------------------------------------------------------------------------------*/

.opaque {
	background-color: #F0F0F0;
}

.with-borders {
	border-width: 1px;
	border-style: dotted;
	border-color: #252525;
}

.full-size {
	width: 100%;
	height: 100%;
}

.full-width {
	width: 100%;
}

.full-height {
	height: 100%;
}

.half-width {
	width: 50%;
}

.half-height {
	height: 50%;
}

.auto-width {
	width: auto;
}

.auto-height {
	height: auto;
}

.lateral-menu {
	min-width: 144px;
}

/*------------------------------------------------------------------------------
STYLES APPLIQUES A CERTAINES PARTIES/FRAMES UNIQUEMENT (OU A LEUR CONTENU)
------------------------------------------------------------------------------*/

.frame-top {
	padding-top: 5px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px; 
	margin-bottom: 0px;
}

.frame-bottom {
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px; 
	margin-bottom: 0px;
}

iframe {
	border-style: none;
	display: block;
	margin: auto;	
}

iframe.arachno-soundfont-documentation {
	width: 98%;
	min-width: 1280px;
	min-height: 768px;
	margin: 10px;
}

.top-icon-bar {
	height: 16px;
	min-height: 16px;
	max-height: 16px;
	min-width: 284px;
	margin-left: auto;
	margin-right: auto;
	/*
	margin-left: 7px;
	margin-right: 7px;
	*/
	white-space: nowrap;
}

.top-icon-bar-scroller {
	height: 21px;
	min-height: 21px;
	max-height: 21px;
}

.top-logo-banner {
	/*height: 60px;*/
	min-height: 60px;
	/*max-height: 60px;*/
	text-align: center;
}

.root {
	margin-left: auto;
	margin-right: auto;
}

div.left-menu, div.right-menu {
	overflow-x: hidden;
	overflow-y: auto;
	background-color: transparent;
	top: 5px;
	bottom: 5px;
	position: fixed;
	display: block;
	z-index: 2;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
}

div.left-menu {
	left: 50%;
}
div.right-menu {
	right: 50%;
}
div.main-page {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0.5%;
	padding-right: 0.5%;
	/*background-color: #252525;*/
}

div.title, div.top, div.top-borderless, div.top-toolbar, div.main, div.main-page, div.bottom {
	display: block;
	position: relative;
}

div.main, div.top, div.bottom, div.top-toolbar,
div.title, div.section-header, div.section-header-highlight,
div.sub-section-header, div.sub-section-header-highlight,
div.section-contents, div.sub-section-contents,
td.qc-cmp-table-header, .qc-cmp-bold-messaging, div.qc-cmp-purpose-info {
}

div.main {
	/*background-color: #252525;*/
}

div.top, div.bottom, div.top-toolbar {
	background: #707070;
	border-top: 1px solid #606060;
	border-left: 1px solid #606060;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;	
}
div.title, h1.qc-cmp-sub-title { background: wheat; }
div.social-networks { background: #505050; }
div.social-networks p { color: silver; }

div.title, div.social-networks, h1.qc-cmp-sub-title {
	border-top: 1px solid #606060;
	border-left: 1px solid #606060;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;	
}

div.menu-contents, div.menu-single-contents {
	/*border-top: 1px solid #606060;*/
	border-left: 1px solid #606060;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;	
}
div.menu-contents {
	background: #707070;
}
div.menu-contents-current {
	background: #858595;
}
div.menu-single-contents, div.top-toolbar {
	background: #858585;
	padding: 5px;
}

div.section-header, div.section-header-highlight,
div.sub-section-header, div.sub-section-header-highlight, .qc-cmp-bold-messaging {
	margin-top: 2px;
	padding: 5px;
}

div.menu-header, div.menu-header-highlight, div.menu-header-link {
	border-top: 1px solid #606060;
	border-left: 1px solid #606060;
	border-right: 1px solid #404040;
	/*border-bottom: 1px solid #404040;*/
	margin-top: 5px;
}
div.menu-header, div.menu-header-highlight {
	padding: 5px;
}

div.section-header, div.section-header-highlight,
td.qc-cmp-table-header {
	/*background-color: #40453F;*/
	background-color: #FF8000;
	/*background-color: #C05F5F;*/
	border-top: 1px solid #606060;
	border-left: 1px solid #606060;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #808080;
}
div.sub-section-header, div.sub-section-header-highlight,
.qc-cmp-bold-messaging {
	/*background-color: #FF8000;*/
	background-color: #C05F5F;
	border-top: 1px solid #606060;
	border-left: 1px solid #606060;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #808080;	
}

div.section-contents, div.sub-section-contents {
	background-color: #707070;
	padding: 5px;
}

div.section-contents {
	border-top: none;
	border-left: 1px solid #606060;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;	
}
div.sub-section-contents, div.qc-cmp-purpose-info {	
	border-top: none;
	border-left: 1px solid #808080;
	border-right: 1px solid #606060;
	border-bottom: 1px solid #606060;		
}

div.top, div.sub-section-header, div.sub-section-header-highlight, div.sub-section-contents, .qc-cmp-bold-messaging, div.qc-cmp-purpose-info {

}

div.main {
	top: 0px;
	bottom: 0px;
	z-index: 1;
	margin-top: 5px;
	margin-bottom: 5px;
}

div.top {
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
}

div.top-toolbar {
	margin-top: 5px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	padding: 5px;
}

div.bottom {
	margin-top: 20px;
	margin-left: 5px;
	margin-right: 5px;
}

div.top-logo-banner, div.top-borderless {
	margin-bottom: 15px;
}

div.social-horizontal {
	font-size: 0px;
	margin-left: auto;
	margin-right: auto;
}

div.social-vertical {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

div.social-vertical div.subelement {
	display: block;
	margin-left: 5px;
	margin-right: 5px;
}

div.social-horizontal div.subelement {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}
 
 div.section-inner-text {
	margin-bottom: 10px;
 }
 
img.arrangement-icon {
	vertical-align: middle;
	width: 20px;
	height: 20px;
	/*margin: 4px;*/
}
 
/*------------------------------------------------------------------------------
STYLES APPLICABLES SUR LES BORDURES DE FRAMES, DE TABLEAUX, DE SECTIONS, ETC.
------------------------------------------------------------------------------*/

.left-bar {background: url('borders/left.png'); width: 8px; min-width: 8px;}
.right-bar {background: url('borders/right.png'); width: 8px; min-width: 8px;}
.top-bar {background: url('borders/top.png'); height: 8px; min-height: 8px;}
.bottom-bar {background: url('borders/bottom.png'); height: 8px; min-height: 8px;}
.bottom-left-corner {background: url('corners/bottom-left.png'); width: 8px; min-width: 8px; height: 8px; min-height: 8px;}
.bottom-right-corner {background: url('corners/bottom-right.png'); width: 8px; min-width: 8px; height: 8px; min-height: 8px;}
.top-left-corner {background: url('corners/top-left.png'); width: 8px; min-width: 8px; height: 8px; min-height: 8px;}
.top-right-corner {background: url('corners/top-right.png'); width: 8px; min-width: 8px; height: 8px; min-height: 8px;}

.small-left-bar {background: url('borders/small/left.png');}
.small-right-bar {background: url('borders/small/right.png');}
.small-top-bar {background: url('borders/small/top.png');}
.small-bottom-bar {background: url('borders/small/bottom.png');}
.small-bottom-left-corner {background: url('corners/small/bottom-left.png');}
.small-bottom-right-corner {background: url('corners/small/bottom-right.png');}
.small-top-left-corner {background: url('corners/small/top-left.png');}
.small-top-right-corner {background: url('corners/small/top-right.png');}

.tiny-left-bar {background: url('borders/tiny/left.png');}
.tiny-right-bar {background: url('borders/tiny/right.png');}
.tiny-top-bar {background: url('borders/tiny/top.png');}
.tiny-bottom-bar {background: url('borders/tiny/bottom.png');}
.tiny-bottom-left-corner {background: url('corners/tiny/bottom-left.png');}
.tiny-bottom-right-corner {background: url('corners/tiny/bottom-right.png');}
.tiny-top-left-corner {background: url('corners/tiny/top-left.png');}
.tiny-top-right-corner {background: url('corners/tiny/top-right.png');}

/*------------------------------------------------------------------------------
ELEMENTS DE FORMULAIRE
------------------------------------------------------------------------------*/

form {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

/* input[type=text] devrait être utilisé ici mais ce n'est pas géré par IE */

input.text, input.button {
	background-color: #606060;
	color: #FFFF00;
	border-width: 1px;
	border-style: solid;
	border-color: #404040;
	padding: 2px;
}

select, option {
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 110%;
	background-color: #606060;
	color: #FFFF00;
	border-width: 1px;
	border-style: solid;
	border-color: #404040;
}

textarea {
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 110%;
	background-color: #606060;
	color: #FFFF00;
	border-width: 1px;
	border-style: solid;
	border-color: #404040;
}

fieldset {
	border-style: none;
}

/*------------------------------------------------------------------------------
STYLES RELATIFS AUX SECTIONS
------------------------------------------------------------------------------*/

.title, h1.qc-cmp-sub-title {
	font-family: Trebuchet MS, Arial, sans-serif;
	font-size: 200%;
	font-weight: bold;
	color: black;
	text-align: center;
	padding: 5px;
}

.section-header {
	background: #404040;
	font-family: Tahoma;
	font-size: 110%;
	font-weight: bold;
	color: white;
	text-align: left;
	cursor: pointer;
}

.section-header-highlight {
	background: #505050;
	font-family: Tahoma;
	font-size: 110%;
	font-weight: bold;
	color: #FFFAF0; /* floralwhite */
	text-align: left;
	cursor: pointer;
}

.sub-section-header {
	background: #404040;
	font-family: Arial;
	font-size: 100%;
	font-weight: bold;
	color: #F5F5F5; /* whitesmoke */
	text-align: left;
	cursor: pointer;
}

.sub-section-header-highlight {
	background: #505050;
	font-family: Arial;
	font-size: 100%;
	font-weight: bold;
	color: #F5FFFA; /* mintcream */
	text-align: left;
	cursor: pointer;
}

div.title,
div.section-header, div.section-header-highlight,
div.sub-section-header, div.sub-section-header-highlight,
div.section-contents, div.sub-section-contents,
td.qc-cmp-table-header, .qc-cmp-bold-messaging {
	margin-left: 2px;
	margin-right: 2px;
}

div.section-contents {
	/*background-color: #C0C0C0;*/
	background-color: #D0D0D0;
}

div.sub-section-contents, div.qc-cmp-purpose-info {
	/*background-color: #CACACA;*/
	background-color: #F0F0F0;
	/*background-color: white;*/
}

div.section-contents-division {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	
}

div.title {
	margin-bottom: 10px;
}


/*------------------------------------------------------------------------------
STYLES RELATIFS AUX MENUS
------------------------------------------------------------------------------*/

.menu-header {
	background-color: #2FD0AA;
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 90%;
	font-weight: bold;
	color: #F5FFFA; /* mintcream */
	text-align: center;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
}

.menu-header-link {
	background-color: #DADADA;
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 115%;
	font-weight: bold;
	color: #F5FFFA; /* mintcream */
	text-align: center;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
}

.menu-header-link-featured {
	background-color: #2F80AF;
	color: silver;
}

.menu-header-highlight {
	background-color: #909090;
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 90%;
	font-weight: bold;
	color: white;
	text-align: center;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
}

.menu-header-current {
	background-color: #2F80AF; /*#C05F5F;*/
}

.menu-link-container {
	font-family: MS Sans Serif, Dialog;
	font-size: 90%;
	color: #F0FFF0;
	cursor: pointer;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 2px;
	padding-left: 4px;
	padding-right: 0px;
	padding-bottom: 2px;
}

.menu-link-container-highlight {
	font-family: MS Sans Serif, Dialog;
	font-size: 90%;
	color: #00FF80;
	cursor: pointer;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;	
	margin-bottom: 0px;	
	padding-top: 2px;	
	padding-left: 4px;
	padding-right: 0px;	
	padding-bottom: 2px;	
}

.menu-link {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;	
	margin-bottom: 0px;
	padding-top: 2px;
	padding-left: 4px;
	padding-right: 0px;	
	padding-bottom: 2px;		
}

.menu-link-icon {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;	
	margin-bottom: 0px;
	padding-top: 2px;
	padding-left: 2px;
	padding-right: 0px;	
	padding-bottom: 2px;
	vertical-align: top;
}

ul.top-toolbar li, ul.menu-header, ul.menu-container, li.menu-link-container, li.menu-link-container-highlight, li.menu-link {
	list-style: none none;
}

li.menu-link-container, li.menu-link-container-highlight, li.menu-link {
	margin-left: 5px;
	margin-right: 5px;
}

ul.top-toolbar {
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

ul.menu-container {
	padding-left: 4px;
	margin-left: 4px;
}

ul.menu-header {
	background: none;
	font-weight: normal;
	font-size: 100%;
	text-align: left;
	cursor: default;
	margin-left: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
}

div.menu-header, div.menu-header-highlight {
	background-position: center top;
}

div.menu-header-link {
	margin-top: 10px;
}

div.menu-header-link-top {
	margin-top: 5px;
	margin-bottom: 10px;
}

div.menu-header-link  img {
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 5px;
}

img.arrangements-home-thumbnail {
	width: 75%;
}

/*------------------------------------------------------------------------------
STYLES RELATIFS AU FORUM
------------------------------------------------------------------------------*/

.quote {
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	border: thin;
	border-width: 1px;
	border-color: black;
	background-color: gray;
	font-style: italic;
	font-size: 100%;
	color: black;
}

.code {
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	border: thin;
	border-width: 1px;
	border-color: black;
	background-color: silver;
	font-family: Courier;
	font-size: 90%;
	color: black;
}

/*-----------------------------------------------------------------------------
STYLES RELATIFS A QUANTCAST CHOICE
-----------------------------------------------------------------------------*/

.qc-cmp-button {
	background-color: #606060 !important;

}
.qc-cmp-button:hover {
	background-color: transparent !important;
	border-color: #606060 !important;
}
.qc-cmp-alt-action,
.qc-cmp-link {
	color: #606060 !important;
}
.qc-cmp-button {
	color: #00FF00 !important;
}
.qc-cmp-button.qc-cmp-secondary-button {
	color: #FFFF00 !important;
}
.qc-cmp-button.qc-cmp-button.qc-cmp-secondary-button:hover {
	color:#ffffff !important;
}
.qc-cmp-button.qc-cmp-secondary-button {
	border-color: #606060 !important;
	background-color: transparent !important;
}
.qc-cmp-button.qc-cmp-secondary-button:hover {
	background-color: #606060 !important;
}
.qc-cmp-ui,
.qc-cmp-ui .qc-cmp-main-messaging,
.qc-cmp-ui .qc-cmp-messaging,
.qc-cmp-ui .qc-cmp-beta-messaging,
.qc-cmp-ui .qc-cmp-title,
/*.qc-cmp-ui .qc-cmp-sub-title,*/
.qc-cmp-ui .qc-cmp-purpose-info,
.qc-cmp-ui .qc-cmp-table,
.qc-cmp-ui .qc-cmp-table-header,
.qc-cmp-ui .qc-cmp-vendor-list,
.qc-cmp-ui .qc-cmp-vendor-list-title {
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 100%;
	color: #FFFFFF !important;
}
.qc-cmp-ui a,
.qc-cmp-ui .qc-cmp-alt-action {
	color: #80FF80 !important;
}
.qc-cmp-ui {
	background-color: #707070 !important;
}
.qc-cmp-small-toggle.qc-cmp-toggle-on,
.qc-cmp-toggle.qc-cmp-toggle-on {
	background-color: #00C000 !important;
	border-color: #00C000 !important;
}

.qc-cmp-small-toggle.qc-cmp-toggle-off,
.qc-cmp-toggle.qc-cmp-toggle-off {
	background-color: #808080 !important;
	border-color: #808080 !important;
}

a.qc-cmp-persistent-link {
	font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
	font-size: 100%;
	color: #0A0A0A;
}

h4.qc-cmp-bold-messaging {
	font-style: normal;
    font-family: Arial;
    font-size: 100%;
    font-weight: bold;
    color: #F5FFFA;
    text-align: left;	
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 5px;
	margin-right: 0px;
}

p.qc-cmp-purpose-description {
	margin: 7px;
}

td.qc-cmp-table-header {
	padding-left: 5px;
	padding-right: 5px;
}

div.qc-cmp-scrolling-section {
	border-top: 0px;
	border-bottom: 0px;
}

.qc-cmp-purpose-actions {
	margin-top: 25px;
	margin-right: 5px;
}

p.qc-cmp-toggle-status {
	color: #0A0A0A;
}

div.qc-cmp-purpose-info {
	min-height: 100px;
}

section.qc-cmp-vendor-info-section {
    background-color: silver;
    margin-left: 5px;
    padding-left: 2px;
}

#qcCmpVendorList {
	background-color: #404040;
}

#qcCmpNonIab {
	background-color: #404040;
}

/*------------
STYLES MOBILE
------------*/

@media only screen and (max-width:1024px) {
	body {
		font-size: 2em;
	}

	div.root {
		width: 100% !important; /* !important pour surcharger la taille mise dans le DOM par display.php */
	}

	div.main-page {
		display: grid;
		grid-template-columns: 2fr;
		width: 100% !important; /* !important pour surcharger la taille mise dans le DOM par display.php */
		left: 0 !important; /* !important pour surcharger la taille mise dans le DOM par display.php */
		right: 0 !important; /* !important pour surcharger la taille mise dans le DOM par display.php */
	}
	
	/* Menus */
	div.left-menu, div.right-menu {
		height: 100%;
		width: 100% !important; /* !important pour surcharger la taille mise dans le DOM par display.php */
		position: fixed;
		top: 0;
		background-color: #252525;
		font-size: 2em;
	}
	
	div.left-menu {
		margin-left: 0px !important; /* !important pour surcharger la taille mise dans le DOM par display.php */
		left: -100%;
		transition: left 0.5s ease;
	}
	div.right-menu {
		margin-right: 0px !important; /* !important pour surcharger la taille mise dans le DOM par display.php */
		right: -100%;
		transition: right 0.5s ease;
	}

	div.left-menu ul, div.right-menu ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	/* Activation des menus */
	div.left-menu.active {
		left: 0;
	}
	div.right-menu.active {
		right: 0;
	}

	/* Boutons de menu */
	.open-menu-button, .close-menu-button {
		position: fixed;
		top: 0;
		font-size: 2em;
		z-index: 3;
		visibility: hidden;
	}
	
	/* Activation des boutons */
	.open-menu-button.active, .close-menu-button.active {
		visibility: visible;
	}

	#open-menu-button-left, #close-menu-button-right {
		left: 0;
	}
	
	#open-menu-button-right, #close-menu-button-left {
		right: 0;
	}

	/* Icônes des boutons */
	.open-menu-button-icon span, .close-menu-button-icon {
		display: block;
		width: 2em;
		margin: 0.5em;
	}
	.open-menu-button-icon span {
		height: 0.5em;
		background-color: white;
	}
	.close-menu-button-icon {
		height: 1.5em;
		color: white;
		border-radius: 1em;
		background-color: #404040;
		font-weight: bold;
		font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif;
		text-align: center;
	}
	
	/* Champs de formulaire */
	input, form {
		width: 100% !important;
		display: flex !important;
	}
	
	div.social-vertical div.subelement, #ArrangementWatch iframe {
		width: 100% !important;
	}
	
	.mobile-highlight, input {
		font-size: 2em;
	}
	
	input[type=radio] {
		height: 1em;
	}
	
	p, p.qc-cmp-purpose-description, q, blockquote, legend {
		font-size: 1.5em;
	}
}