﻿html {overflow-y: scroll;}

body,html {/* commented backslash hack - hides from Mac IE5 \*/height: 100%;/* end hack */}

body {margin:0px; padding:0px; background: #F6F6F2 url(images/footer_slicegrad.gif) center top repeat-y; font: 80% Arial, Verdana, Helvetica, sans-serif; color:#000}

#shell {text-align: center;z-index: 2;position: absolute;top: 0;left: 0}

.bggeneric {width: 100%;margin: 0px;padding: 0px;height: auto}
#bg2hrslice {background: #fff url(images/background_slice.gif) center top repeat-x}
#bg3vrtslice {background: url(images/content_slice.gif) center top repeat-y}
#bg4sidebits {background: url(images/content_slicegrad.gif) center top no-repeat}
#bg5bluetop {background: url(images/bluetop_slice.gif) center top repeat-x}

#pageimage {background: url(images/topimage_home.jpg) left top no-repeat}
/* for understanding browsers */#pageimage {min-height: 173px; min-width: 100%}
/* for Internet Explorer *//*\*/* html #pageimage {height: 173px; width: 100%}/**/
#imgcontrol_1 {background: url(images/background_home.gif) center top repeat-x}

#imgcontrol_2 {background: url(images/background_2.gif) center top repeat-x}
#imgcontrol_2 #pageimage {background: url(images/topimage_2.jpg)}

#holder {background: url(images/left_background.gif) left top repeat-y;width: 768px;text-align: left;margin: 0 auto;height: auto}
/* for understanding browsers */#holder {min-height: 600px}
/* for Internet Explorer *//*\*/* html #holder {height: 600px}/**/
#toplogo {background: url(images/contentright_topgrad.gif) right top repeat-y;margin: 0px;padding: 0px; height: 65px}
/*------- leftnav styles -------*/
#contentleft {width: 190px;float:left;margin: 0px;padding: 0px}
ul#leftnav {font-size:85%;width: 190px;list-style: none;margin: 0px;padding: 0px}
ul#leftnav li {display: block; background: url('images/leftnav_bottomborder.gif') left bottom no-repeat}
ul#leftnav li a {text-align: right;display: block;padding: 8px 15% 8px 0%;width: 85%;font-weight: bold;color: #4E4E4E;background: url('images/leftnav_pointer.gif') no-repeat right}
ul#leftnav li a:hover {background: url('images/leftnav_pointer_alt.gif') no-repeat right}

ul#leftnav li ul {list-style: none;margin: 0px;padding: 3px 0px 12px 0px}
ul#leftnav li ul li {display: block; padding: 0px;background: none}
ul#leftnav li ul li a {width: 165px;text-align: right;padding: 2px 12px 2px 0px;display: block;font-weight: normal;color: #027BC4;background: url('images/sub_arra.gif') no-repeat right}
ul#leftnav li ul li a:hover {background: url('images/sub_arra_alt.gif') no-repeat right;color: #FEA202}

/*------- generic styles -------*/
.clearboth {clear:both;height:0px}
img {border:0px}
h1, h2, h3 {font-weight: normal;margin: 0px}
h1 {color: #595959;font-size: 200%}
p {color: #50514D}
.right {float: right}
.left {float: left}
a {text-decoration:none; color: #027BC4}
a:hover {text-decoration:none; color: #FEA202}
.alignr {text-align: right}
.buttons {margin: 4px 0px 5px 0px;padding: 4px 0px 5px 0px; text-align: center;background-image: url('images/btn_sm.gif'); background-repeat: no-repeat; display: block;height: 23px; width: 62px; font-family: Trebuchet MS, Arial, verdana, Helvetica, sans-serif;font-size: 10px}
.buttonM {width: 35px;background-image: url('images/btn_sm.gif')}
.buttonL {width: 75px;background-image: url('images/btn_sm.gif')}
.sdw, .sdw110, .sdw160, .sdw200, .sdw240, .sdw220 {width: 90%; background: url('images/input_bck.gif') left top no-repeat;margin: 0px 0px 5px 0px; border: 1px solid #6589B1; padding: 2px 2px 2px 4px; color:#595959}
textarea {font-size: 110%;font-family: Arial, Verdana, Helvetica,}
select {font-family: Arial, Verdana, Helvetica,;padding: 0px;font-size: 100%;width: 81px}
.sdw110 {width:110px}
.sdw160 {width:160px}
.sdw200 {width:200px}
.sdw220 {width:220px}
.sdw240 {width:240px}
label {color: #595959}
.textbox {width: 80px;font-size: 80%}
/*------- page left styles -------*/
#content {border-left: 3px solid #fff;border-top: 2px solid #fff;float:left;margin: 0px;padding: 0px}

#pagecnt {background: url(images/product_background.gif) left top repeat-x; width: 572px}
/* for understanding browsers */#pagecnt {min-height: 287px}
/* for Internet Explorer *//*\*/* html #pagecnt {height: 287px}/**/
#pagecntinr {padding: 18px 15px 18px 18px}
#pageleft {width: 328px;margin: 0px}
#pagecntinr  h2 {color: #595959;font-size: 140%;padding: 0px}
#pagecntinr  h3 {color: #007CC4;font-weight: bold;font-size: 90%;padding: 0px}

#ourproducts {margin: 0px;padding: 0px 0px 0px 10px;width: 200px;color: #007CC4;margin: 0px}
.buysunsense {margin: 0px;padding: 12px 0px 4px 0px;}
.buysunsense a {color: #007CC4;font-size: 110%;margin: 0px;padding: 0px 10px 0px 0px;background:url('images/product_arrow.gif') center right no-repeat}
.buysunsense a:hover {color: #000;background:url('images/reg_arrow_alt.gif') no-repeat right}
#ourproducts h3 {color: #007CC4;font-size: 110%;padding: 8px 0px 0px 0px}
#ourproducts .left {margin: 0px;padding: 0px;width: 170px}
#ourproducts .right {margin: 0px;padding: 0px;width: 160px}
#ourproducts .serachwrap {margin: 0px;padding: 2px 0px 0px 0px}
#ourproducts .serachboxleft {float: left;width: 110px;padding-top: 4px}
#ourproducts .serachboxright {float: left;width: 49px;padding-top: 5px}
.searchbox {width: 100px;font-size: 80%}

#details {background: url('images/leftnav_bottomborder.gif') top left no-repeat}
#detailsinr {padding: 0px 0px 15px 0px;background: url('images/leftnav_bottomborder.gif') bottom left no-repeat}
#details h3 {padding-top: 15px}
#details p {margin: 0px}

/*------ page right styles --------*/
#productright {width: 193px}
#productright #imageholder {background-color: #fff; border: 1px solid #CACBC5; text-align: center}

#pageright {width: 193px;margin: 0px;background: url('images/member_borderleft.gif') top left no-repeat}
/* for understanding browsers */#pageright {min-height: 422px}
/* for Internet Explorer *//*\*/* html #pageright {height: 422px}/**/
#pagerightinr {padding: 0px 0px 0px 10px}
#pageright h2 {color: #008F3F;font-size: 160%}
#pageright .image {margin: 0px;padding: 10px 0px 0px 0px}


#buyOnline {float:left; border:1px solid #d1d1d1; width:160px; padding:10px; background:url('images/pnlSlc.gif') top  left repeat-x #e7e7e7;}
#buyOnline h2 {color:#039495; text-transform:uppercase; font-size:130%; font-weight:bold}
#buyOnline p {color:#8380ca; margin-top:-3px; float:left}
#buyOnline img {float:left; margin:-3px 0px 2px 0px}

#buyOnline a {background:url('images/buyBtn.png') top left repeat-x; border:1px solid #eee; float:left; margin-top:4px; padding:6px 10px 5px 10px; color:#fff; font-size:120%; font-weight:bold}
#buyOnline a span {background:url('images/btnArrow.png') no-repeat; width:15px; height:15px; float:right; margin-left:60px}

#register {font-size: 85%;padding:10px; float:left; margin: 0px; border:1px solid #d1d1d1; margin-top:10px; background:url('images/pnlSlc.gif')  left repeat-x}
#register h2 {text-transform:uppercase; font-weight:bold}
#register p {color: #000;margin: 0px;padding: 5px 0px}

a.regBtn {background:url('images/registerBtn.png') top left repeat-x; border:1px solid #eee; float:left; margin-top:10px; padding:6px 10px 5px 10px; color:#fff; font-size:130%; font-weight:bold}
a.regBtn span {background:url('images/btnArrow.png') no-repeat; width:15px; height:15px; float:right; margin-left:27px}

.form {padding-top: 25px; font-size:85%; width:500px}
.form .row {clear: both; padding: 3px 0px}
.form .forml {float:left; width:90px; padding: 0px 0px; }
.form .formr {float:left; width:400px}
.form input {font-size:90%}


#findStockist {background:url('images/findStockist.gif') top left no-repeat; width:150px; height:125px; border:1px solid #d1d1d1; float:left; padding:14px 15px}
#findStockist a {background:url('images/searchBtn.png') top left repeat-x; border:1px solid #eee; float:left; margin-top:90px; padding:6px 10px 5px 10px; color:#fff; font-size:120%; font-weight:bold}
#findStockist a span {background:url('images/btnArrow.png') no-repeat; width:15px; height:15px; float:right; margin-left:27px}


/*------ footer styles --------*/
#footer {width: 768px;margin: 0 auto;height: auto}
#footerinr {margin: 12px 12px 12px 208px;text-align: left}
#footerinr #btmnav {padding: 0px 0px 10px 0px}
#footerinr ul {font-size: 80%;margin: 0px;padding: 0px;display: inline}
#footerinr li {border-right: 1px solid #000;margin: 0px;padding: 0px;display: inline;list-style-type: none}
#footerinr a {color:#000; padding: 0px 4px}
#footerinr a:hover {color:#007CC4}
#copyright {padding-left: 4px;font-size: 85%; font-weight: bold}
#copyright img {float:left; margin-top: 5px}
#copyright span {float:left; padding-top: 18px}

.oegen {font-size: 85%;padding: 4px 0px; text-align: right}
#xhtml {float: left;padding: 0px 4px 0px 0px}
#credits {float: left;line-height: 2.2em;padding: 0px}
#credits a {padding: 0px 0px 12px 20px;background: url('images/oegen.gif') no-repeat}

.store-location { text-transform:capitalize; font-size:90%}
.store-separator {height:1px; border:none; border-bottom:1px dotted #c9c9c9; color: #007CC4}


#register h3 {color:#008F3F; padding:0px; margin:0px}
.products {float:left; margin:0px}
.right_border_btm {padding:0px 0px 13px 0px; margin:13px 0px 0px 0px}

#store_locator {float:left; font-size:80%; color:#449fd4; width:170px; padding:8px 0px 0px 12px}
#store_locator ul {list-style-image:none}

#store_locator ul li {background-image: url('');list-style-image:none; display:block; padding:5px 0px 5px 0px}
.border_btm {border-bottom:1px dotted #c1c1c1}

#storeResults {display:block; margin-top:30px}
#storeResults table tr td {vertical-align:top; padding-right:10px}
.enterPostcode {display:block; margin-bottom:10px}

table.links {margin-top:30px; float:left}
table.links tr td {padding-bottom:10px; margin-right:-3px; float:left}
.error {font-size:90%}

.bold {font-weight:bold}