/* *********************************** STRUCTURE *********************************** */

body       { 
           font: small/1.4 arial, verdana, sans-serif;
           margin: 0;
           padding: 2em;
           }

#container {
           margin: 0 auto;
           width: 60.6em;
           padding-bottom: 0.5em;
           background: url(images/shadow.gif) no-repeat bottom right;
           }

#structure {
           margin: 0 0.5em 0 0;
           max-width: 100%;
           width: 60em;
           }

#header    {
           border-bottom: 2em solid #9da28e;
           width: 100%;
           }

#date      {
           position: relative;
           top: -1.6em;
           }
			 
#contact   {
           position: relative;
           float: right;
           top: -3em;
           }

/* the divs */

#navigation         {
                    float: left;
                    margin: 1em 2em;
                    width: 10em;
                    }
										
#validation         {
                    margin-top: 18em;
                    }

#main               {
                    float: left;
                    margin: 0.5em 0 2em 1em;
                    width: 30em;
                    }
										
#portfolio          {
                    float: left;
                    margin: 0.5em 0 2em 1em;
                    width: 42em;
                    }

#supplemental       {
                    float: left;
                    margin: 0 2em;
                    padding: 0 0 1em 0;
                    width: 10em;
										border: 0 solid #3d3c3c;
										border-top-width: 2em;
										}
										
#usefullinks       {
                    float: left;
                    margin: 0 2em;
                    padding: 0 0 1em 0;
                    width: 10em;
										}

#footer             {
                    clear: both;
                    font-size: 0.9em;
                    padding: 1em 0 2em 1em;
                    }

#privacy            {
                    float: left;
                    margin: 2em 0 2em 10em;
                    width: 40em;
                    }

/* fix ie */

* html #navigation   {
                     margin: 1em 1em;
                     }

* html #supplemental {
                     margin: 0 1em;
										 }
										 
* html #usefullinks  {
                     margin: 0 1em 0 2em;
										 }
										 
* html #supplemental h3 {
                     margin: -1.8em 0 0.5em 2.5em;
										 }
										 
* html #usefullinks h3 {
                     margin: 2em 0 0.5em 0;
										 }
										 
* html #structure    {
                     width: 59.5em;
                     margin: 0 0.5em 0.5em 0;
                     }

* html #container    {
                     padding: 0;
                     margin: 0 auto;
                     width: 59.5em;
                     background: url(images/shadow.gif) no-repeat bottom right;
                     }

* html #privacy      {
                     margin-left: 5em;
                     }

/* *********************************** STYLE *********************************** */

body                     {
                         background: #9da28e;
                         color: #222;
                         }

h1                       {
                         font-size: 1.2em;
                         font-weight: bold;
                         text-align: left;
                         color: #333;
                         background-color: #e3e8e5;
                         margin: 0;
                         }

h3                       {
                         font-size: 0.9em;
                         }

a                        {
                         text-decoration: none;
                         color: #222;
                         background-color: inherit;
                         }

a:hover                  {
                         text-decoration: underline;
                         }

#structure               {
                         background: #e3e8e5;
                         border: 1px solid #727070;
                         }

#header                  {
                         background-color: #3d3c3c;
                         }

#main                    {
                         text-align: justify;
                         color: #222;
                         background-color: #e3e8e5;
                         }
												 
#portfolio               {
                         text-align: justify;
                         }
												 
#portfolio img           {
                         float: left;
                         margin-right: 1em;
                         }

#date h3                 {
                         font-size: 0.9em;
                         font-weight: bold;
                         margin: 0 0 0 1.2em;
                         color: #222;
                         background-color: inherit;
                         }
			 
#contact a               {
                         margin: 0 1em 0 0;
                         font-weight: bold;
                         }
			 
#contact a:hover         {
                         color: #fff;
                         background-color: #9da28e;
                         text-decoration: underline;
                         }

.navgt                   {
                         color: #ff9933;
                         background-color: inherit;
                         }

.navgthover              {
                         color: #33cc33;
                         background-color: inherit;
                         }

dl, dt                   {
                         margin: 0;
                         padding: 0;
                         }

#navigation dt           {
                         margin: 0.5em 0;
                         height: 1.6em;
                         line-height: 1.6em;
                         text-align: left;
                         border: 1px solid #3d3c3c;
                         color: #ccc;
                         background-color: #3d3c3c;
                         }

#navigation dt a         {
                         color: #ccc;
                         background-color: #3d3c3c;
                         text-decoration: none;
                         display: block;
                         border: 0 none;
                         height: 100%;
                         padding-left: 1em;
                         }
			 
#navigation dt a:hover   {
                         color: #fff;
                         background-color: #5d5c5c;
                         }
												 
#supplemental h3         {
                         position: relative;
                         text-align: center;
                         color: #ccc;
                         margin: -1.8em 0 0.5em 0;
                         }
												 
#usefullinks h3         {
                         position: relative;
                         text-align: center;
                         color: #3d3c3c;
                         margin: 2em 0 1em 0;
												 border-bottom: 1px solid #3d3c3c;
												 padding: 1em 0 0.5em 0;
                         }
										
#supplemental img        {
                         margin: 0.5em 0 0.2em 1.1em;
                         }

#supplemental a          {
                         margin: 0 0 1em 0.2em;
                         }
												 
#usefullinks a           {
                         line-height: 2em;
												 font-size: 0.9em;
                         }

#footer                  {
                         background: #3d3c3c;
                         border-color: #ccc;
                         color: #999;
                         text-align: left;
                         }

#footer a                {
                         color: #999;
                         background-color: #3d3c3c;
                         }

#privacy                 {
                         text-align: justify;
                         color: #222;
                         background-color: #e3e8e5;
                         }
#contactForm a {
color: blue;
background-color: inherit;
font-size: 0.9em;
margin: 0;
}

#contactForm a:hover {
color: blue;
background-color: #e3e8e5;
}

/*you are here site location - applies to all pages except home*/

#locationtext            {
                         position: relative;
                         top: 0;
                         float: right;
                         margin: -1.5em 1em 0 0;
                         clear: both;
                         }

.youarehere              {
                         font-size: 1em;
                         }

.location                {
                         font-size: 95%;
                         color: #111;
                         background-color: #e4e4e4;
                         }	

/*page title - applies to all pages except home*/

#pagetitle               {
                         position: relative;
                         top: 0;
                         left: 2em;
                         }

.pagetitletext           {
                         font-size: 1em;
                         color: #111;
                         background-color: inherit;
                         margin: 0;
                         }

/*Portfolio page*/

#portfolio p             {
                         margin: 0 0 0.7em 0;
                         }

/*contact page*/

#contactForm {
float: left;
margin: 2em 0 2em 2em;
width: 37.2em;
background: #e3e8e5;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
		
.userid {
display: none;
}

.row {
clear: both;
padding-top: 0.5em;
}

#contactForm form {
margin: 3em 0 1em 0;
}
		
fieldset {
margin: 1em 0 1em 0;
padding: 1em;
padding-right: 1em;
border: 1px solid #cccccc;
background: none;
width: 35em;
}		

label {
float: left;
width: 5em;
margin-right: 1em;
text-align: right;
font-size: 1em;
color: #333333;
}

legend {
padding: 0 1em 0 1em;
color: #393833;
font-weight: bold;
}
												 
#contactForm .formControl {
float: left;
width: 20em;
}
		
#contactForm input, textarea {
border: 1px solid #cccccc;
padding: 0.2em;
font: 1em arial, sans-serif;
}	
		
input {
font-size: 1em;
width: 20em;
}			

#contactForm textarea {
width: 32em;
}
		
.submitButton {
color: #cccccc;
background: #3d3c3c;
font: 1em arial, sans-serif;
padding: 0.4em;
width: auto;
border-style: none;
}
		
.message {
float: left;
}

#sidebar {
float: left;
width: 13em;
background: #9da28e;
border: 1px solid #cccccc;
padding: 1em;
margin: 5em 0 0 4em;
}
		
#thankyou {
position: relative;
top: 2em;
left: 5em;
width: 50em;
margin-bottom: 2em;
padding: 1em 1em;
text-align: justify;
}

/*Contact Form validation*/

div#blanksurname, #blankfirstname, #blankemail, #wrongemail, #blankphone, #blankcompany {
float: left;
display: none;
color: red;
margin: 0 0 0 6em;
width: 20em;
}

#blankenquiry {
float: left;
display: none;
color: red;
margin: 0;
width: 20em;
}