/***********************************************************************   
   Filename: layout.css
   Purpose:  Position and style main layout elements of template
   Authors:  Pat Heard
 ***********************************************************************/



/***********************************************************************
   #container: holds all site content and sets white background
 ***********************************************************************/
 
#container {
  width: 1000px;
  min-height: 100%;

  position: relative;  
  z-index: 2;
}



/***********************************************************************
   #top: translucent top bar and arch
 ***********************************************************************/

#topBar {
  position: absolute;  
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  min-width: 1000px;
  height: 4em;
  
  background: url(../images/bg/trans-line.png) repeat-y 302px 0;
}

#arch {
  position: absolute;
  top: 4em;
  left: 302px;
  height: 110px;
  width: 60px;
  background: url(../images/bg/arch.png) repeat-y 0 0;  
}


/***********************************************************************
   #logo: wood column
 ***********************************************************************/

#logo {
  position: absolute;
  top: 0;
  left: 0;

  width: 302px;  
  min-height: 100%;
  background: url(../images/bg/trans-px.png) repeat top left;
}

#logo h1,
#logo h2 {
  margin: 0;
  padding: 0;
  font-size: 0px;
  text-indent: -1000em;
}

#logo #wood,
#logo #shadow,
#logo #stas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;  
}

#logo #wood {
  z-index: 3;  
  width: 287px;
  background: url(../images/bg/wood.jpg) repeat-y top left;
}

#logo #shadow {
  z-index: 2;
  width: 305px;
  background: url(../images/bg/shadow.png) repeat-y top left;  
}

#logo #stas {
  left: 17px;
  z-index: 4;
  height: 494px;
  width: 252px;
  background: url(../images/bg/logo-stas.jpg) no-repeat top left;  
}



/***********************************************************************
   #menu: main menu
 ***********************************************************************/

#menu {
  float: left;
  position: relative;
  left: -10px;
  z-index: 5;
  
  margin: 0;
  padding: 0 0 3.5em 0;
  
  list-style: none;
}

#menu li {
  margin: 0;
  padding: 0;
  display: inline;
}

#menu li a {
  float: left;
  margin-right: 15px;
  padding: 18px 10px 10px 10px;
  font: 1.2em georgia, serif;
  text-decoration: none;
  color: #ffec6e;
}

#menu li a:hover {
  color: #fff;
  background: url(../images/bg/trans-px-hover.png) repeat top left;
}

#menu li.here a:hover,
#menu li.here a {
  color: #fff;
  background: url(../images/bg/trans-px.png) repeat top left;
}

#menu li.last a {
  margin: 0;
}


/***********************************************************************
   #content: holds everything except wood column
 ***********************************************************************/

#content {
  padding: 0 0 40px 365px;
  background: url(../images/bg/wood.jpg) repeat-y top left;
} 

#text {
  clear: both;
  padding: 0 45px 0 0;
}


/***********************************************************************
   #footer: holds bottom actions, link blocks, text and copyright
 ***********************************************************************/

#footer {  
  position: relative;
  clear: both;
  padding: 60px 0 20px 0;
  
  font-size: 0.8em;
  line-height: 1.6em;
}

#footer span {
  color: #98b548;
}

#donate-canada-helps {
	position: absolute;
	right: 100px;
	top: 80px;
	
	width: 119px;
	height: 52px;
	background: url(../images/bg/logo-canada-helps.png) no-repeat 0 -52px;
}

a:hover#donate-canada-helps {
	background-position: 0 0;
}




/***********************************************************************
   Generic display classes
 ***********************************************************************/



.block {
  display: block;
}


/* Floats */
.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

img.floatLeft {
  padding: 0 10px 10px 0;
}

img.floatRight {
  padding: 0 0 10px 10px;
}

.clear {
  clear: both;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}


.small {
  font-size: 0.85em;
  line-height: 1.3em;
}

.arial {
  font-family: arial, sans-serif;
}

.green {
  color: #6c861c; 
}

h1 .small {
  position: relative;
  top: 5px;
  font-size: 0.6em;  
}

h1 .small a {
  color: #09677e;
}

h1 .small a:hover {
  color: #033e4d;
}

.marginLeft {
  margin-left: 20px;
}

.marginRight {
  margin-right: 20px;
}


/* Black image caption */
.caption {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px;  
  background: #000;  
}

.caption strong {
  display: block;
  padding: 4px 0;
  font: 0.8em arial, sans-serif;
  text-align: center;
  color: #fff;
}

.caption strong b {
  color: #fdf68e;
}


/* Big black links */
ul.bigLinks {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.bigLinks {
  margin: 0;
  padding: 0;
}

ul.bigLinks a {
  display: block;  
  margin: 20px 0;
  padding: 23px 0 22px 110px; 
  width: 220px;
  
  text-decoration: none;
  
  color: #42bbd9;
  background: #000 url(../images/icon-pdf.png) no-repeat 4px 50%;
}

ul.bigLinks li.last a {
  margin-right: 0;
}

ul.bigLinks a b {
  text-decoration: underline;
}

ul.bigLinks a:hover {
  color: #fff;
}

.paging a,
.paging b {
  padding: 0 8px 0 10px;
  border-left: 1px solid #96b247;
}

ol.no-underline a {
  text-decoration: none;
}

p.up-arrow {
  position: relative;
  padding-bottom: 10px;
  height: 22px;  
}

p.up-arrow a {
  position: absolute;
  top: 0;
  right: 0;
  height: 11px;
  width: 16px;
  background: url(../images/bg/up-arrow.png) no-repeat top left;
}