/*********************
     TYPOGRAPHY
*********************/

body {
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: x-small;
  	voice-family: "\"}\"";
  	voice-family: inherit;
  	font-size: small;
	}
	html>body {
  		font-size: small;
		}

#download {
	color: #665;
	font-weight: bold;
	font-size: .8em;
	}

#download p {
	padding: 0 15px;
	}

acronym {
	cursor: help;
	}

minititle {
	color: #92977c;
	}

/*********************
        LINKS
*********************/

a {
	white-space: nowrap;
	}

a:link {
	font-weight: bold;
	text-decoration: none;
	border: 0px solid #f2f4ee;
	color: #776;
	padding: 0 1px;
	}

a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #998;
	}

a:hover {
	background: url(link_background.gif) no-repeat;
	border: 0px solid #776;
	padding: 0 1px;
	}

a:active {
	font-weight: bold;
	text-decoration: none;
	}

/*********************
     ACCESSYPOO
*********************/

span.accesskey {
	font-weight: bold;
	text-decoration: underline;
	}

/**************************
     DO THE DIV - LAYOUT
**************************/

/*basics*/

body {
	background: #F2F4EE url(background.gif) repeat fixed;
	margin: 0;
	padding: 0;
	}

#container {
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	}

/*intro stuff*/

	#intro {
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		z-index: 1000;
		}

		#pageHeader {
			position: relative;
			top: 0;
			left: 0;
			margin: 0;
			padding: 0;
			background: #fff url(images/headerBack.jpg) repeat-x top left; /*this is the horizontal line bk*/
			height: 126px;
			width: 2400px;
			}

			#pageHeader h1 {       /*contains the zen text and flowery images*/
				margin: 0;
				background: transparent url(images/header.jpg) no-repeat; /*thanks to dubstastic for brushes*/
				height: 126px;
				}

			#pageHeader h1 span {        /*get the text out of the way*/
				display: none;
				}

			#pageHeader h2 {       /*this text will be integrated into the pictoral header*/
				display: none;
				}

		#download {           /*runs along left side, includes cube and below*/
			position: absolute;
			top: 126px;
			left: 0;
			background: transparent url(images/cube.jpg) no-repeat top left;
			width: 352px;
			padding-top: 301px;
			z-index: 500;
			}

		/*********************
			 INDEX ZONE 1
		*********************/

							/*graphic backgrounds are applied to head, paragraphs, and last paragraph*/
		#index_zone1, 
		#xp_zone1, 
		#fo_zone1,
		#pj_zone1,
		#ct_zone1{               /*first of boxes, but different in document tree so separate css*/
			position: absolute;
			background: #f2f4ee;
			z-index: 1000;
			width: 257px;    /*all text boxes are 257px*/
			top: 126px;
			left: 580px;
			padding: 0;
			border: solid #998;    /*only for IE, overridden later*/
			border-width: 0px 1px 1px 1px; /*no top border*/
			}

		html>head:first-child+body #index_zone1, 
		html>head:first-child+body #xp_zone1,
		html>head:first-child+body #fo_zone1,
		html>head:first-child+body #pj_zone1,
		html>head:first-child+body #ct_zone1{         /*gets out of the way for IE and opera 6*/
			background: transparent url(images/sectionBack_head.png) no-repeat top right; /*TOP bk w.drop shadow*/
			border: 0;  /*need to override border in place*/
			}

		#index_zone1 h3 span, 
		#xp_zone1 h3 span, 
		#fo_zone1 h3 span,
		#pj_zone1 h3 span,
		#ct_zone1 h3 span{
			display: none; /*get text out of the way*/
			}

		#index_zone1 p, 
		#xp_zone1 p, 
		#fo_zone1 p,
		#pj_zone1 p,
		#ct_zone1 p{
			margin: 0;
			padding: 5px 20px; /*cant put background here or IE will see it*/
			}

		html>head:first-child+body #index_zone1 p, 
		html>head:first-child+body #xp_zone1 p,
		html>head:first-child+body #fo_zone1 p,
		html>head:first-child+body #pj_zone1 p,
		html>head:first-child+body #ct_zone1 p{     /*only seen by smart browsers that can do png transp*/
			background: transparent url(images/sectionBack_main.png) repeat-y;  /*thin repeated background*/
			}

		#index_zone1 p.p3, 
		#xp_zone1 p.p3, 
		#fo_zone1 p.p3,
		#pj_zone1 p.p3,
		#ct_zone1 p.p3{
			margin: 0;
			padding: 5px 20px 25px 20px;
			}

		html>head:first-child+body #index_zone1 p.p3, 
		html>head:first-child+body #xp_zone1 p.p3,
		html>head:first-child+body #fo_zone1 p.p3,
		html>head:first-child+body #pj_zone1 p.p3,
		html>head:first-child+body #ct_zone1 p.p3{    /*selects last paragraph*/
			background: transparent url(images/sectionBack_foot.png) no-repeat bottom right;  /*footer background*/
			}
			
		/* index title */
		
		#index_zone1 h3 {
			background: transparent url(images/title_identity.jpg) no-repeat;  /*text with faded flower gradient*/
			margin: 0;
			padding: 0;
			height: 86px;
			}
			
		/* experience title */
		
		#xp_zone1 h3 {
			background: transparent url(images/title_xp_moteur.jpg) no-repeat;  /*text with faded flower gradient*/
			margin: 0;
			padding: 0;
			height: 86px;
			}
			
		/* formation title */
		
		#fo_zone1 h3 {
			background: transparent url(images/title_formation_2007.jpg) no-repeat;  /*text with faded flower gradient*/
			margin: 0;
			padding: 0;
			height: 86px;
			}
			
		/* projet title */
		
		#pj_zone1 h3 {
			background: transparent url(images/title_pj_images.jpg) no-repeat;  /*text with faded flower gradient*/
			margin: 0;
			padding: 0;
			height: 86px;
			}
		
		/* contact title */
		
		#ct_zone1 h3 {
			background: transparent url(images/title_contact_cv.jpg) no-repeat;  /*text with faded flower gradient*/
			margin: 0;
			padding: 0;
			height: 86px;
			}



		/*********************
			 ZONES 2-3
		*********************/
/*next four text boxes are under #zonesComplementaires div*/

	#zonesComplementaires {
		position: relative;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		background: #fff url(images/bodyBack.jpg) repeat-x;  /*use it to get the faded pattern background positioned - again thanks to squidfingers for pattern*/
		height: 301px;
		width: 2400px; /*same width as header*/
		}
		
		/* index */

		#index_zone2, #index_zone3 {
			border: solid #998; /*border only for IE, will be overridden*/
			border-width: 0 1px 1px 1px;
			background: #f2f4ee;
			position: absolute;
			z-index: 1000;
			width: 257px;
			top: 0;
			padding: 0;
			}

		html>head:first-child+body #index_zone2, html>head:first-child+body #index_zone3 {
			background: transparent url(images/sectionBack_head.png) no-repeat top right; /*override IE values*/
			border: 0;
			}

		#index_zone2 {
			left: 880px;
			}

		#index_zone2 h3, #index_zone3 h3 {
			margin: 0;
			padding: 0;
			height: 86px; /*headers need defined height because of image replacement*/
			}

		#index_zone2 h3 {
			background: transparent url(images/title_competences.jpg) no-repeat;
			}

		#index_zone2 h3 span, #index_zone3 h3 span {
			display: none; /*for some reason the negative margin didn't work here, so we will use this*/
			}

		#index_zone2 p, #index_zone3 p {
			margin: 0;
			padding: 5px 20px; /*need to apply to the p elements because of background image reqts*/
			}

		html>head:first-child+body #index_zone2 p, html>head:first-child+body #index_zone3 p {
			background: transparent url(images/sectionBack_main.png) repeat-y; /*middle background*/
			}

		#index_zone2 p.p3, #index_zone3 p.p3 {
			margin: 0;
			padding: 5px 20px 25px 20px;
			}

		html>head:first-child+body #index_zone2 p.p3, html>head:first-child+body #index_zone3 p.p3 {
			background: transparent url(images/sectionBack_foot.png) no-repeat bottom right; /*last p gets bottom*/
			}

		#index_zone3 {   /*see above for comments*/
			left: 1180px;
			}

		#index_zone3 h3 {
			background: transparent url(images/title_langues.jpg) no-repeat;
			}
			
		/* experience */
		
		#xp_zone2, #xp_zone3, #xp_zone4, #xp_zone5, #xp_zone6 {
			border: solid #998; /*border only for IE, will be overridden*/
			border-width: 0 1px 1px 1px;
			background: #f2f4ee;
			position: absolute;
			z-index: 1000;
			width: 257px;
			top: 0;
			padding: 0;
			}

		html>head:first-child+body #xp_zone2, html>head:first-child+body #xp_zone3, html>head:first-child+body #xp_zone4, html>head:first-child+body #xp_zone5, html>head:first-child+body #xp_zone6 {
			background: transparent url(images/sectionBack_head.png) no-repeat top right; /*override IE values*/
			border: 0;
			}

		#xp_zone2 h3, #xp_zone3 h3, #xp_zone4 h3, #xp_zone5 h3, #xp_zone6 h3 {
			margin: 0;
			padding: 0;
			height: 86px; /*headers need defined height because of image replacement*/
			}

		#xp_zone2 h3 span, #xp_zone3 h3 span, #xp_zone4 h3 span, #xp_zone5 h3 span, #xp_zone6 h3 span {
			display: none; /*for some reason the negative margin didn't work here, so we will use this*/
			}

		#xp_zone2 p, #xp_zone3 p, #xp_zone4 p, #xp_zone5 p, #xp_zone6 p {
			margin: 0;
			padding: 5px 20px; /*need to apply to the p elements because of background image reqts*/
			}

		html>head:first-child+body #xp_zone2 p, html>head:first-child+body #xp_zone3 p, html>head:first-child+body #xp_zone4 p, html>head:first-child+body #xp_zone5 p, html>head:first-child+body #xp_zone6 p {
			background: transparent url(images/sectionBack_main.png) repeat-y; /*middle background*/
			}

		#xp_zone2 p.p3, #xp_zone3 p.p3, #xp_zone4 p.p3, #xp_zone5 p.p3, #xp_zone6 p.p3 {
			margin: 0;
			padding: 5px 20px 25px 20px;
			}

		html>head:first-child+body #xp_zone2 p.p3, html>head:first-child+body #xp_zone3 p.p3, html>head:first-child+body #xp_zone4 p.p3, html>head:first-child+body #xp_zone5 p.p3, html>head:first-child+body #xp_zone6 p.p3 {
			background: transparent url(images/sectionBack_foot.png) no-repeat bottom right; /*last p gets bottom*/
			}
			
		/* xp_zone 2 */
			
		#xp_zone2 {
			left: 880px;
			}
			
		#xp_zone2 h3 {
			background: transparent url(images/title_xp_cell.jpg) no-repeat;
			}
			
		/* xp_zone 3 */

		#xp_zone3 {   /*see above for comments*/
			left: 1180px;
			}

		#xp_zone3 h3 {
			background: transparent url(images/title_xp_videos.jpg) no-repeat;
			}
			
		/* xp_zone 4 */
			
		#xp_zone4 {   /*see above for comments*/
			left: 1480px;
			}

		#xp_zone4 h3 {
			background: transparent url(images/title_xp_images.jpg) no-repeat;
			}
		
		/* xp_zone 5 */
			
		#xp_zone5 {   /*see above for comments*/
			left: 1780px;
			}

		#xp_zone5 h3 {
			background: transparent url(images/title_xp_java.jpg) no-repeat;
			}
			
		/* xp_zone 6 */
			
		#xp_zone6 {   /*see above for comments*/
			left: 2080px;
			}

		#xp_zone6 h3 {
			background: transparent url(images/title_xp_cpp.jpg) no-repeat;
			}
			
			
		/* formation */
		
		#fo_zone2, #fo_zone3 {
			border: solid #998; /*border only for IE, will be overridden*/
			border-width: 0 1px 1px 1px;
			background: #f2f4ee;
			position: absolute;
			z-index: 1000;
			width: 257px;
			top: 0;
			padding: 0;
			}

		html>head:first-child+body #fo_zone2, html>head:first-child+body #fo_zone3 {
			background: transparent url(images/sectionBack_head.png) no-repeat top right; /*override IE values*/
			border: 0;
			}

		#fo_zone2 {
			left: 880px;
			}

		#fo_zone2 h3, #fo_zone3 h3 {
			margin: 0;
			padding: 0;
			height: 86px; /*headers need defined height because of image replacement*/
			}

		#fo_zone2 h3 {
			background: transparent url(images/title_formation_2004.jpg) no-repeat;
			}

		#fo_zone2 h3 span, #fo_zone3 h3 span {
			display: none; /*for some reason the negative margin didn't work here, so we will use this*/
			}

		#fo_zone2 p, #fo_zone3 p {
			margin: 0;
			padding: 5px 20px; /*need to apply to the p elements because of background image reqts*/
			}

		html>head:first-child+body #fo_zone2 p, html>head:first-child+body #fo_zone3 p {
			background: transparent url(images/sectionBack_main.png) repeat-y; /*middle background*/
			}

		#fo_zone2 p.p3, #fo_zone3 p.p3 {
			margin: 0;
			padding: 5px 20px 25px 20px;
			}

		html>head:first-child+body #fo_zone2 p.p3, html>head:first-child+body #fo_zone3 p.p3 {
			background: transparent url(images/sectionBack_foot.png) no-repeat bottom right; /*last p gets bottom*/
			}

		#fo_zone3 {   /*see above for comments*/
			left: 1180px;
			}

		#fo_zone3 h3 {
			background: transparent url(images/title_formation_2002.jpg) no-repeat;
			}
		
		
		/* projets */
		
		#pj_zone2, #pj_zone3, #pj_zone4, #pj_zone5, #pj_zone6 {
			border: solid #998; /*border only for IE, will be overridden*/
			border-width: 0 1px 1px 1px;
			background: #f2f4ee;
			position: absolute;
			z-index: 1000;
			width: 257px;
			top: 0;
			padding: 0;
			}

		html>head:first-child+body #pj_zone2, html>head:first-child+body #pj_zone3, html>head:first-child+body #pj_zone4, html>head:first-child+body #pj_zone5, html>head:first-child+body #pj_zone6 {
			background: transparent url(images/sectionBack_head.png) no-repeat top right; /*override IE values*/
			border: 0;
			}

		#pj_zone2 h3, #pj_zone3 h3, #pj_zone4 h3, #pj_zone5 h3, #pj_zone6 h3 {
			margin: 0;
			padding: 0;
			height: 86px; /*headers need defined height because of image replacement*/
			}

		#pj_zone2 h3 span, #pj_zone3 h3 span, #pj_zone4 h3 span, #pj_zone5 h3 span, #pj_zone6 h3 span {
			display: none; /*for some reason the negative margin didn't work here, so we will use this*/
			}

		#pj_zone2 p, #pj_zone3 p, #pj_zone4 p, #pj_zone5 p, #pj_zone6 p {
			margin: 0;
			padding: 5px 20px; /*need to apply to the p elements because of background image reqts*/
			}

		html>head:first-child+body #pj_zone2 p, html>head:first-child+body #pj_zone3 p, html>head:first-child+body #pj_zone4 p, html>head:first-child+body #pj_zone5 p, html>head:first-child+body #pj_zone6 p {
			background: transparent url(images/sectionBack_main.png) repeat-y; /*middle background*/
			}

		#pj_zone2 p.p3, #pj_zone3 p.p3, #pj_zone4 p.p3, #pj_zone5 p.p3, #pj_zone6 p.p3 {
			margin: 0;
			padding: 5px 20px 25px 20px;
			}

		html>head:first-child+body #pj_zone2 p.p3, html>head:first-child+body #pj_zone3 p.p3, html>head:first-child+body #pj_zone4 p.p3, html>head:first-child+body #pj_zone5 p.p3, html>head:first-child+body #pj_zone6 p.p3 {
			background: transparent url(images/sectionBack_foot.png) no-repeat bottom right; /*last p gets bottom*/
			}
			
		/* pj_zone 2 */
			
		#pj_zone2 {
			left: 880px;
			}
			
		#pj_zone2 h3 {
			background: transparent url(images/title_pj_sub_surf.jpg) no-repeat;
			}
			
		/* pj_zone 3 */

		#pj_zone3 {   /*see above for comments*/
			left: 1180px;
			}

		#pj_zone3 h3 {
			background: transparent url(images/title_pj_cercles.jpg) no-repeat;
			}
			
		/* pj_zone 4 */
			
		#pj_zone4 {   /*see above for comments*/
			left: 1480px;
			}

		#pj_zone4 h3 {
			background: transparent url(images/title_pj_courbes.jpg) no-repeat;
			}
			
			
		/* contact */
		
		#ct_zone2, #ct_zone3 {
			border: solid #998; /*border only for IE, will be overridden*/
			border-width: 0 1px 1px 1px;
			background: #f2f4ee;
			position: absolute;
			z-index: 1000;
			width: 257px;
			top: 0;
			padding: 0;
			}

		html>head:first-child+body #ct_zone2, html>head:first-child+body #ct_zone3 {
			background: transparent url(images/sectionBack_head.png) no-repeat top right; /*override IE values*/
			border: 0;
			}

		#ct_zone2 {
			left: 880px;
			}

		#ct_zone2 h3, #ct_zone3 h3 {
			margin: 0;
			padding: 0;
			height: 86px; /*headers need defined height because of image replacement*/
			}

		#ct_zone2 h3 {
			background: transparent url(images/title_contact_email.jpg) no-repeat;
			}

		#ct_zone2 h3 span, #ct_zone3 h3 span {
			display: none; /*for some reason the negative margin didn't work here, so we will use this*/
			}

		#ct_zone2 p, #ct_zone3 p {
			margin: 0;
			padding: 5px 20px; /*need to apply to the p elements because of background image reqts*/
			}

		html>head:first-child+body #ct_zone2 p, html>head:first-child+body #ct_zone3 p {
			background: transparent url(images/sectionBack_main.png) repeat-y; /*middle background*/
			}

		#ct_zone2 p.p3, #ct_zone3 p.p3 {
			margin: 0;
			padding: 5px 20px 25px 20px;
			}

		html>head:first-child+body #ct_zone2 p.p3, html>head:first-child+body #ct_zone3 p.p3 {
			background: transparent url(images/sectionBack_foot.png) no-repeat bottom right; /*last p gets bottom*/
			}

		#ct_zone3 {   /*see above for comments*/
			left: 1180px;
			}

		#ct_zone3 h3 {
			background: transparent url(images/title_contact_telephone.jpg) no-repeat;
			}


/*footer stuff - footer will be on the side, floated, and consist of buttons for MOSE, boxes for IE*/

		#footer {
			position: absolute;
			background: transparent;
			z-index: 5000;
			width: 106px; /*make sure floats go to next line*/
			top: 5px;
			left: 370px;
			padding: 0;
			margin-top: 5px;
			}

		div#footer a {
			display: block; /*for text positioning and link activation*/
			background: url(link_background.gif) no-repeat; /*standard link bk for all just for IE*/
			border: 1px solid #998;
			font-weight: normal;
			text-align: center;
			}

		html>head:first-child+body div#footer a { /*buttons only for MOSE*/
			border: 0;
			padding-top: 15px;
			background: url(footer_back.png) no-repeat;
			height: 26px;
			}

		html>head:first-child+body div#footer a:hover { /*i'm lazy, i just used 2 images instead of pixy method*/
			background: url(footer_back_hover.png) no-repeat;
			border: 0;
			}




#extraDiv1 {
	display: block;
	background: url(noStandards.gif) fixed no-repeat;
	position: absolute;
	top: 542px;
	left: 22px;
	width: 330px;
	height: 100px;
	}

#extraDiv2 {
	}

html>body div#extraDiv1 {
	display: none;
	}