/****************************************
| CSS Style Guide
| Biodroid Productions
|
****************************************/

/** 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: #003366; text-decoration: underline: no; font-weight: bold; }
a:hover { color: #333333; text-decoration: none; }
a:active { border: none!important; outline: 0!important; }
.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; }
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 4px 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; }

/* 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: 10px 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: 10px 0 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; 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 { padding: 0 0 0 11px; }
#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 { border: 3px solid #831818; }
.gamedownload { padding: 14px 0 0 18px; 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; }

/* CHIQUITITAS */

.page-chiquititas .bannerimg { background-image: url(images/banner-gamespage-chi.jpg); }

/* MIFFY */

.page-miffy .bannerimg { background-image: url(images/banner-gamespage-mif.jpg); }

/* ZBLUCOPS */

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

/** LPV **/
.page-lpv .bannerimg { background-image: url(images/banner-gamespage-lpv.jpg); }
.page-lpv .playnow a, .page-n .playnow a:visited  { background-image: url(images/button-n+-playnow.gif); }

.page-lpv a.buttondownload, .page-n a.buttondownload:visited { background-image: url(images/button-download-wallpapers.png); }

/** PNK **/
.page-pnk .bannerimg { background-image: url(images/banner-gamespage-pnk.jpg); }

/** BST **/
.page-bst .bannerimg { background-image: url(images/banner-gamespage-bst.png); }

/** Error 404 **/

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

/** SIFR **/

#sifrFIX { position: absolute; margin-left: -3000px; height: 0px; width: 0px; overflow: hidden; }
.sIFR-flash { visibility: visible !important; margin: 0; }
.sIFR-replaced { visibility: visible !important; }
span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }