/* This CSS file was created by JB on 13/01/09 with the intention of being merged with
GPs CSS file when complete */
*, html
{
	margin: 0;
	padding: 0;	
}

body 
{
	margin: 0;
	padding: 0;
	background-color: #DDDDDD;
}

form.main-body-form
{
	background: #DDDDDD url('../gfx/bg/background-white-bar.gif') repeat-y center top;
}

/* MAIN-CONTAINER:  Contains both the main column and the right column but not
the bottom row of button images or the footer which are both outside this div */

.main-container 
{
	width: 960px;
	margin: 0 auto;	
	border: solid 1px #00A6DE;
	border-top: 0;
}

.clearer
{
	clear:both;
}

/* HEADER:  The header is actually just two images floated next to one another, there is no need
for a header div in this circumstance */

img.logo, img.header
{
	float: left;
}

img.logo
{
	border-right: solid 1px #00A6DE;
}

/* END OF HEADER */

/* LEFT HAND (contains content and main navigation) */
.main-column
{
	width: 759px;
	float: left;
}

/* RIGHT HAND (contains search box, login box and various banner images */
.secondary-column
{
	float: left;
	width: 200px;
	border-left: solid 1px #00A6DE;	
	border-bottom: solid 1px #00A6DE;	
	background-color: #00A6DE;
}

* html .secondary-column /* IE6 thinks it's a pixel or two bigger then it is */
{
	overflow: hidden;
}

.secondary-column a img /* To create the illusion of a border on all image buttons */
{
	margin-top: 1px;
	float: left;
}

.secondary-column .static-login-box
{
	width: 180px;
	float: left;
	background-color: #FFFFFF; /* As the columns background is blue */	
	margin-top: 1px;
	min-height: 150px;
}

* html .secondary-column .static-login-box /* For the benefit of IE6 */
{
	height: 110px;	
}

.secondary-column .basket-preview
{
	width: 184px;
	padding: 8px;
	float: left;
	font-size: 1.1em;
	background-color: #E5F6FC; /* As the columns background is blue */	
}

/* NAVIGATION BAR */
ul.main-menu li
{
	border: solid 1px #00A6DE;
	border-left: 0;
	float: left;	
	height: 25px;
	overflow: hidden;
}

ul.main-menu li a
{
	display: block;
	padding-top: 6px;
	padding-bottom: 8px;
}

* html ul.main-menu li a
{
	padding-top: 6px;
}

ul.main-menu li.home
{
	width: 110px;
}

ul.main-menu li.products
{
	width: 127px;
}

ul.main-menu li.fish-people
{
	width: 148px;
}

ul.main-menu li.fish-facts
{
	width: 126px;
}

ul.main-menu li.contact-us
{
	width: 125px;
}

ul.main-menu li.buy-now
{
	width: 118px;
	border-right: 0;
}

/* For the search box at the top of the second column (designed
to align with the menu) */
.search-box
{
	/* background-color: #00A6DE; */
	border-bottom: solid 1px #00A6DE;
	border-top: solid 1px #00A6DE;
	padding: 3px;
	height: 19px;	
	float: left;
	width: 194px;
	background-color: #00A6DE;
	overflow: hidden;
}

* html .search-box /* IE6 calculates borders differently */
{
	height: 22px; 
}

.search-box input
{
	float: left;
	display: inline;
	vertical-align: middle;
}

.search-box input.seach-textbox
{
	border: 0;	
	width: 135px;
	height: 15px;
	font-size: 0.9em;
	color: #00A6DE;
	padding: 2px;
}

* html .search-box
{
	/* Not sure why, but IE6 is adding two pixels extra on the bottom padding,
	so removing it entirely makes the box look the same cross browser */
	padding-bottom: 0;
}

.textboxes
{
}

.search-box input.search-button, .static-login-box input.search-button
{
	width: 55px;
	padding: 1px 0 2px 0;
	background-color: #00A6DE;
	border: solid 1px #FFFFFF;
	font-size: 0.9em;
	color: #FFFFFF;
	font-weight: normal;
	vertical-align: middle;
	height: 19px;
	cursor: pointer;
}

.static-login-box input.search-button
{
	float: right;
	cursor: pointer;
}

/* For the link images that sit at the bottom of the page */

.image-button-row
{
	background-color: #00A6DE;
	border-top: solid 1px #00A6DE;
	float:left;
	height: 148px;
	overflow: hidden;
	width: 960px;
}

.image-button-row img
{
	margin-right: 1px;
}

.image-button-row img.wider-image
{
	margin-right: 0;
}

.image-button-row .last-image img
{
	margin-right: 0px;
}

/* The Footer (both boxes) */
.footer
{
	width: 960px;
	margin: 0 auto;
}

.footer-menus, .footer-logo
{
	float: left;
}

.footer-menus
{
	width: 675px;
	padding-top: 30px;
	min-height: 50px;
}

* html .footer-menus
{
	height: 50px;
}

.footer-logo
{
	width: 275px;
	height: 70px;
	padding: 10px 10px 0 0;
}

.footer-logo img
{
	float: right;	
}

.footer-menus ul
{
	width: 675px;
	float: left;
	margin-top: 5px;
}

.footer-menus ul li
{
	float: left;
}

/* This is the MAIN CONTENT MANAGED AREA in the left column */
.content-menu, .content-body, .content-menu-front, .content-body-front
{
	float: left;	
}

.content-menu
{
	width: 144px;
	padding: 35px 10px 10px 10px;	
}

.content-menu-front
{
	width: 217px;
	padding: 35px 10px 10px 10px;	
}

.content-body
{
	width: 575px;
	padding: 35px 20px 30px 0;	
}

.content-body-front
{
	padding: 18px 20px 30px 0;	
}

* html .content-body /* IE6 can't handle the incorrect measurements like the other browsers */
{
	padding-right: 15px;
}

.content-menu img
{
	/*border: solid 1px #D3D4D5;	*/
}

.Panel
{
	float:left;
}

/* For the left hand, drop down menu */
#leftMenu, #leftMenu ul
{
	padding: 0;
	margin: 0;
	list-style: none;
	border: solid 1px #00A6DE;	
}

ul#leftMenu 
{
	width: 132px;
}

#leftMenu a
{
	display: block;
	padding: 10px;	
	background-color: #FFFFFF;
	background-image: url('../gfx/symbols/blue-menu-arrow.gif');
	background-position: right center;
	background-repeat: no-repeat;
}

#leftMenu a:hover
{
	background-color: #00A6DE;	
	background-image: url('../gfx/symbols/white-menu-arrow.gif');
	background-position: right center;
	background-repeat: no-repeat;
	color: #FFFFFF;
}

ul#leftMenu li ul li a, ul#leftMenu li ul li a:hover
{
	background-image: none;
	
}

#leftMenu li
{
	display: block;
	background-color: #FFFFFF;
	padding-top: 0;
}

#leftMenu li ul
{
	position: absolute;
	width: 250px;
	left: -999em;
	margin-left: 133px;
	margin-top: -32px;
	background-color: #FFFFFF;
	padding: 0;
	border: solid 1px #00A6DE;	
	z-index: 100;
}

#leftMenu li:hover ul
{
	left: auto;
}

#leftMenu li:hover ul, #leftMenu li.sfhover ul
{
	left: auto;
	display: block;

}

.content-menu a img
{
	border: 0;
}

/* modal popup styles */
.modalpopupbackground
{
    background-color:#ffffff;
    filter:alpha(opacity=70);
	opacity:0.7;
    } 

.popupmessage
{
    padding:45px 20px 45px 20px;
    border:solid 1px #00A6DE;
    background-color:#ffffff;
    width:470px;
    text-align:center;
    }
.popupmessage p
{
	color:#00A6DE;
	font-weight:bold;
	margin-bottom:8px;
	}

/* For the new login panel (I will overwrite for now, then delete the old stuff) */
.secondary-column .static-login-box
{
	padding: 10px 10px 0 10px;
}

.secondary-column .static-login-box p
{
	line-height: 1.5em;
	font-size: 10px !important;
}