.alternate {
	background-color: #EEEEEE;
}

BODY {
	font-family: Verdana, Tahoma; 
	font-size: 13px; 
	color: black;
}

/* This is overriden in the print.css to be black on white */
.border-strip {
	background-color: black;
	clear: both;
	color: white;
	margin: 0 auto; /* Will center based on width */
	padding: 2px 5px 2px 5px;
	text-align: center;
}

.border-strip A {
	color: white;
}

.category {
	font-style: italic;
}

.center {
	margin: 0 auto; /* Will center based on width */
	text-align: center;
}

.description {
	font-style: italic;
	font-size: .8em;
	width: 100%;
}

h1 {
	text-align: center; 
}

h2 {
	text-align: center; 
}

h3 {
	text-align: center; 
}

h4 {
	text-align: center; 
}

/* Used for IMGs that have an onclick event that does something. */
.image-button {
	border: 0px;
	cursor: pointer;
}

.indent {
	margin-left: 20px;
}

label {
	font-weight: bold;
}

.main {
	/* text-align: center; */
	margin: 0 auto; /* Will center based on width */
	width: 815px;
}

.message {
	background-color: #EEEEEE;
	border: 1px solid black;
	margin: 10px 10px 10px 10px;
	padding: 5px 5px 5px 5px;
	text-align: center;
}

.result {
	background-color: #EEEEEE;
	border: 1px solid black;
	margin: 10px 0 10px 0;
	padding: 5px 5px 5px 5px;
}

.right {
	display: inline;
	float: right;
}

.rowWithErrors {
  background-color: red;
}

.rowWithErrors TD {
  padding: 5px;
}

/* IE 6 doesn't support this; oh well */
.selectable TR:hover {
	background-color: yellow;
}

.possible {
	background-color: yellow !important;
}

.selected {
	background-color: #EEEEEE;
}

/* Sortable tables */
table.sortable a.sortheader {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

TABLE.sortable TH {
    background-color:#eee;
}

TABLE.sortable SPAN.sortarrow {
    color: black;
    text-decoration: none;
}
.table-content {
	border-collapse: separate;
	border-spacing: 10px; /* Firefox */
	border-width: 10px; /* IE */
	width: 100%;
}

.table-content TD {
	text-align: left;
	vertical-align: top;
}

.table-content TD INPUT {
	width: 100%;
}

.table-list {
	width: 100%;
}

.table-list TH {
	border-bottom: 1px solid black;
	font-size: 1.2em;
	text-align: left;
}

.table-list TH A {
	border-bottom: 1px solid black;
	text-align: left;
}

.table-list TD {
	text-align: left;
	vertical-align: top; /* This is used to keep our 2 or 3 column table/tables (eg, merits/discs
													and rituals) in line. */
}

.trait {
	font-weight: bold;
}

.window {
	display: table;
	padding: 3px;
	left: 600px;
	overflow: visible;
	position: absolute;
	top: 10px;
	white-space: nowrap;
	z-index: 3000;
}

.window TABLE {
	overflow: visible;
	width: 100%;
}

.window-header {
	margin: 0 auto; /* Will center based on width */
	text-align: center;
}

.window-opaque {
	background-color: white;
	color: black;
	border: 1px solid black;
}

.window-transluscent {
	background-color: #333333;
	color: white;
	border: 0px;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); /* IE */
	opacity: 0.75; /* Mozilla */
}

.window-transluscent A {
	color: white;
}

.window-transluscent .xp-calculate-grouping {
	border-top: 1px solid white;
}

.xp-adjust {
	border: 1px solid black;
	padding: 10px 10px 10px 10px;
}

.xp-calculate-unspent {
	color: green;
}

.xp-calculate-warning {
	color: red;
}

.xp-calculate-left-column {
	white-space: nowrap;
}

.xp-calculate-right-column {
	text-align: right;
	white-space: nowrap;
	width: 100%;
}

.xp-calculate-grouping {
	border-top: 1px solid black;
}
	
.xp-gain {
	color: green;
}

.xp-loss {
	color: red;
}