/**************************************************** 
 * General settings
 ****************************************************/

/* Browsers may want to use own margins, borders and paddings.
 * By default, disable that to set all margins manually. */

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

body {
  background-color: #edebeb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
}

h1 {
  text-align: center;
  font-size: 160%;
  padding: 20px 0px 10px 0px;
}

h2 {
  text-align: left;
  font-size: 120%;
  padding: 20px 0px 10px 0px;
}

/* Underline links only when pointed */
a:link, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Link, which switches the language */
li.lang {
  padding-top: 40px;
}

/* The marker of the list items is outside of the list item content */
ul {
  list-style-position: outside;
}

/****************************************************
 * Title of the page in the top row of the main table 
 ****************************************************/
.topbar {
  height: 128px;
  color: black;
  text-align: center;
  vertical-align: bottom;
}

/**************************************************** 
 * Menu on the left of the page 
 ****************************************************/
.leftside {
  width: 242px;
  vertical-align: top;
  background-color: #92183c;
  text-align: left;
  font-weight: normal;
}

/* In leftside bar, "p" is the name of a group of pages. */
.leftside p {
  font-size: 16pt;
  margin: 15px 10px 0px 10px; /* top right bottom left */ 
  color: #c4c4c4;
}

/* In leftside bar, "li" are links to other pages */
.leftside li {
  font-size: 12pt;
  color: #c4c4c4; /* This color _may_ be used to paint the dot */
  margin: 0px 10px 0px 30px;
}

/* "active = yes" is set for that list item, which is shown
 * in the current page. 
 * In index.html, none is active; in others, exactly one is. */
.leftside li[active] {
  color: #9c9cff;
}


/* Paint the left dot of the list same color as text when active */
.leftside li:hover {
  color: #9c9cff;
}

/************ Links ************/

.leftside :link {
  color: #ffffff;
}

.leftside :visited {
  color: #ffe0e9;
}

.leftside a:hover {
  color: white;
  text-decoration: underline;
}

/* Corner with the pensils */
.bottomLeft {
  background-color: #92183c; /* same as .leftside */
  vertical-align: bottom;
text-align: left; 
  padding-top: 10px;
}

/*****************************************************
 * Actual content of the page
 *****************************************************/
.mainContent {
text-align: left; 
  background-color: #e0dcde;
  width: 750px;
  padding: 10px; /* width + padding should be 608px, width of Town.jpg */
  vertical-align: top;
  font-size: 12pt;
}

/* Paragraphs: no vertical padding, some horizontal padding */
.mainContent p {
  margin: 0px 10px 0px 10px;
}

.mainContent li {
  margin: 0px 10px 0px 30px;
}

/* Pictures, showing work examples: want border and margin */
.mainContent img {
  border: solid black 1px;
  margin: 5px;
}

.mainContent :link {
  color: blue;
}

.mainContent :visited {
  color: #92183c;
}

/*********************************************************
 * Bottom line of the table
 *********************************************************/

td.bottomBar {
  height: 31px;
  color: white;
  background-color: #746b6e;  
  text-align: center;
}

td.bottomBar :link, :visited {
  color: white; /* Same as color of general background */
}