@charset "utf-8";

#headerMessage{
	float:left;
	margin:20px 0 0 10px;
	font-size:12px;
	font-weight:bold;
}
#smart #headerAd{
	padding:0;
}
#menuList{
	width:320px;
}
#news{
	clear:both;
	padding:10px 10px 0 10px;
	font-weight:bold;
}
#smart #iphone_home{
	position:fixed;
	bottom:0;
	left:16px;
	width:288px;
	z-index:9999;
}
#smart #iphone_home a{
	display:block;
	background:#313131;
	margin:0;
	padding:10px;
	text-align:right;
	color:#fff;
}
#smart #iphone_home h2{
	background:#313131;
	margin:0;
	color:#fff;
	font-weight:bold;
}
#smart #iphone_home img{
	width:288px;
	height:133px;
}

#pc #footerAd{
	margin-top:150px;
}

/* Pager */
#pageHolder{
	position:relative;
	width:100%;
	margin-bottom:5px;
}
#smart #pageHolder{
	min-height:100vh;
}
#pageHolder div.page{
	position:absolute;
	width:100%;
	display:none;
}

/* lobby */
#roomList{
	padding-top:10px;
	clear:both;
}
#roomList li.item{
	width:150px;
	height:280px;
	display:block;
	margin:5px;
	float:left;
}
#roomList select{
	width:140px;
}
img.roomImage{
	width:120px;
	height:120px;
	border:1px solid #aaa;
}

/* 部屋詳細 */
#roomDetail h1{
	margin-bottom:10px;
}
#roomDetail h1 span{
	font-size:inherit;
}
#roomDetail select{
	width:160px;
}
#entryButton{
	margin-top:10px;
}

/* 作成 */
#create h1{
	margin-bottom:10px;
}
#limitRound, #limitTime, #interval, #penalty, #maxPlayer{
	width:100px;
}
#createSubmitButton{
	width:200px;
}

/* 辞書 */
#dicForm{
	padding:5px 0;
	background: #f4f4f4;
	background: -moz-linear-gradient(top,  #f4f4f4 0%, #d6d6d6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#d6d6d6));
	background: -webkit-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: -o-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: -ms-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: linear-gradient(to bottom,  #f4f4f4 0%,#d6d6d6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d6d6d6',GradientType=0 );
	border-top:1px solid #aaa;
	border-bottom:1px solid #aaa;
}
button#dicSelectButton{
	padding:5px 0;
	height:inherit;
	width:100%;
	min-height:35px;
	color:#444;
	text-shadow:none;
	background:#fff url(/img/link_arrow.png) right center no-repeat;
	filter:none;
	border:1px solid #aaa;
}
#smart button#dicSelectButton{
	width:195px;
}
button#dicSelectButton ul li{
	padding:2px 0;
}
#closeDicSelect{
	width:200px;
}
ul li.next{
	background-color:#ffdddd;
}
ul#dicTargetList li.selected{
	background:#2DB9ED;
}
ul#dicTargetList li a{
	color:#444;
}
ul#dicTargetList li.selected a{
	color:#fff;
	text-decoration:none;
}
ul#dicTargetList li.selected a:hover{
	background:transparent;
}

/* ゲーム画面 */
#gameStart{
	display:none;
	font-size:11px;
	line-height:14px;
}
#gameStart p{
	text-align:left;
	padding:5px;
}
#pc #gameStart{
	width:200px;
	margin:10px 0;
}
#smart #gameStart{
	width:100%;
	clear:both;
	border-bottom:1px solid #aaa;
	margin-top:5px;
}
#gameScreenTitle{
	position:relative;
	margin-bottom:5px;
	padding:10px 0 5px 0;
	border-bottom:2px solid #aaa;
	line-height:22px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e7eef0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e7eef0));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e7eef0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7eef0',GradientType=0 );
}
#countDown{
	margin-right:10px;
	font-size:18px;
	min-width:45px;
	background:#2DB9ED;
	color:#fff;
	float:left;
}
#subject{
	font-size:20px;
	font-weight:bold;
}
#canvasHolder{
	position:relative;
	margin:0;
	width:320px;
	height:320px;
	border:1px solid #aaa;
	overflow:hidden;
	float:left;
}
#smart #canvasHolder{
	margin:0 auto;
	border-left:none;
	border-right:none;
	float:none;
}
#canvas, #previewCanvas{
	top:0;
	left:0;
	position:absolute;
	width:320px;
	height:320px;
	background:#fff;
	z-index:1;
}
#previewCanvas{
	background:transparent;
	z-index:10;
}
#canvasHolder div.scrollMessage{
	position:absolute;
	pointer-events:none;
	font-size:16px;
	white-space:nowrap;
	text-shadow:1px 1px 3px #fff;
	z-index:5;
}
#canvasHolder div.scrollMessage span{
	font-weight:bold;
}
#pc #clearButton{
	margin-bottom:7px;
}
#smart #clearButton{
	position:absolute;
	top:0;
	left:0;
	margin:0;
	z-index:20;
}
#pc #undoButton{
	position:absolute;
	bottom:0;
}
#smart #undoButton{
	position:absolute;
	bottom:0;
	left:0;
	margin:0;
	z-index:20;
}
#clearButton, #undoButton, #sizeButtonHolder button{
	display:block;
	width:60px;
	height:27px;
	margin:0;
	padding:0;
	border:2px solid #999;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	filter:none;
}
#smart #clearButton, #smart #undoButton, #smart #sizeButtonHolder button{
	width:30px;
	height:30px;
	border-left:none;
}
#clearButton{
	background:#fff url(/img/clear.png) center center no-repeat;
	background-size:auto 100%;
}
#undoButton{
	background:#fff url(/img/undo.png) center center no-repeat;
	background-size:auto 100%;
}
#sizeButtonHolder{
	margin-top:5px;
}
#smart #sizeButtonHolder{
	position:absolute;
	bottom:40px;
	left:0;
	margin:0;
	z-index:20;
}
#sizeButtonHolder button.size{
	margin-top:2px;
	background:#fff url(/img/size_ball.png) center center no-repeat;
}
#sizeButtonHolder button.size1{
	background-size:auto 10%;
}
#sizeButtonHolder button.size2{
	background-size:auto 20%;
}
#sizeButtonHolder button.size3{
	background-size:auto 40%;
}
#sizeButtonHolder button.size4{
	background-size:auto 60%;
}
#sizeButtonHolder button.size5{
	background-size:auto 80%;
}
#sizeButtonHolder button.size.selected{
	background-color:#aaa;
}
#smart #colorPalette{
	position:absolute;
	top:1px;
	right:0;
	text-align:right;
	float:none;
	margin:0;
	z-index:20;
}
#colorPalette button.color{
	display:block;
	width:60px;
	height:27px;
	margin:0 0 2px 0;
	padding:0;
	color:#fff;
	background:#000 center center no-repeat;
	background-size:auto 50%;
	border:2px solid #000;
	border-radius:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	filter:none;
}
#smart #colorPalette button.color{
	width:30px;
	height:30px;
	border-right:none;
}
#colorPalette button.color.selected{
	background-image:url(/img/selected_color.png);
}
#pc #opacitySliderHolder{
	margin-top:2px;
	width:60px;
	height:45px;
}
#smart #opacitySliderHolder{
	position:absolute;
	top:35px;
	left:0;
	margin:0;
	width:30px;
	z-index:20;
}
#opacitySliderHolder h2{
	font-size:10px;
	text-align:left;
}
#smart #opacitySliderHolder h2{
	font-size:7px;
}
#opacitySlider{
	position:relative;
	margin-left:5px;
	width:50px;
	height:15px;
	background:#fff;
	border:1px solid #aaa;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
#smart #opacitySlider{
	width:15px;
	height:50px;
}
#opacitySlider div{
	position:absolute;
	width:100%;
	height:100%;
	background: #0064cd;
	background: -moz-linear-gradient(top,  #0064cd 0%, #049cdb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0064cd), color-stop(100%,#049cdb));
	background: -webkit-linear-gradient(top,  #0064cd 0%,#049cdb 100%);
	background: -o-linear-gradient(top,  #0064cd 0%,#049cdb 100%);
	background: -ms-linear-gradient(top,  #0064cd 0%,#049cdb 100%);
	background: linear-gradient(to bottom,  #0064cd 0%,#049cdb 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064cd', endColorstr='#049cdb',GradientType=0 );
}
#opacitySlider a{
	position:absolute;
	margin:-5px 0 0 -5px;
	left:100%;
	width:10px;
	height:25px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e7eef0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e7eef0));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e7eef0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7eef0',GradientType=0 );
	border:1px solid #aaa;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
#smart #opacitySlider a{
	margin:-5px 0 0 -6px;
	left:0%;
	top:100%;
	width:25px;
	height:10px;
}


/* チャット */
#chatField{
	clear:left;
	width:550px;
	border-left:1px solid #aaa;
	border-right:1px solid #aaa;
}
#smart #chatField{
	width:100%;
	border:none;
	background:#2DB9ED;
}
#pc #joinButton{
	margin:10px 0;
}
#smart #joinButton{
	margin:5px 0;
}
#chatForm{
	padding:5px 0;
	background: #f4f4f4;
	background: -moz-linear-gradient(top,  #f4f4f4 0%, #d6d6d6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#d6d6d6));
	background: -webkit-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: -o-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: -ms-linear-gradient(top,  #f4f4f4 0%,#d6d6d6 100%);
	background: linear-gradient(to bottom,  #f4f4f4 0%,#d6d6d6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d6d6d6',GradientType=0 );
	border-bottom:1px solid #aaa;
}
#passHolder{
	display:none;
	line-height:50px;
	font-size:18px;
	font-weight:bold;
}
#passButton{
	width:150px
}
#penaltyHolder{
	display:none;
	line-height:50px;
	font-size:18px;
	font-weight:bold;
}
#charListHolder{
	display:none;
}
#charListHolder button{
	background:#2DB9ED;
	margin:5px 5px 10px 5px;
	padding:0;
	width:35px;
	height:35px;
	font-size:20px;
	font-weight:bold;
	filter:none;
}
#charListHolder button#backCharButton{
	background:#2DB9ED url(/img/back_char.png) center center no-repeat;
	background-size:auto 100%;
	text-indent:-9999px;
	filter:none;
}
#charListHolder button#answerButton{
	display:none;
	width:255px;
}
#pc #charListHolder button:hover{
	background:#FF4693;
}
#pc #charListHolder button#backCharButton:hover{
	background-color:#FF4693;
}
#chatText{
	width:400px;
}
#smart #chatText{
	width:200px;
}
#chatSubmitButton{
	padding:0;
	font-size:12px;
	width:60px;
}
#chatMessage{
	padding:5px 0;
	width:100%;
	text-align:left;
	max-height:150px;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	background:#EAF3F7;
	border-bottom:1px solid #aaa;
}
#smart #chatMessage{
	width:90%;
	margin:0 auto;
	border:none;
}
#chatMessage li{
	padding:3px; 0;
	border-bottom:1px dashed #ccc;
}
#chatMessage li:last-child{
	border:none;
}
#chatMessage li span{
	font-weight:bold;
}
#chatMessage li.sys{
	font-weight:bold;
}

/* ユーザー */
#userListField{
	width:200px;
	float:right;
	margin-left:5px;
}
#smart #userListField{
	width:100%;
	float:none;
	margin:0;
	border-top:1px solid #aaa;
}
#userListField h2{
	padding-left:5px;
	text-align:left;
	font-weight:bold;
	font-size:10px;
}
#userListField h2 span{
	margin:0 !important;
	font-size:inherit !important;
}
#userList{
	width:100%;
}
#userList tr{
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e7eef0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e7eef0));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e7eef0 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e7eef0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7eef0',GradientType=0 );
}
#userList tr.turnUser{
	background: #99DDF6;
	background: -moz-linear-gradient(top,  #99DDF6 0%, #2DB9ED 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99DDF6), color-stop(100%,#2DB9ED));
	background: -webkit-linear-gradient(top,  #99DDF6 0%,#2DB9ED 100%);
	background: -o-linear-gradient(top,  #99DDF6 0%,#2DB9ED 100%);
	background: -ms-linear-gradient(top,  #99DDF6 0%,#2DB9ED 100%);
	background: linear-gradient(to bottom,  #99DDF6 0%,#2DB9ED 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99DDF6', endColorstr='#2DB9ED',GradientType=0 );
}
#userList th{
	font-weight:normal;
}
/*サイドツール*/
#messageScrollModeSelect{
	margin:10px 0 5px 0;
	width:140px;
}
#roomDataButton{
	margin:10px 0 5px 0;
	background:#5fc16f;
	width:140px;
	filter:none;
}
#tweetButton{
	margin:5px 0 5px 0;
	padding:0 5px 0 35px;
	background:#00ACED url(/img/twitter.gif) left center no-repeat;
	background-size:auto 100%;
	width:140px;
	filter:none;
}
#muteButton{
	margin:5px 0 5px 0;
	padding:0;
	background:#ff7d7d;
	width:140px;
	filter:none;
}
#muteButton.checked{
	background:#ff7d7d url(/img/check_white.png) left center no-repeat;
	padding:0 5px 0 20px;
	background-size:auto 100%;
}
#leaveButton{
	margin:5px 0 5px 0;
	background:#999;
	width:140px;
	filter:none;
}

#infoBar{
	margin:5px 0;
	padding:5px 5px;
	border:1px solid #aaa;
	background:#f6f6f6;
	font-size:12px;
	text-align:left;
}
#visitorCountHolder{
	text-align:center;
}