body {
    font: 12px/20px 'CopseRegular', CopseRegular, Helvetica, Arial, sans-serif;
    background-color: #334466;
    background: #000 url('https://img.hexrpg.com/images/background.png') no-repeat;
    background-size: 100% auto;
    color:#ffffff;
    font-family: verdana, arial, sans-serif;
    text-align: left;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}

/*
font-family: 'lato';
font-size: 13px;
*/
a:link
{
    color: #A7B9BF;
    text-decoration: none;
}
a:visited
{
    color: #A7B9BF;
    text-decoration: none;
}
a:hover
{
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: none;
}

/*
td
{
font-family: 'latolight';
font-size: 13px;
}
.forumborder {

font-family: 'latolight';
font-size: 13px;
}
*/


/*
.forumborder {
width: 100%;
border: 8px solid #15191a;
background-color: #15191a;
margin-top: 15px;
margin-bottom: 25px;
padding: 8px;
font-family: 'lato';
font-size: 13px;
}

.headertr {
background-color: #000000;
margin-top: 15px;
margin-bottom: 25px;
font-family: 'lato';
font-size: 16px;
padding: 5px;
}


.forumborder {
border: 1px solid #14282d;
background-color: #101516;
margin-top: 15px;
margin-bottom: 25px;
padding: 8px;
font-family: 'lato';
font-size: 12px;
}

.headertr {
background-color: #14282d;
margin-top: 15px;
margin-bottom: 25px;
font-family: 'lato';
font-size: 16px;
padding: 15px;
}
*/


.mainTable, .mainContainer {
    border: 1px solid #14282d;
    margin-bottom: 25px;
    font-family: 'lato';
    font-size: 14px;
    margin-top: 15px;
    background-color: #101516;
}

.mainContainer img {
    margin-left: 1rem;
    margin-right: 1rem;
    width:40px;
}

.mainContainer {
    background-color: #000000;
    padding:1rem 1.2rem;
}

.gridContent {
    box-sizing: border-box; /* add this */
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Older Webkit browsers */
    display:block; /* imitates shrink wrapping */

}

.mainTable td {
    padding: 10px;
    box-sizing: content-box;
}

.mainTable2 {
    border-radius: 5px;
    background-color: #16121d;
    margin-top: 15px;
    margin-bottom: 25px;
    font-family: 'lato';
    font-size: 12px;
}

.mainTable2 td {
    padding: 10px 6px 6px 12px;
}


.headerTR {
    background-color: #14282d;
    margin-top: 15px;
    margin-bottom: 25px;
    font-family: 'lato';
    font-size: 16px;
    padding: 15px;
}

.headerTRO {
    font-family: 'hopfer_hornbookregular';
    font-size: 20px;
    color: #b46a38;
    margin-bottom: 10px !important;
}

.headerTRO2 {
    font-family: 'hopfer_hornbookregular';
    font-size: 20px;
    color: #1ba3a5;
    margin-bottom: 10px !important;
}

.mainTR {
    padding: 10px 6px 6px 12px;
}


.mainBox {
    background-color: #15191a;
    padding: 8px;
    width: auto;
    float:left;
}

.mainInput {

    background-color: #272d2f !important;
    font-family: 'lato';
    font-size: 14px;
    color: #fff !important;
    border: none;
    padding: 2px;
    border-radius: 4px;
}

select.mainInput {
    padding: 4px;
}

.mainInput.paddedInput {
    padding:4px !important;
}

.mainInput2 {

    background-color: #376069 !important;
    font-family: 'lato';
    font-size: 14px;
    color: #fff!important;
    border: none;
    padding: 2px;

}

.mainInput3 {

    background-color: #fff !important;
    font-family: 'lato';
    font-size: 14px;
    color: #272d2f !important;
    border: none;
    padding: 2px;

}


/*
.mainButton {
    background-color: #385352;
    font-family: 'Midiet_Serif_Italic_Light';
    font-size: 15px;
    color: #fff;
    border: none;
    padding: 5px;
    margin-left: -4px;
}
*/

.mainButton {
    background-color: #385352;
    margin-left: -4px;
    color: #78b2b0;
    font-size: 15px;
    border: none;
    padding: 3px;
    min-width: 100px;
    font-family: 'hopfer_hornbookregular';
    text-transform: uppercase;
    cursor: pointer;
}

.mainButton2 {
    border-radius: 5px;
    background-color: #376069;
    margin-left: -4px;
    color: #92aeab;
    font-size: 15px;
    border: none;
    padding: 3px;
    min-width: 100px;
    font-family: 'hopfer_hornbookregular';
    text-transform: uppercase;
    cursor: pointer;
}

.mainButton3 {
    background-color: #385352;
    margin-left: -4px;
    color: #78b2b0;
    font-size: 15px;
    border: none;
    font-family: 'hopfer_hornbookregular';
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    top:1px;
    padding: 2px 8px !important;
}

a.mainButton3 {
    padding: 2.5px 8px;
}



/* Webfonts */
@font-face {
    font-family: 'CopseRegular';
    src: url('/css/fonts/Copse-Regular-webfont.eot');
    src: url('/css/fonts/Copse-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/css/fonts/Copse-Regular-webfont.woff') format('woff'),
    url('/css/fonts/Copse-Regular-webfont.ttf') format('truetype'),
    url('/css/fonts/Copse-Regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'hopfer_hornbookregular';
    src: url('/css/fonts/hopferhornbook-webfont.eot');
    src: url('/css/fonts/hopferhornbook-webfont.eot?#iefix') format('embedded-opentype'),
    url('/css/fonts/hopferhornbook-webfont.woff') format('woff'),
    url('/css/fonts/hopferhornbook-webfont.ttf') format('truetype'),
    url('/css/fonts/hopferhornbook-webfont.svg#hopfer_hornbookregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Midiet_Serif_Italic_Light';
    src: url('/css/fonts/Midiet_Serif_Italic_Light.eot');
    src: url('/css/fonts/Midiet_Serif_Italic_Light.eot?#iefix') format('embedded-opentype'),
    url('/css/fonts/Midiet_Serif_Italic_Light.woff') format('woff'),
    url('/css/fonts/Midiet_Serif_Italic_Light.ttf') format('truetype'),
    url('/css/fonts/Midiet_Serif_Italic_Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Midiet_Serif_Italic_Medium';
    src: url('/css/fonts/Midiet_Serif_Italic_Medium.eot');
    src: url('/css/fonts/Midiet_Serif_Italic_Medium.eot?#iefix') format('embedded-opentype'),
    url('/css/fonts/Midiet_Serif_Italic_Medium.woff') format('woff'),
    url('/css/fonts/Midiet_Serif_Italic_Medium.ttf') format('truetype'),
    url('/css/fonts/Midiet_Serif_Italic_Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lato';
    src: url('/css/fonts/Lato-Reg-webfont.eot');
    src: url('/css/fonts/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
    url('/css/fonts/Lato-Reg-webfont.woff') format('woff'),
    url('/css/fonts/Lato-Reg-webfont.ttf') format('truetype'),
    url('/css/fonts/Lato-Reg-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*
@font-face {
    font-family: 'lato';
    src: url('/css/fonts/Lato-Regular.eot');
    src: url('/css/fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
         url('/css/fonts/Lato-Regular.woff') format('woff'),
         url('/css/fonts/Lato-Regular.woff2') format('woff2'),
         url('/css/fonts/Lato-Regular.ttf') format('truetype'),
        url('/css/fonts/Lato-Reg-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}
*/
/*
@font-face {
    font-family: 'lato';
    font-style: normal;
    font-weight: normal;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/ayfRv9GMahGqd-q6YxHjSg.woff2) format('woff2');
}
*/

@font-face {
    font-family: 'latoitalic';
    src: url('/css/fonts/lato-italic-webfont.eot');
    src: url('/css/fonts/lato-italic-webfont.eot?#iefix') format('embedded-opentype'),
    url('/css/fonts/lato-italic-webfont.woff') format('woff'),
    url('/css/fonts/lato-italic-webfont.ttf') format('truetype'),
    url('/css/fonts/lato-italic-webfont.svg#latoitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'latolight';
    src: url('/css/fonts/lato-light-webfont.eot');
    src: url('/css/fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('/css/fonts/lato-light-webfont.woff') format('woff'),
    url('/css/fonts/lato-light-webfont.ttf') format('truetype'),
    url('/css/fonts/lato-light-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* To replace Adobe owned : Myriad Pro*/
@font-face {
    font-family: 'vegurregular';
    src: url('/css/fonts/vegur-regular-webfont.eot');
    src: url('/css/fonts/vegur-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/css/fonts/vegur-regular-webfont.woff') format('woff'),
    url('/css/fonts/vegur-regular-webfont.ttf') format('truetype'),
    url('/css/fonts/vegur-regular-webfont.svg#vegurregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Chelsea Market';
    font-style: normal;
    font-weight: 400;
    src: local('Chelsea Market'), local('ChelseaMarket-Regular'), url(https://fonts.gstatic.com/s/chelseamarket/v4/qSdzwh2A4BbNemy78sJLfBRWMfMQaj_KSrIuqJtfm2o.woff2) format('woff2'), url(https://fonts.gstatic.com/s/chelseamarket/v4/qSdzwh2A4BbNemy78sJLfFg5923bhI0e2gp7DBvMMjU.woff) format('woff');
}

.hopfer_hornbookregular {
    font-family: 'hopfer_hornbookregular';
}

.Midiet_Serif_Italic_Light {
    font-family: 'Midiet_Serif_Italic_Light';
}

.Midiet_Serif_Italic_Medium {
    font-family: 'Midiet_Serif_Italic_Medium';
}

.lato_regular {
    font-family: 'latolight';
}

.lato_light {
    font-family: 'latolight';
}

.lato_italic {
    font-family: 'latoitalic';
}

.vegur_regular {
    font-family: 'vegurregular';
}

/* Styles used on all pages (possibly) */


/* Custom Header and Background for special sections
#wrapper {
    background: url('http://img.hexrpg.com/images/backgrounds/diagonalley.png');
    background-size: 100% 599px;
    width: 100%;
    height: 599px;

}

body {
    font: 12px/20px 'CopseRegular', CopseRegular, Helvetica, Arial, sans-serif;
    background-color: #334466;
    background: #000;
    background-size: 100% auto;
    color:#ffffff;
    font-family: verdana, arial, sans-serif;
    text-align: left;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}
*/

#headerNew {
    width: 1024px;
    margin:0 auto;
}

#topBar {
    background: url('https://img.hexrpg.com/images/topBar.png') repeat-x;
    height: 54px;
    width: 100%;
    position: fixed;
    z-index: 7000;
}

#topBarWrapper {
    width: 1024px;
    margin:0 auto;
}

#topNav .selected,#topNavMenu .selected {
    color: #fff;
}

#topNav, #topMoney {
    margin-top: 10px;
    float:left;
    z-index: 9999;
}

#topMoney {
    display: none;
}

#topNav ul,#topNavMenu ul, #topNavMobile ul {
    list-style: none;
    list-style-type:none;
    letter-spacing: 2px;
    height: auto;
    width: auto;
}

#topNav li, #topNavMobile li {
    float: left;
    margin-right: 15px;
}

#topNavMenu li {
    margin-top: 10px;
    height: 34px;
    border-bottom: #333 2px solid;
}


#topNav a,#topNavMenu a, #topNavMobile a {
    font-family: 'hopfer_hornbookregular';
    text-transform: uppercase;
    font-size: 12px;
    color: #aac2ab;
    padding-bottom: 20px;
    min-width: 69px;
    width: auto;
}

#topNav a:hover, #topNavMenu li:hover, #topNav a.current, #topNavMenu a.current {
    color: #fff;
    background: url('https://img.hexrpg.com/images/activeLinkHover.png') no-repeat bottom;
    min-width: 69px;
}

#topNavMobile a:hover, #topNavMobile a.current {
    color: #fff;
    background: url('https://img.hexrpg.com/images/activeLinkHover.png') no-repeat bottom;
    min-width: 69px;
}


#topNavMenuLink {
    padding-top: 3px;
}


#topNavMenu a:hover, #topNavMenu a.current {
    background-position: 50% 10%;
}


#topNavMenu {
    margin-top: 49px;
    margin-left: -385px;
    float: left;
    z-index: 9998;
    width: 200px;
    height: 0px;
    background: url('https://img.hexrpg.com/images/topNavMenu.png');
    overflow-y: hidden;
    box-shadow: 0px 3px 10px #000;
    -moz-box-shadow: 0px 3px 10px #000;
    -webkit-box-shadow: 0px 3px 10px #000;
}

#drop-nav li { display: block;position: relative;float: left; }
#drop-nav li ul { display: none; }
#drop-nav li ul li { top: 17px; display: block; width: 200px; background: url('https://img.hexrpg.com/images/topBar.png') repeat-x; padding: 15px 10px 5px 10px;text-decoration: none;
}
#drop-nav li:hover ul { display: block; position: absolute; }
#drop-nav li:hover li { float: none; }

#topLogo {
    float: right;
    width: 50px;
    margin-right: 45px;
    margin-top: 6px;
}

#topLogoLO {
    float: right;
    width: 50px;
    margin-right: 120px;
    margin-top: 6px;
}

#logoIcon {
    float:left;
    clear:right;
    width: 35px;
    height: 35px;
    background: url('https://img.hexrpg.com/images/BarLogoOff.png');
    margin-right: -10px;
}

#logoIcon:hover {
    width: 35px;
    height: 35px;
    background: url('https://img.hexrpg.com/images/BarLogoOn.png');
}

#facebookIcon, #facebookIconMobile {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/facebookOff.png');
    margin-right: -10px;
}

#facebookIcon:hover, #facebookIconMobile:hover {
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/facebookOn.png');
}

#twitterIcon, #twitterIconMobile {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/twitterOff.png');
    margin-right: -10px;
}

#twitterIcon:hover, #twitterIconMobile:hover {
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/twitterOn.png');
}

#instagramIcon, #instagramIconMobile {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/instagramOff.png');
    margin-right: -10px;
}

#instagramIcon:hover, #instagramIconMobile:hover {
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/instagramOn.png');
}
#tumblrIcon, #tumblrIconMobile {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/tumblrOff.png');
    margin-right: -10px;
}

#tumblrIcon:hover, #tumblrIconMobile:hover {
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/tumblrOn.png');
}

#pinterestIcon, #pinterestIconMobile {
    float: left;
    clear: right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/pinterestOff.png');
    margin-right: -10px;
}

#pinterestIcon:hover, #pinterestMobileIcon:hover {
    background: url('https://img.hexrpg.com/images/pinterestOn.png');
}

#rssIcon, #rssIconMobile {
    float:left;
    clear:right;
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/rssOff.png');
    margin-right: -10px;
}

#rssIcon:hover, #rssIconMobile:hover {
    width: 50px;
    height: 49px;
    background: url('https://img.hexrpg.com/images/rssOn.png');
}

#socialIcons, #socialIconsMobile {
    float: right;
    margin-top: -50px;
}

#topButtons {
    float:right;
    width: 204px;
}

#topSearch {
    float: right;
    width: 75px;
    margin-right: 85px;
    margin-top: 10px;
}

.searchBar,.searchBar:focus {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
    padding-left: 25px;
    height: 12px;
    width: 125px;
    border: #333 2px solid;
    background-color: transparent;
    color: #FFF;
    outline: none;
    font-size: 14px;
    font-family: lato;
    background-image: url('https://img.hexrpg.com/images/searchBG.png');
    background-repeat: no-repeat;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#searchLocation {
    background: url('https://img.hexrpg.com/images/topBar.png') repeat-x;
    height: 23px;
    width: 140px;
    margin-top: 49px;
    z-index: 50;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    float: right;
    margin-right: -160px;
    text-align: center;
}

.searchLabel {
    font-family: 'hopfer_hornbookregular';
    font-size: 8pt;
    letter-spacing: 2px;
    cursor: pointer;
    color: #aac2ab;
    padding-bottom: 9px;
    padding-left: 5px;
    padding-right: 5px;

}

.searchLabel:hover {
    color: #FFF;
    background: url('https://img.hexrpg.com/images/activeLinkHover.png') no-repeat bottom;
}


#enrollButton, #enrollButtonMobile {
    float:left;
    clear:right;
    width: 102px;
    height: 39px;
    background: url('https://img.hexrpg.com/images/enrollOff.png');
}

#loginButton, #loginButtonMobile {
    float:left;
    clear:right;
    width: 102px;
    height: 39px;
    background: url('https://img.hexrpg.com/images/loginOff.png');
}

#logoutButton {
    float:left;
    clear:right;
    width: 102px;
    height: 39px;
    background: url('https://img.hexrpg.com/images/logoutOff.png');
}

#logo {
    width: 520px;
    height: 109px;
    float:left;
    clear:right;
    margin-top: 40px;

}

#membersOnline {
    width: 210px;
    height: 32px;
    background: url('https://img.hexrpg.com/images/membersOnlineBackground.png') repeat-x;
    color: #fff;
    float:right;
    clear:left;
    margin-top: -80px;
    font-family: 'hopfer_hornbookregular';
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#membersOnlineHat, #membersOnlineHatMobile {
    width: 22px;
    height: 22px;
    float: left;
    margin-left: 3px;
    background: url('https://img.hexrpg.com/images/magicHat3.png') no-repeat;
}

#content {
    width: 1024px;
    margin:0 auto;
    margin-top: -340px;

}

#mainContent {
    float:left;
    width: 80%;
    margin-top: 20px;
    margin-left: 20px;
    min-height: 500px;
}

.horizontalAd {
    width: 100%;
    height: 110px;
    padding-top: 10px;
    padding-bottom: 0px;
    /* background-color: #14282d; */
    text-align: center;
}

#footerWrapper {
    background: url('https://img.hexrpg.com/images/footer.png');
    background-size: 100% 262px;
    width: 100%;
    height: 262px;
}

#footerContent {
    width: 1024px;
    margin:0 auto;
    padding-top: 40px;
}


#footerMagic, #footerSub, #footerSubsidiaries {
    float:left;
    clear:right;
    font-family: 'hopfer_hornbookregular';
    text-transform: uppercase;
    font-weight: 500;
    font-size: 21px;
    color: #425c5c;
    width: 25%;
}


/* Mozilla and IE */
#footerMenu {
    float:right;
    width: 72%;
    /* IE 6, 7, 8, and sometimes 9*/
    width: 73%\9;

}

/* IE 9,10*/
@media screen and (min-width:0\0) {
    #footerMenu {
        float:right;
        width: 73%;
        /* IE 6, 7, 8, and sometimes 9*/
        width: 73%\9;
    }
}

/* Older Safari versions and Chrome Only */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    #footerMenu {
        float:right;
        width: 71%;
    }

}

/* Safari 5 at least, maybe lower, need to test */
::made-up-pseudo-element, #footerMenu {
    float:right;
    width: 71%;
}


.footerNav {
    width: 100%;
}

.footerNav ul {
    float: right;
    height: auto;
    width: auto;
}

.footerNav li {
    float:left;
    padding-left: 5px;
}

.footerNav a {
    font-family: 'hopfer_hornbookregular';
    text-transform: uppercase;
    font-size: 11px;
    color: #aac2ab;
    position:relative;
    top: 5px;
}

.footerNav a:hover {
    color: #fff;
}

#footerCopyright {
    float:left;
    clear:right;
    color: #4b6969;

    font-size: 11px;
    margin-top: 70px;
}

#footerDescription {
    float:right;
    clear:left;
    color: #4b6969;
    width: 60%;
    font-size: 11px;
    margin-top: -30px;
    text-align:right;
}



#footerBar {position: fixed; bottom: 0px; left: 0px; height: 25px; width: 100%;
    background-color: #202526; text-align: left;
    font-family: arial; font-size: 12pt; font-weight: bold; color: black;
    padding-top: 8px; padding-bottom: 3px; cursor: pointer;
    color: #fff;
}

#footerBarContent {
    width: 1024px;
    margin:0 auto;
    font-family: 'hopfer_hornbookregular';
    font-size: 11px;
    text-transform: uppercase;
}

#footerBarContent a {
    color: #e4e2b8;
    letter-spacing: 3px;

}

.searchSelector {
    float:right;
}

.searchSelect {
    width: 75px;
    height: 21px;
    overflow: hidden;
    background: url('https://img.hexrpg.com/images/bottomBarSearchIcon.png') no-repeat right #233635;
}

.searchSelect select {
    background: transparent;
    width: 98px;
    padding: 3px;
    font-size: 12px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 21px;
    -webkit-appearance: none;
    color:#fff;
    font-family: 'hopfer_hornbookregular';
    font-size: 12px;
    text-transform: uppercase;

}

.searchSelect option {
    border: none;
    color: #fff;
    background-color: #233635 !important;
    font-family: 'hopfer_hornbookregular';
    font-size: 12px;
    text-transform: uppercase;
}

.searchInput {
    padding: 3px;
    padding-left: 3px;
    color: #fff;
    background-color: #233635 !important;
    margin-right: 3px;
    font-family: 'lato';
    font-size: 12px;
}

/* Safari and Chrome Only */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    .searchInput {
        padding: 1px;
        padding-left: 3px;
        color: #fff;
        background-color: #233635;
        margin-right: 3px;
        font-family: 'lato';
        font-size: 11px;
    }

}

/* Safari 5 at least, maybe lower, need to test */
::made-up-pseudo-element, .searchInput {

    color: #fff;
    background-color: #233635;
    margin-right: 3px;
    font-family: 'lato';
    font-size: 11px;
    padding: 1px;
    padding-left: 2px;
}

.barShadow {
    -webkit-box-shadow: #000 0 -.1em .5em;
    -moz-box-shadow: #000 0 -.1em .5em;
    box-shadow: #000 0 -.1em .5em;
}

.topLinks {
    float:left;
    padding: 8px;
}

.topLinks ul {
    width: auto;
}
.topLinksLinks li {
    width: auto;
    float:left;
    margin-right: 19px;
    font-family: 'hopfer_hornbookregular';
    color: #50a09b;
    text-transform: uppercase;
    font-size: 13px;
}

.topLinksLinks li:hover {
    color: #FFFFFF;
}

.topLinksDonate li {
    width: auto;
    float: left;
    margin-right: 15px;
    font-family: lato;
    color: #50a09b;
    /* text-transform: uppercase; */
    font-size: 16px;
}
#announcementPrev, #announcementNext {
    width: 20px;
    height: 20px;
    background-color: #000;
    color: #FFF;
    float: right;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: -25px;
    margin-left: 5px;
    font-size: 16px;
    cursor: pointer;
}

#announcementPrev:hover, #announcementNext:hover {
    background-color: #385352;
}

#announcementPrev:active, #announcementNext:active {
    background-color: #15191a;
}

.tooltipIcon {
    cursor: pointer;
    display: inline-block !important;
}

.cartIcon {

    width: 75px;
    height: 75px;
    background: url('https://img.hexrpg.com/images/cartOff.png');
    background-repeat: no-repeat;
    color: #b0af9f;
    font-size: 16px;
}

.cartIcon:hover {
    background: url('https://img.hexrpg.com/images/cartOn.png');
    background-repeat: no-repeat;
    color: #c87d06;
}
.cartText {
    padding-left: 65px;
    padding-top: 30px;
}

#modal {
    width:40%;
    height:auto;
    top:5em;
    min-height:300px;
    max-height:96vh;
    position: fixed;
    overflow:auto;
    left:30%;
    background-color: #dddddd;
    color: #222;
    z-index: 999999;
}

.right {float: right;}

#modal .text {
    padding:2em 3em 2.5em 3em;
}

#modal h3 {
    padding: 0.8em 1em 0.7em 1em;
    margin: 0;
    background-color: #fff;
    border-bottom: thin solid #ccc;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: none;
}

#modal #edit-text:focus {
    outline:none;
}

#modal #edit-text {
    min-height:240px;
    width:100%;
    border:none;
    background-color: #ddd;
    padding: 2em 3em 2.5em;
}

#modal .notes-icon  {
    float:right;
    width:20px !important;
    position: relative;
    top:-2px;
    cursor: pointer;
}

#blackout {
    width:100%;
    height:100vh;
    background-color: #000;
    opacity: 0.7;
    position: fixed;
    top:0;
    left:0;
    z-index: 99999;
}

.hidden {display: none}
#save-changes {position: relative; left:-6px; top:1px; cursor: pointer;}
#cancel-changes {cursor: pointer;}
.reminder_count {
    float: right;
    font-weight: bold !important;
    color: #FFF;
    position: relative;
    top: 10px;
    margin-left: -3px;
    z-index: 22222 !important;
    font-size: 1.2em;
    text-shadow: 0 0 10px #000;
}

due {
    color:transparent;
    width:20px !important;
    display: inline-block;
    height: 13px;
    position: relative;
    top: 2px;
    opacity: 0.5;
    left:-3px;
    cursor:pointer;
    overflow: hidden;
    background-position: right;
    background-image: url('/images/clock-grey.icon.png');
    background-repeat: no-repeat;
    background-size: 13px 13px;
}

due.red-icon {
    opacity: 1;
    background-image: url('/images/clock-red.icon.png');
}

select#forum, input#forum_type {
    color: #222222 !important;
}

/*stores*/
.shopItems {
    border: 2px solid #14282D;
    padding: 0px;
    font-family: lato;
    font-size: 15px;
    margin-top: 10px;
}

.shopItem {
    display: flex;
    align-items: center;
    padding: 0.25em;
    height: 100px;
    overflow: hidden;
    color: #fff;
}

.userShop .shopItem {
    height: 80px;
}

.shopItem > div {
    float: left;
}

.shopItemImage {
    display: block;
    padding: 30px;
}

.shopItemImage img {
    width: 80px;
    max-height: 80px;
}

.userShop .shopItemImage img {
    width: 50px;
    max-height: 50px;
}

.shopItemInfo {
    width: calc(100% - 100px);
}

.userShop .shopItemInfo {
    width: calc(100% - 80px);
    line-height: 16px;
}

.shopItemInfo > g {
    color: #FC0;
    font-size: 17px;
    padding-right: 5px;
}

.shopItemInfo > s {
    color: #C0C0C0;
    text-decoration: none;
    font-size: 17px;
    padding-right: 5px;
}

.shopItemInfo > k {
    color: #A96;
    font-size: 17px;
    padding-right: 5px;
}

/*collections*/
.simpleItemList {
    padding: 0px;
    border: 1px solid #14282D;
    background-color: #101516;
    font-family: 'lato', verdana, arial, sans-serif;
    text-align: center;
}
.simpleItemList .item {
    padding: 0em;
    height: 120px;
    overflow: hidden;
    color: #fff;
    background-color: #000;
}
.simpleItemList .item img {
    max-width: 100%;
    padding: 2px;
}

/*Inventory*/
.inventory {
    padding: 0px;
    font-family: verdana, arial, sans-serif;
    text-align: center;
}

.inventory .item {
    padding: 0em;
    height: 75px;
    overflow: hidden;
    color: #fff;
    border: 1px solid #14282D;
    margin-left: -1px;
    margin-top: -1px;
    background-color: #000;
}
.noCount .item {
    height: 70px;
    padding: 5px 0px;
}

.inventory .itemImage {
    display: inline-block;
    width: 50px;
    max-height: 50px;
    padding: 0px 2px;
}

.inventory .itemInfo {
    display: inline-block;
    width: calc(100% - 54px);
    line-height: 14px;
    max-height: 60px;
    overflow: hidden;
}

.inventory .itemName {
    display: inline-block;
    display: flex;
    align-items: center;
    max-width:250px;
    margin: auto;
    padding-top: 4px;
}

#forumDesc {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: auto;
}

.fancybox-inner {
    color: white;
}

.m-l-01 {
    margin-left: 0.1em !important;
}

.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
a {
    cursor: pointer;
}

.bulletin-row {
    -moz-column-count: 2;
    -moz-column-gap: 1%;
    -webkit-column-count: 2;
    -webkit-column-gap: 1%;
    column-count: 2;
    column-gap: 1%;
}

.bulletin:not(:nth-of-type(1n+1)) {
    margin-left: 1.5em;
}

.bulletin .mainInput.itemQuantitySpinner {
    background-color: #000 !important;
}

.bulletinsWidth {
    width:98%;
}

.smallButtons {
    padding: 0 1em 2px 0;
}

.smallButtons .mainButton {
    font-size:100%;
    padding:3px 5px;
}

h4 .smallButtons .mainButton {
    font-size:55%;
}

h4 .smallButtons {
    display: inline;
}

.bulletin-row.padded {
    padding: 0 2em;
}

.bulletin {
    overflow: hidden;
    display: inline-block;
    background-color: rgba(88, 151, 148, 0.12);
    border: thin solid #304348;
    padding: 2em;
    margin-bottom: 2.5em;
}

.bulletin {
    width:96%;
}

.bulletin.third {
    width:29%;
    margin-left: 3.2%;
}

.bulletin.third:first-child {
    margin-left: 2%;
}

.bulletin.pale {
    background-color: #172123;
}

.bulletin.moreOpaque {
    background-color: rgba(88, 151, 148, 0.24);
}

.bulletin.notification {
    background-color: rgba(91, 147, 206, 0.12);
    border-color:#3a4767;
}

.bulletin hr {
    border-top: thin solid #263538;
    background: none;
}

.m-t-xs {
    margin-top: 0.5rem !important;
}

.m-t-sm {
    margin-top: 1rem !important;
}

.m-t-md {
    margin-top: 2rem !important;
}

.m-t-lg {
    margin-top: 3rem !important;
}

.m-t-xl {
    margin-top: 4rem !important;
}

.m-t--xs {
    margin-top: -0.5rem !important;
}

.m-t--sm {
    margin-top: -1rem !important;
}

.m-t--md {
    margin-top: -2rem !important;
}

.m-t--lg {
    margin-top: -3rem !important;
}

.m-t--xl {
    margin-top: -4rem !important;
}

.m-r-xs {
    margin-right: 0.5rem !important;
}

.m-r-sm {
    margin-right: 1rem !important;
}

.m-r-md {
    margin-right: 2rem !important;
}

.m-r-lg {
    margin-right: 3rem !important;
}

.m-r-xl {
    margin-right: 4rem !important;
}

.m-r--xs {
    margin-right: -0.5rem !important;
}

.m-r--sm {
    margin-right: -1rem !important;
}

.m-r--md {
    margin-right: -2rem !important;
}

.m-r--lg {
    margin-right: -3rem !important;
}

.m-r--xl {
    margin-right: -4rem !important;
}

.m-b-xs {
    margin-bottom: 0.5rem !important;
}

.m-b-sm {
    margin-bottom: 1rem !important;
}

.m-b-md {
    margin-bottom: 2rem !important;
}

.m-b-lg {
    margin-bottom: 3rem !important;
}

.m-b-xl {
    margin-bottom: 4rem !important;
}

.m-b--xs {
    margin-bottom: -0.5rem !important;
}

.m-b--sm {
    margin-bottom: -1rem !important;
}

.m-b--md {
    margin-bottom: -2rem !important;
}

.m-b--lg {
    margin-bottom: -3rem !important;
}

.m-b--xl {
    margin-bottom: -4rem !important;
}

.m-l-xs {
    margin-left: 0.5rem !important;
}

.m-l-sm {
    margin-left: 1rem !important;
}

.m-l-md {
    margin-left: 2rem !important;
}

.m-l-lg {
    margin-left: 3rem !important;
}

.m-l-xl {
    margin-left: 4rem !important;
}

.m-l--xs {
    margin-left: -0.5rem !important;
}

.m-l--sm {
    margin-left: -1rem !important;
}

.m-l--md {
    margin-left: -2rem !important;
}

.m-l--lg {
    margin-left: -3rem !important;
}

.m-l--xl {
    margin-left: -4rem !important;
}

ul.pagination li a,
ul.pagination li.disabled span,
ul.pagination li.disabled span:hover,
ul.pagination li.disabled span:focus,
ul.pagination li.active span {
    background-color: #385352;
    padding:4px 10px;
    border:thin solid #000;
    color: #fff;
}

ul.pagination li.disabled span,
ul.pagination li.disabled span:hover,
ul.pagination li.disabled span:focus {
    padding: 4px 6px;
}

ul.pagination li.disabled.spacer span {
    cursor: default;
    border: none;
    border-top: thin solid#000;
}

ul.pagination li.post-spacer a {
    border-left: none;
}

ul.pagination li.disabled:not(.spacer) span,
ul.pagination li.disabled:not(.spacer) span:hover,
ul.pagination li.disabled:not(.spacer) span:focus {
    width: 0px;
    color: #385352;
}

ul.pagination li.active span {
    background-color: #679c9b !important;
    border:thin solid #2b3a3a;
    color: #fff;
}

ul.pagination li.active span:hover,
ul.pagination li.active span:focus {
    background-color: #679c9b !important;
}

ul.pagination {
    margin-bottom: 0;
    margin-left: 0.3rem;
}

ul.pagination li a:hover,
ul.pagination li a:focus {
    background-color: #3a6362;
    color: #fff;
    border: solid thin #000;
}

.numberInput {
    width:50px;
}

.alert-success a {
    color: #1b501b;
    margin-left: 1.7rem;
}

.alert-success a {
    color: #3c763d;
}

.fullWidth {
    width:100% !important;
}

.halfWidth {
    width:50% !important;
}

.almostFullWidth {
    width:98% !important;
}

.opaque {
    opacity: 1;
}

.clearfix {
    clear: both;
}

.trade-due {
    color: #b8bfbf;
}

.trade-hr {
    margin: 1.5em 0 3em 0;
}

.break-text {
    overflow-wrap: break-word;
    word-break: break-all;
}

.indent {
    padding-left: 1.2em;
}

.float-left {
    float: left;
}
.float-right {
    float: right;
}
.float-center {
    margin: auto;
}

.trigger {cursor: pointer;}

.hint {
    cursor: pointer;
}

.itemThumb {
    width:80px;
    height:80px;
}

.itemThumbCell {
    width:100px;
    height:100px;
}

.itemThumbCell img {
    width:90%;
}

.bulletin table td {
    padding: 0 0.5em;
}

.bulletin ol {
    font-size:85%;
    list-style-type: decimal;
    margin: 1.5em;
}

.talk-bubble {
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    margin: 2em 0;
    display: inline-block;
    position: relative;
    width: 100%;
    height: auto;
    background-color: #93a8b1;
}

.talk-bubble:before{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 0px;
    left: auto;
    top: auto;
    bottom: -20px;
    border: 22px solid;
    border-color: transparent transparent transparent #93a8b1;
}

.talktext {
    color: #000;
    position: relative;
    z-index: 1;
    padding: 1em 1em 1.2em 2em;
    text-align: left;
    line-height: 1.5em;
}

.talktext p {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

.talk-bubble.gold-bubble {
    background-color: #d0b856;
}

.talk-bubble.gold-bubble:before {
    border-color: transparent transparent transparent #d0b856;
}

.progressBar {
    width: 100%;
    border-radius: 1em;
    margin:1em 0;
    border: thin solid #98a4a3;
    background-color: #040808;
    overflow: hidden;
}

.progressBar .progress {
    height:1.5em;
    margin:0;
    min-width:1px;
    border: thin solid #98a4a3;
    background: #2a4241;
}

.padded {
    padding: 0.5em 0 !important;
}

.padded td {
    padding: 0.5em 1em !important;
}

input[type="checkbox"] {
    position: relative;
    top:3px;
}

.btn-xs {
    font-size: 0.7em;
    position: relative;
    min-width: 45px;
    top: -1px;
    border-radius: 0;
    font-weight: bold;
    padding: 0em 0.2em;
}
.btn-icon {
    padding-left: 0.5em !important;
    padding-right: 0.1em !important;
}

.noPics img {
    display: none
}

.paginationPlain li {
    display: inline;
}

.alert-danger a {
    color: #841512
}

.alert-danger a:hover,
.alert-danger a:visited {
    color: #9c221e
}

h4 .mainButton3,
h5 .mainButton3 {
    font-size: 10px;
    position: relative;
    top: -1px;
    margin-left: 0.5em;
}

h4 input.mainButton3,
h5 input.mainButton3 {
    top: -4px;
    padding-bottom: 2.5px !important;
}

.gringottsRowOutgoing {
    color: #ffa9a9;
}

.gringottsRowIncoming {
    color: #d4e3c0;
}

form input[type="submit"] {
    margin: 1px 0 0 0.5em;
}

.hiddenPic {display:none;}

img#cardvalue{
    width: 295px;
    height: auto;
    max-width: 100%;
}

select#cardvalue {
    color:#ffcc00;
    font-weight:bold;
}

.gringottsInputText {
    position: relative;
    left:62px;
    font: 14px Helvetica, Arial, sans-serif;
    color:white;
    text-transform: none;
    font-weight: normal;
}

.gringottsInput input {
    padding-left: 60px;
}

.filterSelect {
    position: relative;
    left: 7px !important;
}

.gringottsInput input, .gringottsInput select {
    width:225px;
}

.gringottsInput button {
    width:20px;
    min-width:0;
    padding:2px 4px 3px;
    top:0px;
    font-size: 12px
}

#gringottsHistory td {
    vertical-align: top !important;
}

.closeBubble {
    color:#766934;
    position: relative;
    top:-8px;
    right:-5px;
}

.italic {
    font-style: italic;
}

table td h4 {
    margin-top:0.2em;
}

.not-bold {
    font-weight: normal !important;
}

.pointer {
    cursor: pointer;
}

.note-text {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 10px !important;
}

.almostFullWidthFancybox {
    width: 90%;
    margin: auto;
}

.spells__wand {
    cursor: pointer;
    position: relative;
    z-index: 998;
}

.spells__container {
    margin-bottom: 3rem;
}

.spells__container a,
.spells__container a:visited,
.spells__container a:link {
    color:#f1ddd2;
}

.spells__icon-container {
    font-size: 7rem;
    margin: -3rem 0 0 -7rem;
    border: 9px solid rgba(0,0,0,0.6);
    padding: 2rem 2.3rem;
    text-align: center;
    border-radius: 100%;
    float:left;
    box-shadow: inset 0 0 53px 9px rgba(0,0,0,0.5);
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.spells__inactive {
    opacity: 0.2;
}

.spells__progress-bar-container {
    background: #FFFFFF;
    width: calc(100% - 6rem);
    float: left;
    margin: 0.5rem 0 0 0rem;
    overflow: hidden;
    z-index: -1;
    position: relative;
    border-radius: 5px
}

.spells__progress-bar-color {
    padding: 10px;
    border: 2px solid rgba(0,0,0,0.6);
    border-radius: 5px;
    background: #f1ddd2;
}

.spells__progress-bar {
    width: 91%;
    height: 33px;
    opacity: 0.5;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px
}
.spells__progress-bar-indicator {
    background: #a2d57b;
    margin-top: -33px;
    border: 1px solid rgba(0,0,0,0.1);
    height: 33px;
    border-radius: 5px
}

.spells__navigation li {
    padding: 0.2rem 0;
}

.spells__navigation {
    padding: 0.6rem 1rem;
    background: rgba(40, 51, 51, 0.34);
    margin: 0.6rem;
    border-radius: 5px;
}

.spell__radio-text.disabled {
    opacity: 0.5;
}

.bubbles-canvas {
    pointer-events:none;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.bottom-right-wand {
    position: fixed !important;
    bottom: 0.5em;
    left: 1em;
    width:150px !important;
}

span.rainbowText {
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0, #e26060),
            color-stop(0.15, #e66ae6),
            color-stop(0.3, #a2a2ea),
            color-stop(0.45, #6af7f7),
            color-stop(0.6, #77f777),
            color-stop(0.75, #77f777),
            color-stop(0.9, #ff2),
            color-stop(1, #e26060)
    );
    background-image: gradient(
            linear,
            left top,
            right top,
            color-stop(0, #e26060),
            color-stop(0.15, #e66ae6),
            color-stop(0.3, #a2a2ea),
            color-stop(0.45, #6af7f7),
            color-stop(0.6, #77f777),
            color-stop(0.75, #77f777),
            color-stop(0.9, #ff2),
            color-stop(1, #e26060)
    );
}

.clubs-listing p {
    padding: 0.5em 0.1em;
}

.clubs-listing tr:hover {
    background: #121c1c;
}

.subcategory p {
    padding: 0.3em 0.1em 0.3em 1.5em;
}

.subcategory small {
    font-size: 70%;
    color:#3c4a4a;
    position: relative;
    top: -2px;
}

.bold {
    font-weight: bold;
}

.icon-large i {
    font-size: 130%;
    margin-left: 0.4em;
}

.icon-x-large i {
    font-size: 190%;
    margin-left: 0.5em;
}

.forumtitle-rule {
    height: auto;
    margin: 0.4em 0 0.4em -0.3em;
    background: none;
    border: thin solid rgba(255, 255, 255, 0.13);
}

.rating-disabled {
    opacity: 0.3
}

.review-container {
    margin-top: -1em;
}

.review-content {
    width: calc(100% - 120px);
    float:right;
}

.review-avatar {
    width:100px;
    height: 100px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    float:left;
    border: thin solid white;
}

.list__bullets {
    padding-left:1em;
}

.list__bullets li {
    list-style-type: disc;
}

.screen-reader.spells-list a {
    position: absolute;
    top:-999px;
}

.screen-reader.spells-list a:focus {
    position: inherit;
}

.instant-darkness-powder {
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    background-color: #000;
    pointer-events: none;
    z-index: 6998;
    opacity:0.7;
}

.lumosPost {
    position: relative;
    z-index: 6999;
}

.userPostForumTitle i {
    font-size: 0.9em;
}

.vue-autocomplete {
    border: 1px solid #aa90c3;
    background: #564567;
    color: #FFF;
    margin: -0.5em 0 0 0;
}

.vue-autocomplete li {
    padding: 0.5em 0.9em;
    cursor: pointer;
}

.vue-autocomplete li:hover {
    background: #aa90c3;
}

.feeds .filters {
    width: 50%;
    position: relative;
    z-index: 31;
    margin-top: -3.5em !important;
}

.popover-title {
    color: #000000;
}
.popover-content {
    color: #000000;
    font-family: lato;
}
.vdayArrow{
    width: 100%;
    max-width: 100%;
}
.vdayArrow td {
    text-align: center;
}

#navUsername {
    font-size: 14px;
}

.userPostForumTitleMobile {
    display: none;
}

.owlpostInbox .row {
    /* padding-top: 15px; */
}

.adsContainer .row {
    margin-top: 30px;
}

.trophyCaseTitle {
    font-size: 26px;
    margin-top:0;
    padding-top: 12px;
    margin-bottom: 15px;
    height: 50px;
}

.imageMapContainer {
    margin: 0 auto;
}

.imageMapView {
    position: relative;
    width: 100%;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.imageMapView svg {
    display: inline-block;
    position: absolute;
    top: 0; left: 0;
}
.imageMapLink {
    fill: #000;
    opacity: 0;
}
.imageMapLink:hover {
    fill: #fff;
    opacity: 0;
}
.imageMapLink:active {
    opacity: 0;
}

.fancybox-inner .messageContainer {
    margin: 3em auto 3em auto;
    width: 500px !important;
}

.fancybox-inner h1 {
    font-size: 22px;
    padding: auto 3em auto 3em;
}

.careerAlertBox {
    padding: 1em;
    border-radius: 1em;
    background-color: #272d2f;
    overflow: hidden;
    display: inline-block;
}

.careerAlert {
    padding-left: 25px;
}

.careerGlyphSm {
    width: 20px;
    height: 20px;
}

.careerGlyphBoxSm {
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
    display: block;
    height: 20px;
}

.MLEprankReport {
    display: table;
    padding: 0 1em 0 1em;
    font-size: 12px;
}

.MLEprankReport .report {
    display: table-row;
}

.MLEprankReport .report:nth-child(odd) {
    background-color: #233635;
}
.MLEprankReport .report:nth-child(even), .MLEprankReport .noIncidents {
    background-color: #101516;
}

.MLEprankReport .underline {
    text-decoration: underline;
}

.MLEprankReport .incident {
    display: table-cell;
    padding: .5em 0 .5em 1em;
    float: left;
    text-align: left;
}

.MLEprankReport .time {
    display: table-cell;
    padding: .5em 1em .5em 0;
    float: right;
}

.MLEprankReport .noIncidents {
    display: table-cell;
    padding: .5em 1em .5em 1em;
    font-size: 14px;
}

@media (max-width: 550px) {
    .hogfriendRequest {
        margin: 0 !important;
        font-size: 12px;
        font-family: lato;
    }
}

.adsenseHeader {
    margin-top: 15px;
    margin-bottom: 20px;
    display: inline-block;
    text-align: center;
}