html,body,#outer{height:100%;padding:0;margin:0}
body{font:75% "Trebuchet MS",sans-serif;background-color:#333}
#header,#footer{position:fixed;width:90%;padding:.5em;z-index:99;background-color:#555;border-radius:10px;border:1px solid #000;text-align:center;left:5%}
#header{top:0px}
#footer{bottom:0px}

#spelltype{margin:2em auto;display:table;text-align:center;width:30em}
#spelltype ul{margin-left:-10em}
#spelltype a{display:block;width:9em}
#spelltype div.tabbox{height:100%;width:auto;text-align:left;float:none;margin-left:2em}

#holder>div>div{border:.15em none #333;border-bottom-style:solid}
#holder select{width:90%}

div.roundwide{width:25em}
.roundbox{border:.15em solid #888;border-radius:10px;width:45%;background-color:#111;padding:.5em}
.roundwide label{width:24em;margin:0 auto;text-align:left}
.roundwide .selectbox{width:24em}
.buttonbox{margin-bottom:.5em;text-align:center}

div div h2{text-align:center;color:#44a;text-shadow:0.15em 0.1em #004}
h3{text-align:center;margin-top:0px}
select{margin:0 auto;display:block;width:90%}
input[type='checkbox']{margin-left:1em}
input[type='textbox']{padding:.3em .5em .3em 1em;}
span.ui-state-query{font-weight:normal}
p{margin-left:1em}
ul li select{width:auto;margin:0;display:inline}
select,textarea,input,button{outline:none !important}
table{border-collapse:collapse}

.ui-tabs-vertical{width:55em}
.ui-tabs-vertical .ui-tabs-nav{padding:.2em .1em .2em .2em;float:left;width:12em}
.ui-tabs-vertical .ui-tabs-nav li{clear:left;width:100%;border-bottom-width:1px !important;border-right-width:0 !important;margin:0 -1px .2em 0}
.ui-tabs-vertical .ui-tabs-nav li a{display:block}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active{padding-bottom:0;padding-right:.1em;border-right-width:1px}
.ui-tabs-vertical .ui-tabs-panel{padding:1em;float:right;width:40em}
.ui-button:disabled, .ui-button:disabled:hover {border: 1px solid #444; background: #222 url(/jquery-ui/images/ui-bg_highlight-soft_35_222222_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #999}

#popsave_text {width:90%;margin:0 auto;height:5em;border:.1em solid #333;border-radius:.3em;padding:.3em}
.no-close .ui-dialog-titlebar-close{display:none;}

#popload input[type="text"]{padding-left:2em;margin:.5em auto}

#info{border-style:none;width:65em;overflow:auto;padding:2.5em 1em;margin:0}
#wrapper{margin:0 auto;width:67em;padding:0;height:100%;border-top:none;border-bottom:none}
#powertrade{height:40em}
#profs{height:20em;overflow:auto}

.over{float:right;clear:right;width:30em}
#magics input{width:3em}
#magics button{width:2em;padding-left:0;padding-right:0}
#stats,#ranks{width:60%}
#spells{border-collapse:collapse}
#spells td{padding:.1em .3em;text-align:center}
#spells thead tr td{border-bottom:.1em solid #fff}
#spells td:first-child{border-right:.1em solid #fff;text-align:right}
.error{background-color:#f00}
#errors{display:none}
/*#errors p span{float:left;margin-right:.3em}*/
#magicpowerlist{height:25em;overflow:auto}

.power,.powers,.trade,.class{position:relative;display:inline-block;border-radius:.5em;border:1px solid #007;background-color:#555;margin:.2em;padding:.2em;width:90%;text-align:center;cursor:pointer}
.target{display:inline-block;border-radius:5px;border:2px dashed #007;background-color:#555;height:2em;width:90%}
div.activetarget{border-color:#077;background-color:#0aa}
span.helper{width:15em;cursor:copy}
.remove{font-size:75%;border-bottom-left-radius:.67em;border-top-right-radius:.67em;padding:.15em;background-color:#900;border:1px solid #400;display:block;position:absolute;top:0;right:0}
#fightingSel{width:100%;text-align:center}
#fightingSel label{width:35%}
#magic{display:none}
.roundbox>div{margin-bottom:1em}
.ui-controlgroup-vertical {width: 75%}
.ui-controlgroup.ui-controlgroup-vertical>.ui-button {text-align: center;}

.scrolldn{height:2em;position:relative;width:100%;z-index:10;margin-top:-3em}

#profs>div{overflow:auto;height:15em}
#weaponwarning{color:#f00}
#thief>div:last-child{text-align:center}

div div.raceholder{border:2px solid #777;height:34em;overflow:auto;padding:.5em;margin:0}
.raceholder textarea{float:right;height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#000 linear-gradient(#333,#000,#444);color:#fff;padding:.3em 5em .3em 1em;outline:none;border:1px solid #444444;resize:none;}
.raceholder textarea.selected{height:15em;width:90%;white-space:normal;overflow-y:scroll;margin:0 auto;padding:.5em;}
#minval{width:3em}

#hd>div,#fighter>div,#thief>div,#divine>div,#arcane>div,#custommagic>div,#racename>div,#racepoints>div{width:100%;overflow:hidden}
#hdsel-button,#fightsel-button,#thiefsel-button,#divinesel-button,#arcanesel-button,#custommagicsel-button,#racenamesel-button,#racepointssel-button{float:right;clear:both}
#fightersel label{margin:0 auto;}
#levels input{width:10em}
#levels .backarcane,#levels .backdivine,#levels .backcustommagic{border-color:#444;border-width:1px;border-left-style:solid;padding-left:4px;text-align:center}
#levels .backarcane ~ .backarcane,#levels .backdivine ~ .backdivine,#levels .backcustommagic ~ .backcustommagic{border-left-style:none;padding-left:2px}
#levels tr td.backarcane:last-child,#levels tr td.backdivine:last-child,#levels tr td.backcustommagic:last-child{border-right-style:solid}
#levels thead tr:first-child td.backarcane,#levels thead tr:first-child td.backdivine,#levels thead tr:first-child td.backcustommagic{border-top-style:solid}
#levels tr:last-child td.backarcane,#levels tr:last-child td.backdivine,#levels tr:last-child td.backcustommagic{border-bottom-style:solid}
.prof{width:99%;display:block;float:left}
.prof input[type="text"]{float:right;clear:right;width:10em}
#loadprof{float:right}
#profs>div{clear:right}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

#desc{width: 28.75em;height:9em; margin: 0 auto;background:#000 linear-gradient(#333,#000,#444);color:#fff;padding:.5em}
#desc.focus{background-image:none;}