/* Clarks CSS */

/* 
Note on url paths:
To run locally use: url(../images/design/wrapper.gif)
To run on Websiter use: url(/images/design/wrapper.gif)
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #777A7F;
	font-size: 12px;
	line-height: 16px;
	margin: 9px 0px 0px 0px; border: 0px; padding: 0px;
	background-color: #FFFFFF;
}

/*  The main wrapper div */
#wpr {
	position: relative;
	width: 973px;
	margin: 0px auto;
	border: 0px; padding: 0px;
	background: url(/images/design/wpr-bg.gif) 0 0 repeat-y;
}

/* Header divs */
#hd {
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	left: 0px; top: 0px;
	width: 973px;
	height: 134px;
	background: url(/images/design/web-header-home.jpg) 0 0 repeat-x #FFFFFF;
}

#hd-clarks { /* Clarks logo pop-up text*/
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 29px; left: 34px;
	width: 99px; height: 84px;
}

#hd-lnks { /* Header Links - positioned within #wpr not #hd */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 9px; left: 819px;
	width: 140px; height: 18px;
	background: url(/images/design/hd-lnks-bg.gif) bottom left repeat-x;
	/*background-color: yellow;*/
}

#hd-lnks, #hd-lnks a {
	font-size: 11px;
	color: #EBF4F9;
	text-decoration: none;
	font-weight: normal;
}
#hd-lnks a:hover {color: #AFE1FF;}

#content {
	position: relative;	
	width: 531px; /* 541 - 10 padding-left on p and h1-3 */
	height: 550px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 37px 0px 0px 216px; /* margin at bottom is distance between end of content and footer */
	border: 0px; padding: 0px;
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 550px;
}

/* Add right padding and a bit of space between points in lists within the content area */
#content ol, #content ul {padding-right: 10px;}
#content li {
	margin-bottom: 0.5em;
	font-size: 12px; /* Set font size and color same as for p */
	color: #777A7F;
}

p {
	text-align: left;
	font-size: 12px; 
	line-height: 16px;
	margin: 0px 0px 10px 0px;
	border: 0px;
	padding: 0px 0px 0px 10px; /* p and h1-3 padding-left ties in with #content width */
	color: #777A7F;
}
p.no-indent {padding: 0px;} /* Removes left padding. Used for images that are to fill page width as Websiter forces img to be within a p */

/* Standard headings */

h1, h2, h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: normal;
	margin: 0px 0px 14px 0px;
	border: 0px;
	padding: 6px 0px 6px 10px; /* p and h1-3 padding-left ties in with #content width */
}
h2, h3 {margin: 0px 0px 5px 0px;}

h1 {
	color: #222656;
	font-size: 18px;
	line-height: 20px;
	width: 100%;
	background-color: #EAF4FD;
}

h1.grey {color: #BFCFDC;}

h2 {
	color: #333333;
	font-size: 16px;
	line-height: 18px;
}

h3 {
	color: #333333;
	font-size: 14px;
	line-height: 16px;
}

table {margin: 10px 0px 0px 0px;}

hr {
	color: #CCCCCC;
	/*background-color: #CCCCCC; This is set in templatestyle.css so it does not appear as a 1 char high solid line in the webeditor */
	height: 1px;
	margin: 10px;
}

/* Additional styles available from Websiter editor */
.underline {text-decoration: underline;}
.centrealign {text-align: center;}
.rightalign {text-align: right;}
.dblue {color: #222656;} /* Dark blue */
.lblue {color: #0B73B2;} /* Light blue */

/* Blue box with white text - can be applied to p tags. Styling for "p.bluebox a" defined below */
.bluebox {
	padding: 10px;
	margin: 10px;
	font-size: 14px; 
	line-height: 20px;
	color: #222656;
	background-color: #EAF4FD;
}

/* Bullets for tel, e-mail, magnifying glass */
span.tel {
	padding-left: 10px;
	background: url(/images/design/tel-blt.gif) 0 center no-repeat;
}
h1 span.tel, h2 span.tel, h3 span.tel {background-image: url(/images/design/tel-blt-h1.gif);} /* Use larger image for headings */

span.email {
	padding-left: 15px;
	background: url(/images/design/email-blt.gif) 0 center no-repeat;
}

span.email a {
	color: #222656;
	text-decoration: none;
}
h1 span.email a, h2 span.email a, h3 span.email a {font-weight: normal;}

span.magnify {
	padding-left: 19px;
	background: url(/images/design/magnify-blt.gif) 0 center no-repeat;
}

/* Fixed width button link */
a.blue-button {
	margin: 0px; border: 0px; padding: 0px;
	width: 129px;
	height: 25px;
	display: block;
	background-color: #E8F5FD;
	color: #222558;
	font-size: 16px;
	line-height: 25px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}
a.blue-button:hover {background-color: #98CBDC;}

/* List of bullet points with coloured numbers in circles */
ul.colored-numbers {margin: 0px; border: 0px; padding: 6px 0px 10px 10px;}

ul.colored-numbers li {
	margin: 0px; border: 0px; padding: 0px;
	width: 800px;
	list-style: none;
	line-height: 17px;
}
#content ul.colored-numbers li {color: #000000} /* Set colour to black, default for li in #content is as for p tag */

ul.colored-numbers li span.colored-number1, ul.colored-numbers li span.colored-number2, ul.colored-numbers li span.colored-number3, ul.colored-numbers li span.colored-number4, ul.colored-numbers li span.colored-number5 {
	margin: 0px; border: 0px; padding: 0px 0px 0px 23px;
	display: block;  /* Stops text wrap below bullet. Requires width to be set on ul.lnklst li */
	font-size: 12px;
	line-height: 17px;
	font-weight: bold;
	background: url(/images/design/blt-one.gif) 0 center no-repeat;
}
ul.colored-numbers li span {padding: 0px 0px 0px 23px; display: block;} /* Allows additional lines within the li to be enclosed within a span tag to be displayed with the same left padding */

ul.colored-numbers li span.colored-number2 {background-image: url(/images/design/blt-two.gif);}
ul.colored-numbers li span.colored-number3 {background-image: url(/images/design/blt-three.gif);}
ul.colored-numbers li span.colored-number4 {background-image: url(/images/design/blt-four.gif);}
ul.colored-numbers li span.colored-number5 {background-image: url(/images/design/blt-five.gif);}

/* Image styles */
img.right {
	background: #FFFFFF;
	margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
	float: right;
	border: 1px solid #000000;
}

img.left {
	background: #FFFFFF;
	margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
	float: left;
	border: 1px solid #000000;
}

/* Class to hide images so they can be pre-loaded. Can be used to hide any object */
.hdn, #rp img.hdn {display: none;}

img {
	background-position: center;
	vertical-align: middle;
}

/* Basic links */
a { /* p.a-link styles a p to work like an a so it can be used with javascript */
	color: #532E4D;
	text-decoration: underline;
    font-weight: bold;
}
a:hover {color: #0B73B2;}
/*a:visited {color: #532E4D;}*/

/* Link in blue box */
p.bluebox a {color: #00B5FA;}
p.bluebox a:hover {color: #7FDEFF;}

a img {border: 0px;} /* Remove border from image links */

/* List of links - used for News box and Product features */
ul.lnklst {margin: 0px; border: 0px; padding: 6px 0px 10px 12px;}

ul.lnklst li {
	margin: 0px; border: 0px; padding: 0px 0px 0px 12px;
	/* width: 400px; */
	list-style: none;
	line-height: 12px;
}

/* The span.no-link styling allows text that is not a link to have the same format */
ul.lnklst a, ul.lnklst li span.no-link {
	margin: 0px; border: 0px; padding: 0px 0px 0px 12px;
	color: #222656;
	/* display: block;  Stops text wrap below bullet. Requires width to be set on ul.lnklst li */
	font-size: 12px;
	line-height: 12px;
	text-decoration: none;
	font-weight: bold;
	background: url(/images/design/lnklst-blt.gif) 0 center no-repeat;
}
ul.lnklst a:hover {background-position: 3px center; color: #0B73B2;} /* The active link hover styling is not applied to (ul.lnklst li span.no-link) */

ul.lnklst li span.no-link {background: url(/images/design/lnklst-no-link-blt.gif) 0 3px no-repeat;} /* Different bullet to distinguish non-links */


/* Left panel */
#lp { /* Left panel wrapper */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 171px;
	left: 0px;
	width: 207px;
}


/* Rotating info display - javascript controlled */
#lp div.rt-wpr { /* Rotated info wrapper */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 0px; left: 0px;
	width: 207px;
}

div.lp-img-frame { /* Image frame */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 10px; left: 11px;
	width: 184px; height: 186px;
	background: url(/images/design/lp-img-frame.gif) 0 0 no-repeat;
}

img.lp-img { /* Image within frame */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 17px; left: 17px;
}

#lp div.rt-txt { /* Rotated info text wrapper */
	position: relative;
	margin: 202px 0px 0px 0px; border: 0px; padding: 0px;
	width: 207px;
}

#lp div.rt-txt h2 {
	margin: 0px 0px 5px 0px;
	border: 0px; padding: 0px;
	text-align: center;
}

#lp div.rt-txt p {
	margin: 0px 0px 5px 0px;
	border: 0px;
	padding: 0px 5px;
	color: #777A7F;
}
#lp div.rt-txt p a {color: #777A7F; text-decoration: none;}
#lp div.rt-txt p a:hover {color: #0B73B2;}


/* Left panel - thumbnail images */
#lp div.rt-txt p.magnify { /* 'Click to magnify' text */
	color: #000000;
	margin: 13px 0px 6px 0px;
}

#lp-sml-1st {position: relative; top: 20px;}

.lp-sml {  /* wrapper for each thumbnail */
	position: relative;
	margin: 8px 10px 0px 0px; left: 10px; /* IE bug fix, Standards compliant browsers would accept just margin: 8px 10px 0px 10px; */
	border: 0px; padding: 0px;
	width: 88px; height: 88px;
	float:  left;
}

#content div.lp-sml p {margin: 0px; border: 0px; padding: 0px;} /* Fix for Websiter where XStandard wraps img in a p - this cancels the effect of the p */

div.lp-img-frame-sml { /* Thumbnail image frame */
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	width: 88px; height: 88px;
	top: 0px; left: 0px;
	background: url(/images/design/lp-img-frame-sml.gif) left top no-repeat;
}
div.lp-img-frame-sml:hover {cursor: pointer;}

img.lp-img-sml { /* Thumbnail image within frame */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 4px; left: 4px;
}

/* Right panel */
#rp { /* Right panel wrapper */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 171px;
	left: 766px;
	width: 207px;
	line-height: 11px;
}

#rp div.hd { /* Heading */
	margin: 0px; border: 0px; padding: 0px;
	background-color: #0B73B2;
	height: 22px;
	width: 207px;
}

#rp div.hd a {
	margin: 0px; border: 0px; padding: 0px 0px 0px 24px;
	font-size: 14px;
	line-height: 22px; /* Centres text in div.hd */
	color: #FFFFFF;
	text-decoration: none;
	font-weight: normal;
	background: url(/images/design/rp-hd-blt.gif) 9px center no-repeat;
}
#rp div.hd a:hover {background-position: 12px center; color: #AFE1FF;}

#rp img {
	margin: 0px 0px 3px 0px; border: 0px; padding: 0px;
	display: block;
}

#rp a { /* Text link */
	margin: 0px; border: 0px; padding: 0px;
	font-size: 11px;
	color: #3F3F3F;
	text-decoration: none;
	font-weight: normal;
}
#rp a:hover {color: #0B73B2;}

div.ln { /* Line and spacer */
	margin: 6px 0px; border: 0px; padding: 0px;
	height: 1px;
	font-size: 1px; line-height: 1px; /* Limits height in IE */
	width: 100%;
	border-bottom: 1px solid #CECED0;
}

/* #rp products list */
#rp ul {
	margin: 0px; border: 0px; padding: 0px;
	list-style-type: none;
}

#rp ul li {display: inline;} /* Removes space below each li in IE */

#rp ul li a {
	margin: 0px; /* Cannot use margin-bottom to set a line below each item as IE bug causes movement on hover */
	border: 0px;
	border-bottom: 1px solid #FFFFFF;
	padding: 4px 0px 4px 24px;
	width: 183px; /* #rp width minus padding-left: 207 - 24 */
	font-size: 14px;
	line-height: 14px;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: normal;
	display: block; /* Stops text wrap under bullet & counters "ul li: display inline" */
	background: url(/images/design/rp-li1-blt.gif) 9px 7px no-repeat #9C9D9F; /* Position = left top */
}
#rp ul li a:hover, #rp ul li a.sel {/* Hover or Selected */
	background: url(/images/design/rp-li1-blt-hvr.gif) 12px 7px no-repeat #222558;
	color: #FFFFFF;
}

#rp ul li a.folder:hover { /* Folder i.e. contains sub-list elements, change bullet on hover to down arrow */
	background-image: url(/images/design/rp-li-folder-blt.gif);
}

#rp ul li a.folder:hover, #rp ul li a.sel-folder { /* Selected and is a folder */
	background: url(/images/design/rp-li-sel-folder-blt.gif) 12px 7px no-repeat #222558;
	color: #FFFFFF;
}

#rp ul li li a {
	background-image: url(/images/design/rp-li2-blt.gif);
	background-color: #F1F2F4;
	color: #9C9D9F;
}

/* Footer */
#ft1 {
	position: relative;
	margin: 20px 0px 0px 0px; /* Margin top sets distance between content and footer */
	border: 0px; padding: 0px;
	width: 973px;
	height: 35px;
	background-color: #FFFFFF;
	clear: both;
}
#ft2 {
	position: absolute;
	margin: 8px 0px 0px 0px; border: 0px; padding: 0px;
	width: 973px;
	height: 27px;
	background: url(/images/design/ft.gif) top left repeat-x #222558;
}

/* Privacy, Terms, etc */
#ftl, #ftr {
	position: relative;
	margin: 8px 10px 0px 10px; border: 0px; padding: 0px;
	font-size: 12px;
	line-height: 12px;
	height: 14px;
	color: #FFFFFF;
	float: left;
}
#ftr {float: right;}

/* Footer links */
#ft2 a {
	margin: 0px; border: 0px; padding: 0px;
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;
}
#ft2 a:hover {color: #AFE1FF;}
#ft2 a.swd:hover {color: #FFFFFF;}

/* Footer corners */
#ft-bl, #ft-br {
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 15px;
	left: 0px;
	width: 13px;
	height: 12px;
	background: url(/images/design/ft-bl.jpg) 0 0 no-repeat;
}
#ft-br {left: 960px; background: url(/images/design/ft-br.jpg) 0 0 no-repeat;}


/* Menu */

/* Menu (navigation) panel in top header - within #wpr */
#nav-wpr {/* Wrapper to contain right-aligned menu panel */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	left: 0px; top: 134px;
	width: 973px; height: 37px;
	background-color: #FFFFFF;
}

#nav {/* Menu (navigation) panel */
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 0px; left: 0px;
	width: 100%;
	height: 26px; /* IE will re-size this if more menu options are added */
	background-color: #F1F2F4;
}
/* Standards compliant browsers recognise this height setting
This will allow new top-level menu options to be displayed if added without updating style sheet to increase width of #nav */
html>body div#nav {
  height: auto; 
  min-height: 26px;
}

#nav ul {margin: 0px; border: 0px; padding: 0px;}

#nav ul li {
	list-style: none;
	margin: 0px; border: 0px; padding: 0px;
	width: 100px;  /* Min top level menu width in case new meu items added without updating style sheet */
	float: left; /* Lines up the top level menu options from left to right */
}
#nav ul li li {width: 180px; border-bottom: 1px solid #E8F5FD;} /* Required to set width of secondary menu levels in IE */

/* Set background on hover at top level only - set on "li a" not "li" or it breaks hover behaviour for sub-menus in IE and Mozilla */
#nav ul li a:hover {background: url(/images/design/nav-li-bg.gif) left bottom repeat-x;}
#nav ul li li a:hover {background-image: none;}

/* Width of top-level individual menu items reset here */
#nav ul li#map1 {width: 53px;}   /* Home.  Note: the full '#nav ul li#map1' rather than just '#map1' is required by IE */
#nav ul li#map2 {width: 67px;}   /* About us              */
#nav ul li#map3 {width: 66px;}   /* Products              */
#nav ul li#map4 {width: 84px;}   /* Applications          */
#nav ul li#map5 {width: 138px;}  /* Design Specifications */
#nav ul li#map6 {width: 75px;}   /* Standards             */
#nav ul li#map7 {width: 93px;}   /* Vehicle Users         */
#nav ul li#map8 {width: 109px;}  /* Vehicle Providers     */
#nav ul li#map9 {width: 80px;}   /* Contact us            */
#nav ul li#map10 {display: none} /* Hide 'Pages not visible from main menu' */

/* Background colour to drop-down options */
#nav ul ul li {
	background-color: #FFFFFF;
	/* filter: alpha(opacity=95);  - Cannot set opcacity in IE, the opacity works but is breaks the pop-out functionality! For IE, 0 to 100 */
	opacity: 0.95;              /* CSS3 standard (not yet supported), 0 to 1 */
	-moz-opacity: 0.95;         /* for Mozilla, 0 to 1 */
} 
/* Remove opacity on hover 
#nav ul ul li:hover {
	filter: alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
}
*/

#nav a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
	font-weight: normal;
	text-align: center;
	display: block;
	margin: 0px;
	border: 0px;
	/* border-right: 1px solid #DCDDDF; */
	padding: 0px;
	color: #777A7F;
	text-decoration: none;
}

#nav ul li#map1 a {margin: 0px 0px 0px 10px;} /* left indent before Home */
#nav ul li#map9 a {border: 0px;} /* Remove right border from 'Contact Us' - the right-most option in the list */

#nav a:hover {color: #1370B3;}

#nav ul li li a {text-align: left; margin: 0px 0px 0px 5px;} /* Left align text in pop-out options */

/* Position pop-out menus */
#nav li {position: relative;}

#nav ul ul {
	position: absolute;
	z-index: 500;
}

#nav ul ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

/* Show/Hide on hover */
div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul
{display: none;}


div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul
{display: block;}


/* CSS to replace tables - used for web enquiry forms */

/* The div with class tbl-out centres correctly in standards compliant browsers (as left and right margin set to auto). IE doesn't recognise auto. Div (centrefix) fixes this as IE incorrectly centres an element with text-align:center; */
.centrefix {text-align: center;} 

/* Width and margin set on a containing table wrapper (tbl-out) and not inner table div (tbl-in) to fix the IE width bug */
.tbl-out {
	width: 541px; 
	margin: 0px auto;
	border: 0px;
	padding: 0px;
	text-align: left;
}

.tbl-in {
	margin: 0px;
	border: 1px solid #EAF4FD;
	padding: 5px;
	background-color: #F1F2F4;
}

div.row {
  clear: both;
  margin: 0px; border: 0px; padding: 0px;
}
/* Standards compliant browsers don't add their own spacing so need top padding */
html>body div.row {padding: 2px 0px 0px 0px;}

div.half-space, div.space {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0px; border: 0px; padding: 0px;
}
div.space {height: 12px; line-height: 12px;}

div.row label {
	float: left;
	width: 202px;
	text-align: right;
	font-size: 14px; 
	line-height: 18px;
	margin: 2px 0px 0px 0px;
	padding: 0px;
}
span.fld label {width: 80px;} /* Email & Phone radio labels */

/* Class fld (field) defines data input fields */
div.row span.fld {
  float: right;
  width: 300px;
  text-align: left;
  margin-right: 2px;	/* Required to stop right side touching the fieldset border in IE */
}

div.row span.fld-full-width {
  float: left;
  width: 510px;
  text-align: left;
  margin: 0px;
}

/* The spacer is used to ensure the table-div clears the last field. Note not required if fields are enclosed in a fieldset tag */
div.spacer {
  clear: both;
}

/* Class full (full width) ensures fields fill their containing element */
.full {width: 100%;}

.bld {font-weight: bold;}  /* Set bold text in selects */

fieldset {
	border: 1px solid #CAD4DE;
	padding: 0px 8px 10px 5px;	/* Can't add padding to top as IE incorrectly puts this outside the fieldset so have added a bottom margin on the legend */
}

legend {
	border: 1px solid #222656;
	padding: 2px 5px;
	margin: 0px 0px 10px 0px;
	font-weight: bold;
	color: #222656;
	background-color: #EAF4FD;
}

form {border: 0px; margin: 0px; padding: 0px;}	/* Stops IE adding space around a form */

/* Style for the input boxes */
/* applied only to inputs within div class inputs so does not have to apply to inputs that are buttons (as cannot be undone with a specific input.btn class). */
div.inputs input, div.inputs select, div.inputs textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #222222;
	margin: 2px 0px 0px 0px; padding: 0px; border: 1px solid #7F9DB9; /* Remove border style to stick with sunken default */
	background-color: #FFFFFF !important;   /* Removes yellow background added by Google toolbar and other browser style sheets */
}

div.inputs input.radio {background-color:#F1F2F4 !important; border: 0px} /* IE fix: Remove "div.inputs input" styling applied to radio buttons */

/* Buttons */
input.btn {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px; /* Required to vertically centre text in button in IE */
	color: #222222;
	width: 100px;
	margin: 0px; padding: 0px;
}

/* Site map */
#content #map10 {display: none;} /* Hide from site map: Pages not on main menu */
#content ul ul, #content ul ul ul, #content ul ul ul ul {margin-top: 8px;} /* Add space before lists for each sub-menu level */

#onDemandButton
{
    display:block;
    width:207px;
    height:61px;
    background-image:url('/images/design/on-demand-button-static.jpg');
    background-repeat:no-repeat;
    text-indent:-5000px;    
}
#onDemandButton:hover
{
    background-image:url('/images/design/on-demand-button-hover.jpg');
}