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

	index.css
	* styles for the site index and -related pages

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


html {
	font: 17px/1.1em Verdana, Arial, Helvetica, sans-serif !important;
}
/* hide below from killing Mac IE5 */
/* \*/
html { overflow: hidden; }
/* */
* html {
	font-size: 75%; /* WinIE default font-size 16px * .75 = 12px */
}
body {
	background-color: #aaa;
}
h1, h2, h3, h4, h5, h6 {
	margin: .25em 0 .25em 0;
	font-family: Minion, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", Georgia, Palatino, serif;
}
h1, h2, h3 {
	text-shadow: #fff 0 -2px 7px, #d82 -2px 2px 7px, #d82 2px 2px 7px;
}
h1 {
	position: relative;
	height: 40px;
	margin: 0;
	padding: 8px;
	font-size: 2em;
	font-family: Revue, Revue Std, Revue BT, Renfrew, Review, Quorum Medium, Palatino Black, Optima ExtraBlack, Novarese Ultra, Minister Black, Hobo, Minion Black, MetaPlusBlack-Roman, Cooper Black, Aachen, Times ExtraBold, Tiepolo Black, Syntax UltraBlack, Strayhorn MT ExtraBold, Stone Serif Bold, Slimbach Black, Shannon ExtraBold, Serpentine Medium, Serif Gothic Black, Romic Medium, Wilke Black, Weiss ExtraBold, Versailles Black, Veljovic Black, Impact, Stencil, Utopia Black, Usherwood Black, Univers ExtraBlack, Poplar, Helvetica Black, Futura ExtraBold, Arial Black, Mojo, TradeGothic Bold;
	background: #9c9;
}
h1 img {
	height: 32px;
	margin: 0 .5em 0 .25em;
	width: 32px;
}
.h1banner {
	position: absolute;
	right: .75em;
	height: 1.25em;
	background-color: #c60;
	border: 1px solid #063;
	margin-top: .35em;
	padding: 3px;
	font: bold small-caps italic .4em/1.25em Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: .25em;
	color: #fff;/*ee9*/
	text-shadow: none;
}
h4, strong {color: #042;}
#main td, #main th {/*who*/
	border: none;
	background-color: #444;
	color: #e6ffbf;
}
em { color: #333; }

/* --- Forms styles --- */
fieldset {
	border: none;
}
fieldset div {
	text-align: center;
}
fieldset div p {
	margin-left: auto;
	margin-right: auto;
	text-align: right;
}
#util-col fieldset div p {
	width: 15em; /* increased this 8/12, seems okay */
}
input[type="text"],
input[type="password"],
textarea {
	background-color: #f7f7f7;
	border: 1px solid #ccc;
	border-top-color: #777;
	border-left-color: #777;
}
input, table, textarea, iframe {
	/*also see .drop-shadow-box in common.css */
		-moz-box-shadow: 3px 3px 5px #333;
		-webkit-box-shadow: 3px 3px 5px #333;
		box-shadow: 3px 3px 5px #333;
		/* For IE8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
		/* For IE5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
}
input[type="submit"], 
input[type="reset"], 
input[type="button"], 
.button {
	background-color: #3c6; /* 093 */
	padding: 1px;
	margin: 2px 2px 6px 2px;
	border-color: #6f9 #030 #030 #6f9; /* 3f9 . . 3f9 */
	border-width: 3px;
	border-style: double;
	font-weight: bold;
	color: #ff9; /*#d5ef98;*/
	/* width: 98%; why? this breaks the multi-button admin pages */
}
input[type="button"]:hover, 
input[type="submit"]:hover, 
button:hover, 
.button:hover {
	background-position: 1.1em 58% !important;
	background-color: #093;
	padding: 2px 0 0 2px;
}
input[type="radio"] {
	margin-top: .2em !important;
}
input.pressed {
	background-color: #093;
	border-color: #030 #6f9 #6f9 #030;
}
input:hover.pressed { background-color: #063; }

#registerform { 
	color: #444;
	font-size: 1em;
}
#util-col form {
	background-color: #9c9;
	padding: 0 4px 0 0;
}
#util-col p, #util-col form {
	font-size: .8em;
}




/* ### LAYOUT ### */
#wrapper {
	width: 100%;
	height: 100%;
	margin: 0;
}
#main, #util-col {
	background-color: #343;
	height: 85%;
	margin: .5em;
	padding: 3% .5% .5% .5%;/* this makes the nice dark border */
}
#main {
	/* border: 1px solid #f30; */
	float: left;
	margin-right: 0;
	width: 72%;
}
* html #main { width: 70%; } /* IE only */
#main #content {
	background-color: #eaeaea;
	height: 79%;
	overflow: auto;
	padding: .5em;
}
#util-col {
	float: right;
	margin-left: 0;
	text-align: center;
	width: 22.5%;
}
#util-col h2 {
	color: #063;
	font-size:1.35em;
	font-style: italic;
	margin: 0;
}
#return-to-top {
	/*position: absolute;
	bottom: 48px;
	left: 22px;
	bottom: 3em;
	left: 1.25em;*/
	padding-top: 4px;
}
#footer {
	background: #aaa;
	bottom: 4px;
	color: #444;
	font-family: "League-Gothic", Courier New, Courier, monospace;
	font-size: .8em;
	left: 26%;
	position: absolute;
	text-align: center;
	width: 48%;
}
#footer a {
	color: #eee;
}

.tools {
	background-color: #000;
	border: 2px solid #900;
	border-top: 8px solid #900;
	font-size: 0.7em;
	margin: 0 0 .25em 0;
	padding: 2px;
}
.people {
	background-color: #000;
	border: 1px solid #777;
	color: #ccc;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	/* line-height: 14px; */
	margin: 5px 5px 5px 0px;
	padding: 3px 3px 5px 7px;
}


.legal {
	color: #999;
	font-size: .8em;
	line-height: .8em;
}
.descriptive {
	font-size: .8em;
	line-height: .9em;
}





ul.tight li {
	margin: 0 0 0 1em;
}
#util-col ul {
	border-bottom: 8px solid #c60;
	margin: 0;
}
#util-col li {
	list-style-type: none;
	margin: 0;
}
li h6 { margin-bottom: 0; margin-top:0; }
li p, ul.double li, ol.double li { margin-bottom: .75em; } /* double-spaced lists */

h4.jumplinks {
	background: #e3e3e3;
	padding: .25em;
}
ul.jumplinks, ol.jumplinks, div.jumplinks {
	background: #d4d4d4 url(../img/on-this-page.gif) no-repeat 95% 50%;
	border-top: 2px solid #063;
	border-bottom: .75em solid #ccc;
	padding: .4em;
	margin-bottom: 1.25em;
	margin-left: 0;
	color: #063;
	font-size: .8em;
}
.jumplinks h3 {
	text-shadow: none;
}
.jumplinks h3 a {
	display: block;
}
.jumplinks li {
	color:#000;
	margin-left: 1.5em;
	list-style-type: none;
	margin: 0;
}
.jumplinks ol li { margin-left: 2em; }
dl.aligned:after { /* not working, use BR.clear */
	clear: left;
}
dl.aligned dt {
	clear: left;
	float: left;
	margin-right: 1.25em;
	text-align: right;
	vertical-align: middle;
	width: 20%;
}
dl.aligned dd {
	float: left;
	text-align: left;
	vertical-align: middle;
	width: 70%;
}


/*** anchor links styles ***/
a[rel~=external]:after,
[href^="http://"]:not([href*="AreaBeyond.com"]):not([href*="AreaBeyond.com"]):not([href*="SocialContact.com"]):not([href*="ChatSector.com"]):not([href*="BeyondoZone.com"]):not([href*="NoisyCafe.com"]):after {
	color: #c60;
	/*
	content: url(data:image/png;base64,R0lGODlhCQAMAMQAAPr7/Cpdi6q/0X2duURxmjRlkfz9/vz8/TVlkae8z4+qwoWivTlplDVmkvv8/Up1nUVymvn6/LrL2i1gjStejKS6zkNwmUFvmD5slkJwmbjJ2DZnkqm90Cdbiv///wAAACH5BAEAAB4ALAAAAAAJAAwAAAU6oCeOY7R0aNoByWURQUoOMTpqD0p1Ird1hEGGJ/gVJB5Ip9gpcESYDqOD4BxEFcWkwTGMHACSeDwKAQA7);
	padding-left: 2px;
	content: "\00A0\8657\00A0"; how to get to show for other browsers? 
	content: "\2x66";
	content: "\066a";
	content: "\219d";
	content: "\21d7";
	content: "\2fff";
	content: "\00A0\2197\00A0";  NE arrow 
	content: "\279A";  heavy NE arrow, can't find Mac font 
	content: "\00a0\fffc\00a0"; |obj| 
	*/
	content: "\21d7";
	font-family: Tahoma, "Arial Unicode MS", "Arial Black", Arial, "Lucida Sans", "Microsoft Sans Serif", sans-serif;
	font-size: 1.35em;
	font-weight: bold;
}
a[rel~=email]:before,
a[rel~=comments]:before,
a[href^="mailto:"]:before {
	color: #c60;
	content: "\2709\0020";
	font-size: 1.3em;
}
a[rel~="nofollow"]:after {
	content: "\2620";
	color: #933;
	font-size: x-small;
}
a[rel~="tag"]:after {
	content: url(http://areabeyond.com/favicon.ico);
}
:link[hreflang]:not([hreflang|=en]):after {
	content: " [" attr(hreflang) "]";
	font-size: xx-small;
	font-weight: 100;
	vertical-align: super;
}
a:link {
	color: #c60;
	text-decoration: underline;
}
a.plain, .plain a {
	text-decoration: none;
}
h1 a {  /* major header - override visited color, etc.)*/
	color: #c60 !important;
	text-decoration: none !important;
}
.jumplinks li a {
	padding-left: 1em;
	background: transparent url(../img/nav-arrow-open.gif) no-repeat 0 .08em;
	display: block;
}
#util-col a#current	{ background-color: #fc6; color: #063; }
a.guest		{ background: transparent url(../img/tiny/rabbit.png) no-repeat 0 0.08em; padding-left: 1.25em; }
.register	{ background: transparent url(../img/tiny/capsule.gif) no-repeat 0 0.08em; padding-left: 1.5em; }
.who		{ background: transparent url(../img/tiny/owl.png) no-repeat 0 0.08em; padding-left: 1.5em; }
.about		{ background: transparent url(../img/tiny/temple.gif) no-repeat 0 0.08em; padding-left: 1.25em; }
.commands	{ background: transparent url(../img/tiny/gear.gif) no-repeat 0 0.07em; padding-left: 1.25em; }
.gameplay	{ background: transparent url(../img/tiny/joystick.gif) no-repeat 0 0.08em; padding-left: 1.5em; }
.faq		{ background: transparent url(../img/tiny/fire.gif) no-repeat 0 0.08em; padding-left: 1.5em; }
.news		{ background: transparent url(../img/tiny/document.gif) no-repeat 0 0.08em; padding-left: 1.5em; }
.contact	{ background: transparent url(../img/tiny/contact.gif) no-repeat 0 0.08em; padding-left: 1.25em; }
.admin		{ background: transparent url(../img/tiny/wizard.gif) no-repeat 0 0.08em; padding-left: 1.25em; }
.login		{ background: transparent url(../img/tiny/toadstool.png) no-repeat 0 0.08em; padding-left: 1.25em; }
.warning	{ background: transparent url(../img/tiny/triforce.gif) no-repeat 0 0.08em; padding-left: 1.25em; }/*triforce or alert?*/
.play		{ background: transparent url(../img/tiny/sword.gif) no-repeat 0 0.08em; padding-left: 1.25em; }
.shoot		{ background: transparent url(../img/tiny/arrow.gif) no-repeat 0 0.08em; padding-left: 1.25em; }
.up			{ background: transparent url(../img/tiny/arrow-up.png) no-repeat 0 0.08em; padding-left: 1.25em; }
h2.guest, h2.register, h2.who, h2.about, h2.commands, h2.gameplay, h2.faq, h2.news, h2.contact, h2.admin, h2.warning {
	background-position: 0 .35em !important;
	padding-left: 1em;
}
.legal .contact { padding-left: 1.35em; }
input.play, input.shoot {/*might make these defaults for INPUT and override for .button and such where repeats might be wanted*/
	/* background-image:url(../img/tiny/arrow.gif);*/
	background-position: 1em 50%;
	background-repeat: no-repeat;
}

#util-col a {
	background-color: #ee9;
	background-position: .5em 50%;
	background-repeat: no-repeat;
	border-bottom: 1px solid #063;
	border-top: 1px solid #cfc;
	display: block;
	line-height: 1.05em;
	padding: 3px 3px 6px 3px;
	text-decoration: none;
}
#util-col a:hover {
	background-position: .56em 60%;
	border-bottom: 1px solid #cfc;
	border-top: 1px solid #063;
	padding: 4px 2px 5px 4px;/*shift 1 over and 1 down*/
	text-decoration: underline !important;
}
.tools a { color: #ddd; }

a:visited {
	color: #da0;
	text-decoration: underline;
}
.jumplinks li a:visited { color: #600; }
.tools a:visited { color: #fff; }
a.button { /* link made to look like a form button. place after :visited. see a.button:hover */
	padding: 1px 4px 2px 4px;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	margin: 2px 2px 6px 2px;
	color: #ff9; /*#d5ef98;*/
}
a:link:hover, #index #util-col a:hover, a:visited:hover {
	text-decoration: none;
	background-color: #9c9;
	color: #063;
}
.tools a:hover { color: #fff; text-decoration: none; }
.jumplinks li a:hover { color: #c60; }
h1 a:hover { color: #ee9 !important; }/*override drop-neon*/
a.button:hover {
	padding: 3px 3px 1px 5px;
	background: #093;
	color: #ff9 !important;
}
a:link:active,
a:visited:active {
	background-color: #9c9;
	color: #fff;
	text-decoration: none;
}
.tools a:active { color: #c60; }


::selection {
	background: #c60; /* Safari */
	color: #fff;
}
::-moz-selection {
	background: #c60; /* Firefox */
	color: #fff;
}