body, html  {
   margin: 0;
   padding: 0;
   height: 100%;
}

body {
   font-family: Helvetica, Arial, sans-serif;
   background: url("gui/body-bg.jpg") no-repeat right top fixed; 
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
   background-color: black;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('font_awesome/fontawesome-webfont.eot?v=4.6.3');
  src: url('font_awesome/fontawesome-webfont.eot?#iefix&v=4.6.3')
       format('embedded-opentype'), url('font_awesome/fontawesome-webfont.woff2?v=4.6.3')
       format('woff2'), url('font_awesome/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('font_awesome/fontawesome-webfont.ttf?v=4.6.3')
       format('truetype'), url('font_awesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular')
       format('svg');
  font-weight: normal;
  font-style: normal;
}

.purgatory { clear: both; }

a { text-decoration: none; }

#wrapper {
   position: fixed;
   top: 0px;
   left: 0px;
   bottom: 0px;
   width: 1000px;
   background-color: rgba(0, 0, 0, 0.6);
   background: url("gui/wood-bg.jpg") no-repeat left top fixed;
   box-shadow: 30px 0px 50px #000000;
}

#headder {
   position: fixed;
   top: 0px;
   left: 320px;
   width: 680px;
   background-color: black;
   border: solid 1px red;
}

#sysmenu {
   position: fixed;
   top: 0px;
   left: 320px;
   width: 680px;
   padding-top: 10px;
   text-align: right;
}

#sysmenu ul {
   margin: 0px;
   padding: 0px;
   list-style-type: none;
   float: right;
}

#sysmenu ul li {
   float: left;
}

#sysmenu ul li a {
   display: inline-block;
   padding: 10px 20px;
   border-bottom: solid 3px #ce99b7;
   color: #ce99b7;
   margin-left: 5px;
}

#sysmenu ul li a:hover, #sysmenu ul li a.active {
   background-color: #904870;
   color: white;
}

#daily {
   position: fixed;
   top: 80px;
   left: 380px;
   width: 350px;
   border: solid 2px #74da93;
   height: 100px;
   border-radius: 12px;
   background-color: rgba(116, 218, 147, 0.15);
}

#daily #timestamp, #daily #rightnow {
   display: inline-block;
   font-size: 1.2em;
   color: #74da93;
   padding: 10px 10px 0px 10px;
}

#cart {
   position: fixed;
   top: 80px;
   left: 760px;
   width: 220px;
   border: solid 2px #74da93;
   height: 100px;
   border-radius: 12px;
   background-color: rgba(116, 218, 147, 0.15);
}

#cart a, #daily a {
   position: absolute;
   bottom: 5px;
   right: 5px;
   color: black;
   background-color: #74da93;
   display: inline-block;
   padding: 10px 15px;
   border-radius: 8px;
   font-size: 10px;
   font-weight: bold;
}

#cart a:hover, #daily a:hover {
   color: white;
   background-color: #31a855;
}

#cart #ammount {
   padding: 10px;
   font-size: 2em;
   color: #74da93;
   text-align: right;
}

#cart #ammount span {
   font-size: 1.2em;
   font-weight: bold;
}

#cart_icon {
   color: #74da93;
   font-size: 2.5em;
   font-family: 'FontAwesome';
   position: absolute;
   bottom: 5px;
   left: 10px;
}

#logomenu {
   position: fixed;
   top: 15px;
   left: 0px;
   width: 310px;
   padding: 220px 0px 0px 0px;
   min-height: 500px;
   background-image: url("gui/logo.png");
   background-position: center top;
   background-repeat: no-repeat;
}

#logomenu ul {
   margin: 0px 25px 0px 25px;
   padding: 0px;
   list-style-type: none;
   border-top: solid 1px #ce99b7;
}

#logomenu ul li a {
   display: block;
   color: #ce99b7;
   padding: 10px 10px;
   border-bottom: solid 1px #ce99b7;
}

#logomenu ul li a:hover, #logomenu ul li a.active {
   color: white;
   background-color: #904870;
}

#title {
   position: fixed;
   top: 197px;
   left: 300px;
   width: 670px;
   color: white;
   text-align: right;
   border-bottom: dotted 1px white;
   font-size: 24px;
   font-style: italic;
   padding: 5px;
}

#content {
   position: fixed;
   top: 250px;
   bottom: 10px;
   left: 285px;
   width: 695px;
   color: white;
   text-align: justify;
   /* border: solid 1px red; */
}

/* ----------------------------------------------------------- SCROLLER */

.scrollWrap{
   overflow: hidden;
   height: 100%;
   position: relative;
   z-index: 1;
}

.scrollContent{
   height: 100%;
   width: 100%;
   padding: 0 15px 0 0;
   position: relative;
   right: -18px;
   overflow: auto;
   -moz-box-sizing : border-box;
   box-sizing: border-box;
}

.fakeScrollBar{
   position: absolute;
   background: rgba(116,218,147,.5);
   width: 9px;
   border-radius: 4px;
   right: -15px;
   top: 0;
   z-index: 0;
   cursor: -moz-grab;
   cursor: -webkit-grab;
}

.fakeScroll:hover .fakeScrollBar.fakescroll-grabbed{
   cursor: -moz-grabbing;
   cursor: -webkit-grabbing;
   background: #ce99b7;
}

body.fakescroll-grabbed{
   cursor: -moz-grabbing;
   cursor: -webkit-grabbing;
}

/* ----------------------------------------------------------- SCROLLER */