Index: sidebar.php
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- sidebar.php	(revision 4463)
+++ sidebar.php	(revision )
@@ -1,6 +1,6 @@
 <div class="secondary-content">
 	<ul>
-		<li>
+		<li class="widget">
 			<h3><?php esc_html_e( 'Resources', 'wptv' ); ?></h3>
 
 			<ul>
@@ -8,4 +8,4 @@
 			</ul>
 		</li>
 	<ul/>
-</div><!-- .secondary_content -->
\ No newline at end of file
+</div><!-- .secondary_content -->
Index: style.css
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- style.css	(revision 4463)
+++ style.css	(revision )
@@ -242,7 +242,6 @@
 
 #header {
 	margin-top: 10px;
-	height: 57px;
 }
 
 #header h1 {
@@ -251,10 +250,19 @@
 }
 
 #header .sleeve {
-	width: 942px;
+	max-width: 942px;
 	margin: 0 auto;
 }
 
+.menu-toggle {
+	display: none;
+	margin: 0 auto;
+}
+
+#menu {
+	clear: both;
+}
+
 #menu ul {
 	float: right;
 	height: 57px;;
@@ -286,11 +294,6 @@
 	color: #000 !important;
 }
 
-#searchform {
-	float: right;
-	margin-left: 15px;
-}
-
 #searchform #searchbox,
 #searchform input#s {
 	box-sizing: content-box;
@@ -322,6 +325,8 @@
 	box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 }
 
+/* Forms */
+
 input[type=submit], button, .button {
 	text-decoration: none;
 	-moz-border-radius: 5px;
@@ -396,6 +401,8 @@
 	);
 }
 
+/* Intro */
+
 .intro {
 	font-size: 30px;
 	height: 64px;
@@ -1464,11 +1471,6 @@
 	display: none;
 }
 
-#content {
-	width: 630px;
-	float: left;
-}
-
 #content .post {
 	margin-bottom: 20px;
 	clear: both;
@@ -1551,7 +1553,7 @@
 }
 
 #commentform textarea {
-	width: 600px;
+	width: 96%;
 	height: 100px;
 	margin-bottom: 5px;
 }
@@ -1767,20 +1769,16 @@
 }
 
 .container {
-	width: 940px;
+	max-width: 940px;
 	margin: auto;
 }
 
 .primary-content {
-	float: left;
-	width: 700px;
 	margin: 0;
 }
 
 .secondary-content {
-	float: right;
-	width: 170px;
-	margin: 0 0 50px 0;
+	margin: 0 30px;
 }
 
 .tag-count {
@@ -1849,10 +1847,6 @@
 
 /* Menu */
 
-#menu {
-	margin-right: 5px;
-}
-
 #menu li {
 	font-size: 14px;
 }
@@ -1895,7 +1889,7 @@
 }
 
 .page-title {
-	width: 940px;
+	max-width: 940px;
 	margin: auto;
 }
 
@@ -1989,7 +1983,7 @@
 .wptv-hero {
 	clear: both;
 
-	margin: 10px auto 30px auto;
+	margin: 20px auto 30px auto;
 	padding: 30px 0 10px 0;
 
 	background: #F0F0F0;
@@ -1998,14 +1992,10 @@
 .wptv-hero .main-video {
 	background: #2f2f2f;
 	clear: both;
-
-	float: left;
-	width: 575px;
 }
 
 .wptv-hero .main-video .video-player {
 	width: 100% !important;
-	height: 323px !important;
 	margin: 0 !important;
 }
 
@@ -2022,7 +2012,7 @@
 }
 
 .wptv-hero .main-video .video-player .videopress-title,
-.wptv-hero .main-video .video-player .videopress-watemark {
+.wptv-hero .main-video .video-player .videopress-watermark {
 	display: none !important;
 }
 
@@ -2062,11 +2052,6 @@
 	display: none;
 }
 
-.wptv-hero .secondary-videos {
-	float: right;
-	width: 345px;
-}
-
 .wptv-hero .secondary-videos h3 {
 	font-size: 18px;
 	font-weight: bold;
@@ -2079,11 +2064,11 @@
 .wptv-hero .secondary-videos li {
 	font-size: 13px;
 
-	min-height: 75px;
+	min-height: 78px;
 	position: relative;
 
 	margin: 0 auto 23px 0;
-	padding: 0 0 0 142px;
+	padding: 0 0 0 142px;	/* todo pushes title outside container at 450px wide */
 }
 
 .wptv-hero .secondary-videos .video-thumbnail img {
@@ -2106,15 +2091,12 @@
 }
 
 .video-list li {
-	float: left;
-	min-height: 220px;
 	margin-bottom: 20px;
 }
 
 .video-list li .video-thumbnail {
 	display: block;
 	width: 100%;
-	height: 100px;
 
 	margin: 0 0 8px 0;
 
@@ -2127,15 +2109,6 @@
 	min-height: 100px;
 }
 
-.video-list.four-col {
-	width: 860px;
-}
-
-.video-list.four-col li {
-	width: 160px;
-	margin-right: 20px;
-}
-
 .secondary-content .video-list .video-title {
 	font-size: 13px;
 	display: block;
@@ -2170,27 +2143,11 @@
 	position: relative;
 }
 
-.archive.video-list .video-thumbnail {
-	position: absolute;
-	top: 0;
-	left: 0;
-
-	width: 220px;
-	height: 120px;
-
-	margin: 0 20px 0 0;
-}
-
 .archive.video-list .video-title {
 	font-size: 16px;
 	margin: 4px 0 8px;
 }
 
-.archive.video-list .video-description {
-	display: block;
-	padding-left: 240px;
-}
-
 .archive.video-list .video-date {
 	color: #aaa;
 	display: block;
@@ -2247,15 +2204,6 @@
 }
 
 /* Video Player and Placeholder */
-
-.single .video-player {
-	float: left;
-	width: 940px !important;
-	height: 529px !important;
-
-	overflow: hidden;
-}
-
 .videopress-placeholder,
 .video-player object {
 	width: 100% !important;
@@ -2396,16 +2344,6 @@
 	margin: 3px 0 20px 0;
 }
 
-.category-wordcamptv .secondary-content {
-	float: left;
-	width: 170px;
-}
-
-.category-wordcamptv .primary-content {
-	float: right;
-	margin: 0;
-}
-
 /* WordCamp Individual Page
 ============================================================= */
 
@@ -2443,7 +2381,7 @@
 ============================================================= */
 
 .error404 .primary-content {
-	width: 940px;
+	max-width: 940px;
 }
 
 .error404 h2 {
@@ -2482,7 +2420,7 @@
 	clear: both;
 	color: #888;
 	height: 3.5em;
-	margin: 10px 0 15px 0;
+	margin: 10px 0 0 0;
 	padding: 10px 0;
 }
 
@@ -2542,4 +2480,310 @@
 
 #footer img.videopress {
 	display: inline;
+}
+
+/* Media Queries
+============================================================= */
+
+@media screen and ( min-width:941px ) {
+	.wptv-hero .main-video {
+		width: 575px;
+	}
+
+	.wptv-hero .main-video .video-player {
+		height: 323px !important;
+	}
+
+	.primary-content {
+		float: left;
+		max-width: 700px;
+	}
+
+	.secondary-content {
+		float: right;
+		width: 170px;
+		margin: 0 0 50px 0;
+	}
+
+	.container {
+		overflow: hidden;
+	}
+
+	.category-wordcamptv .secondary-content {
+		float: left;
+		width: 170px;
+	}
+
+	.category-wordcamptv .primary-content {
+		float: right;
+		margin: 0;
+	}
+
+	.video-list.four-col {
+		width: 860px;
+	}
+
+	.wptv-hero .main-video {
+		float: left;
+	}
+
+	.wptv-hero .secondary-videos {
+		float: right;
+		width: 345px;
+	}
+
+	.single .video-player {
+		float: left;
+		width: 940px !important;
+		height: 529px !important;
+		overflow: hidden;
+	}
+}
+
+@media screen and ( max-width:940px ) {
+	#header {
+		padding: 0 30px;
+	}
+
+	.category .page-title,
+	.desc {
+		float: none;
+	}
+
+	.wptv-hero .main-video .video-player {
+		/*height: auto !important;*/
+
+		/* todo when video starts playing, it dissappears */
+		/* todo watermark is creating empty space */
+	}
+
+	.primary-content {
+		padding: 0 30px;
+	}
+
+	.wptv-hero {
+		padding: 30px 30px 10px;
+	}
+
+	.wptv-hero .secondary-videos {
+		margin-top: 20px;
+	}
+
+	.wptv-hero .secondary-videos li {
+		display: inline-block;
+		width: 150px;
+		vertical-align: top;
+		padding-right: 20px;
+	}
+
+	.secondary-content {
+		clear: both;
+	}
+
+	.secondary-content li.widget {
+		width: 45%;
+		display: inline-block;
+		vertical-align: top;
+		margin-right: -6px;	/* http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
+		padding-right: 30px;
+	}
+
+		.secondary-content li.widget:nth-child( even ) {
+			margin-right: 0;
+			padding-right: 0;
+		}
+}
+
+@media screen and ( min-width:921px ) {
+	#footer {
+		clear: both;
+		height: 3.5em;
+
+	}
+
+	.automattic {
+		width: 380px;
+		float: right;
+		text-align: right;
+	}
+}
+
+@media screen and ( max-width:920px ) {
+	.menu-footer-container {
+		float: none;
+		text-align: center;
+	}
+
+	.automattic {
+		width: 100%;
+		clear: both;
+		text-align: center;
+	}
+}
+
+@media screen and ( max-width: 700px ) {
+	.wptv-hero .secondary-videos li {
+		display: block;
+		width: auto;
+		padding-right: 0;
+	}
+}
+
+@media screen and ( min-width:621px ) {
+	.menu-footer-container li {
+		display: inline-block;
+	}
+}
+
+@media screen and ( max-width:620px ) {
+	.dot {
+		display: none;
+	}
+}
+
+@media screen and ( min-width:620px ) and ( max-width:940px ) {
+
+}
+
+@media screen and ( min-width:601px ) {
+	#header {
+		height: 57px;
+	}
+}
+
+@media screen and ( max-width:600px ) {
+	/* Menu */
+	.menu-toggle {
+		display: block;
+	}
+
+	.menu-primary-container {
+		display: none;
+		margin-top: 20px;
+	}
+
+	#menu.toggled .menu-primary-container {
+		display: block;
+	}
+
+	#menu {
+		text-align: center;
+		padding: 10px 0;
+	}
+
+	#menu ul {
+		float: none;
+		height: auto;
+		margin-left: -30px;	/* offset margins on #header, to achieve 100% viewport width */
+		margin-right: -30px;
+		background-color: #2698CF;
+		text-align: center;
+	}
+
+	#menu li {
+		float: none;
+		margin-left: 0;
+		padding: 10px 0 8px;
+		line-height: 2em;
+		border-bottom: 1px solid white;
+	}
+
+	#menu li:last-child {
+		border-bottom: none;
+	}
+
+	#menu li a,
+	#menu li a:link,
+	#menu li a:visited {
+		color: white;
+	}
+
+	#menu .current-menu-item > a,
+	#menu .current-menu-ancestor > a,
+	#menu .current_page_item > a,
+	#menu .current_page_ancestor > a {
+		color: white !important;
+	}
+
+	/* Footer */
+	.menu-footer-container {
+		float: none;
+	}
+
+	#menu-footer {
+		text-align: center;
+	}
+
+	#menu-footer li {
+		display: block;
+	}
+}
+
+@media screen and ( min-width:621px ) {
+	.archive.video-list .video-thumbnail {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		width: 220px;
+		height: 120px;
+
+		margin: 0 20px 0 0;
+	}
+
+	.archive.video-list .video-description {
+		display: block;
+		padding-left: 240px;
+	}
+}
+
+@media screen and ( min-width:501px ) {
+	#searchform {
+		float: right;
+		margin-left: 15px;
+	}
+}
+
+@media screen and ( max-width: 500px ) {
+	.secondary-content li.widget {
+		width: auto;
+		display: block;
+		margin-right: 0;
+		padding-right: 0;
+		text-align: center;
+	}
+
+	#header h1 {
+		float: none;
+	}
+
+	#searchform {
+		width: 100%;
+		float: none;
+		margin-left: auto;
+	}
+
+	#searchform #searchbox,
+	#searchform input#s {
+		width: 71%;
+	}
+}
+
+@media screen and ( max-width:400px ) {
+
+	.entry .contact-form textarea {
+		width: 98%;
+	}
+}
+
+@media screen and ( min-width:395px ) {
+	.video-list li {
+		float: left;
+		min-height: 220px;
+	}
+
+	.video-list.four-col li {
+		width: 160px;
+		margin-right: 20px;
+	}
 }
Index: header.php
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- header.php	(revision 4463)
+++ header.php	(revision )
@@ -14,6 +14,7 @@
 
 <head>
 	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title><?php wp_title( '|', true, 'right' ); ?></title>
 
 	<link rel="alternate" type="application/rss+xml" title="<?php esc_attr_e( 'WordPress.tv RSS Feed', 'wptv' ); ?>" href="https://wordpress.tv/feed/" />
@@ -40,6 +41,7 @@
 			</form>
 
 			<div id="menu">
+				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu', 'wptv' ); ?></button>
 				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
 			</div>
 
Index: anon-upload-template.php
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- anon-upload-template.php	(revision 4463)
+++ anon-upload-template.php	(revision )
@@ -29,17 +29,6 @@
 		padding-top: 10px;
 	}
 
-	.page-template-anon-upload-template-php #footer {
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		left: 0;
-	}
-
-	.video-upload {
-		padding-bottom: 70px;
-	}
-
 	.noscript-show p {
 		margin: 0 !important;
 	}
@@ -51,6 +40,7 @@
 
 	.video-upload-left {
 		max-width: 550px;
+		margin: 15px;
 	}
 
 	.video-upload-right {
@@ -59,6 +49,14 @@
 		margin: -25px 0 25px;
 	}
 
+	@media screen and ( max-width:920px ) {
+		.video-upload-right {
+			float: none;
+			width: auto;
+			margin: 0 10px;
+		}
+	}
+
 	.video-upload p {
 		margin: 16px 0;
 		overflow: auto;
@@ -77,6 +75,13 @@
 		font-weight: bold;
 	}
 
+	@media screen and ( max-width: 500px ) {
+		.video-upload-left p > label,
+		.video-upload-left div > label {
+			width: 100%;
+		}
+	}
+
 	.video-upload-left p > label.wptv-video-wordcamp-cb {
 		display: inline;
 		float: none;
@@ -96,12 +101,11 @@
 	    color: #333;
 	    background-color: #fff;
 	    padding: 4px;
-	    width: 329px;
+	    width: 96%;
 		max-width: 329px;
 	}
 
 	.video-upload-left ul.cats-checkboxes {
-		margin-left: 130px;
 		height: 150px;
 		overflow: auto;
 	}