body {
font-family: 'Open Sans', sans-serif;
padding:0;
margin:0;
background:#fefefe;
}
.header-cont {
float:left;
width:auto;
padding-left:12px;
padding-right:12px;
padding-bottom:1px;
background: rgb(0, 0, 0);
background-color:rgba(0,0,0,0.8);
filter: alpha(opacity=80);
}
.meny-cont ul {
margin-top:0px;
display:block;
width:auto;
overflow:hidden;
}
#header {
position:absolute;
top:20px;
left:20px;
color:white;
padding:0;
z-index:2003;
width:800px;
}
#header-inner {
margin:0 auto;
width:800px;
}
#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-color:rgba(0,0,0,0.8);
}
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-color:rgba(0,0,0,0.8);
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-color:rgba(0,0,0,0.8);
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:89px;
}
.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;
 }
#float, #sharef {
cursor:pointer;
}
#floatmenu {
z-index:2010;
display:none;
padding-top:0px;
width:180px;
margin-top:54px;
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;
}
/* Wrappers and stuff */
#wrapper {
  min-width:1024px;
}
#titlemenu {
  height: 342px;
}
#startsplash {
  padding: 0px;
  position: relative;
  z-index: 1;
  border-top: 1px solid #000000;
}
.startinfotext {
  font-size: 20px;
  font-weight: 300;
  color: #cccccc;
  line-height:30px;
  width:600px;
  padding-top: 148px;
  padding-left:10px;
  height:130px;
  padding-bottom: 70px;
}
#treebg {
  position: absolute;
  top: 28px;
  right: -18px;
}
.section {
  width: 100%;
  margin: 0 auto;
  min-width:1024px;
}
.section.dark {
  background:#222222 url(http://lotrproject.com/quiz/images/darkbg.png) repeat;
  overflow: hidden;
}
.section.light {
  background:#eeeeee;
  border-bottom: 1px solid #fefefe;
  padding: 0px 0px 50px 0px;
  position: relative;
  z-index: 1;
}
.section-inner {
  width: 960px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}
.section-title {
  letter-spacing: 1px;
  font-weight: 400;
  color: #333333;
  text-align:center;
  padding: 50px 0px 50px 0px;
  background: #eeeeee url(http://lotrproject.com/yearinreview/2013/yirbg.jpg) no-repeat center bottom;
  font-size: 32px;
  line-height: 32px;
  font-family: 'Playfair Display', serif;
  font-style:italic;
}
.section-title-inner {
  width: 500px;
  margin: 0 auto;
}
/* Title and Menu */
.title {
  padding-top:150px;
  padding-bottom: 20px;
  font-size: 46px;
  line-height: 46px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  width: 100%;
  text-align:center;
  color: #fefefe;
  text-shadow: 2px 2px 0px rgba(27, 27, 24, 0.94);
  width: 600px;
  margin: 0 auto;
}
.sub-title {
  font-size: 14px;
  text-transform: uppercase;
  background: #d33b2f;
  color: #fefefe;
  padding: 4px 7px;
  display: inline-block;
  margin:0 auto;
  box-shadow: 1px 1px 0px rgba(27, 27, 24, 0.94);
  margin-bottom:40px;
}
#pagemenu {
  padding:20px 0px;
  height:19px;
  position:relative;
  overflow:hidden;
  z-index: 1004;
}
#pagemenu ul {
  width:960px;
  list-style:none;
  padding:0;
  text-align: center;
  margin:0 auto;
  position:relative;
  z-index: 1004;
}
#pagemenu li {
  display:inline;
  font-size:12px;
  text-transform:uppercase;
  color:#eeeeee;
  font-weight:600;
  margin-bottom:131px;
  height:20px;
  margin-right:16px;
}
#pagemenu li:hover {
  border-bottom:1px solid #d33b2f;
  cursor:pointer;
}
#pagemenu.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background:#222222 url(http://lotrproject.com/quiz/images/darkbg.png) repeat;
  width: 100%;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
  -moz-box-shadow:    0px 0px 15px rgba(0, 0, 0, 0.8);
  box-shadow:         0px 0px 15px rgba(0, 0, 0, 0.8);
}
.menuhidden {
  position: absolute;
  top: -2px;
  left: 0px;
  padding-left: 18px;
  padding-right: 20px;
  height: 59px;
  display: none;
  z-index: 1001;
}
.titlemenu {
  font-size: 14px;
  margin-top: 18px;
  text-transform: uppercase;
  background: #d33b2f;
  color: #fefefe;
  padding: 4px 7px;
  display: inline-block;
  box-shadow: 1px 1px 0px rgba(27, 27, 24, 0.94);
}
#pagemenubg {
  display:none;
  opacity:0.2;
  position:absolute;
  overflow:hidden;
  top:0px;
  left:0px;
  width: 100%;
}
#pagemenu.fixed #pagemenubg {
  display:block;
} 
#topbg {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  opacity:0.2;
  width: 100%;
}
/* Graphs */
.graph-container {
  background: #f9f9f9;
  border: 10px solid #ffffff;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 40px;
  position: relative;
  padding: 15px 15px;
  box-shadow: 1px 1px 0px rgba(27, 27, 24, 0.10);
}
#tooltip {
  position:absolute;
  color:#333;
  padding:5px 8px;
  background: #222222;
  color:#eeeeee;
  border-radius:5px;
  min-width:70px;
  z-index:1010;
  text-align:center;
}
#popuparrow {
  background:none;
  position:absolute;
  left:100px;
  bottom:-10px;
}
.popname {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 400;
}
#graph_raceandsex {
  height: 220px;
  width: 690px;
}
#graph_raceandsex_sex {
  height: 220px;
  width: 220px;
  float:right;
}
#graph_lifeexpectancy {
  height: 305px;
  width: 620px;
  margin-top:15px;
}
#graph_longevity, #graph_distribution {
  height: 320px;
  width: 910px;
  margin-top:15px;
}
#graph_inhabitants {
width: 910px;
height: 320px;
}
.graphtitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.toplabel {
  position:absolute;
  margin-left: 0px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  line-height: 12px;
  margin-bottom: 5px;
  color:#666666;
  top: 24px;
}
.column-left {
  width: 465px;
  line-height: 24px;
  font-size: 14px;
  color: #555555;
  float:left;
}
.column-right {
  width: 465px;
  line-height: 24px;
  font-size: 14px;
  color: #555555;
  float:right;
}
.inforight {
  color: #eeeeee;
  padding: 10px;
  float: right;
  width: 250px;
  background: #3c3c3c;
}
.infotitle {
  color: #eeeeee;
  font-weight:300;
  margin-bottom: 5px;
}
.inforight table {
  font-size: 12px;
  border-spacing: 0;
  border-collapse: collapse;
}
.inforight table th {
  text-align: center;
  width: 33%;
  line-height: 12px;
  font-size: 12px;
}
.inforight table td {
  text-align: center;
  padding: 3px 0px;
  line-height: 12px;
}
.einforight {
  color: white;
  padding: 10px;
  float: right;
  width: 276px;
  background: #3c3c3c;
}
.biginfotitle {
  color: black;
  margin-bottom: 10px;
  font-weight:600;
  font-size:18px;
}
.infotitle {
  color: white;
  margin-bottom: 10px;
  font-weight:600;
  font-size:18px;
}
.smaller {
  font-size: 14px;
}
.brdr {
  margin-top: 8px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.project {
  border: 10px solid #ffffff;
  background: #f9f9f9;
  width: 455px;
  height: 150px;
  text-align: center;
  float: left;
  margin-bottom: 10px;
  position:relative;
  box-shadow: 1px 1px 0px rgba(27, 27, 24, 0.10);
}
.project-image {
  float: left;
  margin-right: 10px;
}
.project-title {
  width: 275px;
  float: right;
  text-align: center;
  padding: 17px 10px;
  font-size: 25px;
  font-weight:300;
}
.project-link {
  width: 275px;
  position:absolute;
  bottom: 25px;
  right: 10px;
}
.project-link a {
  color: #333333;
  padding: 4px 7px;
  border: 1px solid #777777;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
}
#footer {
width:100%;
background:#000;
text-align:center;
overflow:hidden;
color:#ffffff;
border-top:3px solid black;
font-size:0.8em;
}
#footer-inner {
width:980px;
overflow:hidden;
margin:0 auto;
padding:25px 0;
text-align:left;
}
#follow {
font-weight:bold;
text-transform:uppercase;
margin-bottom:10px;
}
#links {
font-weight:bold;
text-transform:uppercase;
margin-bottom:10px;
}
#footer a {
color:#d1be74;
text-decoration:none;
}
#footer a:hover {
color:#eee;
}