/* Base stylesheet with useful cross-project defaults                                             */
/*                                                                                                */
/* rem units (= root font-size) used for sizing containers, em units (= element font-size) for    */
/* local sizing within containers.                                                                */

@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';

:root {
    font-size: calc(0.5em + 1vw); /* basis for rem units: 16px @ w800px, 18px @ w1024px, 20px @ w1200px */
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em; /* smaller text... */
    line-height: 1.6; /* ... with space to breathe */
    padding: 0 0.4em; /* small l/r margin on narrow range */
}

/* nav */
nav    { border-bottom: 1px solid #999999; }
nav ul { list-style: none; padding: 0; margin: 0.2em 0; }
nav li { display: inline-block; margin: 0.5em 1em; }
@media print { nav { display: none; } } /* no need for nav on printouts */


/* main */
main {
    max-width: 48em; /* approx. 96-120 chars; some designs may want to make this shorter */
    margin: 0 auto;  /* equal l/r margins */
}

/* links: underline on hover only (normally colour used to indicate links) */
a       { text-decoration: none; }
a:hover { text-decoration: underline; }

/* forms: useful defaults */
form               { margin: 1em 0; }
fieldset           { border-radius: 0.25rem; }
legend             { margin-left: 1em; padding: 0.5em; }
label              { display: inline-block; font-style: italic; width: 8em; }
input[type=number] { text-align: right; }
input + label      { font-style: normal; width: auto; } /* eg radio/checkbox labels */
form ul            { list-style: none; padding: 0; }
form li            { margin: 0.5em 1em; }

/* lists */
main ul    { font-size: 0.9em; } /* lists slightly smaller font */
main ul ul { font-size: 1em; }   /* sublists retain same size */

/* tables: useful defaults */
table  { border-collapse: collapse; }
tr     { vertical-align: baseline; }
td, th { padding: 0.2em; }
th     { color: #666666; font-style: italic; font-weight: normal; text-align: left; }


/* standard short-hand styles */
.align-center   { text-align: center; }
.align-left     { text-align: left; }
.align-right    { text-align: right; }
.align-justify  { text-align: justify; }
.align-top      { vertical-align: top; }
.align-middle   { vertical-align: middle; }
.align-bottom   { vertical-align: bottom; }
.border-none    { border: none; }
.clear-floats   { clear: both; }
.display-inline { display: inline; }
.display-none   { display: none; }
.float-left     { float: left; }
.float-right    { float: right; }
.hyphens-auto   { hyphens: auto; }
.hyphens-manual { hyphens: manual; }
.hyphens-none   { hyphens: none; }
.margin-0       { margin: 0; }
.margin-b0      { margin-bottom: 0; } /* eg p.margin-b0 allows ul to go directly below */
.nowrap         { white-space: nowrap; }
.padding-0      { padding: 0; }
.small-caps     { font-variant: small-caps; }
.width-auto     { width: auto; }
.width-full     { width: 100%; }

/* useful classes */
.alert         { color: #990000; font-size: 1.2em; font-weight: bold; }
.blue          { color: #000066; }
.error-msg     { color: #990000; }
.green         { color: #006600; }
.grey          { color: #999999; }
.pale-grey     { color: #cccccc; }
.required      { color: #990000; } /* for required form field indicator */
.red           { color: #660000; }
.rule-above    { border-top: 1px solid #999999; }
.rule-above td { border-top: 1px solid #999999; } /* to apply to tr */
.small         { font-size: 80%; } /* like <small> */

/* form input widths */
.w2  { width: 2em;  }
.w3  { width: 3em;  }  /* eg time */
.w4  { width: 4em;  }
.w6  { width: 6em;  }  /* eg date, postcode */
.w8  { width: 8em;  }  /* eg first/last name, town, phone  */
.w12 { width: 12em; }  /* eg addr1/2 */
.w16 { width: 16em; }  /* eg email */
.w24 { width: 24em; }
.w36 { width: 36em; }
.w48 { width: 48em; }

/* show/hide */
.show            { display: block; }
.hide            { display: none; }
/* show: over-ride for specific display types */
a.show           { display: inline; }
button.show      { display: inline-block; }
li.show          { display: list-item; }
table.show       { display: table; }
tr.show          { display: table-row; }
td.show, th.show { display: table-cell; }
span.show        { display: inline; }

