* {
  box-sizing: border-box;
  /* Cursors for the site */
  cursor: url('sbocursor.png'), auto;
}

h1{color:lime;
}
h2{color:lime;
}

/* Scrollbar settings */
/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background-image: url("sboscrollbar_bg.png"); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background-image: url("sboscrollbar_handle.png");
  box-shadow: 2px 2px 2px 0 black;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-image: url("sboscrollbar_handle.png");
  box-shadow: inset 0 0 4px white;
}

/* End of scrollbar settings */

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color:black;
  background-image: url('666solmetal.png');
  background-position: left top ;
  background-repeat: repeat;
  width: 1000px;
  margin-left:auto;
  margin-right:auto;
  /*margin-top: 60px;*/
  box-shadow: 5px 5px 15px 5px black;
  cursor: url('sbocursor.png'), auto;
}

/* Style the header */
header {
  /*background-color: #666;*/
  background-image: url('SBO_by_Chonchon.jpg');
  background-position: center 52%;
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 18px;
  text-align: center;
  font-size: 14px;
  color: white;
  text-shadow: 2px 3px 2px black;
  width: 1000px;
  Height: 150px;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 150px;
  min-height: 700px;
  /*height: 300px;  only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
  color: white;
  background-image: url('666murtuyaux.png');
  background-repeat: repeat-y;
  background-size: 150px 150px;
  box-shadow: inset 3px 3px 10px black;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  height: 700px;
  overflow-y: scroll;
  background-color: #f1f1f1;
  background-image: url('666murcomp.png');
  background-position: left top ;
  background-repeat: repeat;
  box-shadow: inset 3px 3px 20px 6px black;
  color: white;
  /*height: 300px;  only for demonstration, should be removed */
}

aside {
  float: left;
  width: 150px;
  min-height: 700px;
  background: #ccc;
  padding: 20px;
  background-image: url('666murtuyaux.png');
  background-repeat: repeat-y;
  background-size: 150px 150px;
  box-shadow: inset 3px 3px 10px black;
}

/* Slideshow in the aside */

.slideshow--5-for-6 {
  position: absolute;
  z-index: 1;
  bottom: 0px;
  left: 0px;
}

.slideshow--5-for-6 img {
  color: transparent;
  opacity: 0;
  z-index: 0;
  animation: slideshow__fade--5-for-6 30s linear infinite 0s;
  backface-visibility: hidden; 
  width: 150px;
}

.slideshow--5-for-6 img:not(:first-child) {
  position: absolute;
  bottom: 0px;
  left: 0px;
  
}

.slideshow--5-for-6 img:nth-child(1) {
  animation-delay: 0s;
}

.slideshow--5-for-6 img:nth-child(2) {
  animation-delay: 6s;
}

.slideshow--5-for-6 img:nth-child(3) {
  animation-delay: 12s;
}

.slideshow--5-for-6 img:nth-child(4) {
  animation-delay: 18s;
}

.slideshow--5-for-6 img:nth-child(5) {
  animation-delay: 24s;
}

@keyframes slideshow__fade--5-for-6 {  
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  12.00% {
   opacity: 1;
   animation-timing-function: ease-out;
  }
  20.00% {
    opacity: 1;
  }
  28.00% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* End of slideshow style */


/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
  height: 128px;
  background-image: url('666murtech4.png');
  background-repeat: repeat-x;
  background-position: left top ;
}

 #countdown {
      font-size: 16px;
      text-align:center;
     color:white;
     font-family:Helvetica
    }

/* Styles for the hyperlink text on the site */
a:link {
  color: lime;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: lime;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
  cursor: url(anicursor/sbocursor_1.png), pointer;
  -webkit-animation: cursor 400ms infinite;
  animation: cursor 400ms infinite;
}

a:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
/* Animation for the pointer */
@-webkit-keyframes cursor {
  0% {cursor: url(anicursor/sbocursor_1.png), auto;}
  33% {cursor: url(anicursor/sbocursor_2.png), auto;}
  66% {cursor: url(anicursor/sbocursor_3.png), auto;}
  100% {cursor: url(anicursor/sbocursor_4.png), auto;}
} 

@keyframes cursor {
  0% {cursor: url(anicursor/sbocursor_1.png), auto;}
  33% {cursor: url(anicursor/sbocursor_2.png), auto;}
  66% {cursor: url(anicursor/sbocursor_3.png), auto;}
  100% {cursor: url(anicursor/sbocursor_4.png), auto;}
}

/* Scrolling text on the bottom */
.FooterMarquee {
font-family:'Arial Black', sans-serif;
color: lime;
padding: 8px;
text-shadow: 1px 1px 2px white;
}

/* Style for buttons on the nav */
.button{
  transition-duration: 0.4s;
  width: 112px;
  height: 50px;
  background-origin: border-box;
   image-rendering: crisp-edges;
  border: none;
  box-shadow: 2px 5px 2px 0px black;
  -webkit-backface-visibility: hidden; /* Apparently meant to fix the white flashing? */
	-webkit-transform: scale(1);
	cursor: url(anicursor/sbocursor_1.png), pointer;
  -webkit-animation: cursor 400ms infinite;
  animation: cursor 400ms infinite;
}

/* Style for buttons on the aside */
.buttonaside{
  transition-duration: 0s;
  width: 108px;
  height: 43px;
  background-origin: padding-box;
  image-rendering: crisp-edges;
  border: none;
  -webkit-backface-visibility: hidden; /* Apparently meant to fix the white flashing? */
	-webkit-transform: scale(1);
	cursor: url(anicursor/sbocursor_1.png), pointer;
  -webkit-animation: cursor 400ms infinite;
  animation: cursor 400ms infinite;
}

.button1{
 background-image: url('buttons/button_news.png');
 background-size: contain;
}

.button1:hover{
 background-image: url('buttons/button_news_sel.png');
 background-size: contain;
}
.button2{
 background-image: url('buttons/button_servers.png');
 background-size: contain;
}
.button2:hover{
 background-image: url('buttons/button_servers_sel.png');
 background-size: contain;
}
.button3{
 background-image: url('buttons/button_screen.png');
 background-size: contain;
}
.button3:hover{
 background-image: url('buttons/button_screen_sel.png');
 background-size: contain;
}
.button4{
 background-image: url('buttons/button_media.png');
 background-size: contain;
}
.button4:hover{
 background-image: url('buttons/button_media_sel.png');
 background-size: contain;
}
.button5{
 background-image: url('buttons/button_list.png');
 background-size: contain;
}
.button5:hover{
 background-image: url('buttons/button_list.png');
 background-size: contain;
 cursor: no-drop;
}
.button6{
 background-image: url('buttons/button_modding.png');
 background-size: contain;
}
.button6:hover{
 background-image: url('buttons/button_modding.png');
 background-size: contain;
 cursor: no-drop;
}

.buttonaside1{
  background-image: url('sbosteam.png');
  background-size: contain;
}
.buttonaside1:hover{
  background-image: url('sbosteamalt.png');
  background-size: contain;
}
.buttonaside2{
  background-image: url('sbositebutton2.png');
  background-size: contain;
}
.buttonaside2:hover{
  background-image: url('sbositebutton2alt.png');
  background-size: contain;
}
.buttonaside3{
  background-image: url('sbositebutton3.png');
  background-size: contain;
}
.buttonaside3:hover{
  background-image: url('sbositebutton3alt.png');
  background-size: contain;
}
.buttonaside4{
  background-image: url('sbositebutton4.png');
  background-size: contain;
}
.buttonaside4:hover{
  background-image: url('sbositebutton4alt.png');
  background-size: contain;
}
.buttonaside5{
  background-image: url('sbositebutton5.png');
  background-size: contain;
}
.buttonaside5:hover{
  background-image: url('sbositebutton5alt.png');
  background-size: contain;
}
.buttonaside6{
  background-image: url('sbositebuttonsdstr.png');
  background-size: contain;
}
.buttonaside6:hover{
  background-image: url('sbositebuttonsdstr_alt.png');
  background-size: contain;
}
.buttonaside7{
  background-image: url('sbositebuttonsdmrc.png');
  background-size: contain;
}
.buttonaside7:hover{
  background-image: url('sbositebuttonsdmrc_alt.png');
  background-size: contain;
}