/* Games4Win CSS */

p { margin: 1em 0; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	/*vertical-align: middle;*/
}

head, body {
	font-family: "Calibri", Verdana, Tahoma, Arial, sans-serif;

background-color: #ebeff0;
background-image: url('/images/top-gradient.png');
background-repeat: repeat-x;
background-position: top left;


}

.container {
    background-color: #fff; /*--Left drop shadow--*/

    margin: 0 auto; /* center */

    min-width: 780px; /*--Minimum Width--*/
    max-width: 1200px; /*--Maximum Width--*/

    padding: 2em 0 0 2em;

    -moz-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
}

#header {
	padding: .5em 0 0 0;
    background: #fff url(/images/games4win.png) no-repeat left top;
    height:118px;
}

#top h1 { padding: 0; margin: 0; }


/* navigation */
#navigation {
}

#navigation h4{ margin: 15px 0 8px 0; }
#navigation h4 a { vertical-align: 5px; }
#navigation ul, .topmenu { margin:-2px 0 0; padding:0; }
#navigation ul>li, .topmenu>li {
	font: 110% "Segoe UI", Calibri, "Myriad Pro", Myriad, "Trebuchet MS", Helvetica, Arial, sans-serif;
	list-style:none;
	padding:2px 10px 3px 0;
	margin:0;
}
#navigation ul>li.first{ border-top:0 solid red; }

.topmenu>li {
    padding:2px 0 3px 0;
}

.h4 { font-weight: bold; margin-top: 2em;  }

#footer {
    padding: 1em 0 1em 0;
}

#breadcrumbs {
	width:90%;margin-bottom:1em;	
}


A{color:#000080; text-decoration:underline;}
A:hover{text-decoration:underline;}
A:visited{color:#834380;text-decoration:none;}
A IMG{border:0;}

img.arrow {width:7px; height:7px; margin:0 5px;}

/* left column */
.left A{color:#4343a0;text-decoration:underline;}
.left A:hover{text-decoration:underline;}
.left UL>LI{padding:5px 10px 5px 20px;background:transparent url(/images/arrow03.gif) no-repeat 7px 8px}
.left FORM{padding:5px 12px;font-family:Georgia,'Times New Roman',serif;font-size:11px;background:#010066 url(/images/search.gif) no-repeat top;margin:0;}
.left FORM A, .left FORM A:visited{color:#ccc;text-decoration:underline;}
.left FORM A:hover{color:#fff;text-decoration:underline;}
.left DIV{padding:2px 0;border-top:1px solid #ccc;border-bottom:1px solid #ccc}
.inp{margin:2px 1px 0 5px;background-color:#DCDCDC;border:1px;border-style:solid;border-color:#CCCCCC;font-family:Verdana;font-size:10px;}


ul#links { margin:0.5em 0 0.5em 0; padding:0 0 0 0.8em; }
ul#links>li{
    font-size: 120%;
	padding:0 0 0 10px;
	background:transparent url(/images/arrow03.gif) no-repeat 0 5px;
	list-style:none;
	
}

/* main column */
#news{ margin-bottom:1em; font-size: 120%; }
#news p { margin:0 0 4px 0; }
#news p em { font-style:normal; color:#666; margin-right:6px; }

/* right column */
.news H3{font:bold 16px arial,helvetica,sans-serif;border-bottom:2px solid #ccc;margin:8px 0 8px 0}
.news DIV{font:80% Georgia,'Times New Roman',serif;margin-bottom:10px}
.news DIV B{text-decoration:underline;}

/* bottom line */
table.bottom{background:#ccc;font:11px verdana,tahoma,sans-serif; width:100%;height:11px;margin-top:5px;}
table td.end{background-color:#010066;width:196px;height:20px;}
table td.final{padding:0 10px}


h1 { font:bold 30px "Calibri", Verdana,tahoma,sans-serif;color:#000;margin:0 0 0 0; }
h1 a { text-decoration: underline; }
h2 { font:bold 150% "Calibri", Verdana, Tahoma, Arial; margin:4px 10px 0 0; }
h2 img { margin-right: 4px; }
h2.big { font:bold 150% "Calibri", Verdana, Tahoma, Arial; margin:0 0 0 0;  letter-spacing:-1px; }
P.version { margin:0 0 0 0; }
P.link { margin:0 0 0 30px; }



ul#game-list { list-style:none; margin-top: 1em; padding-left: 0; }
ul#game-list li.game { border-bottom: 1px solid #ddd; margin: 0; padding: 1em 0 1em 0; }
ul#game-list li.links { margin-bottom:1em; margin-left: 120px; }
ul#game-list li.links div { color:gray; }

ul#game-list blockquote { font:italic 80% Georgia,'Times New Roman',serif; margin:1em 0 0 28px; padding:1em 2em 1em 1em; border-left:1px solid #FF007F; width:80%;background-color:#f5f5f5; }

img.icon12 { width: 12px; height: 12px; margin-right: 0.2em; }


.nodivider { border-bottom: 0 solid white !important; }

.game h1, #video h1, .game span.game-title { font: normal 2em "Calibri", Verdana, Tahoma, Arial; color:#000; margin:0; letter-spacing:-1px; line-height: 80%; }
.game h2 { font: normal 2em "Calibri", Verdana, Tahoma, Arial;  margin:0; letter-spacing:-1px;  }
.game sup.version {
    font: 12px verdana, tahoma, sans-serif;
    background-color: #ddd;
    padding: 1px 5px 1px 3px;
    color:#000;
    margin:0 0 0 8px;

    -moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
  }
.game P.cat { font:10px verdana,tahoma,sans-serif;color:#666;display:inline; }
.game P.by { 
	font:12px "Segoe UI", Calibri, "Myriad Pro", Myriad, "Trebuchet MS", Helvetica, Arial, sans-serif;
	color:#000;
	margin:2px 0 0 2px;
	padding-bottom:4px; }
.game IMG.gamelogo { float:left; margin-right:10px; }
.game P { font: 100% Georgia, "Cambria", Serif; margin:5px 0; }
.game div.top{ margin-top:10px;}
.game P.links{ font:normal 14px "Segoe UI", Calibri, "Myriad Pro", Myriad, "Trebuchet MS", Helvetica, Arial, sans-serif; margin:0; display:inline; }

.game ul.linksmall { margin:1em 0 1em 0; list-style:none; }
.game ul.linksmall li { display: inline; margin-right: 1em; }


div.download_btn {
    position: relative;width: 270px; height: 65px;
}

div.download_btn a#download_button { position: absolute; text-decoration: none; top:12px; left:25px; width: 220px; color: #000080; }
div.download_btn a#download_button h2 { font-weight: bold; font-family: Arial, sans-serif; margin: 0; text-decoration: underline; font-size: 125%; letter-spacing: 0.5px; }
div.download_btn a#download_button span {}





.game-short { height: 180px; overflow: hidden; }
.game-short .game-logo { display: block; }
.game-short .game-title { font-size: 20px; }

.mt-1 { margin-top: 1em; }
.mb-1 { margin-bottom: 1em; }



.main_image {
    width: 590px;
    height: 250px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
    color: #fff;
}
.main_image h2 {
    font-size: 1.4em;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 0 0 10px;
    text-decoration: underline;
}
.main_image p {
    font-size: 0.8em;
    line-height: 1.4em;
    padding: 10px;
    margin: 0;
}
.block small { /*--We'll be using this same style on our thumbnail list--*/
    font-size: 0.8em;
    padding: 0 0 0 20px;
    background: url(/images/icon_calendar.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
    position: absolute;
    bottom: 0;
    left: 0; /*--Stick the desc class to the bottom of our main image container--*/
    width: 100%;
    display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.main_image .block{
    width: 100%;
    background: #111;
    border-top: 1px solid #000;
}
.main_image a.collapse { /*--This is our hide/show tab--*/
    background: url(btn_collapse.gif) no-repeat left top;
    height: 27px;
    width: 93px;
    text-indent: -99999px;
    position: absolute;
    top: -27px;
    right: 20px;
}
.main_image a.show {background-position: left bottom;}







/*
.nav { font: 14px verdana, tahoma, sans-serif; color:#666; padding:12px 10px 12px 0;  }
.nav a {  padding-left: 8px; padding-right: 8px; }
.nav span.selected{ font-weight: bold; }
*/


.nav-pagination {
    padding-right: 2em;
}

.nav-pagination a:link,
.nav-pagination a:visited{
	
	border: 1px solid #EBEBEB;
	margin-left: 10px;
	text-decoration: none;
	background-color: #F5F5F5;
	color: #0072bc;
	width: 22px;
	font-weight: normal;
}



.nav-pagination {
	text-align: left;
	line-height: 31px;
	padding-top: 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
}

.nav-pagination a:link,
.nav-pagination a:visited{
	padding:7px;
	padding-top:2px;
	padding-bottom:2px;
	border:1px solid #EBEBEB;
	margin-left:10px;
	text-decoration:none;
	background-color:#F5F5F5;
	color:#0072bc;
	width:22px;
	font-weight:normal;
}

.nav-pagination a:hover {
	background-color:#DDEEFF;
	border:1px solid #BBDDFF;
	color:#0072BC;	
}

.nav-pagination .selected {
	padding:7px;
	padding-top:2px;
	padding-bottom:2px;
	border:1px solid #BBDDFF;
	margin-left:10px;
	text-decoration:none;
	background-color:#DDEEFF;
	color:#000;
	cursor:default;
}

.nav-pagination .disabled_pagination {
	padding:7px;
	padding-top:2px;
	padding-bottom:2px;
	border:1px solid #EBEBEB;
	margin-left:10px;
	text-decoration:none;
	background-color:#F5F5F5;
	color:#D7D7D7;
	cursor:default;
}













.review { }
.review p { font:16px Georgia,'Times New Roman',serif; }
.review h2 { font:bold 120% Arial,'Times New Roman',serif; margin:4px 0 0 0; }
.review p.link { margin:0 0 0 30px; }
.review ul {  }
.review li { font: italic 100% Georgia,'Times New Roman',serif; margin:2px 10px 0; list-style:square; }
.review img { margin:0 4px 0 2px; }

.review blockquote {
	font:italic 100% Georgia,'Times New Roman',serif;
	margin:24px 0 24px 12px;
	padding:12px 24px 12px 24px;
	border-left:1px solid #FF007F;
	text-indent:0;
	width:90%;
	background-color:#fafafa;
}

div.rating {  }

.review p.total{ text-indent: 0; margin: 20px 10px; }
.review p.develop { font-size: 14px; text-indent: 0; font-weight: bold; }


.review-bq {
    font:italic 100% Georgia,'Times New Roman',serif;
    margin:24px 0 24px 26px;
    padding:12px 64px 12px 24px;
    border-left:1px solid #FF007F;
    text-indent:0;
    width:90%;
    background-color:#fafafa;
}

.review-bq p { font:16px Georgia,'Times New Roman',serif; }


.comments p { font-size: 110%; text-indent: 0; }
.comments p span { color:#808080; margin-right: 0.5em; }


.post{text-align:center;}

.sendcomm {font-family: Courier, Tahoma, Arial, serif; font-weight:normal;font-size: 12px; background-color: #D1E6FD; border: 1px solid #000000;text-align:center}
img.img_comment{cursor: pointer;}
font.font_bold_small{font-weight:bold;font-size:70%;}
.inp2{background-color: #FFFFFF;border:1px;border-style:solid;font-weight:normal;border-color:#99CCFF;font-family:Georgia,Serif;font-size:110%;width:100%}

div.motto { font-size:130%; font-style:italic; margin-bottom:1em; }

a.download {
    background: #e7e7e7 none;
    border: 1px solid #cbcbcb;
    font-size: 12px;
    line-height: 16px;
    padding: 10px 10px;
    text-align: center;
    text-transform: capitalize;
    width: 138px;
}


/* screenshots */
#screenshots { margin:10px 0 1em 25px; }
#screenshots a { margin-right: 1em; }
.ss {
	cursor: pointer;
	width:180px;
	height:135px;
	margin:1px;
	padding:1px;
	border:3px solid #FFC7E4;
}

.ss:hover {
	border:3px solid #FF9DD0;
}

.system { margin-top:1.8em; }
.system p.sys { font: 12px verdana,tahoma,sans-serif; text-indent: 0; margin: 0 0 0 0; }
.system p.sys img { margin-right: 4px; }



/* videos */

.video-decription {
	margin-bottom:2em;
}

.video-decription .video-thumb {
}

.video-decription .video-text {
	margin: 0 0 5px 0;
	min-height: 100px;
	width:750px;
}

.video-decription .video-text p{
	font:90% "Cambria", Georgia, Serif;
	margin:5px;
}

.video-decription .video-text p.by {
	font: 12px "Segoe UI", Calibri, "Myriad Pro", Myriad, "Trebuchet MS", Helvetica, Arial, sans-serif;
	color:#000;
	border-bottom:1px solid #ddd;
	margin:-6px 0 0 1.5em;
	padding-bottom:4px;
}

.video-decription .video-text h2 {
	font-size:120%;
	margin:0 0 0.3em 0;
}

.video-decription .video-text ul {
	margin: 0 0 0 2em;
	padding:0;
	list-style:none;
}

.video-decription .video-text ul>li {
	display: inline;
	margin-right:0.5em;
}

h1 sup { 
	color:#a0a0a0;
	font: 70% "Segoe UI", Calibri, "Myriad Pro", Myriad, "Trebuchet MS", Helvetica, Arial, sans-serif;
}

/* diagnostic.css */
/*
div:empty, span:empty,
li:empty, p:empty,
td:empty, th:empty {padding: 0.5em; background: yellow;}

*[style], font, center {outline: 5px solid red;}
*[class=""], *[id=""] {outline: 5px dotted red;}

img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}
img[title=""] {outline: 3px dotted fuchsia;}
img:not([title]) {outline: 5px solid fuchsia;}

table:not([summary]) {outline: 5px solid red;}
table[summary=""] {outline: 3px dotted red;}
th {border: 2px solid red;}
th[scope="col"], th[scope="row"] {border: none;}

a[href]:not([title]) {border: 5px solid red;}
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

*/


.button {
	-moz-box-shadow: inset 0 0 0 0 #bbdaf7;
	-webkit-box-shadow: inset 0 0 0 0 #bbdaf7;
	box-shadow:inset 0 0 0 0 #bbdaf7;
	background-color: #79bbff;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 0 solid #84bbf3;
	display: inline-block;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;;
	font-size: 15px;
	font-weight: bold;
	padding: 6px 24px;
	text-decoration: none;
	text-shadow: -1px 1px 0 #528ecc;
}
.button:hover {
	background-color: #378de5;
}
.button:active {
	position: relative;
}
.button:visited {
	color: #ffffff;
}




.search {
    margin-top: 2em;
    margin-bottom: 1em;
}
.search form { width:300px; }
.search fieldset {
    width: 185px;
    height: 31px;
}
.search input {
    width: 90%;
    background: none;
    padding: 8px; color: #000;
    font-size: 14px;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.search input:focus { }
.search button {
    position: relative;
    left: -22px;
    width: 16px;
    height: 16px;
    background: url("/images/search.png") 50% 50% no-repeat;
    cursor: pointer;
    border: none;
    vertical-align: middle;
}






div.h2-divider { width: 100%;background: url(/images/h2-divider.gif) repeat-x 0 50%; margin-top: 1em; }
div.h2-divider h2 { display: inline; padding-right: 0.5em; background: #fff; }





#slidebox {
    -moz-box-shadow: -2px 0 5px #AAAAAA;
    background-color: #FFFFFF;
    border-top: 3px solid #222222;
    bottom: 0;
    height: 160px;
    padding: 10px;
    position: fixed;
    right: -430px;
    width: 400px;
    font-size: 120%;
}
#slidebox i {
    color: #777777;
    display: block;
    padding-bottom: 10px;
}
#slidebox img {
    float: left;
    margin-right: 10px;
}
#slidebox p {
	margin : 0;
    /*color: #444444;*/
    /*font-size: 18px;*/
    /*letter-spacing: -1px;*/
}

#slidebox p a {
	text-decoration: underline;
}

#slidebox p a.text:hover {
    color: #999999;
}
#slidebox a.more {
    /*color: #88A200;*/
    /*font-size: 11px;*/
}
#slidebox a.more:hover {
    text-decoration: none;
}
#slidebox a.close {
    border: 1px solid #AAAAAA;
    color: #000000;
    float: right;
    font-size: 14px;
    font-weight: bold;
    line-height: 13px;
    padding: 0 4px;
    text-decoration: none;
}










/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(/images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(/images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(/images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(/images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(/images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(/images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(/images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(/images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(/images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxLoadingOverlay{background:url(/images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(/images/loading.gif) no-repeat center center;}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}



















.lst-li .lst-cnt {
    transition: all .2s ease-in-out .2s;
    -webkit-transition: all .2s ease-in-out .2s;
    box-shadow: 0 1px 2px 0 rgba(1,1,1,0.24);
    border: 0;
}

.imgwpr {
    vertical-align: middle;
    width: 100%;
    display: table;
    height: 125px;
}
.image {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

.lst-li .lst-cnt .image img {
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    animation-fill-mode: forwards;
    display: inline-block;
}

.content { padding-right: 5em; }







div.span-mark, div.span-mark-long {

    font-family: "Calibri", Verdana, Tahoma, Arial, sans-serif;

    border: 3px solid #e25b32;
    color: #e25b32;

    -moz-border-radius: 50%;
    -ms-webkit-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    font-size: 24px;
    font-weight: 600;
    height: 38px;

    float: left;
    font-style: italic;

    line-height: 32px;

    text-align: center;
    width: 38px;
    margin-right: 0.5em;
}

div.span-mark-long {
    font-size: 20px;
}

div.numblocks {
    margin-bottom: 1em;
    clear: both;
}

div.mark-text { margin-left: 48px; }