/*
 * Ctrl-S Style Sheet
 */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
@import url('https://fonts.googleapis.com/css?family=Dorsa');
@import url('https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.0/pure-min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

body { padding: 0; }
main { padding: 1em;}

header nav                { background: #333333; font: 300 1.2em 'Open Sans'; margin: 0; padding-top: 0.2em }
header nav ul             { margin: 0; }
header nav ul:before      { color: #b58733; content: 'Ctrl-S'; font: 2em 'Dorsa'; padding: 0 1em 0 0.5em; }
header nav li             { margin: 0.5em 0; }
header nav a              { color: #cccccc; }
header nav a:hover        { color: #ffffff; }
header nav li + li:before { color: #999; content: '|'; padding: 0 1em; }

h1 { border-bottom: 1px solid #999999; color: #b58733; }
label              { width: 16em; }
input[type=text]   { width: 24em; }
input[type=number] { width:  4em; }
textarea           { width: 24em; }
a                  { color: #3992ab; }

/* tweak purecss.io menu styling */
header nav .pure-menu-item          { margin: 0.5em 0; }
header nav a.pure-menu-link         { display: inline-block; padding: 0; min-width: 1em; color: #cccccc; }
header nav a.pure-menu-link:hover   { text-decoration: none; }
header nav ul.pure-menu-children    { border-bottom: 1px solid #eeeeee; }
header nav ul.pure-menu-children li { border-left: 1px solid #eeeeee; }