/* VANILLA BOARD STYLE =================================================== */

html, body {
  padding: 0;
  margin: 0;
  font-size: 62.5%;
  height: 100%;
}

a.warn:link,
a.warn:visited,
a.warn:active {
  color: #c00;
  padding-left: 1px;
}

a.warn:hover {
  color: #fff;
  background-color: #f00;
  text-decoration: none;
  padding-left: 1px;
}

#content {
  width: 950px;
  margin: 0 auto;
}

#content,
.editor {
  font-family: "Times New Roman";
}

h1 {
  font-size: 5em;
}

table#entries {
  width: 100%;
}

table#entries.columns_1 td,
table#entries.columns_1 th {
  width: 100%;
}

table#entries.columns_2 td,
table#entries.columns_2 th {
  width: 50%;
}

table#entries.columns_3 td,
table#entries.columns_3 th {
  width: 33%;
}

table#entries thead .editable,          /* Size of top header text */
table#entries thead .editor,
table#entries thead .static {
  font-size: 3.5em;
  line-height: 1.2em;
}

table#entries tbody .editable,          /* Size of standard body text */
table#entries tbody .editor,
table#entries tbody .static {
  font-size: 2.5em;
  line-height: 1.2em;
}

table#entries textarea.editor {
  height: 10em;
}

table#entries td,
table#entries th {
  vertical-align: top;
  padding: 1px;
}

.editable,
.editor {
  display: block;
  color: #009;
  width: 100%;
}

.editable:hover {
  outline: 1px dashed #444;
}

table#entries td.view,                  /* Compensate for editor field border */
table#entries th.view {
  padding: 8px;
  padding-bottom: 1px;
}

table#entries td.edit,
table#entries th.edit {
  padding: 1px;
}

p.fields {
  border: 1px solid #444;
}

p.fields span {
  display: block;
  border: 5px solid #d4e6c3;
  padding-right: 2px;
}

.editor {
  padding: 0;
  margin: 0;
  border: 1px solid #444;
}

p.commands {
  display: inline;
  font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  background-color: #d4e6c3;
  float: right;
  margin-right: 6px;
  margin-top: -1px;
  border: 1px solid #444;
  border-top: #666;
  padding: 1px 5px 3px 5px;
}

p.commands input {
  font-size: 2em;
}

p.commands span {
  font-size: 1.5em;
}

p.commands a {
  font-size: 2em;
}


/* NAVIGATION HEADER ===================================================== */

div.header_placeholder,
div.header {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
  background: #f15a24;
  line-height: 20px;
  font-size: 2em;
}

div.header_placeholder {                /* TODO: Fix board_less_footer to not require this hack */
  background: none;
}

div.nav {
  margin-left: 10px;
  text-align: left;
  color: #eee;
}

div.nav a:link,
div.nav a:visited,
div.nav a:active {
  color: #009;
  text-decoration: none;
  font-weight: bold;
}

div.nav a:hover {
  color: #fff;
  background-color: #009;
  text-decoration: none;
}

div.shadow {
  width: 100%;
  height: 10px;
  background: url(../../images/shadow_bottom.png) repeat-x;
  padding: 0px;
}

/* FOOTER ===================================================================*/

/* Having a footer which stays at the bottom of the viewport, or if there is
 * too much content push past the view bottom, is actually harder than you
 * would think. There are several good references to the solution:
 *
 * - http://www.themaninblue.com/writing/perspective/2005/08/29/
 * - http://www.dave-woods.co.uk/?p=170
 * - http://blog.10secondtourism.com/2008/01/24/css-magic-footer/
 */

#board_less_footer {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -23px;                 /* <= footer height */
}

#footer_reserve {
  height: 23px;                         /* <= footer height */
  padding-bottom: 2em;
}

#footer {
  height: 23px;                         /* <= footer height */
  overflow: hidden;
}

#powered_by {
  width: 950px;
  margin: 0 auto;
  text-align: right;
  vertical-align: bottom;
}

#powered_by a {
  display: block;
  float: right;
  outline: 0;
  text-decoration: none;
  width: 150px;
  height: 23px;
  margin-right: 1px;
  background: url(powered_by.png) no-repeat center center;
}

#powered_by a span {
  display: none;
}

/* IE 6-7 HACKS ========================================================== */
/* All attributes prefixed by an asterix                                   */

/* VANILLA BOARD STYLES -------------------------------------------------- */

/* Try to encourage the cells to be a bit smarter about wrapping. Instead
 * of just expanding to take the amount required by the largest unbroken
 * string. To be really effective word-wrap requires container width to be
 * set in pixels */
table#entries.td,
table#entries.th {
  *word-wrap: break-word;               /* IE proprietary attribute */
  *zoom: 1;                             /* Force haslayout */
}

/* Add extra right padding to match display on other browsers during hover */
a.warn:link,
a.warn:visited,
a.warn:active,
a:warn:hover {
  *padding-right: 1px;
}

.editable {
  *outline: 1px dashed #ccc;
  *text-decoration: none;
}

/* The background shows through just above and below the input */
p.fields span {
  *border-top: 4px;
  *border-bottom: 4px;
  *background: #d4e6c3;
}

/* When moved up commands appears *over* fields section unlike other broswers
 * where it appears *under*. Simply hide the top border to maintain the
 * illusion */
p.commands {
  *border-top: none;
}

/* Move the Update buttom up so it appears vertically aligned with Cancel link */
p.commands input {
  *vertical-align: -30%;
}

/* NAVIGATION HEADER ----------------------------------------------------- */

/* Hide alpha transparent png background. TODO: show in IE7 */
div.shadow {
  *background: none;
}

/* Replace alpha transparent png background. TODO: show in IE7 */
#powered_by a {
  *background: url(powered_by.gif);
}