body, html {
padding:0;
margin:0;
font-family:Helvetica;
background:#ececec;
-webkit-text-size-adjust:none;
}
.elementinfo {
border:1px solid #999;
text-align:center;
background:#222222;
position:absolute;
color:#000000;
z-index:1000;
-moz-box-shadow: 0 0 10px 3px #c5c5c5;
-webkit-box-shadow: 0 0 10px 3px #c5c5c5;
}
#wait { position:absolute; top:120px; left:275px; z-index:2001; }
.images {
margin-top:100px;
margin-bottom:100px;
}
#header {
position:fixed;
top:0;
left:0;
color:white;
background-color:#222;
padding:12px 40px 12px 30px;
height:50px;
width:100%;
z-index:2002;
width:100%;
}
#subnav {
width:100%;
position:fixed;
top:70px;
left:0;
padding:3px 41px 5px 41px;
background:black;
z-index:2002;
color:#ffffff;
}
#subnav ul {
padding:0;
margin:0;
}
#subnav li {
text-transform:uppercase;
padding:0px 0px 0px 0px;
display:inline;
font-size:0.8em;
margin:0;
padding:0;
}
#subnav a {
text-decoration:none;
color:white;
}
#subnav .active a {
text-decoration:none;
color:red;
}
#subnav a:hover {
color:red;
}
#footer {
position:fixed;
bottom:0;
left:0;
color:white;
background-color:#222;
padding:10px 50px 10px 25px;
border-top:5px solid #000;
width:100%;
z-index:2001;
font-size:0.7em;
text-transform:uppercase;
}
#footer a {
color:white;
text-decoration:none;
}
#footer a:hover {
color:red;
}
#header img {
float:left;
}
.meny {
margin:0;
background-color:none;
list-style:none;
}
li.meny {
text-transform:uppercase;
padding:0px 0px 0px 0px;
display:inline;
font-size:0.8em;
}
li.version {
text-transform:uppercase;
padding:0px 5px 0px 5px;
display:inline;
font-size:0.8em;
}
li.meny a {
color:#fefefe;
text-decoration:none;
}
li.meny a:hover {
color:red;
text-decoration:none;
}
li.meny a:active {
color:#111;
text-decoration:none;
border-bottom:1px dashed #111;
}
.Elf {
border:1px solid black;
cursor:default;
background:#570202;
position:absolute;
text-align:center;
color:#ffffff;
z-index:1000;
}
.Half-elf {
border:1px solid black;
cursor:default;
background:purple;
position:absolute;
text-align:center;
color:#ffffff;
z-index:1000;
}
.Man {
border:1px solid black;
cursor:default;
background:#023857;
position:absolute;
text-align:center;
color:#ffffff;
z-index:1000;
}
.Valar {
border:1px solid blue;
cursor:default;
background:white;
position:absolute;
text-align:center;
z-index:1000;
}
.Maiar {
border:1px solid green;
cursor:default;
background:white;
position:absolute;
text-align:center;
z-index:1000;
}
.Fatherofall {
border:1px solid purple;
cursor:default;
}
#anchor {
position:relative;
padding-top:300px;
}
#anchor:target {
color:red;
}

.ui-autocomplete {
	width: 150px;
        background:white;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ui-menu-item {
	margin: 0px;
	padding: 2px 5px;
	display: block;
	font: menu;
	font-size: 16px;
	line-height: 18px;
	overflow: hidden;
}
.ui-menu-item li:hover {
	background:#ccc;
}
.characters {
border:5px solid #000;
background:#f8eccb;
padding:5px;
}
.submit {
border:5px solid #000;
background:#000;
color:white;
padding:5px;
}
input:focus {
border:5px solid #b68633;
}
.search {
display:inline;
float:right;
margin-right:50px;
margin-top:-10px;
}
.element {
border:1px solid #999;
text-align:center;
background:white;
position:absolute;
color:#000000;
z-index:1000;
cursor: pointer;
}
.elementhover {
border:1px solid #111111;
text-align:center;
background:#eeeeee;
position:absolute;
color:#000000;
z-index:1000;
cursor: pointer;
}
.elementselected {
border:1px solid #111111;
text-align:center;
background:#111111;
position:absolute;
color:#ffffff;
z-index:1000;
cursor: pointer;
}
.highlighted {
border:1px solid red;
color:darkred;
text-align:center;
background:white;
position:absolute;
z-index:1000;
}
#tools {
position:fixed;
top:120px;
right:35px;
z-index:2000;
width:150px;
background: rgb(255, 255, 255);
background-color:rgba(255,255,255,0.6);
filter: alpha(opacity=60);
border:5px solid #ccc;
cursor:move;
overflow:hidden;
}
#tools div.title {
	padding: 5px;
	cursor: pointer;
}
#tools div.titlelink a {
	padding: 5px;
        color:#000;
        text-decoration:none;
}
#about {
position:fixed;
padding:10px;
top:120px;
left:75px;
z-index:2000;
width:550px;
background: rgb(255, 255, 255);
background-color:rgba(255,255,255,0.6);
filter: alpha(opacity=60);
border:5px solid #ccc;
cursor:move;
}
#about div.titleabout {
        font-size:1.2em;
        font-weight:bold;
        padding-bottom:10px;
        color:#333;
}
#comment {
position:fixed;
padding:10px;
top:120px;
left:670px;
z-index:2000;
width:470px;
background: rgb(255, 255, 255);
background-color:rgba(255,255,255,0.6);
filter: alpha(opacity=60);
border:5px solid #ccc;
cursor:move;
}
#comment div.titleabout {
        font-size:1.2em;
        font-weight:bold;
        padding-bottom:10px;
        color:#333;
}
#zoomcontent {
position:absolute;
top:0px;
left:0px;
cursor:hand;
}
img {
border:0;
}
.sharethis {
display:inline;
float:right;
margin:0px 15px; 
vertical-align: top }
.sharethis ul { margin:0 0 5px 0; padding:0 0 5px 0; list-style:none; }
.sharethis li { 
display:inline;
vertical-align: top;
margin:0;
 }
.laddar {
z-index:1000; 
position:absolute; 
top:300px; 
left:300px;
}
.tabort {
display:none;
}
.valarinfo {
position:absolute; top:145px; left:75px; width:1410px; height:45px; padding:5px 10px; background:#fefefe; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px solid #cccccc;
}
.maiarinfo {
position:absolute; top:145px; left:1787px; width:2200px; height:45px; padding:5px 10px; background:#fefefe; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px solid #cccccc;
}
.bombadillinfo {
position:absolute; top:145px; left:1560px; width:165px; height:45px; padding:5px 10px; background:#fefefe; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px solid #cccccc;
}
.entstreesinfo {
position:absolute; top:125px; left:4380px; width:1420px; height:315px; padding:5px 10px; background:none; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px dashed #999;
}
.maiamelian {
position:absolute; top:675px; left:1000px; width:58px; height:40px; padding:5px 10px; background:#fefefe; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px solid #cccccc;
}
.noncanon {
border:1px solid #AD2210;
background:#FF9385;
}
.nonconsistent {
border:1px solid #2c6ea8;
background:#c3e3ff;
}
.brosis_no {
position:absolute;
top:-18px;
right:5px;
float:right;
font-size:10px;
width:25px;
text-align:left;
}
#wrapper {
width:340px;
text-align:left;
padding:10px;
color:#444444;
border:3px solid #ccc;
}
#wrapper a {
color:red;
text-decoration:none;
}
#wrapper a:hover {
color:black;
}
#name {
font-weight:bold;
font-size:1.2em;
}
#race {
text-transform:uppercase;
font-size:0.7em;
}
#dates {
text-transform:uppercase;
font-size:0.7em;
}
#aliases {
font-size:0.9em;
border-top:1px solid #ccc;
}
#pos {
margin-top:7px;
margin-bottom:7px;
font-size:0.7em;
}
#addinfo {
margin-top:7px;
margin-bottom:7px;
font-size:0.7em;
padding:10px 5px;
border-top:2px solid #2c6ea8;
border-bottom:2px solid #2c6ea8;
}
.legenda {
position:absolute; top:10px; left:75px; width:300px; height:45px; padding:5px 10px; font-size:0.7em; font-weight:bold;
}
.legenda-item {
padding:5px;
font-weight:normal;
}