/*
Theme Name: 2012-XTended
Theme URI: http://mtomas.com/1/twentytwelve-xtended-wordpress-theme-for-learning-and-site-building
Author: Tomas Mackevicius
Author URI: http://mtomas.com
Description: 2012-XTended child theme encompass all the best features of the default WordPress themes in one place, plus more usability and code improvements! It features elegant mobile-first HTML5 ready structure of Twenty Twelve, custom per-post headers from Twenty Ten, three footer widgets from Twenty Eleven, icon webfont support from Twenty Thirteen and Schema.org microdata format support. It's all there, you have everything in one neat package. 2012-XTended can be used as a learning tool or your own little web development "framework". With its unique "Coding Tips system" 2012-XTended helps to understand how to extend parent themes and build your own child themes, hacking them the way you want it. You get the best coding examples from default WordPress themes and the best hacks from the child theme.
Template: twentytwelve
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve
*/


/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     14;
$line-height: 24;

We use rem for: font-size, margin, padding, width, max-width when using in px.

---------- Examples

	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1.142857143rem; (16 / $rembase)
	line-height: 1.5; ($line-height / 16)


---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.714285714rem 0; ( 24 / $rembase )
}
*/


/**
 * Table of Contents:
 *
 *  1.0 - Reset
 *    1.1 - Clearing floats
 *  2.0 - Repeatable Patterns
 *    2.1 - Small headers
 *    2.2 - Shared Post Format styling
 *    2.3 - Form fields, general styles first
 *    2.4 - Reset non-text input types
 *    2.5 - Buttons
 *    2.6 - Responsive images
 *    2.7 - Images
 *    2.8 - Navigation
 *    2.9 - Author profiles
+*    2.10 - Elusive-icons webfont
 *  3.0 - Site Structure
 *    3.1 - Body, links, basics
 *    3.2 - Assistive text
 *    3.3 - Page structure
 *    3.4 - Header
 *      3.4.1 - Site Header
 *      3.4.2 - Navigation
 *      3.4.3 - Banner
 *    3.5 - Sidebar
 *    3.6 - Footer
 *  4.0 - Main content and comment content
 *  5.0 - Archives
 *  6.0 - Single image attachment view
 *  7.0 - Aside post format
 *  8.0 - Post formats
 *    8.1 - Image posts
 *    8.2 - Link posts
 *    8.3 - Quote posts
 *    8.4 - Status posts
 *  9.0 - Comments
 *    9.1 - Comment form
+*    9.2 - Custom styles for Schema.org implementation
 * 10.0 - Front page template
 * 11.0 - Widgets
 * 12.0 - Plugins
 * 13.0 - Media queries
 *   13.1 - Minimum width of 600 pixels
 *   13.2 - Minimum width of 960 pixels
 * 14.0 - Print
 *   14.1 - Comments
+* 15.0 - Custom Child Theme styles
 * ----------------------------------------------------------------------------
 */


/* Sizes in rem units */

@size-rem-1px: 0.071428571rem;
@size-rem-2px: 0.142857143rem;
@size-rem-3px: 0.214285714rem;
@size-rem-4px: 0.285714286rem;
@size-rem-5px: 0.357142857rem;
@size-rem-6px: 0.428571429rem;
@size-rem-7px: 0.5rem;
@size-rem-8px: 0.571428571rem;
@size-rem-9px: 0.642857143rem;
@size-rem-10px: 0.714285714rem;
@size-rem-12px: 0.857142857rem;
@size-rem-13px: 0.928571429rem;
@size-rem-14px: 1rem;
@size-rem-16px: 1.142857143rem;
@size-rem-18px: 1.285714286rem;
@size-rem-23px: 1.642857143rem;
@size-rem-24px: 1.714285714rem;
@size-rem-25px: 1.785714286rem;
@size-rem-26px: 1.857142857rem;
@size-rem-27px: 1.928571428rem;
@size-rem-30px: 2.142857143rem;
@size-rem-36px: 2.571428571rem;
@size-rem-38px: 2.714285714rem;
@size-rem-48px: 3.428571429rem;

/* Site colors */

@site-title-color: #333; /* dark grey */
@site-title-hover-color: #fc9f00; /* orange */

@body-text-color: #333; /* dark grey */
@body-link-color: #0066cc; /* standard blue */
@body-link-visited-color: #800080; /* standard purple */
@body-link-hover-color: #fc9f00; /* orange */

@entry-title-color: #333; /* dark grey */
@entry-title-hover-color: #fc9f00; /* orange */
@entry-meta-color: #555; /* grey */
@entry-meta-hover-color: #fc9f00; /* orange */
@article-background-color: #fff; /* white */
@article-gradient-color-1: #fbfbfb; /* very light grey */
@article-gradient-color-2: #fff; /* white */
@nav-previous-next-color: #fc9f00; /* orange */
@nav-previous-next-hover-color: #fc9f00; /* orange */

@archive-title-color: #8dc919; /* green */
@headers-color: #333; /* dark grey */
@blockquote-color: #6f9b17; /* dark green */
@icon-color: #8dc919; /* green */

@widget-title-color: #fc9f00; /* orange */
@widget-area-color: #555; /* grey */
@sidebar-nav-color: #555; /* grey */
@sidebar-nav-hover-color: #fc9f00; /* orange */
@sidebar-nav-current-cat: #fc9f00; /* orange (current and parent categories or pages) */

@footer-background-color: #fff; /* white */
@footer-gradient-color-1: #fbfbfb; /* very light grey */
@footer-gradient-color-2: #fff; /* white */
@footer-link-color: #333; /* dark grey */
@footer-link-hover-color: #fc9f00; /* orange */
@footer-widgets-color: #555; /* dark grey */
@footer-widgets-hover-color: #fc9f00; /* orange */

/* 1.0 Reset
-------------------------------------------------------------- */

/* 1.1 Clearing floats */


/* 2.0 Repeatable patterns
-------------------------------------------------------------- */

/* 2.1 Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
	font-size: 27px;
	font-size: @size-rem-27px;
	line-height: 1.2;
	font-weight: normal;
	color: @entry-title-color;
}
.archive-title {
	color: @archive-title-color;
}
.widget-title {
	color: @widget-title-color;
}

/* 2.2 Shared Post Format styling */

/* 2.3 Form fields, general styles first */
/* Tip40 - Make focused input fields glow - from Twitter Bootstrap */
textarea:focus,
input:focus {
	border-color: rgba(82, 168, 236, 0.8);
	outline: 0;
	outline: thin dotted \9;
	/* IE6-9 */

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

/* 2.4 Reset non-text input types */

/* 2.5 Buttons */

/* 2.6 Responsive images */

/* 2.7 Images */
/* Tip23 - Custom headers for posts and pages */
.header-image,
.site-header img.wp-post-image {
	/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
	/* Uncomment following two lines to disable border and shadow on main header: */
	/* border-radius: 0;
	box-shadow: none; */
}
/*  Tip33 - .no-border CSS class - use it in case you need to display an image without any borders or shadows, include .no-border class for the desired post image */
#content .no-border {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* 2.8 Navigation */
/*  Tip34 - Uncomment next code line to disable previous article - next article navigation below the content of a post */
.nav-single {
	/* display: none; */
}
.nav-previous,
.nav-next {
	a {
		&:link,
		&:visited {
			color: @nav-previous-next-color;
			text-decoration: none;
			font-weight: bold;
		}
		&:hover,
		&:active {
			text-decoration: underline;
		}
	}
}

/* 2.9 Author profiles */

/* 2.10 Elusive-icons webfont */
/* Tip31 - Icon webfont support implementation and examples */
/* All icon webfont related styles (except blockquote - search for Tip31) are in this section so it would be easy to change them in case of migration to another icon webfont */
.icon-webfont {
	display: inline-block;
	width: 16px;
	width: @size-rem-16px;
	height: 16px;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	font-size: @size-rem-16px;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	vertical-align: middle;
}
a:hover .icon-webfont,
a:active .icon-webfont {
	text-decoration: none;
}


/* Tip03 - Mark main navigation menu items, containing children with special css class */
/* Main navigation menu items with drop-down children will be marked by a distinct icon (caret down) via style.css */
/* http://stackoverflow.com/questions/8448978/wordpress-how-do-i-know-if-a-menu-item-has-children */
ul li.dropdown > a:after {
	content: "\e11a"; /* icon-caret-down */
	padding: 0 0 2px 3px;
	padding: 0 0 @size-rem-2px @size-rem-3px;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 9px/1 'Elusive-Icons';
	vertical-align: middle;
}
.icon-folder-open {
	width: 26px;
	width: @size-rem-26px;
	height: 26px;
	font-size: 26px;
	font-size: @size-rem-26px;
	line-height: 1;
	vertical-align: middle;
	padding-bottom: 1px;
	padding-bottom: @size-rem-1px;
}
ul {
	&.list-icon-ok,
	&.list-icon-file,
	&.list-icon-hand-right {
		list-style-type: none;
		text-indent: -16px;
		li {
			padding-bottom: 10px;
			padding-bottom: @size-rem-10px;
			&:before {
				color: @icon-color;
				padding-right: 10px;
				padding-right: @size-rem-10px;
				display: inline-block;
				-webkit-font-smoothing: antialiased;
			}
		}
	}
}
ul.list-icon-ok li:before {
	content: "\e070"; /* icon-ok */
	font: normal 20px/1 'Elusive-Icons';
	vertical-align: text-bottom;
}
ul.list-icon-file li:before {
	content: "\e0c1"; /* icon-file */
	font: normal 20px/1 'Elusive-Icons';
	vertical-align: text-bottom;
}
ul.list-icon-hand-right li:before {
	content: "\e08c"; /* icon-hand-right */
	font: normal 20px/1 'Elusive-Icons';
	vertical-align: bottom;
}

/* Remaining css for webfont icons is plugged-in via functions.php */


/* 3.0 Site structure
-------------------------------------------------------------- */

/* 3.1 Body, links, basics */
/*  Tip35 - Improve font rendering and fallback in Linux - http://www.onedesigns.com/tutorials/font-families-for-cross-compatible-typography */
body {
	/* Improving font rendering in Linux, in case default Open Sans font is disabled */
	font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
	color: @body-text-color;
	.custom-font-enabled {
		/* Improving font fallback in Linux */
		font-family: "Open Sans", Helvetica, Arial, "Nimbus Sans L", sans-serif;
	}
}
a {
	color: @body-link-color;
	&:link {
		color: @body-link-color;
	}
	&:visited {
		color: @body-link-visited-color;
	}
	&:hover,
	&:active {
		color: @body-link-hover-color;
	}
}

/* 3.2 Assistive text */

/* 3.3 Page structure */


/* 3.4 Header */

/* 3.4.1 Site Header */
.site-header {
	padding: 0;
}
.header-image,
.site-header img.wp-post-image {
	margin-top: 24px;
	margin-top: @size-rem-24px;
}

/* 3.4.2 Navigation Menu */
.main-navigation {
	ul li ul li,
	ul li ul li ul li {
		border-bottom: 1px solid #ccc;
		&:last-child {
			border-bottom: 0;
		}
	}
}

/* 3.4.3 Banner */


/* 3.5 Sidebar */

.widget-area {
	.widget {
		margin-bottom: 24px;
		margin-bottom: @size-rem-24px;
		color: @widget-area-color;
		li {
			list-style: none;
			color: @widget-area-color;
		}
	}
	aside.widget_categories {
		ul {
			margin-bottom: 12px;
			margin-bottom: @size-rem-12px;
			li {
				font-size: 18px;
				font-size: @size-rem-18px;
				text-transform: uppercase;
			}
			ul li {
				list-style: square;
				font-size: 13px;
				font-size: @size-rem-13px;
				font-weight: normal;
				margin-left: 10px;
				margin-left: @size-rem-10px;
				text-transform: none;
			}
		}
	}
	.widget a,
	.widget a:link,
	.widget a:visited,
	.widget_categories a,
	.widget_categories a:link,
	.widget_categories a:visited,
	.textwidget a,
	.textwidget a:link,
	.textwidget a:visited {
		color: @sidebar-nav-color;
		text-decoration: none;
	}
	.widget a:hover,
	.widget a:active {
		color: @sidebar-nav-hover-color;
		text-decoration: underline;
	}
	.widget {
		.children li.cat-item a:hover,
		.children li.page_item a:hover,
		.current-cat-parent  a:link,
		.current-cat-parent  a:visited,
		.current_page_parent a:link,
		.current_page_parent  a:visited {
			color: @sidebar-nav-current-cat;
		}
		.current-cat .cat-item a:link,
		.current-cat .cat-item a:visited,
		.current-cat-parent .cat-item a:link,
		.current-cat-parent .cat-item a:visited,
		.current_page_item .page_item a:link,
		.current_page_item .page_item a:visited,
		.current_page_parent .page_item a:link,
		.current_page_parent .page_item a:visited {
			color: @sidebar-nav-color;
		}
		.current-cat-parent .current-cat,
		.current-cat-parent .current-cat  a:link,
		.current-cat-parent .current-cat  a:visited,
		.current_page_parent .current_page_item,
		.current_page_parent .current_page_item  a:link,
		.current_page_parent .current_page_item  a:visited,
		.current-cat,
		.current-cat  a:link,
		.current-cat  a:visited,
		.current_page_item,
		.current_page_item  a:link,
		.current_page_item  a:visited {
			color: @sidebar-nav-current-cat;
		}
	}
}
/* Tip36 - Show children items of sidebar category/page menu for selected parent category/page only */
/* Show children items of sidebar category menu for selected parent category only. Delete if you don't need this */
.widget-area .widget {
	li.cat-item ul.children {
		display: none;
	}
	li.current-cat ul.children,
	li.current-cat-parent ul.children  {
		display: block;
	}
}
/* Show children items of sidebar page menu for selected parent page only. Delete if you don't need this */
.widget-area .widget {
	li.page_item ul.children  {
		display: none;
	}
	li.current_page_item ul.children,
	li.current_page_parent ul.children  {
		display: block;
	}
}


/* 3.6 Footer */
footer[role="contentinfo"] {
	margin-top: 5px;
	margin-top: @size-rem-5px;
	padding: 12px 0 24px 0;
	padding: @size-rem-12px 0 @size-rem-24px 0;
	a {
		color: @footer-link-color;
		&:hover {
			color: @footer-link-hover-color;
		}
	}
}
footer#colophon {
  background: @footer-background-color;
  /* Old browsers */

  /* IE10 Consumer Preview */
  background-image: -ms-radial-gradient(center top, circle closest-corner, @footer-gradient-color-1 0%, @footer-gradient-color-2 100%);
  /* Mozilla Firefox */
  background-image: -moz-radial-gradient(center top, circle closest-corner, @footer-gradient-color-1 0%, @footer-gradient-color-2 100%);
  /* Opera */
  background-image: -o-radial-gradient(center top, circle closest-corner, @footer-gradient-color-1 0%, @footer-gradient-color-2 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(radial, center top, 0, center top, 487, color-stop(0, @footer-gradient-color-1), color-stop(1, @footer-gradient-color-2));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-radial-gradient(center top, circle closest-corner, @footer-gradient-color-1 0%, @footer-gradient-color-2 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: radial-gradient(circle closest-corner at center top, @footer-gradient-color-1 0%, @footer-gradient-color-2 100%);
}

/* Tip11 - Three footer widget areas. Additional styles at 13.0 Media queries */
footer .widget-area .textwidget li {
	margin-left: 0;
}
.template-front-page #footer-widgets {
	padding-top: 0;
}
#footer-widgets {
	width: 100%;
	border-top: none;
	a,
	a:link,
	a:visited {
		color: @footer-widgets-color;
		text-decoration: none;
	}
	a:hover,
	a:active {
		color: @footer-widgets-hover-color;
		text-decoration: underline;
	}
	.widget li,
	.widget_recent_entries li {
		list-style-type: none;
		color: @footer-widgets-color;
		margin-bottom: 24px;
		margin-bottom: @size-rem-24px;
	}
}
/* Tip32 - Discreet link to WordPress Admin panel in the footer */
#site-info, #site-generator {
	font-family: Verdana, Helvetica, "Nimbus Sans L", sans-serif;
	font-size: 10px;
	font-size: @size-rem-10px;
	font-weight: normal;
}
#site-info {
	clear: both; /* Because footer widgets */
	width: 100%;
	max-width: 780px;
	max-width: 55.714285714rem;
	float: left;
	a:link,
	a:visited {
		color: #777;
		text-decoration: none;
		padding: 0 2px 1px 2px;
		padding: 0 @size-rem-2px @size-rem-1px @size-rem-2px;
		border: 1px solid #777;
	}
	a:hover {
		color: #fff;
		background-color: #b0b0b0;
	}
}
#site-generator {
	width: 100%;
	max-width: 150px;
	max-width: 10.714285714rem;
	float: right;
	text-align: right;
	a:link,
	a:visited {
		color: @footer-link-color;
		text-decoration: none;
	}
	a:hover {
		color: @footer-link-hover-color;
		text-decoration: underline;
	}
}


/* 4.0 Main content and comment content
-------------------------------------------------------------- */

.entry-header .entry-title {
	font-size: 27px;
	font-size: @size-rem-27px;
	color: @entry-title-color;
	a {
		color: @entry-title-color;
		&:hover {
			color: @entry-title-hover-color;
		}
	}
}
.entry-header .comments-link {
	margin-top: 12px;
	margin-top: @size-rem-12px;
	color: @entry-meta-color;
}
.comments-link ,
.entry-meta {
	a {
		color: @entry-meta-color;
		&:hover {
			color: @entry-meta-hover-color;
		}
	}
}
.entry-header .entry-meta {
	color: @entry-meta-color;
	margin-top: 12px;
	margin-top: @size-rem-12px;
	font-size: 13px;
	font-size: @size-rem-13px;
	line-height: 1.846153846;
}
.entry-content,
.comment-content {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: @headers-color;
		font-weight: normal;
	}
	h1 {
		font-size: 23px;
		font-size: @size-rem-23px;
		line-height: 1.5;
	}
	h2 {
		font-size: 23px;
		font-size: @size-rem-23px;
		line-height: 1.5;
	}
	h3 {
		font-size: 18px;
		font-size: @size-rem-18px;
		line-height: 1.6;
		font-weight: bold;
	}
	h4 {
		font-size: 16px;
		font-size: @size-rem-16px;
		line-height: 1.846153846;
	}
	h5 {
		font-size: 14px;
		font-size: @size-rem-14px;
		line-height: 1.846153846;
	}
	h6 {
		font-size: 13px;
		font-size: @size-rem-13px;
		line-height: 1.846153846;
	}
}
.mu_register h2 {
	font-size: 23px;
	font-size: @size-rem-23px;
	line-height: 1.5;
}
.entry-content,
.comment-content {
	a {
		&:visited {
			color: @body-link-visited-color;
		}
		&:hover {
			color: @body-link-hover-color;
		}
	}
	blockquote {
		color: @blockquote-color;
		font-size: 18px;
		font-size: @size-rem-18px;
		padding: 24px 0 24px 48px;
		padding: @size-rem-24px 0 @size-rem-24px @size-rem-48px;
		font-style: normal;
	}
}
/* Tip31 - Icon webfont support implementation and examples */
.entry-content blockquote p:first-child:before {
	color: @icon-color;
	padding-right: 10px;
	padding-right: @size-rem-10px;
	margin-left: -48px;
	margin-left: -@size-rem-48px;
	content: "\e054"; /* icon-quotes */
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 36px/1 'Elusive-Icons';
	vertical-align: bottom;
}
.entry-content {
	text-align: justify;
}
/* Tip37 - Remove content bottom border for a single page and for the last post in archive view listing */
.site-content article:last-child,
.page .site-content article {
	border-bottom: 0px;
	margin-bottom: 24px;
	margin-bottom: @size-rem-24px;
	background-image: none!important;
}
.archive .site-content article,
.category .site-content article,
.single .site-content article,
.blog .site-content article {
  background: @article-background-color;
  /* Old browsers */

  /* IE10 Consumer Preview */
  background-image: -ms-radial-gradient(center bottom, circle closest-corner, @article-gradient-color-1 0%, @article-gradient-color-2 100%);
  /* Mozilla Firefox */
  background-image: -moz-radial-gradient(center bottom, circle closest-corner, @article-gradient-color-1 0%, @article-gradient-color-2 100%);
  /* Opera */
  background-image: -o-radial-gradient(center bottom, circle closest-corner, @article-gradient-color-1 0%, @article-gradient-color-2 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 487, color-stop(0, @article-gradient-color-1), color-stop(1, @article-gradient-color-2));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-radial-gradient(center bottom, circle closest-corner, @article-gradient-color-1 0%, @article-gradient-color-2 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: radial-gradient(circle closest-corner at center bottom, @article-gradient-color-1 0%, @article-gradient-color-2 100%);
}
.single-author .entry-meta .by-author {
	display: inline;
}


/* 5.0 Archives
-------------------------------------------------------------- */

.archive-header,
.page-header {
	margin-bottom: 24px;
	margin-bottom: @size-rem-24px;
}
.archive-header {
	a,
	a:link,
	a:visited {
		color: @entry-title-color;
		text-decoration: underline;
	}
	a:hover,
	a:active {
		color: @entry-title-hover-color;
		text-decoration: underline;
	}
}


/* 6.0 Single image attachment view
-------------------------------------------------------------- */


/* 7.0 Aside post format
-------------------------------------------------------------- */


/* 8.0 Post formats
-------------------------------------------------------------- */

/* 8.1 Image posts */

/* 8.2 Link posts */

/* 8.3 Quote posts */

/* 8.4 Status posts */


/* 9.0 Comments
-------------------------------------------------------------- */

.comments-title {
	font-weight: bold;
}
.comments-area article header {
	a {
		text-decoration: none;
		color: @body-link-color;
	}
	a:hover {
		color: @body-link-hover-color;
	}
}
a.comment-reply-link,
a.comment-edit-link {
	color: @body-link-color;
	&:hover {
		color: @body-link-hover-color;
	}
}

/* 9.1 Comment form */
#respond form p.form-allowed-tags {
	display: none;
}

/* 9.2 Custom styles for Schema.org implementation */
/* Tip10 - Custom functions and styles for the Schema.org microdata format support implementation */
p.comment-author-name, 
.widget-area .widget p.comment-author-name { 
	display: inline-block; 
	margin-bottom: 0;
}


/* 10.0 Front page template
-------------------------------------------------------------- */


/* 11.0 Widgets
-------------------------------------------------------------- */


/* 12.0 Plugins
----------------------------------------------- */


/* 13.0 Media queries
-------------------------------------------------------------- */

/* 13.1 Minimum width of 600 pixels */
@media screen and (min-width: 600px) { /* If you change this value, you should also change this min-width in the parent theme's style.css */
	.site-header {
		text-align: center;
		h1 {
			font-weight: normal;
		}
		h1 a,
		h2 a {
			color: @site-title-color;
		}
		h1 a:hover,
		h2 a:hover {
			color: @site-title-hover-color;
		}
	}
	.main-navigation {
		ul.nav-menu,
		div.nav-menu > ul {
			border-top: 1px solid #bbb;
			border-bottom: 1px solid #bbb;
		}
		ul.nav-menu  {
			text-align: left;
			ul.sub-menu {
				text-align: left;
			}
		}
	}
	.widget-area {
		width: 30.5%;
	}
	/* Tip11 - Three footer widget areas */
	#footer-widgets {
		width: 100%;
		border-top: none;
		&.three .widget {
			float: left;
			margin-right: 3.7%;
			width: 30.85%;
			clear: none;
		}
		&.three .widget + .widget + .widget {
			margin-right: 0;
		}
	}
}

/* 13.2 Minimum width of 960 pixels */
@media screen and (min-width: 960px) {
	body .site {
		margin-top: 24px;
		margin-top: @size-rem-24px;
		padding-top: 12px;
		padding-top: @size-rem-12px;
	}
	/* Tip39 - Make site title and site description float */
	/* Delete related css rules below if you don't like this feature and want to have default Twenty Twelve style site title back */
	header#masthead .site-branding {
		position: relative;
	}
	header#masthead {
		h1,
		h2 {
			position: absolute;
			color: #fff;
			text-shadow: 0 0 10px #fff;
		}
		h1 {
			top: 100px;
			right: -7px;
			background: #f3f3f3;
			padding: 16px 16px 16px 24px;
			padding: @size-rem-16px @size-rem-16px @size-rem-16px @size-rem-24px;
			border: #bbb solid 1px;
			-webkit-border-top-left-radius: 38px;
			-webkit-border-bottom-left-radius: 38px;
			-moz-border-radius-topleft: 38px;
			-moz-border-radius-bottomleft: 38px;
			border-top-left-radius: 38px;
			border-bottom-left-radius: 38px;
			box-shadow:         -3px 4px 5px rgba(50, 50, 50, 0.75);
			-webkit-box-shadow: -3px 4px 5px rgba(50, 50, 50, 0.75);
			-moz-box-shadow:    -3px 4px 5px rgba(50, 50, 50, 0.75);
		}
		h2 {
			top: 170px;
			right: -7px;
			background: #333;
			padding: 5px 5px 5px 10px;
			padding: @size-rem-5px @size-rem-5px @size-rem-5px @size-rem-10px;
			border: #333 solid 1px;
			-webkit-border-top-left-radius: 20px;
			-webkit-border-bottom-left-radius: 20px;
			-moz-border-radius-topleft: 20x;
			-moz-border-radius-bottomleft: 20px;
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
			box-shadow:         -2px 2px 3px rgba(50, 50, 50, 0.75);
			-webkit-box-shadow: -2px 2px 3px rgba(50, 50, 50, 0.75);
			-moz-box-shadow:    -2px 2px 3px rgba(50, 50, 50, 0.75);
		}
	}
}


/* 14.0 Print
----------------------------------------------- */

/* 14.1 Comments */


/* 15.0 Custom Child Theme styles
-------------------------------------------------------------- */

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

/* Header */
/* Tip22 - Reminder to enable JavaScript */
#no-javascript {
	font-weight: bold;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	padding: @size-rem-5px 0;
	background-color: #ff0000; /* red */
}

/* Main content */
/* Tip38 - Mark the links that will open in a new window with special icon, usually these are the links to external resources */
.site-content {
	a[target=_blank] {
		/* display: inline-block; */
		padding-right: 16px;
		padding-right: @size-rem-16px;
		background: transparent center right no-repeat;
		background-image: url('images/icon-external-link.png');
		}
}
/* Tip30 - Style the Links page (blogroll). Works together with Links page template  */
#links-main {
	list-style: none;
	margin: 0 0 18px 0;
	margin: 0 0 @size-rem-18px 0;
	li.linkcat {
		margin: 25px 0 0 0;
		margin: @size-rem-25px 0 0 0;
	}
}
/* Tip09 - Properly resize videos, inserted with oembed. Goes together with css_oembed_filter function in functions.php */
/* By Marty Kokes: http://wordpress.org/support/topic/properly-resizing-videos-possible-code-addition */
/* You can change the width of the wrapper (it's set to 960px in the example) to be whatever fixed size you'd like your videos
   to max out at or just leave out the wrapper entirely to keep it fluid */
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	padding-top: @size-rem-30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-wrapper {
	width: 960px;
	width: 68.571428571rem;
	max-width: 100%;
}

/* Sidebar */

/* Footer */