/*
 ***  areabeyond.css - styles for the AreaBeyond main app
*/


html { font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif; }
body {
	background-color: #333;
}
th { font-size: 0.8em; background-color: #666; color: #f99; height: 5px;}
em { color: #999; font-weight: bold; } /*history datestamp*/


/* --- Forms styles --- */
label {
	font-weight: bold;
}
input, option, select, textarea {
	font: 1em Verdana, sans-serif; /* doesn't inherit font correctly */
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
	padding: 0 4px;
	border: 3px double;
	border-color: #ccc #666 #666 #ccc;
	color: #333;
	background: #fff url(../img/button-bg.gif) repeat-x;
	font-weight: bold;
	cursor: pointer;
}
input[type="text"],
input[type="password"] {
	padding: 2px 1px;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	border-color: #666 #ccc #ccc #666;
}
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	border-color: #999 #ccc #ccc #999;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
	background-color: #F2F2F2;
}

option,
textarea {
	padding: 1px;
}
textarea, input { vertical-align: text-top; }


#inputprompt { /* form */
	background-color: #ab0616; /* 333, b00 */
	margin: 0 !important; /* for IE?! */
}
#inputprompt fieldset {
	border: none;
	color: #b4b4b4;
	font-family: Courier New Bold, Courier Bold, Courier New, Courier, monospace, Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 0;
	padding: .12em;
}
.cursor {
	font-size: 1.2em;
	line-height: 1.65em;
	font-family: 'Arial Black' !important;
	font-weight: bold;
	text-decoration: blink; /* no workie */
	vertical-align: bottom;
}
#textprompt { /*input */
	background: #ccc; /* 000 !imp */
	font-size: 9pt;
	font-weight: bold;
	margin-right: .5em;
	margin-top: -.2em; /* helps with reminder vert pos for some reason */
	vertical-align: middle;
	width: 60%;
}
#inputprompt a {
	text-decoration: none; /* (reminder) could skip this, stylistic */
}
#inputprompt input[type="submit"] {
	margin-top: -.28em;
}
#command table, #history table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-left: 7.5em;
}


/* --- Customized lists styles --- */






/* ### LAYOUT ### */

#main-col {
	background: #444 url(../img/preloader-32-red.gif) no-repeat 50% 50%;/*preload the preloader*/
	float: left;
	height: 97%;
	position: relative;
	top: 0;
	width: 74.8%;
}
#displaybar {
	background-color: #666;
	background-image: url(../img/wellsfargo.jpg);
	background-position: 60% 45%;
	color: #ddd;
	font-size: 1.1em;
	font-weight: bold;
	height: 17%;
	overflow: hidden;
}
.transbox {
	margin: .5em;
	height: 3em;
	position: relative;
}
.transbox div {
	position: absolute;
	padding: .35em;
	top: 0;
	left: 0;
	height: 3em;
	width: 100%;
}
.transbox .transparent {
	background-color: #747;
	border: 1px solid #96f;
}
.transbox .border {
	border: 1px solid #96f;
}
#displaybar div#killthis { /* area info, etc. */
	background: #747;
	border: 1px solid #96f;
	float: left;
	margin: .35em 0 0 .25em;
	padding: .25em;
	position: absolute;
}
#displaybar #untrans1 {
	background: none;
	left: 0;/* for IE7 */
}
#displaybar #untrans2 {
	background: none;
	left: 0;/* for IE7 */
	top: 2.25em;
}
#displaybar h3 .bright {
	color: #fc6;
}
#displaybar img {/*avatars*/
	float: right;
}
#skirt {
	position: absolute;
	width: 100%;
	height: 17px;
	background: transparent url(../img/skirt.gif) repeat-x 8px 0 !important;
	border-top: 4px solid #ab0616;
}
body#command { /* for history? IE didn't like applying bg to iframe itself */
	background-color: #333;
	border: 0 none;
}
#main-col #command {
	height: 76%;
	font-family: monospace;
	overflow: auto;
	/*background: #222 url(../img/mars.gif) no-repeat 200px 20px !important;*/
	background: #222 url(../img/newstars-vela.jpg) repeat 200px 0;/* removed !important */
	background-attachment: fixed;
	vertical-align: text-bottom;
	border-left: 3px double #ab0616;
}
#history #main-col #command { overflow: auto; }
#command td { padding: 2px; background-color: #444; color: #e6ffbf; } /* who */
#command iframe {
	width: 100%;
	height: 100%;
	border: none; /* moz */
}
#areabeyond #command .response, #areabeyond #command .line {
	margin: 0 0 0.2em 0;
	padding: 0;
	/* padding: 0px; */
}
#command .line {
	color: #75d075;
}
#command .response {
	/*color: #d0d0d0;*/
	color: #fff;
}
#command ol { margin-left: 2.75em; }
#command li {
	color: #d0d0d0;
}
#command p {
	color: #eee;/* ffc? fff? */
}
#command .brick strong {/*inside who*/
	background: transparent url(../img/nav-arrow-lt-closed.gif) no-repeat 0 0;
	padding-left: 1em;
}
#areabeyond small, #history small {/* ,timestamp */
	color: #9c6;
	font-weight: bold;
}
#areabeyond img, #history img {vertical-align: middle;}
#areabeyond #command td {
	font-size: 0.71em;
}
#conversation em { color: #390; }/*notices.#693*/
/* blockquote - guest note, starter note */
.brightgreen { color: #3f0 !important; }/*welcome name em*/
#informative {
	background: #666 url(../img/lotusroot-tile-66.gif) repeat;
	height: 7%;
	vertical-align: middle;
}
#infobar {
	background: #afafe3 url(../img/keyboard.gif) no-repeat 2px 50%;/* when connected. override classes below */
	border: 1px solid #596f80;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	height: 97%; /* not 100% due to border xx+paddingxx */
	padding-left: 36px;
	vertical-align: middle;
}
.loading { background: #afafe3 url(../img/preloader-32-red.gif) no-repeat 2px 50% !important;/* while loading */ }
.connErr { background: #afafe3 url(../img/connection-error.png) no-repeat 2px 50% !important;/* on connection error */ }
.timeOut { background: #afafe3 url(../img/timeout.png) no-repeat 2px 50% !important;/* on timeout error */ }
#infobar strong {color: #009;}
#infobar a { background-color: #369; }
#infobar a:hover { background-color: #009; }
#footer {
	clear: right;
	height: 3%;
	background-color: #336;
	text-align: center;
}
#footer ul {
	font-size: .87em;
	list-style-type: square;
	margin: 0;
}
#footer li {
	color: #fec;
	display: inline;
	margin: 0 .75em 0 .75em;
}
#footer h4 {
	display: inline;
	margin: 0;
}






#util-col {
	background-color: #779;
	background: #779 url(../img/grd-4px.gif) repeat-x 0px -2700px;
	float: right;
	width: 25%;
	height: 97%;
}
#util-head {
	position: relative;
	border-bottom: 6px solid #ff3;
	padding-bottom: 1.03em;
	margin-bottom: .25em;
}

#util-head h2 {
	position: absolute;
	top: 0;
	left: 0;
	font: 1.5em/normal Minion, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", Georgia, Palatino, serif;
	font-weight: bold;
	display: inline;
	padding: 0 .75em 0 .75em;
	margin: 0 1em 0 0;
	border: .35em solid #336;
	color: #ccf !important;
	border-top: none;
	border-bottom: none;
	z-index:2;
}
#util-head h2.dropshadow {
	position: absolute;
	left: .067em;
	top: .067em;
	color: #c66 !important;
	z-index: 1;
	border-color: #bbb;
}
#util-head h3 {
	float: right;
	color: #eee;
	font-size: .95em;
/*	background: transparent url(../img/gradient1.gif) 50% 50% repeat-x;*/
}
#util-head h5 {
	font-size: .96em;
	text-align: center;
	color: #fff;
}
#sidebar-util {
	background-color: #99c;
	border-bottom: 1px solid #369;
	padding: 4px;
	padding-bottom: .5em; /* change to 1px if no rollup below */
	margin-bottom: .5em; /* ? unless no rollup below? */
}
#sidebar-util h4 {
	color: #fff;
}
.boxhead {
	background-color: #636;
/*	background: transparent url(../img/gradient3.gif);*/
	margin: .5em 0 0 0;
	padding-left: 3px;
	border-bottom: 2px solid #636;
}
.boxhead h3 {
	display: block;
	position: relative;
	color: #ff3;
	font-size: .8em;
	margin: 0;
}
.boxhead a {
	color: #fc6;
}
.rollicon {
	position: absolute;
	right: 0;
	background-color: #c9c;
	margin: 1px;
	width: 13px;
	text-align: center;
}

#util-col .rollicon a {
	color: #000;
	text-decoration: none;
}
#util-col .rollicon a:hover {
	color: #ff3;
}
#util-col .rollup { margin: 4px; } #sidebar-util .rollup { margin: 0; } /* allows rollup in lower area */
#util-col .rollup {
	background: transparent;
}
.boxcontent {
	display: block;
	background-color: #ccf;
	border: 0 solid #636;
	border-width:0 1px;
	height: auto;/* IE7 also liked 12.5% */
}
div#roll-whohere, div#roll-whothere, div#roll-tools {
	overflow: auto;
}
div#roll-whohere {/* Exception to above: scrolls long content. */
	height: 100px !important;
}
div#roll-whohere li p {
	border-top: 1px solid #369;
}
div#roll-whohere li:first-child p {
	background: #eef;
	border-top: none;
}
div#roll-tools {/* Exception to above: fits map height */
	height: 83px !important;
}
div#roll-whothere {/* hmm, fixes weird line */
	height: 3.75em !important;
}
#roll-speech img {/* small emotes */
	height: 16px;
	width: 16px;
}
.boxcontent h1 {font-size: 2.5em; color:#fff;}
.boxcontent h2 {font-size: 2em; color:#06a; border:0;}
.boxcontent h2 {padding-top: 0.5em;}
.boxcontent ul {
	margin: 0;
	margin-left: 1.15em; /* bullet indent */
	font-size: 1.1em; /* bullet size */
}
.boxcontent li {
	margin-bottom: 0;
	margin-bottom: .1em;
	list-style-type: square;
	color: #c03;

}
.boxcontent p {
	margin: 0;
	margin-left: -.5em;
	font-size: .71em;
	line-height: 1.05em;
	letter-spacing: 1px;
}
.boxcontent img { /* smiley emoticons, etc. */
	margin: 0 2px 0 3px;
}
.boxcontent p.inline, .boxcontent ul.inline {
	line-height: .8em;
	font-size: .8em;
	margin: 0;
}
.boxcontent ul.inline li {
	margin-left: 2px;
}

.tools a { color: #ddd; }
.tools a:visited { color: #fff; }
.tools a:hover { color: #fff; text-decoration: none; }
.tools a:active { color: #c60; text-decoration: none; }

.xtop, .xbottom {display: block; background: transparent; font-size: 1px;}
.xb1, .xb2, .xb3, .xb4 {display: block; overflow: hidden;}
.xb1, .xb2, .xb3 {height: 1px;}
.xb2, .xb3, .xb4 {background: #ccf; border-left: 1px solid #636; border-right: 1px solid #636;}
.xb1 {margin: 0 5px; background: #636;}
.xb2 {margin: 0 3px; border-width: 0 2px;}
.xb3 {margin: 0 2px;}
.xb4 {height: 2px; margin: 0 1px;}





#movemap {
	display: inline;
}
#movemap div {
	display: block;
	float: left;
	border: 1px solid #600;
	width: 84px;
	height: 78px;
	margin: .25em 0 0 .25em;
	background: #aaa url(../img/movemap.gif) 0 12px no-repeat;
	text-align: center;
}
#movemap h5 {
	background: #600;
	font-size: 10px;
	color: #fff;
}


.fpo {
	background-image: url(../img/fpo.gif);
	background-position: 50% 50%;
	background-repeat: no-repeat;
}


/* blockquote - guest note, starter note */
div#command blockquote {
	background-color: #f4edda;
	border: 2px solid #444;
	margin: -5em 2em .7em 40em;
	padding: .25em;
	width: 18em; /* why? */
}
div#command blockquote p {
	border: none;/*removing from #command p*/
	color: #000;
	font-family: Script MT, ZapfChancery, SnellRoundhand Script, Spumoni LP, Ruling Script Two, Brush Script, Brush Script MT, Caliban, Freestyle Script, Ashley Script MT, Linoscript, script, cursive, fantasy;
	font-size:1.5em;
	margin: .25em;
	width: 11.5em;
}
div#command blockquote ul {
	font-size: .92em;
	margin-left: 4em;
}
div#command blockquote li {
	color: #000;
}


.timestamp {
	color: #ccc;
}
/*begin notices*/
.debug {
	background: transparent url(../img/error-exclaim.gif) no-repeat 5px 6px;
	border: 5px double #930;
	height: 17em;
	left: 8em;
	padding: .25em .25em 0 3.2em;
	position: absolute;
	top: 23.5%;
	width: 80%;
}
div.debug p { /* same as .error */
	color: #f30;
	font-weight: bold;
}
.debug img {
	position: absolute;
}
.debug img:after {
	clear: right;
}
.transparentNotice {
	background: #ffc;/* * .75 opacity */
	border: 6px double #df6;
	height: 17em;
	left: 8em;
	padding: .25em .25em 0 3.2em;
	position: absolute;
	top: 23.5%;
	width: 80%;
	opacity: 0.75;/* see also IE */
	-moz-box-shadow: 3px 3px 5px #fc6;
	-webkit-box-shadow: 3px 3px 5px #fc6;
	box-shadow: 3px 3px 5px #fc6;
	/* For IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ffcc66')";
	/* For IE5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#ffcc66');
}
div.notice1, div.notice2, div.notice3, div.notice4 {
	border-color: #c3c;
	background: #c9c;
	font-weight: bold;
	height: 12em;
	margin: 2px;
	padding: .35em;
	top: 25%;
}
div.notice1 h2, div.notice2 h2, div.notice3 h2, div.notice4 h2 { color: #c09 !important; margin: 0; }
div.notice1 p, div.notice2 p, div.notice3 p, div.notice4 p { color: #036 !important; }
div.notice1 li, div.notice2 li, div.notice3 li, div.notice4 li { color: #036 !important; }
div.notice1 a, div.notice2 a, div.notice3 a, div.notice4 a { color: #fff !important; }
div.notice1 a:visited, div.notice2 a:visited, div.notice3 a:visited, div.notice4 a:visited { color: #cfc !important; }
div.notice1 a:hover, div.notice2 a:hover, div.notice3 a:hover, div.notice4 a:hover { color: #000; }/* not applying w/o important */
div.notice1 a:active, div.notice2 a:active, div.notice3 a:active, div.notice4 a:active { color: #000; }
div.notice2 {
	background: #ffd9bf;
	border-color: #ffb380 !important;
}
div.notice3 {
	background: #bfe4ff;
	border-color: #80c9ff !important;
}
div.notice4 {
	background: #e6ffbf;
	border-color: #ccff80 !important;
}
div.notice {
	background: #ffff80;
	background-color: #bfffbf;
	border: 1px solid #f30;
	border: 1px solid #008F00; 
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	line-height: 14px;
	line-height: 16px;
	margin: 10px;
	margin: 1px;
	padding: 5px;
	padding: 6px 6px 10px 14px;
	width: 400px;
}
div.notice a { color: #000; }
div.notice a:visited { color: #000; }
div.notice a:hover { color: #000; }
div.notice a:active { color: #000; }
.interstitial {
	background-color: #cfdce6;
	border: 1px solid #596f80;
	/* border: 1px solid #0f0; */
	color: #596F80; 
	/* font-family: monospace; */
	height: 2.75em;
	letter-spacing: 2px;
	margin: 0 1.5em;/*help center on the debug notice*/
	padding: 1em .5em .75em .5em;
	text-align: center;
	text-transform: uppercase;
	top: 45%;
}
/* end notices */

/* utility classes */
.columns {
	float: left;
	/*width: auto;*/
	margin: 4px;
}
.util {
	border: 1px solid #bfbdac;
	background: #d9d7c3; 
	padding: 0px;
	margin: 10px;
}
.descriptive, .error {
	font-weight: bold;
	line-height: 1.25em;
}
.legal {
	font-size: .9em;
	line-height: .9em;
}
.say { color: #e6ff80 }
.shout {
	font-weight: bold;
	color: #fc0;
}
.info { color: #fff; } /* mostly screen output */
.action { color: #80c9ff; } /* emote too */
.divine { color: #ffe500; font-weight: bold; }
.doing { color: #960; }
.entro { color: #f9f69f; }

.role-guest { color: #fff; }
.role-player { color: #906; }/*purple*/
.role-associate { color: #900; }/*crimson*/
.role-citizen { color: #3c0; }/*green*/
.role-scrivener { color: #809fff; }/*blue*/
.role-tester { color: #c00; }/*red*/
.role-leader { color: #ff6; font-weight: bold; }/*gold*/
.role-elder { color: #ede; font-weight: bold; }/*silver*/
.role-moderator { color: #000; }/*black*/
#command .role-moderator { background: #444; font-weight: bold; }
.role-admin { color: #f90; font-weight: bold; }/*orange*/
.idle { color: #666; font-size: .8em; }


/*** anchor links styles ***/
a:link,
a:visited,
a:active {
	color: #a30;
	text-decoration: underline;
}
a.button { /* link made to look like a form button - speech buttons. place after :visited */
	padding: 1px 4px;
	border: 3px double;
	border-color: #ccc #999 #999 #ccc;
	color: #333 !important;
	background: #fff url(../img/button-bg.gif) repeat-x;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}
.boxcontent a.button {
	padding: 0 1px;
	border: 2px solid;
	border-color: #ccc #999 #999 #ccc;
	color: #c60 !important;
}
#movemap a {
	display: inline;
	padding: 1px;
	text-decoration: none;
	font-family: monospace;
	font-size: 12px;
	line-height: 17px;
}
#movemap strong a {
	color: #600;
}
#command a { color: #afafe3; }
a:visited {
	color: #c60;
}
#command a:visited { color: #cfc; }
a:hover {
	background-color: #c60;
	color: #fff !important;
	text-decoration: none;
}
#command a:hover {
	background-color: #066;
}
a.button:hover {
	background: #fc6;
	color: #000 !important;
}
a:active {
	background-color: #600;
	color: #ccc !important;
	text-decoration: none;
	text-decoration: underline;
}




/*placeholder for chat stylezz*/
#connection span {
	color: #9c9;
}
#conversation p {
	border-bottom: 1px dotted #555;
	margin: 0;
	padding: .25em 0 .25em 0;
}
#conversation span.label {
	color: white;
	background: #c9c;
	font-weight: bold;
	margin: 0 5px 0 0;
	padding: 2px 6px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
#tempfpo {
	left: 45%;
	position: absolute;
	top: 3%;
}


.connected {
	color: #ccff80;
}