@font-face {
    font-family:'celtic';
    src:url('fonts/celtic.woff2') format('woff2'),
    url('fonts/celtic.woff') format('woff'),
    url('fonts/celtic.ttf')  format('truetype'),
    url('fonts/celtic.eot')  /* IE */
}
@font-face {
    font-family:'symbol';
    src:url('fonts/SymbolCrucifix.woff2') format('woff2'),
    url('fonts/SymbolCrucifix.woff') format('woff'),
    url('fonts/SymbolCrucifix.ttf')  format('truetype'),
    url('fonts/SymbolCrucifix.eot')  /* IE */
}
body {
	color:#DDD;
	background-color:black;
	margin-left:0px;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	text-align:center;
	font-size:12px;
	font-weight:normal;
	text-decoration:none;
	line-height:150%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
label {
	font-weight:bold;
}
img {
	padding:0;
	margin:0;
	border:0;
}
img.left {
	float:left;
	padding:1em;
}
img.center {
	margin-left:auto;
	margin-right:auto;
	padding:1em;
}
img.right {
	float:right;
	padding:1em;
}
a {
	text-decoration:none;
	outline:none;
	color:#CA9103;
	font-weight:bold;
}
a:hover {
	color:white;
	text-shadow:-1px -4px 5px 4px white;
}
a:active {
	color:skyblue;
	font-size:14px;
}
p {
	text-align:left;
	margin-top:0;
	margin-bottom:1ex;
}
h1 {
	text-align:center;
    font-family:celtic, sans serif;
	font-size:330%;
	font-variant:small-caps;
	color:#CA9103;
	padding:10px 10px 15px;
	margin:1em auto 1em;
	text-shadow:1.5px 1px 3px #AAA;
	text-decoration:underline;
}
h2 {
	font-size:200%;
	color:#CA9103;
	margin:2em 1em 1em;
	text-shadow:1px 1px 2px #666;
}
h3 {
	font-size:150%;
	font-weight:bold;
	color:white;
	margin:1em 0 1ex;
}
h4 {
	font-size:125%;
	font-weight:bold;
	font-style:italic;
	color:#CA9103;
	border-bottom:1px solid #CA9103;
	margin:1em 0 1ex;
}
h5 {
	font-size:110%;
	font-weight:bold;
	font-style:italic;
	color:white;
	margin:1em 0 1ex;
}
/*color:#EB3;*/

ol li {
    margin-top:1em;
}
ul {
    list-style:none;
}
ul li {
    list-style-type:none;
}
ul li::before {
    font-family:symbol;
    font-size:150%;
    content:'H';
	color:#DDD;
    margin-right:0.5ex;
	text-shadow:0.5px 0.5px 0.5px blue;
}
/*color:#CA9103;*/

li ul {
	margin-left:0;
	padding-left:0;
}
input[type=checkbox] {
	border:3px groove #F4B864;
}
blink {
	-webkit-animation: blink 1s steps(2, start) infinite;
	-moz-animation:    blink 1s steps(2, start) infinite;
	-o-animation:      blink 1s steps(2, start) infinite;
	animation:         blink 1s steps(2, start) infinite;
}
@-webkit-keyframes blink {
	to { visibility: hidden; }
}
@-moz-keyframes blink {
	to { visibility: hidden; }
}
@-o-keyframes blink {
	to { visibility: hidden; }
}
@keyframes blink {
	to { visibility: hidden; }
}
.left {
	text-align:left;
}
.center {
	text-align:center;
}
.right {
	text-align:right;
}
.fl {
	float:left;
}
.fr {
	float:right;
}
.just {
	text-align:justify;
}
.bcenter {
	margin-left:auto;
	margin-right:auto;
}
.blockcenter {
	display:inline-block;
	margin-left:auto;
	margin-right:auto;
}
.block2 {
	width:49.5%;
	float:left;
	margin:0;
	text-align:left;
}
.block3 {
	width:33%;
	float:left;
	margin:0;
	text-align:left;
}
.block6 {
	width:66%;
	float:left;
	margin:0;
	text-align:left;
}
.iblock {
	display:inline-block;
	vertical-align:top;
}
.iblock33 {
	display:inline-block;
	width:33%;
	vertical-align:top;
}
.iblock50 {
	display:inline-block;
	width:49.5%;
	vertical-align:top;
}
.iblock66 {
	display:inline-block;
	width:66%;
	vertical-align:top;
}
.iblock90 {
	display:inline-block;
	width:90%;
	vertical-align:top;
}
.cb100, .cb250, .cb500 {
	display:block;
	width:50%;
	margin-left:auto;
	margin-right:auto;
}
.cb100 {
	min-height:100px;
}
.cb250 {
	min-height:250px;
}
.cb500 {
	height:500px;
}
.l500 {
	width:500px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size:1px;
	line-height:0px;
}
.vtop {
	vertical-align:top;
}
.vmid {
	vertical-align:middle;
}
.vbot {
	vertical-align:bottom;
}
.hidden {
	display:none;
}
.visible {
	display:inline;
}
.highlight {
	background-color:yellow;
}
.padleft {
	margin-left:3em;
}
.padright {
	margin-right:3ex;
}
.black {
	background-color:black;
}
.code {
	font-family:lucida-console, courier, monospace;
}
.emphasize {
	font-weight:bold;
	font-size:110%;
	text-shadow:1px 2px 1px rgba(128,128,128,0.75);
}
.shadow {
	text-shadow:grey .1em .2em .2em;
}
.shadowbox {
	box-shadow:3px 3px 3px grey;
	-moz-box-shadow:3px 3px 3px grey;
	-webkit-box-shadow:3px 3px 3px grey;
}
.bold {
	font-weight:bold;
}
.ital {
	font-style:italic;
}
.ul {
	text-decoration:underline;
}
.uline {
	border-bottom:1px solid gray;
}
.oline {
	border-top:1px solid gray;
}
.linedbl {
	border-top:1px solid gray;
	border-bottom:1px solid gray;
}
.hdr, .frmhdr {
	display:inline-block;
	width:150px;
	text-align:left;
}
.frmhdr {
	text-shadow:grey 1px 1px 1px;
	vertical-align:top;
}
.colheader {
	text-decoration:underline;
	font-family:"Lucida Console","Courier New",monospace;
	white-space:pre;
	margin:0 0 1ex;
}
.tophdr {
	font-weight:bold;
	font-size:110%;
	text-decoration:underline;
	margin-top:1ex;
}
.formfield {
	color:black;
	background-color:#F9F9F7;
	font-family:courier;
	margin:1ex 1em 1em 0;
}
.button {
	text-align:center;
	vertical-align:middle;
	display:inline-block;
	height:50px;
	width:200px;
	margin:1em;
	font-size:12px;
	font-weight:bold;
	color:#EA0;
	background-color:black;
	border:3px groove #F4B864;
}
.button a {
	display:inline-block;
	margin:16px 0;
}
.thumbnail{
	max-height:100px;
	max-width:100px;
}
.alert {
	display:block;
	min-height:250px;
	margin-left:auto;
	margin-right:auto;
	padding:2em;
	margin:2em;
	color:tomato;
	border:3px solid tomato;
}
.error {
	color:red;
	background-color:#EDD;
	font-weight:bold;
	font-size:16px;
	text-align:center;
	line-height:150%;
	width:50%;
	margin:10px auto;
}
.warning {
	color:red;
	font-weight:bold;
	height:2em;
}
.important, .boxed {
	font-weight:bold;
	padding:10px;
}
.important {
	border:3px solid LightGreen;
}
.boxed {
	border:3px solid #444;
}
.risk {
	font-weight:bold;
	color:red;
}
.scroll {
	overflow:auto;
}
.numeric {
	text-align:right;
	width:12ex;
}
.hint {
	font-style:italic;
	color:#EFDDC5;
	background-color:white;
}
.ro {
	font-style:italic;
	font-weight:bold;
	color:#B8B8B8;
	background-color:white;
}
.gimmespace {
	display:block;
	min-height:150px;
}
.lotsaspace {
	display:block;
	min-height:300px;
}
.addsub {
	height:40px;
	width:10px;
	overflow:hidden;
	display:inline-block;
	vertical-align:top;
	text-align:center;
	line-height:100%;
	margin:0 1ex;
}
.addsub a img {
	position:relative;
	left:0px;
	top:0px;
}
.addsub a:active img {
	position:relative;
	left:-10px;
}
.paragraph {
	text-align:left;
	margin-top:0;
	margin-bottom:1ex;
}
.stat {
	height:6ex;
	text-align:left;
	vertical-align:top;
	margin:0 0 1ex;
	color:#EA0;
}
.stat label {
	vertical-align:-50%;
}
.stat input {
	vertical-align:-50%;
}
.cb {
	border:3px groove #F4B864;
	margin:5px 10px 5px 20px;
}
.skabil {
	color:skyblue;
}
.spellbox {
	display:inline-block;
	text-align:left;
	vertical-align:top;
	margin:1em auto;
	min-height:500px;
	width:48%;
	border:3px groove #F4B864;
}
.soundset {
	margin:2px auto;
	padding:1em;
}
.symbol {
    font-family:symbol;
}

#header {
	text-align:center;
	height:160px;
	width:100%;
	background:black url('/images/logo.jpg') 0 0 no-repeat;
}
#header img {
	display:inline-block;
	text-align:center;
	margin:40px;
}
#titlerule {
	width:50%;
	color:#EA0;
}
#page {
	width:100%;
	min-width:925px;
	min-height:600px;
}
#h1spc {
	float:left;
	width:125px;
	margin:1em;
}
#nav, #h1spc {
	display:inline-block;
	vertical-align:top;
}
#nav div {
	padding:1em;
	margin:0 1em 1ex;
	border:3px groove #F4B864;
	color:gray;
}
#navmenu {
    font-family:celtic;
    font-size:200%;
    text-align:left;
    margin:0;
    line-height:200%;
}
#navmenu ul li a {
	text-shadow:1px 2px 1px #888;
}
#container {
	display:inline-block;
	margin:2em 3em;
	width:90%;
	text-align:left;
}
#main {
	display:inline-block;
	vertical-align:top;
	width:75%;
	padding:3em;
	border:3px groove #F4B864;
	color:#DDD;
}
#footer {
	margin-top:4em;
	width:100%;
	font-size:9px;
	color:#999;
	border-top:1px solid grey;
}
#footer a {
	margin:0 1em;
	color:#48B;
	font-weight:bold;
}
#getting_started {
	font-size:15px;
}
#chargen {
	text-align:center;
}
#chargen_intro {
	font-weight:bold;
	display:inline-block;
	margin-left:auto;
	margin-right:auto;
	width:80%;
}
#cg_frm, #basics_frm, #deity_frm {
	display:inline-block;
	text-align:left;
	margin:0 auto 1em auto;
	padding:2em;
	border:3px groove #F4B864;
	min-height:250px;
}
#basics_frm, #deity_frm {
	width:80%;
}
#descrip {
	min-height:10em;
	width:70%;
}
#deitysel {
	min-height:240px;
}
#align_t {
}
#align_t tr {
	height:60px;
}
#align_t td {
	width:60px;
	text-align:center;
	padding:3ex;
	font-weight:bold;
	color:#600;
}
#align_t a {
	display:inherit;
	vertical-align:middle;
	height:60px;
	width:60px;
	color:white;
}
#align_t a:hover {
	color:#EA0;
	background-color:#DEF;
}
#school_d {
	display:none;
}
#portraits {
	display:none;
	width:740px;
	margin-left:auto;
	margin-right:auto;
}
#portraits a {
	display:inline-block;
	border:3px groove black;
	height:100px;
}
#portraits h4 a {
	display:inline;
	border:none;
}
#portraits_loading {
	display:block;
	width:50%;
	margin-left:auto;
	margin-right:auto;
}
#sounds {
	display:inline-block;
}
#charsheet #profile {
	text-align:left;
	margin-bottom:3em;
}
#charsheet #stats {
	display:inline-block;
	width:30%;
	margin:0;
	text-align:left;
	vertical-align:top;
}
#charsheet #portrait {
	display:inline-block;
	width:30%;
	min-width:100px;
	text-align:center;
	vertical-align:top;
}
#charsheet #basics {
	display:inline-block;
	width:30%;
	text-align:left;
	vertical-align:top;
}
#charsheet #portrait img {
	border:3px groove #F4B864;
	height:100px;
	width:64px;
}
#charsheet #skillsfeats {
	text-align:left;
	margin-bottom:3em;
}
#charsheet #skills {
	display:inline-block;
	width:49%;
	text-align:left;
	vertical-align:top;
}
#charsheet #feats {
	display:inline-block;
	width:49%;
	text-align:left;
	vertical-align:top;
}
#charsheet #spells {
	text-align:left;
	vertical-align:top;
}
#charsheet #spells0 {
	display:inline-block;
	width:49.5%;
	vertical-align:top;
	text-align:left;
}
#charsheet #spells1 {
	display:inline-block;
	width:49.5%;
	vertical-align:top;
	text-align:left;
}
