/*
 User Interface Layout
 Layer 0: Body
 Layer 1: Dark Layer
 Layer 2: Drawer Menu
 Layer 3: Dark Layer .config
 Layer 4: Config Window
*/

button.button-submenu::before
{
content: ' ';
display: inline-block;
width: max(21px, 1.31rem );
height: max( 19px, 1.19rem );
background-image: url( "../i/logo-layer-folder.svg" );
background-position: -1.8rem -1.3rem;
background-size: 285% 285%;
margin-right: 5px;
}

/* Default & Closed States */
#button-nav-main
{
 display: block;
 position: fixed;
 left: 2px;
 top: 2px;
 border: 0;
 padding: 30px 5px 5px 5px;
 box-shadow: 0 0 5px #000;
 line-height: 1.2rem;
 font-size: 1rem;
 font-weight: 700;
 text-transform: uppercase;
 cursor: pointer;
 z-index: 2;
 transition: all 200ms;
 color: #fff;
}
#button-nav-main svg rect
{
	fill: #fff;
}
#button-nav-main::before
{
 display: block;
 margin-top: 5px;
 margin-bottom: 0;
 content: "Open";
 font-size: 1rem;
}
#button-nav-main:hover,
#button-nav-main:focus
{
 background: rgba( 40, 40, 40, 0.7 );
 top: 0px;
 padding: 32px 7px 8px 7px;
 box-shadow: 0 0 10px rgba( 0, 0, 0, 0.5 );
}
#button-nav-main:not(.open):hover
{
 left: 0px;
}
#button-nav-main:focus,
#nav-main a:focus,
#nav-main ul button:focus,
#access-controls h2:focus,
#access-controls select:focus,
#access-controls button:focus
{
 border-left: 5px solid #cc0;
}
#button-nav-main svg
{
 display: block;
 position: absolute;
 top: 0;
 left: calc( 50% - 25px );
 height: 37px;
 width: 50px;
}
#button-nav-main svg rect
{
 position: relative;
 transition: all 300ms;
 transition-delay: 500ms;
}
#button-nav-main rect:first-child
{
 transform-origin: 15px 12.5px;
}
#button-nav-main rect:nth-child(2)
{
 transform-origin: 35px 12.5px;
}
#button-nav-main rect:nth-child(3)
{
 transform-origin: 15px 24.5px;
}
#button-nav-main rect:last-child
{
 transform-origin: 35px 24.5px;
}
#nav-main
{
 position: fixed;
 top: 0;
 bottom: 0;
 left: -1px;
 width: 0;
 max-width: 200px;
 overflow-y: auto;
 z-index: 2;
 transition: width 200ms;
}
#nav-main a,
#nav-main ul button
{
 display: block;
 width: 100%;
 padding: 0.8rem 0;
 font-size: 1rem;
 transition: all 200ms;
}
#nav-main ul button
{
 border: 0;
 text-align: left;
 cursor: pointer;
}
#nav-main ul ul
{
 display: none;
}
#nav-main ul ul a
{
 padding-left: 2rem;
}
#draw-dark
{
 position: fixed;
 z-index: 1;
}
#access-controls
{
 position: absolute;
 top: -50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 width: 100%;
 max-width: 500px;
 max-height: 100vh;
 border-radius: 4px;
 padding: 1rem;
 box-shadow: 0 0 3px #000;
 overflow-y: auto;
 z-index: 4;
 transition: top 200ms;
}
#access-controls h2
{
 border-left: 0;
 transition: all 200ms;
}
#save-exit
{
 font-size: 0;
}
form select,
form button
{
 margin-top: 20px;
 font-size: 1rem;
}
form select
{
 border-top: 0;
 border-left: 0;
 border-right: 0;
 padding-left: 1rem;
 padding-right: 1rem;
 background: transparent;
}
form button
{
 display: inline-block;
 border: 1px solid #ddd;;
 padding: 10px;
 width: 49%;
}
#buttonAccessSave
{
 margin-right: 1%;
}
#access-controls p
{
 margin-top: 1rem;
 font-size: 1rem;
}

/* Active & Open States */
#button-nav-main.open
{
 left: 202px;
}
#button-nav-main.open::before
{
 content: "Close";
}
#button-nav-main.open:hover
{
 left: 200px;
}
#button-nav-main.open rect:first-child
{
 transform: rotate(45deg) translate(3px,-3px);
}
#button-nav-main.open rect:nth-child(2)
{
 transform: rotate(-45deg) translate(-3px,-3px);
}
#button-nav-main.open rect:nth-child(3)
{
 transform: rotate(-45deg) translate(3px,3px);
}
#button-nav-main.open rect:nth-child(4)
{
 transform: rotate(45deg) translate(-3px,3px);
}
#nav-main.open
{
 width: 100%;
}
#nav-main.open ul button,
#nav-main.open a
{
 padding: 0.8rem 1rem;
}
#nav-main.open a
{
 color: #ffc;
}
#nav-main ul button.open+ul
{
 display: initial;
}
#nav-main ul button.open+ul a
{
	background: rgba(0, 120, 100, 0.3);
}
#draw-dark.open
{
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}
#access-controls.open
{
 top: 50%;
}
#access-controls h2:focus
{
 padding-left: 1rem;
}
#draw-dark.config
{
 z-index: 3;
}

/* Coloring - Default (Dark) */
.dark
{
 background: #000500;
}
#button-nav-main
{
 background: #111;
}
.dark,
.dark #button-nav-main,
.dark #button-nav-main::before,
.dark #nav-main ul button,
.dark #nav-main a
{
 color: #ddd;
}
#button-nav-main:active
{
 background: rgba( 0, 0, 0, 0.95 );
}
.dark #button-nav-main rect
{
 stroke: #ddd;
 fill: #ddd;
}
#nav-main
{
 background: rgba(0, 100, 80, 0.3);
 border-right: 1px solid #0d8;
}
#nav-main ul button
{
 background: #043;
 text-shadow: 0 0 2px #000,
  -1px -1px 0 #000,
   1px  1px 0 #000,
   1px -1px 0 #000,
  -1px  1px 0 #000,
   0   -1px 0 #000,
   0    1px 0 #000,
 -1px   0   0 #000,
  1px   0   0 #000;
  color: #ddd;
}
#draw-dark.open
{
 background: rgba( 0, 0, 0, 0.8 );
}
#access-controls
{
 background: #2F2F2F;
}
#access-controls select
{
 color: #ddd;
}
#access-controls option
{
 background: #111;
}
#access-controls button
{
 background: #444;
 color: #fff;
}
.dark form button
{
 border: 1px solid #fff;
}
.dark form select
{
 border-bottom: 1px solid #fff;
}

/* Coloring - Bright (trend towards orange, here) */
body.bright
{
 background: #fed;
}
.bright #button-nav-main
{
 background: #ccc;
}
.bright #button-nav-main:active
{
 background: rgba( 255, 255, 255, 0.95 );
}
.bright #nav-main
{
 background: #ea0;
}
.bright #nav-main ul button
{
 background: #fb1;
}
.bright #nav-main ul button
{
 font-weight: 900;
 text-shadow: 0 0 5px #fff,
  0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff,
  -1px -1px 0 #fff,
   1px  1px 0 #fff,
   1px -1px 0 #fff,
  -1px  1px 0 #fff,
   0   -1px 0 #fff,
   0    1px 0 #fff,
 -1px   0   0 #fff,
  1px   0   0 #fff;
}
.bright #nav-main a
{
 color: #000;
 font-weight: 900;
}
.bright #draw-dark.open
{
 background: rgba( 255, 255, 255, 0.8 );
}
.bright #access-controls
{
 background: #BFBFBF;
}
.bright #access-controls select
{
 color: #222;
}
.bright #access-controls option
{
 background: #ddd;
}
.bright #access-controls button
{
 background: #ccc;
 color: #000;
}
.bright form select
{
 border-bottom: 1px solid #000;
}
.bright form button
{
 border: 1px solid #222;
}
.bright #button-nav-main:focus,
.bright #nav-main a:focus,
.bright #nav-main button:focus,
.bright #access-controls h2:focus,
.bright #access-controls select:focus,
.bright #access-controls button:focus
{
 border-left: 5px solid #22b;
}

/* main wrapper stuff */
/* main-wrapper and the content inside */
#main-wrapper
{
 width: 100%;
 min-width: 200px;
 transition: all 300ms;
}
#main-wrapper p a
{
 padding-left: 1px;
 padding-right: 1px;
 font-weight: 600;
 transition: all 0.2s;
}
#main-wrapper p a:before
{
 display: inline-block;
 content:'🔗';
 padding-right: 2px;
 text-decoration: none;
}
h1#global-title a:focus,
#main-wrapper p a:focus
{
 text-decoration-color: #090;
}
h1#global-title,
article h2,
#main-wrapper p
{
 width: 50%;
 min-width: 200px;
 margin: 0 auto;
 transition: all 0.3s;
}
h1#global-title
{
 font-size: 4rem;
 padding: 10px;
 letter-spacing: -3px;
}
h1#global-title a
{
 transition: all 0.1s;
}
#main-wrapper h2
{
 margin-top: 20px;
 margin-bottom: 2rem;
 font-size: 2.4rem;
}
#main-wrapper h2 author
{
 font-size: 80%;
 display: block;
 text-align: right;
}
#main-wrapper p
{
 font-size: 1.25rem;
 padding: 0.5em 1em 0.5em 1em;
 line-height: 1.8rem;
 transition: all 0.2s;
}
#main-wrapper article
{
 padding-bottom: 2em;
}
/** Dark Colors **/
.dark h1#global-title a:focus
{
 color: #e0e0e0;
}
.dark h1#global-title a
{
 color: #c0c0c0;
 text-shadow: 0 0 5px rgba( 0, 0, 70, 0.5);
}
.dark #main-wrapper h2
{
 color: #ccc;
}
.dark #main-wrapper p
{
 color: #bbd4d4;
}
.dark #main-wrapper p a
{
 color: #00e0e0;
}
.dark #main-wrapper p a:focus
{
 background: #001;
 color: #fff;
}
/* Bright Colors */
.bright h1#global-title a
{
 color: #000;
 text-shadow: 0 0 5px rgba( 255, 250, 240, 0.5);
}
.bright #main-wrapper p a
{
 color: #c06000
}
.bright h1#global-title a:focus,
.bright #main-wrapper p a:focus
{
 text-decoration-color: #22b;
}