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

/*  DESKTOP DISPLAY PAGE	002/css/css002.css				 */

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


/*  TO DO: add media screen lines for each device size, and specify the cartoon size
for that screen size. */



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

/*  DESKTOP PAGE SCREEN SIZE MIN 1025 WIDE			 */

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

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


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


/* Hide div class containermobile */
div.containermobile {
display: none;
}

/* Hide div class containertablet */
div.containertablet {
display: none;
}

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

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





/* 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.6em; 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;}  		



/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  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 gray;
	padding: 10px 10px 10px 10px;
	background: white;
	width: 60%;
	height: 600px;
}  		

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(70% - 50px);
	*/
	
	    display:block;
	    margin: auto auto;
 /*   margin: 0 -0.75em; */
    width: calc(100% - 6em);
    max-width: 530px;

} 





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


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


/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	PRESENTATION USE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */



aside.cartoonbox.presentationuse {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 410px);
	height: 600px;
}  		


 /*  hr on presentation use page */
aside.cartoonbox div.hrpres {
	height: 3px;
	width: calc(100% - 50px);
	background-color: tan;
	margin: 20px 0 20px 0px;
	padding: 0px;
}  	



aside.cartoonbox div.searchtopics {
	height: 3px;
	width: calc(100% - 50px);
	background-color: tan;
	margin: 20px 20px 20px 20px;
	padding: 0px;
} 


span.cartoonboxtext_presentationuse {
	display: block;
	padding: 10px 10px 10px 0px;

	text-align: left;
	padding-left: 25px;
	padding-top: 12px;
	padding-bottom: 12px;

}  		

	



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	INHOUSE NEWSLETTER USE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


aside.cartoonbox.inhousenewsletteruse {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 410px);
	height: 600px;
}  		

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




/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	CUSTOMER NEWSLETTER USE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */



aside.cartoonbox.customernewsletteruse {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 410px);
	height: 600px;
}  		


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



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






aside.cartoonbox.rates {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 410px);
	height: 600px;
}  	

/* this is used on rates page */
aside.cartoonboxrates {
	/*float: left;
	text-align: left;
	margin: 20px 0px 0px 0px;
	border: 3px solid gray;
	padding: 10px 10px 10px 10px;
	background: white;
	width: calc(100% - 390px);
	height: 650px; */

display: block;
	float: left;
	text-align: center;
	margin: 20px 0px 0px 0px;
	border: 3px solid gray;
	padding: 10px 10px 10px 10px;
	background: white;
	width: 60%;
	height: 600px;



}  


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

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


.ratesh2 {
		font-size: 1.4em;
		line-height: 1.25em;
		color: maroon;   				
		padding-top: 0px;
				text-align: left;
}

.rates h2 {
	font-size: 1.4em;
	line-height: 1.25em;
	color: maroon;
			text-align: left;
} 


.rateslinedesktop {
		height:3px;
		width: 95%;
		background-color: tan;
		margin-top: 10px;
		margin-bottom: 15px;
}


span.rates {
	float: left;
	text-align: left;
	margin-top: 0px;
	margin-right: 0px;
	border: 0px solid gray;
	display: block;
	padding: 0px 0px 0px 0px;
	font-size: 1.0em;
	color: black;
}  		
 
 
div.ratesline {
	height: 3px;
	background-color: tan;
	margin-top: 10px;
	margin-bottom: 15px;
	margin-right: 10px;
}  		



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	Q&A PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


aside.cartoonbox.qandapage {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 410px);
	height: 600px;
}  		

.ContainerForTextWithScrollbar {
	float: left;
	height: 600px;
	width: calc(100% - 50px);
	padding: 0px;
	margin: -10px 0px 0px 10px;
	background: white;
	border: 0px solid gold;
}  		

.TextWithScrollbar {
	height: 450px;
	width: calc(100% - 50px);
	overflow: auto;
	background: linen;
	border: 2px solid tan;
	padding: 10px 10px 10px 10px;
	margin: 0 0 0 20px;
	text-align: left;
}  		


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

}  		

.LinesForContainerForTextWithScrollbar{
	height: 3px;
	width: 96%;
	background-color: tan;
	padding: 0px;
	margin: 20px 0 20px 0px;
} 




/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	IMMEDIATE DOWNLOADS PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */



aside.cartoonbox.immediatedownloads {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 410px);
	height: 600px;
}  		


aside.sidebarbox.immediatedownloads {
	height: 600px;
	width: 295px;
	float: right;
	text-align: left;
	margin: 20px;
	padding: 20px 10px 0px 10px;
	background-color: white;
	color: black;
	border: 3px solid gray;

}  


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


/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	CONTACT ME PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


aside.cartoonbox.contactme {
	margin: 20px 0px 0px 0px;
	width: calc(100% - 410px);
	height: 600px;
	text-align: left;
	padding: 10px 30px 10px 10px;	
}  		

aside.cartoonbox.contactme img {
	margin: 0px 0 0 0;
	border: 0px solid orange;
	padding: 0 15px 0 0;
	background: white;
	width: 90px;
	height: 40px;
}  

aside.sidebarbox.contactme {
	height: 630px;
	width: 335px;
	float: right;
	text-align: left;
	margin: 20px;
	padding: 20px 0px 10px 30px;
	background-color: white;
	color: black;
	border: 3px solid gray;
}  		

.contactme {
	float: left;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
	border: 0px solid orange;
	display: block;
	width: 600px;
	height: 655px;
	padding: 0 0 0 0;
	font-size: 1.0em;
	line-height: 25px;
	color: black;
}  		

span.cartoonboxtext_presentationuse img.contactme {
	float: left;
	text-align: left;
	margin-top: -3px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 0px;
	border: 2px solid bisque;
	display: block;
	width: 129px;
	height: 32px;
	padding: 0 0 0 0;
}  		


/* ################################################################## */
/* the hidden form field "website" identifies spambots */
/* spambots will enter text into the hidden field and */
/* so then can be blocked from sending me email */
input[type="text"]#website { display: none; }
/* ################################################################## */

aside.cartoonbox div.contactmetext {
margin: 20px 0 0 30px;
border: 0px solid orange;
}




/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  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: 	ABOUT ME PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */






aside.cartoonbox.aboutme {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 410px);
	height: 600px;
}  		


div.catalogtext_aboutme {
	margin-top: 0px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 0px;
	border: 0px solid 	purple;
	display: block;
	padding-left: 25px;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	font-size: 1.0em;
	color: black;
    max-height:630px;
    overflow-y:auto;
}  		




span.aboutmequote {
background-color: bisque;
border: 1px solid gray;
display: block;
margin-bottom: 10px;
padding: 10px;

} 


.style1 {
	padding: 8px;
	background-color: linen;
	border-top: 2px solid silver;
	border-bottom: 2px solid silver;
	margin-right: 20px;
	margin-top: 0px;
	text-indent: 23px;
	width: 550px;
	float: right;
	text-align: left;

}  		


/*  blockquote */
.style1 span {
	font: 1.0em italic Helvetica;
	display: block;
	background-repeat: no-repeat;
	background-position: bottom right;
}  		


/*  blockquote.style1 span */
.author {
	text-align: right;
	font: .95em italic "Times New Roman", serif;
	padding-top: 10px;
} 



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	CUSTOMER LOGIN PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */






aside.cartoonbox.customerlogin {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 440px);
	height: 600px;
	text-align: left;
	padding: 10px 30px 10px 10px;	
}  		

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

aside.cartoonbox.more {
	margin: 20px 0px 0px 0px;
	padding: 20px 0 0 20px;
	width: calc(100% - 390px);
	height: 600px;
}  	


.morecartoons {
	display: block;
	height: 30px;
	font-weight: normal;
	font-size: 1.1em;
	text-align: left;
	text-decoration: none;
	padding: 10px 0px 10px 0px;
	margin: 10px 0px 10px 0px;
} 	

/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	CUSTOMER ACCOUNT PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */



aside.cartoonbox .customeraccount {
text-align: left;
}




/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  DESKTOP SCREEN SIZE: 	RUN SEARCH PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


aside.cartoonbox div.addtocartrow {
	display: inline-block;
	margin: 0px auto;
	border: 0px solid tan;

	/*  CHANGE 180113
	width: 80%;
  */
		width: 80%;
}  		


hr.largescreen {
width: 100%;
display: block;
}

aside.cartoonbox div.addtocartrow h3{

margin: 10px 0 0 0;
 font-size: 1.0em;
  font-weight: 700;
   	display: inline-block;
   	color: gray;
   	}  		





/*  CHANGE 180113 REMOVE SEEMORECARTOONS */
aside.cartoonbox span.seemorecartoons {
	/*   
	font-size: .90em;
	font-weight: 700;
	color: maroon;
	width: 180px;
	padding-left: 10px;
	border: 1px solid red;
    display: inline-block;
    float: center;
    padding-top: 5px;
    */
    display: none;

}  		


/*  CHANGE 180113: IMG.ARROW TO IMG.RIGHTARROW */
aside.cartoonbox div.addtocartrow img.rightarrow {
	margin: 5px 0px -5px 0;
	border: 0px solid green;
	background: white;
	width: 25px;
	height: 25px;
    float: right;

}  		

/*  CHANGE 180113: ADDED THIS BLOCK IMG.LEFTARROW */
aside.cartoonbox div.addtocartrow img.leftarrow {
	margin: 5px 0 -5px 0;
	border: 0px solid green;
	background: white;
	width: 25px;
	height: 25px;
    float: left;

}  

/* SEARCH RESULTS PAGE */

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


/*  BOX SURROUNDING SEARCH RESULTS PAGE CARTOON and sidebar GRAY */

.srcartoonbox {
	float: left;
	text-align: center;
	margin: 20px;
	border: 3px solid gray;
	padding: 20px 50px 20px 20px;
	background: white;
	width: 590px;
	height: 590px;
}  		


/*  CARTOON IMG INSIDE SRCARTOONBOX  */

.srcartoonbox img {
	float: left;
	text-align: center;
	margin: 0px;
	border: 3px solid green;
	padding: 0px;
	background: white;
	width: 500px;
	height: 500px;
}  		


/*  ASIDE.SRCARTOONBOXLARGE FOR USE ON SEARCH RESULTS PAGE TO INCLUDE IMAGE AND SIDEBAR IN SAME BOX */

.srcartoonboxlarge {
	float: left;
	text-align: center;
	margin: 30px;
	border: 3px solid gray;
	padding: 30px;
	background: white;
	width: 990px;
	height: 100%;
}  		


.srcartoonboxlarge img {
	float: left;
	text-align: center;
	margin: 0px;
	border: 0px solid green;
	padding: 0px;
	background: white;
	width: 500px;
	height: 500px;
}  		


div.hr {
	height: 3px;
	width: calc(100% - 500px);
	color: tan;
	background-color: tan;
	margin-top: 20px;
	margin-bottom: 20px;
}  		


div.hr_newsletterideas {
    display: block;
    height: 3px;
    border: 0;
    border-top: 2px solid #ccc;
    margin: 1em 0;
    padding: 0;	
}  	


div.hr_aboutme {
	height: 3px;
	/*  width: calc(100% - 20px);  */
	width: 80%;
	color: tan;
	background-color: tan;
	margin-top: 20px;
	margin-bottom: 20px;
}  		




/*  AREA FOR TEXT ABOVE CARTOON: "1 OF 591 SEARCH RESULTS..." */

.srtext {
	height: 60px;
	width: 600px;
	float: left;
	text-align: center;
	margin: 20px;
	padding: 0 0 0 0;
	background-color: white;
	color: maroon;
	border-top: 3px solid bisque;
	border-bottom: 3px solid bisque;
}  		


/*  TEXT ABOVE CARTOON: "1 OF 591 SEARCH RESULTS..." */

.searchresultstext h2 {
	margin-top: 8px;
	margin-bottom: 5px;
	font-size: 1.25em;
	border: 0px solid orange;
}  		


.srtext h2 {
	margin-top: 8px;
	margin-bottom: 5px;
	font-size: 1.25em;
	border: 0px solid orange;
}  		


/*   SEARCHRESULTSSIDEBARBOX IS INSIDE SEARCHRESULTSCARTOONBOX */

.srsidebarbox {
	/*
		height: 660px; width: 295px;
		float: right;  text-align: left; 
		margin: 20px auto;  padding:20px 20px 10px 20px;
		background-color:white;
		color: maroon;
		border: 3px solid gray;
		*/
	height: 600px;
	width: 295px;
	float: right;
	text-align: left;
	padding: 20px 20px 10px 20px;
	margin-top: 20px;
	margin-right: 50px;
	background-color: white;
	color: black;
	border: 3px solid gray;
}  		


/*  NEXT/PREV RESULTS ARROW IN CARTOONBOX */

.srtext img.arrow {
	float: none;
	margin: 0 auto;
	padding-top: 0px;
	padding-left: 15px;
	padding-right: 15px;
	background: white;
	width: 30px;
	height: 30px;
	display: inline;
	position: relative;
	bottom: -8px
}  		


.blacktext {
	color: black;
}  		


h2.blacktext {
	color: #505050;
	text-align: center;
	margin: 0 auto;
	width: 300px;
	float: left;
}  		


/* MAGGLASS2017.PNG */

.srsidebarbox img {
	margin: 0px;
	padding: 0 0 0 0px;
	background: white;
	border: 0px solid white;
	width: 150px;
	height: 75px;
}  		


footer.nextresults {
	background: white;
	position: relative;
	text-align: center;
}  		


h2.nextresults {
	color: white;
	padding-top: 10px;
	font-size: 1.25em;
}  		


 /*  for multiple results page */ 
 .cartoonbox2 {
	display: block;
	float: left;
	text-align: center;
	margin: 20px 0px 0px 0px;
	border: 3px solid gray;  /* gray */
	padding: 10px 10px 10px 10px;
	background: white;
	width: 60%;
	height: 600px;
 }


 /*  for multiple results page */  
 .cartoonbox2 img {		
display:block;
margin: 35px auto;
width: calc(100% - 6em);
max-width: 530px;
		
 }
 
 
/*   */
 /*  for multiple results page */ 
 .sidebarbox2 {



display: block;

	height: 600px;
	width: 29%;
	float: left;
	text-align: left;
	margin: 20px;
	padding: 20px 10px 0px 10px;
	background-color: white;
	color: black;
	border: 3px solid gray;
 	

		
		
				
 }
 
 /* "1 of 253 results" text in search results sidebar box */ 
.sidebarbox2 h3 {
		margin-top: 0px;
		margin-bottom: 10px;
		font-size: .9em;
		font-weight: 300;
		padding: 0px 0px 10px 0px;
		color: black;
		border-top: 3px  solid bisque;
		border-bottom: 3px solid bisque;
		text-align: center;
		width: 100%;
 }
 
 
  /* cartoon number in search results sidebar box */ 
.sidebarbox2 h2 {
		margin-top: 3px;
		margin-bottom: 3px;
		font-size: 1.5em;
		font-weight: 700;
		border: none;
		color: gray;
		padding-top: 10px;
		text-align: left;

 }
 
 
 /*   */
/* cartoontitle arrows in search results sidebar box */
.sidebarbox2 img.arrow {
float: none;
margin: 0 auto;  
border: none;
padding: 5px 5px 6px 5px;
background: white;
width: 20px;
height: 20px;
display: inline;
position: relative;
bottom: -12px
}
 
 
 
/*   */
/*  for multiple results page */ 
/* magglass2017.png */
.sidebarbox2 img { 
		margin: 0px; 
		padding: 0 0 0 0px;
		background: white;
		border: none;
		width: 150px;
		height: 75px;
}



/* IN CART BUTTON */
input.incart2[type=submit] {


			background-color:   silver;
		border: none;
		color: white;
		padding: 10px 5px;
		text-decoration: none;
		margin: 5px 2px;
		cursor: pointer;
		width: 50%;
		font-size: .85em;
		text-align: center;
		border: 0px solid maroon;
		float: left;
}




/*
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;

	
} 
*/











/*  1150 PX PAGE */
input.addtocart2[type=submit] {
		
			
		background-color:   dodgerblue;
		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;
			
			
}


/*  1150 PX PAGE */
input.viewcart2[type=submit] {

		background-color:   dodgerblue;
		border: none;
		color: white;
		padding: 10px 5px;
		text-decoration: none;
		margin: 5px 2px;
		cursor: pointer;
		width: 40%;
		font-size: .85em;
		text-align: center;
		float: right;

}





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


div#cartoonboxnavbar {
	border: 0px solid gray;
	display: inline-block;
}

#cartoonboxnavbar ul li {  
	display: inline; 
	float: left;
	background-color: white; 
} 

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


#cartoonboxnavbar ul li img.rightarrow {  
	width: 25px;
	height: 25px;
	margin: 4px 0 -8px 20px;
} 


section.homepage aside.cartoon 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
}  		



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  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 */ 
/* 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;

} 



/* 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;
	
}  		


/* COLOR OF SELECTED PAGE LINK BUTTON */

.button1.button2 {
	background-color: Bisque;
	color: black;
	/* font-weight: normal; */
	border: 2px solid orange;
	/* 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 of media query min-width 800px */


/*  END 1150 PX DESKTOP SCREEN SIZE RULES */


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

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

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

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





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

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

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

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

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

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












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

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

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


/*	

ipad 	768 X 1024 
ipad pro 1366x1024  
kindle fire 800x480  
nexus 960x600  
fire 1024x600  
galxay 1024x600
fire 1280x800  
samsung 1280x800  
ms surface 1440x1024  

*/




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


/* TABLET	*/
@media only screen and (min-width: 737px) and (max-width : 1024px) { 


div.containerdesktop {
	display: none;
}

div.containermobile {
	display: none;
}

footer.footerdesktop {
display: none;
}

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

html{ margin: 0 auto;}  	

/* TABLET */
body {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: black;
	background-color: gainsboro;
	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 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;}  


/* TABLET */ 		
div.containertablet {
	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 */

}

/* 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 */

}


/* TABLET */
header.headertablet {
	height: 65px;
	background: darkorange;
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0px auto;
	width: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}  





header.headertablet.dimgray {
	height: 55px;
	background: dimgray;
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0px auto;
	width: auto;
	padding-top: 10px;
	padding-bottom: 12px;
} 


header.headertabletX.dimgray {
	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;
} 




/* TABLET */
header.subheadertablet {
	height: 30px;
	background: bisque;
	position: relative;
	color: black;
	width: auto;
	padding-top: 5px;
	padding-left: 20px;
	text-align: center;
	text-decoration: none;
}

header.subheadertabletX {
	height: 30px;
	background: silver;
	background: #e8e8e8;
	background: bisque;
	background: Moccasin;
	position: relative;
	color: black;
	width: auto;
	padding-top: 5px;
	padding-left: 20px;
	text-align: center;
	text-decoration: none;
	border-bottom:2px solid gainsboro;
	/* border-bottom: 4px solid gainsboro; */
}

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


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


/* TABLET */
/* BOX AROUND CARTOON FRONT PAGE TABLET SCREEN */
aside.cartoonboxtablet {
	display: block;
	float: left;
	text-align: center;
	margin: 0px 20px 20px 20px;

	height: 70vh;
	width: 65vh;
	border: 0px solid gainsboro;
	padding: 10px 10px 10px 10px;
	background: white;
}  		





/* TABLET */
aside.cartoonboxtablet h3 {
	color: silver;
	float: left;
}  		

/* TABLET */
/* CARTOON ON FRONT INDEX PAGE TABLET SCREEN */
aside.cartoonboxtablet img {
display: block;
	margin: 10px 0 0 0;
	border: 0px solid orange;
	background: white;
	height: 500px;
	width: 500px;
} 

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


/* to do: find a way to keep the sidebarboxtablet from moving down
when the screen is squeezed. Can I make it stay put, and make it 
skinnier when squeezed?

what if I put both cartoonbox and sidebarbox in the same div?
would they squeeze together proportionately?

*/


aside.sidebarboxtablet {
display: block;
position:absolute;
right:10px;
top:120px;
	height:70%;
	width: 22%;
	float: right;
	text-align: top;
	margin: 20px 10px 0px 50px;

	padding: 10px 10px 0px 10px;
	background-color: white;
	color: black;
	border: 3px solid gainsboro;
}  	

/* ASIDE SIDEBARBOXTABLETX 210922 LINE 2995*/
aside.sidebarboxtabletX {
display: block;
position:absolute;
right:10px;
top:120px;
top:110px;
height:72%;
height:70%;
	width: 22%;
width: 30%;
	float: right;
	text-align: top;
	margin: 20px 10px 0px 50px;
	padding: 0px 10px 10px 10px;
	background-color: white;
	color: black;
	border: 3px solid gainsboro;
}  	

<!--  TABLET SIDEBAR SEARCH BUTTON  -->






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



/* buttontablet

input.browsetablet[type=submit]
{
	background-color: green;
	color: white;
	text-align: center;
	font-size: 1em;
	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;
}
 */
/* 
aside.sidebarboxtablet input.browsetablet[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;	
}  
	*/

/* TOMATO */ 
/* SEARCH BUTTON */

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

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





/* TABLET */
/* search button on index-TABLETSCREEN.php tablet index page */
aside.sidebarboxtablet input.searchtablet[type=submit] {
	background-color: dimgray;
	border: none;
	color: white;
	padding: 10px 5px;
	text-decoration: none;
	cursor: pointer;
	width: 100px;
	font-size: .85em;
	text-align: center;
	border: 0px solid orange;
	float: right;
margin: -5px 0px 0px 0px;
}  	

aside.sidebarboxtabletX input.searchtablet[type=submit] {
	background-color: dimgray;

	color: white;
	padding: 5px 5px;
	text-decoration: none;
	cursor: pointer;
	width: 100px;
	font-size: .85em;
	text-align: center;
border-right: 0px solid dimgray;
border-bottom: 2px solid dimgray;
	float: right;
margin: -5px 0px 0px 0px;
}  	


/* BISQUE */ 
/* BROWSE BUTTON */

/* Desktop screen just browse button  √	*/

aside.sidebarboxtablet 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;	
} 

aside.sidebarboxtabletX 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;	
} 

aside.sidebarboxtablet input.sidebarboxbuttontablet[type=submit] {
background-color:bisque;
color:black;
font-size:1em;
font-family:helvetica,arial;
font-weight:300;
text-align: right;
padding: 3px 3px;
}

aside.sidebarboxtabletX input.sidebarboxbuttontablet[type=submit] {
background-color:bisque;
color:black;
font-size:1em;
font-family:helvetica,arial;
font-weight:300;
text-align: right;
padding: 3px 3px;
}

aside.sidebarboxtabletX input.sidebarboxbuttontabletX[type=submit] {
background-color:bisque;
color:black;
font-size:.85em;
font-family:helvetica,arial;
font-weight:300;
text-align: right;
height:22px;
padding-top:5px;
padding-bottom:5px;
padding-left:3px;
padding-right:3px;

border-bottom: 2px solid dimgray;
}

input.searchfieldtablet[type=text] {

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

	
} 


input.textformfieldtablet[type=text] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid silver;
	border-radius: 4px;
	font-size: 1.2em;
	background-color: white;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	padding: 5px 5px 5px 5px;
margin: 10px 0px 0px 0px;	
color:maroon;
} 




footer.footertablet {

	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: 	NAVBAR */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */



div#cartoonboxnavbartablet {
	border: 0px solid red;
	display: inline-block;
	margin-top: -10px;
}

#cartoonboxnavbartablet ul li {  
	display: inline; 
	float: left;
	background-color: white; 
} 

#cartoonboxnavbartablet img.leftarrow {  
	width: 25px;
	height: 25px;
	margin: 4px 20px -8px 0;
} 


#cartoonboxnavbartablet ul li img.rightarrow {  
	width: 25px;
	height: 25px;
	margin: 4px 0 -8px 20px;
} 


section.homepage aside.cartoon 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
}  		



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  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 */  

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 */ 
/* 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;
	
	/* orig
		background-color: bisque;
	color: black;
	border: 1px solid bisque;

	padding: 10px 10px 10px 10px;
	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;
	color: black;
	border: 1px solid bisque;
	padding: 10px 10px;
	margin: 5px -10px 5px 0px;
	cursor: pointer;
	width: 45%;
	font-size: .85em;
	text-align: center;
	float: right;
*/	
			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;

} 



/* 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;
	
}  		


/* COLOR OF SELECTED PAGE LINK BUTTON */

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




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

}


 /*  hr  */
aside.cartoonboxtablet div.hrtablet {
	height: 3px;
	width: 80%;
	background-color: tan;
	
	padding: 0px;
} 


/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  TABLET SCREEN SIZE: 	PRESENTATION USE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */

.presentation_use_tablet_span {
font-size: 1em;
text-align: left;
}

.presentation_use_tablet_span h2 {
font-size: 1.5em;
text-align: left;
display: block;
padding: 0px;
margin: 0px;
}

 /*  hr on presentation use page */
div.hrpres_tablet {
	display: block;
	height: 3px;
	width: calc(100% - 50px);
	background-color: tan;
	margin: 10px 0 10px 0px;
	padding: 0px;
}  	



aside.cartoonbox div.searchtopics_tablet {
	height: 3px;
	width: calc(100% - 50px);
	background-color: tan;
	margin: 20px 20px 20px 20px;
	padding: 0px;
} 


span.cartoonboxtext_presentationuse_tablet {
	display: block;
	padding: 10px 10px 10px 0px;
	border: 0px solid purple;
	text-align: left;
	padding-left: 25px;
	padding-top: 12px;
	padding-bottom: 12px;

}  		



/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  TABLET SCREEN SIZE: 	RATES PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


span.cartoonboxtext_rates {
display: block;

text-align: left;

}



aside.cartoonbox.rates {
	margin: 20px 0px 0px 20px;
	width: calc(100% - 410px);
	height: 600px;
}  	

/* this is used on rates page */
aside.cartoonboxrates {


display: block;
	float: left;
	text-align: center;
	margin: 20px 0px 0px 0px;
	border: 3px solid gray;
	padding: 10px 10px 10px 10px;
	background: white;
	width: 60%;
	height: 600px;



}  


.ratesh1 {
		padding-top: 0px;
		font-size: 1.5em;
		line-height: 1.5em;
		color: #515151;
		text-align: left;
}

.rates h1 {
	padding-top: 0px;
	font-size: 1.5em;
	line-height: 1.5em;
	color: #515151;
			text-align: left;
}  	

/*  titles: inhouse newsletters, customer newsletters, etc.	*/
.ratesh2 {
		font-size: 1.25em;
		line-height: .085em;
		color: maroon;   				
		padding-top: 0px;
		text-align: left;
		padding-bottom: 0px;
}

/* tan line separating usage types	*/ 
div.rateslinetablet {
	height: 3px;
	background-color: tan;
	width: 100%;
} 



.rates h2 {
	font-size: 1.4em;
	line-height: 1.25em;
	color: maroon;
			text-align: left;
} 


.rateslinedesktop {
		height:3px;
		width: 95%;
		background-color: tan;
		margin-top: 5px;
		margin-bottom: 7px;
}


span.rates {
	float: left;
	text-align: left;
	margin-top: 0px;
	margin-right: 0px;
	border: 0px solid gray;
	display: block;
	padding: 0px 0px 0px 0px;
	font-size: 1.0em;
	color: black;
}  		
 
span.rates_contact_me {
display: inline-block;
float: right;
   border: 1px solid orange;
    background-color: bisque;
     width: 100px;
      padding: 0px 4px;
       
        margin-right: 0px;
} 		








/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  TABLET SCREEN SIZE: 	Q&A PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */




aside.cartoonboxtablet.qandapage {
	margin: 20px 0px 0px 20px;
	width: 90%;
	height: 600px;

}  		

.ContainerForTextWithScrollbartablet {
display: block;
	float: left;
	height: 600px;
	width: 90%;
	margin: 0px 0px 0px 0px;
	background: white;


}  		

.TextWithScrollbartablet {
	height: 450px;
	width: 90%;
	overflow: auto;
	background: snow;
	border: 2px solid tan;
	padding: 10px 10px 10px 10px;
	margin: 0 0 0 20px;
	text-align: left;
	
		
		overflow-y: scroll;

}  		


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

}  		

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




/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  TABLET SCREEN SIZE: 	CONTACT ME PAGE */
/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */


aside.cartoonboxtablet.contactme {
	margin: 20px 0px 0px 0px;
	width: calc(100% - 410px);
	height: 600px;
	text-align: left;
	padding: 10px 30px 10px 10px;	
	float: left;
}  		

aside.cartoonboxtablet.contactme img {
	margin: 0px 0 0 0;
	border: 0px solid orange;
	padding: 0 15px 0 0;
	background: white;
	width: 90px;
	height: 40px;
		float: left;
}  

aside.cartoonboxtablet.contactme {
	height: 630px;
	width: 335px;
	float: right;
	text-align: left;
	margin: 20px;
	padding: 20px 0px 10px 30px;
	background-color: white;
	color: black;
	border: 3px solid gray;

}  		

.contactme {
	float: left;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
	border: 0px solid orange;
	display: block;
	width: 600px;
	height: 655px;
	padding: 0 0 0 0;
	font-size: 1.0em;
	line-height: 25px;
	color: black;
}  		

span.cartoonboxtext_presentationuse img.contactme {
	float: left;
	text-align: left;
	margin-top: -3px;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 0px;
	border: 2px solid bisque;
	display: block;
	width: 129px;
	height: 32px;
	padding: 0 0 0 0;
}  		


/* ################################################################## */
/* the hidden form field "website" identifies spambots */
/* spambots will enter text into the hidden field and */
/* so then can be blocked from sending me email */
input[type="text"]#website { display: none; }
/* ################################################################## */

aside.cartoonboxtablet div.contactmetext {
margin: 20px 0 0 30px;
border: 0px solid orange;
}

/* TABLET INPUT SEC NUM FIELD */
/*  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;
	float: left;
margin-left: 20px;
} 

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

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





} /* close tablet media screen tag */



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

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

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

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

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

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






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

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

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

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

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

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


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

/*  MOBILE PAGE SCREEN SIZE MAX 736 WIDE		 */

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

/*	

currently not working on any screen sizes. works on iphone.
when I make test changes to desktop size, screenfly does update those.
So, something is lacking in my mobile size rules that affects screenfly.

testing mobile screensizes with index.html on screenfly:

Motorola RV3 176x220  NO
Motorola RV8 240x320  NO

BlackBerry 8300 320x240 
Apple iphone 3/4 320x480 
Samsung Galaxy S2 320x533 
Apple iphone 5 320x568  √
LG G3-5 360x640
Samsung Galaxy S3-7  360x640
Apple iphone 6/7 375x667
Apple iphone 6/7 Plus 414x736

*/







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

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



		
html
{
	/*remove vertical scrollbar, but keep page scrollable */
	overflow: scroll; 
	/* max-width: 320px; */
}


body
{
	background-color: white;
	margin: 0px;
	border-color: 2px solid orange;
	/*   max-width: 320px;*/
}



/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  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 */
}


/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  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;
}


/* 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;

} 



/*  ################################################# */
/*  ################################################# */
/*  ################################################# */
/*  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-color: 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
		
}

span.headerindentmobile
{
font-size: 1em;
padding: 0px 0 0 12px;
border: 0px solid white;
}

/*  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 */


/*

footer.footermobile:after {
visibility: visible;
	text-align: center;
	background: white;
	width: 100%;
	font-size: .85em;
	color: black;
	position: relative;
	content: "© 2018 Ted Goff  PO Box 22679  Kansas City, MO 64113";
	margin-left: 15px;
	margin-top: -20px;
	margin-bottom: 50px;
}

*/

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 */
/*  ################################################# */
/*  MOBILE PAGE */
/* CARTOON BOX ALL PAGES */
/* 710px height required for presentation use page, but then is too big for home page */
aside.cartoonboxmobile
{


	border: 2px solid gainsboro;
	margin: 0px auto;
padding: 5px;

}




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

/*  MOBILE PAGE */
/*  CARTOON BOX IMAGE */
section.catalogpagemobile aside.cartoonboxmobile img.cartoon
{

 
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;


	border: 0px solid green;
	
	width: 100%;
	height: 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;
	
}

/* edited 180630  180701*/
/*	
div#cartoonboxnavbarmobile {

	display: block;

	margin: 0px 0px 0px 0px;
	border: 2px solid orange;
padding: 0px 0px 0px -20px;
	
}
*/


/* 	
section.homepage aside.cartoon 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
}  		

*/

/*  ################################################################################ */
/*  ################################################################################ */
/*  ################################################################################ */
/*  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;

}


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;
	color: black;
	
	
	border: 4px solid gray;
	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;
	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 */
	
	
<!--  MOBILE  -->	
		aside.sidebarboxmobile {
		clear: left;
		border: 0px solid silver;
		border-top: 0px solid red;
		width: 100%;
		margin: 0px 0px 0px 0px;


		}  		
<!--  MOBILE  -->
		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;
		}


<!--  MOBILE  -->
 /*  hr on presentation use page */
div.hrpresmobile {
	height: 2px;
	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;
*/	
	
	
}  	



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

}



input.searchfieldmobile[type=text] {

	display: block;
	width: 100%;
	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;

	
} 



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;}  







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

/*  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 */



/* css rules for specific screen sizes for popular devices */

/* ipad 1024x768 Portrait */


/* during testing */
/* @media only screen  and (width: 1024PX) and (height: 768PX) { */
@media only screen  and (width: 1PX) and (height: 2PX) {
aside.cartoonbox img {
	margin: 10px 0 0 0;
	border: 0px solid orange;
	background: white;
	width: 500px;
} 

body {background-color: gainsboro;}

} /*  end media only screen */


/*  ################################################################## */
/*  ################################################################## */
/*  ################################################################## */
/*  ####### THE SMALL TABLET SIZES: 700px to 1000px ########## */
/*  ################################################################## */
/*  ################################################################## */
/*  ################################################################## */




/*  make sure cartoons are not huge on 800 px wide screens */


@media only screen  and (max-width: 1000PX) and (min-width: 500PX) {
aside.cartoonboxmobile img {
	margin: 10px 0 0 0;
	border: 0px solid red;
	background: white;
	width: 50%;
} 


/*  next: make hr lines above and below cartoon # width: 100% */


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


/* ipad 768x1024 Landscape 

@media only screen  and (width: 768PX) and (height: 1024PX) {
aside.cartoonbox img {
	margin: 10px 0 0 0;
	border: 2px solid orange;
	background: white;
	width: 100%;
} 

body {background-color: green;}

}   end media only screen */




 

/* ipadpro 1366x1024 

@media only screen  and (width: 1366PX) and (height: 1024PX) {
aside.cartoonbox img {
	margin: 10px 0 0 0;
	border: 0px solid blue;
	background: white;
	width: 500px;
} 

body {background-color: gainsboro;}
}   end media only screen */

/* ipadpro 1366x1024 

@media only screen  and (width: 1366PX) and (height: 1024PX) {
aside.cartoonbox img {
	margin: 10px 0 0 0;
	border: 0px solid orange;
	background: white;
	width: 600px;
} 
body{	background-color: gainsboro;}
}   end media only screen */

/* new ipad 9.7 in	2048 x 1536

@media only screen  and (width: 2048PX) and (height: 1536PX) {
aside.cartoonbox img {
	margin: 10px 0 0 0;
	border: 0px solid orange;
	background: white;
	width: 600px;
} 
body{	background-color: gainsboro;}
}   end media only screen */

/*
2224x1668 Resolution
The 10.5-inch iPad Pro

2732x2048 Resolution
The 12.9-inch iPad Pro
The 12.9-inch iPad Pro (2017)
*/

/* Kindle Fire HD7 800x480 */
/* Asus Nexus 7 960x600 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */
/* ipad 1024x768 */