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

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

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

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


/* ******************************************************************************************
 
Thème n°5 : Carbone14, (C) 24 au 26 mars 2007 par Jean-Jacques Cortes
 
****************************************************************************************** */


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

body {
	margin : 0px;
	background: #000000;
}

div#conteneur {
	width : 970px;
	padding : 10px 0px 10px 0px;
	margin: 0px auto 0px auto;
	color: #000000;
	background: #fffc00;
}

div#conteneur_principal {
	width : 950px;
	padding : 0px;
	margin : 0px 10px 0px 10px;
	background: #000000 url("images/bas_950.jpg") left bottom no-repeat;
}

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

div#conteneur_titre_uk {
	position : fixed;
	width : 950px;
	top : 0px;
	height : 150px;
	padding : 0px;
	z-index : 255;
	background: #000000 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 : 770px;
	margin : 0px 0px 0px 180px;
	padding : 180px 0px 0px 0px;
}

div.conteneur_texte_2 {
	float : left;
	width : 770px;
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
}

div.conteneur_texte_3 {
	float : left;
	width : 770px;
	padding : 0;
	margin-left : 0px;
}

div.conteneur_photo_jj {
	float : left;
	width : 180px;
	height : 25em;
	padding : 0px;
	margin-left : -200px;
}

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 #fffc00;
	border-right : 1px solid #fffc00;
	border-bottom : 1px solid #fffc00;
	background : #000000;
}


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


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

a {
	color : #ff0000;
}


#menu a:hover {
	display: block;
	color: #fffc00;
	background: #000000;
}

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

a:hover {
	color : #ffffff;
	background : #ff0000;
	text-decoration: none;
}

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

a .navig {
	color : #ffd63e;
}

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

p {
	margin : 0;
}

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


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

h1 {
	width : 750px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight: bold;
	font-size: 1.6em;
	visibility : hidden;
}

h2 {
	width : 750px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight: bold;
	font-size: 1.4em;
	visibility : hidden;
}

h3 {
	float : left;
	width : 710px;
	margin-top : 0px;
	margin-bottom : 10px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight : bold;
	font-style : italic;
	font-size: 1.2em;
	line-height : 1.1em;
	text-align : justify;
	color : #fffc00;
	border-bottom : 1px solid #fffc00;
}

.titre_h3 {
	float : left;
	width : 380px;
	margin-bottom : 10px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight : bold;
	font-style : italic;
	font-size: 1.0em;
	line-height : 1.1em;
	text-align : left;
	color : #fffc00;
}


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

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

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

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

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

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

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

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

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

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

.titre_formation_uk {
	float : left;
	width : 750px;
	height : 50px;
	padding : 10px 0px 10px 0px;
	background : url('titles/training.jpg') center top no-repeat;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

.cadre_icone {
	width : 100px;
	margin-top : 10px;
	margin-left : 40px;
	padding : 30px 0px 0px 15px;
	text-align : center;
	background : url('images/haut_100.jpg') left top no-repeat;
}

.bloc_cadre_icone {
	width : 100px;
	margin-left : 40px;
	margin-bottom : 30px;
	padding : 0px 15px 30px 15px;
	background : url('images/bas_100.jpg') left bottom no-repeat;
}

.cadre_drapeaux {
	width : 100px;
	margin-top : -130px;
	margin-left : 650px;
	margin-bottom : 0px;
	padding : 30px 0px 0px 15px;
	text-align : center;
	background : url('images/haut_100.jpg') left top no-repeat;
}

.bloc_cadre_drapeaux {
	width : 100px;
	height : 50px;
	margin-left : 650px;
	margin-bottom : 20px;
	padding : 10px 15px 30px 15px;
	background : url('images/bas_100.jpg') left bottom no-repeat;
}

.cadre_logo {
	width : 150px;
	margin-left : 0px;
	padding : 30px 5px 0px 20px;
	text-align : center;
	background : url('images/haut_150.jpg') left top no-repeat;
}

.bloc_cadre_logo {
	width : 150px;
	height : 60px;
	margin-left : 0px;
	margin-bottom : 10px;
	padding : 0px 15px 30px 10px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.8em;
	line-height : 1.1em;
	text-align : center;
	color : #ffffff;
	background : url('images/bas_150.jpg') left bottom no-repeat;
}

.cadre_menu {
	float : left;
	width : 161px;
	margin-left : 0px;
	padding : 30px 0px 0px 0px;
	text-align : center;
	background : url('images/haut_160.jpg') left top no-repeat;
}

.bloc_cadre_menu {
	float : left;
	width : 161px;
	margin-bottom : 20px;
	padding : 0px 0px 20px 0px;
	background : url('images/bas_160.jpg') left bottom no-repeat;
}

.cadre_photo_jj {
	float : left;
	width : 180px;
	margin-left : 0px;
	padding : 30px 0px 0px 20px;
	text-align : center;
	background : url('images/haut_180.jpg') left top no-repeat;
}

.bloc_cadre_photo_jj {
	float : left;
	width : 180px;
	margin-left :0px;
	margin-bottom : 10px;
	padding : 0px 10px 30px 15px;
	background : url('images/bas_180.jpg') left bottom no-repeat;
}

.cadre_texte_3 {
	float : left;
	width : 430px;
	margin-top : -130px;
	margin-left : 185px;
	padding : 30px 0px 0px 20px;
	text-align : center;
	background : url('images/haut_430.jpg') left top no-repeat;
}

.bloc_cadre_texte_3 {
	float : left;
	width : 430px;
	margin-top : -100px;
	margin-left : 185px;
	margin-bottom : 20px;
	padding : 0px 10px 36px 25px;
	background : url('images/bas_430.jpg') left bottom no-repeat;
}

.cadre_texte_2 {
	float : left;
	width : 530px;
	margin-left : 0px;
	padding : 30px 0px 0px 0px;
	text-align : center;
	background : url('images/haut_530.jpg') left top no-repeat;
}

.bloc_cadre_texte_2 {
	float : left;
	width : 530px;
	margin-left : 0px;
	margin-bottom : 20px;
	padding : 0px 10px 30px 0px;
	background : url('images/bas_530.jpg') left bottom no-repeat;
}

.cadre_texte_4 {
	float : left;
	width : 530px;
	margin-top : -150px;
	margin-left : 180px;
	padding : 30px 0px 0px 20px;
	text-align : center;
	background : url('images/haut_530.jpg') left top no-repeat;
}

.bloc_cadre_texte_4 {
	float : left;
	width : 530px;
	margin-top : -120px;
	margin-left : 180px;
	margin-bottom : 20px;
	padding : 0px 10px 30px 20px;
	background : url('images/bas_530.jpg') left bottom no-repeat;
}

.cadre_texte {
	float : left;
	width : 750px;
	margin-top : 0px;
	margin-left : 0px;
	padding : 30px 0px 0px 20px;
	text-align : center;
	background : url('images/haut_750.jpg') left top no-repeat;
}

.bloc_cadre_texte {
	float : left;
	width : 750px;
	margin-bottom : 20px;
	padding : 0px 10px 30px 20px;
	background : url('images/bas_750.jpg') left bottom no-repeat;
}


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

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

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

.texte {
	float : left;
	width : 710px;
	margin-bottom : 20px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.8em;
	line-height : 1.1em;
	text-align : justify;
	color : #ffffff;
}

.texte_2 {
	float : left;
	width : 520px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.8em;
	line-height : 1.1em;
	text-align : center;
	color : #ffffff;
}

.texte_centre {
	float : left;
	width : 710px;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.8em;
	line-height : 1.1em;
	text-align : center;
	color : #ffffff;
}

.texte_centre_2 {
	float : left;
	font-family: "Verdana", "Helvetica", "Arial", sans-serif;
	font-weight : normal;
	font-size: 0.8em;
	line-height : 1.1em;
	text-align : justify;
	color : #ffffff;
	width : 480px;
	background : #000000;
}

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


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

.photo_jj {
	float : left;
	width : 150px;
	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 0px 10px 180px;
}

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

#xiti_logo {
	float : left;
	width : 750px;
	text-align : center;
}


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

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

.separateur {
	width : 750px;
	margin : 0px;
	text-align : center;
	font-size: 0.1em;
}

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


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

Fin de la feuille de style n°5 : Carbone14, (C) 24 au 26 mars 2007 par Jean-Jacques Cortes

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