/*  /////////////////////////////////////////////////////////////////// */
/*  screen wrapper */
/*  /////////////////////////////////////////////////////////////////// */
    #home-char-wrapper
    {
        top:0;
        position:absolute;
        width:100%;
        height:100%;
        z-index: 1000;
        margin:auto;
        padding:0;
    }
    #home-char-wrapper-background
    {
        display:block;
        top:0;
        left:0;
        position:absolute;
        width:100%;
        height:100%;
        z-index: 0;
        margin:auto;
        padding:0;
    }

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  char creation : page 1 */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* form elements for character name, gender, race and short status text */
    #home-char-creation-input-name
    {
        width:520px;
        height:40px;
        left:40px;
        top:390px;
        position:absolute;
        display:block;
        background-color: #4ba64b;
    }
    #home-char-creation-select-gender
    {
        width:250px;
        height:40px;
        left:313px;
        top:470px;
        position:absolute;
        display:block;
        background-color: #4ba64b;
    }
    #home-char-creation-select-race
    {
        width:250px;
        height:40px;
        left:42px;
        top:470px;
        position:absolute;
        display:block;
        background-color: #4ba64b;
    }

/*  character stats table */
    #home-char-creation-container-stats
    {
        width:520px;
        /*height:190px;*/

        left:40px;
        top:550px;
        position:absolute;
        display:block;
        background-color: rgba(0, 0, 0, 0.04);


        height: auto;

    }
    #home-char-creation-button-roll-stats
    {
        width:100px;
        background-color: black;
        color: rgba(255,255,255,0.5);
        font-weight: bold;
        display: block;
        position:relative;
        height:30px;
        margin: auto;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
    }
    #home-char-creation-button-roll-stats:hover
    {
        color: white;
        cursor: pointer;
    }

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  char creation : page 2 */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  char creation : page 3 */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  char creation : page 4 */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/*  form elements for the family name and the backstory */
    #home-char-creation-input-family-name
    {
        width:520px;
        height:40px;
        left:40px;
        top:140px;
        position:absolute;
        display:block;
        background-color: #4ba64b;
    }
    #home-char-creation-text-status
    {
        width:520px;
        height:100px;
        left:40px;
        top:220px;
        position:absolute;
        display:block;
        background-color: #4ba64b;
    }
    #home-char-creation-text-lore
    {
        width:520px;
        height:350px;
        left:40px;
        top:360px;
        position:absolute;
        display:block;
        background-color: #4ba64b;
    }

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  char creation : portrait selector */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
    #home-char-portrait-select-component
    {
        width:100%;
        height:300px;
        display: block;
        position: absolute;
        background-color: #8610c1;
        top:48px;
        left:0;
        border: 2px solid white;
        overflow: hidden;
    }
    .home-char-portrait
    {
        width:250px;
        height:300px;
        display: block;
        background-color: black;
        position: absolute;
        inset:0;
        overflow: hidden;
        margin:auto;
    }
    .home-char-portrait img
    {
        background-size: cover;
        width: 100%;
        height: 100%;
    }
    .home-char-portrait-button-next
    {
        width:50px;
        height:50px;
        border-radius: 30px;
        position: absolute;
        top:100px;
        right: 30px;
        text-align: center;
        line-height: 50px;
        background-color: #000000;
        user-select: none;
        cursor: pointer;
    }
    .home-char-portrait-button-prev
    {
        width:50px;
        height:50px;
        border-radius: 30px;
        position: absolute;
        top:100px;
        left: 30px;
        text-align: center;
        line-height: 50px;
        background-color: #000000;
        user-select: none;
        cursor: pointer;
    }

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  char creation : start location selector */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
    #home-char-location-select-component
    {
        width:100%;
        height:500px;
        display: block;
        position: absolute;
        background-color: #8610c1;
        top:48px;
        left:0;
        border: 2px solid white;
        overflow: hidden;
    }
    .home-char-location
    {
        width:250px;
        height:300px;
        display: block;
        background-color: black;
        position: absolute;
        inset:0;
        overflow: hidden;
        margin:auto;
    }
    .home-char-location img
    {
        background-size: cover;
        width: 100%;
        height: 100%;
    }
    .home-char-location-description
    {
        color:green;
        font-family: arial, serif;
        font-size: 25px;
    }
    .home-char-location-button-next
    {
        width:50px;
        height:50px;
        border-radius: 30px;
        position: absolute;
        top:100px;
        right: 30px;
        text-align: center;
        line-height: 50px;
        background-color: #000000;
        user-select: none;
        cursor: pointer;
    }
    .home-char-location-button-prev
    {
        width:50px;
        height:50px;
        border-radius: 30px;
        position: absolute;
        top:100px;
        left: 30px;
        text-align: center;
        line-height: 50px;
        background-color: #000000;
        user-select: none;
        cursor: pointer;
    }

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  char creation : start job selector */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
    #home-char-job-select-component
    {
        width:100%;
        height:300px;
        display: block;
        position: absolute;
        background-color: #8610c1;
        top:48px;
        left:0;
        border: 2px solid white;
        overflow: hidden;
    }
    .home-char-job
    {
        width:250px;
        height:300px;
        display: block;
        background-color: black;
        position: absolute;
        inset:0;
        overflow: hidden;
        margin:auto;
    }
    .home-char-job img
    {
        background-size: cover;
        width: 100%;
        height: 100%;
    }
    .home-char-job-button-next
    {
        width:50px;
        height:50px;
        border-radius: 30px;
        position: absolute;
        top:100px;
        right: 30px;
        text-align: center;
        line-height: 50px;
        background-color: #000000;
        user-select: none;
        cursor: pointer;
    }
    .home-char-job-button-prev
    {
        width:50px;
        height:50px;
        border-radius: 30px;
        position: absolute;
        top:100px;
        left: 30px;
        text-align: center;
        line-height: 50px;
        background-color: #000000;
        user-select: none;
        cursor: pointer;
    }

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  char creation : shared */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/*  title at the top of every page in the panel */
    .home-char-creation-title
    {
        width:600px;
        height:100px;
        left:0;
        top:0;
        position:absolute;
        display:block;
        background-color: #b7061e;
        text-align: center;
    }
/*  form buttons for page control */
    .home-char-creation-button-next-page
    {
        top:780px;
        width:250px;
        right:40px;
        display:block;
        position:absolute;
    }
    .home-char-creation-button-prev-page
    {
        top:780px;
        width:250px;
        left:40px;
        display:block;
        position:absolute;
    }
/*  form button submit */
    .home-char-creation-button-done
    {
        top:793px;
        width:300px;
        left:188px;
        display:block;
        position:absolute;
    }

/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  TODO : char selection : creation menu */
/*  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/*  selection container */
    #char-select-container
    {
        width: 100%;
        height: 300px;
        background-color: transparent;
        display: block;
        text-align: center;
    }
/*  selection cards */
    .char-select-card
    {
        width: 200px;
        height: 300px;
        display: inline-flex;
        position: relative;
        background-color: rgba(23, 23, 23, 0.84);
        margin-right: 20px;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: rgba(0, 0, 0, 0.1) 0 19px 38px, rgba(0, 0, 0, 0.1) 0 15px 12px;
        transition: transform 0.2s , box-shadow 0.2s ;
    }
    .char-select-card:hover
    {
        transform:scale(1.05);
        box-shadow: rgba(0, 0, 0, 0.6) 0 19px 38px, rgba(0, 0, 0, 0.22) 0 15px 12px;
    }





























/*  /////////////////////////////////////////////////////////////////// */
/*  wip  */
/*  /////////////////////////////////////////////////////////////////// */

#char-event-container
{
    width:800px;
    height:400px;
    position: absolute;
    left:80px;
    top:110px;
    display: block;
    margin:auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #4ba64b;
    border-radius: 6px;
}
/* the region of the world the player is currently in */
#char-header-region-container
{
    width:600px;
    height:45px;
    left:175px;
    top:0;
    display: block;
    position:absolute;
    background: #202020;
    text-align: center;
    line-height: 45px;
}
/* the area the player is currently in */
#char-header-area-container
{
    width:400px;
    height:20px;
    left:275px;
    top:50px;
    display: block;
    position:absolute;
    background: #202020;
    border-radius: 40px;
    text-align: center;
    line-height: 20px;
}
#char-header-field-container
{
    width:400px;
    height:30px;
    left:275px;
    top:75px;
    display: block;
    position:absolute;
    background: #202020;
    border-radius: 40px;
    text-align: center;
    line-height: 30px;
}
#char-actor-header-container
{
    width:400px;
    height:40px;
    left:275px;
    top:490px;
    display: block;
    position:absolute;
    background: #202020;
    border-radius: 40px;
    text-align: center;
    line-height: 40px;
}
#char-text-container
{
    position: absolute;
    top:550px;
    right:30px;
    margin:0;
    width:900px;
    height: 250px;
    padding: 0;
    background: #202020;
    opacity: 1.0;
    display: block;
    z-index: 100;
    border-radius: 4px;
}