/*FM additions
p {
   margin:0px 0px 0px 0px;
}

h1 {
   font-family: 'Swiss condensed bold';
   font-size: 12px;
   margin:3px 0px 2px 0px;
}
*/
.puzzlefooter {
   position: relative;
   width: 100%;
   max-width:500px;
   background-color: #ffffff;
   border-bottom:0;
   border-left:0;
   border-right:0;
   border-top:2px #C0C0C0 solid;
   color: #808080;
   text-align: center;
   height:auto;
   font-family:'swiss condensed';
   line-height:12px;
   font-size:10px;
   padding: 5px 0px 10px 0px;
   margin:10px auto 35px auto;
}

.footertxt {
   margin:0px 20px 0px 20px;
}

/* 
Margins and centring on the top-level div for the game menu */
#gamemenu {
text-align: center;
font-family:'swiss condensed bold';
font-size:20px;
color:white;
width:100%;
max-width:500px;
height:30px;
line-height:23px;
padding:0px 0px 0px 0px;
margin: 0px auto 0.0em auto;
}


/* Inside that div, the main menu bar and every submenu inside it is a <ul> */
#gamemenu ul {
    list-style: none;  /* get rid of the normal unordered-list bullets */
    /* make top-level menu bar items appear side by side */
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative; /* allow submenus to position themselves near parent */
    margin: 0;
    padding: 0;
    background-color: orange; 
}

/* Individual menu items are <li> elements within such a <ul> */
#gamemenu ul li {
    /* Add a little mild text formatting */
    font-weight: bold; font-size: 0.8em;
    /* Line height and padding appropriate to top-level menu items */
    padding-left: 0.0em; padding-right: 0.0em;
    padding-top: 0.2em; padding-bottom: 0.2em;
    margin: 0;
    /* Suppress the text-selection I-beam pointer */
    cursor: default;
    /* Surround each menu item with a border. */
    border: 0px solid rgb(180,180,180);
    /* Arrange that the borders of each item overlap the ones next to it. 
    margin: -0.5px;*/
}

#gamemenu ul li.disabled {
    /* Grey out menu items with the "disabled" class */
    color: rgba(0,0,0,0.5);
}

#gamemenu ul li.separator {
    color: transparent;
    border: 0;
}

#gamemenu ul li:hover {
    /* When the mouse is over a menu item, highlight it */
    background: rgba(0,0,0,0.1);
    /* Set position:relative, so that if this item has a submenu it can
     * position itself relative to the parent item. */
    position: relative;
}

#gamemenu ul li.disabled:hover {
    /* Disabled menu items don't get a highlight on mouse hover */
    background: inherit;
}

@media (max-width:18em) {
    /* Suppress some words in top-level menu items when viewport
     * is very small */
    .verbiage {
        display: none;
    }
}

#gamemenu ul ul {
    /* Second-level menus and below are not displayed by default */
    display: none;
    /* When they are displayed, they are positioned immediately below
     * their parent <li>, and with the left edge aligning */
    position: absolute;
    top: 100%;
    left: 0;
    /* Go back to vertical stacking, for drop-down submenus */
    flex-direction: column;
    /* We must specify an explicit background colour for submenus, because
     * they must be opaque (don't want other page contents showing through
     * them). */
    background: white;
    /* And make sure they appear in front. */
    z-index: 50;
}

#gamemenu ul ul.left {
    /* A second-level menu with class "left" aligns its right edge with
     * its parent, rather than its left edge */
    left: inherit; right: 0;
}

/* Menu items in second-level menus and below */
#gamemenu ul ul li {
    /* Inhibit wrapping, so the submenu will expand its width as needed. */
    white-space: nowrap;
    /* Override the text-align:center from above */
    text-align: left;
    /* Don't make the text any smaller than the previous level of menu */
    font-size: 100%;
}

#gamemenu ul ul ul {
    /* Third-level submenus are drawn to the side of their parent menu
     * item, not below it */
    top: 0; left: 100%;
}

#gamemenu ul ul ul.left {
    /* A submenu with class "left" goes to the left of its parent,
     * not the right */
    left: inherit; right: 100%;
}

#gamemenu ul li:hover > ul {
    /* Last but by no means least, the all-important line that makes
     * submenus be displayed! Any <ul> whose parent <li> is being
     * hovered over gets display:flex overriding the display:none
     * from above. */
    display: flex;
}

#gamemenu .tick {
    /* The tick next to a menu item, or its unselected equivalent. */
    padding-right: 0.5em;
    color: transparent;
}

#gamemenu .tick.selected {
    /* Tick for a selected menu entry. */
    color: inherit;
}

/* changef heigt from 1.2 to 1,5
#statusbar {
    overflow: hidden;
    height: 1.5em;
    text-align: left;
    background: #d8d8d8;
    border-left: 2px solid #d8d8d8;
    border-top: 2px solid #c8c8c8;
    border-right: 2px solid #d8d8d8;
    border-bottom: 2px solid #d8d8d8;
    padding:1px 0px 0px 5px;
    font-family:'swiss condensed';
}
*/

#dlgdimmer {
    width: 100%;
    height: 100%;
    background: #000000;
    position: fixed;
    opacity: 0.3;
    left: 0;
    top: 0;
    z-index: 99;
}

#dlgform {
    width: 66.6667vw;
    opacity: 1;
    background: #ffffff;
    color: #000000;
    position: absolute;
    border: 2px solid black;
    padding: 20px;
    top: 10vh;
    left: 16.6667vw;
    z-index: 100;
}

#dlgform h2 {
    margin-top: 0px;
}

#resizehandle {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    cursor: se-resize;
}
/*
#resizable {
    position: relative;
    left: 0;
    top: 0;
}
*/
#puzzlecanvas {
    display: block;
    width: 100%;
}

#statusbarholder {
    display: block;
}

#apology {
    padding: 0 1em 0 1em;
    margin: 1em;
    border: 2px solid red;
}

.apology-title {
    text-align: center;
}