/* vim: set noet: */
@charset "utf-8";

@media screen and (max-width: 400px) {
	@-ms-viewport {
		width: 320px;
	}
}

body {
	/* for fix font size at screen lotation on iPhone */
	-webkit-text-size-adjust: 96%;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;

}
div {display:block;}
body,div,span,font,input,select {
	font-size: 13px;
}

a {
	text-decoration:none;
}

#wallparper .theme-bg{
	opacity: 0.8;
}

#wallparper {
	width: 100%;
	margin: auto;
	overflow: hidden;
	background-size: contain;
}

#container {
	width: 100%;
	margin: auto;
	overflow: hidden;
}

.metro-pivot .headers {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 3.5em;
	top: 0;
	left: 0;
	padding-top: .25em;
	padding-bottom: .25em;
}

.metro-pivot .items {
	margin-top: 2.5em;
	padding-top: 1em;
}

.pivot-item[name="login"] {
	margin: 0.5em 0.8em;
}

h3 {
	font-size: 2.4em;
	margin-top: .25em;
	marggin-bottom: .25em;
}

.headers span[name="list"].current:before {
	content: '△';
	display: inline-block;
	vertical-align: middle;
	width: 1.25em;
	font-size: 50%;
	font-family: monospace;
	font-weight: bold;
}

.headers span[name="list"].current.closed:before {
	content: '▽';
}

.channel_list {
	margin: 0;
	padding: 0;
	margin-top: .25em;
}

.channel_list li {
	padding: .4em .8em;
	color: #808080;
	list-style-type: none;
	cursor: pointer;
}

.channel_list li span {
	font-size: 1.8em;
}

.invisible li {
	display:none;
}
.invisible li.new, ul.invisible li.hit {
	display:block;
}

.channel_list li.hit {
	text-decoration:blink;
}

body[accent="tiarra"] ul.channel_list li.new { color: #FFFFFF; }
body[accent="tiarra"] ul.channel_list li.hit { color: #F0B0B0; }
body[accent="tiarra"] ul.channel_list li:hover {
	/*
	color: #FFFFFF;
	background-color: #004060;
	*/
}

/* 新着マーカー */
.channel_list li span.ch_num small {
	font-size: .75em;
	font-weight: bold;
	border: 2px solid #a0a0a0;
	color: #c0c0c0;
	background-color: #202c64;
	background: -moz-linear-gradient(top, #404cd0, #202c64);
	background: -webkit-gradient(linear, left top, left bottom, from(#404cd0), to(#202c64));
	vertical-align: super;
	padding-left: .4em;
	padding-right: .4em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em;

}
.channel_list li.hit span.ch_num small {
	border: 2px solid #c0c0c0;
	color: #e0e0e0;
	background-color: #64202c;
	background: -moz-linear-gradient(top, #d0404c, #64202c);
	background: -webkit-gradient(linear, left top, left bottom, from(#d0404c), to(#64202c));
}
.channel_list li.select {
	padding-left: 20px;
	background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAALCAIAAADN+VtyAAAABnRSTlMA/wD/AP83WBt9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAtElEQVR42mP4////////Zxob/0cFDBDR5wsW1KqqIkswzTIx8cvN/ff9e2pKSp2aGgMMMKWdObNp8mQmTs6/P37E+/vD5ZgYGBggchzy8v++f4+ytobIMf7//x+iBGLmux07/n39uurGDSZk0fe7d//7+XPVjRtNt24xwUU/7N//7+fPVVeuNN26xcDAwCy1ZYtfbu7HQ4f+ff++8sIFiCgDAwPUH9eiotD8wQCh0ET///8PAI0Gmocmb3e4AAAAAElFTkSuQmCC") no-repeat center left;
}

/* log  */
.line.text {
	position: relative;
	line-height: 1;
	margin: 1px 0;
	padding: 3px 3px 5px;
	border-bottom: 1px solid #404040;
}
.line.unread_border {
	border-bottom: 3px dashed #cccccc;
}
.line.unread_border.unread_border_added {
	border-bottom: 1px dashed #cccccc;
}
.line.unread_border.unread_border_more {
	border-bottom: 3px dashed #b22222;
}
.line.select {
	background-color: #333333;
}

.line[data-type=notice] {
	color: #aaa;
}
.line .channel {
	margin-right: 5px;
	color: #404cd0;
	font-size: .9em;
}
.line .time {
	float: right;
	margin-top: 2px;
	color: #bbb;
	font-size: .7em;
}
.line .avatar {
	display: none;
}
.on_icon .line .avatar {
	display: block;
	float: left;
	width: 32px;
	height: 32px;
	margin-top: 2px;
	margin-right: 5px;
	background-color: #404040;
}
.line .avatar img {
	max-width: 32px;
	max-height: 32px;
	border: none;
}
.line .sender {
	font-size: .9em;
	color: #9f9;
}
.line .sender[data-type=myself]{
	color:#bbb;
}
.line .sender:after {
	content: ": ";
}
.line .message {
	display: block;
	line-height: 1.4em;
	margin-top: 4px;
	text-align: left;
}
.line .message .inlineimage {
	background-image: none;
}
.line .message .inlineimage img {
	max-width: 50%;
	max-height: 150px;
	margin: 5px 0;
	border: 1px solid #333;
}
.line .message .boxviewimage img {
	max-width: 50px;
	max-height: 150px;
	margin: 5px 0;
	border: 1px solid #333;
}
.on_icon .line .message {
	margin-left: 37px;
}
.line .message mark.highlight {
	color: #fbb;
	background-color: transparent;
}
.line .message a {
	padding-right: 18px;
	background: transparent url("../images/icon_external.gif") no-repeat center right;
	color: #bbf;
}
.line .result_sub {
	padding-left: 20px;
}
.line .result_sub .line.text.baseline {
	color: lawngreen;
}
.line .result_sub.invisible {
	padding-left: 20px;
	display:none;
}
/* */

div { display:block; }
hr { display: inline-block; width: 100%; zoom: 1; border: 2px solid #c0c0c0; }
.status-notifier { width: 100%; height: 2em; line-height: 1em; }
.status-notifier hr { margin: 0; padding: 0; }
.status-notifier.new hr { border-color: #404cd0; }
.status-notifier.hit hr { border-color: #f0b0b0; }

h4 {
	padding-top: .6em;
	font-size: .9em;
	border-bottom: 2px solid #808080;
}
dl {margin:0;}
dd {margin:0 0 0 1em;}
form {
	margin:0;
	margin-top: .5em;
	margin-bottom: .5em;
}
input[type=text],input[type=password]{
	width: 288px;
	height: 1.8em;
	/* padding-top: 20px; */
	padding: 0 .2em;
	color: white;
	background-color: #606060;
	border: 2px solid #808080;
}
input[type=text].error{
	background-color: #f05050;
}
input[type=submit] {
	margin: 0.4em 0;
	height: 2.1em;
	border: 2px solid #808080;
	color: white;
	background-color: #202c64;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	border-radius: .5em;
}
input[type=submit]:disabled {
	color: gray;
}
input[type=button] {
	margin-top: 1em;
	width: 100%;
	height: 2.4em;
	border: 2px solid white;
	color: #ffffff;
	background: #000000;
	-moz-border-radius: .5em;
	-webkit-border-radius: .5em;
	border-radius: .5em;
}
select {
	height: 1.8em;
	width: 288px;
	margin-right: 2px;
	margin-top: .25em;
	margin-bottom: .25em;
	/* padding-top: 20px; */
	color: white;
	background-color: black;
}

#spinner {
	margin-top: 12px;
	width: 100%;
	height: 32px;
	border: 2px solid black;
	text-align: center;
}
#spinner {
	display: block;
	width: 20px;
	height: 20px;
	border: none;
	margin: 0 auto;
	margin-top: .4em;
	margin-bottom: .4em;
}
.pickup{ color:#fbb; }

#pad {padding:.25em 0;}

#log_popup_menu {
	position: absolute;
	width: 95%;
	margin-left: 1em;
	left: auto;
	right: auto;
	background-color: #808080;
	-moz-border-radius: .6em;
	-webkit-border-radius: .6em;
	border-radius: .6em;
	z-index:1;
}
#log_popup_menu form {
	margin: 0;
	padding: .3em .8em;
	padding-top: .6em;
}
#log_popup_menu input[type=text] {
	width: 192px;
	border: 2px solid #202020;
}
#log_popup_menu input[type=submit] {
	border: 2px solid #202020;
}
#log_popup_menu ul {
	margin: 0;
	padding: 2px;
}

#log_popup_menu ul li {
	font-size: 1.6em;
	padding: 0;
	margin-bottom: 2px;
	list-style-type: none;
	cursor: pointer;
	background-color: #202020;
}
#log_popup_menu ul li:first-child {
	border-top-left-radius: .3em;
	border-top-right-radius: .3em;
	-webkit-border-top-left-radius: .3em;
	-webkit-border-top-right-radius: .3em;
	-moz-border-radius-topleft: .3em;
	-moz-border-radius-topright: .3em;
}
#log_popup_menu ul li:last-child {
	margin-bottom: 0;
	border-bottom-left-radius: .3em;
	border-bottom-right-radius: .3em;
	-webkit-border-bottom-left-radius: .3em;
	-webkit-border-bottom-right-radius: .3em;
	-moz-border-radius-bottomleft: .3em;
	-moz-border-radius-bottomright: .3em;
}

#log_popup_menu ul li a {
	display: block;
	padding: .4em .8em;
}

#log_popup_menu ul li a:link,
#log_popup_menu ul li a:visited,
#log_popup_menu ul li a:active,
#log_popup_menu ul li a:hover {
	color: #fff;
}

#log_popup_menu ul li a:hover,
#log_popup_menu ul li a:active {
	background-color: #404040;
}

.setting_view {
	position: relative;
	width: 93.3%;
	left: auto;
	right: auto;
	margin: 1em 0;
	padding: .8em;
	background-color: #808080;
	border-radius: .5em;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
}
.setting_view dl {
	width: 100%;
}
.setting_view dl dt {
	float: left;
	clear: both;
	width: 16em;
	min-height: 1.8em;
}
.setting_view dl dd {
	margin-left: 16em;
	text-align: right;
	min-height: 1.8em;
}
.setting_view dl dt:first-child {
	float: right;
	display: block;
	width: 32px;
	height: 32px;
}
.setting_view dt:first-child + dd {
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 32px;
	margin: 0;
	text-align: left;
	font-size: 2em;
	line-height: 32px;
	vertical-align: bottom;
}
.setting_view dt img {
	width: 32px;
	height: 32px;
}
.setting_view dl dt:first-child + dd + dt,
.setting_view dl dt:first-child + dd + dt + dd {
	padding-top: .5em;
	border-top: 1px solid lightgrey;
}

.setting_view:after {
	clear: both;
}


#channel_setting_select {
	width: 256px;
}

#setting_form #setting_next {
        border: 0;
        padding: 0;
        margin: 4px .5em;
        width: 24px;
        height: 24px;
        background-size: 24px 24px; /* contain */
        text-indent: -9999px;
        background: url(../images/tool_right.png) no-repeat;
}

#client_setting_form ul, form#setting_form ul {
	padding-left: 1em;
}
#client_setting_form li, form#setting_form li {
	line-height: 2em;
	list-style-type: none;
}

#setting_form dl {
	margin: 0.5em 0;
	padding: 0;
}

#setting_form dl dt:after {
	content: " : ";
}

#setting_form dl dd {
	margin: 0.5em 0.8em;
	padding: 0;
}

/* colorcode */
.colorcode00 {
	color: White;
}
.colorcode01 {
	color: Black;
}
.colorcode02 {
	color: Navy;
}
.colorcode03 {
	color: Green;
}
.colorcode04 {
	color: Red;
}
.colorcode05 {
	color: Brown;
}
.colorcode06 {
	color: Purple;
}
.colorcode07 {
	color: Olive;
}
.colorcode08 {
	color: Yellow;
}
.colorcode09 {
	color: Lime;
}
.colorcode10 {
	color: Teal;
}
.colorcode11 {
	color: Aqua;
}
.colorcode12 {
	color: RoyalBlue;
}
.colorcode13 {
	color: HotPink;
}
.colorcode14 {
	color: DarkGray;
}
.colorcode15 {
	color: LightGray;
}

/* clearfix */
.line.text:after,
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

img.emoji {
	height: 1em;
	width: 1em;
	margin: 0 .05em 0 .1em;
	vertical-align: -0.1em;
}