/*********************************************************************************************
  Style-sheet designed for www.cardtabletalk.com
  By William Smith, Saas-Fee, February 2005
  Powered by Schneider Weisse

  It sets up a page for either a three column table with one column of content (normally used),
  or a four column table with two columns of content (used only in the home page).
  A left side bar holds the block of navigation information
  A right side bar is just for cosmetic purposes.
  The widths of all the columns and heights of rows are defined in this style sheet.
   
  The colour scheme is green, brown, red, black representing the baize, wood, and
  the colours of the suits of cards, respectively.
  Yellow is occasionally used to distinguish from white text.
 
  Standard white background and blue links are used in the content section.
***********************************************************************************************/

/*
  These are the links for the body of the website (are actually applied in the content area only)
  The design is to have blue links with no underline, except for when the mouse hovers over a link
  when then the underlining appears to help the reader realise that it is in fact a link.
*/
a:link, a:visited, a:focus {color:blue; text-decoration:none;}
a:hover {color:blue; text-decoration:underline;}
a:active {color:blue; text-decoration:none;}



/*
  
*/
body, td {
  font-family: "TrebuchetMS", "Arial", "Helvetica", sans-serif;
  font-size: 13px;
   }

/*
  The heading 1 style is intended only ever for use in the banner of a web-page.
  The colour is to make it readable on the background of the cardtable class.
  Margins stripped off so that it centres better vertically.
*/
h1 {
  font-size:32px;
  color:white; 
  font-style:italic;
  margin: 0 0 0 0;
  padding:17px;
  border-style:solid;
  border-width:2px;
  border-color:white;
  }
  
/*
  The out-of-the-box 'h2' has too much space after. So it is trimmed here.
*/
h2 {
  font-size:18px;
  color:red; 
  margin-bottom:7px;
  }
  
  /* use h3 in 'family' page   not sure where else. font size was 16 before i reduced it*/
h3 {
  font-size:12px;
  color:black; 
  margin-top:0; 
  margin-bottom:7px;
  }

/*
  The out-of-the-box 'p' has too much space before and after. So it is trimmed here.
*/
p {
  margin-top:0; 
  margin-bottom:7px;
  }

ul, ol {
  margin-top:0; 
    }
 /* 
 The out-of-the- boxlist elements are too close together so this spaces them out a bit:
 */
 li {
    margin-bottom:7px;
  }
  

  
  
td {vertical-align:top;}

blockquote { 
  margin-top:0;  
  text-align:justify;
  font-size:13px;
  }

/*
  The banner class is applied to heading 1 (see above).
*/
.banner {
  text-align:center;
  vertical-align:middle;
  }
  
.okb {
  font-family: "Arial", "Courier New", sans-serif;
  font-weight: bold;
  font-size:12px;
  text-indent:20px;
  margin:0 0 0 0;  
  }
  
  /* private - same as okb only green in bbo */
  .okbprivate {
  font-family: "Arial", "Courier New", sans-serif;
  font-weight: bold;
  font-size:12px;
  text-indent:20px;
  margin:0 0 0 0;  
  color:green; 
  }

/*
  The main part of the web-page is defined here, including the overall width.
  It is designed to represent a card-table, i.e. green baize with brown wood edging.
  Width of cardtable = width of leftsidebar + width of content1 + width of rightsidebar
  or for a two column content page:
  Width of cardtable = width of leftsidebar + width of content1 + width of content 2 + width of rightsidebar
*/
.cardtable {
  width:800px;
  background-color:green; 
  border-style:groove;
  border-width:10px;
  border-color:maroon;
  }
  
  /*
  
  */
.card {
  width:450px;
  background-color:white; 
  border-style:double;
  border-width:10px;
  border-color:blue;
  }
  /*
  At least one card (the nine of diamonds) has a large description
  and so needs a wider page
  */
  .cardwide {
  width:800px;
  background-color:white; 
  border-style:double;
  border-width:10px;
  border-color:blue;
  }
  
.blacksuitleft {
  font-size:36px;
  color:black; 
  text-align:left;
  vertical-align:middle;
  }
  
.blacksuitright {
  font-size:36px;
  color:black; 
  text-align:right;
  vertical-align:middle;
  }
  
.redsuitleft {
  font-size:36px;
  color:red; 
  text-align:left;
  vertical-align:middle;
  }
  
.redsuitright {
  font-size:36px;
  color:red; 
  text-align:right;
  vertical-align:middle;
  }

/*
  Layout of the logo that appears in the top left hand corner of each page.
  */
.logo {
  width=80;
  height=70;
  text-align:center;
  vertical-align:middle;
  
  }  

/* The first row of the page. Has the logo and the banner in it. */
.topbar {height:70px;}
.cardtopbar {height:60px;}

/* The lowest row of the page. Has nothing in it. */
.bottombar {height:60px;}
.cardbottombar {height:60px;}

/* The first row of the page. Has the logo and the banner in it. */
.topquote {
  color:white;
  text-align:center;
}

/*
  The first column of the page.
  Has the logo in it and the navigation block under that.
  The padding of the leftside bar is to move the navigation block away from the extreme left hand side.
*/
.leftsidebar {width:80px; padding:10px;}

/* The last column on the right hand side. Has nothing in it. */
.rightsidebar {width:80px;}

.cardsidebar {width:55px;}

/*
  Content area for a single column of content page
  The setting of the height is not too critical, it just fits well on my screen. If there is not much
  text in the content then the height will fill out the page so it doesn't look too thin. If there is
  a lot of text then the table automatically resizes past the height setting.
*/
.content1 {
  width:640px;
  height:415px;
  padding:10px;
  background-color:white;
  color:black;
  border-style:double;
  border-width:3px;
  border-color:silver;
  }
  
  /*
  As for content1 but without the minimum height
  */
.content {
  width:640px;
  padding:10px;
  background-color:white;
  color:black;
  border-style:double;
  border-width:3px;
  border-color:silver;
  }

/*
  Content area for a double column of content page
  The same as content1 only a) half the width and b) no attempt to set the height since it is assumed
  that a two column table will fill the page.
*/
.content2 {
  width:320px;
  padding:10px;
  background-color:white;
  color:black;
  border-style:double;
  border-width:3px;
  border-color:silver;
  }
 
 .cardcontent {
  height:415px;
  padding:10px;
  background-color:white;
  color:black;
  border-style:double;
  border-width:3px;
  border-color:silver;
  }
 
 /* A style for captions. */
.caption {  
  margin-top:3px;
  font-size:12px;
  font-style:italic;
  }
  
/* used to move from page to page in a list like for films or talk */
#listnav {
  font-size:14px;
  padding:5px;
  background-color:white;
  text-align:center;
  margin-left:100px;
  margin-right:100px;
  margin-top:7px;
  background-color:white;
  }
#listnav a:hover {background-color:blue; color:white; text-decoration:none}


/* The following commands set up the navigation block in the left hand bar. */
#navigation {
  font-size:13px;
  line-height:150%;
  padding:5px;
  text-align:left;
  text-indent:5px;
  /* following two properties added due to the a:link bug - see below. */
  margin:7px;
  background-color:white;
  }
  
/* This displays each link on a separate line. */
#navigation a {display: block}

/*
  This should make the links white which shows up nicely on a green background.
  However I think there is an a:link bug that causes subsequent links 
  outside of the navigation division to inherit the colour of this link.
  Which on a white background, makes them invisible.
  So this formatting is abandoned for now, and I have made the navigation block background white above
  in order to show the blue links.
  
#navigation a:link, a:visited, a:focus {color:white; text-decoration:none}
*/

/*
  At least this works - when the mouse is over the link in the navigation block, the link's background
  changes and the colour of the link changes too.
*/
#navigation a:hover {background-color:blue; color:white; text-decoration:none}



/* The End */