/*
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 )
}

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


/* Site colors
Green for icon-font: #8DC919
Green for blockquote: #6F9B17
Orange: #FC9F00
Brown: #71502f

Body text color: #333

Headers: #333

Content links:

Link: #0066cc
Visited: #800080
Hover, active: #FC9F00

Entry title links:

Link, visited: #333
Hover, active: #FC9F00

Meta, comments links:

Link, visited: #555
Hover, active: #FC9F00

Sidebar and footer links:

Link: #555
Visited:  #555
Hover, active: #FC9F00
Current and parent categories: #FC9F00
*/


/**
 * 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
 * ----------------------------------------------------------------------------
 */

 
/* 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: 1.928571428rem;
	line-height: 1.2;
	font-weight: normal;
	color: #333;
}
.archive-title {
	color: #8DC919;
}
.widget-title {
	color: #FC9F00;
}

/* 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 a:link,
.nav-previous a:visited,
.nav-next a:link,
.nav-next a:visited {
	color: #FC9F00;
	text-decoration: none;
	font-weight: bold;
}
.nav-previous a:hover,
.nav-previous a:active,
.nav-next a:hover,
.nav-next a: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: 1.142857143rem;
	height: 16px;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	font-size: 1.142857143rem;
	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 0.142857143rem 0.214285714rem;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 9px/1 'Elusive-Icons';
	vertical-align: middle;
}
.icon-folder-open {
	width: 26px;
	width: 1.857142857rem;
	height: 26px;
	font-size: 26px;
	font-size: 1.857142857rem;
	line-height: 1;
	vertical-align: middle;
	padding-bottom: 1px;
	padding-bottom: 0.071428571rem;
}
ul.list-icon-ok,
ul.list-icon-file,
ul.list-icon-hand-right {
	list-style-type: none;
	text-indent: -16px;
}
ul.list-icon-ok li,
ul.list-icon-file li,
ul.list-icon-hand-right li {
	padding-bottom: 10px;
	padding-bottom: 0.714285714rem;
}
ul.list-icon-ok li:before {
	color: #8DC919;
	padding-right: 10px;
	padding-right: 0.714285714rem;
	content: "\e070"; /* icon-ok */
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'Elusive-Icons';
	vertical-align: text-bottom;
}
ul.list-icon-file li:before {
	color: #8DC919;
	padding-right: 10px;
	padding-right: 0.714285714rem;
	content: "\e0c1"; /* icon-file */
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'Elusive-Icons';
	vertical-align: text-bottom;
}
ul.list-icon-hand-right li:before {
	color: #8DC919;
	padding-right: 10px;
	padding-right: 0.714285714rem;
	content: "\e08c"; /* icon-hand-right */
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	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: #333;
}
body.custom-font-enabled {
	/* Improving font fallback in Linux */
	font-family: "Open Sans", Helvetica, Arial, "Nimbus Sans L", sans-serif;
}
a,
a:link {
	color: #0066cc;
}
a:visited {
	color: #800080;
}
a:hover,
a:active {
	color: #FC9F00;
}

/* 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: 1.714285714rem;
}

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

/* 3.4.3 Banner */


/* 3.5 Sidebar */
.widget-area .widget {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
	color: #555;
}
.widget-area .widget li {
	list-style: none;
	color: #555;
}
.widget-area aside.widget_categories ul {
	margin-bottom: 12px;
	margin-bottom: 0.857142857rem;
}
.widget-area aside.widget_categories ul li {
	font-size: 18px;
	font-size: 1.285714286rem;
	text-transform: uppercase;
}
.widget-area aside.widget_categories ul ul li {
	list-style: square;
	font-size: 13px;
	font-size: 0.928571429rem;
	font-weight: normal;
	margin-left: 10px;
	margin-left: 0.714285714rem;
	text-transform: none;
}
.widget-area .widget a,
.widget-area .widget a:link,
.widget-area .widget a:visited,
.widget-area .widget_categories a,
.widget-area .widget_categories a:link,
.widget-area .widget_categories a:visited,
.widget-area .textwidget a,
.widget-area .textwidget a:link,
.widget-area .textwidget a:visited {
	color: #555;
	text-decoration: none;
}
.widget-area .widget a:hover,
.widget-area .widget a:active {
	color: #FC9F00;
	text-decoration: underline;
}
.widget-area .widget .children li.cat-item a:hover,
.widget-area .widget .children li.page_item a:hover,
.widget-area .widget .current-cat-parent  a:link,
.widget-area .widget .current-cat-parent  a:visited,
.widget-area .widget .current_page_parent a:link,
.widget-area .widget .current_page_parent  a:visited {
	color: #FC9F00;
}
.widget-area .widget .current-cat .cat-item a:link,
.widget-area .widget .current-cat .cat-item a:visited,
.widget-area .widget .current-cat-parent .cat-item a:link,
.widget-area .widget .current-cat-parent .cat-item a:visited,
.widget-area .widget .current_page_item .page_item a:link,
.widget-area .widget .current_page_item .page_item a:visited,
.widget-area .widget .current_page_parent .page_item a:link,
.widget-area .widget .current_page_parent .page_item a:visited {
	color: #555;
}
.widget-area .widget .current-cat-parent .current-cat,
.widget-area .widget .current-cat-parent .current-cat  a:link,
.widget-area .widget .current-cat-parent .current-cat  a:visited,
.widget-area .widget .current_page_parent .current_page_item,
.widget-area .widget .current_page_parent .current_page_item  a:link,
.widget-area .widget .current_page_parent .current_page_item  a:visited,
.widget-area .widget .current-cat,
.widget-area .widget .current-cat  a:link,
.widget-area .widget .current-cat  a:visited,
.widget-area .widget .current_page_item,
.widget-area .widget .current_page_item  a:link,
.widget-area .widget .current_page_item  a:visited {
	color: #FC9F00;
}
/* 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;
}
.widget-area .widget li.current-cat ul.children,
.widget-area .widget 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;
}
.widget-area .widget li.current_page_item ul.children,
.widget-area .widget li.current_page_parent ul.children  {
	display: block;
}


/* 3.6 Footer */
footer[role="contentinfo"] {
	margin-top: 5px;
	margin-top: 0.357142857rem;
	padding: 12px 0 24px 0;
	padding: 0.857142857rem 0 1.714285714rem 0;
}
footer[role="contentinfo"] a {
	color: #333;
}
footer[role="contentinfo"] a:hover {
	color: #FC9F00;
}
footer#colophon {
  background: #fff;
  /* Old browsers */

  /* IE10 Consumer Preview */
  background-image: -ms-radial-gradient(center top, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
  /* Mozilla Firefox */
  background-image: -moz-radial-gradient(center top, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
  /* Opera */
  background-image: -o-radial-gradient(center top, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(radial, center top, 0, center top, 487, color-stop(0, #fbfbfb), color-stop(1, #ffffff));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-radial-gradient(center top, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: radial-gradient(circle closest-corner at center top, #fbfbfb 0%, #ffffff 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;
}
#footer-widgets .widget li,
.widget_recent_entries li {
	list-style-type: none;
	color: #555;
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
#footer-widgets a,
#footer-widgets a:link,
#footer-widgets a:visited {
	color: #555;
	text-decoration: none;
}
#footer-widgets a:hover,
#footer-widgets a:active {
	color: #FC9F00;
	text-decoration: underline;
}
/* 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: 0.714285714rem;
	font-weight: normal;
}
#site-info {
	clear: both; /* Because footer widgets */
	width: 100%;
	max-width: 780px;
	max-width: 55.714285714rem;
	float: left;
}
#site-info a:link,
#site-info a:visited {
	color: #777;
	text-decoration: none;
	padding: 0 2px 1px 2px;
	padding: 0 0.142857143rem 0.071428571rem 0.142857143rem;
	border: 1px solid #777;
}
#site-info a:hover {
	color: #fff;
	background-color: #b0b0b0;
}
#site-generator {
	width: 100%;
	max-width: 150px;
	max-width: 10.714285714rem;
	float: right;
	text-align: right;
}
#site-generator a:link,
#site-generator a:visited {
	color: #333;
	text-decoration: none;
}
#site-generator a:hover {
	color: #FC9F00;
	text-decoration: underline;
}


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

.entry-header .entry-title {
	font-size: 27px;
	font-size: 1.928571428rem;
	color: #333;
}
.entry-header .entry-title a {
	color: #333;
}
.entry-header .entry-title a:hover {
	color: #FC9F00;
}
.entry-header .comments-link {
	margin-top: 12px;
	margin-top: 0.857142857rem;
	color: #555;
}
.comments-link a,
.entry-meta a {
	color: #555;
}
.comments-link a:hover,
.entry-meta a:hover {
	color: #FC9F00;
}
.entry-header .entry-meta {
	color: #555;
	margin-top: 12px;
	margin-top: 0.857142857rem;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.entry-content h1,
.comment-content h1,
.entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
	color: #333;
	font-weight: normal;
}
.entry-content h1,
.comment-content h1 {
	font-size: 23px;
	font-size: 1.642857143rem;
	line-height: 1.5;
}
.entry-content h2,
.comment-content h2,
.mu_register h2 {
	font-size: 23px;
	font-size: 1.642857143rem;
	line-height: 1.5;
}
.entry-content h3,
.comment-content h3 {
	font-size: 18px;
	font-size: 1.285714286rem;
	line-height: 1.6;
	font-weight: bold;
}
.entry-content h4,
.comment-content h4 {
	font-size: 16px;
	font-size: 1.142857143rem;
	line-height: 1.846153846;
}
.entry-content h5,
.comment-content h5 {
	font-size: 14px;
	font-size: 1rem;
	line-height: 1.846153846;
}
.entry-content h6,
.comment-content h6 {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.entry-content a:visited,
.comment-content a:visited {
	color: #800080;
}
.entry-content a:hover,
.comment-content a:hover {
	color: #FC9F00;
}
.entry-content blockquote,
.comment-content blockquote {
	color: #6F9B17;
	font-size: 18px;
	font-size: 1.285714286rem;
	padding: 24px 0 24px 48px;
	padding: 1.714285714rem 0 1.714285714rem 3.428571429rem;
	font-style: normal;
}
/* Tip31 - Icon webfont support implementation and examples */
.entry-content blockquote p:first-child:before {
	color: #8DC919;
	padding-right: 10px;
	padding-right: 0.714285714rem;
	margin-left: -48px;
	margin-left: -3.428571429rem;
	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: 1.714285714rem;
	background-image: none!important;
}
.archive .site-content article,
.category .site-content article,
.single .site-content article,
.blog .site-content article {
  background: #fff;
  /* Old browsers */

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


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

.archive-header,
.page-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.archive-header a,
.archive-header a:link,
.archive-header a:visited {
	color: #0066cc;
	text-decoration: underline;
}
.archive-header a:hover,
.archive-header a:active {
	color: #FC9F00;
	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: #0066cc;
}
.comments-area article header a:hover {
	color: #FC9F00;
}
a.comment-reply-link,
a.comment-edit-link {
	color: #0066cc;
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #FC9F00;
}

/* 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;
	}
	.site-header h1 {
		font-weight: normal;
	}
	.site-header h1 a,
	.site-header h2 a {
		color: #333;
	}
	.site-header h1 a:hover,
	.site-header h2 a:hover {
		color: #FC9F00;
	}
	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-top: 1px solid #bbb;
		border-bottom: 1px solid #bbb;
	}
	.main-navigation ul.nav-menu  {
		text-align: left;
	}
	.main-navigation ul.nav-menu ul.sub-menu {
		text-align: left;
	}
	.widget-area {
		width: 30.5%;
	}
	
	/* Tip11 - Three footer widget areas */
	#footer-widgets {
		width: 100%;
		border-top: none;
	}
	#footer-widgets.three .widget {
		float: left;
		margin-right: 3.7%;
		width: 30.85%;
		clear: none;
	}
	#footer-widgets.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: 1.714285714rem;
		padding-top: 12px;
		padding-top: 0.857142857rem;
	}
	/* 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,
	header#masthead h2 {
		position: absolute;
		color: #fff;
		text-shadow: 0 0 10px #fff;
	}
	header#masthead h1 {
		top: 100px;
		right: -7px;
		background: #f3f3f3;
		padding: 16px 16px 16px 24px;
		padding: 1.142857143rem 1.142857143rem 1.142857143rem 1.714285714rem;
		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);
	}
	header#masthead h2 {
		top: 170px;
		right: -7px;
		background: #333;
		padding: 5px 5px 5px 10px;
		padding: 0.357142857rem 0.357142857rem 0.357142857rem 0.714285714rem;
		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: 0.357142857rem 0;
	background-color: #ff0000;
}

/* 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: 1.142857143rem;
	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 1.285714286rem 0;
}
#links-main li.linkcat {
	margin: 25px 0 0 0;
	margin: 1.785714286rem 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: 2.142857143rem;
	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 */