/* $Id: style.css,v 1.11 2007/02/20 22:16:08 psy Exp $ */

 /* Styles the body. */
body {
  background: #6495Ed url(greyscale.png) top left repeat;
  margin: 0;
  padding: 20px;
}

 /* The box which centers and holds everything. */
#holder {
  position: relative;
  left: 50%;
  width: 794px;
  margin-left: -400px;
  background: #ffffff;
  border-left: 3px #555555 solid;
  border-right: 3px #555555 solid;
  min-height: 95ex;
}


 /* The box which holds the header _and_ the footer. */
#footer {
  position: relative;
  width: 794px;
  left: 50%;
  margin-left: -400px;
  border-left: 3px #555555 solid;
  border-right: 3px #555555 solid;
}

 /* Styles the h1 header tag. */
#header {
  position: relative;
  width: 794px;
  left: 50%;
  margin-left: -400px;
  border-left: 3px #555555 solid;
  border-right: 3px #555555 solid;
  background: #000000 url(http://www.worldsocialism.org/spgb/images/spwebbanner.jpg) top left no-repeat;
  border-bottom: 3px #555555 solid;
  border-top: 3px #555555 solid;
  height: 175px;
}

#header h1 { 
  display: none;
}

 /* Box which holds the content and aligns it to the left. */
#content {
  font: 1em/150% Arial, Sans-Serif; 
  text-align: justify;
  position: relative;
  left: 0;
  padding: 20px;
  width: 550px;
}

 /* Styles the h3 header tag. */
#content h3 {
  font: 1.4em/100% Verdana, Sans-Serif;
  color: #00008b;
  margin: 0;
  padding: 10px 5px 0 0;
}

 /* Styles the p-tag (the paragraphs). */
#content p {
  text-align: justify;
  margin: 0;
  padding: 0.5em 5px 0.5em 5px;
}

#content p.date {
  font-family: Verdana, Sans-Serif;
  padding-left: 0;
  color: #00008b;
}

#content p.homelink { 
  font-size: 90%;
  float: right;
  margin: 1ex;
  border: thin blue solid;
  padding: 5px;
}

#content img.journal { 
  float: right;
  margin-left: 1ex;
  margin-top: 1ex;
  margin-bottom: 1ex;
  border: thin #000000 solid;
}

#content p img.left-noborder {
  float: left;
  margin-right: 1ex;
  margin-top: 1ex;
  margin-bottom: 1ex;
  border: 0;
}

#content p img.right-noborder {
  float: right;
  margin-right: 1ex;
  margin-top: 1ex;
  margin-bottom: 1ex;
  border: 0;
}

 /* Styles quotes displayed as block-elements. */
#content p.blockquote {
  margin: 0 5px 0 20px;
  padding: 6px;
  font: .9em Arial, Sans-serif;
  border-left: 1px #aaa dashed;
  background: #EAF0F3;
  text-align: justify;
}

#content p.blockquote:hover {
  border-left: 1px #555 dashed;
  background: #DAE0E3;
}

 /* Puts > Quote: " < in front of everything inside the quote, so you don't have to! */
#content p.blockquote:before {
  content: open-quote;
  font-weight: bold;
  font-style: italic;
}

 /* Puts a > " < after the quote. */
#content p.blockquote:after {
  content: close-quote;
  font-weight: bold;
  font-style: italic;
}

 /* Styles the links inside the content-box. */
#content a {
  color: #00008b;
  text-decoration: none;
}

 /* Gives the links a hover-effect. */
#content a:hover {
  color: #0000ff;
  text-decoration: none;
  text-decoration: underline;
}

#content a:visited { 
  color: #55008b;
}

#content dl dt  {
  font-weight: bold;
}

#content dl.nolink dt a  {
  color: #000000;
}

#content dl dt+dd  { 
  padding-bottom: 1em;
}

 /* Box which holds and aligns the menu to the right. */
#menu {
  position: absolute;
  right: 0; top: 15px;
  width: 200px;
}

 /* Hides the h1 text in CSS-compliant browsers, but seen by text-based browser. */
#menu h1 {
  display: none;
}

 /* The actual menu holder. */
#menu dl {
  margin: 0px 0 15px 0;
  padding: 15px 0 30px 0;
  border-left: 1px #000000 solid;
}

 /* Styles the link-descriptions above the links. */
#menu dt {
  margin: 15px 0 0 0;
  padding: 0 5px 0 5px;
  background: #000000;
  font: .8em/150% verdana, sans-serif;
  color: #ccc;
}

 /* Tags which holds each link in the menu. */
#menu dd {
  margin: 0;
  padding: 0;
}

 /* Styles the links in the menu. */
#menu dd a {
  background: #ffffff url(menu-link-bg.gif) left top no-repeat;
  display: block;
  font: .8em/20px verdana, sans-serif;
  color: #666;
  padding: 0 5px 0 15px;
  text-decoration: none;
}

 /* Makes a hover effect when the mouse is over a link. Also styles the selected link. */
#menu dd a:hover, #menu dd a.selected {
  color: #000000;
  background: #EAF0F3 url(menu-link-bg-hover.gif) left top no-repeat;
}

 /* Makes the hover-effect disappear (but with the dark arrow intact) when the mouse is over the menu. */
#menu dl:hover dd a.selected {
  background: #ffffff url(menu-link-bg-hover.gif) left top no-repeat;
  display: block;
  font: .8em/20px verdana, sans-serif;
  color: green;
  padding: 0 5px 0 15px;
  text-decoration: none;
}

#menu dl:hover dt {
  color: #ffffff;
}

 /* A form. */
#menu form {
  margin: 0;
  padding: 4px;
}

 /* Styles the text-input. */
#menu input.text {
  width: 175px;
  margin: 0 0 2px 8px;
  padding: 0px;
  background: #ffffff;
  border: 1px #C5D2D9 solid;
  font: .7em verdana, sans-serif;
  color: #000000;
}

 /* Styles the button. */
#menu input.button {
  width: 175px;
  margin: 0 0 2px 8px;
  padding: 0px;
  background: #EAF0F3;
  border: 1px #C5D2D9 solid;
  font: .7em verdana, sans-serif;
  color: #000000;
}

 /* Changes the text and button background colour, when in focus (works only in some compliant browsers, such as Opera). */
#menu input.text:focus, #menu input.button:focus {
  background: #F5F5E7;
}


 /* The footer. */
#footer h5 {
  font: bold .8em/150% Arial, Sans-Serif;
  color: #ffffff;
  margin: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  background: #000000;
  text-align: center;
  border-top: 3px #555555 solid;
  border-bottom: 3px #555555 solid;
}

 /* Styles the links in the footer box, if any. */
#footer a {
  color: #aaaaff;
  font-weight: bold;
  text-decoration: none;
}

 /* Gives the links a hover-effect. */
#footer a:hover {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}


 /* Gives the acronyms a dotted bottom-border, so IE knows that it is an acronym. */
acronym {
  border-bottom: 1px #000000 dotted;
}


/*
** Modified from:
** Format Footnotes with Javascript & CSS
** <http://www.brandspankingnew.net/archive/2005/07/format_footnote.html>
*/

#content span.footnote:before {
  content: " [Footnote: ";
}

#content span.footnote:after {
  content: "]";
}

#content a.footnote {
  vertical-align: super;
  font-size: 0.7em;
}

#footnotes {
  border-top: 1px solid #ccc;
  margin: 20px 0 20px 0;
  padding: 10px 0 0 0;
}

#footnotes li.footnote {
  font-size: 80%;
}