@CHARSET "UTF-8";

/*******************************************************************************
 * Default and site wide used styles
 * Set only global stuff here but do not set to specific things in here
 * better derive from and or simply just create a new selector.
 ******************************************************************************/



/*******************************************************************************
 * Floats + clearing
 * @see: http://www.positioniseverything.net/easyclearing.html
 ******************************************************************************/
.floatLeft 	{ float: left }
.floatRight { float: right }
.centered 	{ margin: 0 auto 0 auto }
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden
}
.clearfix { display: inline-block }

/* Hides from IE-mac \*/
* html .clearfix { height: 1% }
.clearfix { display: block }
/* End hide from IE-mac */

/* old clearing method for br's and div's - but try to avoid this whenever you can!  */
.clear 		{ clear: both; font-size: 0.1% }
/* new style: instead of a br or div after the floats, we also can wrap the floats - Use this! */


/*******************************************************************************
 * Reset
 ******************************************************************************/
* {
	border: 0;
	margin: 0;
	padding: 0;
	font-family: verdana, arial, "Trebuchet MS", helvetica, sans-serif; /* you may want to change this */
	font-size: 1em;
	outline: 0;
	vertical-align: baseline;
	line-height: 100%;
	text-align: left;
	color: #004775;
}
/*******************************************************************************
 * Preset
 ******************************************************************************/
sub, sup {
	font-size:70%;
	line-height:1%;
	position:relative
}
sub { bottom: -0.5em }
sup { bottom: 0.5em }
small { font-size: 80% }
img {
	vertical-align: text-bottom;
}
button {
	font-weight: 800;
	padding: 0 5px 2px 0;

}
/*******************************************************************************
 * display guriddo:
 * Depending on the actual display width - we (may) need a different width 
 * (splitted into fiths), by assuming an actual width of 950px, whereas 20px on 
 * each side are included as margin. 
 ******************************************************************************/
body.seven-fifths div.wrapper {
	width: 1320px;
}
body.six-fifths div.wrapper {
	width: 1140px;
}
body.five-fifths div.wrapper {
	width: 950px;
}
body.four-fifths div.wrapper {
	width: 770px;
}
body.three-fifths div.wrapper {
	width: 590px;
}
body.two-fifths div.wrapper {
	width: 410px;
}
body.one-fifths div.wrapper {
	width: 230px;
}
.skip { speak: none }

/*******************************************************************************
 * html5 derivates
 ******************************************************************************/
 
/** 
 * < header >
 * represents the header of a section. The element is typically used 
 * to group a set of h1-�hh6 elements to mark up a page's title 
 * with its subtitle or tagline. However, header elements may contain 
 * more than just the section's headings and subheadings - for example 
 * it would be reasonable for the header to include version history information.
 */
.header {

}
/** 
 * < nav >
 * represents a section of a page that links to other pages or 
 * to parts within the page
 */
.nav {

}
/**
 * < section >
 * [represents a generic document or application section. 
 * A section, in this context, is a thematic grouping of content, 
 * typically with a header, possibly with a footer.] 
 */
.section {

}  
/**
 * < html5 derivate >
 * represents a section of a page that consists of a composition 
 * that forms an independent part of a document, page, or site. 
 * This could be a forum post, a magazine or newspaper article, 
 * a Web log entry, a user-submitted comment, or any other independent 
 * item of content.
 */
.article { 
	
} 
/**
 * < aside >
 * represents a section of a page that consists of content 
 * that is tangentially related to the content around the aside element, 
 * and which could be considered separate from that content. 
 * Such sections are often represented as sidebars in printed 
 * typography.
 */
.aside {

} 
/**
 * < footer >
 * represents the footer for the section it applies to. 
 * A footer typically contains information about its section such as 
 * who wrote it, links to related documents, copyright and so on.
 */
.footer{
	
}

#serverNote {
	background: #5e0a3f;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	color: #c71585;	
	font-size: 18px;
	padding: 0 5px 5px;
	position: absolute;
	right:0;
	top:0;
	width: 200px;
}

#statbox {
	display: none;
}