@charset "utf-8";
html, body{
margin:0;
padding:0;
height:100%;
background:url(images/fon.png);
}

.blog{

top:5px;
left:5px;
width:150px;
height:20px;
font-family: "Trebuchet MS";
font-size:14px;
color:#333;
display:inline-block;
border:none;

}

:focus{
outline:none;
}

.gallery{
margin:20px auto;
width:320px;
height:240px;
position:relative;
}


a{
display:inline-block;
width:200px;
height:141px;
position:relative;
border:5px solid #fff;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

a img{
display:block;
width:100%;
height:100%;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:2s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:2s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:2s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:2s;
position:absolute;
z-index:1;
top:0px;
left:0px;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;    
}


.closed{
position:absolute;
top:85px;
right:195px;
display:none;
text-align:center;
font-weight:bold;
font-size:70px;
color:#555;
width:20px;
height:20px;
-webkit-text-shadow:0px 0px 5px #fff;
-moz-text-shadow:0px 0px 5px #222;
text-shadow:0px 0px 5px #fff;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
cursor:pointer;
z-index:30;
}

.closed-layer{
display:none;
position:absolute;
top:140px;
left:150px;
width:500px;
height:352px;
background:transparent;
z-index:30;
cursor:pointer;
}

a:focus~.closed, a:focus~.closed-layer{
display:block;
}


a:focus{
border:none;
}

a:focus img{
width:250%;
height:250%;
position:absolute;
box-shadow:0 0 15px 2px #000;
-moz-box-shadow:0 0 15px 2px #000;
-webkit-box-shadow:0 0 15px 2px #000;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:2s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:2s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:2s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:2s;
cursor:default;
z-index:25;
}



a:focus:nth-child(4n+1) img{
left:150px;
}

a:focus:nth-child(4n+2) img{
left:-50px;
}

a:focus:nth-child(4n+3) img{
left:-250px;
}

a:focus:nth-child(4n+4) img{
left:-460px;
}

a:focus:nth-child(-n+4) img{
top:140px;
}

a:focus:nth-child(n+9) img{
top:-150px;
}

a:focus:nth-child(n+13) img{
top:-295px;
}

*{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{margin:0;padding:0;}
#links{ text-align:left;}
#smoke{ position:absolute; margin-top:40px; color:#33C;}
#imagin{ position:absolute;}
body{ background-color:#fff;color:#999;font-family: Arial, Helvetica, sans-serif;margin:0;padding:0;}
h1{font-family:Arial, Helvetica, sans-serif;color: #999; font-size:18px;padding-left:15px; letter-spacing:2px;margin-top:10px; margin-bottom:12px;margin-left:50px;}
h2{font-family:Arial, Helvetica, sans-serif;color:#999; font-size:18px;padding-left:15px; letter-spacing:2px;margin-left:50px;margin-top:10px; margin-bottom:12px;}
h3{font-family:Arial, Helvetica, sans-serif;color:#999; font-size:18px;padding-left:15px;margin-top:10px; margin-bottom:12px; letter-spacing:2px;margin-top:10px; margin-bottom:12px;}
h4{font-family:Arial, Helvetica, sans-serif;color:#999; font-size:18px;padding-left:15px; letter-spacing:2px;margin-top:10px; margin-bottom:12px;}
h5{font-family:Arial, Helvetica, sans-serif;color:#999; font-size:18px;padding-left:15px; letter-spacing:2px; margin-top:10px; margin-bottom:12px;}
h6{font-family:Arial, Helvetica, sans-serif;color: #bbb; font-size:18px;margin-left:400px;letter-spacing:2px; margin-top:200px; margin-bottom:12px; position:absolute;}
h7{font-family:Arial, Helvetica, sans-serif;color: #bbb; font-size:18px;padding-left:15px; letter-spacing:2px; margin-top:10px; margin-bottom:12px;}
p{background:#fff;color: #999; line-height:1.4em; }
img{padding:15px; border:0;}
INPUT{color:#999;font-size: 14px;font-family:Arial, Helvetica, sans-serif;background-color:#33C}
SELECT{color:#999;font-size: 14px;font-family:Arial, Helvetica, sans-serif;background-color:#33C}
TEXTAREA{color: #999;font-size: 14px;font-family:Arial, Helvetica, sans-serif;background-color:#33C}
.txterror{color: #999; font-size: 14px;font-family:Arial, Helvetica, sans-serif}
.txtform{color:#999;padding:15px; margin-left:60px;}
.copy{background:#333;color:#fff;font-family:Arial, Helvetica, sans-serif;margin:0;padding:0;margin-top:0px;margin-left:0px;margin-right:0px;margin-bottom:0px;}
.come{background:#fff;color:#000;font-family:Arial, Helvetica, sans-serif;margin:0;padding:0;margin-top:0px;margin-left:0px;margin-right:0px;margin-bottom:0px;}
.flash2{ margin-top:200px;}
.flashobject{margin-top:150px;}
#comment{ position:absolute; vertical-align: bottom;}
.ma_face{float:left;border:15px #333 solid;}
.ma_fase{float:right;border:15px #333 solid;}
.identityz{ background-color:#000000;width:1280px;height:600px;}
.nostyle{ list-style:none;}
#flashobjecttext{ }
#flashobjecttext p{text-align: left; width:500px;}
#descriptionn{ color:#999;}
#descriptionn p{  width:590px;}
#descriptionn span{
font-family:"Arial Black", Gadget, sans-serif; font-size:12px;
}
#footer{ background:#29282D;}
#footer a{font-family:Arial, Helvetica, sans-serif;color:#fff;}
#footer a:link{background:#29282D;}
#footer a:visited{background:#29282D;}
#footer a:hover{color:#c0D8e0;background: #0099CC; text-align:center; border:#999999 2px solid; }
#footer a:active{background:#29282D;}
#footer a:focus{background:#29282D;}
#absolum{position:absolute;}
#wearehere{
	font-family:Arial, Helvetica, sans-serif;
	color:#F00;
	font-size:18px;
	font-weight:bold;
	text-decoration:none;
	}
#copy{text-align:right}
#copy a{font-size:10px }

#copy a:visited{
color:#999;
}
#copy a:hover{color:#FF00FF;}


#signature{font-family:Arial, Helvetica, sans-serif;color:#333;font-size:11px; text-decoration:none;}
#menu{list-style:none;margin:0;padding:0; background:#29282D; text-align:left;}
#menu span{
	width:0px;
	height:0px;
}
.valeurs{margin-left:20px;width:400px; display:block;}
#menu a{display:block;font-family:Arial, Helvetica, sans-serif;color:#fff;}
#menu a:link{background:#29282D;}
#menu a:visited{background:#29282D;}
#menu a:hover{color:#333;background:#29282D; text-align:center;}
#footer a:active{background:#fff;}
#menu a:focus{background:#29282D;}
.wall{ position:absolute;}
#navigation{/*position:absolute;*/margin-top:120px; margin-left:30px;}
#myimage{}
a{font-family:Arial, Helvetica, sans-serif;color: #999; font-size:16px; text-decoration:none;padding:5px;}
a:link{font-family:Arial, Helvetica, sans-serif;color:#999;font-size:14px; text-decoration:none;}
a:visited{font-family:Arial, Helvetica, sans-serif;color:#999;font-size:14px; text-decoration:none;}
a:hover{font-family:Arial, Helvetica, sans-serif;color: #333;font-size:14px; text-decoration:none;}
a:active{font-family:Arial, Helvetica, sans-serif;color: #333;font-size:14px; text-decoration:none;}
a:focus{font-family:Arial, Helvetica, sans-serif;color:#333;font-size:14px; text-decoration:none;}
td{overflow-x: hidden;}
/* © jonathanperrot2010 */@page {}
	table { }
	td, th { vertical-align:top; font-size:12pt;}
	h1, h2, h3, h4, h5, h6 { }
	ol, ul { margin:0; padding:0;}
	li { list-style: none; margin:0; padding:0;}
	li span.odfLiEnd { clear: both; line-height:0; width:0; height:0; margin:0; padding:0; }
	span.footnodeNumber {  }
	* { margin:0; }
	.P1 { font-size:12pt; font-family:Arial, Helvetica, sans-serif;background:#fff;color: #999; line-height:1.4em; }
	.P2 { font-size:16pt; font-family:Arial, Helvetica, sans-serif; margin-top:0cm;background:#fff;color: #999; line-height:1.4em; font-style:italic; }
	.P3 { font-size:16pt; font-family:Arial, Helvetica, sans-serif; margin-top:0cm;background:#fff;color: #999; line-height:1.4em; }
	.P4 { font-size:18px; font-family:Arial, Helvetica, sans-serif; margin-top:0cm;background:#fff;color: #999; line-height:1.4em; color:#999; font-weight:bold; }
	.Standard { font-size:16px; font-family:Arial, Helvetica, sans-serif; }
	.T1 { font-family:Arial, Helvetica, sans-serif; font-size:16px; }
	.T2 { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-style:italic; }
	.T3 { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-style:italic; }
	.T4 { font-family:Arial, Helvetica, sans-serif; font-size:16px; }
	.T5 { font-family:Arial, Helvetica, sans-serif; font-size:16px; }
	.T6 { color:#fc0008; font-family:Arial, Helvetica, sans-serif; font-size:10pt; }
span{ font-family:Arial, Helvetica, sans-serif;background:#fff;color: #999; margin-left:30px; font-weight:400;}

/* CSS */

/* we need only one class called zoomy or whatever, which we will later apply to our images. we will first declare this class in normal state and adjust its properties like setting the opacity [read transparency] of images and later the transition - a nice CSS3 feature */

.zoomy
{
opacity:1;

filter: alpha(opacity=80); /* for Internet explorer */

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /* for IE8 */

-webkit-transition: all .5s ease-in-out;

/* for Chrome & Safari - the transition when the mouse goes away from over the image */

transition: all .5s ease-in-out; /* standard CSS3 transition code */

-moz-transition: all .5s ease-in-out; /* transition effect for Firefox */

-ms-transition: all .5s ease-in-out; /* transition effect for IE */

-webkit-transform: scale(1);

/* the image is scaled down to its original size when in normal state */

-moz-transform: scale(1);

-ms-transform: scale(1);

z-index:1; /* ensures that the image in normal mode does not overlap the hovered image */
margin-bottom:200px;
}

/* Now here is the magic trick. we define the same class but in the 'hover' state of the mouse. That is, when mouse hovers upon the image? we can achieve a Lightbox type effect with this */

.zoomy:hover
{
/*opacity:1;*/

/* so in the line above, we are telling browser that when the mouse is hovered, the image should look bright, creating a nice effect which makes it distinguished from other images. Copy all the relevant compatible code for other browsers from the first declaration of this class and change the values. */

-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;

/* In the lines above, we are telling every browser to do a smooth transition of the image in 1/2 of a second */

-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);

/* In these lines we are telling the browser to scale the hovered image to 250% times its original size, so as to create a nice Lightbox like effect */
z-index:2; /* this line ensures that the hovered image remains at top */

}