/************************
*************************
TABLET VIEW
*************************
*************************/

	/*********************
	FIXES FOR SMALLER SCREENS UNDER iPHONE6 SIZE
	*********************/

	/*********************
	FIX THE HEADER BUTTONS
	**********************/

@media screen and (max-width: 375px) {

	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.0em;
		}

	.btn {
	    width:100px;
	    height:35px;
		}

	.btn2 {
	    margin-right:5px;
	    width:50px;
	    height:28px;
		}

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

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

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

	/* 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:120px;
	   max-width:120px;
	   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:130px;
	    max-height:130px;
	    float:left;
	    padding-left:3%;
	    padding-top:8px;
	}

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

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

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

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



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

	div#follow_htsal {
	    font-size:1em;
	}

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

	#more_pages2 { /*this is on the comics.php page */
	    width:350px;
	}


	/********************
	PAGE - COMIC PAGE 4 COLUMNS OF COMICS
	********************/

	#footer_img_4_col li {
	    float:left;
	    width:140px;
	    height:140px;
	}

	div.mc_colorbg {
	    height:1030px;
	}

}



	/*********************
	FIX THE HEADER BUTTONS
	**********************/

@media screen and (max-width: 440px) {
	ul.header_nav li.btn2 {
    float:left;
	}

	ul.header_nav li.follow {
	    float:left;
	}
}



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

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

	body {
		background: white;
		/* background: #551A8B; is purple */
	}



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

	#logo {
	    margin:0;
	    padding:0;
	    width:100%;
	    height:60px;
	}

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

	ul.header_nav li {
	    padding-top: 4px;
	}

	.btn2 {
		width:82px;
		margin-right:0;
	}



	/******************
	FOOTER - FOLLOW
	******************/

	div#follow_htsal {
	    font-size:1.3em;
	}

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

	#more_pages {
		font-size:1.5em;
	}

	#more_pages2 { /*this is on the comics.php page */
		width:450px;
		font-size:1.3em;
		display:inline-block;
		text-align:center;
		margin-left:10%;
	}

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

	#footer_logo {
		margin:0;
	    padding:0;
	    width:100%;
	    height:60px;
	}


	/******************
	FOOTER - NAVIGATION
	*******************/

	ul.footer_nav {
	    text-align:center;
	}




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

	/* featured images */
	#teaser_featured img {
	    height:269px;
	    width:578px;
    }

	/* standard size images */
	#teaser_standard img {
	    margin: 2% 0;
	    max-height:260px;
	    max-width:220px;
	}


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

	#comic p {
	    font-size:1.5em;
	}

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


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

	ul#comics_pag li{
    width:180px;
	}

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



}



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

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

	/* standard size images */
	/* 2 column panels on index page */

	#teaser_standard .bg_panel {
	    margin: 0;
	    margin-left: 0;
	    float:left;
	    max-height:100%;/* was 220px; */
	    max-width:48%;/* was 200px; */
	    background-image: url('../img/thumbs/teaser-standard.gif');
	    background-repeat: no-repeat;
	    margin-left:8px;

	}

	#teaser_standard .bg_panel img {
	   height:180px;
	   max-width:180px;
	   padding-left:30px;
	   padding-right:95px;
	   padding-top:30px;
	   padding-bottom:135px;
	}

	#more_pages2 { /*this is on the comics.php page */
		margin-left:14%;
		width:500px;
	}



}


@media screen and (min-width: 480px) and (max-width:553px) {
	/**********************************
	FIX COMIC PAGE -- BACKGROUND HEIGHT
	**********************************/

	/******************
	PAGE: COMIC
	*******************/
		div.mc_colorbg {
	    height:1200px;
	}

}



@media screen and (min-width: 759px) and (max-width:849px) {
	/**********************************
	FIX COMIC PAGE -- BACKGROUND HEIGHT
	**********************************/

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

	div.mc_colorbg {
    height:650px;
	}

}

@media screen and (min-width: 753px) and (max-width:911px) {
/**********************************
FIX INDEX PAGE -- 2 COLUMN DISPLAY OF COMIC PANELS
**********************************/

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

	#teaser_standard .bg_panel {
	    margin: 0;
	    margin-left: 0;
	    float:left;
	    max-height:100%;/* was 220px; */
	    max-width:50%;/* was 200px; */
	    background-image: url('../img/thumbs/teaser-standard.gif');
	    background-repeat: no-repeat;

	}

	#teaser_standard .bg_panel img {
	   height:170px;
	   max-width:170px;
	   padding-left:30px;
	   padding-right:100px;
	   padding-top:30px;
	   padding-bottom:135px;
	}

}


@media screen and (min-width: 850px) and (max-width:923px) {
	/**********************************
	FIX COMIC PAGE -- BACKGROUND HEIGHT
	**********************************/

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

	div.mc_colorbg {
    height:850px;
	}

}

@media screen and (min-width: 924px) {
	/**********************************
	FIX COMIC PAGE -- BACKGROUND HEIGHT
	**********************************/

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

	div.mc_colorbg {
    height:630px;
	}

}




/*
@media screen and (min-width: 451px) and (max-width:550px) {

	/**********************************
	FIX THE 'TEXT' BOX ABOVE THE ASIDE COLUMN
	**********************************/

	/* TEXT: POPULAR */
/*
	#aside #aside_boxes span {
	    display:none;
	}

}
*/


@media screen and (min-width: 685px) and (max-width:850px) {

	/* TEXT: POPULAR */
	#aside #aside_boxes span {
	    display:none;
	}

}



/**********************************
FIX TEASER STANDARD BOXES 
**********************************/

/*this media min-width was 660px, changed on 2/1/16*/
@media screen and (min-width: 735px) and (max-width:752px) {

	/* standard size images */
	#teaser_standard img {
	    margin: 2% 2%;
	}

}


/************************
*************************
DESKTOP VIEW
*************************
*************************/



/************************
PAGE -- COMICS
*************************/

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

	#wrapper2 {
		background:#fff;
	}

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

	ul#comics_pag li{
		height:190px;
		width:190px;
		margin:10px;
	}

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

#blog_p {
    margin-left:10px;
    margin-right:10px;
    font-size: .7em;
}

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

	#tshirtbtn_brdr {
	    width:60%;
	    border:5px dotted gray;
	    padding-bottom:0px;
	}

	#dsktp_spacer {
		height:50px;
	}

}

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

	#wrapper2 {
		width:1000px;
		margin:0 auto;
		background:#fff;
	}

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

	ul#comics_pag li{
		height:200px;
		width:200px;
		margin:0 10px;
	}

}



/*this media min-width was 660px, changed on 2/1/16*/
@media screen and (min-width: 753px) {

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

	body {
		background: yellow;
	}

	ul {
		margin-left:20px; /*another problem area... beware! this can cause problems with navs
							Here's the fix: change the margin-left for problem ul class */
	}

	ul.header_nav2 {
		margin-left:-50px;
	}


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

	header {
		margin:0 auto;
	}

	#logo {
	    float:left;
	    width:50%;
	    height:80px;
	}



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

	nav {
	    width:50%;
	    height:65px;
	    font-size:1em;
	    background-color:#000;
	    float:left;
	    padding-top:5px;
	    padding-bottom:10px;
	}



	/******************
	HEADER - IMG
	*******************/

	#header_img {
		display:block;
	    top:70px;
	    z-index:-1;
	}

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

	#more_pages {
		margin-left:20px;
	}

	#more_pages2 {
		margin-left:19%;
		width:600px;
	}

	


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

	#footer_logo {
		margin:0;
	    padding:0;
	    width:100%;
	    height:80px;
	}

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

	#wrapper {
		max-width:1000px;
		margin:0 auto;
	}

	#main {
		width: 65%;
		float: left;
	}

	/* text: Hot News> */
    #teaser_featured li p {
	    margin-top:-5px;
    }

	#teaser_featured img {
	    height:269px;
	    width:578px;
    }

    /* standard size images */
	#teaser_standard img {
	    height:300px;
	    width:240px;
	}

	#teaser_standard::after {
		clear: both;
	}

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


	#aside {
		width: 30%;
		float: right;
		margin-right:20px;
	}

	#aside #aside_boxes li img {
	    width:200px;
	    max-height:200px;
	    margin-left:25px;
	}

	/* TEXT: POPULAR */
		#aside #aside_boxes span {
	    margin-left:-40px;
	}



}

	




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

	/******************
	FOOTER MORE COMICS
	******************/
	
	#footer_img_4_col li {
		width:200px;
		margin:0 10px;
	}


	/******************
	ASIDE - GRAY BORDER 
	*******************/

	/* TEXT: POPULAR */
	
	#aside #aside_boxes span {
	    position:absolute;
	    top:90px;
	    margin-left:-80px;
	}

	.box_gray_spacer {
		display:block;
		height:35px;
		background-color:white;
	}

	.box_gray {
		border:3px dotted gray;
		padding-right:10px;
	}


}





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

	/**********************************
	FIX TEASER STANDARD BOXES 
	**********************************/

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

    /* standard size images */
	#teaser_standard img {
	    height:324px;
	    width:263px;
	    margin:0 5%;
	}



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

	#main2 {
	    display:inline-block;
	    margin:0 auto;
	    padding-left:50px;
	}


}