/*
Theme Name: Treefrog
Author: Shaun Pimlott
Author URI: http://www.shaunpimlottdesign.co.uk
Last amend: 2011 Dec 12
*/

/* MAIN STYLES
-------------------------------------------*/
* { margin: 0; padding: 0; }

body,html {
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#333;
	margin:0;
	padding:0;
	background:url(images/bk_body-2.gif) repeat-x 0 0;
	background-color: #f1f1f1;
}

ul {
	list-style:none;
}

a {
	color:#0093CA;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

a:focus {
	outline:none;
}

p {
	margin:1em 0;
}

h1, h2 {
	font-size:28px;
	color:#333;
	font-weight:normal;
	line-height:100%;
	padding-bottom:10px;
}

h1 {
	padding-top:10px;
}

h2 {
	font-size:20px;
	color:#333;
	padding-top:10px;
}

 /* LAYOUT STRUCTURE
--------------------------------------------------*/
#mainWrapper {
	background:url("http://www.treefroggames.com/wp-content/uploads/2015/05/site-header-1505.jpg") no-repeat top center;
	min-width:1024px;
	margin: 0;
	padding: 0;
}

#wrapper {
	margin:0 auto;
	width:976px;
}


#header {
	height:238px;
	position:relative;
	z-index:99; 
	padding:0 8px;
}

#content {
	padding:0 8px 20px;
	background:url(images/bk_content.png) 0 0 repeat-y;

}

#colLeft{
	width:616px;
	float:left;	
	padding:20px 30px 17px 25px;
	background:url(images/bk_colleft.png) 0 0 repeat-x;
}

#colRight {
	width:287px;
	float:left;	
	padding:0 1px;
	position:relative;
}

#footer {
	background:url(images/bk_footer.jpg) 0 0 repeat-x;
	padding:20px;
	width:920px;
	margin:0 auto 20px;
	color:#fff;
	position:relative;
	font-size:11px;
	height:63px;
}

/* HEADER ELEMENTS
------------------------------------------*/
/* -- logo --*/
#logo {
	position:absolute;
	top:15px;
	left:0;
	
}

#logo a img{
	border:none;
}

/* -- main menu --*/

#mainMenu {
	width:960px;
	height:47px;
	position:absolute;
	bottom:0;
}

#mainMenu ul.sf-menu {
	padding-top:12px;
	padding-left:3px;
}

#mainMenu ul.sf-menu li {
	float:left;
	padding:0 22px;
	font-size:18px;
	letter-spacing:1px;
	text-shadow: #000 1px 1px 1px;
}
#mainMenu ul.sf-menu li a {
	text-decoration:none;
}

#mainMenu ul.sf-menu li li a {
	padding:0 12px;
}

#mainMenu ul.sf-menu li li {
	padding:0;
	padding-top:2px;
	border:none;	
}

#mainMenu ul.sf-menu li ul.children {
	padding:0;	
}

#mainMenu ul.sf-menu li ul.children li,#mainMenu ul.sf-menu li.page_item ul li  {
	position:relative;
	line-height:100%;
	height:28px;
	text-transform:none;
}
#mainMenu ul.sf-menu li ul.children li a, #mainMenu ul.sf-menu li.page_item ul li a {
	text-decoration: none;
	display:block;
	padding-top:7px;
	line-height:100%;
	border:none;
	text-transform:none;
}


#mainMenu ul.sf-menu li ul.children li ul.children a {
	text-decoration: none;
	position:relative;
	border:none;
}
#mainMenu ul.sf-menu li ul.children, #mainMenu ul.sf-menu li.page_item ul
{
	margin-top:-2px;
	
}
#mainMenu ul.sf-menu li ul.children ul.children
{
	margin:0 0 0 25px;
}

/*------------------------*/


#topMenu {
	position:absolute;
	right:8px;
	top:0;
	background:url(images/bk_topmenu.png);
}

#topMenu ul li{
	float:left;
	padding:6px;
	color:#ccc;
}

#topMenu ul li a {
	border: 0;
}

#topMenu ul li a:hover {
	text-decoration:none;
}

/* COL LEFT ELEMENTS
-------------------------------------------*/

.searchQuery, #archive-title {
	border-bottom:1px solid #E2E2D8;
	padding:0 0 10px;
	margin-bottom:15px;
}

#colLeft .blogPost .metaLeft {
	float:left;
	width:50px;
	text-align:center;
	padding-right:15px;
	padding-top:14px;
}

#colLeft .blogPost .metaLeft .month {
	text-transform:uppercase;
	font-size:11px;
	height:21px;
	line-height:21px;
}

#colLeft .blogPost .metaLeft .day {
	padding:12px 0;
	font-size:36px;
	border-bottom:1px dotted #cdcdcd;
	margin-bottom:10px;
}

#colLeft .blogPost .metaLeft .comments {
	font-size:16px;
	height:40px;
	line-height:30px;
	font-weight:bold;
}

#colLeft .blogPost .postRight {
	float:left;
	width:526px;
	padding-left:20px;
	border-left:1px solid #D8D8D8;
	padding-top:10px;
	position:relative;
	padding-bottom:10px;
}

#colLeft .blogPost .postRight .metaRight {
	border-top:1px dotted #CDCDCD;
	border-bottom:1px dotted #CDCDCD;
	padding:6px 0;
	font-size:11px;
}

#colLeft .blogPost .postRight .metaRight img {
	vertical-align:middle;
	margin-right:3px;
	border:none;
	padding:0;
}

#colLeft .blogPost a.more-link {
	display:block;
	width:91px;
	height:24px;
	padding-left:10px;
	clear:both;
	border:none;
	line-height:22px;
	margin-top:10px;
	font-size:12px;
}

#colLeft .single {
	margin-bottom:20px;
}

#colLeft p.small {
	font-size: 80%;
}

#colLeft p {
	line-height: 20px;
}

#colLeft p img {
	padding:8px;
	background:#F0F0F0;
	border:1px solid #CCCCCC;
}

#colLeft p img.no-bord {
	padding:4px 0 0 0;
	background:#FFF;
	border:0;
}

#colLeft a {
	color:#006600;
	text-decoration:none;
}

#colLeft a:hover {
	color:#669933;
	text-decoration:underline;
}

.alignleft { 
	float:left; margin:5px 15px 5px 0;
}

.alignright { 
	float:right; margin:5px 0 5px 15px; 
}

.navigation {
	margin-left:65px;
	margin-top:15px;
}

.navigation .alignleft a, .navigation .alignright a {
	display:block;
	width:91px;
	height:24px;
	text-align:center;
	padding-left:8px;
	padding-top:3px;
	font-size:12px;
}

.navigation .alignleft a:hover, .navigation .alignright a:hover {
	text-decoration:none;
} 

.navigation .alignright a {
	text-align:left;
	padding-left:18px;
	width:73px;
}

#colLeft ul li {
	background:url(images/bullet_left.png) 0 10px no-repeat;
	padding:5px 0 5px 14px;
}

#form-box1 {
	padding:14px;
	background:#F0F0F0;
	border:1px solid #CCCCCC;
}

/* TABLES 
------------------------------------------*/

#colLeft table {
	width:490px;
	border: 0;
	padding: 0;
	margin: 0;
}

#colLeft th {
	background: #fff url("http://www.treefroggames.com/wp-content/uploads/2011/03/games-th-bg.gif") repeat-x top left;
	color: #fff;
	margin: 0;
	padding: 0;
	text-align: left;
	height: 45px;
	font-weight: normal;
        font-size: 0.9em
}

#colLeft td {
	padding: 4px;
}

#colLeft tr.grey {
	background-color:#f6f6f6;
}

/* COL RIGHT ELEMENTS
------------------------------------------*/

#colRight h2 {
	font-size:14px;
	height:28px;
	padding:10px 15px 0;
	font-weight:bold;
	letter-spacing:1px;
	text-align:center;
}

#colRight h3 {
	margin: 0 0 15px 0;	
	padding:10px 0 0 15px;
	font-size:18px;
	font-weight:bold;
	color:#0293ca;
	line-height: 1.5em;
}

#colRight a {
	color:#006600;
	text-decoration:none;
}

#colRight a:hover {
	color:#669933;
	text-decoration:underline;
}

#colRight ul {
	margin:0 15px 15px;
	border-bottom:1px solid #cdcdcd;
}

#colRight div {
	margin:0 15px 15px;
}

#colRight ul li {
	padding:5px 0 5px 14px;
	font-size:12px;
}

#colRight ul li a {
	color:#333;
}

#colRight ul li:hover a, #colRight ul li a:hover{
	text-decoration:none;
}

#colRight p {
	text-align: center;
	line-height:14px;
}

/* CENTERING SIDEBAR IMAGE */
#colRight-img {
	width: 234px;
	display:block;
    margin-left: auto;
    margin-right: auto;
	border:0;
}

#colRight img.small {
    margin: 7px;
    padding:0;
    float: left;
    border:0;
}

#colRight img a {
	border:0;
}

/* FOOTER ELEMENTS
-------------------------------------------*/

#footerMenu li{
	float:left;
	padding-right:12px;
	padding-top:5px;
}

#spd {
	position:absolute;
	right:20px;
	top:25px;
	color: #fff;
}

#spd a {
	color: #e1e1e1;
}


/* FORMS
-------------------------------------------*/
#colRight #searchBox {
	background:url(images/bk_grad_up.jpg) 0 100% repeat-x;
	padding:20px 0;
	padding-left:13px;
	margin:0;
}

#searchform input {
	border:none;
	border-left:1px solid #CDCDCD;
	border-top:1px solid #CDCDCD;
	background:#fff;
	padding:6px 4px 7px 25px;
	color:#666;
	width:157px;
	float:left;
	background:#fff url(images/ico_search.jpg) 5px 50% no-repeat;
}

#searchform input#searchsubmit {
	width:72px;
	height:30px;
	border:none;
	background:url(images/but_search.jpg) 0 0 no-repeat;
	cursor:pointer;
	padding:0;
	text-align:center;
	color:#ccc;
	font-size:12px;
}

/* contact */

#contact label {
	display:block;
	padding:8px 0 2px;
}

#contact input, #contact textarea {
	border:1px solid #ddd;
	padding:5px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	width:300px;
}

#contact textarea {
	width:500px;
}

#contact input.submit {
	border:none;
	width:107px;
	height:31px;
	text-align:center;
	padding-top:4px;
	margin-top:15px;
	background:url(images/but_send.jpg) 0 0 no-repeat;
}

.errormsg, .successmsg{
	background:#FEF4F1;
	border:1px solid #F7A68A;
	color:#DA4310;
	padding:10px;
}

.successmsg {
	border:1px solid #9FD9FF;
	background:#EAF7FF;
	color:#00BFF5;
}

/* CLEARING
---------------------------------------------------*/
.clearfix:after {
    content: "."; 
    display:block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
	display: block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.clear {
	clear: both;
}

.noclear {
	clear: none;
}

/* WIDGET STYLING
---------------------------------------------------*/

#colRight .textwidget p {
	line-height: 1.4em;
}

h2.widgettitle {

}

/* PAYPAL FORMS
---------------------------------------------------*/

#pp-box {
	margin: 17px 50px 0 20px;
	padding: 12px;
	border-top: 1px dashed #669933;
	border-left: 1px dashed #669933; 
	border-right: 1px dashed #669933; 
	border-bottom: 1px dashed #669933;  
	width: 200px; 
	float: right;
	background-color: #f9f9f9;
}

.pp {
	margin: 0;
	padding: 0 0 8px 0;
	border-bottom: 1px dashed #669933; 
}

.pp-final {
	margin: 0;
	padding: 0 0 8px 0;
}

form p {
	margin: 0;
	padding: 10px 10px;
	font: 0.9em Arial, Helvetica, sans-serif;
	line-height: 18px;
}

form h3 {
	margin: 0;
	padding: 0 0 0 10px;
}

/* Highlight Box ------------------------------------------*/

.hi-box {
	border:dotted 1px #669933;
	padding: 20px;
	margin: 0 0 12px 0;
	background-color: #d1f0bc;
}

.hi-box p {
	line-height: 140%;
}

#hi-box-right {
	border:dotted 1px #669933;
	margin: 16px 40px 0 20px;
	padding: 22px; 
	width: 200px; 
	float: right;
	background-color: #d1f0bc;
}


/* BUTTONS Games COLRIGHT
---------------------------------------------------*/


/* A Few Acres of Snow ------------------------------------------*/
#b_afaos
{
  display: block;
  width: 234px;
  height: 206px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2012/08/b_afaos_2.gif") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_afaos:hover
{ 
  background-position: 0 -206px;
}

#b_afaos span
{
  position: absolute;
  top: -999em;
}

/* Ankh-Morpork CE ------------------------------------------*/
#b_amce
{
  display: block;
  width: 234px;
  height: 206px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2012/08/b_dwce_2.gif") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_amce:hover
{ 
  background-position: 0 -206px;
}

#b_amce span
{
  position: absolute;
  top: -999em;
}

/* Side Button - Doctor Who ------------------------------------------*/
#b_drwho {
  display: block;
  width: 234px;
  height: 298px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2012/10/b-doctor-who.jpg") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_drwho span
{
  position: absolute;
  top: -999em;
}

/* Side Button - The Witches ------------------------------------------*/
#b_witches
{
  display: block;
  width: 234px;
  height: 245px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2013/01/b-witches.jpg") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_witches:hover
{ 
  background-position: 0 -245px;
}

#b_witches span
{
  position: absolute;
  top: -999em;
}

/* Side Button - Moongha Invaders ------------------------------------------*/
#b_moongha2
{
  display: block;
  width: 234px;
  height: 245px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2013/01/b-moongha-2.jpg") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_moongha2:hover
{ 
  background-position: 0 -245px;
}

#b_moongha2 span
{
  position: absolute;
  top: -999em;
}

/* Side Button - A Study In Emerald -------------------*/

#b_asie
{
  display: block;
  width: 234px;
  height: 287px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2014/06/b-asie-3.jpg") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_asie:hover
{ 
  background-position: 0 -287px;
}

#b_asie span
{
  position: absolute;
  top: -999em;
}

/* Side Button - Field of Glory ------------------------------------------*/

#b_fog
{
  display: block;
  width: 234px;
  height: 287px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2013/11/b-fog-2.jpg") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_fog:hover
{ 
  background-position: 0 -287px;
}

#b_fog span
{
  position: absolute;
  top: -999em;
}

/* Side Button - Witches - Collectors Edition ------------------------------------------*/

#b_wce
{
  display: block;
  width: 234px;
  height: 287px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2013/10/b-tw-ce2.jpg") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_wce:hover
{ 
  background-position: 0 -287px;
}

#b_wce span
{
  position: absolute;
  top: -999em;
}

/* Side Button - Onward To Venus ------------------------------------------*/

#b_otv {
  display: block;
  width: 234px;
  height: 287px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2015/01/b-o2v-2.png") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_otv:hover
{ 
  background-position: 0 -287px;
}

#b_otv span
{
  position: absolute;
  top: -999em;
}

/* Side Button - Mythotopia ------------------------------------------*/

#b_myth
{
  display: block;
  width: 234px;
  height: 287px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2015/01/b-myth-2.png") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_myth:hover
{ 
  background-position: 0 -287px;
}

#b_myth span
{
  position: absolute;
  top: -999em;
}

/* BUY Button - Witches - Collectors Edition ------------------------------------------*/

#b_buy-wce
{
  display: block;
  width: 207px;
  height: 66px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2013/10/b_buy-witches.png") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_buy-wce:hover
{ 
  background-position: 0 -66px;
}

#b_buy-wce span
{
  position: absolute;
  top: -999em;
}

/* BUTTON - BUY via STORE ------------------------------------------*/

#b_buystore
{
  display: block;
  width: 285px;
  height: 46px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2013/11/buy-button.png") no-repeat 0 0;

}

#b_buystore:hover
{ 
  background-position: 0 -46px;
}

#b_buystore span
{
  position: absolute;
  top: -999em;
}

/* Button - Buy in Store 2 ------------------------------------------*/

#b_buystore2
{
  display: block;
  width: 160px;
  height: 60px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2013/12/buy-button-2.png") no-repeat 0 0;

}

#b_buystore2:hover
{ 
  background-position: 0 -60px;
}

#b_buystore2 span
{
  position: absolute;
  top: -999em;
}

/* Subscription Buttons  ------------------------------------------*/

#b_sub_uk
{
  display: block;
  width: 285px;
  height: 46px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2014/01/sub-buy-button-uk.png") no-repeat 0 0;

}

#b_sub_uk:hover
{ 
  background-position: 0 -46px;
}

#b_sub_uk span
{
  position: absolute;
  top: -999em;
}

#b_sub_eu
{
  display: block;
  width: 285px;
  height: 46px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2014/01/sub-buy-button-eu.png") no-repeat 0 0;

}

#b_sub_eu:hover
{ 
  background-position: 0 -46px;
}

#b_sub_eu span
{
  position: absolute;
  top: -999em;
}

#b_sub_row
{
  display: block;
  width: 285px;
  height: 46px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2014/01/sub-buy-button-row.png") no-repeat 0 0;

}

#b_sub_row:hover
{ 
  background-position: 0 -46px;
}

#b_sub_row span
{
  position: absolute;
  top: -999em;
}


#b_sub_sk
{
  display: block;
  width: 285px;
  height: 46px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2014/01/sub-buy-button-sk.png") no-repeat 0 0;

}

#b_sub_sk:hover
{ 
  background-position: 0 -46px;
}

#b_sub_sk span
{
  position: absolute;
  top: -999em;
}

/* button generator  ------------------------------------------*/

.btn {
  background: #78a761;
  background-image: -webkit-linear-gradient(top, #78a761, #5b7746);
  background-image: -moz-linear-gradient(top, #78a761, #5b7746);
  background-image: -ms-linear-gradient(top, #78a761, #5b7746);
  background-image: -o-linear-gradient(top, #78a761, #5b7746);
  background-image: linear-gradient(to bottom, #78a761, #5b7746);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 9px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

/* img grow effect  ------------------------------------------*/

.grow img{
transition: 1s ease;
}

.grow img:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1s ease;
}

/* pre-order button ------------------------------------------*/
#b_ahos
{
  display: block;
  width: 286px;
  height: 38px;
  background: url("http://www.treefroggames.com/wp-content/uploads/2016/12/b_ahos.png") no-repeat 0 0;
  margin-left: auto;
  margin-right: auto;
}

#b_ahos:hover
{ 
  background-position: 0 -38px;
}

#b_ahos span
{
  position: absolute;
  top: -999em;
}