/* Client: WebbPUTTERS --------------------------------------- */
/* 																				*/
/* 	css coding produced by Clive Moore MA							*/
/* 	www.ma-design.com														*/
/* 	tel: 01902 344234														*/
/* 																				*/
/* 	April / May 2006  													*/
/* ----------------------------------------------------------- */


body	{ 	
			background-color: transparent; color: white; margin-top: 0;
			font-family: Arial, sans serif; 
			font-size: 9pt; }
	
/* APPLY THE SCROLL BAR STYLE TO THE HTML TAG - WILL ENSURE THAT THE PAGE VALIDATES */

html { 
			SCROLLBAR-FACE-COLOR: #cccccc;;
			SCROLLBAR-HIGHLIGHT-COLOR: white;
			SCROLLBAR-SHADOW-COLOR: black;
			SCROLLBAR-3DLIGHT-COLOR: #009999;
			SCROLLBAR-ARROW-COLOR: Teal;
			SCROLLBAR-TRACK-COLOR:  green;
			SCROLLBAR-DARKSHADOW-COLOR: black;} 		

				
h1 { 		position: absolute; top: 18px; left: 15px; z-index: 1;
			padding-top: 40px; padding-bottom: 0px;
			margin-top: -40px;
			font-size: 32pt; line-height: 32pt;
			font-style: normal; font-weight: normal;
			text-align: left;
			background-color: transparent;  
			color: Teal; }
		
h2 {		position: relative;	margin-left: 0px; padding: 0px; margin-bottom: 10px;
			font-size: 14pt; line-height: 12pt; font-style: normal; font-weight: bold;
			text-align: left; letter-spacing: 0; 
			background-color: transparent;
			color: Teal; 
			z-index: 1; }
		
		
p{ 		margin-top: 0;
			margin-bottom: 10px; }
			
			
			
.subhead {
			position: relative;
			left: 0px;
			padding-top: 20px;
			font-size: 11pt; font-weight: bold;
			background-color: transparent;
			color: teal;}

			
		
/* ID & Classes for page identification on menu -- */
#Home .buttons.Home, #webbPutters .buttons.webbPutters, #Quality .buttons.Quality, #Headcovers .buttons.Headcovers, #Personalised .buttons.Personalised, #Ordering .buttons.Ordering, #Contact_us .buttons.Contact_us, #golfTips .buttons.golfTips,
					{ background-color: White; color: Teal; }



					

/* Div Layout & MAIN CONTENT    --------- */
			
#content { width:100%; height: 1000px; }
					
#logotype { 
			position: absolute; top: 27px; right: 0px; width: 236px; height: 85px; z-index: 2;
			background-color: transparent;
			background: url(../images/WEBB_logotype_236x85px.gif) no-repeat;
			 filter:shadow(color="black", direction="145"); }
			
#bodytext { 
			position: absolute; left: 30px; top: 85px; right: 15%; height: 845px;
			padding-left: 120px; padding-right: 95px; 
			background-color: none;
			font-style: normal; font-weight: bold;
			color: black;
			z-index: 1;  }
			
			
#bodytext p { position: relative; z-index: 1;
			text-align: justify; letter-spacing: 0; }
			
#bodytext a {
			color: teal; background-color: transparent; text-decoration: none;}

#bodytext a:hover {
			color: white; background-color: transparent; text-decoration: none;}

#bodytext ul { 
			padding: 0 9em 0 2em; margin: 0 0 0 0;}			
			
#bodytext li {
			font-style: italic;
			line-height: 10pt;
			padding-top: 25px;
			text-align: left;}
			

	


/* Div BUTTON MENUS    --------- */


			
#top-menu { display: none;
			position: absolute; left: 30px; top: 65px; height: 19px; right: 15%; z-index: 1;
			color: white; 
			background: url(../images/TEALgreen.gif) }
			

			
#side-menu { display: none;
			position: absolute; left: 10px; top: 90px; height: 250px; width: 120px; z-index: 2;
			background-color: transparent;
			color: teal;
			font-style: italic;
			font-weight: bold;
			font-size: 8pt;
			line-height: 10pt;
			padding-bottom: 10px;
			margin-top: 10px;}
				
#side-menu ul { color: White;  background-color: transparent; }
#side-menu li { margin-bottom: 10px; }
#side-menu a { color: Yellow; text-decoration: none; background-color: transparent; }
#side-menu a:hover { color: White; text-decoration: none; background-color: transparent; }
			
#bottom-menu { display: none;
			position: absolute; left: 30px; top: 925px; height: 19px; right: 15%; z-index: 1;
			color: white;
			background: url(../images/TEALgreen.gif) }
		
		
			
.buttons ul{
			padding: 0 0 0 0;
			margin: 0 0 0 0;
			height: 10px ;
			background: url(../images/TEALgreen.gif);}

.buttons ul li{
			font-weight: bold;
			background-color: transparent;
			list-style: none;
			display: inline;}

.buttons ul li a{
			padding: 0px 0.4em;
			text-decoration: none;
			float: left;
			color: white;
			background-color: none;
			border: 2px solid teal;}

.buttons ul li a:hover{
			color: teal;
			background-color: white;
			border-style: outset;}

html>body .buttons ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
			border-style: inset;}

	
			

			


/* Div ADDRESS BOX with rounded corners   --------- */	

.companyname {
			font-size: 11pt; font-style: normal; font-weight: bold; 
			color: teal;
			background-color: transparent;
 			margin-top: 10px; padding-bottom: 15px;}
			
.email {	font-style: italic; font-size: 8pt; }
			
div#roundedbox {
			position: absolute; right: 20px; top: 775px; width: 275px; z-index: 2;
      	background: white;
			color: black;
      	float: right;
      	margin: 0 0 0 1em;}
		
div#roundedbox p { 
			text-align: right;
			margin-bottom: 5px;
			position: relative;
			color: black;
			top: -10px; padding-right: 15px; padding-top:0; padding-bottom: 0px; }
		
div#roundedbox a { color: black; text-decoration: none; background-color: transparent;}
div#roundedbox a:hover { color: teal; text-decoration: none; background-color: transparent;}
		
div#roundedbox #top, div#roundedbox #bottom {
      	font-size: 1px;
      	height: 16px;
      	line-height: 1px;}
div#roundedbox #topleft {
      	background: url(../images/corners.gif) no-repeat top left;
      	float: left;
      	height: 16px;
      	width: 16px;}
div#roundedbox #topright {
      	background: url(../images/corners.gif) no-repeat top right;
      	float: right;
      	height: 16px;
      	width: 16px;}
div#roundedbox #bottomleft {
      	background: url(../images/corners.gif) no-repeat bottom left;
      	float: left;
      	height: 16px;
      	width: 16px;}
div#roundedbox #bottomright {
      	background: url("../images/corners.gif") no-repeat bottom right;
      	float: right;
      	height: 16px;
      	width: 16px;}
*/
			
			
/* Div MA_DESIGN  Copyright stuff  --------- */	

#ma-design {
			position: absolute; left: 30px; top: 960px; height: 25px;
			padding-left: 10px; padding-right: 45px; padding-top:0; padding-bottom: 0px;
			font-style: normal;
			font-size: 7pt;
			color: black;
			background-color: transparent;
			}
			
#ma-design a { color: black; text-decoration: none;}
#ma-design a:hover {	text-decoration: none;}
		
#ma-design strong { color: #FFA500; background-color: transparent;}




/* ---- PICTURES for the pages -------------------------- */

#greenTIPS	{ position: absolute; top: 450px; left: 79%; width: 160px; height: 315px; z-index: 2;
background-color: transparent; }

#turning-anim {position: absolute; top: 0; left: 0; 
width: 160px; height: 279px; z-index: 2;
			background: url("../images/bad_shot.gif") no-repeat;}	
			
#button-menu { display: none;
			position: relative; left: 35px; top: 290px; height: 19px; right: 0; width: 115px; z-index: 1;
			color: white; background-color: teal; }



#FLAG-anim { display: none;
			position: absolute; top: 0px; left: 350px; width: 66px; height: 189px; z-index: 2;
			background: url("../images/FLAG-anim.gif") no-repeat;}	
			
#the_GREEN { display: none;
			position: absolute; top: 10px; left: 60px; width: 90%; z-index: 0; }
			
			
/* dropshadow1 */
.popshadow	{position:relative; left:-5px; top:-5px; filter:shadow(color="black", direction="145") }


#locationtext {
			position: relative; width: 70%; }	
			
#locationtext ul { 
			padding-left:  0 0 0 0; margin: 0 0 0 0; width: 85%;}		

	
			
#locationtext li {
			font-style: italic;
			line-height: 12pt;
			padding-top: 15px;
			text-align: left;}  
			
	/*	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 */
#ukmap {
			position: absolute; top: 15px; left: 65%; height: 35%; float: left; z-index: 15; }

.main-image { position: relative; z-index: 1;
			background-repeat: no-repeat; position: relative; top: 5px; width: 350px;
			height:195px; }

.product-image {

}

/* To add a logo to a specific page open up the index file,
	look for the div with the classname "main-image"
	then change the ID. */
img {	border: 0px; }
	
.main-image#welcome {background-image: url("../images/1px.gif"); }	

#golfer_01 { position: absolute; top: 42px; left: 10%; width: 117px; height: 160px; z-index: 2;
				background-image: url("../images/golfer_01.gif"); }	
				
.invisable 		{ display: none; position: relative; top: 100px; background-color: transparent; color: white; }

#WEBB_DSCN1229_Address		{ display: inline; position: absolute; left: -90px; top: -40px; height: 170px; z-index: 3; }

				
/* -- Intro page -- */	
.main-image#Home {background-image: url(../images/images_017.jpg); }	
#WEBB_DSCN1229		{ display: inline; position: absolute; left: 32%; top: 15px; height: 14%; z-index: 3; }
#WEBB_DSCN1174		{ display: inline; position: absolute; left: 59%; top: 50px; height: 22%; z-index: 3; }

/* -- Webb PUTTERS page -- */
.main-image#WebbPUTTERS {background-image: url(../images/images_017.jpg); }
.main-image#Grips {background-image: url(../images/Grips.jpg); }	
#WEBB_DSCN1192_b		{ display: inline; position: absolute; left: 12%; top: 10px; height: 16%; z-index: 3; }
#WEBB_DSCN1232_b		{ display: inline; position: absolute; left: 26%; top: 75px; height: 14%; z-index: 4; }
#WEBB_DSCN1202_b		{ display: inline; position: absolute; left: 56%; top: 40px; height: 16%; z-index: 3; }
#WEBB_DSCN1199_b		{ display: inline; position: absolute; left: 70%; top: 80px; height: 18%; z-index: 4; }

/* -- Quality page -- */
.main-image#Quality {background-image: url(../images/images_017.jpg); }
#WEBB_1stcut		{ display: inline; position: absolute; left: 8%; top: 10px; height: 14%; z-index: 3; }
#WEBB_2ndcut		{ display: inline; position: absolute; left: 28%; top: 80px; height: 16%; z-index: 4; }
#WEBB_DSCN1130		{ display: inline; position: absolute; left: 56%; top: 40px; height: 12%; z-index: 4; }
#WEBB_DSCN1199		{ display: inline; position: absolute; left: 78%; top: 50px; height: 20%; z-index: 3; }

/* -- Headcovers page -- */
.main-image#Headcovers {background-image: url(../images/images_017.jpg); }

/* -- Personalised page -- */
.main-image#Personalised {background-image: url(../images/images_017.jpg); }
#WEBB_DSCN1234		{ display: inline; position: absolute; left: 14%; top: 20px; height: 20%; z-index: 3; }
#WEBB_DSCN1210		{ display: inline; position: absolute; left: 70%; top: 40px; height: 22%; z-index: 3; }

/* -- Ordering page -- */
.main-image#Ordering {background-image: url(../images/images_017.jpg); }
#WEBB_DSCN1202		{ display: inline; position: absolute; left: 12%; top: 5px; height: 17%; z-index: 3; }
#WEBB_DSCN1160		{ display: inline; position: absolute; left: 37%; top: 50px; height: 18%; z-index: 3; }
#WEBB_DSCN1192		{ display: inline; position: absolute; left: 76%; top: 65px; height: 20%; z-index: 10; }

/* -- Contact us page -- */
.main-image#Ordering {background-image: url(../images/images_017.jpg); }
#WEBB_DSCN1192_a		{ display: none; position: absolute; left: 74%; top: 130px; height: 14%; z-index: 3; }
#WEBB_DSCN1160_a		{ display: none; position: absolute; left: 72%; top: 245px; height: 12%; z-index: 4; }
#WEBB_DSCN1202_a		{ display: none; position: absolute; left: 78%; top: 365px; height: 16%; z-index: 5; }


/* -- Photo GALLERY page -- */
#WEBB_1stcut_X			{ display: inline; position: absolute; left: 5%; top: 10px; height: 14%; z-index: 3; }
#WEBB_2ndcut_X			{ display: inline; position: absolute; left: 25%; top: 80px; height: 16%; z-index: 4; }
#WEBB_DSCN1130_X		{ display: inline; position: absolute; left: 52%; top: 71px; height: 12%; z-index: 4; }
#WEBB_DSCN1199_X		{ display: inline; position: absolute; left: 76%; top: 60px; height: 20%; z-index: 3; }

#WEBB_DSCN1192_X		{ display: inline; position: absolute; left: 5%; top: 200px; height: 15%; z-index: 3; }
#WEBB_DSCN1232_X		{ display: inline; position: absolute; left: 14%; top: 295px; height: 15%; z-index: 4; }
#WEBB_DSCN1229_X		{ display: inline; position: absolute; left: 46%; top: 195px; height: 17%; z-index: 4; }
#WEBB_DSCN1174_X		{ display: inline; position: absolute; left: 55%; top: 345px; height: 19%; z-index: 3; }


#WEBB_DSCN1202_X		{ display: inline; position: absolute; left: 5%; top: 370px; height: 15%; z-index: 3; }
#WEBB_DSCN1234_X		{ display: inline; position: absolute; left: 25%; top: 425px; height: 15%; z-index: 3; }
#WEBB_DSCN1210_X		{ display: inline; position: absolute; left: 15%; top: 595px; height: 15%; z-index: 3; }
#WEBB_DSCN1160_X		{ display: inline; position: absolute; left: 60%; top: 515px; height: 15%; z-index: 3; }








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

form#contactForm {position: relative;
					background-color: transparent; width: 350px; top: 20px; 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: black; }
					
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; }						

/* -- end of CSS Coding -- copyright : ma-design.com tel: +44 1902 344234 --*/