/* ============================================================
   Shared site frame styles for The Great Heist (newsite123).
   Extracted verbatim from the per-page inline <style> blocks so
   every page can cache one file. Image URLs are root-absolute
   (/images/...) because url() resolves relative to THIS file.
   Page-specific styles (blog/credit, privacy settings, template
   finder, underground map, etc.) stay inline on their page.
   ============================================================ */

/* ============================================ */
/* RESET & BASE STYLES                          */
/* ============================================ */
* {
    margin: 0;
    padding: 0;
}

html, input, select, textarea {
    font-family: "Lucida Grande", Verdana, sans-serif;
}

html, input, select, textarea, div.content h3, div.box h3, table.data th, div.box table.data th, .ui-widget {
    font-size: 12px;
}

body {
    overflow-y: scroll;
    height: 101%;
    background: rgb(84, 84, 84);
    color: rgb(0, 0, 0);
}

a {
    color: rgb(51, 100, 125);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.disabled {
    color: rgb(119, 119, 119);
    cursor: not-allowed;
}

img {
    border: 0px;
}

ul, ol {
    margin: 0px 0px 15px 40px;
    padding: 0px;
}

ul li {
    list-style-type: disc;
    margin: 0px 0px 5px;
    padding: 0px;
}

hr {
    border: 0px;
    height: 1px;
    margin: 15px 0px;
    background-color: rgb(9, 111, 154);
}

h1 {
    margin: 0px 0px 7px;
    padding: 0px;
    font-size: 14px;
    font-weight: 700;
}

.blank {
    display: none;
}

/* ============================================ */
/* MAIN WRAPPER                                 */
/* ============================================ */
div#site-wrapper {
    margin: 30px auto 0px;
    width: 775px;
    zoom: 1.25;
}

/* ============================================ */
/* HEADER                                       */
/* ============================================ */
div#header {
    height: 85px;
    background-image: url("/images/bgr-header.png");
}

div#header-commands {
    margin: 15px 14px 0px 0px;
    float: right;
}

div#header-commands a {
    cursor: pointer;
}

div#header-logo img {
    margin: 20px 0px 0px 260px;
}

div#header img.logo, div.gameimage, div#headermenu, div.forumMessageHeader {
    margin-bottom: 15px;
}

/* ============================================ */
/* HEADER SIDE COMMANDS                         */
/* ============================================ */
div#header-side-commands {
    display: none;
    position: relative;
    left: 15px;
    top: 1px;
    width: 25px;
    float: right;
    margin-left: -40px;
}

/* ============================================ */
/* DETACHABLE MENU BAR                          */
/* ============================================ */
div#detachable {
    width: 775px;
    position: static;
}

div#detachable.stuck {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
}

div#site-detachable-shadow {
    width: 775px;
    position: static;
    display: none;
}

/* ============================================ */
/* CHARACTER TOOLS BAR                          */
/* ============================================ */
div#character-tools {
    height: 35px;
    background-image: url("/images/bgr-character-tools.png");
}

div#character-tools-shortcuts {
    width: 290px;
    float: left;
    margin: 7px 2px 0px 25px;
}

div#character-tools-shortcuts a, div#character-tools-account a {
    float: left;
    margin-right: 6px;
    margin-top: 5px;
}

div#character-tools-shortcuts a:last-of-type, div#character-tools-account a:last-of-type {
    margin-right: 0px;
}

div#character-tools-shortcuts a.expandable, div#character-tools-account a.expandable {
    margin-top: 0px;
    padding: 3px;
    background-color: rgb(165, 165, 165);
}

div#character-tools-shortcuts a.expandable:hover, div#character-tools-account a.expandable:hover,
div#character-tools-shortcuts a.selected, div#character-tools-account a.selected {
    background-color: rgb(255, 204, 0);
}

div#character-tools-location {
    width: 150px;
    float: left;
    margin: 12px 15px 0px 0px;
    text-align: center;
    color: rgb(80, 80, 80);
}

div#character-tools-account {
    float: right;
    margin: 7px 25px 0px 0px;
}

div#character-tools div.expanded {
    display: none;
    padding: 10px;
    position: absolute;
    text-align: left;
    z-index: 1000;
    background: rgb(255, 204, 0);
}

div#character-tools div.expanded a, div#character-tools div.expanded img {
    float: none;
    display: block;
}

/* ============================================ */
/* TOP MENU / NAVIGATION                        */
/* ============================================ */
div#top-menu {
    height: 32px;
    z-index: 9999;
    background-image: url("/images/bgr-top-menu.png");
}

div#top-menu-notifications {
    width: 50px;
    height: 32px;
    float: left;
    position: relative;
}

img.top-menu-notifications-img {
    position: relative;
    left: 25px;
    top: 9px;
}

div#top-menu-notifications-num {
    left: 35px;
    margin-top: 5px;
}

div#top-menu-notifications-list {
    display: none;
    position: relative;
    top: 12px;
    left: 13px;
    width: 250px;
    padding: 10px 10px 0px;
    z-index: 1000;
    background: rgb(255, 255, 255);
}

div#top-menu-nav {
    float: left;
    width: 670px;
    height: 32px;
}

div#top-menu-nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 9px 0px 0px;
    text-align: center;
}

div#top-menu-nav ul li {
    display: inline;
}

div#top-menu-nav ul li a {
    margin: 0px;
    padding: 9px 5px 8px;
    color: rgb(255, 255, 255);
}

div#top-menu-nav ul li a:hover {
    text-decoration: underline;
}

div#top-menu-nav ul li a.active {
    background-color: rgb(255, 255, 255);
    color: rgb(17, 17, 17);
}

/* ============================================ */
/* BADGE (Notification Count)                   */
/* ============================================ */
div.badge {
    display: none;
    width: auto;
    position: absolute;
    padding: 0px 2px 1px;
    z-index: 100;
    font-size: 9px;
    color: rgb(255, 255, 255);
    background: rgb(255, 0, 0);
}

/* Show badge when it has content */
div#top-menu-notifications-num.badge {
    display: block;
    border-radius: 3px;
    line-height: 1.2;
}

/* ============================================ */
/* MAIN CONTENT AREA                            */
/* ============================================ */
div#site-main {
    margin: 0px;
    padding-top: 0px;
    background-image: url("/images/bgr-main.png");
}

/* ============================================ */
/* NOTIFICATIONS BAR                            */
/* ============================================ */
div#notifications {
    margin: 0px 15px;
    background: rgb(165, 165, 165);
    padding: 0px;
    border-bottom: 5px solid rgb(255, 255, 255);
}

div#notifications div {
    padding: 6px;
    text-align: center;
    color: rgb(255, 255, 255);
}

div#notifications div:last-of-type {
    margin-bottom: 0px;
}

div#notifications div.notification-empty {
    background-color: rgb(221, 221, 221);
    color: rgb(153, 153, 153);
}

div#notifications div.notification-loading {
    background-color: rgb(221, 221, 221);
    color: rgb(153, 153, 153);
}

div#notifications div.notification-disabled {
    background-color: rgb(221, 221, 221);
    color: rgb(153, 153, 153);
}

div#notifications div.notification-success {
    background-color: rgb(58, 171, 56);
    background-repeat: repeat-x;
}

div#notifications div.notification-error {
    background-color: rgb(207, 45, 45);
    background-repeat: repeat-x;
}

div#notifications div.notification-normal {
    background-color: rgb(255, 119, 0);
    background-repeat: repeat-x;
}

div#notifications div.notification-normal a {
    color: rgb(255, 255, 153);
}

div#notifications div.notification-latest {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
    color: rgb(80, 80, 80);
}

div#notifications div.notification-latest strong {
    color: rgb(17, 17, 17);
}

/* ============================================ */
/* TOP COLUMN / GAME IMAGE                      */
/* ============================================ */
div#topcolumn {
    margin: 0px 15px;
    background-color: rgb(165, 165, 165);
    padding: 10px;
}

div.gameimage {
    margin-bottom: 15px;
}

div.homeimg {
    background: url("/images/home.png");
}

div.Base725 {
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 40.6%;
    background-size: 100% !important;
}

/* ============================================ */
/* FOOTER                                       */
/* ============================================ */
div#site-footer {
    height: 25px;
    background-image: url("/images/bgr-footer.png");
    background-repeat: no-repeat;
}

/* ============================================ */
/* TRANSPARENCY UTILITIES                       */
/* ============================================ */
.transp25 {
    opacity: 0.25;
}

.transp50 {
    opacity: 0.5;
}

.transp75 {
    opacity: 0.75;
}

.transp100 {
    opacity: 1;
}

/* ============================================ */
/* HEADER BUTTON STYLES                         */
/* ============================================ */
.header-button-lock,
.header-button-unlock {
    cursor: pointer;
}

/* ============================================ */
/* CONTENT BOXES                                */
/* ============================================ */
div.box {
    background-color: inherit;
    margin-bottom: 0px;
}

div.box h2 {
    background-color: rgb(209, 225, 229);
    color: rgb(17, 17, 17);
    font-weight: bold;
}

div.box h2, div.box h3.menu, div.box div.tabs {
    font-size: 13px;
}

div.content {
    background-color: rgb(255, 255, 255);
    padding: 15px;
}

/* ============================================ */
/* ERROR / WARNING                              */
/* ============================================ */
.error, .warning {
    font-weight: bold;
    color: rgb(221, 0, 0);
}

.gray {
    color: rgb(153, 153, 153);
}

.invalid {
    color: rgb(102, 102, 102);
}

/* ============================================ */
/* MATERIAL ICONS (local override)              */
/* ============================================ */
.material-icons {
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    overflow-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    text-rendering: optimizelegibility;
}

span.material-icons {
    vertical-align: text-bottom;
}

/* ============================================ */
/* CLEAR FIX                                    */
/* ============================================ */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================ */
/* SITE PANELS (welcome / blog / content boxes) */
/* ============================================ */
div#topcolumn div.box.site-panel {
    margin-bottom: 10px;
}

div#topcolumn div.box.site-panel:last-child {
    margin-bottom: 0px;
}

div#topcolumn div.box.site-panel h2 {
    margin: 0px;
    padding: 6px 10px;
    background-color: rgb(129, 129, 129);
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 13px;
    border: 1px solid rgb(159, 159, 159);
    border-bottom: 0px;
}

div#topcolumn div.box.site-panel div.content {
    margin: 0px;
    border: 1px solid rgb(159, 159, 159);
}

/* ============================================ */
/* SHARED MARKDOWN CONTENT (welcome/blog/etc.)  */
/* ============================================ */
p.md-blank-line {
    margin: 0px;
    padding: 0px;
    height: 1em;
    line-height: 1em;
}

img.md-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 6px 0px;
}