body
{
    background-color:whitesmoke;
    font-family: sans-serif;
    overflow-x:auto;
}

em
{
    /* emphasis */
    font-weight: bold;
    font-size: larger;
}

#addToWaiting
{
    margin:auto;
    padding:10%;
}

#addToWaiting input
{
    width:200px;
}

#logo
{
    /*
    the organisation logo
    */
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:140px;
    padding:10px;
    background-image: linear-gradient(#922,whitesmoke);
    z-index: 2;
}

#logo img
{
    width:180px;
    margin:10px;
    margin-right:0px;
    z-index: 4;
}

#login
{
    /*
    the login area to contain username, password and forgotten password
    */
    position:fixed;
    top:0px;
    right:0px;
    z-index:3;
    height:120px;
    /*width: 400px;*/
    background-image: linear-gradient(#922,whitesmoke);
    margin: 0px;
    margin-bottom: 10px;
    padding:20px;
    padding-left: 0px;
}

#login .welcomeBack
{
    color:darkred;
    font-style: italic;
    font-family: Bitter;
    font-size: x-large;
    text-shadow: 1px 1px white;
    text-align:right;
    margin-top:20px;
    z-index: 1;
}

.inform
{
    margin-bottom:10px;
    z-index: 1;
}

.inform label
{
   /* width:10rem;*/
    text-align:right;
    /*margin-left: 140px;*/
    color:white;
}

.inform input
{
   /* width:10rem;*/
    text-align:center;
    margin-right: 10px;
    float:right;
}

.inform input.informSubmit
{
    background-color: darkred;
    color:white;
    border-width: thin;
    border-color: darkred;
    border-radius:5px;
    box-shadow: 3px 3px lightgrey;
   /* width:5rem;*/
}

.register
{
    height:50px;
    position:relative;
    width: 75%;
    top: 30px;
    margin:auto;
}

.register a
{
    text-align:center;
}

#menu
{
    /*
    the menu area
    */
    overflow-x: auto;
    display:flex;
    flex-direction: row;
    align-content:space-evenly;
    justify-items: center;
    text-align: center;
    position:fixed;
    left:0px;
    top:160px;
    width:100%;
    margin:0px;
    z-index: 3;
    background-color: whitesmoke;
    border-bottom: thin #922 solid;
    padding:5px;
}

#games
{
    /*
    the area to contain coming games panels
    */
    margin-top: 170px;
    overflow: auto;
    display:flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items:normal;
    background-color: whitesmoke;
}

#confirmDialog
{
    width:25rem;
    /*height: 15rem;*/
    margin:auto;
    margin-top:250px;
    border:thin darkred solid;
    border-radius: 10px;
    box-shadow: 5px 5px 5px darkred;
    background: white;
    padding:30px;
}

#confirmDialog input[type = "submit"]
{
    padding:10px;
    background-color: #922;
    color:white;
    border-radius: 10px;
    width:51%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

#confirmDialog input[type = "submit"]:active
{
    background-color: lightgrey;
    box-shadow: 0 5px #666;
    transform: translateY(3px);
}

.aboutcontent
{
    margin:5px;
    margin-top: 200px;
    position:relative;
    left:200px;
    width: calc(100% - 230px);
    overflow: auto;
    font-family: "Bitter";
    font-size:large;
    color:slategrey;

}

.aboutcontent details
{
    position:relative;
    left:0px;
    width:100%;
    float:left;
    margin:10px;
}

.aboutcontent details summary
{
    margin:10px;
    font-size: x-large;
}

.aboutcontent details p
{
    margin:10px;
}

.archiveGrid
{
    display: grid;
    color:slategrey;
    min-width: 800px;
    z-index:2;
    grid-template-columns: 2fr 3fr 3fr 2fr;
    grid-template-rows: min-content;
    grid-auto-rows: min-content;
    overflow:auto;
}

.archiveGrid .date
{
    border: solid thin black;
    display:grid;
    grid-column-start: 1;
    grid-column-end: 2;
    margin:5px;
    margin-right:0px;
    padding:5px;
    background-color: white;
    box-shadow: 5px 5px grey;
}

.archiveGrid .name
{
    border: solid thin black;
    display:grid;
    grid-column-start: 2;
    grid-column-end: 3;
    margin-top:5px;
    margin-bottom:5px;
    padding:5px;
    background-color: white;
    box-shadow: 5px 5px grey;
}

.archiveGrid .designer
{
    border: solid thin black;
    display:grid;
    grid-column-start: 3;
    grid-column-end: 4;
    margin-top:5px;
    margin-bottom:5px;
    padding:5px;
    background-color: white;
    box-shadow: 5px 5px grey;
}

.archiveGrid .venue
{
    border: solid thin black;
    display:grid;
    grid-column-start: 4;
    grid-column-end: 5;
    margin:5px;
    margin-left:0px;
    padding:5px;
    background-color: white;
    box-shadow: 5px 5px grey;
}

.content
{
    margin:10px;
    top: 200px;
    position:relative;
    width: 100%;
    overflow: auto;
    background-color:whitesmoke;
    font-family: "Bitter";
    font-size:large;
    color:darkred;
}

.content h1
{
    font-size:x-large;
    font-weight: bold;
    font-style: italic;
    text-shadow: 2px 2px white;
}

.content h2
{
    font-size:large;
    font-weight: bold;
    font-style: normal;
}

.content summary
{
    margin:10px;
}

.content details ul
{
    position:relative;
    left:10px;
    margin:10px;
}

.content details li
{
    position:relative;
    left:20px;
    margin:10px;
}

.gamePanel
{
    min-height:250px;
    min-width:800px;
    /*width:calc(100% - 230px);*/
    border: solid thin darkred;
    border-radius: 10px;
    margin:5px;
    margin-top: 35px;
   /* left:200px;*/
    box-shadow: 5px 5px 5px darkred;
    background: white;
    position:relative;
    padding:10px;
    overflow: auto;
}

.gameGrid
{
    display: grid;
    min-width: 800px;
    z-index:2;
    grid-template-columns: 1fr 1fr;
    grid-template-rows:50px repeat (8 fr);
}

.gamePanel .gameImage
{
    display:grid;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    border: solid thin slategrey;
    box-shadow: 5px 5px 5px grey;
    border-radius: 10px;
    margin:auto;
    vertical-align: top;
}

.gamePanel .gameDescription
{
    font-size: large;
    color: rgb(88,0,0);
    font-family: "Bitter";
    font-weight: normal;
    display:grid;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 9;
    padding:5%;
    min-width: 15rem;
    max-height: 200px;
    align-self: center;
    border:#922 inset;
    border-radius: 10px;
    background-color:#fff8f8;
    box-shadow: #666 5px 5px;
    margin:10px;
    overflow-y:auto;
}

.gamePanel .gameTitle
{
    font-size:24px;
    font-weight:bold;
    color:darkred;
    text-shadow: 1px 1px slategrey;
    display:grid;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: center;
    vertical-align: top;
    padding:10px;
}

.gamePanel .gameDesigner
{
    font-style: italic;
    display:grid;
    color:darkred;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top:60px;
    text-align: center;
    font-size:medium;
    padding:10px;
}

.gamePanel .gameDate
{
    font-size:22px;
    color:darkred;
    display:grid;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top:140px;
    text-align: center;
    padding:10px;
}

.gamePanel .gameVenue
{
    font-size:20px;
    font-style: italic;
    color:darkred;
    display:grid;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top: 190px;
    text-align: center;
    padding:10px;
}

.gamePanel .gamePrice
{
    display:grid;
    font-size:20px;
    color:darkred;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top:240px;
    text-align: center;
    padding:10px;
}

.gamePanel .gameStatus
{
    display:grid;
    color:darkred;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;

    margin-top:5px;
    margin-bottom:0px;
    text-align: center;
}

.gamePanel .gamePlaces
{
    display:grid;
    color:rgb(100,100,110);
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-top: 110px;
    text-align: center;
}

.gamePanel .gameButton #castListNotPublished
{
    display:grid;
    color:darkred;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    margin-bottom:30px;
    margin-top: 0px;
    justify-content:center;
}

.gamePanel .gameBook
{
    display:grid;
    color:darkred;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    margin:auto;
    margin-bottom: 5px;
    justify-content: center;
    text-align: center;
    padding:20px;
    padding-top:0px;
    padding-bottom:0px;
}

.gamePanel .gameButton
{
    display:grid;
    color:rgb(100,100,110);
    width:90%;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 9;
    margin:auto;
    margin-top:10px;
}

.gamePanel .gameButton label
{
    float:left;
    margin:5px;
    margin-right:0px;
    width:25%;
}

.gamePanel .gameButton input
{
    float:right;
    width:70%;
    margin:5px;
    margin-top:2px;
    border:#922 solid;
    padding:3px;
}

.gamePanel .gameButton input[type="submit"]
{
    background-color: #922;
    width:20%;
    color:white;
    border-radius: 10px;
    margin:5px;
    float:right;
}

.gamePanel .gameButton input[type = "submit"]:active
{
    background-color: lightgrey;
    box-shadow: 0 5px #666;
    transform: translateY(5px);
}

.gamePanel .gameButton p
{
    width:65%;
    min-width: 300px;
    margin:5px;
    float:left;
    max-height: 100px;
    overflow-y:auto;
}

.gamePanel .gameButton #PayPalButton form
{
    width:60%;
    min-width: 250px;
    margin:auto;
    margin-left:calc(20% - 80px);
}

.gamePanel .gameButton #PayPalButton
{
    width:100%;
}

.gamePanel .gameButton #saveNotesAndPreferences form
{
    width:30%;
    float:right;
    min-width: 150px;
}

.maker
{
    width:200px;
    height:200px;
    float:left;
    color:black;
    margin:5px;
    border-radius: 10px;
}

.maker p
{
    color:black;
    width:200px;
    margin-left:auto;
    margin-right:auto;
    font-size:x-large;
    text-align:center;
    font-style:bold;
    text-shadow:2px 2px white;
    line-height:2;
    display: inline-block;
    vertical-align: middle;
}

.menuitem
{
    display:flex;
    width:10%;
    min-width:5.5em;
    background-color: whitesmoke;
    text-align: center;
}
.menuitem a
{
    display:flex;
    font-family:Bitter;
    font-size: medium;
    color:slategrey;
    text-decoration: none;
    text-shadow: 1px 1px rgb(186, 12, 12);
    margin:auto;
}

.menuitem img
{
    display:flex;
    width:40px;
    height:40px;
    margin-left:5px;
    justify-self: left;
    background-image: radial-gradient(slategrey,whitesmoke);
}

.intro
{
    margin:50px;
    margin-left: 7.5%;
    margin-right:7.5%;
    color: rgb(63, 73, 83);
}

.content input[type = "submit"]
{
    font-size: x-large;
    color:darkred;
    margin:20px;
    margin-left: calc(50% - 50px);
    padding:10px;
    padding-left:30px;
    padding-right: 30px;
    box-shadow: 5px 5px 10px gray;
    border:thin solid darkred;
    background-color: whitesmoke;
    border-radius: 10px;
}

.content input[type = "submit"]:active
{
    background-color: lightgrey;
    box-shadow: 0 5px #666;
    transform: translateY(5px);
}

.profilePanel
{
    width:80% ;
    min-width: 600px;
    border: solid thin darkgrey;
    border-radius: 10px;
    margin-bottom:35px;
    margin-left:5%;
    box-shadow: 5px 5px 5px darkgray;
    background: white;
    padding:20px;
    overflow: auto;
}

#changePhoto
{
    font-size: large;
    color:darkred;
    padding:10px;
    padding-left:30px;
    padding-right: 30px;
    background-color: whitesmoke;
    border-radius: 10px;
    width:300px;
    height:50px;
    margin:auto;
    margin-top:10px;
    display:flex;
    flex-direction:column;
    border: black thin solid;
    border-radius: 10px;
    box-shadow: 5px 5px 5px darkgray;
}

.profilePanel label
{
    width:96%;
    margin-left:2%;
    margin-right:2%;
    margin-top: 5px;
    font-size: large;
    display:flex;
    flex-direction:column;
}

.profilePanel input[type = "text"],
.profilePanel input[type = "email"],
.profilePanel input[type = "tel"],
.profilePanel input[type = "password"]
{
    width:calc(96% - 100px);
    margin-left:calc(2% + 50px);
    margin-right:calc(2% + 50px);
    font-size: large;
    display:flex;
    flex-direction:column;
}

.profilePanel input[type = "image"]
{
    width:300px;
    height:300px;
    margin:auto;
    display:flex;
    flex-direction:column;
    border: black thin solid;
    border-radius: 10px;
    box-shadow: 5px 5px 5px darkgray;
}

.profilePanel .explanation
{
    font-style: italic;
    font-size: medium;
    font-family: Tahoma, sans-serif;
    color:#555;
}

#profile
{
    margin-top:0px;
    position:relative;
    top:0px;
}