/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    
a {color:#fef334c; text-decoration:none;}

html {
    overflow-x: hidden;
}

body {
      background-color: black;
  font-family: Verdana;
  overflow-x: hidden;
  font-size:10pt;
  text-align:justify;
  color:#d0d0d0;
}

#wrap {
width: 100%;
height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url(header.png);
  background-repeat:no-repeat;
}


#bigbox {
    background-color: transparent;
    padding-top: 370px; 
    padding-left: 50px; 
    margin-left: 110%; /* Start position: right outside */
    -webkit-transition: margin-left 1s;
    -moz-transition: margin-left 1s;
    -o-transition: margin-left 1s;
    transition: margin-left 1s;
}

#bigbox2 {
    background-color: transparent;
        padding-top: 370px; 
    padding-left: 50px; 
    -webkit-transition: margin-left 1s;
    -moz-transition: margin-left 1s;
    -o-transition: margin-left 1s;
    transition: margin-left 1s;
    width:750px;
}

#bigbox.men_inside {
    margin-left: 0;
}
#bigbox.elves_inside {
    margin-left: -100%;
}
#bigbox.dwarves_inside {
    margin-left: -200%;
}
#bigbox.halflings_inside {
    margin-left: -300%;
}
#bigbox.norn_inside {
    margin-left: -400%;
}
#bigbox.other_inside {
    margin-left: -500%;
}
#bigbox.transition { /* Effects only */
    -webkit-transition: margin-left 1s;
    -moz-transition: margin-left 1s;
    -o-transition: margin-left 1s;
    transition: margin-left 1s;
}

.content {
    position: absolute;
    margin-right: 20px;
}
#men_content {
    margin-left: 0px; /* inside the #bigbox */ 
}
#elves_content {
    margin-left: 100%; /* "relative" position to #light_content */
}
#dwarves_content {
    margin-left: 200%; /* another "relative" position to #light_content */
}
#halflings_content {
    margin-left: 300%; /* another "relative" position to #light_content */
}
#norn_content {
    margin-left: 400%; /* another "relative" position to #light_content */
}
#other_content {
    margin-left: 500%; /* another "relative" position to #light_content */
}


#linx {
position: relative;
top: 250px;
right: 50px;
float: right;
font-family: 'Cinzel', serif;
}
#tites {
font-family: 'Open Sans Condensed', sans-serif;
font-size:38px;
text-align:right;
}

.links {
font-family: 'Cinzel', serif;
    color: #ffffff;
    font-size: 20px;
    line-height: 20px;
text-shadow: #6898a2 1px 1px 1px;
text-decoration: none;
  padding-bottom: 2px;
}
.links:hover {
  color:#c00000;
}


.links2 {
font-family: 'Cinzel', serif;
    color: #6898a2;
    font-size: 20px;
    line-height: 20px;
text-shadow: #6898a2 1px 1px 1px;
text-decoration: none;
  padding-bottom: 2px;
}
.links2:hover {
  color:#c00000;
}



.cat {
font-family: 'Cinzel Decorative', serif;
    color: #ffffff;
    font-size: 28px;
    line-height: 20px;
text-shadow: #780411 1px 1px 1px;
font-variant:small-caps;
}



a.tooltip {outline:none; } 
a.tooltip strong {line-height:30px;} 
a.tooltip:hover {text-decoration:none;} 
a.tooltip span { z-index:10;display:none; padding:10px 10px; margin-top:-20px; margin-left:10px; width:240px; line-height:14px; font-size:12px; text-align: justify; font-family: open sans; letter-spacing:0px;} 
a.tooltip:hover span{ display:inline; position:absolute; color:#111; border:1px solid #D1D1D1; background:#EFEFEF; opacity:0.9; font-family: open sans; letter-spacing:0px;} 
a.tooltip span { border-radius:4px; box-shadow: 0px 0px 1px #000000; } 

::-webkit-scrollbar{
  width:5px;} 

::-webkit-scrollbar-thumb{
   background-color: transparent;} 

#image {
width:80px;
padding:6px;
height:auto;
background-color:#eee;
border-top-left-radius:10px;
border-top-right-radius:10px;
border:1px solid #000000;
background: url('http://i.imgur.com/PVo4suH.png');}

#image img {
width:80px;
height:80px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border:1px solid #000000;}


a {text-decoration: none;}




img.entry {
    opacity: 0.80;
    filter: alpha(opacity=80); /* For IE8 and earlier */
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
background-color:#4c443c;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
 -webkit-box-shadow: 2px 2px 1px #7C7C7C;
    box-shadow: 2px 2px 1px #7C7C7C;
}


img.entry:hover {
    opacity: 1.0;
filter:alpha(opacity=40); 
-webkit-transition-duration: 1s;
  -webkit-filter: grayscale(0%);
}

    
    
    
    .wrapper {
  background-color: white;
}
    
  .creator:hover {
      background-color: #c00000;
    }
    
    
    
.creator {
  font-family: News Cycle; 
  color: #000000; 
  font-size: 20px; 
  line-height: 22px;
  font-weight: lighter; 
  text-transform:uppercase; 
  letter-spacing: 0.5px; 
  text-shadow: 1px 0px 1px #808080; 
  text-align: justify; 
  padding-bottom: 3; 
  border-radius:4px; 
  border:2px solid #000000;
  visibility: visible; 
  width:155px;
}
   
.fadedScroller {
    position: relative;
    
    height:500px;
    width:780px;
    overflow:auto;
    text-align:justify
    ;margin:5px;
}

.fadedScroller_fade {
    content:'';
    margin-top: -505px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    position: relative;
}
    
    ul li {
    padding-left: 15px; 
          padding-right: 40px;
    }