/* Copyright Alex Monney all rights reserved 
 * 
 *  * General styles
 *    - Reset declarations
 *    - base element styles
 * 
 *  * Helper styles
 *    - Generic helper classes eg notifications and errors
 *    - Normally just one class which affecting one element.
 *
 *  * Page structure
 *    - Skeleton inc page furniture
 *    - Header, footer, navigation
 *
 *  * Page components
 *    - Most styles will be here
 *    - Idealy will be reusable comonents
 * 
 *  * Overrides
 *    - Override general cases with specific non-standard behaviour here
 *      
 */

/*****************************************************
 * General Styles
 *****************************************************/

html,body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd {
  margin: 0;
  padding: 0;
  color: #000;
  font: 13px arial, helvetica, sans-serif;
}
body {
  margin: 20px 0;
  background-color: #999477;
}
h1,h2,h3,h4,h5,h6 {
  font-weight: bold;
}
h1 {
  font-size: 17px;
  margin: 0 0 10px 0;
  padding: 0 0 5px 0;
  border-bottom: 2px dashed #FFF;
}
img {
  border: 0;
}
p {
  margin-bottom: 10px;
}
a {
  color: #001894;
}
ul {
  list-style: none;
  list-style-position: outside;
}

/*****************************************************
 * Helper Styles
 *****************************************************/

/* Force elements to contain floats entirely */
.postclear:after {
  content : '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.success {
  color: green;
}
.error {
  color: #D00;
}

/*****************************************************
 * Page Structure
 *****************************************************/

#header, #midder, #footer {
  position: relative;
  width: 760px;
  margin: 0 auto;
  background-color: #C0B79F;
  border: solid #FFF;
}

#header {
  height: 220px;
  background-image: url(logo.jpg);
  border-width: 2px 2px 0 2px;
}
#header h1 {
  position: absolute;
  text-indent: -9999px;
  border: 0;
}
#skiptocontent {
  display: none;
}
#styleswitcher {
  position:absolute;
  bottom:0;
  right:0;
}
#styleswitcher li {
  float: left;
  padding: 5px;
}
#styleswitcher li a {
  color: #FFF;
  font-weight: bold;
}


#midder {
  width: 558px;
  padding-left: 202px;
  border-width: 0 2px 2px 2px;
  background-image: url(menubg.png);
  background-repeat: repeat-y;
}
#midder #menucol {
  float: left;
  margin: 0 0 10px -202px;
  width: 200px;
  display: inline; /* ie6 fix for double margin bug */
}
#midder #menucol li {
  position: relative;
  zoom: 1; /* ie6 setting to fix layout bug */
}
#midder #menucol li ul {
  margin: 0 0 0 15px;
}
#midder #menucol li a, #midder #menucol li span.section {
  display: block;
  padding: 3px;
  font-weight: bold;
  text-decoration: none;
}
#midder #menucol li a.selected, #midder #menucol li a:hover {
  background: #FFF;
}

#midder #content {
  float: left;
  width: 538px;
  min-height: 300px;
  padding: 5px 10px;
  border-top: 2px solid #FFF;
}

#footer {
  padding: 5px 0;
  text-align: center;
  font-size: 11px;
  border-width: 0 2px 2px 2px;
}

/*****************************************************
 * Page Components
 *****************************************************/

/* form styles */
form div {
  padding: 4px 0;
}
form label {
  float: left;
  width: 120px;
}
input, textarea {
  border: 2px solid #898467;
  width: 300px;
  padding: 2px;
  background: #CBC5B5;
}
textarea {
  height: 200px;
}
form div.subm {
  margin-left: 122px;
}

/* vcard contact detail */
div.vcard {
  position: relative;
  padding: 5px;
  margin: 10px 0 0 0;
  border: 1px dotted #FFF;
  zoom:1; /* does the postclear job in ie */
}
div.vcard h2 {
  font-size: 14px;
  padding: 0;
  margin: 0 0 3px 0;
}
div.vcard p {
  margin: 3px 0 6px;
}
div.vcard img {
  margin: 5px 0 5px 10px;
  float: right;
  max-width: 40%;
  border: 2px solid #898467;
}

div.vcard .fakelabel {
    float: left;
    margin-left: -60px;
    padding: 0;
}
div.vcard div {
    padding-left: 60px;
}


/*****************************************************
 * Overrides
 *****************************************************/

img.map {
  float: right;
  margin: 0 0 10px 10px;
  border: 0;
}