/*
Copyright 2011 Saiyasodharan (http://saiy2k.blogspot.com/)

This file is part of the open source game, Tic Tac Toe Extended (https://github.com/saiy2k/Tic-Tac-Toe-Extended-HTML5-Game)

Tic Tac Toe Extended is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Tic Tac Toe Extended 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 General Public License
along with Tic Tac Toe Extended.  If not, see <http://www.gnu.org/licenses/>.
*/

body{
    background-color		:	#dddddd;
	text-align				:	center;
	color					:	#4b3318;
	cursor: auto;
}

h1
{
    margin              :   0px;
    padding             :   0px;
	font-size			:	24px;
	font-weight			:	bold;
	font-variant		:	small-caps;
	overflow			:	hidden;
}

a {
    color                   :   #eee;
    text-decoration         :   none;
}

#inGameMute {
    float                   :   right;
    padding                 :   5px;
    border-radius           :   6px;
    background              :   rgba(125, 76, 24, 0.5);
}

.menuButton {
    background              :   #2b1b07;
    border                  :   2px solid #2b1b07;
    width                   :   50%;
    padding                 :   2%;
    margin                  :   auto;
    margin-top              :   8%;
    border-radius           :   10px;
    box-shadow              :   4px 4px 5px #2b1b07;
}

.menuButton:hover {
    font-weight             :   bold;
    border                  :   2px solid #7d5e3b;
}

#menuButton {
    background-color        :   rgba(125, 76, 24, 0.5);
    margin                  :   4px;
    padding                 :   4px;
    border-radius           :   10px;
}

#menuButton:hover {
    font-weight             :   bold;
}

#container{
	position				:	absolute;
	border					:	4px solid #865c2a;
	top						:	50%;
	left					:	50%;
	background  			:	url('images/woodBG.png');
	width				:	320px;
	height				:	480px;
	margin				:	-240px 0 0 -160px;
    box-shadow              :   0px 0px 50px #2b1b07;
}

#canvasContainer{
	text-align				:	center;
	width				:	320px;
	height				:	320px;
}

.otherScreen {
    text-align              :   center;
	background-color		:	rgba(78, 55, 30, 0.8);
	position				:	absolute;
	width					:	320px;
	height					:	320px;
	top						:	28px;
	text-align				: 	center;
    color                   :   #bbb;
	font    				:	9px 'Verdana';
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#infoScreen {
	background				:	url('images/infoScreen2X.png');
}

#gOverStatus {
	font					:	18px 'Arial';
	font-weight				:	bold;
}

.freeBoardDiv {
    margin                  :   2px;
    padding                 :   2px;
    background-color        :   rgba(78, 55, 30, 0.75);
}

.otherAppIcon {
    width                   :   96px;
    height                  :   96px;
}

#playOptionsDiv {
	border-top				:	2px solid #97672e;
}

.scoreBoardLabel{
	display					:	inline-block;
	width					:	10%;
	border					:	0px solid;
	font					:	16px Verdana;
}

#shareFacebookWidget {
	width					:	32px;
	height					:	32px;
}

#shareTwitterWidget {
	width					:	32px;
	height					:	32px;
}

#badgeImageHolder {
	width					:	128px;
	height					:	128px;
}

.playOptionsHalf{
	display					:	inline-block;
	width					:	48%;
	float					:	left;
	margin					:	2px;
}

.nameInputBox {
	border					:	2px solid rgba(125, 76, 24, 0.5);
	background-color		:	rgba(191, 127, 46, 0.5);
	height					:	22px;
    width                   :   90%;
	color					:	#4b3318;	
    margin                  :   2px;
}

#boardCanvas {
	background				:	url('images/board2X.png');
	width					:	320px;
	height					:	320px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.socialButton {
	display					:	inline;
	width					:	48px;
	height					:	48px;
	float					:	left;
transform: scale(0.8,0.8);
-ms-transform: scale(0.8,0.8); /* IE 9 */
-webkit-transform: scale(0.8,0.8); /* Safari and Chrome */
-o-transform: scale(0.8,0.8); /* Opera */
-moz-transform: scale(0.8,0.8); /* Firefox */

}

/* big screens */
@media screen and (min-width: 800px) {
#container
{
	width				:	480px;
	height				:	640px;
	margin				:	-320px 0 0 -240px;
}

#canvasContainer
{
	width				:	480px;
	height				:	480px;
}

.otherScreen {
	width					:	480px;
	height					:	480px;
	font    				:	14px 'Verdana';
}

#gOverStatus {
	font				:	24px 'Arial';
	font-weight			:	bold;
}

#badgeImageHolder {
	width				:	220px;
	height				:	220px;
}

#shareFacebookWidget {
	width				:	48px;
	height				:	48px;
}

#shareTwitterWidget {
	width				:	48px;
	height				:	48px;
}

.scoreBoardLabel {
	font				:	22px 'Verdana';
}

#boardCanvas {
	width				:	480px;
	height				:	480px;
}

.socialButton {
	display					:	inline;
	width					:	70px;
	height					:	70px;
	float					:	left;
transform: scale(1.0,1.0);
-ms-transform: scale(1.0,1.0); /* IE 9 */
-webkit-transform: scale(1.0,1.0); /* Safari and Chrome */
-o-transform: scale(1.0,1.0); /* Opera */
-moz-transform: scale(1.0,1.0); /* Firefox */

}