@charset "utf-8";
/* CSS Document */
/*
 * EA - Triple A
 * Nicole Bouchard, clinic.co.uk
 * 25/10/2010
 *
*/

/*
-------------------------------------------------------------- 
YAHOO RESET 
-------------------------------------------------------------- 
*/ 


@import url("css/garland-defaults.css");
@import url("css/reset-min.css");

/*
-------------------------------------------------------------- 
GLOBAL STYLES
-------------------------------------------------------------- 
*/ 

html, body {margin: 0px; padding: 0px; font: .9em Helvetica, Arial, sans-serif; width:100%; line-height: 1.5em; height:100%; color: #666;}

html	{ background: #3b3b3b url(images/backgrounds/body_bg.gif); }
body	{ background: url(images/backgrounds/orangeBurst_bg_transparent.png) center 28px no-repeat;}

#mainWrap	{ width: 960px; margin: 0px auto;}

a, a:hover	{ text-decoration: none; color: #ff6600;}

a.ribbon,
span.ribbon	{ display: inline-block; margin: 5px 0px; background: url(images/backgrounds/orangeRibbon_bg.png) right top no-repeat; color: #FFF; font-size: 10px; line-height: 10px; text-transform:uppercase; font-family: Arial,Helvetica,  sans-serif; height:11px; padding: 3px 12px 3px 6px;}

.floatL	{ float: left;}
.floatR	{ float: right;}

p	{ margin-bottom: 10px;}
p.date	{ color: #ff6600; text-transform: uppercase; font-size: 10px;}

/* Headers */
h1	{ font-size: 18px; line-height: 18px; height: 46px; background: url(images/backgrounds/title_bg.png) right top no-repeat; text-transform: uppercase; color:#000; position:relative; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
h1 span	{ height: 20px; padding: 13px 0px 13px 20px; display: block; color: #000;}
h2	{ font-size: 18px; color: #333; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
h3	{ font-size: 14px; color: #333; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}

/* Lists */

/* Global Strip */
#globalStrip	{ height: 30px; display: block; background: url(images/backgrounds/globalStrip_bg.png) repeat-x; border-bottom: 1px solid #434343; /*margin-bottom: -6px;*/}
#globalStrip #container	{ height: 30px; width: 960px; margin: 0px auto; }

#globalStrip .clear-block	{ display: inline-block;}
#globalStrip .block .content	{ margin: 0px;}

#block-menu-menu-global-strip h2	{ display: none;}
#block-menu-menu-global-strip ul.menu	{ height: 30px; width: 960px;}
#block-menu-menu-global-strip ul.menu li	{ float: right;}
#block-menu-menu-global-strip ul.menu li.first { float: left;}

/* static HTML version */
#globalStrip .leftIcon	{ float:left;}
#globalStrip .rightIcon	{ float: right;}

/* Header */
#headerWrap					{ height:96px; z-index: 2; background:url(images/backgrounds/navRibbon_bg.png) bottom center no-repeat; position: relative;}
#headerWrap #logoWrap		{ width: 230px; height: 90px; position: absolute; top: 0px; left:0px; }
#headerWrap #logoWrap a		{ width: 230px; height: 90px; display: inline-block;}
#headerWrap #gamesPlanet	{ width: 730px; padding: 17px 0px; height:31px; text-align: right; position: absolute; top: 0px; right:0px; background: url(images/backgrounds/navVerticalGradient.png) left top repeat-y;}

/* Main Nav*/

.block ul, ul.menu, ul.menu li, .item-list ul, li.leaf	{ margin: 0px; padding: 0px;}


#block-menu-primary-links h2	{ display: none;}
#block-menu-primary-links ul.menu	{ 
	width: 730px; 
	height:25px; 
	position: absolute; 
	top: 65px; 
	left:230px; 
	background: url(images/backgrounds/navVerticalGradient.png) left top repeat-y;
}
#block-menu-primary-links ul.menu li	{ 
	float: left; 
	font-size: 15px; 
	line-height: 1em; 
	font-weight: bold; 
	text-transform: uppercase; 
	padding-left: 10px;
}
#block-menu-primary-links ul.menu li a	{ 
	padding: 4px 10px; 
	height:17px; 
	color: #FFF; 
	opacity:0.5; 
	filter:alpha(opacity=50); 
	display: inline-block;
}
#block-menu-primary-links ul.menu li a:hover	{opacity:0.8; filter:alpha(opacity=80);}


/* static HTML version */
ul.mainNav	{ width: 730px; height:25px; position: absolute; top: 65px; left:230px; background: url(images/backgrounds/navVerticalGradient.png) left top repeat-y; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
ul.mainNav li	{ float: left; font-size: 15px; line-height: 1em; font-weight: bold; text-transform: uppercase; padding-left: 10px;}
ul.mainNav li a	{ padding: 4px 10px; height:17px; color: #000;  display: inline-block;}
ul.mainNav li a.on,
ul.mainNav li a:hover	{ /*opacity:1; filter:alpha(opacity=100);*/ color: #FFF;}


/* Content Area */
#contentWrap	{ width: 960px; min-height: 600px; margin-top:-6px; z-index: 5;}
#contentArea	{ width: 940px; min-height: 600px; background-color: #e3e3e3; margin: 0px 10px;}

#backgroundImg	{ width: 940px; min-height: 660px; position: absolute; top:0; left:0; z-index:1; background-color: /*#e3e3e3*/ #3b3b3b; opacity:0.0; filter:alpha(opacity=0);}

/* Footer */
#footerWrap			{ font-size: .9em; color: #666; background: url(images/backgrounds/footerTop_bg.png) center top no-repeat; width: 960px; padding-top: 6px; margin-top:-6px;}
#footerContent		{ background: url(images/backgrounds/footer_bg.gif); padding: 30px 10px; min-height:36px;}
#footerContent a	{ color: #666;}
#footerContent img	{ float: left; opacity:0.15; filter:alpha(opacity=15); padding-right: 10px;}


/* Panel Nav */
#panelNavWrap { z-index:2;}

ul.panelNav	{ width: 210px; }
ul.panelNav li	{ height: 53px; width: 170px; margin-bottom: 2px; background: url(images/sprites/panelNav_bg.png) 0px -55px no-repeat;}
ul.panelNav li a	{ display: block; height: 33px; width: 150px; padding: 10px; color: #888; font-size: 10px; line-height: 1em; text-transform: uppercase;}
ul.panelNav li a h2	{ font-size: 18px; line-height: 18px; margin-bottom: 3px; color: #888;}

ul.panelNav li.on,
ul.panelNav li:hover	{ width: 210px; background: url(images/sprites/panelNav_bg.png) 0px 0px no-repeat;}
ul.panelNav li.on a,
ul.panelNav li:hover a	{ width: 190px; color: #FFF;}
ul.panelNav li.on a h2,
ul.panelNav li:hover a h2 { color: #FFF;}

ul.panelNav li.on a#social,
ul.panelNav li:hover a#social	{ background: url(images/sprites/productCategory_icons.png) 158px 0px no-repeat;}
ul.panelNav li.on a#mobile,
ul.panelNav li:hover a#mobile	{ background: url(images/sprites/productCategory_icons.png) 158px -53px no-repeat;}
ul.panelNav li.on a#browser,
ul.panelNav li:hover a#browser	{ background: url(images/sprites/productCategory_icons.png) 158px -106px no-repeat;}
ul.panelNav li.on a#portal,
ul.panelNav li:hover a#portal	{ background: url(images/sprites/productCategory_icons.png) 158px -159px no-repeat;}


/* Panel Controls */
#panelControls	{ width: 200px; height:24px; text-align:center; position: absolute; top: 296px; left: 370px; z-index: 80;}
#panelControls ul	{ display: inline-block;}
#panelControls ul li	{ display: inline-block; float: left; height:24px; width: 24px; background:url(images/sprites/panelControls.png) 0px -48px no-repeat;}

#panelControls ul li.first	{ background:url(images/sprites/panelControls.png) 0px 0px no-repeat; cursor: pointer;}
#panelControls ul li.last	{ background:url(images/sprites/panelControls.png) 0px -24px no-repeat; cursor: pointer;}
#panelControls ul li.on		{ background:url(images/sprites/panelControls.png) 0px -72px no-repeat;}

/* Content Areas*/
#panelDesc	{ width: 650px; height: 175px; padding: 20px 30px; background: url(images/backgrounds/transparentBlack_block.png); position: absolute; /*top: 60px;*/ left: 0px; color: #CCC; font-size: 1.1em; line-height: 1.3em;}
#panelDesc h2	{ color: #FFF; font-size: 31px; line-height:1.1em; margin-bottom: 10px;}
#panelDesc h3	{ color: #FFF; font-size: 25px; line-height:1.2em; margin-bottom: 10px;}
#panelDesc .text	{ width:390px; float:left; height:175px;}
#panelDesc .text img	{ margin-bottom: 8px;}
#panelDesc .image	{ width:230px; float:left; height:175px; margin-left: 30px; text-align:right;}
#panelDesc .image img	{ border: 3px solid #FFF;}

#mainContent	{ background:url(images/backgrounds/mainCont_gradient.png) no-repeat; min-height: 320px; width: 940px; float: left; margin-top: 340px; padding: 35px 0px 0px;}
#mainContent .text	{ padding: 16px 20px; font-size: 12px;}

#mainContent, #darkGradient	{ z-index: 2; position: relative;}

/* News */
.pressRelease	{ margin-bottom: 8px;}
.pressRelease p	{ margin-bottom: 2px;}
.pressRelease a	{ color: #333;}
.pressRelease a:hover	{ text-decoration: underline;}

/* Tweets */
.tweetBox	{ width: 280px; height: 115px; margin-top: 17px; background:url(images/backgrounds/homeTweet_bg.png) no-repeat; position:relative;}
.tweetBox table	{ width: 270px; height: 100px; margin: 5px;}
.tweetBox table td	{ padding: 15px; font-family: Helvetica, Arial, sans-serif;}
.tweetBox a.ribbon	{ position: absolute; bottom: 0px; right: -7px; margin: 0px;}
.socialBox	{ width: 280px; height: 42px; margin-top: 12px; background: url(images/backgrounds/homeSocial_bg.png) no-repeat;}
.socialBox img	{ float: left; margin: 5px;}
.socialBox h3	{ color: #ff6600; text-transform: uppercase; font-size: 14px; line-height: 15px; padding: 13px 4px; float:left; font-weight:bold;} 


/* Title Icons*/
h1.news span		{ background: url(images/sprites/title_icons.png) right 0px no-repeat;}
h1.tweets span		{ background: url(images/sprites/title_icons.png) right -46px no-repeat;}
h1.social span		{ background: url(images/sprites/title_icons.png) right -92px no-repeat;}
h1.mobile span		{ background: url(images/sprites/title_icons.png) right -138px no-repeat;}
h1.browser span		{ background: url(images/sprites/title_icons.png) right -184px no-repeat;}
h1.portal span		{ background: url(images/sprites/title_icons.png) right -230px no-repeat;}
h1.contact span		{ background: url(images/sprites/title_icons.png) right -276px no-repeat;}


h1 span.end	{ width: 8px; height:46px; padding:0px; background: url(images/backgrounds/title_bg_end.png) left top no-repeat; position:absolute; left: -8px;}

/*
-------------------------------------------------------------- 
PAGE SPECIFIC STYLES
-------------------------------------------------------------- 
*/ 
/* Background images*/
.social_bg1		{ background: url(images/graphics/social-bg1.jpg) no-repeat;}
.social_bg2		{ background: url(images/graphics/social-bg2.jpg) no-repeat;}
.mobile_bg1		{ background: url(images/graphics/mobile-bg1.jpg) no-repeat;}
.mobile_bg2		{ background: url(images/graphics/mobile-bg2.jpg) no-repeat;}
.browser_bg1	{ background: url(images/graphics/browser-bg1.jpg) no-repeat;}
.browser_bg2	{ background: url(images/graphics/browser-bg2.jpg) no-repeat;}
.portal_bg1		{ background: url(images/graphics/portal-bg1.jpg) no-repeat;}
.portal_bg2		{ background: url(images/graphics/portal-bg2.jpg) no-repeat;}


/* Home page */
#homeGames	{ width: 940px; min-height: 660px; position: relative; }

#homeGames #panelNavWrap	{ height: 218px; width: 210px; position: absolute; top: 60px; left: -10px;}

#homeGames #changableContentHome1	{ width: 710px; height: 280px; position: absolute; top: 60px; right: 0px; overflow:hidden; z-index: 50;}
#homeGames #changableContentHome2	{ width: 250px; height: 600px; position: absolute; top: 60px; right: 0px; overflow:hidden; z-index: 50;}

#homeGames #panelDesc		{ width: 460px; height: 175px; padding: 20px 220px 20px 30px; font-size: 18px;}
#homeGames .descriptions 	{ display:none;}
#homeGames .desc_1			{ display:block;}

#homeGames #gameDesc		{ width: 250px; height: 600px; z-index:4; position:absolute; /*top: 60px;*/ left: 0px; }
#homeGames .games 			{ display:none;}
#homeGames .game_1			{ display:block;}

#homeGames #gameDesc .text	{ padding: 10px 20px; color:#FFF; /*font-family: Helvetica, Arial, sans-serif;*/ font-size: 1.1em; position:absolute; top:400px;}
#homeGames #gameDesc .text h2	{ color: #FFF;}

#homeGames #mainContent		{ background:url(images/backgrounds/home_mainCont_gradient.png) no-repeat; width: 690px;}

#homeGames #mainContent .znews		{ width: 320px; float: left; margin-right:35px;}
#homeGames #mainContent .ztweets	{ width: 285px; float: left;}
#homeGames #darkGradient	{ background:url(images/backgrounds/gameDesc_gradient.png) no-repeat; height: 320px; width: 250px; float: left; margin-top: 340px;}

#homeGames .znews .text	{ padding: 16px 20px; font-family: Helvetica, Arial, sans-serif;}

/* Product pages */
#products	{ width: 940px; min-height: 660px; position: relative;}

#products #panelNavWrap		{ height: 55px; width: 210px; position: absolute; top: 20px; left: -10px;}

#products #changableContentProducts	{ width: 940px; height: 280px; position: absolute; top: 60px; right: 0px; overflow:hidden; z-index: 50;}

#products #panelDesc	{ left: 230px;}
#products .descriptions 	{ display:none;}
#products .desc_1			{ display:block;}
#products .descriptions .text2	{ padding-right:70px;}
#products #panelCharacter	{ height: 280px; width: 220px; position: absolute; /*top: 60px;*/ left: 0px;}

#panelCharacter.char_social_1	{ background: url(images/graphics/products_character_social.png) no-repeat;}
#panelCharacter.char_social_2	{ background: url(images/graphics/products_character_social2.png) no-repeat;}
#panelCharacter.char_mobile_2	{ background: url(images/graphics/products_character_mobile2.png) no-repeat;}
#panelCharacter.char_browser_2	{ background: url(images/graphics/products_character_browser2.png) no-repeat;}
#panelCharacter.char_portal_2	{ background: url(images/graphics/products_character_portal2.png) no-repeat;}

#mainContent #currentProduct	{ width: 640px; float:left;}
#mainContent #productLinks		{ width: 240px; float:left; padding: 5px 0px 0px 60px;}

/* Press Release pages */
#newsArticle	{ width: 640px; float: left; margin-top: 25px;}
#newsArticle .text	{ padding: 16px 20px 30px;/* font-family: Helvetica, Arial, sans-serif;*/}
#newsArticle table		{ width: 350px;}
#newsArticle table th	{ font-weight: bold; border:none;}
#newsArticle .newsContent 	{ margin: 10px 10px 20px;}
#newsArticle .screenshot	{ float:left; padding: 0px 20px 20px 0px;}

#otherNews	{ width: 220px; float:left; padding: 20px; margin: 20px 0px 20px 40px;}
#otherNews h2	{ margin-bottom: 10px;}

#otherNews .tweetBox	{ width: 220px; height: 145px; margin-top: 17px; background:url(images/backgrounds/newsTweet_bg.png) no-repeat; position:relative;}
#otherNews .tweetBox table	{ width: 210px; height: 130px; margin: 5px;}

/* Contact pages */
#contact	{ width: 920px; padding-top: 25px; }
#contact .text	{ padding: 16px 20px 30px; width: 430px; float: left;}
#contact .ztweets	{ float: left; width: 300px;}

#contact .map	{ float: left; width: 385px; margin: 15px 0px 0px 50px;}

/* Other*/
#fullPage	{ width: 940px; padding-top: 25px; }
#fullPage h1	{ margin-right: 20px;}
#fullPage .text	{ padding: 16px 20px 30px;}

/*
-------------------------------------------------------------- 
CLEAR FLOATS
-------------------------------------------------------------- 
*/
.clearfix:after { content: " "; display:block; height:0; clear:both; font-size:0; visibility:hidden; }
.clearfix { display: inline-block; }
/* hides from IE/Mac \*/
* html .clearfix{ height: 1%; }
.clearfix { display: block; }
/* end hide from IE-Mac */
/*** end clearing hack  ***/

.cleaner	{ clear:both;}
.noMargin	{ margin: 0px;}