body {
	background:#ccc;
	font-family:verdana;
	font-size:10px;
}
h1 {
	margin:0;
	padding:10px 0 10px 20px;
	font-size:12px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	font-variant:small-caps;
}
h2 {
	margin:0;
	padding:0;
	font-size:16px;
}
p {
	margin:0;
	padding:0;
}

textarea {
	width:100%;
}

.error {
	color:red;
}
.success {
	color:green;
}
.hidden {
	display:none;
}

#characterGenerator {
	border:1px solid #000;
	width:800px;
	background:#fff;
	margin:0 auto;
	position:relative;

}
#characterErrors {
	padding:10px;
	position:absolute;
	left:-210px;
	top:0;
	width:180px;
	font-size:9px;
	background:#fff;
	border:1px solid #000;
}

#characterPassions .description {
	padding:10px;
}

.column {
	float:left;
	border:1px solid #eee;

}
.column.skill {
	width:188px;
	padding:5px;
}
.madness .column {
	width:138px;
	padding:10px;
}
#characterControls {
	position: absolute;
	top:0;
	right:0;
	padding:5px;
	border:1px solid #ccc;
	background:#fff;
}
.print #characterControls {
	border:none;
	background:transparent;
}

#characterControls a {
	padding:5px;
	display:inline-block;
	text-decoration:none;
	background-position:50% 50%;
	background-repeat:no-repeat;
	width:16px;
	height:16px;
}
#characterControls a:hover {
	background-color:#eee;
	text-decoration:none;
}
#characterControls a.edit {
	background-image:url('_img/page_white_edit.png');
}
#characterControls a.print {
	background-image:url('_img/printer.png');
}
#characterControls a.export {
	background-image:url('_img/disk.png');
}


#characterBasic {
	padding:10px;
}
#characterBasic label {
	margin-right:10px;
}
#characterBasic .name input {
	width:100px;
}
#characterBasic select {
	width:100px;
}

#characterIntro label {
	display:block;
	margin-bottom:5px;
}
#characterIntro .column,
.passions .column {
	width:244px;
	padding:10px;
}
#characterIntro a {
	border:1px solid #ccc;
	padding:3px;
	float:left;
	margin-right:10px;
}
#characterIntro a.selected {
	background:#eee;
}
.skillHeader {
	text-align:center;
	border-bottom:1px solid #333;
	padding-top:10px;
	padding-bottom:5px;
	margin-bottom:1px;
}
.skillHeader h2 {
	float:left;
	width:118px;
}
.skillHeader .doNotPrint {
	font-variant:small-caps;
}
.skillHeader input {
	text-align:center;
}
.skillHeader .quantity {
	float:right;
	width:60px;
}
.skillHeader input.adjust {
	padding:2px;
	border:1px solid #ccc;
	width:15px;
}
.skillHeader input.points {
	width:30px;
	text-align:center;
}
.skillHeader input.name {
	width:100px;
	margin:0 auto;
	text-align:center;
	display:block;
	clear:both;
}
.skillHeader p {
	margin:0;
	padding:0;
	clear:both;
	color:#999;
	font-variant:small-caps;
}

.skillContainer {
	font-size:10px;


}
.skillContainer .skillRow {
	height:auto !important;
	height:22px;
	min-height:22px;
	padding:4px;
	border:1px solid #fff;
	border-bottom:1px solid #ccc;
	position:relative;
}

.skill.odd {
	background:#eee;
}
.skill.new {
	background:#d1ffd2;
}
.skill.error {
	background:#ffd9d4;
}
.skillRow.hover {
	border:1px solid #000;
	-moz-border-radius:5px;
}
.skillRow.obsession {
	font-weight:bold;
	border:1px solid #ffe59e;
	background:#fff8e5;
	-moz-border-radius:5px;
}

.skillRow .points {
	margin-right:2px;
	float:left;
	text-align:center;
}
.skillRow input.points {
	width:25px;
}
.skillRow span.points {
	width:25px;
}

.skillRow .name {
	font-size:10px;
	font-family:Verdana;
}
.skillRow input.name {
	width:115px;
}
.skillRow span.name {
	padding:0px 5px 0 5px;
	width:110px;
}
.skillRow input.obsession {
	display:none !important;
}
.skillRow a.obsession {
	position:absolute;
	top:5px;
	right:20px;
	width:10px;

	display:block;
	width:16px;
	height:16px;
	background-position:50% 50%;
	background-repeat:no-repeat;
}
.skillRow.hover a.obsession {
	background-image:url('_img/no_star.png');
}
.skillRow a.obsession.checked {
	background-image:url('_img/star.png');
}
.skillRow a.remove {
	position:absolute;
	top:5px;
	right:2px;
	
	display:block;
	width:16px;
	height:16px;
	background:url('_img/delete.png') 50% 50% no-repeat;
}


.skillRow input {
	display:none;
}
.skillRow.hover input,
.skillRow.new input {
	display:block;
}
.skillRow span.name {
	display:inline-block;
}
.skillRow.hover span,
.skillRow.new span {
	display:none;
}
.skillRow span {
	position:relative;
	top:4px;
}

.obsesssion {
	clear:both;
	margin:10px;
	display:block;
	font-weight:bold;
	text-align:center;
}
textarea.obsession.default {
	color:#333;
}

.madness h2 {
	text-align:center;
}
.madness .reset {
	float:left;
	width:20px;
	height:20px;
	display:block;
	background: url('_img/delete.png') 50% 50% no-repeat;

}
.madness .checkboxes {
	margin-left:30px;
}
.madness p {
	text-align:center;
}


.passions h2 {
	text-align:center;
}
.passion .textarea {
	height: auto !important;
	height:50px;
	min-height:50px;

}
.textarea {
	padding:5px;
	border:1px dashed #999;
}
.textarea.hover {
	border:1px dotted blue;
}
.passions .passion.default {
	text-align:center;
	color:#666;
	padding:10px 5px;
	height:40px;
}
.passions textarea {
	width:100%;
	padding:5px;
	font-size:12px;
}


textarea.export {
	font-size:9px;
	padding:10px;
	width:780px;
	height:100px;
	margin:10px;
}

.characterPortrait {
	border:2px solid #000;
	border-top:2px solid #ccc;
	border-left:2px solid #ccc;
	padding:10px;
}
.characterPortrait img {
	width:220px;
}
.characterPortrait span {
	text-align:center;
	font-weight:bold;
	display:block;
	padding:5px 0;
}
/* Print Overrides */
#characterGenerator.print {
	width:820px;
	margin:0;
	border:none;
}

.edit #characterExport {
	display:none;
}
.export #characterBasic,
.export #characterObsession,
.export #characterIntro,
.export #characterPassions,
.export #characterSkills,
.export #characterMadness,
.export #characterInventory,
.export #characterErrors {
	display:none;
}

.print .skillRow.new,
.print #characterExport,
.print #characterErrors,
.print .madness .reset,
.print .helper,
.print #characterIntro .portrait label,
.print .doNotPrint {
	display:none;
} 
.print .skillContainer .skill {
	border:none;
}

.print .skill.skillRow.odd {
	background:transparent;
}

.print .madness .checkboxes {
	margin-left:15px;
	margin-right:15px;
}
.print .textarea {
	border:none;
}

.print .swapInput .text,
.print .swapInput .select {
	display:inline-block;
}

/*
 * Amazing Clear Block script
 */

.clear-block:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear-block {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clear-block {
  height: 1%;
}
.clear-block {
  display: block;
}
/* End hide from IE-mac */