FONT.sitename {color: black; font-size: medium}

.username {
    font-size: 125%;
}

BODY {
    border: 0px;
    margin: -4px 0px 0px 0px;
}

#body {
    padding: 0px 20px 0px 20px;
}

TABLE.dropcap {vertical-align: text-bottom}

TR.row_odd {background-color:#a0c0a0;}
TR.row_even {background-color:#70a070;}

#header {
    list-style-type: none;
    background-image: url(/images/headerbg.png); /* Because safari likes to change colors for some reason */
    background-color: #90af90;
    padding-left: 20px;
    padding-right: 20px;
    /*padding-top: -2px;*/
    /*margin-left: -8px;*/
    /*margin-right: -8px;*/
    /*margin-top: -10px;*/
    margin-top: -2px;
}

#header * {
    list-style-type: none;
    border: 0px;
    padding: 0px;
}

#greetings {
    color: #fff;
    text-align: right;
    margin-top: 4px;
    padding-top: 4px;
    font-size: smaller;
    padding-bottom: 2px;
    padding-right: 10px;
}

#greetings * {
}

#title2 {
    margin-left: auto;
    margin-right: auto;
    padding: 4px 20px 0px 20px;
    line-height: 35px;
    }

#title {
    /*height: 45px;*/
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    white-space: nowrap;
    width: 525px;
    margin-bottom: 6px;

    /* This is irritating... the width doesn't get computed automatically.  
     * This doesn't allow for easy switching of tile sizes...
     */
    /*width: 500px;*/
}

.attention {
    color: #ffff00;
}

#navigation_menu {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#navigation_menu * {
    display: inline;
}

#navigation_menu a:visited, #navigation_menu a:active, #navigation_menu a, #navigation_menu li{
    color: #fff;
    /* padding: .5em .5em;*/
    text-decoration: none;
    padding: .3em .4em;
    margin: 0px;
}

#navigation_menu a:hover {
    background-color : #585;
    color: #fff;
}

#navigation_menu a.activetab, BODY {
    background-color: #b0c8b0;
    color: black;
}

/* toplevel styles for letters:
 * smallboard
 * mediumboard
 * largeboard
 * 
 * smallbag
 * mediumbag
 * largebag
 * 
 * largetile
 * mediumtile
 * smalltile
 *
 * largetexttile
 * mediumtexttile
 * smalltexttile
 *
 * arialtile
 * scripttile
 *
 * traditionaltile
 * 
 * These styles are all associated with the body, and precede all relevant tile info */

.tile {
    vertical-align: middle;
    padding: 0px;
}

/* First section is generic to all styles */
.tile img {
    /* position: absolute;*/
    margin-left: 0px;
    margin-top: 0px;
    border: 0px;
    vertical-align: baseline;
}

/* Pretty generic stuff */
.tile span {
    position: absolute;
    vertical-align: baseline;
}

/* No padding for anything under the tile */
.tile * {
    padding: 0px;
}

/* Right alignment & smaller text for scores */
.tile .s {
    text-align: right;
    font-size: 66%;
}

/* Right alignment & smaller text for scores */
.tile .l {
    text-align: left;
}

/******* FONT DEFNS ******/
.arialtile .tile {
    font-family: "Arial";
}

.scripttile .tile {
    font-family: "Comic Sans MS";
}

/******* LETTER COLORS *******/
.traditionaltile .tile.b {
    color: #ff0;
}

/* Normal tiles are white */
.traditionaltile .tile.n {
    color: #fff;
}

/*** Preview tiles ***/
.previewtile .tile .s {
    display: none !important;
}

.previewtile .tile {
    font-size: 12pt !important;
    line-height: inherit !important;
    margin: 1px !important;
}

.previewtile .tile .l {
    margin-left: 0px !important;
    margin-top: 0px !important;
    width: auto !important;
}

.previewtile .tile img
{
    display: none !important;
}

.previewtile .tile span
{
    position: static !important;
}
    

/*** Large tile configurations... ***/
.largeboard .board .tile, 
.largebag .bag .tile, 
.largetile .dropcap.tile,
.largetile .results .tile,
.title .tile 
{
    font-size: 20px;
    line-height: 35px;
    margin: 1px;
}

.largeboard .board .tile .l, 
.largebag .bag .tile .l, 
.title .tile .l,
.largetile .dropcap.tile .l,
.largetile .results .tile .l
{ 
    margin-left: -32px;
    margin-top: -5px;
}

.largeboard .board .tile .s, 
.largebag .bag .tile .s, 
.largetile .dropcap.tile .s,
.largetile .results .tile .s,
.title .tile .s 
{
    width: 29px;
    margin-left: -32px;
    margin-top: 7px;
}

.largeboard .board .tile img, 
.largebag .bag .tile img, 
.largetile .dropcap.tile img,
.largetile .results .tile img,
.title .tile img 
{
    width: 35px;
    height: 35px;
    background-image: url(/images/tile35.png);
}

/*** Medium tile configurations... ***/
.mediumboard .board .tile, 
.mediumbag .bag .tile, 
.mediumtile .dropcap.tile,
.mediumtile .results .tile
{
    font-size: 16px;
    line-height: 30px;
    margin: 1px;
}

.mediumboard .board .tile .l, 
.mediumbag .bag .tile .l, 
.mediumtile .dropcap.tile .l,
.mediumtile .results .tile .l
{ 
    margin-left: -27px;
    margin-top: -4px;
}

.mediumboard .board .tile .s, 
.mediumbag .bag .tile .s, 
.mediumtile .dropcap.tile .s,
.mediumtile .results .tile .s
{
    width: 24px;
    margin-left: -27px;
    margin-top: 5px;
}

.mediumboard .board .tile img, 
.mediumbag .bag .tile img, 
.mediumtile .dropcap.tile img,
.mediumtile .results .tile img
{
    width: 30px;
    height: 30px;
    background-image: url(/images/tile30.png);
}

/*** Small tile configurations... ***/
.smallboard .board .tile, 
.smallbag .bag .tile, 
.smalltile .dropcap.tile,
.smalltile .results .tile
{
    font-size: 11px;
    line-height: 20px;
    margin: 1px;
}

.smallboard .board .tile .l, 
.smallbag .bag .tile .l, 
.smalltile .dropcap.tile .l,
.smalltile .results .tile .l
{ 
    margin-left: -17px;
    margin-top: -2px;
}

.smallboard .board .tile .s, 
.smallbag .bag .tile .s, 
.smalltile .dropcap.tile .s,
.smalltile .results .tile .s
{
    width: 14px;
    margin-left: -17px;
    margin-top: 5px;
}

.smallboard .board .tile img, 
.smallbag .bag .tile img, 
.smalltile .dropcap.tile img,
.smalltile .results .tile img
{
    width: 20px;
    height: 20px;
    background-image: url(/images/tile20.png);
}


/* 30 pixel tiles */

/* 20 pixel tiles */


/* dead */
#resultscount {
    margin-bottom: 5px;
    margin-top: 5px;
    /*background-image: url("/images/hprogress.png");*/
    min-width: 80px;
    min-height: 20px;
    width: 80px;
    height: 20px;
    padding-right: 90px;
}

.pe {
    padding-right: 100px;
    margin-right: 10px;
}

.iPhone .pe, .iPhone .pe * {
    height: 30px;
}

.iPhone pe {
    margin-top: 2px;
}

.iPhone .pe_input {
    font-size: 24px;
}

.iPhone #wc_word {
    font-size: 24px;
}

.pe, .pe * {
    height: 2.5ex;
}

.pe * {
    padding: 0px;
    margin: 0px;
}

/* Progress bar stuff */
.pe_bar, .pe_bg {
    position: absolute;
    margin: 3px;
}

.pe_bg {
    border: 2px inset white;
    background-color: transparent;
}

.pe_bar, .pe_bg {
    /* Why is this necessary?  Seems like the input is padded */
    padding-right: 2px;
}

.pe_input, .pe_bg {
    width: 100px;
}

.pe_bg {
    background-color: #ffffff;
    margin-left: 2px;
    margin-top: 0px;
    
}
.pe_bar {
    background-color : #a0ffa0;
    width: 0px;
    margin-left: 4px;
    margin-top: 2px;
}

.goodword {
    color: #ffffff;
}

.badword {
    color: #ff4040;
}

.dunno {
    font-size: 8pt;
}

.dunno:visited {
    display: none;
    }

.largeboard .tws {
    background-image: url(/images/tws.png);
}

.mediumboard .tws {
    background-image: url(/images/tws-medium.png);
}

.smallboard .tws {
    background-image: url(/images/tws-small.png);
}

.largeboard .dws {
    background-image: url(/images/dws.png);
}

.mediumboard .dws {
    background-image: url(/images/dws-medium.png);
}

.smallboard .dws {
    background-image: url(/images/dws-small.png);
}

.largeboard .tls {
    background-image: url(/images/tls.png);
}

.mediumboard .tls {
    background-image: url(/images/tls-medium.png);
}

.smallboard .tls {
    background-image: url(/images/tls-small.png);
}

.largeboard .dls {
    background-image: url(/images/dls.png);
}

.mediumboard .dls {
    background-image: url(/images/dls-medium.png);
}

.smallboard .dls {
    background-image: url(/images/dls-small.png);
}

.dflt {
    background-color: #c0c0c0;
}

.square {
    border: 2px inset white;
    vertical-align: top;
}

.smallboard .board tr, .smallboard .board td  {
    height: 26px;
    width: 24px;
}

.smallboard .board .tile {
    margin: 2px;
}

.mediumboard .board tr, .mediumboard .board td  {
    height: 38px;
    width: 36px;
}

.mediumboard .board .tile {
    margin: 2px;
}

.largeboard .board tr, .largeboard .board td  {
    height: 44px;
    width: 42px;
}

.largeboard .board .tile {
    margin: 3px;
}

.board .tile {
    position: absolute;
}

.board table {
    border-spacing: 0px 0px;
    border-collapse: collapse;
}

.board tr, .board td {
    margin: 0px;
    padding: 0px;
}

.smallboard #game_rhs {
    margin-left: 450px;
}

.mediumboard #game_rhs {
    margin-left: 600px;
}

.largeboard #game_rhs {
    margin-left: 700px;
}

#game_rhs {
    position: absolute;
    margin-left: 700px;
    margin-top: 30px;
}

.scorepad, #bag {
    /* max-width: 600px; */
    /* min-width: 300px; */
    margin-left: 20px;
    margin-right: 40px;
    }

.activePlayer {
    background-color : #a0dfa0;
}

#bag ul {
    margin-left: 0px;
    padding: 0px;
}


.scorepad * {
    font-family: "Sand", "Lucida Handwriting", "Comic Sans MS", "Arial";
    margin: 0px;
}

.largescorepad .scorepad * {
    font-size: 15px;
}

.mediumscorepad .scorepad * {
    font-size: 12px;
}

.smallscorepad .scorepad * {
    font-size: 10px;
}

.scorepad table {
    background-color : #ffffa0;
    border-spacing: 0px;
    border-collapse: collapse;
    }

.page {
    margin-left: 25px;
    margin-top: 25px;
    margin-right: 25px;
    }

#debug {
    position: absolute;
    /*display: none;*/
}

.scorepad th {
    padding: 4px;
    }

.scorepad td, .scorepad th {
    padding: 2px 4px;
    border-bottom: 1px solid #a0a0a0;
    height: 1.5em;
    }

#game_commands {
    margin-left: 60px;
    width: 700px;
}

.iPhone .notforiPhone {
    display: none;
}

.s_tot_first, .s_tot, .s_wd, .s_det {
    border-right: 2px solid #ffa0a0;
}

.s_tot {
    border-left: 2px solid #ffa0a0;
}

.largescorepad .s_det, .largescorepad .s_det_last {
    min-width: 200px;
}

.mediumscorepad .s_det, .mediumscorepad .s_det_last {
    min-width: 150px;
}

.smallscorepad .s_det, .smallscorepad .s_det_last {
    min-width: 100px;
}

.s_tot_first {
    margin-left: 10px;
}

.s_det_last {
    margin-right: 10px;
}


.smallscorepad #bag {
    margin-top: 20px;
    width: 350px;
}

.mediumscorepad #bag {
    margin-top: 20px;
    width: 350px;
}

.largescorepad #bag {
    margin-top: 20px;
    width: 400px;
}

.bag ul {
    list-style-type: none;
}

.lettertotal {
    font-size: larger;
    font-weight: bolder;
}

#board {
    position: absolute;
    margin-left: 0px;
    margin-top: 30px;
}

.noneSelector {
    display: none;
}

.downSelector, .rightSelector {
    position: absolute;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

.largeboard .downSelector, .largeboard .rightSelector {
    margin-left: 23px;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    border: 0px;
}

.mediumboard .downSelector, .mediumboard .rightSelector {
    margin-left: 18px;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    border: 0px;
}

.smallboard .downSelector, .smallboard .rightSelector {
    margin-left: 8px;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    border: 0px;
}

.downSelector {
    background: url("/images/down3.png");
    z-index: 1000;
    padding: 0px;
    border: 0px;
}

.rightSelector {
    background: url("/images/right3.png");
    z-index: 1000;
    padding: 0px;
    border: 0px;
}

.invisibleEntry {
    /*clip:  rect(1px, 1px, 1px, 1px);*/
    /*margin-left: -1000px;*/
    /* width: 0px;*/
    width: 0em;
    position: absolute;
    margin-left: 10px;
    margin-right: 10px;
    z-index: -10000;
    font-size: 24px;
}

.boardFocused {
    border: 2px solid black;
}

.boardUnfocused {
    border: 2px solid #a0c0a0;
}

#game_select {
    position: absolute;
    margin-left: 0px;
    width: 800px;
    }

.iPhone #game_select * {
    font-size: 24px;
}

#game_setup {
    margin-left: 120px;
    margin-top: 30px;
    }

.game_chooser li, ul.game_chooser, .game_chooser form {
    /* display: inline;*/
    list-style-type : none;
}


.game_chooser li {
    margin-top: 1em;
    }

#game_setup * {
    list-style-type: none;
}

#ag_results {
    margin-top: 2ex;
}

#wc_results {
    margin-top: 2ex;
}

h4 {
    font-weight: 400;
    font-size: inherit;
    background-image: url(/images/fg2bggrad.png);
    background-repeat: repeat-x;
    background-position: 0% 0%;
    padding-top:5px;
}

h5 {
    text-indent: 2em;
    font-weight: bolder;
    font-size: inherit;
    background-image: url(/images/fg2bggrad2.png);
    background-repeat: repeat-x;
    background-position: 0% 0%;
    padding-top:5px;
}

.preferences * {
    list-style-type: none;
}
.preferences li {
    margin-top: 8px;
}

.preferences .choice {
    position: absolute;
    left: 200px;
}

.important {
    color: #ffff80;
}

.prefs_appearances {
    width: 550px;
}

.prefs_function {
    width: 550px;
}

.prefs_contact_info {
    width: 550px;
}

.sunken {
    border: 2px white inset;
}

.demoboard {
    position: absolute;
    margin-left: 225px;
    margin-top: -30px;
    clip: rect(0px 250px 60px 0px);
}

.demoScorepad {
    position: absolute;
    margin-left: 225px;
    margin-top: -20px;
    clip: rect(0px 250px 60px 0px);
}

.demoBag, .tileSizePrefs {
    position: absolute;
    margin-left: 225px;
    margin-top: -20px;
    clip: rect(0px 250px 60px 0px);
}

.prg {
    background-image : url(/images/bgsheen.png);
    background-repeat: no-repeat;
    background-position: -1000px -1000px;
}