/****************************************
| Theme Name: Klei
| Theme URI: http://wordpress.org/
| Description: The WordPress theme for use by Klei Entertainment Only.
| Author: Adam Foster
| Author URI: http://www.fullyillustrated.co.uk
| Tags: Klei, custom header, fixed width, two column, games
| Date Created: 18-08-2008
| Copyright 2008 Fully Illustrated
|
****************************************/

/** CSS RESET **/

* {	margin: 0px; padding: 0px; text-indent: 0px; }
img { border: none; padding: 0px; }
ol, ul { list-style: none; }

/** GLOBAL STYLES **/

a, a:visited { color: #730c0c; text-decoration: underline; font-weight: bold; }
a:hover { color: #333333; text-decoration: none; }
a:focus { border: none!important; outline: 0 none; }
.left { float: left!important}
.right { float: right!important}
.clear { clear: both!important}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
.last { margin-bottom: 0px!important; }
.end { margin-right: 0px!important; }
.blank { background: none!important; }

h1 { font-size: 30px; }
h2 { font-size: 26px; line-height: 30px; color: #730c0c; font-weight: normal; }
h4 { font-size: 12px; }

/** LAYOUT **/
body { font-family: "Arial", sans-serif; font-size: 12px; line-height:16px; color: #333; background: #FFF url('images/background-body.gif') repeat-x; }
#wrapper { background: url(images/background-characters.png) top no-repeat; }
#page { width: 930px; margin: 0 auto; }
#header { position: relative; }
#logo { position: absolute; height: 159px; width: 244px; overflow: hidden; top: 12px; left: 35px; }
#logo a, #logo a:visited { position: absolute; left: 0; top: 0; display: block; height: 159px; width: 244px; background: url(images/logo-klei.png) no-repeat top left; }
#banner { background: url(images/background-banner.png) top no-repeat; padding: 19px; height: 192px; width: 892px; position: relative; top: 81px; margin-bottom: 81px; }
#content { margin: 0 auto 10px; width: 833px; padding: 0 10px; }
.bannerimg { display: block; height: 192px; width: 893px; background-repeat: no-repeat; background-position: top; background-image: url(images/banner-newspage.jpg);  }

/** navigation **/
#navigation { position: absolute; right: 65px; top: 0px; width: 385px; height: 90px; overflow: hidden; }
#navigation ul li { float: left; height: 90px; }
#navigation ul li a, #navigation ul li a:visited { background: url(images/background-navigation.png); background-repeat: no-repeat; float: left; height: 0; overflow: hidden; padding: 90px 0 0 0; width: 72px; }
#navigation ul li a:hover, #navigation ul li a.current_page_item { background-position: 0 -90px; }
#navigation ul .page-item-aboutklei a, #navigation ul .page-item-aboutklei a:visited { width: 88px; background-position: -72px 0; }
#navigation ul .page-item-aboutklei a:hover, #navigation ul .page-item-aboutklei a.current_page_item { background-position: -72px -90px!important; }
#navigation ul .page-item-ourgames a, #navigation ul .page-item-ourgames a:visited { width: 97px; background-position: -160px 0; }
#navigation ul .page-item-ourgames a:hover, #navigation ul .page-item-ourgames a.current_page_item, #navigation ul .page-item-ourgames a.current_page_ancestor { background-position: -160px -90px!important; }
#navigation ul .page-item-news a, #navigation ul .page-item-news a:visited { width: 56px; background-position: -257px 0; }
#navigation ul .page-item-news a:hover, #navigation ul .page-item-news a.current_page_item, #navigation ul .page-item-news a.current_page_ancestor { background-position: -257px -90px!important; }
#navigation ul .page-item-contact a, #navigation ul .page-item-contact a:visited { background-position: -313px 0; }
#navigation ul .page-item-contact a:hover, #navigation ul .page-item-contact a.current_page_item { background-position: -313px -90px!important; }

/* footer */
#footer { border-top: 1px solid #d5cccc; padding: 12px 0; margin: 0 auto; width: 833px; }
#footernavigation li { float: left; margin: 0 8px 0 0; padding: 0 8px 0 0; background: url(images/background-divider.gif) right no-repeat; }
#footernavigation li.page-item-contact { background: none; }
#footer a, #footer a:visited { line-height: 22px; color: #999999; font-weight: normal; text-decoration: none; }
#footer a:hover { color: #a10e0a; }
#footer .fullyillustrated { float: right; padding: 0 38px 0 0; position: relative; }
#footer .fullyillustrated .fullyillustratedlogo { position: absolute; right: 0px; top: 2px; }

/* homepage */
.page-home { background: #FFF url(images/background-body-home.gif) repeat-x; }
.page-home #wrapper { background: url(images/background-characters-home.png) top no-repeat; }
.page-home #banner { background: url(images/background-banner-shadow.png) top no-repeat; padding: 19px; height: 352px; width: 892px; position: relative; top: 81px; margin-bottom: 81px; }
.button { display: block; background-repeat: no-repeat; background-position: 0px 0px; }
.button span { display: none; }
a.buttonshowme, a.buttonshowme:visited { position: absolute; right: 20px; bottom: 15px; width: 208px; height: 46px; background-image: url(images/button-showme.png); }
a.buttonshowme:hover { background-position: 0px -45px; }
.page-home .column { margin: 10px 0; position: relative; }
.columnheader { border-bottom: 1px solid #d5cccc; padding: 0 0 0px 0; margin: 0 0 12px 0; }
.columnheaderless { margin: 0 0 6px 0; }
.width440 { width: 440px; }
.width360 { width: 360px; }
.width833 { width: 833px; }
.rightarrowbutton { float: left; }
.rightarrowbutton a, .rightarrowbutton a:visited { background-image: url(images/button-arrow-right.gif); background-repeat: no-repeat; background-position: 0 0; width: 28px; height: 26px; display: block; text-decoration: none; }
.rightarrowbutton a:hover { background-position: 0 -26px; }
.homenewsrow { width: 370px; float: left; clear: both; margin: 0 0 8px 0; }
.rightpostdata { width: 332px; float: right; }
.newscolumnentry { background: url(images/character-robot.gif) right bottom no-repeat; }
.homenewsrow .date { color: #730c0c; font-weight: bold; }
.rightpostdata a, .rightpostdata a:visited { color: #333333; text-decoration: none; }
.rightpostdata a:hover { color: #730c0c; }
.gamescolumnentry { position: relative; left: 4px; top: 0px; width: 850px; }
.gamesbox { height: 118px; width: 282px; float: left; padding: 19px 0; position: relative; left: -10px; }
.gamesbox-top { position: absolute; height: 19px; width: 282px; background: url(images/background-box-top.gif) no-repeat top; top: 0; left: 0; }
.gamesbox-mid { background: url(images/background-box-mid.gif) repeat-y top; width: 246px; padding: 0 18px; }
.gamesbox-bot { position: absolute; height: 19px; width: 282px; background: url(images/background-box-bot.gif) no-repeat top; bottom: 0; left: 0; }
.page-home  .columnentry p { text-align: justify; }

/* games page */
.page-ourgames .bannerimg { background-image: url(images/banner-gamespage.jpg); }
.gamespagerow { background: url(images/background-games-banners.gif) no-repeat top; height: 142px; width: 812px; padding: 15px 17px; position: relative; left: -6px; }
a.buttonshowmesmall, a.buttonshowmesmall:visited { position: absolute; right: 20px; bottom: 15px; width: 188px; height: 36px; background-image: url(images/button-showme-small.png); }
a.buttonshowmesmall:hover { background-position: 0px -36px; }
.gamesbanners { padding: 10px 0; }

/* news page */
.width547 { width: 547px; }
.width266 { width: 266px; }
.newsbg .gamesbox, .commentbg .gamesbox, .aboutbg .gamesbox { left:-7px; }
.newsbg { background: url(images/character-news-robot.gif) bottom right no-repeat; min-height: 660px; }
.newsbg .columnheader, .commentbg .columnheader, .aboutbg .columnheaderless { margin-bottom: 0px; }
.postrow { border-bottom: 1px solid #d5cccc; padding-bottom: 30px; }
.postrow h3 { background: #f5eeee; width: 531px; border-bottom: 1px solid #d5cccc; padding: 5px 8px; margin: 0 0 14px 0; }
.postrow h3 a, .postrow h3 a:visited { background-image: url(images/button-arrow-right-news.gif); background-repeat: no-repeat; background-position: 0 0; height: 26px; display: block; text-decoration: none; line-height: 27px; padding: 0 0 0 35px; font-size: 17px; color: #333333; }
.postrow h3 a:hover { background-position: 0 -26px; color: #730c0c; }
.postrow span, .commentdata span { color: #999999; font-weight: bold; }
.postdate { margin: 0 0 10px 0; }
.postdate strong, .postdata em { margin: 0 4px 0 0; }
.postdata strong { margin: 0 4px; }
.newsnavigation { padding: 10px 0 0 0; }
.newsnavigation a, .newsnavigation a:visited { background-repeat: no-repeat; padding: 0 0 0 34px; background-image: url(images/button-arrow-left.gif); background-position: 0 0; height: 26px; display: block; text-decoration: none; line-height: 24px; color: #333333;  }
.newsnavigation .right a, .newsnavigation .right a:visited { background-image: url(images/button-arrow-right.gif); background-position: 34px 0; padding: 0 34px 0 0; float: right; }
.newsnavigation a:hover { background-position: 0 -26px; color: #730c0c; }
.newsnavigation .right a:hover { background-position: 34px -26px; }
.postentry p { padding-bottom: 12px; text-align: justify; }
#rss-link { position: absolute; color: #999999!important; font-weight: bold; font-size: 12px; text-decoration: none; display: block; width: 70px; top: 0px; right: -10px; background-image: url(images/background-news-links.gif); background-repeat: no-repeat; background-position: right -83px;  height: 27px; padding-top: 11px; }
a#rss-link:hover { background-position: right -124px; }
#twiiter-link { position: absolute; color: #999999!important; font-weight: bold; font-size: 12px; text-decoration: none; display: block; width: 175px; top: 0px; right: 65px; background-image: url(images/background-news-links.gif); background-repeat: no-repeat; background-position: right 0; height: 27px; padding-top: 11px; }
a#twiiter-link:hover { background-position: right -42px; }
.newsbg .columnheader { min-height: 38px; position: relative;  }


/* news single page*/
.commentbg { background: url(images/character-news-rabbit.gif) bottom right no-repeat; min-height: 660px; margin-bottom: 0!important; padding-bottom: 10px!important; }
.postrow h3 span { background-image: url(images/button-arrow-right-news.gif); background-repeat: no-repeat; background-position: 0 0; height: 26px; display: block; line-height: 27px; padding: 0 0 0 35px; font-size: 17px; color: #333333; }
.commentrow { border-bottom: 1px solid #d5cccc; padding: 8px 0; }
.commentrow p { font-size: 11px; padding: 0 0 10px 0; text-align: justify; }
.commentdata strong { text-transform: capitalize; }
.commentdata strong a, .commentdata strong a:visited { color: #333333; text-decoration: none; }
.commentdata strong a:hover { color: #730c0c; }
.commentdate { color: #999999; }
.newsform { margin-bottom: 3px; }
.newsform input { width: 229px; height: 17px; background: url( images/background-input.gif) no-repeat left top; border: 1px solid #d5cccc; padding: 3px; color: #999999; }
.newsform textarea { background: url( images/background-textarea.gif) no-repeat left top; border: 1px solid #d5cccc; padding: 3px; height:122px; color: #999999; }
.newsform label { color: #333333; font-weight: bold; display: block; padding: 7px 0 4px 0; }
textarea.largearea { background: url( images/background-textarea-large.gif) no-repeat left top; width: 539px; }
input#submit { margin: 8px 0 0 0; background-image: url(images/button-arrow-right.gif); cursor: pointer; background-repeat: no-repeat; background-position: 52px 0; background-color: #FFF; height: 26px; border: none; padding: 0 28px 0 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 80px; }
input#submit:hover { background-position: 52px -26px; }
.newspagesingle .page-item-news a, .newspagesingle .page-item-news a:hover { background-position:-257px -90px !important; }

/** contact page **/
.page-contact .column { margin-bottom: 20px; }
.page-contact .bannerimg { background-image: url(images/banner-contactpage.jpg); }
.page-contact .column a, .page-contact .column a:visited { text-decoration: none; }
.contact-general { float: left; height: 103px; width: 416px; background: url(images/background-general-enquirie.gif) no-repeat top; position: relative; left: -5px; }
.contact-jobs { float: right; height: 103px; width: 416px; background: url(images/background-job-enquires.gif) no-repeat top; position: relative; right: -5px; top: 3px; }
.contactlinks { margin: 20px 0 0 0; }
a.buttonemail, a.buttonemail:visited {  position: absolute; width: 208px; height: 46px; background-image: url(images/button-emailus.png); }
.contact-general a.buttonemail, .contact-general a.buttonemail:visited { right: 16px; bottom: 14px; }
.contact-jobs a.buttonemail, .contact-jobs a.buttonemail:visited { left: 16px; bottom: 18px; }
a.buttonemail:hover { background-position: 0px -45px; }

/** about page **/
.aboutbg { background: url(images/character-about-robot.gif) bottom right no-repeat; }
.page-aboutklei .bannerimg { background-image: url(images/banner-aboutpage.jpg); }
.page-aboutklei .columnentry p { padding: 0 0 14px 0; text-align: justify; }
.page-aboutklei .columnentry p a, .page-aboutklei .columnentry p a:visited { text-decoration: none; }
.leftbanner { position: relative; left: -45px; width:185px; }
.width362 { width: 362px; }
.miniheader { border-bottom: 1px solid #d5cccc; padding: 0 0 6px 0; margin: 0 0 8px 0; }

/** Games Detail page **/
.gamesdetail { margin-bottom: 6px!important; }
.width329 { width: 329px; }
.width329 p { padding: 0 0 12px 0; text-align: justify; }
.gamefeatures li { padding: 4px 0 10px 38px; background: url(images/background-games-feature.gif) no-repeat top left; }
.playnow { position: relative; width: 341px; height: 111px; left: -6px; margin: 0; }
.playnow a, .playnow a:visited { background-image: url(images/button-eets-playnow.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; height: 111px; width: 341px; }
.playnow a:hover { background-position: 0px -111px; }
.playnow a span { display: none; }
.width495 { width: 495px; }
#screenshots { background: url(images/background-screenshots.gif); height: 494px; width: 496px; position: relative; left: -4px; margin: 0; }
.gamelogos { background: url(images/background-game-logos.gif); height: 67px; width: 496px; padding: 18px 0 0 0; position: relative; left: -4px; text-align: center; }
.gamelogos img { margin: 0 8px; }
.gamedetails { border-top: 1px solid #d5cccc; margin: 6px 0 0 0!important; padding: 4px 0 0 0; }
.gamedetails div { margin: 0 12px; float: left; color: #c3c3c3; }
.gamedetails p span { color: #730c0c; font-weight: bold; }
.gamedetails p a, .gamedetails p a:visited { text-decoration: none; }
#screenshot { height: 259px; width: 461px; padding: 18px 0 0 18px; z-index: 5; position: relative; overflow: hidden; }
.thumbnails li { float: left; margin: 7px 0 0 7px; height: 62px; width: 110px; overflow: hidden; position: relative; }
.thumbnails li a span, .thumbnails li a:visited span { position: absolute; display:block; width: 104px; height: 56px; top: 0; left: 0; }
.thumbnails li a:hover span, a.activethumbnail span, a.activethumbnail:visited span, #video-thumbs li a:hover span { border: 3px solid #831818; }
.gamedownload { padding: 12px 0 0 14px; width: 470px; }
/*.gamedownload p { padding: 12px 0 0 0; }*/
/*a.buttondownload, a.buttondownload:visited { height: 40px; width: 258px; background-image: url(images/button-view-trailer.png); }*/
/*a.buttondownload:hover { background-position: 0px -40px; }*/
.thumbnails li a, .thumbnails li a:visited  { text-decoration: none; }
#ajaxloader { position: absolute; top: 140px; left: 240px; z-index: 2; }

/* EETS */
.page-eets .bannerimg, .page-eets-videos .bannerimg { background-image: url(images/banner-gamespage-eets.jpg); }

/* SUGAR RUSH */
.page-sugarrush .bannerimg, .page-sugarrush-videos .bannerimg { background-image: url(images/banner-gamespage-sugarrush.jpg); }
.page-sugarrush .playnow a, .page-sugarrush .playnow a:visited  { background-image: url(images/button-sugar-rush-playnow.gif); }
/*remove all these styles in block below*/
.page-sugarrush .playnow a, .page-sugarrush .playnow a:visited { cursor: default; }
.page-sugarrush .playnow a:hover { background-position: 0 0; }
.page-sugarrush a.buttondownload, .page-sugarrush a.buttondownload:visited { background-image: url(images/button-comming-soon.png); cursor: default; }
.page-sugarrush a.buttondownload:hover { background-position: 0 0; }

/* SHANK */
.page-shank .bannerimg, .page-shank-videos .bannerimg { background-image: url(images/banner-gamespage-shank.jpg); } 
.page-shank .playnow a, .page-shank .playnow a:visited  { background-image: url(images/button-shank-playnow.gif); }
.page-shank .playnow a, .page-shank .playnow a:visited { cursor: default; }
.page-shank .playnow a:hover { background-position: 0 0; }
#no-videos { left:175px; position:absolute; top:130px; }

/** N+ **/
.page-n .bannerimg { background-image: url(images/banner-gamespage-n+.jpg); }
.page-n .playnow a, .page-n .playnow a:visited  { background-image: url(images/button-n+-playnow.gif); }
.page-n a.buttondownload, .page-n a.buttondownload:visited { background-image: url(images/button-download-wallpapers.png); }

/** Error 404 **/
.error404 .bannerimg { background-image: url(images/banner-error.jpg); }
#wpstats { display: none; }

/* SITE UPDATE */
#page-nav { background: url(images/background-page-nav.gif) top left no-repeat; height: 44px; position: relative; }
.video-nav { background-position: 0 -44px!important;}
.single-nav { background-position: 0 -87px!important;}
#page-nav span {  background-image: url(images/screenshots.gif); height: 12px; display: block; text-indent: -3000px; cursor: pointer; }
#page-nav a, #page-nav a:visited { position: absolute; top: 7px; padding: 7px 27px; display: block;  }
#page-nav #screen-nav { left: 7px; }
#page-nav #screen-nav span { width: 132px; background-position: 0 -24px; }
#page-nav a#screen-nav:hover span, #page-nav #screen-nav.screen-nav-selected span { background-position: 0 -12px; }
#page-nav #video-nav span { width: 51px; background-position: 0 -36px; }
#page-nav #video-nav { left: 214px; padding: 7px 57px 7px 42px; }
#page-nav a#video-nav:hover span, #page-nav #video-nav.screen-nav-selected span { background-position: 0 -48px; }
/* Games */
.gamedownload a, .gamedownload a:visited { height: 45px; width: 76px; display: block; background-image: url(images/large-arrows.png); background-repeat: no-repeat; text-decoration: none; background-position: 0 0; }
.gamedownload a:hover { text-decoration: none; }
#screen-left { float: left; }
a#screen-left:hover { background-position: 0 -45px; }
#screen-left.screen-selected { background-position: 0 -92px!important; cursor: default;  }
#screen-right { float: right; background-position: -76px 0; }
a#screen-right:hover { background-position: -76px -45px; }
#screen-right.screen-selected { background-position: -76px -92px!important; cursor: default; }
#screen-num { float: left; background-image: url(images/screenshots.gif); background-position: 0 0; height: 12px; line-height: 12px; background-repeat: no-repeat; padding: 0 0 0 98px; margin: 18px 0 0 80px; }
#screen-num em, #screen-num span { font-style:normal; font-weight: bold; }
.gamesdetail .column { margin-bottom: 14px; }
#thumb-holder { margin:0 0 0 18px; overflow:hidden; width:462px; height: 138px; position: relative; }
#thumb-scroller { left: -7px; position:relative; top:0; width:8000px; height: 138px; }
.thumbnails { float: left; width:469px; height: 138px; }

/* videos */
.videos { background-image: url(images/background-video.gif); background-position: 5px 40px; background-repeat: no-repeat; }
.video-box { height: 365px; background-image: url(images/background-video-controls.gif); background-repeat: no-repeat; background-position: 670px 14px; padding: 20px; width: 793px; position: relative; }
.video-box #video { height: 362px; width: 643px; float: left; }
.video-box #ajaxloader { left: 316px; }
#video-control { height: 362px; width: 133px; float: right; }
#video-thumbs { height: 272px; width: 117px; position: relative; overflow: hidden; margin: 10px 0 0 7px; }
#video-thumbs li { height:66px; margin-bottom: 2px; overflow:hidden; position:relative; width:117px; }
.ul-back { background: url(images/background-ul.gif); height: 544px; }
#video-thumbs span { display:block; height:60px; left:0; position:absolute; top:0; width:111px; }
#video-buttons { width: 132px; }
#video-buttons a, #video-buttons a:visited { background-image:url(images/background-up-down.gif);  background-repeat:no-repeat; display:block; height:43px; text-decoration:none; width:66px; }
#video-left { float: left; background-position:0 0; }
a#video-left:hover { background-position: 0 -43px;  }
#video-left.screen-selected { background-position: 0 -86px!important; cursor: default; }
#video-right { float: right; background-position:-66px 0;  }
a#video-right:hover { background-position:-66px -43px;  }
#video-right.screen-selected { background-position: -66px -86px!important; cursor: default; }
#video-num { text-align: center;  margin: 22px 0 2px; line-height: 12px; }
#video-num em, #video-num span { font-weight: bold; font-style: normal; }
#trailer-scroller { height: 2000px; position: relative; top: 0px; left: 0px; width: 117px; }

/* Services */
.page-animationservice .bannerimg { background-image: url(images/services-banner.jpg);}
.page-animationservice p { padding-bottom: 12px; text-align:justify; }
.page-animationservice p a, .page-animationservice p a:visited { text-decoration: none; }
.page-animationservice #content { background: url(images/background-services.jpg) no-repeat top right; }
.width407 { width: 407px; }
.width264 { width: 264px; }
.service-box { background: url(images/background-service-box.gif) no-repeat top left; height: 218px; width: 385px; position: relative; padding: 16px; left: -4px; top: -5px;  }
#service-video { width: 529px; height: 297px; margin: 16px 7px 24px; }
#service-video p { padding: 100px; }
.page-animationservice .width407 p { padding: 4px 14px 4px 38px; background: url(images/background-games-feature.gif) no-repeat top left; position: relative; top: -8px; } 

/** SIFR **/
#sifrFIX { visibility: hidden; height: 0px; width: 0px; }
@media screen {
  .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; }
  .sIFR-replaced, .sIFR-ignore { visibility: visible !important; }
  .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }
  .sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none; }
}

@media print {
  .sIFR-flash { display:none !important;height:0;width:0;position:absolute;overflow:hidden; }
  .sIFR-alternate {visibility:visible!important;display:block!important;position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important; }
}

@media screen { .sIFR-active h2 { visibility: hidden; color: #730c0c; font-size: 26px; line-height: 30px; }}