From 2ecc5bacb8f078bf3a24ad6320408274d127f7e1 Mon Sep 17 00:00:00 2001
From: lancewillett <lancewillett@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Thu, 2 Aug 2012 19:12:11 +0000
Subject: [PATCH] Twenty Twelve: CSS and markup improvements for better child
 theme support, part 3. See #21379.

 * Add classes like `.site` and `.site-content` in addition to the set of IDs already present, making things much better for child themes to have more than one generic element like `nav` inside the content container.
 * Bump JS version after selector change.
 * Move `image-attachment` to `post_class()` output

More exhaustive notes in the ticket on each id and class change.


git-svn-id: http://core.svn.wordpress.org/trunk@21404 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 404.php             |   4 +-
 archive.php         |   4 +-
 author.php          |   4 +-
 comments.php        |   8 +--
 footer.php          |   4 +-
 full-width-page.php |   4 +-
 functions.php       |   4 +-
 header.php          |   6 +--
 homepage.php        |   4 +-
 image.php           |   8 +--
 index.php           |   4 +-
 js/theme.js         |   8 +--
 page.php            |   4 +-
 rtl.css             |  20 +++----
 search.php          |   4 +-
 single.php          |   8 +--
 style.css           | 128 ++++++++++++++++++++++----------------------
 17 files changed, 113 insertions(+), 113 deletions(-)

diff --git a/404.php b/404.php
index ad0d1c69b..8ce2ebd2c 100644
--- a/404.php
+++ b/404.php
@@ -9,7 +9,7 @@
 
 get_header(); ?>
 
-	<div id="primary">
+	<div id="primary" class="site-content">
 		<div id="content" role="main">
 
 			<article id="post-0" class="post error404 no-results not-found">
@@ -24,6 +24,6 @@ get_header(); ?>
 			</article><!-- #post-0 -->
 
 		</div><!-- #content -->
-	</div><!-- #primary -->
+	</div><!-- #primary .site-content -->
 
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/archive.php b/archive.php
index 626f8965b..3eda7da0b 100644
--- a/archive.php
+++ b/archive.php
@@ -14,7 +14,7 @@
 
 get_header(); ?>
 
-	<section id="primary">
+	<section id="primary" class="site-content">
 		<div id="content" role="main">
 
 		<?php if ( have_posts() ) : ?>
@@ -71,7 +71,7 @@ get_header(); ?>
 		<?php endif; ?>
 
 		</div><!-- #content -->
-	</section><!-- #primary -->
+	</section><!-- #primary .site-content -->
 
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/author.php b/author.php
index dab0f6e35..ad1a9369e 100644
--- a/author.php
+++ b/author.php
@@ -9,7 +9,7 @@
 
 get_header(); ?>
 
-	<section id="primary">
+	<section id="primary" class="site-content">
 		<div id="content" role="main">
 
 		<?php if ( have_posts() ) : ?>
@@ -64,7 +64,7 @@ get_header(); ?>
 		<?php endif; ?>
 
 		</div><!-- #content -->
-	</section><!-- #primary -->
+	</section><!-- #primary .site-content -->
 
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/comments.php b/comments.php
index 6ce8659a5..c314d8153 100644
--- a/comments.php
+++ b/comments.php
@@ -21,12 +21,12 @@
 	if ( post_password_required() )
 			return;
 ?>
-	<div id="comments">
+<div id="comments" class="comments-area">
 
 	<?php // You can start editing here -- including this comment! ?>
 
 	<?php if ( have_comments() ) : ?>
-		<h2 id="comments-title">
+		<h2 class="comments-title">
 			<?php
 				printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentytwelve' ),
 					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
@@ -38,7 +38,7 @@
 		</ol><!-- .commentlist -->
 
 		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
-		<nav id="comment-nav-below" role="navigation">
+		<nav id="comment-nav-below" class="navigation" role="navigation">
 			<h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1>
 			<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div>
 			<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentytwelve' ) ); ?></div>
@@ -53,4 +53,4 @@
 
 	<?php comment_form(); ?>
 
-</div><!-- #comments -->
\ No newline at end of file
+</div><!-- #comments .comments-area -->
\ No newline at end of file
diff --git a/footer.php b/footer.php
index 7314bc899..f53ae6aba 100644
--- a/footer.php
+++ b/footer.php
@@ -9,14 +9,14 @@
  * @since Twenty Twelve 1.0
  */
 ?>
-	</div><!-- #main -->
+	</div><!-- #main .wrapper -->
 	<footer id="colophon" role="contentinfo">
 		<div class="site-info">
 			<?php do_action( 'twentytwelve_credits' ); ?>
 			<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
 		</div><!-- .site-info -->
 	</footer><!-- #colophon -->
-</div><!-- #page -->
+</div><!-- #page .site -->
 
 <?php wp_footer(); ?>
 </body>
diff --git a/full-width-page.php b/full-width-page.php
index fbc7a781e..9217730e7 100644
--- a/full-width-page.php
+++ b/full-width-page.php
@@ -9,7 +9,7 @@
 
 get_header(); ?>
 
-	<div id="primary">
+	<div id="primary" class="site-content">
 		<div id="content" role="main">
 
 			<?php while ( have_posts() ) : the_post(); ?>
@@ -18,6 +18,6 @@ get_header(); ?>
 			<?php endwhile; // end of the loop. ?>
 
 		</div><!-- #content -->
-	</div><!-- #primary -->
+	</div><!-- #primary .site-content -->
 
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/functions.php b/functions.php
index a7c87e728..04fd34b54 100644
--- a/functions.php
+++ b/functions.php
@@ -104,7 +104,7 @@ function twentytwelve_scripts_styles() {
 	 * JavaScript for handling navigation menus and the resized
 	 * styles for small screen sizes.
 	 */
-	wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130320', true );
+	wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20120802', true );
 
 	/**
 	 * Load special font CSS file.
@@ -214,7 +214,7 @@ function twentytwelve_content_nav( $nav_id ) {
 	global $wp_query;
 
 	if ( $wp_query->max_num_pages > 1 ) : ?>
-		<nav id="<?php echo $nav_id; ?>" role="navigation">
+		<nav id="<?php echo $nav_id; ?>" class="navigation" role="navigation">
 			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
 			<div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
 			<div class="nav-next alignright"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>
diff --git a/header.php b/header.php
index 0e92eb289..6ead771fe 100644
--- a/header.php
+++ b/header.php
@@ -23,14 +23,14 @@
 </head>
 
 <body <?php body_class(); ?>>
-<div id="page" class="hfeed">
+<div id="page" class="hfeed site">
 	<header id="masthead" class="site-header" role="banner">
 		<hgroup>
 			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
 		</hgroup>
 
-		<nav class="site-navigation main-navigation" role="navigation">
+		<nav class="main-navigation" role="navigation">
 			<h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
 			<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
 			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
@@ -42,4 +42,4 @@
 		<?php endif; ?>
 	</header><!-- #masthead -->
 
-	<div id="main">
\ No newline at end of file
+	<div id="main" class="wrapper">
\ No newline at end of file
diff --git a/homepage.php b/homepage.php
index e310907a1..974909529 100644
--- a/homepage.php
+++ b/homepage.php
@@ -9,7 +9,7 @@
 
 get_header(); ?>
 
-	<div id="primary">
+	<div id="primary" class="site-content">
 		<div id="content" role="main">
 
 			<?php while ( have_posts() ) : the_post(); ?>
@@ -24,7 +24,7 @@ get_header(); ?>
 			<?php endwhile; // end of the loop. ?>
 
 		</div><!-- #content -->
-	</div><!-- #primary -->
+	</div><!-- #primary .site-content -->
 
 <?php get_sidebar( 'home' ); ?>
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/image.php b/image.php
index d8b82f40c..0b16c5378 100644
--- a/image.php
+++ b/image.php
@@ -9,12 +9,12 @@
 
 get_header(); ?>
 
-	<div id="primary" class="image-attachment">
+	<div id="primary" class="site-content">
 		<div id="content" role="main">
 
 		<?php while ( have_posts() ) : the_post(); ?>
 
-				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+				<article id="post-<?php the_ID(); ?>" <?php post_class( 'image-attachment' ); ?>>
 					<header class="entry-header">
 						<h1 class="entry-title"><?php the_title(); ?></h1>
 
@@ -35,7 +35,7 @@ get_header(); ?>
 							<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
 						</footer><!-- .entry-meta -->
 
-						<nav id="image-navigation" role="navigation">
+						<nav id="image-navigation" class="navigation" role="navigation">
 							<span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', 'twentytwelve' ) ); ?></span>
 							<span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', 'twentytwelve' ) ); ?></span>
 						</nav><!-- #image-navigation -->
@@ -97,6 +97,6 @@ if ( count( $attachments ) > 1 ) {
 			<?php endwhile; // end of the loop. ?>
 
 		</div><!-- #content -->
-	</div><!-- #primary -->
+	</div><!-- #primary .site-content -->
 
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/index.php b/index.php
index 603cbe9c3..52daad452 100644
--- a/index.php
+++ b/index.php
@@ -15,7 +15,7 @@
 
 get_header(); ?>
 
-	<div id="primary">
+	<div id="primary" class="site-content">
 		<div id="content" role="main">
 		<?php if ( have_posts() ) : ?>
 
@@ -59,7 +59,7 @@ get_header(); ?>
 		<?php endif; // end have_posts() check ?>
 
 		</div><!-- #content -->
-	</div><!-- #primary -->
+	</div><!-- #primary .site-content -->
 
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/js/theme.js b/js/theme.js
index c24569516..5ff38605a 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -10,8 +10,8 @@ jQuery( document ).ready( function( $ ) {
 		timeout = false;
 
 	$.fn.smallMenu = function() {
-		masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
-		masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
+		masthead.find( '.main-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
+		masthead.find( '.main-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
 
 		$( '.menu-toggle' ).off( 'click' ).click( function() {
 			masthead.find( '.menu' ).slideToggle();
@@ -32,8 +32,8 @@ jQuery( document ).ready( function( $ ) {
 			if ( ! largeWindow.matches ) {
 				$.fn.smallMenu();
 			} else {
-				masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
-				masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
+				masthead.find( '.main-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
+				masthead.find( '.main-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
 				masthead.find( '.menu' ).removeAttr( 'style' );
 			}
 		}, 200 );
diff --git a/page.php b/page.php
index d2d1e6938..59c786400 100644
--- a/page.php
+++ b/page.php
@@ -14,7 +14,7 @@
 
 get_header(); ?>
 
-	<div id="primary">
+	<div id="primary" class="site-content">
 		<div id="content" role="main">
 
 			<?php while ( have_posts() ) : the_post(); ?>
@@ -23,7 +23,7 @@ get_header(); ?>
 			<?php endwhile; // end of the loop. ?>
 
 		</div><!-- #content -->
-	</div><!-- #primary -->
+	</div><!-- #primary .site-content -->
 
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/rtl.css b/rtl.css
index 7fcad24a7..4aabe63ec 100644
--- a/rtl.css
+++ b/rtl.css
@@ -24,11 +24,11 @@ td {
 .alignleft {
 	float: left;
 }
-#content .gallery-columns-4 .gallery-item {
+.site-content .gallery-columns-4 .gallery-item {
 	padding-left: 2%;
 	padding-right: 0;
 }
-#content .gallery-columns-5 .gallery-item {
+.site-content .gallery-columns-5 .gallery-item {
 	padding-left: 2%;
 	padding-right: 0;
 }
@@ -117,20 +117,20 @@ article.format-link .entry-content {
 /* =Comment styling
 -------------------------------------------------------------- */
 
-#comments article header img {
+.comments-area article header img {
 	float: right;
 }
-#comments article header cite,
-#comments article header time {
+.comments-area article header cite,
+.comments-area article header time {
 	margin-right: 85px;
 	margin-right: 6.071428571rem;
 	margin-left: auto;
 }
-#comments article header h4 {
+.comments-area article header h4 {
 	left: 0;
 	right: auto;
 }
-#comments li.bypostauthor cite span {
+.comments-area li.bypostauthor cite span {
 	margin-right: 5px;
 	margin-right: 0.357142857rem;
 	margin-left: auto;
@@ -151,7 +151,7 @@ label ~ span.required {
 /* =Home page template styling
 -------------------------------------------------------------- */
 
-.page-template-homepage-php #secondary aside.widget_text img {
+.page-template-homepage-php .widget-area .widget_text img {
 	float: right;
 	margin: 8px 0 8px 24px;
 }
@@ -160,7 +160,7 @@ label ~ span.required {
 /* =Widget styling
 -------------------------------------------------------------- */
 
-.widget ul ul {
+.widget-area .widget ul ul {
 	margin-right: 12px;
 	margin-right: 0.857142857rem;
 	margin-left: auto;
@@ -187,7 +187,7 @@ label ~ span.required {
 
 /* Minimum width of 600 pixels. */
 @media screen and (min-width: 600px) {
-	.page-template-homepage-php #secondary aside.widget_text img {
+	.page-template-homepage-php .widget-area .widget_text img {
 		float: right;
 		margin: 8px 0 8px 24px;
 	}
diff --git a/search.php b/search.php
index bdf9cd2ec..ace9fa93a 100644
--- a/search.php
+++ b/search.php
@@ -9,7 +9,7 @@
 
 get_header(); ?>
 
-	<section id="primary">
+	<section id="primary" class="site-content">
 		<div id="content" role="main">
 
 		<?php if ( have_posts() ) : ?>
@@ -43,7 +43,7 @@ get_header(); ?>
 		<?php endif; ?>
 
 		</div><!-- #content -->
-	</section><!-- #primary -->
+	</section><!-- #primary .site-content -->
 
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/single.php b/single.php
index bcffc533b..8631a49af 100644
--- a/single.php
+++ b/single.php
@@ -9,18 +9,18 @@
 
 get_header(); ?>
 
-	<div id="primary">
+	<div id="primary" class="site-content">
 		<div id="content" role="main">
 
 			<?php while ( have_posts() ) : the_post(); ?>
 
 				<?php get_template_part( 'content', get_post_format() ); ?>
 
-				<nav id="nav-single">
+				<nav class="nav-single">
 					<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
 					<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span>', 'twentytwelve' ) . ' %title' ); ?></span>
 					<span class="nav-next"><?php next_post_link( '%link', '%title ' . __( '<span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></span>
-				</nav><!-- #nav-single -->
+				</nav><!-- .nav-single -->
 
 				<?php
 					// If comments are open or we have at least one comment, load up the comment template
@@ -31,7 +31,7 @@ get_header(); ?>
 			<?php endwhile; // end of the loop. ?>
 
 		</div><!-- #content -->
-	</div><!-- #primary -->
+	</div><!-- #primary .site-content -->
 
 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
\ No newline at end of file
diff --git a/style.css b/style.css
index 62e09cb18..2c2725faf 100644
--- a/style.css
+++ b/style.css
@@ -329,17 +329,17 @@ img.wp-smiley {
 	width: 100%;
 	height: auto;
 }
-#content .gallery-columns-4 .gallery-item {
+.site-content .gallery-columns-4 .gallery-item {
 	width: 23%;
 	padding-right: 2%;
 }
-#content .gallery-columns-5 .gallery-item {
+.site-content .gallery-columns-5 .gallery-item {
 	width: 18%;
 	padding-right: 2%;
 }
 
 /* Navigation */
-#content nav {
+.site-content nav {
 	clear: both;
 	line-height: 2;
 	overflow: hidden;
@@ -365,7 +365,7 @@ img.wp-smiley {
 	text-align: right;
 	width: 50%;
 }
-#nav-single + #comments,
+.nav-single + .comments-area,
 #comment-nav-above {
 	margin: 48px 0;
 	margin: 3.428571429rem 0;
@@ -418,19 +418,19 @@ a:hover {
 }
 
 /* Page structure */
-#page {
+.wrapper {
+	overflow: hidden;
+}
+.site {
 	padding: 0 24px;
 	padding: 0 1.714285714rem;
 	background-color: #fff;
 }
-#main {
-	overflow: hidden;
-}
-#primary {
+.site-content {
 	margin: 24px 0 0;
 	margin: 1.714285714rem 0 0;
 }
-#secondary {
+.widget-area {
 	margin: 24px 0 0;
 	margin: 1.714285714rem 0 0;
 }
@@ -592,24 +592,24 @@ section[role="banner"] {
 }
 
 /* Sidebar */
-#secondary aside {
+.widget-area .widget {
 	margin-bottom: 48px;
 	margin-bottom: 3.428571429rem;
 }
-#secondary aside h3 {
+.widget-area .widget h3 {
 	margin-bottom: 24px;
 	margin-bottom: 1.714285714rem;
 }
-#secondary aside p,
-#secondary aside li {
+.widget-area .widget p,
+.widget-area .widget li {
 	font-size: 13px;
 	font-size: 0.928571429rem;
 	line-height: 1.846153846;
 }
-#secondary aside a {
+.widget-area .widget a {
 	color: #777;
 }
-#secondary aside a:hover {
+.widget-area .widget a:hover {
 	color: #21759b;
 }
 
@@ -884,7 +884,7 @@ img.aligncenter {
 	border-top: 1px solid #ededed;
 	padding: 6px 10px 6px 0;
 }
-#content article {
+.site-content article {
 	padding-bottom: 24px;
 	padding-bottom: 1.714285714rem;
 	margin-bottom: 72px;
@@ -912,7 +912,7 @@ footer .edit-link {
 /* =Archives
 -------------------------------------------------------------- */
 
-.archive #content .archive-header,
+.archive .site-content .archive-header,
 .search .page-header {
 	margin-bottom: 48px;
 	margin-bottom: 3.428571429rem;
@@ -1044,7 +1044,7 @@ article.format-quote .entry-content blockquote {
 /* =Comments
 -------------------------------------------------------------- */
 
-#comments-title {
+.comments-title {
 	margin-bottom: 48px;
 	margin-bottom: 3.428571429rem;
 	font-size: 16px;
@@ -1052,55 +1052,55 @@ article.format-quote .entry-content blockquote {
 	line-height: 1.5;
 	font-weight: normal;
 }
-#comments article {
+.comments-area article {
 	margin: 24px 0;
 	margin: 1.714285714rem 0;
 	overflow: hidden;
 }
-#comments article header {
+.comments-area article header {
 	margin: 0 0 48px;
 	margin: 0 0 3.428571429rem;
 	overflow: hidden;
 	position: relative;
 }
-#comments article header img {
+.comments-area article header img {
 	float: left;
 	padding: 0;
 	line-height: 0;
 }
-#comments article header cite,
-#comments article header time {
+.comments-area article header cite,
+.comments-area article header time {
 	display: block;
 	margin-left: 85px;
 	margin-left: 6.071428571rem;
 }
-#comments article header cite {
+.comments-area article header cite {
 	font-style: normal;
 	font-size: 15px;
 	font-size: 1.071428571rem;
 	line-height: 1.6;
 }
-#comments article header time {
+.comments-area article header time {
 	line-height: 1.714285714;
 	text-decoration: none;
 	font-size: 12px;
 	font-size: 0.857142857rem;
 	color: #5e5e5e;
 }
-#comments article header a {
+.comments-area article header a {
 	text-decoration: none;
 	color: #5e5e5e;
 }
-#comments article header a:hover {
+.comments-area article header a:hover {
 	color: #21759b;
 }
-#comments article header cite a {
+.comments-area article header cite a {
 	color: #444;
 }
-#comments article header cite a:hover {
+.comments-area article header cite a:hover {
 	text-decoration: underline;
 }
-#comments article header h4 {
+.comments-area article header h4 {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -1120,12 +1120,12 @@ article.format-quote .entry-content blockquote {
 	border-radius: 3px;
 	border: 1px solid #007cbd;
 }
-#comments article p {
+.comments-area article p {
 	margin: 24px 0;
 	margin: 1.714285714rem 0;
 	line-height: 1.714285714;
 }
-#comments li.bypostauthor cite span {
+.comments-area li.bypostauthor cite span {
 	margin-left: 5px;
 	margin-left: 0.357142857rem;
 	padding: 2px 5px;
@@ -1219,11 +1219,11 @@ label ~ span.required {
 /* =Homepage template
 -------------------------------------------------------------- */
 
-.page-template-homepage-php #content article {
+.page-template-homepage-php .site-content article {
 	border: 0;
 	margin-bottom: 0;
 }
-.page-template-homepage-php #secondary {
+.page-template-homepage-php .widget-area {
 	clear: both;
 	float: none;
 	width: auto;
@@ -1231,7 +1231,7 @@ label ~ span.required {
 	padding-top: 1.714285714rem;
 	border-top: 1px solid #ededed;
 }
-.page-template-homepage-php #secondary aside li {
+.page-template-homepage-php .widget-area .widget li {
 	margin: 8px 0 0;
 	margin: 0.571428571rem 0 0;
 	font-size: 13px;
@@ -1241,13 +1241,13 @@ label ~ span.required {
 	list-style-type: square;
 	list-style-position: inside;
 }
-.page-template-homepage-php #secondary aside li a {
+.page-template-homepage-php .widget-area .widget li a {
 	color: #777;
 }
-.page-template-homepage-php #secondary aside li a:hover {
+.page-template-homepage-php .widget-area .widget li a:hover {
 	color: #21759b;
 }
-.page-template-homepage-php #secondary aside.widget_text img {
+.page-template-homepage-php .widget-area .widget_text img {
 	float: left;
 	margin: 8px 24px 8px 0;
 	margin: 0.571428571rem 1.714285714rem 0.571428571rem 0;
@@ -1257,7 +1257,7 @@ label ~ span.required {
 /* =Widgets
 -------------------------------------------------------------- */
 
-.widget ul ul {
+.widget-area .widget ul ul {
 	margin-left: 12px;
 	margin-left: 0.857142857rem;
 }
@@ -1312,23 +1312,23 @@ label ~ span.required {
 		float: right;
 		width: 80%;
 	}
-	#page {
+	.site {
 		margin: 0 auto;
 		max-width: 960px;
 		max-width: 68.571428571rem;
 		overflow: hidden;
 	}
-	#primary {
+	.site-content {
 		float: left;
 		width: 65.104166667%;
 	}
-	body.page-template-full-width-page-php #primary,
-	body.page-template-homepage-php #primary,
-	body.single-attachment #primary,
-	body.full-width #primary {
+	body.page-template-full-width-page-php .site-content,
+	body.page-template-homepage-php .site-content,
+	body.single-attachment .site-content,
+	body.full-width .site-content {
 		width: 100%;
 	}
-	#secondary {
+	.widget-area {
 		float: right;
 		width: 26.041666667%;
 	}
@@ -1352,7 +1352,7 @@ label ~ span.required {
 	#respond form textarea.blog-textarea {
 		width: 79.666666667%;
 	}
-	.page-template-homepage-php #content,
+	.page-template-homepage-php .site-content,
 	.page-template-homepage-php article {
 		overflow: hidden;
 	}
@@ -1364,13 +1364,13 @@ label ~ span.required {
 		float: right;
 		width: 47.916666667%;
 	}
-	.page-template-homepage-php #secondary aside {
+	.page-template-homepage-php .widget-area .widget {
 		float: left;
 		width: 51.875%;
 		margin-bottom: 24px;
 		margin-bottom: 1.714285714rem;
 	}
-	.page-template-homepage-php #secondary aside:nth-child(even) {
+	.page-template-homepage-php .widget-area .widget:nth-child(even) {
 		float: right;
 		width: 39.0625%;
 		margin: 0 0 24px;
@@ -1383,7 +1383,7 @@ label ~ span.required {
 	body {
 		background-color: #e6e6e6;
 	}
-	body #page {
+	body .site {
 		padding: 0 40px;
 		padding: 0 2.857142857rem;
 		margin-top: 48px;
@@ -1395,8 +1395,8 @@ label ~ span.required {
 	body.custom-background-empty {
 		background-color: #fff;
 	}
-	body.custom-background-empty #page,
-	body.custom-background-white #page {
+	body.custom-background-empty .site,
+	body.custom-background-white .site {
 		padding: 0;
 		margin-top: 0;
 		margin-bottom: 0;
@@ -1424,7 +1424,7 @@ label ~ span.required {
 		border-radius: 0;
 		box-shadow: none;
 	}
-	#page {
+	.site {
 		clear: both !important;
 		display: block !important;
 		float: none !important;
@@ -1448,23 +1448,23 @@ label ~ span.required {
 	img.header-image {
 		display: none;
 	}
-	nav.site-navigation {
+	nav.main-navigation {
 		display: none;
 	}
-	#main {
+	.wrapper {
 		border-top: none;
 		box-shadow: none;
 	}
-	#primary {
+	.site-content {
 		float: left;
 		margin: 0;
 		width: 100%;
 	}
-	#content {
+	.site-content {
 		margin: 0;
 		width: auto;
 	}
-	.singular #content {
+	.singular .site-content {
 		margin: 0;
 		width: 100%;
 	}
@@ -1474,13 +1474,13 @@ label ~ span.required {
 	.entry-meta .edit-link a {
 		display: none;
 	}
-	#content nav {
+	.site-content nav {
 		display: none;
 	}
 	.singular .entry-header,
 	.singular .entry-content,
 	.singular footer.entry-meta,
-	.singular #comments-title {
+	.singular .comments-title {
 		margin: 0;
 		width: 100%;
 	}
@@ -1508,7 +1508,7 @@ label ~ span.required {
 	#respond {
 		display: none;
 	}
-	#secondary {
+	.widget-area {
 		display: none;
 	}
 	#colophon {
@@ -1527,8 +1527,8 @@ label ~ span.required {
 		top: 2.2em;
 		width: 39px;
 	}
-	#comments article header cite,
-	#comments article header time {
+	.comments-area article header cite,
+	.comments-area article header time {
 		margin-left: 50px;
 		margin-left: 3.57142857rem;
 	}