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


body	{ 	width: 100%; height: 100%; margin: 0 0 0 0;
			font-family: Verdana, sans serif;
			font-size: 8pt;
			line-height: 12pt;
			font-style: normal;
			font-weight: bold;
			text-align: left;
			background-color: transparent; 
			color: White; }
			
img 	{	border: none; cursor: default; }

a:visited, a:active, a:link{ background-color: transparent; color: #9ACD32; text-decoration: none}
a:hover	{ background-color: transparent; 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
			{position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; z-index: 0;}

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

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

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

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

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

#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 {
			position: absolute; right: 12%; top: 1036px; width: 88%; z-index: 2; font-size: 6pt; font-style: italic; text-align: right; }


/* --- 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: 3%; width: 20%; padding: 0 0 0 0;
			font-size: 18pt;
			font-style: italic;
			font-weight: bold;
			text-align: right; }			
			
#logotype .text { position: absolute; right: 90%; top: 50%; width: 100%; z-index: 2;}

/* -- FIREFOX Company name --- */
#print_name	{
			display: none;
			position: absolute; top: 66px; left: 475px; z-index: 5;
			font-style: italic;
			font-weight: normal;
			font-size: 19pt;
			letter-spacing: 1.3px; }
			
.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; right: 5.5%; top: 40%; width: 35%; }			
#bodytext p { margin-top: 0px; margin-bottom: 8px; padding: 0 0 0 0; }
#bodytext i {  background-color: transparent; color: Yellow; }
#bodytext strong {  background-color: transparent; color: lightblue; }

#bodytext a:visited, #bodytext a:link, #bodytext a:active { font-weight: bold; background-color: transparent; color: lightBlue; }
#bodytext a:hover { font-weight: bold; background-color: transparent; color: Yellow; }

#ramsden3.ramsden3 a:visited, #ramsden3.ramsden3 a:link, #ramsden3.ramsden3 a:active,{ background-color: transparent; color: Blue; font-size: 15pt; }
#ramsden3.ramsden3 a:hover { font-weight: bold; background-color: transparent; color: Blue; }

/*  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 {
			position: absolute; top: 62%; left: 5px; width: 200px;
			height: 200px; background: transparent; z-index: 10;}
			
#sidemenu p {
			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: -8px;
			background-color: transparent;
			color: black; }
			
#globe00	{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_us .contact_us, #manufacture .manufacture, #reconditioned .reconditioned, #ibc .ibc, #steel .steel, #disposal .disposal, #certification .certification, #madesign .madesign

				{ background-color: transparent; color: White; }


#info			{ background-color: #000080; color: transparent; }
#infotext	{ position: absolute; left: 60%; top: 40%; width: 35%; background-color: transparent;  }	
#infotext i {  background-color: transparent; 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{position: absolute; left: 28%; top: 9%; width: 20%;}
.one 		{z-index: 2;}
.two		{z-index: 3;}

#recycle2{position: absolute; left: 28%; top: 50%; width: 20%;}		
#recycle3{position: absolute; left: 34%; top: 870px; width: 15%;}	


/* --- 3 Wise Drums --- */	
#drums	{position: absolute; left: 4%; top: 800px; width: 33%; 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: 1%; top: 2%; z-index: 1;
			font-size: 12pt;
			font-style: italic;
			font-weight: bold;
			text-align: left;
			letter-spacing: 0;
			line-height: 13pt;
			background-color: transparent;
			color: yellow;}

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

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



	
/* --- shadows coding --*/

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

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

.popshadow2{
				position:relative;
				top:-5px;
				left:-13px;
				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: 11%; width: 52%; 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: 48%; top: 35%; width: 9%; z-index: 2; }
#drum_02			{ position: absolute; left: 35%; top: 44%; width: 13%; z-index: 3; }
#drum_03			{ position: absolute; left: 20%; top: 45%; width: 15%; z-index: 5; }
#steeldrum_01 	{ position: absolute; left: 3%; top: 14%; width: 22%; z-index: 4; }

					

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

/* -- 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: none;
					position: absolute; left: 60px; width: 290px; top: 285px; height: 395px; 
					font-size: 8pt;
					line-height: 10pt;
					font-style: italic;
					font-weight: bold;
					background-color: transparent;
					color: blue; }

#print_pic01	{ display: none;
					position: relative; width: 175px; z-index: 2; float: left; margin: 0 20px 10px 0px; }
#print_pic02	{ display: none;
					position: relative; width: 175px; z-index: 2; float: left; margin: 0 20px 10px 0px; }
#print_pic03	{ display: none;
					position: relative; width: 175px; z-index: 2; float: left; margin: 0 20px 10px 0px; }
#print_pic04	{ display: none; 
					position: relative; width: 175px; z-index: 2; float: left; margin: 0 20px 10px 0px; }
					
					
/* -- RECYCLED Hi Res printout logotype -- */

	/*	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: none;
			position: absolute; z-index: 2;
			background-repeat: no-repeat; width: 274px; height: 274px; 
			background-image: url(../print-images/recycle140px.jpg) }


#home .recycle					{ top: 350px; left: 300px; }
#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_us .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: #000000; }
										
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: yellow; }
					
form#contactForm dt i {
					font-style: italic;
					font-weight: normal;
					font-size: 7pt;
					color: white; }

							
/* -- 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: white;
					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; text-transform: uppercase; }

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 {
					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 {
					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; }