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

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #4E5869;
	margin: 0;
	padding: 0;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}

.container {
	
	width: 1145px;
	background: #e3e3e3;
	margin: 0 auto;
}

.content {
	padding: 10px 0;
	display:block;
	overflow:hidden;
	width: 1145px;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
}

/* ~~ top bar menu ~~ */
.logo {float:left; margin-top:5px; margin-right:30px;}
#main-menu {background-color:#339966; width:100%; height:44px; margin-bottom:20px;}
.holder {max-width:1370px; margin: 0 auto;}
.nav-bar { list-style:none; margin-top:1px;}
.nav-bar li { display:inline-block; padding: 10px 10px 10px 10px; }

#main-menu .nav-bar li a {
  text-decoration: none;
  padding-left: 0;
  text-transform: uppercase;
  color: #fff;
  font-family: 'Oswald', sans-serif;
}
.nav-bar li:hover {
background-color:#276e4a;
}
.nav-bar .nav-arcade a { background:url("http://www.playretrogames.com/img/icons/arcade.png") no-repeat 0px 4px transparent; }
.nav-bar .nav-adventure a { background:url("http://www.playretrogames.com/img/icons/adventure.png") no-repeat 0px 4px transparent; }
.nav-bar .nav-bike a {background:url("http://www.playretrogames.com/img/icons/bike.png") no-repeat 0px 4px transparent; }
.nav-bar .nav-fighting a {background:url("http://www.playretrogames.com/img/icons/fighting.png") no-repeat 0px 4px transparent; }
.nav-bar .nav-puzzle a {background:url("http://www.playretrogames.com/img/icons/puzzle.png") no-repeat 0px 4px transparent; }
.nav-bar .nav-racing a {background:url("http://www.playretrogames.com/img/icons/racing.png") no-repeat 0px 4px transparent; }
.nav-bar .nav-shooting a {background:url("http://www.playretrogames.com/img/icons/shooting.png") no-repeat 0px 4px transparent; }
.nav-bar .nav-sports a {background:url("http://www.playretrogames.com/img/icons/sports.png") no-repeat 0px 4px transparent; }
.nav-bar .nav-strategy a {background:url("http://www.playretrogames.com/img/icons/strategy.png") no-repeat 0px 4px transparent; }

.sub-menu {background-color:#276e4a; width:100%; height:130px; margin-bottom:20px; margin-top:-20px;}

.sub-menu {display:none; }


.cat-title{float:left; font-family: 'Oswald', sans-serif; font-size:18px; color:#fff; text-transform: uppercase; margin-top:5px;}
.holder1 {width:1145px; margin: 0 auto;}
.nav-bar1 { float:left; list-style:none; margin-top:10px; margin-left: 30px; border-right: solid #339966 1px; padding-right:20px;}
.nav-bar1 li { display:block; padding: 0px 10px; }

.nav-bar1 li a {
  text-decoration: none;
  padding-left: 0;
  text-transform: uppercase;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size:12px;
  font-weight:lighter;
}
.nav-bar1 li a:hover {
color:#FF6;
}


/* ~~ top banner  ~~ */
.top-banner {height:102px; width:100%; background-color:#e3e3e3; padding-top:6px;}
.top-banner-holder {max-width:970px; margin: 0 auto;}

/* ~~ tab menu  ~~ */
#tabmenu {
  float: left;
  width: 100%;
  background:url("http://www.playretrogames.com/img/tab-bg.jpg") repeat-x;
  font-size: 93%;
  line-height: normal;
  max-height:41px;
}
#tabmenu ul {
  margin: 0;
  padding: 10px 10px 0 20px;
  list-style: none;
}
#tabmenu li {
  display: inline;
  margin: 0;
  padding: 0;
}
#tabmenu a {
  float: left;
  background: url("http://www.playretrogames.com/img/tab-left.png") no-repeat left top;
  margin: 0;
  padding: 0 10px 0 4px;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
}
#tabmenu a span {
  float: left;
  display: block;
  background: url("http://www.playretrogames.com/img/tab-right.png") no-repeat right top;
  padding: 5px 18px 4px 10px;
  color: #1a90e2;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabmenu a span {
  float: none;
}
/* End IE5-Mac hack */
#tabmenu .active a span,
#tabmenu a:hover span {
  color: #666;
}
#tabmenu .active a,
#tabmenu a:hover {
  background-position: 0 -42px;
}
#tabmenu .active a span,
#tabmenu a:hover span {
  background-position: 100% -42px;
}

/*---- Search Form ----*/
div.search-form{ float:right; width:256px; margin:-5px 20px 0 0;}
div.search-form p.textbox{ background:url(http://www.playretrogames.com/img/search-bg.png) no-repeat left top; width:246px; height:32px; }
div.search-form p.textbox input.textbox{ background:none; border:0px; float:left; width:200px; color:#6c6c6c; font-size:14px; margin-right:0; padding-left:0; line-height:18px; height:32px; font-weight:normal; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; outline : none;}
div.search-form p.textbox input.submit-btn{ background:url(http://www.playretrogames.com/img/search-button.png); border:0px; float:left; width:40px; height:32px; cursor:pointer;}

/*---- Search Form Game----*/
div.search-form-game{ float:right; width:256px; margin:8px 0 0 0;}
div.search-form-game p.textbox{ background:url(http://www.playretrogames.com/img/search-bg1.png) no-repeat left top; width:246px; height:28px; }
div.search-form-game p.textbox input.textbox{ background:none; border:0px; float:left; width:200px; color:#6c6c6c; font-size:14px; margin-right:0; padding-left:0; line-height:18px; height:32px; font-weight:normal; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; outline : none;}
div.search-form-game p.textbox input.submit-btn{ background:url(http://www.playretrogames.com/img/search-button1.png); border:0px; float:left; width:40px; height:28px; cursor:pointer;}

/*---- game thumbs home page ----*/
.pNB3{
width : 765px;
padding : 5px 0 5px 0px;
font-size : 10px;
font-weight : bold;
position : relative;
overflow : hidden;
float : left;
margin: 0 0 10px 20px;
}

.ig{ 
border:1px solid #C7CCCE;
width:140px;
height:130px;
padding:0px; 
margin:6px 11px 5px 0px;
font-weight:normal;
float:left;
align:center;
background:#fff; 
position:relative;
-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;

}
.ig .before {
    position: absolute;
    width: 142px;
    height: 98px;
    top:-1px;
    left:-1px;
	pointer-events:none;
    z-index:2;
}

.ig img{  
padding:0;
width:142px;
height:98px;
margin-top:-1px;
margin-left:-1px;
margin-bottom:-2px;
-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-ms-border-radius:4px 4px 0 0;-o-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;
}
.ig .gtitle{font : 11px Arial, Helvetica, sans-serif; color:#323232; font-weight:normal; text-decoration: none; text-shadow: 0px 1px 2px #fff;}



.info{
    position:relative; /*this is the key*/
  }
  
.info span{display: none; z-index:3;}
.info span p {padding:2px 3px 3px 3px; margin:0 auto;}

.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    height:126px;
    width:134px;
    margin-top:-1px;
    margin-left:-1px;
    display:inline;
    overflow:hidden;
    background-color:#fff; 
    color:#323232;
    text-align: left;
    padding:2px;
    padding-left:4px;
    font-weight : normal;
    text-decoration : none;
    line-height:130%;
    border:1px solid #C7CCCE;
    -webkit-border-radius:3px 3px 4px 4px;-moz-border-radius:3px 3px 4px 4px;-ms-border-radius:3px 3px 4px 4px;-o-border-radius:3px 3px 4px 4px;border-radius:3px 3px 4px 4px;
    
  }

.info .rstamp {position:absolute; bottom:6px; right:3px;  font:10px Tahoma; font-weight:bold; padding:2px 3px; color:#333333;  }
.info .rstamp img {bottom:6px; right:3px; height:15px; width:75px; margin-left:5px; }

.default-link{
  /* all rules required to make the whole div clickable */ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 5;
  /* this is a fix for IE7-9 */
  background-color:#ffffff;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  filter: alpha(opacity=0);  
  opacity:0;  
}

.gc1 { 
width : 766px;
padding:0 0 0px 0; 
margin:12px 0 0 0; 
text-align:center;
}

/*right side bar*/

.right-sidebar { 
width : 336px;
height: 800px;
background-color:#fff;
float:right;
margin: 10px 20px 0 0;
}

.popular-games{ 
width : 336px;
height:400px;
background:url("http://www.playretrogames.com/img/popular-games-header.jpg") no-repeat 0px 0px; 
padding-top:55px;
}

.game-list{ 

width : 336px;
}

.game1 { 
width:316px;
height:52px;
margin: 0 auto;
border-bottom: solid 1px #CCC;
margin-bottom:10px;
color:#666;
font-size:11px;

}
.game1 a{ 
color:#339966;
font-family: 'Oswald', sans-serif;
font-size:14px;
text-decoration:none
}

.game1 a:hover{ 
color:#1a90e2;
text-decoration:underline;
}

.game1 img{ 
-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-ms-border-radius:4px 4px 0 0;-o-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;
width:60px;
height:41px;
float:left;
margin-right:10px;
}

.right-ad-bar{ 
width:366px;
height:280px;
}

.ad-text{ 
height:26px;
background-color:#999;
color:#fff;
font-size:14px;
text-align:center;
padding:2px;
overflow:hidden;
}

/*page navi*/

#pagin {
	margin: 20px 0 0 20px;
	padding: 0;
	list-style: none;
	width: 700px;
}

#pagin li {
	float: left;
	margin-right: 10px;
}

#pagin li a {
	display: block;
	text-decoration: none;
	color: #717171;
	font: bold 11px Arial, sans-serif;
	padding: 5px 8px;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
border: 1px solid #999;
	background: #fff;

}

#pagin li a.current {
	color: white;
	background: #339966;
}

#pagin li a:hover {

	background: #1185d5;
	color:#fff;
}

#pagin li a:active,#pagin li a.current:active {

}

#pagin li a.current:hover {

background: #1185d5;

}


/*footer*/

.footer {
background-color:#3c4453;
width:1145px;
height:195px;
margin: 0 auto;

}

.footer-holder {
background:url("http://www.playretrogames.com/img/logofooter.png") no-repeat 0 0; 
width:1145px;
height:195px;
color:#fff;
padding: 20px;
font-size:12px;
}

.footer-col1 ul li a{
color:#fff !important;
font-size:14px !important;
text-decoration: none;
}

.footer-holder a:hover{

text-decoration: underline;

}

.footer-holder ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
	margin:10px 0 20px 0;
    color:#fff !important;
}

.footer-holder ul span{
color:#339966;
font-weight:bold;
}

.footer-col1{
float:left;
width:40%;
color:#fff;
}

.footer-col2{
float:left;
width:55%;

}

.footer-col2 p{
color:#fff;
font-size:12px;
line-height:18px;
margin-bottom:25px;
}

.footer-col2 h2{
color:#fff;
font-size:18px;
margin-bottom:15px;
}

/*social buttons*/
.btn-fb {
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  background: #005a99;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-right:5px;

}

.btn-fb:hover {
  background: #003b65;
  text-decoration: none;
}

.btn-t {
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  background: #1b90e2;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-right:5px;

}

.btn-t:hover {
  background: #1880c8;
  text-decoration: none;
}


.btn-rss {
  font-family: arial;
  color: #ffffff;
  font-size: 14px;
  background: #f17700;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-right:5px;

}

.btn-rss:hover {
  background: #df6e00;
  text-decoration: none;
}

.social-buttons {
width:400px;
margin-left:15px;
}

/*game page*/

/* ~~ top banner  ~~ */
.top-banner-game {height:102px; width:100%; background-color:#e3e3e3; padding-top:6px; margin-bottom:20px;}
.top-banner-holder-game {max-width:970px; margin: 0 auto;}

.container-game {
	
	width: 98%;
	margin: 0 auto;
	display:block;
	overflow:hidden;
}

.content-game{
width: 100%;
display:block;
overflow:hidden;
margin-bottom:20px;
}

/*game top bar*/
.game-top-bar {
background:url("http://www.playretrogames.com/img/game-top-bar.jpg") repeat-x;
height:43px;
z-index:1;


}
.game-top-bar h1 {

font-family: 'Oswald', sans-serif;
font-size:20px;
color:#666;
line-height:44px;
font-weight:lighter;
float:left;
margin-left:20px;

}

.elements {

font-family: 'Oswald', sans-serif;
font-size:20px;
color:#666;
line-height:44px;
font-weight:lighter;
float:right;
margin-right:30px;
width:130px;
}

.elements a{

color:#666;

}

.elements a:hover{

color:#339966;

}

.elements .rating {
float:right;
margin-left:20px;
}



/*right ad game*/
.right-ad-game {

width:160px;
height:600px;
background-color:#000;
float:right;
z-index:2;
position:relative;
margin-left:10px;
}

/*game left side bar*/

.left-sidebar-game { 
width : 336px;
height: 300px;
background-color:#fff;
float:left;
margin: 0 20px 0 0;
}

.more-games{ 
width : 336px;
height: 257px;
background:url("http://www.playretrogames.com/img/popular-games-header.jpg") no-repeat -17px 0px; 
padding-top:65px;
}

.game-list{ 

width : 336px;
}

.game2 { 
width:85px;
height:60px;
margin-bottom:10px;
float:left;
margin-left:10px;

}

.game2 img{ 
-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-ms-border-radius:4px 4px 0 0;-o-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;
width:85px;
height:60px;
float:left;
margin-right:10px;
}

.game2 img:hover{ 
border: solid 2px #999;
border-radius: 4px;
}

.left-ad-bar{ 
width:300px;
height:250px;
}

.ad-text{ 
height:26px;
background-color:#999;
color:#fff;
font-size:14px;
text-align:center;
padding:2px;
overflow:hidden;
}

.game-box-main {

background-color:#fff;
display:block;
overflow:hidden;
text-align: center;
}

.game-box {

margin: 40px 0 0 110px;
display:block;
overflow:hidden;
}


/* ~~ top bar menu ~~ */
.holder1 {max-width:98%; margin: 0 auto;}

/*footer*/

.footer1 {
background-color:#3c4453;
width:100%;
height:195px;
margin: 0 auto;

}

.footer-holder1 {
background:url("http://www.playretrogames.com/img/logofooter.png") no-repeat 0 0; 
height:195px;
color:#fff;
padding: 20px;
font-size:12px;
}

.footer-holder1 a:hover{
text-decoration: underline;
}

.footer-holder1 ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
	margin:10px 0 20px 0;
    color:#fff !important;
}

.footer-holder1 ul span{
color:#339966;
font-weight:bold;
}


/* tool tip */

a.tooltip {outline:none; font-family: 'Oswald', sans-serif; font-size:18px;} 
a.tooltip strong {line-height:30px;} 
a.tooltip:hover {text-decoration:none;} 
a.tooltip span { z-index:10;display:none; padding:14px 20px; margin-top:50px; margin-left:-450px; width:400px; line-height:16px; font-size:14px; } 
a.tooltip:hover span{ display:inline; position:absolute; border:3px solid #000; color:#fff; background-color:#4e5869; } 
.ccheader{ display:block; color:#fff; background-color:#339a66; font-size:18px; padding:5px; } 
.callout {z-index:20;position:absolute;border:0;top:-10px;left:120px;}



/* ~~ resolutions ~~ */

/* styles for screens with width 1900px to 1600px */
@media (max-width: 1920px) and (min-width: 1600px) {

.container-game {width: 87%;}
.game-box { margin: 40px 0 0 0px;}
.holder1 {max-width:87%; margin: 0 auto;}
.footer1 {width:100%;}
.footer-holder1 {margin: 0 auto; width:85%;}
}


/* styles for screens with width 1336px */
@media (max-width: 1440px) and (min-width: 1300px) {

.container-game {width: 98%;}
.game-box { margin: 40px 0 0 0px;}
.holder {max-width:1310px; margin: 0 auto;}

}


/* styles for screens with width from 1280px to 1115px */
@media only screen and (max-width:1280px) {

.right-ad-game {display:none;}
.container-game { width: 98%;}
.game-box { margin: 40px 0 0 10px;}
.holder {max-width:1230px; margin: 0 auto;}

}

/* styles for screens with width from 1102px to 1024px */
 @media only screen and (max-width:1024px) {

.right-ad-game {
display:none;
}
.left-sidebar-game { 
display:none;
}

.game-box {
margin: 40px 0 0 0px;

}

.container-game {
	
	width: 98%;
}
.holder {max-width:970px; margin: 0 auto;}
}

/* for sub text pages */
.content1 {
	padding: 10px 0;
	display:block;
	overflow:hidden;
	width: 1145px;
}

.pNB4{
width : 740px;
padding : 5px 0 5px 0px;
font-size : 11px;
position : relative;
float : left;
margin: 20px 0 10px 20px;
}

/* contact form */

#page-wrap {
	width: 660px;
	background: white;
	padding: 20px 50px 20px 50px;
	margin: 20px auto;
	min-height: 500px;
	height: auto !important;
	height: 500px;
}

#contact-area {
	width: 600px;
	margin-top: 25px;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 471px;
	font-family: Helvetica, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #339966;
}

#contact-area input.submit-button {
	width: 100px;
	float: right;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}


/*tags*/

#tag {
	padding: 0;
	list-style: none;
	height:50px;
	float:right;

	
}

#tag li {
	float: left;
	margin-right: 10px;
}

#tag li a {
	display: block;
	text-decoration: none;
	color: #717171;
	font: bold 11px Arial, sans-serif;
	padding: 5px 8px;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
    border: 1px solid #999;
	background: #e9e9e9;

}

#tag li a:hover {

	background: #1185d5;
	color:#fff;
}

#bannerbottom {
width:728px;
height:90px;
display:block;
margin: 30px auto;
}

#eholder{
width:728px;
margin: 30px auto;
}

span.tagtext{
font-size:14px;
text-align:center;
display:block;
margin: 0 auto;
font-weight:bold;
}

#rating-test{
width:340px;
height:80px;
float:left;
}

#sub-title{
width:723px;
display:block;
height:30px;
font-family: 'Oswald', sans-serif; 
font-size:18px; 
color:#fff;
background-color:#339966;
margin:20px auto;
padding:5px 0 0px 10px;
}

#desc-text{
width:723px;
display:block;
height:auto;
font-size:12px; 
margin:0 auto;
}

#game-comments{
width:728px;
display:block;
height:auto; 
margin:0 auto;
}

/*rating*/

#gameRateBox{width:346px; padding:20px; padding-bottom:15px;  }
#gameRateBox .didyou p{padding:0 0 5px 0; margin:0; text-align:center; font-weight:bold; font-size:12px;}
#rateBox{float:left; width:80px; height:45px; background: url(http://www.playretrogames.com/img/done.png) repeat-x;}
#rateBox .tdown{margin-top:6px;float:right; background-color:#fff;}
#rateBox .tup{float:left; background-color:#fff;}
#rateBox .voted{color:#fff; width:82px; height:38px;}

#rateBox a:hover img{
opacity: 0.7;
filter: alpha(opacity = 80);}

.rating {font-weight:bold; height:17px; width:250px; margin-top:8px; margin-left:15px; float:left; }
.percentbar {
float:left;
background-color:#cf362f;
border:solid 1px gray;
height:12px;
}
.percentbar div {
float:left;
background-color:#aada37;

height:12px;
}


.mrating {font-weight:bold;font-size:10px; height:14px; width:145px; margin-top:5px; margin-left:1px; float:left;text-align:left; }
.mrating p{padding:0px; margin:0px; float:left; width:32px; overflow:hidden; text-align:left;}
.mrating img{float:left;margin-left:0px; margin-top:5px;}


h1.h1cat{
font-size:100%;
font-weight: normal;
font-family: "Oswald",sans-serif;
}