/* ------------------------------------------------------------------------------------------------------------------------- */
/*
	File: Core.css

	Game: Soniro
	Created: 28/08/2012
	Last update: 28/08/2012 - Alpha Release 1
	Language: Cascading Style Sheets 3

	License: 

	Copyright © 2011-2012 Skykill. All rights reserved

	Author: Skykill
	Description: Contains the main CSS file for all plugins.
	Change History: 
	[Note: note for this file.
           note for this file.]
*/
/* ------------------------------------------------------------------------------------------------------------------------- */
@charset "UTF-8";
/* Include the global HTML styling */
@import url("Global.css");
/* ------------------------------------------------------------------------------------------------------------------------- */

/*TODO: Add standard code header comment here.*/
.contenuArticle {background-color: #FFFFFF; filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}
#backround
{
	position: absolute;
	right: 0;
	left: 0;
	width: 100%; height: 100%;     /* to match DIVs size          */
	opacity: 0.90;
	/*background-color: #FFFFFF;*/
	/*background: #205b93 url("http://www.ipbforumskins.com/skindemo/public/style_images/concise/background.png") repeat 50% 0;*/
	-webkit-transition: opacity 5s linear;
	-o-transition: opacity 5s linear;
	-moz-transition: opacity 5s linear;
	transition: opacity 5s linear;
}
body
{
	/*color: #fff;*/
	font: normal 11px tahoma, helvetica, arial, sans-serif;
}
input, select, textarea
{
    font: 12px tahoma,helvetica,arial,sans-serif;
}
#secretMessageBox
{
  padding: 12px;
  /*margin: 12px 2px;*/
  font-size: 16px;
  -webkit-transition: 0.1s linear all;
}
#content
{
  border-radius: 6px;
  background-color: white;
  margin: 10px;
  padding: 10px;
  box-shadow: inset 0px 1px #D2D2D2;
}
#scene3D{
width:300px;
      height:300px;
      perspective:500px;
      -webkit-perspective:500px;
      -moz-perspective:500px;
      -ms-perspective:500px;
}
#flip{
      width:300px;
      height:300px;
      transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      
      transition:all 1s ease;
      -webkit-transition:all 1s ease;
      -moz-transition:all 1s ease;
      -ms-transition:all 1s ease;
}
#scene3D:hover #flip{
	  transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
}
#flip div{
      position:absolute;
      width:300px;
      height:300px;
      background:red;
      backface-visibility:hidden;
      -webkit-backface-visibility: hidden;

}
#flip div:last-child{
      background:green;
      transform: rotateY(180deg);
     -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
}

/* MOVIE POSTERS */
#movieposters { list-style:none; margin:100px 0; height:550px; }
#movieposters li { display:inline; float:left;
	-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
#movieposters li:hover { -webkit-perspective: 5000; }
	
#movieposters li img { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);
	-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
	-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
#movieposters li:hover img { -webkit-transform: rotateY(0deg); }

.movieinfo { border:10px solid #fcfafa; padding:20px; width:200px; height:180px; background-color:#deddcd; margin:-195px 0 0 55px; position:absolute;
	-moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;
	-webkit-transform: translateZ(30px) rotateY(30deg);
	-webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; }
	
#movieposters li:hover .movieinfo { -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px #888; margin:-175px 0 0 30px; }
	
.movieinfo h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; }
.movieinfo p { padding-bottom:15px; }
.movieinfo a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; width:80px; text-align:center; margin:0 auto;
	-moz-border-radius:5px; -webkit-border-radius:5px; }
.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }
.container_cube{
	-webkit-perspective : 600;
	margin-top:100px;
}
#cube{
  	width: 200px;
	height: 200px;
	margin: 0 auto 40px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 2s;
	-webkit-transform:translateZ(-100px) rotateX( -220deg ) rotateY( 45deg ); 
}
#cube div{
	position:absolute;
	-webkit-backface-visibility: visible;
	overflow:hidden;
	width:200px;
   	height:200px;
}
#front{
   	-webkit-transform: translateZ( 100px );
}
#back{
	-webkit-transform: translateZ( -100px );
}
#left{
	-webkit-transform: rotateY( 90deg ) translateZ( 100px );
}
#right{
	-webkit-transform: rotateY( -90deg ) translateZ( 100px );
}
#up{
    -webkit-transform: rotateX(90deg) translateZ( 100px );
}
#bottom
{
	-webkit-transform: rotateX(-90deg) translateZ( 100px );
}
#cube.spinning
{
	-webkit-animation: spinCube 8s infinite ease-in-out;
}
/*animation css*/
@-webkit-keyframes spinCube {
	0% { 
		-webkit-transform: translateZ( -100px ) rotateX(   0deg ) rotateY(   0deg );
	}
	100% {
		-webkit-transform: translateZ( -100px ) rotateX( 360deg ) rotateY( 360deg );
	}
}
		body
		{
			padding: 0;
			margin: 0;
		}
		#all
		{
			width: 680px;
			margin-top: 50px;
			margin-left: auto;
			margin-right: auto;
		}
		#page-flip
		{
			/*background-image: url(http://www.romancortes.com/ficheros/pagebg.jpg);*/
			position: absolute;
			/*padding: 40px 40px 40px 340px;*/
			width: 300px;
			height: 400px;
			/*overflow: hidden;*/
		}
		#r1
		{
			position: absolute;
			z-index: 2;
			-webkit-transform-origin: 1315px 500px;
			-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
			-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
			-webkit-transition-duration: 1s;
		}
		#p1
		{
			width: 1285px;
			height: 1388px;
			overflow: hidden;
		}
 
		#p1 > div
		{
			-webkit-transform-origin: 285px 0;
			-webkit-transform: translate(1030px, 500px) rotate(32deg);
			-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
			-webkit-transition-duration: 1s;
			width: 285px;
			height: 388px;
			background-image: url(http://blueheam.fr/BHeam_Images/background.jpg);
		}
		#p1 > div > div
		{
			width: 10px;
			height: 388px;
			background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
		}
 
		#p2 > div
		{
			width: 285px;
			height: 388px;
			-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
			position: absolute;
			z-index: 1;
			background-image: url(http://www.romancortes.com/ficheros/page2.jpg);
		}
		#r3
		{
			-webkit-transform-origin: 1315px 500px;
			-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
			-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
			-webkit-transition-duration: 1s;
			position: absolute;
			z-index: 2;
		}
 
		#s3
		{
			-webkit-transform-origin: 70px 500px;
			-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
			-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
			-webkit-transition-duration: 1s;
			position: absolute;
			z-index: 1;
		}
		#page-flip:active #s3
		{
			-webkit-transform-origin: 325px 500px;
			-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
		}
		#sp3
		{
			width: 25px;
			height: 1000px;
			background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
			-webkit-transition-property: width;
			-webkit-transition-duration: 1s;
			overflow: hidden;
		}
		#page-flip:active #sp3
		{
			width: 11px;
		}
		.s
		{
			width: 285px;
			height: 388px;
			position: absolute;
			overflow: hidden;
			z-index: 3;
		}
		#s2
		{
			-webkit-transform-origin: 45px 500px;
			-webkit-transform: translate(240px, -500px) rotate(-32deg);
			-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
			-webkit-transition-duration: 1s;
			position: absolute;
		}
		#sp2
		{
			width: 15px;
			height: 1000px;
			background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
			overflow: hidden;
		}
		#s4
		{
			opacity: 1;
			-webkit-transition-duration: 0.5s;
		}
		#page-flip:active #s4
		{
			opacity: 0;
		}
		#page-flip:active #s2
		{
			-webkit-transform-origin: 300px 500px;
			-webkit-transform: translate(-15px, -500px) rotate(0deg);
		}
		#p3
		{
			width: 1285px;
			height: 1388px;
			overflow: hidden;
		}
		#p3 > div
		{
			-webkit-transform-origin: 0 0;
			-webkit-transform: translate(1255px, 500px) rotate(-32deg);
			-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
			-webkit-transition-duration: 1s;
			-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
			width: 285px;
			height: 388px;
			background-image: url(http://www.romancortes.com/ficheros/page3.jpg);
			overflow: hidden;
		}
		#p3 > div > div
		{
			width: 9px;
			height: 500px;
			float: right;
			background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
		}
		
		#page-flip:active #r1
		{
			-webkit-transform-origin: 1570px 500px;
			-webkit-transform: translate(-1285px, -500px) rotate(0deg);
		}
		#page-flip:active #p1 > div
		{
			-webkit-transform-origin: 285px 0;
			-webkit-transform: translate(1285px, 500px) rotate(0deg);
		}
		#page-flip:active #r3
		{
			-webkit-transform-origin: 1570px 500px;
			-webkit-transform: translate(-1285px, -500px) rotate(0deg);
		}
		#page-flip:active #p3 > div
		{
			-webkit-transform-origin: 0 0;
			-webkit-transform: translate(1000px, 500px) rotate(0deg);
		}
		a
		{
			display: block;
			/*position: absolute;*/
			/*margin: -20000px 0 0 0;*/
			/*padding: 1px;*/
			z-index: 3;
			-webkit-transition-property: margin;
			-webkit-transition-duration: 0.01s;
		}
		#coke
		{
			width: 253px;
			height: 158px;
		}
		a:active
		{
			padding: 0;
			border: 1px dotted #92C7C1;
		}
		#page-flip:active #coke
		{
			-webkit-transition-delay: .8s;
			margin: 33px 0 0 14px;
		}
		#meninas
		{
			width: 253px;
			height: 167px;
		}
		#page-flip:active #meninas
		{
			-webkit-transition-delay: .8s;
			margin: 203px 0 0 14px;
		}
/* Used for create a button */
.WebWindow.button
{
	text-align: center;
	white-space: nowrap;
	width: 220px;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    padding: 4px 10px;
    cursor: pointer;
	/*background: url("http://fr.blueheam.fr/public/style_images/chameleon/highlight_faint.png") repeat-x scroll 0px 0px rgb(50, 50, 50);*/
    border-color: rgb(43, 43, 43);
    color: rgb(255, 255, 255);
    text-shadow: 0px -1px 0px rgb(43, 43, 43);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.43);
    border-radius: 2px 2px 2px 2px;
	text-shadow: #2b2b2b 0px -1px 0px;
	-moz-box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
	-webkit-box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
	box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
	-webkit-transition-property: background-color, padding-left, padding-right;
	-webkit-transition-duration: .8s, .3s, .5s;
	-webkit-transition-timing-function: linear, ease-out;
	/*background: url(border.png) no-repeat, url("http://fr.blueheam.fr/public/style_images/chameleon/highlight_faint.png") repeat-x scroll 0px 0px rgb(50, 50, 50);*/
	background-image: url(../Images/border.png), url("http://fr.blueheam.fr/public/style_images/chameleon/highlight_faint.png");
	background-repeat: no-repeat, repeat-x;
	background-attachment:scroll, scroll;
	background-position: initial, 0px 0px;
	background-color: rgb(50, 50, 50);
	/*background: #cbcbcb url(border.png) no-repeat;*/
	/*color: #174867;*/
	-webkit-box-shadow: 2px 2px 4px #888;
	/*border: 0;*/
	font-family: WebWindow, sans-serif;
}
.WebWindow.button:hover
{ 
	background-color: #434343;
	color: #fff;
	background:#09f;
	background-image: url(../Images/border.png);
	background-repeat: no-repeat;
	/*background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );*/
}
.WebWindow.button:active
{
	-webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 3px;
	-moz-box-shadow: inset rgba(0,0,0,0.8) 0px 1px 3px;
	box-shadow: inset rgba(0,0,0,0.8) 0px 1px 3px;
	position: relative;
	top: 1px;
}
/* You can use this for a list with an animation when you are hover the button. */
.WebWindow.button.list:hover
{
	padding-left:10px;
	padding-right:240px;
}
.WebWindow.button.delete
{
	background: #ad2930 url('http://fr.blueheam.fr/public/style_images/chameleon/highlight_faint.png') repeat-x 0 0;
	border-color: #962D29;
	color: #fff;
	text-shadow: #771c20 0px -1px 0px;
}
.WebWindow.button.delete:hover
{
	background-color: #bf3631;
	color: #fff;
}
.WebWindow.button.alt
{
	background: #646464 url('http://fr.blueheam.fr/public/style_images/chameleon/highlight_faint.png') repeat-x 0 0;
	border-color: #585858;
	color: #fff;
	text-shadow: #474747 0px -1px 0px;
	-moz-box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
	-webkit-box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
	box-shadow: rgba(0,0,0,0.43) 0px 1px 3px;
}
.WebWindow.button.alt:hover
{
	background-color: #6f6f6f;
	color: #fff;
}
.WebWindow.button.alt:active
{
	-webkit-box-shadow: inset rgba(0,0,0,0.5) 0px 1px 3px;
	-moz-box-shadow: inset rgba(0,0,0,0.5) 0px 1px 3px;
	box-shadow: inset rgba(0,0,0,0.5) 0px 1px 3px;
}
input, select, textarea
{
    font: 12px WebWindow, helvetica, arial, sans-serif;
}
.WebWindow.input.text
{
    padding: 6px;
    border: 1px solid rgb(212, 212, 212);
    background: none repeat scroll 0% 0% rgb(252, 252, 252);
    color: rgb(159, 159, 159);
    text-shadow: 0px 1px 0px rgb(255, 255, 255);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) inset;
}
.WebWindow.input.text:focus
{
    outline: medium none;
    background-color: rgb(254, 254, 254);
    color: rgb(85, 85, 85);
    border-color: rgb(175, 214, 234);
    box-shadow: 0px 0px 4px rgb(188, 230, 251) inset, 0px 0px 3px rgb(221, 244, 255);
}
.Container
{
	background-color: rgba(255, 255, 255, 0.2);
	border: 1px solid #05111d;
	border: 1px solid rgba(0,0,0,0.4);
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	height: 64px;
	margin-bottom: 5px;
	color: #fff;
	padding:20px;
	margin: 10px; /* espacement horizontal entre les blocs */
	vertical-align: middle;
	display: inline;
}

.MessageBox
{
	background: url('http:/blueheam.fr/BHeam_Images/trans50.png') repeat;
	background: rgba(0,255,0,0.3) url('http:/blueheam.fr/BHeam_Images/highlight_faint.png') repeat-x 0 0;
	border: 1px solid #05111d;
	border: 1px solid rgba(0,0,0,0.4);
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 5px;
	color: #fff;
	padding:10px;
	margin:0 5px; /* espacement horizontal entre les blocs */

}

.InfoBar
{
	background: url('http:/blueheam.fr/BHeam_Images/trans50.png') repeat;
	background: rgba(0,0,0,0.5) url('http:/blueheam.fr/BHeam_Images/highlight_faint.png') repeat-x 0 0;
	border: 1px solid #05111d;
	border: 1px solid rgba(0,0,0,0.4);
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	height: 64px;
	margin-bottom: 5px;
	color: #fff;
	padding:10px;
	margin:0 5px; /* espacement horizontal entre les blocs */
	display:inline-block;
}

html, body
{
	height: 100%;
}

body
{
	margin: 0;
	padding: 0;
	font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}

#Footer_Container
{
	position: relative;
	min-height: 100%;
}

#content
{
	padding: 5px 10px;
	text-decoration: none;
	color: #fff;
	text-shadow: -1px -1px 0 #888;
	font-weight: bold;
	text-align: center;
	font: normal 10px tahoma, helvetica, arial, sans-serif;
	background: rgba(255,255,255,0.2) url('http:/blueheam.fr/BHeam_Images/highlight_faint.png') repeat-x 0 0;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 1px 20px;
	-moz-box-shadow: rgba(0,0,0,1) 0px 1px 20px;
	box-shadow: rgba(0,0,0,1) 0px 1px 20px;

	-moz-border-radius: 0px 0px 15px 15px;
	-webkit-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
}

#Footer
{
	position: absolute;
	bottom: 0;
	background: url('http:/blueheam.fr/BHeam_Images/trans50.png') repeat;
	background: rgba(0,0,0,0.5) url('http:/blueheam.fr/BHeam_Images/highlight_faint.png') repeat-x 0 0;
	border: 1px solid #05111d;
	border: 1px solid rgba(0,0,0,0.4);
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-moz-border-radius: 15px 15px 0px 0px;
	-webkit-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
	margin-bottom: 5px;
	color: #fff;
	padding:10px;
	margin:0 5px; /* espacement horizontal entre les blocs */
	display:inline-block;
	text-align:center;
	min-width: 300px;
}

/*
li
{
	display: inline;
	margin: 10px;
}

li a
{
	display: inline-block;
	width: 50%;
	padding: 5px 10px;
	text-decoration: none;
	/ *color: #fff;
	text-shadow: -1px -1px 0 #888;
	font-weight: bold;
	text-align: center;* /
	background: rgba(220,20,60,0.7) url('http:/blueheam.fr/BHeam_Images/highlight_faint.png') repeat-x 0 0;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 1px 20px;
	-moz-box-shadow: rgba(0,0,0,1) 0px 1px 20px;
	box-shadow: rgba(0,0,0,1) 0px 1px 20px;

	/ *-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;* /
}

li a:hover, li a:focus
{
	background: rgba(220,20,60,1) url('http:/blueheam.fr/BHeam_Images/highlight_faint.png') repeat-x 0 0;
}

li a:active
{
	background: rgba(220,20,60,0.4) url('http:/blueheam.fr/BHeam_Images/highlight_faint.png') repeat-x 0 0;
}*/

div.bloc { 
padding:10px; /* aération interne des blocs */
margin:0 10px; /* espacement horizontal entre les blocs */
width:100px;
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:left; /* on rétablit l'alignement du texte */ }


.navbox
{
	position: relative;
	float: left;
}

ul.nav
{
	list-style: none;
	display: block;
	/*width: 200px;
	position: relative;*/
	top: 100px;
	left: 100px;
	padding: 60px 0 60px 0;
	background: url(../Images/shad2.png) no-repeat;
	-webkit-background-size: 50% 100%;
}

li
{
	margin: 5px 0 0 0;
}

ul.nav li a {
	-webkit-transition: all 0.3s ease-out;
	background: #cbcbcb url(../Images/border.png) no-repeat;
	color: #174867;
	padding: 7px 15px 7px 15px;
	-webkit-border-top-right-radius: 10px;
 	-webkit-border-bottom-right-radius: 10px;
	/*width: 100px;
	display: block;*/
	text-decoration: none;
	-webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
	background: #ebebeb url(../Images/border.png) no-repeat;
	color: #67a5cd;
	padding: 7px 15px 7px 30px;
}

		.panel {
			float: left;
			width: inherit;
			height: 200px;
			margin: 20px;
			position: relative;
			font-size: .8em;
			
			-webkit-perspective: 600px;
			-moz-perspective: 600px;
		}
		/* -- make sure to declare a default for every property that you want animated -- */
		/* -- general styles, including Y axis rotation -- */
		.panel .front {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 900;
			width: inherit;
			height: inherit;
			border: 1px solid #ccc;
			background: #6b7077;
			text-align: center;

			-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
			-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
			box-shadow: 0 1px 5px rgba(0,0,0,0.9);

			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		.panel.flip .front {
			z-index: 900;
			border-color: #eee;
			background: #333;

			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
			
			-moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
			-webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
			box-shadow: 0 15px 50px rgba(0,0,0,0.2);
		}
		
		.panel .back {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 800;
			width: inherit;
			height: inherit;
			border: 1px solid #ccc;
			background: #333;
			text-shadow: 1px  1px 1px rgba(0,0,0,0.6); 
			
			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateY(-180deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		
		.panel.flip .back {
			z-index: 1000;
			background: #80868d;

			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform: rotateX(0deg) rotateY(0deg);

			box-shadow: 0 15px 50px rgba(0,0,0,0.2);
			-moz-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
			-webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
		}
		
		/* -- X axis rotation for click panel -- */
		.click .front {
			cursor: pointer;
			-webkit-transform: rotateX(0deg);
			-moz-transform: rotateX(0deg);
		}
		.click.flip .front {
			-webkit-transform: rotateX(180deg);
			-moz-transform: rotateX(180deg);
		}
		.click .back {
			cursor: pointer;
			-webkit-transform: rotateX(-180deg);
			-moz-transform: rotateX(-180deg);
		}
		.click.flip .back {
			-webkit-transform: rotateX(0deg);
			-moz-transform: rotateX(0deg);
		}
		
    /* -- swing like a gate -- */
    .swing .front,
    .swing .back {
      width: inherit;
      -webkit-backface-visibility: visible;
         -moz-backface-visibility: visible;
      -webkit-transition-duration: 1s;
         -moz-transition-duration: 1s;
      -webkit-transform-origin: 170px 0;
         -moz-transform-origin: 170px 0;
    }
    .swing .front {
      -webkit-transform: rotateY(0deg);
         -moz-transform: rotateY(0deg);
    }
    .swing .back {
      background-color: #555; /* hiding this side, so get darker */
      -webkit-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
         -moz-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
    }

    .swing.flip .front {
      background-color: #222; /* hiding this side, so get darker */
      -webkit-transform: rotateY(180deg);
         -moz-transform: rotateY(180deg);
    }
    .swing.flip .back {
      background-color: #80888f;
      -webkit-transform: rotateY(0deg) translateX(198px) translateZ(2px);
         -moz-transform: rotateY(0deg) translateX(198px) translateZ(2px);
    }
	
.div1
{
    width:150px;
    height:100px;
    position:relative;
    background:#9F0;}
    
       #div2
       {
           width:50px;
           height:50px;
           background:
           #F00;
    position: absolute
}
h2 a
{
    display: block;
    padding: 48px 0;
}
p a
{
    display: block;
    padding: 36px 24px;
}
.WebWindow
{

}
.WebWindow.flip_list
{
    /*height: 132px;
    width: 624px;
    margin: 48px 0;*/
	padding: 0px;
}
/*#WebWindow-flip_list li*/
.WebWindow.flip_list li
{
   /* width: 132px;
    height: 132px;*/
    float: left;
    margin-right: 0px;
    position: relative;
}
.WebWindow.flip_list li div
{
	background-color: rgba(67, 67, 67, 0.2);
	border: 1px solid #05111d;
	border: 1px solid rgba(0,0,0,0.4);
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	box-shadow: rgba(0,0,0,0.5) 0px 1px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color: #fff;
	padding:5px;
	margin: 10px; /* espacement horizontal entre les blocs */

	background: rgba(255,255,255,0.2) url('http:/blueheam.fr/BHeam_Images/highlight_faint.png') repeat-x 0 0;
	-webkit-box-shadow: rgba(0,0,0,1) 0px 1px 20px;
	-moz-box-shadow: rgba(0,0,0,1) 0px 1px 20px;
	box-shadow: rgba(0,0,0,1) 0px 1px 20px;

	-moz-border-radius: 15px 15px 0px 0px;
	-webkit-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
}
.WebWindow.flip_list li div.flip_list_front
{

}
.WebWindow.flip_list li div.flip_list_back
{
    left: -999em;
    /*background: #999;*/
}

/* Define the global WebWindow font using Adobe Source Sans Pro. */
@font-face
{
	font-family: WebWindow;
	font-style: normal;
	font-weight: normal;
	/* If we use OpenType font (.otf) the text is a bit blur, we should try with a new version of Source Sans Pro. */
	src: url('../Font/Source_Sans_Pro/SourceSansPro-Regular.ttf') format('truetype');
	/*font-style: normal;
	font-weight: 400;
	src: url('../Font/SourceSansPro-Regular.otf') format('opentype');*/
}
@font-face
{
	font-family: WebWindow;
	font-style: normal;
	font-weight:bolder;
	src: url('../Font/Source_Sans_Pro/SourceSansPro-Bold.ttf') format('truetype');
}
@font-face
{
	font-family: WebWindow;
	font-style:italic;
	font-weight:normal;
	src: url('../Font/Source_Sans_Pro/SourceSansPro-It.ttf') format('truetype');
}
@font-face
{
	font-family: WebWindow;
	font-style:italic;
	font-weight:bold;
	src: url('../Font/Source_Sans_Pro/SourceSansPro-BoldIt.ttf') format('truetype');
}
@font-face
{
	font-family: WebWindow;
	font-style:normal;
	font-weight:lighter;
	src: url('../Font/Source_Sans_Pro/SourceSansPro-Light.ttf') format('truetype');
}
@font-face
{
	font-family: WebWindow;
	font-style:italic;
	font-weight:lighter;
	src: url('../Font/Source_Sans_Pro/SourceSansPro-LightIt.ttf') format('truetype');
}