/*==============================================================================
FEUILLE DE STYLE ARACHNOSOFT.COM - THEME PAR DEFAUT

Version Initiale : 5.0
Version Actuelle : 7.0

Historique des Versions :
7.0
	- mode "taille automatique" : polices exprimées en pourcentage d'une taille
	  fixe de référence à appliquer au corps de la page
	- correction de l'inversion des classes horizontal-padding et vertical-padding
	- ajout des classes horizontal-margin et vertical-margin
	- ajout de padding horizontal par défaut dans la classe body
6.7.1
	- redéfinition des marges verticales appliquées par défaut aux titres de
		paragraphes, qui s'annulent lors de l'utilisation du DOCTYPE W3C ; la valeur
		par défaut étant de 1 em (l fois la hauteur du caractère M selon la police)
6.7
	- définition de la propriété position à "relative" dans la classe
		scrollable-container, afin de forcer IE à bien afficher les objets défilants
		lorsque le DOCTYPE W3C est utilisé sur la page
	- définition des classes auto-width, auto-height, half-width et half-weight,
		vertical-top/middle/bottom, horizontal/vertical-padding
	- définition de la classe top-icon-bar pour la barre d'icônes située en haut
	- définition de la classe menu-link afin de gérer les marges de ces liens
		ainsi que la classe menu-link-icon pour gérer les marges de leurs icônes	
	- définition d'un padding de 5 pixels par défaut sur la balise body
	- redéfinition des valeurs marges/padding pour les liens des menus latéraux
	- définition de marges/paddings supplémentaires sur frame-top et frame-bottom,
		ainsi que sur les blocs de citation et les paragraphes
	- alignement des listes à puces fixé à gauche par défaut
	- déplacement des couleurs des barres de défilement dans la classe html
6.6
	- ajustements pour améliorer le rendu en mode "standard" avec le DOCTYPE W3C
		* définition de marges nulles par défaut pour tous les éléments (classe *)
		* définition de marges automatiques pour les classes body et html		 
6.5.1
	- application du style paragraphe aux balises standard <blockquote> et <q>
6.5
	- création d'une classe/police "alternate" pour les liens hypertexte
	- suppr. de la police d'écriture sur les champs de formulaire texte & bouton
		(ils héritent ainsi de la police utilisée par la balise parente)
6.3
	- application des paramètres de la classe body à la classe html
	- ajout de height: 100% aux classes body & html, afin que les hauteurs des
		éléments contenus sur les pages s'appliquent en fonction de celle-ci
	- ajout d'unités "pt" aux propriétés de police et "px" aux autres propriétés
	- ajout de classes pour spécifier l'overflow
	- ajout de la classe frame-bottom
	- ajout de padding-top & padding-bottom à la classe menu-link-container
	- retrait de l'overflow auto de la classe body (spécifié manuellement par
		chaque page si cela est nécessaire) ; problématique avec Firefox
	- ajustement de la marge des frames du haut par rapport à toutes ces modifs 
5.6
	- ajout des classes strong et em
	- renommage de la classe full-length en full-size
	- correction de quelques bugs sur les noms et valeurs de propriétés border-*
5.5
	- ajout de styles pour les listes à puce
	- ajout de styles pour le forum	
	- spécification de marges pour les formulaires
	- ajout de la classe full-length pour les tableaux
	- ajout des classes menu-link-container
	- restriction de la classe input aux seuls boutons et champs texte
		(suppression des styles des boutons radio et cases à cocher)
==============================================================================*/

/*------------------------------------------------------------------------------
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 {
	background-image: url('background/texture.png');
	background-color: #404040;
	color: silver;
	height: 100%;
}

html {
	scrollbar-3dlight-color: #707070;
	scrollbar-track-color: #404040;
	scrollbar-darkshadow-color: #000000;
	scrollbar-shadow-color: #101010;
	scrollbar-face-color: #202020;
	scrollbar-highlight-color: #606060;
	scrollbar-arrow-color: #00FF00;
}

/*
 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.)
*/
body {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 9pt; /* taille de référence par défaut */
}

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, q, blockquote {
	font-family: Arial, Helvetica;
	font-size: 100%;
	color: silver;
	margin-top: 5px;
	margin-bottom: 5px;	
	margin-left: 5px;
	margin-right: 5px;	
}

h4 {
	font-family: Arial, Helvetica;
	font-size: 100%;
	color: #FFFF80;
	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: Arial, Helvetica;
	font-size: 100%;
	color: silver;
	list-style: url('lists/element.gif') circle;	
}

img {
	border-style: none;
}

table {
	border-style: none;
}

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

a:link {text-decoration: underline; color: #00FF00}
a:visited {text-decoration: underline; color: #00CD00}
a:active {text-decoration: underline; color: #00FFFF}
a:hover {text-decoration: underline; color: #00FFC0}

a.small:link {text-decoration: none; color: #FFFF00}
a.small:visited {text-decoration: none; color: #FFCC00}
a.small:active {text-decoration: none; color: #00FFFF}
a.small:hover {text-decoration: none; color: #FFFFC0}

a.alternate:link {text-decoration: none; color: #00FFFF}
a.alternate:visited {text-decoration: none; color: #00DFFF}
a.alternate:active {text-decoration: none; color: #FFFF00}
a.alternate:hover {text-decoration: none; color: #C0FFFF}

/*------------------------------------------------------------------------------
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: silver;
}

.highlight {
	color: #EAEAEA;
}

.important {
	color: #80FF80;
}

.warning {
	color: #FFCF00;
}

.critical {
	color: #FF6060;
}

.scrollable-container {
	position: relative;
	overflow: hidden;
}

.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;
}

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

.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: #404040;
}

.with-borders {
	border-width: 1px;
	border-style: solid;
	border-color: #202020;
}

.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;
}

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

.left-logo {
	background-image: url('background/left-logo.png');
	background-color: transparent;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: left center;
	height: 508px;
	width: 220px;
}

.right-logo {
	background-image: url('background/right-logo.png');
	background-color: transparent;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: right center;
	height: 508px;
	width: 224px;
}

.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;
}

/*------------------------------------------------------------------------------
STYLES APPLICABLES SUR LES BORDURES DE FRAMES, DE TABLEAUX, DE SECTIONS, ETC.
------------------------------------------------------------------------------*/

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

.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: 2px;
	border-style: solid;
	border-color: #404040;
}

select, option {
	font-family: Arial, Helvetica;
	font-size: 110%;
	background-color: #606060;
	color: #FFFF00;
	border-width: 1px;
	border-style: solid;
	border-color: #404040;
}

textarea {
	font-family: Arial, Helvetica;
	font-size: 110%;
	background-color: #606060;
	color: #FFFF00;
	border-width: 2px;
	border-style: solid;
	border-color: #404040;
}

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

.title {
	background: #404040;
	font-family: Comic Sans MS;
	font-size: 150%;
	font-weight: bold;
	color: #FF8080;
	text-align: center;
}

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

.section-header-highlight {
	background: #505050;
	font-family: Tahoma;
	font-size: 110%;
	font-weight: bold;
	color: #00FFC0;
	text-align: center;
	cursor: pointer;
}

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

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

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

.menu-header {
	background: url('buttons/header.png');
	background-position: center center;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica;
	font-size: 90%;
	font-weight: bold;
	color: silver;
	text-align: center;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
}

.menu-header-highlight {
	background: url('buttons/header.png');
	background-position: center center;
	background-repeat: repeat-x;
	font-family: Arial, Helvetica;
	font-size: 90%;
	font-weight: bold;
	color: white;
	text-align: center;
	cursor: pointer;
	padding-top: 2px;
	padding-bottom: 2px;
}

.menu-link-container {
	font-family: MS Sans Serif, Dialog;
	font-size: 90%;
	color: #FFFF00;
	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: #FFFFC0;
	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;		
}

/*------------------------------------------------------------------------------
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 D'AUTRES ELEMENTS PARTICULIERS
------------------------------------------------------------------------------*/

.top-icon-bar {
	width: 284px;
	margin-left: 7px;
	margin-right: 7px;
}