@import 'grid.less';

@total-width: 100%;

@blue:   #0E1820;
@grey:   #979797;
@black:  #0A0A0A;
@white:  #F0F0F0;
@green:  #A5C77F;
@yellow: #FFC861;

@padding: 1.5rem;
@radius: 5px;

////////////
// MIXINS //
////////////

.rounded(@radius: 5px) { border-radius: @radius; }
.shadowed(@distance: 5px, @color: @grey) { box-shadow: @distance @distance @distance @color; }
.bordered(@color: @grey) { border: 1px solid @color; }

/////////////////
// ROOT STYLES //
/////////////////

html {
	font: 14px/1.5 sans-serif !important;		/* ensures we override the styles in normalize.css */
}

a {
	color: @green;
}

a:focus,
a:hover {
	color: @yellow;	
}

nav.menu {
	.column(12);
	position: relative;
	text-align: center;
	z-index: 10;
	
	ul {
		list-style-type: none;
		margin-bottom: 0;
		padding-left:  0;
		
		li {
			display: inline;
			white-space: nowrap;
			&+li:before { content: "\00a0\00a0\\\\\00a0\00a0\00a0"; }
			
			a {
				color: @white;
				text-decoration: none;
				
				&:hover,
				&:focus { 
					color: @green;
					text-decoration: underline;
				}
			}

			&.current-menu-item a,
			&.current-page-item a,
			&current-menu-item a:hover,
			&.current-menu-item a:focus,
			&.current-page-item a:hover,
			&.current-page-item a:focus {
				color: @yellow;
				cursor: default;
				text-decoration: none;
			}	
		}
	}
}

.post_navigation ul {
	.clearfix;
	padding: 0;
	
	li {
		width: 40%;
		&.prev { float: left; }
		&.next { float: right; text-align: right; }
	}
}
	

h1,
h2,
h3,
h4,
th[scope=col] { 
	font-family: happy-phantom, sans-serif;
	font-variant: small-caps;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 0;
}

h1 { 
	.column(12);
	font-size: 2rem;
	position: relative;
	text-align: center;
	z-index: 10;
}

h2 { font-size: 1.66rem; }
h3 { font-size: 1.33rem; }
h4 { font-size: 1rem;   }

p,
ul,
ol,
form,
table,
blockquote {
	margin: 0 0 @padding 0;
}

ul,
ol {
	padding: 0 0 0 @padding;
}

li {
	margin-bottom: (@padding * .25);
}

article footer ul {
	list-style-type: none;
	padding-left: 0;
}

article footer li {
	display: inline;
	
	&:after {
		content: ", ";
	}
	
	&:last-child:after {
		content: "";
	}
}

textarea,
input[type=text] {
	.rounded;
	.bordered(@grey);
	background-color: @blue;
	color: @white;
	padding: 2px;
}

table {
	.bordered;
	border-bottom-style: none;
	width: 100%;
}

tr th,
tr td {
	.bordered;
	background-color: @blue;
	padding: 5px;
	text-align: left;
}

thead th {
	vertical-align: bottom;
}

td,
tbody th {
	font-weight: normal;
	vertical-align: top;
}

tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td {
}

tbody tr:hover th,
tbody tr:hover td {
	background: @black;
}

.alignright {
	float: right;
	padding-left: @padding;
	text-align: right;
}

.wp-caption-text {
	font-size: .85rem;
}

/////////////////
// SITE STYLES //
/////////////////

body {
	color: @white;
	margin: 0 auto;
	width: 90%;

	section.column {
		.column(12);
		.rounded;
		.shadowed;
		.bordered;
		
		background: #323232;
		display: block;
		float: none;
		min-width: 205px;
		padding: @padding @padding 0 @padding;		/* bottom padding comes from the last-child */
		position: relative;
		
		img {
			.rounded;
			.bordered;
			display: none;
			margin: 0 auto;
			max-width: 200px;
			width: 100%;
			
			&.borderless {
				border-style: none;
			}
			
			&.mobile-show {
				display: inline-block;
			}
			
			&[alt=RSS] {
				display: none;
				visibility: hidden;
			}
		}
		
		&.index>header {
			text-align: center;
		}			
	}
	
	section.social {
		left: 0;
		position: absolute;
		text-align: center;
		top: 3px;
		width: 100%;
		
		ul {
			list-style-type: none;
			margin:  0;
			padding: 0;
			
			li {
				display: inline;
				padding-right: 5px;
				
				&:first-child { padding-left:  5px; }
				&:last-child  { padding-right: 0px; }
			}
		}
	}
	
	section.search {
		margin-top: @padding;
		text-align: center;
		
		form {
			margin:  0;
			padding: 0;
		}
		
		input {
			outline: none;
			vertical-align: middle;
		}
		
		input[type="text"] {
			.rounded();
		
				 -o-transition: width 0.25s ease-in-out;
				-ms-transition: width 0.25s ease-in-out;
			   -moz-transition: width 0.25s ease-in-out;
			-webkit-transition: width 0.25s ease-in-out;
					transition: width 0.25s ease-in-out;
		
			border: 1px solid #444;
			padding: 2px 5px;
			width: 100px;
			
			&:focus,
			&:active {
				width: 200px;
			}
		}
	}
}

div.container {
	.clearfix;
	padding: 30px;
	position: relative;
	width: 100%;
}

@media only screen and (min-width: 670px) {
	
	body {
		margin-top: 60px;	
		width: 75%;
		
		section.column {
			.column(6);
			
			&:nth-of-type(3)   { clear: left; }
			&:nth-of-type(n+3) { margin-top: @padding; }
			img { display: inline-block; }
		}
		
		section.social {
			padding-right: 45px;									
			text-align: right;
			top: 24px;
			z-index: 100;
		}
		
		section.search {
			position: absolute;
			right: 45px;
			top: 32px;	
			z-index: 100;								
		}
		
		&:not(.index) {
			section.column {
				.column(8);
				
				&+section.column {
					.column(4);
				}
			}
		}
	}
	
	h1 {
		line-height: 1.1;			/* makes the menu and the h1 tage line up a little more closely */
	}
	
	h1,
	nav.menu {
		text-align: left;
	}
}

@media only screen and (min-width: 1040px) {

	body {
		margin-top: 120px;
		max-width: 1200px;
		width: 100%;										/* div.container provides some padding */
		
		section.column {
			.column(3);
			&:nth-of-type(3)   { clear: none;   }			/* undoes clearing for table-sized layout */
			&:nth-of-type(n+3) { margin-top: 0; }			/* ditto */		
			
			.wp-caption:not(.index .wp-caption) {
				.rounded;
				background-color: @grey;
				color: @black;
				margin-bottom: @padding * .5;
				margin-left: @padding * .5;
				padding: @padding * .5;
				
				.wp-caption-text { margin-bottom: 0; }
				img { border: 1px solid @black; }
			}
		}
		
		section.search form input[type="text"] {
			&:active, &:focus { width: 227px; }				/* makes the search field match the 4th column's width at max size */
			width: 150px;									/* a little wider for a wider interface */
		}
	}
	
	h1,
	nav.menu	{
		top: -6px;										/* lines things up with the text in the search input */
	}
	
	.index .wp-caption {
		display: none;
	}
}