/*

== COLORS  ==
Oranje: FF7F2A
Menu Background: 7F7F7F
Menu item background: 4D4D4D
Menu text: E0E0E0

*/


/* --- Global styles ---------------------------*/
body,
li,
p,
a,
em {
  font: normal normal 1em/1em verdana, Arial, Helvetica, sans-serif;
  color: #4D4D4D;
  text-decoration: none;
}

html,
body {
  font-size: .9em;
  height:100%;
  margin: 0;
  padding: 0;
}

/* --- /Globals styles ---------------------------*/



/* --- Clear Float ------------------- */
/* These rules can be added to existing rules or you can add 'clearfix' as a mulitple classname */

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.clearfix {  display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/* --- // Clear Float ----------------- */



/* --- Header ---------------------------*/
/* Used fixed sizes because this text is part of the design */

#siteHeader {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  letter-spacing: .2em;
}

#siteHeader > div:first-child {
  margin: 0 auto;
  width: 700px;
  font-size: 1.23em;
  letter-spacing: .2em;
  line-height: 2em;
  padding-top: .4em;
  vertical-align: middle;
}

#logoBackground {
  background: #FF7F2A;
  padding: .5em;
}

#logo {
  margin: 0 auto;
  width: 700px;
}

#logo div {
  float: left;
  padding: 0px
}

#contact {
  width: 384px;
  font-size: 1em;
  line-height: 1.6em;
  float: left;
  text-align: right;
  position: relative;
  color: #E0E0E0;
}

#contact em {
  padding: 0 0 0 .4em;
  margin-right: -0.6em;
  color: #FFF;
  font-family: Andale Mono, monospace;

}

#contact em:before {
  content: "[";
  color: #000;
}

#contact em:after {
  content: "]";
  color: #000;
}

#contact a {
  color: #E0E0E0
}

#contact a:hover {
  text-decoration: underline;
}

/* --- /Header ---------------------------*/



/* --- Menu ---------------------------*/

#menu {
  width: 113px;
  padding: 0;
  margin: 0;
  float: left;
  background-color: #7F7F7F;
  min-height: 100%;
  height: auto;
  height: 100%;
}

#menu ul {
  margin: 0;
  padding: 1.6em 0 0 0;
}

#menu ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
  width: 100%;
}

#menu ul li a {
  display: block;
  font-size: .8em;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 2em;
  height: 2em;
  padding: .4em .6em;
  margin: .8em 0;
  color: #E0E0E0;
  background-color: #4D4D4D;
  border-style: dotted;
  border-width: 1px 0;
  border-color: #E0E0E0;
}

#menu ul li a:hover,
#menu ul li a.active {
  color: #FF7F2A;
}

/* --- /Menu ---------------------------*/



/* --- Content ---------------------------*/
#siteContainer {
  margin: 10px auto;
  width: 700px;
  padding: 0;
  min-height: 100%;
  height: auto;
  height: 100%;
}

#site {
  float: left;
  width: 585px;
  background-image: url("../gfx/background.png");
  min-height: 100%;
  height: auto;
  height: 100%;
}

#content {
  margin: 0 0 0 10px;
}

#content h1 {
  margin: 0;
  padding: 0 0 0 .6em;
  line-height: 1.8em;
  color: #7F7F7F;
  font-size: 1.2em;
  text-transform: uppercase;
  background-color: #E0E0E0;
  border-style: dotted;
  border-width: 1px 0;
  border-color: #7F7F7F;
}


#infoPage #siteContainer #site #content #footer { bottom: 0;
                          width: 780px;
                          margin: 2em 0 0;
                                                  padding: 0;
                          text-align: right;
                          font-size: 0.7em;
                          border: 0px solid lime;
                        }


/* --- /Content ---------------------------*/