html, body { margin: 0; padding: 0; font-family: serif;
  background: white; color: black;
}
body { font-size: 90%; }
header {
    margin: 0;
    padding: 2px 2%;
}

header h1 {
    font-family: serif;
    font-size: 3em; padding: 0;
    font-style: italic;
    text-shadow: 0 0 0.02em black, 0.06em 0.04em 0.14em black;
}

header h1, header h1 :link, header h1 :visited {
    color: #eeeeee;
    text-decoration: none;
}
header h1 :link:hover, header h1 :visited:hover {
    text-decoration: underline;
}
footer { 
    clear: both;
    padding: 0.2em 0.2em 2em;
    border-top: solid 1px #cccccc;
    text-align: center;
}
footer p { margin: 0.2em 1em; }
footer p.techline { font-size: 80%; opacity: 0.3; }
footer p.techline:hover { opacity: 1; }

ul.topnav {
    margin: 0 -1%;
    padding: 0;
    overflow: hidden;
}
ul.topnav li {
    display: inline;
    margin: 0;
    padding: 0;
}
ul.topnav li a {
    display: inline-block;
    background: transparent; /* when rgba not supported */
    background: rgba(255,255,255,0.7);
    border-radius: 1ex;
    margin: .3em .6em .3em 0;
    padding: .1em 1em;
    text-decoration: none; line-height: 1.4em;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaffffff, endColorstr=#aaffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaffffff, endColorstr=#aaffffff)";
}
ul.topnav li a:hover {
    background: white;
    text-decoration: underline;
    -moz-box-shadow: .2em .2em .5em black;
}
main.wide h1 {
    color: white;
    margin-left: 1%;
    text-shadow: 1px 1px 3px black;
}
main, aside {
    overflow: hidden;
}
main, main.wide .publishingitem, aside {
    margin: 1ex 1%;
    padding: 1ex 1%;
    background: transparent; /* when rgba not supported */
    background: rgba(255,255,255,0.7);
    border-radius: 1ex;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaffffff, endColorstr=#aaffffff);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaffffff, endColorstr=#aaffffff)";
}
main.wide {
    background: transparent;
}
main h1 {
    margin-top: 0;
}
.maincontainer hr.end { clear: both; border: none 0; margin: 0; padding: 0; width: 0; height: 0; }

aside h2 {
    font-size: 150%;
    margin: 1ex 0;
}
aside h2:first-child {
    margin-top: 0;
}
aside ul {
    display: block;
    margin: 0;
    padding: 0;
    column-width: 13em;
    -moz-column-width: 13em;
    -webkit-column-width: 13em;
}
aside li {
    display: block; margin: 0 0 1ex; padding: 0; overflow: hidden;
    list-style: none;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
}
aside .icon { float: left; margin: 0 0.2em 0.2em 0; }
aside .suites li p { font-size: 80%; margin: 1ex 0 0 0; }
.mainimg {
    float: right;
    margin: 0 0 1ex 1ex;
    max-width: 50%;
}
.mainimg img {
    width: auto;
}
.mainimg > img {
    max-width: 100%;
    height: auto;
}

h1 { margin: 0.6em 0 0.2em 0; }
h2 { margin: 1em 0 0.2em 0; }
h3 { margin: 1em 0 0.2em 0; }
h2 small, h3 small { font-weight: normal; }

.pubinfo { 
    border: solid 1px #888888;
    clear: right;
    float: right;
    font-size: 80%;
    margin: 0 0 1ex 1ex;
}
.pubinfo caption { text-align: left; }
.pubinfo th { text-align: left; font-weight: normal; }

p.ingress {
  font-weight: bold;
  margin: 1em 0;
  text-shadow: .1ex .1ex .2ex white;
}
p { margin: 0 0 0.6em 0; }
img { border: none; }

:target { border-left: double 3px #ffcc00; margin-left: -6px; padding-left: 3px;}

img.teaser {
  border: solid 1px #666666;
  -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

a:focus {
    outline: dotted .1rem red;
    text-decoration: underline !important;
}

.newsitem {
  clear: left;
  margin: 1em 0 2.8em 0;
}
.newsitem h2, .newsitem h3 {
  margin: 0;
}
.newsitem .newstime {
  margin: 0 0 1ex 0;
}
.newsitem img {
    float: left;
    margin: 0 0.4em 0.4em 0;
}

.albuminsuite {
    overflow: hidden;
}
.albuminsuite img {
    float: left;
    margin: 0 1ex 0 0;
    max-width: 40%;
    height: auto;
}
.albuminsuite p.origtitle {
    font-size: 80%;
    font-style: italic;
}

@media screen and (min-width: 30em) {
    .albuminsuite {
        display: inline-block;
        width: 45%;
        margin: 0 4.5% 0 0;
        vertical-align: top;
    }
}

main.wide .publishingitem {
    box-shadow: -.2em -.15em .6em rgba(0,0,255,.2);
    margin: 1ex 0 1em 1%;
    overflow: hidden;
    padding: 1ex 1%;
    vertical-align: top;
}
@media screen and (min-width: 50em) {
    main.wide .publishingitem {
        display: inline-block;
        width: 46%;
    }
}
@media screen and (min-width: 90em) {
    main.wide .publishingitem {
        width: 30%;
    }
}

.publishingitem h2 {
    margin-top: 0;
}
.publishingitem ol.issues {
    margin: 0;
    padding: 0;
}
.publishingitem ol.issues li {
    display: inline-block;
    margin: 0 1ex 1ex 0;
    padding: 0;
    width: 100px;
    width: -moz-min-content;
    vertical-align: top;
}
.publishingitem.oneshot > a {
    float: left;
    margin: 0 1ex 1ex 0;
}
.publishingitem.oneshot p {
    margin: 1ex 0 1em;
}

div.socialbuttons {
    margin: 1em 0;
}
div.socialbuttons .twitter-share-button {
    margin-right: 1ex;
}

@media screen and (max-width: 640px) {
    body {
        background: white url("bouncer640.jpg") 50% 0% no-repeat;
    }
}
@media screen and (min-width: 641px) {
    header {
        min-height: 120px;
    }
    header h1 :after {
	content: url(../arms/arms-240-100.png);
	width: 182px; height: 240px;
	display: block;
	position: absolute; top: 10px;
	right: 0;
	right: -moz-calc((30% - 182px) / 2);
    }
    header .topnav {
        margin-right: 25%;
        margin-right: -moz-calc((25% + 182px) / 2);
    }
    main {
	width: 66%;
	max-width: 60em;
	float: left;
        margin-right: 0;
    }
    main.wide {
	width: auto;
	max-width: 100%;
	float: none;
    }
    aside {
        float: right;
        width: 26%;
        margin-top: 120px;
        margin-left: 0;
    }
    main.wide h1 {
	margin: 70px 182px 30px 1%;
    }
}
@media screen and (min-width: 641px) and (max-width: 929px) {
    body {
        background: white url("bouncer929.jpg") 10% 0% no-repeat;
    }
}
@media screen and (min-width: 930px) and (max-width: 1280px) {
    body {
        background: white url("bouncer1280.jpg") 55% 0% no-repeat;
    }
}
@media screen and (min-width: 1281px) and (max-width: 1680px) {
    body {
        background: white url("bouncer1680.jpg") 55% 0% no-repeat;
    }
}
@media screen and (min-width: 1681px) {
    body {
        background: white url("bouncer1920.jpg") 55% 0% no-repeat;
        background-size: 100% auto;
    }
}