/* Estona css */

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 14px;
	line-height: 16px;
	margin: 0px; border: 0px; padding: 0px;
	background-color: #FFFFFF;
	background-image: url(../images/design/body-bg.jpg);
	background-repeat: repeat-x;
	background-position: top left;
	background-color: #363466; /* The color of the end of the vertical gradient */
}

/*  The main wrapper div, position relative. Other div's are absolute within this div. #wrapper-hm is the home page version */
#wrapper, #wrapper-hm {
	position: relative;
	width: 970px;
	margin: 3px auto;
	border: 0px; padding: 0px;
	background: url(../images/design/wrapper-bg.jpg) #FFFFFF repeat-y 0 0;
}
#wrapper-hm {background: url(../images/design/wrapper-hm-bg.gif) #FFFFFF;} /* gif as no shade gradient */

/* Header divs */
#hd {
	position: relative;
	margin: 0px; border: 0px; padding: 0px;
	width: 970px;
	height: 82px;
	background-color: #333366;
}

/* EIM logo and text */
#eim-logo, #eim-txt {
	position: absolute;
	top: 7px; left: 21px;
	margin: 0px; border: 0px; padding: 0px;
}
#eim-txt {top: 13px; left: 100px;}

/* Header buttons */
#btn-wd, #btn-om, #btn-dd, #btn-seo {
	position: absolute;
	top: 9px; left: 405px;
	margin: 0px; border: 0px; padding: 0px;
	width: 59px;
	height: 57px;
	background-image: url(../images/design/sheffield-web-designers.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

#btn-om {left: 483px; background-image: url(../images/design/online-marketing.gif);}
#btn-dd {left: 561px; background-image: url(../images/design/database-development.gif);}
#btn-seo {left: 639px; background-image: url(../images/design/search-engine-optimisation.gif);}

#btn-wd:hover {background-image: url(../images/design/sheffield-web-designers-hvr.gif);}
#btn-om:hover {background-image: url(../images/design/online-marketing-hvr.gif);}
#btn-dd:hover {background-image: url(../images/design/database-development-hvr.gif);}
#btn-seo:hover {background-image: url(../images/design/search-engine-optimisation-hvr.gif);}

/* Header links: Get a quote, Contact us*/
#hd-lnks {
	position: absolute;
	top: 6px; left: 805px;
	width: 160px; height: 24px;
	margin: 0px; border: 0px; padding: 0px;
	background-color: #ACABD5;
	color: #FFFFFF;
	text-align: center;
	font-size: 13px;
	line-height: 22px;
}

#hd-lnks a, #hd-lnks a:visited {
	color: #FFFFFF;
	text-decoration: underline;
    font-weight: bold;
	margin: 0px; border: 0px; padding: 0px;
}
#hd-lnks a:hover {color: #333366;}

/* #content-hm is the home page version */
#content, #content-hm {
	position: relative;	
	width: 600px;
	height: 666px;	/* IE takes this as the height and then incorrectly re-sizes if required */
	text-align: left;
	margin: 0px;
	border: 0px;
	padding: 0px 0px 24px 206px; /* padding at bottom is distance between end of content and footer */
}
#content-hm {width: 760px;}
/* Standards compliant browsers recognise this height setting */
html>body div#content, html>body div#content-hm {
  height: auto; 
  min-height: 666px; /* 550 = height of #lmenu */
}

/* Add right padding and a bit of space between points in lists within the content area */
#content ol, #content ul, #content-hm ol, #content-hm ul {padding-right: 10px;}
#content li, #content-hm li {margin-bottom: 0.5em;}

/* div.p emulates a p tag to contain in-line elements eg hr.il */
p, div.p {
	text-align: left;
	font-size: 14px; 
	line-height: 18px;
	margin: 0px; border: 0px;
	padding: 14px 15px 0px 20px;
}

/* Standard headings */

h1, h1.twolines {
	color: #333365;
	font-size: 26px;
	line-height: 26px;
	margin: 0px;
	border: 0px;
	padding: 20px 2px 0px 20px;
}
h1.twolines {line-height: 30px;} /* Additional line height if heading goes over 2 lines */

h2 {
	color: #333365;
	font-weight: bold;
	font-size: 16px;
	line-height: 16px;
	margin: 0px;
	border: 0px;
	padding: 14px 2px 0px 20px;
}

/* Smaller options */
h1 span.sm, h2 span.sm {font-size: 14px;}

h3 {
	color: #333365;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	margin: 0px;
	border: 0px;
	padding: 14px 2px 0px 20px;
}
/* In-line options */
h3.il {
	display: inline;
	color: #000000;
	padding: 14px 2px 0px 0px; /* Remove left padding */
}

.centrealign {text-align: center;}
.rightalign {text-align: right;}

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

hr {
	color: #CCCCCC;
	background-color: #CCCCCD; /* bg color set I think as an IE fix. Set one shade diff to color to satisfy W3C CSS validator */
	height: 1px;
	margin: 10px 20px;
}

/* Image styles */
img {
	background-position: center;
	vertical-align: middle;
	border: 0px; /* Remove border from images set as links */
}

img.right, img.rightb {
	margin: 5px 0px 5px 10px;
	border: 0px; padding: 0px;
	float: right;
}

img.left, img.leftb {
	margin: 5px 10px 5px 0px;
	border: 0px; padding: 0px;
	float: left;
}

/* Images with borders */
img.rightb, img.leftb {border: 1px solid #000000;}


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

/* Basic links */
a {
	color: #333366;
	text-decoration: underline;
    font-weight: bold;
}
a:hover {
	color: #666699;
	text-decoration: underline;
}
/*a:visited {color: #6DB0DB;}*/

/* Green links */
a.green, a.green:visited {
	color: #009900;
	text-decoration: underline;
    font-weight: bold;
}
a.green:hover {
	color: #666699;
	text-decoration: underline;
}

/* Tel icon - class can apply to a div or p */
.tel, .tel-lng {
	color: #333366;
	font-weight: bold;
	font-size: 18px;
	line-height: 24px;
	width: 180px; /* Width must be set to centre the div when margin left and right is set to auto */
	margin: 0px auto; border: 0px;
	padding: 24px 10px 24px 40px; /*Padding top and bottom sets height of icon relative to text */
	background-image: url(../images/design/tel.gif);
	background-repeat: no-repeat;
	background-position: 0px center;
	text-align: left;
}
.tel-lng {width: 400px;} /* Text is left aligned within the element and the element centred */

/* Left hand menu styling */

/* lmenu contains navpanel and provides a frame of a few pixels to the left and right of the menu options */
#lmenu {
	position: absolute;
	left: 3px;
	top: 82px;
	width: 200px;
	height: 690px; /* IE5/6 takes this as the height and then incorrectly re-sizes if required */
	margin: 0px; border: 0px; padding: 0px;
	background-color: #666698;
	background-image: url(../images/design/lmenu-bg.gif);
	background-repeat: no-repeat;
	background-position: bottom left;
}
/* Standards compliant browsers recognise this height setting */
html>body div#lmenu {
  height: auto; 
  min-height: 690px;
}

#navpanel {
	position: relative;
	left: 7px;
	top: 11px;
	width: 188px;
	margin: 0px; border: 0px; padding: 0px;
	font-weight: bold;
}

#navpanel ul {
	list-style-type: none; /* Remove list bullets */
	margin: 0px; border: 0px; padding: 0px;
}

#navpanel ul li {display: inline;}

/* .l1 and .l2 are equivalent to Websiter .pagelevel1 and .pagelevel2 */

/* Menu level 1 */
#navpanel .l1 a, #navpanel .nav-wd a, #navpanel .nav-om a, #navpanel .nav-dd a, #navpanel .nav-seo a {
	display: block;
	width: 160px; /* 188 #navpanel width minus 28 padding left */
	font-weight: bold;
	color: #FFFFFF;
	font-size: 14px;
	line-height: 18px;
	margin: 0px;
	border: 0px;
	/* border-bottom: 1px solid #CECFE1; No border as using bottom background image */
	padding: 4px 4px 4px 28px;
	text-decoration: none;
	background-image: url(../images/design/nav-bullet1.gif);
	background-repeat: no-repeat;
	background-position: 3px center;
}  

#navpanel .l1 a:hover, #navpanel .selected1 a, #navpanel .selected1 a:hover, #navpanel .nav-wd a:hover, #navpanel .nav-wd-selected a, #navpanel .nav-wd-selected a:hover, #navpanel .nav-om a:hover, #navpanel .nav-om-selected a, #navpanel .nav-om-selected a:hover, #navpanel .nav-dd a:hover, #navpanel .nav-dd-selected a, #navpanel .nav-dd-selected a:hover, #navpanel .nav-seo a:hover, #navpanel .nav-seo-selected a, #navpanel .nav-seo-selected a:hover {
	color: #FFFFFF;
	background-color: #333365;
	background-image: url(../images/design/nav-bullet1-hvr.gif);
	background-repeat: no-repeat;
	background-position: 3px center;
}

/* Specific menu level 1 icons */
#navpanel .nav-wd a {background-image: url(../images/design/nav-wd.gif);}
#navpanel .nav-wd a:hover, #navpanel .nav-wd-selected a, #navpanel .nav-wd-selected a:hover {background-image: url(../images/design/nav-wd-hvr.gif);}
#navpanel .nav-om a {background-image: url(../images/design/nav-om.gif);}
#navpanel .nav-om a:hover, #navpanel .nav-om-selected a, #navpanel .nav-om-selected a:hover {background-image: url(../images/design/nav-om-hvr.gif);}
#navpanel .nav-dd a {background-image: url(../images/design/nav-dd.gif);}
#navpanel .nav-dd a:hover, #navpanel .nav-dd-selected a, #navpanel .nav-dd-selected a:hover {background-image: url(../images/design/nav-dd-hvr.gif);}
#navpanel .nav-seo a {background-image: url(../images/design/nav-seo.gif);}
#navpanel .nav-seo a:hover, #navpanel .nav-seo-selected a, #navpanel .nav-seo-selected a:hover {background-image: url(../images/design/nav-seo-hvr.gif);}

/* Menu level 2 */
#navpanel .l2 a {
	display: block;
	width: 131px; /* 188 #navpanel width minus 57 padding left */
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	background-color: transparent;
	font-size: 10px;
	margin: 0px;
	border: 0px;
	padding: 2px 4px 2px 57px;
	background-image: url(../images/design/nav-bullet2.gif);
	background-repeat: no-repeat;
	background-position: 32px center;
}

#navpanel .l2 a:hover, #navpanel .selected2 a, #navpanel .selected2 a:hover {
	color: #FFFFFF;
	background-color: #333365;
	background-image: url(../images/design/nav-bullet2-hvr.gif);
	background-repeat: no-repeat;
	background-position: 32px center;
}

/* Dotted line bottom border */
#navpanel li {
	background-image: url(../images/design/menu-line.gif);
	background-repeat: repeat-x;
	background-position: bottom left;
}
/* Darker line for level 2 */
/*#navpanel li li {background-image: url(../images/design/menu-line2.gif);}*/

/* Divisional office details within #lmenu */
#regional-office {
	position: relative;	
	top: 21px;
	left: 7px;
	width: 180px;
	height: 130px;
	font-size: 14px;
	line-height: 18px;
	margin: 0px; border: 0px; padding: 0px;
	clear: both; /* Fix IE8 bug - required to clear #navpanel */
}

#uk-div, #aus-div {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 14px;
	line-height: 14px;
	margin: 0px;
	border: 0px;
	padding: 0px 0px 0px 30px;
	background-image: url(../images/design/uk-flg.jpg);
	background-repeat: no-repeat;
	background-position: 0px center;
	text-align: left;
}
#aus-div {background-image: url(../images/design/aus-flg.jpg);}

#regional-office p {
	font-size: 13px;
	line-height: 20px;
	color: #FFFFFF;
	padding: 4px 0px 20px 0px;
}

#regional-office a, #regional-office a:visited {
	color: #FFFFFF;
	text-decoration: none;
    font-weight: normal;
}
#regional-office a:hover {
	color: #333365;
	text-decoration: underline;
}

/* Right hand menu styling */
#rmenu {
	position: absolute;
	left: 816px;
	top: 82px;
	width: 150px;
	height: 555px;
	margin: 0px; border: 0px; padding: 0px;
}
/* Standards compliant browsers recognise this height setting */
html>body div#rmenu {
  height: auto; 
  min-height: 555px;
}

/* RH menu images */
img.rmenu-i {
	position: relative;
	top: 0px; left: 0px;
	margin: 0px; border: 0px; padding: 0px;
	width: 150px;
	height: 100px;
}

/* RH menu box */
.rmenu-b {
	position: relative;
	top: 0px; left: 0px;
	margin: 0px; border: 0px; padding: 0px;
	width: 150px;
	height: 85px;
}

/* RH menu heading - not key phrase text so not a true heading */
div.rmenu-h {
	color: #333365;
	font-size: 13px;
	line-height: 13px;
	margin: 0px; border: 0px; padding: 7px 6px 0px 6px;	
}

.rmenu-b p {
	color: #000000;
	font-size: 10px;
	line-height: 12px;
	margin: 0px; border: 0px; padding: 6px 4px 0px 9px;
}

/* In line list for RH menu regional contact icons */
ul.inline-lst {
	color: #000000;
	font-weight: normal;
	font-size: 12px;
	line-height: 12px;
	margin: 0px;
	border: 0px;
	padding: 11px 0px 0px 15px;
}

ul.inline-lst li.uk, ul.inline-lst li.aus {
	display: inline;
	padding: 0px 10px 0px 30px;
	background-image: url(../images/design/uk-flg.jpg);
	background-repeat: no-repeat;
	background-position: 0px center;
}
ul.inline-lst li.aus {background-image: url(../images/design/aus-flg.jpg);}

ul.inline-lst a, ul.inline-lst a:visited {
	color: #000000;
	text-decoration: underline;
    font-weight: normal;
}
ul.inline-lst a:hover {color: #333365;}


/* Footer */
#footer {
	position: relative;
	width: 970px;
	height: 105px;
	background-color: #333365;
	margin: 0px; border: 0px; padding: 0px;
}

/* Footer top bar */
#ft-top {
	position: absolute;
	top: 5px;
	left: 206px;
	width: 760px;
	height: 14px;
	margin: 0px; border: 0px; padding: 0px;
	/*background-color: pink;*/
	color: #FFFFFF;
	font-size: 13px;
	line-height: 13px;
	text-align: center;
}
#ft-top a, #ft-top a:visited {
	color: #FFFFFF;
	text-decoration: underline;
    font-weight: normal;
}
#ft-top a:hover {
	color: #A1A1A1;
	text-decoration: underline;
}

/* Footer bottom box */
#ft-btm {
	position: absolute;
	top: 27px;
	left: 4px;
	width: 962px;
	height: 74px;
	margin: 0px; border: 0px; padding: 0px;
	background-image: url(../images/design/ft-btm-bg.jpg);
	background-repeat: repeat-y;
	background-position: top left;
}

/* EIM and reg office details */
#ft-eim, #ft-ro {
	position: absolute;
	top: 9px;
	left: 14px;
	width: 200px;
	height: 55px;
	margin: 0px; border: 0px; padding: 0px;
	color: #000000;
	font-size: 12px;
	line-height: 14px;
}
#ft-ro {left: 248px; width: 160px;}

#valid-xhtml, #valid-css, #ukwda {
	position: absolute;
	top: 12px;
	left: 887px;
	margin: 0px; border: 0px; padding: 0px;
}
#valid-css {top: 40px;}
#ukwda {top: 11px;}
#valid-xhtml img, #valid-css img, #ukwda img {border: 0px;}

#ft-menu {
	position: absolute;
	top: 9px;
	left: 409px;
	width: 465px;
  	height: 53px;
	padding:5px;
	text-align: center;
	font-size: 12px;
}

/* Popup menu in footer */
#navfooter	/* This is the ID of the top level list i.e. the horizontal one */
{
	padding: 0px 0px 0px 15px;
	margin: 0px;
	text-align: center;
}

#navfooter li
{
	float: left;			/* Make list horizontal */	
	position: relative;
	list-style: none;		/* Remove bullets */
	width: 10em;			/* Define column widths */
	padding-bottom: 0.5em;	/* top + bottom = vertical space between list items */
	padding-top: 0.5em;
}

#navfooter ul 
{
	padding: 0px;
	margin: 0px;
	display: none;
	position: absolute; 
	bottom: 3.5em;	/* Space between bottom of vert col and horizontal col. */
	left: 0px;
	background-color: #CCCCCC;
	border: 1px solid #333333;
}

/* Adjustment for IE */
* html #navfooter ul  {	bottom: 3.2em;} /* Cannot be > 3.2em to work in IE */

#navfooter li > ul {top: auto;}

#navfooter li:hover ul { display: block; }
#navfooter a {
	text-decoration: none;
	color: #333333;
	font-weight: normal;
}

#navfooter a:hover {color: #C8570D;}

/* Styles for input boxes */
input, select, textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 12px;
	color: #222222;
	margin: 0px; padding: 0px;
}

/* 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, .tbl-out-cal {
	width: 400px; 
	margin: 0px auto;
	border: 0px;
	padding: 0px;
	text-align: left;
}

.tbl-in {
	margin: 0px;
	border: 1px solid #666698;
	padding: 5px;
	background-color: #F5FAFE;
	color: #333365;
}

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 {
  clear: both;
  height: 6px;
  line-height: 6px;
  margin: 0px; border: 0px; padding: 0px;
}

div.row span.label, div.row span.label-cal {
  float: left;
  width: 100px;
  text-align: right;
}

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

/* Classes to define 2 field columns (left and right) */
div.row span.fld-coll, div.row span.fld-coll-cal {
  float: left;
  width: 170px;
  text-align: left;
}
div.row span.fld-colr, div.row span.fld-colr-cal {
  float: right;
  width: 190px;
  text-align: left;
}

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

/* The spacer is user 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 #666698;
	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 #666698;
	padding: 2px 5px;
	margin: 0px 0px 10px 0px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #333365;
}

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

/* Flash animation box on home page */
#flashbox {
	position: relative;
	top: 0px;
	left: 0px;
	width: 760px;
	height: 268px;
	margin: 0px; border: 0px; padding: 0px;
	background-color: #B9BACF;
	background-image: url(../images/design/flashbox-bg.jpg); /* temp bg image until replace with real form */
	background-repeat: no-repeat;
	background-position: 10px 172px;
}

/* The Flash animation */
#flash {
	position: absolute;
	top: 4px;
	left: 377px;
	width: 379px;
	height: 248px;
	margin: 0px; border: 0px; padding: 0px;
	z-index: 99;
	background-image: url(../images/design/flash-bg.jpg); /* Background image shows first picture in case user has no Flash. Visable in Firefox but not IE */
	background-repeat: no-repeat;
	background-position: top left;
}

/* Black bar at bottom of flash box */
#flashbox-btm {
	position: absolute;
	top: 255px;
	left: 0px;
	width: 760px;
	height: 13px;
	margin: 0px; border: 0px; padding: 0px;
	background-color: #000000;
}

#flashbox h1 {
	color: #333365;
	font-size: 30px;
	line-height: 30px;
	font-weight: normal;
	margin: 0px;
	border: 0px;
	padding: 12px 2px 0px 13px;
}

#flashbox p, #flashbox p.p2 {
	color: #000000;
	font-size: 14px;
	line-height: 17px;
	font-weight: normal;
	margin: 0px;
	border: 0px;
	padding: 16px 403px 0px 22px;
}

#flashbox p.p2 {
	font-weight: bold;
	padding: 4px 403px 0px 22px;
}

/* Call me form in flash box */
#call-me {
	position: absolute;
	top: 170px;
	left: 59px;
	width: 300px;
	height: 88px;
	margin: 0px; border: 0px; padding: 0px;
}

div.call-row, div.call-row2 {
	width: 300px;
	height: 18px;
	margin: 0px; border: 0px;
	padding: 0px 0px 2px 0px;
	clear: both;
	background-image: url(../images/design/call-input.gif);
	background-repeat: no-repeat;
	background-position: top right;
	font-size: 12px;
	line-height: 17px; /* font-size and line height set label text position relative to input field */
	color: #000000;
}
/* Row without the input box background image */
div.call-row2 {background-image: none;}

/* labels */
div.call-row span.call-lbl, div.call-row2 span.call-lbl {
  float: left;
  width: 96px;  /* Width to input field = 100px. 96px gives a gap before input field */
  text-align: right;
}

/* data input fields */
div.call-row span.call-fld, div.call-row2 span.call-fld {
  float: right;
  width: 196px; /* Width = 200px minus margin right 2 - space on left 2 to stop input text touching left border = 196px*/
  text-align: left;
  margin-right: 2px;	/* Stops text in input box touching right border of background image */
}

#call-me input {
	width: 100%;
	margin: 0px; border: 0px; padding: 0px;
	background-color: transparent !important; /* !important removes the browser CSS-styled background color added by the Google toolbar, etc */
}

/* Radio buttons for location - not within div call-me to avoid the input = width: 100% */
#call-loc-uk, #call-loc-aus {
	position: absolute;
	top: 228px; /* Top setting for IE which incorrectly adds 3 pixels */
	left: 185px;
	width: 200px;
	height: 18px;
	margin: 0px; border: 0px; padding: 0px;
}
/* Top setting for compliant browsers */
html>body #call-loc-uk, html>body #call-loc-aus {top: 231px;}

#call-loc-aus {left: 252px;}
#call-loc-uk input, #call-loc-aus input, #call-loc-uk label, #call-loc-aus label {
	margin: 0px; border: 0px; padding: 0px;
	font-size: 12px;
	line-height: 12px;
}
#call-loc-uk input, #call-loc-aus input {width: 13px;}

/* Flags by location radio buttons */
#call-uk-flg, #call-aus-flg {
	position: absolute;
	top: 232px;
	left: 160px;
	/*width: 200px;
	height: 18px;*/
	margin: 0px; border: 0px; padding: 0px;
}
#call-aus-flg {left: 228px;}

/* Submit button */
#call-me-btn {
	position: absolute;
	top: 231px;
	left: 320px;
	width: 40px;
	height: 20px;
	font-size: 12px;
	line-height: 12px;
	margin: 0px; padding: 0px
}
/* Adding bottom padding to centre text within button in standards-compliant browsers */
html>body #call-me-btn {padding: 0px 0px 2px 0px;}