@import "reset.css";

* html .clearfix {
	height: 1%;
}

.clearfix {
	float:left;
}

/* hCard, hmm...Microformats :) */
.vcard address {
	display:inline;
	font-style:normal;
}

/* Page structure */

#page-wrap {
	width:768px;
	margin:0pt auto;
}

#header {
	min-height:125px;
	height:auto !important;
	height:125px;
	/* We're using absolute positioning so make this a proper container */
	position:relative;
	padding:40px 0px 0px 205px;
	vertical-align:middle;
}

#header #title, #header #strapline {
	float:left;
}

#header #title {
	padding-top:5px;
}

#header #strapline {
	padding-top:20px;
	padding-left:30px;
	/* KLUDGE: fix shrink-wrapping in IE */
	width:50%;
	/* KLUDGE: and it cuts off tailing letters so force a height */
	height: 30px;
}

#nav {
	position:absolute;
	top: 120px;
	left:220px;
	/* KLUDGE: fix shrink-wrapping in IE. I feel really dirty even just looking at this, surely theres a better way! */
	width:70%;
}

#nav li {
	float:left;
	height:20px;
	padding-top:7px;
	padding-right:20px;
	padding-left:20px;
}

/* KLUDGE: yet another IE fix because of no CSS 2.1 selector support */
#nav li.first {
	padding-left:0px;
}

#page {
	padding-top:44px;
}

.content {
	padding:0px 25px 22px 25px;
	clear:both;
	width:718px;
}

.content h1 {
	display:none;
}

#privacy h1 {
	display:block;
}

#intro img {
	float:right;
	padding-left:10px;
}

.content h2 {
	margin-bottom:10px;
}

#intro h2 {
	margin-top:10px;
}

.content ul {
	list-style-type:disc;
	padding-left:20px;
}

.content p {
	margin-top:10px;
	margin-bottom:10px;
}

#cols {
	padding-bottom:30px;
	position:relative;
	margin-top:57px;
}

#cols li {
	float:left;
	width:248px;
	margin-left:12px;
}

/* KLUDGE: IE fix - should be able to use #cols li + li to specify margin */
#cols li.first {
	margin-left:0px;
}

/* KLUDGE: override parent styles, ideally we'd specify them with #cols > li in the first place but you know, IE... */
#cols li li {
	float:none;
	width:auto;
	margin-left:0px;
}

#cols h3 {
	height:37px;
	margin-top:-37px;
	padding-top:15px;
	/* KLUDGE: without this IE6 chokes on the negative margins */
	position:relative;
}

#cols li h4 {
	display:inline;
}

#cols ul li, #cols li p {
	padding-left:20px;
	padding-right:20px;
	padding-bottom:10px;
}

#cols li li p {
	padding:5px;
}

#cols ul {
	list-style-position:inside;
	list-style-type:disc;
}

.section {
	padding-bottom:30px;
}

.section img {
	padding-bottom:10px;
	padding-top:10px;
}

#about .section img {
	padding-top:0px;
}

#about h2 .quals {
	font-size:.8em;
	font-weight:normal;
}

.section img.left {
	float:left;
	padding-right:20px;
}

.section img.right {
	float:right;
	padding-left:20px;
}

#footer {
	padding:10px;
}

#footer .tel {
	float:left;
}

#footer .email, #footer .privacy {
	float:left;
	clear:left;
}

#footer .privacy,#footer .attribution {
	padding-top:5px;
}

#footer .attribution {
	float:right;
}

/* Contact page specific styles */

#contact .section {
	width:45em;
	margin: 0pt auto;
}

#contact .section ul {
	list-style-type:none;
}

#contact .section ul li {
	padding-top:5px;
}

#contact .section span.label {
	float:left;
	width:6em;
}

#contact .section address span, .vcard-download {
	margin-left:6em;
	display:block;
}

.vcard-download {
	padding-left:32px;
	background:transparent url(../images/vcard.gif) no-repeat;
	height:20px;
	line-height:20px;
}

/* Backgrounds, borders etc. */

body {
	background:#8EE1D4 url(../images/bg.png) repeat-x;
}

#header {
	background:transparent url(../images/header.png) no-repeat;
}

#nav li {
	background:transparent url(../images/nav.png) repeat-y;
}

/* KLUDGE: override for IE, I'd really like to use li + li for BG */
#nav li.first {
	background-image:none;
}

#page {
	background:transparent url(../images/page-top.png) no-repeat;
}

.content {
	background: transparent url(../images/content-bg.png) bottom no-repeat;
}

#cols {
	background: transparent url(../images/cols-bg.png) bottom no-repeat;
}

#cols h3 {
	background: transparent url(../images/col-head-bg.png) no-repeat;
}

/* Links */

a:active, a:link {
	color:#3333FF;
}

a:hover {
	text-decoration:none;
}

#title a, #title a:link, #title a:active, #title a:visited, #title a:hover {
	color:#fff;
	text-decoration:none;
}

/* Type */

body {
	font-family:"Trebuchet MS",Helvetica,Arial, sans-serif;
	color:#444;
	font-size:62.5%;
}

h1 { font-size:1.6em; }

h2 { font-size:1.2em; }

h3 { font-size:1.2em; font-weight:normal; }

h1, h2, h3, #nav, #strapline {
	font-family:Helvetica,Arial, sans-serif;
}

#page { font-size:1.4em; }

#header #title, #header #strapline, #cols h3 {
	color:#fff;
}

#header #title {
	font-style:italic;
	font-family: "Lucida Grande", Helvetica,Arial, sans-serif;
	font-size:3.5em;
}

#header #title {
	font-weight:bold;
}

#strapline {
	font-size:1.6em;
	font-weight:normal;
}

#nav {
	font-weight: bold;
}

#nav a, #nav a:active, #nav a:link, #nav a:visited {
	color:#333;
	text-decoration:none;
	font-size:1.6em;
}

#nav a.current, #nav a:hover {
	text-decoration:underline;
}

#cols h3 {
	text-align:center;
	font-weight:bold;
}

.section h2 {
	font-size:1.3em;
}

.section h3 {
	font-weight:bold;
}

#footer {
	font-size:1.2em;
	font-family: Helvetica,Arial, sans-serif;
}

#footer .attribution, #footer .privacy {
	font-size:0.9em;
}

#privacy .content {
	font-size:.9em;
}