@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

article, aside, dialog, figcaption, figure, footer, header, legend, nav, section, summary { display: block }

body { margin: 1em auto; width: 768px; background: #272727; color: #ccc; font: 100%/1.5em Georgia, serif }

h1, h2, h3, h4, h5, h6 { color: #fff; font-family: 'Yanone Kaffeesatz', Georgia, serif }

h1 { font-size: 2em; line-height: 1.5; margin: .75em 0 .75em 0 }
h2 { font-size: 1.5em; line-height: 1; margin: 1.3333em 0 1.3333em 0 }
h3 { font-size: 1.25em; line-height: 1.2; margin: 1.8em 0 .6em }
h4 { font-size: 1.25em; line-height: 1.2; margin: .6em 0 }
h5 { font-size: 1.25em; line-height: 1.2; margin: .6em 0 }
h6 { font-size: 1.25em; line-height: 1.2; margin: .6em 0 }

h1 { font-weight: normal }

p { font-size: 1em; line-height: 1.5em; margin: 0 0 1.5em 0; padding: 0 }

a { text-decoration: none; font-weight: bold; padding: 0.5em 0.75em; color: #272727; background: #555; border-radius: 3px }
a:hover { background: #777 }

.tooltip {
	display: none;
	padding: 12px;
	max-width: 25em;
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.75em;
	line-height: 2em;
	color: #ccc;
	background-color: rgb( 0, 0, 0 );
	background-color: rgba( 0, 0, 0, 0.8 );
	border-radius: 5px
}
.tooltip .title { font-weight: bold; color: #fff }
.tooltip .desc, .tooltip .time { font-size: 0.875em; line-height: 1.7143em }
.tooltip .time { color: #999 }

.toogle { clear: both }
.toggle p { /*text-align: center;*/ margin: 48px 0 1.5em 0 }

.article {
	padding: 1em;
	margin: 0 -1em 1em;
	background: #333;
	border: 2px solid #333;
	border-radius: 3px;
}
.article h1 { margin: 0 0 .75em 0; text-transform: uppercase }

ul { margin: 0; padding: 0; list-style-type: none }
li { font-size: 1em; line-height: 1.5em; margin: 0; padding: 0 }

p.meter { }

q { quotes: '\201C' '\201D' '\2018' '\2019' '\2039' '\203A' }
q:before { content: open-quote }
q:after { content: close-quote }

.icon { float: left; width: 200px }
.icon p { margin: 0 0 0 -24px; padding: 0 }
.icon img { /*border: 4px solid #ebd8bd*/	position: relative; top: 0; left: 0 }
.variant-1 img { -o-transform: rotate(-2.5deg); -webkit-transform: rotate(-2.5deg); -moz-transform: rotate(-2.5deg) }
.variant-2 img { -o-transform: rotate(2.5deg); -webkit-transform: rotate(2.5deg); -moz-transform: rotate(2.5deg) }
.variant-3 img { -o-transform: rotate(182.5deg); -webkit-transform: rotate(182.5deg); -moz-transform: rotate(182.5deg) }

.overview { float: left; width: 564px; margin: 0; padding: 0 }
.overview h2 { display: none }
.overview ul { margin: 0 0 24px 0 }

.items { /*background: #777*/ }
.items li { font-weight: bold; font-size: 0.875em; line-height: 1.7143em; margin: 0 24px 0 0; padding: 0; color: #b0b }
.items li:hover { color: #f0f }

.achievements { /*background: #707*/ }
.achievements li { font-weight: bold; font-size: 0.875em; line-height: 1.7143em; margin: 0 24px 0 0; padding: 0; color: #0bb }
.achievements li:hover { color: #0ff }

.header h1 span { display: none }
.header h1 { margin: 0 auto; width: 400px; height: 200px; background: url( logo.png ) }

.footer p { font-size: 0.875em; line-height: 1.7143em; margin: 0 0 1.7143em; color: #999 }

.score { display: inline; margin: 0 4px 0 0; width: 32px; height: 8px }
.full { background: #ccc; border: 1px solid #ccc; border-radius: 3px }
.empty { background: #555; border: 1px solid #555; border-radius: 3px }

noscript p { text-align: center; font-weight: bold }

.clear { clear: both }