﻿
 /* start generalised rules for adaptive layout july 2019 */

*            { margin:0; border:0; padding:0; }

body, html   { height: 100%; }

html         { 
               overflow-y:scroll;  /* force vertical scrollbar, for width matching across pages */
               font-size:100%     /* set base font size; further sizing should be in ubits of rem */
             }
             
html                 { box-sizing:border-box; } /* box-sizing reset */
*, *:before, *:after { box-sizing:inherit; }
             
p+p          { margin-top:1rem; }
table        { border-collapse:collapse; }
td           { vertical-align:top; padding:0; }
img          { border:0; width:auto; vertical-align:top; max-width:100%; }

ul,ol        { margin:0.7rem 0; padding:0 1.2rem; overflow:hidden; list-style-position:outside; }
 
 /* end generalised rules for adaptive layout july 2019 */



body        { margin:0; background:#f9f9f9; font-family:tahoma,arial,helvetica,sans-serif; line-height:1.7; font-size:inherit; }
table       { border-collapse:collapse; }
td          { vertical-align:top; padding:0; }
img         { border:0; }
p           { margin-top:0; }

a:link,a:visited  { text-decoration:none; color:black; }
a:hover           { text-decoration:underline; color:blue;}

.black   { color:black; }
.b       { font-weight:bold; }
.clear   { clear:both; }
.left    { float:left; }
.right   { float:right; }

h1, h1 a:link, h1 a:visited { color:#222299; margin:0 0 10px 0; }
h2, h2 a:link, h2 a:visited { color:#222299; margin:0 0 10px 0; }
h3, h3 a:link, h3 a:visited { color:#222299; margin:0 0  7px 0; }

ul { margin-left:10px; padding-left:10px; }
li { margin-bottom:15px; }

li li { margin-bottom:0; }

table.outline td { border:solid 1px #ccccee; padding:3px 10px; }
table.outline th { border:solid 1px #ccccee; padding:3px 10px; text-align:left; background:#eeeeff; }

#myform label    { float:left; clear:left; text-align:right; width:6em; padding:0 0.5em; }
#myform input    { float:left; width:11em; }
#myform textarea { clear:both; width:18.5em; }

input.formbutt { background:#ddddff; border:solid 1px black; }

div#main       { margin:0 auto; max-width:1300px; background:white; color:black; padding:30px; border:0; width:100%; }

div#header0 { float:right; width:674px; }

div#header1   { color:black; }
div#header1 a { color:black; padding-left:5px; }

div#header2         { float:right; text-align:right; }
div#header2 img     { vertical-align:middle; }

div#header3         { white-space:nowrap; }
div#header3 a       { padding:0 7px; text-decoration:none; }
div#header3 a:hover { background:#444444; color:white; }

div#header4 a         { height:21px; padding:0 7px; text-decoration:none; color:#000000; white-space:nowrap; }
div#header4 a:hover   { background:#444444; color:#ffffff; }
div#header4 form               { vertical-align:middle; color:#666666; font-style:italic; display:inline; padding:0; margin:0; white-space:nowrap; float:right; }
div#header4 input[type=text]   { border:solid 1px #aaaaaa; }
div#header4 input[type=submit] { background:#444444; border:solid 1px #ffffff; color:#ffffff; padding:1px 8px; }

div#header5     { margin:5px 0; border:dotted #666666; border-width:2px 0; padding:6px 0; }

div#contentdiv { padding-top:1px; }

table.threecols                        { width:100%; margin:15px 0 5px 0; }
table.threecols td#l                   { width:175px; padding-right:30px; }
table.threecols td#l ul                { list-style-image:url('images/arrow.gif'); margin:20px; }
table.threecols td#l li a              { color:#005522; }
table.threecols td#m                   { width:450px;  }
table.threecols td#m div#mcontent      { margin:0 20px 0 20px;  }
table.threecols td#m div#mcontent img  { margin-bottom:5px; }
table.threecols td#m div#mcontent a    { text-decoration:underline; }
table.threecols td#m div#mcontent h2   { border:dotted 2px #666666; border-width:0 0 2px 0; padding-bottom:6px; letter-spacing:0.1em; color:#222299; }
table.threecols td#m div#mcontent h2 a { color:#222299; text-decoration:none; }
table.threecols td#m div#mcontent h2 a:hover { text-decoration:underline; }
table.threecols td#m div.mstory        { border-bottom:solid 1px #BBAACC; margin:0 0 20px 0; padding-bottom:15px; }
table.threecols td#r                   { background:#eeee88 url('images/rcol_grad.gif') repeat-x top; }
table.threecols td#r div#rcontent      { padding:2px 20px 20px 20px; }
table.threecols td#r div#rcontent h2, 
table.threecols td#r div#rcontent h2 a { color:#ffffff; }
table.threecols td#r div#rcontent h3 a { color:#000000; text-decoration:underline; }
table.threecols td#r div#rcontent h3   { margin-bottom:0; }

/* july 2019 - replace table.threecols with flex div */

div.threecols                         { width:100%; margin:15px 0 5px 0; display:flex; }
div.threecols div#l                   { width:20%; padding-right:30px; min-width:200px; }
div.threecols div#l ul                { list-style-image:url('images/arrow.gif'); margin:20px; }
div.threecols div#l li a              { color:#005522; }
div.threecols div#m                   { width:50%;  }
div.threecols div#m div#mcontent      { margin:0 20px 0 20px;  }
div.threecols div#m div#mcontent img  { margin-bottom:5px; }
div.threecols div#m div#mcontent a    { text-decoration:underline; }
div.threecols div#m div#mcontent h2   { border:dotted 2px #666666; border-width:0 0 2px 0; padding-bottom:6px; letter-spacing:0.1em; color:#222299; }
div.threecols div#m div#mcontent h2 a { color:#222299; text-decoration:none; }
div.threecols div#m div#mcontent h2 a:hover { text-decoration:underline; }
div.threecols div#m div.mstory        { border-bottom:solid 1px #aa89bc; margin:0 0 20px 0; padding-bottom:15px; }
div.threecols div#r                   { width:30%; background:#eeee88 url('images/rcol_grad.gif') repeat-x top; }
div.threecols div#r div#rcontent      { padding:2px 20px 20px 20px; }
div.threecols div#r div#rcontent h2, 
div.threecols div#r div#rcontent h2 a { color:#ffffff; }
div.threecols div#r div#rcontent h3 a { color:#000000; text-decoration:underline; }
div.threecols div#r div#rcontent h3   { margin-bottom:0; }

@media (max-width:600px) {
    div.threecols                    { flex-direction:column; } 
    div.threecols div#l              { order:2; width:100%; padding-right:0; margin:3rem 0; }
    div.threecols div#m              { order:1; width:100%; }
    div.threecols div#m div#mcontent { margin:0; }
    div.threecols div#r              { order:3; width:100%; }
}

/* END july 2019 - replace table.threecols with flex div */


img.newsthumb { float:left; margin:0 15px 15px 0; }

div#ldepts div     { border:solid 1px black; margin:0 0 0.7em 0; position:relative; }
div#ldepts div img { position:absolute; top:-7px; right:-20px; }
div#ldepts div a   { color:#000000; text-decoration:none; display:block; padding:0.7rem 0.5rem; }
div#ldepts div a:hover { background:rgba(0,0,0,0.1); }

div#ldepts div#homedeptspec   { background:#faf7d6; }

div#ldepts div#homedeptall   { background:#ddaa33; padding:0; }
div#ldepts div#homedeptall a { color:#ffffff; font-weight:bold; font-size:large; letter-spacing:0.1em; line-height:0.8em; }

div.announce          { clear:both; margin-bottom:2em; }
div.announce img      { float:right; margin:0 0 10px 10px; }
div.announce img.more { float:left;  margin:7px 0 7px 0; }

div.offerpanel { margin:0 0 10px 0; border:solid 1px #aa5555; padding:5px; background:#E9E9B8; }
div.offerpanel a { color:#222299; }
div.offerpanel a img { float:right; margin:0 0 5px 5px; border:solid 1px #888888; }
div.offerpanel span.newprice { font-weight:bold; color:red; }

div#contactbig  { padding-top:1.5em; text-align:center; font-weight:bold; }
div#contactbig1 { color:#07A815; font-size:1.4em; }
div#contactbig2 { color:#9850BA; font-size:3em; }
div#contactbig3 { color:#EF493C; font-size:1.2em; }

div#choosenav         { margin-top:2em; }
div#choosenav div     { width:24%; text-align:center; float:left; border:dotted 0px #aaaaaa; border-width:1px 0 0 0; padding-top:1em; color:#aaaaaa; }
div#choosenav div+div { border-left-width:1px; }
div#choosenav div a   { color:#000000; text-decoration:none !important; }

div#brandlogos { background:white; margin-top:30px; padding:10px 5px; text-align:center; }

form#enqform label            { clear:both; display:block; float:left; width:10em; font-style:italic; }
form#enqform label.hidden     { visibility:hidden; }
form#enqform textarea         { width:380px; }
form#enqform input[type=text] { width:250px; }
form#enqform label.long       { width:auto; }
div#errordiv { color:red; border:solid 1px red; padding:10px 20px; margin-bottom:15px; }

div.searchresults a { text-decoration:none !important; }

div#footer { margin:20px 0; border:dotted 2px #444444; border-width:2px 0 0 0; text-align:center; padding-top:12px; }
