/* TYPOGRAPHY */
@import 'reset.css';

/* TYPOGRAPHY */
@import 'typography.css';




/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}
*/

hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: 2px;
  margin: 0em 0 1.2em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }



/* MAIN */

body {
background-color: #fff;
}

h4 {
font-family: Helvetica sans-serif;
font-weight: bold;
margin: 0;
}

.container {
	width: 824px;
	margin: 0;
	padding: 0 15px;
	background-color: white;
	position: relative;
}

.header {
	position:fixed;
	width: 180px;
	clear: none;
	background: white;
	padding-top: 0px;
}
.header p {
	background: black;
	color: white;
	padding: 15px;
	line-height: 1.4em;
	font-size: .9em;
	color: #eee;
}
.header h3 {
	text-align: center;
	line-height: 2.5em;
	margin: 0;
}
.header ul {
	list-style: none;
	margin: 0;
	padding: 15px 0;
}
.header ul li a {
	display: block;
	line-height: 1.8em;
}
.header ul li a:hover {
	color: red;
}

#logo {width:180px;height:114px;}

li {	
	list-style: none;
	font-style: italic;
	color: black;
	height: 17px;
	margin-left: 10px;
	font-size: 11px;
}

a:link, a:visited {
	text-decoration: none;
	color: black;	
}

a:hover {	
	color: gray;	
}


#content {
	text-align: left;
	width: 600px;
	padding-bottom: 15px;
	background: white;
	float: right;
}

#colophon {
	background: black;
	color: white;
	display: block;
	padding: 15px;
	xheight: 115px;
	font-size: 1.1em;
	line-height: 1.8em;
	border-bottom-left-radius: 15px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-webkit-border-bottom-right-radius: 15px;

}

.textalignright{
	text-align: right;
}

.codaslider {
	margin-bottom: 35px;
	background: #f0f0f0;
	position: relative;
}
.codaslider h2 {
color: black;
float: left;
padding: 5px;
line-height: 2em;
height: 2em;
font-size: 2em;
border-top: 6px solid #000;
margin-right: 15px;
}

.codaslider .description {
xheight: 2em;
padding: 5px;
border-top: 6px solid #d0d0d0;
}

.codaslider .description h5 {
font-size: .9em;
position: absolute;
top: 10px;
left: 5px;
color: red;
}

.codaslider .description p {
line-height: 1.5em;
padding-top: 5px;
color: #666;
}

.codaslider .description p.more {
margin-left: 100px;
}


#footer {
	display: block;
	background-color: white;
	font-size: .9em;
	width: 1004px;
	padding: 0 25px 15px 25px;
	margin: 0 auto;
	clear: both;
	margin-top: 0px;
	text-align: right;

}
#footer span {
	float: left;
	}
.container #footer {
	width: auto;
}
#footer a {
	color: black;
	text-decoration: none;
}
#footer a:hover {
	color: red;
}