html {font-size: 100%}

body {background-color: #f5f5f5; color: #111; font: 1em "Trebuchet MS", "DejaVu Sans", Verdana, sans-serif; line-height: 1.5em; margin: 0; padding: 0}

nav h2, div#site-search h2, footer h2, footer h3 {position: absolute; left: -9999px}

img {border: 0; height: auto; max-width: 100%}
p {margin: 0 0 1.5em; max-width: 100%; overflow: auto; padding: 0}
p.action-call {text-align: center}
sup {font-size: 0.75em; line-height: 1em; padding-right: 0.25em; vertical-align: super}
ol, ul {margin-top: 0; margin-bottom: 1.5em}

.action-call, .dateline, .major-point, .search-terms {font-weight: bold}

a:link {color: #4e5a72}
a:visited {color: #89a5b3}
a:hover {text-decoration: none}


/* header */
header {background-color: #2a2e37; /*background: #000 url('/global/div_header_bg.jpg') repeat-x left bottom; */ display: block; margin: 0; max-width: 100%; padding: 0; width: 100%}

div#site-header {background: none; margin: 0 auto; max-width: 100%; min-height: 6.25em; overflow: hidden; padding: 0 1em 1.5em; position: relative}
div#site-header h1 {color: #f5f5f5; font-size: 2.25em; line-height: 1.333em; margin: 0; padding: 0.222em 0 0.111em; text-transform: lowercase}
div#site-header h1 a {color: #f5f5f5; text-decoration: none}

nav ul {float: left; margin: 0; padding: 0}
nav ul li {display: list-item; list-style-type: none}
nav a:link, nav a:visited, nav a:hover {color: #f5f5f5; font-weight: bold; padding: 0 0.5em 0 0.825em; text-decoration: none}

div#site-search {background-color: #f5f5f5; float: left; height: 1.5em; margin: 0; width: 8.5em}
form#search {height: 1.5em; margin: 0}
form#search div {background: none; height: 1.5em; overflow: hidden; padding: 0; text-align: left; width: 100%}
form#search input {background-color: #f5f5f5; border: 0; clear: none; float: none; font: 1em "Trebuchet MS", Verdana, Petra, sans-serif; height: 1.5em; margin: 0; padding: 0 0 0 0.25em; width: 6.5em}
form#search input#b {height: 20px; position: relative; top: -0.125em; vertical-align: middle; width: 20px}


/* content */
div#content {margin: 0 auto; padding: 0 1em}

ul#breadcrumbs {font-size: 0.75em; line-height: 2em; margin: 0 0 2em; padding: 0}
ul#breadcrumbs li {display: inline}

article, aside {display: block}

div#main-content article {clear: both; overflow: auto}
div#content h1 {font-size: 1.5em; font-weight: normal; line-height: 1em; margin: 0.666em 0; padding: 0}
div#main-content h2 {font-size: 1.313em; font-weight: normal; line-height: 1.143em; margin: 0; padding: 0}
div#main-content.search h2 {font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em}
div#main-content h3 {font-size: 1.125em; font-weight: normal; line-height: 1.333em; margin: 0; padding: 0}
div#content h1 a, div#content h2 a, div#content h3 a {text-decoration: none}
img.major-illustration {display: none; float: right; margin: 0 0 0.5em 0.5em}
img.minor-illustration {display: none; float: left; margin: 0 0.5em 0.5em 0}
table {border-collapse: collapse; margin: 0em 0em 1.5em; width: 100%}
th, td {padding: 0 0.5em 0 0; text-align: left; vertical-align: top}

div.related-content {clear: left}
div#secondary-content h2, div.related-content h2 {font-size: 1.313em; font-weight: normal; line-height: 1.143em; margin: 0; padding: 0}
div#secondary-content p, div.related-content p {font-size: 0.875em; margin-bottom: 1.714em}
div#secondary-content ul, div.related-content ul {font-size: 0.875em; line-height: 1.714em; margin-bottom: 1.714em}
div#secondary-content aside.external h2 {background-color: #2a2e37; color: #f5f5f5; font-size: 1em; font-weight: bold; line-height: 1em; padding: 0.25em; text-align: center}
div#secondary-content aside.external h2 a {color: #f5f5f5}
div#secondary-content aside img, div.related-content aside img {float: right; margin-left: 0.357em}
div#advertising-button {margin-bottom: 1.125em; text-align: center}


/* footer */
footer {background-color: #2a2e37; clear: both; display: block; margin: 0; max-width: 100%; padding: 0; width: 100%}

div#site-footer {background-color: #f5f5f5; border: 0; margin: 0 auto; padding: 0 1em}
ul#site-links-secondary, ul#site-links-legal {margin: 0; padding: 1.5em 0; text-align: center}
ul#site-links-secondary li, ul#site-links-legal li {display: inline; font-size: 0.75em; line-height: 2em; padding: 0 0.667em}
div#advertising-banner {padding: 1.875em 0 0; text-align: center}
form#donate div {font-size: 0.75em; line-height: 2em; text-align: center}
form#donate input#d {margin: 0; vertical-align: middle}
a.facebook {background: url('/images/icons/facebook-icon.png') left center no-repeat; margin-left: 2px; padding-left: 21px}
footer address {font-size: 0.75em; font-style: normal; line-height: 2em; margin: 0 auto; text-align: center}
address abbr {border: 0}
span.vcard {display: block}
footer span.adr, footer span.locality, footer span.country-name {border-left: solid 1px #c2b69d; padding-left: 0.3em}
ul#memberships {height: 3em; margin: 0; padding: 0; text-align: center}
ul#memberships li {display: inline; padding: 0 0.25em}


/* page specific styles */
div.homepage {margin-top: 1.5em}
div.homepage p.action-call {text-align: left}
th.header-date {width: 20%}

code {font: 0.875em "Courier New", monospace; line-height: 1.143em}
img#mailchimp-req {margin-top: 0.188em}
img#sphider-req {margin-top: 0.313em}
form#search-page, form#sub-signup, form#contact, form#comment {margin: 0; max-width: 100%; padding: 0 0 1.5em; width: 27em}
fieldset {margin: -1px 0; padding: 0.75em 1em 0.563em}
legend {color: #111; margin: 0; padding: 0 0.25em}
input {margin: 0.063em 0.063em 0}
textarea {height: 5em; width: 50%}
form#search-page input, form#sub-signup input {max-width: 100%}
input#sub-submit, input#contact-submit, input#comment-preview {clear: left; margin: 0}
input[type="image"] {vertical-align: middle}
label, .label {clear: left; display: inline-block; width: 10em}
label.option {clear: none; width: 3em}
span.privacy {font-size: 0.75em; line-height: 2em; margin: 0 0 0 1.333em}
figure {display: block; margin: 0 0 1.5em; text-align: center}
figure.full-banner {padding: 0.375em 0 0}
p.search-result-url {font-size: 0.875em; line-height: 1.714em; margin-bottom: 0}
p.search-result-url a {text-decoration: none}
div#main-content.search div#search-results-nav h2 {float: left; padding-right: 0.5em}
div#search-results-nav ol {float: left; margin: 0 0 1.5em; padding: 0}
div#search-results-nav ol li {display: inline; list-style-type: none; padding: 0 0.4em}

ol.references {font-size: 0.75em; margin: 0 0 0 2em; padding: 0 0 2em}
ol.references li {line-height: 2em; margin: 0; padding: 0}


/* gallery styles */
div.stamps {text-align: center}
div.stamps figure, div.stamps iframe {display: inline-block; margin: 0 0.5em 1.5em; max-width: 94%; vertical-align: text-top}
div.single figure {margin: 0 0 1.5em}
div.stamps figure img {border: solid 1px #ccc; padding: 3px; vertical-align: text-bottom}
.camp-douglas-pow-cover-lg {width: 614px}
.early-commemoratives-h-sm {width: 154px}
.early-commemoratives-h-lg {width: 521px}
.modern-commemoratives-h-lg {width: 552px}
div.stamps figure figcaption {font-size: 0.875em}


/* blog styles */
a.rss {background: url("/images/blog/ico_rss.png") no-repeat center left; margin-left: 0.25em; padding-left: 1.5em}


@media all and (min-width: 37.75em) {
    div#site-header, div#content, div#site-footer {overflow: visible; padding: 0 2em}
    
    /* header */
    div#site-header {background: url('/images/james-herriot-stamp.jpg') no-repeat 2em bottom; height: 6.25em; max-width: 100%; padding: 0 2em 0 8.5em}
    div#site-search {float: none; margin: 0; position: absolute; right: 2em; top: 1em}
    
    nav ul {float: none; margin: 0; padding: 0}
    nav ul li {border-left: solid 1px #f5f5f5; display: inline; list-style-type: disc}
    nav ul li:first-child {border: none}
    
    /* content */
    div#content {margin: 0 auto; max-width: 100%; padding: 0 2em}
    
    div#main-content {max-width: 100%}
    div#content h1 {font-size: 2.25em; font-weight: normal; line-height: 1.333em; margin: 0; padding: 0}
    div#main-content h2 {font-size: 1.5em; font-weight: normal; line-height: 1.5em; margin: 0.25em 0; padding: 0}
    div#secondary-content article, div.related-content article, div#secondary-content aside, div.related-content aside, div#advertising-button {float: left; padding: 0; max-width: 100%}

    img.major-illustration, img.minor-illustration {display: inline}
    div.homepage img.major-illustration {margin: 0 0 0 0.25em}
    div.homepage img.minor-illustration {margin: 0.5em 0.5em 0 0}
    
    div.related-content {clear: none}
    div#secondary-content, div.related-content {max-width: 100%}
    div#secondary-content h2, div.related-content h2 {font-size: 1.313em; font-weight: normal; line-height: 1.143em; margin: 0; padding: 0}
    
    /* footer */
    div#site-footer {border-right: solid 1px #857757; border-left: solid 1px #857757; max-width: 100%; padding: 0 2em}
    
    /* page specific styles */
    input#sub-submit, input#contact-submit, input#comment-preview {margin-left: 12.5em}
}


@media all and (min-width: 37.75em) and (max-width: 45.49999em) {
    /* header */
    div#site-header {width: 27em}
    div#site-search {width: 9.5em}
    form#search input {width: 7.5em}
    
    /* content */
    div#content, div#main-content, div#secondary-content, div.related-content {width: 33.5em}

    div#secondary-content article, div.related-content article, div#secondary-content aside, div.related-content aside, div#advertising-button {width: 33.5em}
    
    /* footer */
    div#site-footer {border: 0; border-right: solid 1px #857757; border-left: solid 1px #857757; max-width: 100%; width: 33.5em}
}


@media all and (min-width: 45.5em) and (max-width: 57.24999em) {
    /* header */
    div#site-header {width: 32.75em}
    div#site-search {width: 9.5em}
    form#search input {width: 7.5em}
    
    /* content */
    div#content {width: 39.25em}
    
    div#main-content {width: 39.25em}
    div#secondary-content, div.related-content {width: 39.25em}
    div#secondary-content article, div#secondary-content aside, div#advertising-button {padding-right: 2em; width: 11.75em}
    div#advertising-button {padding-right: 0}
    
    /* footer */
    div#site-footer {width: 39.25em}
}


@media all and (min-width: 57.25em) {
    /* header */
    div#site-header {width: 46.5em}
    div#site-search {width: 11.75em}
    form#search input {width: 9.75em}
    
    /* content */
    div#content {width: 53em}
    
    div#main-content {float: left; padding-right: 2em; width: 39.25em}
    div#secondary-content, div.related-content {float: left; width: 11.75em}
    div#secondary-content article, div.related-content article, div#secondary-content aside, div.related-content aside, div#advertising-button {width: 11.75em}
    
    /* footer */
    div#site-footer {width: 53em}
}