/* owner:       Heddon's Gate Hotel
   name:        heddonsgate.css
   description: Style Sheet
   version:     20
   date:        5 November 2011
   author:      Ed Eyles */
/* Inheritance does not work reliably in practice and the selector specificity rules defined in CSS 2.1 are convoluted and not helpful.  This means that we cannot have
   a pair of rules such as "#elem1>*{padding:10}" followed by "#elem2{padding:0}" (where #elem2 is a child of #elem1), since the latter rule will not take precedence
   over the former.  Therefore we do not rely on inheritance at all, but specify default "basic styles" (e.g. border, color, margin) for every element via "*". */
/* Don't use:
   content:open-quote etc, because Google Chrome and Safari (and possibly IE) do not handle these correctly */
/* Browser quirks:
   Opera: can't render thinsp HTML entity; doesn't appear to understand display:block */

/* Main elements */
* {
  border: 0;
  color: #000000;
  font-family: serif;
  font-size: 11pt;
  font-style: normal;
  font-weight: normal;
  /* There is some kind of bug in the combination of Firefox and the Windows XP Times New Roman font (which is my default font within Firefox), which causes the
     italicised paragraphs to be rendered with wildly varying line heights.  No other browser does this. The next setting almost restores the intended rendering. */
  /*line-height: 1.24;*/
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  vertical-align: baseline;
}
BODY { overflow: scroll; }
#wrapper {
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
}
#content { width: 650px; }
#footer, #motd {
  margin-left: 5px;
  margin-right: 5px;
}
#header { padding: 10px; }
#menu * {
  font-family: sans-serif;
  font-size: 10pt;
}
#motd {
  font-style: italic;
  width: 143px;
}
#sidebar { vertical-align: top; }
#sidebar DIV { margin-bottom: 25px; }

/* DIVs */
DIV.imgblock_wrapper, DIV.imgblock { float: right; }
DIV.imgblock_wrapper {
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 0px;
  margin-top: 0px;
}
DIV.txtblock { padding: 10px; }

/* Headings */
H1, H2, H3, H4 { display: block; }
H1 {
  font-size: 42pt;
  margin-bottom: 5px;
}
H2 { font-size: 24pt; }
H1, H2 {
  font-family: my_eot, my_ttf;
  font-weight: normal;
  text-align: center;
}
H3, H4 {
  font-family: serif;
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
}
H4 {
  margin-bottom: 1em;
  text-align: center;
}

/* Paragraphs and lists */
LI { margin-left: 1em; }
P, TABLE.data, TABLE.text, UL { margin-bottom: 1em; }
P.last { margin-bottom: 0; }
P.poem { font-family: sans-serif; }
P.width400 {
  margin-left: 10px;
  margin-right: 10px;
  width: 380px;
}
SPAN.stretcher { /* Used to stretch an anchor downwards to encompass its right-floated image.  Only needed because the specs are such bollocks. */
  clear: both;
  display: block;
}

/* Tables */
TABLE {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}
TABLE.links { width: 100%; }
TABLE.text {
  margin-left: auto;
  margin-right: auto;
}
TBODY.double-divider { border-top: double #b2946c; }
TH, TH * { font-weight: bold; }
TABLE.data TH, TABLE.data TD, TABLE.data TH > *, TABLE.data TD > *,
TABLE.links TH, TABLE.links TD, TABLE.links TH *, TABLE.links TD * {
  text-align: center;
  vertical-align: middle;
}
TABLE.data TH, TABLE.data TD { padding: 5px; }
TABLE.data TD { border-top: 1px solid #b2946c; }
TABLE.smallcaps TH:first-child, TABLE.smallcaps TD:first-child { font-variant: small-caps; }
TABLE.text TH:first-child, TABLE.text TD:first-child { padding-right: 20px; }
TABLE.text TD { border-top: 1px solid #b2946c; }
COL.rightborder { border-right: 1px solid #b2946c; }
COL.width14pc { width: 14%; }

/* Forms */
FORM {
  clear: both;
  text-align: center;
}
FORM TD {
  padding-bottom: 6px;
  padding-top: 6px;
}
INPUT, TEXTAREA {
  font-family: sans-serif;
  font-size: 10pt;
  margin: 0;
  padding-left: 3px;
  padding-right: 3px;
}
INPUT[type="text"], TEXTAREA { border: 1px solid #b2946c; }

/* For some strange reason Firefox Error Console reports "Error in parsing value for 'z-index'" if the following setting is not specified.  Specifying as 'auto' does
   not do the job, and presumably that is the default value that Firefox has a problem with. */
TEXTAREA { z-index: 0; }

/* Links and buttons */
A {
  font-size: inherit;
}
A, #active {
  padding-left: 2px;
  padding-right: 2px;
}
A.blocklink {
  background-color: transparent;
  clear: both;
  display: block;
  height: 100%;
  margin-bottom: 2em;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 1px;
}
#menu A, #active {
  border-bottom: 1px solid #b2946c;
  display: block;
  padding-bottom: 3px;
  padding-top: 3px;
  text-align: center;
}
#menu { border-top: 1px solid #b2946c; }
A.button, BUTTON {
  border: 2px outset;
  font-family: serif;
  font-weight: bold;
  padding-bottom: 0.3em;
  padding-left: 0.6em;
  padding-right: 0.6em;
  padding-top: 0.3em;
}
A:hover, A:focus, BUTTON:hover, BUTTON:focus { background-color: #b2946c; } /* Each component 0x20 less than normal value */

/* Images */
DIV.imgblock IMG { margin-bottom: 20px; }
IMG { border: 1px solid #b2946c; }
IMG.right, .caption {
  float: right;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 0;
  margin-top: 0;
  text-align: center;
}
IMG.clear { margin-top: 30px; }
A.blocklink IMG { margin-bottom: 0; }

/* General classes */
.bg_darkgrey { background-color: #444444; }
.bold { font-weight: bold; }
.centred { text-align: center; }
.clear { clear: both; }
.hidden { display: none; }
.italic { font-style: italic; }
.padright6 { padding-right: 6px; }
.right { text-align: right; }
.smaller { font-size: 10pt; }
.smallest { font-size: 9pt; }
.standout { color: red; font-weight: bold; }
.top { vertical-align: top; }

/* Media rules */
@media screen {
  A, BUTTON { background-color: #d2b48c; } /* Tan */
  BODY { background-color: #c8d7dc; }
  #content { background-color: #fff3d5; } /* Was blanched almond - #ffebcd - but this appeared too pink on Fee's monitor; the new value has G & B components incremented by 8 */
  #header, #sidebar { background-color: #f5deb3; }
}
@media print { A, BODY, BUTTON, #content, #header, #sidebar { background-color: transparent; } }

/* Fonts */
/* Embedded OpenType version required for IE - must come before any others */
@font-face {
  font-family: my_eot;
  src: url("/fonts/vianta.eot");
}
/* Standards-conformant */
@font-face {
  font-family: my_ttf;
  src: url("/fonts/vianta.ttf") format("truetype");
}