/*--------------------------------------------------------------------------------
+  CSS Document for AmazingFlies.com 
+
+  Copyright (c) 2005 - AmazingFlies, LLC
+
+  Web-design by DharmaWorks Consulting
+
+------------------------------------------------------------------------------*/

/* 
   FORMATTING STYLES

*/
body
{
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 9pt;
}

/* table definitions 
     we'll use the same font as the body but make sure all links are 
     undecorated except at hover time, then they will be underlined
*/	
td
{
    font-size: 9pt;
}

td a:link
{
	text-decoration: none;
	color: #000000;
}

td a:visited
{
	text-decoration: none;
	color: #000000;
}

td a:hover
{
	text-decoration: underline;
}


/* header styles 
      use the default font but change the sizes.  
      note: the h2 style is used for the Featured Flies bar in index.htm
		    h3 and h4 styles are used for the privacy.htm page
*/
h1
{
	font-size: 14pt;
	font-weight: bold;
}

h2
{ 
	font-size: 10pt; 
	font-weight: bold;
	background-color:#8492A8;
	color: #EEEEEE;
}

h3
{
	font-size: 12pt;
	font-weight: bold;
}

h4
{
	font-size: 10pt;
}

/* flyheader class - used for fly names on each fly page */
.flyheader
{
	font-size: 12pt; 
	font-weight: bold;
}


/* afheader class - used for the Amazing Flies header in index.htm */
.afheader
{
	font-size: 16pt;
	font-family: Papyrus, Arial, sans-serif;
	font-weight: bold;
}


/* flyimage class - used to float the fly image 
     	we want the fly image to float to the left and have a 10px margin on the right
        to spread the text out a bit
*/
.flyimage 
{
	float: left;
	margin: 0px 10px 0px 0px;
}


/* priceline class - used for the available sizes, it needs to clear the left floating fly image */
.priceline
{
	clear: left;
}

/*--------------------------------------------------------------------------------------*/
/*
  LAYOUT STYLES
  
  We have a pretty basic layout with a header, a menu on the left, and 
  a main content area.  The main content area has a few layouts -
  the home page, the fly page, and the document-like page. 
  
*/

/* 
   Header area 
   
   The whole header is a 750x120 area which consists of two sub-parts,
   the header banner which is 750x90 (the PayPal banner) and the
   menu bar which is 750x30. 
*/
#wholeheader
{
	padding: 0px;
	margin: 0px;
	border: none;
	top: 0px;
	left: 0px;
	width: 750px;	
	height: 120px;
}

#headerbanner
{
	padding: 0px;
	margin:  0px;
	border: none;
	height:  90px;
	background-color: #8492A8;
}

#headerbar
{
	padding: 0px;
	margin:  0px;
	border: none;
	height:  30px;
	background-color: #8492A8;
}

#checkoutbutton
{
	position: absolute;
	padding: 4px 0px;
	margin: 0px;
	left: 668px;
	top: 90px;
}

/* define fonts specific for the headerbar where the Home link resides */
/* these are the same as the menubar header classes (see below)			   */
#headerbar h1
{
	font: bold 10pt/12pt Verdana, Arial, sans-serif;
	padding: 0px 3px;
	background-color: #8492A8;
	color: #EEEEEE;
}

#headerbar h1 a:link
{
	text-decoration: none;
	font: bold 10pt/12pt Verdana, Arial, sans-serif;
	color: #EEEEEE;
}

#headerbar h1 a:visited
{
	text-decoration: none;
	font: bold 10pt/12pt Verdana, Arial, sans-serif;
	color: #EEEEEE;
}

#headerbar h1 a:hover
{
	text-decoration: underline;
	font: bold 10pt/12pt Verdana, Arial, sans-serif;
}


/*
   Menu area 
   
   This is on the left side of the page and is 175px wide
*/
#menubar
{
	position: absolute;
	top: 120px;
	left: 0px;
	width: 175px;
	height: 500px;
	padding: 0px;
	background-color: #EEEEEE;
}

/* 
   Main content area
   
   This is going to be a 575px wide block that will be sub-divided
   depending on the type of the page
*/
#content
{
	position: absolute;
	top: 120px;
	left: 175px;
	width: 575px;
	height: 500px;
	padding: 5px;
	background-color: #FFFFFF;
}


/*- the footer is used to hold the copyright information */
#footer
{
	position: absolute;
	top: 480px;
	left: 0px;
	width: 575px;
	height: 20px;
	border-top: solid #8492A8 1px;
	padding-top: 2px;
	font-size: 8pt; 
	font-weight: normal; 
	text-align: center; 
	color:gray;
}

/* alternates for the legal page */
#altcontent
{
	position: absolute;
	top: 120px;
	left: 175px;
	width: 575px;
	height: 500px;
	padding: 5px;
	background-color: #FFFFFF;
	font-size: 8pt; 
} 

#altfooter
{
	width: 575px;
	height: 20px;
	border-top: solid #8492A8 1px;
	padding-top: 2px;
	font-size: 8pt;
	font-weight: normal;
	text-align: center;
	color:gray;
}

/*--------------------------------------------------------------------------------------*/
/* 
   MENU BAR STYLES
   
   The menu bar is a bit funky in that the top-level items can be either hot or not 
   so just using a ul is not possible.  Because of this we'll use h1 tags for the 
   top level navigation which can be a hot-link or a category heading.  These show in dark
   background with light text.  The 2nd tier navigation is all done using ul lists and
   shows as dark text on a light background.

*/
/* styles for the top-level menus */
#menubar h1
{
	font: bold 10pt/12pt Verdana, Arial, sans-serif;
	background-color: #8492A8;
	padding: 0px 0px 0px 2px;
	color: #EEEEEE;
}

#menubar h1 a:link
{
	text-decoration: none;
	font: bold 10pt/12pt Verdana, Arial, sans-serif;
	color: #EEEEEE;
}

#menubar h1 a:visited
{
	text-decoration: none;
	font: bold 10pt/12pt Verdana, Arial, sans-serif;
	color: #EEEEEE;
}

#menubar h1 a:hover
{
	text-decoration: underline;
	font: bold 10pt/12pt Verdana, Arial, sans-serif;
}

/* class for the list sub-menus */
.submenu
{
	margin: 0px;
	list-style: none;
}

.submenu li
{
	border-top: 0;
	padding-left: 0;
}

.submenu li a
{
	text-decoration: none;
	font: bold 9pt/10pt Verdana, Arial, sans-serif;
	color:  #8492A8; 
}

.submenu li a:hover 
{
	color:  #8492A8;
	background-color: transparent;
	text-decoration: underline; 
}