/** General styling (metrics and shared theming) **/

header {
    height: 168px;
}

header > .header-overlay {
    background-color: rgba(0, 0, 0, .4);
    height: 28px;
}

header > h1, section, footer { background-color: white; }
header > h1, section, footer {
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    box-sizing: border-box;
    margin: auto;
    width: 75%;
}


header > h1 {
    border-bottom: 1px solid #e8e8e8;
    border-left-color: rgba(0, 0, 0, .2);
    border-right-color: rgba(0, 0, 0, .2);
    border-radius: 2px;
    text-indent: 1.2em;
    font-size: 1em;
    font-weight: normal;
    line-height: 56px;

    position: relative;
    top: 83px;

    box-shadow: 0px -2px 4px #888;
}

section, footer {
    box-shadow: 0px 1px 4px #bbb;
}

section {
    padding: 0px;
}

section:first-of-type > h2 {
    margin-top: 0px;
}

ol, section {
    margin-bottom: 16px;
}

h2 {
    padding: 1em 0 0 1em;
}

p.notice {
    border-bottom: 1px solid #e8e8e8;
    margin: 0px;
}

a.twitter, a.rss {
    display: block;
    position: absolute;
    border-radius: 3px;
    width: 24px;
    height: 24px;
}

a.twitter {
    right: 20px;
    top: 16px;
}

a.rss {
    right: 50px;
    top: 16px;
}

/** Theme styling **/

@media (min-width: 1367px) {
  .blue  header { background: url(img/header-blue-1920.jpg)  center 0px / cover; }
  .green header { background: url(img/header-green-1920.jpg) center 0px / cover; }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .blue  header { background: url(img/header-blue-1366.jpg) center 0px; }
  .green header { background: url(img/header-green-1366.jpg) center 0px; }
}

@media (max-width: 1024px) {
  .blue  header { background: url(img/header-blue-1024.jpg) center 0px; }
  .green header { background: url(img/header-green-1024.jpg) center 0px; }
}

.blue  a.twitter { background: url(img/twitter.png) 4px 5px no-repeat, #03a9f4; }
.green a.twitter { background: url(img/twitter.png) 4px 5px no-repeat, #25a00b; }

.blue  a.rss { background: url(img/rss.png) 4px 4px no-repeat, #03a9f4; }
.green a.rss { background: url(img/rss.png) 4px 4px no-repeat, #25a00b; }