/* ******************************************************************************************

Feuille de style du site web n°3 de jjcortes.com (Gironde - France)

Version 1.0 du 10 novembre 2005  :	Version initiale
Version 1.1 du 14 novembre 2005  :	Largeur fixe et centrée sur la fenêtre
Version 1.2 du 16 novembre 2005  :	Rajout des ombrages et des bordures de page.
									Modification de la décoration du sous-menu Mac.
Version 1.3 du 1er décembre 2005 :	Dégradé dans les menus et le pied de page.
									Nouveau logo du site.
Version 1.4 du 2 décembre 2005   :	Nouveaux cadres de modules.
Version 1.5 du 17 décembre 2005  :	Modifications dans les marges latérales des modules.

Version 2.0 du 6 juillet 2006    :	Nouveau look. Largeur portée à 950 pixels.
									Mise en page sur trois colonnes.
									Simplification du code XHTML.
									Compatible avec IE6 Windows.
								  
Version 3.0 du 31 janvier 2007   :	Recherche d'un nouveau look.	
Version 3.1 du 4 février 2007    :	Correction d'un bug sur la page des liens web.
									Retouches mineures.
Version 3.2 du 10 février 2007   :	Mise en place du nouveau look.
Version 3.3 du 14 février 2007   :	Retouches pour rendre le site compatible avec
									IE6 Windows (toujours le même qui se fait remarquer...)
Version 3.4 du 16 février 2007   :	Pied de page moins large, 740px au lieu de 790px.								   
Version 3.5 du 17 février 2007   :	Retouches pour rendre le site compatible avec
									IE6 Windows (pour ne pas changer...)
Version 3.6 du 19 février 2007   :	Fenêtre redimensionnable, avec centrage du contenu
									de la page, le menu restant fixe.
									Nouveau fond bleu ciel.
									Menu placé plus haut (70px au lieu de 160px).
									Cadres en relief et ombrés (sauf pour IE6 Windows)
Version 3.7 du 24 février 2007   :	Nouveaux titres de pages.
									Ajout de la classe titre et modification de la classe texte.
								   
Version 4.0 du 28 février 2007   :	Nouveau look plus professionnel et plus joli : Lis.
									Centrage du contenu. Menu vertical fixe.
									Fond décoré. Réécriture de la mise en page des différents
									blocs afin de tout remettre à plat et supprimer les bugs
									avec les versions 6 et 7 d'Internet Explorer.
									Enlever des pages tout élément décoratif, pour le renvoyer
									dans la ou les feuilles de style. Bref, il y a du boulot !
									(Quelques heures plus tard...)
									Comme j'ai réussi, mon site va pouvoir avoir autant de thèmes
									qu'il me plaît !
Version 4.1 du 15 mars 2007      : 	Modifications du nom de certains modules afin de faciliter
									la création des différents thèmes.

Version 5.0 du 16 septembre 2007 :	Nouveau look : BinaryBlue.								   

(C) 2005 - 2007 Jean-Jacques Cortes - www.jjcortes.com - jjcortes@wanadoo.fr

****************************************************************************************** */


/* ******************************************************************************************
 
Thème n°6 : BinaryBlue, (C) 16 et 17 septembre 2007 par Jean-Jacques Cortes
 
****************************************************************************************** */


/* ************************** */
/* ***** Les conteneurs ***** */
/* ************************** */

body {
	margin : 0px;
	padding : 0px;
	background: #002878 url("images/fond.jpg") left repeat fixed;
}

div#conteneur {
	width : 100%;
	padding : 0px;
	margin: 0px;
	color: #000000;
}

div#conteneur_principal {
	width : 100%;
	padding : 0px;
	margin : 0px;
}

div#conteneur_titre {
	position : fixed;
	width : 100%;
	top : 0px;
	height : 80px;
	padding : 0px;
	z-index : 255;
	background: #002878 url('titres/logo_site.jpg') left top no-repeat;
}

div#conteneur_titre_uk {
	position : fixed;
	width : 100%;
	height : 80px;
	padding : 0px;
	z-index : 255;
	background: #002878 url('titles/website_logo.jpg') left top no-repeat;
}

div#conteneur_menu {
	position : fixed;
	top : 162px;
	width :180px;
	padding : 0px;
	margin : 0px 0px 0px 10px;
	z-index : 255;
}

div#conteneur_texte {
	float : left;
	width : 100%;
	padding : 8em 0px 0px 0px;
}

div.conteneur_texte_2 {
	float : left;
	width : 60%;
	padding : 0px;
	margin-left : 16%;
}

div.conteneur_texte_3 {
	float : left;
	width : 80%;
	padding : 0;
	margin-left : 20%;
}

div.conteneur_photo_jj {
	float : left;
	width : 24%;
	height : 25em;
	padding : 0px;
}

div.navigation {
	float : left;
	width : 100%;
	margin : 0px 0px 10px 0px;
}

div#conteneur_copyright {
	float : left;
	width : 100%;
	margin : 0px 0px 0px 0px;
}

/* ***************************************** */
/* ***** Menu pricipal (menu vertical) ***** */
/* ***************************************** */

ul#menu {
	display: block;
	text-align: center;
	padding-left: 0px;
	margin-top: 0px;
	margin-left: 0px;
	width: 160px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight: normal;
	font-size: 0.8em;
	line-height: 1.0em;
	list-style-type : none;
}

#menu li {
	display: block;
	text-align: left;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
}

#menu .entree {
	border-left : 1px solid #002878;
	border-right : 1px solid #002878;
	border-bottom : 1px solid #002878;
	background : #002878;
}


#menu .drapeau {
	border-left : 1px solid #002878;
	border-right : 1px solid #002878;
	border-bottom : 1px solid #002878;
	background : #002878;
}


#menu a {
	display: block;
	padding-left: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
	color: #f1fa07;
	text-decoration: none;
}

a {
	color : #f1fa07;
}


#menu a:hover {
	display: block;
	color: #002878;
	background: #d7dcef;
}

#menu #actif {
	display: block;
	padding-left: 5px;
	padding-right: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #f89c0c;
	background : #002878;
	font-weight : bold;
	text-decoration: none;
	border-right : 1px solid #002878;
	border-bottom : 1px solid #002878;
}

a:hover {
	color : #002878;
	background : #f1fa07;
	text-decoration: none;
}

a img {
	border-width : 0px;
	border-style : none;
}

a .navig {
	color : #ffd63e;
}

img { 
	vertical-align: bottom;
	margin : 0;
}  

p {
	margin : 0;
}

.touche {
	color: #f1fa07;
	font-weight : bold;
	text-align: center;
	text-decoration: underline;
}

.touche:hover {
	color : #002878;
	background : #d7dcef;
	font-weight : bold;
	text-align: center;
	text-decoration: underline;
}

/* ************************************ */
/* ***** En-têtes des paragraphes ***** */
/* ************************************ */

h1 {
	width : 100%;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight: bold;
	font-size: 1.6em;
	visibility : hidden;
}

h2 {
	width : 95%;
	padding-left : 5%;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight: bold;
	font-size: 1.4em;
	visibility : hidden;
}

h3 {
	float : left;
	width : 88%;
	margin-left : 12%;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight : bold;
	font-style : italic;
	font-size: 1.4em;
	line-height : 1.1em;
	text-align : justify;
	color : #f89c0c;
	border-bottom : 1px solid #f89c0c;
}

.titre_h3 {
	float : left;
	width : 88%;
	margin-left : 0%;
	margin-bottom : 10px;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight : bold;
	font-style : italic;
	font-size: 1.2em;
	line-height : 1.1em;
	text-align : left;
	color : #f89c0c;
}

/* ****************************** */
/* ****** Titres principaux ***** */
/* ****************************** */

.titre_conception {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/conception.png') center top no-repeat;
}

.titre_conception_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/conception.png') center top no-repeat;
}

.titre_coordonnees {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/coordonnees.png') center top no-repeat;
}

.titre_coordonnees_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background: url('titles/coordinates.png') center top no-repeat;
}

.titre_creation {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/creation.png') center top no-repeat;
}

.titre_creation_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/creation.png') center top no-repeat;
}

.titre_emulateurs_mac {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/emulateurs_mac.png') center top no-repeat;
}

.titre_emulateurs_mac_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/mac_emulators.png') center top no-repeat;
}

.titre_formation {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/formation.png') center top no-repeat;
}

.titre_formation_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/formation.png') center top no-repeat;
}

.titre_infographie {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/infographie.png') center top no-repeat;
}

.titre_infographie_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/publishing.png') center top no-repeat;
}

.titre_jeux_mac {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/jeux_mac.png') center top no-repeat;
}

.titre_jeux_mac_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/mac_games.png') center top no-repeat;
}

.titre_liens_web {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/liens.png') center top no-repeat;
}

.titre_liens_web_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/links.png') center top no-repeat;
}

.titre_maintenance_ordi {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/maintenance_ordi.png') center top no-repeat;
}

.titre_maintenance_ordi_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/computer_maintenance.png') center top no-repeat;
}

.titre_maintenance_web {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/maintenance_web.png') center top no-repeat;
}

.titre_maintenance_web_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/web_maintenance.png') center top no-repeat;
}

.titre_navigateurs {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/navigateurs.png') center top no-repeat;
}

.titre_navigateurs_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/web_browser.png') center top no-repeat;
}

.titre_nos_services {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/services.png') center top no-repeat;
}

.titre_nos_services_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/services.png') center top no-repeat;
}

.titre_sites_web {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/sites_web.png') center top no-repeat;
}

.titre_sites_web_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/websites.png') center top no-repeat;
}

.titre_utilitaires_mac {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/utilitaires_mac.png') center top no-repeat;
}

.titre_utilitaires_mac_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/mac_utilities.png') center top no-repeat;
}


/* ******************************* */
/* ****** Titres secondaires ***** */
/* ******************************* */

.titre_autres_services {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/autres_services.png') center top no-repeat;
}

.titre_autres_services_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/other_services.png') center top no-repeat;
}

.titre_liens_amis {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/liens_amis.png') center top no-repeat;
}

.titre_liens_amis_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/friends_links.png') center top no-repeat;
}

.titre_liens_pros {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/liens_pros.png') center top no-repeat;
}

.titre_liens_pros_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/pro_links.png') center top no-repeat;
}

.titre_outils {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/outils.png') center top no-repeat;
}

.titre_outils_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/tools.png') center top no-repeat;
}

.titre_techniques {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titres/techniques.png') center top no-repeat;
}

.titre_techniques_uk {
	float : left;
	width : 88%;
	margin-left : 12%;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/technics.png') center top no-repeat;
}


/* ****************************** */
/* ***** Cadres des modules ***** */
/* ****************************** */

.cadre_icone {
	float : left;
	width : 20%;
	text-align : left;
}

.bloc_cadre_icone {
	float : left;
	width : 10%;
	margin-top : -10px;
	margin-bottom : 20px;
	padding : 0px 0px 10px 10%;
	text-align : left;
}

.cadre_drapeaux {
	float : left;
	width : 10%;
	text-align : center;
}

.bloc_cadre_drapeaux {
	float : left;
	width : 10%;
	margin-bottom : 20px;
	padding : 0px 0px 10px 0px;
}

.cadre_logo {
	float : left;
	width : 10%;
	text-align : center;
}

.bloc_cadre_logo {
	float : left;
	width : 20%;
	margin-bottom : 20px;
	padding : 0px 0px 10px 0px;
}

.cadre_menu {
	float : left;
	width : 100%;
	margin-left : 0px;
	padding : 30px 0px 0px 0px;
}

.bloc_cadre_menu {
	float : left;
	width : 100%;
	margin-bottom : 20px;
	padding : 0px 0px 20px 0px;
}

.cadre_photo_jj {
	float : left;
	width : 180px;
	margin-left : 0px;
	padding : 30px 0px 0px 20px;
	text-align : center;
}

.bloc_cadre_photo_jj {
	float : left;
	width : 180px;
	margin-left : 0px;
	margin-bottom : 10px;
	padding : 0px 10px 30px 15px;
}

.cadre_texte_3 {
	float : left;
	width : 50%;
	text-align : left;
}

.bloc_cadre_texte_3 {
	float : left;
	width : 65%;
	margin-top : -10px;
	margin-bottom : 20px;
	padding : 0px 0px 10px 0px;
	text-align : left;
}

.cadre_texte_2 {
	float : left;
	width : 88%;
	margin-left : 12%;
	text-align : center;
}

.bloc_cadre_texte_2 {
	float : left;
	width : 88%;
	margin-left : 12%;
}

.cadre_texte_4 {
	float : left;
	width : 50%;
	text-align : left;
}

.bloc_cadre_texte_4 {
	float : left;
	width : 60%;
	margin-top : -30px;
	margin-bottom : 20px;
	padding : 0px 0px 20px 0px;
	text-align : left;
}

.cadre_texte {
	float : left;
	width : 100%;
	text-align : center;
}

.bloc_cadre_texte {
	float : left;
	width : 85%;
	margin-bottom : 20px;
	padding : 0px 5% 10px 10%;
}


/* ******************************* */
/* ***** Contenu des modules ***** */
/* ******************************* */

.lettrine {
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight: normal;
	color: #002878;
	font-size: 2.2em;
	line-height : 0.9em;
	float: left;
	background-color: #d7dcef;
	margin-right: 0.2em;
	padding: 0em 0.1em 0em 0.1em;
}

.nom {
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-size: 1.6em;
	line-height : 1.6em;
	color: #f89c0c;
	font-weight : bold;
}

.texte {
	float : left;
	width : 88%;
	padding-left : 12%;
	margin-bottom : 10px;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.9em;
	line-height : 1.2em;
	text-align : justify;
	color : #ffffff;
}

.texte_2 {
	float : left;
	width : 100%;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.9em;
	line-height : 1.2em;
	text-align : center;
	color : #ffffff;
}

.texte_centre {
	float : left;
	width : 88%;
	padding-left : 12%;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 1.1em;
	line-height : 1.6em;
	text-align : center;
	color : #ffffff;
}

.texte_centre_2 {
	float : left;
	width : 100%;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.9em;
	line-height : 1.2em;
	text-align : justify;
	color : #ffffff;
}

.texte_centre_3 {
	float : left;
	width : 380px;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.9em;
	line-height : 1.2em;
	text-align : justify;
	color : #ffffff;
}


/* ****************** */
/* ***** Images ***** */
/* ****************** */

.photo_jj {
	float : left;
	width : 100%;
	text-align : center;
}

.photo_drapeaux {
	position : relative ;
	width : 64px;
	text-align : center;
}

.photo_logo {
	position : relative ;
	width : 120px;
	height : 50px;
	padding-left : 5px;
	padding-bottom : 10px;
	text-align : center;
}

.photo_icone {
	position : relative ;
	width : 64px;
	height : 50px;
	padding-left : 5px;
	padding-bottom : 10px;
	text-align : center;
}

.vignette {
	text-align : center;
	padding : 0px 25% 10px 20%;
}

.vignette_2 {
	text-align : center;
	padding : 0px 37.5% 10px 37.5%;
}

#xiti_logo {
	float : left;
	width : 88%;
	padding-left : 12%;
	text-align : center;
}


/* ****************** */
/* ***** Divers ***** */
/* ****************** */

.navig {
	float : left;
	width : 88%;
	padding-left : 12%;
	font-family: "Verdana", "Lucida Sans", "Lucida", "Helvetica", "Arial", sans-serif;
	font-weight: normal;
	font-style : italic;
	font-size: 1.0em;
	line-height : 1.6em;
	text-align: center;
}

.separateur {
	width : 88%;
	padding-left : 12%;
	margin : 0px;
	text-align : center;
	font-size: 0.1em;
}

.separation {
	float : left;
	width : 88%;
	margin : 20px 0px 20px 12%;
	text-align : left;
	border-bottom : 1px solid #9c7236;
}


/* ***********************************************************************************************

Fin de la feuille de style n°6 : BinaryBlue, (C) 16 et 17 septembre 2007 par Jean-Jacques Cortes

/* ***********************************************************************************************