/* 

------------------

basic elements 

------------------

*/



html   { margin: 0; padding: 0; }

body     { text-align: center; margin: 18px 0 0 0; padding: 0; background: whitesmoke url(images/ampBG.jpg) repeat;
	font: 11px/15px "Trebuchet MS", sans-serif;
}

a { color: maroon; text-decoration: underline; font-size: 100.1%;}

/*

------------------

 Containers Start

------------------

*/

#container   { width: 877px; 
height: auto;
margin: 0 auto; text-align: center; font-size: 12px;}

#logoarea { width: 866px; height: 120px; margin: 5px 0 0 10px; text-align: left;
}

#content   { width: 876px; height: auto; text-align: left; border: 1px solid black; background-color: white;}

#tallcontent   { width: 876px;
height:auto;
text-align: left; 
border: 1px solid black; background-color: white;}

#header { margin: 0; padding: 0; width: 876px; height: 60px; clear: both; background: white url(images/ampro_01.gif) no-repeat; border-bottom: 1px solid #525252;
}

#bodyarea { margin: 0 auto; width: 876px; height: 375px;}

#morebody { margin: 0; padding: 0;
width: 876px;
height: auto;
background-color: white;
border-top: 1px solid black;}

#tallbodyarea { margin: 0 auto; width: 876px; height:auto !important; height: 1850px}

#tallbody { margin: 0; padding: 0; width: 876px; 
height:auto;
background-color: white;border-top: 1px solid black;}

#footer { margin: 0; padding: 0; width: 876px; height: 37px;  text-align: center; clear: both;
}

#contactinfo {
	float: right; margin: 25px 20px 0 0; text-align: right; font-size: 13px;
}

.innertube{
margin: 30px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

#boxes { width: 876px; 
height: auto;
margin: 0; padding: 0; clear: both; text-align: center;	background-image: url(images/amprobg.gif); border-bottom: solid black 1px;
}


#tallboxes { width: 876px; 
height: auto;
margin: 0; padding: 0; clear: both; text-align: center;	background-image: url(images/amprobg.gif);
	border-bottom: solid black 1px;
}

#box1 { width: 250px; height: 255px; margin: 15px 0 13px 13px; padding: 0 10px 5px 10px; background-color: #fdfcf7; float: left; clear: none; display: inline; border: 1px solid black;
}

#box2 { width: 250px; height: 255px; margin: 15px 0 13px 13px; padding: 0 10px 5px 10px; background-color: #fdfcf7; float: left; clear: none; display: inline; border: 1px solid black;
}

#box3 { width: 250px; height: 255px; margin: 15px 0 13px 13px; padding: 0 10px 5px 10px; background-color: #fdfcf7; float: left; clear: none; display: inline; border: 1px solid black;
}

#box2long { width: 520px; height: 300px; margin: 15px 0 13px 13px; padding: 0 10px 5px 20px; background-color: #fdfcf7; float: left; text-align: left; clear: none; display: inline; border: 1px solid black;
}

#box2longtall { width: 520px; 
height:auto;
margin: 15px 0 13px 13px; padding: 0 10px 5px 20px; background-color: #fdfcf7; float: left; text-align: left; clear: none; display: inline; border: 1px solid black;
}

#biobox { width: 250px; height: 350px; margin: 15px 0 13px 13px; padding: 0 10px 5px 10px; background-color: #fdfcf7; float: left; clear: none; display: inline; border: 1px solid black;
}

.boxtops {
	width: 250px; height: 35px; text-align: center; border-bottom: 1px solid gray;
}

.boxtopslong {
	width: 520px; height: 35px; text-align: left; border-bottom: 1px solid gray;
}

.cereal {
	width: 250px; height: 162px; margin: 5px 5px 0 0;text-align: left; overflow: hidden; color: #1c1b16; font: 10px/13px
}

.cereallong {
width: 510px; 
height: auto;

	margin: 0 5px 0 0;text-align: left; overflow: visible; color: #1c1b16;
	font: 10px/13px}

.cereallongabout {
	width: 510px; height: auto; margin: 5px 5px 0 0;text-align: left; overflow: visible; color: #1c1b16;
	font: 11px/14px}

.upc {
	width: 230px; height: 15px; font-size: 12px; margin-top: 5px; text-align: right; overflow: visible;
	font-weight: bold;
}

.upclong {
	width: 510px; height: 15px; font-size: 12px; font-weight: bold; margin-top: 5px;text-align: right; overflow: visible;
}

a:hover {
	background-color: #b4d5ff;
}
/*

------------------

 Containers End

------------------

*/

/* tags */

body a:link, a:active, a:visited  { color: maroon; text-decoration: underline; }

body a:hover  { color: maroon; text-decoration: underline;}


/*

------------------

 Navigation Start

------------------

*/

	
#navarea {
	width: 848px; height: auto; float: left; margin: 10px 20px 0 10px; font-size: 14px;
}
ul#minitabs{list-style: none; margin: 0; padding: 10px 0;
  text-align: right; white-space: nowrap}
  
ul#minitabs li{display: inline; margin: 0 10px}

ul#minitabs a{text-decoration: none; padding: 0 0 5px 0;
  border-bottom: 4px solid whitesmoke; color: #140000; }
  
ul#minitabs a#current{border-color: maroon; color: maroon}

ul#minitabs a:hover{border-color: maroon; color: maroon; background-color: #fff;}

/*


------------------

 Navigation End

------------------

*/


#footlist  { text-align: center; font-size: 10px; font-family: Helvetica, Verdana, Arial, sans-serif; margin-left: 0; 
padding: 0 5px 0 0; color: gray;}

#footlist li { list-style: none; display: inline; margin: 10px }

#footlist li a:link  { color: #140000; }

#footlist li a:visited { color: #888888; }

#footlist li a:hover { color: maroon; }

.foot { color: #2f393d;
	font-size: 80%;
	margin-top: 10px;
}

/*

------------------

 Decoration Start

------------------

*/


h1 { color: #333; font-size: 22px; }

h2 { font: italic bold 18px Georgia, "Times New Roman", Times, serif; color: navy;
}

h3 { color: maroon;
	font: bold 15px "Trebuchet MS", sans-serif;
	text-transform: uppercase;
}

h4 {  color: maroon; font-size: 12px; text-decoration: underline; line-height: 1.4em; }

h5 {  color: maroon; font-size: 13px; line-height: 10px; font-weight: bold;
}

p  { align: left; color: #333;
	font: 12px/15px "Trebuchet MS", Helvetica, sans-serif;
}

td {
	padding: 12px 0;
	border-bottom: 1px solid #555;
	vertical-align: top;
}

img {
	border: none;
}

em   {
}




/* popups */


.thumbnail{
position: absolute;
z-index: 0;
}

.thumbnail:hover{
background-color: white;
z-index: -1;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 396px;
left: 200px; /*position where enlarged image should offset horizontally */
}