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

	common.css
	* Common shared styles preferred by GPB. Load reset.css first.
	* used both on the index page and on the AreaBeyond game page
	* portions adopted from Blueprint-css, and YUI base

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

* {
	padding: 0;
	margin: 0;
}
html { font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif; }
html, body { height: 100%; }
body, div, td, p, ul, ol, input {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 1.0em;
	color: #000;
}
p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form {
	color: #063;
	line-height: 1.15em;
	margin: 0 0 0.5em 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	color: #c60;
	font-weight: bold;
}
h1, h2, h3 { margin: 1em 0 0 0; }/* top margin based on font size */
h2 {font-size: 1.5em;}
h3 {font-size: 1.25em; margin: 0;}/* 1.35? */
h4 {font-size: 1.2em; margin: 0;}
h5 {font-size: 1.05em;}/* 1.08? */
h6 {font-size: 1.0em;}
small { font-size: .8em; }
table {
	padding: 0;
	margin: 1px;
	border-spacing: 1px;
}
blockquote, pre, th, td, div {
	line-height: 1.05em;/*questionable - turning off 1.1em from reset.css*/
}
tr.brick td, td.brick { background: #600 !important; }
.brick strong {/*outside who. see areabeyond.css for inside who*/
	background: transparent url(../img/nav-arrow-lt-closed.gif) no-repeat 0 .25em;
	color: #0b0;
	padding-left: .75em;
}
th {/*hmm, for AB only?*/
	background-color: #666;
	color: #f99;
	font-size: 0.8em;
}
hr { height: 1px; color: #fff; }
textarea, input { vertical-align: text-top; }

/* --- Lists styles --- */
blockquote, ul, ol, dl {
	margin: 0 0 1em 3em;
}
ol { margin-left: 1.75em; }
ul { margin-left: 1.25em; }
ol li {
	list-style: decimal outside;/* giving OL's LIs generated numbers */
}
ul li {
	list-style: disc outside;/* giving UL's LIs generated disc markers */
}
ul.square li {
	list-style: square inside;/* whatever */
}
dl {margin-left: 0;}
dt {
	font-weight: bold;
}
dd { margin-left: .5em; }

li ul, li ol { margin-left: 2.5em; }/* nested listed */



/*** Utility classes ***/
.clear {/* clearing element */
	clear: both;
	height: 1%;
	overflow: hidden;
}
.clearfix:after, .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
.clearfix, .container { display: block; }
.strikethrough, 
a.strikethrough {
	text-decoration: line-through;
}
.debug {
	background: #ffc url(../img/error-exclaim.gif) no-repeat 5px 6px;
	border: 1px solid #930;
	left: 25%;
	padding: 0 .25em 0 3.2em;
	position: absolute;
	top: 25%;
	width: 50%;
}
.error {
	color: #f00;
	font-weight: bold;
	line-height: 1.25em;
}
.nowrap { white-space: nowrap; }
.brick { color: #600; }
.green { color: #090; }
.white { color: #fff !important; }
.grey { color: #878 !important; }
.ccc { background-color: #ccc; }
.dark { background-color: #777; }
.darkest { background-color: #111; }
.divtop { border-top: 1px solid #666; }

/* common fonts */
pre,
.mono {
	font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Monotype.com", "OCR A Extended", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Vera, Courier, Fixed, Terminal, "VT 100", monospace;
}
.script,
.cursive,
.decorative,
.fantasy {
	font-family: "Apple Chancery", "Zapf Chancery", "Lucida Calligraphy", "Lucida Handwriting", "Monotype Corsiva", "Brush Script", "Brush Script MT", "Comic Sans MS", cursive
}
.times {
	Minion, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", Georgia, Palatino, serif;
}
.georgia {
	Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}
.garamond {
	font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 
}
.arial {
	font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.verdana {
	font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
}
.trebuchet {
	font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}
.impact {
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
}
span.amp {
	font-family: Constantia, Palatino Linotype, Palatino, Baskerville, "Book Antiqua", serif;
	font-style: italic;
}
div.padded, p.padded { padding: .75em; }
.padsmall { padding: .25em; }
.indent { margin-left: 2em !important; }
.jumbo {
	font-size: 1.3em;
	color: #063;
}
.bold, .header {
	font-weight: bold;
}
.unbold {
	font-weight: normal;
}
.drop-neon-orange, .drop-neon-orange a {
	color: #fff !important;
	text-shadow: 0 0 10px #c60, 0 0 20px #fc6, 0 0 30px #fc6, 0 0 40px #c60, 0 0 70px #c60, 0 0 80px #fc6, 0 0 100px #fc6, 0 0 150px #fc6;
}
.drop-retro, .drop-retro a {
	text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
}
.drop-inset, .drop-inset a {
	text-shadow: 0px 2px 3px #666;
}
.drop-anaglyphic, .drop-anaglyphic a {
	text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
}
.drop-fire, .drop-fire a {
	text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}
.drop-boardgame, .drop-boardgame a {
	text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
}
.drop-shadow-box {
	-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');
}

.inline, ul.inline li, ol.inline li { display: inline; }
dl.inline:after { /* not working?, use BR.clear */
	clear: left;
}
dl.inline dt, dl.inline dd { float: left; width: 90%; }
dl.inline dt { clear: left; text-align: right; width: 5%; }
dt.header, dd.header { margin-top: 1.25em; }
.tight { margin: .1em 0 .1em 0; }
.gap { margin-right: .5em; }
.spread { margin-right: 4em; }
.jumbo {
	font-size: 1.3em;
	color: #063;
}
.border { border: .1em solid #666; }
a.border,
a img.border {
	border: .1em solid #c60;
}
.underline { text-decoration: underline; }
a span.underline { text-decoration: none; border-bottom: 1px solid #063; }

.float-left { float: left; margin: 0 .5em .5em 0; }	/* float styles for image thumbnails, etc. */
.float-right { float: right; margin: 0 0 .5em .5em; }
.left, .left th { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.middle { vertical-align: middle; display: inline-block; } /* good for IMG */
.box { 
	border: 2px solid #aaa;
	border-left: none;
	background-color: #fed;
}
.transparent {
	opacity: 0.7;/* see also IE */
}
.columns { /* default 6 colums */
	float: left;
	width: 13.7%;
	font-size: .87em;
	margin-right: 3px;
}
.columns .legal {
	font-size: .9em;
}
.col-5 { width: 18.7%; } .col-80 { width: 80%; }/* can do 5 equal columns. Or, can do 1/5 + 4/5 */
.col-4 { width: 24.7%; } .col-75 { width: 75%; }/* 4 equal, or 1/4 + 3/4 */
.col-3 { width: 32.7%; } .col-66 { width: 66%; }/* 3 equal, or 1/3 + 2/3 */
.col-2 { width: 48.7%; }/* 2 equal columns */
.col-83 { width: 83%; }/* 5/6, add to default */
.columns h3 {
	background-color: #063;
	color: #ccc;
	font-size: .9em;
	margin: 0;
	/*min-height: 2.25em;*/
}
.columns h3 a {
	padding: 2px 0 4px 12px;
}
.columns ul, .columns li {
	margin: 0;
	list-style-position: inside;
	/*list-style-type: none;*/
}
/*.columns span {
	line-height: .78em;
	display: block;
}*/
.row1 { background-color: #ede; }
.hide { display: none; }
.offscreen {
	position: absolute;
	left: -1000px;
}
.it { display: inline-table; }

/* Fixed widths - good for buttons */
.w2 { width: 2em !important; }
.w3 { width: 3em !important; }
.w4 { width: 4em !important; }
.w5 { width: 5em !important; }
.w7 { width: 7em !important; }
.w10 { width: 10em !important; }
.w15 { width: 15em !important; }
.w20 { width: 20em !important; }
.w25 { width: 25em !important; }
.w30 { width: 30em !important; }
/* Percentage widths - good for text blocks like dl.inline dt and dd */
.w10p { width: 10% !important; }
.w20p { width: 20% !important; }
.w30p { width: 30% !important; }
.w40p { width: 40% !important; }
.w50p { width: 50% !important; }
.w60p { width: 60% !important; }
.w70p { width: 70% !important; }
.w80p { width: 80% !important; }
.w90p { width: 90% !important; }
.w98p { width: 98% !important; }
.w100p { width: 100% !important; }



/* --------------------------------------------------------------
	* mostly from YUI base.css below here.  Need to verify these are okay.
-------------------------------------------------------------- */

h1 {
	/*font-size: 138.5%; 18px via YUI Fonts CSS foundation */
}
h2 {
	/*font-size: 123.1%; 16px via YUI Fonts CSS foundation */
}
h3 {
	/*font-size: 108%; 14px via YUI Fonts CSS foundation */
}
abbr, acronym {
	/* indicating to users that more info is available */
	border-bottom: 1px dotted #000;
	cursor: help;
}
em {
	font-style: italic;/* bringing italics back to the em element */
}
th, td {
	/* borders and padding to make the table readable */
	border: 1px solid #000;
	padding: .35em;
}
caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom: .5em;
	text-align: center;/*centered so it doesn't blend in to other content*/
}
p, fieldset, table {
	/*so things don't bump into each other vertically*/
	margin-bottom: 1em;
}

/* BUTTON element */
.buttons a, .buttons button {
	display: block;
	float: left;
	margin: 0 7px 0 0;
	background-color: #f5f5f5;
	border: 1px solid #dedede;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	font-size: 100%;
	line-height: 130%;
	text-decoration: none;
	font-weight: bold;
	color: #565656;
	cursor: pointer;
	padding: 5px 10px 6px 7px; /* Links */
}
.buttons button {
	width: auto;
	overflow: visible;
	padding: 4px 10px 3px 7px; /* IE6 */
}
.buttons button[type] {
	padding: 5px 10px 5px 7px; /* Firefox */
	line-height: 17px; /* Safari */
}
*:first-child+html button[type] {
	padding: 4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img {
	margin: 0 3px -3px 0 !important;
	padding: 0;
	border: none;
	width: 16px;
	height: 16px;
}
/* BUTTONS - STANDARD */
button:hover, .buttons a:hover {
	background-color: #dff4ff;
	border: 1px solid #c2e1ef;
	color: #336699;
}
.buttons a:active {
	background-color: #6299c5;
	border: 1px solid #6299c5;
	color: #fff;
}
/* BUTTONS - POSITIVE */
button.positive, .buttons a.positive {
	color: #529214;
}
.buttons a.positive:hover, button.positive:hover {
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
}
.buttons a.positive:active {
	background-color: #529214;
	border: 1px solid #529214;
	color: #fff;
}
/* BUTTONS - NEGATIVE */
.buttons a.negative, button.negative {
	color: #d12f19;
}
.buttons a.negative:hover, button.negative:hover {
	background: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
}
.buttons a.negative:active {
	background-color: #d12f19;
	border: 1px solid #d12f19;
	color: #fff;
}