/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2007.10.23
   PURPOSE: Controls the site layout
 **************************************************************/

/**************************************************************
   .width: global width class - done this way so easier to 
           change if required in future
 **************************************************************/

.width {
  position: relative;
  z-index: 0;
  width: 766px;
  margin: 0 auto;
  text-align: left;
}


/**************************************************************
   #header: holds menu and main image
 **************************************************************/
 
#header {
  height: 219px;
  width: 100%;   
  background: url(../img/bg/cityscape.gif) repeat-x bottom center;
}
 
#header .width {
  height: 215px;
  background: #502300 url(../img/bg/header.jpg) no-repeat top left;
  border: 4px solid #230F00;
  border-top: 0;
}
 
#header #logo {
  position: absolute;
  top: 50px;
  left: 1px;
  z-index: 2;
  
  width: 292px;
  height: 169px;
  
  background: url(../img/bg/sidebar_top.png) no-repeat top left;
}

#header ul {
  margin: 0;
  padding: 0 27px 0 28px;  
  list-style: none;
  
  height: 45px;
  
  background: url(../img/bg/translucent.png) repeat top left;
}

#header ul li {
  display: inline;
  margin: 0;
  padding: 0;  
}

#header ul li a {
  float: left;
  width: 187px;
  padding: 10px 25px 8px 25px;
  
  font: 1.7em georgia, sans-serif;
  letter-spacing: -0.05em;
  
  color: #FDF6EF;
}

#header ul li a:hover,
#header ul li a.hover {
  color: #FFF;
  background: url(../img/bg/menu_hover.png) repeat-x top left;
}

#header ul li.here a,
#header ul li.here a:hover {
  color: #B8D854;
  background: url(../img/bg/menu_hover.png) repeat-x top left;
}
 
 
 
/**************************************************************
   #content: holds site content
 **************************************************************/
 
#content {
  float: left;
  width: 100%;
  min-width: 774px;
  min-height: 317px;
  padding: 5px 0 25px 0;
  background-color: #502300;
}

#content #overlay {
  position: absolute;
  top: -5px;
  left: 6px;
  z-index: 2;
  
  width: 282px;
  height: 317px;
  
  background: url(../img/bg/sidebar_bottom.png) no-repeat top left;  
}

/* Elgin logo text */
#content #overlay a {
  display: block;
  position: absolute;
  top: 15px;
  left: 46px;
  z-index: 3;
  
  width: 191px;
  height: 106px;
  
  background: url(../img/bg/logo.gif) no-repeat top left;
}



/**************************************************************
   #footer: holds site content
 **************************************************************/
 
#footer {
  clear: both;  
  width: 100%;
  min-width: 774px;
  padding: 20px 0 25px 0;
}

#footer .borderBottom {
  padding-bottom: 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid #341700;  
}


/**************************************************************
   Site columns
 **************************************************************/

.sideCol,
.mainCol {
  position: relative;
  z-index: 4;
  padding-bottom: 25px;
}

.sideCol {
  float: left;
  margin-left: 54px;
  width: 182px;
}

.mainCol {
  float: right;
  margin-right: 25px;
  width: 453px;
}

#content .sideCol {
  margin-top: 125px;
}




/**************************************************************
   Side menu
 **************************************************************/

ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.menu li {
  display: inline;
  margin: 0;
  padding: 0;  
}

ul.menu li a {
  display: block;
  padding: 10px 0 10px 25px;
  
  font: bold 1em georgia, serif;
  letter-spacing: -0.05em;
  word-spacing: 0.2em;
  
  color: #FDF6EF; 
  border-top: 1px solid #5E3414;
}

ul.menu li.iconPaper a {  
  background-image: url(../img/icons/paper.gif);
  background-repeat: no-repeat;  
  background-position: 6px 50%;
}

ul.menu li.iconSpeech a {  
  background-image: url(../img/icons/speech.gif);
  background-repeat: no-repeat;  
  background-position: 3px 60%;
}


ul.menu li.iconHome a {  
  background-image: url(../img/icons/home.gif);
  background-repeat: no-repeat;  
  background-position: 4px 50%;
}



/**************************************************************
   Buttons with opacity headings
 **************************************************************/

a.imgButton {
  width: 201px;
  height: 71px;
  border: 4px solid #230F00;
}

a.imgButton span {
  display: block;
  padding: 5px;
  
  font: bold 1em georgia, serif;
  letter-spacing: -0.05em;
  word-spacing: 0.2em;
  cursor: pointer;
  
  color: #FFF;
  background: url(../img/bg/translucent.png) repeat top left;
}

a:hover.imgButton {
  border-color: #000;
}

a:hover.imgButton span {  
  background: #000;
}

a.buttonYoga {
  background: url(../img/buttons/yoga.jpg) no-repeat center center;
}

a.buttonMassage {
  background: url(../img/buttons/massage.jpg) no-repeat center center;
}


.sideCol a.imgButton {
  width: 185px;
}




/**************************************************************
   Big Links
 **************************************************************/
 
ul.bigLinks {
  margin: 10px 0;
  padding: 0;
  list-style: none;
   
}
 
ul.bigLinks li {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
}
 
ul.bigLinks li a,
ul.bigLinks li a:visited {  
  display: block;
 
  margin: 10px 0;
  padding: 3px;
 
  text-decoration: none;
  border: 0;  
}
 
ul.bigLinks li a:hover {
  background-color: #2F1500;
}
 
ul.bigLinks li a span.title {
  font: bold 1em georgia, serif;
  letter-spacing: -0.05em; 
  color: #B8D854;  
}
 
ul.bigLinks li a:hover span.title,
ul.bigLinks li a:hover span.desc {
  color: #FFF;
}
 
ul.bigLinks li a span.desc {
  display: block;
  color: #FDF6EF;
} 



/**************************************************************
   Utility Classes
 **************************************************************/
 
 .floatRight {
   float: right;
 }
 
 .floatLeft {
   float: left;
 }
 
 .clear {
   clear: both;
 }
 
 .block {
   display: block;
 }
 
 .alignRight {
   text-align: right;
 }
 
 .alignJustify {
   text-align: justify;
 }
 
 .small {
   font-size: 0.8em;
 }