/* DTAS 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: Tahoma, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 14px;
	margin: 10px 0px; border: 0px; padding: 0px;
	background-color: #001034;
}

/*  The main wrapper div */
#wpr {/* Outer wrapper provides the blue border */
	position: relative;
	width: 990px;
	margin: 0px auto;
	border: 0px; padding: 0px;
	background-color: #7AA7CE; /* Border around site */
}

#wpr2 {
	position: relative;
	width: 988px;
	margin: 0px; border: 0px; padding: 0px;
	top: 1px; left: 1px;
	background-color: #062D6E;
}

/* Header divs */
#hd {
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	top: 0px; left: 0px;
	height: 96px;
	background-color: #001034;
}

/* Place holders for pop-up text & hd1, etc for fade-in, fade-out effect */
div#hd-duro, div#hd img#hd-duro, #hd-duro-ultra, #hd-shoxx-txt, div#hd1, div#hd2 {
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
}

div#hd-duro {top: 20px; left: 16px; width: 228px; height: 56px; background: url(../images/design/hd-duro-bg.gif) 0 0 no-repeat;}
#hd-duro-ultra {top: 13px; left: 823px; width: 138px; height: 42px;}
#hd-shoxx-txt {top: 60px; left: 763px; width: 198px; height: 24px;}

img#hd-duro {top: 20px; left: 16px;}

div#hd1, div#hd2 {top: 0px; left: 611px; width: 377px; height: 96px;}
div#hd1 {background: url(../images/design/hd-shoxx-intro-bg.gif) 0 0 no-repeat;}
div#hd2 {background: url(../images/design/hd-shoxx-bg.jpg) 0 0 no-repeat;} /* Backup image in case rotator not supported by browser */

#content {
	position: relative;	
	width: 838px; /* 988 - left padding (150). Right padding on text(45) applied through p stylinging as greater width required for hp-lnk divs */
	height: 420px;	/* 414 (46 x 9) - padding top (34) - padding bottom (20). IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0px; /* margin at bottom is distance between end of content and footer #ft */
	border: 0px;
	padding: 34px 0px 10px 150px; /* Margin-bottom = space before footer */
}
/* Standards compliant browsers recognise this height setting */
html>body div#content {
  height: auto; 
  min-height: 370px;
}

/* Add right padding and a bit of space between points in lists within the content area */
#content ol, #content ul {
	margin: 0px 0px 10px 0px;
	padding: 0px 45px 0px 0px;
}

#content li {
	margin-bottom: 0.5em;
	margin-left: 20px; /* Keeps bullets off left floated image in Mozilla. Bullets not present in IE */
	font-size: 12px; /* Set font size and color same as for p */
	line-height: 14px;
	color: #C3CAD0;
	list-style: solid;
}

/* Home page links to Brands, Promotions, New Products */
div.hp-lnk {
	position: relative;
	float: left;
	margin: 10px 19px 15px 0px; border: 0px; padding: 0px;
	width: 134px; height: 133px;
}
div.hp-lnk-b {background: url(../images/design/hp-lnk-b.jpg) 0 0 no-repeat;}
div.hp-lnk-p {background: url(../images/design/hp-lnk-p.jpg) 0 0 no-repeat;}
div.hp-lnk-np {background: url(../images/design/hp-lnk-np.jpg) 0 0 no-repeat;}
div.hp-lnk-prom {background: url(../images/design/hp-lnk-prom.jpg) 0 0 no-repeat;}


div.hp-lnk a {
	position: absolute;
	display: block;
	left: 12px; top: 110px;
	color: #FFFFFF;
	font-size: 9px;
	line-height: 9px;
	text-decoration: none;
}

div.hp-lnk a:hover {color: #FFE11C;}
div.hp-lnk a.lines2 {top: 103px;} /* 2 lines of text */

p {
	text-align: left;
	font-size: 12px;
	line-height: 14px;
	margin: 0px 0px 10px 0px;
	border: 0px;
	padding: 0px 45px 0px 0px;
	color: #C3CAD0;
}

/* Standard headings */

h1, h2, h3, .h1, .h2, .h3 {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	font-weight: bold;
	margin: 0px 0px 2px 0px;
	border: 0px;
	padding: 6px 6px 6px 0px;
}
h1, .h1 {
	color: #FFFFFF;
	font-size: 24px;
	line-height: 26px;
}

h2, .h2 {
	color: #FFFFFF; /* Old DTAS Blue #1F245E */
	font-size: 16px;
	line-height: 18px;
}

h3, .h3 {
	color: #C3CAD0;
	font-size: 12px;
	line-height: 14px;
}

h1 a, .h1 a {color: #FFFFFF;}
h3 a, .h3 a, h2 a, .h2 a {color: #92CAD0;}

/* SHOXX bullet to heading */
.shoxx-hd {
	padding-left: 52px;
	background: url(../images/design/shoxx-hd-blt.jpg) 0 center no-repeat;
}

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

hr {
	color: #67697F;
	background-color: #67697F;
	height: 1px;
	line-height: 1px;
	margin: 0px 45px 5px 0px;
	border: 0px;
	padding: 0px;
}

/* Additional styles for content */
.underline {text-decoration: underline;}
.centrealign {text-align: center;}
.rightalign {text-align: right;}
.nobold {font-weight: normal;}


/* Image styles */
img.right, img.right-border {
	margin: 5px 0px 5px 10px;
	border: 0px;
	padding: 0px;
	float: right;
}

img.left, img.left-border {
	margin: 5px 10px 5px 0px;
	border: 0px;
	padding: 0px;
	float: left;
}
img.right-border, img.left-border {border: 1px solid #000000;}

img.link:hover {cursor: pointer} /* Applied to javascript image links */

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

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

img.rpad {margin-right: 10px;} /* Right padding for non-floated images */

/* Basic links */
a, span.a { /* span.a is a psuedo link for use with javascript */
	color: #C3CAD0;
	text-decoration: underline;
	font-weight: bold;
}
a:hover, span.a:hover {color: #FFFFFF;}
/*a:visited {color: #532E4D;}*/
span.a:hover {cursor: pointer;}

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

/* List of links */
ul.lnklst {margin: 0px 0px 10px 0px; border: 0px; padding: 0px;}

#content ul.lnklst li { /* #content required to over-ride #content li styling above */
	margin: 0px; border: 0px; padding: 0px;
	/* width: 400px; */
	list-style: none;
	line-height: 14px;
}

/* 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;
	color: #C3CAD0;
	/* 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;
}
ul.lnklst a:hover {color: #0B73B2;} /* The active link hover styling is not applied to (ul.lnklst li span.no-link) */

/* Footer */
#ft {
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	border-bottom: 1px solid #7AA7CE;
	width: 988px;
	height: 75px;
	background-color: #001034;
	clear: both;
}

#ft-dtas {
	position: absolute;
	top: 11px; left: 843px;
	width: 115px; height: 52px;
	background: url(../images/design/ft-dtas-bg.gif) 0 0 no-repeat #001034;
}
#ft img {
	margin: 11px 0px 0px 9px;
	border: 0px; padding: 0px;
	float: left;
}
#ft img.ft-img1 {margin-left: 37px;} /* Indent first footer logo */

/* Optional placement of footer images in header */
#hd img {
	margin: 24px 0px 0px 9px;
	border: 0px; padding: 0px;
	float: left;
}
#hd img.hd-img1 {margin-left: 581px;} /* Indent first header logo */

/* Website design credit */
div#ft div#webdev {
	position: absolute;
	left: 850px; top: 17px;
	width: 80px;
	height: 40px;
	overflow: hidden;
	font-size: 8px;
}


/* Menu */
/* Set menu position, basic display and sub menu pop ups and remove menu indents */
#nav {
	position: absolute;
	top: 97px;
	left: 0px;
	width: 91px;
	height: 414px; /* Height for IE. 9 x 46 = 414 */
	margin: 0px; border: 0px; padding: 0px;
}
/* Standards compliant browsers recognise this height setting */
html>body #nav {
  height: auto; 
  min-height: 405px;
}

/* remove list bullets */
#nav li {list-style-type: none;}

/* remove sub-list indents */
#nav ul {
	margin: 0px; border: 0px; padding: 0px;  /* Keeps top button in line with top in Firefox */
	width: 91px;
}

/* fix position of menu list */
#nav li {
	position: relative;
	height: 46px;	/* Height for IE */
	background: url(../images/design/menu-btn.gif) top left no-repeat;
}
/* Height for standards complient browsers */
html>body div#nav li {
  height: auto; 
  min-height: 46px;
}

#nav li:hover {background-image: url(../images/design/menu-btn-hvr.gif);}

#nav ul ul li {
	background-image: none;
	height: 46px;
}
/* Height for standards complient browsers */
html>body div#nav ul ul li {
  height: auto; 
  min-height: 46px;
}

/* Fix position of sub-menus */
#nav ul ul {
	position: absolute;
	top: 0px;
	left: 100%;
	width: 91px;
}

/* Hide sub menus by default */
#nav ul ul {display: none;}
#nav ul ul ul {display: none; width: 91px;}
#nav ul li:hover ul ul {display: none;}

/* Show submenus on rollover */
#nav ul li:hover ul {display: block;}
#nav ul ul li:hover ul {display: block;}

/* Colours of menu options */
/* set menu link display default */
/* set menu link font colour on hover */
	
#nav ul a, #nav ul a:visited, #nav ul a:hover, #nav ul a:active {
	display: block;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px; /* Firefox default doesn't go smaller than 9px. Cannot use Tahoma for menu as 9px Tahoma is too big */
	line-height: 11px;
	text-decoration: none;
	margin: 0px; border: 0px; padding: 17px 0px 10px 12px; /* Padding-bottom activates hover below text - if set too high this adds space between buttons */
}
#nav ul a.tl, #nav ul a.tl:visited, #nav ul a.tl:hover, #nav ul a.tl:active {padding: 11px 0px 0px 14px;}

/* set sub-menu display properties default */
#nav ul ul a, #nav ul ul a:visited {
	font-size: 12px;
	line-height: 12px;
	display: block;
	color: #FFFFFF;
	font-weight: bold;
	padding: 4px;
    background-color: #00A8E9;
    border: 1px solid #CCCCCC;
}

/* set sub-menu 1 font colour on hover*/
#nav ul ul a:hover, #nav ul ul a:active {
	font-size: 12px;
	line-height: 12px;
	padding: 4px;
	color: #F19A30;
	background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}

/* set sub-menu 2 font colour default*/
#nav ul ul ul a, #nav ul ul ul a:visited {
	font-weight: bold;
	font-size: 12px;
	line-height: 12px;
	color: #FFFFFF;
	background-color: #0C9CCF;
	border: 1px solid #CCCCCC;
}

/* set sub-menu 2 font colour on hover*/
#nav ul ul ul a:hover, #nav ul ul ul a:active {
	color: #F19A30;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
}

/* E-mail link - as on Contact Us page */
a.contact-e {color: #C3CAD0;}
a:hover.contact-e {color: #FFFFFF} /* DTAS Blue #1F245E*/

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

/* 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;
	border: 0px;
	padding: 0px;
	text-align: left;
}

.tbl-in {
	margin: 0px;
	border: 1px solid #959B9F;
	padding: 5px;
	background-color: #9CA5AC;
}

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, .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 #959B9F;
	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 #959B9F;
	padding: 2px 5px;
	margin: 0px 0px 10px 0px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #6B808F;
}

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: Tahoma, Verdana, 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:#9CA5AC !important; border: 0px} /* IE fix: Remove "div.inputs input" styling applied to radio buttons */

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

/* Site map */
#content ul ul, #content ul ul ul, #content ul ul ul ul {margin-top: 8px;} /* Add space before lists for each sub-menu level */

/* Edit DTAS image */
img#editdtas {
	position: absolute;
	margin: 0px; border: 0px; padding: 0px;
	top: 80px; left: 10px;
}
img#editdtas:hover {
	top: 79px; left: 9px;
	width: 72px; height: 32px;
	/*width: 63px; height: 30px; For simple Edit logo */
}