@font-face {font-family: "open-sans"; src: url('images/fonts/OpenSans-Regular.ttf');}
@font-face {font-family: "open-sans"; font-style: italic; src: url('images/fonts/OpenSans-Italic.ttf');}
@font-face {font-family: "open-sans"; font-weight: bold; src: url('images/fonts/OpenSans-Bold.ttf');}
@font-face {font-family: "roboto"; src: url('images/fonts/RobotoCondensed-Regular.ttf');}
@font-face {font-family: "roboto"; font-style: italic; src: url('images/fonts/RobotoCondensed-Italic.ttf');}
@font-face {font-family: "roboto"; font-weight: bold; src: url('images/fonts/RobotoCondensed-Bold.ttf');}

* {margin:0; padding:0;}
html{font-family: 'arial', sans-serif; background-color: #f0f0f0; font-size:14px; color:#535353;}
img {border:0;}
a {text-decoration: none; color:#b9da00;}
.clear {clear:both;}
ul {list-style:none;}

/* vote */
#rating {position:relative; font-size:14px; word-spacing:0.1em; line-height:130%; padding-bottom:40px;}
.star-rating {position:absolute; left:0; top:20px; width:175px; height:35px; background: url(images/rate.png) left top repeat-x;}
.star-rating ul {display:inline; list-style:none; top:0; right:0;}
.star-rating li {display:inline; padding:0; margin:0;}
.star-rating li a {display:inline; width:35px; height:35px; text-decoration:none; text-indent:-9000px; z-index:20; position:absolute; padding:0;}
.star-rating li a:hover {display:inline; background: url(images/rate.png) left bottom; z-index:2; left:0px;}
.star-rating a.one-star {left:0px;}
.star-rating a.one-star:hover {width:35px;}
.star-rating a.two-stars {left:35px;}
.star-rating a.two-stars:hover {width:70px;}
.star-rating a.three-stars {left:70px;}
.star-rating a.three-stars:hover {width:105px;}
.star-rating a.four-stars {left:105px;}
.star-rating a.four-stars:hover {width:140px;}
.star-rating a.five-stars {left:140px;}
.star-rating a.five-stars:hover {width:175px;}
.star-rating li.current-rating {background: url(images/rate.png) left center; position:absolute; top:0; left:0; height:35px; display:block; text-indent:-9000px; z-index:2;}
.star-rating li.noter {padding:0;}

/* pagination */
#pagination {clear:both; text-align:left;}
#pagination ul {list-style:none; display:inline; margin:0; font-size:16px;}
#pagination li {display:inline; line-height:50px; font-weight:bolder;}
#pagination a {padding:10px 7px; text-decoration:none; color:#fff; background-color:#b2ca1a;}
#pagination .actif a, #pagination a:hover {color:#535353; background-color:#ddd;}
#pagination .coing a {-webkit-border-radius:4px 0 0 4px; -moz-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px;}
#pagination .coind a {-webkit-border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0;}

/* Commentaires */
#commentaires {clear:both;}
#commentaires ul li {position:relative; clear:both;}
#commentaires span {font-weight:bolder;}
#commentaires .date {display:inline; color:#898989;}
#commentaires .modo {display:inline; color:#ff0000; font-style:italic;}
#commentaires .barre {border-top:1px solid #ddd; padding-top:10px; margin-top:10px;}
#commentaires .bulle {padding:10px 20px 0 90px; font-weight:bolder; font-size:13px; color:#ff0000; margin-bottom:-10px;}
#commentaires img {width:50px; height:50px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; margin:0 20px 10px 0;}
#commentaires p {display:block;}

#login-form input[type=submit] {margin:10px 0 10px 70px;}
.button {cursor:pointer; font-size:15px; color:#fff; padding:9px 10px 8px 10px; border:0; font-family: 'Roboto Condensed', sans-serif; text-transform:uppercase; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
.button-on {background-color:#b9da00;}
.button-off {background-color:#ff0000;}

/* responsive */
@media only screen and (min-width:0px) and (max-width: 467px) {
    }
@media only screen and (min-width:468px) and (max-width: 750px) {
    }
@media only screen and (max-width: 750px) {
    }
@media only screen and (min-width:751px) and (max-width: 990px) {
    }
@media only screen and (max-width: 990px) {
    }
@media only screen and (min-width: 990px) {
    h1 {font-size:25px; font-weight:bold; margin-bottom:15px; font-family: 'Roboto Condensed', sans-serif;}
    .mb0 {margin-bottom:0;}
    .mbm10 {margin-bottom:-10px;}
    .pb25 {padding-bottom:25px;}
    .mt10 {margin-top:10px;}

    body {background:url(images/bg_top.png) top repeat-x #4f4f4f; background-color: #f0f0f0;}
    #site {position:relative; width:990px; margin:0 auto;}
    #header {position:relative; background:url(images/bg_top.png) repeat-x #4f4f4f; height:135px;}
    #share img {width:40px; height: 40px; margin-bottom: 5px;}
    #share {z-index:10; background-color:#fff; top:350px; left:-60px; position:absolute; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:5px; padding:5px 5px 0 5px; box-shadow:0 1px 2px #ddd;}
    #share a {display:block;}
    #logo {position:absolute; top:23px; left:20px; width:229px; height:51px; background:url(images/logo.png) center no-repeat;}

    #recherche-m {display:none;}
    #recherche {position:absolute; top:27px; right:0; background-color:#2e2e2e; padding:5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    #recherche input[type=text] {color:#bbb; background-color:#2e2e2e; border:0; width:275px; padding:0 20px 0 10px;}
    #recherche input[type=submit] {cursor:pointer; text-shadow:0px 0px 3px #eee; background-color:#b9da00; color:#fff; padding:9px 10px 8px 10px; border:0; font-family: 'Roboto Condensed', sans-serif; text-transform:uppercase; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    #recherche img {float:right;  margin:11px 5px 0 0;}

    #nav-m {display:none;}
    #nav {position:absolute; bottom:16px; left:0; width:100%;}
    #nav ul li {display:inline;}
    #nav ul a {color:#fff; padding:9px 12px 8px 12px; text-decoration:none; font-size:14px; text-transform:uppercase; font-family: 'Roboto Condensed', sans-serif; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    #nav ul a:hover {background-color:#b9da00; }
    #login-bloc {position:absolute; bottom:10px; right:6px;}

    #content {width:640px; float:left; margin:10px 10px 0 0;}

    #fil-ariane {box-sizing: border-box; border-radius:5px; background-color:#fff; padding:20px; margin-bottom:10px; box-shadow:0 1px 2px #ddd;}
    #fil-ariane ul {display: flex; justify-content: flex-start;}
    #fil-ariane ul li {width: max-content; margin-right:5px;}
    #fil-ariane ul a li {text-decoration:none; background-color:#f0f0f0; font-size:14px; color:#535353; padding:9px 12px 8px 12px; border:0; font-family: 'Roboto Condensed', sans-serif; text-transform:uppercase; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    #fil-ariane ul a li:hover {background-color:#535353; color:#fff}

    #top {display: flex; height:360px; margin-bottom:10px;}
    #top-ads {width:380px; height:360px; box-sizing: border-box; border-radius:5px; background-color:#fff; padding:20px; margin-right:10px; box-shadow:0 1px 2px #ddd;}
    #top-menu {height:360px; box-sizing: border-box; border-radius:5px; background-color:#fff; padding:20px; box-shadow:0 1px 2px #ddd;}
    #top-menu ul li {float:left; margin:0; margin:0 5px 5px 0;}
    #top-menu ul a li {text-decoration:none; background-color:#535353; font-size:14px; color:#fff; padding:9px 12px 8px 12px; border:0; font-family: 'Roboto Condensed', sans-serif; text-transform:uppercase; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    #top-menu ul a li:hover {background-color:#ff3c00;}
    #edito {box-sizing: border-box; border-radius:5px; background-color:#fff; padding:20px; margin-bottom:10px; box-shadow:0 1px 2px #ddd; word-spacing: 0.1em; line-height:130%;}

    #categories {padding-top:20px; width:100%;}
    #categories ul li {text-decoration:underline; float:left; width:20%; box-sizing:border-box; background: url(images/arr.png) center left no-repeat; padding-left:10px; font-size:12px; line-height:25px;}
    #categories a {color:#535353;}

    #une {width:100%; text-align:left; position:relative; box-sizing: border-box; border-radius:5px; background-color:#fff; margin-bottom:10px; box-shadow:0 1px 2px #ddd;}
    #une img {width:100%; border-radius:5px;}
    #une #presentation {background-color: rgba(0, 0, 0, 0.75); position:absolute; top:0; right:0; width:300px; height:100%; box-sizing: border-box; padding:20px; border-radius:0 5px 5px 0;}
    #une a .titre {color:#fff; font-size:27px; font-weight: bolder; margin-bottom:10px; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; max-width:300px; font-family: 'Roboto Condensed', sans-serif;}
    #une a .description {color:#ddd; word-spacing:0.1em; line-height:130%; margin-bottom:30px; display:-webkit-box; max-width:300px; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;}
    #une a .jouer {background-color:#b9da00; font-size:14px; color:#fff; padding:9px 12px 8px 12px; border:0; font-family: 'Roboto Condensed', sans-serif; text-transform:uppercase; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    #une a .jouer:hover {background-color:#ff3c00;}

    #pagination {padding:0 20px 10px 20px;}
    #commentaires ul {padding:10px 20px 20px 20px;}
    #commentaires img {float:left;}
    #login-form textarea {border:1px solid #ddd; padding:5px 10px; font-size:15px; height:100px; width:510px; display:block;}
    #legende {padding:20px 0; font-size:13px; word-spacing:0.1em; line-height:130%; color:#535353; font-style:italic;}
    #login-form, #login-result {font-size:13px; clear:both; position:relative; padding:20px 0 10px 20px;}
    #login-result {padding-bottom:40px;}
    #login-box {padding:20px 0 30px 20px; clear:both;}
     
    #menu {float:left; width:340px; padding-bottom:20px;}
    .bloc {width:100%; box-sizing: border-box; border-radius:5px; background-color:#fff; padding:20px; margin-bottom:10px; box-shadow:0 1px 2px #ddd;}
    .bloc-title {font-size:25px; font-weight:bold; margin:-4px 0 15px 0; padding:0; font-family: 'Roboto Condensed', sans-serif;}
    .bloc ul li {clear:both; width:100%;}
    .bloc ul li .vignette {float:left; margin:0 15px 15px 0; width:90px; height:90px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    .bloc a {text-decoration:none; color:#535353;}
    .bloc .title {margin-top:10px; font-weight:bolder; word-spacing:0.1em; padding:10px 0 0 0; font-size:17px; line-height:130%; font-family: 'Roboto Condensed', sans-serif;}
    .bloc .description {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-spacing:0.1em; width:190px; font-size:12px;}
    .bloc .note {padding-top:5px;}

    #tag {margin-top:10px; box-sizing: border-box; border-radius:5px; background-color:#fff; padding:20px; margin-bottom:10px; box-shadow:0 1px 2px #ddd;}
    #tag ul li {float:left; margin:0; margin:0 5px 5px 0;}
    #tag ul a li {text-decoration:none; background-color:#b9da00; font-size:14px; color:#fff; padding:9px 12px 8px 12px; border:0; font-family: 'Roboto Condensed', sans-serif; text-transform:uppercase; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    #tag ul a li:hover {background-color:#ff3c00;}
    #tag img {width:50px; height:50px;}
    
    #footer {background-color:#333; color:#fff; padding:20px; font-size:12px; text-align:center;}
    #footer p {margin:0 auto; margin-bottom:10px; word-spacing:0.1em; line-height:130%; width:900px;}

    .ads-h {width:340px; height:100%;}
    .ads-m {width:340px; height:100%;}

    #jouer {width:550px;}
    #play {width:550px;}
    #jeux {display: flex; flex-wrap: wrap; width:100%; padding: 10px; box-sizing: border-box; border-radius:5px; background-color:#fff; margin-bottom:10px; box-shadow:0 1px 2px #ddd;}
    #jeux a {width:auto;}
    .jeu {width:33.3333%; padding:10px; box-sizing: border-box; background-color: #fff;}
    .thumb {width:100%; background-color: aquamarine; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    .thumb img {-webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    .info {position: relative;}
    #jeux li .detail {position:absolute; bottom:3px; box-sizing: border-box; width:100%; padding:25px 15px 20px 15px; box-sizing:border-box; background: rgb(46,46,46); background: linear-gradient(0deg, rgba(46,46,46,0.8967787798713235) 0%, rgba(46,46,46,0.8463586118040967) 50%, rgba(46,46,46,0) 100%); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    #jeux li:hover .detail {background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 0.950) 0%, rgba(0, 0, 0, 0.925) 50%, rgba(0, 0, 0, 0) 100%);}
    #jeux li .titre {color:#fff; font-size:20px; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; font-weight:bolder; font-family: 'Roboto Condensed', sans-serif;}
    #jeux li .description {color:#ddd; font-size:12px; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; padding-bottom:5px;}
    #jeux li:hover .titre {overflow:visible; text-overflow:visible; white-space:normal;}
    #jeux li:hover .description {overflow:visible; text-overflow:visible; white-space:normal;}
    #jeux .note {width:75px;}

    #liste {box-sizing: border-box; border-radius:5px; background-color:#fff; margin-bottom:10px; box-shadow:0 1px 2px #ddd; padding:20px;}
    #liste ul li {float:left; width:33.3333%; box-sizing: border-box; font-size:25px; font-weight:bold; padding:0; font-family: 'Roboto Condensed', sans-serif; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
    #liste ul a li {color:#535353; padding:0 20px 10px 0;}

    #mid {display: flex; height:360px; margin-bottom:10px;}
    #mid-ads {width:380px; height:360px; box-sizing: border-box; border-radius:5px; background-color:#fff; padding:20px; margin-right:10px; box-shadow:0 1px 2px #ddd;}
    #mid-info {height:360px; box-sizing: border-box; border-radius:5px; background-color:#fff; padding:20px; box-shadow:0 1px 2px #ddd;}
}