/**************************************
master.css - primary site stylesheet
**************************************/
BODY {
	color: #000;
	background: #fff;
	font-family: arial, verdana, sans-serif;
	font-size: 100%; /* 16px */
	line-height: 1.125em; /* 16px × 1.125 = 18px */
	padding-top: 0;
	margin-top: 0; 
}
P, H1, H2, H3, H4, H5, H6 {
	padding: 0;
	margin: 1.25em 0;
}
OL, UL {
	padding: 0;
	margin: 1.5em 0 1.5em 2em;
}
LI, FORM {
	padding: 0;
	margin: 0;
}
INPUT, SELECT {
	font-family: arial, verdana, sans-serif;
	font-size: 1em; /* 12px */
	font-weight: bold;
	border: 1px solid #ccc;
}
IMG {
	border: 0;
}
A {
	color: #000;
}
#container {
	font-size: 0.75em; /* 16px x 0.75 = 12px */
	min-width: 760px;
	max-width: 960px;
	margin: 0 auto;
}
.redhighlight {
  color: #ae1e5c;
  font-weight: bold;
}
/**************************************
wysiwyg text classes
**************************************/
.textcolor-red { color: red; }
.textcolor-green { color: green; }
.textcolor-burgundy { color: #AE1E5C; }
/**************************************
alignment
**************************************/
.left {
	float: left;
	margin: 0 1em 1em 0;
}
.right {
	float: right;
	margin: 0 0 1em 1em;
}
/**************************************
corners + squares
**************************************/
.tl, .tr, .bl, .br {
	font-size: 1px;
	background-image: url(../images/corners-rounded-bg.png);
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
	line-height: 1px;
	display: block;
	position: absolute;
}
.tl {
	background-position: 0 0;
	top: 0;
	left: 0;
}
.tr {
	background-position: 100% 0;
	top: 0;
	right: 0;
}
.bl {
	background-position: 0 100%;
	bottom: 0;	
	left: 0;
}
.br {
	background-position: 100% 100%;
	bottom: 0;	
	right: 0;
}
.squares {
	font-size: 1px;
	background: url(../images/squares-bg.png) repeat-x 0 0;
	height: 10px;
	line-height: 1px;
}
/**************************************
Image buttons/image links
**************************************/
INPUT.imgbut {
	/* all graphical buttons to be held in a single image, using css sprites technique */
	background: url(../images/buttons.png) no-repeat;
	border: 0;
	width: 120px;
	height: 20px;
	text-indent: -9999px; /* push button text out of visible screen area */
	overflow: hidden; /* hide overflow caused by indented button text */
	display: block;
	cursor: pointer;
}
A.imgbut {
	/* all graphical buttons to be held in a single image, using css sprites technique */
	background: url(../images/buttons.png) no-repeat;
	width: 120px;
	height: 20px;
	text-indent: -9999px; /* push button text out of visible screen area */
	overflow: hidden; /* hide overflow caused by indented button text */
	display: block;
}
INPUT.submit { float: right; margin: 1em 0 0 .5em; }
INPUT.submit:hover { background-position: -120px 0; }
INPUT.continue { background-position: 0 -20px; float: right; margin: 1em 0 0 .5em; }
INPUT.continue:hover { background-position: -120px -20px; }
A.lastmonth { background-position: 0 -40px; }
A.lastmonth:hover { background-position: -120px -40px; }
A.nextmonth { background-position: 0 -60px; }
A.nextmonth:hover { background-position: -120px -60px; }
A.back { background-position: 0 -80px; }
A.back:hover { background-position: -120px -80px; }
A.next { background-position: 0 -100px; }
A.next:hover { background-position: -120px -100px; }
INPUT.reset { background-position: 0 -120px; }
INPUT.reset:hover { background-position: -120px -120px; }
INPUT.addtobasket { background-position: 0 -140px; }
INPUT.addtobasket:hover { background-position: -120px -140px; }
INPUT.buycontents { background-position: 0 -160px; float: left; margin: 1em .5em 0 0; }
INPUT.buycontents:hover { background-position: -120px -160px; }
INPUT.emptybasket { background-position: 0 -180px; float: left; margin: 1em .5em 0 0; }
INPUT.emptybasket:hover { background-position: -120px -180px; }
A.backtoshop { background-position: 0 -200px; float: left; margin: 1em .5em 0 0; }
A.backtoshop:hover { background-position: -120px -200px; }
INPUT.updatebasket { background-position: 0 -220px; float: left; margin: 1em .5em 0 0; }
INPUT.updatebasket:hover { background-position: -120px -220px; }
INPUT.batteryclub { background-position: 0 -240px; float: left; margin: 1em .5em 0 0; }
INPUT.batteryclub:hover { background-position: -120px -240px; }
/**************************************
pageheader
**************************************/
#pageheader {
	background: #0f3963;
	margin-bottom: 1.5em;
	position: relative;
}
#pageheader-inner {
	border-bottom: 2px solid #00b6dd;
	height: 75px;
	margin-bottom: 27px;
	overflow: hidden;
}
#logo {
	position: absolute;
	top: 0;
	left: 0;
}
#searchform {
	border-left: 1px solid #00b6dd;
	padding: 5px 0 5px 1.5em;
	margin: 2.25em 1.75em 2.25em 0;
	display: inline; /* Fix IE double margin bug */
	float: right;
}
#searchform LABEL {
	display: none;
}
#searchform INPUT {
	font-size: 0.917em; /* 12px x 0.917 = 11px */
	width: 90px;
	padding: 2px 2px 1px;
}
#searchform #searchsubmit {
	background: url(../images/button-arrow.png) no-repeat;
	text-indent: -9999px;
	border: 0;
	width: 19px;
	height: 19px;
	padding: 0;
	margin-left: -3px;
	vertical-align: top;
	overflow: hidden;
}
#suggestions {
	font-size: 0.917em; /* 12px x 0.917 = 11px */
	background-color: transparent;
	width: 1px;
	height: 1px;
	margin: 0;
	position: absolute; /* set to hide */
	z-index: 50;
}
#suggestions.enabled { /* undo the hide */
	background-color: #fff;
	height: auto;
}
#suggestions UL {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	list-style-type: none;
	margin: 0;
}
#suggestions UL LI {
	border-bottom: 1px solid #ccc;
	display: block;
	padding: 0 0.2em;
	margin: 0;
	cursor: pointer;
}
#suggestions UL LI.selected {
	background-color: #cbf0f8;
}
#basket {
	background: url(../images/pageheader-basket.png) no-repeat 1.25em 0;
	border-left: 1px solid #00b6dd;
	width: 65px;
	height: 29px;
	padding: 0 1.25em;
	margin: 2.25em 0;
	display: block;
	float: right;
	text-indent: -9999px;
	overflow: hidden;
}
#basket:hover, #basket:focus {
	background-position: 1.25em -29px;
}
#phoneno {
	margin: 2.25em 0;
	float: right;
	position: relative;
	z-index: 5;
}
#textresizer {
	border-left: 1px solid #00b6dd;
	padding: 0 1.25em;
	margin: 2.25em 0;
	float: right;
	display: none;
}
#textresizer A {
	color: #fff;
	background: url(../images/pageheader-resize.png) no-repeat 0 0;
	width: 22px;
	height: 29px;
	text-decoration: none;
	display: block;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#textresizer A:hover {
	text-decoration: underline;
}
#textresizer A#s { background-position: 0 0; margin-right: 2px; }
#textresizer A#m { background-position: -22px 0; margin-right: 2px; }
#textresizer A#l { background-position: -44px 0; }
#textresizer A#s:hover { background-position: 0 -29px; }
#textresizer A#m:hover { background-position: -22px -29px; }
#textresizer A#l:hover { background-position: -44px -29px; }
#textresizer A#s.on { background-position: 0 -58px; }
#textresizer A#m.on { background-position: -22px -58px; }
#textresizer A#l.on { background-position: -44px -58px; }
/**************************************
menu
**************************************/
#menuwrapper {
  overflow: hidden;
  position: relative;
  clear: both;
}
#menu {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
#menu UL {
  clear: left;
  float: left;
  list-style: none outside none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  text-align: center;
}
#menu UL:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
#menu LI {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:1em 0;
   position:relative;
   right:50%;
}
#menu A {
	color: #fff;
	background: url(../images/border-menu-bg.gif) no-repeat 100% 50%;
	font-weight: bold;
	padding: .75em 18px;
	line-height: 1em;
	text-decoration: none;
	white-space: nowrap;
	display: block;
	position: relative;
}
#menu A:hover, #menu A:focus {
	text-decoration: underline;
}
#menu A.first {
	border-left: 1.75em solid #0f3963;
}
#menu A.last {
	background: transparent;
}
#menu LI.on {
	background-color: #0f3963;
	margin-left: -1px;
	margin-right: 1px;
}
#menu LI.on A {
	background-color: #00b6dd;
	border-color: #0f3963;
	padding: .75em 17px .75em 19px;
}
#menu LI.on A .tl,
#menu LI.on A .tr,
#menu LI.on A .bl,
#menu LI.on A .br {
	background-image: url(../images/corners-rounded-menu-bg.png);
}
/**************************************
banner
**************************************/
#banner {
	background: url(../images/banner-inner.jpg) no-repeat 100% 50%;
	height: 193px;
	margin-bottom: 1.5em;
	position: relative;
}
#banner #quote {
	background: url(../images/quote-inner-bg.png) no-repeat 100% 50%;
	height: 193px;
	padding-right: 43px;
	margin-right: 50%;
}
#banner #quote-inner {
	background: #00b6dd;
	height: 113px;
	padding: 30px 20px 50px 20px;
	font-size: 0.917em; /* 12px x 0.917 = 11px */
}
#banner #quote H1 {
	color: #fff;
	font-size: 1.583em; /* 12px x 1.583 = 19px */
	font-weight: normal;
	line-height: 1.158em; /* 19px x 1.158 = 22px */
}
#banner #quote H1 SPAN {
	font-size: 1.316em; /* 19px x 1.316 = 25px */
	font-weight: bold;
	display: block;
	margin: 0;
}

#banner #quote H2 {
	color: #fff;
	font-size: 1.683em; /* 12px x 1.583 = 19px */
	font-weight: normal;
	line-height: 1.158em; /* 19px x 1.158 = 22px */
}
#banner .squares {
	background-position: 0 -20px;
	position: absolute;
	width: 60%;
	left: 18px;
	bottom: 25px;
}
#banner .note {
	color: white;
	/*position: absolute;
	right: 13px;
	bottom: 10px;*/
  color: #FFF;
	position: absolute;
	bottom: 40px;
	font-size: 1.383em; /* 12px x 1.583 = 19px */
	left: 20px;
}

#banner .note small {
	font-size: 70%;
}

#banner .note SPAN {
  font-size: 1.316em; /* 19px x 1.316 = 25px */
}

/* COLOURS - OVERRRIDE AS LBLUE */
#lblue #banner #quote {
	background-image: url(../images/quote-inner-bg.png);
}
#lblue #banner #quote-inner {
	background: #00b6dd;
}
#lblue #banner .squares {
	background-position: 0 -20px;
}
/* COLOURS - OVERRRIDE AS DBLUE */
#dblue #banner #quote {
	background-image: url(../images/quote-inner2-bg.png);
}
#dblue #banner #quote-inner {
	background: #0f3963;
}
#dblue #banner .squares {
	background-position: 0 0px;
}
/* COLOURS - OVERRRIDE AS PINK */
#pink #banner #quote {
	background-image: url(../images/quote-inner3-bg.png);
}
#pink #banner #quote-inner {
	background: #ae1e5c;
}
#pink #banner .squares {
	background-position: 0 -10px;
}
/* HOMEPAGE */
#homepage #banner {
	background: url(../images/banner-homepage-animated.gif) no-repeat 100% 50%;
	height: 293px;
}
#homepage #banner #quote {
	background: url(../images/quote-home-bg.png) no-repeat 100% 50%;
	height: 293px;
}
#homepage #banner #quote-inner {
	background: #ae1e5c;
	height: 213px;
	padding: 40px 20px;
}
#homepage #banner .squares {
	bottom: 75px;
}
#homepage #banner .squares {
	background-position: 0 -10px;
}
/**************************************
boxes
**************************************/
#boxes {
	width: 100%;
	overflow: hidden;
	margin: 0 0 1.5em 0;
}
#boxes .box {
	background: url(../images/border-box-bg.gif) no-repeat 100% 4em;
	width: 20%;
	min-height: 17em;
	padding: 0 .5%;
	float: left;
}
#boxes .first {
	padding-left: 0;
}
#boxes .box H2 {
	color: #fff;
	background: #00b6dd;
	font-size: 1.167em; /* 12px x 1.167 = 14px */
	text-align: center;
	padding: .75em 17px .75em 19px;
	margin: 0;
	position: relative;
}
#boxes .box DIV {
	padding: 1em .5em;
}
#boxes .box DIV DIV {
	padding: 0;
	margin-bottom: .5em;
	position: relative;
}
#boxes .box A {
	color: #0f3963;
	font-weight: bold;
	text-decoration: none;
}
#boxes .box A:hover {
	text-decoration: underline;
}
#boxes #book {
	background: url(../images/hpage-localcentre-bg.jpg) no-repeat 0.5em 4em;
	width: 36.75%;
	padding: 0;
	float: right;
}
#boxes #book H2 {
	margin-bottom: 8.5em;
}
/**************************************
main
**************************************/
#main {
	overflow: hidden;
}
/**************************************
midcol + content
**************************************/
#midcol {
	width: 58%;
	float: left;
}
#midcol.droprightcol {
	width: 78%;
}
#content {
	padding: 2em;
	overflow: hidden;
}
H1 {
	color: #00b6dd;
	font-size: 1.5em; /* 12px x 1.5 = 18px */
}
#content H1 {
	line-height: 1em;
	font-size: 1.5em; /* 12px x 1.5 = 18px */
}
H2 {
	color: #0f3963;
	font-size: 1.333em; /* 12px x 1.333 = 16px */
}
#content H2 {
	line-height: 1em;
}
H3 {
	color: #ae1e5c;
	font-size: 1.167em; /* 12px x 1.167 = 14px */
}
#content H3 {
	line-height: 1em;
}
DIV.secintrobg {
	margin: -1.5em 0 1em 0;
	overflow: hidden;
	position: relative;
}
DIV.secintrobg IMG {
	float: left;
	margin-right: 1em;
}
DIV.secintrobg P {
	padding: 0 0 1em 0;
	margin: 0;
}
DIV.artintrobg {
	background: #cbf0f8;
	padding: .5em 1em;
	margin: 0 0 1em 0;
	overflow: hidden;
	position: relative;
}
DIV.artintrobg IMG {
	float: left;
	margin-right: 1em;
}
DIV.artintrobg P {
	padding: 0 0 1em 0;
	margin: 0;
}
DIV.photobox {
  padding: 1em;
  background: #cbf0f8;
  position: relative;
}
/**************************************
breadcrumb
**************************************/
#breadcrumb {
	color: #00b6dd;
	font-weight: bold;
}
#breadcrumb A {
	color: #0f3963;
	text-decoration: none;
}
#breadcrumb A:hover {
	text-decoration: underline;
}
/**************************************
leftcol + lhlinks
**************************************/
#leftcol {
	width: 20%;
	float: left;
}
#lhlinks {
	background: #cbf0f8;
	font-weight: bold;
	padding-bottom: 1em;
	position: relative;
}
#lhlinks H2 {
	color: #fff;
	font-size: 1em;
	background: #00b6dd;
	padding: .5em 1em;
	margin: 0;
	position: relative;
}
#lhlinks H2 .bl,
#lhlinks H2 .br {
	background-image: url(../images/corners-rounded-lhlinks-bg.png);
}
/* 1st level */
#lhlinks UL {
	list-style-type: none;
	margin: 1em;
}
#lhlinks UL LI {
	border-bottom: 1px solid #0f3963;
	padding: .25em;
}
#lhlinks A {
	color: #0f3963;
	text-decoration: none;
	display: block;
}
#lhlinks A:hover{
	text-decoration: underline;
}
#lhlinks UL LI.on {
	background: #fff;
	padding: 0;
}
#lhlinks UL LI.on A {
	color: #fff;
	background: #00b6dd;
	padding: .25em .5em;
}
/* 2nd level */
#lhlinks UL UL {
	margin: 0 1.5em;
}
#lhlinks UL UL LI {
	color: #0f3963;
	border: 0;
	padding: 0;
  list-style-type: disc;
}
#lhlinks UL UL LI.on {
	color: #00b6dd;
	list-style-type: disc;
}
#lhlinks UL LI.on UL LI A {
	color: #0f3963;
	background: #fff;
	padding: 0;
}
#lhlinks UL LI.on UL LI.on A {
	color: #00b6dd;
	background: #fff;
	padding: 0;
}
/**************************************
rightcol + lhlinks
**************************************/
#rhlinks {
	width: 20%;
	float: right;
}
#rhlinks A {
	color: #0f3963;
	background: #cbf0f8;
	font-weight: bold;
	text-decoration: none;
	padding: 1em;
	margin-bottom: 1em;
	display: block;
	position: relative;
}
#rhlinks A:hover {
	text-decoration: underline;
}
#rhlinks #booktest {
	background: #cbf0f8 url(../images/rhlinks-booktest-bg.png) no-repeat -10px 50%;
	padding-left: 50px;
}
#rhlinks #localcentre {
	background: #cbf0f8 url(../images/rhlinks-localcentre-bg.jpg) no-repeat 50% 1em;
	padding-top: 120px;
}
#rhlinks #register {
	background: #cbf0f8 url(../images/rhlinks-register-bg.png) no-repeat -10px 50%;
	padding-left: 50px;
}
#rhlinks #hearingcheck {
	background: #cbf0f8 url(../images/rhlinks-hearingcheck-bg.png) no-repeat -10px 50%;
	padding-left: 50px;
}
#rhlinks #testimonials {
	background: #cbf0f8 url(../images/rhlinks-testimonials-bg.jpg) no-repeat 1em 50%;
	padding-left: 80px;
}
/**************************************
footer
**************************************/
#footer {
	color: #fff;
	font-weight: bold;
	background: #0f3963;
	height: 4.25em;
	padding: .75em 1em 0;
	position: relative;
}
#footer A {
	color: #fff;
	padding: .25em;
}
#footer A#arfs {
	font-size: 0.917em; /* 12px x 0.917 = 11px */
	margin-top: -.5em;
	float: right;
}
#footer .squares {
	margin: 10em auto 0;
}
/**************************************
content table
**************************************/
#content .table-wrapper-outer {
	overflow: hidden;
}
#content .table-wrapper-inner .tl,
#content .table-wrapper-inner .tr,
#content .table-wrapper-inner .bl,
#content .table-wrapper-inner .br {
	background-image: url(../images/corners-rounded-table-bg.png);
}
#content .table-wrapper-inner {
	width: 100%;
	display: inline-block;
	position: relative;
}
TABLE.datatable {
	border-style: solid;
	border-color: #0f3963;
	border-width: 1px 0 0 1px;
}
TABLE.datatable TH {
	color: #0f3963;
	border-style: solid;
	border-color: #0f3963;
	border-width: 0 1px 1px 0;
	background-color: #cbf0f8;
	padding: .5em;
	text-align: left;
}
TABLE.datatable TD {
	border-style: solid;
	border-color: #0f3963;
	border-width: 0 1px 1px 0;
	padding: .5em;
	text-align: left;
}
TABLE.datatable CAPTION {
	color: #fff;
	border-style: solid;
	border-color: #0f3963;
	font-weight: bold;
	padding: .5em;
	text-align: left;
	border-width: 1px 1px 0 1px;
	background-color: #0f3963;
}
/**************************************
TABLE, IMAGE AND PARAGRAPH TEXT ALIGNMENT
**************************************/ 
TABLE.left, P.left, IMG.left, DIV.left { /* align table or <p>-wrapped image/image to the left */
	float: left;
	margin: 0 1em 1em 0;
}
TABLE.right, P.right, IMG.right, DIV.right { /* align table or <p>-wrapped image/image to the right */
	float: right;
	margin: 0 0 1em 1em;
}
TABLE.center, DIV.center { /* align table to the centre */
	margin: 0 auto;
}
P.center { /* align <p>-wrapped image to the left */
	text-align: center;
}
P.textcenter, SPAN.textcenter { /* align paragraph text to the centre */
	text-align: center;
	display: block;
}
P.textleft, SPAN.textleft { /* align paragraph text to the left */
	text-align: left;
	display: block;
}
P.textright, SPAN.textright { /* align paragraph text to the right */
	text-align: right;
	display: block;
}
P.textjustify, SPAN.textjustify { /* 'justify' align paragraph text */
	text-align: justify;
	display: block;
}
/**************************************
SHOP FORM
**************************************/
#shop_form INPUT.order { width: 300px; }
/**************************************
CALENDAR OF EVENTS
**************************************/
#calendar-search {
	margin: 2em 0 0;
	overflow: hidden;
}
#calendar-wrapper {
	overflow: hidden;
}
#calendar-buttons {
	margin-bottom: 3em;
	overflow: hidden;
	clear: both;
}
#calendar-buttons A {
	float: left;
	margin-right: 1em;
}
TABLE#calendar TH {
	color: #fff;
	background: #0f3963;
	text-align: center;
}
TABLE#calendar TD {
	background: #cbf0f8;
	text-align: center;
	padding: 0;
}
#calendarkey {
	float: right;
}
#calendarkey TD {
	padding: 0;
}
#calendarkey TD.label {
	padding: 0.5em;
}
#calendar A,
#calendar SPAN,
#calendarkey SPAN {
	border: 1px solid #cbf0f8;
	display: block;
	text-decoration: none;
	padding: 0.5em 1em;
}
#calendar TD.normalday A,
#calendarkey TD.normalday SPAN {
	background-color: #fff;
	border-color: #fff;
}
#calendar TD.pastevent A,
#calendarkey TD.pastevent SPAN {
	color: #fff;
	background-color: #ca8ba8;
	border-color: #ca8ba8;
}
#calendar TD.futureevent A,
#calendarkey TD.futureevent SPAN {
	color: #fff;
	background-color: #00b6dd;
	border-color: #00b6dd;
}
#calendar TD.currentday-event A,
#calendarkey TD.currentday-event SPAN {
	color: #fff;
	background-color: #00b6dd;
	border-color: #f00;
}
#calendar TD.currentday-noevent A,
#calendarkey TD.currentday-noevent SPAN {
	background-color: #fff;
	border-color: #f00;
}
/**************************************
DIV.product
**************************************/
DIV.productprice {
  color: #AE1E5C;
  font-weight: bold;
}
DIV.product {
	text-align: center;
	width: 27.5%; /* allow for interior padding applied as these also have class="artintrobg" */
	float: left;
	margin-right: 1em;
}
DIV.product IMG {
	margin: 0 auto;
	float: none;
	display: block;
}
DIV.product A {
	color: #0f3963;
	font-size: 1.25em; /* 12px x 1.25 = 15px */
	line-height: 1.25em;
	text-decoration: none;
}
DIV.product A:hover {
	text-decoration: underline;
}
A#discountdetslink {
	display: none;
}
TABLE#discountdets {
	border-style: solid;
	border-color: #0f3963;
	border-width: 1px 0 0 1px;
	display: none;
}
TABLE#discountdets TH, 
TABLE#discountdets TD {
	background: #fff;
	border-style: solid;
	border-color: #0f3963;
	border-width: 0 1px 1px 0;
}
TABLE#discountdets TH {
	background-color: #cbf0f8;
}