/*
 *  Theme Name: Paperspace
 *  Author: Pasi Lallinaho
 *  Version: 3.0 (2019-03-22)
 *
 *  Description: An elegant theme to use with WordPress. The theme is generally simple but modern, enhanced with some jQuery.
 *
 */

/*
 *  Main layout
 *
 */

body {
	font-family: 'Lato', 'Arial', sans-serif;
	margin: 0;
}

.dynamic-width {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.dynamic-padding-horizontal {
	padding-right: 2em;
	padding-left: 2em;
}

/*
 *  Some broad element declarations
 *  TODO
 *
 */

#title a:hover h1, #title a:active h1, #title a:focus h1,
.post-title div {
	color: #3369bb;
}
	#title a,
	header #navi a,
	#navibar a,
	main a,
	aside a {
		transition: color 200ms;
	}

	#sidebar a, #sidebar a:hover, #sidebar a:active, #sidebar a:focus {
		color: #1e3e6e;
	}

	a.more-link:after {
		content: "›";
		margin-left: 0.3em;
	}


/*
 *  Header area
 *
 */

section#title {
	background-color: #fff;
}
	section#title a {
		display: block;
	}
		section#title h1 {
			font-size: 165%;
			line-height: 1.8em;
		}

header {
	background-color: #3369bb;
}
	header #description {
		display: none;
	}
	header #masthead {
		font-size: 100%;
		line-height: 1.6em;
		text-align: right;
	}
		header #masthead ul.menu {
			text-align: left;
			margin-bottom: 0;
		}
			header #masthead li {
				display: inline;
				margin-left: 0;
				list-style-type: none;
			}
			header #masthead a {
				display: inline-block;
				padding: 0.5em 0;
				margin-right: 0.5em;

				border-bottom: none;
				color: rgba( 255, 255, 255, 0.75 );

				transition: color 200ms;
			}
				header #masthead a:hover,
				header #masthead a:active,
				header #masthead a:focus {
					color: #fff !important;
				}
				header #masthead .strong a {
					font-weight: bold;
					color: rgba( 255, 255, 255, 0.85 );
				}
				header #masthead ul.menu .gap:before {
					content: "/";
					margin: 0 0.75em 0 0;
					color: #fff;
					color: rgba( 255, 255, 255, 0.25 );
				}

/*
 *  Main content area and sidebar
 *
 */

section#content {
	padding-top: 2.6em;
	padding-bottom: 2.6em;

	background-color: #fff;
	color: rgba( 0, 0, 0, 0.6 );
}
	section#content main {
		font-size: 113%;
		line-height: 1.6em;
	}
	main article {
		margin-bottom: 2.6em;
	}
		main h1 {
			padding-bottom: 0.3em;
			border-bottom: 1px solid rgba( 0, 0, 0, 0.15 );
		}
			main h1:first-child,
			main *:first-child h1 {
				margin-top: 0;
			}
			main h1 a {
				border: none !important;
				display: block;
			}

aside#sidebar {
	padding: 2em 2em 0.5em 2em;

	color: rgba(0,0,0,0.6);
	background: transparent linear-gradient(to right top, #f7f7f7, #f3f3f3);
}
	.widget {
		font-size: 113%;
		line-height: 1.6em;

		margin-bottom: 2em;
	}
		aside h2 {
			margin-top: 0;
			padding-bottom: 0.2em;

			color: #616161;
			color: rgba( 0, 0, 0, 0.6 );
			border-bottom: 1px solid rgba( 0, 0, 0, 0.15 );
		}
		aside img {
			margin-bottom: 1em;
		}

/*
 *  Footer
 *
 */

footer {
	padding-top: 0;
	padding-bottom: 1.5em;
}


/*
 *  Article related styles
 *  TODO
 *
 */

/*  Post meta  */

.post .post-meta {
	margin-top: 1.5em;
}

main .post-attachments li {
	list-style-type: none !important;
	margin-left: 0;
}

.post-attachments a {
	color: #555 !important;
	border-bottom: none !important;
}

.post-attachments a .file-title {
	border-bottom: 1px solid transparent;
	margin-left: 0.2em;

	transition: border 200ms ease-in-out;
}

	.post-attachments a:hover .file-title,
	.post-attachments a:focus .file-title,
	.post-attachments a:active .file-title {
		border-bottom: 1px solid #bbb;
	}

.post-attachments a span.mimetype-link {
	color: #ddd;
	font-weight: bold;

	transition: color 200ms ease-in-out;
}

	.post-attachments a:hover span.mimetype-link,
	.post-attachments a:focus span.mimetype-link,
	.post-attachments a:active span.mimetype-link {
		color: #111;
	}

/* 
 *  HTML5 galleries and images
 *
 */

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.wp-caption,
	.gallery figure {
		flex-grow: 1;

		margin-right: 1em;
		margin-bottom: 1em;
	}
		.wp-caption a {
			border-bottom: none;
		}

		.wp-caption img,
		.gallery figure img {
			margin-bottom: -5px;
			max-width: 100% !important;
			height: auto;
		}
		.wp-caption-text,
		.gallery figure figcaption {
			display: block;
			margin-top: 0.5em;
			padding: 0.3em 0 0 0;

			color: rgba( 0, 0, 0, 0.5 );

			font-size: 90%;
		}

	/* Different column counts
    * Note: Percentage widths imply the SMALLEST width figures should have
    *       More than 4 columns aren't handled... at least yet
    */
	.gallery.gallery-columns-1 figure { max-width: 100%; }

	.gallery.gallery-columns-2 figure { width: 33.3%; }
	.gallery.gallery-columns-2 figure:nth-child(2n+2) { margin-right: 0 !important; }

	.gallery.gallery-columns-3 figure { width: 25%; }
	.gallery.gallery-columns-3 figure:nth-child(3n+3) { margin-right: 0 !important; }

	.gallery.gallery-columns-4 figure { width: 20%; }
	.gallery.gallery-columns-4 figure:nth-child(4n+4) { margin-right: 0 !important; }

	/* These handle the extra space on last rows, effectively aligning figures left */
	.gallery.gallery-columns-2 figure:nth-child(2n+1):last-child { padding-right: 50%; margin-right: 0.5em; }

	.gallery.gallery-columns-3 figure:nth-child(3n+1):last-child { padding-right: 66.6%; margin-right: 0.625em; }
	.gallery.gallery-columns-3 figure:nth-child(3n+2):last-child { padding-right: 33.3%; margin-right: 0.5em; }

	.gallery.gallery-columns-4 figure:nth-child(4n+1):last-child { padding-right: 75%; margin-right: 0.75em; }
	.gallery.gallery-columns-4 figure:nth-child(4n+2):last-child { padding-right: 50%; margin-right: 0.625em; }
	.gallery.gallery-columns-4 figure:nth-child(4n+3):last-child { padding-right: 25%; margin-right: 0.5em; }

/*
 *  Search and archive related styles
 *
 */

/*  Search form  */

form#searchform {
	margin-bottom: 3em;
}

	form#searchform input {
		width: 100%;
		font-size: 140%;
		padding: 0.4em;
		margin-bottom: 0.5em;
	}

	form#searchform input#s {
		flex: 3;
		margin-right: 0.5em;
	}

	form#searchform input#searchsubmit {
		flex: 1;
		padding: 0.35em 0.4em;
	}

/*  Search results and archives  */

.post-list li {
	list-style-type: none;
	margin-left: 0;
	margin-bottom: 1em;
}

.post-list h3 {
	margin-bottom: 0.2em;
}

.archive-sub {
	margin-bottom: 2em;
}

/* TODO: ok so far (what?) */


/*
 *  Discussion
 *
 */

#comments {
	margin-top: 2em;
}
	.pingback,
	.comment {
		list-style-type: none;
		margin-left: 0;

		padding-top: 1.2em;
		border-top: 1px solid rgba( 0, 0, 0, 0.15 );
	}
		.pingback:first-child,
		.comment:first-child {
			padding-top: 0;
			border-top: none;
		}
		.avatar {
			display: block;
			width: 36px;
			margin-right: 12px;
			float: left;
		}
		#commentform {
			padding-right: 48px;
		}
		#commentform,
		.comment-comment {
			float: left;
			margin: 0 0 0.8em 48px;
			color: #555;
		}
		.comment .meta {
			line-height: 1.3em;
		}
			.comment .author,
			.comment .author a {
				color: #444 !important;
				font-weight: bold;
			}

/*  Comment form  */
/*  TODO: flex */

#comments input,
#comments textarea {
	width: 100%;

	padding: 0.35em;
	margin-bottom: 0.5em;

	font-size: 100%;
	font-family: 'Lato', 'Arial', sans-serif;
}
	#comments textarea {
		margin-bottom: 0.2em;
	}
	#comments input#email { width: 49.5%; float: left; }
	#comments input#url { width: 49.5%; float: right; }
	#comments input#submit { width: 30%; }

#commentform {
	width: 100%;
}

/*
 *  Footer
 *  TODO
 *
 */

#footer {
	background-color: #fff;
}

#footer h2 {
	margin-top: 0;
	color: #444;
}
	#footer h2 a {
		color: #444;
		border-bottom: none;
	}

.footer_widget p {
	margin-bottom: 0.3em;
}

/*  Search & Browse  */

	#footer #browse .desc {	color: #777; }
		#footer #browse .desc a { color: #444; }
	#footer #browse .navi.regular a:after {
		content: "›";
		margin-left: 0.3em;
	}

/*  ??  */
.media-page-image {
	width: 100%;
}

/*
 *  FIXME: WordPress requirements
 *
 */

.sticky { }
.gallery-caption { }