@charset "utf-8";
/* styles for saralan.co.uk */
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background: #fff;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #666666;
}
.thrColFixHdr #container { 
	width: 980px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: none;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 
.thrColFixHdr #header { 
	background: #ffffff; 
	padding: 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.thrColFixHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 3px 10px 3px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	color: #469FAB;
	font-size: 20pt;
	/*letter-spacing: 8px;*/
}

.thrColFixHdr #footer h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

#logoStrapline {
	text-align: left;
	width: 980px;
	height: 100px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#logoFloat {
	float: left;
}

#headerGraphic {
	margin-top: 10px;
	margin-bottom: 14px;
}

#headerGraphic img {
	border: 1px solid #666666;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

h2 {
	font-weight: 400;
	font-size: 14pt;
}

a {
	color: #000066;
}

a:hover {
	color: #6363A1;
}

li a {
	color: #ffffff;
	margin: 0px;
	padding: 0px;
}

li a:hover {
	color: #ffffff;
	margin: 0px;
	padding: 0px;
}

#mainContent {
	width: 980px;
	margin-bottom: 14px;
}

/* -2 + -6 from H & W to accommodate border width, padding */
#sidebarLh {
	float: left;
	width: 242px;
	height: 337px;
	padding: 3px;
	color: #666666;
	background-color: #fff;
	border: 1px solid #666666;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* 2 subtracted from H & W to accommodate border width */
#sidebarRh {
	float: left;
	width: 242px;
	height: 337px;
	padding: 3px;
	background-color: #fff;
	border: 1px solid #666666;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-right: 0px;
}

#flash {
	float: left;
	width: 460px;
	height: 345px;
	margin-left: 10px;
	margin-right: 10px;
}

#lowerContent {
	background: url(images/bg-185.png) repeat-x;
	height: 185px;
	width: 980px;
	margin-top: 0px;
}

#lowerContent h3 {
	 padding-left: 3px;
	 font-size: 10pt;
}

#bridge {
	height: 14px;
	width: 980px;
}

#bridge2 {
	height: 1px;
	width: 980px;
}

#bridge3 {
	height: 14px;
	width: 980px;
}

.thrColFixHdr #footer { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background-color: #B6D9DE;
	height: 75px;
	font-size: 8pt;
	color: #333333;
	border-top: 1px solid #666666;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
	/* text-align: center;*/

} 
.thrColFixHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#productsLh {
	 clear: left;
	 float: left;
	 width: 250px;
	 height: 150px;
	 font-size: 8pt;
}

#productsCentre {
	 float: left;
	 width: 460px;
	 height: 150px;
	 margin-left:: 10px;
	 margin-right: 10px;
	 font-size: 8pt;
}

#productsRh {
	 float: left;
	 width: 250px;
	 height: 150px;
	 font-size: 8pt;
}

.products li {
	padding-bottom: 7px;
}

/* chromestyle navigation menu style below */
.chromestyle{
width: 978px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
font-size: 12px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #666666;
/* add round corners to main container - not < IE9 */
/* firefox */
-moz-border-radius: 5px;
/* safari, chrome, opera */
border-radius: 5px;
width: 100%;
background: url(images/chromebg5a.png) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
/* set height - optional */
/* height: 36px; */
}

.chromestyle ul li{
display: inline;
vertical-align: middle;
}

.chromestyle ul li a{
color: #000066;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #666666; /*THEME CHANGE HERE*/
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(images/chromebg5a-over.png) center center repeat-x; /*THEME CHANGE HERE*/
color: #6363A1;
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #000066; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border: 1px solid #000066; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #6363A1;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #B6D9DE;
color: #ffffff;
}
/* chromestyle navigation menu style above */