/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222; font-family: 'Open Sans', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
html { background:#330033 url(../images/bg.jpg) center -2px no-repeat; background-attachment:fixed; }
body {background:#330033 url(../images/bg.jpg) center -2px no-repeat; background-attachment:fixed;color:#fff;}
a { color:#fff; text-decoration:none;}
a:hover { color:#ffcc00; text-decoration:none;}
#header { background:#000 url(../images/header-bg.jpg) repeat-x; border-bottom:1px solid #996699; padding-top:22px; padding-bottom:16px;}
.container { width:1562px; margin:0 auto;}
#header .logo { float:left;}
ul#nav { float:left; margin:0; padding:0;}
ul#nav li { list-style:none; float:left; display:block; position:relative; font-size:24px; font-weight:bold; margin-left:29px;}
ul#nav li li { list-style:none; float:none; display:block; margin-left:0; font-size:18px;}
div.drop-box { position:absolute; z-index:1000; left:0; top:38px; width:204px; display:none;}
ul#top-menu div.drop-box { top:28px; left:-20px;}
div.drop-box .drop-box-top { background:url(../images/dropmenu-top.png) no-repeat; width:204px; height:16px; overflow:hidden;}
div.drop-box .drop-box-mid { background:url(../images/dropmenu-mid.png) repeat-y; width:184px; padding:5px 10px;}
div.drop-box .drop-box-bot { background:url(../images/dropmenu-bottom.png) no-repeat; width:204px; height:5px; overflow:hidden;}
div.drop-box ul { margin:0; padding:0;}
div.drop-box ul li { padding:0 20px 8px 20px;}
.drop-menu b { display:inline-block; vertical-align:middle; background:url(../images/icon-arr.png) no-repeat; width:14px; height:8px;}
.formrow { padding-bottom:10px; width:95%;}
.formrow input.text { width:100%; background:#333333; border:none; outline:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; color:#fff; padding:5px; }
.formrow h2 { margin:0;}
label input { vertical-align:middle;}
.btn-submit { margin-top:5px; }
ul#top-menu { float:right;margin:0; padding:0; font-size:12px; padding-top:10px;}
ul#top-menu img { vertical-align: bottom; margin-right:5px;}
ul#top-menu li { list-style:none; float:left; display:block; position:relative; margin-left:22px;}
input.search-input { border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; color:#fff; font-size:12px; border:none; width:145px; padding:8px 8px 8px 25px; background:#333333 url(../images/icon-search-small.png) 8px center no-repeat;}
#main { padding:30px 0;}
.imgover h5 { margin:5px 0;}
.imgover a { margin-top:20px; display:inline-block;}
.game-list { margin:0; padding:0; width:1568px; margin-left:-6px;}
.game-list li { float:left; margin-left:6px; margin-bottom:6px; list-style:none;}
.game-list li.item10,.game-list li.item15,.game-list li.item22,.game-list li.item28 { margin-right:392px;}
.game-list li.item12,.game-list li.item17 { margin-right:196px;}
.img-wrap { width:100%; height:100%; display:block;}
.img-wrap img { width:100%; height:100%;}
.grid1 { width:190px; height:130px; position:relative;}
.grid1 .imgover { text-align:center; width:190px; height:130px; position:absolute; top:0; left:0; display:none;}
.grid1 .imgover .overbg { width:190px; height:130px; z-index:3; position:absolute; top:0; left:0;}
.grid1:hover .imgover { display:block;}
.grid2x2 { width:386px; height:266px; position:absolute; top:136px; left:392px; z-index:2;}
.grid2x2 .imgover { text-align:center; width:386px; height:266px; position:absolute; top:0; left:0; display:none;}
.grid2x2 .imgover .overbg {width:386px; height:266px; z-index:3; position:absolute; top:0; left:0;}
.grid2x2:hover .imgover { display:block;}
.grid2x2-2 { width:386px; height:266px;position:absolute; top:408px; left:784px; z-index:2;}
.grid2x2-2 .imgover { text-align:center; width:386px; height:266px; position:absolute; top:0; left:0; display:none;}
.grid2x2-2 .imgover .overbg {width:386px; height:266px; z-index:3; position:absolute; top:0; left:0;}
.grid2x2-2:hover .imgover { display:block;}
.grid1x2 { width:190px; height:266px;position:absolute; top:136px; left:1176px; z-index:2;}
.grid1x2 .imgover { text-align:center; width:190px; height:266px; position:absolute; top:0; left:0; display:none;}
.grid1x2 .imgover .overbg {width:190px; height:266px;z-index:3; position:absolute; top:0; left:0;}
.grid1x2:hover .imgover { display:block;}
.imgover-inner { width:100%; height:100%; padding:2%; position:relative; z-index:4; }
.imgover-inner1 { width:100%; height:100%;}
.game-list-wrap { position:relative;}
#footer { font-size:12px; padding-bottom:20px;}
#footer .copyright { float:left; padding:10px 0;}
#footer .soc { float:right;}
#footer .soc img { margin-left:15px;}
#loading { text-align:center; margin-top:10px; display:none;}
/* play page */
#sidebar-right { width:160px; float:right;}
#sidebar-left { width:388px; float:left;}
#flash-wrap { background:#000;background:rgba(0,0,0,0.9); border:1px solid #000; float:right; text-align:center; }
#flash-wrap table { width:100%; border-collapse:collapse; border:none;}
#flash-wrap table td { text-align:center; vertical-align:middle; padding:60px 0;}
#flash-wrap table td * { margin:0 auto;}
#flash-wrap img { }
#game-info { padding:18px 12px; background:#000; background:rgba(0,0,0,0.8); position:relative;}
#game-info .l { width:190px; height:130px; float:left; }
#game-info .l img { width:100%; height:100%;}
#game-info .r { margin-left:200px;}
#game-info h3 { margin-top:0; margin-bottom:20px;}
a.tag, .fav_button { display:inline-block; background: url(../images/btn-left.png) left top no-repeat; padding-left:16px; height::25px; line-height:20px; white-space:nowrap; color:#996633; text-shadow:1px 1px 1px #fff; margin-bottom:5px; font-size:12px;}
a.tag:hover { color:#996633;}
a.tag span, #favbutton {display:inline-block; background: url(../images/btn-right.png) right top no-repeat;padding-right:16px; padding-left:5px; height::20px; line-height:20px; padding-bottom:5px; }
.fb-like-wrap { position:absolute; right:10px; bottom:24px;}
.fav_button a {color:#996633;}
.game-description { font-size: 11px;}
#more-games { margin-top:5px;}
#more-games h3 { margin-top:0; margin-bottom:5px;}
ul.more-game-list { margin:0; padding:0; width:392px; margin-left:-6px;}
.more-game-list li { width:190px; height:130px; list-style:none; float:left; position:relative; margin-left:6px; margin-bottom:6px;}
.more-game-list li div.imgover { text-align:center; width:190px; height:130px; position:absolute; top:0; left:0; display:none;}
.more-game-list li img.overbg { width:190px; height:130px; z-index:3; position:absolute; top:0; left:0;}
.more-game-list li:hover div.imgover { display:block;}
.sidebarleft-ad { background:#000; background:rgba(0,0,0,0.3);}
.ad300 { width:300px; margin:0 auto;}
#ad-bottom { display:none;}
.ad720 { width:728px; margin:0 auto;}
.pagination {
margin: 20px 0; text-align:center;
}
.pagination ul { margin:0; padding:0;}
.pagination ul li { display:inline;}
.pagination ul li a ,.pagination ul li span { display:inline-block; width:26px; height:26px; background-image:url(../images/pager.png); background-repeat:no-repeat; background-position:-99px -1px; font-size:12px; line-height:24px; text-align:center;}
.pagination ul li a:hover { color:#fff;background-position:-162px -1px;}
.pagination ul li a.prev { width:91px;background-position:0px -1px; }
.pagination ul li a.prev:hover {background-position:0px -36px;}
.pagination ul li a.next { width:91px;background-position:-274px -1px; }
.pagination ul li a.next:hover {background-position:-274px -36px;}
.pagination ul li span.current {background-position:-231px -1px;}
.pagination ul li a.current,.pagination ul li a.current:hover {background-position:-231px -1px;}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media (max-width: 1024px) {
ul#nav li.item1 ,ul#nav li.item2 { display:none;}
#doc { min-width:820px;}
.container { width:778px; margin:0 auto;}
.game-list { width:784px;}
.game-list li.item10,.game-list li.item15,.game-list li.item22 , .game-list li.item28 { margin-right:0px;}
.game-list li.item12,.game-list li.item17 { margin-right:0px;}
.game-list li.item6,.game-list li.item8 { margin-right:392px;}
.game-list li.item24,.game-list li.item26 { margin-right:392px;}
.game-list li.item10,.game-list li.item13 { margin-right:196px;}
.grid1x2 { left:392px; top:408px;}
.grid2x2-2 { left:392px; top:952px;}
}
@media (min-width:1025px) and (max-width: 1259px) {
.container { width:778px; margin:0 auto;}
ul#nav li.item1 ,ul#nav li.item2 { display:none;}
.game-list { width:784px;}
.game-list li.item10,.game-list li.item15,.game-list li.item22,.game-list li.item28 { margin-right:0px;}
.game-list li.item12,.game-list li.item17 { margin-right:0px;}
.game-list li.item6,.game-list li.item8 { margin-right:392px;}
.game-list li.item24,.game-list li.item26 { margin-right:392px;}
.game-list li.item10,.game-list li.item13 { margin-right:196px;}
.grid1x2 { left:392px; top:408px;}
.grid2x2-2 { left:392px; top:952px;}
}
@media (min-width:1260px) and (max-width: 1570px) {
.container { width:1170px; margin:0 auto;}
.game-list { width:1176px;}
.grid1 { width:141px; height:96px; position:relative;}
.grid1 .imgover { text-align:center; width:141px; height:96px; position:absolute; top:0; left:0; display:none;}
.grid1 .imgover .overbg { width:141px; height:96px; z-index:3; position:absolute; top:0; left:0;}
.grid1:hover .imgover { display:block;}
.grid2x2 { width:288px; height:198px; position:absolute; top:102px; left:294px; z-index:2;}
.grid2x2 .imgover { text-align:center; width:288px; height:198px; position:absolute; top:0; left:0; display:none;}
.grid2x2 .imgover .overbg {width:288px; height:198px; z-index:3; position:absolute; top:0; left:0;}
.grid2x2:hover .imgover { display:block;}
.grid2x2-2 { width:288px; height:198px;position:absolute; top:306px; left:588px; z-index:2;}
.grid2x2-2 .imgover { text-align:center; width:288px; height:198px; position:absolute; top:0; left:0; display:none;}
.grid2x2-2 .imgover .overbg {width:288px; height:198px; z-index:3; position:absolute; top:0; left:0;}
.grid2x2-2:hover .imgover { display:block;}
.grid1x2 { width:141px; height:198px;position:absolute; top:102px; left:882px; z-index:2;}
.grid1x2 .imgover { text-align:center; width:141px; height:198px; position:absolute; top:0; left:0; display:none;}
.grid1x2 .imgover .overbg {width:141px; height:198px;z-index:3; position:absolute; top:0; left:0;}
.grid1x2:hover .imgover { display:block;}
.game-list li.item10,.game-list li.item15,.game-list li.item22,.game-list li.item28 { margin-right:294px;}
.game-list li.item12,.game-list li.item17 { margin-right:147px;}
.grid1 .imgover a{ margin-top:8px;}
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/* ==========================================================================
Opacity for //Random Games for category, tag, search
========================================================================== */
.random_opacity{
opacity:0.6;
filter:alpha(opacity=60);
}