/* 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 */

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

.cmsfront .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 */

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

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

/* END OF HEADER */

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

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

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

.cmsfront .secondary-column a img /* To create the illusion of a border on all image buttons */
{margin-top: 1px;float: left;}
.cmsfront .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 .cmsfront .secondary-column .static-login-box /* For the benefit of IE6 */
{height: 110px;	}

.cmsfront .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 */
.cmsfront ul.main-menu li{border: solid 1px #00A6DE;border-left: 0;float: left;	height: 25px;overflow: hidden;}
.cmsfront ul.main-menu li a{display: block;padding-top: 6px;padding-bottom: 8px;}
* html .cmsfront ul.main-menu li a{padding-top: 6px;}
.cmsfront ul.main-menu li.home{width: 110px;}
.cmsfront ul.main-menu li.products{width: 127px;}
.cmsfront ul.main-menu li.fish-people{width: 148px;}
.cmsfront ul.main-menu li.fish-facts{width: 126px;}
.cmsfront ul.main-menu li.contact-us{width: 125px;}
.cmsfront 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) */
.cmsfront .search-box{border-bottom: solid 1px #00A6DE;border-top: solid 1px #00A6DE;padding: 3px;height: 19px;	float: left;width: 194px;background-color: #00A6DE;overflow: hidden;}
* html .cmsfront .search-box /* IE6 calculates borders differently */{height: 22px; }

.cmsfront .search-box input{float: left;display: inline;vertical-align: middle;}
.cmsfront .search-box input.seach-textbox{border: 0;	width: 135px;height: 15px;font-size: 0.9em;color: #00A6DE;padding: 2px;}
* html .cmsfront .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;}

.cmsfront .textboxes{}

.cmsfront .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;}
.cmsfront .static-login-box input.search-button{float: right;cursor: pointer;}

/* For the link images that sit at the bottom of the page */
.cmsfront .image-button-row{background-color: #00A6DE;border-top: solid 1px #00A6DE;float:left;height: 148px;overflow: hidden;width: 960px;}
.cmsfront .image-button-row img{margin-right: 1px;}
.cmsfront .image-button-row img.wider-image{margin-right: 0;}
.cmsfront .image-button-row .last-image img{margin-right: 0px;}

/* The Footer (both boxes) */
.cmsfront .footer{width: 960px;margin: 0 auto;}
.cmsfront .footer-menus, 
.cmsfront .footer-logo{float: left;}
.cmsfront .footer-menus{width: 675px;padding-top: 30px;min-height: 50px;}
* html .cmsfront .footer-menus{height: 50px;}
.cmsfront .footer-logo{width: 275px;height: 70px;padding: 10px 10px 0 0;}
.cmsfront .footer-logo img{float: right;	}

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

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

.cmsfront .content-menu{width: 144px;padding: 35px 10px 10px 10px;	}
.cmsfront .content-menu-front{width: 217px;padding: 35px 10px 10px 10px;	}
.cmsfront .content-body{width: 575px;padding: 35px 20px 30px 0;	}
.cmsfront .content-body-front{padding: 18px 20px 30px 0;	}

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

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

.cmsfront .Panel{float:left;}

/* For the left hand, drop down menu */
.cmsfront #leftMenu, 
.cmsfront #leftMenu ul{padding: 0;margin: 0;list-style: none;border: solid 1px #00A6DE;	}
.cmsfront ul#leftMenu {width: 132px;}
.cmsfront #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;}
.cmsfront #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;}
.cmsfront ul#leftMenu li ul li a, 
.cmsfront ul#leftMenu li ul li a:hover{background-image: none;}
.cmsfront #leftMenu li{display: block;background-color: #FFFFFF;padding-top: 0;}
.cmsfront #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;}
.cmsfront #leftMenu li:hover ul{left: auto;}
.cmsfront #leftMenu li:hover ul, 
.cmsfront #leftMenu li.sfhover ul{left: auto;display: block;}

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

/* modal popup styles */
.cmsfront .modalpopupbackground{background-color:#ffffff;filter:alpha(opacity=70);opacity:0.7;} 
.cmsfront .popupmessage{padding:45px 20px 45px 20px;border:solid 1px #00A6DE;background-color:#ffffff;width:470px;text-align:center;}
.cmsfront .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) */
.cmsfront .secondary-column .static-login-box{padding: 10px 10px 0 10px;}
.cmsfront .secondary-column .static-login-box p{line-height: 1.5em;font-size: 10px !important;}