@charset "iso-8859-1";

/*******************************************************************************
* bad_guys_layout.css : Bad Guys - Core Layout w/default color style
* 2012.05.07
* ------------------------------------------------------------------------------
* A Station Eight fan web site template. Named after the Gargoyles comic book
* "Bad Guys" published through SLG. Ask your local comic book shop about it!
*******************************************************************************/

label {
	cursor: pointer;
}
html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}
body {
	background-color: #223;
	color: #fff;
	padding: 0 1em;
	font-family: Calibri, 'Trebuchet MS', Helvetica, Arial, sans-serif;
}
a:link,
a:visited,
a:active {
	color: #ffc;
	text-decoration: underline;
}
a:hover {
	color: #ff0;
	text-decoration: none;
}
i, em { 
	font-style: italic;
}
b, strong {
	font-weight: bold;
}
p {
	margin: 1em 0;
}
ul {
	list-style-type: disc;
	margin-left: 2em;
}
ol {
	list-style-type: decimal;
	margin: 1em 0 1em 3em;
}
div.clear {
	clear: both;
}
.border-top {
	border-top: solid 1px #889;
}
.border-bottom {
	border-bottom: solid 1px #889;
}
.twoColumnSplit {
	width: 100%;
}
.twoColumnSplit .leftSide {
	float: left;
	width: 50%;
}
.twoColumnSplit .rightSide {
	float: left;
	width: 50%;
	margin-right: -1px;
}
.wideOut {
	width: 90%;
}
.twoColumnSplit .wideOut {
	width: 80%;
}
.hide {
	display: none;
}
.dark-background { 
	background-color: #0f0f1f;
}
.subdued-text {
	color: #cbb;
}
.subdued-text a:link,
.subdued-text a:visited {
	color: #eec;	
}
.right-align {
	text-align: right;
}
.bigElement {
	font-size: 120%;
}
.smallElement {
	font-size: 80%;
}
p.error {
	border: solid 5px #900;
	background-color: #600;
	color: #fff;
	padding: 5px;
}
#page-container {
	min-width: 47em;	/* set in EMs so that the tabs don't wrap. */
	max-width: 1024px;
	margin: 0 auto;
}
#preamble {
	padding: 0.5em 12px 4px 12px;
}
#preamble * {
	vertical-align: top;
}
#station-identification {
	margin: 0;
	padding: 0;
	color: #778;
	letter-spacing: 0.4em;
	float: left;
	vertical-align: top;
	line-height: 1em;
	padding-top: 0.5em;
}
#search,
#easy-access {
	float: right;
	font-size: 80%;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	color: #bbc;
}
#search p {
	display: inline;
	margin: 0;
	padding: 0;
}
form.prettyform input.text,
#search input.text {
	background-color: #667;
	color: #fff;
	font-size: inherit;
	border-width: 0;
	vertical-align: bottom;
	padding: 0.25em;
}
form.prettyform input.text:focus,
#search input.text:focus {
	background-color: #889;
}
#easy-access span.fontsize {
	margin-right: 0.5em;
}
#easy-access span.theme-picker input,
#easy-access span.fontsize input {
	width: 1.75em;		/* target width (tw) */
	margin: 0 0 0 0.25em;
}
form.prettyform input.button,
#easy-access span.theme-picker input,
#easy-access span.fontsize input {
	height: 1.75em;			/* same as target width (make a square) */
	line-height: 1.75em;	/* same as target width (vertically centers
							   the text on some browsers) */
	font-size: 1em;
	color: #778;
	background-color: transparent;
	border: solid 1px #778;
	padding: 0;
	cursor: pointer;
}
#easy-access span.fontsize span.smallElement,
#easy-access span.fontsize span.bigElement {
	font-size: 1em;
}
#easy-access span.fontsize span.smallElement input {
	font-size: 0.75em;
	width: 2.33em;		/* <target width> * (1/<font-size>) */
	height: 2.33em;
	line-height: 2.33em;
}
#easy-access span.fontsize span.bigElement input { 
	font-size: 1.25em;
	width: 1.4em;
	height: 1.4em;
	line-height: 1.4em;
}
form.prettyform input.button:hover,
#easy-access span.fontsize input:hover {
	background-color: #334;
	border-color: #bbc;
	color: #bbc;
}
#easy-access .music input {
	vertical-align: top;
}
#easy-access .music input:hover {
	margin: -1px;
	border: dotted 1px #99a;
}
#easy-access span.theme-picker input {
	width: 1em;
	border: none;
	margin-left: 0.1em;
}
#easy-access span.theme-picker input.theme-default {
	background-color: #778;
}
#easy-access span.theme-picker input.theme-brooklyn {
	background-color: #601;
}
#easy-access span.theme-picker input.theme-broadway {
	background-color: #065;
}
#easy-access span.theme-picker input.theme-goliath {
	background-color: #86a;
}
#page-border {
	background-color: #445;
	padding: 10px;
}
#masthead {
	margin: 0;
	padding: 15px 25px 35px 25px;
	font-size: 1em;
	line-height: 1em;
	border: solid 1px #000;
	background-image: url(/gargoyles/images/mosaics/gargoyles.jpg);
	background-repeat: no-repeat;
	background-position: 100% 0;
	position: relative;
}
#masthead-highlight {
	background-image: url(/gargoyles/images/opacity-half.png);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
#masthead-highlight p {
	margin: 0;
	padding: 5px 10px;
	text-align: left;
	color: #ddd;
}
#masthead-highlight p a:link,
#masthead-highlight p a:visited,
#masthead-highlight p a:active {
	color: #fc6;
}
#masthead-highlight p a:hover {
	color: #ff0;
}
#phoenix-gate {
	display: block;
	width: 50px;
	height: 41px;
	position: absolute;
	right: 3px;
	bottom: 4px;
	margin: 0;
	padding: 0;
}
#phoenix-gate img {
	border: none;
	padding: 5px;
}
#phoenix-gate img:hover {
	padding: 4px;
	border: dotted 1px #bbc;
}
* html #phoenix-gate {
	top: 0;
	right: 8px;
}
#site-menu {
	margin-top: 10px;
	padding: 0;
}
#site-menu li {
	background-color: #223;
	margin: 0 5px;
}
#site-menu li a {
	border-width: 1px 1px 0 1px;
	border-color: #000;
	padding: 5px;
	line-height: 1em;
	color: #ccd;
}
#site-menu li a:hover {
	background-color: #334;
	margin-bottom: -1px;
	padding-bottom: 6px;
	color: #fff;
	text-decoration: underline;
}
#site-menu > li:hover > a/* */  {
/* must keep this selector separate or IE6 will get very angry */
	background-color: #334;
	margin-bottom: -1px;
	padding-bottom: 6px;
	color: #fff;
	text-decoration: underline;	
}
#site-menu li.current-page > a/* */ {
	background-color: #334;
	margin-bottom: -1px;
	padding-bottom: 6px;
	color: #fc0;
	font-weight: bold;
}
#site-menu li ul {
	border-top: 0;
	margin-top: 0;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 10px;
	width: 12em;
	background: transparent url(/gargoyles/images/opacity-half.png) no-repeat 10px 10px;
}
#site-menu li ul.rMenu-dRight {
	right: 0;	/* setting the left property here will screw
			   up IE6 for some reason */
	margin: 0 -10px 0 0;
	width: 14em;
}
#site-menu li ul li {
	margin-left: 0;
	margin-right: 0;
}
#site-menu li ul li a {
	color: #ccd;
	background-color: #223;
	border-width: 1px;
	margin-bottom: -1px;
	padding: 7px 5px;
	border-color: #445;
}
#site-menu li ul li a:hover {
	color: #fff;
	background-color: #445;
	padding-bottom: 7px;
}
#page-body {
	background-color: #334;
	padding-right: 230px;
	border: solid 1px #000;
	padding-top: 10px;
}
#page-body div.left-column {
	float: left;
	width: 100%;
}
#page-body div.right-column {
	font-family: calibri, verdana, sans-serif;
	float: left;
	width: 230px;
	margin-right: -230px;
}
#page-body div.inside-column {
	padding: 1px 10px;
}
#page-body div.left-column div.inside-column {
	border-right: solid 1px #556;
}
#page-body div.right-column div.inside-column {
	border-left: solid 1px #556;
	margin-left: -1px;
}
#page-body div.left-column h2 {
	margin: 0;
	padding: 0.75em 0 0 10px;
	font-size: 3em;
	line-height: 0.67em;
	background-color: #0f0f1f;
	color: #334;
	text-transform: uppercase;
	font-weight: bold;
}
#page-body div.left-column div.panel {
	margin: 1em 0 0 0;
	padding: 10px;
	border-top: solid 1px #445;
	border-bottom: solid 1px #112;
	background-color: #223;
	color: #eef;
	line-height: 1.2em;
}
#page-body div.left-column div.panel h3 {
	margin: 0 -10px;
	padding: 0 10px;
	line-height: 1em;
	font-size: 1.4em;
	font-weight: normal;
	color: #fc0;
	text-transform: uppercase;
}
#page-body div.left-column div.panel h3 a:link,
#page-body div.left-column div.panel h3 a:visited {
	color: #fc0;
}
#page-body div.left-column div.panel h3 a:hover,
#page-body div.left-column div.panel h3 span a:link,
#page-body div.left-column div.panel h3 span a:visited,
#page-body div.left-column div.panel h3 span a:hover {
	color: #ffc;
}
#page-body div.left-column div.panel h3 span {
	font-size: 0.7em;
	color: #ffc;
}
#page-body div.left-column div.panel h3.left {
	float: left;
}
#page-body div.left-column div.panel h3.right {
	float: right;
}
#page-body div.left-column div.panel p {
	margin-top: 0.5em;
	margin-bottom: 0;
}
#page-body div.right-column div.panel {
	padding: 0 10px 10px 10px;
	margin: 1em 0 0 0;
	background-color: #282838;
	color: #dde;
	border-bottom: solid 1px #223;
	font-size: 80%;
	line-height: 1.2em;
}
#page-body div.right-column div.panel:first-child {
	margin-top: 0;
}
#page-body div.right-column div.panel p {
	margin: 10px 0 0 0;
}
#page-body div.right-column div.panel a img {
	border: solid 1px #000;
	margin: 0 -1px;
}
#page-body div.right-column div.panel a:hover img {
	border-color: #fc0;
}
#page-body div.right-column div.panel h2 {
	margin: -1px -11px 0 -11px;
	padding: 0;
	font-size: 1.3em;
	font-weight: normal;
	background-color: #334;
	color: #fc0;
	border-bottom: solid 1px #445;
	line-height: 1em;
	text-transform: uppercase;
}
#page-body div.right-column div.panel ul.menu {
	font-size: 1.2em;
	border-top: dotted 1px #667;
	margin-top: 10px;
	margin-left: 0;
	list-style: none;
}
#page-body div.right-column div.panel ul.menu li {
	padding: 4px 0;
	border-bottom: dotted 1px #667;
}
#page-body div.right-column div.panel ul.menu li a:link,
#page-body div.right-column div.panel ul.menu li a:visited,
#page-body div.right-column div.panel ul.menu li a:active {
	text-decoration: none;
}
#page-body div.right-column div.panel ul.menu li a:hover {
	text-decoration: underline;
}
#page-body div.right-column div.panel ul.menu li img {
	vertical-align: middle;
}
#page-bottom {
	padding-bottom: 10px;	/* using padding-top bugs in IE7 */
}
#footer {
	font-family: calibri, verdana, sans-serif;
	padding: 0 10px;
	font-size: smaller;
	color: #99a;
	padding-bottom: 1px;	/* stop margin collapse */
	line-height: 1.2em;
}
#comment-data span.ip {
        color: #112;
        cursor: default;
}
#comment-data span.curse a:link,
#comment-data span.curse a:visited,
#comment-data span.curse a:active,
#comment-data span.curse {
        color: #112; /* same as #comment-data background color */
        border-bottom: dashed 1px #ccc;
}
#comment-data span.spoiler a:link,
#comment-data span.spoiler a:visited,
#comment-data span.spoiler a:active,
#comment-data span.spoiler {
        color: #112; /* same as #comment-data background color */
        border-bottom: dotted 1px #c00;
}
#comment-data span.spoiler span.spwarning {
        color: #ccc;
        border-bottom: solid 1px #112; /* same as #comment-data background color */
}

/*******************************************************************************
* PAGE RESIZE LOGIC
* -----
* For resizing the web site layout in a controlled way based on the available 
* width of the viewport
*/
@media screen and ( min-width: 1400px ) {
	#page-container {
		min-width: 1300px;
	}
	#masthead {
                background-size: cover;
	}
}
@media screen and ( min-width: 1800px ) {
	#page-container {
		min-width: 1600px;
	}
}

/*******************************************************************************
* HACKS
* -----
* An attempt to get this iron out kinks in various web browser layout engines
* that would otherwise make this layout unusable. Typical targets for hacks
* are older web browsers, especially Internet Explorer (IE).
* 
* REFERENCES:
*	http://www.satzansatz.de/cssd/onhavinglayout.html
*	http://www.communis.co.uk/dithered/css_filters/css_only/index.html
*	http://wellstyled.com/css-underscore-hack.html
*	http://www.positioniseverything.net/explorer.html
*/

div.clear:after {	/* force clearing in old netscape/firefox */
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
#page-body div.left-column {
	margin-right: -1px;	/* hook left and right columns together */
}
#page-body div.right-column {
	margin-left: 1px;	/* the hook assures that both are cleared
				   under old netscape/firefox browsers */
}

#page-body div.left-column,
#page-body div.right-column {
	position: relative;	/* so links are clickable in safari */
}

*:first-child+html div.panel
{
	min-width: 0;		/* swiss army CSS #1 for IE7 render bugs */
}
*:first-child+html #site-menu 
{
	position: relative;	/* swiss army CSS #2 for IE7 render bugs. always try
				   #1 first as it's "less destructive". */
	z-index: 999;
}

* html #page-container {
	_width: 1002px;		/* control width until javascript can kick in */
}
* html #page-body,
* html #page-body div.inside-column
{
	height: 0.01%;		/* swiss army CSS #1 for IE6 render bugs */
}
* html #preamble,
* html #masthead,
* html #page-body div.left-column div.inside-column h2,
* html div.panel
{
	height: 0.01%;		/* swiss army CSS #1 for IE 5.0 */
	height/**/: auto;	/* undo hack for IE 5.5 and later */
}
* html #page-body div.right-column div.panel,
* html #page-body div.left-column div.inside-column,
* html #page-body div.right-column div.inside-column,
* html #masthead
{ 
	position: relative;	/* swiss army CSS #2 for IE6 render bugs */
}
* html #page-body div.right-column {	/* hide from IE/Mac \*/
	disp\lay: inline;		/* double margins fix - hide from IE5 */
}
* html #site-menu li ul {
	padding-top: 0;			/* IE6 doesn't like padding here */
	border-top: solid 5px #334;	/* so fake it with a border */
}
* html #masthead #logo img {
	display: none;	/* hide the transparent PNG from IE6 and earlier */
}
* html #masthead #logo {
	display: block;	/* make the SPAN #logo become a block */
	height: 100px;	/* set dimensions of the logo */
	width: 272px;
	background-image: url(/gargoyles/images/logo100.gif);	/* for IE/Mac & IE/Win 5.0 */
	background-image/**/: none;				/* for IE/Win 5.5+ */
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo100.png',sizingMethod='scale');
}
* html #page-bottom {
	padding-bottom: 0;
}

/******************************************************************************/