html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:"" ""}
q:before,q:after,blockquote:before,blockquote:after{content:""}
a img{border:none}
html,body{width:100%;height:100%;overflow:hidden}

body{ line-height:1; color:#333; background:url(../img/bg_body.png); /*background-color: #666666;*/ color:#333; font-family:Arial,Helvetica,sans-serif}

.board-title{font-weight:bold;font-size:1.3em;text-align:center;float:right;width:130px;margin:10px}
/*.jp-jplayer {display:none;}*/
#communitybar{position:absolute;top:0;right:0;height:100%;width:192px;min-height:300px;margin-right:0;padding-right:0}
#communitybar .border{position:absolute;width:7px;top:0;right:180px;bottom:100px;background-image:url(../img/communitybar_spacer_192x6.png);background-position:0 -180px}
#communitybar .content{z-index:2000;overflow:hidden;position:absolute;width:180px;top:0;right:0;height:100%;background-color:rgba(0,0,0,0.5)}
#communitybar .content .header,#communitybar .content .subscript{width:180px;text-align:center;color:white;font-size:20px}
#communitybar .content .subscript{width:50%;margin-top:5px;margin-bottom:5px;color:#ddd;font-size:11px;float:left}
#communitybar .content .googlead{float:czlear;top:0;margin:10px}
#toolbar{position:absolute;bottom:0;width:100%;height:109px}
#toolbar .border{position:absolute;width:100%;right:0px;height:9px;bottom:100px;}
#stats{position:absolute;height:100px;bottom:0;left:0;right:0px;z-index:101;font-weight:bold;font-size:1.0em;color:white;}
#stats .player-stats,#stats .game-button,#stats .options{float:left;width:150px;padding:10px 5px 10px 5px}
#stats .player-stats{width:170px}
#stats .ai-player-stats{width:200px}
#stats .player-name,#stats .player-score{top:15px;left:90px;position:relative}
#stats .player-name{font-size:1.5em}
#stats .player-score{margin-top:5px}
#stats .game-button{/*width:50px;*/ margin-left:15px; text-align:center}
#stats .game-button button{font-size:14px;padding:5px; margin:25px 0 25px 0}
#stats .options{float:right;width:110px;margin-right:0; padding-right:100px;}
#stats .options .options-button{float:right; margin-bottom:5px;font-size:12px}
#stats .options button{padding:5px; margin:25px 0 25px 0}

.splashpage .splashcontent{ color:#333; background-color: rgba(0, 0, 0, 0); font-size: 18px; font-weight: normal; margin:0; text-align:center; padding:0; width:auto; min-height:220px;  }
.splashpage,.splashpage p,.splashpage .splashcontent p{padding: 0 !important; margin:0; text-align:left;font-weight:bold;line-height:1.4em}
/*#splashtext p:first-letter {font-size:25px}
#splashtext p:first-line {line-height:15px}
#splashtext span{font-size:20px}*/

#splashtext .scoretable{width:400px;height:170px;margin:auto;margin-top:-5px}
#splashtext .scoretable .col{width:250px;height:13px;float:left;text-align:left;font-size:12px}
#splashtext .scoretable .scorecol{width:100px;text-align:right}
#splashtext .scoretable .placecol{width:50px;text-align:right}
#splashtext .scoretable .endrow{clear:both}
#splashtext .login,#splashtext .logout{position:absolute;font-size:12px;margin-top:-5px;bottom:15px}
#splashtext .login{text-align:left;margin-left:10px;color:#0f0}
#splashtext .logout{text-align:right;margin-right:10px;right:25px;color:red}
#splashtext .endrow{clear:both}
#splashtext .login a{color:#0f0}
#splashtext .login a:link,#splashtext .login a:visited,#splashtext .login a:active{text-decoration:none}
#splashtext .login a:hover{font-size:16px;margin-top:-9px}
#splashtext .logout a{color:red}
#splashtext .logout a:link,#splashtext .logout a:visited,#splashtext .logout a:active{text-decoration:none}
#splashtext .logout a:hover{font-size:16px;margin-top:-9px}
#rulestext p,#bonustext{font-size: 0.8em;font-weight: normal;text-align: left; padding:5px;line-height: 1.7em;}
#rulestext h3{color: red; text-align:left; font-size:1em;}
#rulestext ul{list-style: decimal outside none;padding-left: 25px;} 
#rulestext li{font-size: 0.8em;font-weight: normal;text-align: left;}
.dialog-bg-top{width: 100%; max-width: 995px; height: auto;}
.dialog-bg-map{float:right;}

#firsttext h1{font-size: 2.0em; font-weight:bold; padding: 0 0 20px; color: snow;}
#firsttext div.bottom{font-size: 1.0em; color: snow;}
#firsttext img { margin-top: 50px; }

#thankstext,#bonustext,#rulestext{display:none}
#accordion{text-align:left;font-weight:bold;font-size:14px}
#accordion p a{color:white;text-decoration:none;margin-right:15px}
#accordion p a:hover{font-size:16px;line-height:14px;margin-right:10px}
.dialog_card{ background:url("../img/dialog-blank-white-card.jpg") no-repeat scroll 0 0 #4682B4;
/*	background: -moz-linear-gradient(top, #4682B4 0%, #81BEF0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4682B4), color-stop(100%,#81BEF0)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4682B4', endColorstr='#81BEF0',GradientType=0);*/}

#card{padding: 2em 2em 0;}
#roulette { height:500px; background:url("../img/roulette-bg.png") no-repeat scroll 25px 12px transparent; overflow: hidden; padding-bottom:10px;}
/*#canvas{width: 480px;height: 480px;}*/
.ui-dialog{border: 0px solid #333; background-position:15px 5px;padding:0;}
.ui-dialog .ui-dialog-content {overflow: visible;}

.dialog_normal{ background:none repeat scroll 0 0 #4682B4; background: background: transparent; }
.dialog_tileevent,
.dialog_tileevent_2,
.dialog_restart_msg,
.dialog_tileevent_sp { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); }

.dialog_tileevent p,
.dialog_tileevent_2 p,
.dialog_restart_msg p,
.dialog_tileevent_sp p{font-size:1.2em;}
.dialog_tileevent span.gamecard-b,
.dialog_tileevent_2 span.gamecard-b,
.dialog_restart_msg span.gamecard-b,
.dialog_tileevent_sp span.gamecard-b {font-size:1.4em; font-weight: bold;}

.dialog_roulette{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0); }
.dialog_roulette div.ui-widget-content div.ui-dialog-buttonset{width:100%;}

#soundButton { float: left;}
#restartButton { float: left;}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
button#showRoulette { background:url(../img/btn_bg.png) no-repeat; width: 160px; height: 50px; line-height: 50px; border: none; background-color: none; margin: 0; padding: 0; font-size: 13px;}

#spinButton { float: right; background:url(../img/btn_roulette.png); width: 175px; height: 50px; line-height: 50px; text-align: left; padding: 0 0 0 40px; margin: .5em 0; border: none;}


button {-webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; }
button:hover {opacity:0.80; /* opera firefox safari */ filter: alpha(opacity=80); /* ie */ border: none !important;}



.ui-dialog-titlebar {display:none}
.ui-dialog-titlebar-close {display:none}
.ui-dialog .ui-dialog-buttonpane { font-size:12px; background:none; border-width:0; padding:0 3px 3px 3px; }
.ui-dialog .ui-button-text {padding:5px 10px}


.dialog_tileevent_2 .ui-dialog-buttonpane  { position: relative;}
.dialog_tileevent_2 .ui-dialog-buttonset { float: none !important; position: absolute; top: -160px; right:80px; }
.dialog_tileevent_2 .ui-dialog-buttonset button { width: 150px; height: 60px; display: block; text-indent: -9999px; border: none !important; background: none;}
.dialog_restart_msg .ui-dialog-buttonpane  { position: relative;}
.dialog_restart_msg .ui-dialog-buttonset { display: inline-flex; float: none !important; position: absolute; top: -334px; right:265px; }
.dialog_restart_msg .ui-dialog-buttonset button { width: 150px; height: 60px; display: block; text-indent: -9999px; border: none !important; background: none;}

/*.dialog_tileevent_sp .ui-dialog-buttonset button { width: 150px; height: 60px; display: block; text-indent: -9999px; border: none !important; background: none;}*/

/*.dialog_tileevent_2 .ui-dialog-buttonset button { position:absolute; left:-170px; top:180px; }*/

.game-card {font-size:1.2em; color: #333; font-weight: normal; text-align: center;}
.game-card .gamecard-b{font-size:1.4em; padding-top: 10px;font-weight: bold;}

#bonusform .bonusleft,
#bonusform .bonusright{width:150px;margin-top:10px;margin-bottom:10px}
#bonusform .bonusleft{float:left;margin-left:50px}
#bonusform .bonusright{float:right}
#bonusform div table{border-spacing:5px}

#player_piece{}
.game_piece{ z-index: 100; width:182px; height:100px; margin: -108px 0 0 -20px;padding:0;position:absolute; }
.piece-kiki { background:url(../img/piece_kiki.png); }

.hex-tile,
.player-flag { display:none; opacity: 0.5;background:url(../img/tileset_92x80.png);background-position:-552px 0;width:92px;height:80px;margin: -40px 0 0 -45px;padding:0;position:absolute}

/*Mainframe Shadow*/
#ds .o1 {opacity: 0.05;}
#ds .o2 {opacity: 0.04;}
#ds .o3 {opacity: 0.03;}
#ds .o4 {opacity: 0.02;}
#ds .o5 {opacity: 0.01;}
#ds .h1 {height: 1px;}
#ds .h2 {height: 2px;}
#ds .h3 {height: 3px;}
#ds .h4 {height: 4px;}
#ds .h5 {height: 5px;}
#ds .v1 {width: 1px;}
#ds .v2 {width: 2px;}
#ds .v3 {width: 3px;}
#ds .v4 {width: 4px;}
#ds .v5 {width: 5px;}
#ds-h div {width: 100%;}
.ds {background: none repeat scroll 0 0 #000000; overflow: hidden; position: absolute; top: 0; z-index: 2;}

/*button#toggleMusicButton,
button#soundButton { display: none;}*/

button.ui-button,
.submit input { 
background-color: #F1F1F1; 
background-image: -moz-linear-gradient(center top , #FFFFFF 0%, #EBEBEB 100%); 
border-radius: 2px 2px 2px 2px; color: #000000 !important; cursor: pointer; height: 35px; padding: 2px 7px 3px; }
button.ui-button:focus, button.ui-button:hover, .submit input:focus, input:hover {/* border: 1px solid #666666;*/}

#main-frame{ /*background-color: #008B8B;*/ background:url("../img/wood_bg.png") repeat; width:90%; height:90%; max-width:1600px; max-height:1200px; margin: 30px auto; 
box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.08) inset, 0 16px 10px -8px rgba(0, 0, 0, 0.6);

clear: right; overflow: hidden; position: relative; /* border: 3px solid #000000;  border-radius: 10px;*/ }

.hex-board{ background:url(../img/boardmap.png) no-repeat; background-size: contain; -webkit-background-size: contain; top:0px; left:0px; width:1600px; height:1285px; margin:0 5px 5px 0; text-align:center; }

#randompicker { background: none repeat scroll 0 0 transparent; border-radius: 10px 10px 10px 10px; color: white; font-size: 15em; height: 80%; margin: 20px; padding: 20px; text-align: center; text-shadow: 15px 15px 15px gray; vertical-align: middle; width: 83%; }

#hanabiframe{ background-color: transparent; display: block; left: 0; position: absolute; top: 0; z-index: 1000; }
#hanabi{ background-color: transparent; }

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
@media screen and (max-width: 600px){ .dialog-bg-top{width: 100%;height: auto;}
	.dialog-bg-map{float: right; width: 50%;height: 50%;}
}

@media screen and (max-device-width: 599px){ 
	html { -webkit-text-size-adjust: 100%; }
	#main-frame{ background:url("../img/wood_bg.png") repeat scroll 0 0 #EEEEEE; width:98%; height:98%; max-width:900px; max-height:600px; margin: 0px auto; border: 5px solid #000000; clear: right; overflow: hidden; position: relative; border-radius: 0px; }
	
	.hex-board{ background:url(../img/boardmap_sml.png) no-repeat; background-size: contain; -webkit-background-size: contain; top:0px; left:0px; width:800px; height:782px; margin:0; text-align:center; }
	
	.splashpage .splashcontent{ color:#333; background-color:#ffffff; font-weight: normal; text-align:center; padding:5px; width:auto; border-radius: 6px 6px 6px 6px; }	
	#firsttext h1{font-size: 1.0em;padding: 0 0 5px; color: snow;}
	#firsttext div.bottom{font-size: 0.6em; color: snow;}
	.game_piece{z-index: 100; background:url(../img/piece_kiki.png);background-position:0 0;width:20px;height:54px;margin: -54px 0 0 -10px;padding:0;position:absolute}
	.piece-red{background-position: 0px 0px;}
	.piece-orange{background-position: 100px 0px;}
	.piece-yellow{background-position: 80px 0px;}
	.piece-green{background-position: 60px 0px;}
	.piece-blue{background-position: 40px 0px;}
	.piece-purple{background-position: 20px 0px;}

	#stats { display:none; height: 60px; }
	#stats .player-stats,#stats .game-button,#stats .options{float:left;width:auto;padding:5px;}
	#stats .game-button button, #stats .options button {font-size: 14px;padding: 5px;margin: 5px 0 5px 0;}
	#toolbar{position:absolute;bottom:0;width:100%;height:60px}
	#toolbar .border{display:none; position:absolute;width:100%;right:0px;height:9px;bottom:60px;background-image:url(../img/toolbar_spacer_2x109.png)}
	
	#roulette{background:url("../img/roulette-bg-sml.png") no-repeat scroll 21px 12px transparent;}
	/*#canvas{width: 100%;height: 100%;}*/
	
	.dialog_card{ background:none repeat scroll 0 0 #4682B4; background: -moz-linear-gradient(top, #4682B4 0%, #81BEF0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4682B4), color-stop(100%,#81BEF0)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4682B4', endColorstr='#81BEF0',GradientType=0 ); }
    #card{padding: 5px 10px 0;}
    .game-card{ color:#333; background-color:#FFF; font-size: 18px; font-weight: normal; margin-top:12px; text-align:center; padding:5px; width:auto; min-height:400px; border-radius: 6px 6px 6px 6px; }
	.dialog-bg-top{width: 100%; height: auto%;}
	.dialog-bg-map{float: right; width: 50%;height: auto;}

	div.scrollingHotSpotTopVisible { background-image: url("../img/arrows.png"); width:34px;height:34px; background-position: 0 -34px; background-repeat: no-repeat; opacity: 0.35; left: 0; top: 0; position: fixed; z-index: 200; }
	
	div.scrollingHotSpotBottomVisible { background-image: url("../img/arrows.png"); width:34px;height:34px; background-position: -34px -34px; background-repeat: no-repeat; opacity: 0.35; position: fixed; left: 0; bottom: 0; z-index: 200; }
}