/* Client: Ramsden & Whale Limited---------------------------- */
/* 																				*/
/* 	css coding produced by Clive Moore MA							*/
/* 	www.ma-design.com														*/
/* 	tel: 01902 344234														*/
/* 																				*/
/* 	May 2006  	    														*/
/*------------------------------------------------------------ */



body	{ 	background-color: none; width: 100%; height: 100%; margin: 0 0 0 0;
			font-family: Verdana, sans serif;
			font-size: 10pt;
			line-height: 14pt;
			font-style: normal;
			font-weight: normal;
			text-align: left;
			color: black;}
			
img 	{	border: none; cursor: hand; }

a:visited, a:active, a:link { color: yellowgreen; text-decoration: none }
a:hover	{color: yellow; text-decoration: none}

			
/* APPLY THE SCROLL BAR STYLE TO THE HTML TAG - WILL ENSURE THAT THE PAGE VALIDATES */
/*
html { 	SCROLLBAR-FACE-COLOR: #43AD3E;
			SCROLLBAR-HIGHLIGHT-COLOR: #3F67AD;
			SCROLLBAR-SHADOW-COLOR: black;
			SCROLLBAR-3DLIGHT-COLOR: #3F67AD;
			SCROLLBAR-ARROW-COLOR: yellow;
			SCROLLBAR-TRACK-COLOR:  #3F67AD;
			SCROLLBAR-DARKSHADOW-COLOR: black;} 	
*/
		
#content { width:100%; height: 100%; }

#background
			{ display: none; 
			position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; z-index: 0;}

			
/* --- classes for address text --*/

#address	{ position: absolute; right: 4%; top: 850px; width: 380px; z-index: 1;}

#address .ad_company {
			font-size: 11pt; font-weight: bold; margin: 0 0 0 0; text-align: left; color: blue;}

#address .ad_address {
			font-size: 9pt; margin: 3px 0 0 0; font-style: italic; font-weight: normal; }

#address .ad_tel {
			font-size: 15pt; 
			font-weight: bold;
			margin: 8px 12px 0 0; 
			font-style: italic;
			text-align: right;
			color: blue; }

#address .ad_fax {
			font-size: 10pt; margin: 5px 30px 0 0; font-style: italic; font-weight: normal; text-align: right; }

#address .ad_email {
			font-size: 8pt; margin: 3px 40px 0 0; font-style: italic; font-weight: normal; text-align: right; }
			
			
			
#links-list 
			{ display: none;
			position: absolute; right: 11%; top: 1060px; width: 85%; z-index: 2; font-size: 6pt; text-align: right; 
			color: none; }


/* --- Logotype --- */
/* stopped development taking to long to sort - -

#logotext{position: absolute; right: 3%; top: 3%; width: 37%; height: 28%; background-color: transparent;
			font-size: 18pt;
			font-style: italic;
			font-weight: bold;
			text-align: right; }
			
#logo		{position: absolute; right: 0px; top: 0px; height: 100%; z-index: 2; float: right;}
#text		{position: absolute; left: 0px; top: 40%; height: 60%; z-index: 2; float: left;}
--*/



/* --- Logotype --- */
#logotype{ position: absolute; right: 1%; top: 0px; width: 20%; padding: 0 0 0 0;
			font-size: 18pt;
			font-style: italic;
			font-weight: bold;
			text-align: right; }			
			
#logotype .text { display: none; position: absolute; right: 90%; top: 50%; width: 100%; z-index: 2;}

/* -- FIREFOX Company name --- */
#print_name	{
			display: inline;
			position: absolute; top: 86px; left: 375px; z-index: 5;
			font-style: italic;
			font-weight: normal;
			font-size: 19pt;
			letter-spacing: 1.3px; 
			color: blue; }
			
.ambersand { position: relative; top: -21px; left: 100px; font-size: 11pt; width: 30px;}	
.whale 	{ position: relative; left: 60px; top: -46px; width: 50px;}		


/* -- IE Company name --- */
#ie_print_name	{
			display: none;
			position: absolute; top: 92px; left: 463px; z-index: 5; width: 150px; height: 80px;
			font-style: italic;
			font-weight: normal;
			font-size: 19pt;
			letter-spacing: 1.3px; }

.ie_ramsden { position: relative; top: 0px; left: 0px; width: 30px; height: 20px;  padding: 1px;}
.ie_ambersand { position: relative; top: -23px; left: 100px; font-size: 11pt; width: 30px; height: 20px; padding: 1px;}	
.ie_whale {	position: relative; left: 60px; top: -47px; width: 50px; height: 30px;  padding: 1px;}		


/* --- Body Text --- */

#bodytext	{ position: absolute; left: 390px; top: 200px; width: 255px; }			
#bodytext p { margin-top: 0px; margin-bottom: 8px; padding: 0 0 0 0; }
#bodytext i { color: blue; font-weight: bold; }

#bodytext a:visited, #bodytext a:link, #bodytext a:active { font-weight: bold; color: black; }
#bodytext a:hover { font-weight: bold; color: yellow; }

#about_us #bodytext	{ position: absolute; left: 390px; top: 170px; width: 255px; 
font-size: 9pt; line-height: 12pt; }	

/*  gave up developing this bit as fixed postion screwed up backgrounds
body > #fixed {
    position: fixed;
}			
*/

/* --- FIXED Menu left hand side --- 		
#fixed {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 100px;
    height: 150px;
    background: yellow;
	 z-index: 2;
    color: black; }
			
#fixed a {
		text-decoration: none;
		color: green;
		font-weight: bold;
		font-size: smaller; }

#fixed a:hover {
    color: red; }
--- */			

/* -- SIDE MENU -- */

#sidemenu { display: none;
			position: absolute; top: 62%; left: 5px; width: 200px;
			height: 200px; background: transparent; z-index: 10;}
			
#sidemenu p { display: none;
			position: relative;
			margin: 0 10px 5px 0;
			font-size: 8pt;
			font-style: italic;
			font-weight: Bold;
			text-align: left;
			text-indent: 14px;
			letter-spacing: normal;
			top: -2px;;
			color: black; }
			
#globe00	{ display: none; left: 0px; }		
#globe01	{left: 13px; }		
#globe02	{left: 26px; }		
#globe03	{left: 39px; }
#globe04	{left: 52px; }
#globe05	{left: 65px; }
#globe06	{left: 78px; }
#globe07	{left: 91px; }
#globe08	{left: 104px; }




/* -- Menu HIGHLIGHTING -- */

#home .home, #about_us .about_us, #services .services, #location .location, #contact .contact, #manufacture .manufacture, #reconditioned .reconditioned, #ibc .ibc, #steel .steel, #disposal .disposal, #certification .certification, #madesign .madesign,

				{ color: white; }


#info			{ background-color: #000080; }
#infotext	{ position: absolute; left: 60%; top: 40%; width: 35%; background-color: none;}	
#infotext i { color: yellow; }
#info_pic	{ position: absolute; top: 60px; left: 35px; height: 85%; }
	 
#closewindow{ position: absolute; top: 95%; margin-left: 0px; margin-top: 25px; width: 120px; }

/*-- ma-design copyright --*/

#ma-design	{ position: absolute; left: 10px; top: 95%; width: 90px; height: 10px; z-index: 2; font-size: 7pt; }


			

			
/* --- Recycle logotype --- */	

#recycle1{ display: none;
			position: absolute; left: 28%; top: 9%; width: 20%;}
.one 		{z-index: 2;}
.two		{z-index: 3;}

#recycle2{ display: none;
			position: absolute; left: 28%; top: 50%; width: 20%;}		
			
#recycle3{ display: none;
			position: absolute; left: 190px; top: 765px; width: 12.5%;}	


/* --- 3 Wise Drums --- */	
#drums	{position: absolute; left: 1px; top: 780px; width: 200px; z-index: 1; }

#red		{position: absolute; top: 0px; left: 0%; width: 40%; z-index: 1; }
#blue		{position: absolute; top: 0px; left: 40%; width: 40%; z-index: 1; }
#green	{position: absolute; top: 0px; left: 80%; width: 40%; z-index: 1; }


			


/* --- main titles --*/
H1		{	position: absolute; left: 0px; top: 35px; z-index: 1;
			font-size: 12pt;
			font-style: italic;
			font-weight: bold;
			text-align: left;
			letter-spacing: 0;
			line-height: 13pt;
			color: green;}

/* --- bodytext services list --*/
#bullet_list { display: inline;
	 		position: relative; left: -10px; top: 10px; width: 90%; background-color: transparent; color: black; }
			
H2		{	position: relative; margin: 1px 10px 5px 1px; top: 0px;
			font-size: 10pt;
			line-height: 12pt;
			font-style: italic;
			font-weight: bold;
			text-align: left;
			text-indent: 12px;
			letter-spacing: 0;
			color: black; }
			

			
#first { position: relative; top: 10px; }  /* to move bullet point down in list */
#globe10	{left: 0px; }		
#globe11	{left: 22.5px; }		
#globe12	{left: 45px; }		
#globe13	{left: 67.5px; }
#globe14	{left: 90px; }
#globe15	{left: 112.5px; }
#globe16	{left: 135px; }



	
/* --- shadows coding --*/

.popshadow{
				position:relative;
				top:-10;
				left:-10;
				filter:shadow(color=#000000, direction=175) }

.popshadow1{ 
				position:relative;
				top:-10;
				left:-10;
				filter:shadow(color=#000000, direction=175) }

.popshadow2{ 
				position:relative;
				top:-5;
				left:-13;
				filter:shadow(color=#000000, direction=175) }




/* -- transitional blending of images using JAVASCRIPT in css needs to be developed for use with fluid images -- */

.imagebox 	{ position: absolute; left: 0px; top: 11%; width: 52%; z-index: 1;}

.imagebox#slideshow {
				width: 450px;
				float: left;
				border: none; }
	
	
	
/*------ Picture information ---*/

#main_pic 		{ position: absolute; left: 0px; top: 80px; width: 360px; z-index: 1; }

/*------ INSET Picture information ---*/

#inset_00		{ position: absolute; left: 29%; top: 55%; width: 21%; z-index: 3; }
#inset_01		{ position: absolute; left: 40%; top: 42%; width: 8%; z-index: 3; }


/* -- Index.htm page pictures -- */

#drum_01 		{ position: absolute; left: 300px; top: 285px; width: 080px; z-index: 2; } /*-- red drum --*/
#drum_02			{ position: absolute; left: 190px; top: 320px; width: 110px; z-index: 3; } /*-- blue drum --*/
#drum_03			{ position: absolute; left: 055px; top: 360px; width: 135px; z-index: 5; } /*-- green drum --*/
#steeldrum_01 	{ position: absolute; left: -10px; top: 100px; width: 190px; z-index: 4; }



/* -- location.htm page pictures -- */
#ukmap 			{ position: absolute; top: 5%; left: 34%; width: 25%; float: left; z-index: 5; }



/* -- reconditioned.htm page pictures -- */
#print_images 	{ display: inline;
					position: absolute; left: 65px; width: 290px; top: 295px; height: 495px; 
					background-color: none; 
					font-size: 8pt;
					line-height: 10pt;
					font-style: italic;
					font-weight: normal;
					color: blue; }

#print_pic01	{ display: inline;
					position: relative; width: 175px; z-index: 2; float: left; margin: 0 15px 20px 0px; }
#print_pic02	{ display: inline;
					position: relative; width: 175px; z-index: 2; float: left; margin: 0 15px 20px 0px; }
#print_pic03	{ display: inline;
					position: relative; width: 175px; z-index: 2; float: left; margin: 0 15px 20px 0px; }
#print_pic04	{ display: inline; 
					position: relative; width: 175px; z-index: 2; float: left; margin: 0 15px 20px 0px; }

/* --  PRINT OUT - hi res images -- */

	/*	Client supplied works photos in central box
	we use a class to define the generic options such as size etc
	then use an ID to set a certain image */
	
	
.recycle { display: block;
			position: absolute; z-index: 1;
			background-repeat: no-repeat; width: 160px; height: 160px; 
			background-image: url(../print-images/recycle160px.jpg) }


#home .recycle					{ top: 110px; left: 195px; }
#disposal .recycle 			{ top: 350px; left: 300px; }
#ibc .recycle 					{ top: 350px; left: 300px; }
#services .recycle  			{ top: 350px; left: 300px; }
#manufacture .recycle 		{ top: 350px; left: 300px; }
#reconditioned .recycle 	{ top: 350px; left: 300px; }

#about_us .recycle 			{ top: 350px; left: 300px; }
#certification .recycle 	{ top: 350px; left: 300px; }
#contact .recycle 			{ top: 350px; left: 300px; }


/* -- CONTACT US - form layout --  wrapped up into BODYTEXT -- */

form#contactForm {
					background-color: transparent; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; color: black; }
									
					
form#contactForm textarea {
					padding: 5px 5px 5px 5px;
					margin-bottom: 0px;
					width: 225px; 
					height: 8em; }
					
form#contactForm dd input, form#contactForm dd select, form#contactForm dd textarea {
					position: relative;
					left: 0px;
					width: 200px;
					padding: 0px 5px 0px 5px;
					font-family: Verdana, sans serif;
					font-weight: normal;
  					font-size: 8pt;
					text-align: left; 
					background-color: white;
  					color: white; }
										
form#contactForm dt label {
					float: left;
					width: 100%; /* -- must be here to avoid wrapping of text -- */ 
					margin-left: 10px; 
					margin-top: 5px;
  					font-size: 8pt;
					font-weight: bold;
					text-align: left; 
					background-color: transparent;
					color: Blue; }
					
form#contactForm dt i {
					font-style: italic;
					font-weight: normal;
					font-size: 7pt;
					color: Black; }

							
/* -- Your Name details -- */
form#contactForm dd select#txtTitle { 
  					font-size: 7pt;
					width: 55px;
					margin-top: 5px; }
					
form#contactForm input#txtFirstname {
					width: 23%;
					margin-right: 3px; }
					
form#contactForm input#txtFamilyname {
					width: 40%; }
			
form#contactForm input#txtFullname {
					width: 120px; }
					
					
/* -- Your position details -- */
form#contactForm dd select#txtPosition { 
					width: 160px;
					height: 15px;
					margin: 3px 0px 0px 0px;
					font-size: 7pt;
					font-weight: normal;
					font-style: italic;
					text-align: left;
					background-color: Black;
					color: teal; }
					
/* -- Telephone -- */				
form#contactForm dd #txtTelephone { width: 125px; }
					
/* -- Counties -- */
form#contactForm dd select#txtCounty { 
					margin: 5px 0px 0px 0px;
					width: 160px; }
					
					/* -- Postcodes -- */
form#contactForm dd #txtPostcode { width: 65px; }

form#contactForm dd select#txtCountries { 
					margin: 10px 0px 0px 0px;
					width: 170px; }
					
					
form#contactForm dd select#txtHow { 
					margin: 10px 0px 0px 0px;
					width: 170px; }

form#contactForm input.button1 { display : None;
					width: 50px; 
					margin: 12px 0px 0px 20px;
					font-size: 8pt;
					font-weight: bold;
					font-style: italic;
					background-color: red;
					color: yellow; }
					
form#contactForm input.button2 { display : None;
					float: right;
					width: 150px; 
					margin: 0px 0px 0px 0px;
					position: relative;
					top: -20px;
					left: -40px;
					font-size: 8pt;
					font-weight: bold;
					font-style: normal;
					background-color: green;
					color: yellow; }