/*
  main.css

  Defines the implementation of the 3EProfiler character sheet.
*/

/************************************************************************/

/*
  Define the html root element, all elements will inherit from this
  element. Defining the td element is an Explorer hack.
*/

html
{
  font-size: 9px;
  color: black;
  background-color: white;
  font-family: Tahoma, Arial, sans-serif;
}
input
{
  font-size: 13px;
}
body 
{
  margin: auto;
  width: 7in;
}

/*
  Define the basic layout elements.
*/

#maintable
{
  width: 100%;
}
#main
{
  width: 7in;
}

#maintable td 
{
  font-size: 9px;
  color: black;
  background-color: white;
  font-family: Tahoma, Arial, sans-serif;
}

/************************************************************************/

#info
{
  width: 100%;
}
#info td
{
  padding: 0 2px 0 2px;
  margin: 0;
}
#info span
{
  letter-spacing: .1em;
  color: gray;
  background-color: white;
}
#info span.help
{
  cursor: help;
  color: black;
}
#info input
{
  width: 100%;
  border-style: solid;
  border-color: black;
  border-width: 0 0 1px 0;
}
#info td.unit
{
  width: 12.5%;
}

/************************************************************************/

#stats
{
  width: 100%;
  margin-top: 1em;
}
#stats td.unit
{
  width: 33.3%;
}
#stats input
{
  width: 97%;
}
#stats td.top
{
  vertical-align: top;
}
#stats td.bottom
{
  vertical-align: bottom;
}
#stats td.header
{
  vertical-align: bottom;
}
#stats td.footer
{
  vertical-align: top;
}
#stats td.header
, #stats td.footer
, #stats td.title
{
  text-align: center;
  color: gray;
  background-color: white;
}
#stats td.tag
{
  vertical-align: middle;
  text-align: center;
  color: white;
  background-color: black;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  width:10%;
}

#stats span.help
{
  cursor: help;
  color: white;
}

#stats span.helplink
{
  cursor: help;
  color: gray;
}

#statblock
{
  width: 100%;
}
#statblock td
{
  width: 20%;
  padding: 0;
}
#statblock input
{
  padding: 1px;
  text-align: center;
}
#statblock input.mod
{
  border: 1px solid black;
}
#statblock input.tempmod
{
  border: 1px solid gray;
}

#hp
{
  width: 100%;
}
#hp td
{
  padding: 0;
  text-align: center;
}
#hp span.help
{
  cursor: help;
  color:  white;
}
#hp td.basenum
{
  width: 2em;
}
#hp td.basenum span
{
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
#hp td.unit
{
  width: 8%;
}
#hp td.char
{
  width: 1em;
  text-align: center;
}
#hp td.char span
{
  color: black;
  background-color: white;
}
#hp input
{
  border: 1px solid black;
  padding: 1px;
  text-align: center;
}

#init
{
  width: 100%;
}
#init td
{
  padding: 0;
}
#init td.char
{
  width: 1em;
  text-align: center;
}
#init td.unit
{
  width: 20%;
}
#init input
{
  border: 1px solid black;
  text-align: center;
  padding: 1px;
}

#speed
{
  width: 100%;
}
#speed td
{
  padding: 0;
  width: 50%;
}
#speed input
{
  border: 1px solid black;
  text-align: center;
  padding: 1px;
}

#imgload
{
  width: 100%;
}
#imgload td
{
  padding: 0;
}
#imgload #pic
{
  width: 125px;
  height: 193px;
  border: 1px solid black;
  cursor: pointer;
}
#imgload td.loadtext
{
  padding-left: 1em;
  text-align: left;
}
#imgload span.help
{
  color: gray;
}
#imgload input
{
  border: 1px solid black;
  text-align: center;
}
#imgload td.loadinputs
{
  width: 6em;
}

#saves
{
  width: 100%;
}
#saves td
{
  padding: 0;
}
#saves td.unit
{
  width: 11%;
}
#saves td.char
{
  width: 1em;
  text-align: center;
}
#saves input
{
  border: 1px solid black;
  text-align: center;
}

/************************************************************************/

#attacks
{
  width: 100%;
  margin: 2em 0 2em 0;
}
#attacks td.wide
{
  width: 20%;
}
#attacks td.unit
{
  width: 8%;
}
#attacks td.char
{
  width: 1em;
  text-align: center;
}
#attacks input
{
  width: 97%;
  border: 1px solid black;
  text-align: center;
}
#attacks input.temp
{
  border: 1px solid gray;
}
#attacks td.header
{
  vertical-align: bottom;
}
#attacks td.footer
{
  vertical-align: top;
}
#attacks td.header
, #attacks td.footer
{
  text-align: center;
  color: gray;
  background-color: white;
}
#attacks td.tag
{
  vertical-align: middle;
  text-align: center;
  color: white;
  background-color: black;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
#attacks span.help
{
  cursor: help;
  color: white;
}

/************************************************************************/

table.weapon
, table.armor
{
  width: 100%;
  margin-top: .5em;
}
table.weapon span.help
{
  color: white;
  cursor: help;
}
table.weapon td.wide
{
  width: 45%;
}
table.weapon td.medium
{
  width: 16%;
}
table.weapon td.small
{
}
table.armor span.help
{
  color: white;
  cursor: help;
}
table.armor td.wide
{
  width: 60%;
}
table.armor td.medium
{
  width: 10%;
}
table.armor td.small
{
  width: 5%;
}
table.weapon td
, table.armor td
{
  padding: 0px;
  border: 1px solid black;
}
table.weapon tr.header td
, table.armor tr.header td
{
  color: white;
  background-color: black;
  text-align: center;
}

#maintable table.weapon td.type 
{
  font-weight: bold;
  font-size: 14px;
}

table.weapon td.type, table.armor td.type
{
  font-weight: bold;
  font-size: 14px;
}
 
#maintable table.weapon tr.header td
{
  color: white;
  background-color: black;
  font-family: Tahoma, Arial, sans-serif;
}

table.weapon tr.header td, table.armor tr.header td
{
  color: white;
  background-color: black;
  font-family: Tahoma, Arial, sans-serif;
}

#maintable table.armor td.type
{
  font-weight: bold;
  font-size: 14px;
}

#maintable table.armor tr.header td
{
  color: white;
  background-color: black;
  font-family: Tahoma, Arial, sans-serif;
}

table.weapon input
, table.armor input
{
  width: 100%;
  border: 0 solid;
  text-align: center;
}
table.weapon input.left
, table.armor input.left
{
  text-align: left;
}

/************************************************************************/

#skillsandgear
{
  width: 100%;
  margin-top: 2em;
}
#skillcontainer
{
  width: 50%;
}
#skillsandgear .spacer
{
  width: .5em;
}

#skills
{
  width: 100%;
}
#skills span.help
{
  cursor: help;
  color: white;
  background-color: black;
}
#skills span.helplink
{
  cursor: help;
}
#skills tr.title td
{
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: white;
  background-color: black;
  vertical-align: middle;
  padding: 1px 1px 1px .5em;
}
#skillranks
{
  float: right;
  width: 13em;
  font-size: 9px;
  font-weight: bold;
  padding: .1em;
}
#skillranks div
{
  float: right;
  width: auto;
  color: black;
  background-color: white;
}
#skillranks input
{
  font-size: 9px;
  width: 3em;
  border: 0 solid;
  color: black;
  background-color: white;
  padding: 1px;
  text-align: center;
}
#skillcontext
{
  font-size: 10px;
  visibility: hidden;
}
#skills tr.title span a
{
  color: white;
  background-color: black;
}
#skills tr.title span a:hover
{
  text-decoration: underline;
}
#skills tr.header td
{
  text-align: center;
  vertical-align: bottom;
}
#skills tr.header td.name
{
  text-align: left;
}
#skills tr.header span.help
{
  cursor: help;
}
#skills tr.skillslot td
{
  padding: 1px 1px 0 1px;
}
#skills tr.skillslot td.name
{
  padding: 1px 3px 0 1px;
}
#skills tr.skillslot td.char
{
  width: 1em;
}
#skills tr.skillslot td.unit
{
  width: 2.5em;
}
#skills tr.skillslot input.text
{
  width: 100%;
  border-style: none;
  border-top: 1px solid white;
  border-bottom: 1px solid black;
  font-size: 9px;
  text-align: center;
}
#skills tr.skillslot td.name input
{
  text-align: left;
}
#skills tr.skillslot input.chk
{
  height: 10px;
  width: 10px;
}
#skills tr.footer td
{
  color: gray;
  background-color: white;
  text-align: left;
}
#skills tr.footer td.total
{
  text-align: center;
}
#skills a
{
  color: black;
  background-color: white;
  text-decoration: none;
}
#skills a:hover
{
  text-decoration: underline;
}

#featsandgearcontainer
{
  vertical-align: top;
}

#feats
{
  width: 100%;
}

#feats span.help
{
  cursor: help;
  color: white;
}
#feats tr.title td
{
  color: white;
  background-color: black;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  padding: 1px 1px 1px .5em;
}
#feats td
{
  width: 50%;
}
#feats table
{
  width: 100%;
}
#feats table td
{
  width: 100%;
  padding: 1px 1px 0 1px;
}
#feats input
{
  border-style: none;
  border-top: 1px solid white;
  border-bottom: 1px solid black;
  font-size: 9px;
  width: 100%;
  text-align: left;
}
#feats td.featshelp
{
  width: 3%;
}


#gear
{
  width: 100%;
  margin: 9px 0 0 0;
}
#gear span.help
{
  cursor: help;
  color: white;
  background-color: black;
}
#gear tr.title td
{
  color: white;
  background-color: black;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
}
#gear tr.header td
{
  vertical-align: bottom;
  text-align: center;
}
#gear tr.header td.name
{
  text-align: left;
}
#gear tr.header span.help
{
  cursor: help;
}
#gear tr.slot td
{
  padding: 1px 2px 0 2px;
}
#gear td.unit
{
  width: 5em;
}
#gear input
{
  width: 100%;
  border-style: none;
  border-top: 1px solid white;
  border-bottom: 1px solid black;
  text-align: center;
  font-size: 9px
}
#gear input.name
{
  text-align: left;
}
#gear tr.footer td
{
  color: gray;
  background-color: white;
  text-align: left;
}
#gear tr.footer td.total
{
  text-align: center;
}
#gear a
{
  color: black;
  background-color: white;
  text-decoration: none;
}
#gear a:hover
{
  text-decoration: underline;
}

/************************************************************************/

#spellstuff
{
  width: 100%;
  margin-top: 2em;
}
#spellstuff td.saves
{
  width: 25%;
  vertical-align: top;
}

#spellsaves
{
  width: 100%;
}
#spellsaves tr.title td
{
  background-color: black;
  color: white;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
}
#spellsaves tr.header td
{
  vertical-align: bottom;
  text-align: center;
  background-color: white;
  color: gray;
}
#spellsaves tr.header td
, #spellsaves tr.save td
{
  padding: 2px;
}
#spellsaves td.level
{
  background-color: white;
  color: black;
  text-align: center;
  cursor: help;
}
#spellsaves td.noinput
{
  background-color: white;
  color: black;
  text-align: center;
}
#spellsaves td
{
  width: 25%;
}
#spellsaves td input
{
  text-align: center;
  border: 1px solid black;
  width: 100%;
}

#spellstuff td.currency
{
  vertical-align: top;
}
#currency
{
  width: 100%;
}
#currency tr.title td
{
  background-color: black;
  color: white;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
}
#currency textarea
{
  border: 1px solid black;
  width: 100%;
  font-size: 12px;
  font-family: Arial, sans-serif;
  height: 60px;
  padding: 2px;
}

#spellstuff td.languages
{
  vertical-align: bottom;
}
#languages
{
  width: 100%;
}
#languages tr.title td
{
  background-color: black;
  color: white;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
}
#languages td
{
  padding: 0 0 1px 0;
}
#languages td input
{
  border-style: none;
  border-top: 1px solid white;
  border-bottom: 1px solid black;
  width: 100%;
  font-size: 9px;
}

#spells
{
  width: 98%;
  margin-left: 2%;
}
#spells span.help
{
  cursor: help;
  color: white;
  background-color: black;
}
#spells tr.title td
{
  background-color: black;
  color: white;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
}
#spellsaves table.spellsknown tr.header td
{
  text-align: center;
}
#spellsaves table.spellsknown tr.title td
{
  background-color: black;
  color: white;
  text-decoration: none;
  text-align: center;
}
#spellsaves table.spellsknown tr.title td a
{
  color: white;
  text-decoration: none;
}

#spellsaves table.spellsknown input
{
  width: 5em;
  border-style: none;
  border-top: 1px solid white;
  border-bottom: 1px solid black;
  font-size: 9px;
  text-align: center;
}

#spells table.spelllist td
{
  padding: 1px 2px 0 2px;;
}
#spells table.spelllist
{
  width: 100%;
  margin-top: 1em;
}
#spells table.spelllist tr.header td
{
  background-color: white;
  color: gray;
  vertical-align: bottom;
}
#spells table.spelllist tr.header td.mem
, #spells table.spelllist tr td.mem input
{
  width: 100%;
  text-align: center;
}
#spells table.spelllist tr td.help
{
  cursor: help;
}
#spells table.spelllist td.name
{
  width: 85%;
}
#spells table.spelllist input
{
  width: 100%;
  border-style: solid;
  border-color: black;
  border-width: 0 0 1px 0;
  font-size: 9px;
}
#spells a
{
  color: black;
  background-color: white;
  text-decoration: none;
}
#spells a:hover
{
  text-decoration: underline;
}

/************************************************************************/

#notes
{
  width: 100%;
  margin-top: 2em;
}
#notes tr.header td
{
  background-color: black;
  color: white;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
}
#notes tr.header td span
, #notes tr.header td a
{
  background-color: black;
  color: white;
  font-size: 12px;
  font-weight: normal;
  font-variant: small-caps;
  text-decoration: none;
}
#notes tr.header td a:hover
{
  background-color: black;
  color: white;
  text-decoration: underline;
}
#notes textarea
{
  border: 1px solid black;
  width: 100%;
  font-size: 12px;
  font-family: Arial, sans-serif;
  height: 340px;
  padding: 2px;
}
#notes div
{
  border: 1px solid black;
  font-size: 12px;
  font-family: Arial, sans-serif;
  padding: 2px;
}

input.cash
{
  border-style: none;
  border-top: 1px solid white;
  border-bottom: 1px solid black;
  font-size: 9px;
  background-color: white;
  width: 60px;
  text-align: right;
}
/************************************************************************/

#footer td
{
  font-size: 9px;
  background-color: white;
  color: gray;
}
#save
{
  text-align: center;
}