#gridBody{
    color:#efefef;

    display: grid;
    height:100vh;
    grid-template-areas:
        'header'
        'content'
        'footer';
    grid-template-rows: 50px calc(100vh - 50px - 100px) 100px;
}
#gridHeader{
    grid-area: header;
    background-color: #202020;

    display: grid;
    grid-template-areas:
        '.  logo   navigation   login  .';
    grid-template-columns: 30px 200px auto 100px 30px;
}
    #headerLogo{
        grid-area: logo;
    }
    #headerNavigation{
        grid-area: navigation;

        display: grid;
        grid-template-areas:'main character talentascension item map';
        grid-template-columns: 2fr 2fr 3fr 2fr 2fr;
    }
        .headerNavigationItem{
            line-height: 50px;
        }
        .headerNavigationItem:hover{
            font-weight:bold;
            text-decoration:underline;
            background-color:#181818;
            background-image: url("../images/paimon02_h50.png");
            background-repeat: no-repeat;
            background-position: left;
        }

    #headerLogin{
        grid-area: login;
    }

#gridContent{
    grid-area: content;
    background-color:#181818;
    overflow-y: auto;

    display: grid;
    grid-template-areas:
        '.  . .'
        '.  content .'
        '.  . .';
    grid-template-columns: 30px auto 30px;
    grid-template-rows: 10px auto 10px;
}
    #content{
        grid-area: content;
        position: relative;
    }

#gridFooter{
    grid-area: footer;
    background-color: #202020;

    display: grid;
    grid-template-areas:
        '. left center right    .';
    grid-template-columns: 30px 300px auto 300px 30px;
}
    #footerLeft{
        grid-area: left;
    }
        #footerLeft p{
            text-align: middle;
        }
    #footerCenter{
        grid-area: center;
    }
    #footerRight{
        grid-area: right;
    }
        #footerRight p{
            padding:10px 10px
        }

#gridMainNavigator{
    grid-area: navigator;
    position: sticky;top: 0;
    z-index:9997;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: auto 150px 170px 130px 180px auto;
}
    #gridMainNavigator p{line-height: 40px;font-size:16px;}
    #Navigator1{grid-column: 2;}
    #Navigator2{grid-column: 3;}
    #Navigator3{grid-column: 4;}
    #Navigator4{grid-column: 5;}


#mask{
    background-color:#333333;
    z-index:9998;
    top:0px;
    left:0px;
}
#message{
    background-color:#efefef;
    z-index:9999;
    padding:20px;
    padding:20px;
    border:#cccccc solid 1px;
}
#message_detail{
    width:400px;
}
#message_detail .img_close{
    top:20px;
    right:20px;
}

#content{height:100%;}