body {
  font-family : Helvetica, sans-serif;
  font-size : 12px;
  background : #ddd;
  margin : 0;
  padding : 8px 0;
}
h1 {
  margin : 0;
  line-height : 40px;
  font-size : 20px;
  color : #6D6F71;
  height : 36px;
  text-transform : uppercase;
}
h1 a {
  color : #6D6F71;
  text-decoration : none;
}
#top {
  margin : 0 auto;
  width : 682px;
  position : relative;
}

hr { display : none; }
#game {
  position : relative;
  padding : 8px 20px 15px;
  background : #fff;
  border : 5px solid #78a;
  min-height : 400px;
  margin-bottom : 12px;
}
#game:after { display:block; clear:both; content:"."; visibility:hidden; font-size:1px; height:0; }


.error {
  font-weight : bold;
  border : 2px dotted red;
  background : #ffc;
  padding : 10px 20px;
}

.stats {
  font-size : 18px;
  height : 40px;
  line-height : 50px;
}
.stats:after { display:block; clear:both; content:"."; visibility:hidden; font-size:1px; height:0; }
.stats div {
  font-size : 30px;
  line-height : 40px;
  float : left;
}
.stats span { position:absolute;right:9999em;left:auto; }

.stats em,
.stats strong {
  font-style : normal;
  font-weight : normal;
}
#time {
  float : right;
}


#message {
  float : none;
  font-size : 20px;
  line-height : 37px;
  position : absolute;
  right : 33px;
  text-align : center;
  top : 48px;
}
#message em {
  display : inline-block;
}


#tray {
  height : 70px;
}
#tray {
  padding : 10px;
  background : #eee;
  background : rgba(100,100,100,0.2);
  margin-bottom : 0;
  border : 2px solid #ccc;
}
#tray input {
  background : #eee;
  background : transparent;
  border : 0;
  font-family : inherit;
  font-size : 68px;
  height : 68px;
  width : 330px;
  text-transform : uppercase;
  outline : none;
  font-family : 'Helvetica Neue', Helvetica, 'Microsoft Sans Serif', sans-serif;
}
body.safari #tray input {
  font-family : Helvetica, sans-serif;
}


#letters {
  position : absolute;
  top : 83px;
  right : 30px;
  width : 240px;
  height : 46px;
}

a.char {
  font-size : 50px;
  line-height : 70px;
  margin : 3px;
  display : block;
  float : left;
  text-decoration : none;
  border-bottom : 2px solid #ccc;
  border-right : 2px solid #ccc;
  font-family : 'Helvetica Neue', Helvetica, 'Microsoft Sans Serif', sans-serif;
  outline : none;
}
body.safari a.char {
  font-family : Helvetica, sans-serif;
}

a.char b {
  cursor : pointer; /* MSIE */
  display:block;
  background : #FDA;
  border : 2px solid #A75;
  border-top-color : #c97;
  border-bottom-color : #841;
  color : #432;
  font-weight : normal;
  text-align : center;
  text-decoration : none;
  text-transform : uppercase;
  height : 60px;
  width : 50px;
}

#letters a.char b {
  border-width : 1px;
  font-size : 30px;
  height : 38px;
  line-height : 38px;
  width : 32px;
  margin-left : -2px;
  margin-top : -2px;
}
a.char:hover b {
  background : #feb;
  box-shadow : 0 0 11px rgba(117, 136, 170,.5);
  -moz-box-shadow : 0 0 11px rgba(117, 136, 170,.5);
  -webkit-box-shadow : 0 0 11px rgba(117, 136, 170,.5);
}


#buttons {
  margin-bottom : 10px;
  margin-top : -10px;
  padding-right : 10px;
  text-align : right;
}
#buttons button {
  background : #f6f6f6;
  border : 1px solid #aaa;
  border-bottom-color : #666;
  border-right-color : #666;
  color : #666;
  display : inline-block;
  text-decoration : none;
  height : 21px;
  padding : 0 5px 1px 5px;
  margin : 1px;
  margin-right : 5px;
  -moz-border-radius : 7px;
  -webkit-border-radius : 7px;
  border-radius : 7px;
  cursor : pointer; /* MSIE */
}
#buttons button:hover {
  height : 23px;
  padding : 1px 6px 2px 6px;
  color : #000;
  margin : 0;
  margin-right : 4px;
  ~margin-right : 3px;
  background : #fff;
}
#buttons button[disabled] {
  cursor : default; /* MSIE */
  height : 21px;
  padding : 0 5px 1px 5px;
  margin : 1px;
  margin-right : 5px;
  background : #f6f6f6;
  border-color : #ccc;
  color : #aaa;
}


#board {
  margin-top : 10px;
}
#board:after { display:block; clear:both; content:"."; visibility:hidden; font-size:1px; height:0; }

.loading #board {
  height : 200px;
  background : url(spinner.gif) 50% 50% no-repeat;
}

#board ul {
  float : left;
  list-style : none;
  margin : 0 0 0 16px;
  padding : 1px 0 0 0;
}
#board ul.l3 {
  margin : 0;
  width : 101px;
}
#board ul.l4 {
  width : 131px;
}
#board ul.l5 {
  width : 161px;
}
#board ul.l6 {
  width : 191px;
}
#board li {
  padding-bottom : 4px;
  float : left;
  margin-right : 9px;
}
#board li.even {
  margin-right : 0;
}

#board li span {
  display : inline-block;
  cursor : default;
}
#board li b {
  background : #eee;
  border : 1px solid #777;
  color : #aaa;
  display : inline-block;
  height : 15px;
  line-height : 16px;
  margin-right : -1px;
  text-align : center;
  text-transform : uppercase;
  width : 14px;
}
#board li a {
  display : block;
  text-decoration : none;
}
#board li.completed a b,
#board li a b {
  background : #eef;
  border : 1px solid #77c;
  color : #000;
}
#board .solver a b {
  background : #fdfdfd;
  border : 1px solid #ddd;
  color : #999;
}
#board li a:hover b {
  background : #efe;
  border : 1px solid #070;
  color : #000;
}



#leveldone .mask,
#gameover .mask {
  background : #fff;
  opacity: .6;
  -moz-opacity: .6;
  filter:alpha(opacity=66);
  z-index: 10;
  height : 94px;
  height : 115px;
  left : 20px;
  position : absolute;
  top : 48px;
  width : 632px;
  cursor : default;
}
#leveldone .message,
#gameover .message {
  font-weight : bold;
  left : 0;
  position : absolute;
  text-align : center;
  top : 64px;
  width : 100%;
  z-index : 20;
  text-transform : uppercase;
  display : block;
  text-decoration : none;
  color : #000;
  text-shadow: 0px 0px 8px #08f;
  outline : none;
}
#gameover .message {
  text-shadow: 0px 0px 8px #f00;
}
#leveldone .message:hover,
#gameover .message:hover {
  color : #000;
}
#leveldone .message span,
#gameover .message span {
  font-size : 3.5em;
  display : block;
}
#leveldone .message em,
#gameover .message em {
  font-style : normal;
  font-size : 1.5em;
  display : block;
}


#gethelp {
  position : absolute;
  top : 1em;
  right : 0;
  text-decoration : none;
  color : #00c;
}
#gethelp:hover {
  text-decoration : underline;
}
#help {
  position : absolute;
  top : 36px;
  left : 0px;
  padding : 40px;
  z-index: 20;
  display : none;
}
#help .wrap {
  border : 2px solid #fff;
  background : #ddd;
  padding : 20px;
  -moz-border-radius : 8px;
  -webkit-border-radius : 8px;
  border-radius : 8px;
  box-shadow : 0 0 11px rgba(117, 136, 170,1);
  -moz-box-shadow : 0 0 11px rgba(117, 136, 170,1);
  -webkit-box-shadow : 0 0 11px rgba(117, 136, 170,1);
}
#help .wrap h2 {
  margin-top : 0;
}


#sounds {
  border-right:1px solid #aaa;
  color:#555555;
  padding-right:5px;
  position:absolute;
  right:100px;
  top:1em;
}
#sounds label {
  cursor : pointer;
  text-decoration : none;
  color : #00c;
}
#sounds label:hover {
  text-decoration : underline;
}

#sounds input {
  cursor : pointer;
  margin : 0;
  padding : 0;
  position : absolute;
  top : -1px;
  left : -17px;
  ~top : -3px;
  ~left : -20px;
}


.footer {
  _height:0;min-height:0;/* ie hasLayout fix */
  color : #888;
}
.footer a {
  color : #789;
  text-decoration : none;
}
.footer a:hover{
  color : #456;
  text-decoration : underline;
}

#social {
  margin-right : 20px;
  float : left;
}
#social a {
  display : block;
  margin-bottom : 5px;
  color : #333;
  font-size : .92em;
  text-decoration : none;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
  _height:0;min-height:0;/* ie hasLayout fix */
}
#social a:hover {
  color : #000;
  opacity: 1;
  -moz-opacity: 1;
  filter:alpha(opacity=100);
}
#social a img {
  border : 0;
  margin-right : 5px;
  vertical-align : middle;
}