/**
 * Main stylesheet for order book site and order book visualisations
 *
 * @author Paul Koppen, http://paulkoppen.com/
 * @email book@paulkoppen.com
 */

@import url(http://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif);


/**
 * Site, general
 */
html, body {
	font-family: 'Noto Serif', serif;
	font-size: 0.9em;
}

#mocks {
	display: none;	/* to hide all */
}
.mock {
	display: none;	/* to hide one */
}


/**
 * Order books, basics
 */
#books {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.book {
	border-bottom: black 1px solid;
	/* display flex and flex-flow column together with
	   flex auto on .bidsasks, for .bids and .asks to
	   span full length (vertically). */
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
}
.book * {
	margin: 0;
	padding: 0;
}
.book h2 {
	border-bottom: black 2px solid;
	padding-bottom: 3px;
}
.book h3 {
	padding-left: 15px;
}
.book .bidsasks {
	display: -webkit-flex;
	display: flex;
	-webkit-flex: auto;
	flex: auto;
}
.book .bidsasks .bids,
.book .bidsasks .asks {
	cursor: pointer;
	padding: 5px 0px;
}
.book .bidsasks .bids:hover,
.book .bidsasks .asks:hover {
	background-color: #eeeeee;
}
.book .bidsasks .asks {
	margin-left: 15px;
}
.book table {
	border-spacing: 15px 2px;
	text-align: right;
}
.book table th {
	border-bottom: black 1px solid;
}
.book table td {
	padding-left: 20px;
}


/**
 * Order books, personal touch
 */
.book {
	margin: 30px;
}
.book h2 {
	color: silver;
	cursor: pointer;
	font-size: 1em;
}
.book table .currency {
	color: silver;
	font-size: 0.85em;
	font-weight: normal;
}
.book td {/*
	font-family: 'Noto Serif', serif;
	font-size: 90%;
*/}

/* with fantastic animation! */
.book {
	opacity: 1;
	-moz-transition: opacity 250ms ease;
	-o-transition: opacity 250ms ease;
	-webkit-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}
.book.out {
	opacity: 0.1;
	-moz-transition: none;
	-o-transition: none;
	-webkit-transition: none;
	transition: none;
}