/*================================================================
-----------------------------MISC---------------------------------
================================================================*/
body {background-color: black}
pre, span {color: #EEEEEE; font: 18px "Lucida Console", monospace}  /*---!!!!!!!!!!!!!!!---*/
header {width: 100%; height: 48px; line-height: 16px}   /*---!!!!!!!!!!!!!!!---*/
nav {width: 100%; padding-bottom: 10px; align-self: center;}
section {width: 100%}
footer {width: 100%; padding-top: 10px; padding-bottom: 32px}
marquee {width: 100%}

a:link {color: #EEEEEE}
a:visited {color: #64B0FF}
a:hover {color: #EA9E22}
a:active {color: #EE696B}

.container {width:90%; min-width: 768px; margin: auto; display:flex; flex-direction: column}

.menu_Selection {cursor: pointer}
.menu_Selection_disabled {cursor: grabbing; color: #534970}
.pointer {visibility: hidden; width: 24px; height: 16px}
.sound {cursor: pointer; width: 22px; height: 20px} /*---!!!!!!!!!!!!!!!---*/
.icon {height:24px; width:24px; position:relative; top:3px} /*---!!!!!!!!!!!!!!!---*/
.eventicon {height:52px; width:108px; cursor: pointer; position: relative; top:-2px} /*---!!!!!!!!!!!!!!!---*/

.item {width: 30%; text-align: right}
.desc {width: 69%; text-align: left}

.alignLeft {text-align: left}
.alignLeftTop {text-align: left; vertical-align: top}
.alignLeftBottom {text-align: left; vertical-align: bottom}
.alignRight {text-align: right}
.alignRightTop {text-align: right; vertical-align: top}
.alignRightBottom {text-align: right; align-self: flex-end}

.underline {text-decoration: underline}

.dark {color: #534970}
.red {color: #BD6A6A}

.border_I {
    border: 15px solid transparent;
    border-image: url(images/UI/border_I.png) 20 round;
    background-image: url(images/UI/bg.png);
    background-repeat: repeat
}
.border_II {
    border: 4px solid transparent;
    padding: 2px;
    border-image: url(images/UI/border_II.png) 4 round;
    background-image: url(images/UI/bg.png);
    background-repeat: repeat
}

#explorerInput {width: 512px;}      /*---!!!!!!!!!!!!!!!---*/
#boxBody {                          /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 380px;
}
/*================================================================
-----------------------NAVIGATION MENU----------------------------
================================================================*/
.boxNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-end;
    width: 90%
}
.boxMenu {                  /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    align-items: flex-start;
    min-width:256px;
    user-select: none;
}
.navMenu_L {width: 56%;}
.navMenu_R {width: 42%;}
.gainz {align-self: flex-end;  min-width: 128px; min-height: 16px; text-align: right;}

/*================================================================
----------------------------FOOTER--------------------------------
================================================================*/
.boxFooter {
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    width: 90%;
}
.boxInfo {
    display: flex;
    align-items: flex-start;
    min-width:144px;
}
.bottom {width: 66%; min-width: 384px;}
.clock {align-self: flex-start;  min-width: 128px; height: 32px; text-align: right;}
.ftL {width: 34%;}
.ftR {width: 64%;}

/*================================================================
-------------------------STATUS MENU------------------------------
================================================================*/
#boxStat {                  /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    width:40%;
    min-width: 384px;
    min-height: 380px;
    margin: 8px 8px;
    align-items: top;
    cursor: pointer;
    user-select: none;
}
.boxEquip {                 /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    flex-direction: column;
    width:40%;
    min-width: 384px;
    min-height: 380px;
    margin: 8px 8px;
}
.pic {                  /*---!!!!!!!!!!!!!!!---*/
    width:152px;
    height: 152px;
    border: 4px solid transparent;
    border-image: url(images/UI/border_II.png) 4 round;
    background-origin:border-box;
    background-size: 160px 160px;
}
.nodePic {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42%;
}
.nodeInfo {
    display: flex;
    flex-direction: column;
    width: 58%;
}
.divider {
    width: auto;
    height: 15px;
    background-image: url(images/UI/divider.png);
    background-repeat: repeat;
    margin: 0px -9px;
}
.inactive {background-image: url(images/faces/stat_inactive.png);}
.active {background-image: url(images/faces/stat_active.png);}
.equipLeft {width: 33%; text-align: right;}
.equipRight {width: 66%; text-align: left;}
.statArea {width: 48%;}
.statPic {width:24px; height:24px; vertical-align: middle}
.statBlock {height:26px;}
.timestamp {color: #EEEEEE; font: 9px "Lucida Console", monospace}  /*---!!!!!!!!!!!!!!!---*/
.timestamp_II {color: #EEEEEE; position: relative; top: -8px; height: 22px; font: 14px "Lucida Console", monospace}  /*---!!!!!!!!!!!!!!!---*/

/*================================================================
-----------------------INVENTORY MENUS----------------------------
================================================================*/
.boxInventory {                 /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    flex-direction: column;
    align-content:center;
    width:84%;
    min-width: 800px;
    min-height: 380px;
    margin: 8px 8px
}
.boxLinkType, .boxInventoryTitle {              /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    justify-content: space-around;
    align-items: center;
    user-select: none;
    height: 24px
}
.boxStandardInventory {    /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    user-select: none;
    height: 297px
}
    

/*======================---UPDATE  MENU---======================*/
.updateItem {width:98%; line-height: 1.5; text-align: left; margin-left: 16px} /*---!!!!!!!!!!!!!!!---*/
.updateItem#title {height: 48px; margin-top: 12px; color: #EA9E22; font: 28px "Lucida Console", bold, monospace} /*---!!!!!!!!!!!!!!!---*/
.updateItem#date {height: 32px; color: #64B0FF; font: 18px "Lucida Console", monospace} /*---!!!!!!!!!!!!!!!---*/
.updateItem#message {height: 158px; line-height: 1;} /*---!!!!!!!!!!!!!!!---*/
.updateItem#sig {height: 20px; text-align: end} /*---!!!!!!!!!!!!!!!---*/
.updateItem#updateNav {         /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    margin-right: 16px;
}
.messageContent {font: 14px "Lucida Console", monospace;}

/*======================---CONTACT MENU---======================*/
.contentItem {width:98%; min-height: 48px; text-align: left; margin-left: 16px} /*---!!!!!!!!!!!!!!!---*/

/*=======================---LINK  MENU---=======================*/
#boxLinkInventory {         /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    user-select: none;
    height: 218px
}
.boxLinkDesc {              /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    height: 64px;
    margin-top: 12px;
}
.linkItem {width:49%; height: 32px; text-align: left; margin-top: 4px} /*---!!!!!!!!!!!!!!!---*/
.linkPic {width: 24px; height: 24px}

/*=======================---EVENT MENU---=======================*/
.boxEventInventory {         /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    user-select: none;
    height: 242px
}
.boxEventSelection {              /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-top: 12px;
}
.boxEventReward {                   /*---!!!!!!!!!!!!!!!---*/
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%
}
.boxEventQR {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: flex-start;
}
.boxEventInventory.item {width: 60%}
.eventItem {width:98%; line-height: 1.5; text-align: left; margin-left: 16px} /*---!!!!!!!!!!!!!!!---*/
.eventItem#eventDate {height: 18px; margin-top: 6px; color: #EEEEEE; font: 12px "Lucida Console", monospace; text-align: center} /*---!!!!!!!!!!!!!!!---*/
.eventItem#eventTitle {height: 32px; color: #EA9E22; font: 20px "Lucida Console", bold, monospace; text-align: center} /*---!!!!!!!!!!!!!!!---*/
.eventItem#eventLNURL {height: 32px} /*---!!!!!!!!!!!!!!!---*/
.eventItem > b {color: #64B0FF; font: 14px "Lucida Console", monospace} /*---!!!!!!!!!!!!!!!---*/
.eventReward {                   /*---!!!!!!!!!!!!!!!---*/
    height:160px; width:160px;
    background-color: #fff;
    border: 4px solid transparent;
    border-image: url(images/UI/border_II.png) 4 round;
    position:relative; right:96px
}

/*=====================---EXPLORER  MENU---=====================*/
.explorerItem {width:98%; min-height: 32px; text-align: left; margin-top: 12px} /*---!!!!!!!!!!!!!!!---*/
.explorerForm {width:98%; height: 24px; text-align: left; margin-top: 12px} /*---!!!!!!!!!!!!!!!---*/
.explorerStat {width:49%; height: 48px; text-align: center; margin-top: 4px} /*---!!!!!!!!!!!!!!!---*/

/*================================================================
--------------------------FLEX BOXES------------------------------
================================================================*/
.boxLeft {
    display: flex;
    justify-content: flex-start;
    align-items: center
}
.boxRight {
    display: flex;
    justify-content: flex-end;
    align-items: center
}
.boxCenter {
    display: flex;
    justify-content: center;
    align-items: center
}

/*================================================================
-----------------------COPY  PUBLIC KEY---------------------------
================================================================*/
.pubkey {
    position: relative;
    display: inline-block;
}
  
.pubkey .pubkeyCopy {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.pubkey .pubkeyCopy::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.pubkey:hover .pubkeyCopy {visibility: visible; opacity: 1}

/*================================================================
---------------------SCROLLING BACKGROUND-------------------------
================================================================*/
.bg {
    background: url(images/UI/map1.png);
    width: 9216px;
    height: 9216px;
    animation: scroller 600s linear infinite;
    position: fixed;
    top: 0;
    left: -1024px;
    z-index: -2
}
@keyframes scroller {
    0% {
      transform: translate3d(-3072px, 0px, 0);
    }
    100% {
      transform: translate3d(0px, -3072px, 0);
    }
}

.clouds {
    background: url(images/UI/clouds.png);
    width: 9216px;
    height: 9216px;
    animation: cloudy 600s linear infinite;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1
}
@keyframes cloudy {
    0% {
      transform: translate3d(-9016px, -3072px, 0);
    }
    100% {
      transform: translate3d(0px, 0px, 0);
    }
}

/*================================================================
-------------------------TIPJAR POPUP-----------------------------
================================================================*/
#popup {
    display: none;
    position: fixed;
    top: 2%;
    left: 25%;
    width: 50%;
    height: 90%;
    background-color: white;
    z-index: 10
}
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg {
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
    background-color: rgba(0,0,0,.75);
    display: none
}



/*================================================================
-------------------------HANDLE MEDIA-----------------------------
================================================================*/
@media all and (orientation: portrait) and (min-width: 764px) {
    pre, span {color: #EEEEEE; font: 28px "Lucida Console", monospace}
    header {width: 100%; height: 64px}
    .bottom {width: 100%; min-width: 384px}
    .sound {cursor: pointer; width: 30px; height: 28px}
    .icon {height:32px; width:32px; position:relative; top:3px}
    .eventicon {height:78px; width:162px; cursor: pointer; position:relative; top:-2px}
    .statPic {width: 32px; height: 32px; vertical-align: middle}
    .timestamp {color: #EEEEEE; font: 14px "Lucida Console", monospace}
    .timestamp_II {color: #EEEEEE; font: 20px "Lucida Console", monospace}

    .updateItem {width:98%; line-height: 3; text-align: left; margin-left: 16px}
    .updateItem#title {height: 96px; margin-top: 12px; color: #EA9E22; font: 48px "Lucida Console", bold, monospace}
    .updateItem#date {height: 64px; color: #64B0FF; font: 28px "Lucida Console", monospace}
    .updateItem#sig {height: 32px; text-align: end}
    .updateItem#message {height: 696px; line-height: 2.5}
    .updateItem#updateNav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 48px;
        margin-right: 16px;
    }
    .messageContent {font: 24px "Lucida Console", monospace;}

    .eventItem {width:98%; line-height: 2; text-align: left; margin-left: 16px}
    .eventItem#eventDate {height: 28px; margin-top: 6px; color: #EEEEEE; font: 20px "Lucida Console", monospace; text-align: center}
    .eventItem#eventTitle {height: 64px; color: #EA9E22; font: 20px "Lucida Console", bold, monospace; text-align: center}
    .eventItem#eventLNURL {height: 64px}
    .eventItem > b {color: #64B0FF; font: 24px "Lucida Console", monospace}
    .eventReward {
        height:240px; width:240px;
        background-color: #fff;
        border: 4px solid transparent;
        border-image: url(images/UI/border_II.png) 4 round;
    }

    #updatePrev, #updateFwd {width: 64px; height: 32px}
    #updateSearch {width: 128px; height: 32px}

    .linkItem {width:98%; height: 52px; text-align: left; margin-top: 4px}
    .linkPic {width: 32px; height: 32px}

    .contentItem {width:98%; min-height: 96px; text-align: left; margin-left: 16px}
    .explorerItem {width:98%; min-height: 96px; text-align: left; margin-top: 12px}
    .explorerForm {width:98%; height: 64px; text-align: left; margin-top: 12px}
    .explorerStat {width:98%; height: 96px; text-align: center; margin-top: 4px}


    .pic {
        width: 216px;
        height: 216px;
        padding: 0px;
        border: 4px solid transparent;
        border-image: url(images/UI/border_II.png) 4 round;
        background-origin:border-box;
        background-size: 224px 224px
    }

    .boxMenu {
        display: flex;
        align-items: flex-start;
        width:320px;
    }
    #boxBody {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 1024px;
    }
        .boxEquip {
            display: flex;
            flex-direction: column;
            width:70%;
            min-width: 384px;
            height: 488px;
            margin: 8px 8px
        }
        #boxStat {
            display: flex;
            width:70%;
            min-width: 384px;
            height: 566px;
            margin: 8px 8px;
            align-items: top;
            cursor: pointer;
            user-select: none;
        }

    .boxInventory {
        display: flex;
        flex-direction: column;
        align-content:center;
        width:84%;
        min-width: 384px;
        min-height: 1008px;
        margin: 8px 8px
    }
        .boxLinkType {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            user-select: none;
            height: 120px
        }
        #boxLinkInventory {
            display: flex;
            flex-direction: column;
            align-content: space-between;
            user-select: none;
            min-height: 800px
        }
        .boxLinkDesc {
            display: flex;
            height: 224px;
            margin-top: 20px;
        }

        .boxInventoryTitle {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            user-select: none;
            height: 64px
        }
        .boxStandardInventory {
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            user-select: none;
            height: 297px
        }
        .boxEventInventory {
            display: flex;
            flex-direction: column;
            align-content: space-between;
            user-select: none;
            height: 840px;
        }
        .boxEventSelection {
            display: flex;
            align-content: space-between;
            height: 112px;
            margin-top: 20px;
        }
        .boxEventReward {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            width: 100%;
            height: 1px
        }
        .boxEventInventory.item {width: 100%;}
        .boxEventQR {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 48px;
            width: 100%;
        }
    
    #popup {
        display: none;
        position: fixed;
        top: 25%;
        left: 10%;
        width: 80%;
        height: 32%;
        background-color: white;
        z-index: 10
    }
}

@media all and (min-width: 1400px) {
    pre, span {color: #EEEEEE; font: 24px "Lucida Console", monospace}

    .sound {cursor: pointer; width: 30px; height: 28px}
    .icon {height:32px; width:32px; position:relative; top:3px}

    .timestamp {color: #EEEEEE; font: 16px "Lucida Console", monospace}
    .timestamp_II {color: #EEEEEE; position: relative; top: -8px; height: 28px; font: 20px "Lucida Console", monospace} 

    .updateItem {width:98%; line-height: 1.5; text-align: left; margin-left: 16px}
    .updateItem#title {height: 72px; margin-top: 12px; color: #EA9E22; font: 32px "Lucida Console", bold, monospace}
    .updateItem#date {height: 48px; color: #64B0FF; font: 24px "Lucida Console", monospace}
    .updateItem#message {height: 254px}
    .updateItem#sig {height: 30px; text-align: end}
    .updateItem#updateNav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 32px;
        margin-right: 16px;
    }

    .linkPic {width: 32px; height: 32px}

    .pic {
        width: 216px;
        height: 216px;
        border: 4px solid transparent;
        border-image: url(images/UI/border_II.png) 4 round;
        background-origin:border-box;
        background-size: 224px 224px
    }
    
    .boxMenu {                  /*---!!!!!!!!!!!!!!!---*/
        display: flex;
        align-items: flex-start;
        min-width:320px;
        user-select: none;
    }
        #boxStat {                  /*---!!!!!!!!!!!!!!!---*/
            display: flex;
            width:40%;
            min-height: 504px;
            margin: 8px 8px;
            align-items: top;
            cursor: pointer;
            user-select: none;
        }

    .boxInventory {                 /*---!!!!!!!!!!!!!!!---*/
        display: flex;
        flex-direction: column;
        align-content:center;
        width:84%;
        min-width: 800px;
        height: 516px;
        margin: 8px 8px
    }
        .boxLinkType, #boxInventoryTitle {              /*---!!!!!!!!!!!!!!!---*/
            display: flex;
            justify-content: space-around;
            align-items: center;
            user-select: none;
            height: 36px
        }
        #boxLinkInventory {         /*---!!!!!!!!!!!!!!!---*/
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            user-select: none;
            height: 327px
        }
        .boxLinkDesc {              /*---!!!!!!!!!!!!!!!---*/
            display: flex;
            height: 96px;
            margin-top: 12px;
        }
    
        .boxStandardInventory {    /*---!!!!!!!!!!!!!!!---*/
            display: flex;
            flex-direction: column;
            align-content: flex-start;
            user-select: none;
            height: 445px
        }
}