* {margin: 0; padding:0}
/*body {
background-image: url("../comicfolder/background.png");
          background-size: 90%;}*/ 
body{background-color: #EFEFEF;}

#wrapper{background-color: #EFEFEF;
            margin:0 auto;
            width:90%;
box-shadow: 2px  3px 10px -4px #000, -2px 3px 10px -4px;
    
}

header { background-image: url(../comicfolder/banner.png);
     background-position: center;
     background-size: 100% 100%;
     height: 500px;
     background-repeat: no-repeat;	
text-indent: -99999px;
    width: 99%;
    margin: 0 auto;
}

.main_menu {
  background-color: #0d338f;
}

.main_menu li{
    display: inline-block;
    position: relative;
    background-color: #0d338f;
}

.main_menu li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.main_menu a:hover {
  color:#000;
}

.main_menu a.active {
  color: #fff;
}

.main_menu li ul {Display: none; position: absolute; top: 100%; margin-bottom: 100px; background-color: #333;}

.main_menu li:hover > ul {display: block; z-index:1;}

.main_menu li ul a { background-color: #333;}

.main_menu .icon {
  display: none;
    color: #fff;
    padding-right: 2px

}
.main_menu a.icon:hover {
  color: #fff;
}


#page_nav{background-color: transparent;
            text-align: center}

#page_nav ul{ background-color: #000000;
                margin:0 auto;
                width: 95%;
                max-width: 1000px;
}

#page_nav li{display: inline;
            text-decoration: none;}

#page_nav li a{
    border-right-style:solid;
    text-decoration: none;}
#page_nav li:last-child a {border-right-style: none;}
#page_nav a{
    color:#555;             
             padding: 0 20px;
            font-size: 40px;
            border-width:5px;}
#intro {margin: 0 10px;
        padding: 2% 5%;
        background-color: #fff;
        border: 1px solid black;}
#intro p{text-indent: 20px;}

#content {margin: 0 10px;
            background-color: #fff;
            border: 1px solid black;            
}
.comic_stuff {
            border: 1px solid black;
            background-color: #fff;
            margin:5% 5% 2%;
	box-shadow: 2px  5px 8px -4px #000, -2px 5px 8px -4px;}

.comic_stuff article:first-of-type h3{text-align: center;
font-size: 30px}

.test {display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 20px 0;}

.test figure img {max-width: 300px}
.test figcaption{text-align: center}
.test figcaption a{text-decoration: none; font-size: 20px}

.sm{
    margin:0 auto; 
    background-color: #fff;
    padding: 3px;
    width: 90%;
    }

.Archive_banner img{width:100%; max-height: 350px; min-height: 150px; margin-top: 10px}
.archive figure {width: 100%; margin-left: auto; margin-right: auto; box-shadow: none;}
.archive figure img{width: 100px; height: 150px;
                        box-shadow: 5px  7px 9px -4px #000;
                        border: 1px solid black;}
.test figure {box-shadow: none;}

figure {background-color: #fff; margin: auto; width:95%;
            padding-top: 1.5%; 
    max-width: 1000px;
box-shadow: 5px  8px 15px -4px #000, -5px 8px 15px -4px;}
figure img {display: block;
       margin: 0 auto;
       width:95%;
       max-height: 2000px;
}
figcaption{
           margin: 10px 15px 0 15px;}

.fb-like{background-color: transparent;}
.twitter-follow-button{}
.twitter-share-button{}


footer {background: window;
        border-radius: 0 0 10px 10px;
		border-top: 1px #000 solid;
        text-align: center;
        font-size: 10px;}
.altnav{text-align: center}
.altnav li{display: inline}
.altnav li a{text-decoration: none; 
                padding: 0 10px;}
.altnav a:hover{background-color: #aaa;
                color: #1e1e1e}

.altnav a{color: #555}
/*
Master Archive page
*/
#archive {margin-bottom: 20%;}
#archive h2{text-align: center;}
#archive p{text-align: center;
            padding: 0 5px;}
#archive figure{    width:25%;
                    min-width: 200px;
                    margin: 5% auto;
                    background-color: #fff;
                    }
#archive figcaption h3{margin-bottom: 5%;
                        text-align: center}
/*
End Master Archive
*/

/*
Css specific to Archived Issues
*/
#story_desc {font-size: 10px;
                margin: 0 10%;}

#story_archive h2{text-align: center;
            background-color: #555;
            padding-bottom: 3px;
            margin: 0 10px;
            font-size: 50px;
                 }
.issueSummary {margin: 0 10px;
        padding: 2% 5%;
        background-color: #fff;
        border: 1px solid black;}
.issueSummary p{text-indent: 20px;}
.issueSummary p:first-child{margin-bottom: 3px;}
.issues {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-row-gap: 10px;
    margin: 20px 10px;
}

.issues figure{
	box-shadow: none;
	border: 1px #000 solid;
}
.issues figcaption{
    margin-bottom:10%;
}

/* End Archived specific CSS
*/
/* By issue archive */

.title figure {width: 25%;
    text-align: center;
    Min-width:250px;
    margin: 5px auto;
	box-shadow: none;
	border: 1px #000 solid;
}
.title figcaption{
	margin-bottom:10%;
}

#issue_nav{text-align: center;
                font-size: 30px;}
#issue_nav a{text-decoration: none;
                background-color:#eee; 
                padding: 0 5%;
                box-shadow: 2px  2px 4px -2px #000}
#issue_nav a:first-child{margin-right: 10%}
       
.description {padding:0 5%;}

/* End by issue archive */


/*Current Comics Page*/
#current h2{font-size: 50px;}

#current {display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
    margin-bottom: 20px;
}
#current figcaption a{text-decoration: none; }
#current figcaption {margin-bottom: 10px}
/* credits */
.Credits{background-color: white; border: 10px solid black;
font-size: 20px
; color: black}
.Characters{text-align: center;
                margin: 10% 0;}
border{text-align: center}
.Story{text-align: center;
        margin: 10% 0;}
.Web-design{text-align: center;
                margin: 10% 0;}
.Editing{text-align: center}
/* End Credits */
#article_space {margin: 5%;}

#contacts_page {
    width: 100%;
    
}

#contacts_page h2 {
    background-color: #555;
    padding: 5px;
    margin: 0 10px;
    font-size: 50px;
    text-align: center;
    text-shadow: 2px 2px rgba(255,255,255, 0.1);
    box-shadow: 2px 3px rgba(0,0,0, 0.1);
}

#contacts_page ul {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    Margin: 10px 0;
    
}

#contacts_page li{
    list-style-type: none;
    margin: 5px;
    
}
/*background-color: #0d338f;*/
#contacts_page a{
    font-size: 20px;
    text-transform:capitalize;
    text-decoration: none;
    color: #000;
}

#contacts_page a:hover {
    text-decoration: underline;
    text-shadow: 2px 2px rgba(255,255,255, 0.1);
}

               
@media only screen and (max-width: 90em) {




header{height: 250px;
        width: 100%;}

#page_nav a{font-size: 25px;}

@media only screen and (max-width: 60em) {
   
    .main_menu li a{
        border-width:.5px;
        padding:0 .2em;
        font-size: 15px;
    
    }
  
    
    #page_nav a{font-size: 16px;
                padding: 0 15px;
                border-width:2px;}
/* By issue archive */
                   }
#issue_nav{font-size: 25px;}
/* End by issue archive */
}

@media only screen and (max-width: 40em) {
     .Banner {
        width: 100%;
            
    }

	header{height:120px;}
    #wrapper {width: 100%}
    #page_nav li{display: block; }
    #page_nav li a{display: block;
                   border-right-style:none; border-bottom-style: solid;                      
                   }
    .altnav a{font-size: 15px;}
    .altnav li a{text-decoration: none; 
                padding: 0 5px;}
    .posts {font-size: 15px}
   

    #issue_nav{
        font-size: 20px;
    }


    /* credits */
    .Credits{
        background-color: white;
        border: 5px solid black;
        font-size: 10px;
        color: black
    }
    .Characters{
        text-align: center;
        margin: 10% 0;
    }
    
    border{
        text-align: center
    }
    
    .Story{
        text-align: center;
        margin: 10% 0;
    }
    
    .Web-design{
        text-align: center;
        margin: 10% 0;
    }
    
    .Editing{
        text-align: center
    }
    
    /* End Credits */
    
    /* heroes log */
    .articleimg{
        margin: 0 auto;
        display: block
    }
    
    
    .issues {
        grid-template-columns: repeat(3, 1fr);
    }
    
       #contacts_page {
        background: #EFEFEF;;
    }
    
    #contacts_page h2 {
        margin: auto;
    }
}
@media only screen and (max-width: 30em){
    #wrapper {background-color: #0d338f; width:100%}
    header{
        background-size: 100%
    }
    
    .main_menu{margin-bottom: 0;}
    .main_menu li.drop:hover {margin-bottom:112px;} 
	.main_menu li a{
        display: block; 
        font-size: 13px;
        padding: 10px;
        text-align: left
	}
    
   /*.main_menu li ul {display: block}*/
    
      .main_menu li ul {float:none; margin: 0 auto; width:100%;}
      .main_menu li ul a{margin: 0 auto; width:50%; background-color: transparent}
      .main_menu li{display: none; width: 100%;}

        .main_menu a.icon {
        float: right;
        display: block;
        background-color: #0d338f;
        width: 100%; 
        text-align: right
      }
      .main_menu.responsive {position: relative;}
      .main_menu.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
        width: 25px
      }

      .main_menu.responsive li {
        display: block;
        text-align: left;
      }
    .Banner img{
        width: 80%
    }

    .sm{width: 100%}
    
    #intro{
        font-size: 8px;
        margin: 0;
    }
    
    #intro p{
        text-indent: 5px;
    }
    
    #content {margin: 0}
    
   .comic_stuff figcaption a {
        font-size: 10px
    }
    
    .comic_stuff figcaption .dates {
        display: none;
    }
    
    .archive figcaption {
        display: block;
    }
    
    header{
        height:100px;
    }
    
    figure {
        width:100%; box-shadow: none;
    }
    
    
    figcaption {font-size: 10px;}
    
    #page_nav ul{
        width: 100%
        }


    #issue_nav{
        font-size: 10px;
        }

    #story_desc {
        font-size: 5px;
        margin: 0 5%;
        }


    /* End by issue archive */
    .issues {
        display: block;
        }
    .issues figure{
        margin-bottom: 10px;
        text-align: center}
    /* End by issue archive */

    #story_archive h2{
            margin: 0;
            font-size: 30px;
                 }
    .issueSummary {margin: 0;
        padding: 2% 5%;
        background-color: #fff;
        border: 1px solid black;}

    /*Current.php and Archive.php*/
    #current {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-row-gap: 10px;
        width: 100%;
        }
}

/*   Created on : Jul 10, 2014, 8:34:10 PM
    Author     : Justin Burke
*/