#spellLibApp {
	position:relative;
	font-size:16px;
	margin:1.25em auto;
	text-align:left;
	width:62.5em;
	border:double black 0.375em;
	background:#cccccc;
	font-family:arial,sans-serif;
}

#spellLibApp.noscript noscript {
	display:block;
	font-size:1.5625em;
	width:28em;
	height:4em;
	text-align:center;
	padding:8em 6em;
	color:#ff0000;
	background:#ffffff;
}


/**********/
/* HEADER */
/**********/

#spellLibHeader {
	clear:both;
	padding:0.25em;
	height:2em;
	background:#999966;
}

#spellLibHeader h1 {
	font-size:2em;
	line-height:1em;
	color:#ffffff;
	font-family:georgia,tahoma,verdana,sans-serif;
}

#spellUserControls {
	position:absolute;
	top:0;
	right:0;
	margin:0.25em;
}
ul#userMenu li {
	display:inline;
}
ul#userMenu li a,li#menuWelcome {
	display:inline-block;
	color:#ffffff;
	padding:0.25em 0.375em;
}
.login li#menuLogin a,.register li#menuRegister a {
	position:relative;
	z-index:3;
	padding:0.25em 0.25em 0.5em 0.25em;
	margin:-0.125em 0;
	text-decoration:none;
	border:solid #666699 0.125em;
	border-bottom:none;
	background:#99ccff;
}

#spellUserControls .error {
	color:#ff0000;
	font-style:italic;
}

#login,#register {
	display:none;
}
.login #login,.register #register {
	position:absolute;
	right:-0.25em;
	display:block;
	z-index:2;
	padding:1em;
	border:solid #666699 0.125em;
	border-right:none;
	background:#99ccff;
}


/********/
/* MAIN */
/********/

#spellLibMain {
	clear:both;
	border-top:0.125em solid #663300;
	border-bottom:0.125em solid #663300;
	background:#ffffcc;
}

#charMenu {
	position:relative;
	display:block;
	clear:both;
	height:1.875em;
	overflow:hidden;
	padding:0 0.25em;
	background:#cccc99;
	border-bottom:0.125em solid #663300;
}

#spellLibrary {
	position:relative;
	display:block;
	float:left;
	overflow:hidden;
	width:41.5em;
	background:#ffffcc;
}

#spellDetail {
	display:block;
	overflow:hidden;
	width:19.875em;
	height:35em;
	padding:0.5em;
	overflow:auto;
	border-left:0.125em solid #663300;
	background:#cc9966;
}

#charProfile {
	display:block;
	height:37em;
	padding:0.5em 1em;
	overflow:auto;
	background:#cccc99;
}


/******************/
/* CHARACTER MENU */
/******************/

#charMenu h2 {
	font-size:1.5em;
	line-height:1.25em;
}

#charMenu ul {
	position:absolute;
	top:0.25em;
	right:0.25em;
}
#charMenu ul>li {
	display:inline;
	line-height:1em;
}


/******************/
/* TAB NAVIGATION */
/******************/

input#optionsMode {
	position:absolute;
	top:0.375em;
	right:0.25em;
}
input#resetSlots {
	position:absolute;
	top:3em;
	right:0.25em;
}

ul#libModeTabs a,ul#libClsTabs a {
	color:#000000;
	text-decoration:none;
}

/* libModeTabs */

ul#libModeTabs {
	display:block;
	padding:0.375em 0.25em 0 0.25em;
	border-bottom:solid #663300 0.125em;
	background:#ffff99;
}
ul#libModeTabs li {
	display:inline;
}
ul#libModeTabs li a {
	display:inline-block;
	vertical-align:top;
	font-size:1.25em;
	line-height:1em;
	margin:0 0.2em -0.1em 0.2em;
	padding:0.2em 0.3em 0.1em 0.3em;
	border:solid #663300 0.1em;
	border-bottom:none;
}

.browse ul#libModeTabs li#browseModeTab a {
	padding-bottom:0.2em;
}
ul#libModeTabs li#browseModeTab a {
	background:#cc9999;
}
.browse ul#libClsTabs {
	background:#cc9999;
}
.repertoire ul#libModeTabs li#repertoireModeTab a {
	padding-bottom:0.2em;
}
ul#libModeTabs li#repertoireModeTab a {
	background:#cccc66;
}
.repertoire ul#libClsTabs {
	background:#cccc66;
}

/* libClsTabs */

ul#libClsTabs {
	padding-top:0.5em;
	border-bottom:solid #663300 0.125em;
}
ul#libClsTabs li {
	display:inline;
}
ul#libClsTabs li a {
	display:inline-block;
	vertical-align:top;
	font-size:1em;
	line-height:1em;
	margin:0 0.25em -0.125em 0.25em;
	padding:0.25em 0.5em 0.125em 0.5em;
	border:solid #663300 0.125em;
	border-bottom:none;
	background:#cccc99;
}
ul#libClsTabs li.active a {
	padding-bottom:0.25em;
	background:#ffffcc;
}


/**********************/
/* SPELL LIBRARY LIST */
/**********************/

#libList {
	height:30.625em;
	overflow:auto;
	padding:0.5em;
}

#libList h2 {
	font-size:1.25em;
}

#libList.concise>ul>li {
	display:inline-block;
	vertical-align:top;
}

#libList>ul.libNames {
	margin:0.375em;
}

ul.libNames>li {
	font-size:0.875em;
	line-height:1.286em;
}
.verbose ul.libNames>li {
	padding-left:1em;
	text-indent:-1em;
}
ul.libNames>li a {
	padding-left:0.286em;
	color:#000000;
	text-decoration:none;
}
.browse ul.libNames>li.known a {
	background:#99ffcc;
}
.concise ul.libNames>li a {
	display:block;
	width:14em;
}
.verbose ul.libNames>li a {
	font-weight:bold;
}
.verbose ul.libNames>li a:after {
	content:":";
}
ul.libNames>li a:hover,ul.libNames>li.known a:hover {
	color:#cc0000;
	font-weight:bold;
	background:#ffffff;
}
ul.libNames>li a:active {
	color:#ffffff;
}

ul.libBlocks>li {
	clear:both;
	padding-bottom:0.143em;
}
ul.libBlocks>li h4 {
	float:left;
	font-size:0.875em;
	line-height:1.286em;
	font-weight:bold;
}
ul.libBlocks ul.libNames {
	margin-left:3em;
}

ul.libLevels>li {
	margin:0 0 1em 0.5em;
}
ul.libLevels h3 {
	font-size:1.125em;
	line-height:1em;
	margin:0.333em 0;
}


/***************/
/* SPELL SLOTS */
/***************/

#slotLists {
	display:none;
}

.repertoire #slotLists {
	display:block;
	float:right;
	height:30.625em;
	width:21.875em;
	padding:0.5em;
	overflow:auto;
}

#slotLists h2 {
	font-size:1.25em;
}

.lvPrep h3{
	font-size:1.125em;
	line-height:1em;
	margin:0.333em 0;
}

#slotLists>li {
	display:none;
}
#slotLists>li.active {
	display:block;
}

.slotBlock>li {
	position:relative;
	padding:0.25em;
	margin:0.25em;
	border:solid 0.1875em;
	background:#cccccc;
	border-color:#6699cc #003366 #003366 #6699cc;
}

.slotBlock>li.specialization,.slotBlock>li.domain {
	border-color:#996600;
	border-color:#cccc66 #666600 #666600 #cccc66;
}


.slotBlock>li.empty {
	background:#339966;
}
.slotBlock>li.ready {
	background:#339933;
}
.slotBlock>li.cast {
	background:#993333;
}
.slotBlock>li.exhausted {
	background:#666666;
}
.slotBlock>li.specialization.empty,.slotBlock>li.domain.empty {
	background:#66cc99;
}
.slotBlock>li.specialization.ready,.slotBlock>li.domain.ready {
	background:#66cc66;
}
.slotBlock>li.specialization.cast,.slotBlock>li.domain.cast {
	background:#cc6666;
}
.slotBlock>li.specialization.exhausted,.slotBlock>li.domain.exhausted {
	background:#999999;
}

ul.slotBlock>li a {
	font-size:0.875em;
	padding:0 0.286em;
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
	line-height:1.286em;
}
ul.slotBlock>li a:hover {
	color:#cc0000;
	background:#ffffff;
}
ul.slotBlock>li a:active {
	color:#ffffff;
}
ul.slotBlock>li.empty a {
	color:#ffffff;
	font-weight:normal;
	background:none;
}

ul.slotBlock>li span {
	display:inline;
	font-size:0.875em;
	margin:0 0.286em;
	line-height:1.286em;
}

.slotButtons {
	float:right;
}
.slotButtons>li {
	display:inline;
}
.slotButtons input {
	font-size:1em;
	width:1em;
	height:1em;
	margin:0.125em 0.25em;
	border:solid 0.1875em;
}

input.unprep {
	background:#00cc00;
	border-color:#33ff33 #009900 #009900 #33ff33;
}
input.unprep:hover {
	background:#33ff33;
}
input.unprep:active {
	background:#66ff66;
	border-color:#009900 #33ff33 #33ff33 #009900;
}
input.cast {
	background:#cc0000;
	border-color:#ff3333 #990000 #990000 #ff3333;
}
input.cast:hover {
	background:#ff3333;
}
input.cast:active {
	background:#ff6666;
	border-color:#990000 #ff3333 #ff3333 #990000;
}
input.recall,input.refresh {
	background:#0000cc;
	border-color:#3333ff #000099 #000099 #3333ff;
}
input.recall:hover,input.refresh:hover {
	background:#3333ff;
}
input.recall:active,input.refresh:active {
	background:#6666ff;
	border-color:#000099 #3333ff #3333ff #000099;
}
input.exhaust {
	background:#333333;
	border-color:#666666 #000000 #000000 #666666;
}
input.exhaust:hover {
	background:#666666;
}
input.exhaust:active {
	background:#999999;
	border-color:#000000 #666666 #666666 #000000;
}

.empty input.unprep,.empty input.cast,.empty input.recall,.empty input.refresh {
	display:none;
}
.ready input.recall,.ready input.refresh {
	display:none;
}
.cast input.unprep,.cast input.cast,.cast input.exhaust,.cast input.refresh {
	display:none;
}
.exhausted input.unprep,.exhausted input.cast,.exhausted input.recall,.exhausted input.exhaust{
	display:none;
}


/*************************/
/* SPELL LIBRARY OPTIONS */
/*************************/

#libOptions {
	display:block;
	height:35em;
	overflow:auto;
	padding:0.5em;
	background:#ffff99;
}

#libOptions>ul>li {
	margin:0.25em 1em;
}

#libOptions h3 {
	font-size:1.2em;
}

#libOptions .checkList {
	margin:0.125em;
	padding:0.125em;
	background:#ff6633;
}
#libOptions .checkList li {
	display:inline-block;
	margin:0.125em;
}
#libOptions .checkList input {
	margin:0.125em 0 0.125em 0.25em;
}
#libOptions .checkList a {
	color:#000000;
	text-decoration:none;
	padding:0.125em 0.5em 0.125em 0.25em;
}


/*****************/
/* SPELL DETAILS */
/*****************/

#spellControls.concise {
	position:relative;
	text-align:center;
	padding:0.125em 1em 0.125em 0.25em;
	margin:0.25em 0.25em 0.5em 0.25em;
	min-height:1.25em;
	background:#ffff99;
}
#spellControls.concise>ul {
	display:inline;
}
#spellControls.concise>ul>li {
	margin:0.125em;
	display:inline-block;
}
#spellControls.concise>h3,#spellControls.concise>#applyMetamagic {
	display:none;
}
#spellControls ul#knownButtons input {
	color:#003300;
	background:#33cc33;
	border:solid medium;
	border-color:#66ff66 #009900 #009900 #66ff66;
}
#spellControls ul#knownButtons input:active {
	background:#66ff66;
	border-color:#009900 #66ff66 #66ff66 #009900;
}
#spellControls ul#knownButtons input.prohibited {
	color:#009900;
	background:#99ff99;
	border-color:#ffffff #66cc66 #66cc66 #ffffff;
}
#spellControls ul#prepButtons input {
	color:#333300;
	background:#cccc33;
	border:solid medium;
	border-color:#ffff66 #999900 #999900 #ffff66;
}
#spellControls ul#prepButtons input:active {
	background:#ffff66;
	border-color:#999900 #ffff66 #ffff66 #999900;
}

#spellControls.concise input {
	font-size:0.75em;
}

#spellControls.verbose {
	position:relative;
	padding:0.5em;
	margin:0.25em 0.25em 0.5em 0.25em;
	background:#ffff99;
}
#spellControls.verbose>ul>li {
	margin:0.25em;
}

#applyMetamagic li.invalid {
	display:none;
}
#applyMetamagic li.valid {
	margin-left:1em;
}
#applyMetamagic a {
	color:#000000;
	text-decoration:none;
}

#spellControls>a#expandSpellControls {
	position:absolute;
	top:0.25em;
	right:0.25em;
	line-height:1em;
	color:#993300;
	text-decoration:none;
	background:#ff3333;
}

#spellDetail>h2 {
	font-size:1.5em;
	line-height:1em;
	margin:0.2em 0;
}
#spellDetail>h3 {
	font-size:1.125em;
	line-height:1em;
	margin:0.222em 0;
}

ul#spellDetailList>li {
	line-height:1.25em;
	margin-top:0.5em;
	margin-bottom:0.5em;
}
ul#spellDetailList>li h4,ul#spellDetailList>li p {
	display:inline;
	font-size:1em;
}
ul#spellDetailList>li h4:after {
	content:": ";
}

#spellDescription {
	clear:both;
}
#spellDescription p {
	margin-top:0.5em;
	margin-bottom:0.5em;
}


/*********************/
/* CHARACTER PROFILE */
/*********************/

#charProfile h3 {
	font-size:1.25em;
	margin:0.25em 0;
}

#charProfile h3 input,ul#abilList input {
	font-size:1em;
}

ul.statsBlocks {
	position:relative;
	overflow:hidden;
	margin:0.5em 0;
}
ul.statsBlocks>li {
	display:inline-block;
	vertical-align:top;
	margin:0 0.5em -10000px 0;
	padding:0 0.375em 10000px 0.375em;
	background:#999966;
}
ul.statsBlocks>li>ul>li {
	position:relative;
	margin:0.375em 0;
	padding:0.125em 0.25em 0.25em 0.25em;
	background:#ffff66;
}

ul#abilList>li {
	text-align:right;
}
ul#abilList>li input {
	width:1.75em;
}

ul#lvList,ul#featList {
	width:20em;
}

#charProfile p.nav {
	position:absolute;
	top:0;
	right:0;
	line-height:1em;
}
#charProfile p.nav a {
	display:inline-block;
	margin:0.125em;
	padding:0.125em;
	color:black;
	text-decoration:none;
	background:#ff3333;
}
#charProfile p.nav a:hover {
	background:#ffffff;
}
#charProfile p.nav a:active {
	background:#00ff00;
}

#charProfile textarea {
	display:block;
	width:42em;
	height:8em;
	font-family:inherit;
	overflow:auto;
}

#charProfile p.buttons {
	margin:0.5em 0;
}

#charProfile p.note {
	margin:0.5em 0;
	color:#cc0000;
}


/**********/
/* FOOTER */
/**********/

#spellLibFooter {
	clear:both;
	padding:0.25em;
	background:#999966;
}

#spellLibFooter p {
	font-size:0.75em;
	line-height:1em;
	color:#ffffff;
}
#spellLibFooter p a {
	color:#ffffff;
}


/****************/
/* RESTRICTIONS */
/****************/

.noscript #spellLibHeader,.noscript #spellLibMain,.noscript #spellLibFooter {
	display:none;
}
.nouser #charMenu *,.nouser li#menuWelcome,.nouser li#menuLogout {
	display:none;
}
.user li#menuLogin,.user #menuRegister {
	display:none;
}

.nochar #charProfile,.nochar li#repertoireModeTab,.nochar li#saveButton,.nochar li#editButton,.nochar li#deleteButton,.nochar li#castableOption,.nochar #spellControls {
	display:none;
}
.char #charProfile {
	display:none;
}
.edit #charMenu,.edit #spellLibrary,.edit #spellDetail {
	display:none;
}

.browse #libOptions,.browse input#resetSlots,.browse ul#slotLists {
	display:none;
}
.repertoire #libOptions,.repertoire ul#libClsTabs li.nocast {
	display:none;
}
.options ul#libModeTabs,.options ul#libClsTabs,.options #libList,.options input#resetSlots,.options ul#slotLists {
	display:none;
}

