@charset "utf-8";
/* tradepage.js */
/* ----------------------------------------------------------
exchange
---------------------------------------------------------- */
/*layout*/
	@media only screen	and (max-width: 767px)	{
	.order-btn 			{padding:5px 8px;}
	}
/* ----------------------------------------------------------
Contents
---------------------------------------------------------- */
/*about*/
.about .section-wrapper					{padding:75px 0}
.about h2.title							{font-size:200%!important}
.about1,
.about2,
.about3									{background:#fff!important}
.about1 .section-wrapper				{margin-bottom:-100px}
.about .section-wrapper p.pull-left		{float:left;width:40%;}
.about .section-wrapper p.pull-right	{float:right;padding:3em 0 0;}
.about .section-wrapper p.text			{padding:3em 0 0}
.about .section-wrapper p.image			{padding:50px 0 0}
.about .section-wrapper p img			{max-width:100%; height:auto}
.section-wrapper .title button			{padding-top:2px; padding-bottom:2px; vertical-align:middle; margin-top:1px;}
	@media only screen	and (max-width: 767px)	{
	.about .section-wrapper					{padding:50px 0}
	.about h2.title							{padding:0}
	.about1 .section-wrapper				{margin-bottom:-74px}
	.about .section-wrapper p.pull-left,
	.about .section-wrapper p.pull-right	{width:100%; float:none}
	.about .section-wrapper p.image			{padding:10px 0 0}
	}
/*titleのマージンを詰める処理*/
.chart-box h2.title,
.commission-box h2.title {margin:0px 5px;}

/*commission*/
.commission h2 span			{font-size:70%;font-weight:normal;}
.commission .alert 			{margin:0px 0 10px; padding:5px 10px}
.commission .alert pre		{margin:0 0 1px; padding:3px 5px}

.commission .section-container			{width:960px; margin:0 auto; text-align:center; position:relative;}
.commission-box						{width:40%; box-sizing:border-box; float:right;}
.commission-box .nav					{margin:0 5px; border-bottom:none;}
.commission-box .nav li				{width:50% !important;}
.commission-box .nav li.hasmargin	{width:30% !important;}
.commission-box .nav li.hasmargin.active	{width:40% !important;}
.commission-box .nav li a				{text-align:center; font-size:115%; padding:5px; margin-right:0px; font-weight:bold;}
.commission-box-wrapper form button[type=submit] {margin:0 0 -10px; padding:3px 20px;}
.commission-box-wrapper div.half-group {width:50%;float:left;}
.commission-box-wrapper div.margin-group1 {width:51%;float:left;}
.commission-box-wrapper div.margin-group2 {width:49%;float:left;}
#chartDiv								{}
	@media only screen and (min-width: 768px) and (max-width:967px)	{
	.commission .section-container	{width:100%;padding-bottom:5px;}
	}
	@media only screen	and (max-width: 767px)	{
	.commission .section-container	{width:100%; margin:0 auto;}
  .commission-box				{width:100%; margin:0 auto;}
	}
    li .tab-sub {font-size: 50%;}
    li.active .tab-sub {font-size: 100%;}

  @media only screen	and (max-width: 767px)	{
    .commission-box								{display:block;margin-bottom:0.25em;padding:0 0 5px}
    .commission .form-control						{height:2em}
    .commission-box-wrapper form input[type=number] {margin-bottom:0.8em;}
.unread-message				{margin-bottom:0; padding-top:8px; padding-bottom:8px; height:auto;}
.unread-message:after		{content:""; height:1px; display:block;}
#chat-box   	{display:block;padding:5px 0 0; margin:5px 0 0; border-top:2px solid #ddd;}
.chat-log 		{overflow-y:auto; display:block; height: 264px; width:100%; padding:0;}
.chat-log li	{list-style:none; margin:0; padding:5px; border-bottom:1px solid #ccc;display: block;}
.chat-user-box	{color:#555;}
.chat-user-name {float: left!important;}
.chat-timestamp {float: right!important;}
.chat-coment	{padding-top:3px;}
#chat-box form  {padding-top:8px;}

}
/*売買*/
.commission-box						{width:40%;display:table-cell}
.commission-box-wrapper	        {border:1px solid #ddd;background:#fff;margin:0 5px; padding:15px 10px 20px; box-sizing:border-box; min-height:264px;}
.commission-box-wrapper h3			{padding:5px 0 0; margin-bottom:-5px ; font-weight:bold;font-size:120%}
.commission-box-wrapper .form-group	{margin-bottom:0.5em}
.commission-box-wrapper form h4		{margin-bottom:0;}
.commission-box-wrapper form label	{font-weight:normal; margin:-10px 0; font-size:90%}
.commission form button.dropdown-toggle {margin:-6px 0 0;padding: 1px 5px;}
.commission-box-wrapper input[type=number] {margin-bottom:0.5em;}
.commission-box-wrapper .pcviews {display:inline;}
.commission-box-wrapper form button.placeOrder {margin:0 0 -10px; padding:3px 20px;}

	@media only screen	and (max-width: 767px)	{
	.commission-box-wrapper				{border:1px solid #ddd;background:#fff;margin:0 0 1em; padding:15px 8px 0px; box-sizing:border-box;min-height:200px;}
	.commission-box:first-child .commission-box-wrapper	{border-right:none}
	.commission-box						{margin-bottom:0.25em;padding:0; width:100%}
	.commission-box .form-control						{height:2em}
  .commission form button.dropdown-toggle {margin:-6px 0 0;padding: 1px 5px;}
	.commission-box-wrapper input[type=number] {margin-bottom:0.8em;}
  .commission-box-wrapper form button.placeOrder 	{margin:-0.1em 0 1em;}

	}

.chart-box	{width:60%; float:left; box-sizing:border-box;}
.chart-box h2	{margin-left: 5px;}
.chart-box-wrapper	{border:1px solid #ddd;background:#fff; margin:0 5px; padding:5px 10px 5px;}

	@media only screen	and (max-width: 767px)	{
	.chart-box										{width:100% !important; display:block; margin-bottom:0.25em;padding:0 0 5px}
	.chart-box-wrapper								{border:1px solid #ddd;background:#fff;margin:0 0px; padding:5px 8px 0px 8px; box-sizing:border-box}
	}
/*タブ*/
.active a.buy,
a.buy,
.active a:hover.buy  {color:#e64e4e !important;}
.active a.sell,
a.sell,
.active a:hover.sell {color:#55b9a4 !important;}
.active a.msell,
a.msell,
.active a:hover.msell {color:#5555a4 !important;}

/*transaction*/
.transaction h2 					{display:inline; float:left; margin-bottom:-5px;}
.transaction h2 span				{font-size:60%;font-weight:normal;vertical-align:middle}
.transaction #last_price			{display:inline;float:right; text-align:right;}
.transaction #last_price span		{font-weight:normal;}
.transaction .section-container		{display:table; width:100%; table-layout:fixed; text-align:center; margin:0 auto}
.transaction-box					{display:table-cell;width:33.333333%; padding:0 5px; vertical-align:top;box-sizing:border-box;}
.transaction-box-wrapper			{border:1px solid #ddd; padding:10px 10px;background:#fff}
.transaction-box-wrapper h3			{padding:0 0 1em;margin:0; font-weight:bold;font-size:120%}
.transaction-box-wrapper h3 span	{font-weight:normal;font-size:70%;display:block; margin-top:5px;float:right}
.transaction-box table				{font-size:95%}
.transaction-box table th,
.transaction-box table td			{padding:2px 3px!important; vertical-align:text-bottom;}
.transaction table button.btn-xs {font-size:70%; padding:1px 3px; margin:-1px 0;}
.transaction table tfoot td a	{padding-top:15px;}
.trade-title {margin-bottom:0px;}
.trade-title		    {text-align:center;}
.trade-title small  {display:block; margin-top:-2px;}

	@media only screen	and (max-width: 767px)	{
	.transaction h2					{display:block; float:none}
	.transaction #last_price		{display:block; float:none;text-align:left; padding:0}
	.transaction .section-container	{padding:0 5px}
	.transaction-box				{width:100%; display:block; margin-bottom:1em;padding:0}
  .trade-title small  {display:inline; font-size:100%;}
	}

.buy_line_box		    {position:relative; margin:0 0px 0 -10px;}
.sell_line_box 		  {position:relative; margin:0 -10px 0 0px;}
.buy_line_box .bar,
.sell_line_box .bar {height:17px; z-index:1; position:absolute;}
.buy_line_box .bar 	{background-color:#FFB3B3;}
.sell_line_box .bar {background-color:#8BE5D2; right:0;}
.buy_line_box p,
.sell_line_box p 	  {height:17px; width:100%; text-align:right; box-sizing:border-box; z-index:99;position:absolute;}
.buy_line_box p		  {padding-left:8px;}
.sell_line_box p	  {padding-right:8px;}
/*message*/
.unread-message				{margin-bottom:0; padding-top:8px; padding-bottom:8px}

/*note*/
.note-wrapper				{clear:both;margin:0 auto; padding:15px 25px 0; text-align:left;color:#777; font-size:80%;}
#note:focus{ background-color:#d9edf7;}
.column1 .note-wrapper		{width:960px;}
.note-wrapper div			{margin-top:0}
	@media only screen	and (max-width: 767px)	{
	.column1 .note-wrapper	{width:100%;padding:25px}
	}

/*news*/
.news ul					{margin-top:1em}
.news .section-container h3	{font-size:120%; font-weight:bold; padding-bottom:1em}
.news .news-box 			{border:1px solid #ddd;padding:15px; background:#fff}

/*form*/
.form .form-box-wrapper 						{width:50%; margin:0.5em auto 0;border:1px solid #ddd;  padding:0 30px 1em; background:#fff;text-align:center}
.form .form-box-wrapper							{width:100%; border:none; padding:0;background:transparent;}
#account .form .form-box-wrapper				{width:100%; border:none; padding:0;background:transparent;}
.form .form-box-wrapper h2						{padding-top:30px}
.form .form-box-wrapper .form-group				{width:100%;margin:1em 0}
.form .form-box-wrapper input[type=text],
.form .form-box-wrapper input[type=password],
.form .form-box-wrapper textarea				{width:100%}
	@media only screen	and (max-width: 767px)	{
	.form .form-box-wrapper								{width:100%; padding:0 1em 1em;}
	.form .form-box-wrapper .form-group					{width:100%}
	.form .form-box-wrapper .form-group input			{width:100%}
	.form .form-box-wrapper .radio input[type=radio]	{width:auto}
	}

/*marketinfo*/
.marketinfo h2 span						{font-size:70%;font-weight:normal; padding-left:1em}
.marketinfo .marketinfo-box-wrapper		{border:1px solid #ddd;background:#fff;margin:0 5px; padding:15px}
	@media only screen	and (max-width: 467px)	{
	.marketinfo h2 span					{ display:block; padding:0.5em 0 0}
	}

/*message-box*/
.message-box	{padding:10px 0}
.message-read-box			{border:1px solid #ddd;padding:15px; background:#fff;margin-top:1em}
.message-read-box h3		{font-size:120%; font-weight:bold; padding-bottom:1em}


/*list*/
.r-btn-list				{width:100%; display:table}
.r-btn-list	.content	{vertical-align:middle; min-height:1em;display:table-cell; width:80%;}
.r-btn-list	.r-btn		{vertical-align:middle; min-height:1em;display:table-cell; text-align:right; width:20%;}

/* ----------------------------------------------------------
css3 animations
---------------------------------------------------------- */
.commission .section-wrapper form {
    transition: opacity .5s ease-in-out;
    opacity: 1.0;
}

.commission .section-wrapper form.sending {
    opacity: 0.5;
}

.user-box span {
}

.user-box span.update, #action_str.update, #price_str.update, #amount_str.update {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;

    -moz-animation-name: blink;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 1;

    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

@-moz-keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}

@keyframes blink {
    0% { opacity: 1.0; }
    50% { opacity: 0.2; }
    100% { opacity: 1.0; }
}

/* chat reconnect button animation */
#chat-reconnect-button {
    -webkit-animation-name: chamaeleon;
    -webkit-animation-duration: 8s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: chamaeleon;
    -moz-animation-duration: 8s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;

    animation-name: chamaeleon;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@-moz-keyframes chamaeleon {
    0% { background-color: #428bca; border-color: #357ebd;}
    50% { background-color: #d9534f; border-color: #d9534f;}
    100% { background-color: #428bca; border-color: #357ebd;}
}

@-webkit-keyframes chamaeleon {
    0% { background-color: #428bca; border-color: #357ebd;}
    50% { background-color: #d9534f; border-color: #d9534f;}
    100% { background-color: #428bca; border-color: #357ebd;}
}

@keyframes chamaeleon {
    0% { background-color: #428bca; border-color: #357ebd;}
    50% { background-color: #d9534f; border-color: #d9534f;}
    100% { background-color: #428bca; border-color: #357ebd;}
}


/* toaster style */
.toaster {
    z-index: 10001000;
}

#toaster-fixed {
    position: fixed;
    top: 80px;
    right: 10px;
    width: 300px;
}
@media only screen and (max-width: 767px) {
    #toaster-chat, #toaster {
    position : absolute;
    top      : 360px;
    right    : 30px;
}
}
@media only screen and (min-width: 768px) {
    #toaster-chat, #toaster {
    position : absolute;
    top      : 120px;
    right    : 30px;
}
}

@media only screen and (min-width: 768px) {
    /* テーブルの位置合わせ */
    .transaction-box-wrapper {
        font-size: 13px;
    }

    .transaction-box-wrapper th {
        height: 44px;
    }

    .transaction-box-wrapper.tab-content #order-log h3 {
        padding: 1em 0 0 0;
        height: 44px;
        margin: 0 0 5px 0;
    }

    .transaction-box-wrapper.tab-content #order-log h3:first-child {
        margin: 0 0 2px 0;
    }

    /* boxの高さ合わせ */
    .transaction-box-wrapper {
        height: 590px;
    }

    .transaction-box-wrapper.tab-content {
        height: 559px;
    }
}


/* board price change animation */
.ask_row .change, .bid_row .change {
    -webkit-animation-name: blink2;
    -webkit-animation-duration: .8s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;

    -moz-animation-name: blink2;
    -moz-animation-duration: .8s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 1;

    animation-name: blink2;
    animation-duration: .8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

.ask_row .bar.change, .bid_row .bar.change {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    transition: width .8s ease-in-out;
}

@-moz-keyframes blink2 {
    0% { opacity: 0.6; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blink2 {
    0% { opacity: 0.6; }
    100% { opacity: 1.0; }
}

@keyframes blink2 {
    0% { opacity: 0.6; }
    100% { opacity: 1.0; }
}


/* trade history animation */
.log_row.enter {
    -webkit-animation-name: enter;
    -webkit-animation-duration: 1.0s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;

    -moz-animation-name: enter;
    -moz-animation-duration: 1.0s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 1;

    animation-name: enter;
    animation-duration: 1.0s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

@-moz-keyframes enter {
    0% { opacity: 0.0; }
    10% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes enter {
    0% { opacity: 0.0; }
    10% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes enter {
    0% { opacity: 0.0; }
    10% { opacity: 0.0; }
    100% { opacity: 1.0; }
}


/* chart style */
.chart-box-wrapper {
  position:relative;
}
#chartDiv + .loading {
    display:none;
    position:absolute;
}

#chartDiv.loading + .loading {
    display:block;
    z-index:99999;
    top:50%;
    left:50%;
    margin-top:-8px;
    margin-left:-8px;
}


#chartIndicators, #chartToolbar, #chartSelector {
    display: inline-block;
}

@media only screen and (max-width: 767px) {
    .chart-box-wrapper {
        padding-bottom: .5em;
    }
}

/*トーストメッセージの調整*/
#toaster .close{
  margin-right:15px;
}