/* jack bauer */

* {
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	width: 100%;
	min-height: 100%;
	_height: 100%;
	font: 9px/16px "Lucida Grande", Arial;
}

/* masters */

#wrap {
	width: 100%;
	height: 100%;
	position: absolute;
}

#inner-wrap {
	width: 100%;
	height: 100%;
	position: relative;
}

#intro {
	width: 100%;
	height: 100%;
	min-width: 750px;
	color: #6d6867;
	position: absolute;
	left: 0;
	top: 0;
	background: #000 none;
}

#hero {
	width: 100%;
	height: 100%;
	min-width: 900px;
	color: #777;
	position: absolute;
	left: 0;
	top: 100%;
	background: #e7eaec url(hero/fill.jpg);
}

#antihero {
	width: 100%;
	height: 100%;
	min-width: 900px;
	color: #949c9e;
	position: absolute;
	top: 200%;
	background: #525759 url(antihero/fill.jpg);
}

#patriot {
	width: 100%;
	height: 100%;
	min-width: 900px;
	color: #d5dfe4;
	position: absolute;
	top: 300%;
	background: #525759 url(patriot/fill.jpg);
}

#colophon {
	width: 100%;
	min-width: 750px;
	color: #6d6867;
	position: absolute;
	left: 0;
	top: 400%;
	background: #000 none;
	height: 100px;
}

/* room */

.wall {
	position: relative;
	width: 100%;
	height: 700px;
}

#intro .wall {
	background: #000;
}

#hero .wall {
	background: url(hero/wall.jpg);
}

#antihero .wall {
	background: url(antihero/wall.jpg);
}

#patriot .wall {
	background: url(patriot/wall.jpg);
}

#colophon .wall {
	background: #000;
	height: 100px;
}

.light {
	position: absolute;
	width: 692px;
	height: 612px;
	right: 0;
	z-index: 9;
	top: 31px;
}

#hero .light {
	background: url(hero/light.jpg) -1px 0;
}

#antihero .light {
	background: url(antihero/light.jpg) -1px 0;
}

#patriot .light {
	background: url(patriot/light.jpg) -1px 0;
}

/* type */

.title {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 300px;
}

h1 {
	position: absolute;
	top: 30px;
	left: 30px;
	height: 30px;
	width: 160px;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
	z-index: 999;
}

#intro h1 {
	background: url(head/title.gif) no-repeat;
	width: 106px;
	height: 25px;
	left: 0;
	top: 55px;
}

#intro h2 {
	font-size: 9px;
	color: #fff;
	font-weight: normal;
	position: absolute;
	left: 180px;
	top: 55px;
}

#intro h3 {
	font-size: 9px;
	font-weight: normal;
	position: absolute;
	left: 180px;
	top: 67px;
	z-index: 9999;
}

#intro em {
	position: absolute;
	height: 157px;
	width: 2px;
	left: 142px;
	top: 0;
	text-indent: -9999px;
	background-image: url(head/mark.gif);
}

#intro a {
	font-size: 9px;
	font-weight: normal;
	position: absolute;
	left: 1px;
	z-index: 9999;
	color: #fff;
	top: 84px;
}

#intro a:hover {
	color: #6d6867;
	border-bottom: 1px solid #6d6867;
}

#hero h1 {
	background: url(hero/title.gif) no-repeat;
}

#antihero h1 {
	background: url(antihero/title.gif) no-repeat;
}

#patriot h1 {
	background: url(patriot/title.gif) no-repeat;
}

/* options */

.options {
	position: absolute;
	top: 90px;
	left: 30px;
	z-index: 999;
}

a {
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	font-size: 10px;
}

#hero a {
	color: #525659;
}

#hero a:hover {
	border-bottom: 1px solid #9da3a8;
}

#antihero a {
	color: #b1bbbd;
}

#antihero a:hover {
	border-bottom: 1px solid #6f7577;
}

#patriot a {
	color: #aabcd1;
}

#patriot a:hover {
	border-bottom: 1px solid #dfe6ed;
}

#hero span {
	color: #868686;
	display: block;
}

#antihero span {
	color: #8c9495;
	display: block;
}

#patriot span {
	color: #cdd3d9;
	display: block;
}

/* narrative */

.narrative {
	z-index: 999;
	width: 300px;
	position: absolute;
	top: 150px;
	left: 30px;
}

p {
	padding-bottom: 18px;
}

/* poster */

.light .poster {
	margin-left: 159px;
	margin-top: 77px;
	cursor: crosshair;
}

/* links */

a#hero-scroll-1, a#hero-scroll-2, a#hero-scroll-3, a#antihero-scroll-1, a#antihero-scroll-2, a#antihero-scroll-3, a#patriot-scroll-1, a#patriot-scroll-2, a#patriot-scroll-3    {
	width: 84px;
	padding-top: 108px;
	display: block;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	z-index: 999;
	top: 505px;
	font-size: 9px;
}

a#hero-scroll-1, a#hero-scroll-2, a#hero-scroll-3 {
	left: 30px;
}

a#antihero-scroll-1, a#antihero-scroll-2, a#antihero-scroll-3 {
	left: 120px;
}

a#patriot-scroll-1, a#patriot-scroll-2, a#patriot-scroll-3 {
	left: 210px;
}

a#hero-scroll-1 {
	color: #868b90;
	background: url(hero/thumb-hero.jpg) no-repeat;
}

a#hero-scroll-2 {
	background: url(antihero/thumb-hero.jpg) no-repeat;
}

a#hero-scroll-3 {
	background: url(patriot/thumb-hero.jpg) no-repeat;
}

a#antihero-scroll-1 {
	background: url(hero/thumb-antihero.jpg) no-repeat;
}

a#antihero-scroll-2 {
	color: #e5eff1;
	background: url(antihero/thumb-antihero.jpg) no-repeat;
}

a#antihero-scroll-3 {
	background: url(patriot/thumb-antihero.jpg) no-repeat;
}

a#patriot-scroll-1 {
	background: url(hero/thumb-patriot.jpg) no-repeat;
}

a#patriot-scroll-2 {
	background: url(antihero/thumb-patriot.jpg) no-repeat;
}

a#patriot-scroll-3 {
	color: #d2d8da;
	background: url(patriot/thumb-patriot.jpg) no-repeat;
}

a:hover#antihero-scroll-1, a:hover#hero-scroll-1, a:hover#patriot-scroll-1 {
	border-bottom: none;
	color: #868b90;
}

a:hover#antihero-scroll-2, a:hover#hero-scroll-2, a:hover#patriot-scroll-2 {
	border-bottom: none;
	color: #e5eff1;
}

a:hover#antihero-scroll-3, a:hover#hero-scroll-3, a:hover#patriot-scroll-3 {
	border-bottom: none;
	color: #d2d8da;
}

/* nav */

.nav {
	width: 100px;
	height: 16px;
	position: absolute;
	top: 31px;
	right: 30px;
	z-index: 9999;
}

.nav a {
	height: 16px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

a.intro {
	width: 33px;
	float: left;
}

#hero a.intro {
	background-image: url(hero/link-intro.gif);
}

#hero a:hover.intro {
	border-bottom-style: none;
	background: url(hero/link-intro.gif) 0 -16px;
}

#antihero a.intro {
	background-image: url(antihero/link-intro.gif);
}

#antihero a:hover.intro {
	border-bottom-style: none;
	background: url(antihero/link-intro.gif) 0 -16px;
}

#patriot a.intro {
	background-image: url(patriot/link-intro.gif);
}

#patriot a:hover.intro {
	border-bottom-style: none;
	background: url(patriot/link-intro.gif) 0 -16px;
}

a.colophon {
	width: 56px;
	float: right;
}

#hero a.colophon {
	background-image: url(hero/link-colophon.gif);
}

#hero a:hover.colophon {
	border-bottom-style: none;
	background: url(hero/link-colophon.gif) 0 -16px;
}

#antihero a.colophon {
	background-image: url(antihero/link-colophon.gif);
}

#antihero a:hover.colophon {
	border-bottom-style: none;
	background: url(antihero/link-colophon.gif) 0 -16px;
}

#patriot a.colophon {
	background-image: url(patriot/link-colophon.gif);
}

#patriot a:hover.colophon {
	border-bottom-style: none;
	background: url(patriot/link-colophon.gif) 0 -16px;
}

/* colophon */

#colophon .title {
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	top: 30px;
	left: 30px;
}

#colophon .title h1 {
	background: url(head/title.gif) no-repeat;
	width: 106px;
	height: 25px;
	left: 0;
	top: 0;
}

#colophon .title a {
	font-size: 9px;
	font-weight: normal;
	position: absolute;
	left: 1px;
	z-index: 9999;
	color: #fff;
	top: 30px;
}

#colophon .title a:hover {
	color: #6d6867;
	border-bottom: 1px solid #6d6867;
}

#colophon p {
	padding-bottom: 0;
	position: absolute;
	line-height: 10px;
	top: 34px;
	font-size: 9px;
	color: #b3b3b3;
	left: 180px;
}

#colophon p a {
	color: #3486c7;
	font-weight: normal;
	font-size: 9px;
}

#colophon p a:hover {
	text-decoration: underline;
}

#colophon p a span {
	color: #fe4297;
}

#colophon small {
	text-align: right;
	padding-bottom: 0;
	position: absolute;
	line-height: 10px;
	top: 34px;
	font-size: 9px;
	right: 30px;
}