/* 
	PIXELWARS PREVIEW FRAME v2.0
	DATE: 25.11.2012
*/

html { font-size:100%; }
body { overflow: hidden; font-family: 'Coustard', serif; font-size: 1em; color: #999999; padding: 0px; margin: 0px; width: 100%; height: 100%; }
img { border:0; outline:none; outline-width:0; }
ul { list-style:none; padding:0; margin:0; }
#header-bar ::-moz-selection { color: #ffffff; background-color: #999999; }
#header-bar ::selection { color: #ffffff; background-color: #999999; }

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

#header-bar { background-color: #222; height: 60px; z-index: 100; }
#header-bar > ul { height:100%; }
#header-bar > ul > li { position:relative; float: left; height:100%; margin: 0 0 0 4em; background:#333; border-left: 1px solid #555; border-right: 1px solid #555; }
#header-bar ul a { color: #CEBEA7; text-decoration: none; }
#header-bar ul a:hover, #header-bar ul a:active { color: #fff; }
#header-bar > ul > li > a { display:block; padding:1.2em 2em; font-weight:bold; text-transform:uppercase; text-shadow:0 1px 0 #000, 0 2px 0 rgba(255,255,255,.3); }
#header-bar > ul > li:hover { background:#2a2a2a; }
#header-bar ul li.brand { margin-left:0; border-left:0; }
#header-bar ul li.brand a
{
	background-image: url("../images/pixelwars-logo.png");
	background-repeat: no-repeat;
	text-transform: none;
	padding-left: 55px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 15px;
}
#header-bar ul li.portfolio:hover > a { color:#eee; } 
#header-bar ul li.buy { float:right; } 
#header-bar ul li.remove { float:right; border-right:0; } 
#header-bar ul li.remove a { font-size:1.6em; font-weight:400; padding:.45em .8em; }

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

#header-bar ul li ul { display: none; width:100%; padding:.4em 0; min-width:260px; position: absolute; top:100%; left:-1px; border-color: #555; border-style:solid; border-width:0 1px 1px 1px; background-color: #333; }
#header-bar ul li:hover ul { display: block; }
#header-bar ul li ul li { position:relative; display:block; border-bottom:1px solid #222; border-top:1px solid #444; }
#header-bar ul li ul li:first-child { border-top:0; } 
#header-bar ul li ul li:last-child { border-bottom:0; } 
#header-bar ul li ul li a { display:block; font-size:.75em; padding:.7em 1.2em; color:#C7C0B5; }
#header-bar ul li ul li a span { font-size:.8em; float:right; padding:.2em .6em; color:#fff; background:#B94545; border-radius:2px; }
#header-bar ul li ul li:hover { background-color: #222; }

.preview-img { display:none; position:absolute; top:0; left:104%; padding:10px; border:1px solid #555; background:#333; border-radius:2px; box-shadow:0 0 10px 0 rgba(0,0,0,.5); }
.preview-img img { display:block; }
#header-bar ul li ul li:hover .preview-img { display:block; }

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

#preview-frame { background-color: #ffffff; width: 100%; border:0; outline:none; }

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