/* Page Styles --------------------------------------- */

/* Layout Stylesheet */ 

/* BODY Element - should not be edited 
--------------------------------------------------------------- */
body{
 	margin: 0;	/* sets the margins of the pages to 0 */
	padding:0;  /* sets the padding values of the pages to 0 */
 	background:#ffffff; /* sets the background of the pages to white */
 	font-family:Helvetica, Arial, Verdana, sans-serif; /* sets the fonts of the site */
	color: #333333; /* sets the font colour to dark grey */
 	font-style: normal; /* sets the font style to normal - i.e. not bold or italic */
	font-size:62.5%; /* sets the font size to normal 12pt text */
}	

 
/* CENTRE COLUMN Element - This is the main text container - it should not be edited 
--------------------------------------------------------------- */
#c-block {
 	width:100%; /* sets the centre column to 100% screen width */
 	z-index:1; /* sets the layering to the lowest value ie. furthest back */
 	background:#ffffff; /* sets the background of the centre block to white */
	font-size: 1.2em; /* sets the font size to normal 12pt */
 	color: #333333; /* sets the font colour to dark grey */
 	height:80%; /* sets the height of the centre column */
}

/* HEADER Element - sets the space at the top of the page - should not be edited 
--------------------------------------------------------------- */
#hdr{
 	height:70px; /* sets the height of the header area */
 	border-bottom:0px solid #000000; /* sets a border value */
 	width:100%; /* sets the width of the border to 100% of page width */
 	background:#ffffff; /* sets the background of the border to white */
 	color: #333333; /* sets the font colour to dark grey */
 	margin:0; /* sets the margin to 0 */
  }
  
/* BANNER Element - places the banner at the top right of the page 
--------------------------------------------------------------- */
#banner {
	background: url(../gfx/banner.jpg) no-repeat top right; /* sets which image to use */
	background-color: #ffffff; /* sets the background colour to white */
	color:#000000; /* sets the text colour to white */
	float:right; /* floats the image to the right of the page */
	width:100%; /* sets the width of the banner to 100% */
	right:0px; /* sets the right margin to 0 */
	top: 0px; /* sets the top margin to 0 */
	height: 80px; /* sets the height of the banner image */
	position: absolute; /* sets the position so the element does not move */
}

/* DESA LOGO Element - places the DESA Logo at the top left of the page - shouldn't need to be edited 
--------------------------------------------------------------- */
#desaLogo {
	background: #ffffff url(../gfx/logo.jpg) no-repeat; /* inserts the logo as a background image */
	position: absolute;  /* states that the position is to be fixed */
	float: left; /* states that the image is to stay to the left of the page */
	left: 0px; /* states that the image should be 0px from the page edge */
	top: 0px; /* states the the image should be 0px from the page top */
	width: 33.2em; /* width of the image */
	height:7em; /* height of the image */
	z-index: 1000; /* states that the image should be placed above all other elements */
	color:#000000; /* text colour */
	border: 0px; /* image border */
}

/* CENTRE COLUMN FORMATTING Element - formats the centre column margins and height - not to be edited 
--------------------------------------------------------------- */
#c-col{
 	margin:22px 100px 0 100px; /*top right bottom left */
	position:relative;
	background-color:#ffffff;
	font-size:1.2em;
	color: #333333;
	padding: 5px 5px 5px 5px;
	min-height:30.3em;
	height:10%;
}

/* CENTRE COLUMN SPACER Element - ensures the centre column doesn't drop below a mimimum height - not to be edited 
--------------------------------------------------------------- */
#c-col-spacer {
	background-image: url(../gfx/spacer.gif);
	height:30.3em;
	width:0.1em;
	float:right;
}

/* FOOTER BAND Element - formats the footer band
--------------------------------------------------------------- */
#ftr {
	 width:100%; /* width of the footer relative to the page */
	 height:45px; /* height of the footer */
	 border: solid #000000; /* border type and colour */
	 border-width:1px 0; /* border width */
	 background-color:#eeeeee; /* background colour - currently grey */
	 font-size: 1.1em; /* text size */
	 color: #333333; /* text colour */
	 margin:0px; /* margins */
}

/* FOOTER PARAGRAPH Elements - formats the footer text 
--------------------------------------------------------------- */ 
#ftr-para {
	padding-left:105px; /* creates the left margin */
}

#ftr-para b {
	color:#990066; /* footer text colour */
	background-color:#eeeeee; /* background colour of footer text */
}
 

/* -------------------------------------------------------------------------------------
Content and Menu headings
---------------------------------------------------------------------------------------- */

/* Headings used for image replacement on titles - these elements hide the text contained 
within from graphical browsers and display the graphical titles instead */
h1 span { 
	display: none; 
}

h2 span { 
	display: none; 
}

h3 span { 
	display: none; 
}

h4 span { 
	display: none; 
}

h5 span { 
	display: none; 
}

/* General content headings - used for sub-titles - h1 is the largest - h5 the smallest */
h1 { 
	font-family: arial, helvetica, verdana,sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #990066;
	background-color:#ffffff;
	position: relative;
	top: 2.5em;
	left: 0px;
}

h2 { 
	font-family: arial, helvetica, verdana,sans-serif;
	font-size: 110%;
	font-weight: bold;
	color: #990066;
	background-color:#ffffff;
	position: relative;
	top: 2.5em;
	left: 0px; 
}

h3 { 
	font-family: arial, helvetica, verdana,sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #990066;
	background-color:#ffffff;
	position: relative;
	top: 2.5em;
	left: 0px;
}

h4  { 
	font-family: arial, helvetica, verdana,sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #990066;
	background-color:#ffffff;
	position: relative;
	top: 2.5em;
	left: 0px;	 
}

h5  { 
	font-family: arial, helvetica, verdana,sans-serif;
	font-size: 90%;
	font-weight: bold;
	color: #990066;
	background-color:#ffffff;
	position: relative;
	top: 2.5em;
	left: 0px;	 
}

/* Element for highlighting a particular word or sentance in bold fuscha pink */
.highlighttext {
	color:#CC0099; /* text colour */
	background-color:#ffffff; /* background colour */
	font-weight:bold; /* makes text bold */
}

/* Element to centre text */
.centredtext {
	text-align:center;
}


/* -----------------------------------------------------------------------------------
Elements which replace headings with images and format paragraphs and headings
-------------------------------------------------------------------------------------- */

/* DESA Welcome Page Message 
------------------------------------------------------------------ */
#desaWelcome h3 {
	background: transparent url(../gfx/title-welcome.jpg) no-repeat; /* link to graphic */
	position: relative; /* position in relation to surrounding text */
	top: 1em; /* number of pixels from top of original location */
	left: -5px; /* number of pixels left of original location */
	width: 32.3em; /* width of image */
	height: 1.9em; /* height of image */
}

#desaWelcome p {
	position: relative;
	top: 0px;
	left: 0px;
}

/* DESA Services Box on Welcome Page
------------------------------------------------------------------ */
#desaServices {
	position: absolute;
	left:0%;
	width:23%;
	top:14em;
	height: 15em;
	padding-left: 0.3em;
	background:transparent;
}

#desaServices h4{
	background: transparent url(../gfx/image-services.jpg) no-repeat;
	position: relative;
	top: -1.5em;
	left: 0.1em;
	width: 140px;
	height: 76px;
} 

#desaServices h3{
	background: transparent url(../gfx/title-services.jpg) no-repeat;
	position: relative;
	top: 0em;
	left: 0px;
	width: 8.8em;
	height: 1.9em;
} 

#desaServices p {
	position: relative;
	top: -3em;
	left: 0.2em;
	width: 140px;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	font-size:0.8em;
}

p.more {
	background: url(../gfx/bullet-arrow.jpg) no-repeat 130px 4px;
	margin-right: 10px;
	line-height: 20px;
	text-align:right;
	position: relative;
}



/* DESA Capabilities Box on Welcome Page
------------------------------------------------------------------ */
#desaCapabilities {
	position: absolute;
	left:27%;
	width:23%;
	top:14em;
	height: 15em;
	padding-left: 0.3em;
	background:transparent;
}

#desaCapabilities h3{
	background: transparent url(../gfx/title-capabilities.jpg) no-repeat;
	position: relative;
	top: 0em;
	left: 0px;
	width: 8.8em;
	height: 1.9em;
} 

#desaCapabilities h4{
	background: transparent url(../gfx/image-capabilities.jpg) no-repeat;
	position: relative;
	top: -1.5em;
	left: 0.1em;
	width: 140px;
	height: 76px;
} 

#desaCapabilities p {
	position: relative;
	top: -3em;
	left: 0.2em;
	width: 140px;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	font-size:0.8em;
}

/* DESA Markets Box on Welcome Page
------------------------------------------------------------------ */

#desaMarketsf {
	position: absolute;
	left:53%;
	width:23%;
	top:14em;
	height: 15em;
	padding-left: 0.3em;
	background:transparent;
	/*border:1px solid #000;*/
}

#desaMarketsf h3{
	background: transparent url(../gfx/title-marketsf.jpg) no-repeat;
	position: relative;
	top: 0em;
	left: 0px;
	width: 8.8em;
	height: 1.9em;
} 

#desaMarketsf h4{
	background: transparent url(../gfx/image-markets.jpg) no-repeat;
	position: relative;
	top: -1.5em;
	left: 0.1em;
	width: 140px;
	height: 76px;
} 

#desaMarketsf p {
	position: relative;
	top: -3em;
	left: 0.2em;
	width: 140px;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	font-size:0.8em;
}

/* DESA Contact Us Box on Welcome Page
------------------------------------------------------------------ */


#desaContact {
	position: absolute;
	left:80%;
	width:23%;
	top:14em;
	height: 15em;
	padding-left: 0.3em;
	background:transparent;
	/*border:1px solid #000;*/
}

#desaContact h3{
	background: transparent url(../gfx/title-contactus.jpg) no-repeat;
	position: relative;
	top: 0em;
	left: 0px;
	width: 8.8em;
	height: 1.9em;
} 

#desaContact h4{
	background: transparent url(../gfx/image-fcontact.jpg) no-repeat;
	position: relative;
	top: -1.5em;
	left: 0.1em;
	width: 140px;
	height: 76px;
} 

#desaContact p {
	position: relative;
	top: -3em;
	left: 0.2em;
	width: 140px;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	font-size:0.8em;
}

/* DESA Services: Machining
------------------------------------------------------------------------- */
#desaMachining h3{
	background: transparent url(../gfx/title-machining.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 255px;
	height: 19px;
} 

#desaMachining h4{
	background: transparent url(../gfx/image-machining.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaMachining p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Services: Design
------------------------------------------------------------------------- */
#desaDesign h3{
	background: transparent url(../gfx/title-design.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 255px;
	height: 19px;
} 

#desaDesign h4{
	background: transparent url(../gfx/image-safetyarm.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaDesign p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Services: Refurbishment
------------------------------------------------------------------------- */
#desaRefurb h3{
	background: transparent url(../gfx/title-refurb.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaRefurb h4{
	background: transparent url(../gfx/image-refurb.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaRefurb p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Services: Manufacture
------------------------------------------------------------------------- */
#desaManufacture h3{
	background: transparent url(../gfx/title-manufacture.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaManufacture h4{
	background: transparent url(../gfx/image-granulator.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaManufacture p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Services: Service
------------------------------------------------------------------------- */
#desaService h3{
	background: transparent url(../gfx/title-service.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaService h4{
	background: transparent url(../gfx/image-machine.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaService p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Capabilities: Plant
------------------------------------------------------------------------- */
#desaPlant h3{
	background: transparent url(../gfx/title-plant.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaPlant h4{
	background: transparent url(../gfx/image-colchester2000.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaPlant p {
	position: relative;
	top: 1em;
	left: 0px;
}

/* DESA Markets: Markets
------------------------------------------------------------------------- */
#desaMarkets h3{
	background: transparent url(../gfx/title-markets.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaMarkets h4{
	background: transparent url(../gfx/image-granulator2.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaMarkets p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Markets: Customers
------------------------------------------------------------------------- */
#desaCustomers h3{
	background: transparent url(../gfx/title-customers.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaCustomers h4{
	background: transparent url(../gfx/image-customers.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaCustomers p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Markets: Gallery
------------------------------------------------------------------------- */
#desaGallery h3{
	background: transparent url(../gfx/title-gallery.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 248px;
	height: 19px;
} 

/* DESA Contact: Contact Details
------------------------------------------------------------------------- */
#desaContact2 h3{
	background: transparent url(../gfx/title-contact.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaContact2 h4{
	background: transparent url(../gfx/image-contactus.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaContact2 p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Contact: How to Find Us
------------------------------------------------------------------------- */
#desaFindus h3{
	background: transparent url(../gfx/title-findus.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaFindus h4{
	background: transparent url(../gfx/image-locationmap.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaFindus p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Contact: Enquiry Form
------------------------------------------------------------------------- */
#desaEnquiry h3{
	background: transparent url(../gfx/title-enquiry.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaEnquiry h4{
	background: transparent url(../gfx/image-print.gif) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 70px;
	height: 20px;
}

#desaEnquiry p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

/* DESA Services: Link from Top Menu and Home Page
------------------------------------------------------------------------- */

#desaFront-services h3{
	background: transparent url(../gfx/title-services-top.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
}

 #desaFront-services h4{
	background: transparent url(../gfx/image-controller.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaFront-services p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

#desaFront-services dt {
	font-weight:bold;
}

#desaFront-services dd {
	width: 400px;
}

/* DESA Capabilities: Link from Top Menu and Home Page
------------------------------------------------------------------------- */

#desaFront-capabilities h3{
	background: transparent url(../gfx/title-capabilities-top.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaFront-capabilities h4{
	background: transparent url(../gfx/image-colchester2000.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaFront-capabilities p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

#desaFront-capabilities dt {
	font-weight:bold;
}

#desaFront-capabilities dd {
	width: 400px;
}

/* DESA Markets: Link from Top Menu and Home Page
------------------------------------------------------------------------- */

#desaFront-markets h3{
	background: transparent url(../gfx/title-markets-top.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
} 

#desaFront-markets h4{
	background: transparent url(../gfx/image-machine2.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
}

#desaFront-markets p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

#desaFront-markets dt {
	font-weight:bold;
}

#desaFront-markets dd {
	width: 400px;
}

/* DESA Contact: Link from Top Menu and Home Page
------------------------------------------------------------------------- */

#desaFront-contact h3{
	background: transparent url(../gfx/title-contact-top.jpg) no-repeat;
	position: relative;
	top: 1em;
	left: -5px;
	width: 323px;
	height: 19px;
}

#desaFront-contact h4{
	background: transparent url(../gfx/image-contactus.jpg) no-repeat;
	position: relative;
	float:right;
	top: 0em;
	right: 0.1em;
	width: 283px;
	height: 371px;
} 

#desaFront-contact p {
	position: relative;
	top: 1em;
	left: 0px;
	width: 400px;
}

#desaFront-contact dt {
	font-weight:bold;
}

#desaFront-ccontact dd {
	width: 400px;
}


/* elements for non graphical browsers
----------------------------------------------- */

/* used to hide the university and school titles from graphical browsers */

#pageHeader {
	display: none;
}

/* CSS Dropdown Menu Styles --------------------------------------- */

/* minimum menu requirements for functionality */

.topmenuul{
	position:absolute;
	list-style-type:none;
	margin:0;
	padding:0;
	z-index:1000;
}

.topmenuli{
	list-style-type:none;
	float:right;
	text-align:center;
	z-index:1000;
}

.topmenutitle{
	display:block;
	width:100px;
	z-index:1000;
}

.submenuul{
	list-style-type:none;
	position:absolute;
	margin: 0;
	padding:0;
	display:none;
	z-index:1000;
}

.submenuli a{
	display:block;
	width:93px;
	z-index:1000;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
	display: block;
	z-index:1000;
}

#dmenu li>ul { 
	top: auto;
	left: auto;
	z-index:1000;
}

#content {
	clear: left;
	z-index:1000;
}

/* menu design --------------------------------------------------------------------------------- */

#menuBackground {
	position: absolute;
	top:70px;
	width:100%;
	height:17px;
	margin: 0em -1em 0em -1em;
	padding: 0.1em 0em 0.3em 1em;
	color:#FFFFFF;
	background-color: #CC0099;
	border-top: 1px solid #cccccc;
	border-right: 0px;
	border-bottom: 1px solid #cccccc;
	border-left: 0px;
	z-index:1;
}

#dmenu {
	position:absolute;
	right: 0em;
	top: 0px;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size:12px;
	color:#ffffff;
	background-color:#cc0099;
	font-weight:bold;
	text-transform:lowercase;
	z-index:1000;
}

.topmenuul {
	z-index:1000;
}

.topmenuli a:hover{
	text-decoration: underline;
	color: #ffffff;
	background-color:#cc0099;
	z-index:1000;
}

.topmenutitle {
	text-indent:3px;
	text-decoration: none;
	color:#FFFFFF;
	border-left:1px solid #cccccc;
	border-top:0px;
	padding:3px;
	line-height:14px;
	background-color:#cc0099;
	z-index:1000;
}

.submenuul {
	margin-top:-1px;
	background-color:#F7F7F7;
	color:#990066;
	background-position: top left;
	background-repeat: repeat-x;
	border-top:1px solid #000000;
	border-bottom:2px solid #000000;
	border-right:2px solid #000000;
	border-left:7px solid #990066;
	z-index:1000;

}

.submenuli a{
	padding:3px;
	text-decoration: none;
	color: #990066;
	background-color:#f7f7f7;
	z-index:1000;
}

.submenuli a:hover{
	text-decoration: none;
	background-color:#eeeeee;
	color: #000099;
	z-index:1000;
}

/* gallery styles ----------------------------------------------------------------------------- */

a.gal img {
	border : 1px solid #4E4E4E;
	filter : gray;
}

a.gal img {
	border : 1px solid #555555;
	filter : gray;
}
a.gal:hover img {
	border : 1px solid #555555;
	filter : none;
}
a.activegal img {
	border : 1px solid #555555;
	filter : none;
}

TD {
	FONT-FAMILY: verdana,arial,sans-serif;
	FONT-SIZE: 10px;
	COLOR: #4E4E4E;
}

TD.foto {
	background-image : url(images/loading.gif);
	background-position : bottom;
	background-repeat : no-repeat;
}