/* Start: Plain tags */

body {
    text-align:center;
    margin:0;
    padding:0;
    color:#333;
    background:#fff;
}
body, td, th, textarea, select, h1, h2, h3, h4, h5, h6, input {
    font:12px/1.25em verdana, arial, sans-serif;
    color:#333;
}

a {
    color:#002bb8;
    text-decoration:underline;
}
a:hover {
    text-decoration:underline;
}
a:focus {
    outline:1px dotted #002bb8;
}

/* End: Plain tags */


/* Start: Modules */

.module h2 {
    height:30px;
    margin:0 10px 0 0;
    padding:0;
    border:none;
    font-size:14px;
    line-height:28px;
    font-weight:bold;
    color:#fff;
}
.module h2 span {
    display:block;
    position:relative;
    left:10px;
    height:30px;
}

.module .body {
    border-width:0 1px;
    border-style:solid;
    border-color:#bbb;
    color:#606060;
}
.module .body ul {
    list-style:none;
    margin:0;
    padding:7px 9px 8px 10px;
}
.module .body ul li {
    font-size:12px;
    line-height:17px;
    background:url(../img/icon/bullet_dk_green.gif) no-repeat left 5px;
    padding:0 0 1px 10px;
}
.module .body ul li a {
    color:#606060;
}
.module .body ul li .comment {
    font-size:12px;
    line-height:15px;
}

.module .footer {
    margin:0 10px 0 0;
    height:5px;
    font-size:0;
}
.module .footer div {
    position:relative;
    left:10px;
    height:5px;
    font-size:0;
}

/* End: Modules */


#game {
    margin:0 auto;
    padding-bottom:10px;
    width:880px;
    display:none;
}

#extraInfo {
    height:15px;
    padding-top:10px;
    font-size:12px;
    line-height:15px;
    text-align:center;
}


/* Start: Board */

#board .body {
    padding:8px 28px 18px 28px;
    border-width:0 8px;
    border-style:solid;
}
#board #liveLink {
    float:right;
}
#board h1 {
    margin:0 100px;
    padding:16px 0 0 0;
    font-size:22px;
    line-height:24px;
    font-weight:normal;
    letter-spacing:2px;
}

#tiles {
    text-align:center;
    padding-top:20px;
    height:60px;
}
#tiles ul {
    margin:0 auto;
    width:400px;
    list-style:none;
}
#tiles ul li {
    float:left;
    display:inline;
    margin:0;
    padding:0;
    border-width:2px;
    border-style:solid;
    border-color:#f7e0b9 #9f8964 #9f8964 #f7e0b9;
    width:58px;
    height:54px;
    font-size:30px;
    line-height:52px;
    text-align:center;
    background:#e3caa1 url(../img/tile.png) 0 0 repeat;
}

#guessContainer {
    height:85px;
}
#guess {
    text-align:center;
    height:85px;
}
#guess div {
    margin:0 auto;
    padding:45px 0 0 12px;
    width:300px;
    text-align:left;
}
#guess div span {
    font-size:30px;
    line-height:33px;
    letter-spacing:4px;
}

#hint {
    padding:22px 0 0 0;
    font-size:22px;
    line-height:30px;
    font-weight:normal;
    color:#aaa;
    display:none;
}

#status {
    text-align:center;
    padding-top:7px;
    height:40px;
}
#status span {
    padding:0 32px;
    font-size:26px;
    line-height:28px;
    font-weight:bold;
    letter-spacing:1px;
    background:right 7px no-repeat;
}
#status span.autoStart {
    background-image:url(../img/icon/ajax-loader.gif);
}

#board .buttons {
    height:40px;
    padding-top:5px;
}
#board .buttons button {
    width:120px;
    height:30px;
    letter-spacing:1px;
    font-size:14px;
    line-height:26px;
}
#board .buttons #skipBtn {
    margin-left:40px;
}
#board .buttons .playAgain {
    display:none;
}
#board .buttons #playAgainBtn {
    width:150px;
}

#board .footer {
    margin:0 11px 0 0;
    height:11px;
    font-size:0;
}
#board .footer div {
    position:relative;
    left:11px;
    height:11px;
    font-size:0;
}

/* End: Board */


/* Start: Options */

#optionsContainer2 {
    text-align:center;
}
#optionsContainer1 {
    margin:0 auto;
    padding-top:30px;
    width:380px;
    text-align:left;
}
#options h2 span a {
    padding-left:15px;
    text-decoration:none;
    background:1px 5px no-repeat;
}
#options .body {
    
}
#options.hidden .body {
    height:4px;
    background-image:none;
}

#options form {
    padding:12px 14px 4px 24px;
}
#options.hidden form {
    display:none;
}
#options .optionsRow {
    padding:0 0 10px 0;
}
#options h3 {
    margin:0;
    padding:0 0 8px 0;
    font-size:12px;
    line-height:15px;
    font-weight:bold;
}
#options ul {
    margin:0;
    padding:0 0 0 20px;
    list-style:none;
}
#options ul li {
    margin:0;
    padding:0 0 2px 0;
    height:20px;
}
#options ul li label {
    padding-left:8px;
    font-size:12px;
    line-height:15px;
}
#options .auto label {
    font-size:12px;
    line-height:15px;
    font-weight:bold;
}
#options .diff {
    float:left;
    width:150px;
}
#options .theme {
    float:left;
    margin-left:20px;
    width:150px;
}

/* End: Options */


/* Start: Themes */

/* White */
.white {
    background-color:#fff;
}
.white #board #liveLink a {
    color:#707070;
}
.white #board .body {
    border-color:#b1b1b1;
    background:#fcfcfc url(../img/module1_body.png?898238) 0% 100% repeat-x;
}
.white #board h1 {
    color:#888;
}
.white #tiles ul li {
    color:#555;
}
.white #guess div span {
    color:#888;
}
.white #board .buttons button {
    color:#444;
}
.white #status span {
    color:#2b7;
}
.white #status span.error {
    color:#d66;
}
.white #board .footer {
    background:url(../img/board_box.png) 0 -1px no-repeat;
}
.white #board .footer div {
    background:url(../img/board_box.png) right -1px no-repeat;
}

.white .module h2 {
    background:url(../img/module_box.png) 0 0 no-repeat;
}
.white .module h2 span {
    background:url(../img/module_box.png) right 0 no-repeat;
}
.white #options h2 span a {
    color:#fff;
    background-image:url(../img/icon/arrow-dk-gray-down.gif);
}
.white #options.hidden h2 span  a {
    background-image:url(../img/icon/arrow-dk-gray-right.gif);
}
.white #options h2 span a:focus {
    outline:1px dotted #444;
}

.white .module .body {
    background:#fcfcfc url(../img/module1_body.png?898238) 0% 100% repeat-x;
}
.white #options.hidden .body {
    background-color:#e1e1e1;
}
.white #options h3 {
    color:#666;
}
.white #options ul li label {
    color:#666;
}
.white #options .auto label {
    color:#666;
}

.white .module .footer {
    background:url(../img/module_box.png) 0 -33px no-repeat;
}
.white .module .footer div {
    background:url(../img/module_box.png) right -33px no-repeat;
}

.white #extraInfo {
    color:#666;
}

/* Green, brown */
.green {
    background-color:#647c4e;
}
.green #board #liveLink a {
    color:#7e6430;
}
.green #board .body {
    border-color:#b3916c;
    background:#fffcf7 url(../img/module2_body.png?898238) 0% 100% repeat-x;
}
.green #board h1 {
    color:#987e4c;
}
.green #tiles ul li {
    color:#5c420e;
}
.green #guess div span {
    color:#a08043;
}
.green #board .buttons button {
    color:#5c4821;
}
.green #status span {
    color:#2b7;
}
.green #status span.error {
    color:#d66;
}
.green #board .footer {
    background:url(../img/board_box.png) 0 -14px no-repeat;
}
.green #board .footer div {
    background:url(../img/board_box.png) right -14px no-repeat;
}

.green .module h2 {
    background:url(../img/module_box.png) 0 -39px no-repeat;
}
.green .module h2 span {
    background:url(../img/module_box.png) right -39px no-repeat;
}
.green #options h2 span a {
    color:#fffcf7;
    background-image:url(../img/icon/arrow-dk-brown-down.gif);
}
.green #options.hidden h2 span a {
    background-image:url(../img/icon/arrow-dk-brown-right.gif);
}
.green #options h2 span a:focus {
    outline:1px dotted #685531;
}

.green .module .body {
    background:#fffcf7 url(../img/module2_body.png?898238) 0% 100% repeat-x;
}
.green #options.hidden .body {
    background-color:#f1dfc1;
}
.green #options h3 {
    color:#876a31;
}
.green #options ul li label {
    color:#876a31;
}
.green #options .auto label {
    color:#876a31;
}

.green .module .footer {
    background:url(../img/module_box.png) 0 -72px no-repeat;
}
.green .module .footer div {
    background:url(../img/module_box.png) right -72px no-repeat;
}

.green #extraInfo {
    color:#fff;
}

/* End: Themes */