/* @group General styles */

/* @group Reset */

/* Based on http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

body {
    margin: 0 auto;
    position: relative;
    background-color: #fdffe1;
	color: #645951;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5; /* Baseline grid of 21px */
    text-align: center;
}

ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 0;
}

/* tables may still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* @end Reset */

/* @group Font sizes */

/* basic font sizes */
p, ul, ol, dl, table, address, blockquote, fieldset, pre, form div {
	font-size: 1em;  /* 14px */
}

/* deal with likely (but certainly not all) inherited shrinkage */

ul p, ol p, table p, dl p, ul ul, ol ol, ul ol, ol ul, address p, blockquote p, form div div, form div p, fieldset div, table form div {
	font-size: 1em;
}

/* @end Font sizes */

/* @group Margins */

p, ul, ol, dl, address, table, blockquote, pre, fieldset {
	margin-bottom: 1.4286em; /* 20px */
}
p {
	margin: 0.8571em 0 1.4286em 0;
}
form {
	margin-bottom: 1.517em; /* 18px */
}
ul ul, ol ol, ol ul, ul ol {
	margin-bottom: 0;
}

/* @end Margins */

/* @group Links */

a:link,
button.link span {
	color: #8fa52d;
	text-decoration: none;
	font-weight: bold;;
	border-bottom: 1px solid #8fa52d;
}

a:visited {
	color: #8fa52d;
	text-decoration: none;
	font-weight: bold;;
	border-bottom: 1px solid #8fa52d;
}

a:hover,
a:focus,
button.link:hover,
button.link:focus span {
	color: #fff; 
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #8fa52d;
	background-color: #8fa52d;
}
a:active,
button.link:active span {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #8fa52d;
	background-color: #8fa52d;
}

/* @end Links */

/* @group Headings */

h1 {
	font-size: 3.5714em; 		/* 50px */
    line-height: 1; 			/* 50px */
	margin-top: 0.56em; 		/* 28px */
	margin-bottom: 0.5em; 		/* 25px */
    color: #85A923;
}
h2 {
	font-size: 1.7857em;   		/* 25px */
	line-height: 1.4; 			/* 35px */
	margin-top: 1.2em;		   	/* 30px */
	margin-bottom: 1.4em; 	 	/* 35px */
    color: #645951;
}
h3 {
	font-size: 1.2857em;		/* 18px */
	margin-top: 1.1111em;     	/* 20px */
	margin-bottom: 0.5556em; 	/* 10px */
	color: #645951;
}
h4 {
	font-size: 1.1428em;   		/* 16px */
	margin-top:1.25em;	   		/* 20px */
	margin-bottom: 0.625em; 	/* 10px */
}
h5, h6 {
	font-size: 1em;  			/* 14px */
}

/* @end Headings */

/* @group Lists */

.prose ul, ul.bullets, ul.bullets ul {	/* unordered lists more often DON'T require bullets except in extended bits of writing - use the .prose class or apply directly with .bullets */
	list-style-type: disc;
	margin-left: 1.385em; /* 18px */
}
.bullets li {
	margin-top: 0.5em;			/*  8px */
	margin-bottom: 1.25em;		/* 18px */
}

ol {	/* ordered lists usually DO require bullets */
	list-style-type: decimal;
	margin-left: 2.077em; /* 27px */
}

dt {
	font-weight: bold;
	margin-top: 1.385em; /* 18px */
}

/* @end Lists */

/* @group Tables */

table {
	border-bottom: 1px solid #666;
}

caption {
	font-weight: bold;
	padding-bottom: 0.643em; /* 9px */
	font-size:1.077em; /* 14px */
}

thead th {
	border-top: 1px solid #666;
	border-bottom: 3px solid #666;
	padding-top: 0;
	padding-bottom: 0.692em; /* 9px */
}

tbody {
	border-top: 3px solid #666;	/* not rendered in IE6/7 */
}

tbody tr th,
tbody tr td {
	border-top: 1px solid #ddd;
}

th,
td {
	text-align: left;
	padding: 0.385em 0.692em 0.308em 0.692em; /* 5px 9px 4px 9px */
}

/* @end Tables */

/* @group Blockquotes */

blockquote {
	font-style: italic;
	margin-left: 1.385em; /* 18px */
	margin-right: 1.385em; /* 18px */
}

blockquote cite,
blockquote em {
	font-style: normal;
}

/* @end Blockquotes */

/* @group Forms */

/* @group Containers */

form .container {
	margin-bottom: 1.385em; /* 18px */
}

/* @group Fieldsets */

fieldset {
	border: 1px solid #ccc;
	padding: 0 1.385em 0.692em 1.385em; /* 9px 18px 0 18px */
}

legend {
	font-weight: bold;
}

form fieldset .container {
	margin-top: 1.385em; /* 18px */
	margin-bottom:0;
	position: relative;
}

/* @end Fieldsets */

/* @end Forms */

/* @group Labels */

label {
	font-weight: bold;
	cursor: pointer;
}

.meta-label {
	font-weight: bold;
	margin-bottom: 0;
}

.multi-container label, 
.radio-container label, 
.checkbox-container label {
	font-weight: normal;
}

.radio-container label, 
.checkbox-container label {
	display: block;
}

.compact label {
	display: inline;
}

/* @end */

/* @group Meta */

form .help {
	display: block;
	color: #777;
	font-style: normal;
	font-size: 0.846em; /* 11px */
}

/* @end Meta */

/* @group Form controls */

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: 1em;
}

textarea,
input[type='text'], 
input[type='password'],
select {
	border-width: 1px;
	border-style: solid;
	border-top-color: #999;
	border-left-color: #999;
	border-bottom-color: #ccc;
	border-right-color: #ccc;
	padding: 0 1px 1px 1px;
}

textarea:focus,
input[type='text']:focus, 
input[type='password']:focus,
select:focus {
	border-color: #888;
	outline: 2px solid #ffffaa;
}

input.short {
	width: 4em;
}

input.medium,
textarea.medium {
	width: 12em;
}

input.long,
textarea.long {
	width: 30em;
}

textarea {
	width: 99%;
	display: block;
}

.button-container input {
	font-weight: bold;
}

.button-container input.cancel {
	font-weight: normal;
}

button {
	border: 0;
	padding: 0;
	cursor: pointer;
	width: auto;
	overflow: visible;
}

button.link {
	background-color: #fff;
	font-weight: normal;
}

/* accessability feature, resize check and radio inputs */
.radio-container input, 
.checkbox-container input {
	width: 1em;
	height: 1em;
}

/* @end */

/* @end */

/* @group Other elements */

address {
	font-style: normal;
}

pre,
code,
kbd,
tt,
samp,
tt {
	font-family: "andale mono", monospace;
}

ins {
	text-decoration: underline;
}

del {
	text-decoration: line-through;
}

/* @end Other elements*/

/* @end General styles*/

/* @group Helper styles */

.fancy {
	font-family: Baskerville, Bell MT, Adobe Caslon Pro, Goudy Old Style, Georgia, serif;
	font-style: italic;
	font-weight: normal;
	color: #5B8778;
}
.special {
	color: #3B6F5D;
}

strong em {
	color: #FF0033;
	font-style: normal;
	text-transform: uppercase;
}

.vcard-download {
	text-indent:  32px;
	background-image: url('/img/icon/vcard.gif');
	background-repeat: no-repeat;
	background-position: 0% 50%;
}

.pull-left {
	float: left;
	margin-right: 1.426em;		/* 20px */
	display: inline;
}

.pull-right {
	float: right;
	margin-left: 1.426em;		/* 20px */
	display: inline;
}
img.leader {
	width: 76px;
	height: 76px;
	padding: 4px 4px 9px 4px;
	background-image: url(/img/bg/leader-template.png);
	background-repeat: no-repeat;
	background-position: top left;
}

a.block-image:link,
a.block-image:visited,
a.block-image:hover,
a.block-image:focus,
a.block-image:active {
	border: none;
	background: transparent;
}

a.block-image img {
	/*display: block;*/
}

.block span,
.block a,
.block a:link,
.block a:visited,
.block a:hover,
.block a:focus,
.block a:active {
	background-color: #645951;
	border: none;
	color: #fff;
	padding: 0.2em 0.5em;
}
h1.block {
	font-size: 1.5714em;
	margin-bottom: 1.2em;
	line-height: 1.3636;
}

.intro {
	font-size: 1.5em;			/* 21px */
	line-height: 1.4286;		/* 30px */
	margin-bottom: 1em;			/* 21px */
	color: #433B36;
	font-weight: lighter;
}
.intro strong {
	font-weight: bolder;
}
.sub {
	font-size: 1.1428em;		/* 16px */
	line-height: 1.5625;		/* 25px */
	margin-bottom: 1.25em;		/* 20px */
}
.meta {
	font-size: 0.8571em;		/* 12px */
	line-height: 1.25;			/* 15px */
	margin-bottom: 2.0833em;	/* 25px */
}

h2.prominent,
h3.prominent {
	font-size: 3.4286em;		/* 48px */
	margin: 0;
	line-height: 1;
}

.meta {
	font-size: 0.8571em;		/* 12px */
}
.flow .meta {
	color: #666;
}

a.rss:link, 
a.rss:visited,
a.rss:hover,
a.rss:focus,
a.rss:active {
	border: none;
	white-space: nowrap;
}

a.rss img,
a.email img {
	position: relative;
	top: 3px;
	margin-right: 5px;
	text-decoration: none;
}
.people img {
	width: 76px;
	height: 76px;
	padding: 4px 4px 9px 4px;
	background-image: url(/img/bg/leader-template.png);
	background-repeat: no-repeat;
	background-position: top left;
}
.screenshot {
	background-color: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	display: block;
}

/* @end Helper styles */

/* @group Page structure */

.section {
	clear: both;
}
.contents {
	text-align: left;
	min-width: 54em;
	max-width: 78em; /* 1092px */
	width: 90%;
	margin: 0 auto;
	position: relative;
	clear: both;
	overflow: hidden;
}

/* @group Flow */

.flow {
	text-align: left;
	min-width: 54em;
	max-width: 78em; /* 1092px */
	width: 90%;
	margin: 0 auto;
	position: relative;
	clear: both;
	overflow: hidden;
}

.flow .contents  {
	min-width: 52em;
	max-width: inherit;
	width: auto;
	margin: 0 0 0 20px;
	padding-bottom: 1em;
	position: relative;
	clear: both;
	overflow: hidden;
}

/* @end */

/* @group Contact */

#contact {
    background-color: #a0cb29;
    color: #fff;
}

#contact .contents {
	background-color: #90b623;
    color:  #fff;
	min-height: 2.1428em;
}

#contact a:link,
#contact a:visited,
#contact a:hover,
#contact a:focus,
#contact a:active {
	background-color: transparent;
	color: #fff;
	border: none;
	text-decoration: underline;
}

#contact address {
	background-color: transparent;
    color: #fff;
    display: inline;
    padding-left: 1.4286em;
    line-height: 2.1428;
}

/* @end Contact */

/* @group Header */

#header {
	position: relative;
	background-color: #fbfaf8;
	height: 87px; /* 6.0714em if youre into that kinda thing... */
	border-top: 5px solid #f4f3e0;
	border-bottom: 6px solid #f4f3e0;
	margin-bottom: 40px;
	z-index:5;
}
#header .contents {
	overflow: visible;
}

/* @group Logo */

#logo {
    float: left;
    width: 212px;
    margin-top: 15px;
    display: inline;
}
#logo a:link,
#logo a:visited,
#logo a:hover,
#logo a:focus,
#logo a:active {
    border-bottom: none;
    background-color: transparent;
}
/* @end Logo */

/* @group Navigation */

#nav {
    position: absolute;
    top: 0px;
    right: 0;
    float: right;
    width: 540px;
    list-style: none;
}
#nav li {
    width: 100px;
    height: 119px;
    float: left;
    margin-right: 10px;
    overflow: visible;
}
#nav li.aboutus {
    margin-right: 0;
}
#nav li a {
    display: block;
    text-indent: -9999px;
    height: 119px;
    width: 100px;
    background-image: url('/img/nav/nav.png');
    background-color: transparent;
    background-repeat: no-repeat;
    border-bottom: none;
}

/* @group Home */

#nav li.home a,
#nav li.home a:link,
#nav li.home a:visited {
    background-position: 0 0;
}
#nav li.home a:hover,
#nav li.home a:focus,
#nav li.home a:active {
	background-position: 0 -119px;
}
.home #nav li.home a,
.home #nav li.home a:link,
.home #nav li.home a:visited,
.home #nav li.home a:hover, 
.home #nav li.home a:focus,
.home #nav li.home a:active {
	background-position: 0 -238px;
}

/* @end */

/* @group Who We Are */

#nav li.services a,
#nav li.services a:link,
#nav li.services a:visited {
    background-position: -100px 0;
}
#nav li.services a:hover,
#nav li.services a:focus,
#nav li.services a:active {
	background-position: -100px -119px;
}
.services #nav li.services a,
.services #nav li.services a:link,
.services #nav li.services a:visited,
.services #nav li.services a:hover, 
.services #nav li.services a:focus,
.services #nav li.services a:active {
	background-position: -100px -238px;
}

/* @end */

/* @group What We Do */

#nav li.blog a,
#nav li.blog a:link,
#nav li.blog a:visited {
    background-position: -200px 0;
}
#nav li.blog a:hover,
#nav li.blog a:focus,
#nav li.blog a:active {
	background-position: -200px -119px;
}
.blog #nav li.blog a,
.blog #nav li.blog a:link,
.blog #nav li.blog a:visited,
.blog #nav li.blog a:hover, 
.blog #nav li.blog a:focus,
.blog #nav li.blog a:active {
	background-position: -200px -238px;
}

/* @end */

/* @group Stuff We've Made */

#nav li.wiki a,
#nav li.wiki a:link,
#nav li.wiki a:visited {
    background-position: -300px 0;
}
#nav li.wiki a:hover,
#nav li.wiki a:focus,
#nav li.wiki a:active {
	background-position: -300px -119px;
}
.wiki #nav li.wiki a {
	background-position: -300px -238px;
}
.wiki #nav li.wiki a,
.wiki #nav li.wiki a:link,
.wiki #nav li.wiki a:visited,
.wiki #nav li.wiki a:hover, 
.wiki #nav li.wiki a:focus,
.wiki #nav li.wiki a:active {
	background-position: -300px -238px;
}

/* @end */

/* @group Work With Us */

#nav li.aboutus a,
#nav li.aboutus a:focus,
#nav li.aboutus a:active {
    background-position: -400px 0;
}
#nav li.aboutus a:hover,
#nav li.aboutus a:focus,
#nav li.aboutus a:active {
	background-position: -400px -119px;
}
.aboutus #nav li.aboutus a,
.aboutus #nav li.aboutus a:link,
.aboutus #nav li.aboutus a:visited,
.aboutus #nav li.aboutus a:hover, 
.aboutus #nav li.aboutus a:focus,
.aboutus #nav li.aboutus a:active {
	background-position: -400px -238px;
}

/* @end */


/* @end Navigation*/

/* @end Header */

/* @group Footer */

#footer {
	margin-top: 4em;
    background-color: #F6F8DB;
    width: 100%;
    clear: both;
    background-image: url(/img/bg/footer.png);
    background-repeat: repeat-x;
    background-position: bottom left;
    padding-bottom: 1px;
}
#footer .flow {
    overflow: visible;
}
#footer .contents {
    position: relative;
    overflow: visible;
}
#footer h2 {
	position: relative;
	margin: 0;
	top: -0.714em;
	left: 0;
}

#footer #ideas-sheet {
    margin-top: 2em;
    background-image: url(/img/bg/doc.gif);
    background-repeat: no-repeat;
    background-position: 2% 0%;
    min-height: 146px;
}

#footer #ideas-sheet p {
	margin-bottom: 0.3em;
	margin-left: 150px;
}
#footer #ideas-sheet h3 {
	font-weight: normal;
	font-size: 1.7142em;		/* 24px */
	line-height: 1;				/* 24px */
	margin-bottom: 1.25em;		/* 30px */
	margin-top: 0;			
	margin-left: 150px;
}
#footer #ideas-sheet h3 a {
	font-size: 2em;				/* 48px */
	line-height: 1.25;			/* 60px */
	border-bottom-width: 3px;
	position: relative;
	top: 0.2083em;				/* 10px */
}
#footer #ideas-sheet strong {
	display: block;
	float: left;
	width: 4em;
}

#footer .vcard {
    font-weight: bold;
}
#footer .vcard p {
    margin: 0;
}
#footer .vcard .adr {
	margin-bottom: 1.8571em;
}

#footer .vcard .adr .street-address span {
	display: none;
}

#footer .vcard .tel {
	font-weight: normal;
	margin: 0.6em 0;
}

/* @group foot */

#footer .foot {
	clear: both;
	padding-top: 3em;	
	overflow: hidden;
	color: #999;
}

#footer .foot ul {
	float: left;
}
#footer .foot ul li {
	float: left;
	padding: 0 0.71430em;		/* 10px */
	border-right: 1px solid #999;
}
#footer .foot ul li:first-child {
	padding-left: 0;
}
#footer .foot ul li:last-child {
	border-right: none;
}
#footer .foot p.copyright {
	padding: 0;
	margin: 0;
	float: right;
}
#footer .foot p.copyright a:link, #footer .foot p.copyright a:visited {
	font-weight: normal;
	color: #999;
	border-bottom: 1px solid #999;
}

/* @end foot */

/* @end Footer */

/* @group Contact form */

.hasJS #contact-form .flow {
	position: relative;
}
.hasJS #contact-form .hidden {
	display: none;
}
.hasJS #contact-form.active .flow {
	display: block;
}
.hasJS #contact-form .flow .contents {
	position: absolute;
	bottom: 0;
}
#contact-form {
    background-color: #a0cb29;
    color: #fff;
	clear: both;
	overflow: hidden;
}
#contact-form .flow {
	background-color: #90b623;
    color: #fff;
    padding: 1px 0;
}
#contact-form .flow .contents {
	margin-left: 0;
	left: 20px;
	width: 90%;
}
#contact-form h2 {
	color: #fff;
	font-size: 3.5714em;		/* 50px */
	line-height: 1;				/* 50px */
	margin-top: 1em;			/* 50px */
}
#contact-form .snailmail {
	width: 22.22%;
	float: left;
}
#contact-form .snailmail p {
	margin-right: 20%;
	color: #fdffe1;
}
#contact-form form {
	font-size: 1.2857em;		/* 18px */
	line-height: 1.3889;		/* 25px */
	margin-bottom: 2.7778em;	/* 50px */
}
#contact-form label {
	display: block;
}
#contact-form label em {
	color: #494900;
}
#contact-form input {
	width: 90%;
}
#contact-form textarea {
	height: 13.3em;
}

#contact-form input,
#contact-form textarea {
	margin-bottom: 0.7222em;	/* 13px */
	border: none;
	border-bottom: 3px solid #fdffe1;
	padding: 0.1667em;			/* 3px */
}

#contact-form fieldset {
	width: 37.5%;
	padding: 0;
	margin: 0;
	border: none;
}

#contact-form fieldset .container {
	background-image: url('/img/bg/form-shadow.jpg');
	background-repeat: no-repeat;
	background-position: 2px bottom;
	margin: 0;
	padding: 1px;
}

#contact-form .button-container {
	text-align: right;
	margin: 0;
}
#contact-form .button-container button {
	border: none;
	color: #fff;
	padding: 0.2em 1em;
	margin-right: 2.2%;
	background-color: #645951;
}
#contact-form button[type="submit"] {
	margin-right: 2.8%;
}

#contact-form button[type="reset"] {
	background: #a7d32b;
	color: #779915;
}

/* @end Contact form */

/* @group Page Layout */

.primary {
	width: 54%;
	margin-right: 2.33%;
	float: left;
	position: relative;
	overflow: hidden;
}
.secondary {
	width: 42.33%;
	float: left;
	position:relative;
	overflow: hidden;
}
.inverted .primary {
	margin-right: 0;
	margin-left: 2.33%;
}
.columns {
	position: relative;
	overflow: hidden;
	margin-left: -2.33%;
	clear: both;
}
.column {
	width: 30.66%;
	float: left;
	margin-left: 2.33%;
	position:relative;
}
.column h2,
.column h3 {
	color: #85A923;
}
.colspan .primary {
	width: 65%;
}
.colspan .secondary {
	width: 31.66%;
}
.part {
	width: 5%;
	float: right;
	margin-left: 2.33%;
}

.first {
	float: left;
	margin: 0;
}

/* @group Premable */

.preamble {
	background-image: url('/img/bg/bluish.gif');
	background-position: top;
	background-repeat: repeat-x;
	background-color: #D7ECE1;
}

/* @end Preamble */

/* @group Separator */

.separator {
	background-image: url(/img/bg/beige.png);
	background-position: top left;
	background-repeat: repeat-x;
}
.separator .primary,
.separator h2 {
	margin-top: 0;
}

/* @group Postamble */

.postamble {
	background-image: url('/img/bg/faux-bluish.gif');
}

/* @end Postamble */

/* @end */

/* @end */

/* @end */

/* @group Page components */

/* @group Gallery of stamps */

.gallery  {
	width: 100%;
	float: left;
    overflow: hidden;
}
.gallery li {
	background-image: url('/img/bg/stamp.jpg');
	background-repeat: repeat-x;
	background-position: bottom;
    height: 208px;
    width: 24.9%;
    float: left;
    text-align: center;
}
.narrow li {
	width: 33%;
}

.gallery a,
.gallery a:link,
.gallery a:visited,
.gallery a:hover,
.gallery a:focus,
.gallery a:active {
    border: none;
    background-color: transparent;
}

/* @end */

/* @group Book / article teaser */

.teaser {
	position: relative;
	background-image: url(/img/bg/write.png);
	background-repeat: repeat-x;
	background-position: top left;
	background-color: #FAFAE1;
	padding: 0.1em 1.2em 1.2em 1.2em;
	margin-top: 2em;
}
.teaser a {
	white-space:nowrap;
}
.secondary .teaser {
	margin-top: 4em;
}

.teaser.silverback { 
	background-image: url(/img/bg/write-green.png);
	background-color: #E2F5D4;
}
.teaser.cssref { 
	background-image: url(/img/bg/write-darkblue.png);
	background-color: #F5F7E0;
}
.teaser.bulletproofajax { 
	background-image: url(/img/bg/write-purple.png);
	background-color: #F5E8E0;
}
.teaser.webaccessibility { 
	background-image: url(/img/bg/write-blue.png);
	background-color: #F3FBE1;
}
.teaser.cssmastery { 
	background-image: url(/img/bg/write-green.png);
	background-color: #E2F5D4;
}

.teaser .announce {
	margin: 0;
	position:absolute;
	top: 15px;
	left: 0;
}
.teaser p {
	margin: 0 0 0.8571em 0;
}
.teaser h2 {
	margin-top: 75px;
    color: #645951;
}
.teaser h2 span {
	font-size: 0.6364em;
	display: block;
}
.teaser img {
	position: relative;
	float: right;
	/*display: inline;*/
}

/* @end */

/* @group Register for a workshop */

.register {
	clear: both;
	margin-top: 1em;
	width: 100%;
	overflow: hidden;	
}

.primary .register {
	padding-top: 2em;
}

.cal-date {
	width: 81px;
	background-image: url(/img/bg/cal-date.png);
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: white;
	float: left;
	margin-right: 1.5em;
	display: inline;
}

.cal-date abbr {
	text-transform: uppercase;
	background-color: #CC0000;
	color: white;
	display: block;
	padding-left: 3px;
}

.cal-date span {
	display: block;
	font-size: 3.5em;
	color: #333333;
	text-align: center;
	line-height: 1;
	padding: 0.2em 0 0.3em 0;
	font-weight: bold;
}

.register a,
.register a:link, 
.register a:visited,
.register a:hover,
.register a:focus,
.register a:active {
	display: block;
	text-decoration: none;
	background: none;
	border-bottom: none;
}

.register img {
	display: block;
	padding-top: 0.4em;
}

/* @end register */	

/* @group Upcoming events */


.hcalendar .vevent {
	padding-top: 1em;
	padding-bottom: 1em;
}

.hcalendar .vevent .dtstart {
	font-style: italic;
	font-size: 0.8571em;
}

.hcalendar .vevent p {
	font-size: 0.8571em;
	margin: 0;
}

.hcalendar .vevent h3 {
	margin-top: 0.3em;
}

.hcalendar .vevent h3 span {
	font-size: 0.8571em;
	white-space: nowrap;
}

/* @end */

/* @group Checklist */

.checklist {
	margin-bottom: 1.8em;
}

.checklist li {
	background-image: url(/img/icon/tick-icon.gif);
	background-repeat: no-repeat;
	background-position: 0 0.4em;
	margin: 0.4286em 0 0.4286em 0;
	padding: 0.3571em 0 0.7143em 40px;
}

.checklist li ul li {
	background-image: none;
	list-style-type: disc;
	padding-left: 0;
	margin-left: 15px;
	
}

/* @end Checlist */

/* @group List of sites on profiles */

.sites {
	margin-top: 1.2857em;
}

.sites li {
	padding-left: 28px;
	margin-bottom: 0.7em;
	background-repeat: no-repeat;
	background-position: 0 0.2em;
}

.sites li {
	background-image: url(/img/icon/favicon.gif);
}
.sites li.natbat {
	background-image: url(/img/icon/favicon-natbat.gif);
}
.sites li.adactio {
	background-image: url(/img/icon/favicon-adactio.gif);
}
.sites li.andybudd {
	background-image: url(/img/icon/favicon-andybudd.gif);
}
.sites li.clagnut {
	background-image: url(/img/icon/favicon-clagnut.gif);
}
.sites li.domscripting {
	background-image: url(/img/icon/favicon-domscripting.gif);
}
.sites li.bulletproof-ajax {
	background-image: url(/img/icon/favicon-bulletproofajax.gif);
}
.sites li.principiagastronomica {
	background-image: url(/img/icon/favicon-principiagastronomica.gif);
}
.sites li.saltercane {
	background-image: url(/img/icon/favicon-saltercane.gif);
}
.sites li.edenbee {
	background-image: url(/img/icon/favicon-edenbee.gif);
}
.sites li.huffduffer {
	background-image: url(/img/icon/favicon-huffduffer.gif);
}
.sites li.magnolia {
	background-image: url(/img/icon/favicon-magnolia.gif);
}
.sites li.delicious {
	background-image: url(/img/icon/favicon-delicious.gif);
}
.sites li.twitter {
	background-image: url(/img/icon/favicon-twitter.gif);
}
.sites li.flickr {
	background-image: url(/img/icon/favicon-flickr.gif);
}
.sites li.lastfm {
	background-image: url(/img/icon/favicon-lastfm.gif);
}
.sites li.vimeo {
	background-image: url(/img/icon/favicon-vimeo.gif);
}
.sites li.upcoming {
	background-image: url(/img/icon/favicon-upcoming.gif);
}
.sites li.dopplr {
	background-image: url(/img/icon/favicon-dopplr.gif);
}
.sites li.facebook {
	background-image: url(/img/icon/favicon-facebook.gif);
}
.sites li.pownce {
	background-image: url(/img/icon/favicon-pownce.gif);
}
.sites li.youtube {
	background-image: url(/img/icon/favicon-youtube.gif);
}
.sites li.linkedin {
	background-image: url(/img/icon/favicon-linkedin.gif);
}

/* @end */

/* @group Polaroid of case studies */

#polaroid {
	margin: 2.5em 0;		/* 35px */
}
.hasJS #polaroid {
	position: relative;
	overflow: hidden;
	width: 432px;
}
.hasJS #polaroid ul {
	width: 9999em;
	min-width: 9999em;
	max-width: 9999em;
	position: relative;
	left: 0;
}
.hasJS #polaroid li {
	display: inline;
    float: left;
    margin: 0 15px;
}

#polaroid li {
	width: 402px;
	border-top: 1px solid #ccc;
	background-image: url('/img/bg/polaroid.gif');
	background-position: bottom;
	background-repeat: no-repeat;
	font-size: 0.8571em;	/* 12px */
	line-height: 1.2;
}
#polaroid li div {
	padding: 10px 10px 20px;
}
#polaroid li img {
	display: block;
	border: 1px solid #ccc;
}
#polaroid li h2 {
	font-size: 1.3333em;	/* 16px */
}

#polaroid a.cycler {
    display: block;
    width: 31px;
    height: 31px;
    text-indent: -9999px;
    position: absolute;
    top: 150px;
    z-index: 1000;
}

#polaroid a.cycler:link,
#polaroid a.cycler:visited {
	background-color: transparent;
	background-position: 0 0;
    border-bottom: none;
}
#polaroid a.cycler:hover,
#polaroid a.cycler:focus,
#polaroid a.cycler:active {
	background-color: transparent;
    background-position: 0 -62px;
    border-bottom: none;
}

#polaroid a.prev {
    background-image: url('/img/bg/arrow_small_left.gif');
    left: 0;
}

#polaroid a.next {
    background-image: url('/img/bg/arrow_small_right.gif');
    right: 0;
}


/* @end */

/* @group hAtom */

ol.hfeed {
	list-style: none;
	margin-left: 0;
}
.hentry .entry-title {
	color: black;
	margin-top: 0;
}
.published {
	font-size: 0.8571em;	/* 12px */
	color: #666;
	font-weight: bold;
}
.secondary .hfeed,
.secondary .syndication {
	margin-left: 1em;
}

/* @end */

/* @end */

/* @group Overrides */

/* @group Home */

.home#index .preamble .block-image {
	margin-top: 2.5em;			/* 35px */
}
.home#index .postamble .checklist li {
	background-image: url(/img/icon/tick-icon.gif);
	margin-top: 0.4286em;			/*  6px */
	margin-bottom: 0.4286em;		/*  6px */
	padding-top: 0.3571em;			/*  5px */
	padding-bottom: 0.7143em;		/* 10px */
	padding-left: 40px;
}
.home#index .hfeed .meta {
	text-align: right;
	margin: 0;
}

/* @end */

/* @group What we do */

/* @group Teach */

.blog#teach .preamble div.pull-right {
	width: 45%;
	position: relative;
	height: 360px;
}
.blog#teach .preamble div.pull-right img.pull-left {
	position: absolute;
	left: 0;
	top: 50px;
}
.blog#teach .preamble div.pull-right img.pull-right {
	position: absolute;
	right: 0;
}
.blog#teach .postamble ul li {
	position: relative;
	float: left;
	width: 10%;
	margin-right: 10%;
}
.blog#teach .postamble ul li h3 {
	font-size: 1.1428em;   		/* 16px */
	margin-top:1.25em;	   		/* 20px */
}
.blog#teach .postamble ul li h3 img {
	display: block;
}


/* @end */

/* @end */

/* @group Who We Are */

/* @group Index page */

.services#index .preamble {
	background-image: none;
	background-color: transparent;
}
.services#index .preamble .primary {
	width: 41.63%;
	padding-bottom: 3em;
}
.services#index .preamble .secondary {
	width: 55%;
	padding-bottom: 3em;
}
.services#index .preamble ul {
	position: relative;
	padding-top: 2em;
}
.services#index .preamble ul li {
	padding-left: 360px;
	height: 5.5em;
}
.services#index .preamble ul .vcard .url {
	font-size: 1.5em;		/* 21px */
	line-height: 1.4286;	/* 30px */
}
.services#index .preamble ul .vcard .role {
	display: block;
	font-size: 0.9286em;	/* 13px */
	line-height: 1.5385;	/* 20px */ 
}
.services#index .preamble ul .vcard a.url:hover .photo,
.services#index .preamble ul .vcard a.url:focus .photo {
	z-index: 9;
}
.services#index .preamble ul .photo {
	display: block;
	position: absolute;
}
.services#index .andy .photo {
	left: 0;
	top: 0;
	z-index: 8;
}
.services#index .richard .photo {
	left: 160px;
	top: 0;
	z-index: 7;
}
.services#index .jeremy .photo {
	left: 10px;
	top: 7.25em;
	z-index: 6;
}
.services#index .paul .photo {
	left:  150px;
	top: 8em;
	z-index: 5;
}
.services#index .james .photo {
	left: 0;
	top: 15em;
	z-index: 4;
}
.services#index .sophie .photo {
	left: 160px;
	top: 15em;
	z-index: 3;
}
.services#index .natalie .photo {
	left: 0;
	top: 23em;
	z-index: 2;
}
.services#index .cennydd .photo {
	left: 160px;
	top: 22.25em;
	z-index: 1;
}

/* @end */

/* @group Profile page */

.services .preamble .flow,
.services .preamble .flow .contents {
	overflow: visible;
}
.services .preamble .pull-right {
	margin-top: -3.5em;
	min-width: 33%;
}
.services .info .primary {
	width: 65%;
	margin: 0;
}
.services .info .secondary {
	width: 31.63%;
	margin-left: 2.33%;
}
.services .info .secondary .people li {
	margin: 0 8px 10px 0;
	display: block;
	position: relative;
	float: left;
}
.services .info .secondary .people li img {
	display: block;
}

/* @end */

/* @end */

/* @end */

.flowchart {
	width: 50%;
	float: left;
	position: relative;
	overflow: hidden;
}
.flowinstruction {
	width: 45%;
	float: right;
	position: relative;
	overflow: hidden;
}
.flowsummary {
	width: 100%;
	float: left;
}
.org {
	padding-top: 5em;
	padding-bottom: 1em;
}
.narrowcolumn {
	width: 65%;
	float: left;
	text-align: left;
}
#sidebar {
	width: 25%;
	float: right;
	text-align: left;
	background-color: #EAEBCE;
	padding-left: 3em;
	padding-bottom: 8em;
	margin-top: 3em;
}
#sidebar ul li h2 {
	padding: 0;
	margin: 1em 0 0 0;
	font-size: 1.5em;
}
.wordpress {
	font-size: 1.5em;
}
.wordpress h2 {
	padding: 0;
	margin: 2em 0 0 0;
}
.wordpress .widecolumn .post h2 {
	color: #85A923;
	margin: 1em 0 1em 0;
}
.wordpress .narrowcolumn .post h3 {
	font-size: 1.5em;
}
.wordpress small, .wordpress .widecolumn .commentmetadata {
	font-size: 0.7em;
	line-height: 1.3em;
	font-weight: normal;
}
.wordpress small, .postmetadata {
	color: #888;
}
.postmetadata {
	padding-top: 5px;
	clear: both;
}
#sidebar ul ul li:before {
	content: "\00BB \0020";
}
.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.2em;
	font-size: 0.8em;
}
.widecolumn {
	line-height: 1.6em;
}
.widecolumn {
	padding: 0 5% 0 5%;
}
.widecolumn .postmetadata {
	margin: 30px 0;
}
.alt {
	border-left: 1px solid #ddd;
	margin: 0;
	padding: 10px;
}
.commentlist li ul li {
	font-size: 1em;
}
.commentlist li {
	font-weight: bold;
}
.commentlist li .avatar { 
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
}
.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
}
.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
}
.commentlist {
	padding: 0;
	text-align: justify;
	margin-top: 30px;
	margin-bottom: 50px;
}
.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;
}
.commentlist li ul li { 
	margin-right: -5px;
	margin-left: 10px;
}
.commentlist p {
	margin: 10px 5px 10px 0;
}
.wordpress h3 {
	padding: 0;
	margin: 30px 0 0;
	font-size: 1.3em;
}
.wordpress h3.comments {
	padding: 0;
	margin: 40px auto 20px;
}
.depth-1 {
border: 1px solid #ddd;
}
.wordpress a:link, .wordpress a:visited {
	font-weight: normal;
	border-bottom: 1px solid #8fa52d;
}
.wordpress h2 a:link, .wordpress h2 a:visited, .wordpress h3 a:link, .wordpress h3 a:visited {
	font-weight: bold;
}
.comment-author a:link, .comment-author a:visited {
	font-weight: bold;
}
#commentform #submit {
	margin: 0 0 5px auto;
	float: right;
}
.thread-alt {
	background-color: #F6F8DB;
}
.alignright {
	float: right;
}
.alignleft {
	float: left
}
.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 0;
	padding-bottom: 20px;
}
.servicescontent h2 {
	color: #85A923;
	padding: 0;
	margin: 2em 0 0.5em 0;
}
.servicescontent ol {
	list-style-type: none;
}
.servicescontent {
	font-size: 1.5em;
}
.servicescontent ol li {
	background-image: url(/img/icon/tick-icon.gif);
	background-repeat: no-repeat;
	background-position: 0 0.4em;
	margin: 0.4286em 0 0.4286em 0;
	padding: 0.3571em 0 0.7143em 40px;
}
.servicescontent h3 {
	padding: 0;
	margin: 1em 0 0 0;
}
h1.blacktitle {
	color: #645951;
}
.breadcrumb {
	border-left: 1px solid #ddd;
	padding: 3px 0 3px 10px;
	color: #888;
	margin-bottom: 4em;
}
.blogbreadcrumb {
	border-left: 1px solid #ddd;
	padding: 3px 0 3px 10px;
	color: #888;
	margin: 0;
}
.breadcrumb a:link, .breadcrumb a:visited, .blogbreadcrumb a:link, .blogbreadcrumb a:visited {
	font-weight: normal;
}