characterSheet.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. html, body {
  2. padding-top: 40px;
  3. padding-left: 20px;
  4. padding-right: 20px;
  5. background-color: #FEFEF2;
  6. }
  7. label {
  8. text-transform: uppercase;
  9. font-family: arial;
  10. font-size: 10px;
  11. padding-left: 5px;
  12. }
  13. input {
  14. background-color: #FEFEF2;
  15. }
  16. input[type=text] {
  17. border-width: 0px;
  18. border-bottom: 1px solid black;
  19. outline: none;
  20. margin: 5px;
  21. padding-left: 5px;
  22. padding-right: 5px;
  23. }
  24. input[type=text]:focus, textarea:focus {
  25. background-color: #E0FFFF;
  26. }
  27. .textInput {
  28. float: left;
  29. }
  30. .line {
  31. clear: both;
  32. }
  33. .infobox {
  34. text-align: center;
  35. background-color: #000000;
  36. color: #FEFEF2;
  37. text-transform: uppercase;
  38. font-family: arial;
  39. font-size: 8px;
  40. border: 2px solid #FEFEF2;
  41. line-height: 16px;
  42. }
  43. .infobox h1 {
  44. font-weight: bold;
  45. font-size: 20px;
  46. line-height: 16px;
  47. }
  48. .inputbox input[type=text] {
  49. height: 30px;
  50. width: 40px;
  51. border: 1px solid black;
  52. text-align: center;
  53. }
  54. .temp {
  55. background-color: #AFAFAF;
  56. }
  57. .temp input[type=text] {
  58. border-color: #AFAFAF;
  59. }
  60. #window {
  61. background-color: #FEFEF2;
  62. /*width: 1024px;*/
  63. /*border-right: 1px solid red;*/
  64. }
  65. #headerInfo {
  66. float: left;
  67. }
  68. #characterSheetLogo {
  69. float: left;
  70. width: 340px;
  71. padding: 5px;
  72. height: 100px;
  73. background: url("/images/charactersheet_logo.png");
  74. background-size: 340px 100px;
  75. background-repeat: no-repeat;
  76. }
  77. #abilityGrid {
  78. padding-top: 20px;
  79. width: 200px;
  80. clear: both;
  81. }
  82. #characterName {
  83. width: 300px;
  84. }
  85. #playerName {
  86. width: 300px;
  87. }
  88. #classAndLevel {
  89. width: 300px;
  90. }
  91. #race {
  92. width: 95px;
  93. }
  94. #alignment {
  95. width: 95px;
  96. }
  97. #deity {
  98. width: 90px;
  99. }
  100. #size {
  101. width: 70px;
  102. }
  103. #age {
  104. width: 60px;
  105. }
  106. #gender {
  107. width: 70px;
  108. }
  109. #height {
  110. width: 70px;
  111. }
  112. #weight{
  113. width: 65px;
  114. }
  115. #eyes {
  116. width: 70px;
  117. }
  118. #hair {
  119. width: 70px;
  120. }
  121. #skin {
  122. width: 65px;
  123. }
  124. #abilityGrid tr {
  125. text-align: center;
  126. text-transform: uppercase;
  127. font-family: arial;
  128. font-size: 8px;
  129. }
  130. #abilityGrid {
  131. display: table;
  132. border-spacing: 0px;
  133. border-collapse: seperate;
  134. }