/*******************************************
/*
/* !Tag Styling */
/*
/******************************************/

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background-color: #f2f2f2;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, sans-serif;
	font-weight: 100;
	font-size: 11px;
	line-height: 1.8em;
	color: #AAA;
}

html.chat,
body.chat {
	margin: auto;
	padding: auto;
	width: auto;
	height: auto;
	background: #fff;
	font-weight: normal;
}

a,
a img {
	border: none;
}

a,
a:visited,
a:active {
	color: #999;
	text-decoration: none;
}

a:hover {
	color: #333;
	text-decoration: none;
}


a:focus {
	 -moz-outline:none;
	 outline: none;
}
:focus { -moz-outline-style: none; }

.blue h1 { color: #00acea; }
#logo.blue,
.blue #label { background-color: #00acea; }

.teal h1 { color: #17AC9B; }
#logo.teal,
.teal #label { background-color: #17AC9B; }

.pink h1 { color: #EE517E; }
#logo.pink,
.pink #label { background-color: #EE517E; }

.yellow h1 { color: #FDC000; }
#logo.yellow,
.yellow #label { background-color: #FDC000; }

p {
	margin: 0 0 1em 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
}

h1 {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 26px;
	font-weight: 100;
	font-style: italic;
	letter-spacing: 0.05em;
	margin-bottom: 1em;
	line-height: 1.3em;
}
.cell h1 {
	font-size: 22px;
}
#award h1 {
	margin-bottom: 0.5em;
}
h1.chat_title {
	padding: 20px 0 0 20px;
	color: #ccc;
}

h2,h3 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 0.1em;
	margin: 0;
	color: #AAA;
}
#footer h2,
#footer h3 { color: #DDD; }

h3 { margin: 3em 0 -1em; }

h4 {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 26px;
	font-weight: 100;
	letter-spacing: 0.05em;
	color: #ddd;
}

.hidden {
	display: none;
}

.hilite {
	color: #00acea;
}

.buffer {
	height: 30px;
	width: 100%;
	clear: both;
	background-color: #f2f2f2;
}

#container,
#pastcontainer {
	position: relative;
	width: 980px;
	margin: 12px auto 0;
	background: url(../images/pad.gif) 25px top repeat-y;
}
#pastcontainer {
	margin-top: 50px;
}

#container .topper,
#pastcontainer .topper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 12px;
	background: url(../images/topper.gif) 25px top no-repeat;
}

#container .bottom,
#pastcontainer .bottom {
	width: 100%;
	height: 15px;
	background: url(../images/bottom.gif) 25px bottom no-repeat;
}

#footer {
	position: relative;
	width: 980px;
	height: 40px;
	margin: 10px auto 0;
	background: url(../images/pad.gif) 25px top repeat-y;
}

#footer .topper {
	position: absolute;
	top: 0;
	width: 100%;
	height: 12px;
	background: url(../images/topper.gif) 25px top no-repeat;
}

#copyright {
	position: absolute;
	top: 12px;
	left: 65px;
	margin: 0;
	padding: 0;
}
#copyright h2 {
	margin: 0;
	padding: 0;
}

#header { 
	margin: 0;
	padding: 0;
}

#header h1 {
	font-size: 20px;
	margin: 0;
	padding: 5px 0 2px 65px;
}

#legend {
	position: absolute;
	display: block;
	top: 12px;
	right: 68px;
	height: 14px;
}
#legend h2 {
	margin: 0;
	padding: 0;
}

.key {
	float: left;
	display: block;
	padding-left: 10px;
	margin-left: 14px;
}
.key.blue { background: url(../images/key-blue.gif) left center no-repeat; }
.key.teal { background: url(../images/key-teal.gif) left center no-repeat; }
.key.pink { background: url(../images/key-pink.gif) left center no-repeat; }
.key.yellow { background: url(../images/key-yellow.gif) left center no-repeat; }


/*******************************************
/*
/* !Logo & Menu */
/*
/******************************************/

#logo {
	z-index: 5;
	position: absolute;
	top: 80px;
	right: 30px;
	width: 200px;
	height: 140px;
	padding: 0;
}
#logo.news {
	right: 5px;
}

#logo img { 
	position: relative;
	top: 100px;
	left: 19px;
}

#menu {
	z-index: 6;
	position: absolute;
	top: 240px;
	right: 25px;
	font-size: 11px;
	letter-spacing: 0.02em;
}
#menu.news {
	right: 0;
}

#menu a,
#menu a:visited {
	color: #888;
	text-decoration: none;
}

#menu a:active {
	color: #BBB;
}

#menu a:hover {
	text-decoration: none;
}

#menu ul {
	position: relative;
	top: 0;
	left: 0;
	width: 205px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu ul li {
	position: relative;
	top: 0;
	height: 24px;
	width: 185px;
	padding: 8px 0 8px 20px;
	margin: 0;
}

#menu ul li:hover {
	background: url(../images/edge-in.gif) right no-repeat;
}

#menu ul li ul li:hover {
	background: url(../images/edge-in.gif) right no-repeat;
}

#menu.blue a:hover,
#menu.blue .sel a:hover { color: #00acea; }
#menu.teal a:hover,
#menu.teal .sel a:hover { color: #17AC9B; }
#menu.pink a:hover,
#menu.pink .sel a:hover { color: #EE517E; }
#menu.yellow a:hover,
#menu.yellow .sel a:hover { color: #FDC000; }

#menu ul li {
	width: 205px;
	padding: 0px 0 14px 0;
}

#menu.blue ul li:hover a,
#menu.blue ul li:hover span { border-top: 2px #00acea solid; }
#menu.teal ul li:hover a,
#menu.teal ul li:hover span { border-top: 2px #17AC9B solid; }
#menu.pink ul li:hover a,
#menu.pink ul li:hover span { border-top: 2px #EE517E solid; }
#menu.yellow ul li:hover a,
#menu.yellow ul li:hover span { border-top: 2px #FDC000 solid; }

#menu ul li a,
#menu ul li span {
	display: block;
	border-top: 2px #f1f1f1 solid;
	width: 180px;
	height: 100%;
	padding: 8px 0 8px 20px;
}

#menu .sel,
#menu .sel a,
#menu .sel a:visited {
	color: #222;
}

ul.sub {
	display: none;
}

li.active ul.sub {
	display: block;
}


/*******************************************
/*
/* !Content */
/*
/******************************************/


#maincontent {
	width: 580px;
	margin: 0 0 30px;
	padding-top: 68px;
}
#maincontent.locked {
	height: 400px;
}
#maincontent.topcrop {
	position: relative;
	padding-top: 0;
	margin-top: -12px;
	z-index: 2;
	top: 0;
}

#maincontent .image {
	margin: 0 0 0 30px;
}

#maincontent .title {
	position: relative;
	padding-left: 65px;
}
#maincontent a:hover .title { background: url(../images/edge-in-left.gif) 25px 8px no-repeat; }


#maincontent .description {
	position: relative;
	padding-left: 65px;
}

#slidearea {
	position: relative;
	clear: both;
/* 	width: 930px; */
	width: 860px;
	margin: 4px auto 0;
}

#slidebar {
	position: relative;
	float: left;
	cursor: pointer;
	width: 719px;
	height: 24px;
	background: url(../images/slidebar.gif) top left no-repeat;
	-moz-user-select: none;
}

#slider {
	position: absolute;
	cursor: pointer;
	left: 5px;
	top: 0;
	width: 102px;
	height: 20px;
	background: url(../images/slider.png) top left no-repeat;
	-moz-user-select: none;
}
#slider:hover { 
	background: url(../images/slider.png) bottom left no-repeat;
}

#showall {
	position: relative;
	float: right;
	cursor: pointer;
	width: 141px;
	height: 24px;
	background: url(../images/showall.gif) left top no-repeat;
}
#showall:hover {
	background: url(../images/showall.gif) left -24px no-repeat;
}
#showall.collapse { background: url(../images/showall.gif) left -48px no-repeat; }
#showall.collapse:hover { background: url(../images/showall.gif) left bottom no-repeat; }

#subcontainer {
	position: relative;
	clear: both;
	width: 100%;
	overflow: hidden;
}

#subcontent {
	position: relative;
	width: 980px;
	height: 360px;
	margin: 0 auto 0;
}
#subcontent.news {
	height: 3000px;
	margin-top: -25px;
}

#cells {
	position: absolute;
	z-index: 8;
	top: 0;
	left: 0;
	height: 260px;
	width: 9000px;
}

#cells.news {
	width: 980px;
	height: 3000px;
}

.cell {
	position: relative;
	display: block;
	float: left;
	margin: 15px 0 0 25px;
	padding: 0;
	width: 293px;
	height: 330px;
	background: url(../images/cell-pad.gif) repeat-y;
	visibility: hidden;
}

.navcell {
	position: relative;
	display: block;
	float: right;
	margin: 25px 25px 0 25px;
	padding: 0;
	width: 293px;
	height: 685px;
	background: url(../images/cell-pad.gif) repeat-y;
}

#cells.news .cell { visibility: visible; }

.cell a {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.cell a .description,
.cell a .description:visited,
.cell a .description:active,
.cell a .description:hover {
	color: #AAA;
	text-decoration: none;
}

.cell .topper,
.navcell .topper {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 12px;
	background: url(../images/cell-topper.gif) top left no-repeat;
}

.cell .bottom,
.navcell .bottom {
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15px;
	background: url(../images/cell-bottom.gif) bottom left no-repeat;
}

.cell .title {
	position: absolute;
	z-index: 2;
	top: 25px;
	left: 40px;
	width: 240px;
	visibility: visible;
}

.cell .title h1 {
	margin: 0;
	padding: 0;
}

.cell .description {
	position: absolute;
	z-index: 2;
	top: 102px;
	left: 40px;
	width: 210px;
	visibility: hidden;
}

.cell .preview {
	position: absolute;
	z-index: 4;
	display: block;
	top: 103px;
	left: 5px;
	width: 283px;
	height: 222px;
	overflow: hidden;
}

.cell .indent {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 30px;
	width: 10px;
	height: 20px;
	background: none;
}
.cell:hover .indent { background: url(../images/edge-in-left.gif) no-repeat; }

.gallery {
	display: none;
}

.gallerylink {
	position: relative;
	width: 100%;
	height: 100%;
}

.gallerylink h4 {
	position: absolute;
	top: 42%;
	width: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 26px;
	font-weight: 100;
	letter-spacing: 0.05em;
	text-align: center;
}



/*******************************************
/*
/* !Awards Page */
/*
/******************************************/

.year {
	position: relative;
	margin-bottom: 60px;
}
.award {
	padding-left: 40px;
}
.award .description {
	margin-top: -16px;
}
.number {
	position: absolute;
	top: 4px;
	left: 30px;
	display: block;
	width: 200px;
	height: 100px;
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 60px;
	line-height: 60px;
	color: #f1f1f2;
}
.number div {
	position: absolute;
	left: -10px;
}


/*******************************************
/*
/* !Contact Page */
/*
/******************************************/

#form {
	margin-top: 20px;
}
#form h2 {
	margin-top: 12px;
}

div.formurl { /* Hide the input to make sure a scammer doesn't send me crap... */
	display: none;
}

input,textarea {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 11px;
	font-style: italic;
	width: 570px;
	margin: 0;
	padding: 5px;
	border: 2px solid #efefef;
	outline: none;
}