/*

(c) 2009 Dave Peck, All Rights Reserved. (http://davepeck.org/)

This file is part of Dave Peck's Go.

Dave Peck's Go is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Dave Peck's Go is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Dave Peck's Go.  If not, see <http://www.gnu.org/licenses/>.

*/



/*----------------------------------------------------------------------------
 * Basics
 *--------------------------------------------------------------------------*/

body
{
    background: #383838;
    color: #BBB;
    padding: 5px;
    margin: 0px;
	font-size: 62.5%;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
}

a
{
    outline: 0;
}

.hide
{
    display: none;
}

#splash a.disabled, #splash a.disabled:hover, #splash a.disabled:visited, #splash a.disabled:link
{
    color: #555;
    text-decoration: none;
}


/*----------------------------------------------------------------------------
 * Sprites
 *--------------------------------------------------------------------------*/

/*
 * FOR 35x35 pieces
.white    { background-position: 0 -290px; } 
.black    { background-position: 0 -485px; } 

.tl       { background-position: 0 -420px; } 
.top      { background-position: 0 -550px; } 
.tr       { background-position: 0 -745px; } 

.left     { background-position: 0 -615px; } 
.center   { background-position: 0 -160px; } 
.right    { background-position: 0 -680px; } 

.bl       { background-position: 0 -225px; } 
.bottom   { background-position: 0 -95px; } 
.br       { background-position: 0 -355px; } 

.star     { background-position: 0 -30px; } 
*/

/* For 30x30 pieces -- better for the MacBook's 1280 x 800 screen */

.star       { background-position: 0 -30px; } 
.bottom     { background-position: 0 -90px; } 
.center     { background-position: 0 -150px; } 
.bl         { background-position: 0 -210px; } 
.white      { background-position: 0 -270px; } 
.br         { background-position: 0 -330px; } 
.tl         { background-position: 0 -390px; } 
.black      { background-position: 0 -450px; } 
.top        { background-position: 0 -510px; } 
.left       { background-position: 0 -570px; } 
.right      { background-position: 0 -630px; } 
.tr         { background-position: 0 -690px; } 

#board_container img
{
   background-image: url(/img/board-30.png);
   background-repeat: no-repeat;    
   margin: 0;
   padding: 0;
   border: 0;
   width: 30px;
   height: 30px;
}


/*----------------------------------------------------------------------------
 * Board Area
 *--------------------------------------------------------------------------*/

.board_row
{
    padding: 0px;
    margin: 0px;
    border: 0px;
    height: 30px;
}

#board_area
{
    float: left;
    margin-left: 5px;
    margin-top: 5px;    
}

#board_and_grid_container table .grid-top td.grid-topleft
{
    width: 4px;
    height: 4px;
    text-align: center;
    color: #888;
}

#board_and_grid_container table .grid-top td
{
    width: 30px;
    height: 4px;
    text-align: center;
    color: #888;
}

#board_and_grid_container table td.grid-left
{
    width: 4px;
    height: 30px;
    text-align: right;
    padding-right: 3px;
    color: #888;
}

#board_container
{
    background: #DDB45C;
}

.nineteen_board
{
    width: 570px;
    height: 570px;
}

.thirteen_board
{
    width: 390px;
    height: 390px;
}

.nine_board
{
    width: 270px;
    height: 270px;
}

#board_extras
{
    font-size: 1.4em;
    line-height: 1.6em;
    position: relative;
}

.extras_grid
{
    padding-left: 14px;
}

#board_extras a.extra_link, #board_extras a.extra_link:link, #board_extras a.extra_link:visited
{    
    text-decoration: none;
    color: #BBB;
    border-bottom: solid 1px #5A5A5A;    
}

#board_extras a.extra_link:hover
{
    color: #DDB45C;
    border-bottom: solid 1px #DDB45C;
}

#board_extras a.disabled_extra_link, #board_extras a.disabled_extra_link:link, #board_extras a.disabled_extra_link:visited
{    
    text-decoration: none;
    color: #555;
    border-bottom: 0;
}

#board_extras a.disabled_extra_link:hover
{
    text-decoration: none;
    color: #555;
    border-bottom: 0;
}



/*----------------------------------------------------------------------------
 * Game Info
 *--------------------------------------------------------------------------*/

#game_info
{
    font-size: 1.4em;
    line-height: 1.6em;
}

.right_nineteen_board
{
    margin-left: 595px; 
    width: 370px;
    max-width: 370px;
}

.right_nineteen_board_grid
{
    margin-left: 610px; 
    width: 370px;
    max-width: 370px;
}

.right_thirteen_board
{
    margin-left: 415px;    
    width: 370px;
    max-width: 370px;
}

.right_thirteen_board_grid
{
    margin-left: 430px;    
    width: 370px;
    max-width: 370px;
}

.right_nine_board
{
    margin-left: 295px;
    width: 370px;
    max-width: 370px;
}

.right_nine_board_grid
{
    margin-left: 310px;
    width: 370px;
    max-width: 370px;
}

#game_info > div
{
    width: 360px;
    padding-bottom: 10px;
}

#game_info h2.normal-heading
{
    font-size: 1.4em;
    font-weight: normal;
    color: #FFF;
    border-bottom: solid 1px #555;
}

#game_info h2.normal-heading span.relaxed-text
{
}

#game_info div
{
    padding-right: 10px;
}

#game_info table
{
    font-size: 1.0em;
    text-align: left;
}

#game_info table th
{
    color: #FFF;
}

#game_status table .not_your_turn img
{
    width: 13px;
    height: 13px;
}

#game_status table .your_turn img.black_icon
{
    width: 13px;
    height: 13px;
    background: url(/img/simple-black.png) no-repeat;
}

#game_status table .your_turn img.white_icon
{
    width: 13px;
    height: 13px;
    background: url(/img/simple-white.png) no-repeat;
}


.count
{
    color: #FFF;
    font-weight: bold;
}

.capture_count
{    
}


.name
{
}

tr.your_turn, span.your_turn
{
    color: #FFF;
}

tr.not_your_turn, span.not_your_turn
{
    color: #BBB;
}

#game_info a, #game_info a:link, #game_info a:visited
{
    color: #BBB;
    text-decoration: none;
}

#game_info a:hover
{
    color: #DDB45C;
    text-decoration: none;
}

.move_p
{
    padding-left: 1.4em;
}

.loading
{
    position: absolute;
    right: 1.4em;
    top: 2em;
}

.loading span
{
    color: #FF0000;
    font-size: 1.4em;
    text-transform: uppercase;
}


/*----------------------------------------------------------------------------
 * Start Game
 *--------------------------------------------------------------------------*/

#start_game
{
    padding: 0px;
    margin: 0px;
}

#start_game table
{
    text-align: left;
    font-size: 0.8em;
    padding: 0px;
    margin: 0px;
    vertical-align: text-bottom;
    color: #BBB;
    font-weight: normal;
}

#start_game tbody
{
    margin: 0px;
    padding: 0px;
}

#start_game table td
{
    padding: 0.33em;
    vertical-align: text-bottom;
    color: #BBB;
    font-weight: normal;
}

#start_game table tr
{
    vertical-align: text-bottom;
    color: #BBB;
    font-weight: normal;
}

#start_game table th
{
    font-weight: normal;
    color: #BBB;
}

#start_game input, #game_options input, #current_move_number
{
    background: #383838;
    color: #BBB;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    line-height: 0.8em;
    padding: 0.2em;
    border: solid 1px #555;
    outline: none;
}    

#start_game input:focus, #game_options input:focus, #current_move_number:focus
{
    border: solid 1px #DDB45C;
}

#current_move_number
{
    font-size: 1em;
    line-height: 1em;
    width: 2.5em;
    text-align: center;
}

.adjust
{
    margin-top: -3px;
}

#start_game table td.divide
{
    margin-left: 10em;
    vertical-align: text-bottom;
}

.color_black
{
    color: #000;
}

.color_white
{
    color: #FFF;
}

.lets_play
{
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 0;
}

.smaller_action_link
{
    font-size: 1em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.promise
{
    color: #888;
    font-size: 0.5em;
}

p.flash
{
    color: #FFB45C;
    font-size: 0.7em;
    line-height: 1.0em;
    padding-left: 2px;
    margin-top: 0.4em;
    margin-bottom: 0.8em;
}


/*----------------------------------------------------------------------------
 * Splash Screen
 *--------------------------------------------------------------------------*/

#splash
{
    text-align: left;
    font-size: 3em;
    padding: 0.75em 1em;
    margin: 0;
    border: 0px;
    color: #BBB;
}

.splash-text
{
    width: 17em;
    line-height: 1.2em;
}

.splash-text-smaller
{
    font-size: 0.4em;
}

.go
{
    margin: -0.125em 0px 0px -0.25em;
    padding: 0px;
    color: #DDB45C;
    font-weight: bold;
    font-size: 8em;
}

.go-smallish
{
    margin: 0px 0px 0px -0.25em;
    padding: 0px;
    padding-bottom: 0.5em;
    color: #DDB45C;
    font-weight: bold;
    font-size: 4em;
}

#splash a, #splash a:visited, #splash a:link
{
    color: #BBB;
    text-decoration: none;
}

.started
{
    padding-top: 1em;
    font-size: 1.4em;
}

#splash a:hover
{
    color: #DDB45C;
    text-decoration: none;
}

#splash a:hover .color_white, #splash a:hover .color_black
{
    color: #DDB45C;
}

.subtle-link
{
    border-bottom: solid 1px #5A5A5A;
}

#game_info #game_status a.move_link, #game_info #chat a.move_link
{
}

#game_info #game_status a.disabled_move_link, #game_info #chat a.disabled_move_link
{
    color: #555;
}

#game_info #game_status a.disabled_move_link:hover, #game_info #chat a.disabled_move_link:hover
{
    color: #555;
}

.enabled_text
{
}

.disabled_text
{
    color: #555;
}

#chat_textarea
{
    border: 1px solid #555;
    background: #383838;
    color: #BBB;    
/*    padding: 5px; */
    font-size: 1.0em;
    font-weight: normal;
    line-height: 1.2em;
    height: 3.4em;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    resize: none;
    outline: none;
/*    max-width: 349px; */
/*    width: 349px; */
    margin: 0;
    padding: 5px 0px 5px 5px;
    width: 354px;
}

#game_info h2.chat_heading
{
    font-size: 1.4em;
    font-weight: normal;
    color: #FFF;
    border: 0;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#chat_form_container
{
    width: 370px;
}

#game_info div#chat_textarea_container
{
    padding-bottom: 3px;
}


.disabled_go_button
{
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    border: 0;
/*    border: 1px solid #444; */
    background: #383838;
    color: #555;
    padding: 0.4em;    
    height: 27px;
    font-size: 1em;
}

.disabled_go_button:hover
{
}

.go_button
{
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    border: 0;
/*    border: 1px solid #555; */
    background: #383838;
    color: #BBB;
    padding: 0.4em;    
    height: 27px;
    font-size: 1em;
}

.go_button:hover
{
    color: #DDB45C;
    border: solid 1px #DDB45C;
}

#chat_textarea:focus
{
    border: 1px solid #DDB45C;
}

#chat_button_container
{
}

#grid_information
{
    position: absolute;
    top: 2px;
    right: 0px;
}

#grid_location
{
    position: absolute;
    top: -2px;
    right: 20px;
}

#grid_information:hover
{
}

#grid_button
{
    border: solid 1px #555;
    width: 15px;
    height: 15px;    
}

#grid_button.grid_disabled
{
    background: url(/img/grid-disabled.png) top left no-repeat;
}

#grid_button.grid_enabled
{
    background: url(/img/grid-enabled.png) top left no-repeat;
}

#grid_button:hover
{
    border: solid 1px #DDB45C;
}

.text_button
{
    border: solid 1px #555;
    width: 16px;
    height: 16px;
}

.text_button:hover
{
    border: solid 1px #DDB45C;
}    


.flat_button
{
    border: solid 1px #555;
    width: 25px;
    height: 25px;
}

.flat_button:hover
{
    border: solid 1px #DDB45C;
}

#first_button
{
    background-image: url(/img/first.png);
}

#first_button:hover
{
    background-image: url(/img/first-hover.png);
}

#rw_button
{
    background-image: url(/img/rw.png);
}

#rw_button:hover
{
    background-image: url(/img/rw-hover.png);
}

#ff_button
{
    background-image: url(/img/ff.png);
}

#ff_button:hover
{
    background-image: url(/img/ff-hover.png);
}

#last_button
{
    background-image: url(/img/last.png);
}

#last_button:hover
{
    background-image: url(/img/last-hover.png);
}

#game_status
{
}

#move_number
{
}

.indented
{
    padding-left: 2em;
}
    
#chat_contents
{
    height: 263px;
    max-height: 263px;
    margin-top: 1em;
    /* in the future, when browsers support it, style the scrollbar. It looks kinda ugly, actually. */
}

#chat_contents.recent_chat
{
    overflow-y: hidden;
    overflow-x: hidden;
}

#chat_contents.all_chat
{
    overflow-y: auto;
    overflow-x: hidden;    
}

#chat_contents .chat_entry
{
/*    padding-left: 2em; */
}

#chat_contents .chat_entry .chat_name
{
    color: #FFF;
}

#chat_error
{
    color: #800;
}

#history_error
{
    color: #800;
}

.limited_width
{
    width: 650px;
}

#twitter_password_container
{
    font-size: 0.66em;
    padding-bottom: 1em;
    padding-left: 1.5em;
    padding-top: 0.5em;
}

#game_options
{
    line-height: 1.2em;
}

#contact_info_container
{
    font-size: 0.75em;
    padding-top: 0.5em;
    vertical-align: middle;
    clear: both;
    padding-left: 1.5em;
}

#game_options input, #current_move_number
{
    vertical-align: middle;
}

#game_options p.flash
{
    line-height: 1.2em;
    padding-bottom: 0;
    padding-top: 0.8em;
}

#game_options #twitter_password_container
{
    font-size: 0.75em;
}

#chat_bar
{
    position: relative;
}

#characters_remaining
{
    font-size: 1.4em;
    font-weight: normal;
    border: 0;
    margin-bottom: 0px;
    padding-bottom: 0px;

    position: absolute;
    right: 0px;
    top: 0;
    display: block;
}

.dim
{
    color: #555555;    
}

.notable
{
    color: #FFF;
}

.dangerous
{
    color: #F00;
}