html, body {
  height: 100%;
}
#main {
  font-size: 1em;
  background-color: #fff;
/*  color: #666; */
  margin: 0 2.5em 0 10.5em;
/*  _margin: 0 50px 0 12.5em; */
  padding: 0 10px;
  height: 100%;
  min-height: 100%; /*for mozilla*/
}
/*for mozilla */
html>body #main {
  height:auto;
}


body {
  font-family: Verdana, Helvetica, Geneva, Arial, sans serif;
  margin: 0px;
  padding: 0px;
  background-color: #666;
  color: #222;
}

h1, h2, h3, h4 { font-family: Georgia, Times Roman, serif; color: #666; }

h3, h4, h5 { margin-top: 10px; margin-bottom: 5px; }

select { font-weight: bold; padding: 1px; color: #333; }
/* ---------- logo ---------- */
#logo {
  position: absolute;
  left: 1em;
  top: 15px;
  width: 8.5em;
}

#logo img {
  border: none;
}

/* ---------- titlebar ---------- */
#titlebar {
  position: relative;
  padding: 2px 2px 5px 2px;
  margin: 0;
}

#titlebar h1 {
  display: inline;
  font-family: Georgia, Times Roman, serif;
}

#titlebar h1 a, #titlebar h1 a:visited, #titlebar h1 a:hover {
  color: #666666;
  text-decoration: none!important;
}

/* ---------- title bar ---------- */
#titlebar .login {
  float: right;
  font-size: 0.8em; 
  padding-right: 10px;
  padding-top: 1em;
  text-align: right; 
}

#titlebar a, #titlebar a:hover, #title a:link, #title a:visited { color: #666666; }

#titlebar #help {
  background: url('./images/help.png') top right no-repeat;
}

/* ---------- buttons ---------- */
#buttons, .buttons {
  text-align: center;
  margin: 10px 0 5px 0;
  padding: 5px 0;
  clear: both;
}

.buttons a {
  font-size: 0.8em;
  text-decoration: none;
  color: #666;
  cursor: pointer;
  padding: 5px;
  margin: 0 10px; 
  white-space: nowrap;
  line-height: 2.5em;
/*  position: relative; *//* required for advice module */
/* I couldn't find a place where it's required in the advice module, maybe it's better to add additional style for the advice module if required */
  border: 1px dotted #fff;
  background-repeat: none!important;
}

.buttons a:hover {
  /* border: 1px dotted #666;*/
}

.buttons .next_small, .buttons .replay, 
.buttons .download_small, .buttons .reset_small, .buttons .finish_small,
.buttons .start_small, .buttons .done_small { 
  padding-right: 30px!important; 
}

.buttons .previous_small,
.buttons .redo_small { padding-left: 25px!important; }

.buttons .start, .buttons .validate, .buttons .next,
.buttons .flip, .buttons .first, .buttons .last, .buttons .finish { 
  padding: 10px 35px 10px 5px!important; 
}

.buttons .previous, .buttons .first {
  padding-left: 35px!important; padding-top: 10px; 
}

.buttons a.redo_small {
  background: transparent url('images/nav/Redo 24 n p8.png') top left no-repeat;
}

.buttons a.redo_small:hover {
  background: transparent url('images/nav/Redo 24 h p8.png') top left no-repeat;
}

.buttons a.next {
  background: transparent url('images/nav/Forward 32 n p8.png') top right no-repeat;
}

.buttons a.next:hover {
  background: transparent url('images/nav/Forward 32 h p8.png') top right no-repeat;
}

.buttons a.next_small {
  background: transparent url('images/nav/Forward 24 n p8.png') top right no-repeat;
}

.buttons a.next_small:hover {
  background: transparent url('images/nav/Forward 24 h p8.png') top right no-repeat;
}

.unavailable { margin: 20px 10px; }

/* ---------- footer ---------- */
#footer {
  font-size: 70%;
  color: #666;
  margin: 5px 0;
  padding-bottom: 10px;
  border: none;
}

#footer a, #footer a:link, #footer a:visited {
  color: #666;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}

/* ---------- shadow box ---------- */
.shadowbox_bg { position: relative; border: 1px solid #FFF;}
.shadowbox_content { padding: 0.75em; }
.shadowbox_t { background: url('images/shadowbox/top.png') 0% 0% repeat-x; }
.shadowbox_tl { background: url('images/shadowbox/topleft.png') 0% 0% no-repeat; }
.shadowbox_tr { background: url('images/shadowbox/topright.png') 100% 0% no-repeat; }
.shadowbox_b { background: url('images/shadowbox/bottom.png') 0% 100% repeat-x; }
.shadowbox_br { background: url('images/shadowbox/bottomright.png') 100% 100% no-repeat; }
.shadowbox_bl { background: url('images/shadowbox/bottomleft.png') 0% 100% no-repeat; }
.shadowbox_r { background: url('images/shadowbox/right.png') 100% 0% repeat-y; }
.shadowbox_l { background: url('images/shadowbox/left.png') 0% 0% repeat-y; }



/* ---------- misc ---------- */
.hidden { display: none; }

.clearall { clear: both; }

.dimmed, .disabled {
  filter: alpha(opacity=50)!important;
  opacity: 0.5!important;
  color: #AAA;
  cursor: default!important;
}

.menu .dimmed { width: 100%; }

.draggable { cursor: move; }

span.term { border-bottom: 1px #666 dashed; }

p { margin: 0; padding: 2px 0 3px 0; }

/* used ? */
.keyword {
  color: #FF9900;
  font-weight: bolder;
}

/* used ? */
.bold {
  font-weight: bolder;
}

.inx {
  color: #333333;
  font-family: Georgia, Times Roman, serif;
  font-style: italic;
}

.inx .title {
  font-weight: bolder;
}

a.note {
  font-size: 0.8em;
  vertical-align: super;
  text-decoration: none;
}

.footnotes {
  font-size: 0.1em;
  border-top: 1px solid #FF9900;
  width: 40%;
}

.footnote {
  font-size: 0.8em;
  margin: 5px 0;
}

.loading {
  font-style: italic;
  text-align: center;
  cursor: wait;
}

.error { visibility: hidden; }

#profile {
  padding-bottom: 5px;
  border-bottom: 1px dotted #666; 
  margin-bottom: 10px;
}

#profile div { margin: 2px 0; }

#profile .caption { float: left; width: 10em; }

/* ---------- info ---------- */
.info ul { margin: 0; padding: 0; padding-left: 15px; }
.info ul li { padding-top: 5px; }

.flash { font-size: 70%; }

#flashdemo { 
  display: none; 
  width: 800px;
  height: 600px;
}

#flashdemo embed { z-index: 999999999; }