/*CSS rules for the form on "Contact Us" page 14 May 2012 */  
body {
	background-color:#000000;
	position:relative; }
	
#wrapper {
	padding:0px;
	width:900px;
	height:700px;   
	margin-left:auto;   /*  This centers the object */
	margin-right:auto; }
	/* margin:0 auto;    this moves the logo too far over *** NEED to CENTER the VERTICAL Line   */    

#box {   
	align: center;
	text-align:left;
	width:600px;
	height:755px;
	margin:0 auto;
	position:absolute;   
	border-right: 2px solid #336666; 	 } 
	
#logo {
	text-align:right;
	position:relative;
	top:50px;
	height: 150px;   /*  added this to lower the form from the logo  */
	padding-right:10px;  /* this padding leaves a spave betw logo and vertical line */
	border-bottom-color:#ffffff;  }  /*  border line does ot show  not sure why */
	
#content {
	width:400px;
	margin-left:inherit;	/* this pushes the text to the right  --somehow--  */
	padding-right:15px;               }
	 
#navigation a{
	font-size: 12px;
	font-family: Century Gothic;
	color: #ffffff;
	text-decoration: none;  	}
		 
.navhome {
	position:absolute;	
	 /*  was ABSOLUTE changed to RELATIVE to get the spacing in sequence */
	top:135px;
	left:620px;   } 		 
		 
.navareas {
	position:absolute;	  /*  was ABSOLUTE changed to RELATIVE to get the spacing in sequence */
	top:160px;
	left:620px;   }        /*  this seems to work */
	
.navabout {
	position:relative;  /*  position was ABSOLUTE changed to relative to stop the "us" from going to the next line */
	top:35px;
	left:620px; 	}  

.navcontact {
	position:relative;
	top:40px;
	left:620px;   	}

/* LINK  HOVER states --------------------------------------------------------------------*/

#navigation a:link{                /*  colour is white (#ffffff)*/
	color:#ffffff;
	}
	
#navigation a:hover {              /* when mouse hovers over colour changes to acqua */
	color: #00CCFF;
	}

#navigation a:active {            /* when mouse clicks link colour changes to fushcia*/
	color:#CC0066;
	}


h1{
	top:200px;
	font-family:Century Gothic;
	font-size:.9em;
	font-weight:normal;
	text-align:center; 
	color:#FFFFFF; 
	text-transform: uppercase; 
	
	/* border-top: 2px solid #336666;   this works however leave out for now until format is determined */
	
	/*border-top-style:inset;
	border-top-width:solid;
	border-top-color:#336666;  repeat of the above except 'insset' (above is more condensed)  */
	
	margin-right: 10px
	margin-top:80px;
	margin-bottom:20px;} 	
	
p{
	position:relative;
	top:05px;
	text-align:left;
	padding-left:240px;
	font-family:Century Gothic;
	font-size:.72em;
	color:#FFF ; }
	
#footer{
	font-family:Century Gothic;
	text-align:right;
	font-size:.9em;
	font-weight:bold;
	color: #336666;
	inline: block;
	background-color:#000000;} 
	
/* FORM --------------------------------------input fields (empty fields) formatting & below different widths  */

input.txt1, .txt2, .txt3, .txt4 {
	colour: #FFFFFF;
	font-size: 13px;
	cell-padding: 3px; }
	
input.txt1 {
	width: 220px; }
input.txt2 {
	width: 200px; }
input.txt3 {
	width: 150px; }
input.txt4 {
	width: 50px; }

/*rules for the SEND button*/  
input.btn {

	color:#ffffff;
	font-family: Century Gothic;
	font-weight:500;                    /* 700  */
	text-transform: uppercase; 
	width:9em;             /* width:5em;  */
	background-color:#000000;      /*  background-color:transparent;  */
	border: 1.5px outset;               /* 2px*/
	border-color:#3CCAC7;          /*  border-color:#ffffff;   */
	margin-left:18em; }
	
/*rules for the form input fields MARGIN + PADDING is the space btwn == margin-left:16em; DOESN WORK TO ALIGH FIELDS*/
form div {
	clear:right;
	margin: 5px;
	padding: 5px;
	padding-top: 0.6em;}

/*rules for the label names removed float:left; to line up text closer to fields see Chpt.6 pg.190.  added margin-right to mke spc btwn text & field */  
form div label {
	float:left;
	width: 40%;
	text-align:right;
	line-height:1.8em;
	margin-right:10px;
	font-family:Century Gothic;
	color:#FFFFFF;
	font-size: 0.8em;}
		
form textarea {
	clear:right;
	margin: 5px;
	padding: 5px;
	padding-top: 0.6em;
	margin-left:0em;}  /*this aligns all fields*/
	
/* The :focus pseudo-clss only works in IE 8, FireFox and Safari **** tested in FF - it works!! YAY !!  SPECIAL EFFECT     background:#00FFFF;     */
#fullname:focus, #email:focus, #phonenumber:focus, #postcode:focus, #enquiry:focus {
	background:#FF00CC;}