/* general styles */
body
{
  font-family: Verdana, sans-serif;
  background-color: #000;
  margin: 1em;
}
a
{
  cursor: pointer;
}

/* header */
#header
{
  margin-bottom: 1px;
  background-color: #000;
}
#header table
{
  width: 100%;
  height: 72px;
  border-collapse: collapse;
  border-style: none;
}
#logo
{
  display: block;
  border: none;
}
#header h1
{
  color: #9CF;
  text-align: center;
  font-size: 1.75em;
}
#header td.logo
{
  width: 10em;
}
#header td.links
{
  font-size: 0.75em;
  color: #9C6;
}
#header td.member
{
  color: #DDD;
  text-align: right;
  font-size: 0.75em;
}
#header td.ad
{
  text-align: center;
}
#header td.ad a
{
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  font-style: italic;
  color: #777;
}

/* links */
#links
{
  width: 10em;
  font-size: 0.7em;
  padding: 0.5em;
  vertical-align: top;
  background-color: #000;
}
#links a
{
  display: block;
  text-decoration : none;
  color: #9C6;
}
#links a:hover
{
  text-decoration : underline;
}
.mainlink
{
  font-weight: bold;
  margin-bottom: 0.2em;
  margin-top: 0.8em;
}
.link
{
  color: #9C6;
}

/* default styling for content section */
#content
{
  vertical-align: top;
  background-color: #333;
  border: solid 1px #666;
  padding: 1em;
}
#content h1, h2, h3, h4
{
  color: #9CF;
}
#content h1
{
  text-align: center;
  font-size: 1.3em;
}
#content h2
{
  text-align: center;
  font-size: 1.2em;
}
#content h3
{
  font-size: 1.1em;
}
#content h4
{
  font-size: 1.0em;
}
#content h5
{
  font-weight: bold;
}
#content p, ul, ol, dl
{
  font-size: 0.75em;
  color: #DDD;
}
#content dt
{
  margin: 0.5em 0 0.5em 1.0em;
  color: #9CF;
}
#content p.quote
{
  font-style: italic;
  margin-left: 1.5em;
  margin-right: 1.5em;
}
#content ul ul { font-size: 1.0em; }
#content ul ol { font-size: 1.0em; }
#content ol ul { font-size: 1.0em; }
#content ol ol { font-size: 1.0em; }
#content dl ul { font-size: 1.0em; }
#content dl ol { font-size: 1.0em; }
#content p.centerheading
{
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
}
#content p.centered
{
  text-align: center;
}
#content p.centerednote
{
  text-align: center;
  font-size: 0.6em;
  color: #777;
}
#content li ol
{
  font-size: 1.0em;
  list-style: lower-alpha;
}
#content li ul
{
  font-size: 1.0em;
}
#content ol.spaced li
{
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}
#content ul.spaced li
{
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}
#content li.listheader
{
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  font-weight: bold;
  list-style-type: none;
}
#content div.narrow
{
  padding: 0 15% 0 15%;
}
#content a
{
  color: #9C6;
  text-decoration: none;
}
#content a.header
{
  color: #9CF !important;
}
#content a:hover
{
  text-decoration: underline;
}
#content .faint
{
  color: #444 !important;
}
#content table
{
  border-collapse: collapse;
  background-color: #000;
  margin-left: auto; margin-right: auto; /* centered table */
  font-family: Verdana, sans-serif;
  font-size: 0.75em;
}
#content table.left-aligned
{
  margin-left: 0;
}
#content td
{
  color: #DDD;
  font-family: Verdana, sans-serif;
  border: solid 1px #666;
  padding: 0.4em;
}
#content th
{
  color: #DDD;
  font-family: Verdana, sans-serif;
  border: solid 1px #666;
  padding: 0.4em;
}
#content .tableheader
{
  text-align: center;
  color: #666 !important;
}
#content .tablecolumnheader
{
  text-align: left;
  color: #666 !important;
}
#content .tablerightheader
{
  text-align: right;
  color: #666 !important;
}
#content .aside
{
  font-size: 0.7em;
}
#content .tinynote
{
  font-size: 0.6em;
  font-style: italic;
}
#content .warning
{
  color: #FF0;
  font-weight: bold;
}
#content pre
{
  padding: 0.5em;
  border: solid 1px #444;
  background-color: #222;
  color: #DDD;
  font-family: "Courier New", monospace;
  font-size: 0.85em;
}

/* blank tables just used for positioning things (e.g. images) */
#content table.blank
{
  border-collapse: collapse;
  border-style: none !important;
  background-color: #333 !important;
}
#content table.blank > tbody > tr > td
{
  font-family: Verdana, sans-serif;
  border-style: none !important;
}

/* faqs */
p.faqlinker
{
  padding: 0.1em;
  margin: 0;
  background-color: #333;
  color: #FFF;
}
div.faqlist
{
  border: solid 1px #444;
  background-color: #2D2D2D;
}
div.faqlist p.header
{
  padding: 0.3em;
  margin: 0;
  border-style: solid;
  border-color: #444;
  border-width: 0 0 1px 0;
  font-weight: bold;
  background-color: #000;
  text-align: center;
  color: #FFF;
}
div.faqlist p.question
{
  padding: 0.5em;
  margin: 0;
  border-style: solid;
  border-color: #444;
  border-width: 0 0 1px 0;
  font-weight: bold;
  color: #FFF;
  background-color: #333;
  text-align: center;
}
div.faqlist div.answer
{
  padding: 0 0.5em 0 0.5em;
}
div.faqlist div.answer p
{
  margin: 1.0em 0 1.0em 0;
  text-indent: 1em;
}
div.faqlist div.answer pre
{
  font-size: 0.75em;
}
div.faqlist span.faqemph
{
  color: #9CF;
}
div.faqlist span.faqdeemph
{
  font-weight: normal;
}

/* news items */
.newsitem
{
  margin-bottom: 1em;
  border: solid 1px #444;
  background-color: #2D2D2D;
}
.newsitem p
{
  margin: 0.3em;
  color: #DDD;
  text-indent: 1em;
}
.newsitem p.initial
{
  padding: 0.3em;
  margin: 0.0em 0.0em 0.3em 0.0em;
  border-bottom: solid 1px #444;
  font-weight: bold;
  background-color: #000;
  color: #FFF;
  text-indent: 0;
}
.newsdatefloat
{
  float: right;
  color: #666 !important;
}
.newsitemlist
{
  background-color: #000;
  border: solid 1px #444;
}

/* Ratings. */
#content .ratinggraph
{
  /* This doesn't work in IE, it does in FF (we resort to <center> tags).
  display: table;
  margin-left: auto; margin-right: auto;
  */
  margin-top: 1em;
  margin-bottom: 1em;
  border-style: none;
}

/* Articles. */
div.article p.author
{
  font-style: italic;
  text-align: center;
}

/* Chess boards for static FEN display. */
div.leftboard
{
  border: solid 1px #444;
  padding: 2px;
  margin-right: 0.5em;
  float: left;
}
div.rightboard
{
  border: solid 1px #444;
  padding: 2px;
  margin-left: 0.5em;
  float: right;
}
div.centerboard
{
  border: solid 1px #444;
  padding: 2px;
}
div.rightboard
{
  border: solid 1px #444;
  padding: 2px;
  margin-left: 0.5em;
  float: right;
}
div img
{
  border: 0 !important;
}
span.boardcomment
{
  color: #DDD;
  font-size: 0.6em;
}

/* Tables for PGN board display. */
#content table.pgngame
{
  border-collapse: collapse;
  background-color: #333;
}
#content table.pgnfloater
{
  display: block;
  /* must reset these from #content.table or float doesn't work */
  margin-left: 0;
  margin-right: 0;
}
#content table.pgngame tr td
{
  border: none;
  padding: 0;
  margin: 0;
}
#content table.pgngame tr td img
{
  border: solid 1px #666;
}
#content .playbutton
{
  margin-top: 5px;
  border: 0;
}
#content p.pgngameheader
{
  text-align: center;
}
#content p.pgngameheader span
{
  font-weight: bold;
  white-space: nowrap;
}
#content div.pgngametext
{
  font-size: 0.75em;
  color: #DDD;
}
#content div.pgngametext .pgncomment
{
  font-style: italic;
}
#content div.pgngametext a
{
  text-decoration: none;
}
#content div.pgngametext a.ml
{
  font-weight: bold !important;
}
#content div.pgngametext a:hover
{
  text-decoration: underline;
}

/* Votes. */
div.votes
{
  border: solid 1px #444;
  padding: 0.4em 0.6em 0.4em 0.6em;
  background-color: #222;
}
div.vote
{
  border: solid 1px #444;
  padding: 0.4em 0.6em 0.4em 0.6em;
  background-color: #222;
}
div.vote span#total
{
  font-weight: bold;
  color: #9CF;
}
div.vote td.title, td.number
{
  font-weight: bold;
  font-size: 1.6em;
  color: #9CF !important;
}
div.vote table.bar
{
  width: 5cm;
  height: 0.6cm;
  border: solid 1px #444;
}
div.vote table.bar td
{
  border-style: none !important;
}
/* unmapped colours in classes for yes, maybe, no */
div.vote .y
{
  background-color: green;
  color: white !important;
}
div.vote .m
{
  background-color: yellow;
  color: black !important;
}
div.vote .n
{
  background-color: red;
  color: white !important;
}
/* blank is mapped (black/white) */
div.vote b {
  background-color: #000;
}
div.vote table.vote
{
  width: 1cm;
  height: 1cm;
  border: solid 1px #444;
}
div.vote table.vote td
{
  border-style: none !important;
  text-align: center;
  font-size: 1.4em;
}
div.vote div.feedback
{
  margin-top: 1em;
  text-align: center;
  height: 20px;       /* enough to encompass the spinner image */
}
div.vote #chooser
{
  position: absolute;
  z-index: -1;        /* only gets shown when voting */
}
div.vote #cover
{
  position: absolute;
  z-index: -1;        /* js decides when to show it */
  text-align: center;
  background-color: #333;
  border: solid 1px #666;
  font-size: 10pt;
}

/* Tournaments. */
div.tournament pre
{
  background-color: #000 !important;
}

/* Events (calendar). */
div.events
{
  border: solid 1px #444;
  padding: 0.4em 0.6em 0.4em 0.6em;
  background-color: #222;
}
div.events li a
{
  font-weight: bold;
}
.sectionname
{
  font-weight: bold;
  text-align: center;
  color: #9CF !important;
}

/* officer lists */
.officer
{
  font-weight: bold;
  color: #9CF !important;
}

/* Images (with news in mind). */
img
{
  border: solid 1px #000;
}
img#button
{
  border: none;
}
p img.left
{
  float: left;
  margin-right: 0.3em;
}
p img.right
{
  float: right;
  margin-left: 0.3em;
}

/* club lists */
#content p.club
{
  border: solid 1px #444;
  padding: 0.4em 0.6em 0.4em 0.6em;
  background-color: #000;
  color: #DDD;
}
.clubname
{
  font-weight: bold;
  font-size: 1.0em;
  color: #9CF;
}

/* Google maps */
#map
{
  border: solid 1px #DDD;
}

/* image lists */
#content p.image
{
  border: solid 1px #444;
  padding: 0.4em 0.6em 0.4em 0.6em;
  background-color: #000;
  color: #DDD;
}
.imageemph
{
  font-weight: bold;
}

/* member lists */
.membername
{
  font-weight: bold;
  color: #9CF;
}

/* officer lists */
.officer
{
  font-weight: bold;
}

/* constitution */
#content p.label
{
  float: left;
  margin-top: 0;
}
#content p.indented, ul.indented
{
  padding-left: 3.5em;
}
#content p.linklist
{
  text-align: center;
}

/* forms (which use tables) in the content section */
#content form th
{
  text-align: left;
}
#content form td input
{
  background-color: #000;
  border-style: none;
  color: #DDD;
  font-family: Verdana, sans-serif;
  font-size: 1.0em;
}
#content form td select
{
  background-color: #000;
  color: #DDD;
  font-family: Verdana, sans-serif;
  font-size: 1.0em;
}
#content form td textarea
{
  background-color: #000;
  color: #DDD;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.0em;
}
#content .shortmessage
{
  text-align: center;
  color: #FFF;
}
#content div.highlightbox
{
  margin-left: 25%;
  margin-right: 25%;
  margin-bottom: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  border: 1px solid #666;
}
#content .errormessage
{
  font-weight: bold;
  border: solid 1px #F00;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: #533;
  color: #DDD;
}
/* cell that blends with the background so it's content appears to float */
#content td.blend, th.blend
{
  background-color: #333 !important;
  border-color: #333 !important;
}
/* top left corner blender */
#content td.blend-tl, th.blend-tl
{
  background-color: #333 !important;
  border-top-color: #333 !important;
  border-left-color: #333 !important;
}
/* form removed so buttons can exist outside forms */
#content .buttons
{
  text-align: center;
  font-size: 0.75em;
}
/* form removed so buttons can exist outside forms */
#content .button
{
  background-color: #000;
  padding: 0.3em;
  border: solid #666 1px;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

/* lists of names from mph templates */
.namelists
{
  background-color: #000;
  border: solid #444 1px;
}
.namelists p
{
  margin: 1em;
}

/* error content */
.error
{
  padding: 0.1em;
  background-color: #533;
  border: solid 1px #F00;
}
.error p
{
  padding: 0.3em;
  margin: 0.0em 0.0em 0.0em 0.0em;
  border-bottom: solid 1px #F00;
  font-weight: bold;
  background-color: #200;
  text-align: center;
  color: #FFF;
}
.error li
{
  color: #FFF;
  border: none;
  font-size: 0.75em;
  font-family: "Courier New", Courier, monospace;
}

/* features section */
#features
{
  vertical-align: top;
  background-color: #333;
  border-top: solid 1px #666;
  border-bottom: solid 1px #666;
  border-right: solid 1px #666;
  padding: 1em;
}
#features h1
{
  font-size: 0.8em;
  text-align: center;
  color: #DDD;
  margin-top: 0.4em;
  margin-bottom: 0.5em;
}
#features .featurebox
{
  font-size: 0.75em;
  background-color: #222;
  border: solid 1px #444;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
}
#features .featurebox p
{
  color: #DDD;
  font-size: 0.7em;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.1em;
  white-space: normal;
}
#features .featurebox p.boardcomment
{
  margin-top: 2px;
  margin-bottom: 0;
}

/* footer section */
#footer
{
  font-size: 0.6em;
  color: #777;
  text-align: center;
}
#footer a
{
  color: #777 !important;
}

/* shopping */
#basket
{
  margin-left: 20%;
  margin-right: 20%;
}
#basket .summary
{
  background-color: #222;
  border: solid 1px #444;
  padding: 1em;
  font-weight: bold;
  text-align: center;
}
#basket .help
{
  background-color: #222;
  border: solid 1px #444;
  padding: 1em;
  color: #666;
}
#basket span
{
  font-style: italic;
  color: #9C6;
}
.problems
{
  background-color: #222;
  border: solid 1px #F00;
  padding: 0.4em 1em;
}
#confirmation
{
  margin-left: 20%;
  margin-right: 20%;
  background-color: #222;
  border: solid 1px #444;
  padding: 0 1em;
}

/* popups: these styles replace the popup.js file of
 * www.methods.co.nz/popups/popup.html and adapts
 * them to fit in with the ICU site.
 */
div.popup
{
  border: 1px solid #666;
  padding: 0.5em;
  background-color: #2D2D2D;
  text-align: center;
  /* The following properties should not be changed */
  position: absolute;
}

p.popup_label
{
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#popup_overlay
{
  background-color: whitesmoke;
  /* The following properties should not be changed */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
}

span.popup_link, a.popup_link
{
  cursor: pointer;
}

span.popup_link:hover
{
  text-decoration : underline;
}

.popup_draghandle
{
  cursor: move;
}

.popup_progress
{
  position: absolute;
  top: 0.2em;
  left: 0.2em;
}