/* Style sheet (css2) for Feet Beat home page */

/*********************************************************************/
/*********************************************************************/
/**                                                                 **/
/**                           Page layout                           **/
/**                             styles                              **/
/**                                                                 **/
/*********************************************************************/
/*********************************************************************/


/*********************************************/
/*                                           */
/* First formatting the background framework */
/*                                           */
/*                                           */

body {
  display: block;
  position: relative;
  width: 100%;
  background-image: url("pics/fb-bg.jpg");
  background-color: #e8e1d7;
  font-family: Arial, Sans-Serif;
  font-size: 10pt;
  font-stretch: ultra-condensed;
}


/************************/
/*                      */
/*                      */
/*         The          */
/*       Container      */
/*                      */
/*			*/

/* Contained in 'body', every other element must be inside this element! */

div.container {
  position: relative;
  display: block;
  width: 800px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  background-image: url("pics/fb-content-bg.png");
  background-repeat: repeat-y;
  background-position: left;
  background-color: transparent;
  z-index: 10;
}


/************************/
/*                      */
/*                      */
/*     Page Banner      */
/*        (top)         */
/*                      */
/*			*/

/* Contained in 'container', contains nothing. */

div.banner {
  position: relative;
  clear: left;
  width: 800px;
  height: 111px;
  background-image: url("pics/fb-banner.jpg");
  background-repeat: no-repeat;
}


/************************/
/*                      */
/*                      */
/*       Content        */
/*                      */
/*                      */
/*			*/

/* Contained in 'container', contains all content (that is visible) on
   HTML pages!  Except for the navigation links on the left side ofcourse... */

div.content {
  position: relative;
  display: block;
  width: 610px;
  height: 100%;
  margin-left: 180px;
  padding-bottom: 3px;
  /* font-weight: normal; */
  /* color: #a88e71; */
  z-index: 10;
}


/************************/
/*                      */
/*                      */
/*     Navigation       */
/*       links          */
/*                      */
/*			*/

/* Contained in 'container', contains 'currentLink*' and 'link*' elements.
 *
 * 'currentLink2' and 'link2' are same as 'currentLink' and 'link', except
 * that they are indented and shown with a less bold text.  Their
 * purpose is to appear as being sublinks to the 'currentLink' and 'link'.
 */

/* Container for site navigation links. */
div.links {
  display: block;
  position: relative;
  clear: left;
  float: left;
  line-height: 150%;
  width: 180px;
  height: 100%;
  padding-top: 0px;
  padding-left: 0px; padding-right: 0px;
  margin-left: 0px; margin-right: 0px;
  border: 0px;
  background-color: #cbbbaa;
  font-weight: bold;
  color: #444444;
  z-index: 10;
}

/* Use currentLink* to indicate the current page.  */
div.currentLink, div.currentLink2 {
  display: block;
  position: relative;
  line-height: inherit;
  width: 170px;
}

div.currentLink {
  padding-top: 4px;  padding-bottom: 5px;
  padding-left: 5px;
}

div.currentLink2 {
  padding-top: 2px;  padding-bottom: 3px;
  padding-left: 10px;
  font-weight: normal;
}

/* Use link* to indicate a link to another page. */
div.link, div.link2 {
  display: block;
  line-height: inherit;
  margin-top: 0px;  margin-bottom: 0px;
  padding-top: 1px; padding-bottom: 0px;
}

div.link {
  border: 0px;
  margin-left: 0px; margin-right: 0px;
  padding-left: 0px; padding-right: 0px;
}

div.link2 {
  font-weight: normal;
}

div.link a, div.link2 a {
  display: block;
  position: relative;
  text-decoration: none;
  color: #444444;
  border: 0px;
}

div.link a {
  width: 175px;
  padding-top: 3px;  padding-bottom: 5px;  padding-left: 5px;
  border: 0px;
}

div.link2 a {
  width: 170px;
  padding-top: 1px;  padding-bottom: 3px;  padding-left: 10px;
}

div.link a:link, div.link2 a:link { color: #444444; }
div.link a:visited, div.link2 a:visited { color: #444444; }
div.link a:active, div.link2 a:active { color: #444444; }
div.link a:hover, div.link2 a:hover {
  background-color: #a88e71;
  color: #ffffff;
}


/************************/
/*                      */
/*                      */
/*        Footer        */
/*                      */
/*			*/

/* Contained in the 'container', contains only 'footerRightDecor'. */

div.footer {
  position: relative;
  display: block;
  clear: left;
  overflow: visible;
  width: 800px;
  height: 103px;
  background-image: url("pics/fb-footer-bottom.jpg");
  background-repeat: no-repeat;
  z-index: 1;
}

div.footerRightDecor {
  position: absolute;
  display: block;
  top: -197px;
  left: 800px;
  height: 300px;
  width: 63px;
  background-image: url("pics/fb-footer-side.jpg");
  background-position: bottom left;
  background-repeat: no-repeat;
}




/*********************************************************************/
/*********************************************************************/
/**                                                                 **/
/**                         Content styles                          **/
/**                                                                 **/
/*********************************************************************/
/*********************************************************************/

/* All formatting from this point on must be inside 'content' element.
 * Preferably 'content' contains only 'raw', 'rawLeft', 'text' and
 * 'textRight' elements */

/*************************************************/
/*                                                */
/*  Picture content positioning (=left column)    */
/*                                                */
/*                                                */


/* A content container without any formatting. */
div.raw { }

/* Takes left half of available horizontal space for the content.
 * Basically used for pictures etc.  Doesn't contain any formatting for
 * text.
 */
div.rawLeft {
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
}

div.rawLeft a:link,
div.rawLeft a:visited,
div.rawLeft a:active,
{
  color: #444444;
  text-decoration: none;
  font-weight: bold;
} 


/************************/
/*                      */
/*                      */
/*     Text content     */
/*      formatting      */
/*                      */
/*			*/


/* Positioning for text, whose width is the full content area, meaning
   both columns */

div.text {
  width: 99%;
  margin-left: 5px;
}

/* Positioning for text on the right half of the content (=right column) */

div.textRight {
  margin-left: 315px;
}

div.text, div.textRight {
  position: relative;
  display: block;
  height: 100%;
  color: #444444;
  font-weight: normal;
}

div.text em, div.textRight em {
  font-weight: bold;
  font-style: normal;
}

div.text a:link, div.textRight a:link,
div.text a:visited, div.textRight a:visited,
div.text a:active, div.textRight a:active
{
  color: #444444;
  text-decoration: none;
  font-weight: bold;
} 

div.text a:hover, div.textRight a:hover {
  background-color: #d3cdc5;
  color: #444444;
}

/* Same as above, but without highlighting the anchor element. */
div.text a.noHl:hover {
  background-color: white;
  color: #444444;
}

h1, h2, h3, h4 { color: #444444; }
h1, h2, h3 { text-transform: uppercase; }
h1 { font-size: large; }
h2 { font-size: medium; }
h3 { font-size: small; }
h4 {
  font-size: small;
  text-transform: lowercase;
}


/***************************************************************/
/*                                                             */
/* section, where images are links to elsewhere.  For example  */
/* scrapbook and faculty pages                                 */
/*                                                             */

div.imageLinks {
  position: relative;
  width: 95%;
  height: 100%;
  color: #444444;
  font-weight: normal;
  margin-left: 5px;
}

div.imageLinks img {
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

table.imageTable td {
  height: 160px;
  width: 200px;
  vertical-align: middle;
  text-align: center;
}

/* Don't give a border to all images */
img {
  border-width: 0px;
  border-style: none;
}


/************************/
/*                      */
/*                      */
/*   Quote formatting   */
/*                      */
/*                      */


span.quote {
  font-style: italic;
}

span.quote em {
  font-weight: bold;
  font-style: italic;
}

span.quoteAuthor {
  font-style: italic;
  font-weight: bold;
}


/************************/
/*                      */
/*                      */
/*    Language flags    */
/*                      */
/*                      */

h1.fin:before {
  content: url("pics/finnish.gif");
  margin-right: 0.3em;
}

h1.eng:before {
  content: url("pics/english.gif");
  margin-right: 0.3em;
}
 	
p.fin:before {
  content: url("pics/finnish.gif");
  margin-right: 0.3em;
} 

p.eng:before {
  content: url("pics/english.gif");
  margin-right: 0.3em;
} 


/************************/
/*                      */
/*                      */
/*       Updated        */
/*                      */
/*                      */


div.updated {
  text-align: right;
  font-style: italic;
}

div.updated:before {
  content: "Last updated ";
}

/************************/
/*                      */
/*                      */
/*     Miscellaneous    */
/*                      */
/*                      */

tr.header {
  background-color: #e8e1d7;
}