ProgressQuest-web/pq.css

/* RESET (via Boilerplate via Eric Meyer) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td { 
  margin: 0; 
  padding: 0; 
  border: 0;
  outline: 0; 
  font-size: 100%; 
  vertical-align: baseline;
  background: transparent; 
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { 
  content: ''; content: none; 
}
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/* XULish */

.hbox > * { 
  vertical-align: middle;
}

.vbox > * { 
  display: block;
}


.hbox > *, .horizontal > *, td > * { 
  display: inline-block;
}


.vbox {
  vertical-align: top;
}

td, th, .label, tr input, #titlebar, div { 
  font-family: Helvetica;
  font-size: 8pt;
}

td, th { 
  padding-left: 1ex;
}

th { 
  border-bottom: solid 1px grey;
  background-color: #eee;
  text-align: left;
  font-weight: normal;
}

th:first-child { 
  border-right: solid 1px grey;
}

thead.mid { 
  border-top: solid 1px grey;
}

.label { 
  margin-top: 3px;
}

.listbox { 
  border: solid 1px black;
  width: 250px;
  background-color: white;
}

fieldset { 
  border: solid 1px #aaa;
  width: 180px;
}

fieldset table { 
  width: 100px;
  border: none 0px black;
  border-right: none !IMPORTANT;
  border-spacing: 10px;
  border-collapse: separate;
  background-color: transparent;
}

fieldset table th { 
  border: none;
  margin-bottom: 1ex;
  border-right: none !IMPORTANT;
  width: 5ex;
}

fieldset table td { 
  border: solid 1px #aaa;
  text-align: center;
  width: 4ex;
}

.head {
  font-weight: bold;
  font-size: 9pt;
  margin: 2px 0 2px 0;
}

div.progress-container { 
  border: 1px solid #ccc; 
  width: 250px; 
  margin: 2px 5px 2px 0; 
  padding: 1px; 
  background: white;
  overflow: hidden;
}

div.progress-container > div.bar { 
  background-color: #ACE97C; 
  height: 12px;
  width: 50%;
}

div.hint { 
  z-index: 20;
  position: absolute;
  margin-top: 1px;
  visibility: hidden;
  width: 250px;
  text-align: center;
  color: #060;
}

div.progress-container:hover div.hint { 
  visibility: visible;
}


#titlebar { 
  background-color: #008;
  color: white;
  font-weight: bold;
  font-size: 9pt;
  padding-bottom: 4px;
  margin-bottom: 1ex;
}

#titlebar > img { 
  vertical-align: bottom;
  margin: 2 0 0 2;
}

 

.window { 
  background-color: #eee; 
  border: outset 2px silver;
  padding: 2px;
  margin: 1em;
  text-align: left;
  display: inline-block;
}


#main.window { 
  width: 820px; 
}

body { 
  background: url(back.jpg) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  margin-top: 1em;
}

#TaskBar, #TaskBar .hint { 
  width: 800px;
 }

div.scroll { 
  overflow: scroll;
  height: 100px;
  width: 250px;
  overflow-x: hidden;
}

div.scroll > table { 
  width: 234px;
}

.selected { 
  background-color: yellow;
}

/* New guy form TODO: move this */

#newguy.window { 
  width: 508px; 
}

#newguy > .client { 
  padding: 4px;
}

#newguy > #titlebar { 
  margin-bottom: 0;
}

#races, #classes { 
  width: 185px;
}

#classes, #stats { 
  height: 365px;
}

#stats { 
  width: 109px;
}

.window#newguy .vbox button { 
  width: 75px;
  margin: 4px;
}