#content{
    display: grid;
    grid-template-areas:'list detail';
    grid-template-columns: 160px auto;
}
    #characterList{
        grid-area: list;
        position: absolute;
        width:160px;
        height:100%;
        overflow-x:auto;
    }
        .characterList{
            padding : 5px;
            background-repeat: no-repeat;
            background-position: center center;
            display: grid;
            height: 110px;
            grid-template-areas:
                'name'
                '.'
                'starElement';
            grid-template-rows: 20px auto 20px;

        }
            .characterListName{
                grid-area: name;
                line-height: 20px;
                background-color:rgba(0, 0, 0, 0.5);
            }
                .characterListName img{
                    height:17px;
                }
            .characterListStarElement{
                grid-area: starElement;
                line-height: 20px;
                background-color:rgba(0, 0, 0, 0.8);
            }

    #characterDetail{
        grid-area: detail;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 250px;

        display: grid;
        grid-template-areas:
            'profile    ascent  .'
            'profile    talent  .'
            'profile    .       .';
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        grid-template-rows: 165px 165px auto;
        grid-template-columns: auto 300px 200px;
    }
        #profile{
            padding:10px;
            grid-area: profile;
            background-color:rgba(0, 0, 0, 0.5);
        }
        #ascentMaterials{
            grid-area: ascent;
            padding:10px;

            display: grid;
            grid-template-areas:
                'title  seeDetail'
                'items1 items1'
                'items2 items2';
            grid-template-columns: 200px auto;
            grid-template-rows: 25px 60px 60px;
            background-color:rgba(0, 0, 0, 0.5);
        }
            #ascentMaterialsTitle{grid-area: title;line-height: 25px;}
            #ascentMaterialsSeeDetail{grid-area: seeDetail;position: relative;}
                #ascentMaterialsSeeDetail p{position: absolute;bottom: 5px;right:0px}
            #ascentMaterialsItems1{grid-area: items1;}
            #ascentMaterialsItems2{grid-area: items2;}
                #ascentMaterials img{max-height:60px;max-width:70px}

            #ascentDetailTable img{height:30px;}
            #ascentDetailTable p{line-height: 30px;}

        #talentMaterials{
            grid-area: talent;
            padding:10px;

            display: grid;
            grid-template-areas:
                'title'
                'items1'
                'items2';
            grid-template-rows: 25px 60px 60px;
            background-color:rgba(0, 0, 0, 0.5);
        }
            #talentMaterialsTitle{grid-area: title;line-height: 25px;}
            #talentMaterialsItems1{grid-area: items1;}
            #talentMaterialsItems2{grid-area: items2;}
                #talentMaterials img{max-height:60px;max-width:70px}

            #talentDetailTable img{height:30px;}
            #talentDetailTable p{line-height: 30px;}