/*  CSS Rules for /002/cgi/search.cgi Results  */

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

/*  ################################################# */
/*  TEXT  ########################################### */
/*  ################################################# */

h1 { margin: 0 0 -.2em 0; font-size: 2.8em; font-weight: 700; line-height: 1.5em;	}
h2 { margin: 0 0 0 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; color: maroon; }
h3 { margin: 0 0 .5em 0; font-size: 1.15em; font-weight: 700;  }
h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700;	 }

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



body {	
	font-family: "Open Sans" , sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: black;
	margin: 0;
	padding: 0;	
	background: gainsboro;
	
	/*  polka dot background: #BDBDBD */
	background-image:
	radial-gradient(#BDBDBD 12%, transparent 0),
	radial-gradient(#BDBDBD 12%, transparent 0);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;		
}



/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/
/*  DESKTOP PAGE SCREEN SIZE MIN 1025 WIDE			 */
/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/



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

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

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


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



/*  ################################################# */
/*  1025 CONTAINER ################################## */
/*  ################################################# */

/*  DESKTOP PAGE */

#container {
	background-color: white;
	max-width: 1150px;
	margin: 0 auto; 
	overflow: auto;		 	
	min-height: 100%;
}

/*  ################################################# */
/*  /*  1025 HEADER ################################# */
/*  ################################################# */

/*  DESKTOP PAGE */

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


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


header.subheadermobile {display: none;}



/*
header.subheaderbottom {
		height: 30px;
		background: white;	
		position: relative;
		color: gray;
		padding-left: 20px;
		margin: 0 auto; 
		max-width: 1150px;
		padding-top: 5px;
		padding-left: 20px;
		text-align: center;
}
*/



/* footer.desktop contains the next hits/ prev hits buttons	*/
footer.desktop{
	background-color: white;
	max-width: 1024px;
	width: 90%;
	margin: 0 auto; 
	overflow: auto;		 	
	min-height: 100%;
	height: 80px;

}


/* same as prev vers 181015	*/
footer{
		height: 40px;
		max-width: 1150px;
		background: white;	
		position: relative;
		padding-top: 0px;
		color: gray;
		margin: 0 auto; 
border: 0px solid orange; 
		
	
}


/* same as prev vers 181015	*/
footer.copyrightdesktop{
		height: 20px;
		max-width: 1150px;
		background: white;	
		position: relative;
		padding-top: 0px;
		padding-bottom: 20px;
		color: gray;
 
display: block;
border: 0px solid orange; 
text-align: center;

		
	
}

/* same as prev vers 181015	*/
footer.copyright{
		height: 20px;
		max-width: 1150px;
		background: white;	
		position: relative;
		padding-top: 0px;
		padding-bottom: 20px;
		color: gray;
 
display: block;
border: 0px solid orange; 
text-align: center;
}


		
	



footer.copyrightmobile{display: none;}

/*  ################################################# */
/*  SECTION , ASIDE  ################################# */
/*  ################################################# */
/*  DESKTOP PAGE */
section { 
		height: 100%; 
		padding-left: 20px;
		color: black;		 
}
/*  DESKTOP PAGE */
aside { 
		float: left;  
		text-align: left; 	
}



/*  ################################################# */
/*  DESKTOP PAGE: SEARCHRESULTSPAGE  CARTOONBOX & SIDEBARBOX */
/*  ################################################# */

 /*  ################################################# */
/*  DESKTOP PAGE: ZERO RESULTS PAGE */
/*  ################################################# */
/*  DESKTOP PAGE */
/*  for zero results page */
.cartoonbox {
float: center;  
text-align: center; 	
margin: 60px 20px 20px 20px;  
border: 3px solid gray;
padding:20px 20px 20px 20px;
background: white;
width: 600px;
 }
 
span.newtextformobile {display: none;}
 
 
 /*  DESKTOP PAGE */
 /*  for zero results page */
.cartoonbox img {
margin: 7px 0px 0px 10px;  
border: 0px solid gray;
padding:0px;
background: white;
width: 600px;
height: 600px;
 }
 /*  DESKTOP PAGE */
 /*  for zero results page */
.sidebarbox {
	height: 543px;
	width: 295px;
	float: right;
	text-align: left; 
	margin: 20px auto;
	padding:20px 20px 10px 20px;
	background-color:white;
	color: black;
	border: 3px solid gray;
 }

/* Text inside sidebarbox -- edited for mobile screen	*/ 
aside.sidebarbox span.ChangeForMobile {display: block;}
aside.sidebarbox span.ChangeForMobileReplace {display: none;}  

/* on desktop screen size page remove second set of buttons	*/ 
aside.sidebarbox2 span.ButtonSet2 {display: none;}








 
 /*  DESKTOP PAGE */
  /*  for zero results page */ 
 /* magglass2017.png */
.sidebarbox img { 
margin: 0px; 
padding: 0 0 0 0px;
background: white;
border: 0px solid orange;
width: 150px;
height: 75px;
}

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

}


 
 
 /*  ################################################# */
/*  DESKTOP PAGE: MULTIPLE RESULTS PAGE */
/*  ################################################# */
 /*  DESKTOP PAGE */
 /*  for multiple results page */ 
 .cartoonbox2 {
		float: center;  text-align: center; 	
		margin: 20px;  
		border: 3px solid gray;
		padding:20px 40px 20px 20px;
		background: white;
		width: 960px;
 }
/*  DESKTOP PAGE */
 /*  for multiple results page */  
.cartoonbox2 img {
		float: left;  
		text-align: center; 	
		margin: 20px 0px 0px 0px;  
		border: none;
		padding:0px;
		background: white;
		width: 600px;
		height: 600px;
		display: block;
		position: relative;
 }
/*  DESKTOP PAGE */
 /*  for multiple results page */ 
.sidebarbox2 {

height: 550px;
		width: 295px;
		float: right;  
		text-align: center; 
		margin: 10px -10px 0px 0px; 
		padding:20px 20px 10px 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;
 }
 
 
  /* 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: center;

 }
 
 
 /*  DESKTOP PAGE */
/* 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
}
 
 
 
/*  DESKTOP PAGE */
/*  for multiple results page */ 
/* magglass2017.png */
.sidebarbox2 img { 
		margin: 0px; 
		padding: 0 0 0 0px;
		background: white;
		border: none;
		width: 150px;
		height: 75px;
}


/*  resultstext is only used on multiple results page */
/*  DESKTOP PAGE */
span.resultstext {
height: 20px; width: 280px;
float: left;  
text-align: center; 
margin: 20px 0px 0px 0px;  
padding:0 0 0 0;
background-color:white;
color: maroon;
border-top: 3px  solid bisque;
border-bottom: 3px solid bisque;
 }
 
 /*  DESKTOP PAGE */
aside.resultstext2 {
height: 60px; width: 275px;
float: left;  
text-align: center; 
margin: 0px 0px 0px 0px;  
padding:0 0 0 0;
background-color:white;
color: maroon;
border-top: 3px  solid bisque;
border-bottom: 3px solid bisque;
 }
 
 /*  DESKTOP PAGE */
aside.resultstext2 h2 {
margin-top: 8px;
margin-bottom: 5px;
font-size: .85em;
border: 0px solid orange;
}

/*  DESKTOP PAGE */
/* Cartoon in cartoonbox */
aside.resultstext2 img.arrow {
float: none;
margin: 0 auto;  
border: none;
padding: 0px;
background: white;
width: 10px;
height: 10px;
display: inline;
position: relative;
bottom: -8px
}

/*  DESKTOP PAGE */
aside.resultstext h2 {
margin-top: 8px;
margin-bottom: 5px;
font-size: 1.25em;
border: 0px solid orange;
}

/*  DESKTOP PAGE */
/* Cartoon in cartoonbox */
aside.resultstext img.arrow {
float: none;
margin: 0 auto;  
border: none;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
background: white;
width: 30px;
height: 30px;
display: inline;
position: relative;
bottom: -8px
}















/*  DESKTOP PAGE */








/*  ################################################# */
/*  DESKTOP PAGE: FORMS , BUTTONS  ################################# */
/*  ################################################# */



/*  DESKTOP PAGE */
input[type=text], textarea {
    border-style: inset;
    border-width: 2px;
}

/*  DESKTOP PAGE */
input[type=text] {
    width: 290px;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 12px;

}


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

}


/*  DESKTOP PAGE */
input.email[type=textarea], textarea {

    font-size: 1em;
    box-sizing: border-box;
    border: 0px solid black;
    border-radius: 4px;
    background-color: white;
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    padding: 5px 5px 5px 5px;
        border-style: inset;
    border-width: 2px;

    
}
/*  DESKTOP PAGE */
/* SEND EMAIL BUTTON bc was maroon */
input.search.email[type=submit] {
    background-color: maroon;
    border: none;
    margin-left: 30px;
    margin-top: 25px;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer;
    width: 150px;
    font-size: .85em;
    text-align: center;
}



/*  DESKTOP PAGE */
/* GRAY BUTTONS       background-color: #8F8F8F;  747474 746F36  */
/* TEST white w black outline, black text */


input[type=button], input[type=submit], input[type=reset] {
	background-color: linen;
	color: black;
	border: 1px solid linen;
	padding: 8px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 290px;
	font-size: .95em;
	font-weight: normal;
	margin: 5px 2px;
	cursor: pointer;
}
/*  DESKTOP PAGE */
span.linkbutton {
   background-color: #8F8F8F;
    border: none;
    color: white;
  padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
        width: 271px;
     font-size: 1em;
     margin: 5px 2px;
     /*
    -webkit-transition-duration: 0.4s;   */  /* Safari */
/*    transition-duration: 0.4s; */
    cursor: pointer;
    
}

/*  DESKTOP PAGE */
.button1 {
   background-color: #8F8F8F;
    color: white; 
            border: 1px solid black;

}

/* COLOR OF INACTIVE TEXT PAGE BUTTONS */
/*  DESKTOP PAGE */
.button1:hover {
    background-color: Bisque;
    color: black;
        border: 1px solid Bisque;
        font-weight: normal;
		font-size: 1.1em;
}
/*  DESKTOP PAGE */
.button1.button2 {
background-color: Bisque;
color: black;
font-weight: normal;
border: 1px solid Bisque;
		font-size: 1.1em;
}



/*  DESKTOP PAGE */
/* SEARCH BUTTON */
input.search[type=submit] {
	background-color: tomato;
		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;
}



/*  DESKTOP PAGE */
/* SEARCH BUTTON */
input.search[type=submit] {
	background-color: tomato;
		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;
}







/*  DESKTOP PAGE */
/* BROWSE BUTTON */
input.browse[type=submit] {

    background-color: bisque;
    color: black;
/*		background-color:   #5A770B; */
		border: 1px solid bisque;
	/*	color: white; */
		padding: 10px 10px;
		margin: 5px 2px;
		cursor: pointer;
		width: 140px;
		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: 130px;
	font-size: .85em;
	text-align: center;
	float: right;
}  		





/*  DESKTOP PAGE */
/* REMOVE BUTTON */
input.remove[type=submit] {
		background-color:   black;
		color: white;
		padding: 2px 2px;
		margin: 0 auto;
		cursor: pointer;
		width: 75px;
		font-size: .75em;
		text-align: center;
		float: center;
}




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

/* DESKTOP PX PAGE	*/
/* div containing both prev results and next results button on search results page	*/
div.srpagemoreresults {

display: inline-block;
width: 90%;
height: 50px;
border: 0px solid red;
float: center;
margin-top: 20px;

}




/*  DESKTOP PX PAGE */
/* PREV RESULTS BUTTON */
input.prevhits[type=submit] {
		position: absolute;
		display: inline-block;
		float: top;
	background-color:   gray;
	border: 1px solid black;
	color: white;
	padding: 10px 10px;
		width: 30%;


		margin-left: 10%;
		margin-top: 0px;
		cursor: pointer;
		width: 30%;
		font-size: 1.0em;
		text-align: center;


/* 	margin-left: 10%;
	cursor: pointer;
	width: 30%;
	font-size: 1.0em;
	text-align: center;
	float: center;	
*/


}

/*  DESKTOP PX PAGE */
/* PREV RESULTS BUTTON */
input.prevhitsblank[type=submit] {
		position: absolute;
		display: inline-block;
		float: top;
	background-color:   white;
	border: 1px solid white;
	color: white;
	padding: 10px 10px;
		width: 30%;
		

/* 	margin-left: 10%;
	cursor: pointer;
	width: 30%;
	font-size: 1.0em;
	text-align: center;
	float: center;	
	
	*/

}



/*  DESKTOP PX PAGE */
/* NEXT RESULTS BUTTON */
input.nexthits[type=submit] {
		position: absolute;
		display: inline-block;
		float: top;
		background-color:   maroon;
		border: 1px solid black;
		color: white;
		padding: 10px 10px;
		width: 30%;
		margin-left: 45%;
		margin-top: 0px;
		cursor: pointer;
		font-size: 1.0em;
		text-align: center;
		
}

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



















/*  DESKTOP PAGE */
/* ORANGE BUTTON */
input.orange[type=submit] {
    background-color:  tan;
    border: 0px solid black;
    color: black;
    padding: 10px 10px;  
    margin: 5px 2px;
    cursor: pointer;
float: left;
    font-size: 1.0em;
      text-align: center;
      width: 290px;
}
 

/*  orangebutton 171114 */
input.orangebutton[type=submit] {
     background-color:  orange;
    border: 0px solid black;
    color: black;
    padding: 10px 10px;  
    margin: 5px 2px;
    cursor: pointer;
	float: left;
    font-size: 1.0em;
      text-align: center;
      width: 290px;
}
 
 
 
 /* ADD TO CART BUTTON
input.addtocart[type=submit] {

		background-color:   maroon;
		border: 0px solid white;
		color: white;
		padding: 0 auto;
		margin: -10 auto;
		cursor: pointer;
		width: 120px;
		font-size: 1.05em;
		text-align: center;      
		display: inline;
		    box-shadow: 5px 5px 3px #888888;

}
  - original */




/*  DESKTOP PAGE */  
  /* HTML PAGE ADDTOCART BUTTON */
 
/* ADD TO CART BUTTON */
input.addtocart[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;
			
			
}






/*  DESKTOP PAGE */
/* IN CART BUTTON */
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;
}

/*  DESKTOP PAGE */
input.addtocart[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;
			
			
}


/*  DESKTOP PAGE */
input.viewcart[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;
		float: right;

}


/*  DESKTOP PAGE */
aside.sidebar 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;
		

}





/*  DESKTOP PAGE */
input.yellow[type=submit] {
		background-color:   yellow;
		}

input.tan[type=submit] {
		background-color:   tan;
		}
		
input.purple[type=submit] {
		background-color:   purple;
		}
		
input.black[type=submit] {
		background-color:   black;
		}
		
input.green[type=submit] {
		background-color:   green;
		}						


/*
css button generator
http://www.bestcssbuttongenerator.com/#/11
*/









} /* end @media only screen  and (min-width: 1025px)   / container

















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



/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/
/*  TABLET PAGE SCREEN SIZE MIN 737 MAX 1024			 */
/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/


/* CONTINUE 181011: EDIT ALL RULES BELOW TO FIT ON TABLET SCREEN, REPEAT WITH MOBILE SCREEN CSS RULES	*/

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

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

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


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



/*  ################################################# */
/*  TABLET CONTAINER ################################## */
/*  ################################################# */

/*  TABLET PX PAGE */

#container {
	background-color: white;
	max-width: 1024px;
	width: 90%;
	margin: 0 auto; 
	overflow: auto;		 	
	min-height: 100%;
}

/*  ################################################# */
/*  /*  TABLET HEADER ################################# */
/*  ################################################# */

/*  TABLET PX PAGE */

header.headerdesktop {
	height: 75px;
	background: orange;	
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0 auto; 
	max-width: 1150px;
}


/*  TABLET PX PAGE */
 header.subheaderdesktop {	
		height: 25px;
		background: bisque;	
		position: relative;
		color: black;
		padding-left: 20px;
		margin: 0 auto; 
		max-width: 1024px;
		padding-top: 5px;
		padding-left: 20px;
		text-align: center;
	    font-size: .90em;
		
}

header.subheadermobile {display: none;}





/*  is this in html? maybe I can delete this
header.subheaderbottom {
		height: 30px;
		background: white;	
		position: relative;
		color: gray;
		padding-left: 20px;
		margin: 0 auto; 
		max-width: 1024px;
		padding-top: 5px;
		padding-left: 20px;
		text-align: center;
}
 */

footer{

/* revised w old block of code from next block below 181015	*/
	background-color: white;
	max-width: 1024px;
	width: 90%;
	margin: 0 auto; 
	overflow: auto;		 	
	min-height: 100%;

/*
	background-color: white;
	max-width: 1024px;
	width: 90%;
	margin: 0 auto; 
	margin-bottom: 100px;
	padding-top: 0px;
	overflow: auto;		 	
	min-height: 100%;
	text-align: center;



 
	height: 75px;
	background: orange;	
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0 auto; 
	max-width: 1150px;




		height: 40px;
		max-width: 1024px;
		background: white;	
		position: relative;
		padding-top: 10px;
		color: gray;
		margin: 0 auto; 
	*/
		
	
}





/* this footer contains the nexthits and prevhits buttons	*/
footer.desktop {

/*  returned to prev vers from next block of code below 181015	*/
	background-color: white;
	max-width: 1024px;
	width: 90%;
	margin: 0 auto; 
	overflow: auto;		 	
	min-height: 100%;
	height: 100px;

/*
	background-color: silver;
	max-width: 1024px;
	width: 90%;
	margin: 0 auto; 
	overflow: auto;	
 	



	height: 75px;
	background: orange;	
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0 auto; 
	max-width: 1150px;
	 	*/	
	
}


footer.copyrightdesktop{

/* remove scroll bar at side	*/

		height: 40px;
		max-width: 1024px;
		background: white;	
		position: relative;

		color: gray;
 
display: block;
border: 0px solid orange; 
text-align: center;

		
	
}

footer.copyrightmobile{display: none;}

/*  ################################################# */
/*  SECTION , ASIDE  ################################# */
/*  ################################################# */
/*  TABLET PX PAGE */
section { 
		height: 100%; 
		padding-left: 20px;
		color: black;		 
}
/*  TABLET PX PAGE */
aside { 
		float: left;  
		text-align: left; 	
}



/*  ################################################# */
/*  TABLET PX PAGE: SEARCHRESULTSPAGE  CARTOONBOX & SIDEBARBOX */
/*  ################################################# */

 /*  ################################################# */
/*  TABLET PX PAGE: ZERO RESULTS PAGE */
/*  ################################################# */
/*  TABLET PX PAGE */
/*  for zero results page */
.cartoonbox {
float: center;  
text-align: center; 	
margin: 0px;
margin-top: 10px;  
border: 3px solid gainsboro;
padding:10px 20px 10px 10px;
background: white;
width: 50%;
height: 543px; 
 }
 
span.newtextformobile {display: none;}


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

}
 


 
 
 
 /*  TABLET PX PAGE */
 /*  for zero results page */
.sidebarbox {
height: 543px; 
width: 35%;
float: right;  
text-align: left; 
margin: 10px 20px 10px 10px;  
border: 3px solid gainsboro;
padding:10px 10px 10px 10px;
background-color:white;
color: black;

 }
 

/* Text inside sidebarbox -- edited for mobile screen	*/ 
aside.sidebarbox span.ChangeForMobile {display: block;}
aside.sidebarbox span.ChangeForMobileReplace {display: none;}  

aside.sidebarbox2 span.ButtonSet2 {display: none;} 
 
 /*  TABLET PX PAGE */
  /*  for zero results page */ 
 /* magglass2017.png */
.sidebarbox img { 
margin: 0px; 
padding: 0 0 0 0px;
background: white;
border: 0px solid orange;
width: 150px;
height: 75px;
}

 
 
 
 /*  ################################################# */
/*  TABLET PX PAGE: MULTIPLE RESULTS PAGE */
/*  ################################################# */

 /*  TABLET PAGE TABLETPX     CARTOON BOX  MULTIPLE RESULTS PAGE */
 /*  for multiple results page */ 
 .cartoonbox2 {
		float: center;  
		text-align: center; 	
		margin: 10px 0px 0px 0px;  
		border: 3px solid gray;
		padding:10px 10px 10px 10px;
		background: white;
		width: 94%;
		
 }
 
 
/*  TABLET PAGE TABLETPX     CARTOON IMAGE  MULTIPLE RESULTS PAGE*/
 /*  for multiple results page */  
 .cartoonbox2 img {
		float: left;  
		text-align: center; 	
		margin: 20px 0px 0px 0px;  
		border: none;
		padding:0px;
		padding-right: 10px;
		background: white;
		
		max-width:60%;
		height:auto;
		
		/* 	
		width: 60%;
		height: 60%;
		display: block;
		position: relative;
		*/
		

		
 }
/*  TABLET PAGE TABLETPX     SIDEBAR BOX  MULTIPLE RESULTS PAGE*/
 /*  for multiple results page */ 
 .sidebarbox2 {
		
		font-size: 1em;
		float: right;  
		text-align: left; 
		margin: 0px 0px 0px 0px; 
		padding:20px 20px 10px 20px;
		background-color:white;
		color: black;
		border: 3px solid silver;		
		max-width:30%;
		height: 475px;
		
				
 }
 
 /* "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;
 }
 
 
  /* 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;

 }
 
 
 /*  TABLET PX PAGE */
/* 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
}
 
 
 
/*  TABLET PX PAGE */
/*  for multiple results page */ 
/* magglass2017.png */
.sidebarbox2 img { 
		margin: 0px; 
		padding: 0 0 0 0px;
		background: white;
		border: none;
		width: 150px;
		height: 75px;
}


/*  resultstext is only used on multiple results page */
/*  TABLET PX PAGE */
span.resultstext {
height: 20px; width: 280px;
float: left;  
text-align: center; 
margin: 20px 0px 0px 0px;  
padding:0 0 0 0;
background-color:white;
color: maroon;
border-top: 3px  solid bisque;
border-bottom: 3px solid bisque;
 }
 
 /*  TABLET PX PAGE */
aside.resultstext2 {
height: 60px; width: 275px;
float: left;  
text-align: center; 
margin: 0px 0px 0px 0px;  
padding:0 0 0 0;
background-color:white;
color: maroon;
border-top: 3px  solid bisque;
border-bottom: 3px solid bisque;
 }
 
 /*  TABLET PX PAGE */
aside.resultstext2 h2 {
margin-top: 8px;
margin-bottom: 5px;
font-size: .85em;
border: 0px solid orange;
}

/*  TABLET PX PAGE */
/* Cartoon in cartoonbox */
aside.resultstext2 img.arrow {
float: none;
margin: 0 auto;  
border: none;
padding: 0px;
background: white;
width: 10px;
height: 10px;
display: inline;
position: relative;
bottom: -8px
}

/*  TABLET PX PAGE */
aside.resultstext h2 {
margin-top: 8px;
margin-bottom: 5px;
font-size: 1.25em;
border: 0px solid orange;
}

/*  TABLET PX PAGE */
/* Cartoon in cartoonbox */
aside.resultstext img.arrow {
float: none;
margin: 0 auto;  
border: none;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
background: white;
width: 30px;
height: 30px;
display: inline;
position: relative;
bottom: -8px
}

/* new search field and button in search results page sidebarbox2 on tablet screen	*/

/*  TABLET PX PAGE */






input.sr_page_text_field[type=text] {
	margin: 20px 0px 0px 0px;
	width: 60%;
	box-sizing: border-box;
	border: 2px solid gray;
	border-radius: 4px;
	font-size: 16px;
	background-color: white;
	background-position: 0px 0px; 
	background-repeat: no-repeat;
	padding: 4px 0px;
	display: inline-block;
	margin: auto auto;
}

/* SEARCH BUTTON */
	input.sr_page_search_button[type=submit] {
	background-color: silver;
	border: none;
	color: white;
	padding: 7px 5px;
	text-decoration: none;
margin-left: 5px;
	cursor: pointer;
	width: 35%;
	font-size: .85em;
	text-align: center;
	border: 0px solid maroon;
}



div.searchtopicstop {
margin-top: 25px;

}



/*  TABLET PX PAGE */








/*  ################################################# */
/*  TABLET PX PAGE: FORMS , BUTTONS  ################################# */
/*  ################################################# */

/* 
input.textfield[type=text] {
border: 2px solid orange;
display: block;
width: 90%;
height: 20%;
}
	*/


/*  TABLET PX PAGE */
input[type=text], textarea {
    border-style: inset;
    border-width: 2px;
}

/*  TABLET PX PAGE */
input[type=text] {
    width: 90%;
    box-sizing: border-box;
    border: 2px solid orange;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 12px;

}


/*  TABLET PX PAGE */
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;

}


/*  TABLET PX PAGE */
input.email[type=textarea], textarea {

    font-size: 1em;
    box-sizing: border-box;
    border: 0px solid black;
    border-radius: 4px;
    background-color: white;
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    padding: 5px 5px 5px 5px;
        border-style: inset;
    border-width: 2px;

    
}
/*  TABLET PX PAGE */
/* SEND EMAIL BUTTON bc was maroon */
input.search.email[type=submit] {
    background-color: maroon;
    border: none;
    margin-left: 30px;
    margin-top: 25px;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer;
    width: 150px;
    font-size: .85em;
    text-align: center;
}



/*  TABLET PX PAGE */
/* GRAY BUTTONS       background-color: #8F8F8F;  747474 746F36  */
/* TEST white w black outline, black text */

/* presentation use button, etc, in sidebarbox	*/
input[type=button], input[type=submit], input[type=reset] {
	background-color: linen;
	color: black;
	border: 1px solid linen;
	padding: 6px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 90%;
	font-size: .95em;
	font-weight: normal;
	margin: 1%;
	cursor: pointer;
}
/*  TABLET PX PAGE */
span.linkbutton {
   background-color: #8F8F8F;
    border: none;
    color: white;
  padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
        width: 271px;
     font-size: 1em;
     margin: 5px 2px;
     /*
    -webkit-transition-duration: 0.4s;   */  /* Safari */
/*    transition-duration: 0.4s; */
    cursor: pointer;
    
}

/*  TABLET PX PAGE */
.button1 {
   background-color: #8F8F8F;
    color: white; 
            border: 1px solid black;

}

/* COLOR OF INACTIVE TEXT PAGE BUTTONS */
/*  TABLET PX PAGE */
.button1:hover {
    background-color: Bisque;
    color: black;
        border: 1px solid Bisque;
        font-weight: normal;
		font-size: 1.1em;
}
/*  TABLET PX PAGE */
.button1.button2 {
background-color: Bisque;
color: black;
font-weight: normal;
border: 1px solid Bisque;
		font-size: 1.1em;
	
}



/*  TABLET PX PAGE */
/* SEARCH BUTTON */
input.search[type=submit] {
	background-color: tomato;
		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;
}








/*  TABLET PX PAGE */
/* BROWSE BUTTON */
input.browse[type=submit] {

    background-color: bisque;
    color: black;
/*		background-color:   #5A770B; */
		border: 1px solid bisque;
	/*	color: white; */
		padding: 10px 10px;
		margin: 5px 2px;
		cursor: pointer;
		width: 40%;
		font-size: .85em;
		text-align: center;
		float: left;
}


/* 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: 130px;
	font-size: .85em;
	text-align: center;
	float: right;
}  		





/*  TABLET PX PAGE */
/* REMOVE BUTTON */
input.remove[type=submit] {
		background-color:   black;
		color: white;
		padding: 2px 2px;
		margin: 0 auto;
		cursor: pointer;
		width: 75px;
		font-size: .75em;
		text-align: center;
		float: center;
}

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

/* TABLET PX PAGE	*/
/* div containing both prev results and next results button on search results page	*/
div.srpagemoreresults {

display: inline-block;
width: 90%;
height: 50px;
border: 0px solid red;
float: center;
margin-top: 20px;

}




/*  TABLET PX PAGE */
/* PREV RESULTS BUTTON */
input.prevhits[type=submit] {
		position: absolute;
		display: inline-block;
		float: top;
	background-color:   gray;
	border: 1px solid black;
	color: white;
	padding: 10px 10px;
		width: 30%;


		margin-left: 10%;
		margin-top: 0px;
		cursor: pointer;
		width: 30%;
		font-size: 1.0em;
		text-align: center;


/* 	margin-left: 10%;
	cursor: pointer;
	width: 30%;
	font-size: 1.0em;
	text-align: center;
	float: center;	
*/


}

/*  TABLET PX PAGE */
/* PREV RESULTS BUTTON */
input.prevhitsblank[type=submit] {
		position: absolute;
		display: inline-block;
		float: left;
	background-color:   white;
	border: 1px solid white;
	color: white;
	padding: 10px 10px;
		width: 30%;
		

/* 	margin-left: 10%;
	cursor: pointer;
	width: 30%;
	font-size: 1.0em;
	text-align: center;
	float: center;	
	
	*/

}



/*  TABLET PX PAGE */
/* NEXT RESULTS BUTTON */
input.nexthits[type=submit] {
		position: absolute;
		display: inline-block;
		float: left;
		background-color:   maroon;
		border: 1px solid black;
		color: white;
		padding: 10px 10px;
		width: 30%;
		margin-left: 45%;
		margin-top: 0px;
		cursor: pointer;
		font-size: 1.0em;
		text-align: center;
		
}

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

/*  TABLET PX PAGE */
/* ORANGE BUTTON */
input.orange[type=submit] {
    background-color:  tan;
    border: 0px solid black;
    color: black;
    padding: 10px 10px;  
    margin: 5px 2px;
    cursor: pointer;
float: left;
    font-size: 1.0em;
      text-align: center;
      width: 290px;
}
 

/*  orangebutton 171114 */
input.orangebutton[type=submit] {
     background-color:  orange;
    border: 0px solid black;
    color: black;
    padding: 10px 10px;  
    margin: 5px 2px;
    cursor: pointer;
	float: left;
    font-size: 1.0em;
      text-align: center;
      width: 290px;
}
 
 
 
 /* ADD TO CART BUTTON
input.addtocart[type=submit] {

		background-color:   maroon;
		border: 0px solid white;
		color: white;
		padding: 0 auto;
		margin: -10 auto;
		cursor: pointer;
		width: 120px;
		font-size: 1.05em;
		text-align: center;      
		display: inline;
		    box-shadow: 5px 5px 3px #888888;

}
  - original */




/*  TABLET PX PAGE */  
  /* HTML PAGE ADDTOCART BUTTON */
 
/* ADD TO CART BUTTON */
input.addtocart[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;
			
			
}
/*  TABLET PX PAGE */
/* IN CART BUTTON */
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;
}

/*  TABLET PX PAGE */
input.addtocart[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;
			
			
}


/*  TABLET PX PAGE */
input.viewcart[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;
		float: right;

}


/*  TABLET PX PAGE */
aside.sidebar 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;
		

}





/*  TABLET PX PAGE */
input.yellow[type=submit] {
		background-color:   yellow;
		}

input.tan[type=submit] {
		background-color:   tan;
		}
		
input.purple[type=submit] {
		background-color:   purple;
		}
		
input.black[type=submit] {
		background-color:   black;
		}
		
input.green[type=submit] {
		background-color:   green;
		}						


/*
css button generator
http://www.bestcssbuttongenerator.com/#/11
*/


} /* end @media only screen  tablet size  / container








/* 181030 added tablet screen css rules from css002search.css below to edit for mobile screen size	*/




/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/
/*  MOBILE PAGE SCREEN SIZE MAX WIDTH 736			 */
/* ##################################################################*/
/* ##################################################################*/
/* ##################################################################*/


/* CONTINUE 181011: EDIT ALL RULES BELOW TO FIT ON MOBILE SCREEN, REPEAT WITH MOBILE SCREEN CSS RULES	*/

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


/* remove vertical scrollbar, but keep page scrollable */
html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}



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



/*  ################################################# */
/*  MOBILE CONTAINER ################################## */
/*  ################################################# */

/*  MOBILE PX PAGE */


#container {
	background-color: white;
	width: 90%;
	margin: 0 auto; 
	overflow: auto;		 	
	min-height: 100%;

}


/*  ################################################# */
/*  /*  MOBILE HEADER ################################# */
/*  ################################################# */

/*  MOBILE PX PAGE */

header.headerdesktop {
	height: 40px;
	background: orange;	
	position: relative;
	color: white;
	padding-left: 20px;
	margin: 0 auto; 
}


h1.desktop {font-size: 1.5em; text-align: center;}


/*  MOBILE PX PAGE SUBHEADER */
header.subheaderdesktop {	
	display: none;		
}

header.subheadermobile {	
	height: 25px;
	background: bisque;	
	position: relative;
	color: black;
	padding-left: 20px;
	margin: 0 auto; 
	padding-top: 5px;
	padding-left: 20px;
	text-align: center;
	font-size: 1em;		
}



footer{

/* revised w old block of code from next block below 181015	*/
	background-color: white;
	max-width: 1024px;
	width: 90%;
	margin: 0 auto; 
	overflow: auto;		 	
	min-height: 100%;


		
	
}





/* this footer contains the nexthits and prevhits buttons	*/
footer.desktop {

/*  returned to prev vers from next block of code below 181015	*/
	background-color: white;
	max-width: 1024px;
	width: 90%;
	margin: 0 auto; 
	overflow: auto;		 	
	min-height: 100%;
	height: 100px;

	
}

footer.copyrightdesktop{display: none; margin: 0px; padding: 0px;}

footer.copyrightmobile{
height: 40px;
background: white;	
position: relative;
color: gray;
display: block;
border: 0px solid orange; 
text-align: center;
width: 100%;
font-size: 1em;
margin-bottom: 20px;
margin-top: 0px;
}








/*  ################################################# */
/*  SECTION , ASIDE  ################################# */
/*  ################################################# */
/*  MOBILE PX PAGE */
section { 
		height: 100%; 
		padding-left: 10px;
		color: black;		 
}
/*  MOBILE PX PAGE */
aside { 
		float: left;  
		text-align: left; 	
}



/*  ################################################# */
/*  MOBILE PX PAGE: SEARCHRESULTSPAGE  CARTOONBOX & SIDEBARBOX */
/*  ################################################# */

 /*  ################################################# */
/*  MOBILE PX PAGE: ZERO RESULTS PAGE */
/*  ################################################# */
/*  MOBILE PX PAGE */
/*  for zero results page */
aside.cartoonbox {
float: center;  
text-align: center; 	
margin: 0px;
margin-top: 10px; 
margin-left: 0px; 
border: 3px solid gainsboro;
padding:10px 0px 10px 0px;
background: white;



	display: flex;
	flex-basis: auto;
	justify-content: center;	
	width: 95%;

 }


span.editformobile {display: none;}

span.newtextformobile {color: black;}

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

}
 
 /*  MOBILE PX PAGE */
 /*  for zero results page */
.sidebarbox {
 
width: 92%;
float: left;  
text-align: center; 



margin: 10px 0px 10px 0px;

border: 3px solid gainsboro;
padding:10px 0px 10px 10px;
background: white;


 }
 
/* Text inside sidebarbox -- edited for mobile screen	*/
aside.sidebarbox span.ChangeForMobile {display: none;}
aside.sidebarbox span.ChangeForMobileReplace {display: block; text-align: center;} 
aside.sidebarbox span.ChangeForMobileReplace h2 {font-size: 1.5em;}  
 
 
 
 
 /*  MOBILE PX PAGE */
  /*  for zero results page */ 
 /* magglass2017.png */
.sidebarbox img { 
margin: 0px; 
padding: 0 0 0 0px;
background: white;
border: 0px solid orange;
width: 150px;
height: 75px;
}

 
 
 
 /*  ################################################# */
/*  MOBILE PX PAGE: MULTIPLE RESULTS PAGE */
/*  ################################################# */

 /*  MOBILE PAGE MOBILEPX     CARTOON BOX  MULTIPLE RESULTS PAGE */
 /*  for multiple results page */ 
 .cartoonbox2 {
		float: center;  
		text-align: center; 	
		margin: 10px 0px 0px 0px;  
		border: 3px solid gray;
		padding:10px 10px 10px 10px;
		background: white;
		width: 90%;
		
 }
 
 
/*  MOBILE PAGE MOBILEPX     CARTOON IMAGE  MULTIPLE RESULTS PAGE*/
 /*  for multiple results page */  
 .cartoonbox2 img {
		float: left;  
		text-align: center; 	
		margin: 20px 0px 0px 0px;  
		border: none;
		padding:0px;
		padding-right: 10px;
		background: white;
		
		max-width:90%;
		height:auto;
		
		/* 	
		width: 60%;
		height: 60%;
		display: block;
		position: relative;
		*/
		

		
 }
/*  MOBILE PAGE MOBILEPX     SIDEBAR BOX  MULTIPLE RESULTS PAGE		*/
/*  for multiple results page 										*/ 
 
 
/* NOTE: I made the text white in sidebarbox2 to remove the caption text 
which seemed unnecessary on the small screen. Now I will move the add to cart 
button up to the spaced occupied by the caption text.	*/ 
 
 .sidebarbox2 {		
		font-size: 1em;
		float: left;  
		text-align: left; 
		margin: 20px 0px 0px 0px; 
		padding:20px 20px 10px 20px;
		background-color:white;
		color: black;
		border: 3px solid silver;		
		max-width:90%;
						
 }
 

aside.sidebarbox2 p {display: none;} 
aside.sidebarbox2 span.centerbuttons {display: flex; flex-basis: auto; justify-content: center; width: 100%; }
aside.sidebarbox2 span.ButtonSet1 {display: none;}
aside.sidebarbox2 span.ButtonSet2 {width: 100%; height: 30px; padding-bottom: 30px;}
 
 /* "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;
 }
 
 
  /* cartoon number in search results sidebar box */ 
.sidebarbox2 h2 {
		margin-top: 3px;
		margin-bottom: 0px;
		font-size: 1.25em;
		font-weight: 700;
		border: none;
		color: gray;
		padding-top: 10px;
		text-align: center;

 }
 
 
 /*  MOBILE PX PAGE */
/* 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
}
 
 



/*  resultstext is only used on multiple results page */
/*  MOBILE PX PAGE */
span.resultstext {
height: 20px; width: 280px;
float: left;  
text-align: center; 
margin: 20px 0px 0px 0px;  
padding:0 0 0 0;
background-color:white;
color: maroon;
border-top: 3px  solid bisque;
border-bottom: 3px solid bisque;
 }
 
 /*  MOBILE PX PAGE */
aside.resultstext2 {
height: 60px; width: 275px;
float: left;  
text-align: center; 
margin: 0px 0px 0px 0px;  
padding:0 0 0 0;
background-color:white;
color: maroon;
border-top: 3px  solid bisque;
border-bottom: 3px solid bisque;
 }
 
 /*  MOBILE PX PAGE */
aside.resultstext2 h2 {
margin-top: 8px;
margin-bottom: 5px;
font-size: .85em;
border: 0px solid orange;
}

/*  MOBILE PX PAGE */
/* Cartoon in cartoonbox */
aside.resultstext2 img.arrow {
float: none;
margin: 0 auto;  
border: none;
padding: 0px;
background: white;
width: 10px;
height: 10px;
display: inline;
position: relative;
bottom: -8px
}

/*  MOBILE PX PAGE */
aside.resultstext h2 {
margin-top: 8px;
margin-bottom: 5px;
font-size: 1.25em;
border: 0px solid orange;
}

/*  MOBILE PX PAGE */
/* Cartoon in cartoonbox */
aside.resultstext img.arrow {
float: none;
margin: 0 auto;  
border: none;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
background: white;
width: 30px;
height: 30px;
display: inline;
position: relative;
bottom: -8px
}

/* new search field and button in search results page sidebarbox2 on tablet screen	*/

/*  MOBILE PX PAGE */






input.sr_page_text_field[type=text] {
	margin: 20px 0px 0px 0px;
	width: 60%;
	box-sizing: border-box;
	border: 2px solid gray;
	border-radius: 4px;
	font-size: 16px;
	background-color: white;
	background-position: 0px 0px; 
	background-repeat: no-repeat;
	padding: 4px 0px;
	display: inline-block;
	margin: auto auto;
}

/* SEARCH BUTTON */
	input.sr_page_search_button[type=submit] {
	background-color: silver;
	border: none;
	color: white;
	padding: 7px 5px;
	text-decoration: none;
margin-left: 5px;
	cursor: pointer;
	width: 35%;
	font-size: .85em;
	text-align: center;
	border: 0px solid maroon;
}












div.searchtopicstop {
margin-top: 25px;

}



/*  MOBILE PX PAGE */








/*  ################################################# */
/*  MOBILE PX PAGE: FORMS , BUTTONS  ################################# */
/*  ################################################# */

/* 
input.textfield[type=text] {
border: 2px solid orange;
display: block;
width: 90%;
height: 20%;
}
	*/


/*  MOBILE PX PAGE */
input[type=text], textarea {
    border-style: inset;
    border-width: 2px;
}

/*  MOBILE PX PAGE */
input[type=text] {
    width: 90%;
    box-sizing: border-box;
    border: 2px solid orange;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 12px;

}


/*  MOBILE PX PAGE */
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;

}


/*  MOBILE PX PAGE */
input.email[type=textarea], textarea {

    font-size: 1em;
    box-sizing: border-box;
    border: 0px solid black;
    border-radius: 4px;
    background-color: white;
    background-position: 0px 0px; 
    background-repeat: no-repeat;
    padding: 5px 5px 5px 5px;
        border-style: inset;
    border-width: 2px;

    
}
/*  MOBILE PX PAGE */
/* SEND EMAIL BUTTON bc was maroon */
input.search.email[type=submit] {
    background-color: maroon;
    border: none;
    margin-left: 30px;
    margin-top: 25px;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer;
    width: 150px;
    font-size: .85em;
    text-align: center;
}



/*  MOBILE PX PAGE */
/* GRAY BUTTONS       background-color: #8F8F8F;  747474 746F36  */
/* TEST white w black outline, black text */

/* presentation use button, etc, in sidebarbox	*/
input[type=button], input[type=submit], input[type=reset] {
	background-color: linen;
	color: black;
	border: 1px solid linen;
	padding: 6px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 90%;
	font-size: .95em;
	font-weight: normal;
	margin: 1%;
	cursor: pointer;
}
/*  MOBILE PX PAGE */
span.linkbutton {
   background-color: #8F8F8F;
    border: none;
    color: white;
  padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
        width: 271px;
     font-size: 1em;
     margin: 5px 2px;
     /*
    -webkit-transition-duration: 0.4s;   */  /* Safari */
/*    transition-duration: 0.4s; */
    cursor: pointer;
    
}

/*  MOBILE PX PAGE */
.button1 {
   background-color: #8F8F8F;
    color: white; 
            border: 1px solid black;

}

/* COLOR OF INACTIVE TEXT PAGE BUTTONS */
/*  MOBILE PX PAGE */
.button1:hover {
    background-color: Bisque;
    color: black;
        border: 1px solid Bisque;
        font-weight: normal;
		font-size: 1.1em;
}
/*  MOBILE PX PAGE */
.button1.button2 {
background-color: Bisque;
color: black;
font-weight: normal;
border: 1px solid Bisque;
		font-size: 1.1em;
	
}



/*  MOBILE PX PAGE */
/* SEARCH BUTTON */
input.search[type=submit] {
	background-color: tomato;
		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;
}








/*  MOBILE PX PAGE */
/* BROWSE BUTTON */
input.browse[type=submit] {

    background-color: bisque;
    color: black;
/*		background-color:   #5A770B; */
		border: 1px solid bisque;
	/*	color: white; */
		padding: 10px 10px;
		margin: 5px 2px;
		cursor: pointer;
		width: 40%;
		font-size: .85em;
		text-align: center;
		float: left;
}


/* 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: 130px;
	font-size: .85em;
	text-align: center;
	float: right;
}  		





/*  MOBILE PX PAGE */
/* REMOVE BUTTON */
input.remove[type=submit] {
		background-color:   black;
		color: white;
		padding: 2px 2px;
		margin: 0 auto;
		cursor: pointer;
		width: 75px;
		font-size: .75em;
		text-align: center;
		float: center;
}

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

/* MOBILE PX PAGE	*/
/* div containing both prev results and next results button on search results page	*/
div.srpagemoreresults {

display: inline-block;
width: 90%;
height: 50px;
border: 0px solid red;
float: center;
margin-top: 20px;

}




/*  MOBILE PX PAGE */
/* PREV RESULTS BUTTON */
input.prevhits[type=submit] {
		position: absolute;
		display: inline-block;
		float: top;
	background-color:   gray;
	border: 1px solid black;
	color: white;
	padding: 10px 10px;
		width: 30%;


		margin-left: 10%;
		margin-top: 0px;
		cursor: pointer;
		width: 30%;
		font-size: 1.0em;
		text-align: center;


/* 	margin-left: 10%;
	cursor: pointer;
	width: 30%;
	font-size: 1.0em;
	text-align: center;
	float: center;	
*/


}

/*  MOBILE PX PAGE */
/* PREV RESULTS BUTTON */
input.prevhitsblank[type=submit] {
		position: absolute;
		display: inline-block;
		float: left;
	background-color:   white;
	border: 1px solid white;
	color: white;
	padding: 10px 10px;
		width: 30%;
		

/* 	margin-left: 10%;
	cursor: pointer;
	width: 30%;
	font-size: 1.0em;
	text-align: center;
	float: center;	
	
	*/

}



/*  MOBILE PX PAGE */
/* NEXT RESULTS BUTTON */
input.nexthits[type=submit] {
		position: absolute;
		display: inline-block;
		float: left;
		background-color:   maroon;
		border: 1px solid black;
		color: white;
		padding: 10px 10px;
		width: 30%;
		margin-left: 45%;
		margin-top: 0px;
		cursor: pointer;
		font-size: 1.0em;
		text-align: center;
		
}

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

/*  MOBILE PX PAGE */
/* ORANGE BUTTON */
input.orange[type=submit] {
    background-color:  tan;
    border: 0px solid black;
    color: black;
    padding: 10px 10px;  
    margin: 5px 2px;
    cursor: pointer;
float: left;
    font-size: 1.0em;
      text-align: center;
      width: 290px;
}
 

/*  orangebutton 171114 */
input.orangebutton[type=submit] {
     background-color:  orange;
    border: 0px solid black;
    color: black;
    padding: 10px 10px;  
    margin: 5px 2px;
    cursor: pointer;
	float: left;
    font-size: 1.0em;
      text-align: center;
      width: 290px;
}
 
 
 
 /* ADD TO CART BUTTON
input.addtocart[type=submit] {

		background-color:   maroon;
		border: 0px solid white;
		color: white;
		padding: 0 auto;
		margin: -10 auto;
		cursor: pointer;
		width: 120px;
		font-size: 1.05em;
		text-align: center;      
		display: inline;
		    box-shadow: 5px 5px 3px #888888;

}
  - original */




/*  MOBILE PX PAGE */  
  /* HTML PAGE ADDTOCART BUTTON */
 
/* ADD TO CART BUTTON 
input.addtocart[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;
			
			
}
*/



/*  MOBILE PX PAGE */
/* IN CART BUTTON */
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;
}

/*  MOBILE PX PAGE 
input.addtocart[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;
			
}
*/





/*  MOBILE PX PAGE */
input.viewcart[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;
		float: right;

}


/*  MOBILE PX PAGE */
aside.sidebar 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;
		

}





/*  MOBILE PX PAGE */
input.yellow[type=submit] {
		background-color:   yellow;
		}

input.tan[type=submit] {
		background-color:   tan;
		}
		
input.purple[type=submit] {
		background-color:   purple;
		}
		
input.black[type=submit] {
		background-color:   black;
		}
		
input.green[type=submit] {
		background-color:   green;
		}						


/*
css button generator
http://www.bestcssbuttongenerator.com/#/11
*/


} /* end @media only screen  mobile screen size