body {
    color: #ccc;
    background-color: #111;
    font-family: Questrial, sans-serif;
}

a { color: #AEE; }

a:hover,
a:focus {
    color: #ABC;
}

a:link, a:visited { text-decoration: none; }


a:hover, a:active { text-decoration: underline; }

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/* Add transition to containers so they can push in and out. */
#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

/* This is the parent `<div>` that contains the menu and the content area. */
#layout {
    position: relative;
    left: 0;
    padding-left: 1.5em;
}

#layout.active #menu {
    left: 150px;
    width: 150px;
}

#layout.active .menu-link {
    left: 150px;
}

img {
    max-width: 100%;
}

/* The content `<div>` is where all your content goes. */
.content {
    margin: 0 auto;
    padding: 0 1em;
    max-width: 1024px;
    margin-bottom: 50px;
    line-height: 1.2em;
}

.click_here {
    position: absolute;
    visibility: hidden;
}

.header {
    margin: 0;
    font-size: 18pt;
    color: #DDD;
    text-align: center;
    padding: 0;
    border-top: 1px solid #222;
}

h1, h2, h3 {
    padding: 0;
    margin: 4pt 0 4pt 0;
    font-weight: 600;
    font-family: Raleway, sans-serif;
}

h1 {
    color: #9B9;
}

h2, h3 {
    padding-top: 0.25em;
    color: #A96;
}

h1 { font-size: 13pt; }
h2 { font-size: 12pt; }
h3 { font-size: 11pt; }

p, li {
    font-size: 10pt; 
    color: #DDC;
    max-width: 600pt;
}

code, pre {
    font-family: monospace,monospace;
    font-size: 0.9em;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

/* The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page. */

#menu {
    margin-left: -150px; /* "#menu" width */
    width: 150px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its icon stays above all content */
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* All anchors inside the menu should be styled like this. */
#menu a {
    color: #999;
    border: none;
    padding: 0.6em 0 0.6em 0.6em;
    text-decoration: none;
}

/* Remove all background/borders, since we are applying them to #menu. */
#menu .pure-menu,
#menu .pure-menu ul {
    border: none;
    background: transparent;
}

/* Add that light border to separate items into groups. */

#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
    border-top: 1px solid #333;
}

/* Change color of the anchor links on hover/focus. */
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
    background: #19A;
}

#menu .pure-menu li {
    font-size: 13pt;
}

/* selected menu item `<li>`. */
#menu .pure-menu-selected,
#menu .pure-menu-heading {
    background: #19D;
}
/* link within a selected menu item `<li>`. */
#menu .pure-menu-selected a {
    color: #111;
}

/* This styles the menu heading. */
#menu .pure-menu-heading {
    font-size: 110%;
    color: #fff;
    margin: 0;
}

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/* The button to open/close the Menu is custom-made and not part of Pure. */

/*
`.menu-link` represents the responsive menu toggle that shows/hides on small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #000;
    background: rgba(1, 1, 1, 0.3);
    font-size: 5pt; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 3em;
    height: auto;
    padding: 2.1em 1.6em;
}

.menu-link:hover,
.menu-link:focus {
    background: rgba(0.5, 0.5, 0.5, 0.3);
}

.menu-link span {
    position: relative;
    display: block;
}

.menu-link span,
.menu-link span:before,
.menu-link span:after {
    background-color: #777;
    width: 100%;
    height: 0.2em;
}

.menu-link span:before,
.menu-link span:after {
    position: absolute;
    margin-top: -0.6em;
    content: " ";
}

.menu-link span:after {
    margin-top: 0.6em;
}


/*
 CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
  position: absolute;
  left: -100vw;
}

.accordion .content {
  overflow-y: hidden;
  height: 0;
  transition: height 0.3s ease;
}

.accordion > input[type="checkbox"]:checked ~ .content {
  height: auto;
  overflow: visible;
}

.accordion label {
  display: block;
}

.accordion {
  margin-bottom: 1em;
}

.accordion > input[type="checkbox"]:checked ~ .content {
}

.accordion .handle {
  line-height: 1.2em;
}

.accordion label {
  cursor: pointer;
}

.accordion label:hover,
.accordion label:focus {
}

.accordion .handle label:before {
  content: "\0000BB";
  transform: rotate(0deg) translateX(0);
  display: inline-block;
  margin-right: 10px;
  line-height: 1.556em;
  vertical-align: middle;
}

.accordion > input[type="checkbox"]:checked ~ .handle label:before {
  content: "\0000BB";
  transform: rotate(90deg) translateX(-3px);
}

.accordion {
  max-width: 65em;
}

.accordion p:last-child {
  margin-bottom: 0;
}

.nowrap {
    whitespace: nowrap;
}

.keyboard-key {
    border: 1px solid #aaa;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    -moz-box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
    -webkit-box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
    box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
    background-color: #333;
    background-image: -moz-linear-gradient(top, #111, #222, #333);
    background-image: -o-linear-gradient(top, #111, #222, #333);
    background-image: -webkit-linear-gradient(top, #111, #222, #333);
    background-image: linear-gradient(to bottom, #111, #222, #333);
    padding: 0.1em 0.3em;
    font-size: 0.85em;
}

#mailto, #linkedin {
    color: #fdd;
    cursor: pointer;
}

#print:hover {
    cursor: pointer;
    text-decoration: none;
}

/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
    .header,
    .content {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
    #layout {
        padding-left: 150px; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 150px;
    }
    .menu-link {
        position: fixed;
        left: 150px;
        display: none;
    }
    #layout.active .menu-link {
        left: 150px;
    }
}

@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
    #layout.active {
        position: relative;
        left: 150px;
    }
}