@import url(http://fonts.googleapis.com/css?family=Oxygen);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

::selection {
	background: #1cd2dc;

	background: inherit;
	color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	cursor: default;
}

h1 small {
	color: #CCCCCC;
	margin-left: 0.5em;
	vertical-align: bottom;
}


.superscript {
	font-size: .6em;
	vertical-align: top;
}

#loading-gif {
	z-index: 99;
	width: 10%;
	position: absolute;
	top: 30%; left: 45%;
}

.symbol {
	font-family: 'FontAwesome';
}

.invisible {
	opacity: 0;
}




a {
	/* Forces a pointer cursor on a tags without a href property */
	cursor: pointer;
}

nav li {
	display: block;
	padding: 0;
	margin: 0;
}
nav ul {
	padding: 0;
	margin: 0;
}
a.button, div.button {
	margin-right: 1em;
	border: 1px solid #aaa;
	border-radius: 5px;
	line-height: 1.5em;
	min-width: 4em;
	padding: .5em .5em;
	display: inline-block;
	text-align: center;
}

a.button.red, div.button.red {
	background: red;
}


a.button.green, div.button.green {
	background: green;
}


a.button.blue, div.button.blue {
	background: blue;
}

cite {
	display: block;
	text-align: right;
	width: 100%;
}

strike {
	cursor: not-allowed;
}

section.repository ul {
	padding: 0;
}


body {
	font-family: 'Tahoma';
	font-family: 'Open Sans';
	padding-left: 180px;
	padding-top: 2em;
	margin: 0;
	
	background: url('handmadepaper.png');
	background: #ddd;
	background: url('subtle_dots.png');
	z-index: 1;


	overflow-y: scroll;
}

#pagewrapper {
	-o-transition: opacity 1s;
}

h1.booktitle {
	margin: 0;
	font-size: 1.5em;
}




@-o-keyframes slide {
  0% { left: .1em; }  
  50% { left: 1.3em; }  
  100% { left: .1em; }  
} 



article.book img.placeholder {
	cursor: pointer;
	box-shadow: 0 1px 5px #666;
	border: thin solid white;
	position: relative;
	float:left;
	margin: .5em;
	margin-right: 1em;
}

article.link {
	display: block;
	cursor: pointer;
	height: 160px;
	width: 160px;
	overflow: hidden;
	text-overflow: o-ellipsis-lastline;
}
article.link h1 {
	font-size: 1.2em;
	font-weight: normal;
	margin-top: 0;
}


article.link:nth-child(5n){
	background: red;
}
article.link:nth-child(5n+1){
	background: blue;
}
article.link:nth-child(5n+2){
	background: green;
}
article.link:nth-child(5n+3){
	background: yellow;
}
article.link:nth-child(5n+4){
	background: pink;
}

article.link:hover {

	/*border :1px solid rgb(202,202,202);
	box-shadow: inset 0 1px 4px #666;*/
}

.pulse {
	-o-animation: pulse 1.2s infinite;
}



@-o-keyframes pulse {
  0% { box-shadow: 0 0 7px #1cd2dc; }  
  50% { box-shadow: 0 0 15px #1cd2dc; }  
  100% { box-shadow: 0 0 7px #1cd2dc; }  
} 

















#main {
}


/* BUTTON */
.buybutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	-o-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-0-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	color:#306108;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #aade7c;
	opacity: .4;
}.buybutton:hover {
	background-color:#5cb811;
}.buybutton:active {
	position:relative;
	top:1px;
}

.infobutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	-o-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-0-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	color:#306108;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #aade7c;
	opacity: .4;
}.infobutton:hover {
	background-color:#5cb811;
}.infobutton:active {
	position:relative;
	top:1px;
}
/*-------------------------------*/





#main > header {
	position: fixed;
	height: 4em;
	top: 0;
	right: 0;
	background: white;
	width: 100%;
	z-index: 98;
	box-shadow: 0 2px 5px #aaa;
	text-align: right;
}
#main > header h1 {
	padding-right: .4em;
	float: right;
	color: #efefef;
	text-transform: uppercase;
	font-size: 2em;
	margin: 0;
	margin-top: .15em;
	-o-transition: opacity .3s;
	text-shadow: 0 1px 0 #ccc;
}
#main > header ul {
	padding-left: 16em;
	position: absolute; bottom: 0.2em;
}

#main > header li {
	display: inline-block;
}

#src-nav li {
	font-size: 1.6em;
	font-weight: bold;
	position: relative;
}

#src-nav li.selected:after {
	font-family: 'symbols';
	position: absolute;
	top: 1em; left: 50%;
}

#src-nav li.selected {
	color: #1cd2dc;
}

#src-nav-level2 li {
	position: relative;
	top: 1em;
	font-size: .6em;
}

div.test:after {
	content: "fdsa";
	width: 100%;
	height: 100%;
	position: absolute;
	top:3px;left:3px;
	background: white;
	border: thin solid #333;
}


.meta-buttons {

}

.truncate {
	margin-top: 1em;
	margin-bottom: 1em;
	height: 10em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-overflow: -o-ellipsis-lastline;
}

p {
	padding: 0; margin: 0;
}



#page-nav-buttons {
	position: fixed;
	bottom: 0;
	right: .2em;
	height: 3em;
	width: 8em;
	z-index: 99;
}

a.btn {
	position: absolute;
	color: black;
	text-decoration: none;
	font-family: 'symbols';
	font-size: 3em;
	bottom: .1em;
}

a.btn:active {
	bottom: 0;
}

a.button-next {
	content: ')';
	right: 0;
}
a.button-prev {
	content: '(';
	left: 0;
}

#loading {
	position: fixed;
	z-index: 0;
	font-family: 'symbols';
	top: 1em; right: 1em;
	font-size: 2em;
}

nav li.selected {
	background: #7E98AE;
	color: white;
}

nav li.selected a:hover {
	color: white;
	cursor: default;
}

#runeberg-link::before {
	background: url("../img/runeberg.png") 50% 50%/100% no-repeat transparent;
	content: "";
	height: 20px;
	width: 16px;
	vertical-align: center;
	font-family: monospace;
	position: relative;
	top: 3px;
}
#gutenberg-link::before {
	background: url("../img/gutenberg.png") 50% 50%/100% no-repeat transparent;
	content: "";
	height: 20px;
	width: 16px;
	vertical-align: center;
	font-family: monospace;
	position: relative;
	top: 3px;
}

nav.pager {
	position: fixed;
	bottom: 0;
	width: 30%;
	right: 35%;
}

/*
#dropzone {
	position: relative;
	background: white;
}

#dropzone::before {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0; left: 0;
	background: rgba(28, 210, 220, .9);
	content: 'Add to collection';
	text-transform: uppercase; 
	color: white;
	font-family: 'Oxygen';
	font-weight: bold;
	text-align: center;
	font-size: 1.5em;
	white-space: normal;
	padding-top: 1em;
	box-sizing: border-box;
	z-index: 1;
}*/


.droptarget.activated {
	background: #1cd2dc;
}


span.updated {
	position: absolute;
	bottom: 0;
	right: .5em;
}



#lightbox {
	background: rgba(0,0,0,.9);
	height: 100%;
	width: 100%;
	position: fixed;
	top:0; left: 0;
	z-index: 1337;
}



#navigation {
	position: fixed;
	bottom: 0;
	height: 1.5em;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	right: 0;
	background: white;
	text-align: center;
	display: none;
	z-index: 500;
	font-size: 2em;
}

#navigation span {
	cursor: pointer;
	color: #aaa;
}


#addsource {
	margin-top: 2em;
}



/* EXPERIMENTAL! */

body, html {
	height: 100%;
	margin: 0; padding: 0;
}
body {
	padding-left: 200px;
}

#sorting-options {
	height: 0;
}


#sorting-options {
	height: auto;
	position: absolute;
	top: 0;
	right: 0;
}

#books-wrapper {
	padding-top: 0;
	padding-bottom: 0;
	-o-transition: opacity .5s;
	padding: 1em;
	box-sizing: border-box;
	padding-top: 7em;
	padding-bottom: 0;
	width: 100%;
	padding-left: 216px;
	left: 0;
/*
	min-height: 100%;*/
}


#books-wrapper ul, #books-wrapper li {
	margin: 0; padding: 0;
}
#books-wrapper li {
	display: inline-block;
}

#books-wrapper.invisible {
	-o-transition: opacity 0s;
}

#books-wrapper table {
	width: 100%;
}

#books-wrapper table tr {
	vertical-align: middle;
	-o-transition: height linear .3s;
	height: 50px;
}

#books-wrapper table tr p {
	cursor: default;
}

#books-wrapper .wrapper {
	-o-transition: height .5s;
}

#books-wrapper table tr:hover img {
	-o-transform: scale(1.2);
}

#books-wrapper table tr td:first-child {
	-o-transition: font-size linear .3s;
}
#books-wrapper table tr.active td:first-child {
	/*font-size: 2em;*/
}

#books-wrapper table tr td:first-child {
	width: 55%;
}
#books-wrapper table tr td:last-child {
	width: 15%;
	text-align: center;
	vertical-align: middle;
}

#books-wrapper table tr:nth-child(odd) {
	background: #eaeaea;
}
#books-wrapper table tr:nth-child(even) {
	background: #ccc;
}


#pager {
	height: 0;
}

.book-pager {
	height: 100%;
	width: 100%;
}

article.book {
	margin-bottom: 0;

}

.meta {
	width: 100%;
	text-align: right;
	position: absolute;
	right: 1em;
	bottom: 2em;
	display: none;
}

#books-wrapper-header {
	background: white;
	top: 0;
	right: 0;
	width: 100%;
	z-index: 10;
	font-family: 'Open Sans';
	font-size: 1em;
	padding-left: 1em;
	height: 50px;
	position: relative;
	box-sizing: border-box;
}
#books-wrapper-header h1 {
	padding: 0;
	margin: 0;
}
#book-source-links {
	width: 100%;
	background: white;
	z-index: 98;
	border-bottom: 1px solid #ddd;
	padding: 0 1em;
	box-sizing: border-box;
	position: relative;
	min-height: 50px;
	z-index: 9;
	box-shadow: 0px 0px 5px #ddd;

	-o-transition: min-height .5s;
}
#book-source-links.fixed {
	position: fixed;
	top: 0;
}

#books-wrapper-header-location {
	top: 1em;
	left: 216px;
	display: block;

	-o-transition: opacity .5s;
}
#books-wrapper-header-sorting {
	top: 1em;
	right: 1em;
	display: block;
	cursor: pointer;
}





#books-wrapper-header-buttons {
	position: absolute; right: .4em; top: .345em;
	font-size: 1.5em;
}

.header-button {
	display: inline-block;
	border: 1px solid rgba(0,0,0,0);
	height: 24px; width: 24px;
	text-align: center;
	color: #ccc;
}
.header-button:not(.active) {
	cursor: pointer;
}

.header-button:hover,.header-button.active {
	color: #000;
}




#delete-zone {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 1em;
	height: 1em;
	font-size: 10em;
	text-align: center;
	padding-bottom: .2em;
	opacity: 0;
	-o-transition: opacity .2s;
	z-index: -1;
}

#delete-zone.activated {
	z-index: 99;
	opacity: 1;
}

#smokescreen {
	position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 499;
    background: rgb(0,0,0);
    opacity: 0;

    -o-transition: opacity .3s;
}

#smokescreen.active {
    opacity: .8;
}

.lightbox-close-button {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2em;
    z-index: 501;
    cursor: pointer;
    line-height: .8em;
}

div.bookstuff {
	display: none;
	opacity: 0;
	padding-right: 2em;
	padding-left: 1em;
}




#status {
	height: 30px;
	width: 30px;
	position: fixed;
	left: 49%;
	top: 49%;
	z-index: -1;
	opacity: 0;
	-o-transition: opacity .3s;
}

#status.visible {
	opacity: 1;
	z-index: 9999;
}


#book-source-links p:after {
	position: absolute;
	right: 1em;
	content: " \f0d7";
	font-family: 'FontAwesome';
}


/* LIST VIEW */

#books-wrapper ul.small {
	margin: 0; padding: 1em 0;
}

#books-wrapper ul.small li {
	display: inline-block;
	width: 100%;
	height: 96px;
	vertical-align: top;
	border-radius: 5px;
	box-sizing: border-box;
	margin: 0.3em 0;
}

#books-wrapper ul.small li:nth-child(odd) {
	background: #eee;
}
#books-wrapper ul.small li:nth-child(even) {
	background: #ddd;
}
#books-wrapper ul.small li div.wrapper {
	padding: 1em;
	position: relative;
}

#books-wrapper ul.small li p.title {
	font-size: 1.3em;
}
#books-wrapper ul.small li p.author {
	font-size: .9em;
}

#books-wrapper ul.small li img {
	max-height: 70px;
	max-width: 50px;
	float: left;
	padding-right: 1em;
	margin-bottom: 1em;
	-o-transition: all .3s;
}

#books-wrapper ul.small li footer {
	height: 100%;
	width: 100px;
	position: absolute;
	top: .5em;
	right: .5em;
}

#books-wrapper ul.small li footer div.read {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	margin: 0;
}

#books-wrapper ul.small li footer div.metadata {

	width: 100%;
	text-align: center;
}
#books-wrapper ul.small li footer div.metadata i {
	font-size: 1.3em;
	margin: 0 .3em;
	border: 1px solid #666;
	border-radius: 5px;
	width: 1em;
	height: 1em;
	line-height: 1em;
	padding: .3em;
	display: inline-block;
	text-align: center;
	cursor: pointer;
}



#books-wrapper table {

}






#book-source-links p {
	cursor: pointer;
	height: 50px;
	line-height: 3em;
	text-align: center;
	width: 200px;
	border-top: 1px solid rgba(0,0,0,0);
	border-left: 1px solid rgba(0,0,0,0);
	border-right: 1px solid rgba(0,0,0,0);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	position: relative;

	margin-right: 1em;
}

#book-source-links p:hover {
	color: #1cd2dc;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
}

/*#book-source-links p:hover + nav{
	height: auto;
}*/




#book-source-links nav ul {
	position: relative;
	margin: 0;
	margin-right: 1em;
	width: 200px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: left;



	/* Some experimental stuff */
	width: 500px;
	columns: 200px;
	

	/* Needs to be calculated with js */
	/*height: 480px;
	column-fill: auto;*/
}

#book-source-links nav.visible {
	box-shadow: #DDDDDD 0px 1px 5px 0px;
	border: 1px solid #ddd;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	background: white;
	height: auto;
}

/* Hat tip to bootstrap*/
span.badge {
	float: right;
	border-radius: 9px;
	padding: 1px 9px 2px;
	background-color: #999999;
	color: #FFFFFF;
	font-size: 11.84px;
	font-weight: 700;
	line-height: 14px;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.251);
	vertical-align: baseline;
	white-space: nowrap;
	margin-right: 1em;
	margin-top: 0.6em;
}

#book-source-links nav li {
	cursor: pointer;
	line-height: 2em;
	box-sizing: border-box;
	padding-left: 1em;
}
#book-source-links nav li:hover {
	background: #1cd2dc;
	color: white;
}

#book-source-links div.source-link {
	display: inline-block;
	height: 100%;
}

#book-source-links div.source-link p.active {
	background: #eaeaea;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

#book-source-links div.source-link input[type=search]{
	margin-top: 1em;
	margin-right: 1.4em;
	width: 200px;
}

#book-source-links nav {
	height: 0;
	-o-transition: height linear .3s;
	overflow: hidden;
	position: absolute;
}



#splashscreen {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #212121;
	color: #fff;
	z-index: 1337;
	text-align: center;
	-o-transform: opacity 1s;
	opacity: 1;
}

#splashscreen img {
	width: 30%;
	left: 35%;
}

.pull-right {
	float: right;
}
.pull-left {
	float: left;
}


#options .header-button {
}
#options-display-modes li {
	display: inline-block;
}






/*VERY EXPERIMENTAL!*/
#books-wrapper {
	position: absolute;
	top: 0px;
	height: 100%;
	z-index: 1;
}
#books-wrapper.paginate {
	overflow: -o-paged-y;
}

#navigation p {
	margin-top: -8px;
}

nav.pager {
	right: 0;
	width: 150px;
}

#searchbox {
	background: white;
	border-bottom: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	position: absolute;
	left: 1em;
	top: 100%;
	height: 0;
	overflow: hidden;

	-o-transition: height .3s;
}

#searchbox.visible {
	height: 51px;
}

#searchbox input {
	margin: 1em;
}

#subtitle {
	font-size: .5em;
	color: #aaa;
}

#books-wrapper-subsections {
	text-align: center;
}

*[contenteditable] {
	border: 1px dashed #666;
}