/* BASICS */
* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Georgia, "Times New Roman", serif;
}

div {
	clear: both;
}

img {
	border: 0;
}

form {
	margin: 10px auto;
	/*margin-left: auto;
	margin-right: auto;*/
	width: 700px;
}

fieldset{
	float: left;
	padding-top: 7px;
	padding-bottom: 5px;
	width: 48.5%;
	margin: 2.5px 1px;
}

legend{
	color: white;
	background-color: #06C;
	padding-left: 2px;
	padding-right: 2px;
	border: 2px #036 solid;
	font-variant: small-caps;
}

ol, ul {
	list-style: none;
}

label {
	float: left;
	clear: none;
	width: 70px;
	padding-left: 10px;
	font-weight: normal;
}

input {
	float: left;
	clear: none;
}

select {
	float: left;
	clear: none;
	padding-left: 5px;
	width: 145px;
}

table {
	margin: 10px auto;
}

th {
	padding: 2px;
}

/* IDs */
/* ID: the Swashbuckler */
#swashbuckler {
	position: absolute;
	right: 0px;
}


/* ID: the Header */
#head {
	text-align: center;
	padding: 5px;
}

/* ID: the navbar */
#bar {
	text-align: center;
	font-variant: small-caps;
	color: white;
	background-color: #06C;
	border-top: 5px #036 solid;
	border-bottom: 5px #036 solid;
}

#bar a:link, #bar a:visited{
	color: white;
	text-decoration: none;
}

#bar a:hover, #bar a:active{
	color: white;
	text-decoration: underline;
}

/* ID: the Footer */
#foot {
	text-align: center;
	clear: both;
	height: 50px;
}

/* Classes */
/* Class: Form -- for when it's secretly not a form */
.form {
	margin: 10px auto;
	/*margin-left: auto;
	margin-right: auto; */
	width: 700px;
}

/* Class: Nondescript -- for unfancy fieldsets */
.nondescript {
	border-style: none;
	margin: 0;
}

/* Class: Fullwidth, Onethird, Twothirds, Halfwidth -- for form layout */
.fullwidth {
	width: 97%;
}

.onethird {
	width: 31%;
	/* height: 145px; */
}

.onethird li {
	font-weight: bold;
}

.twothirds {
	width: 65%;
	/* height: 145px; */
}

.twothirds li {
	font-weight: bold;
}

.firstheight {
	height: 9em;
} 

.halfwidth {
	width: 48%;
}

/* Class: Horizontal -- for making lists !vertical */
.horizontal li {
	float: left;
	clear: none;
	margin-right: 15px;
	font-weight: bold;
}

/* Class: Largelabel -- for labels sized like in the "Character Information" section */
.largelabel {
	width: 155px;
}

/* Class: Smalllabel -- for WORD labels directly connected to radio buttons */
.smalllabel {
	width: 40px;
	padding: 0;
}

/* Class: Tinylabel -- for NUMBER labels directly connected to radio buttons */
.tinylabel {
	width: 20px;
	padding: 0;
}

/* Class: Mod -- for the BG/ADV/Skill list that is dynamically altered */
.mod{
	margin-left: 10px;
	margin-right: 10px;
}

.mod>li {
	margin-bottom: 20px;
}
	
.mod ol {
	/*background-color: #cfc;*/
	margin-right: 20px;
}

/* Class: multi -- for the checkbox list containers */
.multi {
	clear: both;
    height: 100px;
    padding: 5px;
    overflow: auto;
    border: 1px solid #ccc;
	margin-left: 20px;
}

.multi input {
	clear: left;
}

.multi label {
	width: 145px;
}

/* Class: trait */
.trait {
	padding-bottom: 22px;
}

/* Class: Knacks */
.knacks {
	font-size: 80%;
	margin-left: 10px;
}

.knacks label{
	width: 215px;
}

.knacks a {
	float: left;
}

/* Class: Spinbox -- for the little boxes with arrow-adjustable numbers */
.spinBox {
	float: none;
	clear: right;
	width: 35px;
}

.spinContainer {
	float: left;
	right: 14px;
	border: 1px solid #036;
}

.spinContainer div, .spinContainer div {
	border-left: 1px solid #036;
}

.spinInput {
	width: 27px;
}

.spinUpBtn, .spinUpBtnPress, .spinDownBtn, .spinDownBtnPress {
	width: 15px;
	height: 9px;
	float: right;
	clear: right;
	background-image: url('images/spin_control_buttons.png');
	/* Change this to modify the default button color */
	background-color: #06C;
}

.spinUpBtn {
	top: 2px;
	background-position:0px 0px;
}

.spinUpBtn:hover {
	background-position:0px -16px;
}

.spinUpBtnPress {
	background-position:0px -32px;
}

.spinDownBtn {
	top: 10px;
	background-position:0px -8px;
}

.spinDownBtn:hover {
	background-position:0px -24px;
}

.spinDownBtnPress {
	background-position:0px -40px;
}

/* Class: text */
.text{
	width: 250px;
}

/* Class: Break */
.break {
	clear: left;
	background-color: #ccc;
	padding-top: 7px;
	padding-bottom: 5px;
	margin-left: -1px;
}

/* Class: Section -- for the different tiers of the form */
.section {
	float: left;
	width: 100%;
	margin-bottom: 15px;
	margin-left: -10px;
}

/* this is for making the sections encase all of their floats */
.section:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Class: thingHeader -- for the header labels of the Adv/Bg/Skill objects */
.thingHeader {
	clear: left;
	background-color: white;
}
.headLabel {
	width: 89%;
	border-bottom: 1px #036 solid;
	padding: 0;
}

/* Class: thingFooter */
.thingFooter {
	clear: left;
	height: 25px;
	padding-top: 15px;
	margin: -20px 0px 12px 10px;
	/* background-color: #cfc; */
}

.thingFooter label {
	width: 27%;
	font-size: 70%;
	margin-top: -8px;
}

.thingFooter select {
	margin-left: -15px;
	width: 196px;
}

.thingCloser {
	float: left;
	padding-bottom: 10px;
}

/* Class: opener -- triggers the opening/closing of sub-items */
.opener {
	float: left;
}

.opener img {
	margin-right: 5px;
}

/* Class: opened/closed -- shows/hides its contents */
.opened {
	display: block;
}

.closed, .hide {
	display: none;
}

/*  */
.stripe {
	background-color: gray;
	color: white;
}

/* Class: Submit -- the fieldclass for the submit buttons */
.submit {
	float: none;
	clear: both;
}

/* Class: Error messages */
.error{
	border-style: none;
	color: red;
}

.error  input{
	background-color: #FF9;
	border: 2px red inset;
}