/******************************/
/***	CSS du site Axeweb  ***/
/******************************/

/* reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: transparent;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* basics */
html {
 	/*height:100%;*/
	}
body {
	font-family: "Lucida Grande", Verdana, Arial, Sans-Serif;
	color: #646464;
	/*height:100%;*/
	}
p, ul {
	line-height: 21px;
	}
h1, h2, h3, h4, h5, h6 {
    font-family: "Trebuchet MS", "Lucida Grande", Verdana, Sans-Serif;
	}

h1 {font-size: 160%;}
h2 {font-size: 150%;} h2 img{vertical-align: middle;}
h3 {font-size: 140%;}
h4 {font-size: 130%;}
h5 {font-size: 120%;}
h6 {font-size: 110%;}
strong { font-weight: bold;}
em { font-style: italic;}
acronym { border-bottom:1px dotted;}

a,a:link,
a:visited {
	color: #69abfc;
	text-decoration: underline;
	cursor: pointer;
	}
a:hover,
a:active {
	color: #646464;
	text-decoration: underline;
	cursor: pointer;
	}
a img {
	text-decoration: none;
}

blockquote {
	background: #071c50 url(images/blockquote.gif) no-repeat 16px 8px;
	border: 1px solid #00103a;
	margin: 0;
	padding: 0 25px 0 64px;
	color: #2f59a4;
	}
	
#referencement {
	font-size:90%;
}

#wrapper_general {
    background: transparent url(img/bg_rouge_120h.jpg) repeat-x 0 100px;
    position: relative;
    height:100%;
    border:none;
}

#wrapper {
	width: 760px;
	height: 90%;
	overflow: hidden;
	font-size: 80%;
	margin: 0 auto 0 auto;
	position: relative;
	z-index: 2;
	/*background-color: #fff;*/
	text-align:center;
	border:none;
	}

#header {
 	width: auto !important;
	width: 100%; /* Stupid IE */
	height: 100px;
	margin: 0;
	padding: 0;
	position: relative;
	text-align:left;
	}
	#header h1 {
		margin: 0 0 0 25px;
		line-height: 38px;
		border-top: 5px solid #b1e100;
		color: #5b9cff;
		float:left;
		}
	#header img {
		position: absolute;
		left:-100px;
	}
	#navigation {
		position:absolute;
		bottom:3px;
		margin: 0;
		height: 23px;

	}
	    #navigation ul {
	    }
	    #navigation ul li {
			float: left;
	    }
	    #navigation a, #navigation a:link, #navigation a:visited {
			height: 23px;
			display: block;
			padding: 0 10px 0 0;
			text-decoration: none;
			/*background-color: #fff;a effacer*/
			color:#b02b2c;
			/* Ajout IE */
	    }
	    #navigation a.accueil {
	        background:#b02b2c;
	        color: #fff;
	        font-weight: bold;
	        margin-right: 2px;
		}
     	#navigation a:hover {
			background: #fff url(img/bg_navigation_rouge.gif) no-repeat bottom center;
			text-decoration: none;
			border: #b02b2c solid 3px;
			color:#b02b2c;
	    }
	    #navigation a:active {
	        background:#b02b2c none;
	        color: #fff;
		}
	    #navigation a span {
			padding:0 0 0 10px;
	    }
#accroche {
	height:100px;
	color: #fff;
	/*background:#b02b2c;a effacer*/
	padding: 10px 10px 10px;
	text-align:left;
}
	#accroche p {
		margin-top: 5px;
	}
#content {
 	width: auto !important;
	width: 100%; /* Stupid IE */
	margin-top: 10px;
 	text-align:left;
 	position:relative;
 	border:none;
	}
	.item {
		clear: both;
		visibility: hidden;
		}
	.clear {
		clear: both;
	}
	.main .clear p {
		margin-bottom: 0;
	}
		.meta {
			float: left;
			width: 150px;
			height: 100%;
			background: transparent url(images/separator_meta.gif) no-repeat left top;
			}
			.meta p {
				padding: 8px 15px 0;
				color:#fff;
				}
			.meta p.date {
				margin: 25px 0 0;
				padding: 0 0 0 15px;
				background: transparent url(images/indicator_date.gif) no-repeat right 5px;
				color: #001342;
				}
			.meta ul {
				font-size:90%;
				margin: 5px 0;
				padding: 0 15px;
				list-style-type: none;
				}
			.meta ul li {
				background: transparent url(images/icon_tag.gif) no-repeat left center;
				padding: 0 0 0 20px;
				}
   #compas {
    font-size:80%;
	clear: both;
	width:auto;
	height:100%;
	overflow:hidden;
	margin: 0;
	padding: 0 5px 20px;
	/*border-top: #e3e3e3 solid 5px;*/
	border-left: #f9f9f9 solid 1px;
	border-right: #f9f9f9 solid 1px;
	text-align: center;
	height: 23px;
	}
	#compas ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		}
		#compas ul li {
			line-height: 28px;
			border-bottom: 2px solid #e8eefa;
			float:left;
			}
			#compas ul li span {
			}
			#compas ul li a {
				display: block;
				width: auto !important;
				background: transparent url(img/fleche_simple_rouge.gif) no-repeat 9px 11px;
    			padding: 0 5px 0 20px;
				color: #69abfc;
				/* correcif ie6*/
				}
            #compas ul li.first a {
				background: none;
				padding: 0 5px 0 5px;
				}
				#compas ul li a:hover {
					text-decoration: none;
					background-color: #e8eefa;
					}
	.main {
  		float: left;
  		display:block;
		width: 480px !important;
		width: 450px; /* Stupid IE */
		min-width: 480px;
		padding: 10px 10px 10px;
		}
		.solo {
			width: 98% !important;
			width: 98%; /* Stupid IE */
			min-width: 740px;
		}
		.main div {
			margin-bottom:20px;
			/*Ajout ie6*/
		}
		.main > div {
			background-color: #e8eefa;
			padding: 10px;
			position: relative;
		}
		.main h2 {
			color: #b02b2c;
			margin-bottom:20px;
			}
		.main h3 {
			margin: 20px 0 10px;
			font-size:130%;
			}
		.main p {
			padding: 0 0 0 0;
			text-align: justify;
			margin-bottom: 15px;
			}
		.main p.fleche, .main li.fleche {
			background: transparent url(img/fleche_simple_rouge.gif) no-repeat 0 8px;
			text-indent: 10px;
		}
		.fleche {
			background: url(img/fleche_simple_rouge.gif) no-repeat 0 5px;
			padding-left:10px;
		}
		.main a.fleche_grise {
   			/*color: #cc0000;*/
			padding: 0 15px;
			background:transparent url(img/fleche_entouree_grise.gif) no-repeat 0 3px;
			color: #69abfc;
			}
		.main ul li.fleche_grise {
            padding: 0 15px;
			background:transparent url(img/fleche_entouree_grise.gif) no-repeat 20px 5px;
			text-indent: 22px;
		}
		.main a:hover,
		.main a:active {
			text-decoration: none;
			background-color: #e8eefa;
			}
		.main img.float_left {
			float: left;
			margin: 0 10px 10px 0;
			padding:2px;
			border: #e8eefa solid 1px;
			background-color: #fff;
			width: 230px;
			}
		.main img.float_right {
			float: right;
			margin: 0 0 10px 10px;
			padding:2px;
			border: #e8eefa solid 1px;
			background-color: #fff;
			width: 230px;
			}
		.main img.encadre {
            float: left;
			margin: 20px 6px;/* anciennement 2px*/
			padding:2px;
			border: #e8eefa solid 1px;
			background-color: #fff;
			width: 230px;
		}
		.main .en_savoir_plus img.encadre {
            float: left;
			margin: 20px 2px;/* anciennement 2px*/
			padding:2px;
			border: #e8eefa solid 1px;
			background-color: #fff;
			width: 230px;
		}
  		.main img.seule {
  			 width: auto;
		}
		.main img.new {
			position: absolute;
			top: 0;
			right:0;
		}
		.main div.box, .sidebar div.box {
			/*border-right: #ccc solid 1px;*/
			float: left;
			/*width: 210px;*/
			width: 218px;
			padding:10px;
			margin: 10px 5px;
			height: 100%;
			position: relative;
			
			background:#e8eefa;
		}
			.main div.box2 {
			/*border-right: #ccc solid 1px;*/
			float: left;
			/*width: 210px;*/
			width: 200px;
			padding:10px;
			margin: 10px 5px;
			height: 100%;

			background:#e8eefa;
		}
		.main div.new {
			float: left;
			width: 218px;
			padding:10px;
			margin: 10px 5px;
			height: 100%;
			background:#e8eefa url(../images/nouveau2.gif) no-repeat 110px -20px;
		}
		.main .girl {
			float:left;
			margin:-28px;
			padding:0;
			height:400px;
			width: 194px;
			background: transparent url(img/girl_fd.png) no-repeat 0 0 ;
			z-index: 1;
		}
		
		.main .separation {
			clear: both;
			margin-top: 20px;
			border-top: #e8eefa solid 5px;
			border-bottom: #e8eefa solid 5px;
			padding-top: 20px;
			float: left;
			background: none;
		}
		.main .en_savoir_plus {
			clear: right;
			margin-top: 20px;
			border-top: #e8eefa solid 5px;
			border-bottom: #e8eefa solid 5px;
			padding-top: 20px;
			float: left;
			background: none;
		}
		.main .en_savoir_plus .box {
			width: 210px;
		}
		.main .solution {
			position: absolute;
			top: -13px;
		}
		.main span.pack {
			position: absolute;
			top: -13px;
			font-size: 160%;
			font-weight: bold;
		}
	.info {
		clear:both;
		margin:5px 0 5px 150px;
		padding:0 0 0 25px;
		}
		.info p {
			font-size:90%;
			background:#071C50 url(images/icon_info.gif) no-repeat scroll 16px center;
			border:1px solid #00103A;
			color:#2F59A4;
			padding:5px 0 5px 48px;
			}
	.first .main {
		background: #fff;
		color:#000;
		padding: 0 5px 1px 25px;
		}
		.first .meta p.date {
			background-image: url(images/indicator_date_white.gif);
			}
		.first .main h2 {
			color: #001342;
			padding:20px 0 0;
			background: transparent;
			}
			.first .main h2 span {
				color: #5b9cff;
				}
		.first .main h3 {
			color: #ff8f00;
			margin:0;
			}
		.first .main p {
			margin:10px 10px 10px 0;
			padding:0;
			text-align: justify;
			}
		    .first .main p.info-freelance {
	            padding: 10px 10px 10px 48px;
	            background:#071C50 url(images/icon_info.gif) no-repeat scroll 16px center;
	            border:1px solid #00103A;
		        color:#2F59A4;
		        font-size: 110%;
	            }
		        .first .main p.info-freelance a {
		            border: none;
		            }

    	.bordure{
			border: #c3d9ff solid 1px;
			background-color: #fff;
			padding: 4px;
			margin-bottom: 10px;
			position: relative;
			background: #fff url(img/bg_diag_rouge2.png) no-repeat bottom right;
			clear:both;
			margin-top:10px;
			/* ajout ie */
		}
			.bordure p {
	            text-align: center;

			}
			.bordure div {
	            background: #e8eefa url(img/bg_diag_rouge.png) no-repeat top left;
	            padding: 15px;
	            margin-bottom: 0;
	            /* ajout ie */
			}
			.bordure img {
                background: #e8eefa;
			}
		
	.sidebar {
		float: left;
		width: 240px !important;
		width: 240px; /* Stupid IE */
		min-width:240px;
		height: 100%;
  		padding: 10px 10px 10px;
  		border:none;
		}
		.sidebar h2 {
			margin-bottom: 10px;
			text-align: center;
			}
		.sidebar ul {
			margin: auto 20px;
			padding: 0;
			list-style-type: none;
			}
			.sidebar li {
				clear: both;
				padding: 15px 10px;
				line-height: 140%;
				}
				.sidebar li a {
                    color: inherit;
                    display: block;
                    width:160px;
                    color: #646464;
				}
				.sidebar li:hover {
					background: #f9f9f9 url(img/fleche_entree.gif) no-repeat left center;
					text-indent: 15px;
					cursor: pointer;
					color:inherit;
					}
				.sidebar li span{
					background:transparent url(images/icon_list.gif) no-repeat scroll 0 4px;
					padding:0 0 0 15px;
					color:#fff;
					}
		.sidebar p {
			margin:0 30px;
			}
		.sidebar .bordure img.fond_blanc {
      		position: relative;
      		left:-15px;
      		margin: 5px 0;
      		padding: 5px 5px 5px 6px;
      		background: #fff;
		}
		.sidebar .vcard {
			/*height: 144px;*/
			color: #001342;
			position: relative;
			background: #e8eefa;
			}
			.sidebar .vcard > * {
				margin-bottom: 10px;
				margin-top:10px;
			}
			.vcard div {
				padding: 2px 10px;
				font-size: 100%;
				background: #fff;
				}
			.vcard p {
				padding: 4px 0;
				}
			.vcard img {
				float:left;
				padding-right: 5px;
				}
				.vcard img.badge {
					position: absolute;
					top: 0;
					right: 0;
					border: none;
					padding: 0;
					background: none;
					}
			.vcard .id {
				font-weight: bold;
				}
			.vcard .adr .street-address {
				display: block;
				}
			.vcard a {
                text-decoration: none;
			}
  			.vcard .tel {
				background: transparent;
				padding-left: 0;
			}
			.vcard .dl {
				clear:both;
				padding-top:5px;
				text-align: center;
				}
				.vcard .dl a {
					padding: 3px 0 3px 35px;
					font-weight: bold;
					}
		
			.sidebar .vcard .dl a {
				background: url(img/icon-hcard-add.png) no-repeat center left;
				}
			.sidebar .pdf .dl a {
				background: url(img/icon-hresume.png) no-repeat center left;
				}

#bottom {
    font-size:80%;
	clear: both;
	width:auto;
	height:100%;
	overflow:hidden;
	margin: 0;
	padding: 10px 10px 10px;
	/*border-top: #e3e3e3 solid 5px;*/
	border-left: #f9f9f9 solid 1px;
	border-right: #f9f9f9 solid 1px;
	text-align: center;
	height: 23px;
	}
	#bottom h2 {
		padding: 10px 5px;
		}
	#bottom ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		}
		#bottom ul li {
			line-height: 28px;
			border-bottom: 2px solid #ccc;
			float:left;
			}
			#bottom ul li a {
				/*display: block;*/
				width: auto !important;
				width: 100%; /* Stupid IE */
				background: transparent;
				padding: 0 10px;
				color: #69abfc;
				}
				#bottom ul li a:hover {
					text-decoration: none;
					background-color: #e8eefa;
					}
	#bottom .bottom-left,
	#bottom .bottom-mid {
		float: left;
		width: 25% !important;
		width: 20%; /* Stupid IE */
		height: 100%;
		margin: 0 25px 0 0;
		background: #020a20;
		}

	#bottom .bottom-right {
		float: left;
		width: 30%;
		max-width: 300px;
		}

#footer {
    font-size:80%;
	clear: both;
	margin: 0;
	padding: 30px 20px;
	background: #1c2424;
	width:auto;
	overflow:hidden;
	background: #1c2424 url(img/bg_bas_page_blanc-trans.png) no-repeat top center;
 	height: 60px;
	text-align: center;
	}
	#footer p {
		margin: 0;
		line-height: 180%;
		color: #fff;
		margin-top: 15px;
		font-size:80%;
		}
		#footer p a.credit {
			padding: 0 0 0 10px;
			margin: 0 10px 0 0;
			color: #fff;
			text-decoration: none;
			}

#flash {
		position: absolute;
		z-index: 100;
		top:-195px;
		right:0;
	}
#realisations {
		margin-top: 70px;
	}
	
/* formulaires */

.form {
    margin-top: 15px;
}
.form p {
	text-align: left;
}
fieldset {
	border: #fff solid 1px;
	padding: 10px;
	margin-bottom: 10px;
}
label {
	cursor: pointer;
	float: left;
	width: 120px;
	margin-right:0.5em;
  	padding-top:0.2em;
  	text-align:right;
}
input[type=text], select {
	background: transparent url(img/bg-input.gif) no-repeat left top;
	border: none;
	height: 28px;
	width:211px;
	padding: 6px 5px 3px 5px;
}
textarea {
	background: transparent url(img/bg-textarea_long.gif) no-repeat left top;
	border: none;
}

/* tableau */ /* Source : Veerle's blog */


table {
	width:90%;
	border-top:1px solid #e5eff8;
	border-right:1px solid #e5eff8;
	margin:1em auto;
		border-collapse:collapse;
	}
caption {
	color: #9ba9b4;
	font-size:.94em;
	letter-spacing:.1em;
	margin:1em 0 0 0;
	padding:20px;
	caption-side:top;
	text-align:center;
	}
tr.odd td	{
	background:#f7fbff
	}
tr.odd .column1	{
	background:#f4f9fe;
	}
.column1	{
	background:#f9fcfe;
	}
td {
	color:#678197;
	border-bottom:1px solid #e5eff8;
	border-left:1px solid #e5eff8;
	padding:.3em 1em;
	text-align:center;
	}
th {
	font-weight:normal;
	color: #678197;
	text-align:left;
	border-bottom: 1px solid #e5eff8;
	border-left:1px solid #e5eff8;
	padding:.3em 1em;
	}
thead th {
	background:#f4f9fe;
	text-align:center;
	font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	color:#66a3d3
	}
tfoot th {
	text-align:center;
	background:#f4f9fe;
	}
tfoot th strong {
	font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	margin:.5em .5em .5em 0;
	color:#66a3d3;
		}
tfoot th em {
	color:#f03b58;
	font-weight: bold;
	font-size: 1.1em;
	font-style: normal;
	}

/* plan du site */
#sitemap ul {
	padding: 5px 0;
}

#sitemap ul ul ul {
	margin-left: 25px;
 	font-size: 80%;
}
/* scripts et effets */

#box_logo {
	height: 587px;
	width: 750px;
	position: relative;
	z-index: 10;
}

.run {
 
}

#box_logo_2 {
	position: absolute;
	z-index: 0;
	top: 5px;
	background-color: #fff;
	display: none;
}

#box_logo_test {
	position: absolute;
	z-index: 2;
	top: 624px;
	display: none;
}

a#promotion {
	color: #000;
	height: 116px;
	width: 53px;
	top: 32%;
	left: 0;
	cursor: pointer;
	text-indent: -100000px;
	position: fixed;
	z-index: 100000;
	overflow: hidden;
	margin-left: -12px;
	background-color: transparent;
	background-image: url(img/promotion.png);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: 0% 0%;
}

a#promotion:hover {
	margin-left: -6px;
}

#panel {
	background: #754c24;
	height: 200px;
	display: none;
}
.slide {
	display:none;
}
.btn-slide {
	background: url(img/fleche_simple_rouge.gif) no-repeat 0 5px;
	padding-left:10px;
}
.active {
	background: url(img/bg_navigation_rouge.gif) no-repeat 0 5px;
}
/* effets page happy */

h2 em {
	font: normal 80%/100% Arial, Helvetica, sans-serif;
	color: #999999;
}
#largeImg {
	border: solid 1px #ccc;
	width: 550px;
	height: 400px;
	padding: 5px;
}
.thumbs img {
	border: solid 1px #ccc;
	width: 30px;
	height: 30px;
	padding: 4px;
}
.thumbs img:hover {
	border-color: #FF9900;
}

/* deco */

.xhtml p {
	background: transparent url(img/icon_txt.gif) no-repeat left top;
	text-indent:25px;
}
.css p {
	background: transparent url(img/icon_css.gif) no-repeat left top;
	text-indent:25px;
}
.php p {
	background: transparent url(img/icon_phps.gif) no-repeat left top;
	text-indent:25px;
}
.mysql p {
	background: transparent url(img/database.png) no-repeat left top;
	text-indent:25px;
}
.javascript p {
	background: transparent url(img/icon_exe.gif) no-repeat left top;
	text-indent:25px;
}
.ajax p {
	background: transparent url(img/icon_torrent.gif) no-repeat left top;
	text-indent:25px;
}
.flash p {
	background: transparent url(img/icon_flash.gif) no-repeat left top;
	text-indent:25px;
}

/*** progress bar full css ***/

/* DEFINITION LIST PROGRESS BAR */

dl, dt, dd{margin:5px 0;padding:0;}

dd{
	width:216px;
	height:41px;
	background:url(img/bg_bar.gif) no-repeat 0 0;
	position:relative;
}
dd span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(img/bar.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
dd em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(img/bg_cover.gif) repeat-x;
	top:0;
}


/* SINGLE PROGRESS BAR */

.progressBar{
	width:216px;
	height:41px;
	background:url(img/bg_bar.gif) no-repeat 0 0;
	position:relative;
}
.progressBar span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(img/bar.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
.progressBar em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(img/bg_cover.gif) repeat-x 0 0;
	top:0;
	color:#fff;
	/*text-indent:-115px; pour centrer */
	text-indent: -180px;
	font-weight:bold;
}