/*
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------

	Half-Life Improvement Team

	Half-Life template styles

-------------------------------------------------------------------------------
-------------------------------------------------------------------------------

	Colour glossary:
	#f0b43f - Half-Life Orange (used for navigation links, some text, hovered links, etc.)
	#926d26 - Slightly darker version used for content borders
	#3e331e - Darker version of the above (used for borders, dividers, etc.)
	#fdf454 - Lighter version (used for links when active)
	#b37a00 - Pumpkin orange (used for selected text)

*/

/*
-------------------------------------------------------------------------------
	Global styles
-------------------------------------------------------------------------------
*/
html {
	background-color: rgb(10%, 10%, 10%);
	background-image: url(../images/background.jpg);
	background-repeat: repeat;
}
body {
	background-image: url(../images/background_header.jpg);
	background-repeat: no-repeat;
}
html,
body {
	background-position: 50% -32px;
	/* These prevent background_header.jpg from being clipped at the bottom */
	min-height: 800px;
	height: 100%; /* Redundant, for IE6 */
}
body,
input,
textarea,
select,
option,
optgroup {
	color: white;
}
html, body {
	min-width: 768px;
}
body,
textarea,
#sb-container * {
	font-family: "Trebuchet MS", "Arial Narrow", Tahoma, sans-serif;
}


/* Selected text styles - currently recognized by Gecko, Opera 9.5, and Safari 3 */
::-moz-selection {
	background-color: #B37A00;
	color: white;
}
::selection {
	background-color: #B37A00;
	color: white;
}

/* --- Links --- */
:link,
:visited,
.pseudo-link {
	text-decoration: none;
	color: white;
	line-height: 1.4; /* Prevents bottom border digging into a following wrapped line */
}
:link,
:visited,
.link-wrapped .link-content,
.pseudo-link {
	border-bottom: 0.11em solid #926d26;
}
.link-wrapped {
	border-bottom: none;
}
.IE8 .link-wrapped {
}
:link:hover,
:visited:hover,
.pseudo-link:hover,
.pseudo-link-hover,
.pseudo-link-focus {
	color: #f0b43f !important;
}
a:focus, /* a instead of :link/:visited because IE6 bug overriding normal colour */
.pseudo-link:focus {
	/* These have to be separated from the above,
	   because IE 6 and 7 will discard the whole rule,
	   :hover and all, because they don't understand :focus */
	color: #f0b43f !important;
}
:link:active,
:visited:active,
.pseudo-link:active,
.pseudo-link-active {
	color: #fdf454 !important; /* Must override inline fader style */
}
/* Link indicator icons */
.external-link:hover:after,
.external-link:focus:after,
.download-link:hover:after,
.download-link:focus:after {
	opacity: 0.5;
}


hr,
.rule {
	margin: 1.5em 0;
/*	background-color: #3e331e;*/
}

code {
	border-color: rgb(25%, 25%, 25%);
}


/* --- Form Elements --- */
/* Labels */
label[for]:hover {
	color: #f0b43f;
}
label[for]:active {
	color: #fdf454;
}
label.invalid-for {
	color: inherit !important; /* Don't show feedback if JavaScript can't find 'for' target */
}
label.valid-for:hover {
	color: #f0b43f;
}
label.valid-for:active {
	color: #fdf454 !important; /* Must override inline fader style */
}

/* Base field styles */
input[type=text],
input[type=password],
textarea,
select {
	background-color: rgb(15%, 15%, 15%);
	border: 2px solid rgb(30%, 30%, 30%);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.input-text, /* IE6 */
.input-password, /* IE6 */
textarea,
select {
	background-color: rgb(15%, 15%, 15%);
	border: 2px solid rgb(30%, 30%, 30%);
}

/* Focussed field styles */
input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
	border-color: rgb(50%, 50%, 50%);
}
.input-text-focus, /* IE6 */
.input-password-focus, /* IE6 */
textarea.focus, /* IE6, IE7 */
select.focus { /* IE6 */
	border-color: rgb(50%, 50%, 50%);
}
input[type=text].focus, /* IE7 */
input[type=password].focus { /* IE7 */
	border-color: rgb(50%, 50%, 50%);
}


/*
-------------------------------------------------------------------------------
	BBCode Styles
-------------------------------------------------------------------------------
*/


/*
-------------------------------------------------------------------------------
	Content Boxes & Menus
-------------------------------------------------------------------------------
*/
/* Simple box */
#navigation,
#content .content-box {
	position: relative;
	margin: 4px 7px 10px;
	padding: 14px 13px;
	border: 2px solid #926d26;
	background-color: rgb(10%, 10%, 10%);
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	border-radius: 18px;
}

/* Styled box */
#navigation.styled,
#content .content-box-styled {
	margin: 0;
	padding: 20px 22px 26px;
	border-width: 0;
	background-color: transparent;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.content-box-styled .box-content {
	position: relative;
	z-index: 2;
	width: 100%;
}
.content-box-styled .box-top,
.content-box-styled .box-top *,
.content-box-styled .box-bottom,
.content-box-styled .box-bottom * {
	background-image: url(../images/content_box_top_n_bottom.png);
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
}
.content-box-styled .box-body,
.content-box-styled .box-body * {
	background-image: url(../images/content_box_body.png);
	background-repeat: repeat-y;
	position: absolute;
	z-index: 0;
}

.content-box-styled .box-top {
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
	background-position: 0 0;
}
.content-box-styled .box-top * {
	height: 100%;
	left: 22px;
	right: 0;
	background-position: 100% 0;
}
.content-box-styled .box-bottom {
	bottom: 0;
	left: 0;
	right: 0;
	height: 26px;
	background-position: 0 100%;
}
.content-box-styled .box-bottom * {
	height: 100%;
	left: 22px;
	right: 0;
	background-position: 100% 100%;
}
.content-box-styled .box-body {
	top: 20px;
	bottom: 26px;
	left: 0;
	right: 0;
	background-position: 0 0;
}
.content-box-styled .box-body * {
	height: 100%;
	left: 22px;
	right: 0;
	background-position: 100% 0;
}

/* Simple menu */
#navigation ul ul {
	border: 2px solid #926d26;
	background-color: rgb(10%, 10%, 10%);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#navigation.styled-menus ul ul {
	border-width: 0;
	background-color: transparent;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}

/* Styled menu */
#navigation .menu .menu-top,
#navigation .menu .menu-top *,
#navigation .menu .menu-bottom,
#navigation .menu .menu-bottom * {
	background-image: url(../images/menu_top_n_bottom.png);
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
}
#navigation .menu .menu-body,
#navigation .menu .menu-body * {
	background-image: url(../images/menu_body.png);
	background-repeat: repeat-y;
	position: absolute;
	z-index: 0;
}

#navigation .menu .menu-top {
	top: 0;
	left: 0;
	right: 0;
	height: 14px;
	background-position: 0 0;
}
#navigation .menu .menu-top * {
	height: 100%;
	left: 16px;
	right: 0;
	background-position: 100% 0;
}
#navigation .menu .menu-bottom {
	bottom: 0;
	left: 0;
	right: 0;
	height: 18px;
	background-position: 0 100%;
}
#navigation .menu .menu-bottom * {
	height: 100%;
	left: 16px;
	right: 0;
	background-position: 100% 100%;
}
#navigation .menu .menu-body {
	top: 14px;
	bottom: 18px;
	left: 0;
	right: 0;
	background-position: 0 0;
}
#navigation .menu .menu-body * {
	height: 100%;
	left: 16px;
	right: 0;
	background-position: 100% 0;
}


/*
-------------------------------------------------------------------------------
	Container
-------------------------------------------------------------------------------
*/
#container {
	width: 768px;
	margin: 0 auto;
	padding: 108px 0 128px;
}


/*
-------------------------------------------------------------------------------
	Header (Title)
-------------------------------------------------------------------------------
*/
#header,
#header h1 {
	background-image: url(../images/title.png);
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
}
#header { /* = background */
	width: 512px;
	height: 96px;
	margin-left: -256px;
	overflow: visible;
	background-position: 0 0;
	z-index: 1;
	top: 12px;
}
#header h1 { /* = foreground */
	width: 768px;
	height: 144px;
	overflow: hidden;
	background-position: 100% 0;
	text-indent: -999em;
	margin-left: -384px;
	top: 0;
}
#header.flash01 {
	background-position: 0 -96px;
}
#header.flash02 {
	background-position: 0 -192px;
}
#header.flash03 {
	background-position: 0 -288px;
}
#header.flash04 {
/*	background-position: 0 -384px;*/
	background-position: 0 -288px;
}
#header h1.flash01 {
	background-position: 100% -144px;
}
#header h1.flash02 {
	background-position: 100% -288px;
}

.IE6 #header {
	background-image: none;
}
.IE6 #header h1 {
	background-image: url(../images/title_ie6.png);
}


/*
-------------------------------------------------------------------------------
	Navigation
-------------------------------------------------------------------------------
*/
#navigation {
	position: relative;
	z-index: 2; /* Above header */
}
.IE6 #navigation {
	margin-top: -32px; /* Stupid expanding box bug on header */
}
#navigation.styled {
	z-index: 3; /* So that it's stacked above main content area, was causing issue with menus */
}
#navigation ul,
#navigation.styled .box-content {
	margin-top: -6px;
	margin-bottom: -6px;
}
.IE7 #navigation.styled > .box-content > ul {
	/* Have to compensate for some silly reason */
	margin-top: 0;
}

#navigation ul {
	height: 26px;
	width: 684px;
	margin-left: auto;
	margin-right: auto;
}
.IE6 #navigation ul {
	/* Fix for bottom being larger than top */
	position: relative;
	bottom: -3px;
}
#navigation ul ul {
	height: auto;
	width: auto;
	margin: 0;
	/* Need the list item to extend all the way to the edge,
	otherwise submenu disappears prematurely, hence no right padding */
	padding: 8px 0 8px 8px;
}
.IE6 #navigation ul ul {
	/* Cancel out relative position fix */
	position: absolute;
	bottom: auto;
}
#navigation.styled-menus ul ul {
	padding: 14px 9px 18px 16px;
}
#navigation #nav-content,
#navigation ul ul ul { /* Remove lack of padding for second-level drop-down */
	padding-right: 8px;
}
#navigation ul ul ul li {
	padding-right: 0;
}
#navigation.styled-menus ul ul ul { /* Remove lack of padding for second-level drop-down */
	padding-right: 16px;
}

/* --- Menu behaviour --- */
/* First level */
#navigation li ul,
#navigation .menu,
#navigation li:hover ul ul, /* level 2 */
#navigation li:hover .menu .menu,
#navigation li.hover ul ul {
	position: absolute;
	top: -999em; /* Top instead of left to prevent horizontal scrollbar in Opera 8 */
}
#navigation li:hover ul,
#navigation li:hover .menu,
#navigation li.hover ul,
#navigation li li:hover ul, /* level 2 */
#navigation.styled-menus li li:hover .menu,
#navigation li li.hover ul {
	top: auto;
}
#navigation.styled-menus li ul {
	position: relative !important;
	top: auto !important;
	z-index: 1;
}
#navigation.styled-menus .menu {
	margin-top: -6px;
	margin-left: -8px;
}
/* Second level */
#navigation li ul ul {
	margin-top: -34px; /* 24px list item + 8px padding + 2px border */
	margin-left: 152px; /* 152px list item + 2px border */
}
#navigation.styled-menus li ul ul {
	margin-top: 0;
	margin-left: 0;
}
#navigation.styled-menus .menu .menu {
	margin-top: -38px;
	margin-left: 147px;
}

#navigation a {
	border-bottom: none;
	text-indent: -999em;
}
#navigation a,
#navigation li {
	display: block;
}
#navigation a,
#navigation.fadable li {
	background: transparent url(../images/glow_items.png) no-repeat;
}
#navigation.fadable li.active { /* JS handles mouseout, rather than using :active */
	background-image: none;
}
/* Top-level nav items */
#navigation li {
	float: left;
	border: solid #3e331e;
	border-width: 0 0 0 2px;
}
/* Second level */
#navigation ul ul li {
	float: none;
}
#navigation #nav-main,
#navigation #nav-projects,
#navigation ul ul li {
	border-left-width: 0;
}
#navigation #nav-news {
	border-right-width: 2px;
}

#navigation a,
#navigation li { /* All items */
	width: 96px;
	height: 26px;
}
#navigation #nav-projects,
#nav-projects a {
	/* Projects is special, omigawd */
	height: 32px;
}
#navigation ul ul a,
#navigation ul ul li { /* Second level items */
	width: 144px;
	height: 24px;
}
#navigation ul ul ul a,
#navigation ul ul ul li { /* Third level items */
	width: 112px;
}

/* --- Individual links ---
Yeah, I know, long bloody list. This could be much shorter, but
combining them into a single image drastically reduces HTTP requests
*/
/* Main */
#nav-main a,
#navigation.fadable #nav-main {
	background-position: 0 0;
}
#nav-main a:hover,
#navigation.fadable #nav-main a {
	background-position: 0 -32px;
}
#nav-main a:focus {
	background-position: 0 -32px;
}
#nav-main a:active,
#navigation.fadable #nav-main a:active {
	background-position: 0 -64px;
}
/* News */
#nav-news a,
#navigation.fadable #nav-news {
	background-position: -96px 0;
}
#nav-news a:hover,
#navigation.fadable #nav-news a {
	background-position: -96px -32px;
}
#nav-news a:focus {
	background-position: -96px -32px;
}
#nav-news a:active,
#navigation.fadable #nav-news a:active {
	background-position: -96px -64px;
}
/* Projects */
#nav-projects a,
#navigation.fadable #nav-projects {
	background-position: -192px 0;
}
#nav-projects a:hover,
#navigation.fadable #nav-projects a {
	background-position: -192px -32px;
}
#nav-projects a:focus {
	background-position: -192px -32px;
}
#nav-projects a:active,
#navigation.fadable #nav-projects a:active {
	background-position: -192px -64px;
}
/* Downloads */
#nav-downloads a,
#navigation.fadable #nav-downloads {
	background-position: -288px 0;
}
#nav-downloads a:hover,
#navigation.fadable #nav-downloads a {
	background-position: -288px -32px;
}
#nav-downloads a:focus {
	background-position: -288px -32px;
}
#nav-downloads a:active,
#navigation.fadable #nav-downloads a:active {
	background-position: -288px -64px;
}
/* Forums */
#nav-forums a,
#navigation.fadable #nav-forums {
	background-position: -384px 0;
}
#nav-forums a:hover,
#navigation.fadable #nav-forums a {
	background-position: -384px -32px;
}
#nav-forums a:focus {
	background-position: -384px -32px;
}
#nav-forums a:active,
#navigation.fadable #nav-forums a:active {
	background-position: -384px -64px;
}
/* About */
#nav-about a,
#navigation.fadable #nav-about {
	background-position: -480px 0;
}
#nav-about a:hover,
#navigation.fadable #nav-about a {
	background-position: -480px -32px;
}
#nav-about a:focus {
	background-position: -480px -32px;
}
#nav-about a:active,
#navigation.fadable #nav-about a:active {
	background-position: -480px -64px;
}
/* Contact */
#nav-contact a,
#navigation.fadable #nav-contact {
	background-position: -576px 0;
}
#nav-contact a:hover,
#navigation.fadable #nav-contact a {
	background-position: -576px -32px;
}
#nav-contact a:focus {
	background-position: -576px -32px;
}
#nav-contact a:active,
#navigation.fadable #nav-contact a:active {
	background-position: -576px -64px;
}
/* Projects -> Half-Life: Enhanced */
#nav-hl-enhanced a,
#navigation.fadable #nav-hl-enhanced {
	background-position: 0 -96px;
}
#nav-hl-enhanced a:hover,
#navigation.fadable #nav-hl-enhanced a {
	background-position: 0 -120px;
}
#nav-hl-enhanced a:focus {
	background-position: 0 -120px;
}
#nav-hl-enhanced a:active,
#navigation.fadable #nav-hl-enhanced a:active {
	background-position: 0 -144px;
}
/* Projects -> Blue Shift: Unlocked */
#nav-bshift-unlocked a,
#navigation.fadable #nav-bshift-unlocked {
	background-position: -144px -96px;
}
#nav-bshift-unlocked a:hover,
#navigation.fadable #nav-bshift-unlocked a {
	background-position: -144px -120px;
}
#nav-bshift-unlocked a:focus {
	background-position: -144px -120px;
}
#nav-bshift-unlocked a:active,
#navigation.fadable #nav-bshift-unlocked a:active {
	background-position: -144px -144px;
}
/* Projects -> Content Upgrades */
#nav-content a,
#navigation.fadable #nav-content {
	background-position: -288px -96px;
}
#nav-content a:hover,
#navigation.fadable #nav-content a {
	background-position: -288px -120px;
}
#nav-content a:focus {
	background-position: -288px -120px;
}
#nav-content a:active,
#navigation.fadable #nav-content a:active {
	background-position: -288px -144px;
}
/* Projects -> Content Upgrades -> Half-Life */
#nav-content-hl a,
#navigation.fadable #nav-content-hl {
	background-position: 0 -168px;
}
#nav-content-hl a:hover,
#navigation.fadable #nav-content-hl a {
	background-position: 0 -192px;
}
#nav-content-hl a:focus {
	background-position: 0 -192px;
}
#nav-content-hl a:active,
#navigation.fadable #nav-content-hl a:active {
	background-position: 0 -216px;
}
/* Projects -> Content Upgrades -> Opposing Force */
#nav-content-opfor a,
#navigation.fadable #nav-content-opfor {
	background-position: -112px -168px;
}
#nav-content-opfor a:hover,
#navigation.fadable #nav-content-opfor a {
	background-position: -112px -192px;
}
#nav-content-opfor a:focus {
	background-position: -112px -192px;
}
#nav-content-opfor a:active,
#navigation.fadable #nav-content-opfor a:active {
	background-position: -112px -216px;
}
/* Projects -> Content Upgrades -> Blue Shift */
#nav-content-bshift a,
#navigation.fadable #nav-content-bshift {
	background-position: -224px -168px;
}
#nav-content-bshift a:hover,
#navigation.fadable #nav-content-bshift a {
	background-position: -224px -192px;
}
#nav-content-bshift a:focus {
	background-position: -224px -192px;
}
#nav-content-bshift a:active,
#navigation.fadable #nav-content-bshift a:active {
	background-position: -224px -216px;
}
/* Projects -> Content Upgrades -> Sven Co-op */
#nav-content-svencoop a,
#navigation.fadable #nav-content-svencoop {
	background-position: -336px -168px;
}
#nav-content-svencoop a:hover,
#navigation.fadable #nav-content-svencoop a {
	background-position: -336px -192px;
}
#nav-content-svencoop a:focus {
	background-position: -336px -192px;
}
#nav-content-svencoop a:active,
#navigation.fadable #nav-content-svencoop a:active {
	background-position: -336px -216px;
}


/*
-------------------------------------------------------------------------------
	Content
-------------------------------------------------------------------------------
*/
#content {
	padding-top: 6px;
}
.IE7 #content {
	padding-top: 16px;
}

/* Page title */
#content h2 {
	margin-bottom: 8px;
	padding-left: 22px;
}
#content h2 .heading-section {
	font-style: italic;
}
.IE6 #content h2 .heading-section a,
.IE7 #content h2 .heading-section a {
	padding-bottom: 0.1em;
}
#content h2 .heading-section,
#content h2 .heading-section a {
	color: rgb(70%, 70%, 70%);
}
#content h2 .heading-section-last {
	color: white;
	font-style: normal;
}

/* Text shadows */
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content .header,
.coming-soon,
strong.major,
#main-page #latest dt,
#news-page .news-item .header,
#news-page #comments-footer,
#projects-page #projects-list li,
#about-page #team-list .team-member-name,
#sb-title,
#sb-counter {
	text-shadow: /*0 2px 0.3em black, */0 1px 0.3em black, 0 1px 0.3em black;
}

/* Box shadows */
.image-resized-text span,
#about-page #team-list .team-member-avatar,
.tooltip-content {
	-moz-box-shadow: 0 2px 5px black;
	-webkit-box-shadow: 0 2px 5px black;
	box-shadow: 0 2px 5px black;
}

.content-box .header,
#main-page #links h4 {
	position: relative;
	margin: -4px -4px 12px;
	padding: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.content-box .header,
.content-section-heading,
#main-page #links h4 {
	background-color: rgb(15%, 15%, 15%);
	border-bottom: 2px solid #3e331e;
}
.content-box .header-scripted,
#main-page #links h4 {
	-moz-border-radius-topleft: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
#main-page #links .header {
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	border-top-right-radius: 0;
}
.content-box .header .header-top,
.content-box .header .header-top * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 8px;
}
.content-box .header .header-top,
.content-box .header .header-top *,
#main-page #links .header,
#main-page #links h4 {
	background-image: url(../images/content_box_header_corners.png);
	background-repeat: no-repeat;
}
.IE6 #main-page #links .header,
.IE6 #main-page #links h4 {
	background-image: none;
}
.content-box .header .header-top,
#main-page #links .header {
	background-position: top left;
}
#main-page #links .header .header-top {
	display: none;
}
.content-box .header .header-top *,
#main-page #links h4 {
	background-position: top right;
}
.content-section-heading {
	padding: 6px;
}
.content-box .header h3,
.content-box .header h4,
.content-box .header h5,
.content-box .header h6 {
	color: white;

}

.content-box .footer {
	border-top: 2px solid #3e331e;
	padding-top: 12px;
	margin-top: 24px;
}

/* Content item body margins and padding */
#content .content-box .body {
	padding: 0 12px;
	margin: 12px 0;
}
#content .content-box .body p {
	/* Overriding the common margins */
	margin: 12px 0;
}
#main-page #latest .body,
#main-page #links .body {
	margin: 0;
	padding: 0;
}
#news-page .news-item .body {
	padding: 0 18px;
}


/* Darken text a bit to emphasize links, <strong>, <em>, etc. */
#content .content-box {
	color: rgb(75%, 75%, 75%);
}
#content .content-box strong {
	color: white;
}
#content .content-box em {
	color: rgb(85%, 85%, 85%);
}
#content .bbcode-image-resized-link strong {
	color: inherit;
}

/* General list item striping */
li.odd > .list-item-contents {
	background-color: rgb(12%, 12%, 12%);
}

strong.major,
strong.major em {
	color: rgb(70%, 70%, 70%) !important;
}

/* Thumbnail links - basic */
.thumbnail-link {
	margin: 2px;
	padding: 1px;
	border: 2px solid #926d26;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.thumbnail-link:hover {
	border-color: #fdf454;
}
.thumbnail-link:focus {
	border-color: #fdf454;
}
.thumbnail-link:active {
	border-color: rgb(15%, 15%, 15%);
}
.thumbnail-link img {
	z-index: 3;
}
/* Thumbnail links - JavaScript enabled */
.thumbnail-link-fadable {
	margin: 0;
	padding: 8px 8px 9px;
	border: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	/* max dimensions of background image */
	max-width: 512px;
	max-height: 512px;
}

.thumbnail-link .fader,
.thumbnail-link .fader *,
.thumbnail-link .fader-base,
.thumbnail-link .fader-base * {
	display: block;
	position: absolute;
}

.thumbnail-link .fader *,
.thumbnail-link .fader-base * {
	background: transparent url(../images/glow_outlines.png) 0 0 no-repeat;
}

.thumbnail-link .fader {
	z-index: 2;
}
.thumbnail-link .fader-base {
	z-index: 1;
}

.thumbnail-link .fader,
.thumbnail-link .fader-base {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.thumbnail-link .fader-top-left,
.thumbnail-link .fader-base-top-left {
	top: 0;
	left: 0;
	right: 12px;
	bottom: 12px;
}
.thumbnail-link .fader-top-right,
.thumbnail-link .fader-base-top-right {
	top: 0;
	right: 0;
	bottom: 12px;
	width: 12px;
}
.thumbnail-link .fader-bottom-left,
.thumbnail-link .fader-base-bottom-left {
	left: 0;
	right: 12px;
	bottom: 0;
	height: 12px;
}
.thumbnail-link .fader-bottom-right,
.thumbnail-link .fader-base-bottom-right {
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
}

.thumbnail-link .fader-base-top-left {
	background-position: 0 0;
}
.thumbnail-link .fader-base-top-right {
	background-position: -1032px 0;
}
.thumbnail-link .fader-base-bottom-left {
	background-position: 0 -1035px;
}
.thumbnail-link .fader-base-bottom-right {
	background-position: -1032px -1035px;
}

.thumbnail-link .fader-top-left {
	background-position: -1044px 0;
}
.thumbnail-link .fader-top-right {
	background-position: -2076px 0;
}
.thumbnail-link .fader-bottom-left {
	background-position: -1044px -1035px;
}
.thumbnail-link .fader-bottom-right {
	background-position: -2076px -1035px;
}

.thumbnail-link:active .fader-base * {
	background-image: none;
}

.thumbnail-link:active .fader-top-left {
	background-position: -2088px 0;
}
.thumbnail-link:active .fader-top-right {
	background-position: -3120px 0;
}
.thumbnail-link:active .fader-bottom-left {
	background-position: -2088px -1035px;
}
.thumbnail-link:active .fader-bottom-right {
	background-position: -3120px -1035px;
}

/* -- Content index -- */
.content-index li,
.content-index a {
	display: block;
	width: 96px;
	height: 24px;
}
.content-index a {
	position: relative;
	border-bottom-width: 0; 
}
.IE6 .content-index a {
	/* IE6 needs a heavy hand because it's a mouth-breather */
	border-bottom-width: 0 !important; 
}
/* -- Content index, tabbed -- */
.content-box-tabbed .content-index {
	top: -32px;
	right: 24px;
}
.IE6 .content-box-tabbed .content-index {
	top: -30px; /* Not a clue */
}
.content-box-styled-tabbed .content-index {
	top: -58px;
	right: 12px;
}
.IE7 .content-box-styled-tabbed .content-index {
	margin-top: 12px; /* This makes sense, so I'm going to go walk my pancakes */
}
#content .content-box-tabbed .content-index li {
	margin: 0 5px;
}
.content-box-tabbed .content-index li {
	border: 2px solid #3e331e;
	border-bottom-color: #926d26;
	background-color: rgb(10%, 10%, 10%);
	padding: 4px 2px 0;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	border-radius: 10px 10px 0 0;
}
#content .content-box-styled-tabbed .content-index li {
	margin: 0;
}
.content-box-styled-tabbed .content-index li {
	position: relative;
	padding: 6px 10px 2px;
	border: none;
	background-color: transparent;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
.content-box-styled-tabbed .content-index li a {
	z-index: 1;
	max-height: 240px; /* 256 - 10 - 6 */
}
.content-box-styled-tabbed .content-index .tab-top,
.content-box-styled-tabbed .content-index .tab-top *,
.content-box-styled-tabbed .content-index .tab-bottom,
.content-box-styled-tabbed .content-index .tab-bottom * {
	background: transparent url(../images/content_tab_inactive.png) no-repeat;
	display: block;
	position: absolute;
}
.content-box-styled-tabbed .content-index .ui-tabs-selected .tab-top,
.content-box-styled-tabbed .content-index .ui-tabs-selected .tab-top *,
.content-box-styled-tabbed .content-index .ui-tabs-selected .tab-bottom,
.content-box-styled-tabbed .content-index .ui-tabs-selected .tab-bottom * {
	background-image: url(../images/content_tab_normal.png);
	z-index: 0;
}
.content-box-styled-tabbed .content-index .tab-top {
	top: 0;
	left: 0;
	right: 0;
	bottom: 6px;
	background-position: 0 0;
}
.content-box-styled-tabbed .content-index .tab-top * {
	height: 100%;
	left: 14px;
	right: 0;
	background-position: 100% 0;
}
.content-box-styled-tabbed .content-index .tab-bottom {
	bottom: 0;
	left: 0;
	right: 0;
	height: 6px;
	background-position: 0 100%;
}
.content-box-styled-tabbed .content-index .tab-bottom * {
	height: 100%;
	left: 14px;
	right: 0;
	background-position: 100% 100%;
}

.content-box-tabbed .content-index .ui-tabs-selected {
	border-color: #926d26;
	border-bottom-color: rgb(10%, 10%, 10%);
}
#content-index-general a,
#content-index-images a,
#content-index-faqs a {
	overflow: hidden;
	text-indent: -999em;
}
#content-index-general a,
#content-index-images a,
#content-index-faqs a,
.content-index-fadable .fader {
	background: transparent url(../images/glow_items.png) no-repeat;
}
.content-index li.active { /* JS handles this, rather than using :active */
	background-image: none;
}
.content-index-fadable .fader {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
/* General */
#content-index-general a,
.content-index-fadable #content-index-general.ui-tabs-selected a {
	background-position: 0 -240px;
}
#content-index-general a:hover,
#content-index-general .fader {
	background-position: 0 -264px;
}
#content-index-general a:focus,
#content-index-general a:focus .fader {
	background-position: 0 -264px;
}
#content-index-general a:active,
#content-index-general a:active .fader {
	background-position: 0 -288px;
}
/* Images */
#content-index-images a,
.content-index-fadable #content-index-images.ui-tabs-selected a {
	background-position: -96px -240px;
}
#content-index-images a:hover,
#content-index-images .fader {
	background-position: -96px -264px;
}
#content-index-images a:focus,
#content-index-images a:focus .fader {
	background-position: -96px -264px;
}
#content-index-images a:active,
#content-index-images a:active .fader {
	background-position: -96px -288px;
}
/* FAQs */
#content-index-faqs a,
.content-index-fadable #content-index-faqs.ui-tabs-selected a {
	background-position: -192px -240px;
}
#content-index-faqs a:hover,
#content-index-faqs .fader {
	background-position: -192px -264px;
}
#content-index-faqs a:focus,
#content-index-faqs a:focus .fader {
	background-position: -192px -264px;
}
#content-index-faqs a:active,
#content-index-faqs a:active .fader {
	background-position: -192px -288px;
}

/* Scaled down images */
.image-resized-text span {
	background-color: rgba(0, 0, 0, 0.3) !important; /* Semi-transparent for advanced browsers */
	background-color: rgb(15%, 15%, 15%);
}
.image-resized-link * {
	color: inherit !important;
}

/* Quotes */
#content .content-box .quote-container,
#content .content-box .quote-container .quote-header {
	background: url(../images/quotes.png) no-repeat;
}
#content .content-box .quote-container {
	background-position: 100% 100%;
	padding-left: 21px;
	padding-right: 21px;
}
#content .content-box .quote-container .quote-header {
	background-position: 0 100%;
	padding-left: 21px;
	margin-left: -21px;
	padding-bottom: 35px;
	margin-bottom: -30px;
}
#content .content-box .quote-container blockquote {
	background-color: rgb(20%, 20%, 20%);
	-moz-border-radius: 0 5px 0 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	border-radius: 0 5px 0 5px;
}

/* Warning box */
.warning {
	border-color: rgb(100, 0, 0);
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background-color: rgba(100, 0, 0, 0.1);
}
#content .content-box .body .warning {
	/* Works with <p> margins */
	padding: 0 14px;
}

/* Coming Soon display */
.coming-soon {
	color: rgb(50%, 50%, 50%) !important;
}

/* ---- MAIN PAGE ---- */
#main-page #content {
	overflow: hidden; /* Contains floats - THERE'S NO ESCAPE FOR YOUUUUU */
}
#main-page #intro,
#main-page #links {
	width: 506px; /* 550 - (2 * 22 padding) */
}
#main-page #latest {
	width: 174px; /* 218 - (2 * 22 padding) */
}

/* -- Intro Box -- */
#main-page #intro h3 {
	color: rgb(80%, 80%, 80%);
}
#main-page #intro h3 strong,
#main-page #intro h3 em {
	color: white;
}
#main-page #intro .deemphasized {
	color: rgb(50%, 50%, 50%);
}

/* -- Latest Box -- */
.IE6 #main-page #latest li a,
.IE7 #main-page #latest li a {
	/* Updated global text size causes underline cut-off, le sigh */
	padding-bottom: 0.1em;
}
#main-page #latest .empty-message {
	color: rgb(50%, 50%, 50%);
}

/* -- Links Box -- */
#main-page #links,
#main-page #links .box-content {
	position: relative;
}
#main-page #links .header {
	width: 304px;
}
.IE6 #main-page #links .header {
	margin-left: -2px; /* Wish I knew why */
}
#main-page #links ul {
	width: 312px;
}
.IE6 #main-page #links li {
	/* Retarded IE6 fixes commence */
	display: inline;
	width: 98px; /* (Link size: 88 + 2*2 margin + 2*2 border + 1*2 padding) */
}
#main-page #link-us {
	top: 14px;
	right: 14px;
	width: 176px;
}
#main-page #links .box-content #link-us {
	top: 0;
	right: 0;
}
.IE6 #main-page #link-us a {
	/* IE6 overrides .thumbnail-link with standard link bottom border width for some retarded reason */
	border-bottom-width: 2px;
}

/* ---- NEWS PAGE ---- */
/* Header */
#news-page #news-header {
	margin-bottom: 10px;
	padding: 0 22px;
	text-align: center;
	font-weight: bold;
}
#news-page #news-header h3 {
	font-size: 180%;
}
#news-page #news-header p {
	margin-bottom: 0;
}

/* Footer */
#news-page #news-footer {
	margin-top: 18px;
}
#news-page #news-footer h3 {
	font-size: 180%;
}

/* News items */
#news-page .news-item .header h3 {
	padding-bottom: 0.6em;
	font-size: 140%;
}
#news-page .news-item .header h3 a {
	line-height: inherit;
}
#news-page .news-item .header p,
#news-page #news-list li p {
	margin: 0;
	color: rgb(60%, 60%, 60%);
}
#news-page .news-item .header .author,
#news-page .news-item .header .date,
#news-page #news-list li .author,
#news-page #news-list li .date {
	color: white;
	font-weight: bold;
}
.IE6 #news-page .news-item .header h3 a,
.IE7 #news-page .news-item .header h3 a {
	/* Friggin' low-hanging letters getting cut off */
	padding-bottom: 4px;
}
.IE6 #news-page .news-item .header p,
.IE7 #news-page .news-item .header p {
	/* Compensate for above */
	margin-top: -4px;
}
#news-page .news-item .comments-link {
	font-weight: bold;
	font-size: 110%;
}

#news-page .news-item .image-table-cell {
	padding: 0;
}

/* Comments section */
#news-page #no-comments {
	color: rgb(50%, 50%, 50%);
}

/* List mode */
#news-page #news-list #no-items {
	margin: 0 0 12px;
	font-size: 130%;
	color: rgb(60%, 60%, 60%);
}

/* Archive index */
#news-page .archive-index {
	font-size: 110%;
	font-weight: bold;
}
#news-page .archive-index li.unavailable {
	color: rgb(40%, 40%, 40%);
}
#news-page .archive-index .years {
	margin-top: 1.5em;
}
#news-page .archive-index .months {
	font-size: 110%;
}
#news-page .archive-index .months li {
	-moz-border-radius: 0.35em;
	-webkit-border-radius: 0.35em;
	border-radius: 0.35em;
	background-color: rgb(15%, 15%, 15%);
}
.IE6 #news-page .archive-index .months li.current,
.IE6 #news-page .archive-index .months li.unavailable,
.IE7 #news-page .archive-index .months li.current,
.IE7 #news-page .archive-index .months li.unavailable {
	/* Prevents IE from cutting off the low-hanging letters (g, p, q, etc.) */
	padding-bottom: 0.2em;
	padding-top: 0.3em;
}
#news-page .archive-index .months li.current {
	color: #f0b43f;
	background-color: rgb(20%, 20%, 20%);
}
#news-page .archive-index .months li.unavailable {
	background-color: transparent;
}
#news-page .archive-index .months a {
	display: inline;
/*	border-bottom: 0;*/
}
#news-page #archive-index-top {
	border-bottom: 2px solid #3e331e;
}
#news-page #archive-index-bottom {
	border-top: 2px solid #3e331e;
}

/* ---- PROJECTS PAGE ---- */
/* -- Project header: logo, tagline -- */
#projects-page #project-tagline {
	color: rgb(80%, 80%, 80%);
}
/* -- Projects list -- */
#projects-page #projects-list {
/*	background-color: rgb(12%, 12%, 12%);*/
	background-color: rgb(18%, 18%, 18%);
}
#projects-page #projects-list-heading {
	color: rgb(80%, 80%, 80%); /* Differentiate from links */
	background-color: rgb(16%, 16%, 16%);
/*	border-bottom: 2px solid #3e331e;*/
}
/* -- Images -- */
#projects-page #section-images ul {
	width: 696px; /* (100+(8*2))*6 */
}
#projects-page #section-images li {
	padding: 0;
}
.IE6 #projects-page #section-images ul {
	/* Fixes odd problem with items breaking out of list until hovered */
	position: relative;
}


/*
-------------------------------------------------------------------------------
	Settings
-------------------------------------------------------------------------------
*/
#settings {
	position: absolute;
/*	position: fixed;*/
	top: 0;
	right: 0;
	z-index: 2; /* On top of page title but below nav */
	padding: 12px;
}
#settings.wrapped {
	padding: 0 0 30px 30px;
	overflow: hidden;
}
#settings-wrapper {
	padding: 42px 42px 12px 12px; /* +30px on top and right */
	margin: -30px -30px 0 0;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background-color: rgba(0, 0, 0, 0.55);
	-moz-box-shadow: -2px 2px 30px black;
	-webkit-box-shadow: -2px 2px 30px black;
	box-shadow: -2px 2px 30px black;
}
#settings h3 {
	position: absolute;
	left: -999em;
}

#theme-form {
	margin-bottom: 1.5em;
}
#theme-form .buttons {
	margin-top: 0.5em;
	text-align: right;
}

#settings .link-container {
	font-size: 95%;
	margin-top: 1em;
	text-align: right;
}
/* Settings on/off pseudo-links */
#settings .title-link-on .on-text,
#settings .title-link-off .off-text,
#settings .sound-link-on .on-text,
#settings .sound-link-off .off-text {
	border-top: 0.11em solid white;
}
.IE7 #settings .title-link,
.IE7 #settings .sound-link {
	padding-top: 0.2em;
}


/*
-------------------------------------------------------------------------------
	Image Preloader
-------------------------------------------------------------------------------
*/
#image-preloader {
}


/*
-------------------------------------------------------------------------------
	Tooltips
-------------------------------------------------------------------------------
*/
.tooltip-content {
	border: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	/* IE requires this ass-backwards order so it doesn't end up without a colour. */
	background-color: rgba(90%, 90%, 90%, 0.85) !important;
	background-color: rgb(77%, 77%, 77%); /* About equal to 90% * 0.85 (= 76.5) */
}
.tooltip-content {
	color: black;
}


/*
-------------------------------------------------------------------------------
	Shadowbox
-------------------------------------------------------------------------------
*/
#sb-wrapper-inner {
	padding: 5px;
}
#sb-wrapper-inner,
#sb-custom-effect-container {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#sb-custom-effect-container {
	-moz-box-shadow: 0 3px 10px black;
	-webkit-box-shadow: 0 3px 10px black;
	box-shadow: 0 3px 10px black;
}
#sb-wrapper-inner,
#sb-body, /* Giving sb-body transparent bg seems to kill performance in Gecko /sadface */
#sb-loading {
	background-color: rgb(10%, 10%, 10%);
}
#sb-player {
	/* Doesn't work in Gecko on <img> elements as of 1.9.1 */
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
#sb-custom-nav-next,
#sb-custom-nav-previous {
	border-bottom: 0;
}

#sb-title-inner {
	padding-left: 6px;
	color: rgb(70%, 70%, 70%);
}

#sb-custom-close {
	border-bottom: 0;
	right: 4px;
}
#sb-custom-close .close-icon {
	opacity: 0.3; /* See styles_ie.css as well */
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; /* IE8 */
}

#sb-counter {
	padding-left: 6px;
}