*{
      padding: 0;
      margin: 0;
      font: bold 12px/15px Arial, Helvetica, sans-serif;
      color: #bbb;
    }
    
    body{
      background: #20425e url(./src/background.jpg) repeat-x top left;
      margin: 0;
      font: bold 12px/15px Arial, Helvetica, sans-serif;
      color: #bbb;
      visibility: visible;
    }
    
    main{
      background: url(./src/bg_repeat.gif) repeat-y bottom right;
      min-height: 100vh;
      width: 978px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    
    #header{
      background: #2e3032 url(./src/bg1.jpg) repeat-x;
        background-position-x: 0%;
        background-position-y: 0%;
      background-position: bottom right;
      float: left;
      width: 902px;
      margin: 0 12px 0px 0;
      
    }
    
    .top{
      height: 87px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #7e8083;
    }
    
    #header h1{
      font-size: 32pt;
      font-weight: 500;
      height: 82px;
      min-width: 190px;
      display: block;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 10px;
    }
    
    .sign-in{
      height: 100%;
    }
    
    .sign-in p{
      color: #999;
      padding: 5px;
    }
    
    .sign-in button{
      color: black;
      font-size: 9pt;
      font-weight: bold;
      margin-left: 5px;
      padding: 2px;
      border-radius: 1px;
      border: none;
    }
    
    nav{
      height: 33px;
      border-bottom: 1px solid #7e8083;
      margin: 0;
      display: flex;
      align-items: center;
      padding-left: 10px;
    }
    
    .nav-item{
      border-right: 1px solid grey;
      text-decoration: none;
      display: flex;
      padding-left: 10px;
      width: 105px;
      height: 26px;
      font-size: 10pt;
      font-weight: bold;
      align-items: center;
      color: #eee;
      font-weight: bold;
    }
    
    .nav-item:hover{
      background-color: #1b5973;
      border-right: 1px solid #6fb7d5;
    }
    
    .players-online{
      background-color: #292929;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid grey;
      float: left;
      width: 902px;
      margin: 0 12px 0px 0;
    }
    
    .players-online p{
      color: darkgray;
      font-weight: 100;
      font-size: 9pt;
      padding: 3px;
    }
    
    .content-container{
      max-height: 255px;
      border-bottom: .5px solid grey;
    }
    
    .content-container, #main-content{
      display: flex;
      justify-content: space-between;
      width: 902px;
      margin: 0 12px 0px 0;
    }
    
    #content-left{
      width: 591px;
    }
    
    .top-stories{
      background: linear-gradient(0deg,rgba(19, 53, 66, 1) 0%, rgba(34, 99, 125, 1) 75%);
      height: 255px;
    }
    
    .top-stories-header{
      display: flex;
      align-items: center;
      height: 40px;
      background: url("./src/topheader.jpg")
    }
    
    .top-stories-header > h2{
      font: 18px Helvetica, Arial, sans-serif;
      color: #eee;
      text-transform: uppercase;
      margin-left: 15px;
    }
    
    
    #img-container{
      width: 100%;
      max-width: 400px;
      height: 215px;
      position: relative;
    }
    
    #img-container >img{
      width: 400px;
      height: 215px;
    }
    
    #top-stories-content{
      display: flex;
    }
    
    .story-transparency {
      height: 60px;
      max-height: 60px;
      width: 100%;
      background: rgba(0,0,0,0.7);
      margin: 0;
      position: absolute;
      bottom: 0px;
    }
    
    #story-title{
         color: #105B85;
         font-size: 14pt;
         padding: 10px 0 0 10px;
         font-weight: 800;
    }
    
    #story-text{
         font-weight: normal;
         color: #eee;
         padding: 5px 10px 5px 10px;
    }
    
    #story-links{
      list-style: none;
      width: 191px;
      height: 215px;
      margin: 0;
      background: url("./src/bluebackground1.jpg");
    }
    
    .story-link{
      padding: 2px 0 0 6px;
    }
    
    .story-link > a{
      display: block;
      background: url("./src/box-nav.gif");
      background-repeat: no-repeat;
      width: 170px;
      height: 31px;
      padding: 2px 5px 0 5px;
      color: #eee;
      font-weight: normal;
      text-decoration: none;
    }
    
    .story-link > a:hover{
      background-position: bottom;
    }
    
    .story-link-last{
         display: block;
         width: 190px;
         padding: 10px 0 0 0px;
         float: right;
         text-align: center;
         height: 30px;
    }
    
    .story-link-last > a{
         color: #71caef;
         text-decoration: none;
         font-weight: normal;
         font: 12px Helvetica, Arial, sans-serif;
    }
    
    .story-link-last > a:hover{
         color: #eee;
         text-decoration: underline;
    }
    
    /* Main Content */
    #main-content h2{
      background: url("./src/bg_h2.gif");
      height: 40px;
      height: 28px;
      padding: 12px 0 0 15px;
      text-transform: uppercase;
      font: 18px Helvetica, Arial, sans-serif;
      color: #eee;
    }
    
    #main-content img{
      width: 100%;
    }
    
    .panel{
      background: #111;
    }
    
    .panel-content{
      padding: 5px;
    }
    
    .panel-content a{
      color: #71caef;
    }
    
    .panel-content a:hover{
      cursor: pointer;
      text-decoration: underline;
    }
    
    .column:nth-child(1){
         width: 400px;
    }
    
    .column:nth-child(2){
        width: 185px;
    }
    
    .column:nth-child(3){
         width: 310px;
    }
    
    #guestbook{
      background-color: #111;
    }
    
    #guestbook-container{
      display: none;
      position: absolute;
      width: 100%;
      height: 100vh;
      z-index: 4;
      background-color: rgba(0,0,0,.7);
      top: 0;
      left: 0;
    }
    
    #guestbooks___guestbook-form-container{
      position: absolute;
      background-color: #111;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    #leave-comment{
      color: #71caef; 
      text-decoration: none; 
      font-weight: normal; 
      font: 12px Helvetica, Arial, sans-serif;
      margin: 10px 0 0 15px;
    }
    
    #leave-comment:hover{
      text-decoration: underline;
      cursor: pointer;
    }
    
    #close{
      cursor: pointer; 
      float: right;
    }
    
    #guestbooks___guestbook-messages-container{
      margin: 10px 10px 15px 15px;
    }
    
    .guestbooks__entry{
      margin: 10px 0;
    }
    
    .guestbooks__entry::before{
      content: url(src/community.gif);
      margin-right: 10px; 
      position: absolute;
    }
    
    .guestbooks__entry p{
      margin-left: 35px;
    }
    
    .guestbooks__entry p:nth-child(1){
      color: #71caef;
      font-size: 12px;
    }
    
    footer{
      margin: 0 auto;
      width: 978px;
    }
    
    .footer-content{
      width: 904px;
      height: 70px;
      float: left;
      background: black;
      margin: 0 0 0 14px;
      padding: 0px 29px 0 5px;
    }
    
    /* GAMES PAGE  */
    
    #games{
    }
    
    .game-container{
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      width: 902px;
      max-width: 902px !important;
      margin: 10px 12px 0px 0;
      background: #111;
      padding: 10px 20px;
      border-top: #6fb7d5 2px solid;
      border-bottom: #6fb7d5 2px solid;
    }
    
    #games > div:nth-child(5){
      margin: 10px 12px 10px 0;
    }
    
    .game-container img{
      height: 250px;
      margin-right: 10px;
      cursor: pointer;
      transition: .5s ease-in-out;
    }
    
    .game-container img:hover{
      scale: 1.05;
    }
    
    .game-info h1{
      font-size: 4em;
      line-height: 1em;
      color: #71caef;
    }