/*
 Copyright 2009, Dan C. Maftei
 Released under the Creative Commons BDS license
 http://creativecommons.org/licenses/BSD/
 */

/* Readability scores section */
#scores { margin: 1em 0; }
#scores * { margin: 0; padding: 0; }
#scores p { margin-bottom: 1em; }
#ui_container {
  position: relative;
  width: 4.1in;
  margin: 0 auto 1em auto;
}

/* Tabs */
#tab_container {
  float: left; width: auto;
}
.tab_shadow {
  position: relative; top: 3px;
  float: left; width: 2px;
  background-color: #ccc;
}
#tab_uri, #tab_direct, #tab_results {
  position: relative; top: 1px;
  float: left; width: auto;
  
  padding: 0 .5em 1px .5em;
  background-color: white;
  cursor: pointer;
  font-weight: bolder;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
}

/* Panels container */
#panel_container {
  clear: both;
  position: relative;
  width: 4in; height: 2.6in;
}
#panel_shadow {
  position: relative; top: 4px; left: 4px;
  width: 4in; height: 2.6in;
  background-color: #ccc;
}
#panel_content {
  position: relative; top: -4px; left: -4px;
  width: 4in; height: 2.6in;
  border: 1px solid #000;
  background-color: #fff;
}

/* Panels */
#div_uri, #div_direct, #div_results {
  position: relative;
  padding: .5em;
}
#div_uri label { float: left; width: 4.5em; }
#div_uri #uri { width: 20em; }
#div_direct textarea { width: 95%; height: 1.6in; }
#div_results span.title { font-weight: bold; }
#div_results table { width: 90%; margin-left: 1em; margin-bottom: .5em; }
#div_results td { border-bottom: 1px solid black; }

/* Mouse-over pop up */
#scores .popup {
  position: absolute; top: -25px; left: 5px;
  z-index: 40;
  width: 245px;
}
#scores .popup_top { background: url(popup.gif); min-height: 60px; padding: 1px; }
#scores .popup_bottom { background: url(bottom.gif); height: 20px; }
#scores .popup_top h4 {
  margin: 10px 5px 0 55px;
  font-size: 10pt; color: #f00; }
#scores .popup_top p {
  margin: 5px 10px 0 55px;
  font-size: 9pt; color: #000; text-align: justify; }

/* used for both tabs and panels */
#scores .front { position: relative; z-index: 30; }
#scores .back { }
#scores .hidden { display: none; }
#scores .button { padding: 0 1em; }
