/*!
PC-BASIC front.css
Copyright (c) 2015 Rob Hagemans.
This work is licensed under a Creative Commons Attribution 4.0 International License.
http://creativecommons.org/licenses/by/4.0/
*/


/*
 * General styling
 */

/* Use VGA bitfont throughout the page */
/* supply woff for most modern browsers, TTF for old versions of Safari
and iOS/Android browsers. Ignore old IE as we're not serving them this CSS anyway. */
@font-face {
  font-family: vga;
  src: url('../fonts/freedos_16.woff') format('woff'),
       url('../fonts/freedos_16.ttf')  format('truetype')
}

@font-face {
    font-family: vga;
    font-weight: bold;
    src: url('../fonts/freedos_08.woff') format('woff'),
         url('../fonts/freedos_08.ttf')  format('truetype')
}

* {
    font-family: vga;
}

/* Ensure borders don't mess up the grid */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Use wide spacing and grey text by default */

body {
    line-height: 1.7em;
    color: #aaaaaa;
}

/* Dark grey for headers and labels */

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #555555;
}

/* these are provided for lynx, IE 8 and the likes */
hr {
    display: none;
}


/*
 * Links and buttons
 */

a, a:visited {
    color: #aaaaaa;
}

.splash a {
    color: black;
}

a:hover {
    color: white;
}


a.pure-button-primary {
    font-weight: bold;
    background-color: #008800;
    color: #ffff55;
}

.note {
    font-size: 0.6em;
    display: block;
    padding: 0.4em;
    letter-spacing: 0.08em;
    font-weight: normal;
}

/*
 * screenshots
 */

figure {
    margin: 0;
    padding: 0;
}

/* fit screenshot in grid unit but do not scale with text */
img {
    width: 100%;
    height: auto;
    display: block;
}

/*
 * Splash header
 */


/* page header */
h1 {
  font-size: 1em;
  font-weight: normal;
  color: white;
}

.splash-container {
     width: 100%;
     height: 100%;
     position: relative;
 }


.splash {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}

.splash-head {
    color: white;
    padding: 0.5em 0.8em 1.5em 0.8em;
    line-height: 1.2em;
    width: 100%;
    text-align: center;
    background-color: #5555ff; /*rgb(170, 85, 0);*/
    border: 0.35em double white;
}


/*
 * Content articles
 */


article h2 {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 0.5em 0.5em;
    text-align: center;
}

article {
    background: black;
}

article section {
    padding: 1em;
}

/* for thse browsers that don't support n-th-of-type,
   ll subheaders will be appropriately monochrome green-on-black */
article h3 {
    color: #00aa00;
}

article:nth-of-type(1) {
    background: white;
}

article:nth-of-type(1) a:hover {
    color: #555555;
}

article:nth-of-type(1) h3
{
    color: #0000aa;
}

/* dark background */
article:nth-of-type(2) h3
{
    color: #00aa00; /*#1f8dd6;*/
}

article:nth-of-type(3) h3
{
    color: #00aaaa; /*#1f8dd6;*/
}

.icon {
    color: #5555ff;
}

footer {
    background: #555555;
/*    position: relative;*/
    z-index: 2;
    text-align: center;
    padding: 1em;

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin:0;
}

small {
    font-size: 0.7em;
}



/* download table */

table {
    margin: auto;
}

img.icon {
    height: 2em;
    width: auto;
    margin: auto;
}

th {
    text-align: left;
    border-bottom: 0.5em double #555555;
}
td, th {
    padding: 0.5em 1em 0.5em 1em;
}
td {
    border-bottom: 0.2em solid #aaaaaa;
}
td, th, td a{
    color: #555555;
}

.centre {
    text-align: center;
}

.footspace {
    height: 10em;
    position: relative;
    display: block;
    background: black;
    margin: 0;
    border: none;
    z-index: 2;
}

.space {
    display: inline-block;
    margin-bottom: 1em;}


/* media queries - sizes used:
   narrow mobile: up to 29.5em
   default mobile: up to 55em (PureCSS uses 48em).
   tablet: 55em-78em
   desktop: 78em and above
*/

/* narrow mobile screens */

@media (max-width: 29.5em) {

    /* Force table to not be like tables anymore */
    table, tbody, td, tr {
        display: block;
    }
    th {
        display: none;
    }
    td {
        border: none;
        text-align: center;
    }
    tr {
        border-bottom: 0.2em solid #aaaaaa;
    }
}

/* tablets and desktops */

@media (min-width: 55em) {

    /* We increase the body font size */
    body {
        font-size: 1.2em;
    }

    /* scrolled-over container */
    header {
        z-index: 1;
        overflow: hidden;
        width: 100%;
        height: 88%;
        top: 3.5em;
        left: 0;
        position: fixed !important;
        background: black;
    }

    /* spacer to push scrollover content down the page initially */
    .balloon {
        display: block;
        /* may cause issues on iOS 7 tablets? */
        height: 82vh;
    }

    /* We want to give the content area some more padding */
    article {
        position: relative;
        z-index: 2;
        padding: 1em;
    }

    .splash {
        width: 70%;
        height: 50%;
        position: absolute;
        top: 1em; left: 0; bottom: 0; right: 0;
        margin: auto;
        text-align: center;
    }

    .splash-head {
        padding: 0.5em 0.8em 1.5em 0.8em;
        width: 100%;
    }

    /* footer needs less vertical space than on mobile */
    .footspace {
        height: 7em;
    }
}