body { font-family: Arial,Helvetica,sans-serif;
          color: #000000;
	font-weight: normal;
	background-color: #ebebeb;
}

/* Positioning  */

.mobileOnly {display: none;}

.mainblock {
	clear: both;
	width: 100%;
        text-align: center;
        margin: 0px;
        padding: 0px;
}

.contentblock {
	width: 97%;
	margin: 15px 1.5% 15px 1.5%;
        padding: 0px;
	display: flex;
	align-items: start;
	justify-content: center;
}

.logo { position: absolute;
        top: 8px;
        left: 15px;
}               

.ad { position: absolute;
        right: 10px;
        top: 10px;
	max-width: 728px;
	max-height: 90px; 
}

.adOLD { position: absolute;
        right: 10px;
        top: 10px;
        border: outset 1px black;
}
.buttonleft { position: absolute;
        right: 10px;
        top: 10px;
}

.buttonright { position: absolute;
        right: 170px;
        top: 10px;
}

.sponsors { position: absolute;
        right: 10px;
        top: 72px;
        width: 310px;

}

/* Special rules for the navbar UL */

ul.navbar {
   break: both;
   border-top: solid 2px black;
   border-bottom: solid 2px black;
   padding-top: 5px;
   padding-bottom: 5px;
   margin: 0px;
}

ul.navbar li {
        display: inline;
        padding: 3px 10px 3px 10px;
 	font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: 100%;
        color: #000000;
        font-variant: small-caps;
}

ul.navbar li a {
	color: black;
}

ul.navbar li a:hover {
	color: white;
}

.button {
	float: right;
	font-size: 70%; 
	background-color: black;
	color: white;
	margin: 5px;
	padding: 3px;
	border: outset 2px #333333;
	text-transform: uppercase;
}
/* A cute little HR substitute */

.hr { clear: both;
      background-color: #000;
      height: 2px;
}

/* Boxes on the page */

.tabbedBoxContainer {}
.boxTabTitle { background-color: #BBBBFF;
          font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	  font-weight: bold;
	  margin-top: 8px;
	  color: black;
          padding: 3px; 
          text-align: left;}

.topTab {
	  float: right;
          padding: 3px 6px 3px 6px; 
	  font-weight: bold;
	  color: white;
          text-align: right; }

.topTab a:link { color: white;
		 text-decoration: underline; }
.topTab a:visited { color: white;
		 text-decoration: underline; }

.boxTab {
	  float: right;
	  font-weight: bold;
	  margin: 8px 0px 0px 0px;
	  background-color: #639;
	  color: white;
          padding: 2px 6px 2px 6px; 
          text-align: right; }

.boxTab a:link { color: white;
		 text-decoration: underline; }
.boxTab a:visited { color: white;
		 text-decoration: underline; }

.boxBlackLined { background-color: #DDDDFF;
      clear: left; 
      padding: 3px;
       border: solid 1px #000; }

.boxLined { background-color: #DDDDFF;
      clear: left; 
      padding: 3px;
      /* border: solid 2px #639; */ }

.boxUnlined { background-color: #BBBBFF;
       padding: 3px; }


.boxWide { width: 100%;
           border-spacing: 0px; }

.boxWideSplit { width: 100%;
           border-spacing: 2px; }

.padded { padding: 4px; }
.unpadded { padding: 0px; }

.boxHeader { background-color: #AAF; }

.boxSubHeader { background-color: #74A; }

.cellSubHeader { font-weight: bold;
		 font-style: italic;
	         color: white; }

/* Left & Right Boxes */

.wide {
	clear: both;
 	width: 100%;
}

.content {
    float: left;

    width: -moz-calc(100% - 320px);
    width: -webkit-calc(100% - 320px);
    width: calc(100% - 320px);

    margin-right: 320px;
    max-width: 1062px;
}

.content-full {
    padding: 0 1rem;
}

.contentthin {
    float: left;

    width: -moz-calc(100% - 370px);
    width: -webkit-calc(100% - 370px);
    width: calc(100% - 370px);

    margin-right: 370px;

}

.nav, .navtop {
    float: right;
    width: 300px;
    margin-left: -300px;
}

.navwide, .navwidetop {
    float: right;
    width: 350px;
    margin-left: -350px;
}

/* Actual Box Code */

/*.boxframe {
	margin-bottom: 10px;
	border-style: solid; 
	border-width: 2px;
}

.boxtitle { padding: 3px;
	    font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: .9rem;
        font-weight: bold;
        text-transform: uppercase;
	margin-block-start: 0;
	margin-block-end: 0;
}

.boxtitle h1 { 
	font-size: .9rem;
	padding: 0;
	border: 0;
	margin: 0;
}

.boxcontent {
	background-color: #ffffff;
	padding: 5px;
}*/

.boxframe {
    color: #141414;
    background: #fff !important;
    border-width: 1px;
    border-style: solid;
    border-top-color: #e0e0e0 !important;
    border-right-color: #d6d6d6 !important;
    border-bottom-color: #ccc !important;
    border-left-color: #d6d6d6 !important;
    border-radius: 4px;
    font: 13px / 1.4 sans-serif !important;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;

    margin-bottom:20px;
}

.boxtitle {
    padding: 6px 10px;
    font-weight: 400;
    text-decoration: none;
    font-size: 17px;
    color: #663399 !important;
    background: #ddddff;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(0deg, #ddf, #f7f7ff);

}

.boxtitle h1, .boxtitle h2 {
    font-size: .9rem;
    padding: 0;
    border: 0;
    margin: 0;
    display: inline-block;
    font-weight: 600 !important;
}

.boxtitle h2 a {
    font-size: .9rem;
    padding: 0;
    border: 0;
    margin: 0;
}

.boxcontent {

}
.boxcontent div {
	background-color: rgb(246, 246, 246) !important;
	border-bottom: 1px solid rgb(229, 229, 229) !important;
	font-size: 14px !important;
	padding: 6px !important;
}

.boxcontent h2 {
	font-size: 14px !important;
	font-weight: 400;
	margin: 0;
}

.boxcontent div div {
	border-style:none !important;
}
.siteheadtext {
	color: #639 !important;
}
.siteheadbox {
	margin:0px !important;
	display: block;
}

.siteheadbox a {
	color: #663399;
}

/* Special Site Code */

.sitehead { color: white;
          font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	  font-size: 82%;
	  margin: 8px 0px 0px 0px;
          font-weight: bold;
          background-color: #639;
	  padding: 3px;
     }

.siteheadbox {
	  margin: 8px 0px 0px 0px;
          background-color: #639;
	  padding: 3px;
     }

.siteheadlink {
	 color: white;
          font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
          font-weight: bold;
     }

.siteheadtext {
	 color: white;
          font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	  font-size: 82%;
          font-weight: bold;
     }

.siteheadlink a:link { color: #ffffff; text-decoration: underline; }
.siteheadlink a:visited { color: #ffffff; text-decoration: underline; }

.sitesubhead
 {  color: #000;
	  font-style: italic;
          font-weight: bold;
          font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	  font-size: 82%;
	  margin: 8px 0px 0px 0px;
	  padding: 0px;
     }

.trailing { margin-top: 5px; }
.extratrailing { margin-top: 15px; }

/* Regular CSS */

.buttonword { font: small-caps 9pt Arial,Helvetica,sans-serif;
              text-transform: none;
               color: #ffffff }

.linkword { font-family: Arial,Helvetica,sans-serif;
	      font-size: 80%;
              font-weight: bold;
              text-transform: none }

.headerword { font-family: Verdana,Arial,Helvetica,sans-serif;
              font-size: 95%;
              color: #ffffff;
              font-weight: bold;
              font-variant: small-caps; }

/* td p { margin-top: 0px; } */

.smallishwords { font-size: 82%; }

span.smallwords,p.smallwords,td.smallwords,li.smallwords,div.smallwords { font-size: 75% }

span.smallestwords,p.smallestwords,td.smallestwords,li.smallestwords,div.smallestwords { font-size: 60% }

span.medwords,p.medwords,td.medwords,li.medwords,div.medwords { font-size: 100% }

span.bigwords,p.bigwords,td.bigwords,li.bigwords,div.bigwords { font-size: 120%;
					font-weight: bold; }


body { margin: 0 0 0 0 }

a.headbottomword:link { color: #ffffff;
           font-weight: 800;
         text-decoration: none }

a.headbottomword:visited { color: #ffffff;
           font-weight: 800;
	text-decoration: none }

.headbottomword  { font-family: Verdana,Arial,Helvetica,sans-serif;
              font-size: 95%;
              color: #ffffff; }

a:link { color: #663399;
         font-weight: 800;


         text-decoration: none }

a:visited {color: #663399;
           font-weight: 800;
           text-decoration: none }
         
/* vBulletin Cruft *

/* LEFT / RIGHT DT+DD */



dl.stats.totals {

	float:right;

	padding:5px;

}



dl.stats dt {

	display:inline;

	color:#777777;

}

dl.stats dt:after {

	content:":";

}

dl.stats dd {

	display:inline;
	margin: 0px;
}



/* BLOCK STATS */

dl.statsblock dt {

	display:block;

	float:left;

	clear:left;

	width:25%;

}



dl.statsblock dd {

	display:block;

	float:left;

	margin-left:10px;

}

/* Auto-clearing of floats */

dl.stats:after {

	content:".";

	display:block;

	height:0;

	clear:both;

	visibility:hidden;

}

dl.stats {

	display:inline-block;

	font-weight:normal;

}

/* IE-Mac hide \*/

dl.stats {

	height:1%;

}

.floatcontainer,

.formcontrols .blockrow,

dl.stats {

	display:block;

}

/* End IE-Mac hide */

#charnav {

	border:solid 1px #cedfeb;

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	padding:7px;

	margin-bottom:1em;

	margin-left:auto;

	margin-right:auto;

	width:auto;

}



#charnav dt {

	font-size:13px;

	float:left;

	width:13%;

}



#charnav dd {

	float:left;

	width:3.2%;

}



#charnav dd a {

	font-size:11px;

	padding:2px 4px;

	border:solid 1px #cedfeb;

	-moz-border-radius:3px;

	-webkit-border-radius:3px;

	background-color:rgb(246,248,249);

	text-decoration:none;

	display:block;

	text-align:center;

	margin-left:2px;

}



#charnav dd a:hover {

	border-color:rgb(0, 0, 0);

	background:rgb(0, 0, 0);

	color:white;

}



#charnav dd.highlighted a {

	border-color:rgb(51, 51, 51);

}

/* DIV Table */


.tblock {
    margin: 0 0 -30px 0;
    text-align: center;
}

.tblock-right {
    margin: 0px 10px -30px 10px;
    float: right;
}

.ttable {
    margin: 0 0 40px 0;
    box-shadow: 0 1px 3px #663399;
    display: inline-block;
}
 
.trow {
    display: table-row;
    background: #f6f6f6;
}

.trow:nth-of-type(odd) {
    background: #e9e9e9;
}

.trow.header {
    background: #663399;
    font-weight: 900;
    color: white;
}

.trow.header.red {
    background: #ea6153;
}

.trow.header..green {
    background: #27ae60;
}

.trow.header.blue {
    background: #2980b9;
}


.tcell {
    padding: 6px 12px;
    display: table-cell;
}


.add-cover-table-container {
	padding: 10px;
	background-color: #DDDDFF;
	display: flex;
	justify-content: center;
}

.add-cover-table-container > div {
	background-color: #BBBBFF;
	text-align: center;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 36px;
	padding: 10px;
	align-items: center;
}

.add-cover-table-container a {
	border: 1px solid;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 6px;
	transition: color 300ms, background-color 300ms, border-color 300ms;
	transition-timing-function: ease-in;
}


.add-cover-table-container a:hover {
	background-color: #663399;
	color: #ffffff;
	border: 1px solid #663399;
}


div.recently-added-list {
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items:end;
	padding: 3px;
	border-bottom: none !important;
	background-color: white !important;
}

.recently-added-list>div {
	display:flex;
	flex-direction:column;
	gap:7px;
	overflow:hidden;
	width:25%;
	background-color: white !important;
}

.recently-added-list img{
	max-width:100%;
}

div.go-to-forum-btn-container {
    	display: flex;
    	align-items: center;
    	justify-content: center;
	background-color: white !important;
}

.go-to-forum-btn-container a {
	background-color: #663399 !important;
	font-weight: 700 !important;
	size: 16px;
	padding: 10px 24px !important;
	border-radius: 8px;
	color: white !important;
    	display: flex;
    	align-items: center;
    	gap: 8px;
}

.go-to-forum-btn-container>div {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media screen and (max-width: 850px) {
  .go-to-forum-btn-container>div {
	    flex-direction: column;
		gap:5px;
	}
}


/* RNET-381  */
body ul.navbar.top-navbar-header {
    display: flex;
    flex-wrap: wrap;
    border: none;
    padding-inline-start: unset;
}

body ul.navbar {
   background-color:  #663399;
padding-top: 0;
    padding-bottom: 0;
}

body ul.navbar li {
	padding-top: 8px;
	padding-bottom: 8px;
	display: inline-block;
}


body ul.navbar li a {
	color:  #ccccff;
	font-family: "Segoe UI", "Helvetica Neue", Helvetica, Roboto;
	font-size: 15px;
	font-variant-caps: normal;
	line-height: 21px;
    font-weight: normal;
}

body ul.navbar li:hover {
    background: #6b47a0;
}

body ul.navbar li:hover a {
	color:  #ccccff;
}

body ul.navbar li.active {
    background: #f5f5f5;
    color: #663399;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
body ul.navbar li.active a {
	color: #663399;
}


div.buy-on-btn-list-container {
    background-color: inherit !important;
    display: flex;
    flex-direction: column;
    padding: 10px 4px 16px !important;
    gap: 16px;
}

div.buy-on-btn-list {
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(272px,1fr));
	gap: 13px;
	overflow: hidden;
	background-color: inherit !important;
	justify-content: start;
}

.buy-on-btn-list a {
    max-width: 272px;
    height: 48px;
    border-radius: 8px;
    border: 1.5px solid #BBBBFF;
    box-shadow: 0 2px 4px #0000001F;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px !important;
    color: #663399;
    background: white;
}

div.buy-on-btn-list-desc {
    display: flex;
}

div.buy-on-btn-list-desc p {
    margin-block-start: unset;
    margin-block-end: unset;
    text-align: start;
    font-weight: 400;
}


.buy-on-btn-list a:hover {
	background-color:#BBBBFF;
	border-color: #663399;
}

.buy-on-btn-list a:active {
	background-color:#663399;
	color:#ffff;
}

div.game-details {
	display: flex;
    align-items: center;
    padding: 0px !important;
    flex-direction: row;
}

div.game-details > div {
    padding: 0px !important;
}

.game-details dl {
    display: grid;
    grid-template-columns: auto 1fr;
    background-color: white;
    margin-block: unset;
}

.game-details dt {
    grid-column: 1;
    border-bottom: 1px solid rgb(229, 229, 229);
}

.game-details dd {
    grid-column: 2;
    margin-inline-start: 0px;
    border-bottom: 1px solid rgb(229, 229, 229);
}

.right-top-navbar-header {
	list-style: none;
	margin-right: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: unset;
	display: flex;
	gap: .5em;
	flex-wrap: wrap;
}

.right-top-navbar-header li {
	position: relative;
	background-color: rgba(20, 20, 20, 0.15);
	display: flex;
}

.header-search-btn {
	appearance: none;
	color: #ccccff !important;
	background-color: inherit;
	padding: 8px 10px;
	border: none;
	font-size: 15px;
    	line-height: 21px;
	cursor: pointer;
	display: flex;
    	flex-direction: row;
    	align-items: center;
    	gap: 4px;
	font-weight: 400 !important;
}

.default-right-header-btn {
	padding: 8px 10px;
	border: none;
	font-size: 15px;
	line-height: 21px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	font-weight: 400 !important;
	color: #ccccff !important;
}

.avatar-btn-container {
	width: 21px;
	height: 21px;
	font-size: 13px;
	background-color: #ccccff;
	color: #663399;
}

.avatar-btn-container img {
	width: 100%;
}

.default-right-header-btn:hover {
	background-color: rgba(8,8,8,0.15);
}

.header-search-popup {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 100%;
	left: 100%;
	padding-left: 8px;
	padding-right: 8px;
	transform: translateX(-100%);
	background-color: #ebebeb;
	border: 1px solid #16a34a;
	z-index: 10;
	height: 110px;
	border-radius: 5px;
	white-space: nowrap;
}

.hidden {
	display: none !important;
}

.header-search-popup > div {
	margin-bottom: unset;
}

.header-logo-mainblock {
	min-height: 110px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap:10px;
}

.header-logo-mainblock .logo {
    position: unset;
	margin: 4px;
}

.header-logo-mainblock .ad {
    position: unset;
    width: 100%;
    margin: 10px;
}

.header-logo-mainblock .ad img {
	width: 100%;
    height: auto;
}

.header-container {
    width: 100%;
    background-color: #663399;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-container > div {
	max-width: 1400px;
	padding: 0 14px;
	padding-inline-end: unset;
    	padding-inline-start: unset;
}

.mobile-ads {
	background-color: #663399;
	height: 55px;
	padding: 10px;
	display: none;
}

.mobile-ads img {
	width: 100%;
	height: auto;
}

.mobile-header-container {
  position: sticky !important;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #663399;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: #ccccff;
  min-height: 45px;
  height: 45px;
}

.mobile-header-container * {
  color: #ccccff !important;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Roboto;
  font-size: 15px;
  font-weight: 400 !important;
}

.mobile-header-container a {
  padding: 0px 8px;
  display: flex;
  align-items: center;
  height: 100%;
}

.mobile-header-left-container,
.mobile-header-right-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mobile-header-left-container {
  margin-left: 8px;
}

.mobile-header-right-container {
  margin-right: 8px;
}

.mobile-header-menu-btn {
  height: 100%;
  margin-right: 5px;
  padding: 0px 8px;
  background: inherit;
  border-style: none;
}

.mobile-header-logo {
  width: auto;
  height: auto;
  max-height: 37px;
}

.mobile-side-menu-container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: row;
  align-items: start;
  background: rgba(0, 0, 0, 0.25);
  z-index: 100;
}

.mobile-side-menu {
  width: 0px;
  max-width: 85%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #663399;
  transition: all .5s ease-in-out;
  overflow-x: hidden;
}

.mobile-side-menu > a {
  padding: 10px;
  color: #ccccff !important;
  font-size: 17px;
  font-weight: 400 !important;
  line-height: 1.4;
  border-bottom: 1px solid rgba(20, 20, 20, 0.25);
  white-space: nowrap;
}

.mobile-side-menu-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #ccccff !important;
  font-size: 20px;
  font-weight: 400 !important;
  line-height: 1.4;
  border-bottom: 1px solid rgba(20, 20, 20, 0.25);
  background-color: rgba(20, 20, 20, 0.15);
}

.mobile-side-menu-header > * {
  padding: 10px;
}

.mobile-side-menu-close-btn {
  background-color: transparent;
  border: none;
  aspect-ratio: 1/1;
  height: 100%;
}