* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);	
}
html, body, form, ul, li, table, td { margin: 0; padding: 0; }
body {
padding:0;
margin:0;
color:#333;
font-family:'Helvetica';
background:#eeeeee;
}
#wait { position:absolute; top:120px; left:275px; z-index:2001; }
.images {
margin-top:100px;
margin-bottom:100px;
}
a {
color:#333333;
text-decoration:none;
}
.pc {
position:absolute;
background-image:url(../../images/pc.png); 
background-repeat:repeat-y; 
width:50px; 
z-index:1;
}
.pco {
position:absolute;
background-image:url(../../images/pco.png); 
background-repeat:repeat-y; 
width:50px; 
z-index:1;
}
.mc {
z-index:2; 
background-image:url(images/mc.png); 
position:absolute; 
background-repeat:repeat-x; 
height:4px;
}
.header-cont {
float:left;
width:auto;
padding-left:12px;
padding-right:12px;
padding-bottom:1px;
background: rgb(255, 255, 255);
background-color:rgba(255,255,255,0.9);
filter: alpha(opacity=90);
}
#header {
position:fixed;
top:30px;
left:30px;
color:white;
padding:0;
z-index:2003;
width:800px;
}
#header-inner {
margin:0 auto;
width:980px;
}
#header img {
float:left;
}
.meny-cont {
float:left;
letter-spacing:1px;
overflow:hidden;
}
.menulistclear {
clear:both;
}
#topmenuinner {
overflow:hidden;
}
.meny-cont ul {
margin-top:0px;
display:block;
width:auto;
overflow:hidden;
}
.meny {
margin:0;
background-color:none;
list-style:none;
padding:5px;
}
ul {
padding:0;
margin:0;
}
li.meny {
text-transform:uppercase;
padding:0px 0px 0px 0px;
display:block;
float:left;
padding-left:1px;
padding-bottom:1px;
font-size:12px;
line-height:14px;
margin:0;
}
li.menyimg {
text-transform:uppercase;
padding:0px 0px 0px 0px;
display:block;
float:left;
padding-left:1px;
padding-bottom:1px;
font-size:12px;
margin:0;
}
li.version {
text-transform:uppercase;
padding:0px 5px 0px 5px;
display:inline;
font-size:0.8em;
}
li.meny a {
color:#fefefe;
text-decoration:none;
display:block;
padding:10px 16px 10px 16px;
background:#333333;
}
li.rightmeny a {
color:#fefefe;
text-decoration:none;
display:block;
padding:9px 16px 10px 16px;
background:#333333;
}
li.menyimg a {
display:block;
padding:0;
width:34px;
height:34px;
overflow:hidden;
background:#333333;
cursor:pointer;
}
li.twitter a:hover {
background:#1fa6d7;
}
li.facebook a:hover {
background:#2c4d8e;
}
li.tumblr a:hover {
background:#2d4965;
}
.minimize {
float:left;
padding-left:1px;
width:34px;
height:34px;
}
.minimize a {
background:#333333;
width:34px;
height:34px;
display:block;
cursor:pointer;
}
.minimize a:hover {
background:#d33b2f;
}
li.meny a:hover {
color:#222222;
background: rgb(255, 255, 255);
background-color:rgba(255,255,255,0.9);
filter: alpha(opacity=90);
}
li.rightmeny a:hover {
color:#222222;
background: rgb(255, 255, 255);
background-color:rgba(255,255,255,0.9);
filter: alpha(opacity=90);
}
li.rightmeny a.floatboxactive {
color:#fefefe;
background: #d33b2f;
}
li.meny a:active {
color:#111;
text-decoration:none;
}
li.active {
color:#dc7f22;
}
li.mactive a {
color:#dc7f22;
}
li.meny a.mactive {
text-decoration:none;
color:#dc7f22;
}
#sharefbox {
z-index:2010;
padding:15px;
background: rgb(255, 255, 255);
background-color:rgba(255,255,255,0.9);
filter: alpha(opacity=90);
display:none;
position:fixed;
left:251px;
top:100px;
}
.sharethis {
display:inline;
float:left;
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;
float:left;
margin:0;
 }
#floatmenu {
z-index:2010;
display:none;
padding-top:0px;
width:180px;
margin-top:65px;
position:fixed;
cursor:pointer;
}
#floatmenu ul {
border-bottom:5px solid black;
padding:5px 0;
margin:0;
background: rgb(255, 255, 255);
background-color:rgba(255,255,255,0.9);
filter: alpha(opacity=90);
}
#floatmenu li {
padding:0;
margin:0;
list-style:none;
}
#floatmenu a {
display: block;
width:90%;
height:100%;
padding:8px 5%;
font-size:12px;
color:#111111;
text-transform:uppercase;
border-bottom:1px solid #dddddd;
text-decoration:none;
}
#floatmenu a:hover {
background:#dddddd;
color:#dc7f22;
}
.floattitle {
padding-left:10px;
font-size:12px;
font-weight:bold;
}
#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:#222 url(htopbg.png);
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:#dc7f22;
}
.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:2px solid #436578;
text-align:center;
background:white;
position:absolute;
color:white;
z-index:1000;
cursor: pointer;
font-size:0.7em; 
z-index:3; 
width:60px; 
height:13px; 
padding:5px 3px;
}
.important {
background:#182E3B;
border:1px solid #182E3B;
color:white;
}
.notimportant {
background:#517082;
border:1px solid #517082;
color:white;
}
.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;
}
.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;
}
.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:relative;
top:60px;
left:0px;
cursor:hand;
}
img {
border: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:2115px; 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:4350px; width:1023px; height:280px; padding:5px 10px; background:none; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px dashed #999;
}
.gondolindrim {
position:absolute; top:847px; left:74px; width:727px; height:110px; padding:5px 10px; background:none; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px dashed #999;
}
.maiamelian {
position:absolute; top:345px; left:2022px; width:59px; height:40px; padding:5px 10px; background:#fefefe; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px solid #cccccc;
}
.orcs-morgoth {
position:absolute; top:4705px; left:6590px; width:375px; height:45px; padding:5px 10px; background:#fefefe; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px solid #cccccc;
}
.orcs-sauron {
position:absolute; top:4962px; left:6590px; width:780px; height:45px; padding:5px 10px; background:#fefefe; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px solid #cccccc;
}
.orcs-saruman {
position:absolute; top:4962px; left:7403px; width:360px; height:45px; padding:5px 10px; background:#fefefe; font-size:0.7em; text-transform:uppercase; font-weight:bold;
border:2px solid #cccccc;
}
.orcs-moria {
position:absolute; top:4795px; left:6590px; width:70px; height:120px; 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;
}
.fanfiction {
border:1px solid #0b7426;
background:#d4ffc3;
}
.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;
overflow-y:scroll;
}
#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;
}
#refs {
margin-bottom:5px;
}
.ref {
font-size:0.6em;
margin-bottom:5px;
}
#refstitle {
font-size:1.1em;
margin-bottom:5px;
}
#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;
}
#livedin {
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;
}
#slide-navigation {
position:fixed;
left:-200px;
top:150px;
width:235px;
z-index:4000;
background:none;
}
.nav-header {
width:30px;
float:right;
}
.nav-content {
width:200px;
color:#fefefe;
background:#333;
float:left;
border-right:5px solid #333;
}
.nav-content li {
padding:0;
margin:5px;
list-style:none;
cursor:pointer;
}
.nav-content ul {
padding:0;
margin:10px 20px;
list-style:none;
}
.nav-content a {
color:#fefefe;
}
.nav-races {
font-weight:bold;
color:#dfd4aa;
}
.year {
position:absolute;
left:0px;
font-size:0.6em;
background:#eee;
width:100%;
z-index:0;
}
.year:hover {
background:#cccccc;
}
.yeartitle {
padding:3px 10px;
background:#cccccc;
width:55px;
}
.marker {
position:absolute;
left:-26px;
top:30px;
width:28px;
height:40px;
background:url('../../images/marker.png') no-repeat top left;
z-index:1001;
}
#close {
position:absolute;
left:347px;
top:2px;
width:30px;
cursor:pointer;
height:30px;
background:url('close.png') no-repeat top left;
z-index:1001;
}
#slide-highlighting {
position:fixed;
right:-350px;
top:150px;
width:385px;
z-index:4000;
background:none;
}
.nav-header-hl {
width:30px;
float:left;
cursor: pointer;
}
.nav-content-hl {
width:350px;
color:#fefefe;
background:#333;
float:right;
border-right:5px solid #333;
}
.nav-content-hl li {
padding:0;
margin:5px;
list-style:none;
cursor:pointer;
}
.nav-content-hl ul {
padding:0;
margin:10px 20px;
list-style:none;
}
.nav-content-hl a {
color:#fefefe;
}
.nav-races {
font-weight:bold;
color:#dfd4aa;
}
#menu { padding: 0; }
#menu ul { width:330px; }
#menu li { display: inline; }
#menu li a { background: #333; padding: 5px; font-size:0.8em; float:left; border-bottom:3px solid #333; text-decoration: none; color: #c8bf9a;}
#menu li.active a { border-bottom:3px solid #c8bf9a; }
.content { float: left; clear: both; border-top: none; border-left: none; background: #333; padding: 10px; width: 330px; min-height:150px; }
.hoverelement {
background:#182E3B;
}
.cls {
height:400px;
text-transform:uppercase;
padding:20px;
position:absolute;
font-size:42px;
color:#809BAB;
}
.start {
height:100%;
padding:20px;
position:absolute;
color:#809BAB;
}
.hovercls {
background-color:rgba(255,255,255,0.3);
}
#hobbitcont {
width:470px;
left:620px;
}
#istaricont {
width:350px;
left:1175px;
}
#dwarvescont {
width:1680px;
left:1605px;
}
#trollscont {
width:350px;
left:3355px;
}
#elvescont {
width:485px;
left:3780px;
}
#birdscont {
width:350px;
left:4360px;
}
#menscont {
width:425px;
left:4820px;
}
#goblinscont {
width:380px;
left:5360px;
}
#dragoncont {
width:300px;
left:5850px;
}
#startcont {
width:540px;
left:20px;
}
.startinfo {
text-transform:uppercase;
color:white;
top:200px;
width:350px;
font-size:0.8em;
margin:0 auto;
padding:20px;
background:#182E3B url(htopbg.png);
}
.credits {
text-transform:uppercase;
color:black;
margin-top:20px;
width:300px;
text-align:center;
font-size:0.6em;
margin:0 auto;
padding:20px 0px;
}
.credits a {
font-weight:bold;
text-decoration:none;
color:black;
}
#navigateraces {
position:absolute;
top:-40px;
left:620px;
z-index:10;
}
#navigateraces li {
color:#182E3B;
cursor:pointer;
display:inline;
list-style:none;
padding:5px 10px;
}
#navigateraces li:hover {
color:white;
background:#182E3B;
}
#navigateraces.fixednav {
position:fixed;
top:120px;
left:20px;
z-index:10;
}
#title {
width:370px;
color:#333333;
text-align:center;
font-size:52px;
line-height:48px;
margin:0 auto;
font-family: 'Playfair Display', serif;
font-style:italic;
}
#maptimeline {
text-transform:uppercase;
color:black;
margin-top:20px;
width:300px;
text-align:center;
margin:0 auto;
padding:30px 0px;
}