body
{
 background-color: #111e28;
}

#container
{
 background-color: black;
 width: 1024px;
 height: auto;
 margin-left: auto;
 margin-right: auto;
}

#logo
{
 background-image: url(img/Tlostrony2.jpg);
 width: 1024px;
 height: 276px;
 margin-left: auto;
 margin-right: auto;
}

#menuL
{
 background-color: lightslategray;
 float: left;
 width: 670px;
 padding: 10px;
}
#menuR
{
 background-color: lightslategray;
 float: left;
 width: 314px;
 padding: 10px;
}
.optionL
{
 float: left;
 font-family: 'Abhaya Libre', serif;
 text-align: center;
 font-size: 25px;
 height: 25px;
 min-width: 100px;
 padding: 10px;
}
.optionL:hover
{
 background-color: #a3aeba;
 cursor: pointer;
}
.optionR
{
 float: right;
 text-align: center;
 font-size: 25px;
 min-width: 50px;
 height: 25px;
 padding: 10px;
}
.optionR:hover
{
 background-color: #a3aeba;
 cursor: pointer;
}
a.linkmenu
{
 color: white;
 text-decoration: none;
}

#top
{
 background-color: #111e28;
 padding: 15px;  
}

#topbar
{
 color: white;
 padding: 25px;
 font-size: 25px;
 text-align: center;
 letter-spacing: 2px;
 font-family: 'Tapestry', cursive;
}

#con2
{
 background-color: #111e28;
 padding: 15px;  
}

#con3
{
 background-color: #000000;
 padding: 15px;  
}

#content
{
 background-image: url(img/ShelfFantasy1024.png);
 width: 1024px;
 height: 764px;
 margin-left: auto;
 margin-right: auto;
}

#content2
{
 background-image: url(img/ShelfInne1024.png);
 width: 1024px;
 height: 664px;
 margin-left: auto;
 margin-right: auto;
}

.title
{
 color: white;
 font-family: 'Tapestry', cursive;
 padding: 40px;
 font-size: 40px;
 text-align: center;
 letter-spacing: 2px;
}
a.titlelink
{
 color: white;
 text-decoration: none;
}
@-webkit-keyframes buzz-out-on-hover
{
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes buzz-out-on-hover
{
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.buzz-out-on-hover
{
  display: inline-block;
  height: 50px;
  width: 220px;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  border: 2px solid #778899;
}
.buzz-out-on-hover:hover, .buzz-out-on-hover:focus, .buzz-out-on-hover:active
{
  -webkit-animation-name: buzz-out-on-hover;
  animation-name: buzz-out-on-hover;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.cover
{
 display: inline-block;
 width: 500px;
 text-align: center;
 padding: 4px;
}
.cover p
{
 padding: 4px;
 margin-top: 10px;
}
.cover1
{
margin: 10px;
width: 254px;
height: 359px;
float: right;
overflow: hidden;
}
.cover1 img
{
 transition: a11 0.7s ease-in-out;
}
.cover1:hover img
{
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}
.cover2
{
 margin: 10px;
 width: 254px;
 height: 359px;
 float: left;
 overflow: hidden;
}
.cover2 img
{
 transition: a11 0.7s ease-in-out;
}
.cover2:hover img
{
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}

#con1
{
 background-color: #111e28;
 padding: 15px;  
}

#footerL
{
 float: left;   
 color: white;
 font-family: 'Merriweather', serif;
 text-align: center;
 width: 844px;
 padding: 20px;
}

#footerR
{
 float: right;
 text-align: center;
 width: 100px;
 padding: 20px;
}