/* CSS Stylesheet for Goff Cartoons Catalog 				*/
/* www.newslettercartoons.com/002/css/css002.css 			*/
/* Saturday, July 28, 2018 Ted Goff gofftown@gmail.com 		*/

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/*  GALLERY PAGES STYLESHEET										 */

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/


/* ##################################################################*/

/*  DESKTOP PAGE SCREEN SIZE MIN 1025 WIDE			 */

/* ##################################################################*/


@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);

/* removes apple rounded input buttons	*/
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}



/* DESKTOP SCREEN size		*/
@media only screen  and (min-width: 1025px)  {


div.containertablet {
display: none;
}

div.containermobile {
display: none;
}

div.containerdesktop {
	position: relative;	
	background-color: white;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	overflow: auto; 
	

}  





/* Text rules */

h1 { margin: 0 0 -.2em 0; font-size: 2.8em; font-weight: 700; line-height: 1.5em; display:	inline-block;}  		
	
h2 { margin: 0 0 0 0; font-size: 1.2em; font-weight: 700; line-height: 1.1em; color: maroon; 	display:	inline-block;}  	
h3 { margin: 0 0 .5em 0; font-size: 1.15em; font-weight: 700; 	display:	inline-block;}  		
h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; 	display:	inline-block;}  		
p {margin: 0 0 1em 0;}  		
a {color: black;}  		
a:visited {color: black;}  		
a.gray { color: gray; font-weight: 700; text-decoration: none;}  		
a.gray:visited { color: gray; font-weight: 700; text-decoration: none;}  		
a.black { color: black; font-weight: 700; text-decoration: none;}  		
a.black:visited { color: black; font-weight: 700; text-decoration: none;}  		
a.maroon { color: maroon; font-weight: bold; text-decoration: none;}  		
a.maroon:visited { color: maroon; font-weight: bold; text-decoration: none;}  		
a.deliverypage { color: dodgerblue; font-size: 1.15em; font-weight: 700; text-decoration: underline;}  		
a.deliverypage:hover { color: maroon; font-size: 1.15em; font-weight: 700; text-decoration: underline;}  		
a.deliverypage:visited { color: dodgerblue; font-size: 1.15em; font-weight: 700; text-decoration: underline;}  		
a.white { color: white; font-weight: bold; text-decoration: none;}  		
a.white:visited { color: white; font-weight: bold; text-decoration: none;}  		
a.blacknormal { color: black; font-weight: normal; text-decoration: none;}  		
a.blacknormal:visited { color: black; font-weight: normal; text-decoration: none;}  		


/* TABLET TEXT */

h1.tablet { margin: 10px 0px 5px 0px; font-size: 2.2em; font-weight: 700; line-height: 1.5em; display:	inline-block;}  

h2.tablet { margin:10px 0px 0px 0px; font-size: 1.4em; font-weight: 700; line-height: .8em; color: maroon; 	display:	inline-block;}  

h3.tablet { margin:0px 0px 10px 0px; font-size: 1em; font-weight: 300; line-height: .8em; color: black; 	display:	inline-block;}  

h2.tabletX { margin:10px 0px 0px 0px; font-size: 1.4em; font-weight: 700; line-height: .8em; color: maroon; 	display:	inline-block;}  

h3.tabletX { margin:0px 0px 10px 0px; font-size: 1em; font-weight: 300; line-height: 1.4em; color: black; 	display:	inline-block;}  




/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  DESKTOP SCREEN SIZE: HTML, BODY 					      */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */

/*html{ max-width: 1150px; margin: 0 auto;}  		*/
html{ margin: 0 auto;}  	

body {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: black;
	background-color: gainsboro;
	margin-top: 0px;

	/*  polka dot background: #BDBDBD 	*/
	background-image:
	radial-gradient(#BDBDBD 12%, transparent 0),
	radial-gradient(#BDBDBD 12%, transparent 0);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;

	
	
	
	/* Squares in squares css background : https://www.heropatterns.com/ Pattern: Squares in Squares
	
	background-color: #cdcdce;
	background-image: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237a7a7a' fill-opacity='0.18' fill-rule='evenodd'%3E%3Cpath d='M0 0h35v35H0V0zm5 5h25v25H5V5zm5 5h15v15H10V10zm5 5h5v5h-5v-5zM40 5h25v25H40V5zm5 5h15v15H45V10zm5 5h5v5h-5v-5zM70 35H35v35h35V35zm-5 5H40v25h25V40zm-5 5H45v15h15V45zm-5 5h-5v5h5v-5zM30 40H5v25h25V40zm-5 5H10v15h15V45zm-5 5h-5v5h5v-5z'/%3E%3C/g%3E%3C/svg%3E");
		*/
}  		


/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  DESKTOP SCREEN SIZE: CONTAINER, ERRORMSG, SPAN ERRORBOX */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */

		

.errormsg {
	background-color: maroon;
/*	max-width: 1150px; */
	margin: 0 auto;
	overflow: auto;
	min-height: 100%;
}  		

.errorbox {
	background-color: white;
	border: 3px solid black;
	color: red;
	margin-top: 100px;
	margin-left: 100px;
	width: 300px;
	height: 300px;
	display: block;
	padding: 25px;
	font-size: 2em;
	font-weight: bold;
	padding: 50px 15px 50px 15px;
}  		


/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  DESKTOP SCREEN SIZE: HEADER, FOOTER					*/
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */

header.desktop {
	height: 85px;
	background: maroon;
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0 auto;
	width: auto;
/*	max-width: 1150px; */
}  		


header.subheaderdesktop {
	height: 30px;
	background: bisque;
	position: relative;
	color: black;
	width: auto;
/*	max-width: 1150px; */
	padding-top: 5px;
	padding-left: 20px;
	text-align: center;
	font-weight: normal;
	padding-top: 5px;
	padding-left: 20px;
	text-align: center;
	font-weight: normal;
}  		


footer.footerdesktop {

	position: relative;	
	background-color: white;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	overflow: auto; 
	height: 40px; 
	text-align: center;
	font-weight: normal;
	border: 0px solid red;
	padding: 10px 0px 0px 0px;

/*
display: block;
position: relative;
margin: 0 auto;
background-color: white;
color: black;
padding: 10px 0px 0px 20px;
text-align: center;
font-weight: normal;	
*/	
}  		


/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  DESKTOP SCREEN SIZE:   section.catalogpage				  */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */


section.catalogpage {
	height: 100%;
	padding-left: 20px;
	color: black;
}  		

.catalogtexth4 {
	margin: 0 0 1.5em 0;
	font-size: 1em;
	font-weight: 300;
}  

/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	ALL CARTOONBOX & SIDEBARBOX CLASSES */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


aside.cartoonbox {
/* 	
	display: block;
	float: left;
	text-align: center;
	margin: 20px 0px 0px 0px;
	border: 3px solid gainsboro;
	background-color: white;
	padding: 10px 10px 10px 10px;
	width: 60%;
	height: 600px;	
	*/
	
	flex-grow: 0; /* default 0 */
	border: 3px solid gainsboro;
	flex-basis: auto;
	width: 60%;
	height: 600px;
	background-color: white;
	float: left;
	margin: 20px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	
	
}  		





span.cartoonboxtext {
	margin-top: 0px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
	border: 0px solid purple;
	position: relative;
	display: block;
	padding: 0px 0px 0px -0px;
	font-size: 1.0em;
	color: black; 
	max-height: 450px;
	overflow-y: scroll;
}  		



aside.cartoonbox h3 {
	color: silver;
	float: left;
}  		



aside.cartoonbox img {
	margin: 10px 0 0 0;
	border: 0px solid orange;
	background: white;
	width: calc(100% - 6em);
	display:block;
	margin: auto auto;
	max-width: 530px;
} 




aside.sidebarbox {
display: block;
border: 3px solid gainsboro;
	height: 600px;
	width: 29%;
	float: right;
	text-align: left;
	margin: 20px;
	padding: 20px 10px 0px 10px;
	background-color: white;
	color: black;

}  	

aside.sidebarbox h2 {
font-size: 1.7em;
}

span.desktoptext::after {
content: "Cartoons";
}

span.sidebarverticalspace {
display: block;
border: none;
width: 100%;
height: .85em;
}

/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	NAVBAR 			*/
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */

/* DESKTOP GALLERY PAGE NAVBAR OKAY 181020  √   	*/



div#cartoonboxnavbardesktop {
	display: flex;
	flex-basis: auto;
	justify-content: center;	
	width: 100%;


}






#cartoonboxnavbardesktop img.leftarrow {  
	width: 25px;
	height: 25px;
	margin: 0px 20px -8px 0;
	float: left;
	
} 



#cartoonboxnavbardesktop  img.rightarrow {  
	width: 25px;
	height: 25px;
	margin: 0px 0 -8px 20px;
	float: left;
} 


span.addtocartbuttondesktop {
	display: inline-block;
	background-color: dodgerblue;
	color: white;
	border: none;
	text-decoration: none;
	cursor: pointer;
	width: 140px;
	font-size: .85em;
	text-align: center;
	float: left;
}
















































/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	SPECIFIC PAGE CONTENT */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */




/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	GALLERY PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */

aside.cartoon.gallery {
	float: left;
	text-align: center;
	margin: 20px;
	border: 3px solid gray;
	padding: 20px 40px 20px 20px;
	background: white;
	width: 600px;
}  		

section.homepage aside img.gallery {
	margin: 7px 0px 0px 10px;
	border: 0px solid gray;
	padding: 0px;
	background: white;
	width: 600px;
	height: 600px;
}  		

section.homepage aside.cartoon.gallery span.nav {
	background-color: white;
	position: relative;
	float: left;
	border: 1px solid red;
	width: 400px;
}  		

section.homepage aside.cartoon.gallery img.arrow {
	float: none;
	margin: 0 auto;
	border: 0px solid orange;
	padding-top: 0px;
	padding-left: 15px;
	padding-right: 15px;
	background: white;
	width: 30px;
	height: 30px;
	display: inline;
	position: relative;
	bottom: -8px
}  		

span.gallerytitle {
	padding: 10px 100px 10px 100px;
	color: maroon;
	font-size: 1.85em;
	font-weight: bold;
	line-height: 30px;
}  		

section.homepage aside.cartoon.gallery h3 {
	color: silver;
	margin-left: 0px;
	text-align: left;
}  		



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	BUTTONS */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


/* DODGERBLUE */
/* the addtocart button on index.html page under cartoon */
aside.cartoonbox input.addtocartbutton[type=submit]{
    background-color: dodgerblue;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: center;
    font-size: .85em;
    margin: 4px 2px;
    width: 150px; 
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;
}  		

/* DODGERBLUE */

input.homepageaddtocart[type=submit]{
    background-color: dodgerblue;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: center;
    font-size: .85em;
    margin: 4px 2px;
    /*     width: 140px;  */
    /* width: 150px; */
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;
}  		

/* DODGERBLUE */

input.cartbutton[type=submit]{
    background-color: dodgerblue;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: center;
    font-size: .85em;
    margin: 0px 0px 4px 0px;

    /* width: 150px; */
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;

}  		



/* DODGERBLUE */ 

aside input.addtocart[type=submit] {
	background-color: dodgerblue;
	border: none;
	color: white;
	width: 140px;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: .85em;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}  



/* DODGERBLUE */

aside.cartoonbox input.gotocart[type=submit]{
    background-color: dodgerblue;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: center;
    font-size: .85em;
    margin: 4px 2px;
    /*     width: 140px;  */
    width: 150px;
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;

}  


/* TOMATO */  

input.homepagegotocart[type=submit]{
	background-color: tomato;
	color: white;
	padding: 5px 5px;
	text-align: center;
	float: top;
	font-size: .85em;
	margin: 4px 2px;
	width: 30%;
	cursor: pointer;
	-webkit-appearance: none; 
	-webkit-border-radius:0; 
	border-radius:0;
	top: 0px;
	left: 0px;
} 

/* DARKORANGE */ 

input.homepagenextcartoon[type=submit]{
	background-color: darkorange;
	color: white;
	padding: 5px 5px;
	text-align: center;
	float: top;
	font-size: .85em;
	margin: 4px 2px;
	width: 30%;
	cursor: pointer;
	-webkit-appearance: none; 
	-webkit-border-radius:0; 
	border-radius:0;
	top: 0px;
	left: 0px
} 


		



/* TOMATO */ 
/* DESKTOP SEARCH BUTTON  √ */

aside.sidebarbox input.search[type=submit] {
	background-color: tomato;
	border: none;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	margin: 5px 2px;
	cursor: pointer;
	width: 45%;
	font-size: .85em;
	text-align: center;
	border: 0px solid orange;
	float: left;
}  		

/* BISQUE */ 
/* BROWSE BUTTON */

/* Desktop screen just browse button  √	*/

aside.sidebarbox input.browse[type=submit] {
	background-color: bisque;
	color: black;
	border: none;
	text-decoration: none;
	padding: 10px 10px 10px 10px;
	height: 37px;
	
	margin: 5px 2px;
	cursor: pointer;
	width: 50%;
	font-size: .85em;
	text-align: center;
	float: right;	
}  		

/* BROWSE BUTTON */
/* class for browse button on search.lib search results page */
input.searchlibbrowse[type=submit] {
	
			background-color:   bisque;
		border: none;
		color: black;
		padding: 10px 5px;
		text-decoration: none;
		margin: 5px 2px;
		cursor: pointer;
		width: 40%;
		font-size: .85em;
		text-align: center;
		float: right;
	
	
	
}  	



/* BISQUE */ 
aside.sidebarbox input.contactme[type=submit] {
	background-color: bisque;
	color: black;
	border: 1px solid bisque;
	padding: 10px 10px;
	margin: 5px 2px;
	cursor: pointer;
	width: 145px;
	font-size: .85em;
	text-align: center;
	float: left;
}  		



/* LINEN */ 
/*  ADD SIDEBAR PAGE LINK BUTTONS - Presentation Use, etc  */


aside.sidebarbox input[type=button], input[type=submit], input[type=reset] {

display:block;

	
	background-color: linen;
	color: black;
	border: 0px solid orange;
	padding: 8px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
/*width: calc(100% - 2em);*/
width: 100%;
 /*   max-width: 290px; */
/*	width: 290px;*/
	font-size: .95em;
	font-weight: normal;
	margin: 5px auto;
	cursor: pointer;
	height: 5%;
	
	
	



	
	
	
}  		






/* SILVER */ 
/* IN CART BUTTON */

aside.sidebarbox input.incart[type=submit] {
	background-color: silver;
	border: none;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	margin: 5px 2px;
	cursor: pointer;
	/* width: 140px; */
	font-size: .85em;
	text-align: center;
	border: 0px solid maroon;
	float: left;
}  		







/* DODGERBLUE */ 
/*  aside.sidebarbox  */

aside.sidebarbox input.addtocartsidebar[type=submit] {
	background-color: dodgerblue;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	margin: 5px 2px;
	cursor: pointer;
	width: 140px;
	font-size: .85em;
	text-align: center;
	border: 0px solid maroon;
	float: left;
}  		

/* DODGERBLUE */ 
/*  aside.sidebarbox  */

aside.sidebarbox input.viewcart[type=submit] {
	background-color: dodgerblue;
	color: white;
	cursor: pointer;
	width: 140px;
	font-size: .85em;
	text-align: center;
	display: inline;
	/*   box-shadow: 5px 5px 3px #888888;  */
	float: right;
	padding: 10px 5px;
	margin: 5px 2px;
	cursor: pointer;
}  		

/* DODGERBLUE */  		
input.addtocart[type=submit] {
	background-color: dodgerblue;
	color: white;
	cursor: pointer;
	width: 100px;
	font-size: .85em;
	text-align: center;
	display: inline;
	/*   box-shadow: 5px 5px 3px #888888;  */
	float: left;
	padding: 10px 5px;
	margin: 5px 2px;
	cursor: pointer;
}  	

/* DODGERBLUE */ 
/* ADD TO CART BUTTON */

input.addtocartgallery[type=submit] {
	background-color: dodgerblue;
	border: 0px solid gray;
	color: white;
	margin: 0 auto;
	cursor: pointer;
	width: 150px;
	font-size: 1.25em;
	text-align: center;
	display: inline;
	box-shadow: 5px 5px 3px #888888;

} 



.button1 {
	background-color: Bisque;
	color: black;
	border: 2px solid orange;
	font-weight: normal;
	/* font-size: 1.1em; */
	
		display: block;
		text-align: center;
		vertical-align: center;
	
} 



/* DESKTOP COLOR OF HOVERED LINK BUTTON  */

.button1:hover {
	background-color: Bisque;
	color: black;
	border: 2px solid orange;
	font-weight: normal;
	/* font-size: 1.1em; */

	display: block;
	text-align: center;
	vertical-align: center;
	
}  		







/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	CONTACT ME FORM FIELDS */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


/* text input field in index page sidebar for search button*/
input[type=text] {

	width: 100%;
	box-sizing: border-box;
	border: 2px solid orange;
	border-radius: 4px;
	font-size: 1.5em;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 12px 20px 12px 12px;
	margin: 5px 0px;
	color: black;
	
	
}  		


input.search2[type=text] {

display: block;
margin: 0px auto;

	box-sizing: border-box;
	border: 2px solid orange;
	border-radius: 4px;
	font-size: 1.5em;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 12px 20px 12px 12px;

	color: black;

	
} 


/*  contact me 6 digit number field */
input[type=text].email.sixdigit {
	width: 37%;
	box-sizing: border-box;
	border: 2px solid black;
	border-radius: 4px;
	font-size: 1em;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 5px 5px 5px 5px;
}  		


/* MAROON */
/*  contact me send email submit button */
input.search.email[type=submit] {
	background-color: maroon;
	border: none;
	margin: 50px 0 0 0;
	color: white;
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer;
	width: 200px;
	font-size: .85em;
	text-align: center;
	
}  		



/* DODGERBLUE */
input.search.email.contactme[type=submit] {
	background-color: dodgerblue;
	border: none;
	margin-top: 25px;
	color: white;
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer;
	width: 200px;
	font-size: .85em;
	text-align: center;
	margin-left: 50px;
		margin-right: 200px;
}  		



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	SEARCH BUTTONS */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */





/* TAN BUTTON / SUGGESTED KEYWORDS */
input.keywordbutton[type=submit] {
	background-color: tan;
	border: 0px solid black;
	color: black;
	padding: 5px;
	margin: 5px;
	width: 290px;
	cursor: pointer;
	float: left;
	font-size: 1.0em;
	text-align: center;
}  		


input.search_keywords[type=submit] {
	background-color: bisque;
	border: 0px solid black;
	color: black;
	padding: 5px;
	margin: 5px;
	width: 40%;
	cursor: pointer;
	float: left;
	font-size: 1.0em;
	text-align: center;

}



/* PREV RESULTS BUTTON */
input.prevhits[type=submit] {
	background-color: gray;
	border: 1px solid black;
	color: white;
	padding: 10px 10px;
	margin-top: -20px;
	margin-left: 270px;
	cursor: pointer;
	width: 25%;
	font-size: 1.0em;
	text-align: center;
	float: left;
}  		


/* PREV RESULTS BUTTON */
input.prevhitsblank[type=submit] {
	background-color: white;
	border: 1px solid white;
	color: white;
	padding: 10px 10px;
	margin-top: -20px;
	margin-left: 270px;
	cursor: pointer;
	width: 25%;
	font-size: 1.0em;
	text-align: center;
	float: left;
}  		


/* NEXT RESULTS BUTTON */
input.nexthits[type=submit] {
	background-color: maroon;
	border: 1px solid black;
	color: white;
	padding: 10px 10px;
	margin-top: -20px;
	cursor: pointer;
	width: 25%;
	font-size: 1.0em;
	text-align: center;
	float: left;
}  		

/* DODGERBLUE  */
input.checkout[type=submit] {
	background-color: dodgerblue;
	border: 0px solid black;
	color: white;
	padding: 10px 10px;
	margin: 10px;
	cursor: pointer;
	width: 250px;
	font-size: 1.0em;
	text-align: center;
}  		


/* MAROON */

input.continuecatalog[type=submit] {
	background-color: maroon;
	border: 0px solid black;
	color: white;
	padding: 10px 10px;
	margin: 10px;
	cursor: pointer;
	width: 250px;
	font-size: 1.0em;
	text-align: center;
}  		




/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	CHECK OUT PAGE FORM FIELDS */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


input.checkoutpg1[type=textarea], textarea {
	font-size: 1em;
	box-sizing: border-box;
	border: 2px solid black;
	border-radius: 4px;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 5px 5px 5px 5px;


}  		


input[type=text].checkoutpg1 {
	float: left;
	width: 500px;
	box-sizing: border-box;
	border: 2px solid black;
	border-radius: 4px;
	font-size: 1em;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 10px 10px 10px 10px;
}  		


input[type=text].checkoutpg1.error {
	float: left;
	width: 500px;
	box-sizing: border-box;
	border: 2px solid red;
	border-radius: 4px;
	font-size: 1em;
	background-color: white;
	color: black;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 10px 10px 10px 10px;
}  		


input[type=email].checkoutpg1 {
	float: left;
	width: 500px;
	box-sizing: border-box;
	border: 2px solid black;
	border-radius: 4px;
	font-size: 1em;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 10px 10px 10px 10px;
}  		


input[type=email].checkoutpg1.error {
	float: left;
	width: 500px;
	box-sizing: border-box;
	border: 2px solid red;
	border-radius: 4px;
	font-size: 1em;
	background-color: white;
	color: black;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 10px 10px 10px 10px;
}  		


input.search.authnet[type=submit] {
	background-color: dodgerblue;
	border: 2px solid black;
	margin-left: 30px;
	margin-top: 25px;
	color: white;
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer;
	width: 450px;
	font-size: .85em;
	text-align: center;
}  		

input.search.reviseorder[type=submit] {
	background-color: tan;
	border: 2px solid black;
	margin-left: 30px;
	margin-top: 25px;
	color: white;
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer;
	width: 450px;
	font-size: .85em;
	text-align: center;
}  



input.removecartoon[type=submit] {
	background-color: red;
	width: 65px;
	height: 30px;
	color: white;
	text-decoration: none;
	cursor: pointer;
	font-size: .85em;
}  		


/*  ################################################# */
/*  DESKTOP SCREEN SIZE: RADIO BUTTONS ON CHECKOUT PAGE   */
/*  ################################################# */

.option-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	position: relative;
	/*  top: 13.33333px; */
	top: 5px;
	right: 0;
	bottom: 0;
	left: 0;
	height: 20px;
	width: 20px;
	transition: all 0.15s ease-out 0s;
	background: #cbd1d8;
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-right: 0.5rem;
	outline: none;
	position: relative;
	z-index: 1000;
}  		

.option-input:hover {
}  		

.option-input:checked {
	background: dodgerblue;
}  		

.option-input:checked::before {
	height: 40px;
	width: 40px;
	position: absolute;
	content: '';
	/* checkmark character */
	display: inline-block;
	font-size: 26.66667px;
	text-align: center;
	line-height: 40px;
}  		

.option-input:checked::after {
	-webkit-animation: click-wave 0.65s;
	-moz-animation: click-wave 0.65s;
	animation: click-wave 0.65s;
	/*background: #40e0d0; */
	background: dodgerblue;
	content: '';
	display: block;
	position: relative;
	z-index: 100;
}  		


.option-input.radio {
	border-radius: 50%;
}  		


.option-input.radio::after {
	border-radius: 50%;
}  		





/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	ERROR MESSAGE PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


body.errormsg {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: black;
	margin: 0;
	padding: 0;
	background: maroon;
/*	max-width: 1150px; */
}  		

/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	CART */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


header.cart {
	height: 110px;
	background: dodgerblue;
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0 auto;
	max-width: 650px;
}  		



aside.cartooncart {
	float: left;
	text-align: center;
	margin: 20px;
	border: 3px solid gray;
	padding: 20px 40px 0px 20px;
	background: white;
	width: 600px;
	border: 3px solid gray;
}  		


aside.cartooncartpg2 {
	float: left;
	text-align: center;
	margin: 20px;
	border: 3px solid gray;
	padding: 20px 40px 0px 20px;
	background: white;
	width: 600px;
	border: 3px solid gray;
	height: 100%;
}  		


aside.cartsidebar {
	float: left;
	text-align: center;
	margin: 20px;
	border: 3px solid gray;
	padding: 20px 40px 0px 20px;
	background: white;
	width: 500px;
	border: 3px solid gray;
	height: 100%;
}  		


span.cart {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
	border: 0px solid black;
	display: block;
	width: 600px;
	height: 655px;
	padding: 0 0 0 0;
	font-size: 1.1em;
	color: black;
}  		


span.cartpg2 {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
	border: 0px solid dodgerblue;
	display: block;
	width: 600px;
	height: 100%;
	padding: 0 0 0 0;
	font-size: 1.1em;
	color: black;
}  		


span.deliverypage {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
	display: block;
	width: 500px;
	height: 100%;
	padding: 0 0 0 0;
	font-size: 1.1em;
	color: black;
	padding: 5px;
	word-wrap: break-word;
}  		


h3.cart {
	color: gray;
	margin-left: 0px;
	margin-top: -15px;
	text-align: center;
}  		


h2.carth2 {
	margin: 0 auto;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.1em;
	color: maroon;
}  		



div.cartoonboxleft {
	background-color: white;
	border: 2px solid dodgerblue;
	padding: 5px 5px 5px 5px;
	margin-bottom: 20px;
	margin-left: 0px;
	width: 210px;
	height: 260px;
	text-align: center;
	display: block;
	float: left;
	color: dodgerblue;
}  		


span.cartoonboxleft {
	background-color: white;
	border: 2px solid dodgerblue;
	padding: 5px 5px 5px 5px;
	margin-bottom: 20px;
	margin-left: 0px;
	width: 210px;
	height: 260px;
	text-align: center;
	display: block;
	float: left;
	color: dodgerblue;
}  		


/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	CHECKOUT PAGE 1 */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


div.checkout2 {
	background-color: white;
	width: 650px;
	margin: 0 auto;
	overflow: auto;
	max-width: 650px;
}  		


header.checkout2 {
	height: 85px;
	background: dodgerblue;
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0 auto;
	max-width: 650px;
}  		


footer.checkout2 {
	height: 60px;
	background: white;
	position: relative;
	padding-top: 10px;
	color: gray;
	margin: 0 auto;
	width: 650px;
	text-align: center;
}  		


section.checkout2 {
	max-width: 650px;
}  		


/* cartoon img */

section.checkout2 aside img {
	border: 0px solid gray;
	padding: 10px;
	padding-top: 45px;
	padding-bottom: 44px;
	background: white;
	height: 200px;
	width: 200px;
}  		




aside.cartooncartpg3 {
	float: left;
	text-align: left;
	margin: 20px;
	border: 3px solid gray;
	padding: 20px 40px 0px 20px;
	background: white;
	width: 500px;
	border: 3px solid gray;
	height: 100%;
}  		


span.checkoutpg1 {
	float: left;
	background-color: dodgerblue;
	color: white;
	padding: 5px 5px 5px 5px;
	margin: 20px 0px 20px 0px;
	width: 490px;
}  		


span.greenbartext {
	float: left;
	background-color: green;
	color: white;
	padding: 5px 5px 5px 5px;
	margin: 20px 0px 20px 0px;
	width: 490px;
}  		


span.bluebartext {
	float: left;
	background-color: dodgerblue;
	color: white;
	padding: 5px 5px 5px 5px;
	margin: 20px 0px 20px 0px;
	width: 490px;
}  		


span.maroonbartext {
	float: left;
	background-color: maroon;
	color: white;
	padding: 5px 5px 5px 5px;
	margin: 20px 0px 20px 0px;
	width: 490px;
}  		


span.checkoutpg1.maroon {
	background-color: red;
	color: white;
}  		


h3.checkout {
	color: gray;
	margin-left: 0px;
	margin-top: 50px;
	text-align: center;
	clear: left;
}  		


span.asterisk {
	color: red;
	font-size: 1em;
	font-weight: bold;
}  		


label.error {
	color: white;
	background-color: red;
	padding: 3px 3px 0px 3px;
	font-weight: bold;
}  		


span.centertext {
	padding-left: 55px;
	color: gray;
}  		


}  

/*  END 1150 PX DESKTOP SCREEN SIZE RULES */

/* ##################################################################*/
/* ########		END DESKTOP SCREEN SIZE 				#############*/
/* ##################################################################*/









/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/







/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/*  TABLET PAGE SCREEN SIZE  MIN 768 WIDE,	 MAX 1024 WIDE		 */

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/



/* TABLET	LINE 2764    was: min-width: 737 */

@media only screen and (min-width: 768px) and (max-width : 1024px) { 




/*  ################################################################## */
/*  ################################################################## */
/*  ################################################################## */
/*  TABLET SCREEN SIZE  */
/*  ################################################################## */
/*  ################################################################## */
/*  ################################################################## */


html{ margin: 0 auto;}  	

body {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: black;
	background-color: gainsboro;


	/*  polka dot background: #BDBDBD */
	background-image:
	radial-gradient(#BDBDBD 12%, transparent 0),
	radial-gradient(#BDBDBD 12%, transparent 0);
	background-size: 20px 20px; 
	background-position: 0 0, 10px 10px;
}  		




 		
/*  ################################################# */
/*  TABLET PAGE: CONTAINER ########################## */
/*  ################################################# */


div.containerdesktop {
	display: none;
}

div.containermobile {
	display: none;
}

/* TABLET */ 
div.containertablet {
	position: relative;
	background-color: white;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	overflow: auto; 
	margin-top: -30px;																					
}


/* TABLET */ 		
div.containertabletX {
	position: relative;
	background-color: white;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	overflow: auto; 
	margin-top: -30px;			
overflow: hidden;		/* remove scrollbar */

}		





div.flexcontainer {									
    display: flex;
    align-items: stretch;
	margin-top: -30px;				
													
}


header.tablet {
	height: 65px;
	background: peru;
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0px auto;
	width: auto;
	padding-top: 10px;
	padding-bottom: 10px;

}  



span.headerindentdesktop {
display: none;
}



header.subheadertablet { 	
	height: 30px;
	background: bisque;
	position: relative;
	color: black;
	width: auto;

	padding-top: 5px;
	padding-left: 20px;
	text-align: center;
	text-decoration: none;
	font-size: .9em;
}




header.headertabletX.dimgray {
/* same as in css002.css */
	height: 55px;
	background: dimgray;
	background:#8b8b8b;
	position: relative;
	color: silver;
	color: #d6d6d6;
	color: white;
	padding-left: 20px;
	margin: 0px auto;
	width: auto;
	padding-top: 10px;
	padding-bottom: 12px;
} 




a:link, a:visited, a:hover, a:active {
    color: black;
    text-decoration: none;
	font-weight: normal;
}



section.catalogpagetablet {



	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	color: black;
	margin-top: 0px;

}



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  TABLET SCREEN SIZE: 	CARTOONBOX SIDEBARBOX */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */

/* added 181020	*/

aside {
    padding: 20px;
    margin: 10px;
    float: left;
}


/* THIS FILE IS 002 CSS css002gallery.css */

.cartoonboxtablet {
	flex-grow: 0; /* default 0 */
	border: 3px solid gainsboro;
	flex-basis: auto;
	width: 58%;
height: 600px;
	background-color: white;
	float: left;
	margin: 10px 0px 0px 10px;
}

.sidebarbox {
	flex-grow: 0; /* default 0 */
	border: 3px solid gainsboro;
	flex-basis: auto;
	width: 25%;
height: 600px;
	background-color: white;
	float: right;
	margin: 10px 10px 0px 0px;
}


/* Tablet screen: Search Cartoons title in sidebarbox	*/
aside.sidebarbox h2 {
display: block;
		font-size: 2em;
		color: maroon;   				
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 5px 0px;
		text-align: left;
		border: 0px solid orange;
} 

span.desktoptext::after {
content: "";
}


span.sidebarverticalspace {
display: block;
border: none;
width: 100%;
height: 1em;
}






  		

aside.cartoonbox h3 {
	color: silver;
	float: left;
}  		

/* THIS FILE IS 002 CSS css002gallery.css */



aside.cartoonboxtablet img {
display: block;
	margin: 10px 0 0 0;
	border: 0px solid purple;
	background: white;
	height: auto;
	width: 100%;
} 

/* THIS FILE IS 002 CSS css002gallery.css */

aside.cartoonboxtabletX img {
display: block;
float: left;
margin-left: 30px;
	border: 0px solid purple;
	background: white;
	height: 55%;
	width: 55%;
} 


 	

/* Tablet screen: by keyword or cartoon number text	*/
aside.sidebarbox span.sidebarboxtext {
display: block;
		font-size: 1em;
		color: black;   				
		padding-top: 0px;
		margin-top: -20px;
		text-align: left;
		border: 0px solid orange;
} 







/* TOMATO */ 
/* SEARCH BUTTON - NO CHANGE */

aside.sidebarbox input.search[type=submit] {
	background-color: green;
	border: none;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	margin: 5px 2px;
	cursor: pointer;
	width: 45%;
	font-size: .85em;
	text-align: center;
	border: 0px solid orange;
	float: left;
}  		

/* BISQUE */ 
/* BROWSE BUTTON */

/* Desktop screen just browse button  √	*/

aside.sidebarbox input.browse[type=submit] {
	background-color: bisque;
	color: black;
	border: none;
	text-decoration: none;
	padding: 10px 10px 10px 10px;
	height: 37px;
	
	margin: 5px 2px;
	cursor: pointer;
	width: 50%;
	font-size: .85em;
	text-align: center;
	float: right;	
} 



input.searchfield[type=text] {

	display: block;
	width: 90%;
	box-sizing: border-box;
	border: 2px solid orange;
	border-radius: 4px;
	font-size: 1em;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 5px 5px 5px 5px;

	
} 





 	
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  TABLET SCREEN SIZE: 	NAVBAR */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


div#cartoonboxnavbar {
	display: flex;
	flex-basis: auto;
	justify-content: center;	
	width: 100%;


}


#cartoonboxnavbar img.leftarrow {  
	width: 25px;
	height: 25px;
	margin: 0px 20px -8px 0;
	float: left;

	background-color: green;
} 



#cartoonboxnavbar  img.rightarrow {  
	width: 25px;
	height: 25px;
	margin: 0px 0 -8px 20px;
	float: left;

} 


span.addtocartbutton {
	display: inline-block;
	background-color: dodgerblue;
	color: white;
	border: none;
	text-decoration: none;
	cursor: pointer;
	width: 140px;
	font-size: .85em;
	text-align: center;
	float: left;

}


















/* 
div#cartoonboxnavbar {	


display: none;	

	display: inline-block;
	flex-basis: auto;
	width: 100%;
	text-align: center;
	float: left;
	border: 3px solid gainsboro;	
	

}

*/
/* 
div#cartoonboxnavbar ul li {  

display: none;
	
	float: left;
	border: 1px solid green;
} 

*/


/*

span.leftarrow {


display: none;
 	
	flex-grow: 0; 
	flex-basis: auto;
	
	
	/* 
	
	width: 125px;
	background-color: white;
	padding: 20px;
	margin: 10px;
	margin-left: 25px;
		*/
		
		/* 	
	border: 2px solid orange;
	
	
}*/

/* 

span.addtocartbutton {

display: none;


	flex-grow: 0; 
	flex-basis: auto;
		*/
	/* 	
	width: 600px;
	background-color: dodgerblue;
	color: white;
	padding: 20px;
	margin: 10px;

	border: 2px solid orange;

	
}*/	
/* 
span.rightarrow {

display: none;


	flex-grow: 0; 

	flex-basis: auto;
	width: 125px;
	background-color: tomato;
	padding: 20px;
	margin: 10px;
	margin-right: 25px;

	border: 2px solid orange;
		
}*/

/* 
span.rightarrow img {  

display: none;

	width: 25px;
	height: 25px;
	margin: 0px 10px 0px 30px;
	
} 
*/



/*
img.leftarrow {  

display: none;
 
	width: 25px;
	height: 25px;
	margin: 0px 10px 0px 30px;
	
} 

*/

/*
div#cartoonboxnavbar ul li img.rightarrow {  

display: none;
 	
	width: 25px;
	height: 25px;
	margin: 0px 30px 0px 10px;

} 

*/



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	NAVBAR 	REFERENCE		*/
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */

/* DESKTOP GALLERY PAGE NAVBAR OKAY 181020  √   	*/
/* 	
div#cartoonboxnavbar {
	display: inline-block;
	border: none;
}


#cartoonboxnavbar img.leftarrow {  
	width: 25px;
	height: 25px;
	margin: 0px 20px -8px 0;
	float: left;
} 


#cartoonboxnavbar  img.rightarrow {  
	width: 25px;
	height: 25px;
	margin: 0px 0 -8px 20px;
	float: left;
} 


span.addtocartbutton {
	display: inline-block;
	background-color: dodgerblue;
	color: white;
	border: none;
	text-decoration: none;
	cursor: pointer;
	width: 140px;
	font-size: .85em;
	text-align: center;
	float: left;"
}

*/











/* continue 181019 1:11 PM 99999  */


/* horizontal line */
/*  div.rates */
.ratesline {
		height:3px;
		width: 90%;
		background-color: tan;
		margin-top: 10px;
		margin-bottom: 15px;
}





footer.footerdesktop {

	position: relative;	
	background-color: white;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	overflow: auto; 
	height: 40px; 
	text-align: center;
	font-weight: normal;
	border: 0px solid red;
	padding: 10px 0px 50px 0px;
	
}

	



/* 181009 revisit this issue later: make cartoonbox and sidebarbox same height
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_equal_height_flexbox	*/



/* TOMATO */ 
/* SEARCH BUTTON - NO CHANGE */

aside.sidebarbox input.search[type=submit] {
	background-color: purple;
	border: none;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	margin: 5px 2px;
	cursor: pointer;
	width: 45%;
	font-size: .85em;
	text-align: center;
	border: 0px solid orange;
	float: left;
}  		

/* BISQUE */ 
/* BROWSE BUTTON */

/* Desktop screen just browse button  √	*/

aside.sidebarbox input.browse[type=submit] {
	background-color: bisque;
	color: black;
	border: none;
	text-decoration: none;
	padding: 10px 10px 10px 10px;
	height: 37px;
	
	margin: 5px 2px;
	cursor: pointer;
	width: 50%;
	font-size: .85em;
	text-align: center;
	float: right;	
} 



input.searchfield[type=text] {

	display: block;
	width: 90%;
	box-sizing: border-box;
	border: 2px solid orange;
	border-radius: 4px;
	font-size: 1em;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 5px 5px 5px 5px;

	
} 



footer.footer {

	position: relative;	
	background-color: white;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	overflow: auto; 
	height: 40px; 
	text-align: center;
	font-weight: normal;
	border: 0px solid red;
	padding: 10px 0px 50px 0px;
	
}

	
	


/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  TABLET SCREEN SIZE: 	BUTTONS */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */

/* removes apple rounded input buttons	*/
input {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  appearance: none;
}



/* DODGERBLUE */
/* the addtocart button on index.html page under cartoon */
aside.cartoonbox input.addtocartbutton[type=submit]{
    background-color: dodgerblue;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: center;
    font-size: .85em;
    margin: 4px 2px;
    width: 150px; 
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;
}  		

/* DODGERBLUE */

input.homepageaddtocart[type=submit]{
    background-color: dodgerblue;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: center;
    font-size: .85em;
    margin: 4px 2px;
    /*     width: 140px;  */
    /* width: 150px; */
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;
}  		

/* DODGERBLUE */

input.cartbutton[type=submit]{
    background-color: dodgerblue;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: center;
    font-size: .85em;
    margin: 0px 0px 4px 0px;

    /* width: 150px; */
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;

}  		



/* DODGERBLUE */ 

aside input.addtocart[type=submit] {
	background-color: dodgerblue;
	border: none;
	color: white;
	width: 140px;
	padding: 10px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: .85em;
	margin: 4px 2px;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}  



/* DODGERBLUE */

aside.cartoonbox input.gotocart[type=submit]{
    background-color: dodgerblue;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    float: center;
    font-size: .85em;
    margin: 4px 2px;
    /*     width: 140px;  */
    width: 150px;
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;

}  


/* TOMATO - NO CHANGE */  

input.homepagegotocart[type=submit]{
	background-color: black;
	color: white;
	padding: 5px 5px;
	text-align: center;
	float: top;
	font-size: .85em;
	margin: 4px 2px;
	width: 30%;
	cursor: pointer;
	-webkit-appearance: none; 
	-webkit-border-radius:0; 
	border-radius:0;
	top: 0px;
	left: 0px;
} 

/* DARKORANGE */ 

input.homepagenextcartoon[type=submit]{
	background-color: darkorange;
	color: white;
	padding: 5px 5px;
	text-align: center;
	float: top;
	font-size: .85em;
	margin: 4px 2px;
	width: 30%;
	cursor: pointer;
	-webkit-appearance: none; 
	-webkit-border-radius:0; 
	border-radius:0;
	top: 0px;
	left: 0px
} 


		



/* TOMATO */ 
/* TABLET SEARCH BUTTON - TABLET  √ */

aside.sidebarbox input.search[type=submit] {
	background-color: tomato;
	border: none;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	margin: 5px 2px;
	cursor: pointer;
	width: 45%;
	font-size: .85em;
	text-align: center;
	border: 0px solid orange;
	float: left;
}  		

/* BISQUE */ 
/* BROWSE BUTTON */

/* TABLET screen just browse button  √	*/

aside.sidebarbox input.browse[type=submit] {
	background-color: peru;
	color: white;
	border: none;
	text-decoration: none;
	padding: 10px 10px 10px 10px;
	height: 37px;
	
	margin: 5px 2px;
	cursor: pointer;
	width: 50%;
	font-size: .85em;
	text-align: center;
	float: right;
	

	


	
	
	
}  		

/* BROWSE BUTTON */
/* class for browse button on search.lib search results page */
input.searchlibbrowse[type=submit] {
	
		background-color:   bisque;
		border: none;
		color: black;
		padding: 10px 5px;
		text-decoration: none;
		margin: 5px 2px;
		cursor: pointer;
		width: 40%;
		font-size: .85em;
		text-align: center;
		float: right;
	
	
	
}  	



/* BISQUE */ 
aside.sidebarbox input.contactme[type=submit] {
	background-color: bisque;
	color: black;
	border: 1px solid bisque;
	padding: 10px 10px;
	margin: 5px 2px;
	cursor: pointer;
	width: 145px;
	font-size: .85em;
	text-align: center;
	float: left;
}  		



/* LINEN */ 
/*  ADD SIDEBAR PAGE LINK BUTTONS - Presentation Use, etc  */


aside.sidebarbox input[type=button], input[type=submit], input[type=reset] {

display:block;

	
	background-color: linen;
	color: black;
	border: 0px solid orange;
	padding: 8px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
/*width: calc(100% - 2em);*/
width: 100%;
 /*   max-width: 290px; */
/*	width: 290px;*/
	font-size: .95em;
	font-weight: normal;
	margin: 5px auto;
	cursor: pointer;
	height: 5%;
	
	
	



	
	
	
}  		






/* SILVER */ 
/* IN CART BUTTON */

aside.sidebarbox input.incart[type=submit] {
	background-color: silver;
	border: none;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	margin: 5px 2px;
	cursor: pointer;
	/* width: 140px; */
	font-size: .85em;
	text-align: center;
	border: 0px solid maroon;
	float: left;
}  		







/* DODGERBLUE */ 
/*  aside.sidebarbox  */

aside.sidebarbox input.addtocartsidebar[type=submit] {
	background-color: dodgerblue;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	margin: 5px 2px;
	cursor: pointer;
	width: 140px;
	font-size: .85em;
	text-align: center;
	border: 0px solid maroon;
	float: left;
}  		

/* DODGERBLUE */ 
/*  aside.sidebarbox  */

aside.sidebarbox input.viewcart[type=submit] {
	background-color: dodgerblue;
	color: white;
	cursor: pointer;
	width: 140px;
	font-size: .85em;
	text-align: center;
	display: inline;
	/*   box-shadow: 5px 5px 3px #888888;  */
	float: right;
	padding: 10px 5px;
	margin: 5px 2px;
	cursor: pointer;
}  		

/* DODGERBLUE */  		
input.addtocart[type=submit] {
	background-color: dodgerblue;
	color: white;
	cursor: pointer;
	width: 100px;
	font-size: .85em;
	text-align: center;
	display: inline;
	/*   box-shadow: 5px 5px 3px #888888;  */
	float: left;
	padding: 10px 5px;
	margin: 5px 2px;
	cursor: pointer;
}  	

/* DODGERBLUE */ 
/* ADD TO CART BUTTON */

input.addtocartgallery[type=submit] {
	background-color: dodgerblue;
	border: 0px solid gray;
	color: white;
	margin: 0 auto;
	cursor: pointer;
	width: 150px;
	font-size: 1.25em;
	text-align: center;
	display: inline;
	box-shadow: 5px 5px 3px #888888;

} 



/* TABLET SIDEBARBOX LINK BUTTON  √ */
input.sidebarbuttontablet[type=submit] {


	background-color: bisque;
	color: black;
	border: 0px solid orange;
	font-weight: normal;
	display: block;
	text-align: center;
	vertical-align: center;		
	height: 30px;
	padding: 0px 0px 0px 0px;
	margin: 7px 0px 0px 0px;

} 



/* TABLET SIDEBARBOX LINK HOVERED BUTTON  √ */
input.sidebarbuttontablet:hover[type=submit] {
	background-color: orange;
	color: white;
	border: 2px solid orange;
	font-weight: normal;
	display: block;
	text-align: center;
	vertical-align: center;	
}  		




} /* close TABLET PAGE media screen tag */






/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/* END TABLET PAGE SCREEN SIZE 		 */

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/*	





/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */

/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */

/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */ 
/*
                _          __            _   
  ___ _ __   __| |   ___  / _|  ___  ___| |_ 
 / _ \ '_ \ / _` |  / _ \| |_  / __|/ _ \ __|
|  __/ | | | (_| | | (_) |  _| \__ \  __/ |_ 
 \___|_| |_|\__,_|  \___/|_|   |___/\___|\__|
                                             

*/
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */

/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */

/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */















/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/

/* START MOBILE PAGE SCREEN SIZE 		 */

/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/




/* MOBILE	*/
@media screen and (max-width: 736px) {

/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  GALLERY PAGE MOBILE SCREEN SIZE: HTML, BODY					  */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */



		
html
{
	/*remove vertical scrollbar, but keep page scrollable */
	overflow: scroll; 
}


body
{
	background-color: white;
	margin: 0px;
	border-color: 2px solid orange;
}



/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  GALLERY PAGE MOBILE SCREEN SIZE: CONTAINER					  */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */

div.containerdesktop {
	display: none;
}

div.containertablet {
	display: none;
}

div.containermobile {
	display: block;
	background-color: white;
	width: 100%;
	overflow: auto;
	width: auto;
	margin-top: 0px;
	border: 0px solid orange;	
}

footer.footerdesktop {
	display: none;
}


::-webkit-scrollbar
{
	width: 0px;
	background: transparent;
	/* make scrollbar transparent */
}





/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  GALLERY PAGE MOBILE SCREEN SIZE: TEXT					  */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */


h1.h1mobile
{
	margin: 0 0 0 10px;
	font-size: 1.75em;
	padding: 10px, 10px, 20px, 20px;
	font-weight: 700;
	line-height: 1em;	
}

h2.mobile
{
	margin: 0 0 0 0;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.1em;
	color: maroon;
	text-align: left;
}

h3.mobile
{
	margin: 0 0 .4em 0;
	font-size: 1.3em;
	font-weight: 700;
}

h4.mobile
{
	margin: 0 0 1.3em 0;
	font-size: 1em;
	font-weight: 700;
}




/*  ################################################# */
/*  MOBILE PAGE: HEADER, SUBHEADER, FOOTER ########## */
/*  ################################################# */
/*  MOBILE PAGE */
header.headermobile
{
	background: orange;
	color: white;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0px 0px 5px 0px;
	line-height: 2em;
	font-size: .75em;
	text-align: center;
	position: relative;
	font-family: arial,helvetica;
	width: 100%;
	height: 25px;
	border-top: 0px solid orange;
	border-bottom: 0px solid orange;
	margin-bottom: 0px		
}



/*  MOBILE PAGE */
header.subheadermobile {
	border-top: 5px solid bisque;
	border-bottom: 5px solid bisque;
	line-height: 1.4em;
	background: bisque;
	color: black;
	padding: 10px, 0px, 10px, 0px;
	margin: 0px 0px 10px 0px;
	font-size: 1.0em;
	text-align: center;
	position: relative;
	font-family: arial,helvetica;
}


/*  MOBILE PAGE */
header.subheadermobile a:hover
{
	
	background-color: tomato;
	color: white;
	padding: 10px;
	border: 2px solid black;
	font-size: 1em;

	
}

/*  MOBILE PAGE */
span.mobilefooter {
	font-size: 1em;
	font-family: arial, helvetica;
	text-align: center;
	width: 100%;
	display: block;
	margin: 20px 0px 20px 5px;


}



	/*  ################################################# */
	/*  MOBILE PAGE: SECTION   ################## */
	/*  ################################################# */
	/*  MOBILE PAGE */
	section.mobile {
		height: 100%;
		padding-left: 0px;
		color: black;
	}  		


	/*  MOBILE PAGE */
	section.catalogpagemobile {
		height: 100%;
		padding-left: 10px;
		padding-right: 10px;
		color: black;
	}  		


/*  ################################################# */
/*  MOBILE PAGE: ASIDE: CARTOONBOX  ##############*/
/*  ################################################# */


/*  ################################################# */
/*  MOBILE PAGE: CATALOGPAGE CARTOON BOX & SIDEBAR BOX */
/*  ################################################# */

aside.cartoonboxmobile
{
	border: 2px solid gainsboro;
	margin: 0px auto;
	padding: 5px;
}









.cartoonboxpresentationusemobile
{
	float: left;
	width: 320px;
	height: 710px;
}

/*  MOBILE PAGE */
/*  CARTOON BOX IMAGE */
aside.cartoonboxmobile img
{
 /* 
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 0px solid green;	
	width: 100%;
	height: 100%;
		*/
		
		display: block;
	margin: 10px 0 0 0;
	border: 0px solid purple;
	background: white;
	height: auto;
	width: 100%;
		
		
		
		
		
}








/*  MOBILE PAGE */
/*  SECTION CATALOGPAGE H3 */
.cartoonboxmobile h3
{
	font-size: 1.0em;
	color: silver;
	margin: -5px 0px 0px 5px;
	text-decoration: underline;
}

/*  MOBILE PAGE */
/* CATALOGPAGE CARTOON BOX ARROW */
.cartoonboxmobile img.arrow
{
	float: none;
	margin: 0px;
	padding: 0px;
	border: 0px solid orange;
	background: none;
	
}






		


/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  GALLERY PAGE MOBILE SCREEN SIZE: 	NAVBAR */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */

/* the add to cart button is not truly centered on index page: using <ul> <li> makes an indentation on the left	*/

div#cartoonboxnavbarmobile {
	display: flex;
	flex-basis: auto;
	justify-content: center;	
	width: 100%;
	border: 0px solid gray;
	padding: 5px 0px;
}


#cartoonboxnavbarmobile img.leftarrow {  
	width: 25px;
	height: 25px;
	margin: 4px 20px 0px 0px;
	padding: 0px;
} 


#cartoonboxnavbarmobile img.rightarrow {  
	width: 25px;
	height: 25px;
	margin: 4px 0px 0px 20px;
} 



span.more_text_on_cell_phonesmobile::after	{

display: none; 

width: 50%;
margin: 0px 0px 20px 0px;
float: left;
content: "or just click the search button below for a list of topics:";
}
	


input.addtocartbuttonmobile[type=submit] {
	display: inline-block; 
	background-color: dodgerblue;
	color: white;
	float: left;
	font-size: 1em;
	margin: 2px, 0px, 0px, 0px;
	border: 0px solid gray;
	height: 35px;
	width: 120px;

}


/* DODGERBLUE ADD TO CART BUTTON */
input.addtocartbutton[type=submit] {
	display: inline-block;
	background-color: dodgerblue;
	border: 0px solid gray;
	color: white;
	margin: 0 auto;
	cursor: pointer;
	width: 100%;
	max-width: 170px;
	font-size: 1.25em;
	text-align: center;
	display: inline;
	box-shadow: 5px 5px 3px #888888;

} 



span.underaddtocart {
width: 100%;
height: 100px;

}



span.clickcartoontext {
display: block;
background-color: white;
color: gray;
text-align: center;
padding: 10px 0px 10px 10px;
font-size: 1em;
font-family: arial,helvetica;
border-top: 0px solid orange;
border-bottom: 0px solid orange;
border-left: 2px solid gainsboro;
border-right: 2px solid gainsboro;
}


hr.style5 {
	background-color: #fff;
/*	border-top: 2px dashed silver; */
	border-top: 4px solid gainsboro;
}

hr.largescreen {
display: none;
}

/*  NAVBAR */

.Linesforqandapagemobile {
	height: 3px;
	width: 90%;
	background-color: tan;
	margin: 20px 0 20px 20px;
	padding: 0px;

}  

	
/*  MOBILE PAGE */
/* ADD TO CART BUTTON */
input.addtocartgallerymobile[type=submit]
{

/*
	background-color: dodgerblue;
	width: 120px;
	font-size: .85em;
	padding: 3px;
	box-shadow: none;
*/	
	
	
	
	background-color: dodgerblue;
	color: black;
	
	
	border: 2px solid gray;
	padding: 8px 20px;
	margin: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 90%;
	height: 50px;
		box-shadow: none;
	

	text-align: center;
	text-decoration: none;


	font-size: 1.25em;
	font-weight: normal;

	cursor: pointer;
	-webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;
	
	
	/* 
		border: 0px solid gray;
		color: white;
		margin: 0 auto;
		cursor: pointer;

		text-align: center;      
		display: inline;
		box-shadow: 5px 5px 3px #888888;
		float: left;
 		 */
}

/*  MOBILE PAGE */
/* FRONT PAGE CARTOON BOX SEE MORE CARTOONS TEXT */
span.seemorecartoonsmobile
{
	font-size: .65em;
	font-weight: 700;
	color: maroon;
	width: 10px;
	margin-left: -20px;
	margin-right: 0px;
}

/* MOBILE FORMAT SEARCH RESULTS PAGES	*/
/* RED BUTTON = SEARCH CARTOONS*/

input.searchmobile[type=submit] {
	/*display: inline-block;
	background-color: #EC3F3F;
	text-align: center;
	font-size: 1.25em;	
	text-align: center;
	text-decoration: none;
	color: white;
	text-decoration: none;
	border: 2px solid gray;
	padding: 8px 20px;
	margin: auto auto;
	padding: 8px 0px 15px 0px;
	max-width: 100%;
	height: 40px;
	cursor: pointer;*/

/*	background-color: #EC3F3F; */


	background-color: tomato;
	color: white;
	text-align: center;
	font-size: 1.25em;
	font-weight: normal;
	border: 2px solid gray;
	padding: 8px 10px;
	margin: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 35px;
	margin: 0px auto;
	padding: 0px;
	text-decoration: none;
	cursor: pointer;


	
}

input.searchmobile:hover[type=submit]{

	border: 2px solid orange;

/* 
	color: white;
	text-align: center;
	font-size: 1em;
	font-weight: normal;	
	border: 2px solid orange;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 35px;
	margin: 0px auto;
	padding: 0px;
	text-decoration: none;
	cursor: pointer;
	float: left;
	
		*/
}



div.containbuttons {
 display: block;
 border: 2px solid orange;
 padding: 10px 20px;
}


section.formbuttons {
  float: left;
  margin: 0 1.5%;
  width: 50%;
}




/* BISQUE BUTTON = OR JUST BROWSE CARTOONS*/
input.browsemobile[type=submit]
{






	background-color: bisque;
	color: black;
	text-align: center;
	font-size: 1.25em;
	font-weight: normal;
	border: 2px solid gray;
	padding: 8px 20px;
	margin: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 35px;
	margin: 0px auto;
	padding: 0px;
	text-decoration: none;
	cursor: pointer;

}


/*  MOBILE PAGE */
/* BISQUE BUTTON = OR JUST BROWSE*/
input.browsemobile:hover[type=submit]{

	border: 2px solid orange;

	/* 
	background-color: maroon;
	color: white;
	text-align: center;
	font-size: 1em;
	font-weight: normal;	
	border: 4px solid orange;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 100%;
	height: 35px;
	margin: 0px auto;
	padding: 0px;
	text-decoration: none;
	cursor: pointer;
	float: left;
		*/
}


input.srmobilesubmitbutton[type=submit]{

/* in cart and view cart buttons side by side in mobile view search results page	*/
display: inline-block;


	color: white;
	text-align: center;
	font-size: 1em;
	font-weight: normal;	
	border: none;
	text-align: center;
	text-decoration: none;

	width: 35%;
	height: 35px;

	padding: 0px;

	cursor: pointer;
	float: left;



}



/*  MOBILE PAGE */   
/* BISQUE BUTTONS for presentation use, etc     - THIS DOESN'T SEEM TO WORK*/
.button1mobile {

	
	
		background-color: bisque;
	text-align: center;
	font-size: 1em;	
	border: 2px solid gray;
	text-align: center;
	text-decoration: none;
	display: inline-block;	
	width: 100%;
	height: 35px;
	margin: 0px auto;
	margin-bottom: 10px;
	padding: 0px;
	color: black;
	text-decoration: none;
	cursor: pointer;
	
	
	
	
}




		



/*  MOBILE PAGE */
/* COLOR OF HOVERED LINK BUTTON */
.button1mobile:hover
{
/*
	background-color: Bisque;
	color: black;
	
	
	border: 4px solid orange;
	padding: 8px 20px;
	margin: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 245px;
	height: 50px;
	
	

	text-align: center;
	text-decoration: none;


	font-size: 1em;
	font-weight: normal;

	cursor: pointer;
	-webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;	
	*/
	
	
	
	
	background-color: bisque;
	text-align: center;
	font-size: 1em;	
	border: 2px solid gray;
	text-align: center;
	text-decoration: none;
	display: inline-block;	
	width: 100%;
	height: 35px;
	margin: 0px auto;
	padding: 0px;
	color: black;
	text-decoration: none;
	cursor: pointer;
	
	
	
	
}

/*  MOBILE PAGE BISQUE BUTTONS */
/* COLOR OF SELECTED PAGE LINK BUTTON */
.buttonmobile.button1mobile
{


    
   background-color: bisque;
   
   	text-align: center;
	font-size: 1.25em;
	font-weight: normal;
   

	border: 2px solid gray;
	text-decoration: none;
	display: inline-block;	
	width: 100%;
	height: 35px;
	margin: 0px auto;
	padding: 0px;
	color: black;
	text-decoration: none;
	cursor: pointer;
    
    
	
}

.newbuttonmobile {
   background-color: bisque;
	text-align: center;
	font-size: 1em;	
	border: 2px solid gray;
	text-align: center;
	text-decoration: none;
	display: inline-block;	
	width: 100%;
	height: 35px;
	margin: 0px auto;
	padding: 0px;
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/*  MOBILE PAGE */
/* COLOR OF SELECTED PAGE LINK BUTTON */
.buttonmobile.button1mobile:hover
{

		border: 2px solid orange;
	
	/* 	
	
	background-color: bisque;
	text-align: center;
	font-size: 1em;	
	border: 4px solid orange;
	text-align: center;
	text-decoration: none;
	display: inline-block;	
	width: 100%;
	height: 35px;
	margin: 0px auto;
	padding: 0px;
	color: black;
	text-decoration: none;
	cursor: pointer;
	*/
	
	
	
}


.buttonmobile.button1mobile.buttonpaddingmobile {
margin-bottom: 8px;
}



	
	/* SIDEBAR BOX MOBILE PAGE */
	/* SIDEBAR BOX MOBILE PAGE */
	/* SIDEBAR BOX MOBILE PAGE */
	/* SIDEBAR BOX MOBILE PAGE */
	/* SIDEBAR BOX MOBILE PAGE */
	/* SIDEBAR BOX MOBILE PAGE */
	/* SIDEBAR BOX MOBILE PAGE */
	
	
	
		aside.sidebarboxmobile {
		clear: left;
		border: 0px solid silver;
		border-top: 0px solid red;
		width: 100%;
		margin: 0px 0px 0px 0px;


		}  		

		aside.cartoonboxmobile h2 {
		font-family: arial,helvetica;
		font-weight: bold;
		padding: 10px 0px 10px 15px;
		font-size: 1.5em;
		font-weight: 700;
		line-height: 1.1em;
		}


		aside.sidebarboxmobile h2 {
		font-family: arial,helvetica;
		font-weight: bold;
		background-color: maroon;
		width: 320px;
		padding: 10px 0px 10px 15px;
		font-size: 1.5em;
		font-weight: 700;
		line-height: 1.1em;
		color: white;
		}


 /*  hr on presentation use page */
div.hrpresmobile {
	height: 2px;
/*	width: calc(100% - 80px); */
width: 95%;
	background-color: tan;
	margin: 10px 0 10px 0px;
	padding: 0px;
}  



	/* magglass2017.png */
	/* 	MOBILE PAGE */
	.sidebarboxmobile img {
		display: none;
	}  		

/*  ADD SIDEBAR PAGE LINK BUTTONS  */


aside.sidebarboxmobile input[type=button], input[type=submit], input[type=reset] {
	background-color: linen;
	color: black;
    display: inline-block;
    border: 2px solid gray;
	padding: 8px 20px 8px 20px;
	margin: 5px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 245px;
	height: 50px;
	
	font-size: 1em;
	font-weight: normal;
	
	cursor: pointer;
	-webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;
	
	
/*

	float: center;
    color: white;
    padding: 3px 3px;
    text-align: center;
    text-decoration: none;
	font-size: 1em;
    width: 140px;
    height: 30px;
    cursor: pointer;
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius:0;
*/	
	
	
}  	







form.airymobile {
margin: 40px 0px 0px 0px;
}



span.airymobile {
margin: 50px 0px 50px 0px;
}

span.HideFromMobile {
	display: none;
    opacity: 0;
    visibility: hidden;
}

h2 { margin: 0 0 0 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; color: maroon; 	display:none;}  




/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  GALLERY PAGE MOBILE SCREEN SIZE: TABLE					  */
/*  ################################################# */
/*  ################################################# */
/*  ################################################# */


table.mobileTable {
  font-family: Arial, Helvetica, sans-serif;
  border: 2px solid gainsboro;
  /*background-color: linen;*/

width: 100%;
  height: 50px;
  text-align: center;
  border-collapse: collapse;
  margin: 0 auto;
}

table.mobileTable tr {
	height: 40px;

}



table.mobileTable td {
  border: 2px solid gainsboro;
  padding: 10px 10px;



}

table.mobileTable tbody td {
  font-size: 13px;
  max-width: 100%;
}
table.mobileTable tfoot td {
  font-size: 14px;
}
table.mobileTable tfoot .links {
  text-align: right;
}
table.mobileTable tfoot .links a{
  display: inline-block;
 /* background: #1C6EA4; */
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}





/*  ################################################# */

/*  MOBILE PAGE: RATES */

/*  ################################################# 

			<aside class="cartoonbox rates">

				<span class="cartoonboxtext_presentationuse">
				
				*/

/*  section.catalogpage aside.cartoonbox span.rates h1 

.rates h1 {
	padding-top: 0px;
	font-size: 1.9em;
	line-height: 1.5em;
	color: #515151;
}  		
 */

/*  section.catalogpage aside.cartoonbox span.rates h2  

.rates h2 {
	font-size: 1.4em;
	line-height: 1.25em;
	color: maroon;
}  		
*/

/* horizontal line */

/*  div.rates 

 
div.ratesline {
	height: 3px;
	background-color: tan;
	margin-top: 10px;
	margin-bottom: 15px;
	margin-right: 10px;
}  		


h1.ratesh1 {
	padding-top: 0px;
	font-size: 1.9em;
	line-height: 1.5em;
	color: #515151;

}

h2.ratesh2 {
	font-size: 1.4em;
	line-height: 1.25em;
	color: maroon;
}
*/


	/*  MOBILE PAGE */
	/* CARTOON BOX ALL PAGES */
	
	
.cartoonboxtext_presentationuse_mobile {

	display: block;
	border: 1px solid gray;
	text-align: left;
	margin: 0px 0px 0px 0px;
	padding-left: 25px;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 12px;
	font-family: arial, helvetica;
	font-size: 1.25em;
	
	
}


.cartoonboxtext_contactme_mobile {

	display: inline-block;
	width: calc(100% - 13px);
	border: 1px solid gray;
	text-align: left;

	padding: 12px 0px 12px 12px; 
	



	margin: 0px auto;



	
}


aside.cartoonboxmobile h2 {
padding-left: 0px;
line-height: 1.25em;
}



	
.cartoonboxratesmobile {	
float: left;
text-align: left;
margin: 20px 0px 40px 0px;
border: 3px solid gray;
padding: 10px 10px 10px 10px;
background: white;	
}  	


span.ratesmobile {
float: left;
border: 0px solid orange;
width: 100%;
height: 10px;
}

/*  MOBILE PAGE */
span.rates {
float: left;
text-align: left;
margin: 0px 0px 0px 5px;
border: 0px solid orange;
display: block;
width: 275px;
padding: 5px;
font-size: .9em;
color: black;
}  		


/* horizontal line */
/*  MOBILE PAGE */
div.rateslinemobile {
height: 2px;
width: 95%;
background-color: tan;
margin-top: 8px;
margin-bottom: 10px;
}  		

h1 { margin: 0 0 -.2em 0; font-size: 2.8em; font-weight: 700; line-height: 1.5em; display:	inline-block;}  		

/*  MOBILE PAGE */
h1.ratesh1 {
margin-top: -20px;
font-size: 1.5em;
line-height: 1.5em;
color: #515151;
}  		

h2 { margin: 0 0 0 0; font-size: 1.5em; font-weight: 700; line-height: 1.1em; color: maroon; display: inline-block;}  		

/*  MOBILE PAGE */
h2.ratesh2mobile {
/*font-size: 1.0em;
line-height: 1.15em;*/
color: maroon;
padding-top: 0px;
}  		





/*  ################################################# */

/*  MOBILE PAGE: Q&A PAGE */

/*  ################################################# */


.LinesForContainerForTextWithScrollbarmobile{
	height: 3px;
	/*width: 96%;*/
	background-color: tan;
	margin: 10px 0px 10px 0px;
	/*margin: 20px 0 20px 0px;*/
} 



/*  ################################################# */

/*  MOBILE PAGE: CONTACTME PAGE */

/*  ################################################# */

img.contactmemobile {
display: block;
margin: 0px auto;
}

h2.emailthankyoumobile {
font-size: 1.25em;

}

}  /* end of media query max-width 320px */