/*CSS Reset*/
body, div, dl, dt, dd, li, pre, form, fieldset, input, textarea, p, blockquote, th, td, button {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
body {background: url('images/bg-noise_pattern_with_crosslines.png') repeat scroll top center #0c99a3; font-family: arial, helvetica, tahoma, sans-serif; font-size:12px; color: #2b2a28;} /*  custom */
p {font-size: 13px;}
h1, h2, h3, h4, h5, h6 {margin: 0px 0px 0px 0px; padding: 0px 0px 5px 0px; font-size: 100%; font-weight: bold; width: 100%; float: left; color: #0c99a3;}
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }
strong {font-weight: bold;}
ol, ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none outside none;}
table { border-collapse: collapse; border-spacing: 0; } 
caption, th { text-align: left; font-weight: normal; font-style: normal; }
acronym, abbr, fieldset, img { border: 0;}
:focus { outline: 0; }


/* GENERAL STYLES */
* {font-family: arial, helvetica, tahoma, sans-serif;}
body {background: url('images/bg-noise-pattern-with-crosslines.jpg') repeat scroll top center #fff; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} 
#wrap {background: url('images/bg-splash.jpg') no-repeat scroll top center transparent; width: 100%; float: left; } /* custom */
.center {width: 980px; margin: auto;}
#container {width: 960px; float: left; position: relative; z-index: 1; margin: 0px 10px 0px 10px; padding: 0px 0px 0px 0px;} /* usually 960px */
.page {width: 960px; float: left; background-color: #fff; border: 1px solid #ccc; margin: 10px 0px 0px 0px; padding: 0px 0px 10px 10px;
}
.inner {width: 100%; float: left; clear: both; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; position: relative;}
p, li {margin: 0px 0px 10px 0px; width: 100%; float: left;} /* custom */
h2, h3, h4 {background: url('images/border-bottom-grey.jpg') repeat-x scroll 0 bottom transparent; text-transform: capitalise; border-bottom: 1px solid #ccc;}
h1 {font-size: 10px; font-weight: bold; margin: 0px 0px 30px 0px;} /* custom */
h2 {font-size: 22px; margin: 0px 0px 20px 0px;} /* custom */
h3 {font-size: 20px; margin: 0px 0px 15px 0px; }  /* custom */
h4 {font-size: 16px;margin-bottom: 5px; padding-bottom: 0px; background: none; border: none;}  /* custom */
h5 {font-size: 12px; margin-bottom: 5px;}  /* custom */
a  {font-weight: bold; text-decoration: none; color: #0c99a3;}  /* custom */
a:hover, h5 a:hover {color: #2b2a28; text-decoration: underline;}  /* custom */
h5 a {font-weight: bold; text-decoration: underline;}
h5 a:hover {color: #2b2a28;}
span {font-weight: bold;}


/* HEADER */
.header {background: url('images/bg-header.jpg') no-repeat scroll top center #fff; width: 100%; height: 86px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float: left; letter-spacing: 1.0px; color: #2b2a28; border-bottom: 1px solid #2b2a28;}
.header_inner {width: 960px; height: 90px; margin: auto; padding: 5px 5px 5px 5px; }
.header_left {width: 570px; height: 80px;  float: left; margin: 0px 10px 0px 0px;}
.header_left a {width: 570px; height: 70px;  float: left; margin-top: -40px;}
.header_left h1.hide-text {text-indent: -9999px; white-space: nowrap; overflow: hidden;}
.header_right {width: 350px; float: right; margin-top: 27px; text-align: right;}
.header_right h5, .header_right h5 a {color: #2b2a28; margin: 0px 0px 5px 0px; padding: 0px 0px 0px 0px; text-align: right; font-style: italic; letter-spacing: 1.5px; text-decoration: none;}
 .header_right h5 a:hover {text-decoration: underline;}


/* NAVIGATION*/
#navigation {width: 420px; height: 25px; float: left; margin: 8px 0px 5px 560px; text-align: center;}
#navigation ul {width: 100%; height: 25px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; list-style: none;}
#navigation ul li {width: auto; height: 23px; float: left;  display: inline; margin: 0px 0px 0px 30px;}
#navigation ul li a {width: auto; height: 15px; float:left;  padding: 5px 2px 5px 0px; color: #fff; font-size: 15px; font-style: italic; text-decoration: none; cursor: pointer; text-align: center; }
#navigation ul li a:hover {text-decoration: none; color: #fff; border-bottom: 1px solid #fff;}
#navigation ul li a.selected {border-bottom: 1px solid #fff;}


/* SLIDESHOW */
#slideshowbox, #bannerbox  {width: 960px; height: 370px; float: left; margin: 0px 10px 0px 0px}

#slider, .bannerimage { position:relative; margin: 0px 15px 0px 15px; border: 1px solid #ccc;
    width:930px; /* Change this to your images width */
    height:350px; /* Change this to your images height */
    background: #fff url(images/slideshow/loading.gif) no-repeat 50% 50%;}
#slider img  {width: 930px; height: 350px; position: absolute; display: none; } /* display none stops images jumping on page load*/
#slider a {color: #0c99a3; border:0; display:block;}
#slider .nivo-caption {display: none;}
.nivo-caption p {color: #fff; font-weight: bold; text-align: left;} 
.nivo-directionNav a {background: url('') no-repeat scroll center bottom transparent; border: none; display: block; height: 30px; text-indent: -9999px; width: 30px; margin: -190px 0px 0px 0px; opacity: 0.8;}
.nivo-directionNav a:hover {background: url('') no-repeat scroll center bottom transparent;  opacity: 1.0;}
a.nivo-prevNav, a:hover.nivo-prevNav {left: -15px; background-position: 0px 0px;}
a.nivo-nextNav, a:hover.nivo-nextNav {right:-15px; background-position: -30px 0px;}
.shadow-slideshow {width: 100%; height: 70px; float: left;}


/* MAIN CONTENT */
.intro {font-size: 14px; font-weight: bold; color: #2b2a28; }
#col_left, #col_right, #col_whole {width: 640px; float: left; margin: 7px 5px 0px 0px;  padding: 0px 0px 0px 0px;}
#col_right {width: 280px; margin: 7px 0px 0px 20px; border: none;}
#col_whole {width: 940px; margin-right: 0px;  border: none;}
.two_thirds {width: 95%; float: left; margin: 0px 0px 5px 0px; padding: 0px 0px 7px 0px;}
.half {width: 460px; float: left; margin: 0px 0px 25px 10px;}
.fullwidth {width: 100%; float: left; margin: 0px 0px 15px 0px;}
.call-to-action {width:95%; float: left; background-color: #0c99a3; margin: 10px 0px 10px 12px; padding: 5px 5px 5px 5px; border-radius: 6px 6px 6px 6px;
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;}
.call-to-action h4 {color: #fff; text-align: center; font-size: 16px; margin: 0px 0px 0px 0px; border: none; background: none;}
.call-to-action h4 span {font-style: italic; font-size: 18px; }
.call-to-action a {color: #0c99a3; text-decoration: underline;}
.call-to-action a:hover {color: #2b2a28; text-decoration: underline;}
.button {height: 30px;  margin: 10px 0px 15px 0px;}
.button a {width: 125px; height: 38px; float: right; background: url('images/button-place-an-order.jpg') no-repeat top left #fff;}
.border {width: 100%; float: left; border: 1px solid #ccc; padding: 5px 5px 5px 5px; margin: 5px 0px 5px 0px; border-radius: 3px 3px 3px 3px;}
a.backtotop {width: 100%; float: left; margin: 15px 0px 10px 0px; padding: 0px 0px 0px 0px; text-align: center; text-decoration: underline;}
.feature {width: 100%; float: left; margin: 5px 0px 0px 0px; padding: 10px 0px 10px 0px;}
.featurebox {width: 260px; height: 230px; float: left; overflow: hidden;  background-color: #fff; margin: 0px 20px 15px 22px; }
.featurebox a {width: 240px; height: 180px; float: left; background-color: #fff;  border: 1px solid #ccc; margin: 10px 10px 10px 10px; }
.featurebox a:hover {border: 1px dashed #2b2a28;
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;}
.featurebox img {width: 240px; height: 180px; }
.featurebox h4 {background: url('images/border-bottom-grey.jpg') repeat-x scroll 0 bottom transparent; border-bottom: 1px solid #ccc; text-align: center; padding-bottom: 5px; margin-bottom: 5px; }


/* RIGHT COLUMN */
/* #col_right {color: #2901ce;} */
#col_right h4 {background: url('images/border-bottom-grey.jpg') repeat-x scroll 0 bottom transparent; border-bottom: 1px solid #ccc; text-align: left; margin: 5px 0px 5px 0px; padding: 0px 0px 5px 0px;}
.one_third {width: 100%; float: left; margin: 0px 0px 25px 0px;}
.one_third h3 {margin: 0px 0px 15px 0px;  text-align: center;} 
.col_right_images {width: 100%; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#col_right a.orderonline {width: 280px; height: 74px; float: left;}
#col_right a:hover {opacity: 0.9;}
#col_right a img {width: 280px; float: left;}

/* GALLERY */
.gallery {width: 100%; float: left; margin: -10px 0px 0px 0px;}
.gallery ul {width: 100%; float: left; margin: 10px 10px 15px 0px; padding: 0px 0px 0px 0px;}
.gallery ul li {width: 120px; height: 200px; float: left; margin: 0px 15px 25px 17px; padding: 0px 0px 0px 0px; background-colour: #fff;  overflow: hidden; list-style: none; background-image: none; text-align: center;}
#col_right .gallery ul li {margin: 10px 0px 10px 17px; height: 210px;}
.gallery ul li a {width: 100px; height: 150px; float: left; margin: 0px 0px 5px 0px;  padding: 5px 5px 5px 5px;  background-color: #fff; border: 1px solid #ccc;}
.gallery ul li a:hover {background-color: #fff; border: 1px solid #2b2a28;
-moz-box-shadow: 15px 15px 15px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;}
.gallery ul li a img, #col_right .gallery ul li a img {width: 100px; height: 150px; float: left;}
.gallery ul li a:hover img {width: 100px; height: 150px; float: left; opacity: 0.9; }



/* TESTIMONIALS */
.testimonial {background: url('images/quote-grey.png') no-repeat 175px 5px transparent; width: 95%; float: left; overflow: hidden; padding: 15px 5px 5px 5px; margin: 0px 10px 20px 10px; border-color: #cccccc #999999 #999999 #cccccc; border-style: solid; border-width: 2px; }
blockquote {width: 75%; float: left; margin: 5px 10px 5px 0px;}
.testimonial img {width: 150px;  height: 100px; float: left; margin: 10px 25px 15px 5px; border: 1px solid #ccc;}
.testimonial h4 {border: none; margin: 10px 0px 5px 0px; padding: 0px 0px 0px 0px;}

/* CONTACT PAGE */
form.contact  {padding: 10px 10px 10px 10px;}
form.contact div {width: 100%; float: left; margin: 0px 0px 7px 0px;}
form.contact label, form.contact label.options {width: 150px; float: left; margin: 5px 0px 0px 0px; font-size: 14px;}
form.contact label.options {height: 95px;}
input, textarea {padding: 4px 4px 4px 4px; margin: 5px 10px 5px 10px; outline: none;}
input[type=text], textarea {width: 250px; background-color: #fff; border: 1px solid #ccc;  font-size: 12px;}
textarea {width: 350px;}
input[type=text]:focus, textarea:focus {background-color: #0c99a3; color: #fff; font-size: 12px; font-weight: bold; border: 1px dashed #fff;}
input[type=submit]  {width: 100px; margin: 10px 0px 10px 160px; background-color: #0c99a3; border: 1px solid #ccc; color: #fff;}
input[type=submit]:hover {background-color: #0c99a3; cursor: pointer;}
input[type=submit]:active {background-color: #2b2a28;} 
input[type=text], textarea, input[type=text]:focus, textarea:focus, input[type=submit] {border-radius: 3px 3px 3px 3px;}
.contactinfo {width: 95%; float: left; padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; text-align: left;}
.one_third h3 {text-align: left;}
#col_right .contactinfo h4 {margin: 0px 0px 0px 0px; background: none; border: none;} 
.contactinfo p {margin: 0px 0px 0px 0px;}
img.thankyou {margin: 15px 0px 20px 0px; border: 1px solid #ccc;}


/* FOOTER*/
#footer {background: url('images/bg-footer.jpg') no-repeat scroll top center #0c99a3; width: 100%; height: 160px; float: left; margin: 10px 0px 25px 0px; padding: 0px 0px 0px 0px; position: relative; z-index: -100; border-top: 2px solid fff; border-bottom: 1px solid #fff;
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;}
#wrap-footer {width: 100%; float: left; margin: auto; padding: 0px 0px 0px 0px;}
#footer_inner {width: 960px; margin: 0px auto 0px; padding: 10px 10px 10px 10px; color: #fff; }
.footer-left {width: 490px; float: left; margin: 55px 0px 5px 15px; font-weight: bold; font-size: 12px;}
.footer-right {width: 240px; float: right; margin: 55px 0px 5px 10px;  font-size: 12px; text-align: left;}
#footer_quicklinks {width: 100%; margin: 0px -20px 5px 0px; float: right;}
#footer a {color: #fff;}
.footer-right ul li {list-style: none; background: none; margin: 0px 0px 4px 0px; padding: 0px 0px 0px 0px; line-height: 15px; text-align:right;}
#footer ul li a {cursor: pointer; width: 100%; clear: both; color: #fff;}
#footer_quicklinks ul.left, #footer_quicklinks ul.right {width: 100px; float: left; margin: 0px 0px 0px 10px; }
#footer a:hover {text-decoration: underline;}
#footer p {font-size: 12px;  color: #fff; margin: 0px 0px 4px 0px;}
#footer p small {margin: 0px 0px 2px 0px; font-size: 11px; font-weight: normal;}
.smalltext {width: 100%; float: left; margin: 5px 0px 0px 0px; }
#footer p.copyright {width: 360px; float: left; margin: 0px 0px 0px 15px; font-size: 10px;}
#footer p.websiteby {width: 360px; float: right; text-align: right; font-size: 10px;}

/* COOKIE LAW IMPLIED CONSENT WIDGET */
#cccwr .ccc-outer {border: 1px solid #fff;}
#cccwr .ccc-inner h2 {width: 147px; background-color: #0c99a3; color: #fff; font-size: 12px; font-family:  Arial, Helvetica, sans-serif;}
#cccwr .ccc-inner p {color: #000;}
#cccwr .ccc-expand {background-color: #0c99a3;}
#cccwr .ccc-inner a {color: #000;}
#cccwr #ccc-cookies-switch span {color: #fff;}
#cccwr #ccc-icon button {background: url('images/button-cookie-law-ravenscar-ltd.png') no-repeat fixed bottom left transparent;}
#cccwr.ccc-left .ccc-go #ccc-icon.ccc-triangle button {background-position: left bottom !important;}