/* CSS Document */

/* General styles */
body {
  font: 0.9em arial, helvetica, sans-serif;   
  margin: 0;
  border: 0;
  padding: 0;   
  color: #000;
  background-color: #E2DEEC;
} 

p.footer { margin: 5px 20px; }

img { border: 1px solid #000; }

h1, h2, h3, h4 { color: #5a6fed; }

div.clear { clear: both; }
 
/* Standard links */
a:link {
  color: #5a6fed;
  text-decoration: none;
  }
a:visited { 
  color: #5a6fed;
  text-decoration: none;
  }
a:hover { 
  color: #5a6fed;
  text-decoration: underline; 
  }
  
a:active { 
  color: #5a6fed;
  text-decoration: none; 
  }
  
/* Tables */
table {
  width: 600px;
  background-color: #E2DEEC;
  border: 1px solid #888;
  }
  
td, th {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #888;
  }
  
th {
  background-color: #eee;
  }

/* Specific divs */
#container { margin: 10px 0; }

#page {
  color: #000;
  background-color: #fff;  
  width: 800px;
  margin: 2px auto;
  border: 1px solid #888;
  }

#content { padding: 0.9em; }

#navigation {
  color: #000;
  background-color: #fff;
  border: 1px solid #888;
  margin: 2px auto;
  width: 800px;
  padding: 15px 0;
  text-align: left;
  }  

#header_image {
  width: 800px;
  height: 180px;
  margin: 2px auto;
  border: 1px solid #888;
  padding: 0;
  background-image: url(../images/pencils1.jpg);
  }

#footer {
  width: 800px;
  color: #888;
  background-color: #fff;
  border: 1px solid #888;
  margin: 2px auto;
  text-align: center;
  }

/* Navigation */  
ul.navigation {
  padding: 0;
  margin: 0 5px;
  text-align: center;
  }

li.navigation {
  display: inline;
  padding: 6px 1.7em;
  border: 1px solid #aaa;
  margin: 3px;
  font-weight: bold;
  }

li.navigation_active {
  display: inline;
  padding: 6px 1.7em;
  border: 1px solid #000;
  margin: 3px;
  background-color: #ccc;
  font-weight: bold;
  }

li.navigation:hover {
  background-color: #ccc;
  border: 1px solid #000;
  }

/* Navigation link styles */
a.navigation:link {
  color: #555;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  }
  
a.navigation:visited {
  color: #555;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  }

a.navigation:hover {
  color: #000;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  }
  
a.navigation:active {
  color: #000;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  }
  
a.navigation_active:link {
  color: #000;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  }

a.navigation_active:visited {
  color: #000;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  }
  
a.navigation_active:hover {
  color: #000;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  }
  
a.navigation_active:active {
  color: #000;
  text-decoration: none;
  font-size: 1.0em;
  font-weight: bold;
  }
  
/* Portfolio */
  
div.portfolio { 
  clear: left; 
  margin: 20px 0;
  }

p.portfolio, h2.portfolio {
  margin-left: 430px;
  }
  
img.portfolio {
  float: left;
  }

/* Contact form */
fieldset { border: 0; }

li {
  margin: 10px 0;
  }

form label {
  float: left;
  width: 9em;
  text-align: right;
  margin-right: 5px;
  }
  
form li {
  list-style: none;
  }
  
#submit_button {
  margin-left: 10em;
  }
  
input + span, textarea + span {
  color: #f00;
  vertical-align: top;
  }