/************************
*************************
MOBILE VIEW
*************************
*************************/



/******************
GENERAL
*******************/

body {
    margin:0;
	font-family: 'Open Sans', sans-serif;
}

ul {
    list-style:none;
    padding-left:2.5%; /* note: can cause display problems with new pages. 
    ex1: Browse All Comics link is stuck on right side of screen.
    Fix1: remove extra UL... or style specified new UL with padding-left:0; */
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
}



/******************
HEADER - LOGO
*******************/

header {
    max-width:1000px;
    overflow:auto; /*this is what pushes down the div found in header-comics.php */
}

#logo {
    margin:0;
    padding:0;
    width:100%;
    height:50px;
    display:block;
    text-align:center;
}

a img {
    height:100%;
}

/******************
HEADER - NAVIGATION
*******************/

ul.header_nav {
    background-color:#000;
    text-align:center;
    padding:0;
    margin:0;
    list-style: none;
}

ul.header_nav2 {
    height:30px;
}

ul.header_nav li {
    display:inline-block;
    padding-top: 8px;
    font-size:1.2em;
}

.btn {
    width:120px;
    height:35px;
    background-image: url('../img/btn/btn-40h.gif');
    background-repeat: no-repeat;
}

.btn2 {
    margin-right:5px;
    width:72px;
    height:28px;
    background-image: url('../img/btn/btn-30x82.gif');
    background-repeat: no-repeat;
}

.btn2:nth-child(3){
    width:82px;
    }

ul.header_nav li.btn2 {
    font-size:1em;
    padding-top: 2px;
    margin-top:0;
}

ul.header_nav li.follow {
    padding-top:2px;
    height:22px;
}

.btn:hover{
background-image: url('../img/btn/btn-40h-hover.gif');
}

.btn2:hover{
background-image: url('../img/btn/btn-30x82-hover.gif');
}

.btnactive{
    z-index:1;
    background-image: url('../img/btn/btn-40h-active.gif');
}



/******************
PAGE: COMIC
*******************/

#browse_all_comics {
    display:block;
    text-align:center;
    font-size:1.5em;
}

#browse_all_comics a {
    text-decoration:none;
}

#browse_all_comics a:nth-child(4) {
    color:black;
}


/******************
CALL TO ACTION -
BUY A T-SHIRT
******************/

p#btn_t-shirt {
    text-align:center;
    border:5px solid red;
    border-radius:10px;
    width:300px;
    margin:0 auto;
    padding-bottom:3px;
}

p#btn_t-shirt img {
    height:25px;
    width:25px;
    padding-top:3px;
    margin-bottom:-5px;
    margin-right:5px
}


/******************
BUTTONS - Random, Popular, All, Patreon
*******************/

/*
footer #browse_all_comics a img:hover{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.33);
-moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 0.33);
box-shadow:         0px 0px 10px 0px rgba(0, 0, 0, 0.33);
}

footer #browse_all_comics a img:hover:nth-child(4){
     -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
 -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 150, 255, 0.67);
-moz-box-shadow:    0px 0px 20px 0px rgba(0, 150, 255, 0.67);
box-shadow:         0px 0px 20px 0px rgba(0, 150, 255, 0.67);
}
*/



/******************
SOCIAL - FACEBOOK
******************/

/* This gets Facebook to fall into place vertically*/
#social iframe {
    margin-top:-6px;
}

#social span {
    display:inline-block;
    width:110px;
}


/******************
FOOTER 
******************/

footer {
    margin:0 auto;
    width:100%;
    max-width:1000px;
    overflow:none; /* note overflow:auto will make this section scroll, so keep it with overflow:none; */
}

footer nav {
    width: 100%;
}


/******************
FOOTER MORE PAGES
******************/

#more_pages {
    margin:0 auto;
    padding: 0 2.5%;
    display:inline-block;
    text-align: center;
}

#more_pages2 { /*this is on the comics.php page */
    width:400px;
    margin:0 auto;
    padding: 0;
    display:inline-block;
    text-align:center;
}

#more_pages2 p {
    font-size:1em;
}

/******************
PAGE: COMIC -- FOOTER MORE COMICS
******************/

#footer_img_4_col li {
    float:left;
    width:170px;
    height:170px;
    margin:5px;
    padding-bottom:10px;
}


/******************
FOOTER SOCIAL - Follow HTSAL twitter, fb, email, RSS
******************/

div#follow_htsal {
    font-size:1em;
    margin-left:10px;
    text-align:center;
}

div#follow_htsal a {
    margin-left:8px;
    margin-right:8px;
}

/******************
FOOTER LOGO
*******************/

#footer_logo {
    width:100%;
    height:50px;
    display:block;
    text-align:center;
}

a img {
    height:100%;
}

/******************
FOOTER - NAGATION
*******************/

ul.footer_nav {
    background-color:#000;
    padding:0;
    margin:0;
    padding-top:4px;
    list-style: none;
}

ul.footer_nav li {
    display:inline-block;
    text-align: center;
    padding-top: 8px;
    font-size:1.2em;
}


/******************
PAGE: COMIC
*******************/

#comic {
    background: #fff;
}


/******************
PAGE: COMICS
*******************/

#main2 span {
    display:block;
    text-align:center;
    padding-top:10px;
    font-size:1.5em;
}

ul#comics_pag {
    margin-top:0px;
    }

ul#comics_pag li{
    width:170px;
    float:left;
    background:white;
    margin-bottom:10px;
    margin-left:8px;
}

ul#comics_pag a img {
    max-height:170px;
}

div.mc_colorbg {
    display:block;
    overflow:none;
    height:1200px;
}

/******************
PAGE: INDEX
*******************/
/******************
2-COLUMN LAYOUT
*******************/


#wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

#aside {
    width: 100%;
}

/* featured images */
/* text: Hot News> */
#teaser_featured li p {
    margin:0;
    margin-top:-15px;
}

#teaser_featured img {
    height:180px;
    width:480px;
    margin-bottom:2.5%;
}

/* standard size images */

#teaser_standard .bg_panel { /* div & bg panel img */
    margin: 0;
    float:left;
    max-height:100%;/* was 220px; */
    max-width:46%;/* was 200px; */
    background-image: url('../img/thumbs/teaser-standard2.gif');
    background-repeat: no-repeat;
    margin-left:6px;
    margin-top:-20px;
    margin-right:5px;

}

#teaser_standard .bg_panel img { /*this is for the thumbnail img */
   margin-top:5px;
   height:140px;
   max-width:140px;
   padding-left:15px;
   padding-right:25px;
   padding-top:15px;
   padding-bottom:115px;
}

/******************
PAGE: INDEX
******************/
/******************
ASIDE
*******************/

#aside {
    max-width:100%;
    margin: 0 auto;
    text-align: center;
}

/* TEXT: POPULAR */
#aside #aside_boxes span {
    display:inline-block;
    width:120px;
    height:40px;
    margin-left:10px;
    padding: 0px;
    font-size:1.5em;
    color: red;
    background-image: url('../img/btn/btn-40h.gif');
    background-repeat: no-repeat;
}

#aside #aside_boxes li img {
    width:160px;
    max-height:160px;
    float:left;
    padding-left:8px;
    padding-top:8px;
}




/******************
T-SHIRT BUTTON
******************/

#tshirtbtn_brdr {
    margin:0 auto;
    width:80%;
    border:3px dotted gray;
    padding-bottom:10px;
}

/******************
BLOG
******************/

#blog_brdr {
    margin:0 auto;
    width: 80%;
    border:1px solid gray;
    border-radius:20px;
    padding-bottom:10px;
    background-color: gray;
}

#blog_p {
    margin-left:5px;
    margin-right:5px;
    color: white;
    font-size: .5em;
}

/******************
PAGE: ABOUT & PARTNER & CONTACT
*******************/

.yolo { /* this is the page title */
    height:280px;
    background:white;
}

.bg_calor li {
    float:left;
    width:300px;
    padding:0 20px 0 20px;
    margin:10px;
    margin-top:0;
}


.bg_calor li:nth-last-child(-n+2) { /*selects all but last 2 children */
    background:white;
    border:none;
    padding:0;
    margin:0;
    padding-left:15%;
    padding-bottom:30px;
}

.bg_calor li:last-child {
    margin-top:-25px;
}

.bg_calor li p {
    font-size:1.1em;
    margin-left:10px;
    padding:5px 0 10px 0;
}

.bg_calor li span { /*this is the btn image -- patreon & aweber buttons */
    height:50px;
    width:238px;
}

@media screen and (min-width: 440px) {

    .bg_calor li {
        margin-left:16%;
    }

    .bg_calor li:nth-last-child(-n+2) { /*selects the last 2 children*/
        padding-left:25%;
        padding-right:25%;
        padding-bottom:30px;
    }

    .yolo .yolo2 {
    margin-left:-10px;
    }

}


@media screen and (min-width: 780px) {

    .yolo .yolo2 {
        margin-left:-120px;
    }


    .bg_calor li {
        margin-top:10px;
        margin-left:5px;
    }

    .bg_calor li:nth-last-child(-n+2) { /*selects the last 2 children*/
        padding-left:3%;
        padding-right:0;
        padding-bottom:50px;
    }

    #bg_calor_contact li:nth-last-child(-n+2) { /*selects the last 2 children*/
        padding-bottom:0px;

    }

    .bg_calor li:last-child {
        margin-top:0;
    }

}




/******************
PAGE: CONTACT
*******************/



/******************
COLORS
*******************/


a {
    color: #c00000;
}

#logo {
    background:black;
}

#main {
    background:#fff;
}

#aside {
    background:#fff;
}

footer {
    background:#fff;
}

.comicnav li a {
    color:black;
}

.comicnav li a:hover {
    background:#555;
    color:yellow;

}

.comicnav .active a {
    background:#ddd;
}


#footer_logo {
    background: #000;
}

p#btn_t-shirt {
    color:white;
    background:red;
}

p#btn_t-shirt a {
    color:white;
}

p#btn_t-shirt:hover {
    background:#c00009;
    border: 5px solid #c00009;
}

div.mc_colorbg {
    background:linen;
}

/**************************
COLOR - ABOUT
**************************/


.bg_calor li {
    border-left:5px solid gray;
    background:#ddd;
}


/**************************
END COLOR - ABOUT 
**************************/



/*********************
COLOR - PARTNER
*********************/

.bg_calor a li {
    color:black;
}

.bg_calor_partner li:nth-child(-n+6) { /*top 6 children */
    border-left:5px solid gray;
    background:linen;
    margin:5px 10px 5px 10px;
    padding:0px 20px 0 20px;
}


/*********************
END COLOR - PARTNER
*********************/

/*********************
COLOR - CONTACT
*********************/

#bg_calor_contact li:nth-child(1) {
    border-left:10px solid gray;
    margin-top:18px;
    background:linen;
}


/*********************
END COLOR - CONTACT
*********************/