/*--------------------------------------------------------------
*	Filename:		main.css
*	Description:	Layout for xDesings.ql.lt
*	Client:			Xdesing studio - xDesings.ql.lt
*	Author:			Robertas Juvna - xDesings.ql.lt
*	Optimised for: 	Safari, Firefox, IE 7, IE 8, Opera
*	Version:		1.0
--------------------------------------------------------------*/

/*
Globals resets
---------------------------------*/
body, html{	padding: 0;	margin: 0; font: normal 11.22px/1.5em Arial, Tahoma, Verdana, sans-serif;}
p, h1, h2, h3, h4 ,h5, h6{ padding: 0;	margin: 0; font-weight: normal; font-size: 1em;}
ul, ol, dl, dt, dd{ list-style: none; padding: 0; margin: 0;}
html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }

/*
Clear floats
---------------------------------*/
.clearfix:after { content: "."; display: block;	height: 0; clear: both;  visibility: hidden;}
.clearfix {	display: inline-block; }
/* Hides from IE-mac \*/ * html .clearfix { height: 1%;}
.clearfix {	display: block;	}

/*
Selection
---------------------------------*/
::-moz-selection{ background: #76003a; color: #fff;}
::selection { background: #76003a; color: #fff;}


/*
Layout
---------------------------------*/
html{ background: url('bg.png') repeat-x top left;}
body{ background: url('chars.jpg') top center no-repeat;}
#warper{ width: 980px; margin: 0 auto;}
#header{ height: 250px; position: relative;} 
#content{ background: url('content-.png') top center no-repeat;}
#footer{ background: url('content0.png') top left no-repeat; position: relative; padding: 12px 0 42px 0;}


	/* Header */ 
	#header h1 a{ display: block; text-indent: -9999px; height: 35px; width: 252px; background: url('logo.png') no-repeat top left; position: absolute; top: 14px;}
		#header h1 a:hover{ background-position: bottom left;}
	ul#navigation{ position: absolute; right: 0; top: 14px;}
		ul#navigation li{ float: left; display: block; margin: 0 4px;}
		ul#navigation li a{ padding: 0 4px 0 12px; color: #fff; font-size: 13px; text-decoration: none; text-transform: uppercase; float: left; display: block; height: 35px; line-height: 35px; position: relative;}
			ul#navigation li a:hover{ color: #f3e32f;}
		ul#navigation li a.current{ background: url('tab-acti.png') no-repeat top left;}
		ul#navigation li span.tab-close{ background: url('tab-actj.png') no-repeat top left; display: block; width: 8px; height: 35px; position: absolute; top: 0; right: -8px;}

	/* Footer */
	#footer h2 a{ position: absolute; left: 0; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; text-transform: uppercase;}
		#footer h2 a:hover{ border-bottom: 1px solid #fff;}
	ul#links{ position: absolute; right: 0; font: normal 11px/1.5em Arial, Verdana, sans-serif; top: 14px;}
		ul#links li{ float: left; display: block; color: #ad6187;}
		ul#links li a{ float: left; display: block; color: #fff; text-decoration: none; font-weight: bold; padding: 0 8px;}
			ul#links li a:hover{ text-decoration: underline;}
	
	/* Content */
	#content{ padding: 14px 14px 12px 14px;}
	#main, #status-boxes, div.box{ background: #fff url('content1.png') top left no-repeat; position: relative;}
		#main{ width: 600px; float: left; padding: 14px;}
		#sidebar{ width: 304px; float: left; margin-left: 20px;}
		#main a{ text-decoration: none; color: #196790;}
			#main a:hover{ text-decoration: underline; }
		
	#status-boxes h2, div.box h2{ color: #76003a; font-size: 16px; text-transform: uppercase; font-weight: bold; margin-bottom: 10px;}		
	
	#main h1{ color: #000; font: bold 22px/24px Arial, Tahoma, sans-serif; text-decoration: none; margin-bottom: 10px; letter-spacing: -1px;}
	#main p{ margin: 1em 0; color: #212121;}
	#main pre{ background: #f2f2f2; padding: 1em; width: 90%; border: 1px solid #cfcfcf; font: normal 11px/16px Monaco, Courier, 'Courier New', 'Lucida Console', monospace !important; color: #333; overflow: auto; display: block;}
	#main h2{ font: bold 14px/18px Arial, Tahoma, sans-serif; text-decoration: none; color: #000;}
	#main ul{ margin-left: 2em;}
		#main ul li{ background: url('list-ico.png') 0px 6px no-repeat; padding: 0 0 0 12px; display: block; margin: 2px 0;}
	
	ul.info{ margin-left: 0 !important;}
		ul.info li{ float: left !important; width: 290px; color: #222; display: block; background: none !important; padding: 0 !important; margin: 0 !important;}
			ul.info li h1{ margin-bottom: 1.25em !important;}
		ul.info li.first{ margin-right: 10px !important;}
		ul.info li.last{ margin-left: 10px !important;}		
			ul.info li h2{ margin-bottom: 6px; color: #000 !important;}
			ul.info li h2 a, ul.info li h2{ font: bold 14px/18px Arial, Tahoma, sans-serif; text-decoration: none; color: #196790;}
				ul.info li h2 a:hover{ text-decoration: underline;}
			span.category{ text-transform: uppercase; padding: 0px 3px !important; margin-bottom: 4px; line-height: 14px !important; margin-right: 2px;}
			ul.info li ul{  width: auto !important; margin: 4px 0 4px 2px !important; display: block;}
				ul.info li ul li{ background: url('list-ico.png') 0px 6px no-repeat !important; padding: 0 0 0 12px !important; display: block !important; float: none !important; margin: 2px 0; width: auto !important;}
			ul.info li p{ margin: 0.75em 0 !important;}

	ul#status-boxes{ padding: 14px 0; margin-bottom: 20px;}
		#status-boxes li{ float: left; display: block;}
		#status-boxes li.a, #status-boxes li.c { width: 276px; padding: 0 14px;}
						
		#status-boxes li.b{ padding: 0 23px; border: 1px solid #ccc; border-width: 0 1px 0 1px; margin: 0 10px; width: 276px;}
		#status-boxes p{ color: #212121; text-align: justify;}
		#status-boxes a{ color: #196790; font-weight: bold; text-decoration: none;}
			#status-boxes a:hover{ text-decoration: underline;}
	
	ul#indicator{ display: block;}
		ul#indicator li{ display: block; width: 100%; font-weight: bold; position: relative; height: 18px; line-height: 18px !important;}
		ul#indicator li div{ display: none;}
			ul#indicator li span.status{ display: block; width: 64px; height: 11px; overflow: hidden; background: url('server-s.png') bottom right no-repeat; text-indent: -9999px; position: absolute; top: 3px;}
				ul#indicator li span.online{ background-position: top left;}
				ul#indicator li span.offline{ background-position: bottom right;}				
			ul#indicator li h3{ font-weight: bold; text-indent: 74px;}
			ul#indicator li h3 small{ font-size: 11px; color: #999;}
	ul#vote-for-us{ display: block;}
		ul#vote-for-us li{ display: block; width: 88px; height: 50px; position: relative; margin: 0 3px 6px 3px;}
		
	div.box{ margin-bottom: 20px; padding: 14px 14px 14px 14px;}
		div.box hr, #main hr{ color: #e5e5e5; border: none; background: #e5e5e5; height: 1px; margin: 10px 0;}
			#main hr{ margin: 24px 0;}
		span.category, span.date{ display: inline-block; background: #e8990f; padding: 1px 3px; color: #fff; line-height: 14px; font-size: 10px; font-weight: bold !important; height: 14px;}
		div.box h3 a, div.box a{ color: #196790; font-weight: bold; text-decoration: none;}
			div.box h3 a:hover, div.box a:hover{ text-decoration: underline;}
			div.box h3{ margin: 1px 0 4px 0 !important;}
		div.box p{ color: #666; text-align: justify; margin: 6px 0;}
		ul#event{}
			ul#event li{ display: block; float: left;}
				ul#event li#event-image{ width: 64px; height: 64px; overflow: hidden; margin-top: 3px; background: #000; position: relative;}
					ul#event li#event-image img{ overflow: hidden; display: block; width: 64px; height: 64px;}
					ul#event li#event-image span.mask{ position: absolute; top: 0; left: 0; background: url('event-im.png') no-repeat; display: block; width: 64px; height: 64px; z-index: 99;}
				ul#event li#event-content{ width: 204px; display: block; margin-left: 8px;}
					ul#event li#event-content p{ margin-top: 0 !important;}
		
		div.bigstep{ position: relative; padding-left: 56px; display: block;}
			div.bigstep h2{ margin-bottom: 0.7em;}
			span.bigstep{ font: bold 68px/48px "Arial Black", Arial, sans-serif; color: #e2e2e2; top: 0; left: 0px !important; position: absolute; z-index: 1;}
			span.bigstep strong{ position: absolute; color: #ccc; top: 1px; left: 1px; z-index: -1;}
			
		ul.nav-elements{ }
			ul.nav-elements li{ display: block; border: 1px solid #e2e2e2; border-width: 1px 0; line-height: 26px; height: 26px; margin-bottom: -1px;}
			ul.nav-elements li a{ display: block; text-indent: 8px; position: relative;}
				ul.nav-elements li a span{ position: absolute; right: 8px; display: none; top: 0;}
				ul.nav-elements li a:hover{ text-decoration: none; background: #f2f2f2;}
				ul.nav-elements li a:hover span{ display: block;}
			
		/* Rounded corners */
		span.box-top{ width: 304px; height: 3px; display: block; background: url('corners-.png') no-repeat; top: 0; left: 0; position: absolute;}
		span.box-top-first{ width: 304px; height: 3px; display: block; background: url('corners-.png') no-repeat; top: 0; left: 0; position: absolute;}		
		span.box-bottom{ width: 304px; height: 3px; display: block; background: url('corners0.png') no-repeat; bottom: 0; left: 0; position: absolute;}	
		span.content-top{ width: 628px; height: 3px; display: block; background: url('corners1.png') no-repeat; top: 0; left: 0; position: absolute;}
		span.content-bottom{ width: 628px; height: 3px; display: block; background: url('corners2.png') no-repeat; bottom: 0; left: 0; position: absolute;}
		span.full-top{ width: 952px; height: 3px; display: block; background: url('corners3.png') no-repeat; top: 0; left: 0; position: absolute;}		
		span.full-bottom{ width: 952px; height: 3px; display: block; background: url('corners4.png') no-repeat; bottom: 0; left: 0; position: absolute;}		
		
		/* Forms */
		form#account{ position: relative;}
			form#account div.field{ background: url('input-fi.png') top left no-repeat; width: 240px; height: 28px; position: relative; margin: 8px 0; padding:0 10px;}
				form#account div.focus{ background-position: bottom right !important;}
				form#account div.focus label{ color: #99650b !important;}
			form#account div.field input{ background: transparent; border: none; outline: none; width: 180px; right: 10px; display: block; position: absolute; display: block; top: 6px; line-height: 14px; height: 14px; font-size: 11px;}
			form#account div.field label{ color: #666; height: 28px; line-height: 28px; position: absolute; display: block;}
				form#account div.field label img{ top: 4px; position: absolute;}
			form#account .btn-holder{ position: relative;}
			
			.button{ padding: 0px 0 0px 12px; margin: 0 !important; background: transparent url('form-but.png') top left no-repeat; line-height: 28px; height: 28px; display: inline-block;}
			.button button{ background: transparent url('form-but.png') top right no-repeat; font-weight: bold; color: #fff; font-size: 11px; border: none; margin: 0 0 0 -8px; padding: 0px 12px 0px 8px; cursor: pointer; white-space: nowrap; display: inline-block; height: 28px; line-height: 28px;}
				span.button:hover{ background-position: bottom left;}
				.button button:hover{ background-position: bottom right;}
				
		.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd; margin: 15px 30px 15px 0px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
		.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
		.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
		.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
		.explain{ background: #f2f2f2; padding: 1em; border: 1px solid #cfcfcf; margin-top: 50px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}