

body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 62.5%;
	color: #474a51;
	background: url(../image/noise-earth.gif);
	}

/* links */

a:link, a:visited {
	color: #317b9e;
	text-decoration: none;
	}
a:hover {
	color: #104c68;
	}

/* more link */

a.more {
	padding-right: 1.2em;
	background: url(../image/bullet-circle.gif) no-repeat 100% .3em;
	}
a:hover.more {
	background-image: url(../image/bullet-on.gif);
	}
	
/* download link */

a.dnld {
	font-weight: bold;
	}
	
/* feed link */

a.rss {
	padding-left: 16px;
	background: url(../image/icon-rss.gif) no-repeat 0 0;
	}
a.rss-link {
	float: right;
	vertical-align: middle;
	}

/* structure 
--------------------------------------------- */

#simplebits {	
	padding: 11px 0 0 0;
	background: url(../image/top-rail.gif) repeat-x top left;
	}
#wrap {
	padding: 3em 0 0 0;
	border-bottom: 1px solid #d3d3c9;
	background: #f4f4ed url(../image/earth-grad.gif) repeat-x top left;
	}
#wrap-inner {
	width: 84em;
	margin: 0 auto;
	padding: 0 0 0 0;
	font-size: 1.1em;
	}
div.main {
	float: left;
	width: 59em;
	}
div#entries.main {
	border-top: 1px solid #e0e0d5;
	}
div.section {
	border-top: .1em dashed #e0e0d5;
	}
div.secondary {
	float: right;
	width: 24em;
	}
#extra {
	margin-top: 2.5em;
	}

/* header 
--------------------------------------------- */

#header {
	margin: 0;
	padding: 8px 0 0 0;
	background: #383d44 url(../image/h-bg.gif) repeat-x bottom left;
	}
#header-inner {
	margin: 0 auto;
	width: 84em;
	font-size: 1.1em;
	}
#logo {
	margin: 0;
	padding: 2em 1em;
	}
#logo a,
#logo span {
	display: block;
	width: 171px;
	height: 53px;
	background: url(../image/shield.gif) no-repeat top left;
	}

#logo img {
	display: block;
	width: 0;
	}
#logo a:hover {
	display: block;
	width: 62px;
	height: 53px;
	background-image: url(../image/mark-hov.gif);
	}

/* navigation */

#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	
	}
#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	}
#nav ul li a {
	float: left;
	display: block;
	width: 10em;
	line-height: 1.3em;
	padding: .8em 1em .8em 1em;
	margin: 0;
	text-decoration: none;
	color: #7b828c;
	border: none;
	background: url(../image/nav-bg.gif) no-repeat bottom left;
	}
#nav ul li a strong {
	display: block;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	color: #e0e0d5;
	}
#nav li a:hover {
	background: url(../image/tab-hover.gif) repeat-x bottom left;
	}
#nav li a.active {
	color: #7b828c;
	background: #30353b url(../image/tab-on-noise.gif) repeat-x bottom left;
	}
#nav ul li a:hover strong {	
	color: #fff;
	}
#nav ul li a.active strong {
	color: #fff;
	}

/* phrase elements */

abbr, acronym, .popup {
	font-size: .8em;
	letter-spacing: .1em;
	font-style: normal;
	border-bottom: 1px dotted #e0e0d5;
	cursor: help;
	}
a abbr {
	border: none;
	}
code {
	color: #8b8074;
	font-family: Monaco, monospace;
	font-size: 1em;
	text-align: left;
	}
ins {
	text-decoration: none;
	border: none;
	}

/* modules 
--------------------------------------------- */

div.mod {
	width: 59em;
	margin: 0;
	padding: 1em 0;
	border-top: 1px solid #e0e0d5;
	}
div.mod-meta {
	float: left;
	width: 10em;
	margin: 0;
	padding: 0 0 0 1em;
	text-align: right;
	}
div.mod-meta h3 {
	margin: 0;
	padding: 0 0 0 0;
	font-size: 1em;
	font-weight: bold;
	color: #8f9195;
	}
div.mod-meta h3 a {
	display: block;
	padding: 0 0 0 22px;
	color: #8f9195;
	background: url(../image/icon-doc.gif) no-repeat 3px 50%;
	}
div.mod-meta h3 a:hover {
	color: #646870;
	}
div.mod-meta img.meta-thumb {
	width: 9em;
	margin: .5em 0 0 0;
	}
div.mod-body {
	float: right;
	width: 45em;
	margin: 0 1em 0 0;
	padding: 0;
	}
div.mod-body p a {
	color: #317b9e;
	}
div.mod-body a:hover {
	color: #104c68;
	}
div.mod-body h2 {
	margin: -.1em 0 .4em 0;
	padding: 0;
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1em;
	}
div.mod-body h2.section {
	font-size: 1.4em;
	}
div.mod-body h4.time {
	margin: 0 0 1.5em 0;
	padding: 0;
	font-size: 1em;
	font-weight: normal;
	color: #8f9195;
	}
div.mod-body h4.time abbr {
	border: none;
	}
div.mod-body p {
	margin: 0 0 1.5em 0;
	font-size: 1.2em;
	line-height: 1.5em;
	}
div.mod-body p.posted {
	font-size: 1em;
	text-align: left;
	color: #8f9195;
	}
div.mod-body p a.clink {
	padding: 0 0 0 16px;
	border: none;
	color: #8f9195;
	border: none;
	background: url(../image/icon-com.gif) no-repeat 0 50%;
	}
div.mod-body p a.clink:hover {
	color: #646870;
	}
div.mod-body p.filed a {
	font-size: .8em;
	font-weight: bold;
	border: none;
	}
div.mod-body blockquote {
	margin: -.1em 0 0 -18px;
	padding: 0 0 0 18px;
	font-family: Georgia, serif;
	font-size: 1.2em;
	line-height: 1.2em;
	color: #8b8074;
	background: url(../image/icon-quotes.gif) no-repeat 0 .3em;
	}
div.mod-body blockquote.alt {
	margin: -.1em 0 0 0;
	padding: 0 0 0 0;
	font-family: Georgia, serif;
	font-size: 1em;
	line-height: 1.4em;
	color: #8b8074;
	background: none;
	}
div.mod-body blockquote p {
	margin: 0 0 1.2em 0;
	padding: 0;
	line-height: 1.4em;
	}
div.mod-body p.attr {
	margin: 0 0 1.5em 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: right;
	font-weight: normal;
	color: #646870;
	}
div.mod-body blockquote p.attr cite {
	font-style: normal;
	}
div.mod-body blockquote p.attr cite a {
	font-weight: bold;
	}
div.photo {
	margin: 0 0 1em 0;
	}
div.photo img {
	width: 45em;
	margin-left: -1em;
	padding: 1em;
	background: #e0e0d5 url(../image/noise-earth.gif);
	}
div.photo a:hover img {
	background: #dbdbce;
	}

/* entry-specific and content */

div.entry ul,
div.entry ol,
div.content ul,
div.content ol {
	margin: 0 0 1.5em 0;
	padding: 0;
	font-size: 1.2em;
	line-height: 1.5em;
	}
div.entry ol,
div.content ol {
	margin-left: 1em;
	}
div.entry ul li,
div.content ul li {
	margin: 0 0 .5em 0;
	padding: 0 0 0 1.5em;
	list-style: none;
	background: url(../image/bullet-circle.gif) no-repeat 0 .3em;
	}
div.content ul.feed-list li {
	padding-left: 0;
	background: none;
	}
div.entry h2 a {
	color: #474a51;
	}
div.entry h2 a:hover {
	color: #408db4;
	}
div.entry img.thumb {
	float: right;
	margin: 0 0 1em 1em;
	padding: .4em;
	border: 1px solid #e0e0d5;
	background: #fff;
	}
div.entry img.plain {
	border: none;
	background: none;
	}
div.entry a:hover img.thumb {
	background: url(../image/noise-earth.gif);
	}
dl.lst {
	margin: 0 0 2.5em 0;
	padding: 0;
	font-size: 1.1em;
	}
dl.lst dt {
	margin: 0 0 .3em 0;
	font-weight: bold;
	}
dl.lst dd {
	margin: 0 0 1.5em 0;
	padding: 0;
	line-height: 1.5em;
	}
dl.lst dd em {
	display: block;
	color: #646870;
	}

/* quickbit entries */

div.qb p {
	color: #474a51;
	}
div.qb h2 {
	font-size: 120%;
	font-weight: bold;
	margin: 0 0 .3em 0;
	}
div.qb h2 a {
	color: #317b9e;
	padding-right: 1.3em;
	}
div.qb h2 a:hover {
	color: #104c68;
	background: url(../image/bullet-circle.gif) no-repeat 100% 3px;
	}
div.qb div.mod-meta h3 a {
	background: url(../image/icon-link.gif) no-repeat 0 50%;
	}

/* quote entries */

div.quote div.mod-meta h3 a {
	background: url(../image/quotes.gif) no-repeat 0 50%;
	}
div.quote div.mod-body blockquote {
	margin-left: 0;
	padding-left: 0;
	background: none;
	}

/* photo entries */

div.photo div.mod-meta h3 a {
	background: url(../image/icon-cam.gif) no-repeat 0 50%;
	}

/* add comment */

div.mod-meta h3.addcom {
	background: url(../image/icon-addcom.gif) no-repeat 0 50%;
	}
div.mod-meta h3.addcom a {
	padding: 0;
	background: none;
	}

/* special callout module */

div.special {
	margin: 0;
	padding: 1em 0;
	border-top: 2px solid #e0e0d5;
	background: url(../image/grad-secondary.gif) repeat-x top left;
	}

/* note style */

div.mod-body p.note {
	font-size: 1.1em;
	color: #8f9195;
	}

/* default title module 
--------------------------------------------- */

div.title {
	margin: 0;
	border-top: 1px solid #e0e0d5;
	border-bottom: 1px solid #e0e0d5;
	}
div.title h1 {
	margin: 0;
	padding: 0;
	font-size: 1.9em;
	line-height: 1em;
	color: #474a51;
	}
div.title h1 span {
	font-weight: normal;
	color: #646870;
	}
div.title p {
	margin: .4em 0 0 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.5em;
	color: #8f9195;
	}
div.title p a {
	color: #646870;
	border: none;
	}
div.title p a:hover {
	color: #408db4;
	}

/* blurb module 
--------------------------------------------- */

div.blurb {
	width: 48em;
	margin: 0;
	padding: 1.8em 11em 2em 0;
	border: none;
	background: url(../image/blockage.gif) no-repeat top right;
	}
div.blurb div.mod-body {
	width: 34em;
	}
div.blurb h1 {
	margin: 0;
	padding: 0;
	font-size: 1.9em;
	line-height: 1em;
	color: #474a51;
	}
div.blurb h1 span {
	color: #91918e;
	}
div.blurb p {
	margin: .4em 0 0 0;
	padding: 0;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #646870;
	}
div.blurb p a {
	color: #646870;
	border: none;
	}
div.blurb p a:hover {
	color: #408db4;
	}

/* section header */

h2.section {
	margin: 0 0 .5em 0;
	padding: .5em 1em .5em 1em;
	font-size: 1em;
	line-height: 1em;
	font-weight: bold;
	text-transform: uppercase;
	color: #474a51;
	background: #f1f1f1 url(../image/noise-earth.gif);
	}

/* comments 
--------------------------------------------- */

h3#chead {
	margin: 0;
	padding: 0;
	font-size: 1.6em;
	}
div.comment div.mod-meta img {
	width: 4em;
	margin: 0 0 0 0;
	padding: .4em;
	border: 1px solid #e0e0d5;
	background: #fff;
	}
div.comment div.mod-body h4 {
	margin: 0 0 .3em 0;
	padding: 0;
	font-size: 1.2em;
	}
div.comment div.mod-body h4 em {
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	color: #f4f4ed;
	}
div.comment div.mod-body h4 a:hover {
	text-decoration: none;
	}
div.comment div.mod-body h4 a:hover em {
	color: #8f9195;
	}

/* author highlighting */

div.dan {
	background: url(../image/dan-bg.gif) repeat-x top left;
	}

/* forms 
--------------------------------------------- */

div.form div.mod-body {
	margin: 0;
	padding: 0;
	width: 46em;
	}
div.mod-body form {
	margin: 0 0 2.5em 0;
	padding: 0;
	}
div.mod-body form fieldset {
	margin: 0 0 .5em 0;
	padding: 0 0 .5em 0;
	border: none;
	border-bottom: 1px dashed #e0e0d5;
	}
div.mod-body form fieldset label {
	float: left;
	width: 11em;
	margin: 0 1em 0 0;
	font-weight: bold;
	line-height: 1.5em;
	}
div.mod-body form fieldset h4 {
	float: right;
	width: 11em;
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.5em;
	color: #8b8074;
	}
div.mod-body form fieldset div.field {
	float: left;
	width: 21em;
	margin: 0 1em 0 0;
	}
div.mod-body form fieldset div.field label {
	float: none;
	width: auto;
	font-weight: normal;
	}
div.mod-body form fieldset div.field input.input-text {
	width: 20em;
	padding: .5em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #646870;
	}
div.mod-body form fieldset div.field textarea {
	width: 32em;
	padding: .5em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #646870;
	}
div.mod-body form fieldset div.field select {
	width: 21em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #646870;
	}
div.mod-body form div.submit {
	padding-left: 13em;
	}

/* confirm/alert box */

p.confirm {
	padding: 1em 1.5em;
	color: #fff;
	border-top: 3px solid #75a053;
	border-bottom: 3px solid #75a053;
	background: #90ba6e;
	}

/* secondary 
--------------------------------------------- */

div.secondary {
	color: #646870;
	}
div.secondary h3 {
	margin: 0 0 .5em 0;
	padding: .5em 1em;
	font-size: 1em;
	line-height: 1em;
	font-weight: bold;
	text-transform: uppercase;
	color: #74a050;
	border-top: 1px solid #e0e0d5;
	}
body#home div.secondary h3#featured {
	margin-top: 10px;
	}
body#home div.secondary h3#deck {
	border-top-width: 2px;
	}
div.secondary p {
	margin: 1em 1em 2.5em 1em;
	line-height: 1.5em;
	}
div.secondary img.thumb {
	float: right;
	margin: .4em 0 .5em 1em;
	padding: .4em;
	width: 4em;
	padding: .4em;
	border: 1px solid #e0e0d5;
	background: #fff;
	}

/* flickr stream */

#flickr {
	margin: 1em 0 2.5em 1em;
	overflow: hidden;
	}
#flickr img {
	float: left;
	margin: 0 1em 1em 0;
	width: 3.63em;
	height: 3.63em;
	padding: .4em;
	border: 1px solid #e0e0d5;
	background: #fff;
	}
#flickr a:hover img {
	background: url(../image/noise-earth.gif);
	}

/* simple work list */

#work-simple {
	margin: 1em 0 2.5em 1em;
	padding: 0;
	list-style: none;
	}
#work-simple li {
	float: left;
	margin: 0;
	padding: 0;
	background: none;
	}
#work-simple li a {
	float: left;
	display: block;
	margin: 0 1.25em 1.25em 0;
	padding: .4em;
	border: 1px solid #e0e0d5;
	background: #fff;
	}
#work-simple li a:hover {
	background: url(../image/noise-earth.gif);
	}
#work-simple li.active a {
	border-color: #646870;
	background: #646870 url(../imagenav-on-noise.gif);
	}

/* img/desc lsts */

ul.lst {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul.lst li {
	margin: 0;
	padding: 0;
	color: #646870;
	border-bottom: 1px dashed #e0e0d5;
	overflow: hidden;
	}
ul li.last {
	margin-bottom: 2.5em;
	padding-bottom: 0;
	border: none;
	}
ul.lst li a {
	display: block;
	padding: .5em 1em;
	line-height: 1.4em;
	color: #8f9195;
	overflow: hidden;
	}
ul.lst li a strong {
	display: block;
	color: #474a51;
	padding: .2em 0 .1em 0;
	}
ul.lst li a em {
	display: block;
	}
ul.lst li a img {
	float: left;
	display: block;
	margin: 2px 10px 0 0;
	padding: .4em;
	border: 1px solid #e0e0d5;
	background: #fff;
	}
ul.lst li a:hover, 
ul.lst li a:hover strong {
	color: #317b9e;
	}
ul.lst li a:hover {
	background: #f9f9f4;
	}
ul.lst li a:hover img {
	background: url(../image/noise-earth.gif);
	}

/* books */

div.books {
	border-top: 2px solid  #e0e0d5;
	border-bottom: none;
	}
div.books div.mod-body {
	width: 46em;
	margin: 0;
	}
ul.book li {
	width: 21em;
	float: left;
	margin: 0 2em 1em 0;
	padding: 0 1em 0 0;
	border: none;
	}
ul.book li.last {
	margin-right: 0;
	padding: 0;
	}
ul.book li a {
	padding: 0;
	}
ul.book li a strong {
	padding-top: .5em;
	}
ul.book li a img {
	padding: 0;
	margin-left: 0;
	border: none;
	background: none;
	}
ul.book li a:hover {
	background: none;
	}
ul.book li a:hover img {
	background: none;
	}

/* our projects */

div.proj {
	border-top: 1px dashed #e0e0d5;
	}
div.proj div.mod-body {
	width: 47em;
	margin: 0;
	}
div.proj ul.lst li {
	width: 23em;
	float: left;
	margin: 0 1em 1em 0;
	padding: 0;
	border: none;
	}
div.proj ul.lst li a {
	padding-top: 0;
	}
div.proj ul.lst li a:hover {
	background: none;
	}
div.proj ul li.last {
	margin-right: 0;
	padding: 0;
	}
div.proj div.mod-body p {
	margin-left: 1em;
	}
	
/* the deck */

ul.deck li a:hover {
	background: none;
	}
ul.lst li p.ads {
	clear: both;
	margin: 0 1em;
	color: #91918e;
	}
ul.lst li p.ads a {
	display: inline;
	padding: 0;
	font-weight: bold;
	color: #646870;
	}
ul.lst li p.ads a:hover {
	color: #317b9e;
	}
ul.lst li a img.ad {
	float: none;
	}
ul.lst li p.thedeck {
	margin: 0;
	}
ul.lst li p.thedeck a {
	float: right;
	padding: 1em 1em 0 0;
	text-align: right;
	}
ul.lst li p.thedeck em {
	display: inline;
	font-size: .9em;
	}
ul.lst li p.thedeck span {
	display: block;
	}

/* sub nav list */

ul.sub li a strong {
	padding-left: 1.5em;
	color: #8f9195;
	background: url(../image/bullet-circle.gif) no-repeat 0 .4em;
	}
ul.sub li a:hover strong {
	background-image: url(../image/bullet-on.gif);
	}
ul.sub li.active a strong {
	background-image: url(../image/bullet-on-left.gif);
	}
ul.sub li.active a strong {
	color: #474a51;
	}

/* articles list */

ul.articles {
	margin-bottom: 2.5em;
	}

/* home page archives */

div.more {
	padding-bottom: 0;
	}
div.more div.mod-body {
	width: 46em;
	margin: 0;
	}
div.more div.mod-body ul.lst li {
	border: none;
	}
div.more div.mod-body ul.lst li a {
	margin: 0 0 1em 0;
	padding: 0;
	}
div.more div.mod-body ul.lst li a:hover {
	background: none;
	}
body#home ul.articles {
	float: left;
	width: 22em;
	}
body#home ul.monthly {
	float: right;
	width: 22em;
	}

/* search */

.search-form {
	width: 22em;
	float: right;
	margin: 0 0 2.5em 0;
	padding: 1.5em 1em .5em 1em;
	border-top: 2px solid #e0e0d5;
	}
.search-form label {
	display: block;
	margin: 0 0 .5em 0;
	font-weight: bold;
	color: #474a51;
	}
.search-form input {
	vertical-align: middle;
	}
.search-form input.search-text {
	float: left;
	width: 17em;
	margin: 0;
	padding: .5em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #959aa5;
	border: 1px solid #e0e0d5;
	background: url(../image/grad-secndary.gif) repeat-x top left;
	}
.search-form input.search-btn {
	float: right;
	}

div.mod-body form.archives {
	float: none;
	width: auto;
	margin: 0 0 2.5em 0;
	padding: 0;
	border: none;
	}
form.archives input.search-text {
	width: 20em;
	margin-right: 3px;
	background: none;
	}
form.archives input.search-text,
form.archives input.search-btn {
	float: none;
	}


/* work
--------------------------------------------- */

body#work div.title div.mod-body {
	width: 59em;
	padding: 0 0 0 1em;
	}
body#work div.title div.mod-meta {
	display: none;
	}

/* portfolio pieces */

div.work {
	margin: 0;
	border-bottom: none;
	}
div.work div.mod-meta {
	width: 23em;
	margin: 0;
	padding: 0;
	color: #646870;
	text-align: left;
	}
div.work div.mod-meta ul li {
	font-size: .9em;
	font-weight: bold;
	background-position: 0 .4em;
	}
div.work div.mod-body {
	width: 33em;
	}
dl#portimg {
	margin: .5em 0 0 0;
	padding: 0;
	}
dl#portimg dt img {
	width: 21em;
	padding: 1em;
	background: #f1f1f1 url(../image/noise-earth.gif);
	}
dl#portimg dd {
	padding: 0;
	margin: 1em 0 0 1em;
	line-height: 1.5em;
	}
dl#portimg dd em {
	display: block;
	}

/* footer
--------------------------------------------- */

#footer {
	clear: both;
	width: 84em;
	margin: 0 auto;
	padding: 0;
	font-size: 1.1em;
	color: #646870;
	background: url(../image/barcode.gif) repeat-x 0 50%;
	}
#footer p {
	width: 58em;
	margin: 0;
	padding: 1em;
	line-height: 1.5em;
	background: url(../image/noise-earth.gif);
	}


/* microformats
---------------------------------------------------------- */

/* hCalendar */

div.content ul.events li,
div.entry ul.events li {
	padding: 0;
	border: none;
	background: none;
	}
div.content ul.events li a {
	margin: 0 0 1em 0;
	padding: 0;
	}
div.content ul.events li a:hover {
	background: none;
	}
ul li.vevent span.summary {
	display: block;
	margin-bottom: .2em;
	font-weight: bold;
	}
ul li.vevent abbr {
	border: none;
	font-size: 1em;
	letter-spacing: 0;
	}
ul li.vevent span.location {
	font-style: italic;
	}
div.description {
	margin: 1em 0;
	font-size: .9em;
	}

/* hCard */

div.vcard {
	margin: 1em;
	padding: 0;
	line-height: 1.5em;
	}

/* data tables
---------------------------------------------------------- */

table.data {
	width: 45em;
	margin: 0 0 2.5em 0;
	padding: 0;
	border-collapse: collapse;
	}
table.data th, table.data td {
	margin: 0;
	padding: 1em;
	vertical-align: top;
	border-bottom: 1px dashed #e0e0d5;
	}
table.data tr.last th, table.data tr.last td {
	border-bottom: none;
	}
table.data th {
	width: 10em;
	padding: 1em 0;
	text-align: left;
	}
table.data td blockquote {
	margin-left: 0;
	}

/* misc. 
--------------------------------------------- */

.by {
	font-weight: normal;
	font-style: italic;
	font-size: .9em;
	}
.vevent .location {
	display: block;
	font-style: italic;
	}
hr, .hide {
	display: none;
	}
a img {
	border: none;
	}

/* use the best possible ampersand */

span.amp {
	font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
	font-weight: normal;
	font-style: italic;
	font-size: 1.1em;
	color: #646870;
	}

/* self-clear floats */

.group:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

