@font-face {
    font-family: 'Diablo Heavy';
    font-style: normal;
    font-weight: normal;
    src: local('Diablo Heavy'), url('../fonts/diablo.woff') format('woff');
}

#cartography-body,
#cartographyform {
    background: url("../images/diabloworldmap.png") no-repeat center top fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100% !important;
    min-height: 700px !important;
    overflow: hidden;
}

#cartography-body h1,
#cartographyform h1{
    font-size: 26px;
}

#cartography-body h2,
#cartographyform h2{
    font-size: 20px;
}

#cartography-body,
#cartographyform,
#cartography-body h1,
#cartographyform h1,
#cartography-body h2,
#cartographyform h2,
#cartography-body h3,
#cartographyform h3 {
    font-family: "Diablo Heavy", serif !important;
}

#cartography-body .cartography-main {
    text-align: center;
    margin: 0;
    padding: 20px !important;
    color: white !important;
}

#cartography-body .cartography-main a {
    color: white;
    font-size: 12px !important;
}

#cartography-body .cartography-headline {
    margin: 20px 0 !important;
}

#cartography-body .cartography-headline h1 {
    font-size: 28px !important;
    font-weight: bold;
    line-height: 1.3em !important;
    margin: 0;
    padding: 0;
    color: white;
}

#cartography-body .cartography-headline h3 {
    font-size: 22px !important;
    font-weight: normal;
    line-height: 1.2em !important;
    margin: 0 !important;
    padding: 0 !important;
    color: white;
}

#cartography-body .navbar-cartography {
    background: none;
    color: white;
}

#cartography-body .cartography-text-left {
    text-align: left;
}

#cartography-body .cartography-small-input {
    max-width: 195px !important;
    width: calc(100% - 5px) !important;
}

#cartography-body .cartography-select-input {
    max-width: 200px !important;
    width: 100% !important;
}

#cartography-body .cartography-medium-input {
    max-width: 400px !important;
    width: 100% !important;
}

#cartography-body .cartography-inputbox {
    min-height: 200px !important;
    max-width: 744px !important;
    width: calc(100% - 6px) !important;
    margin: 0 !important;
    padding: 2px !important;
}

#cartography-body textarea.cartography-inputbox {
    resize: none !important;
}

#cartography-body .cartography-smiley-box {
    float: unset;
    width: 100% !important;
}

#cartography-body .cartography-input-info {
    display: block;
    font-size: 1em;
    margin-bottom: 5px !important;
}

#cartography-body .cartography-input-info-small {
    display: block;
    font-size: 0.8em;
    margin: 5px 0 !important;
}

#cartography-body .cartography-display-main {
    padding: 10px !important;
}

#cartography-body .cartography-display-main .inner {
    padding: 5px !important;
}

#cartography-body .cartography-display-entry {
    margin-bottom: 10px;
}

#cartography-body .cartography-display-entry a {
    width: 100%;
    height: auto;
    position: relative;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;
    padding: 20px 0;
}

#cartography-body .cartography-display-entry a:hover .cartography-display-hover-text {
    visibility: visible;
    opacity: 1;
}

#cartography-body .cartography-display-image-border {
    width: 100%;
    height: 100%;
    background: url("../images/image-border.png") no-repeat center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    z-index: 1001;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}

#cartography-body .cartography-display-image,
#cartography-body .cartography-display-hover-text {
    width: 100%;
    height: auto;
}

#cartography-body .cartography-display-image {
    margin: auto;
    width: 96%;
    height: 96%;
    top: 2%;
    left: 2%;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding-bottom: 10px;
}

#cartography-body .cartography-entry-text {
    font-size: 12px;
    z-index: 1001;
    color: #d58f3e; /*if no support for background-clip*/
    background: -webkit-linear-gradient(transparent, transparent),
    -webkit-linear-gradient(top, rgba(213,173,109,1) 45%, rgba(226,186,120,1) 65%, rgba(163,126,67,1) 85%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%);
    background: -o-linear-gradient(transparent, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

#cartography-body .cartography-display-hover-text {
    position: absolute;
    background: rgba(41, 41, 69, 0.6);
    margin: auto ;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    z-index: 1000;
    font-size: 15px !important;
}

#cartography-body .cartography-display-hover-text > span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    text-transform: uppercase;
}

#cartography-body .panel-sub {
    background-color: rgba(41, 41, 69, 0.6);
    border-radius: 5px !important;
}

#cartography-body .cartography-display-main h2,
#cartography-body .cartography-display-main-subtopic,
#cartography-body .titlespace {
    color: #d5a06a !important;
    background: -webkit-linear-gradient(transparent, transparent),
    -webkit-linear-gradient(top, rgba(213,173,109,1) 45%, rgba(226,186,120,1) 65%, rgba(163,126,67,1) 85%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%) !important;
    background: -o-linear-gradient(transparent, transparent) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: bold;
}

#cartography-body .navbar-cartography ul {
    display: inline-block;
    list-style-type: none;
    padding: 10px !important;
}

#cartography-body .navbar-cartography ul li {
    display: inline-block;
    list-style-type: none;
    background: url("../images/nav-button.png") no-repeat;
    width: 172px !important;
    height: 32px !important;
    text-align: center;
    z-index: 999 !important;
}

#cartography-body .navbar-cartography ul li:hover,
#cartography-body .download-button:hover{
    background: url("../images/nav-button-active.png") no-repeat;
    color: #d5a06a;
}

#cartography-body .navbar-cartography ul li a:hover {
    color: #d5a06a;
}

#cartography-body .navbar-cartography ul li a,
#cartography-body .download-button {
    position: relative !important;
    width: 172px !important;
    font-size: 14px !important;
    color: white;
    font-family: "Diablo Heavy", serif !important;
    text-decoration: none;
    top: 20% !important;
    transform: translate(-20%, 0) !important;
}

#cartography-body #cartography-images {
    margin: 0 auto !important;
    text-align: center !important;
}

#cartography-body #cartography-images .image-padding {
    padding: 5px;
}

#cartography-body #cartography-images img {
    width: 100%;
    cursor: pointer;
}

#cartography-body .download-button {
    background: url("../images/nav-button.png") no-repeat;
    width: 172px !important;
    height: 32px !important;
    text-align: center;
    border: none;
}

#cartography-body .cartography-display-main-inner {
    padding: 20px !important;
}

#cartography-body .cartography-display-main-inner h3 {
    text-align: left;
}

#cartography-body p.note
{
    -moz-border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    background-color: rgba(50, 180, 255, 0.5);
    border: dot-dash 1px #3ab4ff;
    border-radius: 6px !important;
    line-height: 18px !important;
    overflow: hidden;
    padding: 15px 60px !important;
    color: white;
    font-size: 15px !important;
    text-align: left;
}