@charset "UTF-8";
/* CSS Document */
/*  
TITLE: Semi-Fab Webcomic
AUTHOR: David Clond
*/
/* imports */
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);

/* wipe out browser defaults */
*{padding:0; margin:0;} 					/*Elimiates Browser padding and margins*/
img {border:none;}							/*Elimiates border around images*/
li {list-style:none;}							/*Elimiates bullets on lists*/
a {text-decoration:none;}					/*Elimiates line under links*/
h1, h2, h3, h4, h5, h6 {font-weight:normal;}	/*Elimiates bold applied to headers*/

/* main */
body {
	background-color: white;
    background-image: url(../images/Zestone_Linup_v2.png);
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
    background-size: 100%;
}
.wrapper {
    /* width: 93%; */
    background-color: hsla(198, 16%, 32%,0.94);
    margin-left: auto;
    margin-right: auto;
    
}
/* header */
header {
    border-width: 0.8em;
    border-color: white;
    border-style: solid;
    padding: 2em;
    border-radius: 0.25em;
    margin-bottom: 1em;
        
    color: white;
}
div {
	/*background-image: url(images/head_bkground.png);
	width: 700px;
	min-height: 500px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;*/
}
h1{
	/*padding:0;
	margin:0;
	width: 700px;
	height: 302px;
	background-image: url(images/head_foreground.png);*/
}
header h1 a img {
    width: 100%;
    padding: 0;
    margin: 0;
}


h1 span {
	/*display: none;*/
}
nav.sitenav a:link {
    color: hsla(210,37%,41%,1);
    text-decoration: none;
}

nav.sitenav a:visited {
    color: hsla(210,37%,41%,1);
    text-decoration: none;
}

nav.sitenav a:hover {
    
    text-decoration: underline;
}

nav.sitenav li {
	font-family: 'Ubuntu', sans-serif;
	background-color: #ffffff;
	color: hsla(137,28%,5%,.8);
	list-style-type: none;
	
    width: 100%;
    
	padding-left: .75em;
	/*padding-right: 1.75em;*/
    padding-top: .25em;
    padding-bottom: .25em;
	
	margin: 0em;	
	
	/*transition: all 300ms ease-in;*/
}


/* content */
main {
    padding-left: .5em;
    padding-right: .5em;
    display: flex;
    flex-direction: column;
    color: white;
}
.mainleft {
    
}

.adsright {
    height: 90px;
    width:  728px;
    
    border-width: 0.4em;
    border-color: white;
    border-style: solid;
    border-radius: 0.25em;
    margin-left: 0.25em;
    
    text-align: center;
}
nav.comicnav {
    width: 100%;
}

nav.comicnav ul {
    text-align: justify;
}
nav.comicnav ul::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}
nav.comicnav li {
    
    font-size: 1.5em;
    font-weight: bold;
    vertical-align: middle;
}

.editorial h3{
    padding-top: .5em;
    padding-bottom: .5em;
    font-size: 1.5em;
    font-weight: bold;
}
.editorial p{
    padding-top: .25em;
    padding-bottom: .25em;
}
.transcript h3{
    padding-top: .5em;
    padding-bottom: .5em;
    font-size: 1.5em;
    font-weight: bold;
}
.transcript p{
    padding-top: .25em;
    padding-bottom: .25em;
}
.dialog {
    padding-left: 2em;
}
section {
	/*background-color: hsla(137,28%,85%,.1);
	color: hsla(137,28%,85%,.85);
	
	font-family: 'Ubuntu Mono', sans-serif;*/
    font-family: sans-serif;
	/*
	float: left;
	text-align: center;
	width: 70%;
	
	border-radius: 2em;
	margin-top: -1.75em;
	margin-left: 2em;
	margin-right: 2em;*/
	
}
section h2{

}
section p{
	/*text-align: left;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: .3em
	padding-bottom: .3em;
	margin-top: .2em;
	min-height: 9.5em;*/
}

#about {
    display: block;
}
#about p{
    padding-top: .5em;
    padding-bottom: .75em;
}
#about a:link{
    color: white;
    text-decoration: underline;
}
#about a:hover{
    text-decoration: none;
}
#about a:visited{
    color: white;
    text-decoration: underline;
}
#formbuddyad {
    font-size: small;
}
#formbuddyad a:link{
    color: white;
}
#formbuddyad a:hover{
    color: white;
    text-decoration: underline;
}
#formbuddyad a:visited{
    color: white;
}

img.comicimg {
    width: 100%;
    height: auto;
}

form {
    font-family: sans-serif;
    padding: .25em;
    padding-top: 1em;
}

form table {
    margin-top: 1em;
    margin-bottom: 1em;
    border: 0;
}

.tableright {
	text-align: right;
	padding-right: 1em;
}

form textarea{
    /*html: rows="5" cols="100%"*/
    width: 100%;
    height: 10em;
}

dl {
    padding: .75em;
    font-family: sans-serif;
}
dt {
    padding-top: .5em;
    font-size: 1.25em;
}
dd {
    padding-left: 2em;
}

/* footer */
footer{
    padding-top: 2em;
    text-align: center;
    color: white;
    font-size: small;
    font-family: sans-serif;
    font-style: italic;
}
footer a:link{
    color: white;
}
footer a:hover{
    color: white;
    text-decoration: underline;
}
footer a:visited{
    color: white;
}

@media screen and (min-width: 600px) {
    main {
        padding-left: 2em;
        padding-right: .5em;
        flex-direction: row-reverse;
    }
    .wrapper {
        width: 93%;
    }
    
    .adsright {
        height: 600px;
        width:  120px;
        
        border-width: 0.4em;
        border-color: white;
        border-style: solid;
        border-radius: 0.25em;
        margin-left: 0.25em;
        
        text-align: center;
    }
    nav.sitenav{
        /*float: right;
        width: 20%;*/
        display: flex;
        flex-direction: row;
        background-color: #FFFFFF;
        padding: .25em;
    }
    nav.sitenav ul {
       text-align: center; 
       /*width: 100%;*/
       
    }
    nav.sitenav li {
        display: inline;
        
        
        /*padding-left: 1.75em;*/
        padding-right: 1.75em;
        
        /*transition: all 300ms ease-in;*/
    }
    
    nav.comicnav {
        display: flex;
        flex-direction: row;
    }
    nav.comicnav ul {
        width: 100%;
    }
    nav.comicnav li {
        display: inline-flex;
    }
}