/*
Theme Name:  Class Blogging
Theme URI:   http://languages.oberlin.edu/cilc/projects/class-blogs/
Description: A theme that is a core part of the class blogs suite.  It shows all student blogs on the main page in a series of columns, with a variable number of posts from each blog shown.  The columns containing student posts are ordered by the date of the most recent post on each blog.
Author:      Oberlin College's Cooper International Learning Center
Author URI:  http://languages.oberlin.edu/
Version:     0.4
License:     BSD New
License URI: license.txt
Tags:        black, blue, white, gray, threaded-comments, two-columns, translation-ready, custom-header, custom-menu
Text Domain: classblogging
Domain Path: /languages/
*/

@import "settings";
@import "usercontent";

/* ===CSS RESET== */

@import "reset";

/* ===GLOBAL=== */

body {
	background: $color-page-bg url("images/side-shadow.png") repeat-y -2.5em 0;
	@include body-text;
	color: $color-text;
	font-size: 100%;
}

html>body {
	font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
	color: $color-headers;
}

a {
	color: $color-links;
	text-decoration: none;
}
a:visited {
	color: $color-links-visited;
}
a:hover {
	color: $color-links-hover;
}

/* ===HEADERS== */

// Wrapper for the title and description headers
#branding {
	margin-left: 26em;
	padding-top: 1.5em;
}

// Wrapper for the user-selected logo
#logo {
	float: left;
	margin: 1.5em 0 0 3em;
}

// The blog title and description
#blog-name,
#blog-subtitle {
	@include header-text;
}

// The name of the blog
#blog-name {
	font-size: 1.75em;
	line-height: 1.714em;

	a {
		color: $color-blog-title;
	}
}

// The description of the blog
#blog-subtitle {
	color: $color-text-muted;
	font-size: 0.833em;
	line-height: 1.8em;
	text-transform: uppercase;
}

/* ===NAVIGATION=== */

// Wrapper for the list of pages
.page-navigation {
	font-size: 1.25em;
	line-height: 1.8em;
	margin: 1.8em 0 1.8em 20.8em;

	// A single page in the list
	.page_item,
	.menu-item {
		float: left;
		margin-right: 2.4em;
		position: relative;

		a:visited {
			color: $color-links;
		}
		a:hover {
			color: $color-links-hover;
		}

		// The padding for child page menu items
		$padding-child-pages: 0.6em;

		// Hide child pages by default
		.children {
			background: $color-bg-light;
			border-top: 1px solid $color-border-dark;
			display: none;
			left: 0 - $padding-child-pages;
			position: absolute;
			z-index: 9000;

			.page_item,
			.menu-item {
				display: block;
				font-weight: normal;
				margin: ($padding-child-pages / 2) 0;
				padding-left: $padding-child-pages;
				min-width: 7.2em;
			}
		}
		.children .children {
			border-top: none;
			left: 0;

			a {
				padding-left: $padding-child-pages;
			}
		}

		// Show child pages on hover
		&:hover .children {
			display: block;
		}
	}

	// A page that is actively being viewed
	.current_page_item a,
	.current_page_item a:visited {
		color: $color-text;
		font-weight: bold;
	}
}

/* ===BODY CONTENT=== */

// The vertical space between the header and body content
$margin-post-header: 2.25em;

// Wrapper for all non-header content
#body {
	clear: both;
	padding-top: $margin-post-header;
	position: relative;
}

// Wrapper for non-sidebar content
#content {
	margin: 0 $margin-body-horizontal 0 $margin-content-left;

	// The title of a single, non-post and non-page page
	#page-title {
		font-size: 2em;
		line-height: 1.5em;
		margin-bottom: 0.75em;

			// An optional term by which the page is being filtered
			.filter {
				font-weight: bold;
			}
	}
}

/* ===SIDEBAR=== */

#sidebar {
	left: 0;
	line-height: 1.5em;
	margin-top: $margin-post-header;
	position: absolute;
	text-align: right;
	top: 0;
	width: 20em;

	// Wrapper for all widgets in the sidebar
	.widgets {
		margin-left: $margin-body-horizontal;
	}

	// Wrapper for a sidebar widget
	.widget-container {
		margin-bottom: 3em;

		// The name of a widget
		.widget-title {
			background: $color-header-bg;
			color: #fff;
			@include header-text;
			line-height: 3em;
			margin: 0 -0.75em 0.75em 0;
			padding-right: 0.75em;
			@include subtle-shadow;
			text-transform: uppercase;
		}

		// Generally a wrapper for any widget
		ul {
			line-height: 1.5em;

			li {
				margin: 0.75em 0;
			}
		}

		// A link in a widget
		a {
			color: $color-sidebar-links;
		}
		a:hover {
			color: $color-sidebar-links-hover;
		}
		a:visited {
			color: $color-sidebar-links-visited;
		}
	}

	// Tag clouds
	.tagcloud {
		a {
			margin-left: 0.365em;
		}
	}
}

/* ===MAIN PAGE=== */

// Wrapper for a post list shown when the student post data is unavailable
#content.main-posts {
	.post {
		margin-bottom: 3em;
	}
}

// The main page when viewing all student posts
#content.student-posts {
	margin-left: $margin-content-left - 3em;

	// A message explaining how an admin can write a post to make it show on the front page
	#no-content {
		color: $color-text-emphasis;
		font-weight: bold;
		margin: 0.75em 0 3em 3em;
	}
}

// Wrapper for a listing of posts by a single student
.user-posts {
	float: left;
	margin: 0 0 3em 3em;
	position: relative;
	min-width: 18em;
	max-width: 25em;
	width: 25%;

	// Horizontal padding applied to column header text
	$padding-x-column-header: 0.75em;

	// The size of a student's gravatar
	$gravatar-size: 54px;

	// Wrapper for the user's name and post / comment counts
	.user-info {
		background: $color-posts-column-header;
		height: $gravatar-size;
		padding-left: $padding-x-column-header;
	}

	// The student's name
	.user-name {
		color: $color-posts-column-name;
		line-height: 1.5em;
		padding-top: 0.75em;
		height: 1.5em;
		overflow: hidden;
		text-transform: uppercase;

		a {
			color: $color-posts-column-name;
		}
	}

	// The student's gravatar
	.avatar {
		border-left: 6px solid $color-page-bg;
		display: block;
		float: right;
	}

	// The total post and comment counts
	.user-meta {
		background: $color-posts-column-header;
		color: $color-posts-column-meta;
		height: 1.5em;
		line-height: 1.5em;
		margin-left: 0 - $padding-x-column-header;
		padding-left: $padding-x-column-header;

		.meta {
			float: left;
		}
		.post-count {
			margin-right: 1.5em;
		}
	}

	// Wrapper for the list of student posts
	.posts {
		clear: both;
		height: 35em;
		line-height: 1.5em;
		overflow: hidden;

		// Wrapper for a single post
		.post {
			border-top: 1px solid lighten($color-border-light, 7%);
			border-bottom: 1px solid $color-border-light;
			padding: 1.5em 0 0.75em;
			position: relative;

			// Remove borders from the first and last posts
			&.first {
				border-top: none;
			}
			&.last {
				border-bottom: none;
			}

			// The title of a post
			.title {
				border: 1px solid $color-page-bg;
				border-left: none;
				border-right: none;
				line-height: 1.2em;
				font-size: 1.25em;
				margin-right: 3.75em;
			}

			// Post metadata containing the date
			.meta {
				background: $color-bg-light;
				border: 1px solid $color-border-light;
				color: $color-sidebar-links;
				font-size: 0.833em;
				font-weight: bold;
				line-height: 1.8em;
				margin-top: -1.8em;
				position: absolute;
				right: 0;
				text-align: center;
				top: 3.6em;
				width: $gravatar-size - 2px;
			}

			// The post excerpt
			.entry {
				color: $color-text-strong;
				line-height: 1.5em;
				margin: 1.5em 0 0.75em;

				.read-more {
					font-weight: bold;
					margin-left: 0.375em;
				}
			}
		}
	}

	// The fadeout div at the end of each post list, which will have a different
	// position depending on whether or not the user has a blog tied to all of
	// their posts, which will cause a "read more" link to appear at the column's end
	.end-posts {
		background: url("images/post-list-fadeout.png") repeat-x bottom left;
		bottom: 0;
		height: 72px;
		position: absolute;
		width: 100%;
	}
	&.has-link .end-posts {
		bottom: 1.5em;
	}

	// A view-all-posts link at the end of the posts column
	.view-all-link {
		border-top: 1px solid $color-border-light;
		background: $color-page-bg;
		bottom: 0;
		display: block;
		font-weight: bold;
		padding-top: 0.75em;
		position: absolute;
		text-align: center;
		width: 100%;
		z-index: 1000;
	}
}

/* ===POST LISTS=== */

// The body class given to an archives page
.archive,
.home,
.search {

	// Post list navigation
	.navigation {
		a {
			background: $color-header-bg;
			border: 3px double $color-page-bg;
			color: $color-page-bg;
			display: inline-block;
			margin: 1.5em 0;
			padding: 0.365em 0.75em;
		}
		.previous {
			float: left;
		}
		.next {
			float: right;
		}
	}

	// Hide top navigation on first page
	.navigation.above {
		display: none;
	}
	&.paged .navigation.above {
		display: block;
	}

	// Wrapper for a single post
	.hentry {
		clear: both;
		margin-bottom: 3em;

		// Reduce the size of the title and meta information of a post when
		// shown on an archive page
		.post-info {
			.title {
				font-size: 1.5em;
				line-height: 2em;
				margin-left: -2.4em;
				margin-right: -2em;
				padding-left: 2.4em;
				padding-right: 2em;
			}
			.meta,
			.post-edit-link {
				line-height: 3em;
			}
		}

		// The comment-count info
		.interaction {
			font-weight: bold;
			margin-bottom: 0.75em;
			text-align: right;
		}
	}
}

/* ===404 PAGE=== */

// Wrapper for a 404 page
.error404 {

	// The page title for a 404 page
	#page-title {
		color: $color-sidebar-links;
	}
}

// The error description shown when no posts are found
.content.no-posts {

	// The description of the error
	p {
		line-height: 1.5em;
		margin-bottom: 1.5em;
	}
}

/* ===SEARCH=== */

// Wrapper for the search form
#searchform {
	margin-top: 0.75em;

	// The "search for" label
	label {
		font-weight: bold;
		margin-right: 0.75em;
	}

	// The search text box
	input#s {
		margin-right: 0.75em;
	}
}

/* ===POST CONTENT=== */

.hentry {

	// Wrapper for the post's title, meta and edit link
	.post-info {
		background: $color-bg-sidebar;
		border: 1px solid $color-border-dark;
		border-left: none;
		border-right: none;
		margin: -0.75em -3em 0 -3.6em;
		padding: 0 3em 0 3.6em;

		// The title of a post or page
		.title {
			font-size: 2em;
			font-weight: bold;
			line-height: 2.25em;
		}

		// Information on the author and date of a post
		.meta,
		.post-edit-link {
			float: right;
			line-height: 4.5em;
		}
		.meta {

			.key,
			.value {
				display: inline;
			}
			.key {
				color: $color-headers;
				font-weight: bold;
				margin-left: 2.25em;
				margin-right: 0.75em;
			}
		}

		// The edit-post link
		.post-edit-link {
			font-weight: bold;
			margin-left: 2.5em;
		}
	}

	// The user-generated post content
	.content {
		font-size: 1.25em;
		line-height: 1.5em;
		margin: 1.2em 0;
		@include user-content;

		// Password-protected posts
		form {

			p {
				color: $color-text-warning;
			}

			label {
				color: $color-text;
				display: block;
				float: left;
				font-weight: bold;
				padding-right: 1.2em;
			}
		}

		// Paginated posts links
		.page-links {
			border: 1px solid $color-border-light;
			border-left: none;
			border-right: none;
			clear: left;
			margin-top: 1.5em;
			padding: 0.75em 0;

			strong {
				font-weight: bold;
				margin-right: 0.75em;
			}
		}
	}

	// Information on the tags and categories used by a post
	.taxonomy {
		clear: left;
		line-height: 1.5em;
		margin-bottom: 1.5em;

		// The title for the taxonomy group
		.type {
			font-weight: bold;
			float: left;
		}

		// The list of categories or tags
		.values {
			margin-left: 7em;
		}

		// Category links
		.post-categories li {
			display: inline;
		}

		// Any tags or category links
		a {
			margin-right: 1.5em;
		}
	}
}

// Required WordPress styles
.sticky,
.gallery-caption,
.bypostauthor {
	display: block;
}

/* ===COMMENTS=== */

#comments {
	border-top: 1px solid $color-border-light;
	clear: left;
	margin-bottom: 1.5em;
	padding-top: 1.5em;

	// Password-protected warning
	.protected-warning {
		color: $color-text-warning;
	}

	// The header for the comments section
	.comments-header {
		border: 1px solid $color-border-dark;
		border-left: none;
		border-right: none;
		color: $color-header-bg;
		font-size: 1.5em;
		line-height: 2em;
		margin: 2em 0 1em -0.75em;
		padding-left: 0.75em;
		@include subtle-shadow;
	}

	// Wrapper for comment pagination links
	.comment-navigation {
		margin: 1.5em 0;
		text-align: right;

		// Previous / next text
		.next,
		.prev {
			font-weight: bold;
		}

		// A page number
		.page-numbers {
			margin: 0 0.365em;
		}
	}

	// A wrapper for the list of comments left
	.comment-list {

		// A container for a comment or pingback in the list
		.comment, .pingback {
			max-width: 65em;
			padding: 0.75em 0;

			// A container for the author's name and gravatar
			.comment-author {
				.avatar {
					float: left;
					margin-right: 1.5em;
				}
				.fn {
					display: inline-block;
					font-size: 1.25em;
					font-weight: bold;
					line-height: 1.2em;
				}
			}

			// Information on the date the comment was posted
			.comment-meta {
				line-height: 1.5em;
				margin-bottom: 1.5em;
			}

			// The actual data of the comment
			p {
				line-height: 1.5em;
				margin: 0 0 1.5em 6em;
			}

			// The reply link
			.reply {
				font-weight: bold;
				margin: 0.75em 6em;
			}

			// Comments left about the current comment
			.children {
				margin-left: 6em;

				.comment {
					border-top: 1px solid $color-border-light;
				}
			}
		}

		// Don't indent pingbacks
		.pingback {
			p, .reply {
				margin-left: 0;
			}
		}
	}

	// A wrapper for the comment form
	#respond {

		p {
			line-height: 1.5em;
		}

		// The "leave a reply" header
		#reply-title {
			font-weight: bold;
		}

		// Any notes or text that appear after the reply header
		.logged-in-as,
		.comment-notes {
			margin: 0.75em 0 1.5em;
		}

		// Form elements in the comment form
		label {
			font-weight: bold;
		}
		input,
		textarea {
			@include body-text;
			display: block;
			font-size: 1em;
			line-height: 1.5em;
			margin-bottom: 1.5em;
		}

		// The list of allowed tags in the comment
		.form-allowed-tags {
			display: none;
		}
	}

	// The wrapper for the comment form when used with threaded comments
	.comment #respond {
		border-top: 1px solid $color-border-dark;
		margin-left: 6em;
		padding-top: 0.75em;

		// Override the styling on the comment text to avoid having the <p> containing
		// the comment textareas and inputs
		p {
			margin-left: 0;
		}
	}
}

// A pusher class at the end of a single page's content
#page-push {
	clear: both;
	height: 1.5em;
}

/* ===FOOTER=== */

// Wrapper for the page footer
#footer {
	border-top: 1px solid $color-border-dark;
	clear: both;
	margin: 1.5em $margin-body-horizontal 0 26em;

	strong {
		font-weight: bold;
	}

	// The list of footer information
	#colophon {
		line-height: 1.5em;
		padding: 1.5em 0;

		// A bit of information in the list
		.info {
			display: inline;
			margin-right: 3em;
		}
	}
}

/* ===CLASS BLOGS=== */

@import "classblogs";