/* DEFAULT SETTINGS */
/* Below are default settings are used when no other style has been defined.*/
* {
  padding:0px;
  margin:0px;
  border-width:0px;
  line-height: 1.2;
}
html {
  height: 100%;
}
body {
  min-height:101%;
  /*margin: 20px;*/
  background: #FCF7F4 URL("images/background.jpg") no-repeat center 0px;
  font-size: 100.01%; /* [1] */
}
body, p, li, td, h1, h2, h3 {
  font-family: "Times New Roman", Times, serif;
  color: #000080;
  font-size: 14px;
}
p, h1, h2, h3 {
  padding-bottom: 12px;
  line-height: 16px;
}
div, table, td {
  position: relative;
}
ul, ol {
  padding-bottom: 12px;
  margin-left: 12px;
}
li {
  margin-left: 12px;
}
h1 {
  font-size: x-large;
  font-style: italic;
  font-weight: bold;
  color: #B00000
}
h3 { font-family: "Times New Roman", Times, serif; font-size: medium; font-style: normal; font-weight: bold; color: #000080}
h2 { font-family: "Times New Roman", Times, serif; font-size: medium; font-style: normal; font-weight: bold; color: #000080}
h4 { font-family: "Times New Roman", Times, serif; font-size: medium; font-style: italic; font-weight: bold; color: #000080}
h5 { font-family: "Times New Roman", Times, serif; font-size: medium; font-weight: bold; color: #b00000}
.popup { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #0000CC}
hr {
  border-top: 1px Dotted Silver;
}
.clr {
  clear: both;
}
/* MAST HEAD ---------------------------------------------- */
#mast {
  background: URL("images/logo.gif") no-repeat;
  background-position:0px 6px;
  margin-left: 20px;
  margin-top: 20px;
  padding: 0;
  padding-left: 60px;
  width: 820px;
  max-width: 750px;		/* for firefox */
  height: 150px;
  text-align:right; 
}
#title {
	margin: 0;
	padding: 0;
	border: 0;
  color: #000066;
  font-size: 32px;
  font-style: italic;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 0px;
  line-height: 1em;
}
#descript {
  margin-top: .3em;
  font-size: 16px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: .04em;
  line-height: 1.8em;
}
#country{
  margin-top: .5em;
  font-size: 14px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: .25em;
  line-height: 1.8em;
}
/* END MAST HEAD --------------------------------------------------------- */

/* MAIN MENU --------------------------------------------------------------*/
#men-new{
display: compact;
position: absolute;
top: 175px;
width: 700px;
height: 25px;
padding: 0;
margin-left: 20px;
}

#men-new a{
font-size: 13px;
font-weight:bold;
color:#000066;
padding-top: .2em;
padding-bottom: .2em;
padding-right: 1em;
text-decoration:none;
text-align: left;
}
#men-new a:hover{color:#CC0000;}

/* SUB MENUES ~~~~~~~~~~~~~~~~~~~~~*/
#about, 
#courses,
#services,
#branches, 
#resource{
z-index: 2;
position:absolute;
top: 198px; /* 13.5em */
display: inline;
margin: 0;
width:100%;
height: 25px;
visibility:hidden;
}

#about{
left: 5.6em;
width: 42em;
}
#courses{
left: 17em;
width: 18em;
}
#services{
left: 23em;
width: 45em;
}
#branches{
left: 29em;
width: 45em;
}

#resource{
left: 35.4em;
width: 25em; /*20em*/
}

#about a, 
#courses a,
#services a,
#branches a, 
#resource a{
font-size: 13px;
font-weight:bold;
color:#9999ff;
margin-top: 1.5em;
padding: 0;
padding-left: .5em;
padding-right: .5em;
text-decoration:none;
}
#about a:hover, 
#courses a:hover,
#services a:hover,
#branches a:hover,
#resource a:hover{
color: white;}

#sub-bar {
position:absolute;
background-color:#000066;
left: 0;
top: 195px; /* 13.5em*/
width: 100% ;
height:24px;
z-index:1;
}
/* END MAIN MENU --------------------------------------------*/
#events ul {
  list-style: none;
  margin: 0px;
}
#events li {
  margin: 0px;
}

.quote {
  font-style: italic;
  padding-left: 20px;
  padding-top: 0px;
  margin-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 6px;
}
.quote_source {
  padding-top: 0px;
  margin-top: 0px;
  padding-left: 30px;
  font-size: 13px;
}
.quote_source span {
  font-weight: bold;
}

/* Fluid 3 column layout addapted from http://www.webproducer.at/flexible-layout/ */
#col-a {
  float: right;
  width: 100%;
}
#col-a[id] { /* [2] */
  margin-left: -1px;
}
#col-b {
  float: left;
  margin-left: -22em; /* -22em */
  z-index: 10; /* [3] */
}
#col-b[id] { /* [2] */
  margin-right: 1px;
}
#col-c {
  float: right;
  margin-right: -22em;
  z-index: 11; /* [3] */
}
#col-c[id] { /* [2] */
  margin-left: 1px;
}
.show-all #columns {
  padding: 0 22em;
}
.hide-left #columns {
  padding: 0 22em 0 0;
}
.hide-right #columns {
  padding: 0 0 0 22em;
}
.hide-all #columns {
  padding: 0 0;
}
.cols-wrapper {
  width: 100%;
}
.cols-wrapper[class] {
  padding-bottom: 0.1px; /* [4] */
}
.float-wrapper {
  float: left;
  width: 100%;
  position: relative;
  z-index: 0;
}
.float-wrapper[class] { /* [2] */
  margin-right: -1px;
}
.sidecol {
  position: relative;
  width: 22em;
  overflow: hidden;
}
.box,
.main-content {
  margin: 0 1em;/*margin: 0 1em;*/
  max-width: 800px; 
}
.clear {
  clear: both;
}
#link-top{
margin-left: 20px;
margin-bottom: 20px;
}
#footer_menu {
  clear: both;
  text-align: center;
  font-size: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.none {
  display: none;
}
#main {
	position: absolute;
	top: 280px;
	margin: 20px;
	text-align: left;
	width: 95%;
  
}

/*
  [1] Play nice with EMs in Opera 6 and IE Win.
  [2] Support for Mozilla, but IE doesn't likes it.
  [3] Z indices needed for link clickability in IE Mac and Opera 6.
  [4] Mozilla needs a non zero value, seems to be a bug.
*/
/*
body {
  text-align: center;
}

#em {
  width: 1em;
  height: 0;
  overflow: hidden;
}

*html #main {
position: absolute;
  top: 280px;
  margin-left: 20px;
  text-align: left;
  width: expression(  (d = document)
                   && (fs = d.getElementById('em').offsetWidth)
                   && (po = 2 * fs)
                   && (bo = 3)
                   && (min = 50 * fs)
                   && (max = 70 * fs)
                   && (cw = d.body.clientWidth)
                   && (px = 'px')
                   && (cw - po >= max + bo ? max + px : cw - po <= min + bo ? min + px : 'auto')
                   );
}


Min- and max-width implementation for Windows Internet Explorer

About the weird dynamic property expression

fs = font-size (from the #em element)
min = min-width
max = max-width
po = padding offset (from the body)
bo = border offset (from the #main container, IE 6 seems to need one additional px)
cw = client width
px = pixel

(Feel free to suggest more intuitive names.)

Quriks-mode vs. standards-mode

This expression is the result of extensive trial and error.
I quess reading widths is equal in quirks- and standards-mode
(in this demo), but setting them is different. I don't want
to account for those differences, because they are very little.

*/