* {
   padding:0;
   margin:0;
}

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address, hr {
    margin-bottom: 0.8em; 
}

html, body{
	margin: 0px;
	padding: 0px;
	border: 0px;
}

img {border:none;}

/*
Basic styling for text etc. used by older browsers such as NN4.
*/

body {
	background: #fff;
	text-align: center;
	color: #666666;
	font-size: 62.5%; 
	font-family: Arial, Helvetica, sans-serif ;
	margin: 0 auto;
	height: auto;
	padding: 0;
	width:960px;
}

p {
	color:#666;
  	font-size:1.3em;
	line-height: 14pt;
	margin-bottom: 0.8em; 
}

td {
	color:#666;
  	font-size:1.3em;
	line-height: 14pt;
	margin-bottom: 0.8em;
	 
}

ul, ol {
	font-size:1.4em;
	line-height: 14pt;
	margin-bottom: 1.0em; 
}

ol {margin-left: 20px;}

a:link {
	text-decoration:none ;
	color:#be1e2d;
	font-weight: normal ;
}

a:visited {
	text-decoration:none ;
	color:#be1e2d;
	font-weight: normal ;
}

a:active{
	text-decoration:none ;
	color:#999999;
	font-weight: normal ;
}

a:hover {
	text-decoration:none ;
	color:#666666;
	font-weight: normal ;
}

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.4em;
font-weight: normal;
color: #be1e2d;
margin-bottom: 0.3em; 
}
  
h2 {
color:#be1e2d;
font-weight:bold;
font-size: 1.7em;
line-height: 16pt;
font-family: Arial, Helvetica, sans-serif;
}

h3 {
color:#be1e2d;
font-weight:bold;
font-size: 1.7em;
line-height: 16pt;
font-family: Arial, Helvetica, sans-serif;
}

h4 {
color:#be1e2d;
font-weight: normal;
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
}
h4 a:link {
color:#be1e2d;
font-weight: normal;
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
}

h4 a:hover {
	color:#666;
font-weight: normal;
font-size: 1.4em;
font-family: Arial, Helvetica, sans-serif;
}


fieldset {border: solid 0 transparent;}
legend {display: none;}
label {display: block; width: auto; clear:both;}
/*input {height: auto;font-weight:bold;float: left; }
input[type="text"] {width: 240px; font-family:Arial, Helvetica, sans-serif; font-weight: normal; padding: 2px;}*/
input.radio, input.checkbox, input.submit { width: auto;}
input.checkbox {float: left; margin-right: 1em;}

div.hr {
  height: 1px;
  background: none;
  border-top:1px dashed #ccc;
  margin: 10px 0 10px 0;
  display: block;
  width: 100%;
  clear:both;
}
div.hr hr {
  display: none;
}



/* #######  Wrapper	####### 
###################################### */
 
.wrapper {
	background:#fff ;
	display: block;
	float:left;
	height:100%;
	width:960px;
	border-left: 10px solid #fff;
	border-right: 10px solid #fff;
	text-align: left;
	position:relative;
}


/* ####### Header ####### 
###################################### */

#header {
	background:#fff;
	display: block;
	float:left;
	clear: left;
	height:100px;
	width:960px;
	margin: 0 auto;
	left:0;
	position:absolute;
	top:0;
	z-index: 999;
}


/* ####### Top Navigation ####### 
###################################### */

#navcontainer{ float: right; margin: 10px 15px 0 0; }

ul#navlist
{
list-style: none;
padding: 0;
margin: 0;
font-size: 1.1em;
color: #666;
}

ul#navlist li 
{
display: inline;}

ul#navlist li a
{
display: inline;
padding: 0;
margin: 0;
color: #666;
} 

ul#navlist li a:hover
{
	
	color:#2e3191;
} 

/* ####### Logo ####### 
###################################### */

#logo{
	width: 210px;
	height: 80px;
	position: relative;
	margin-top: 30px;
	margin-left:5px;
	float: left;
}

#logo span, #logo span a {
	background: url('../_images/SimplySupplyLogo(210).gif') no-repeat; 
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	left: 0;
	top: 0;
	cursor: pointer;
}

/* ####### Content ####### 
###################################### */

#content {margin-top: 120px;}
#content #data {display: block; float: left; width: 450px; background:#fff; height:auto; margin-left: 30px; margin-bottom: 30px;}
#content #datawide {display: block; float: left; width: 650px; background:#fff; height:auto; margin-left: 30px; margin-bottom: 30px;}
#content #data a:visited, #content #datawide a:visited  {color:#be1e2d !important;}
#content #data p, #content #datawide p {color: #666;}
#content #data p.drk, #content #datawide p.drk {color: #555}
#content #data ul,#content #datawide ul {margin-left: 30px;}

#content #left-col {display: block; float: left; width: 230px !important; background:#fff; height:auto; min-height: 600px; }
#content #left-col ul {list-style-type: none; padding-bottom: 10px;  float:left; border-bottom:1px solid #2e3191;}
#content #left-col ul li {background: url(../_images/menuitem-bg.jpg) no-repeat; width: 231px; height: 41px; border-bottom: 1px solid #fff; float:left;}
#content #left-col ul li a {color: #2e3191; text-decoration: none; display: block; padding: 11px 0 0 40px; display:block; font-size: 0.9em; line-height: 1.2em;}

#content #left-col ul li a:hover {color: #2e3191; text-decoration:underline; background: url(../_images/menuitem-bgactive.jpg) no-repeat;}
#content #left-col ul li a:visited {color: #2e3191!important;}
#content #left-col ul li.wrap a {padding: 5px 0 0 40px; }
#content #left-col ul li.active {background: url(../_images/menuitem-bgactive.jpg) no-repeat; width: 231px; height: 41px; border-bottom: 1px solid #fff; float:left;}

/* ####### Strapline ####### 
###################################### */

#content .strapline {margin-bottom: 10px; clear:both; width: 960px; height: 63px; display:block; padding-top:17px; background: url(../_images/Strap-Blank.jpg) no-repeat;}
#content .strapline span {text-indent: 45px; display:block; color:#FFF; font-style:normal; font-family:Verdana, Geneva, sans-serif;  font-variant:normal;}
/*#home #content .strapline {background: url(../_images/Strap-Welcome.jpg) no-repeat;}
#business #content .strapline, #blog #content .strapline {background: url(../_images/get-to-the-heart-of-your-markets.gif) no-repeat;}
#LookingforStaff #content .strapline {background: url(../_images/Strap-LookingforStaff.jpg) no-repeat;}
#LookingforWork #content .strapline {background: url(../_images/Strap-LookingforWork.jpg) no-repeat;}
#aboutus #content .strapline {background: url(../_images/Strap-Aboutus.jpg) no-repeat;}
#contactus #content .strapline {background: url(../_images/Strap-ContactUs.jpg) no-repeat;}
#Testimonials #content .strapline {background: url(../_images/Strap-Testimonials.jpg) no-repeat;}
#CurrentVacancies #content .strapline {background: url(../_images/Strap-CurrentVacancies.jpg) no-repeat;}
#UsefulInfo #content .strapline {background: url(../_images/Strap-UsefulInfo.jpg) no-repeat;}

/* ####### Right Image ####### 
###################################### */

#content .right-image {display: block; float: right;  width: 230px; height: 613px;}
#LookingforWork #content .right-image {background:  url(../_images/RightImage1.jpg) no-repeat; }
#aboutus #content .right-image {background:  url(../_images/RightImage6.jpg) no-repeat; }
#contactus #content .right-image {background:  url(../_images/RightImage6.jpg) no-repeat; }
#LookingforStaff #content .right-image {background:  url(../_images/RightImage5.jpg) no-repeat; }
#CurrentVacancies #content .right-image {background: url(../_images/RightImage4.jpg) no-repeat; }
#Testimonials #content .right-image {background: url(../_images/RightImage3.jpg) no-repeat; }
#UsefulInfo #content .right-image {background: url(../_images/RightImage2.jpg) no-repeat; }

/* ####### Adverts on left col ####### 
###################################### */
.advert {display: block; float: left; }
.advert h3 {display: block; width: 232px;}
.advert h3 span {display: block; text-indent: -9999px; }
.advert p {margin:-5px 0 0 19px; float: left; font-size: 1.2em; width: 200px; padding: 0; line-height: 1.2em;}
.advert p a {color: #fff !important; text-decoration: underline !important;}
.advert p a:hover {color: #fff !important; text-decoration:none !important;}

.advert.callus {background-color: #fff; height:180px;}
.advert.buy  {background-color: #72a492;}
.advert.download {background-color: #b5bbd4;}
.advert.special {background-color: #ef4135;}

.advert.callus h3 {background:  url(../_images/callusbox.jpg) no-repeat; height:180px;}


/* ####### Breadcrumb ####### 
###################################### */

#breadcrumb, .breadcrumb {margin:0 0 10px 0;display: block; float:left; width: 100%;}
#breadcrumb p, .breadcrumb p {font-size: 1.2em; line-height: 1.2em; padding: 0; margin: 0;}

#footer {background: #fff; display: block; width: 960px; float: left;  margin-right: -3px;  }

#FrontSlider ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#FrontSlider ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 0px;
  
}

#FrontSlider ul li a{
  display: block;
  overflow: hidden;
  height: 280px;
  width: 220px;
  
  background-image:url(../_images/Slider-Left-bg.jpg);
  background-position:right;
  background-repeat:no-repeat;
  
}
#FrontSlider ul li a a{
  
  
}

#FrontSlider #a1{
  width: 460px;
}

#FrontSlider ul li img{
  position: absolute;
  border: none;
}

#FrontSlider ul li p{
  margin: 0;
  padding:20px 20px 0 20px;
  width: 210px;
  display: block;
  margin-left: 215px;
  font-size:0.9em;
}



#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		display: block;
		float: left;
		padding: 0;
		margin: 0;
		
	}
	
	
	
	
#makeMeScrollable.hover
	{
		cursor:hand;
		
	}
	
	
	/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 75 pixels 
	   and if there is room the will grow and occupy 10% 
	   of the scrollable area (20% combined). 
	   Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 160px;
	/* There is a big background image and it's used to 
	solve some problems I experienced in Internet Explorer 6. */
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first cursor url is for Firefox and other 
	    browsers, the second is for Internet Explorer */
	cursor: url(../_images/rotator/cursors/cursor_arrow_left.cur), url(../_images/rotator/cursors/cursor_arrow_left.cur),w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image:url(../_images/rotator/arrow_left.gif);		
	background-repeat: no-repeat;
	/* Standard CSS3 opacity setting */
	opacity: 0.35; 
	/* Opacity for really old versions of 
	   Mozilla Firefox (0.9 or older) */
	-moz-opacity: 0.35;
	/* Opacity for Internet Explorer. */
	filter: alpha(opacity = 35);
	/* Use zoom to Trigger "hasLayout" in 
	   Internet Explorer 6 or older versions */	
	zoom: 1; 
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 160px;
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../_images/rotator/cursors/cursor_arrow_right.cur), url(/_images/rotator/cursors/cursor_arrow_right.cur),e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	
	background-image:url(../_images/rotator/arrow_right.gif);
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and 
   height as the containing element (div). Overflow 
   is hidden because you don't want to show all of 
   the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}


/*
 * SimpleModal Basic Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2008 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: basic.css 162 2008-12-01 23:36:58Z emartin24 $
 *
 */

/* Overlay */
#simplemodal-overlay {background-color:#aaaaaa; cursor:wait;}

/* Container */
#simplemodal-container {height:180px; width:320px; background-color:#fff; border:1px solid #000000; -moz-border-radius: 5px; }

#simplemodal-container a.modalCloseImg {background:url('/_images/x.png') no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; left:-18px; cursor:pointer;}
#simplemodal-container #basicModalContent {padding:8px;}

/* 'Login' Button */
#submit { margin: 5px; padding: 5px; float: left; width: 50px; background-color: white; }

#notification_error { color: red; height: auto; padding: 4px; text-align: center; }

#login_response { overflow: auto; }
 
#ajax_loading { display: none; font-size: 12px; font-family: Tahoma; }

#logged_in { padding: 5px; margin: 23px 0 100px 43px; padding: 5px; text-align: center; width: 400px; }

#status { margin-top: 20px; width: 310px; }

label { width: 80px; padding-left: 20px; margin: 5px; float: left; text-align: left; }  

/* Input text */
input { margin: 5px; padding: 0px; float: left; border: 1px solid #cdcdcd; background-color: white; -moz-border-radius: 2px;  }

 

.textbox { border: 1px solid #999999;  border-top-color: #CCCCCC;  border-left-color: #CCCCCC; color: #333333;    }