@charset "utf-8";
/*
Standardised components
*/

/*************************************
FLAT LIST LAYOUT

	This can be called into use using the following classes:
	
			required		: linearlist
			select either	: centre / left / right
			optional		: separators
	
	Example usage:
	
			eg 1:  <ul class="linearlist right separators">
			eg 2:  <ul class="linearlist centre separators">
			eg 3:  <ul class="linearlist left">

*************************************/
ul.linearlist                {list-style-type: none; padding: 0; margin: 0;}
ul.linearlist li             {display: inline; padding: 0; margin: 0;}
ul.linearlist li a           {display: inline-block;}

ul.separators li             {border-left-width: 1px; border-left-style: solid;}
ul.separators li:first-child {border-left-width: 0;} /* removes border from left-most list item  */

ul.centre,ul.center          {text-align: center;}
ul.left                      {text-align: left;}
ul.right                     {text-align: right;}




/*************************************
CLEAR FIX
	
	To be used when a containing block element "collapses"
	when its contents are floated
	
	Example usage:
	
			<div class="cf">
	
*************************************/
.cf:after  {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.cf        {display: inline-block;}
/* Hides from IE-mac \*/
* html .cf {height: 1%;}
.cf        {display: block;}
/* End hide from IE-mac */ 




/*************************************
OVERFADE
	
	To create a fade-in effect on mouseover
	
	Example usage:
	
			eg 1: <div class="overfade"><a href="#">This will fade</a></div>
			eg 2: <a href="#" class="overfade">This will fade</a>
	
*************************************/
a.overfade,.overfade a
{opacity:0.7; filter:alpha(opacity=70)}
a.overfade:hover,.overfade a:hover
{opacity:1; filter:alpha(opacity=100)}



/*************************************
FOOTDOCK
	
	Adds a FaceBook style dock to the bottom of the page
	
	Example usage:
	
			eg 1: <div if="footerdock">
	
*************************************/
#footerdock {
  width: 100%;
  position: fixed; 
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
/* For IE6 and below, roll out some javascript because they dont understand "position: fixed" */
* html #footerdock {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: visible; 
*  top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}

/***************************
FORMS
***************************/
form {padding: 0; margin: 0 0 1em 0; font-size: 1.2em;}
label {display: block; clear: right; margin-top: 1em;}
input,select,textarea {float: right; width: 250px;}
input.button {width: auto;}