body {
background: #74b5ab;
font-family: sans-serif;
font-size: 0.9em;
color: white;
}
h1 a {
text-decoration: none;
color: #b4dcb4;
}
img {
max-width: 100%;
}
.wrapper { /*everything goes inside this*/
width: 69em;
margin: auto;
}
.comic-box, .header, .comment-box, .page-navigation {
background: #0c1d24;
padding: 1em;
border-radius: 5px;
}
.header, .comment-box {
margin-top: 1em;
margin-bottom: 1em;
}
.comic-box, .sidebar-wrapper {
display: inline-block;
}
.sidebar-wrapper { /*sidebar goes inside this*/
width: 18em;
border:0px solid #000;
position: absolute;
margin-left: 1em;
}
.sidebar, .sidebar-2 {
background: #223f50;
padding: 1em;
border-radius: 5px;
margin-bottom: 1em;
}
.header h1, .sidebar-wrapper h2 {
text-align:center;
}
.sidebar-2 {
margin-top: 0.9em;
}
.header {
width: 40em;
margin: 0 auto;
margin-top: 0.9em;
margin-bottom: 0.9em;
margin-left: 5em;
font-size: 20px;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.comic-box { /*this is where the page of the comic goes*/
width: 48.5em;
}
/*Prevent image overflow*/
.comic-box img, .comment-box img, .header img, .sidebar-wrapper img {
max-width: 100%;
height: auto;
}
.comment-box, .page-navigation {
width: 48.5em;
}
.comment-box { /*commentary box below the comic page + nav*/
}
.page-navigation { /*this is where the page nav buttons go*/
margin-top: 1em;
background: #223f50;
}
.button, .nav-button {
text-align: center;
margin: 0 auto;
padding: 1em;
padding-top: 0.3em;
padding-bottom: 0.3em;
margin-top: 0.35em;
margin-bottom: 0.35em;
background: #4d7c80;
font-weight: bold;
color: white;
font-size: 1.3em;
border-radius: 5px;
text-decoration: underline;
}
.button { /*sidebar buttons*/
}
.nav-button { /*comic page navigation buttons*/
display: inline-block;
margin-left: 0.1em;
margin-right: 0.1em;
}
.button a, .nav-button a, a {
color: #b4dcb4;
}
a:hover {
color: white;
}
.footer {
text-align: center;
font-size: 0.8em;
padding: 1em;
color: black;
}
center {
text-align: center;
}
@media(max-width: 1200px) {
.wrapper {
width: 85%;
}
.sidebar-wrapper {
width: 21%;
}
.comic-box, .comment-box, .page-navigation {
width: 70%;
}
.header {
width: 75%;
}
}
@media(orientation: portrait) body {
background: #234647;
font-family: "Candara", "Open Sans", sans-serif;
font-size:16px;
color: white;
}
a {
color: #0783b9;
}
.tiny {
font-size: 9px;
margin: 0 auto;
text-align: center;
}
/*Everything in the main box goes in this*/
.wrapper {
width: 750px;
border: 3px solid black;
margin: 0 auto;
top: 0px;
}
.header {
background: black;
height: 300px;
border-bottom: 3px solid black;
margin: 0 auto;
overflow: hidden;
background: linear-gradient(rgb(0,0,0,0.7),rgb(0,0,0,0.7)), url("/img/pond.gif"); /*Header image -- replace with your own!*/
background-size:cover;
}
/*This and the header-title class are deprecated now that this style uses a background image for the header div.*/
/*.header img {
display: block;
opacity: 0.35;
width: 100%;
height: 100%;
overflow: hidden;
}
*/
/*If you want to use a smaller title or normal text, add .header p or .header h4 or whatever to the list*/
.header h2, .header h3, .header h1 {
font-weight: bold;
color: white;
text-align: center;
border: 0px solid green;
margin: 18% auto; /*approx centered*/
opacity: 0.999999;
}
.links {
background: black;
padding: 10px;
border-bottom: 3px solid black;
}
.links a {
color: white;
padding: 3px;
margin-left: 5px;
margin-right:5px;
text-decoration: none;
font-size:17px;
}
.main {
padding: 15px;
margin: 0 auto;
background: #222222;
}
/*Prevent overflow of large images in main text areas.*/
.main img {
max-width: 100%;
height: auto;
}
.footer {
background: black;
padding: 20px;
padding-top:5px;
padding-bottom:5px;
border-top: 3px solid black;
font-size:14px;
}
/*For narrow screens*/
@media(max-width: 790px) {
.wrapper {
width: 95%;
}
.header h1, .header h2, .header h3 { /*Vertical centering gets wonky when the box is variable width*/
margin: 20% 5% auto;
}
}
/*Mobile compatibility*/
@media(orientation: portrait) {
.wrapper {
width: 95%;}
.header {
height:230px;
}
.header h1, .header h2, .header h3 {
margin: 20% 3% auto;
}
}