/*
 NOTICE: Uncompiled .LESS version can be found at style.dev.less
 */

/**
 * You shouldn't make changes to this file. Use a child theme instead
 * @link https://github.com/jayj/Cakifo/wiki/Child-themes
 */

@import "less/variables.less";
@import "less/mixins.less";

// Clearfix
// -------------------------
.clearfix {
	*zoom: 1;

	&:before,
	&:after {
		content: "";
		display: table;
	}

	&:after {
		clear: both;
	}
}

/* =============================================================================
   HTML5 display definitions
   ========================================================================= */

/**
 * Corrects `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/**
 * Corrects `inline-block` display not defined in IE 8/9
 */
audio, canvas, video {
	display: inline-block;
}

/**
 * Prevents modern browsers from displaying `audio` without controls
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */
[hidden] {
	display: none;
}

/* =============================================================================
   Base
   ========================================================================== */

/**
 * Apply a natural box layout model to all elements
 * @link http://paulirish.com/2012/box-sizing-border-box-ftw/
 */
* {
	.box-sizing(border-box);
}

/*
 * 1. Sets 1 rem = 10px
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: @bodyBackground;
	color: @textColor;
	#font > .serif;
}

/**
 * Remove background color if a user removes the color
 */
.custom-background-empty {
	background-color: @white;

	#content,
	#footer {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
}

/**
 * Set site width and center the site.
 * @siteWidth is defined in less/variables.less
 */
#wrapper {
	width: 100%;
	max-width: @siteWidth;
	margin: 0 auto;
}

/* =============================================================================
   Links
   ========================================================================== */

a {
	color: @linkColor;
	text-decoration: none;

	&:hover {
		color: @linkColorHover;
	}

	// Addresses `outline` inconsistency between Chrome and other browsers
	&:focus {
		.tab-focus();
	}

	// Improves readability when focused and also mouse hovered in all browsers
	&:hover,
	&:active {
		outline: 0;
	}
}

/* =============================================================================
   Typography:  Headings
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: @headingsFontFamily;
	font-weight: @headingsFontWeight;
	color: @headingsColor;

	// Fix the character spacing for headings
	text-rendering: optimizelegibility;
}

h1, h2 {
	.font-size(@headingsFontSize);
	letter-spacing: -1px;
}

h3 {
	.font-size(@headingsFontSize - 4);
	color: @orangeDark;
}

h4 {
	#font > .sans-serif(@headingsFontSize - 4, bold);
}

h5 {
	.font-size(@headingsFontSize - 6);
}

h6 {
	#font > .shorthand(@headingsFontSize - 8, normal);
}

/* Entry titles */
.entry-title {
	margin-bottom: 5px;
	.font-size(@headingsFontSize + 4);
}

/* h3 headings in post content */
.entry-content h3 {
	background: lighten(@grayLighter, 2.5%);
	padding: 8px 10px;
}

/* Widget titles */
.widget-title {
	.widget-title-bar;
	letter-spacing: -1px;

	// Links
	a {
		color: @grayDark;

		&:hover { color: @linkColorHover; }
	}
}

/* Section titles */
.section-title {
	.section-title-bar;
	box-shadow:
		0 0 0 3px fade(@white, 90%),
		-4px 0 3px fade(@black, 30%),
		inset 0 1px 3px #ac3d18;

	// Links
	a {
		display: block;
		color: @white;

		&:hover { color: @grayLighter; }
	}
}

/* =============================================================================
   Typography:  Lists
   ========================================================================== */

li {
	line-height: @baseLineHeight + 0.4;
}

// Ordered lists
ol ol {
	list-style: upper-roman;
}

ol ol ol {
	list-style: lower-roman;
}

ol ol ol ol {
	list-style: upper-alpha;
}

ol ol ol ol ol {
	list-style: lower-alpha;
}

// Definition lists
dt {
	font-weight: bold;
}

/* =============================================================================
   Typography:  Quotes
   ========================================================================== */

@import "less/quotes.less";

/* =============================================================================
   Typography:  Code
   ========================================================================== */

/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */
code, kbd, pre, samp {
	#font > .monospace(@baseFontSize, normal);
}

/**
 * Inline code
 */
code {
	color: @green;
}

/**
 * Blocks of code
 */
pre {
	overflow: auto;
	padding: @smallGutterWidth;
	background: lighten(@grayDark, 6%);
	border-radius: 5px;
	color: @white;

	/* Improves readability of pre-formatted text in all browsers */
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;

	code {
		color: @white;
	}
}

/* =============================================================================
   Media
   ========================================================================== */

@import "less/media.less";

/* =============================================================================
   Typography:  HTML elements
   ========================================================================== */

/* Addresses styling not present in IE 8/9, Safari 5, and Chrome */
abbr[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

acronym {
	border-bottom: 1px dashed @gray;
	text-transform: uppercase;
	cursor: help;
}

/* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome */
b,
strong {
	font-weight: bold;
}

em, cite {
	font-style: italic;
}

/**
 * Horizontal rule
 */
hr {
	display: block;
	clear: both;
	border: 0;
	height: 0;
	padding: 0;
	margin: @smallGutterWidth 0;
	border-bottom: 4px double @grayLighter;
}

/* Addresses styling not present in IE 8/9 */
mark {
	background: #ff0;
	color: @black;
}

/* Addresses styling not present in Safari 5 and Chrome */
dfn {
    font-style: italic;
}

/* Addresses inconsistent and variable font size in all browsers */
small {
    font-size: 80%;
}

big {
	font-size: 120%;
}

address {
	margin: 0 0 @smallGutterWidth 0;
	font-style: italic;

	li &,
	dd & {
		margin: 0;
	}
}

/**
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* =============================================================================
   Typography:  Tables
   ========================================================================== */

@import "less/tables.less";

/* =============================================================================
   Typography:  Selections
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 */
::-moz-selection {
	background: @selectionColor;
	color: @selectionTextColor;
	text-shadow: none;
}

::selection {
	background: @selectionColor;
	color: @selectionTextColor;
	text-shadow: none;
}

/* =============================================================================
   Misc:  Helper classes
   ========================================================================== */

@import "less/utilities.less";

/* =============================================================================
   Layout:  Topbar
   ========================================================================== */

#topbar {
	position: relative;
	width: 100%;
	min-height: 60px;
	background: @topbarBackground url(images/topbar.png) repeat; // The noise image is transparent
	color: #ccc;

	&:after {
		position: absolute;
		bottom: -11px;
		left: 0;
		.size(100%, 10px);
		background: url(images/topbar-bottom.png) repeat-x;
		content: "";
	}
}

/* =============================================================================
   Layout:  Main navigation
   ========================================================================== */

@import "less/navigation.less";

/* =============================================================================
   Layout:  Header
   ========================================================================== */

#branding {
	padding: (@gutterWidth + 20px) 0 (@gutterWidth + 10px);
}

#site-title {
	float: left;
	margin: 0 0 0 @gutterWidth;

	img {
		max-width: 100%;
		width: auto\9; // IE7-8 need help adjusting responsive images
		height: auto; // Scale the height according to the width, otherwise you get stretching
		margin-top: 20px;
	}

	span {
		#font > .shorthand(46, normal);
		text-shadow: 0 1px 0 @white;
		letter-spacing: -2px;
	}

	&.display-header-text {
		img {
			margin-right: 10px;
			vertical-align: text-bottom;
		}

		span {
			position: relative !important;
			clip: auto;
		}
	}

	a {
		color: @linkColor;

		&:hover { color: @linkColorHover; }
	}
}

#site-description {
	float: right;
	margin: @smallGutterWidth @gutterWidth 0 0;
	padding: 2px 8px;
	#font > .alternative(21);
	background-color: @white;
	background-color: fade(@white, 53%);
	border-radius: 3px;
	color: @gray;

	&:empty {
		background: none;
	}
}

/**
 * Use Flexbox to vertical center the site title and description
 */
.flexbox {
	#branding hgroup {
		.flex-display();
	}

	#site-title {
		float: none;
		margin: auto auto auto @gutterWidth;
	}

	#site-description {
		float: none;
		margin: auto @gutterWidth auto auto;
	}
}

/* =============================================================================
   Layout:  Content
   ========================================================================== */

@import "less/layouts.less";

/* =============================================================================
   Layout:  Slider
   ========================================================================== */

@import "less/slider.less";

/* =============================================================================
   Layout:  Posts
   ========================================================================== */

.hentry {
	position: relative;
	padding-bottom: @smallGutterWidth;
	border-bottom: 4px double @grayLighter;
	margin-bottom: @smallGutterWidth;
}

.singular .hentry {
	padding-bottom: 0;
	border-bottom: none;
}

.sticky {
	padding: @smallGutterWidth;
	background: @highlightBackground;

	.entry-title {
		margin-top: 0;
	}
}

/**
 * Byline and entry meta
 */
.byline,
.entry-meta {
	#font > .sans-serif(14, normal, 2);
	color: darken(@grayLight, 10%);
	clear: both;
}

.byline {
	margin-bottom: 15px;
}

.singular .entry-meta {
	padding: 15px 0 0;
	border-top: 1px solid @grayLighter;
	margin: @smallGutterWidth 0;
}

.page-links {
	clear: both;
}

/**
 * Intro
 */
.singular .intro-post {
	margin-bottom: @gutterWidth;

	.entry-title {
		display: none;
	}

	.entry-content {
		.font-size(@baseFontSize + 5);
	}

	.post-edit-link {
		position: absolute;
		top: 40%;
		right: @smallGutterWidth;
		padding: 0 8px;
		.font-size(12);
		background: @grayLight;
		border-radius: 3px;
		color: @white;
		text-decoration: none;

		&:hover,
		&:focus,
		&:active {
			background: #777;
		}
	}
}

/* =============================================================================
   Components:  Breadcrumbs
   ========================================================================== */

.breadcrumbs {
	padding: 12px @smallGutterWidth;
	border-bottom: 1px solid @grayLighter;
	margin-bottom: @smallGutterWidth;
	#font > .alternative(14, normal, 2);
	background: #f8f8f7;
	border-radius: 5px;
	color: @gray;

	a {
		color: @grayDark;

		&:hover {
			color: @linkColorHover;
		}
	}

	.trail-before {
		margin-right: 3px;
	}

	.sep {
		margin: 0 3px;
	}

	.trail-end {
		font-style: italic;
	}
}

/* =============================================================================
   Layout:  Post formats
   ========================================================================== */

@import "less/post-formats.less";

/* =============================================================================
   Components:  Author box
   ========================================================================== */

.author-profile {
	// padding, margin
	.blue-box(10px @smallGutterWidth, @smallGutterWidth 0);

	.author-name {
		.font-size(18);
	}
}

.author-profile,
.loop-meta {
	.twitter-link {
		text-align: right;

		a {
			padding-left: (@smallGutterWidth - 2px);
			.font-size(14);
			background: url(images/twitter.png) no-repeat left bottom;
		}
	}
}

/* =============================================================================
   Components:  Loop meta
   ========================================================================== */

.loop-meta {
	.highlight-box;
	.clearfix;
}

.loop-meta-home {
	padding: 0 0 4px;
	border: none;
	margin: 0;
	background: url(images/content-orange-line.png) repeat-x left bottom;

	.paged & {
		margin-bottom: @smallGutterWidth;
	}
}

.loop-title {
	.font-size(22);

	span {
		font-weight: normal;
		color: @orangeDark;
	}
}

/* =============================================================================
   Components:  Recent Posts
   ========================================================================== */

.recent-post {
	float: left;
	width: 220px;
	margin-right: @gutterWidth;
	.transition(opacity 250ms);

	&:last-of-type {
		margin-right: 0;
	}

	.entry-title {
		margin: 0;
		.font-size(16);
		letter-spacing: 0;
		word-wrap: break-word;
	}

	.entry-header {
		margin: 7px 0;
	}

	.recent-posts-meta {
		.font-size(12);
		font-style: italic;
		color: darken(@grayLight, 5%);
	}

	.thumbnail {
		float: none;
		max-height: 150px;
		margin: 0;
	}

	.entry-summary {
		.hyphens;
	}

	/* Lower opacity on every column except the hovered */
	#recent-posts:hover &{
		opacity: 0.75;

		&:hover {
			opacity: 1;
		}
	}
}

/* =============================================================================
   Components:  Headlines - Category lists
   ========================================================================== */

#headlines {
	margin: @gutterWidth 0;

	.widget-title {
		margin-bottom: 15px;
	}
}

.headline-list {
	float: left;
	width: 470px;
	margin: 0 (@gutterWidth + 20px) @gutterWidth 0;

	&:nth-child(2n) {
		margin-right: 0;
	}

	&:nth-child(2n+1) {
		clear: left;
	}

	ol {
		.no-list-style();
	}

	li {
		padding: @smallGutterWidth 20px;
		border-bottom: 1px solid darken(@grayLighter, 5%);

		&:hover,
		&:active {
			#gradient > .horizontal(#f7fafc, @highlightBlue, 50%);
		}
	}

	.entry-title {
		margin: 0;
		.font-size(18);
	}

	.headline-meta {
		.font-size(14);
		font-style: italic;
		color: darken(@grayLight, 5%);
	}

	.thumbnail {
		float: left;
		margin: 0 @smallGutterWidth 0 0;
	}
}

/* =============================================================================
   Layout:  Attachment pages
   ========================================================================== */

.attachment-title {
	margin-top: 0;
}

.attachment-meta {
	margin-bottom: @smallGutterWidth;
}

.image-info {
	float: left;
	width: 35%;

	dl {
		line-height: 40px;
	}

	dt {
		float: left;
		clear: left;
		width: 100%;
		padding: 5px;
		border-bottom: 1px solid @grayLighter;
		.font-size(@baseFontSize);
		text-align: left;

		&:hover,
		&:active {
			#gradient > .horizontal(#f7fafc, @highlightBlue, 40%);
		}
	}

	dd {
		float: right;
		padding-right: 5px;
		margin-top: -38px;
		#font > .alternative(14);
		text-align: right;
	}
}

.image-gallery {
	float: right;
	width: 60%;
}

/* =============================================================================
   Layout:  404 Error Page
   ========================================================================== */

.error-404 .hentry {
	.font-size(18);

	.entry-title {
		margin-bottom: @smallGutterWidth;
	}
}

.not-found-widgets {
	margin-top: @gutterWidth;

	.widget {
		float: left;
		width: 306px;
		margin: 0 @gutterWidth @smallGutterWidth 0;

		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}
}

/* =============================================================================
   Components:  Pagination
   ========================================================================== */

.pagination {
	margin: @gutterWidth 0;

	a, > span {
		display: inline-block;
		padding: 13px 14px 12px;
		margin-right: 2px;
		line-height: normal;
		background-color: @grayLighter;
		box-shadow: 0 2px 0 darken(@grayLighter, 15%);
		border-radius: 3px;
		color: darken(@gray, 5%);
		text-shadow: 0 1px 0 @white;
		.transition(all 150ms ease);
	}

	a:hover {
		background-color: @orangeLight;
		box-shadow: 0 2px 0 @orange;
		color: darken(@orangeDark, 30%);
		text-shadow: 0 1px 0 lighten(@orangeLight, 20%);
	}

	a:active {
		box-shadow:
			0 2px 0 @orange,
			inset 2px 2px 8px fade(@black, 30%);
	}

	.current {
		background-color: lighten(@grayDark, 10%);
		box-shadow: 0 2px 0 @black;
		color: @white;
		text-shadow: 0 -1px 0 @black;
	}
}

/* Prev and next post pagination */
.post-pagination a {
	max-width: 49%;

	&[rel="prev"] {
		float: left;
	}

	&[rel="next"] {
		float: right;
	}
}

/* =============================================================================
   Components:  Widgets
   ========================================================================== */

.widget {
	margin-bottom: @smallGutterWidth;
	.hyphens;
}

/**
 * Calendar
 */
#wp-calendar {
	th, td {
		.font-size(14);
		padding: 4px;
		text-align: center;

		.layout-3c-c &,
		.layout-3c-l &,
		.layout-3c-r & {
			padding: 2px;
		}
	}
}

/**
 * Related Posts widget
 */

/* Related Posts with thumbnails turned on */
.related-posts .with-thumbnails {
	.no-list-style();
	margin-left: 20px;

	#sidebar-after-singular &,
	#sidebar-after-single & {
		margin-left: 0;
	}

	.related-post {
		float: left;
		.square(110px);
		border: 1px solid darken(@grayLighter, 3%);
		margin: 0 @smallGutterWidth @smallGutterWidth 0;
		background: @white;
		border-radius: 3px;

		&:hover {
			background: @orangeLight;
			border-color: @orange;
			box-shadow: 0 2px 0 @orange;
			color: darken(@orangeDark, 30%);
			text-shadow: 0 1px 0 lighten(@orangeLight, 20%);
		}

		&:nth-of-type(5n) {
			margin-right: 0;
		}

		> a {
			display: block;
			overflow: hidden;
			.square(100%);
			padding-top: 4px;
			text-align: center;
			.hyphens;

			&:hover {
				color: darken(@orangeDark, 30%);
			}
		}

		img {
			box-shadow: none;
		}

		span {
			#font > .alternative(13);
		}
	}
}

/* =============================================================================
   Layout:  Comments
   ========================================================================== */

#comments {
	margin-top: @gutterWidth;
}

#comments-number {
	.highlight-box;
}

.comment-list,
.comment-list .children {
	.no-list-style();
}

.comment {
	border-bottom: 4px double @grayLighter;

	.comment-wrapper {
		padding: @smallGutterWidth;
	}

	// Comment meta
	.comment-meta {
		#font > .alternative(13, normal, 25px);
		color: @grayLight;

		a {
			color: @gray;

			&:hover {
				color: @linkColorHover;
			}
		}

		.comment-reply-link {
			font-weight: bold;
		}
	}

	.comment-author {
		display: block;
		#font > .alternative(16, bold, 25px);
		color: @gray;

		cite {
			font-style: normal;
		}
	}
}

/* Comment background colours */
.comment {
	.even {
		background-color: @white;
	}

	.odd {
		background-color: lighten(@highlightBackground, 2%);
	}

	.bypostauthor {
		background-color: @highlightBlue;
	}
}

/* Child comments */
.comment-list .children {
	margin-left: @gutterWidth;

	.comment {
		border-top: 1px solid @grayLighter;
		border-bottom: none;
	}

	// Border colors
	.depth-2 {
		border-left: 3px solid #04648d;
	}

	.depth-3 {
		border-left: 3px solid #ce3000;
	}

	.depth-4 {
		border-left: 3px solid darken(@green, 3%);
	}

	.depth-5 {
		border-left: 3px solid darken(@pink, 5%);
	}
}

/* =============================================================================
   Layout:  Forms
   ========================================================================== */

@import "less/forms.less";

/* =============================================================================
   Components:  Message boxes
   ========================================================================== */

.note,
.alert,
.warning,
.success,
.download,
.danger,
.error,
.info {
	padding: @smallGutterWidth;
	border: double @alertBorder;
	border-width: 4px 0;
	margin-bottom: @smallGutterWidth;
	text-shadow: 0 1px 0 fade(@white, 50%);
	background-color: @alertBackground;
	color: @alertText;
}

.warning,
.alert {
	background-color: @warningBackground;
	border-color: @warningBorder;
	color: @warningText;
}

.success,
.download {
	background-color: @successBackground;
	border-color: @successBorder;
	color: @successText;
}

.danger,
.error {
	background-color: @errorBackground;
	border-color: @errorBorder;
	color: @errorText;
}

.info {
	background-color: @infoBackground;
	border-color: @infoBorder;
	color: @infoText;
}

.box-blue {
	.blue-box(@smallGutterWidth);
}

.box-orange {
	.highlight-box(@smallGutterWidth);
}

/* =============================================================================
   Components:  Twitter share button
   ========================================================================== */

@tweetHeight: 20px; // Height of the button in the tweet.png
@tweetArrow: 5px; // Width of the arrows in tweet.png

.facebook-share-button,
.twitter-share-button {
	border: none;
}

/* Twitter button */
.twitter-share {
	display: inline-block;
	overflow: hidden;
	#font > .sans-serif(12, bold, 1.5);
	text-align: center;
}

.twitter-button {
	overflow: hidden;
	position: relative;
	float: left;
	.size(55px, @tweetHeight);
	background: url(images/tweet.png) no-repeat;
	text-indent: -999em;

	&:hover,
	&:focus {
		background-position: 0 -(@tweetHeight);
	}

	&:active {
		background-position: 0 -(@tweetHeight * 2);
	}
}

/* The Twitter button count */
.twitter-count {
	position: relative;
	float: left;
	min-width: @tweetHeight;
	padding: 0 4px;
	border: 1px solid #cee3f0;
	margin: 0 0 0 7px;
	border-radius: 2px;
	color: #2a7090;
	text-decoration: none;

	&:hover,
	&:focus,
	&:active {
		border: 1px solid #9dc6e1;
		background: #e8f3f9;
		color: #30566d;
		text-shadow: 0 1px 0 @white;
	}

	/* The count tooltip. Not displayed in IE < 8 */
	&:before {
		content: "";
		position: absolute;
		top: 50%;
		left: -(@tweetArrow);
		.size(@tweetArrow, 9px);
		margin: -4px 0 0;
		background: url(images/tweet.png) no-repeat 0 -(@tweetHeight * 3);
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		background-position: -(@tweetArrow) -(@tweetHeight * 3);
	}
}

/* Vertical Twitter button */
.twitter-button-size-vertical {
	position: relative;
	padding-top: 42px;

	.twitter-count {
		position: absolute;
		top: 0;
		left: 9%;
		margin: 0;
		.size(45px, 34px);
		#font > .sans-serif(16, bold, 34px);
		text-align: center;

		&:before {
			top: 100%;
			left: 48%;
			.size(9px, @tweetArrow);
			margin: 0 0 0 -4px;
			background-position: -(@tweetArrow * 2) -(@tweetHeight * 3);
		}

		&:hover:before,
		&:focus:before,
		&:active:before {
			background-position: -(@tweetArrow * 2) -(@tweetHeight * 3 + 5px);
		}
	}
}

/* =============================================================================
   Components:  Surprise!
   ========================================================================== */

.shake-it-baby{-webkit-animation:shake-it-baby 1s infinite;-moz-animation:shake-it-baby 1s infinite;animation:shake-it-baby 1s infinite;.transition(all 1s ease); }
@-webkit-keyframes shake-it-baby{0%{-webkit-transform:scale(1.1) skew(-2deg)}10%{background-color:#f00}20%{background-color:#f300ff}30%{background-color:#f3ffba}40%{background-color:#00f9ff}50%{-webkit-transform:scale(1.15) skew(1deg); background-color:#08ff00}60%{background-color:#fff700}70%{background-color:#ff2a00}80%{background-color:#60a63a}90%{background-color:#0500ff}100%{-webkit-transform:scale(1.0) skew(0);background-color:#fff}}
@-moz-keyframes shake-it-baby{0%{-moz-transform:scale(1.1) skew(-2deg)}10%{background-color:#f00}20%{background-color:#f300ff}30%{background-color:#f3ffba}40%{background-color:#00f9ff}50%{-moz-transform:scale(1.15) skew(1deg); background-color:#08ff00}60%{background-color:#fff700}70%{background-color:#ff2a00}80%{background-color:#60a63a}90%{background-color:#0500ff}100%{-moz-transform:scale(1.0) skew(0);background-color:#fff}}
@keyframes shake-it-baby{0%{transform:scale(1.1) skew(-2deg)}10%{background-color:#f00}20%{background-color:#f300ff}30%{background-color:#f3ffba}40%{background-color:#00f9ff}50%{transform:scale(1.15) skew(1deg); background-color:#08ff00}60%{background-color:#fff700}70%{background-color:#ff2a00}80%{background-color:#60a63a}90%{background-color:#0500ff}100%{transform:scale(1.0) skew(0);background-color:#fff}}

/* =============================================================================
   Misc:  Internet Explorer styles
   ========================================================================== */

.oldie {
	.main-navigation .sep,
	.sub-menu .sep {
		display: none !important;
	}

	.recent-post {
		margin-right: @gutterWidth / 2 - 5px;
		margin-left:  @gutterWidth / 2 - 5px;
	}

	.headline-list {
		margin-right: @gutterWidth / 2 - 5px;
		margin-left:  @gutterWidth / 2 - 5px;
	}
}

/**
 * IE7 fixes
 */
.ie7 .secondary-navigation {
	position: relative;
	z-index: 100;
}

/* =============================================================================
   Media Queries for smaller screens
   ========================================================================== */

@import "less/media-queries.less";

/* =============================================================================
   Print styles
   ========================================================================== */

@import "less/print.less";