/* HUMAN SPEAKERS CASCODING STYLE SHEET */
										/* ian's 3/26 version */
/*
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
	}																 general cleansing before the game, needs step by step analysis */


justify	{text-align:justify;}											/* text justify, use sparingly as needed */
h1		{font-size:140%; text-align:center;}
h2		{font-size:110%; text-align:center;}
h3		{font-size:100%; text-align:left;}
a		{text-decoration:none;}									/* eliminates link underlining */
td 		{vertical-align: top;}

mobile		{display:none;}										/* tag to hide mobile-only elements, reversed in @media section, cannot go between open tags */
immobile	{display:inline;}										/* marks mobile-unfriendly features */

img {
 	max-width:100%; 
	height:auto; 
	border-radius: 5px;
	}

img.sidebar {width:15em;}										/* used on bunnylith */
img.noradius {border-radius: 0;}									/* for images that require sharp corners:  <img class=\"noradius\" etc.>*/

img.scaleright {													/* this works very well, and should be used to replace all the "thumb" tags? */
	float: right;														/* rename this simply "thumb"? */
	height: auto;													/* it allows custom (or scaled) widths depending on material */
	margin-top: 3 px;												/* is there a way to add a sub-tag to specify width, ie class=scaleright100 etc.? */
	margin-left: 10px;
	margin-bottom: 3px;
	clear: both;
	}

img.thumbsmallright { 											/* for galleries, usage: <img class=\"thumbsmallright\" etc.> */
	float: right; 
	width: 150px; 
	height: 150px; 
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	clear: both;
	}

img.thumbsmallleft { 
	float:left; 
	width: 150px; 
	height: 150px; 
	margin-right: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	clear: both;
	}

img.thumbbigright { 												/* for new products page, other pages with not much text <img class=\"thumbbigright\" etc.> */
	max-width: 100%;
	float: right; 
	width: 300px; 
	height: auto; 
	margin-left: 10px;
	margin-bottom: 10px;
	clear: both;
	}

img.thumbbigleft { 
	max-width: 100%;
	float: left; 
	width: 300px; 
	height: auto; 
	margin-right: 10px;
	margin-bottom: 10px;
	clear: both;
	}

img.thumbmedright { 												/*  <img class=\"thumbmedright\" etc.> */
	max-width: 100%;
	float: right; 
	width: 200px; 
	height: auto; 
	margin-left: 10px;
	margin-bottom: 10px;
	clear: both;
	}

img.thumbmedleft { 
	max-width: 100%;
	float: left; 
	width: 200px; 
	height: auto; 
	margin-right: 10px;
	margin-bottom: 10px;
	clear: both;
	}

.leftside {															/* used for image floating <nnn class=\"leftside\" mmm> */
	width:auto; 
	margin-bottom:10px; 
	margin-left:0px; 												/* pushed to margin on outer edge */
	margin-right:10px; 
	margin-top:10px; 
	border:0px solid black; 
	float:left; 
	max-width:35%; 												/* reduced from 18em to 10em 3/20/15 can this be a %? Yes 4/2/15. */
	background-color:#ffffff;
	clear: left;														/* Prevents inwards nesting */
	}		

.rightside {															/* used for image floating */
	width:auto; 
	margin-bottom:10px; 
	margin-left:10px; 
	margin-right:0px; 
	margin-top:10px; 
	border:0px solid black; 
	float:right; 
	max-width:35%; 
	background-color:#ffffff;
	clear: right;
	}		

.mainbody, .header {
	margin-top:2px;
	margin-left:auto;
	margin-right:auto;
	padding: 5px 30px 30px 30px;
	border:2px solid;
	border-radius:10px;
	width:640px;
	min-width:500px;
	background:#ffffff; }

.header { 
	margin-top: 0px;
	background-image: url('https://www.humanspeakers.com/graphics/header_background.jpg'); 
	background-repeat: no-repeat;
	background-size: 100%;
	width: 700px;
	height: 233px;
	padding: 0px;
	}

.printbody {										/* THIS IS FOR THE PRINTER-FRIENDLY VERSIONS */
	margin-top:2px;
	margin-left:auto;
	margin-right:auto;
	padding: 10px 10px 10px 10px;
/*	border:2px solid; */
/*	border-radius:10px; */
	width:640px;
	min-width:500px;
	background:#ffffff; 
	}

.printbody img {
	max-width: 300px; 							/* This works, makes any larger images smaller - also is not needed now, only affects the logo */
	}

.printbody h1 {
	font-size:150%; font-family: Arial, sans-serif; text-align:center;
	}
.printbody h2 {
	font-size:130%; font-family: Arial, sans-serif; text-align:center;
	}

.printsmallphoto img {								/* mucks up header image, image at end floats over border, etc. */
	margin-left:10px; 
	margin-right:10px; 
	margin-top:10px; 
	margin-bottom:10px;
	float:right; 
	max-width: 300px;  
	}

/* .printbody.noprint { display: none; }          */			/*  <div class=\"noprint\">  this is not working   add "noprint" tags for internal menu etc. links?*/

/* HERE STARTS THE DROPDOWN NAV BOX SETTINGS  */

nav {
	margin: 0px auto; 
	}

nav ul ul {
	display: none;
	}

nav ul li:hover > ul {
		display: block;
	}

nav ul {
	background: #ffe0ff; 											/* background color of non live boxes */

/* 	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);  */

/* 	box-shadow: 0px 0px 10px #a040a0;     rgba(0,0,0,0.15); */
	padding: 0 0px;
	border-radius: 5px;  
	list-style: none;
	position: relative;
       display: block;
	margin-top: 0;
	}

	nav ul:after {
		content: ""; 
		clear: both; 
		display: block;
		}

	nav ul li {
 		float: left; 
		border-radius: 5px;
 		width: 16.66%; 											/* set for six top boxes */
		text-align: center;
		font-weight: bold;
		}

	nav ul li:hover {
		background: #ffb0ff;										/* background color, live boxes */
		}

	nav ul li:hover a {
		color: #a040a0;											/* text color of live boxes */
		}
		
	nav ul li a {
		display: block; 
		padding: 2px 20px;										/* this sets the top line block height and width indirectly */
		color: #000000; 											/* text color of non-live boxes */
		}
			
		
	nav ul ul {

		padding: 0;		
		position: absolute; 
		top: 100%;
		}

	nav ul ul li {
		float: none; 
		text-align: left;
		border-radius: 5px;  
		border: 1px solid #a040a0;   
		position: relative;
 		width: auto;
		}

	nav ul ul li a {
		padding: 2px 10px;										/* first drop column width */
		color: #fff;
		}	

	nav ul ul li a:hover {
		background: #ffb0fff;										/* live column box color */
		}
		
	nav ul ul ul {
		position: absolute; 
		left: 100%; 
		top:0;
		}

		#left {														/* defines  id=\"left\" on epimodels submenu ul */
		 	left: auto;
                	right: 100%;
			}

	nav ul ul ul li {													/*  these three don't appear to be necessary */
		float: none; 
		border: 1px solid #a040a0;
		position: relative;
		}

	nav ul ul ul li a {
		padding: 2px 10px;										/* sub drop column width */
		color: #fff;
		}	

	nav ul ul ul li a:hover {
		background: #ffb0ff;										/* live second column box color */
		}

/* HERE ENDS THE DROPDOWN NAV BOX SETTINGS */

/* RESPONSIVE STUFF */

@media screen and (max-width:640px) {
  	.mainbody, .header { 
    	width:90%;														/* leaves a tiny edge of background image */
    	min-width:initial;
    	 }

.header {height: auto;}												/* can't be 233, so stuck with little white space for now */
.mainbody {padding: 5px;}
.leftside {max-width:25%;}
.rightside {max-width:25%;}

mobile		{display:inline;}										/* tag to show mobile-only elements, reversing hide definition */
immobile	{display:none;}										/* hides mobile-unfriendly features */

nav {  
    	text-align: left;
     	} 
nav ul li {width: 33.33%;} 											/* adjusts small screen to 3 wide top boxes */

nav ul li a {padding: 2px 2px;}									/* allows proper centering of menu text */
	}

/* END IRRESPONSIBLE STUFF */
		

/* LEGACY BITS FROM BUNNYHIFI
img.left  {padding:15px; vertical-align:middle;}

.deadcenter {
	text-align:justify; 
	padding:5px; 
	border:1px solid black; 
	margin:1% auto;  
	max-width:600px; 
	background-color:#ffffff;
	}

#title    {text-align:center; font-size:larger; font-style:bold;}
#footer   {clear:both; text-align:right; font-size:smaller; font-style:italic;}
#navigate {clear:both; text-align:center; font-size:smaller; text-indent:0px;}
#menu     {text-align:left; font-size:smaller; color:red;}

.content  {clear:both; width:40em; margin:10px auto; padding:15px; border:1px dashed #500000; background-color:#ffffff;}
p.inside {padding:0px; margin:0px;}
 */