@import url(http://fonts.googleapis.com/css?family=Arvo);

* { border: 0; margin: 0; padding: 0; outline: 0; }

ul { list-style: none; }

h2 { font-family: Arvo, Arial, sans-serif; font-size: 30px; line-height: 25px; font-weight: 500; text-transform: uppercase; color: white; letter-spacing: 1px; }

p { font-family: Georgia, Arial, sans-serif; font-size: 15px; line-height: 15px; font-weight: 100; color: white; }

/* @end */
/* @group Gallery */
section { min-width: 100%; width: 100%; min-height: 100%; text-align: center;background-color: #004775;box-shadow: 0 0 5px;}

section li { display: inline-block; vertical-align: top; position: relative; 
/* @group Over */ /* @group Description */ /* @end *
/* @end */ }
section li:hover .overLayer { -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; opacity: 0.6; display: block; background: gray; }
section li:hover .infoLayer { -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; opacity: 1; display: block; }
section li a { display: block; width: 240px; height: 150px; position: absolute; top: 10px; left: 0; z-index: 6; }
section li a.spinner { background-size: 100%; background-image: url("../img/effects/spinner.gif"); width: 50px; height: 50px; position: absolute; left: 95px; top: 60px; }
section li img { border: none; margin: 10px 10px 0 0; }
section li .overLayer, section li .infoLayer { -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; width: 240px; height: 150px; position: absolute; text-align: center; opacity: 0; top: 10px; left: 0; z-index: 4; /* @end */ }
section li .overLayer ul, section li .infoLayer ul { padding: 50px 0 0 0; }
section li .overLayer ul li, section li .infoLayer ul li { display: block; margin: 0 auto; width: 200px; padding: 0 0 5px 0; }
section li .overLayer ul li:first-child, section li .infoLayer ul li:first-child { border-bottom: 2px white solid; }
section li .overLayer ul li:last-child, section li .infoLayer ul li:last-child { padding: 5px 0 0 0; text-transform: lowercase; }
section li .overLayer ul li h2, section li .infoLayer ul li h2 { font-size: 25px; }
section li .projectInfo { display: none; }

/* end */
.content-jeuxpartout{
	width:1000px;
	height:600px;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	background-color:#023048;
	margin:auto;
	}
	.jeux{
	width:720px;
	height:600px;
	border:1px solid #004775;
	}
	.jeuxbanner{
	width:1000px;
	height:40px;
	background-color:#188bd6;
	-moz-border-radius-topleft: 9px;
	-webkit-border-top-left-radius: 9px;
	 border-top-left-radius: 9px;
	-moz-border-radius-topright: 9px;
	-webkit-border-top-right-radius: 9px;
	 border-top-right-radius: 9px;
	 box-shadow: 0 0 5px;
	}

	.content-jeuxpartout #div1{
	float:left;
	width:720px;
	margin:5px;
	}
	.content-jeuxpartout #div2{
	float:left;
	margin-left: 44px;
	width:200px;
	margin-top:10px;
	}
	
		input[type="text"]{
    padding: 5px;   
	padding-left: 10px;   
    border: 1px solid #044267;
    background-color:#044267;
   -webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	height:30px;
	color:#FFF;
	width:300px;
	font-size:18px;
	background-image:url(../img/recherche.png);
	background-position:275px 1px;
  background-repeat:no-repeat no-repeat;
}

.classname {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #02c2e9), color-stop(1, #02c2e9) );
	background:-moz-linear-gradient( center top, #02c2e9 5%, #02c2e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#02c2e9', endColorstr='#02c2e9');
	background-color:#02c2e9;
	-webkit-border-top-left-radius:3px;
	-moz-border-radius-topleft:3px;
	border-top-left-radius:3px;
	-webkit-border-top-right-radius:3px;
	-moz-border-radius-topright:3px;
	border-top-right-radius:3px;
	-webkit-border-bottom-right-radius:3px;
	-moz-border-radius-bottomright:3px;
	border-bottom-right-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-bottomleft:3px;
	border-bottom-left-radius:3px;
	text-indent:0px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	text-decoration:none;
	padding-left:5px;
	padding-right:8px;
	text-align:center;
	margin-top: 10px;
}
.classname:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #02c2e9), color-stop(1, #02c2e9) );
	background:-moz-linear-gradient( center top, #02c2e9 5%, #02c2e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#02c2e9', endColorstr='#02c2e9');
	background-color:#02c2e9;
	text-decoration:none;
}

.logoj{
width: 200px; height: 47px;
}
.jouer{
font-size:18px;color:red;
text-transform:uppercase;
}

/* This button was generated using CSSButtonGenerator.com */