:root { --blue: #1f7aff; --grey: #808080; --line: #ccc; --code: #eee; }

body { margin: 0; font: 14px/1.7 "Droid Sans", Arial, sans-serif; color: #292929; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* every block is full width; its content is centred in a 60em column */
header, nav, main, footer { padding-left: max(1rem, calc((100vw - 60em) / 2)); padding-right: max(1rem, calc((100vw - 60em) / 2)); }

header { background: url(../wp-content/uploads/2012/07/snehurka2x4.png) right top no-repeat; border-bottom: 14px solid var(--blue); padding-top: 1.5rem; padding-bottom: 1rem; }
header .site-title { font-size: 40px; }
header p { margin: 0 0 0 1.5rem; font-size: 17px; color: var(--grey); }

nav { background: #f0f0f0; border-bottom: 1px solid var(--line); }
nav ul { margin: 0 0 0 -.8em; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
nav li { position: relative; }
nav a { display: block; padding: .5em .8em; color: var(--grey); }
nav a:hover { color: #000; text-decoration: none; }
nav li ul { display: none; position: absolute; left: 0; top: 100%; z-index: 1; width: 16em; flex-direction: column; background: rgba(41, 41, 41, .92); }
nav li ul a { color: var(--line); }
nav li ul a:hover { color: #fff; }
nav li:hover > ul, nav li:focus-within > ul { display: flex; }
@media (max-width: 40em) {   /* no dropdowns: sub-pages simply follow their parent */
  nav li ul, nav li:hover > ul, nav li:focus-within > ul { display: contents; }
  nav li ul a { color: var(--grey); font-size: .9em; }
}

main { padding-top: 1rem; padding-bottom: 2rem; }
h1 { font-size: 1.7rem; line-height: 1.3; font-weight: normal; margin: .5em 0; }
h2, h3, h4 { font-weight: normal; margin: 1.5em 0 .4em; border-bottom: 1px solid var(--line); }
h2 { font-size: 1.4rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1rem; }
.meta { color: var(--grey); margin-top: -.5em; }

pre, code { font-family: "Droid Sans Mono", monospace; background: var(--code); }
pre { overflow: auto; padding: .6em; border: 1px solid #9aacae; font-size: .85em; line-height: 1.3; }
table { border-collapse: collapse; }
th, td { border: 1px solid var(--line); padding: .2em .6em; text-align: left; }

footer { border-top: 1px solid var(--line); background: #f0f0f0; color: var(--grey); padding-top: .6rem; padding-bottom: .6rem; }