/* 423d50 - dark
 * 5A4F79 - background
 * 9082b7 - inbetween
 * c8b6fb - link hover
 */

body { background: #000; color: #fff; text-align: center; margin-top: 0; }
h1, h2, ul { padding: 0; margin: 0; }
a { font-family: arial; font-size: 12px; font-weight: bold; text-decoration: none; color: #fff; }
a:hover { color: #c8b6fb; }
a img { border: 0; }

/***** main layout *****/
#container { background: #000; width: 800px; text-align: left; margin-right: auto; margin-left: auto; }
#title { height: 35px; clear: both; background: url('../images/warlocks-t.png') no-repeat #5A4F79; position: relative; }
#title h1 { color: #c8b6fb; font-size: 35px; font-weight: normal; font-family: arial; margin-left: 15px; visibility: hidden; }
/*
#title h1 em { margin-left: 15px; position: relative; top: -3px; font-size: 15px; font-style: normal; }
#title h1 em:before { margin-left: 5px; content: "{"; }
#title h1 em:after { margin-right: 5px; content: "}"; }
*/
#icon { background: url('../images/warlock.gif'); width: 47px; height: 47px; position: absolute; top: 6px; right: 6px; z-index: 3; }
#navigation { clear: both; background: url('../images/warlocks-t.png') no-repeat #5A4F79 0px -35px; width: 100%; height: 25px; }
#navigation ul { list-style: none; float: right; margin-right: 62px; position: relative; top: -5px; }
#navigation li { float: left; }
#navigation li.first:before { margin-right: 5px; content: "["; color: #fff; }
#navigation li:after { margin: 0 5px 0 5px; content: "|"; color: #fff; }
#navigation li.last:after { margin-left: 5px; content: "]"; color: #fff; }
#content { clear: both; position: relative; overflow: auto; text-align: center; font-family: arial; font-size: 12px; }
#content-divider {
  width: 1px;
  background: #5a4f79;
  height: 100%;
  position: absolute;
  left: 50%;
}
#info { border-top: 1px solid #5A4F79; overflow: auto; }
#authors { float: right; color: #c8b6fb; font-size: 10px; font-family: arial; margin-right: 5px; width: 100px; }
#authors .year { float: left; }
#authors .author { float: right; }
#validation { overflow: auto; float: left; width: 170px; padding: 0 2px 0 0; }
#validation .css { float: right; }
#validation .xhtml { float: left; }

.corner-topright { background: url('../images/topright.gif') no-repeat top right; }
.corner-topleft { font-size: 0; height: 10px; background: url('../images/topleft.gif') no-repeat top left; }
.corner-bottomright { background: url('../images/bottomright.gif') no-repeat bottom right; z-index: 1; }
.corner-bottomleft { font-size: 0; height: 10px; background: url('../images/bottomleft.gif') no-repeat bottom left; z-index: 1; }
.corner-nav { position: relative; top: 15px; }

table {
  margin-left: auto;
  margin-right: auto;
  width: 675px;
  border-collapse: collapse;
}
th { border-bottom: 1px solid #5a4f79; }

/***** profile-select *****/
#profile-select th.num, #profile-select td.num { width: 25px; text-align: center; }
#profile-select th.name, #profile-select td.name { width: 200px; }
#profile-select .name a, #profile-select .talents a { display: block; }
#profile-select th.race, #profile-select td.race { width: 60px; text-align: right; }
#profile-select .race img { width: 16px; height: 16px; }
#profile-select th.basedon, #profile-select td.basedon { width: 116px; }
#profile-select th.talents, #profile-select td.talents { width: 50px; }
#profile-select th.date, #profile-select td.date { width: 40px;; }
#profile-select th.del, #profile-select td.del { width: 25px; text-align: center; }
#profile-select td.basedon, #profile-select td.date { font-size: 10px; }
#profile-select tr.a:hover td { background: #423d50; }
#profile-select tr.a:hover td.num { font-weight: bold; font-size: 16px; }
#profile-select tr.a:hover .race img { width: 24px; height: 24px; }
#profile-select td { height: 32px; }
#profile-select th.summary, #profile-select td.summary {
  border-top: 1px dotted #5a4f79;
  padding-top: 3px;
  padding-right: 15px;
  text-align: right;
}

/***** professions *****/
#professions {
  clear: both;
  overflow: auto;
  margin: 10px auto 25px auto;
  width: 450px;
  border: 1px solid #5a4f79;
  background: #423d50;
}
#professions .prof1 div, #professions .prof2 div {
  margin: 0 auto 3px auto;
  font-weight: bold;
  text-align: left;
  width: 150px;
}
#professions .prof1, #professions .prof2 {
  margin: 5px 0 5px 5px;
  float: left;
  width: 215px;
  text-align: center;
}
#professions .prof2 { float: right; }
#professions select {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
}

/***** profile-edit *****/
#profile-edit th.item, #profile-edit td.item {
  width: 300px;
  border-right: 1px solid #5a4f79;
  text-align: center;
}
#profile-edit th.item { border-bottom: 0; border-right: 0; }
#profile-edit th.label, #profile-edit td.label { border-bottom: 0; text-align: right; }
#profile-edit th.stat, #profile-edit td.stat { border-right: 1px dotted #5a4f79; text-align: center; }
#profile-edit .t th.stat {
  height: 25px;
  background: #5a4f79;
  color: #fff;
}
#profile-edit .t .stat { border-right: 1px dotted #000; }
#profile-edit th.f { border-left: 1px solid #5a4f79; }
#profile-edit td.l { border-right: 1px solid #5a4f79; }
#profile-edit th.l { border-right: 0; }
#profile-edit .t th.l { border-right: 1px solid #5a4f79; }
#profile-edit .active label, #profile-edit .inactive label { font-size: 10px; }
#profile-edit .inactive { color: #737373; }
#profile-edit select, #professions select {
  margin-left: auto;
  margin-right: auto;
  color: #c8b6fb;
  background: #000;
  border: 1px solid #5a4f79;
  font-family: arial;
  font-size: 12px;
}
#profile-edit select { width: 95%; }
#profile-edit option, #professions option {
  color: #c8b6fb;
  font-weight: normal;
}
#profile-edit option[selected="selected"], #professions option[selected="selected"] { color: #fff; }
#profile-edit .s td {
  font-size: 1px;
  height: 15px;
  text-align: right;
}
#profile-edit select.gem-m { border-color: #a5a5a5; }
#profile-edit select.gem-b { border-color: #35a0eb; }
#profile-edit select.gem-r { border-color: #eb3535; }
#profile-edit select.gem-y { border-color: #e9eb35; }
#profile-edit option.gem-m { color: #a5a5a5; }
#profile-edit option.gem-b { color: #35a0eb; }
#profile-edit option.gem-g { color: #35eb35; }
#profile-edit option.gem-o { color: #ffa200; }
#profile-edit option.gem-p { color: #ba00ff; }
#profile-edit option.gem-r { color: #eb3535; }
#profile-edit option.gem-y { color: #e9eb35; }
#profile-edit .s hr {
  text-align: left;
  width: 85%;
  border: 0;
  border-bottom: 1px solid #5a4f79;
}
#profile-edit-submit {
  margin: 25px auto 25px auto;
  padding: 5px 0 5px 0;
  width: 450px;
  border: 1px solid #5a4f79;
  background: #423d50;
  text-align: center;
}
#profile-edit-submit input {
  font-family: arial;
  font-size: 12px;
  background: #423d50;
  width: 75px;
  border: 1px solid #5a4f79;
  color: #c8b6fb;
}

/* for 1 column */
.content-layout {
  width: 750px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* for 2 columns */
.content-container {
  float: left;
  width: 375px;
  text-align: center;
  padding: 20px 0 20px 0;
}
.content-container .content-inlay {
  width: 250px;
  text-align: left;
  margin-right: auto;
  margin-left: auto;
}
.form {
  text-align: center;
}
.form div {
  clear: both;
  padding: 3px 0 3px 0;
}
.form span {
  float: left;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.form em {
  font-style: normal;
  float: right;
  font-family: arial;
  font-size: 12px;
}
.form input {
  float: right;
  font-family: arial;
  font-size: 12px;
  width: 100px;
  background: #000;
  border: 1px solid #5a4f79;
  color: #c8b6fb;
}
.form input[type="radio"]{
  margin-right: 15px;
  position: relative;
  top: -2px;
  float: right;
  border: 0;
  width: auto;
}
.form input[type="submit"]{
  float: none;
  width: auto;
}


#content h2 {
  font-family: arial;
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 15px;
}
#content h2 em {
  font-style: normal;
  font-weight: bold;
  color: #9082b7;
  font-size: 17px;
  border-bottom: 1px dotted #fff;
}
#content h2.error {
  font-size: 11px;
  margin-bottom: 3px;
}
#content h2.error em {
  color: #a41c1c;
  font-size: 12px;
}
#content h2.big {
  font-size: 13px;
}
#content h2.big em {
  font-size: 17px;
}
#content ul.error {
  list-style: square inside;
  padding-left: 15px;
  margin-bottom: 10px;
}
#content ul.error li {
  font-size: 11px;
  font-family: arial;
  color: #a41c1c;
}

/***** login/register *****/
#login, #register {
/*  position: relative;*/
  float: left;
/*  height: 300px;*/
  width: 375px;
  text-align: center;
  padding: 50px 0 50px 0;
}
#register { float: right; }
#login .lr-container, #register .lr-container {
  width: 200px;
/*
  height: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -125px 0 0 -100px;
*/
  margin: 0 auto 0 auto;
  text-align: left;
}
.lr-container login h2 {
  font-family: arial;
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 15px;
}
.lr-container h2 em {
  font-style: normal;
  font-weight: bold;
  color: #9082b7;
  font-size: 17px;
  border-bottom: 1px dotted #fff;
}
.lr-container h2.error {
  font-size: 11px;
  margin-bottom: 3px;
}
.lr-container h2.error em {
  color: #a41c1c;
  font-size: 12px;
}
.lr-container ul {
  list-style: square inside;
  padding-left: 15px;
  margin-bottom: 10px;
}
.lr-container li {
  font-size: 11px;
  font-family: arial;
  color: #a41c1c;
}
.lr-container div {
  clear: both;
  padding: 3px 0 3px 0;
  overflow: auto;
}
.lr-container span {
  float: left;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
.lr-container input {
  float: right;
  font-family: arial;
  font-size: 12px;
  width: 100px;
  background: #000;
  border: 1px solid #5a4f79;
  color: #c8b6fb;
}
.lr-container .submit { text-align: center; }
.lr-container input[type="checkbox"] { margin-left: 15px;float: left; width: auto; border: 0; }
.lr-container input[type="submit"] { float: none; width: auto; }