html, body {
  margin:0px;
  padding:0px;
}


/* ********************************************************************
* Daily Crossword
*
******************************************************************** */

body {
  margin:0;
  padding:0px;
  width:720px;
  height:500px;
  position:relative;
  font-family:Arial,sans-serif;
  overflow:hidden;
}

body .center {
  text-align:center;
}
body .hidden {
  visibility:hidden;
}

body #header {
  margin:0px;
  padding:0px;
  height:96px;
  width:435px;
  position:absolute;
  top:0px;
  left:225px;
  color:#222222;
  background:transparent url(img/chrome.png) no-repeat scroll top left;
}
body #header h2 {
  padding:0px;
  margin:20px 0px 2px 8px;
  font-size:10pt;
  width:390px;
  overflow:hidden;
  white-space:nowrap;
}

body #header ul#clues {
  margin:0px 6px;
  padding:0px;
  list-style-type:none;
  width:300px;
  color:#000000;
  opacity:0.7;
}
body #header ul#clues li {
  font-size:8pt;
  text-align:right;
  margin-bottom:1px;
}
body #header ul#clues li span {
  display:inline-block;
  text-align:left;
  padding:0px 3px;
  width:244px;
  height:16px;
  border:1px inset #888888;
  font-weight:bold;
  background-color:#f6f6f6;
  overflow:hidden;
  vertical-align:middle;
  white-space:nowrap;
}
body #header ul#clues li span.selected {
  background-color:#e0ffe0;
}

body #header a {
  display:block;
  position:absolute;
  top:43px;
  right:37px;
}
body #header a img {
  vertical-align:top;
  width:85px;
}

body #header img#close {
  position:absolute;
  top:5px;
  right:33px;
  cursor:pointer;
}
body #header img#minimize {
  position:absolute;
  top:5px;
  right:51px;
  clip:rect(0px, 16px, 16px, 0px);
  cursor:pointer;
}
body #header img#save {
  position:absolute;
  top:5px;
  right:79px;
  clip:rect(0px, 16px, 16px, 0px);
  cursor:pointer;
}
body #header img#save.active {
  top:-11px;
  clip:rect(16px, 16px, 32px, 0px);
}

body #header img#menu_about {
  position:absolute;
  top:5px;
  right:107px;
  cursor:pointer;
}
body #header img#menu_cheat {
  position:absolute;
  top:5px;
  right:125px;
  cursor:pointer;
}
body #header img#menu_load {
  position:absolute;
  top:5px;
  right:143px;
  cursor:pointer;
}


body #playarea {
  position:absolute;
  top:77px;
  left:225px;
  width:407px;
  height:407px;
}
body #playarea img.shadow {
  position:absolute;
  width:16px;
  height:16px;
}


body #keyboard {
  position:absolute;
  bottom:14px;
  right:-38px;
  width:50px;
  height:350px;
  margin:0px;
  padding:16px 38px 16px 0px;
  list-style-type:none;
  background:transparent url(img/keyboard-tab.png) no-repeat scroll left center;
  cursor:pointer;
}
body #keyboard li {
  display:inline-block;
  vertical-align:top;
  width:21px;
  height:21px;
  line-height:21px;
  border:2px outset #dddddd;
  background-color:#dddddd;
  text-align:center;
  font:bold 16px Arial,sans-serif;
  cursor:pointer;
  overflow:hidden;
}
body #keyboard li.space {
  width:46px;
}
body #keyboard li:hover {
  border:2px outset #eeeeee;
  background-color:#eeeeee;
}
body #keyboard li:active {
  border:2px inset #bbbbbb;
  background-color:#bbbbbb;
}


body #cluelist {
  position:absolute;
  bottom:-16px;
  left:-27px;
  width:243px;
  background:transparent url(img/cluelist.png) no-repeat scroll left bottom;
  cursor:pointer;
  clip:rect(auto, 43px, auto, auto);
}
body #cluelist div {
  margin:2px 16px 16px 27px;
  padding:4px 5px;
  border:2px solid #333333;
  background:#f6f6f6 url(img/cluelist.bkg.jpg) no-repeat scroll center bottom;
  height:395px;
  overflow:auto;
}
body #cluelist div h2 {
  font-size:10pt;
  margin:0;
  border-bottom:1px solid #bbbbbb;
}
body #cluelist div ol {
  margin:3px 0px 10px 2.4em;
  padding:0px;
  font-size:8pt;
}
body #cluelist div ol li {
  color:#000000;
  opacity:0.8;
  padding:1px 3px;
}
body #cluelist div ol li.highlight {
  background-color:#cccccc;
}
body #cluelist div ol li.selected {
  background-color:#ddffdd;
}


body #puzzle {
  border:1px solid #000000;
  position:absolute;
  top:0px;
  left:0px;
  overflow:hidden;
  width:405px;
  height:405px;
  background-color:#f6f6f6;
}
body #puzzle div {
  display:inline-block;
  position:relative;
  margin:0px;
  padding:0px;
  border:1px solid #000000;
  background-color:#ffffff;
  width:25px;
  height:25px;
  text-align:center;
  font:bold 16pt Arial,sans-serif;
  vertical-align:top;
}
body #puzzle div.highlight {
  background-color:#e5e5e5;
}
body #puzzle div.error {
  color:#dd0000;
}
body #puzzle div.cheat {
  color:#008800;
}
body #puzzle div.cursor {
  background:#b2f4b2 url(img/cursor.gif) repeat scroll left top;
}
body #puzzle div.black {
  background-color:#000000;
}

body #puzzle var {
  font-size:7pt;
  position:absolute;
  vertical-align:top;
  color:#666666;
}


body #cover {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  opacity:0.4;
  background-color:#000000;
}


body div.dialogue {
  position:absolute;
  top:150px;
  left:52px;
  color:#000000;
  background:transparent url(img/dialogue.png) no-repeat scroll top left;
  width:290px;
  height:79px;
  padding:8px 19px 19px 8px;
  display:none;
}
body div.dialogue h2 {
  margin:0px;
  font-size:11pt;
}
body div.dialogue p {
  font-weight:bold;
  margin:5px 0px;
  font-size:10pt;
}
body div.dialogue > img:first-child {
  position:absolute;
  top:5px;
  right:20px;
  cursor:pointer;
}
body div.dialogue.noclose > img:first-child,
body div.dialogue > img#loading {
  display:none;
}
body div.dialogue.noclose > img#loading {
  display:block;
  margin:0px auto;
}

body #cheat ul {
  margin:8px 0px 0px 0px;
  padding:0px;
  list-style-type:none;
  text-align:center;
  font:bold 90% Arial,sans-serif;
  color:#ffffff;
}
body #cheat ul li {
  display:inline;
  margin:0px 4px;
  padding:2px 5px;
  cursor:pointer;
  border:1px outset #666666;
  background-color:#666666;
}
body #cheat ul li:hover {
  border:1px outset #888888;
  background-color:#888888;
}

body #load fieldset {
  margin:0px;
  border:0px none;
  padding:0px;
  text-align:center;
  font-size:9pt;
}
body #load fieldset label {
  display:block;
}
body #load fieldset input,
body #load fieldset select {
  font-size:inherit;
  margin-bottom:4px;
}


body #about {
  position:absolute;
  top:2px;
  left:2px;
  width:403px;
  height:403px;
  opacity:0.95;
  background-color:#ffffff;
  font:normal 10pt Arial,sans-serif;
  color:#000000;
  overflow:auto;
  display:none;
}
body #about h1 {
  font-size:14pt;
  margin:3px 5px 3px 5px;
}
body #about p {
  font-size:9pt;
  margin:3px 5px;
}
body #about p img {
  vertical-align:middle;
  line-height:0px;
}
body #about h2 {
  font-size:12pt;
  margin:6px 5px 3px 5px;
  border-bottom:1px solid #888888;
}
body #about dl {
  margin:4px 5px;
  font-size:9pt;
}
body #about dl dt {
  float:left;
  clear:both;
  font-weight:bold;
  margin:0px 15px 0px 5px;
}
body #about dl dd {
  text-align:right;
  margin:0px 5px 5px 5px;
}


body.minimized #clues,
body.minimized #header a,
body.minimized #save,
body.minimized #menu_about,
body.minimized #menu_cheat,
body.minimized #menu_load,
body.minimized #playarea {
  display:none;
}
body.minimized #header {
  background-image:url(img/chrome.mini.png);
}
body.minimized #header h2 {
  margin-top:6px;
  width:355px;
}
body.minimized #header img#minimize {
  top:-11px;
  clip:rect(16px, 16px, 32px, 0px);
}
