body {background-color:#FFF;}
form {margin:0;}
a {outline:none;}
a img {border:none}
.clear {position:relative; clear:both; background: #f00; }
.clearBottom {position:relative; clear:both; background: #f00;}
/* Home Page Containers */
#container {width:900px; margin: 10px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;border:1px solid #000; background-color:#FFF;}
.errorText {color: #D31820}

#container #headerContainer{position:relative; width:100%; height:230px;}
#container #headerContainer #flash{position:relative; float:left; width:450px; height:230px; }
#container #headerContainer #logo{position:relative; float:right; width:450px; height:230px; background-image:url(../images/drayton_header.jpg);}

#container #innerContainer {padding:0}
#container #innerContainer #inner {position:relative; background:url(../images/right_bg.gif) repeat-y center; border:7px solid #fff }
#container .homeInnerContainer {background:url(../images/home_main.jpg) no-repeat 7px top; }
#container .otherPagesInnerContainer {background:url(../images/home_main.jpg) no-repeat 7px bottom; }
#container .claimsPageInnerContainer {background: url(../images/points_main.jpg) no-repeat 7px bottom; }

a.redeemLink {display:block; width: 93px; height:15px; background:url(../images/right/redeem_points.gif) top no-repeat; text-indent: -1000px}
a.myAccounLink {display:block; width: 77px; height:15px; background: url(../images/right/accountLink.gif) top no-repeat; text-indent: -1000px}
a.logoutLink {display:block; width: 46px; height:15px; background: url(../images/right/logout_link.gif) top no-repeat; text-indent: -1000px}
a.redeemLink:hover {background-position:bottom;}
a.myAccounLink:hover {background-position:bottom;}
a.logoutLink:hover {background-position:bottom;}							
									
									
#left {position:relative; float:left; width:664px;}
#left #welcome {position:relative;  width:664px; height:550px; padding: 0; margin-bottom:5px; margin-top:7px;}
#left #welcome #welcometext{position:relative;  width:378px; height:200px; padding: 00; left:250px; text-align:center; font-size:20px; color:#000000; top:18px;}

#left #claimsArea {margin: 0; padding: 50px 0 0 0; text-align: center; }
#left #claimsArea h1 {font-size:18px; font-weight: bold; color:#666; margin: 20px 0 10px 0}
#left #claimsArea h2 {font-size:16px; font-weight: bold; color:#666; margin: 20px 0 10px 0}

#pointsArea {position:absolute;  width:664px; height:140px;  bottom:-129px; left:0; padding: 0; background-image:url(../images/home_bottom.jpg);}

#left #forms {position:relative; float:right; width:425px; padding: 0 15px 15px 15px; background-color:#58585a; color:#fff}

#left #noBG {position:relative; float:right; width:425px; padding: 0 15px 15px 15px; }
#left #noBG a {color:#D31820; text-decoration: none; font-weight:bold; font-size:13px}
#left #noBG a:hover {color:#666; text-decoration: none;}

#left #forms h2 {font-size:18px; font-weight: bold; color:#fff; margin: 20px 0 5px 0}

#left #forms ul {position:relative; margin:0; padding: 0; margin-bottom:10px;}
#left #forms ul li {list-style:none; display:block; position:relative; height: 32px; border:2px solid #fff; padding:0; margin:0 0 4px 0; background:#fff; font-size:12px; color:#FFF; overflow:hidden;}
#left #forms ul li div {position:relative; float:right;  width: 264px; height:24px; background: #CCC; padding: 8px 10px 0 10px; color: #fff}
#left #forms ul li label {position:relative; float:left;  width:115px; height:22px; background:#888; padding: 10px 10px 0 10px; }
#left #forms ul li div.error {padding: 1px 10px 0 10px; font-size:9px; color:#D31820; height:31px}
#left #forms ul li label.error {background:#D31820;}
#left #forms ul li.area {height: 120px;}
#left #forms ul li.area div{height: 112px;}
#left #forms ul li.area label {height: 110px;}
#left #forms a {color:#D31820; text-decoration: none;}
#left #forms a:hover {color:#FFF; text-decoration: none;}


.redeemedTable {width:100%; border-collapse:collapse}
.redeemedTable th{border-bottom: 1px solid #ddd; border-top:none}
.redeemedTable td{border-bottom: 1px solid #ddd; border-top:none; padding: 5px 0 5px 0; font-size:13px}
.redeemedTable .footer{border-bottom: none; padding: 5px 0 5px 0; font-size:13px; font-weight:bold}


#left #forms .textField{width:260px; background: none; border:none; margin:0; color:#000; font-weight:normal}
#left #forms .textArea{width:260px; height:100px; background: none; border:none; margin:0; color:#000; font-weight:normal; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
#left #forms .newsletterCheck {position:relative; border: 2px solid #58585a; background:url(../images/form_text_2.gif) 20px 4px no-repeat}
#left #forms .contactCheck {position:relative; border: 2px solid #58585a; background:url(../images/form_text_3.gif) 20px 4px no-repeat}
#left #forms .termsCheck {position:relative; border: 2px solid #58585a;}
#left #forms .termsCheck a {position:absolute; display:block; width:376px; height: 12px; left: 20px; top:4px; background:url(../images/form_text_4.gif); text-indent: -1000px; background-repeat:no-repeat;}
#left #forms .termsCheck a:hover {background-position: 0px -12px;}
#left #forms .termsCheck_error {position:relative; border: 2px solid #fff; background: #D31820}
#left #forms .termsCheck_error a {position:absolute; display:block; width:376px; height: 12px; left: 20px; top:4px; background:url(../images/form_text_4_red.gif); text-indent: -1000px}
#left #forms .termsCheck_error a:hover {background-position: 0px -12px;}


#left #forms .submitArea {position: relative; margin-top:10px; text-align:right;}
#left #points {position:relative;  width:656px; height:285px; padding: 0px 0px 0px 10px; margin-bottom:5px; margin-top:7px; font-size:21px; color:#000000;}
#left #points h1 {color:#000; font-size:20px; margin: 4px 0 5px 0}
#left #points h1 a{color:#D31820; font-size:arge20px; text-decoration:underline}
#left #points h1 a:hover{color:#000; font-size:20px; text-decoration:underline}

#left #points #pointstable{position:relative; float:left;  width:190px; height:auto; padding: 0px 0px 0px 0px; left:0px; font-size:16px; color:#000000; top:20px;}
#left #points #pointstable .redText {font-size:16px; color:#d31820;}
#left #points #pointstext{position:relative; float:right;  width:431px; height:200px; padding: 0px 0px 0px 0px; right:0px; font-size:16px; color:#000000; top:20px;}
#left #pointsimage {position:relative;  width:666px; height:405px; padding: 0px 0px 0px 0px; background-image:url(../images/points_main.jpg); bottom:0px;}

#codeContainer {position:relative; width:420px; background: #d31820 no-repeat 10px 5px; margin-bottom:5px; padding:10px 0 10px 10px; text-align: left; color:#fff; font-size: 12px; font-weight:bold}
#codeContainer .code{width:39px; height:35px; font-size:30px; border:none; background: #fff; padding:2px 0 0 0; text-align:center;}
#codeContainer #enterButton{position: absolute; right:10px; top: 12px }
#collectedContainer {position:relative; width:401px;  background: url(../images/collected_title.gif) #e3e4e5 no-repeat 15px 10px ; margin-bottom:5px; padding:35px 15px 15px 15px;}
#collectedContainer #productPoints {position:relative; width:50px; float:left; height:25px; background-image:url(../images/product_points.gif); text-align:right; padding: 8px 10px 0px 137px; color:#FFFFFF; font-weight:bold; text-align:center; font-size:13px}
#collectedContainer #totalPoints {position:relative;  width:50px; float:right; height:25px; background-image:url(../images/total_points.gif); text-align:right; padding: 8px 10px 0px 137px; color:#FFFFFF; font-weight:bold; text-align:center;  font-size:13px}


#right {position:relative; float:right; width:200px; padding: 15px 0 0 0; background:#E3E4E5}
#rightOpener {position:relative; float:right; width:1px ; height:675px;}
#rightInner {position:relative; width: 185px; overflow: hidden}
#right h2 {margin: 0 0 10px 0; font-size: 14px; font-style:italic; font-weight:normal; color:#87887A}
#right i {font-style:italic; font-weight:normal; font-size: 12px; color: #0093ad;}
#right #userArea {position:relative; margin-bottom:18px;}
#right #userName {position:relative; padding: 5px 0 5px 0; font-weight: bold;}


.loginDetailsContainer {position:relative; width:176px; height:22px; padding:5px 0 0 5px; background-color:#FFFFFF; border:2px solid #d31820; margin-top:5px; cursor:text; font-size:13px; color: #aaa}
.loginEmail {position:absolute; left: 0; top:0; border:none; background-color:#FFF; width:176px; height:22px; padding:5px 0 0 5px; display:none}
.loginPassword {position:absolute; left: 0; top:0; border:none; background-color:#FFF; width:146px; height:22px; padding:5px 0 0 5px; display:none}

.loginButton {position:absolute; right:0; top:0;}
.textInputContainer {position:relative; width:181px; height:27px; background-color:#FFFFFF; border:2px solid #d31820; margin-top:5px;}

.digistatContainer {position:relative; display:block; width:185px; height:195px; background-color:#E3E4E5; margin-top:10px; background-image:url(../images/right/digistat_image.jpg); text-indent:-1000px; overflow:hidden}
.contactContainer {position:relative; width:185px; height:120px; background-color:#E3E4E5; margin-top:10px; background-image:url(../images/right/contact_image.gif);}
.contactInvensys {position:relative; width:185px; height:12px; background-color:#E3E4E5; margin:0 0 13px 0; background-image:url(../images/right/invensysgroup.gif);}

.usernameField {width:180px; height:20px; border:0px solid #000;}
.passwordField {width:150px; height:20px; border:0px solid #000;}

.rightLinksLogged a {display:block; width: 185px; height:16px; background:url(../images/right/logged.gif) 0 0 no-repeat; text-decoration: none; margin-top:5px; margin-bottom:1px; text-indent:-4000px}
.rightLinksLogged a:hover { background-position: 0 -16px;}

.rightLinksPassword a {display:block; width: 185px; height:16px; background:url(../images/right/password.gif) 0 0 no-repeat; text-decoration: none; margin-top:0px; margin-bottom:10px; text-indent:-4000px}
.rightLinksPassword a:hover { background-position: 0 -16px;}

.rightLinksWeblink a {display:block; width: 185px; height:16px; background:url(../images/right/weblink.gif) 0 0 no-repeat; text-decoration: none; margin:0; text-indent:-4000px}
.rightLinksWeblink a:hover { background-position: 0 -16px;}

.quicklinks {display:block; width: 185px; height:16px; background:url(../images/right/quicklinks.gif) 0 0 no-repeat; text-decoration: none; margin-top:5px; margin-bottom:5px; text-indent:-4000px}

.rightLinks1 a {display:block; width: 185px; height:33px; background:url(../images/right/right_drayton.gif) 0 0 no-repeat; text-decoration: none; margin-top:5px; margin-bottom:5px; text-indent:-4000px}
.rightLinks1 a:hover { background-position: 0 -33px;}

.rightLinks2 a {display:block; width: 185px; height:33px; background:url(../images/right/right_catalogue.gif) 0 0 no-repeat; text-decoration: none; margin-bottom:5px; text-indent:-4000px}
.rightLinks2 a:hover { background-position: 0 -33px;}

.rightLinks3 a {display:block; width: 185px; height:33px; background:url(../images/right/right_stockist.gif) 0 0 no-repeat; text-decoration: none; margin-bottom:5px; text-indent:-4000px}
.rightLinks3 a:hover { background-position: 0 -33px;}

.rightLinks4 a {display:block; width: 185px; height:33px; background:url(../images/right/right_email.gif) 0 0 no-repeat; text-decoration: none; margin-bottom:10px; text-indent:-4000px}
.rightLinks4 a:hover { background-position: 0 -33px;}

.largeButtonHolder {position:relative; width:270px;padding:0 0 0 142px}

a.largeButton  {position:relative; display:block; width: 378px; height:32px; background:url(../images/reg_button.gif) 0 0 no-repeat; text-decoration: none; color:#fff; font-weight:bold; font-size:17px; padding: 8px 0 0 0 ;margin:8px 0 8px 0; }
a.largeButton:hover { background-position: 0 -40px;}


#footer {font-size:12px; color:#FFF; background-color:#9c9ea0; width:100%; height:23px; text-align:center; padding-top:8px;}
#footer a{font-size:12px; color:#FFF; text-decoration:none}
#footer a:hover{font-size:12px; color:#D31820; text-decoration:none}
#footer .pageList  {font-size:10px; color:#666;margin-top:5px}
#footer .pageList a{font-size:10px; color:#666; text-decoration:none}
#footer .pageList a:hover{font-size:10px; color:#000; text-decoration:none}
#footer .links  {font-size:10px; color:#666666;margin-top:5px}
#footer .links a{font-size:10px; color:#0093ad; text-decoration:underline}
#footer .links a:hover{font-size:10px; color:#000; text-decoration:none}
#footer #padding {position:relative; width: 100%; height:20px;}

/* Transparency */