@import url(reset.css);

BODY {
	font:.8125em/1.5 Arial,sans-serif;
	background:#89d5e4 url(/images/bg.png) top repeat-x;
	color:#232323;
	}
H1,H2,H3 {
	margin:0 0 .8em;
	font:italic 1em Georgia,serif;
	line-height:1;
	}
H1 {
	margin:0 0 .75em;
	font-size:2em;
	font-weight:bold;
	}
H1.extra {
	display:block;
	margin:140px 0 0;
	font-size:130px;
	font-style:normal;
	font-weight:normal;
	color:#fff;
	text-align:center;
	}
H2 {
	margin-top:2em;
	font-size:1.6em;
	}
H2.date {
	margin:2em 0 .5em;
	font-size:1.4em;
	color:#999;
	}
H2.first {
	margin-top:0;
	}
H3 {
	margin:1em 0 .5em;
	font-size:1.4em;
	}

A { color:#069; }
A.js {
	text-decoration:none;
	background:url(/images/link.png) repeat-x bottom center;
	}

P { margin:0 0 .5em; }
P.right { text-align:right; }
P.footnote { margin:1em 0 0; }

STRONG {
	font-weight:bold;
	}

UL.common LI {
	margin-bottom:.5em;
	}

/* forms */
FORM DL {
	margin-bottom:-1em;
	}
FORM DT LABEL,
.s-selector-label LABEL {
	font:1.4em Georgia,serif;
	}
FORM DD {
	position:relative;
	margin:0 0 1em;
	}

.text-wrap INPUT,
.text-wrap .placeholderplus {
	position:relative;
	display:block;
	padding:1px;
	background:#fff;
	border:1px solid #ccc;
	font:2em Georgia,serif;
	width:351px;
	}
.text-wrap.error INPUT {
	border-color:#ff0000;
	background:#fff url(/images/icon-error.png) no-repeat right;
	padding-right:32px;
	width:320px;
	}
.text-wrap.ok INPUT {
	border-color:#390;
	background:#fff url(/images/icon-ok.png) no-repeat right;
	padding-right:32px;
	width:320px;
	}

.text-wrap .placeholder {
	color:#bbb;
	}
.text-wrap .placeholderplus {
	position:absolute;
	top:1px;
	left:1px;
	background:#fff;
	border:none;
	width:320px;
	}

.text-wrap INPUT.mini {
	font-size:1.2em;
	}

TEXTAREA {
	width:100%;
	font-size:1em;
	line-height:1.5;
	background:#fff;
	border:1px solid #ccc;
	}

.checkbox-wrap INPUT,
.checkbox-wrap LABEL {
	line-height:5px;
	vertical-align:middle;
	}
.checkbox-wrap INPUT {
	margin:0;
	padding:0;
	}
.checkbox-wrap LABEL {
	margin-left:5px;
	}

.button-wrap {
	text-align:center;
	}

.button-wrap INPUT,
.file-wrap INPUT {
	font-size:1em;
	}

FORM DL P,
FORM UL.error LI {
	margin:.3em 0 0;
	padding:0;
	font-size:.86em;
	line-height:1.2;
	}
FORM UL.error LI {
	color:#ff0000;
	}
FORM DT P,
FORM DT UL.error {
	margin-bottom:.5em;
	}

.s-selector {
	width:351px;
	position:relative;
	z-index:1;
	clear:both;
	background:#fff;
	border:1px solid #ccc;
	-webkit-border-radius:4px;
	-webkit-border-top-right-radius:0;
	-moz-border-radius:4px 0 4px 4px;
	border-radius:4px 0 4px 4px;
	}
.s-selector UL {
	position:absolute;
	top:-22px;
	right:-1px;
	white-space:nowrap;
	}
.s-selector LI  {
	display:block;
	position:relative;
	z-index:2;
	float:left;
	overflow:hidden;
	margin-left:-1px;
	font-size:1px;
	line-height:1;
	text-align:center;
	background:#fff;
	border:1px solid #ccc;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-moz-border-radius:4px 4px 0 0;
	border-radius:4px 4px 0 0;
	}
.s-selector LI.active {
	border-bottom:1px solid #fff;
	background:#fff url(/images/highlight.png) repeat-x;
	}
.s-selector LI INPUT {
	vertical-align:middle;
	}
.s-selector LI .icon {
	margin:2px 4px;
	text-indent:-999px;
	cursor:pointer;
	}
.s-selector .text-wrap INPUT {
	margin:2px;
	width:343px;
	}
.s-selector .text-wrap.error INPUT,
.s-selector .text-wrap.ok INPUT  {
	width:312px;
	}

.s-selector-label {
	position:relative;
	}

#main .auto {
	position:relative;
	margin-left:-20px;
	width:375px;
	padding:20px;
	background:#fcfde0;
	}
#main .auto .text-wrap INPUT {
	width:371px;
	}
#main .auto .text-wrap.error INPUT,
#main .auto .text-wrap.ok INPUT {
	width:340px;
	}

/* layout */
#page {
	height:100%;
	width:897px;
	margin:auto;
	background:url(/images/head.png) center 8px no-repeat;
	}

#header {
	position:relative;
	width:897px;
	height:152px;
	margin:auto;
	font:22px/1.2 Georgia,serif;
	}
#header A {
	color:#f60;
	}
#header A.js {
	background-image:url(/images/link-h.png);
	}
#logo {
	display:block;
	position:absolute;
	z-index:1;
	top:92px;
	left:68px;
	}
#welcome {
	position:absolute;
	z-index:1;
	top:108px;
	left:310px;
	margin:0;
	text-align:center;
	}
#welcome.extra {
	top:128px;
	left:38px;
	width:840px;
	}
#userbar {
	position:absolute;
	top:10px;
	right:25px;
	z-index:1;
	padding:8px;
	max-width:831px;
	font-size:18px;
	text-align:right;
	background:#fff;
	}

#main {
	position:relative;
	width:747px;
	margin:0 auto;
	padding:35px 50px;
	background:#fff;
	}

#left, #right {
	float:left;
	padding:0;
	}
#left {
	width:395px;
	margin-right:25px;
	}
#right {
	width:302px;
	margin-left:25px;
	}

#bottom {
	position:relative;
	width:747px;
	padding:0 50px;
	}

/* colors */
.user A {
	color:#232323;
	}
.rating {
	color:#390;
	}
.tag A {
	color:#999;
	}	

/* nav */
.menu {
	position:relative;
	left:-60px;
	height:63px;
	margin:0 0 1em;
	padding:12px 0 0 59px;
	background:url(/images/nav.png) no-repeat left top;
	}
.menu LI {
	margin:0 0 .5em;
	}
.menu UL LI,
.nav LI {
	display:block;
	float:left;
	margin:0 .75em 0 0;
	color:#000;
	}
.menu LI.active,
.menu LI.active A,
.nav LI.active,
.nav LI.active A {
	color:#999;
	}

.nav {
	margin:0 0 1.5em;
	}

/* quiz */
.quiz {
	display:block;
	width:355px;
	padding:20px;
	color:#fff;
	background:#ff7e00;
	}
.quiz H1,
.quiz H2 {
	margin:0 0 .8em;
	font-size:1.6em;
	font-weight:normal;
	}
.quiz A {
	font-size:1em;
	text-decoration:underline;
	color:#fff;
	}
.quiz DD DL {
	margin-bottom:0;
	}
.quiz DD DD {
	margin:.2em 0 1em 1em;
	font:1.3em Georgia,serif;
	}
.quiz DD DT {
	font:1.1em Georgia,serif;
	font-style:italic;
	}
.quiz LABEL {
	}

#main FORM.narrow {
	width:355px;
	left:auto;
	margin:20px 0 10px;
	}

/* quiz form */
#main #quiz_form.auto {
	width:747px;
	margin-right:-20px;
	}
#quiz_form.auto .text-wrap INPUT {
	width:743px;
	}

#quiz_form.auto .text-wrap.error INPUT,
#quiz_form.auto .text-wrap.ok INPUT {
	width:712px;
	}

#quiz_form .dashed {
	padding-bottom:1em;
	border-bottom:1px dashed #ccc;
	}

#quiz_form_result LI {
	padding-bottom:1em;
	border-bottom:1px dashed #ccc;	
	}
#quiz_form_result LI,
#quiz_form_result DL {
	margin-bottom:1em;
	}

#quiz_form_result UL.vars LI {
	position:relative;
	margin:0 0 3px;
	padding:0;
	line-height:1;
	width:747px;
	border:none;
	}
#quiz_form UL.vars LI INPUT {
	display:block;
	width:498px;
	float:left;
	padding:1px;
	margin:0;
	border:1px solid #ccc;
	font:1.2em Georgia,serif;
	}
#quiz_form UL.vars LI .icon {
	display:block;
	position:relative;
	float:left;
	margin:3px 0 0 5px;
	cursor:pointer;
	}
.opt-link {
	position:relative;
	font-size:1.2em;
	cursor:pointer;
	}
.opt-link .icon {
	position:relative;
	top:-2px;
	}
.opt-link SPAN:hover,
.opt-link SPAN:hover + SPAN {
	text-decoration:underline;
	}
.opt-link.minus {
	color:#ff0000;
	}
.opt-link.plus {
	color:#390;
	}

/* userinfo */
.userinfo {
	}
.userinfo .pic {
	float:left;
	margin:0 10px 10px 0;
	}
.userinfo .pic IMG {
	display:block;
	width:60px;
	height:60px;
	}
.userinfo .name {
	font-size:1.6em;
	line-height:1.7;
	white-space:nowrap;
	overflow:hidden;
	}
.userinfo .name A {
	text-decoration:none;
	}
.userinfo .name A:hover,
.userinfo .name A:hover + A {
	text-decoration:underline;
	}
.userinfo .counter {
	float:left;
	margin:0 .5em 0 0;
	}
.userinfo .datetime {
	color:#999;
	}

.userinfo .about {
	clear:both;
	position:relative;
	padding:10px 15px 4px 15px;
	border:1px solid #ccc;
	}
.userinfo .about P {
	overflow:hidden;
	}
.userinfo .about .adornment {
	position:absolute;
	top:-18px;
	left:36px;
	width:24px;
	height:18px;
	background:url(/images/spr-l.png) no-repeat;
	}

.userinfo.right .pic {
	float:right;
	margin:0 0 10px 10px;
	}
.userinfo.right .name,
.userinfo.right .counter {
	text-align:right;
	}
.userinfo.right .counter {
	float:right;
	margin:0 0 0 .5em;
	}
.userinfo.right .about .adornment {
	left:auto;
	right:36px;
	background-image:url(/images/spr-r.png);
	}

/* quizlist */
.list {}
.list LI.item {
	margin:0 0 2em;
	}
.list A {
	font-size:1.6em;
	line-height:1.1;
	text-decoration:none;
	}
.list A:hover {
	text-decoration:underline;
	}
UL.toolbar {
	margin:.5em 0 0;
	}
UL.toolbar.label {
	position:relative;
	margin:7px 0 0 2px;
	padding:4px 4px 4px 14px;
	border:1px solid #ccc;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	}
UL.toolbar .cord {
	display:block;
	position:absolute;
	top:-8px;
	left:-9px;
	width:24px;
	height:24px;
	background:url(/images/cord.png);
	}
UL.toolbar LI {
	display:inline;
	margin:0 .5em 0 0;
	white-space:nowrap;
	}
UL.toolbar A {
	font-size:1em;
	text-decoration:underline;
	}

/* userlist & comments*/
.userlist .userinfo,
.comments .userinfo {
	position:relative;
	margin:0 0 1em 0;
	}
.userlist .pic {
	margin-bottom:0;
	}

/* paginator */
.paginator {
	margin:20px 0 0;
	padding:20px 0 0;
	font:1.6em/1.1 Georgia,serif;
	font-style:italic;
	color:#bbb;
	border-top:1px solid #ccc;
	}
.paginator LI {
	float:left;
	margin:0 6px 0 0;
	}
.paginator A,
.paginator SPAN {
	padding:0 3px;
	}
.paginator A {
	text-decoration:none;
	color:#390;
	} 
.paginator SPAN {
	color:#fff;
	background:#bbb;
	}

/* tag cloud */
.tag-cloud {
	text-align:center;
	}
.tag-cloud LI {
	display:inline;
	white-space:nowrap;
	line-height:1.5;
	}
.tag-cloud A {
	text-decoration:none;
	margin:0 .1em;
	}
.tag-cloud A:hover {
	text-decoration:underline;
	}
.tag-cloud .w1 {
	font-size:.86em;
	}
.tag-cloud .w2 {
	font-size:1.2em;
	} 
.tag-cloud .w3 {
	font-size:1.4em;
	}
.tag-cloud .w4 {
	font-size:1.6em;
	}
.tag-cloud .w5 {
	font-size:1.8em;
	}

/* right */
#bubble {
	position:relative;
	width:207px;
	height:112px;
	margin:-30px 0 10px;
	padding:40px 45px 0 20px;
	font:18px/1.2 Georgia,serif;
	background:url(/images/bubble.png) no-repeat;
	}
#bubble SPAN {
	display:block;
	font-size:22px;
	text-align:right;
	}
#bubble A {
	color:#f60;
	}
#superheroes {
	position:relative;
	padding: 15px 5px 0 15px;
	border:1px solid #ccc;
	}
#superheroes .adornment {
	position:absolute;
	top:-47px;
	right:-18px;
	width:54px;
	height:68px;
	background:url(/images/brainslug.png);
	}
#superheroes H3 {
	margin-top:0;
	}
#superheroes UL {
	position:relative;
	width:280px;
	overflow:hidden;
	margin-bottom:5px;
	}
UL.userpic-list LI,
UL.userpic-list A,
UL.userpic-list IMG {
	position:relative;
	display:block;
	width:60px;
	height:60px;
	}
UL.userpic-list LI {
	float:left;
	margin:0 10px 10px 0;
	}

/* accordion */
#stargate {
	display:none;
	width:396px;
	}
.accordion .title {
	display:block;
	padding:12px 20px;
	font:italic 2em Georgia,serif;
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
	color:#fff;
	}
.accordion .title.green {
	background:#6c0;
	}
.accordion .title.orange {
	background:#f60;
	}
.accordion .title.pink {
	background:#d80061;
	}
.accordion LI.active .title {
	cursor:default;
	}
.accordion .data {
	padding:20px;
	background:#fff;
	}

/* darkroom */
.darkroom {}
.darkroom-frame {
	position:fixed;
	top:0;
	left:0;
	display:none;
	overflow:hidden;
	width:100%;
	height:100%;
	z-index:999;
	}
.darkroom-frame-on {
	display:block;
	}
.darkroom-shadow {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0;
	}
.darkroom-canvas {
	position:absolute;
	top:50%;
	left:50%;
	}
.darkroom-button {
	display:none;
	position:absolute;
	top:-13px;
	width:30px;
	height:30px;
	background:url(/images/b-close.png) no-repeat;
	cursor:pointer;
	z-index:1;
	}
.darkroom-button-on {
	display:block;
	}
.darkroom-button-left {
	left:-16px;
	}
.darkroom-button-right {
	right:-16px;
	}

/* icons */
.icon {
	display:inline-block;
	width:16px;
	height:16px;
	margin:0 2px 0 0;
	vertical-align:middle;
	background:url(/images/icons.png) no-repeat;
	}
.icon.quizico, .icon.quizico-user		{ background-position:-22px -2px; }
.rating .icon, .icon.rating, .icon.star	{ background-position:-162px -2px; }
.icon.star-off							{ background-position:-182px -2px; }
.tag .icon, .icon.tag		{ background-position:-42px -2px; }
.plate .icon, .icon.plate	{ background-position:-62px -2px; }
.ok .edit, .icon.edit		{ background-position:-2px -2px; }
.ok .icon, .icon.ok			{ background-position:-82px -2px; }
.error .icon, .icon.error	{ background-position:-102px -2px; }
.plus .icon, .icon.plus		{ background-position:-122px -2px; }
.minus .icon, .icon.minus	{ background-position:-142px -2px; }
.icon.rgp					{ background-position:-62px -22px; }
.icon.lj					{ background-position:-82px -22px; }
.user .icon.lj				{ background-position:-102px -22px; }
.icon.ya					{ background-position:-122px -22px; }
.icon.mail					{ background-position:-142px -22px; }
.icon.openid				{ background-position:-162px -22px;}
.icon.li							{ background-position:-2px -22px; }
.user .icon.li, .user .icon.li-m	{ background-position:-22px -22px; }
.user .icon.li-f					{ background-position:-42px -22px; }

/* arrows */
.arrow {
	display:inline-block;
	width:25px;
	height:11px;
	margin:0 .25em;
	background:url(/images/right-black.png) no-repeat top;
	}
.arrow-back {
	background-image:url(/images/right-left.png);
	}

/* footer */
#bottom {
	height:40px; /* 30px + 10 bottom-margin */
	line-height:27px;
	margin:15px auto 0 auto;
	}
#copyright {
	float:left;
	line-height:27px;
	}
#copyright IMG {
	position:relative;
	vertical-align:top;
	width:89px;
	height:26px;
	margin-top:-2px;
	}
#bottom .nav {
	float:right;
	margin:0;
	padding:0 0 0 33px;
	background:url(/images/star.png) no-repeat left 3px;
	}

/* adv */
.adv {
	padding:10px 0px;
	}

/* fixes + fatures */
.nowrap {
	white-space:nowrap;
	}
.round {
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	border-radius:7px;
	}
.center {
	text-align:center;
	}
.clear {
	clear:both;
	}
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}