body {
    font-family: Tahoma, Helvetica, SansSerif;
    font-size: 12pt;
    background: #bbff99;
    text-align: center;
}

h1, h2 {
    font-weight: bold;
    margin-bottom: 0.2em;
}

h1 {
	text-shadow: #ffff66 0px 0px 7px;
	-moz-text-shadow: #ffff66 0px 0px 7px;
	-webkit-text-shadow: #ffff66 0px 0px 7px;
	margin: 1em 0;
	}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

ul { 
	text-align: left;
	}

A { outline: none; }

span.lefty {
    float: left;
    width: 3em;
}

br.clearboth {
    clear: both;
}


#intro {
	width: 800px;
	margin: 1em auto;
	padding: 1em;
	text-align: center;
	}

/* ====== Main Menu, Tabs, Controls ====== */

UL.mainmenu {
	display: block;
	margin: 0; padding: 0;
	}
UL.mainmenu LI {
	display: block; margin: 0 2px 0 0; padding: 0;
	float: left;
	text-align: center;
	width: 6em;
	}
UL.mainmenu .bigger {
	width: 12em;
	}

UL.mainmenu LI A {
	display: block; padding: 1em;
	color: black;
	border-radius: 1em 1em 0 0; -moz-border-radius:  1em 1em 0 0; -webkit-border-radius:  1em 1em 0 0;
	text-decoration: none;
	}

.tabunselected {
	background-color: #88cc66;
	}

.tabselected {
	background-color: #99dd77;
	}

UL.mainmenu LI A:hover {
	/*background: #77bb55;*/
	color: white;
	text-shadow: #ffff66 0px 0px 7px;
	-moz-text-shadow: #ffff66 0px 0px 7px;
	-webkit-text-shadow: #ffff66 0px 0px 7px;
	text-decoration: underline;
	}

.tab {
	display: none; 
	padding: 0.5em 2em 3em 2em;
	clear: both;
	background: #99dd77;
	text-align: left;
	}

.tab H2 {
	margin: 1em 0 1em 0;
	color: #88cc66;
	font-size: 100%;
	text-shadow: #ffffff 1px 1px 3px;
	-moz-text-shadow: #ffffff 1px 1px 3px;
	-webkit-text-shadow: #ffffff 1px 1px 3px;
	}



#characterslots {
	display: block;
	margin: 0; padding: 0;
	font-size: 70%;
	}
#characterslots LI {
	display: block;
	float: left;
	border: solid 1px black;
	width: 90px; height: 90px;
	padding: 5px; margin-left: 5px;
	}
.slotnum {
	display: block; width: 1em;
	border: solid 1px #aaaaaa;
	padding: 0.2em 0.8em;
	margin: 0 2em 0.5em 0;
	text-align: center;
	background-color: #cccccc;
	border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em;
	}
.fullslot {
	background-color: white;
	box-shadow: 4px 4px 16px #000000;
	-webkit-box-shadow: 4px 4px 16px #000000;
	-moz-box-shadow: 4px 4px 16px #000000;
	}
.emptyslot {
	background-color: #333333;
	}
#characterslots BUTTON {
	font-size: 100%;
	}




/* === Bottom of the page === */

#todo {
	width: 800px;
	margin: 1em auto;
	padding: 1em;
	text-align: left;
	font-size: 10pt;
}

#footer {
	padding: 1em;
	font-size: 9pt;
}

#footer A {
	color: black;
	}



/* ====== Character sheet styles ====== */

#charactersheet {
	display: none;
	width: 700px;
	margin: 1em auto;
	padding: 50px;
	text-align: left;
	font-size: 14px;
	font-family: Trebuchet, Arial, sans-serif;
	
	background: white;
	border: solid 2px black;
	box-shadow: 4px 4px 20px #000000;
	-webkit-box-shadow: 4px 4px 20px #000000;
	-moz-box-shadow: 4px 4px 20px #000000;
}

#sheettitle {
	float: right; width: 300px;
	margin: 0px 0px 1em 1em;
	color: orange;
	text-shadow: #666 2px 2px 3px;
	-moz-text-shadow: #666 2px 2px 3px;
	-webkit-text-shadow: #666 2px 2px 3px;	
	}

.rightcolumn {
	float: right; width: 40%;
	}
.leftcolumn {
	float: left; width: 40%;
	}

#charactersheet h2 {
	margin-top: 0em;
	margin-bottom: 1em;
	margin-left: -10px;
	clear: left;
	/*
	text-shadow: #000000 1px 1px 2px;
	-moz-text-shadow: #000000 1px 1px 2px;
	-webkit-text-shadow: #000000 1px 1px 2px;
	border-radius: 1em 3em 0 0; 
	-moz-border-radius: 1em 3em 0 0;
	-webkit-border-radius: 1em 3em 0 0;
	border: solid 1px orange;
	background: #FFcc99;
	color: #ffffff;
	margin: -10px -10px 1em -10px;
	padding: 0.2em 0.4em;*/
	
	color: #333333;
	font-size: 110%;
	

	}
.section {
	width: 100%;
	border: solid 1px orange;
	border-radius: 1em 3em 1em 1em; 
	-moz-border-radius: 1em 3em 1em 1em;
	-webkit-border-radius: 1em 3em 1em 1em;
	padding: 20px;
	margin-bottom: 1em;
	}


.name, .origins, .ability, .skills {
	float: left;
	clear: left;
	}
	
.health, .defense, .attacks, .gear {
	float: right;
	clear: right;
	}
	

#charactersheet LABEL {
	display: block; float: left; clear: left;
	width: 7em;
	color: #559900;
	}

.mods {
	display: block; float: left;
	font-size: 70%;
	color: #666666;
	padding: 0.1em 1em;
	}
.score {
	display: block; float: left;
	width: 2em; height: 1em;
	border: solid 1px black;
	padding: 0.2em 0.5em;
	text-align: center;
	}

#current-hp {
	height: 2.5em; width: 4em;
	}
#name-content {
	width: 8em; }
	
#attacks-content {
	clear: left;
	}
	
.origin OL {
	display: block;
	}
.origin OL LI {
	display: block;
	}

.ability UL {
	display: block;
	padding: 0; margin: 0;
	}
.ability UL LI {
	display: block;
	padding: 0; margin: 0;
	}

.skills UL {
	display: block;
	padding: 0; margin: 0;
	}
.skills UL LI {
	display: block;
	padding: 0; margin: 0;
	}
.skills LABEL {
	text-transform: capitalize;
	color: black;
	}

.gear UL { 
	display: block; 
	padding: 0; margin: 0;
	border-bottom: solid 1px #999999;
	}
.gear UL LI {
	display: block;
	border: solid 1px #999999;
	min-height: 1em;
	border-bottom: solid 0px white;
	padding: 0.1em 1em;
	}

#sheetfooter {
	display: none;
	width: 100%;
	clear: both;
	font-size: 70%;
	text-align: center;
	}