/*** common.css ***/

/** zero **/

@import url(https://fonts.googleapis.com/css?family=Istok+Web:400,400italic,700,700italic);
@import url(http://fonts.googleapis.com/css?family=Cookie);
@import url(http://fonts.googleapis.com/css?family=Leckerli+One);
@import url(http://fonts.googleapis.com/css?family=Pacifico);

#page > header h1 {
	font-family: Leckerli One;
	font-weight: normal;
	margin-bottom: 0;
}

body {
	font-family: Istok Web;
	font-size: .85em;
	color: dimgray;
	background: rgb(115,40,60) url('../images/fabric.png');
	margin-top: 0;
}

#page {
	background: white;
	box-shadow: 0 0 2em rgb(60,20,40);
	margin: 0 auto;
	max-width: 1100px;
}

a {
	color: rgb(150,0,60);
	text-decoration: none;
}

/** box modular **/

nav, section.image {
	clear: both;
}

nav {
	border: thin solid whitesmoke;
	display: flex;
	flex-direction: column;
}

nav span {
	padding: .5em 1em;
}

nav span ~ span {
	border-top: thin solid whitesmoke;
}

nav span a {
	padding: .5em 0;
	display: block;
}

#page > header {
	/*
	background-color: rgb(250,45,23);
	background-image: linear-gradient(
		to bottom right,
		black,
		rgb(250,45,23)
	);
	background-image: url('../images/header.png');
	background-position: top right;
	background-repeat: no-repeat;
	*/
	background: url('../images/header.png') top right no-repeat, linear-gradient(
		to right,
		rgb(150,0,60),
/*		rgb(160,50,165),*/
		red
	);
	background-size: contain;
	height: 69px;
}

#page > footer {
	color: white;
	background: rgb(150,0,60);
}

#page > header * {
	color: white;
}

.tagline {
	display: none;
}

.success {
	margin: 1em 2em;
}

header, footer {
	background: whitesmoke;
	padding: .5em 2em;
	position: relative;
	overflow: hidden;
}

footer span {
	font-size: .65em;
	float: left;
}

footer a:hover {
	color: white;
}

main {
	padding: .5em 0;
}

section, main > h2, #published-books article {
	padding: 0 2rem;
}

figure {
	margin-left: 0;
	max-width: 20%;
	float: left;
}

#published-books figure {
	max-width: 30%;
}

figure img {
	max-width: 100%;
}

/** type **/

/** about **/

#about h3 {
	margin-bottom: -.5em;
}

/** login **/

.login {
	font-size: .65em;
	float: right;
	text-decoration: none;
}

.success {
	color: green;
}

.success.log {
	font-size: .85em;
	background: rgba(180,230,180,.8);
	padding: 1em 0;
	width: 100%;
	height: 1.5em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	display: flex;
}

.success.log span {
	text-align: center;
	flex: 1;
	flex-basis: auto;
}

.success.log + #page {
	margin-top: 3.5em;
}

/** index **/

/** gallery **/

figure.image, #port figure {
	text-align: center;
	border: thin solid whitesmoke;
	max-width: 100%;
	float: none;
	margin: 0;
}

figure.image, #port figure {
	padding: 1em;
}

/** published-books **/

#published-books article + article {
	border-top: thin solid whitesmoke;
	clear: both;
}

/** file-list **/

#file-list article,
#contact article {
	padding: 1em;
	border: thin solid whitesmoke;
	margin: 0 0 1em;
	overflow: hidden;
}

#file-list article:first-of-type {
	margin: 0 1em 1em 0;
}

/* upload */

.upload {
	position: relative;
}

.upload input[type=text],
.upload input[type=file] + label,
.upload textarea,
.upload select {
	display: block;
}
#contact input[type=email],
#contact input[type=email] + label,
#contact textarea,
#contact select {
	display: block;
}

.upload input,
.upload select,
#contact input,
#contact textarea {
	margin-bottom: 1em;
}

.upload input[type=text],
#contact input[type=email] {
	width: 20em;
}

.upload textarea,
#contact textarea {
	border: thin solid gainsboro;
	width: calc(100% - 2px);
	height: 4em;
	resize: none;
}

.upload input[type=submit] {
	color: green;
	margin-bottom: 0;
	position: absolute;
	bottom: 0; right: 0;
}

/* current-files */

#file-list article.current-files,
#contact article:last-of-type {
	border: thin solid whitesmoke;
}

article.current-files section {
	background: whitesmoke;
	padding: 1em 1em 0;
	margin-bottom: .5em;
	overflow: hidden;
}

img.thumb {
	max-width: 100px;
	margin: 0 1em 1em 0;
	float: left;
}

.image p {
	font-size: .85em;
}

.image h3 {
	margin-top: 0;
}

.deleted {
	outline: thick solid red;
}

.deleted::after {
	content: 'This item has been deleted and will not appear when you refresh the page.';
}

#update figure img {
	max-width: 100px;
}