/* Utilisation des Google fonts Lobster et Economica. Importées et stockée sur le serveur pour éviter*/
/* un ralentissement à l'affichage des pages lorsque les fontes sont chargées depuis une url google */
@font-face {
    font-family: 'Economica';
    src: url('fonts/economica-regular-webfont.eot');
    src: url('fonts/economica-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/economica-regular-webfont.woff') format('woff'),
         url('fonts/economica-regular-webfont.ttf') format('truetype'),
         url('fonts/economica-regular-webfont.svg#economicaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lobster';
    src: url('fonts/lobstertwo-regular-webfont.eot');
    src: url('fonts/lobstertwo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lobstertwo-regular-webfont.woff') format('woff'),
         url('fonts/lobstertwo-regular-webfont.ttf') format('truetype'),
         url('fonts/lobstertwo-regular-webfont.svg#lobster_tworegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lobster';
    src: url('fonts/lobstertwo-italic-webfont.eot');
    src: url('fonts/lobstertwo-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lobstertwo-italic-webfont.woff') format('woff'),
         url('fonts/lobstertwo-italic-webfont.ttf') format('truetype'),
         url('fonts/lobstertwo-italic-webfont.svg#lobster_twoitalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

html,body
{
	/* nécessaire à l'affichage du background radial-gradient (cf. body)*/
	/* utile aussi pour l'alignement vertical du bloc central */
	height: 100%;
	margin : 0px;
	padding : 0px;
}

body
{
	overflow:hidden;
	color:#ffffff;
	text-align:center; /*nécessaire a l'alignement horizontal du bloc central*/
	background: #66664c; /*pas forcément indispensable, mais pour la compatibilité descendante, c'est pas plus mal*/
	background: -moz-radial-gradient(0% 100%, circle cover, #66664c 0%, #cccc99 58%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#66664c), color-stop(58%,#cccc99));
	background: -webkit-radial-gradient(center, ellipse cover,  #66664c 0%,#cccc99 58%);
	background: -o-radial-gradient(center, ellipse cover,  #66664c 0%,#cccc99 58%);
	background: -ms-radial-gradient(center, ellipse cover,  #66664c 0%,#cccc99 58%);
	background: radial-gradient(ellipse at center,  #66664c 0%,#cccc99 58%);
}

p
{
	font-size:1em;
	margin:0;	
	padding:0;
}

/* titres */
h1
{
	font-size:6em;
	font-family:"Lobster", serif;
	letter-spacing:-0.02em;
	line-Height: 0.1em;
	text-shadow: 0 1px 0 #eee,
             0 2px 0 #e5e5e5,
             -1px 3px 0 #C8C8C8,
             -1px 4px 0 #C1C1C1,
             -2px 5px 0 #B9B9B9,
             -2px 6px 0 #B2B2B2,
             -2px 7px 2px rgba(0,0,0, 0.6),
             -2px 7px 8px rgba(0,0,0, 0.2),
             -2px 7px 45px rgba(0,0,0, 0.4);
}

h2
{
	font-size:5em;
	font-family:"Lobster", serif;
	line-Height: 0.1em;
}

h3
{
	font-size:3em;
	font-family:"Lobster", serif;
	line-Height: 0.1em;
}

/* liens */
a,a:visited
{
	color:#ffffff;
	text-decoration:none;
}

a:hover
{
	color:#999966;
}

article a:hover

{
	color:#ffffff;
	opacity:1;
}

/* header */
header
{
	height:50px;
	background-image: url("./img/fond_noir.png");
	background-repeat:repeat-x;
	background-position:0px -270px;
	padding-top : 15px;

}

/* menu de navigation haut*/
nav
{
	text-align:center;
	font-size:1.5em;
	font-family:"Economica", sans-serif;
	color:#999966;
}

/* éléments conteneurs */
#struct
{
	height:90%;
}

section, #struct
{
    display:inline-block;
    vertical-align:middle;
}

/* conteneur principal (centre de la page)*/
section
{
	width:820px;
	height:640px;
	margin: 0 auto;
}

/* élements section */
section div, section img
{
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease;
	
	display: inline-block;
	float: left; 
	margin : 0px;
	overflow: hidden;
	
	color:#ffffff;
	box-shadow: 0px 0px 10px #000000;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

/* liens cliquables  */
section a
{
	display: block ;
	height: 100% ;
}

/* articles (contenus dans les div a1 a2 b2 etc) */
article
{
	display: inline-block;
	vertical-align: middle;
	text-align:justify;
	font-family:arial, sans-serif;
	font-size: 0.8em;
	text-align:justify;
	word-wrap: break-word;
	overflow:hidden;
	padding:30px;
	margin: 20px;
	
	opacity:0.5;
	-khtml-opacity:.50; 
	-moz-opacity:.50;
	-ms-filter:"alpha(opacity=50)";
}

/* affichage/masquage de la description */
/* utilisé sur la page des réalisations */

.description
{
	display:none;
}

.image 
{
	padding:0px;
	margin: 0px;
}

div:hover .image
{
	display: none;
}

div:hover .description
{
	display: block;
	padding:10px;
	margin: 0px;
}

/* footer/bas de page */
footer
{
position:absolute;
bottom:0px;
height:30px;
width:100%;
padding-top:10px;
margin-bottom :0px;

background-image: url("./img/fond_noir.png");
background-repeat:repeat-x;
background-position:0px -200px;
box-shadow: 0px 0px 10px #000000;

font-size:1.0em;
font-family:"Economica", sans-serif;
text-align:center;
}

/* maquette de page a, 7 blocs*/
#a1
{
	width:300px;
	height:240px;
}

#a2
{
	width:220px;
	height:240px;
}

#a3
{
	width:300px;
	height:240px;
}

#a4
{
	width:450px;
	height:370px;
}

#a5
{
	width:370px;
	height:220px;
}
#a6
{
	width:185px;
	height:150px;
}
#a7
{
	width:185px;
	height:150px;
}

/* maquette de page b, à 3 blocs horizontaux*/
#b1
{
	width:820px;
	height:320px;
}

#b2
{
	width:410px;
	height:320px;
}

#b3
{
	width:410px;
	height:320px;
}

/* maquette de page c, à 4 blocs*/
#c1
{
	width:606px;
	height:640px;
}

#c2
{
	width:214px;
	height:213px;
}

#c3
{
	width:214px;
	height:214px;
}

#c4
{
	width:214px;
	height:213px;
}

/* couleurs */	
.black
{
	background-color:#333333;	
}

.black_static, .black:hover
{
	background-color:#000000;
}

.lightgrey
{
	background-color:#cccccc;	
}

.light_grey_static, .lightgrey:hover
{
	background-color:#333333;
}

.midgrey
{
	background-color:#999999;	
}

.midgrey_static, .midgrey:hover
{
	background-color:#333333;
}

.darkgrey
{
	background-color:#666666;	
}

.darkgrey_static, .darkgrey:hover
{
	background-color:#333333;
}

.yellow
{
	background-color:#e1e1e1;
}

.yellow_static, .yellow:hover
{
	background-color:#ffcc00;
}

.green
{
	background-color:#909090;
}

.green_static, .green:hover
{
	background-color:#339900;
}

.red
{
	background-color:#c0c0c0;
}

.red_static, .red:hover
{
	background-color:#cc3300;
}

.purple
{
	background-color:#cccccc;
}

.purple_static, .purple:hover
{
	background-color:#924545;
}

.blue
{
	background-color:#666666;
}

.blue_static, .blue:hover
{
	background-color:#0066cc;
}

.opac
{
	background-color:#000000;
}

.opac img, .trans:hover img
{
	opacity:0.2
}

.opac:hover img, .trans img
{
	opacity:1
}