/* CSS Document */
body { margin-bottom:0; margin-top:0; margin-left:0; margin-right:0; background-color:#253441; background-image: url("layout/body_bg.gif")}
td.header {background: url("layout/header.jpg") top no-repeat #132531; background-position: top left;}
td, p, body, a{color:#C7C7C7;FONT-FAMILY:arial, Helvetica, Sans-serif;FONT-SIZE:10pt;}
A:LINK{color:84A0C0;FONT-FAMILY:arial, Helvetica, Sans-serif;font-size:10pt; text-decoration: none;}
A:VISITED{color:84A0C0;FONT-FAMILY:arial, Helvetica, Sans-serif;font-size:10pt; text-decoration: none;}
A:HOVER{color:9B2F00;FONT-FAMILY:arial, Helvetica, Sans-serif;font-size:10pt; text-decoration: none;}

a.lm:link   { text-decoration: none; FONT-FAMILY:arial, Helvetica, Sans-serif;; FONT-SIZE:9pt; color : #ABAEB0; }
a.lm:visited { text-decoration: none; FONT-FAMILY:arial, Helvetica, Sans-serif;; FONT-SIZE:9pt; color : #ABAEB0; }
a.lm:hover	{ text-decoration: none; FONT-FAMILY:arial, Helvetica, Sans-serif;; FONT-SIZE:9pt; color : #9B2F00; }

a.imp:link {color:6A85A3;FONT-FAMILY:arial, Helvetica, Sans-serif;font-size:10pt; font-weight: bold; text-decoration: none;}
a.imp:visited {color:6A85A3;FONT-FAMILY:arial, Helvetica, Sans-serif;font-size:10pt; font-weight: bold; text-decoration: none;}
a.imp:hover	{color:7B95B3;FONT-FAMILY:arial, Helvetica, Sans-serif;font-size:10pt; font-weight: bold; text-decoration: none;}

a.ms_menul:link {color:5C3D24;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:8pt;text-decoration: none;}
a.ms_menul:visited {color:5C3D24;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:8pt;text-decoration: none;}
a.ms_menul:hover	{color:5C3D24;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:8pt;text-decoration: none;}

a.ms_rml:link {color:6A0A00;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:10pt;text-decoration: none;}
a.ms_rml:visited {color:6A0A00;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:10pt;text-decoration: none;}
a.ms_rml:hover	{color:7D530B;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:10pt;text-decoration: none;}

a.tourl:link {color:BABBBC;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:9pt;text-decoration: none;}
a.tourl:visited {color:BABBBC;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:9pt;text-decoration: none;}
a.tourl:hover	{color:8DA3BA;FONT-FAMILY:arial, Helvetica, Sans-serif; FONT-SIZE:9pt;text-decoration: none;}

.head2 { color: #6D8AA9; font-size: 15pt; font-weight: bold; text-align: center; }
.head3 { color: #6D8AA9; font-size: 15pt; font-weight: bold; text-align: justify; }
.head4 { color: #6D8AA9; font-size: 13pt; font-weight: bold; font-style: italic; text-align: justify; }
.head5 { color: #BABBBC; font-size: 11pt; font-style: italic; text-align: justify; }

.teamname { color: #6d8aa9; font-size: 11pt; font-style: bold; text-align: justify; }


.important { font-weight:bold; color:AB4234; }
.important2 { font-weight:bold; color:390D03; }
.important3 { font-weight:bold; color:511F0B; }
.ms_norm { color: #5C3D24; font-size: 10pt; text-align:justify; }
.ms_menu { color: #5C3D24; font-size: 10pt; font-weight: bold; }
.ms_rm { color: #5C3D24; font-size: 10pt; text-align:center; }
.tour { color:BABBBC; FONT-SIZE:9pt;}
.tourtxt { color:63BBE5; FONT-SIZE:10pt;}
.new { color:9B2F00; FONT-SIZE:9pt;}
.tree { color:ABAEB0; FONT-SIZE:8pt;}
.red { font-size:10pt;color:#CC0000;}
.green { font-size:10pt;color:#009900;}
.lgreen { font-size:10pt;color:#1CFF38;}
.blue { font-size:10pt;color:#006AD6;}
.yellow { font-size:10pt;color:#FFCC00;}
.purple { font-size:10pt;color:#CC33CC;}
.display_none {display:none; }
.bioq {font-size:10pt;color:#D85443; }

/* Here are the classes for the development chart below. */
/* to get a certain part of the text to be displayed in that particular color, type <font class="[CLASS]">TEXT</font>, replacing the [CLASS], with either
dev_red, dev_yellow, dev_green, dev_lblue, dev_cyan, dev_dblue, dev_purple*/
/* to alter a color of a class, you need to alter the hex code (= FF0000 for example, the # is not essential). For an idea of hex codes, you can go to
http://webmonkey.wired.com/webmonkey/reference/color_codes/ though there are, of course, many more codes. */

.dev_red { color:#D56161;}
.dev_yellow { color:#E4E466;}
.dev_green { color:#6DE16D;}
.dev_lblue { color:#009999;}
.dev_cyan { color:#5EC1BD;}
.dev_dblue { color:#68789F;}
.dev_purple { color:#857497;}

/*that was it, seven of them :) */

ul {list-style-type: disc; }

hr { width: 90%; }

.map-container {
  position: relative;
  display: inline-block; /* keeps the container size to the image */
}

.map-container img {
  display: block;
}

@font-face {
  font-family: 'Perpetua';
  src: url('perpetua.ttf') format('truetype');
}

@font-face {
  font-family: 'Book Antiqua';
  src: url('bookantiqua.ttf') format('truetype');
}

.zone-text {
  color: purple;
  font-family: 'Perpetua', sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

.trade-text {
  color: red;
  font-family: 'Perpetua', sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

.town-text {
  color: orange;
  font-family: 'Book Antiqua', sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

a .hover-text {
  display: none;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

a:hover .zone-text {
  color: purple;
  display: none;
  font-family: 'Perpetua', sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

a:hover .trade-text {
  display: none;
  color: orange;
  font-family: 'Perpetua', sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

a:hover .town-text {
  display: none;
  color: orange;
  font-family: 'Book Antiqua', sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

a:hover .hover-text {
  display: inline;
}