body{
  background-color:white;
  text-align:center;
  font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  background: white url("/images/starbg.gif") no-repeat scroll center -52px;
  margin:0;
  padding-top:10px;
}

img { border: 0; }
.unselectable {
  -moz-user-select: none;
}
a{
  color:#3b3555;
  color:#534b78;

  /* no focus lines on any of our links. */
  outline-style:none;
  outline-width:0;
  outline:none;
}
a:visited{
  color:#707070;
}
a:hover{
  color:#d50000;
}
a:active {
  /* Give feedback on mousedown of links. */
  color:black;
}

/*
 * Removes the ugly dotted outline around focused buttons in Firefox on Windows.
 * Note that there is still visual feedback that the button is focused.
 * http://www.karlrixon.co.uk/articles/css/remove-button-focus-outline-using-css/
 */
input[type="submit"]::-moz-focus-inner {
  border:none;
}

dl, dt, dd { margin:0; padding:0; }

#page{
  /* This is only 500px on the main page. */
  width: 1100px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  position:relative;
}

/* No-JS warning */
.warning{
  background-color:#FDEEC8;
  border:2px dashed #BBBBBB;
  margin-bottom:6px;
  margin-top:25px;
  padding:5px;
}


/*
* Header
*/
#header{
  text-align:center;
  z-index:1;
}

h1{
  text-indent:-9999px;
  width:360px;
  margin:0 auto;
  margin-bottom:8px;
  margin-bottom:4px;
}
h1 a{
  height:61px;

/*  width:360px;  */
  width:100%;
  display:block;
  background-image:url(/images/logo.gif);
}

#tagline{
  text-align:center;
  color:#363636;
  margin-bottom:15px;
}
form{
  display:inline;
}

/* random button*/
#random{
  margin-left:3px;
}
#lookup_text{
  padding:2px;
  border-width:1px;
  width:220px;
  border-bottom:1px solid #c5c5c5;
  border-right:1px solid #c5c5c5;
  margin-right:3px;
}
#search-area{
  text-align:center;
}
#search-area input{
  margin-left:4px;
}
#message{
  text-align:center;
  font-size:80%;
  color:#333333;
}
#message a{
  text-decoration:none;
  font-weight:bold;
/*  color:#d50000;*/
}


/*
* Definition display
*/
#results{
  text-align:left;
  /*If you use margins here, IE will shift the search area
  down when you click random. Pretty amazing bug. */
  padding-top:15px;
  margin:0;
  position:relative;
  min-height:60px;
}
/* IE6 min-height */
* html #results{ height:60px;}

.word, .loading, .fetch-error{
  text-align:left;
  padding-top:6px;
  padding-bottom:6px;
}
.fetch-error{
  font-style:italic;
}

.title-word{
  font-weight:bold;
  margin-bottom:3px;
}

.pronunciation-icon {
  background: white url(/images/audio-icon-inactive.gif) no-repeat;
  position:absolute;
  margin-top:3px;
  right:46px;
  display:block;
  width:19px;
  height:20px;
}

.pronunciation-icon-playing {
  background: white url(/images/audio-icon-active.gif) no-repeat;
}

/* Needed for IE6 to center the HR */
div.hr-container {
  text-align:center;
}

hr{
  width:90%;
  width:80%;
  border-width:0px;
  color:#c5c5c5;
  background-color:#c5c5c5;
  height:1px;
  margin-top:4px;
  margin-bottom:4px;
}

.loading{
  background-color:white;
}

.synonyms .more{
  margin-left:.5em;
  font-size:.85em;
  font-style:italic;
}

/* The entries themselves have a lot of links in them.
   Don't decorate each one with an underline*/
.entry a, .synonyms a { text-decoration: none; }
.entry a:hover, .synonyms a:hover { text-decoration: underline; }

.article, .synonym-title {
  color:#444;
  font-size:15px;
}
/* The synonyms are indented. The second line of the synonyms (see manganimous) should be vertically
   aligned with the start of the definition text. */
.synonyms {
  margin-top:6px;
  margin-left:32px;
  text-indent:-26px;
}
dd.entry, dd.article {
  margin-left:7px;
}

.definition {
  margin-left:25px;
  margin-bottom:3px;
}
.example {
  color:#555;
  font-style:italic;
  margin-left:35px;
}
/* IE6 has the examples running up against the definition on the next line. */
* html .example { margin-bottom:3px; }
span.definition-marker {
  position:relative;
  margin-left:-14px;
  margin-right:7px;
  top:4px;
  height:10px;
}

/* Suggestion message shown when there's a dictionary correction */
.did-you-mean{
  font-style:italic;
  color:#60597b;
  margin-bottom:6px;
}
.correct-word {
  font-weight:bold;
  color:black;
}

/* Used on the index page to show nav links. */
#footer-area{
  clear: both;
  text-align:center;
  margin-bottom:5px;
}

p#footer{
  clear: both;
  margin-top:4px;
  font-size:smaller;
  text-align:center;
  padding-bottom:8px;
}
span#copyright{
  font-size:smaller;
}

/*
* copy styles
*/
h1, h2, h3 {
  font-size:1.45em;
  font-family: "Georgia","Times New Roman", serif;
  font-weight:normal;
}
h2, h3 {  margin-bottom:10px;}
h4 { margin-bottom: 4px; }

h2 {
  margin-top:25px;
  font-size:1.8em;
  padding-bottom:3px;
  border-bottom:1px solid #aaaaaa;
}

.screenshot{
  margin-bottom:10px;
}
ul{
  margin-left:0;
  padding-left:20px;
}

p{
  margin: 5px 0;
}
.copy table{
  margin-left:5px;
}

.copy{
  line-height:140%;
}

/*
* History
*/
#history{
  background-color:white;
  position:absolute;
  top:0;
  text-align:left;
  /* should be the same as width of the results panel*/
  left:500px;
  /*  left:0;*/
  white-space:nowrap;
  margin-left:25px;
/*  border:1px solid blue;*/
}
#history h3{
  /* top margin should match the top padding on .word */
  font-size:1.2em;
  margin:6px 0;
  margin-top:18px;

}
#history ol{
  margin:0;
  list-style-type:none;
  padding:0;
  margin-left:3px;
  /*  margin-left:-35px;*/
}
#history li{
  margin:2px 0;
  padding:0;
}
/* IE6 opacity bug */
* html #history li{
  background-color:white;
}
#history-list a{
  outline:0;
  display:block;
  /* white, instead of transparent, for IE6. IE6 will make transparent = black */
  border-top:1px solid white;
  border-bottom:1px solid white;
  padding-bottom:1px;
}
#history-list a:hover{
  border-top:1px solid #D0D0D0;
  border-bottom:1px solid #D0D0D0;
}

/* closing link */
#history .close{
  font-size:.8em;
  display:inline;
  text-decoration:none;
  border:0;

  vertical-align:text-top;
}
#history a.close:hover{
  border:0;
}
/* don't let a gray link show through */
#history a.close:visited{
  color:#534b78;
}
#history-nav-buttons {
  font-size:1.2em;
  margin-top:-5px;
}
* #history-nav-buttons {
  margin-top:-2px;
  font-size:1.0em;
}
#history-nav-buttons .nav{
  padding-right:5px;
  padding-left:5px;
}
/* spans are greyd out links */
#history-nav-buttons span.nav{
  color:gray;
}

/* IE6 needs these two rules to show a hover effect. Other browsers do not. */
#history-nav-buttons a:visited{
  color:#534b78;
}
#history-nav-buttons a:hover {
  color:#d50000;
}
/* This contains the quicktime/wmv embed (which must be visible and not hidden) for firefox and IE */
div#sound-player-container {
  position:absolute;
  left:-20px;
  top:-20px;
}