/* body styling */
body {background-color: #d0d6f5/*  #c0cdf2 */; margin: 0; font-family: Arial, Verdana, Helvetica, sans-serif;}
h1 {font-size: 30px; color: #00007d; margin: 15px 0 10px 0;} h2 {font-size: 18px; color: #333; margin: 0 0 10px 0; color: #333;} h3 {font-size: 16px; color: #333; margin: 0 0 10px 0;} h4 {font-size: 12px; color: #333; margin: 0;} h5 {font-size: 15px; color: #333; margin: 0;}
p {font-size: 12px; color: #333; margin: 10px 0 5px 0; line-height: 150%;}
a {color: #d82b22; text-decoration: none; font-weight: bold; text-transform: capitalize;} a:hover {color: #666; text-decoration: underline;}
.skiplinks {height:0; width:0; left:-19000px; overflow:hidden; position:absolute;}

/* main wrapper */
#wrapper {margin: auto; width: 960px;}

/* header */
#header {background-repeat: no-repeat; background-image: url(/images/bankside-header.png); width: 100%; height: 166px; }
#header h2, #header h3 {display: none;}

/* navigation */
ul.nav {float: right; height: 50px; margin: 11px 0 0 0; padding: 0 25px 0 0; list-style-type: none;}
ul.nav li {float: left; display: inline;}
ul.nav li a {display: block; height: 22px; line-height: 18px; font-size: 12px; color: white; text-decoration: none; padding: 3px 6px 0px 6px; /* text-transform: uppercase; */}
ul.nav li a:hover {background-color: #444;}
body#home .bankhome, body#mot .bankmot, body#services .bankservices, body#department-nav .bankdepartments, body#contact .bankcontact, body#servicing .bankservicing, body#car-servicing .bankcar-servicing, body#bosch .bankbosch, body#offers .bankoffers, body#news .banknews, body#testimonials .banktest, body#faq .bankfaq {background-color: #444;/* #00007d; */}

/* side-links */
ul.side-links {} ul.page-links {background-color: #fff; width: 440px; padding: 20px 0 10px 10px; margin:0;}
ul.side-links li {list-style-image: url(/images/bankside-bullet.png); color: #333; font-size: 12px; padding: 0 0 3px 0;}
ul.page-links li {background-position: left top; padding: 0 0 10px 0px; margin: 0 0 0 20px; background-repeat: no-repeat; background-image: url(/images/bankside-tick.png); font-size: 14px; list-style-type: none;}
ul.page-links li {padding: 0 0 15px 30px; margin: 0; color: #333;}
ul.side-links li a, ul.page-links li a {display: block; width: 170px; padding: 0 0 5px 0;}

/* main content */
#content-left {width: 720px;}
#content-right {float: right; width: 240px;}
#content-intro {width: 700px; height: 115px; background-repeat: no-repeat; background-image: url(/images/bankside-main-content.png); margin: 0 0 0 10px; padding: 15px;}
#content-intro p {width: 470px;}
#content-intro h1 {font-size: 24px; margin: 0; color: #00007d;}
#content-main {float: left; width: 700px; background-color: white; margin: 0 0 0 10px; background-repeat: no-repeat; background-image: url(/images/main-content-top-2.png); width: 700px;}
#content-main p {width: 470px;} 
#content-main-base {background-repeat: no-repeat; background-image: url(/images/main-content-base.png); width: 700px; height: 10px;}
.float-left {float: left; width: 460px;}

/* badges */
.badges, .badges-red, .badge-offers { float: left; width: 100%; height: 132px; margin: 15px 0 0 0;}
.badge-news {width: 220px; height: 292px; margin: 0 10px 0 10px; background: url(/images/bankside-news.png) no-repeat;}
.badge-side-links {background-color: white; background-repeat: no-repeat; background-image: url(/images/bankside-side-links-bg.png); width: 220px; margin: 0 0 0 10px;}  
.badge-side-links h3 {font-size: 12px; color: white; padding: 6px 0 0 15px; margin: 0; /* text-transform: uppercase; */}
.badge-side-links-top {position: relative; background-repeat: no-repeat; background-image: url(/images/badge-top-news.png); width: 220px; height: 26px;}
.badge-side-links-base {background-repeat: no-repeat; background-image: url(/images/badge-side-links-base.png); width: 220px; height: 10px;}
.badge-side-links-gdap {margin: 0 0 15px 0;}

/* base links */
#base-links {clear: both; float: left; width: 940px; background-repeat: no-repeat; background-image: url(/images/base-links-top.png); width: 940px; background-color: white; margin: 0 0 0 10px;}
#base-links-top {}
#base-links-base {clear: both; background-repeat: no-repeat; background-image: url(/images/base-links-base.png); width: 940px; height: 10px;}
.container {float: left; width: 564px;} .container h4 {padding: 6px 0 10px 20px; color: white; text-transform: uppercase;}
.container ul {float: left; padding: 0; margin: 8px 0 10px 0;}
.container li {background-position: 0 2px; background-repeat: no-repeat; float: left; background-image: url(/images/bankside-bullet.png); width: 131px; margin: 0 20px 0 20px; padding: 0 0 0 15px; list-style: none;}
.container a {font-size: 11px; display: block; width: 155px; height: 20px;} .container a:hover {text-decoration: underline;}
.departments {width: 386px;} .carservicing {width: 386px;} .main {width: 168px;}

.left { float: left; width: 220px; height: 132px; margin: 0 10px 0 10px;}
.center { float: left; width: 220px; height: 132px; margin: 0 10px 0 10px;}
.right { float: right; width: 220px; height: 132px; margin: 0 10px 0 10px;}

ul.faq-list {margin: 0; padding: 0 0 0 30px;}
ul.faq-list li {list-style-type: none; padding: 0 0 10px 0; line-height: 100%;}
ul.faq-list a {font-size: 12px;}

/* default badge styles */
.badges h3 { font-size: 12px; line-height: 25px; height: 26px; border-bottom: 2px solid white; background: url(/images/badge-top.png) no-repeat; /* opacity: 0.8; */ margin: 0 0 68px 0; padding: 0 0 0 15px; color: white; text-transform: capitalize;}
.badges-red h3 { font-size: 12px; line-height: 25px; height: 26px; border-bottom: 2px solid white; background: url(/images/badge-top-red.png) no-repeat; margin: 0 0 68px 0; padding: 0 0 0 15px; color: white; text-transform: capitalize;}
.badge-offers h3 { font-size: 12px; line-height: 25px; height: 26px; border-bottom: 2px solid white; background: url(/images/badge-top-red.png) no-repeat; margin: 0 0 5px 0; padding: 0 0 0 15px; color: white; text-transform: capitalize;}
.badge-news h3 { font-size: 12px; line-height: 25px; height: 26px; border-bottom: 2px solid white; background: url(/images/badge-top-news.png) no-repeat; margin: 0 0 5px 0; padding: 0 0 0 15px; color: white; text-transform: capitalize;}
.badges a, .badges-red a { display: block; color: red;  font-size: 12px; font-weight: bold; width: 206px; height: 30px; line-height: 13px; background: url(/images/badge-base.png) no-repeat bottom; text-decoration: none; padding: 6px 0 0 15px;}
.badges a:hover, .badges-red a:hover, .badge-news a:hover {color: #333;}

/* service logos */
ul.logos {float: left; width: 660px; margin: 0 0 0 20px; padding: 0;}
ul.logos img {float: left; border: 0; margin: 0 0 5px 0;}
ul.logos li {float: left; width: 132px; height: 120px; display: inline; margin: 0 0 30px 0;}
ul.logos li a {float: left; clear: left; margin: 0 0 10px 0;}

/* individual backgrounds */
.mot { background: url(/images/badge-mot-bg.png) no-repeat;} .servicing { background: url(/images/badge-servicing.png) no-repeat;}.repairs { background: url(/images/badge-repairs.png) no-repeat;}.fleet { background: url(/images/badge-fleet.png) no-repeat;} .tyres-exhausts { background: url(/images/badge-tyres-exhausts.png) no-repeat;} .exhausts { background: url(/images/badge-exhausts.png) no-repeat;}.aircon { background: url(/images/badge-aircon.png) no-repeat;}.diagnostics { background: url(/images/badge-diagnostics.png) no-repeat;}.alignment { background: url(/images/badge-alignment.png) no-repeat;}.bodywork { background: url(/images/badge-bodywork.png) no-repeat;}.recovery { background: url(/images/badge-recovery.png) no-repeat;}.collection { background: url(/images/badge-collection.png) no-repeat;}.bosch { background: url(/images/badge-bosch.png) no-repeat;}.special-offers { background: url(/images/badge-offers.png) no-repeat;}.faq { background: url(/images/badge-faq.png) no-repeat;}.contact { background: url(/images/badge-contact.png) no-repeat;}

/* contact form details */
form {width: 280px; margin: 10px 0 0 0; padding: 0;}
fieldset {} legend {}
label, input, textarea {font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif; float: left; clear: left; padding: 3px;}
input, textarea {border: 1px solid gray;}
label {line-height: 280%;}
textarea {margin: 0 0 15px 0;}
input:focus, textarea:focus {background: #dce8ff;}

/* footer detail */
#footer {background-repeat: no-repeat; background-image: url(/images/bankside-footer.png); float: left; margin: 15px 0 0 10px; width: 940px; height: 104px;}
#footer p {color: white; padding: 5px 0 0 15px; line-height: 150%; font-weight: bold;}

/* misc */
.intro-right img {float: right; padding: 0 25px 0 20px; border: 0;}
.image-right img {float: right; margin: 0; border: 0;} #images {width: 155px; float: right;}
.box-nudge {padding: 5px 15px 0 15px;}
.yellow {color: yellow;}
.credit {padding: 0 0 0 15px; font-size: 10px; color: #ccc; font-weight: bold;} .credit a {font-size: 10px; color: yellow;}
.content-padding {padding: 0 20px 15px 20px;}
.breadcrumbs {display: block; height: 25px; font-size: 12px; color: white; margin: 5px 0 10px 0;} .breadcrumbs a {color: white; font-weight: normal;}
.gap {display: block; height: 30px; clear: both;} .gap-small {display: block; clear: both; height: 15px;} .gap-smaller {display: block; clear: both; height: 10px; width: 100%;}
.a-block {width: 100%; height: 25px; display: block; padding: 5px 0 8px 0;}
.height-mot {height: 719px;}
#message-sent {float: left; width: 320px; padding: 15px 0 15px 0;}
.bullets li {margin: 0 0 7px 0;}
.news-links li {width: 300px;}
.blog-info {font-size: 11px; margin: 0 0 20px 0; color: gray;}
.contact-details-text {font-size: 12px; color: #333; margin: 10px 0 5px 0; line-height: 150%;}
.telephone {font-size: 30px; font-weight: bold; color: #00007d; width: 280px;}
.italic {font-style: italic; background-position: left top; background-image: url(/images/quote-icon.png); background-repeat: no-repeat; padding: 30px 10px 10px 10px; margin: 0;}
#captcha {float: left; width: 280px; padding: 0 0 10px 0; font-size: 12px;}
#captcha img {float:left; padding: 10px 0 10px 0;}
#captcha p {}
.red {color: #d82b22;} .blue-text {color: #00007d;}
.quotes {font-size: 20px; font-weight: bold; font-style: italic; color: #999; font-family: "Times New Roman";}
.news-gap p {padding: 0 0 10px 0;}
.news-categories {padding: 15px 0 0 20px;}
.blue {color: #2e6beb; padding: 0 0 10px 0;}
.link {font-size: 12px; line-height: 140%; display: block; height: 40px; float: left;}
.opening-times {background-repeat: repeat-x; background-image: url(images/opening-times-bg.png); border: 1px solid #777; background-color: #bbcfeb; color: #052a82; padding: 10px 10px 0 10px; width: 165px; height: 100px; text-align: center; margin: 0 0 10px 0;}
.contact-text {font-size: 16px; color: #444; line-height: 130%; width: 280px; padding: 0 0 10px 0;}
.normal {text-transform: none;}

/* news */
.news-info {display: block; font-size: 12px; color: #777; padding: 0;}
.news-block {padding: 0;}
.news-block h2 {padding: 5px 0 5px 0; font-size: 18px;}
.news-block a {} .news-block a: hover {color: #aaa;}
.news-block p {padding: 0 0 10px 0;}
.news-info {display: block; font-size: 12px; color: #777; padding: 0;}

/*MOT Live */
#output {width: 544px; float: left; padding: 0 0 30px 0;}