/* hacked 960 grid */

body {
	min-width: 980px;
	text-align: center;
	background: #fff;
	color: #333;
	font-size: 10px;
	height: auto;
	margin: 0; padding: 0;
}

/* =Containers
--------------------------------------------------------------------------------*/
.container_10
{
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}

/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_2 {
	display: inline;
	float: left;
	margin-left: 18px;
	margin-right: 18px;
}

.push_6 {
	position: relative;
}

/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* =Grid >> 10 Columns
--------------------------------------------------------------------------------*/
.container_10 .grid_2 {width: 160px;}


/* `Push Space >> 10 Columns
--------------------------------------------------------------------------------*/
.container_10 .push_6 {left: 588px;}


/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
	content: "\0020";
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix:after {
	clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
	zoom: 1;
}

h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  padding-top: 0;
  text-align: center;
}

h2 {
  padding-top: 0;
  text-align: center;
}

#colophon {
	display: block; position: static;
	text-align: center;
	height: 46px;
	font-size: 1.2em;
	background-color: #333;
}
#colophon ul {
	display: block;
	margin: 0 auto; padding: .8em 0;
	width: 900px;
}
#colophon ul li {
	display: block; float: left;
	color: #ccc;
	margin: 0 .72em 0 0; padding: 0 .72em 0 1.44em;
	border-left: none;
}
#colophon ul li+li {
	border-left: 1px #ccc solid;
}
#colophon ul li a {
	color: #ccc;
	text-decoration: none;
}
#colophon ul li a:hover {
	color: #fff;
	text-decoration: underline;
}

#header {
	margin: 2em 0;
}

a#contact {
	display: block;
	float: right;
	width: 160px; height: 50px;
	margin-top: .8em;
	background: url(../img_site/dv-header.png) right -240px no-repeat;
	text-indent: -9999em;
}
a#contact:hover,
a#contact.selected {
	background-position: right top;
}

#header ul#nav {
	display: block; clear: both; float: left;
	list-style: none;
	margin: 2em 0; padding: 0;
}
#header ul#nav li {
	display: block; float: left;
	height: 160px; width: 160px;
	margin: 0 18px; padding: 0;
	background: url(../img_site/dv-header.png) left -240px no-repeat;
	overflow: hidden;
}

#header ul#nav li+li {
}

#header ul#nav li a {
	display: block;
	text-indent: -9999em;
	padding-bottom: 160px;
}

#header ul#nav li#illustrations {
	background-position: left -240px;
}
#header ul#nav li#infographics {
	background-position: -200px -240px;
}
#header ul#nav li#maps {
	background-position: -400px -240px;
}
#header ul#nav li#advertising {
	background-position: -600px -240px;
}
#header ul#nav li#design {
	background-position: -800px -240px;
}

#header ul#nav li#illustrations:hover,
#header ul#nav li#illustrations.selected {
	background-position: left 0;
}
#header ul#nav li#infographics:hover,
#header ul#nav li#infographics.selected {
	background-position: -200px 0;
}
#header ul#nav li#maps:hover,
#header ul#nav li#maps.selected {
	background-position: -400px 0;
}
#header ul#nav li#advertising:hover,
#header ul#nav li#advertising.selected {
	background-position: -600px 0;
}
#header ul#nav li#design:hover,
#header ul#nav li#design.selected {
	background-position: -800px 0;
}

#triggers {
	display: block; float: left;
	margin: 0; padding: 0;
	background-color: none;
}

#triggers {
    margin: 2em 0 0; padding: 0;
}

#triggers a {
	display: block; float: left;
	margin: 0 0 2em; padding: 0;
/* thumbnail background color - off */
	background-color: #fff;
}

#triggers a:hover,
#triggers a.selected {
/* thumbnail background color - on */
	background-color: #0081c6;
}