
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}

body, html {
	font-family: Arial, Tahoma, sans-serif;
	font-size: 16px;
  color: black;
  background: silver;
	/*margin: 0 0 0 0; top right bottom left*/	
}

body {
  min-width: 760px;
}

/*************************  Pseudo classes *************************/

h1 {
	font-family: Arial, Tahoma, sans-serif;
	font-size: 48px;
	font-weight: bold;
}

h2 {
	font-family: Arial, Tahoma, sans-serif;
	font-size: 24px;
	font-weight: bold;
}

h3 {
	font-family: Arial, Tahoma, sans-serif;
	font-size: 18px;
	font-weight: bold;
}

img.figure {
  border: 2px solid black;
}

p {
  padding: 5px;
}

a {
  padding: 0px 5px 0px 0px;
  color: blue;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}

a:selected {
  font-weight: bold;
}

ol {
  list-style-type: none;
  margin: 0px;
  padding: 0px 0px 0px 0px;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px 0px 0px 0px;
}

li {
	list-style-type: none;
  margin: 0px;
  padding: 10px 0px 0px 5px;
}

.clear { clear: both; }

/*************************  ID's *************************/
#mainContainer {
  width: 80%;
  margin: 0 auto; /*** Centers the design ***/
  background: white;
  border-left: 10px solid gray;
  border-right: 10px solid gray;
}

#header {
  width: 100%;
  height: 120px;
  background: gray;
  text-align: center;
  border: 7px solid gray;
}

/**************************
CONTENT AND COLUMNS
**************************/
.outer {
  padding-left: 120px;  
}

.inner {
  width: 100%; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
  padding-bottom 45px;
}

/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
  float: left;
  width: 100%;
  margin-left: -120px; /*** Same length as .outer padding-left but with negative value ***/
}

/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#content {
  width: 95%;
  float: left;
  padding-left: 7px;
  position: relative; /*** IE needs this  ***/
  margin-right: -120px;
  border-left: 5px solid gray;
}

/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
  font-size: 85%;
  float: left;
  width: 110px;
  background: white;
  position: relative; /*** IE needs this  ***/
}
#left ul {
  list-style: none;
  padding-bottom: 4px;
}
#left li {
  padding-bottom: 2px;
}

/**************************
FOOTER
**************************/
#footer {
  background: gray;
  color: black;
  text-align: center;
  padding: 7px;
  width: 100%;
}

/**************************
Contact
**************************/
#contactform {
  text-align: left;
  width: 400px;
  background-color: Silver;
}

/* fieldset styling */
fieldset {
  margin: 1em 0; /*  space out the fieldsets a little*/
  padding: 1em;
  border : 2px solid black;
}

/* legend styling */
legend {
  font-weight: bold;
}

/* style for  labels */
label {
  float: left;
  width: 8em;
}

input[type="text"], textarea {
  width: 200px;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

input.radio, input.checkbox, input.submit {
	font-family: Arial, Tahoma, sans-serif;
  font-weight: bold;
  width: auto;
}

input.radio {
  float: left;
  margin-right: 1em;
}

textarea {
  width: 300px;
  height: 100px;
}


