/* hatfair.co.uk sandbox stylesheet */

/********************
*** DEFAULT/RESET ***
********************/
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
/* DEFAULT STYLESHEET FOR HTML 4 FROM WWW.W3.ORG */

h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A" }
:before, :after { white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}


/*************
*** LAYOUT ***
*************/

body {

}

#wrapper { /* FULL PAGE WIDTH = 960px 
              Grid = 12x 60px cols, each with 10px margin left & right */
width: 960px;
margin-left: auto;
margin-right: auto;
}

h1 {
}

#navigation {
padding-top: 160px;
}

#navigation ul {
margin:10px;
padding:0;
list-style: none;
list-style-type:none;
}

#navigation ul li {
display: inline;
}


#navigation span {
display: inline;
margin: 0 10px;
}

#main { /* contains: banner, content, support  */
float: left;
width: 720px;
}

#banner {
}

#content {
float: left;
clear: none;
width: 480px;
}

#content h2, #content h3, #content h4, #content p, #content img, #content dl,
/*#content object,*/ #content div, #footer p {
margin-left: 10px;
margin-right: 20px;
}

#content img {
float: left;
padding-right: 10px;
margin-bottom: 10px;
/*border: 1px solid red;*/
}

#pageturner {
margin-bottom: 20px;
}

#support {
float: left;
width: 240px;
/*border: 1px solid blue;*/
}

#support p, support ul, support img {
margin-left: 10px;
margin-right: 10px;
}

#slideshow {
height: 331px;
margin: 10px 10px 40px 10px;
}

.downloads {
/*margin-top: 370px;*/
}

#sidebar { /* contains nav2, sponsors */
width: 240px;
float: left;
}

#sidebar ul { /* default is -40px so -30px aligns with 10px margin of other elements ie no indent */
margin-left: -30px;
}

#sidebar h4,/* #sidebar ul,*/ #sidebar p  {
margin-left: 10px;
margin-right: 10px:
}

#nav2 {
}

#nav2 ul {
list-style-type: none;
/*margin-left: -40px;*/
}

#sponsors {
/*padding-top:10px;*/
}

#sponsors ul {
list-style-type: none;
margin-left: -40px;
}

#sponsors li {
display: inline;
margin: 0 9px;
}

#sponsors img {
vertical-align:middle;
}

#footer {
width: 100%;
clear: left;
}


/********************
*** IMAGES/COLOUR ***
********************/

body {
background-color: black;
}

#wrapper {
/*background-color: white;*/
background:white url(../images/wrapper.jpg) no-repeat scroll 720px top;
}

h1 { /* Replace text with image */
background:transparent url(../images/h1.jpg) no-repeat scroll left top;
/* float:left; */
margin:0;
padding:0;
text-indent:-5000px;
width: 760px;
height:200px;
}

a {
color: #F7941D ;
}

#navigation {
background:white url(../images/nav.jpg) no-repeat scroll left top;
}

#navigation a {
color: #2598D7 ;
}

.thispage, .notice {
color: #D455A4 ;
}

.important {
color: #F7941D ;
}

.downloads a {
color: #ED242C;
}

#navigation span {
color: black;
}

#sponsors a {
text-decoration: none;
}

#sponsors img {
border: 0px;
}


/***********
*** TEXT ***
***********/

body {
font-family: helvetica, sans serif;
/*font-size: 62.5%;*/
font-size: 76%;
line-height: 1.4em;
/*color: #565A5C;*/
}

#navigation {
font-weight: bolder;
}

#navigation a, #support a, #sidebar a {
text-decoration: none;
}

#navigation span {
font-weight: normal;
}

.notice {
font-weight: normal;
font-size: 1.2em;
}

.important {
font-weight: normal;
font-size: 1.4em;
}

blockquote {
}

.credit {
margin-left: 40px;
border: 1px solid grey;
}

/************
*** FORMS ***
************/

table {
  color: black;
  }

label { 
  float: left;
  clear: left;
  margin:3px 0px; 
  }

input, textarea, select { 
  float: left;
  clear: left; 
  margin: 2px 0 2px 30px;
  color: black;
  }
  
#pageList input {
  float: left;
  clear: none;
  margin: 2px 10px 3px 30px;
}

.forcheckbox {
  float: left;
  clear: none;
}

.inline {
display: inline;
clear:none;
}