/* basic css reset */
body, html		{ height:100%; margin:0; padding:0; }
*				{ padding:0; margin:0; zoom:0; }

/* basics */

body		{ background: url(../images/layout/bg.jpg);  font-family: arial; font-size:13px; color:#fff; }
#headerbg	{ width:1000px; height:180px; position:absolute; top:0; left:50%; margin-left:-500px; background: url(../images/layout/header.jpg) top no-repeat; }

#container	{ width:940px; padding:10px; position:absolute; left:50%; margin-left: -480px; top:0; bottom:0; }
#header		{ height:130px; width:100%; position:relative; }
#content	{ }
#skills		{ width: 120px; padding:10px; float:left; abackground:red;}
#calculator { width: 600px; padding:10px; float:left; position:relative; }
#ads		{ width: 160px; padding:10px; float:left; abackground:blue;}

a			{ color: #ff3600; text-decoration: none; }
a:hover		{ color: #fff; }

/* header */

#headertext			{ position:absolute; top:21px; right:190px; width:310px; color:#bbb; text-align:justify; }
#headertext em		{ color: #ff3600 !important; }
#headertext strong	{ color: #fff; }

#donationblock		{ position:absolute; top:21px; right:10px; width:160px; color:#fff; }

#donatebutton		{ float:right; margin:6px 0 0 0; }

/* Blocks above menu / calc etc */
.infoblock			{ text-shadow:#000 0 1px 0; margin-bottom: 10px; font-size: 13px; height:70px; }
.infoblock.stats	{ text-align:center; }
.infoblock .left	{ text-align: left; }
.infoblock .right	{ text-align: right; }
.infoblock h2		{ display:block; font-size:35px; font-weight:bold; margin-top:5px; text-shadow:#000 0 2px 3px; }
#levelrequired.over50	{ color:#ff3600; }

.fakebutton			{ background: url(../images/layout/linkbutton.png) top repeat-x; font-size:13px; line-height:25px; text-align:center; padding:0; margin:0;
					  border:1px solid #fff; box-shadow: #111 0 2px 3px; border-radius:5px; cursor:pointer;  color:#333; text-shadow:#fff 0 1px 0; }
.fakebutton:active	{ background-position:bottom; box-shadow: #111 0 -1px 0; }

#content			{ margin-bottom:20px; }
.socialbutton		{ margin-top:1px; }

/* skill menu left */
#skills					{ text-shadow:#000 0 1px 0; }
#skills p				{ background:#292929; border-radius:5px; border:1px solid #222; padding:5px; line-height:18px; margin-bottom:5px; }
#skills .thief			{ color: #c0ff00; }
#skills .mage			{ color: #00a8ff; }
#skills .warrior		{ color: #ff3600; }
#skills .count			{ color: #fff; float:right; text-align:right; width:20px; }
#skills .count.none		{ color: #444; }
#skills .skill			{ cursor:pointer; }
#skills .skill:hover, #skills .active	{ color:#fff; }

#feedback				{ color:#888; font-size: 11px; margin-top: 8px; text-align: justify; }
#resetall				{ display: block; margin:5px 0 0 5px; }

/* calculator*/
#skilltreewrapper	{ position: relative; height:720px; margin-bottom: 10px; }
#tip				{ position:absolute; z-index:15; width:582px; padding:10px; border-top-left-radius:5px; border-top-right-radius:5px;
					  background:#000; opacity: 0.7; filter: alpha(opacity=70); color:#fff; text-align:left; display: none; }

.skilltree			{ height:700px; width:580px; padding:10px; position:absolute; display: none;
					  color:#fff; border:1px solid #111; border-radius:5px; z-index:10; }

.skilltree .star	{ position:absolute; margin: -32px 0 0 -32px; width:64px; height:64px; background: url(../images/layout/star-unavailable.png) center no-repeat;
					text-shadow:#000 0 0 1px; cursor:pointer; text-align:center; color:#333; font-size: 15px; line-height:64px; }
.skilltree .star.active					{ background-image:url(../images/layout/star-active.png); }
.skilltree.warrior .star.available		{ background-image:url(../images/layout/star-available-red.png); }
.skilltree.thief .star.available		{ background-image:url(../images/layout/star-available-green.png); }
.skilltree.mage .star.available			{ background-image:url(../images/layout/star-available-blue.png); }
.skilltree .star.unavailable			{ background-image:url(../images/layout/star-unavailable.png); }

.skilltree .star.unavailable .name		{ opacity: 0.4; filter: alpha(opacity=40); }

.skilltree .star .name	{ position: absolute; padding:5px; bottom:-15px; margin-left:50%; font-size:13px; line-height:13px; color:#fff;
						  background:#000; border-radius:5px; opacity: 0.7; filter: alpha(opacity=70); text-align:center; white-space: nowrap; text-shadow:none; }

#footertext			{ color:#555; font-size: 11px; text-align: center; }

/* tipsy */
.tipsy { padding: 5px; font-size: 13px; opacity: 0.7; filter: alpha(opacity=70); background-repeat: no-repeat;  abackground-image: url(../images/layout/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: #fff; color: #000; max-width: 200px; text-align: center; text-align: left; }
.tipsy-inner { -moz-border-radius:5px; -webkit-border-radius:5px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }
