/* 
Theme Name: pxPRESS
Theme URI: http://www.pixelplay.gr/about
Description: A brand new Wordpress theme for pixelPLAY's website.
Version: 0.01 alpha
Author: Phoat Spyropoulos
Author URI: http://phoat.com/
*/

@import url('_reset.css'); 
@import url('_layout.css');
@import url('_typography.css');
@import url('_color.css');


/* COMMOM STYLES
-------------------------------------------------- */
.replace { 
	text-indent: -9999px;
	background-attachment: scroll;
	background-repeat: no-repeat;

}

.clearfix {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

body { background: #444 url(images/bg_body_2.jpg) scroll no-repeat center -34px; }
/*body { background: #444 url(images/_grid16.png) scroll repeat-y center top }*/

/* HEADER STYLES
-------------------------------------------------- */
header { height: 36px; margin-top: 0px; background: #000 url(images/bg_header.png) scroll no-repeat center center; }
header div {
    position: relative;
    margin:0 auto; 
    width: 950px; height: 36px; 
    background: #000;

}

h1 { 
	background-image: url(images/logo_pixelplay.png); 
        background-position: left center;
	width: 156px; height: 36px;
}

nav#main {
    position: absolute;
    top: 0; left: 156px;
}

nav#main li {
    float: left;
    color: #ccc;
	text-transform: uppercase;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
    margin-left: 20px; padding: 0 10px;
    height: 26px; line-height: 26px;
    margin-top: 5px;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
    nav#main li:hover { background: #444;}
nav#main li a { color: #777; }
nav#main li a:hover { color: #fff; }

nav#nav-footer li { float: left; color: #fff; font-size: 12px; margin: 10px 2px; text-transform: lowercase; }
nav#nav-footer li:after { content: " |"; }
nav#nav-footer li:last-child:after { content: ""; }

/* FEATURE STYLES
-------------------------------------------------- */

#feature-ornament { width: 970px; height: 360px; margin: 0 auto; position: relative; }
#feature-ornament div:first-child { background:url(images/feature_overlay_left_2.png) scroll no-repeat top left; width: 138px; height: 360px; z-index: 50;position: absolute; left: -10px; }
#feature-ornament div, #post-banner div { background:url(images/feature_overlay_right_2.png) scroll no-repeat top left; width: 95px; height: 360px; z-index: 50;position: absolute; right: 0px }

#post-banner { width: 970px; height: 360px; margin: 0 auto; position: relative; }
#post-banner div:first-child { background:url(images/feature_overlay_left_2.png) scroll no-repeat top left; width: 138px; height: 360px; position: absolute; top: 0; left: -8px; }
#post-banner div { background:url(images/feature_overlay_right_2.png) scroll no-repeat top left; width: 95px; height: 360px; position: absolute; top: 0; right: 0px; }

#post-banner img { width: 970px; height: 360px; }
nav#slideshow li a { text-transform: uppercase; color: #777; text-size: 14px; font-weight: bold; bottom: 32px; position: absolute; z-index: 200; background: #000; padding: 0 10px; -moz-border-radius: 5px; line-height: 36px }
#slide-next { right: -90px; }
#slide-previous { right: 0; }
nav#slideshow li a:hover { color: #fff; }


#feature { height: 360px; }
#feature article { position: relative; }
#feature article h2, #post-banner h2 { z-index:200; position: absolute; top: 292px; left: 0; font-size: 24px; background: #000; width: 980px; color: #fff; text-indent: 150px; padding: 9px 0; }
#feature article a { }


#offers, #post-info { background: #660000 url(images/bg_offers.jpg) scroll repeat-x center top; padding: 18px 0; margin-bottom: 18px;  }
#offers div, #post-info div { width: 940px; height: 108px; margin: 0 auto;}
#offers article { width: 220px; height: 108px; background: #eee; margin-right: 20px; float:left; -moz-box-shadow: 4px 4px 15px #000; }
#offers article:last-child { margin-right: 0; }
#offers article:hover { margin-top: -5px; margin-left: -5px; -moz-box-shadow: 14px 14px 15px #000; margin-right: 25px;  }
#offers article:last-child:hover { margin-right: 0; }


#recent-games { width: 940px; height: 126px; margin :0 auto; position: relative; }
#recent-games article { float: right; }
#recent-games article img { margin-top:-15px; margin-left: -30px; }
#recent-games p { position: absolute; bottom: 5px; left: 0; background: rgba(0,0,0,.7); padding: 9px 0; width: 100%; text-indent: 10px; color: #fff; -moz-border-radius: 5px; text-transform: uppercase; font-weight: bold; }
#recent-games p a { float: right; padding-right: 10px; color: #777; }
#recent-games p a:hover { color: #fff; }


#page { width: 940px; margin: 18px auto; position: relative; clear: both; }
#latest-news { width: 640px; height: 720px; background-color: #ccc; float: left; margin-bottom: 18px; }

#external-news { width: 280px; height: 720px; background-color: #ccc; float: right; margin-bottom: 18px; }

#sub-footer { background-color: #666; clear: both; }
#sub-footer div { width: 940px; height: 360px; margin: 0 auto; }

#footer { background-color: #000; }
#footer div { width: 940px; height: 72px; background-color: #000; clear: both; margin: 0 auto; }

.copyright { color: #fff; float: right; font-size: 12px; margin: 10px 0 0; }
.branding { clear: right; color: #fff; float: right; margin: 0; font-size: 18px; font-weight: bold;}