﻿/* ========== Overall page layout ========== */

body {
	/*background-color: rgb(242, 242, 242); */
	background-color: rgb(250,193,41); 
	color: rgb(0,0,100);
}

div.wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 984px;	
}

div.wrapper-left { float:left; width:40px; background-image: url(../images/site/background-left.jpg); background-repeat:repeat-y; background-position:right; }
div.wrapper-center { float:left; width:900px; } 
div.wrapper-right { float:left; width:40px; background-image: url(../images/site/background-right.jpg); background-repeat:repeat-y; background-position:left; }

div.content {
	background-color: White;
	min-height: 420px;
	_height:420px; 
	display:table;
}

div.header { width:900px; }

div.main {
	width: 900px;	
	background-color: White;
	padding-bottom:20px;
	display:table;
}



div.account-menu-and-basket {	padding-top:10px; }
div.account-menu-and-basket * {	margin:5px; }
div.animation { float:right; }

span.save-amount 
{
    font-weight: bold;
}

div.right-aligned-header { position:absolute; width:900px; text-align:right; float:right;}
a.basket {color: #960096;}
a.basket:hover {text-decoration:none;}
a.basket span {text-decoration:none; display:inline-block; vertical-align:middle; padding-bottom:20px;margin:0px;}
a.basket:hover span span {text-decoration:underline;display:inline-block; vertical-align:middle; margin:0px;}

.logo { height:100px; background-repeat:no-repeat; }

/* ========== ???????? ========== */

/* Do not use in this form on this site as it changes the default layout of the DL element, and this will cause
 html loaded from the database to render incorrectly.

use dl.inline or something */

/* dl { margin: 0px; padding-left: 15px; padding: 0px; display: block; width: 470px; }
dl dt { margin: 0px; margin-top: 5px; width: 170px; float: left; display: inline; clear: left; font-weight: bold; color: rgb(74, 138, 11);}
dl dd { margin: 0px; margin-top: 5px; width: 300px; float: left; display: inline; } */

/* ========== Control containers and validation ========== */

div.page-messages 
{
	background-color:#DDFFDD;
	border:solid 3px green;
	padding:15px;
	padding-bottom:10px;
	margin-bottom:15px;
}

div.validation-errors {
	background-color: #FFDDDD;
	border:solid 3px red;
	padding:15px;
	padding-bottom:10px;
	margin-bottom:15px;
}

div.control-container 
{
	clear:left;
	padding-bottom:2px;
}

div.control-container label
{
	display:block;
	float:left;
	width:170px;
}

.textbox-narrow
{
	width:50px;
}

.textbox
{
	width:131px;
}

.textbox-wide
{
	width:210px;
}

.textbox-superwide
{
	width:350px;
}

.required
{
	background-color:rgb(245,255,190);
	border: rgb(127,157,185) 1px solid; 
	padding:1px;
}

.checkbox input
{
	margin-right:10px;	
}

/* ========== Text Styles ========== */

p,
div.p
{
	margin-top:10px;
	margin-bottom:10px;
}

ul
{
	list-style-type: disc;
	/*list-style-position:inside;*/
	/*text-indent:-15px;*/
	margin-left:30px;
	margin-top:5px;
	margin-bottom:5px;
	line-height:1.4em;
}

a
{
	text-decoration:none;
	color: rgb(150,0,150);
}

a:hover
{   
	text-decoration:underline;
	color: rgb(150,0,150);
}


h1  
{
	font-size: 16pt; 
	color: rgb(0, 0, 100); 
	margin-top:5px;
	margin-bottom:12px;
}
h2  
{
	font-size: 12pt; 
	color: rgb(0, 69, 131); 
	margin-top:5px;
	margin-bottom:12px;
}
h3  
{
	font-size: 9pt; 
	font-weight:bold; 
	margin-top:5px;
	margin-bottom:4px;
}

.small-print
{
	font-size: 8pt;
}

.no-results
{
	font-style:italic;
	color:Red;
}

.search-instruction
{
	font-style:italic;
}

.findOutMore
{
	padding-left:10px;
}

.offerTypes img
{
	padding-left:5px;
	padding-bottom:16px;
	padding-top:6px;
}

.mid-title
{
	padding-top:20px;
}

/* ========== Expander sections ========== */

div.hide-show-panel
{
}

div.hide-show-panel div.hide-show-header
{
	cursor: pointer;
	text-decoration: underline;
	padding-bottom:5px;
}

/* ========== Standardised page layouts ========== */


div.single-column-layout,
div.image-text-layout,
div.menu-picture-text-layout,
div.menu-text-picture-layout,
div.search-layout
{
	margin-right:30px; 
	margin-left:50px; 
}

div.script-tagline
{
	text-align: center;
	height:98px;
	margin-right:100px;
}

/* ========== single-column-layout ========== */

div.single-column-layout
{
	margin-right:60px;
}

div.single-column-layout     .single-column-text,
div.image-text-layout        .single-column-text,
div.menu-picture-text-layout .single-column-text,
div.menu-text-picture-layout .single-column-text,
div.search-layout            .single-column-text
{
	margin-right:70px;
	margin-bottom:20px;
	top:0px;
}

/* ========== image-text-layout (2 column) ========== */

div.image-text-layout div.left-panel,
div.search-layout div.left-panel
{
	display:inline; 
	float:left; 
	width:290px; 
	background-repeat:no-repeat;
	/*white-space:nowrap;*/
	overflow:hidden;
}

div.image-text-layout div.left-panel>img
{
	padding-bottom:10px;
}

div.image-text-layout div.right-panel,
div.search-layout div.right-panel
{
	float:right; 
	width:450px;
	padding-right:60px;
}

div.image-text-layout div.offer-panel,
div.search-layout div.offer-panel
{
	float:right;
	overflow:hidden;
	width:510px;
}

/* ========== search-layout (2 column) ========== */

div.search-layout div.left-panel
{
	width:250px;
}

div.search-layout div.right-panel
{
	width:450px;
	padding-right:90px;
}

div.search-layout div.offer-panel
{
	width:510px;
	padding-right:30px;
}

/* ========== menu-picture-text-layout (3 column) ========== */

div.menu-picture-text-layout div.left-panel, 
div.menu-text-picture-layout div.left-panel 
{
	clear: both;
	display: inline;
	float: left;
	width: 210px;
}

div.menu-picture-text-layout div.right-panel, 
div.menu-text-picture-layout div.right-panel
{
	display: inline;
	float: right;
	width: 590px;
}

div.menu-picture-text-layout div.center-panel,
div.menu-text-picture-layout div.center-panel
{
	float: left;
	display: inline;
	width:300px;
	overflow:hidden;
}

div.menu-picture-text-layout div.far-right-text,
div.menu-text-picture-layout div.far-right-text
{
	float: right; 
	width: 260px; 
	padding-left: 0px; 
	padding-bottom: 10px; 
	display: inline;
}

/* ========== menu-text-picture-layout (3 column) ========== */

div.menu-text-picture-layout div.left-panel 
{
	width: 270px;
}

div.menu-text-picture-layout div.right-panel 
{
	width: 530px;
}

div.menu-text-picture-layout div.center-panel
{
	width:320px;
}

div.menu-text-picture-layout div.far-right-text
{
	width: 180px; 
}

/* ========== Checkout =============== */

.codeBox  
{
	word-wrap:break-word; 
  word-break: break-all; 
  font-family: courier, Arial, Helvetica;
	font-size: 11px;
	color:  #666666;
}

.formTable
{
    width: 100%;
    border: 0px none;
	border-collapse: collapse;
}

.formTable h2
{
	margin-top:15px;
}

.formTable td
{
	border-top: 0px none;
	border-right: 0px none;
	border-left: 0px none;
	border-bottom: 1px solid #d3d3d3;
  padding: 3px 10px 6px 3px;
	vertical-align: top;
}

  #offer
    {
      height: expression(this.scrollHeight>559?"560px":"auto"); /*Support for max height in IE6*/
      width: 350px;
      float: left;
      border: 2px solid silver;
      margin-left: 25px;
      max-height: 580px;
      overflow: auto;
      text-align: center;
    }
    #coupon-header
    {
      height: 50px;
      width: 300px;
      padding-bottom: 5px;
      background: #fff url(../images/pages/secure/national-offer-coupons/coupon-header-small.png) no-repeat;
      margin: 0 auto 0 auto;
    }
