/* =reseting
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body, h1, h2, ul, li, dl, dt, dd {
	margin: 0;
	padding: 0;
}

a, a:visited { text-decoration: none; }	
fieldset, img { border: none; }
li { list-style: none; }

/* =main
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

html, body {
	height: 100%;
}

html {
	background: #30030d url(bg.png) 0 0 repeat-x;
}

body {
	font: normal 100% "Lucida Sans Unicode", "Lucida Grande", LucidaGrande, "Lucida Sans",
	"Bitstream Vera Sans", Geneva, Verdana, sans-serif;
	display: table;
	width: 15em;
	max-width: 100%;
	margin: 0 auto;
	color: #fff;
}

#wrapper {
	display: table-cell;
	vertical-align: middle;
}

#cell {
	font-size: 0.69em;
	margin: 20px 0;
	background: url(question.png) 100% 100% no-repeat;
	padding-bottom: 20px;
}

#lang {
	position: absolute;
	margin-left: 0.85em;
	margin-top: 0.45em;
}
#lang a {
	font-size: 0.82em;
	color: #b0a3a9;
	border-bottom: 1px dotted #b0a3a9;
}

#lang a:hover {
	border-bottom-style: solid;
}

#panels {
	padding: 1.82em;
	background-color: #1c010e;
}

dt {
	background: #000 url(left.png) 0 0 no-repeat;
	margin-top: 0.45em;
}

dt dt {
	background: none;
	margin: 0;	
}

#about { background-color: #9d5010; margin-top: 0; }
#writing { background-color: #9e632a; }
#interests { background-color: #967051; }
#portfolio { background-color: #9b877c; }
#contact { background-color: #92949f; }
#identity { background-color: #7d99b8; }
#elsewhere { background-color: #5f8bb5; }
#resources { background-color: #3d597c; }

dt strong {
	display: block;
	height: 1.71em;
	line-height: 1.55em;
	font-weight: normal;
	padding: 0 1.09em;
	cursor: default;
	background: url(right.png) 100% 0 no-repeat;
}

dd {
	color: #b0a3a9;
	margin: 0.9em 0;
	padding: 0 1.09em;	
}

dd dd {
	margin: 0;
	padding: 0 0 0 1.09em;
}

dd strong {
	color: #e1d7dc;
	font-weight: normal;
}

dd p {
	margin: 0.45em 0;
	text-align: justify;
}

dd dd p { text-align: left; }

dd p, dd ul, dd ol, dd blockquote { line-height: 150%; }
dd li { margin: 0.45em 0; }

dd abbr {
	border-bottom: none;
}

dd a, div a {
	color: #fff;
	border-bottom: 1px dotted #b0a3a9;
}

dd a[hreflang="pl"]::after {
	content: "[PL]";
	color: #b0a3a9;
	font-size: 0.82em;
	padding-left: 1ex;
	border-bottom: 1px solid #1c010e;
}

dd a[hreflang="en"]::after {
	content: "[EN]";
	color: #b0a3a9;
	font-size: 0.82em;
	padding-left: 1ex;
	border-bottom: 1px solid #1c010e;
}

dd a:hover {
	border-bottom-style: solid;
}

.email, .xmpp, .tlen, .gadu { 	
	background-position: 0 50%;
	background-repeat: no-repeat;
	padding-left: 20px; 
}
.email { background-image: url(mail.png); }
.xmpp { background-image: url(xmpp.png); }
.gadu { background-image: url(gadu.png); }

.hTagcloud { text-align: center; }
.hTagcloud li { text-transform: lowercase; }
.hTagcloud li, .inline li { display: inline; }
.inline li { padding-right: 1ex; line-height: 175%; }

.v-popular { font-size: 1.09em; color: #bfb6ba; }
.vv-popular { font-size: 1.27em; color: #cec6ca; }
.vvv-popular { font-size: 1.45em; color: #dcd5d8; }
.vvvv-popular { font-size: 1.82em; color: #f0ebed; }

/* =JS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.js dt { background: url(lt.png) 0 0 no-repeat; }
.rt, .lb, .accordion { display: block; }
.rt { background: url(rt.png) 100% 0 no-repeat; }
.lb { background: url(lb.png) 0 100% no-repeat; }
.js dt strong { 
	background: url(rb.png) 100% 100% no-repeat;  
	position: relative;
	z-index: 10;
}
.shadow {
	color: #000;
	opacity: 0.5;
	position: absolute;
	left: 1.18em;
	top: 1px;
	z-index: -1;
}
.clickable { 
	cursor: pointer; 
	-moz-user-select: none;
}
.accordion {
	background: url(accordion.png) 100% 50% no-repeat;
}
.active .clickable { cursor: default; }
.active .accordion {
	background-image: none;
}

#panels dl dt { background: none; }