/* ----- DV8 Fest screen stylesheet ------------------------------------------------------- */
/* ----- Simon Kitson 2010 ---------------------------------------------------------------- */
/* ----- enjoy. --------------------------------------------------------------------------- */

/*
	
	----- Colours -----
	
	Site BG: #343434
	
	----- Site Dimensions -----
	
	Width: 960px

*/

/* ----- Global Reset --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
* {
	margin: 0; /* global reset of margin and padding */
	padding: 0;
	outline: none;
}

/* ----- Tags ----------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
body {
	background: #121212 url(../images/bg.jpg) 50% 0 no-repeat;
	text-align: center; /* centre in IE */
	font: 12px Helvetica, Arial, sans-serif;
	color: #fff;
}
ul {
	list-style: none; /* no bullets on lists by default */
}
a {
	color: #eee;
	text-decoration: underline;
}
a:hover {
	color: #000;
	background: #fff;
	text-decoration: none;
}
a img {
	border: none;
}

/* ----- Universal styles ----------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
.hide {
	display: none;
}
.clear {
	clear: both;
}
.relative {
	position: relative;
}
.left {
	float: left;
	margin: 0 18px 18px 0;
}
.right {
	float: right;
	margin: 0 0 18px 18px;
}

/* ----- Main Containers ------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
.frame {
	width: 960px;
	margin: 0 auto;
}
#border {
	display: none;
	/*
	position: fixed;
	width: 100%;
	height: 100%;
	border: 6px solid #343434;
	*/
}
#site {
	float: left;
	width: 960px;
	padding-bottom: 148px;
	text-align: left;
	background: #343434;
}
#site-top, #site-bottom {
	position: relative;
	clear: both;
	float: left;
	width: 960px;
	height: 24px;
	background: url(../images/site_bg_top.png) 0 0 no-repeat !important;
	background-image: url(../images/site_bg_top.gif);
}
#site-bottom {
	background: url(../images/site_bg_bottom.png) 0 0 no-repeat !important;
	background-image: url(../images/site_bg_bottom.gif);
}
#site-top span {
	position: absolute;
	z-index: 2;
	top: -30px;
	right: -7px;
	display: block;
	width: 134px;
	height: 54px;
	background: url(../images/skull.png) 0 0 no-repeat !important;
	background-image: url(../images/skull.gif);
}

/* ----- Masthead ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
#masthead {
	position: relative;
	float: left;
	width: 960px;
	text-align: left;
}
#masthead .logo {
	float: left;
	width: 216px;
	height: 124px;
}
#masthead .logo a {
	display: block;
	width: 216px;
	height: 124px;
	background: url(../images/dv8_logo.png) 0 0 no-repeat !important;
	background-image: url(../images/dv8_logo.gif);
	text-indent: -1000em;
}

/* ----- Global Navigation ----- */
/* ------------------------------------------------------------ */
#global-nav {
	position: absolute;
	z-index: 3;
	left: 224px;
	top: 48px;
}
#global-nav li {
	position: relative;
	float: left;
	margin-right: 6px;
}
#global-nav li a {
	display: block;
	height: 30px;
	background-image: url(../images/global_nav.gif);
	background-repeat: no-repeat;
	text-indent: -1000em;
}
#nav1 a {
	width: 47px;
	background-position: 0 0;
}
#nav2 a {
	width: 129px;
	background-position: -52px 0;
}
#nav3 a {
	width: 170px;
	background-position: -185px 0;
}
#nav4 a {
	width: 65px;
	background-position: -359px 0;
}
#nav5 a {
	width: 57px;
	background-position: -507px 0;
}
#nav6 a {
	width: 134px;
	background-position: -568px 0;
}
#nav7 a {
	width: 91px;
	background-position: -706px 0;
}
#global-nav li a:hover {
	background-color: transparent;
}
#nav1 a:hover, #nav1 a.active {
	background-position: 0 -200px;
}
#nav2 a:hover, #nav2 a.active {
	background-position: -52px -200px;
}
#nav3 a:hover, #nav3 a.active {
	background-position: -185px -200px;
}
#nav4 a:hover, #nav4 a.active {
	background-position: -359px -200px;
}
#nav5 a:hover, #nav5 a.active {
	background-position: -507px -200px;
}
#nav6 a:hover, #nav6 a.active {
	background-position: -568px -200px;
}
#nav7 a:hover, #nav7 a.active {
	background-position: -706px -200px;
}
#global-nav li ul {
	display: none;
	position: absolute;
	z-index: 2;
	left: 9px;
	top: 28px;
	width: 140px;
	background: #000;
}
#global-nav li ul li {
	position: relative;
	float: left;
	width: 140px;
	margin-right: 0;
	border-bottom: 1px solid #444;
}
#global-nav li ul li a {
	display: block;
	height: auto;
	width: 128px;
	padding: 9px 6px 6px 6px;
	background: none;
	color: #fff;
	text-decoration: none;
	text-indent: 0;
}
#global-nav li ul li a:hover {
	background: #444;
}

/* ----- Tertiary Navigation ----- */
/* ------------------------------------------------------------ */
#tertiary-nav {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 4;
	float: left;
	padding: 0 6px 0 3px;
	background: #343434;
	font-weight: bold;
}
#tertiary-nav li {
	position: relative;
	float: left;
	margin-left: 6px;
}
#tertiary-nav li a {
	display: block;
	padding: 9px 3px 6px 3px;
	text-decoration: none;
}
#tertiary-nav li a:hover, #tertiary-nav li a.active {
	background: none;
	color: #000;
}
#tertiary-nav li ul {
	display: none;
	position: absolute;
	z-index: 2;
	right: 0;
	top: 26px;
	background: #000;
	text-align: right;
}
#tertiary-nav li ul li {
	position: relative;
	float: left;
	width: 130px;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #444;
}
#tertiary-nav li ul li a {
	display: block;
	width: 118px;
	height: auto;
	padding: 9px 6px 6px 6px;
	background: none;
	color: #fff;
	text-decoration: none;
	text-indent: 0;
}
#tertiary-nav li ul li a:hover {
	background: #444;
}

/* ----- Footer --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
#footer {
	position: relative;
	clear: both;
	float: left;
	width: 912px;
	padding: 18px 24px;
	text-align: left;
}
#footer .logo {
	float: right;
	width: 97px;
	height: 48px;
}
#footer .logo a {
	display: block;
	width: 97px;
	height: 48px;
	background: url(../images/dv8_logo_small.png) 0 0 no-repeat !important;
	background-image: url(../images/dv8_logo_small.gif);
	text-indent: -1000em;
}
#footer ul {
	float: right;
	margin-left: 18px;
}
#footer ul li {
	clear: left;
	float: left;
	margin-bottom: 3px;
	font: 0.917em Verdana, sans-serif; /* 12x0.917=11 */
}
#footer ul li a {
	text-decoration: none;
}
#characters {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: -38px;
	display: block;
	width: 623px;
	height: 282px;
	background: url(../images/characters.png) 0 0 no-repeat !important;
	background-image: url(../images/characters.gif);
}

/* ----- Hero ----------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
#hero {
	width: 900px;
	height: 300px;
	margin: 0 24px 33px 24px;
	background: #000;
	border: 6px solid #000;
}

/* ----- Columns and Rows ----------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

/* ----- Columns ----- */
/* ------------------------------------------------------------ */
.col-912 {
	clear: both;
	float: left;
	width: 912px;
	margin: 0 24px;
	padding-top: 3px;
	background: url(../images/dividers_v_912px.gif) 0 0 repeat-y;
	display: inline;
}
.col-912.single {
	background: url(../images/divider_v_912px.gif) 0 0 repeat-y;
}
.col-192 {
	width: 192px;
}
.col-168 {
	width: 168px;
}
.col-192.left, .col-192.right, .col-168.left, .col-168.right {
	margin: 0;
}
.col-480 {
	float: left;
	width: 480px;
	margin: 0 24px;
	display: inline;
}
.col-696 {
	float: right;
	width: 696px;
	display: inline;
}

/* ----- Typography ----------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
h1 {
	margin-bottom: 24px;
	font: bold 3em Georgia, serif;
	line-height: 21px;
}
.col-480 p, .col-696 p {
	margin-bottom: 12px;
	line-height: 18px;
}
.col-480 p.img, .col-168 p.img, .col-696 p.img {
	background: #000;
	border: 6px solid #000;
	line-height: 0;
}

/* ----- Sub Navigation ----- */
/* ------------------------------------------------------------ */
.col-192 .sub-nav {
	clear: both;
	float: left;
	width: 192px;
	margin-bottom: 24px;
	padding-bottom: 5px;
	background: url(../images/divider_h_192px.gif) 0 100% no-repeat;
}
.col-192 .sub-nav li {
	float: left;
	width: 192px;
	padding: 11px 6px 6px 6px;
	background: url(../images/divider_h_192px.gif) 0 0 no-repeat;
}
.col-192 .sub-nav li a {
	text-decoration: none;
}

/* ----- Grid ----- */
/* ------------------------------------------------------------ */
ul.grid {
	float: left;
	width: 696px;
	margin-bottom: 24px;
}
ul.grid li {
	float: left;
	width: 336px;
	margin-bottom: 12px;
	padding-right: 12px;
}
ul.grid li p.img {
	float: left;
	margin-right: 12px;
	line-height: 0;
}
ul.grid li p.img a:hover {
	background: transparent;
}
ul.grid li h2 {
	padding-top: 6px;
	font-size: 1.167em;
	text-decoration: none;
}