/* --------------------------------------------------------------

	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.2em; margin: 0;} /* 1.25? */
h4 {font-size: 1.1em; margin: 0;}
h5 {font-size: 1.08em;} /* 1.05? */
h6 {font-size: 1.0em;}
small { font-size: .8em; }
table {
	padding: 0;
	margin: 1px;
	border-spacing: 1px;
}
tr.brick td, td.brick { background: #600 !important; }
tr.brick td strong {
	padding-left: 1em;
	background: transparent url(../img/nav-arrow-up.gif) no-repeat 0 .08em;
}
.brick strong { color: #0b0; }
th {
	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 */
}
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 { clear: both; }
.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;
}
.error {
	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; }
.divtop { border-top: 1px solid #666; }
.mono {
	font-family: Courier New, Courier, monospace;
}
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;
}
.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 */
.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.75;/* 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; }
/* 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; }







/* --------------------------------------------------------------
	* 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: .5em;
}
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 run into each other*/
	margin-bottom: 1em;
}
