From ecd7f64a68c5748791a79ee32c79c0031c07c77e Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Wed, 17 Aug 2016 09:28:25 -0400
Subject: [PATCH] [WIP] Added react-router to About page, others are currently
 broken

---
 src/components/carousel/carousel.jsx          |  14 +-
 src/components/navbar/navbar.jsx              |  12 +-
 src/components/sectionitem/sectionitem.jsx    |  33 ++++
 src/components/sectionitem/sectionitem.scss   |  42 +++++
 .../tab-sections/about-sections/videos.jsx    |  68 -------
 src/components/tabnav/tabnav.jsx              |  68 +++----
 src/routes.json                               |   4 +-
 src/template.html                             |  41 ++--
 src/views/about/about.jsx                     |  95 ++++++----
 src/views/about/about.scss                    |  51 +----
 .../about-sections => views/about}/faq.jsx    |  13 +-
 .../about-sections => views/about}/info.jsx   |  11 +-
 .../about-sections => views/about}/press.jsx  |  11 +-
 src/views/about/videos.jsx                    |  32 ++++
 src/views/index/index.jsx                     | 176 +++++++++++-------
 src/views/index/index.scss                    | 133 +++++++++++++
 static/js/lib/content-nav.js                  |  55 ------
 static/js/lib/responsiveslides.min.js         |   8 -
 static/js/lib/simple-expand.min.js            |   4 -
 static/style/content.css                      |   6 +-
 static/style/site.css                         |   7 +-
 static/style/style.css                        | 160 ----------------
 22 files changed, 480 insertions(+), 564 deletions(-)
 create mode 100644 src/components/sectionitem/sectionitem.jsx
 create mode 100644 src/components/sectionitem/sectionitem.scss
 delete mode 100644 src/components/tab-sections/about-sections/videos.jsx
 rename src/{components/tab-sections/about-sections => views/about}/faq.jsx (83%)
 rename src/{components/tab-sections/about-sections => views/about}/info.jsx (98%)
 rename src/{components/tab-sections/about-sections => views/about}/press.jsx (90%)
 create mode 100644 src/views/about/videos.jsx
 create mode 100644 src/views/index/index.scss
 delete mode 100755 static/js/lib/content-nav.js
 delete mode 100755 static/js/lib/responsiveslides.min.js
 delete mode 100755 static/js/lib/simple-expand.min.js

diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx
index e69539f..a3eab72 100644
--- a/src/components/carousel/carousel.jsx
+++ b/src/components/carousel/carousel.jsx
@@ -10,7 +10,11 @@ require('./carousel.scss');
  */
 var Carousel = React.createClass({
     type: 'Carousel',
+    propTypes: {
+      items: React.PropTypes.array
+    },
     render: function () {
+      /* TODO: allow override of default settings */
         var settings = {
           dots: true,
           arrows: false,
@@ -21,16 +25,10 @@ var Carousel = React.createClass({
           speed: 500,
           cssEase: 'linear'
         };
-        var images= [
-          {id:'s1', url:'images/slide1.png'},
-          {id:'s2', url:'images/slide2.png'},
-          {id:'s3', url:'images/slide3.png'},
-          {id:'s4', url:'images/slide4.png'},
-          {id:'s5', url:'images/slide5.png'},
-          ];
+
         return (
           <Slider {... settings}>
-              {images.map((item, i) => { return (<div key={item.id} ><img src={item.url} /></div>) })}
+              {this.props.items.map((item) => { return (<div key={item.id} ><img src={item.url} /></div>) })}
           </Slider>
         );
     }
diff --git a/src/components/navbar/navbar.jsx b/src/components/navbar/navbar.jsx
index a35bf0c..a8f2b69 100755
--- a/src/components/navbar/navbar.jsx
+++ b/src/components/navbar/navbar.jsx
@@ -14,33 +14,33 @@ var NavBar = React.createClass({
 			<div id="header">
 		    <a href="/">
 		      <div id="header-logo-wrapper">
-		        <img src="images/scratchjrlogo.png" id="header-logo" alt="ScratchJr Logo" />
+		        <img src="/images/scratchjrlogo.png" id="header-logo" alt="ScratchJr Logo" />
 		      </div>
 		    </a>
 		    <div id="header-nav">
 		      <div className="header-nav-item-wrapper">
-		        <a href="about">
+		        <a href="/about">
 		          <div className={this.generateHeaderClasses("about")}>
 		            About
 		          </div>
 		        </a>
 		      </div>
 		      <div className="header-nav-item-wrapper">
-		        <a href="learn">
+		        <a href="/learn">
 		          <div className={this.generateHeaderClasses("learn")}>
 		            Learn
 		          </div>
 		        </a>
 		      </div>
 		      <div className="header-nav-item-wrapper">
-		        <a href="teach">
+		        <a href="/teach">
 		          <div className={this.generateHeaderClasses("teach")}>
 		            Teach
 		          </div>
 		        </a>
 		      </div>
 		      <div className="header-nav-item-wrapper">
-		        <a href="donate">
+		        <a href="/donate">
 		          <div className={this.generateHeaderClasses("donate")}>
 		            Donate
 		          </div>
@@ -52,4 +52,4 @@ var NavBar = React.createClass({
 	}
 });
 
-module.exports = NavBar;
\ No newline at end of file
+module.exports = NavBar;
diff --git a/src/components/sectionitem/sectionitem.jsx b/src/components/sectionitem/sectionitem.jsx
new file mode 100644
index 0000000..c54f9f6
--- /dev/null
+++ b/src/components/sectionitem/sectionitem.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {Link} from 'react-router'
+require('./sectionitem.scss');
+
+var SectionItem = React.createClass({
+    type: 'SectionItem',
+    propTypes: {
+        title: React.PropTypes.string.isRequired,
+        format: React.PropTypes.oneOf(['full', 'half']).isRequired,
+        thumbnail: React.PropTypes.object.isRequired,
+        description: React.PropTypes.string.isRequired,
+        linkURL: React.PropTypes.string,
+        linkText: React.PropTypes.string
+    },
+    render: function() {
+
+        return (
+          <div className={"content-section-" + this.props.format + "-item"}>
+            <div className="content-section-item-title">
+              {this.props.title}
+            </div>
+            <div className="content-section-item-thumbnail">
+              {this.props.thumbnail}
+            </div>
+            <div className="content-section-item-description">
+              {this.props.description}
+            </div>
+          </div>
+        );
+    }
+});
+
+module.exports = SectionItem;
diff --git a/src/components/sectionitem/sectionitem.scss b/src/components/sectionitem/sectionitem.scss
new file mode 100644
index 0000000..b3b53c7
--- /dev/null
+++ b/src/components/sectionitem/sectionitem.scss
@@ -0,0 +1,42 @@
+.content-section-half-item {
+	display: inline-block;
+	padding-bottom: 30px;
+	clear: both;
+	width: 45%;
+	text-align: left;
+	vertical-align: top;
+}
+
+.content-section-items-container:after {
+	display:inline-block;
+	width:100%;
+	content:'';
+	height: 0;
+}
+
+.content-section-item-title {
+	padding-bottom: 10px;
+	font-weight: 900;
+	color: #2898cd;
+	width: 60%;
+	display: inline-block;
+}
+
+.content-section-item-thumbnail {
+	width:100%;
+}
+
+.content-section-item-thumbnail-image {
+	width: 100%;
+	border-radius: 20px;
+}
+
+.content-section-item-description {
+	width: 100%;
+	color: #808080;
+	font-size: 14px;
+	line-height: 22px;
+	padding-bottom: 10px;
+	padding-top: 10px;
+	display: inline-block;
+}
diff --git a/src/components/tab-sections/about-sections/videos.jsx b/src/components/tab-sections/about-sections/videos.jsx
deleted file mode 100644
index fde5e7b..0000000
--- a/src/components/tab-sections/about-sections/videos.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-
-var classNames = require('classnames');
-
-var VideosSection = React.createClass({
-  render: function() {
-    return (
-      <div 
-        className={classNames(
-          "content-section", 
-          {"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
-        )}
-        id="videos-section">
-        <div className="content-section-title">
-         Videos
-        </div>
-        <div className="content-section-description">
-          Webinars for educators and parents
-        </div>
-        <div className="content-section-items-container">
-          <div className="content-section-half-item">
-            <div className="content-section-item-title">
-              Pre-Launch Webinar (March 2014)
-            </div>
-            <div className="content-section-item-thumbnail">
-              <iframe width="342" height="192" src="http://www.youtube.com/embed/owAA_IjdVUM?rel=0" frameborder="0" allowfullscreen></iframe>
-            </div>
-            <div className="content-section-item-description">
-              Project leaders Marina Bers and Mitch Resnick
-              demonstrate how to create a simple project, discuss ScratchJr features,
-              and share favorite stories from beta-testing the app in classrooms.
-            </div>
-          </div>
-          <div className="content-section-half-item">
-            <div className="content-section-item-title">
-              Post-Launch Webinar (August 2014)
-            </div>
-            <div className="content-section-item-thumbnail">
-              <iframe width="342" height="192" src="http://www.youtube.com/embed/mZAawCvDlBM?rel=0" frameborder="0" allowfullscreen></iframe>
-            </div>
-            <div className="content-section-item-description">
-              Project leaders Marina Bers and Mitch Resnick
-              respond to questions about the initial release of ScratchJr, and discuss
-              future directions for the programming environment.
-            </div>
-          </div>
-          <div className="content-section-half-item">
-            <div className="content-section-item-title">
-              EdWeb Webinar
-            </div>
-            <div className="content-section-item-thumbnail">
-              <iframe src="//player.vimeo.com/video/108504313?title=0&amp;byline=0&amp;portrait=0"
-                width="342" height="214" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-              <p><a href="http://vimeo.com/108504313">EdWeb Webinar</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
-            </div>
-            <div className="content-section-item-description">
-              Research Coordinator Amanda Strawhacker explores pedagogy
-              around young children's programming languages, and presents affordances of digital playgrounds.
-              She discusses why programming is an important skill for early education.
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-});
-
-module.exports = VideosSection;
\ No newline at end of file
diff --git a/src/components/tabnav/tabnav.jsx b/src/components/tabnav/tabnav.jsx
index f43c2dc..ff71e7a 100644
--- a/src/components/tabnav/tabnav.jsx
+++ b/src/components/tabnav/tabnav.jsx
@@ -1,49 +1,31 @@
 import React from 'react';
-
-var tabLocations = ['left', 'middle', 'right']; // corresponds to css class: "content-nav-item-" + tabLocation
+import {Link} from 'react-router'
 
 var TabNav = React.createClass({
-  getInitialState: function() {
-    return {
-      activeTabIndex: this.props.initialActiveTabIndex
-    };
-  },
-  componentDidMount: function() {
-    // called once when component initially mounts
-  },
-  getTabLocation: function(index, numChildren) { // determine location of index in order to set css properly
-    if (index == 0) {
-      return tabLocations[0];
-    } else if (index == numChildren - 1) {
-      return tabLocations[2];
-    } else {
-      return tabLocations[1];
+    type: 'TabNav',
+    propTypes: {
+        items: React.PropTypes.array
+    },
+    render: function() {
+
+        return (
+            <div id="content-nav">
+                {this.props.items.map((tab, index) => {
+                    return (
+                        <Link to={tab.url} activeClassName="content-nav-item-selected" key={tab.section}>
+                            <div className="content-nav-item" id={tab.section + "-section-nav"}>
+                                <div className={tab.section + "-icon content-nav-item-icon"}></div>
+                                <div className="content-nav-item-description">
+                                    {tab.text}
+                                </div>
+                            </div>
+                        </Link>
+                    );
+
+                })}
+            </div>
+        );
     }
-  },
-  switchTabs: function(newActiveTabIndex) {
-    this.setState({activeTabIndex: newActiveTabIndex}); // switch tab, will cause newly selected tab to highlight
-    this.props.switchSection(newActiveTabIndex); // parent will switch the section accordingly
-  },
-	render: function() {
-    var childrenWithProps = React.Children.map(
-      this.props.children, 
-      (child, i) =>
-        React.cloneElement(
-          child, 
-          { 
-            tabIndex: i, 
-            tabLocation: this.getTabLocation(i, React.Children.count(this.props.children)), 
-            activeTabIndex: this.state.activeTabIndex, 
-            switchTabs: this.switchTabs 
-          }
-        )
-    );
-		return (
-      <div id="content-nav">
-        {childrenWithProps}
-      </div>
-		);
-	}
 });
 
-module.exports = TabNav;
\ No newline at end of file
+module.exports = TabNav;
diff --git a/src/routes.json b/src/routes.json
index a2a34b8..ed2f765 100755
--- a/src/routes.json
+++ b/src/routes.json
@@ -5,7 +5,7 @@
 		"title": "Home"
 	},
 	{
-		"pattern": "/about",
+		"pattern": "/about(/*)?",
 		"view": "about",
 		"title": "About"
 	},
@@ -39,4 +39,4 @@
 		"view": "eula",
 		"title": "Terms and Conditions"
 	}
-]
\ No newline at end of file
+]
diff --git a/src/template.html b/src/template.html
index 4fa2626..1b74dcb 100755
--- a/src/template.html
+++ b/src/template.html
@@ -1,31 +1,34 @@
 <!DOCTYPE html>
 <!--[if lt IE 9 ]> <html class="ie8"> <![endif]-->
 <!--[if IE 9 ]> <html class="ie9"> <![endif]-->
-<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
-    <head>
-        <meta charset="UTF-8" />
+<!--[if (gt IE 9)|!(IE)]><!-->
+<html>
+<!--<![endif]-->
 
-        <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <meta http-equiv="x-frame-options" content="deny">
-        <meta name="viewport" content="width=942, initial-scale=1">
+<head>
+      <meta charset="UTF-8" />
 
-        <link rel="stylesheet" type="text/css" href="style/site.css">
-        <link rel="stylesheet" type="text/css" href="style/style.css">
-        <link rel="stylesheet" type="text/css" href="style/content.css">
-        <script type="text/javascript">window.liveSettings={api_key:"5e440a933b4d46b8a37bc7627a1e76e0"}</script>
-        <script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
+      <meta http-equiv="x-ua-compatible" content="ie=edge">
+      <meta name="viewport" content="width=942, initial-scale=1">
 
-        <title>ScratchJr - {{title}}</title>
-    </head>
+      <link rel="stylesheet" type="text/css" href="/style/site.css">
+      <link rel="stylesheet" type="text/css" href="/style/style.css">
+      <link rel="stylesheet" type="text/css" href="/style/content.css">
+      <script type="text/javascript">
+            window.liveSettings = {
+                  api_key: "5e440a933b4d46b8a37bc7627a1e76e0"
+            }
+      </script>
+      <script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
 
-    <body>
-        <div id="app"></div>
+      <title>ScratchJr - {{title}}</title>
+</head>
 
-        <!-- Scripts -->
-        <script type="text/javascript" src="js/lib/jquery-1.11.0.min.js"></script>
+<body>
+      <div id="app"></div>
 
-        <script src="/js/{{view}}.bundle.js"></script>
+      <script src="/js/{{view}}.bundle.js"></script>
 
+</body>
 
-    </body>
 </html>
diff --git a/src/views/about/about.jsx b/src/views/about/about.jsx
index 7fbb52a..948e0ec 100755
--- a/src/views/about/about.jsx
+++ b/src/views/about/about.jsx
@@ -1,47 +1,64 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
+import React from 'react'
+import {render} from 'react-dom'
+import {Router, Route, browserHistory, IndexRedirect, IndexRoute} from 'react-router'
+import NavBar from '../../components/navbar/navbar.jsx'
+import Footer from '../../components/footer/footer.jsx'
+import TabNav from '../../components/tabnav/tabnav.jsx'
 
-var NavBar = require('../../components/navbar/navbar.jsx');
-var Footer = require('../../components/footer/footer.jsx');
-
-var Tabber = require('../../components/tabber/tabber.jsx');
-var Tab = require('../../components/tab/tab.jsx');
-var TabNav = require('../../components/tabnav/tabnav.jsx');
-var TabSectionNav = require('../../components/tabsectionnav/tabsectionnav.jsx');
-
-var InfoSection = require('../../components/tab-sections/about-sections/info.jsx');
-var PressSection = require('../../components/tab-sections/about-sections/press.jsx');
-var FAQSection = require('../../components/tab-sections/about-sections/faq.jsx');
-var VideosSection = require('../../components/tab-sections/about-sections/videos.jsx');
+import InfoSection from './info.jsx'
+import PressSection from './press.jsx'
+import FAQSection from './faq.jsx'
+import VideosSection from './videos.jsx'
 
 require('./about.scss');
 
 var About = React.createClass({
-	type: 'About',
-	render: function() {
-		return (
-      <div>
-        <NavBar selected="about"/>
+    type: 'About',
+    render: function() {
+        var tabs = [
+            {
+                url: "/about/info",
+                text: "Info",
+                section: "info",
+                indexLink: false
+            }, {
+                url: "/about/press",
+                text: "Press",
+                section: "press",
+                indexLink: false
+            }, {
+                url: "/about/faq",
+                text: "FAQ",
+                section: "faq",
+                indexLink: false
+            }, {
+                url: "/about/videos",
+                text: "Videos",
+                section: "videos",
+                indexLink: false
+            }
 
-        <Tabber>
-          <TabNav>
-            <Tab tabId="info" title="Info" iconClass="info-icon" />
-            <Tab tabId="press" title="Press" iconClass="press-icon"/>
-            <Tab tabId="faq" title="FAQ" iconClass="faq-icon" />
-            <Tab tabId="videos" title="Videos" iconClass="videos-icon" />
-          </TabNav>
-          <TabSectionNav>
-            <InfoSection />
-            <PressSection />
-            <FAQSection />
-            <VideosSection />
-          </TabSectionNav>
-        </Tabber>
-  
-        <Footer />
-      </div>
-		);
-	}
+        ];
+        return (
+            <div>
+                <NavBar selected="about"/>
+                <div id="content">
+                    <TabNav items={tabs}/> {this.props.children}
+                </div>
+                <Footer/>
+            </div>
+        );
+    }
 });
 
-ReactDOM.render(<About />, document.getElementById('app'));
\ No newline at end of file
+render((
+    <Router history={browserHistory}>
+        <Route path="/about" component={About}>
+            <Route path="info" component={InfoSection}/>
+            <Route path="press" component={PressSection}/>
+            <Route path="faq" component={FAQSection}/>
+            <Route path="videos" component={VideosSection}/>
+						<IndexRedirect to="info"/>
+        </Route>
+    </Router>
+), document.getElementById('app'));
diff --git a/src/views/about/about.scss b/src/views/about/about.scss
index 8d4ec09..e8dbdf4 100755
--- a/src/views/about/about.scss
+++ b/src/views/about/about.scss
@@ -1,46 +1,3 @@
-.content-section-half-item {
-	display: inline-block;
-	padding-bottom: 30px;
-	clear: both;
-	width: 45%;
-	text-align: left;
-	vertical-align: top;
-}
-
-.content-section-items-container:after {
-	display:inline-block;
-	width:100%;
-	content:'';
-	height: 0;
-}
-
-.content-section-item-title {
-	padding-bottom: 10px;
-	font-weight: 900;
-	color: #2898cd;
-	width: 60%;
-	display: inline-block;
-}
-
-.content-section-item-thumbnail {
-	width:100%;
-}
-
-.content-section-item-thumbnail-image {
-	width: 100%;
-	border-radius: 20px;
-}
-
-.content-section-item-description {
-	width: 100%;
-	color: #808080;
-	font-size: 14px;
-	line-height: 22px;
-	padding-bottom: 10px;
-	padding-top: 10px;
-	display: inline-block;
-}
-
 #video-wrapper {
 	padding-top: 40px;
         text-align: center;
@@ -90,7 +47,7 @@
 	background-size: 100%;
 }
 
-.content-nav-item-selected  > .info-icon {
+.content-nav-item-selected  .info-icon {
 	background-image: url(/images/infos_o.svg);
 }
 
@@ -99,7 +56,7 @@
 	background-size: 100%;
 }
 
-.content-nav-item-selected  > .press-icon {
+.content-nav-item-selected  .press-icon {
 	background-image: url(/images/press_o.svg);
 }
 
@@ -108,7 +65,7 @@
 	background-size: 100%;
 }
 
-.content-nav-item-selected  > .videos-icon {
+.content-nav-item-selected  .videos-icon {
 	background-image: url(/images/videos_o.svg);
 }
 
@@ -117,6 +74,6 @@
 	background-size: 100%;
 }
 
-.content-nav-item-selected  > .faq-icon {
+.content-nav-item-selected  .faq-icon {
 	background-image: url(/images/faq_o.svg);
 }
diff --git a/src/components/tab-sections/about-sections/faq.jsx b/src/views/about/faq.jsx
similarity index 83%
rename from src/components/tab-sections/about-sections/faq.jsx
rename to src/views/about/faq.jsx
index f4f8b30..f885ba8 100644
--- a/src/components/tab-sections/about-sections/faq.jsx
+++ b/src/views/about/faq.jsx
@@ -1,16 +1,9 @@
 import React from 'react';
 
-var classNames = require('classnames');
-
 var FAQSection = React.createClass({
   render: function() {
     return (
-      <div 
-        className={classNames(
-          "content-section", 
-          {"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
-        )}
-        id="faq-section">
+      <div className="content-section" id="faq-section">
         <div className="content-section-title">
           Frequently Asked Questions
         </div>
@@ -25,7 +18,7 @@ var FAQSection = React.createClass({
 
           <div className="content-description-section">
             <div className="content-description-question">Is there a book for ScratchJr?</div>
-            <div className="content-description-answer"><a href="https://www.nostarch.com/scratchjr" target="_blank"><img src="images/scratchjr-book.png" width="100" height="auto" style={{"float":"right"}}/></a>Yes, there is a guide to ScratchJr. Written by app creators Professor Marina Umaschi Bers and Mitchel Resnick of the Lifelong Kindergarten Group at the MIT Media Lab, this new book is an easy-to-use, hands on resource for parents and educators alike to teach children how to code with ScratchJr. Read an <a href="https://medium.com/scratchfoundation-blog/helping-young-children-experiment-explore-and-express-themselves-with-code-69a450d42005#.9fq210a4q" target="_blank">excerpt of the book</a>. You can buy your copy through <a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>!</div>
+          <div className="content-description-answer"><a href="https://www.nostarch.com/scratchjr" target="_blank"><img src="/images/scratchjr-book.png" width="100" height="auto" style={{"float":"right"}}/></a>Yes, there is a guide to ScratchJr. Written by app creators Professor Marina Umaschi Bers and Mitchel Resnick of the Lifelong Kindergarten Group at the MIT Media Lab, this new book is an easy-to-use, hands on resource for parents and educators alike to teach children how to code with ScratchJr. Read an <a href="https://medium.com/scratchfoundation-blog/helping-young-children-experiment-explore-and-express-themselves-with-code-69a450d42005#.9fq210a4q" target="_blank">excerpt of the book</a>. You can buy your copy through <a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>!</div>
           </div>
 
           <div className="content-description-section">
@@ -77,4 +70,4 @@ var FAQSection = React.createClass({
   }
 });
 
-module.exports = FAQSection;
\ No newline at end of file
+module.exports = FAQSection;
diff --git a/src/components/tab-sections/about-sections/info.jsx b/src/views/about/info.jsx
similarity index 98%
rename from src/components/tab-sections/about-sections/info.jsx
rename to src/views/about/info.jsx
index 522dfe5..fc646c3 100644
--- a/src/components/tab-sections/about-sections/info.jsx
+++ b/src/views/about/info.jsx
@@ -1,16 +1,9 @@
 import React from 'react';
 
-var classNames = require('classnames');
-
 var InfoSection = React.createClass({
   render: function() {
     return (
-      <div 
-        className={classNames(
-          "content-section", 
-          {"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
-        )}
-        id="info-section">
+      <div className="content-section" id="info-section">
         <div className="content-section-title">
           About ScratchJr
         </div>
@@ -66,4 +59,4 @@ var InfoSection = React.createClass({
   }
 });
 
-module.exports = InfoSection;
\ No newline at end of file
+module.exports = InfoSection;
diff --git a/src/components/tab-sections/about-sections/press.jsx b/src/views/about/press.jsx
similarity index 90%
rename from src/components/tab-sections/about-sections/press.jsx
rename to src/views/about/press.jsx
index 031e103..4d253fa 100644
--- a/src/components/tab-sections/about-sections/press.jsx
+++ b/src/views/about/press.jsx
@@ -1,16 +1,9 @@
 import React from 'react';
 
-var classNames = require('classnames');
-
 var PressSection = React.createClass({
   render: function() {
     return (
-      <div 
-        className={classNames(
-          "content-section", 
-          {"content-section-selected": this.props.sectionIndex == this.props.activeSectionIndex}
-        )}
-        id="press-section">
+      <div className="content-section" id="press-section">
         <div className="content-section-title">
           Press
         </div>
@@ -34,4 +27,4 @@ var PressSection = React.createClass({
   }
 });
 
-module.exports = PressSection;
\ No newline at end of file
+module.exports = PressSection;
diff --git a/src/views/about/videos.jsx b/src/views/about/videos.jsx
new file mode 100644
index 0000000..c3ce7d7
--- /dev/null
+++ b/src/views/about/videos.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import SectionItem from '../../components/sectionitem/sectionitem.jsx'
+
+var classNames = require('classnames');
+
+var VideosSection = React.createClass({
+    render: function() {
+        return (
+            <div className="content-section" id="videos-section">
+                <div className="content-section-title">
+                    Videos
+                </div>
+                <div className="content-section-description">
+                    Webinars for educators and parents
+                </div>
+                <div className="content-section-items-container">
+                    <SectionItem title="Pre-Launch Webinar (March 2014)" format="half" thumbnail={< iframe width = "342" height = "192" src = "http://www.youtube.com/embed/mZAawCvDlBM?rel=0" frameborder = "0" allowfullscreen > </iframe>} description="Project leaders Marina Bers and Mitch Resnick
+          demonstrate how to create a simple project, discuss ScratchJr features,
+          and share favorite stories from beta-testing the app in classrooms."/>
+                    <SectionItem title="Post-Launch Webinar (August 2014)" format="half" thumbnail={< iframe width = "342" height = "192" src = "http://www.youtube.com/embed/owAA_IjdVUM?rel=0" frameborder = "0" allowfullscreen > </iframe>} description="Project leaders Marina Bers and Mitch Resnick
+          respond to questions about the initial release of ScratchJr, and discuss
+          future directions for the programming environment."/>
+                    <SectionItem title="EdWeb Webinar" format="half" thumbnail={< iframe src = "//player.vimeo.com/video/108504313?title=0&amp;byline=0&amp;portrait=0" width = "342" height = "214" frameborder = "0" webkitallowfullscreen mozallowfullscreen allowfullscreen > </iframe>} description="Research Coordinator Amanda Strawhacker explores pedagogy
+            around young children's programming languages, and presents affordances of digital playgrounds.
+            She discusses why programming is an important skill for early education."/>
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = VideosSection;
diff --git a/src/views/index/index.jsx b/src/views/index/index.jsx
index 919e223..c0dfa75 100755
--- a/src/views/index/index.jsx
+++ b/src/views/index/index.jsx
@@ -6,80 +6,118 @@ var NavBar = require('../../components/navbar/navbar.jsx');
 var Carousel = require('../../components/carousel/carousel.jsx');
 var Footer = require('../../components/footer/footer.jsx');
 
+require('./index.scss');
+
 var Index = React.createClass({
-	type: 'Index',
-  render: function() {
-    return (
-      <div>
-        <NavBar />
-				<Carousel />
+    type: 'Index',
+    render: function() {
+        var images = [
+            {
+                id: 's1',
+                url: 'images/slide1.png'
+            }, {
+                id: 's2',
+                url: 'images/slide2.png'
+            }, {
+                id: 's3',
+                url: 'images/slide3.png'
+            }, {
+                id: 's4',
+                url: 'images/slide4.png'
+            }, {
+                id: 's5',
+                url: 'images/slide5.png'
+            }
+        ];
+        return (
+            <div>
+                <NavBar/>
+                <Carousel items={images}/>
 
-        <div id="content">
-          <div id="announcement-banner">
-            ScratchJr is available as a free app for <a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">iPads</a> and <a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">Android</a> tablets.
-          </div>
+                <div id="content">
+                    <div id="announcement-banner">
+                        ScratchJr is available as a free app for
+                        <a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">iPads</a>
+                        and
+                        <a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">Android</a>
+                        tablets.
+                    </div>
 
-          <div id="content-text">
-            <div id="content-header-first">
-              ScratchJr
-            </div> {/* end content-header-first */}
-            <div id="content-header-second">
-              Coding for young children
-            </div> {/* end content-header-second */}
-            <div id="content-body">
-              Coding is the new literacy! With ScratchJr, young children (ages 5-7) can program their own interactive stories and games. In the process, they learn to solve problems, design projects, and express themselves creatively on the computer.
-                <div id="store-badges">
-                  <a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">
-                    <img alt="Download on the App Store"src="images/Apple_appstore.svg" />
-                  </a>
-                  <a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">
-                    <img alt="Get it on Google Play" src="images/GooglePlay.svg" width="135px" height="40px"/>
-                  </a>
-              </div> {/* end store-badges */}
-            </div> {/* end content-body */}
-          </div> {/* end content-text */}
-          <div id="content-graphic">
-            <img id="content-graphic-item" src="images/homegraphic.png" />
-          </div> {/* end content-graphic */}
-          <div className="content-news">
-            <div className="content-news-header">
-              News
-            </div>
-            <div className="content-news-body">
-              ScratchJr is available on <a href="http://www.amazon.com/Scratch-Foundation-ScratchJr/dp/B01AKGTD2E" target="_blank">Amazon</a>. Now, kids can create interactive stories and games on Kindle!
-            </div>
-            <div className="content-news-body">
-              Newly released by <a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>, <a href="about#faq">The Official ScratchJr Book</a>The Official ScratchJr Book is now available in paperback or ebook format!
-            </div>
-          </div>
+                    <div id="content-text">
+                        <div id="content-header-first">
+                            ScratchJr
+                        </div>
+                        {/* end content-header-first */}
+                        <div id="content-header-second">
+                            Coding for young children
+                        </div>
+                        {/* end content-header-second */}
+                        <div id="content-body">
+                            Coding is the new literacy! With ScratchJr, young children (ages 5-7) can program their own interactive stories and games. In the process, they learn to solve problems, design projects, and express themselves creatively on the computer.
+                            <div id="store-badges">
+                                <a href="https://itunes.apple.com/us/app/scratchjr/id895485086?ls=1&mt=8">
+                                    <img alt="Download on the App Store" src="images/Apple_appstore.svg"/>
+                                </a>
+                                <a href="https://play.google.com/store/apps/details?id=org.scratchjr.android">
+                                    <img alt="Get it on Google Play" src="images/GooglePlay.svg" width="135px" height="40px"/>
+                                </a>
+                            </div>
+                            {/* end store-badges */}
+                        </div>
+                        {/* end content-body */}
+                    </div>
+                    {/* end content-text */}
+                    <div id="content-graphic">
+                        <img id="content-graphic-item" src="images/homegraphic.png"/>
+                    </div>
+                    {/* end content-graphic */}
+                    <div className="content-news">
+                        <div className="content-news-header">
+                            News
+                        </div>
+                        <div className="content-news-body">
+                            ScratchJr is available on
+                            <a href="http://www.amazon.com/Scratch-Foundation-ScratchJr/dp/B01AKGTD2E" target="_blank">Amazon</a>. Now, kids can create interactive stories and games on Kindle!
+                        </div>
+                        <div className="content-news-body">
+                            Newly released by
+                            <a href="https://www.nostarch.com/scratchjr" target="_blank">No Starch Press</a>,
+                            <a href="about#faq">The Official ScratchJr Book</a>The Official ScratchJr Book is now available in paperback or ebook format!
+                        </div>
+                    </div>
 
-          <div id="discussion-container">
-            <div id="discussion-text">
-              <div id="discussion-header">
-                Join the Discussion
-              </div>
-              <div id="discussion-body">
-                We introduced ourselves. Now it's your turn. Drop us a line with feedback, report bugs &amp; glitches, or just say "hi!" <br></br>
+                    <div id="discussion-container">
+                        <div id="discussion-text">
+                            <div id="discussion-header">
+                                Join the Discussion
+                            </div>
+                            <div id="discussion-body">
+                                We introduced ourselves. Now it's your turn. Drop us a line with feedback, report bugs &amp; glitches, or just say "hi!"
+                                <br></br>
 
-                <a href=" https://twitter.com/intent/tweet?screen_name=ScratchJr">
-                  <div className="blue-button">
-                    Tweet @ScratchJr
-                  </div>
-                </a>
-              </div>
+                                <a href=" https://twitter.com/intent/tweet?screen_name=ScratchJr">
+                                    <div className="blue-button">
+                                        Tweet @ScratchJr
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <div id="disscussion-tweets">
+                            <Timeline widgetId={'618881920324079616'} options={{
+                                username: 'ScratchJr',
+                                width: '425',
+                                height: '250',
+                                chrome: 'noheader nofooter'
+                            }}/>
+                        </div>
+                    </div>
+                </div>
+                {/* end content */}
+                <Footer/>
             </div>
-            <div id="disscussion-tweets">
-							<Timeline
-								widgetId={'618881920324079616'}
-								options={{username: 'ScratchJr', width: '425', height: '250', chrome: 'noheader nofooter'}}
-							/>
-            </div>
-          </div>
-        </div> {/* end content */}
-        <Footer />
-      </div>
-    );
-  }
+        );
+    }
 });
 
-ReactDOM.render(<Index />, document.getElementById('app'));
+ReactDOM.render(
+    <Index/>, document.getElementById('app'));
diff --git a/src/views/index/index.scss b/src/views/index/index.scss
new file mode 100644
index 0000000..5aa4b44
--- /dev/null
+++ b/src/views/index/index.scss
@@ -0,0 +1,133 @@
+#content-text {
+	background-color: white;
+	width: 49%;
+	float: left;
+}
+
+#content-graphic {
+	background-color: white;
+	width: 49%;
+	float: right;
+	text-align: center;
+}
+
+#content-graphic-item {
+	width: 100%;
+}
+
+#content-header-first {
+	color: #7f7f7f;
+	font-size: 28px;
+	margin-top: 24px;
+	margin-left: 40px;
+}
+
+#content-header-second {
+	color: #f5a322;
+	margin-left: 40px;
+	font-size: 20px;
+}
+
+#content-body {
+	font-family: "Lucida Grande", arial, sans-serif;
+	margin-top: 45px;
+	margin-left: 40px;
+	color: #808080;
+	font-size: 14pt;
+	line-height: 22pt;
+}
+/* Index page News */
+.content-news {
+	background-color: white;
+	width: 90%;
+	float: left;
+}
+
+.content-news-header {
+	color: #7f7f7f;
+	font-size: 28px;
+	margin-top: 24px;
+	margin-left: 40px;
+}
+
+.content-news-body {
+	font-family: "Lucida Grande", arial, sans-serif;
+	margin-top: 20px;
+	margin-left: 40px;
+	margin-bottom: 10px;
+	color: #808080;
+	font-size: 14pt;
+	line-height: 22pt;
+}
+
+#store-badges {
+	margin-left: 0px;
+}
+#store-badges img {
+	float: left;
+	margin: 10px 30px 10px 0;
+}
+
+#announcement-banner {
+	text-align: center;
+	background-color: #f5a322;
+	color: white;
+	height: 60px;
+	line-height: 60px;
+	font-size: 18px;
+	letter-spacing: .5px;
+}
+
+#discussion-container {
+	width: 100%;
+	clear: both;
+	background-color: #e9e9e9;
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+#discussion-container::after {
+	content: ".";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0px;
+}
+
+#discussion-text {
+	width:50%;
+	float:left;
+}
+
+#discussion-header {
+	color: #555;
+	margin-top: 32px;
+	margin-left: 40px;
+	font-size: 20px;
+}
+
+#discussion-body {
+	font-family: "Lucida Grande", arial, sans-serif;
+	margin-top: 12px;
+	margin-left: 40px;
+	margin-right: 25px;
+	color: #808080;
+	font-size: 14pt;
+	line-height: 22pt;
+}
+
+#disscussion-tweets {
+	width: 50%;
+	float: right;
+}
+
+.timeline-header {
+	display: none;
+}
+
+#announcement-banner > a {
+	color: white;
+	text-decoration: none;
+	border-bottom: 2px solid;
+}
diff --git a/static/js/lib/content-nav.js b/static/js/lib/content-nav.js
deleted file mode 100755
index 55d4ef3..0000000
--- a/static/js/lib/content-nav.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// navigation links are hashes where the target is the id of the content div
-// e.g. href='#activities' will show the content-section div with id='activities-section'
-// nav items should have id <target>-nav e.g. activities-nav
-// content sections should have id <target>-section e.g. activities-section
-// read-more items should have an id, the target section should have id <target>-section
-
-$(function() {
-  // add read-more link to related item thumbnail image and title
-  $(".content-section-item-thumbnail-image").wrap(function() {
-    return $(this).parent().siblings().find($(".read-more")).clone().text("");
-  } );
-  $(".content-section-item-title").wrapInner(function() {
-    return $(this).siblings().find($(".read-more")).clone().text("");
-  } );
-
-  // load the correct content based on URL if there is a #hash
-  var hash = location.hash.substr(1);
-  if (hash){
-    if ($('#'+hash+'-section').length) {
-      updateContent(hash+'-section');
-      updateCategory(hash+'-nav');
-    } else {
-      updateContent(hash);
-      var category = $(".read-more#"+hash).closest($(".content-section")).attr('id').replace("section", "nav");
-      updateCategory(category);
-    }
-  }
-});
-
-$(document).on('click', '.content-nav-item', function(e) {
-  updateContent($(this).attr('id').replace('nav', 'section'));
-  updateCategory($(this).attr('id'));
-});
-
-$(document).on('click', '.read-more', function(e) {
-  updateContent($(this).attr('id')+"-section");
-});
-
-function updateContent(sectionId) {
-  var section = $("#"+sectionId);
-  if(section.length)  {
-    $('.content-section').removeClass('content-section-selected');
-    section.addClass('content-section-selected');
-    if($(".content-section-selected.content-subpage").length) {
-      $('html,body').scrollTop($("#content").offset().top);
-    }
-  }
-}
-function updateCategory(navId) {
-  if($("#"+navId).length)  {
-    $('.content-nav-item').removeClass('content-nav-item-selected');
-    $("#"+navId).addClass('content-nav-item-selected');
-  }
-
-}
diff --git a/static/js/lib/responsiveslides.min.js b/static/js/lib/responsiveslides.min.js
deleted file mode 100755
index 21d4832..0000000
--- a/static/js/lib/responsiveslides.min.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/*! http://responsiveslides.com v1.54 by @viljamis */
-(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
-w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
-n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
-h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
-k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
-a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
-a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
diff --git a/static/js/lib/simple-expand.min.js b/static/js/lib/simple-expand.min.js
deleted file mode 100755
index db320d9..0000000
--- a/static/js/lib/simple-expand.min.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/* Copyright (C) 2012 Sylvain Hamel
-Project: https://github.com/redhotsly/simple-expand
-MIT Licence: https://raw.github.com/redhotsly/simple-expand/master/licence-mit.txt */
-(function($){"use strict";function SimpleExpand(){var that=this;that.defaults={hideMode:"fadeToggle",defaultSearchMode:"parent",defaultTarget:".content",throwOnMissingTarget:true,keepStateInCookie:false,cookieName:"simple-expand"};that.settings={};$.extend(that.settings,that.defaults);that.findLevelOneDeep=function(parent,filterSelector,stopAtSelector){return parent.find(filterSelector).filter(function(){return!$(this).parentsUntil(parent,stopAtSelector).length})};that.setInitialState=function(expander,targets){var isExpanded=that.readState(expander);if(isExpanded){expander.removeClass("collapsed").addClass("expanded");that.show(targets)}else{expander.removeClass("expanded").addClass("collapsed");that.hide(targets)}};that.hide=function(targets){if(that.settings.hideMode==="fadeToggle"){targets.hide()}else if(that.settings.hideMode==="basic"){targets.hide()}};that.show=function(targets){if(that.settings.hideMode==="fadeToggle"){targets.show()}else if(that.settings.hideMode==="basic"){targets.show()}};that.checkKeepStateInCookiePreconditions=function(){if(that.settings.keepStateInCookie&&$.cookie===undefined){throw new Error("simple-expand: keepStateInCookie option requires $.cookie to be defined.")}};that.readCookie=function(){var jsonString=$.cookie(that.settings.cookieName);if(jsonString===null||jsonString===""){return{}}else{return JSON.parse(jsonString)}};that.readState=function(expander){if(!that.settings.keepStateInCookie){return expander.hasClass("expanded")}var id=expander.attr("Id");if(id===undefined){return}var cookie=that.readCookie();var cookieValue=cookie[id];if(typeof cookieValue!=="undefined"){return cookie[id]===true}else{return expander.hasClass("expanded")}};that.saveState=function(expander,isExpanded){if(!that.settings.keepStateInCookie){return}var id=expander.attr("Id");if(id===undefined){return}var cookie=that.readCookie();cookie[id]=isExpanded;$.cookie(that.settings.cookieName,JSON.stringify(cookie),{raw:true,path:window.location.pathname})};that.toggle=function(expander,targets){var isExpanded=that.toggleCss(expander);if(that.settings.hideMode==="fadeToggle"){targets.fadeToggle(150)}else if(that.settings.hideMode==="basic"){targets.toggle()}else if($.isFunction(that.settings.hideMode)){that.settings.hideMode(expander,targets,isExpanded)}that.saveState(expander,isExpanded);return false};that.toggleCss=function(expander){if(expander.hasClass("expanded")){expander.toggleClass("collapsed expanded");return false}else{expander.toggleClass("expanded collapsed");return true}};that.findTargets=function(expander,searchMode,targetSelector){var targets=[];if(searchMode==="absolute"){targets=$(targetSelector)}else if(searchMode==="relative"){targets=that.findLevelOneDeep(expander,targetSelector,targetSelector)}else if(searchMode==="parent"){var parent=expander.parent();do{targets=that.findLevelOneDeep(parent,targetSelector,targetSelector);if(targets.length===0){parent=parent.parent()}}while(targets.length===0&&parent.length!==0)}return targets};that.activate=function(jquery,options){$.extend(that.settings,options);that.checkKeepStateInCookiePreconditions();jquery.each(function(){var expander=$(this);var targetSelector=expander.attr("data-expander-target")||that.settings.defaultTarget;var searchMode=expander.attr("data-expander-target-search")||that.settings.defaultSearchMode;var targets=that.findTargets(expander,searchMode,targetSelector);if(targets.length===0){if(that.settings.throwOnMissingTarget){throw"simple-expand: Targets not found"}return this}that.setInitialState(expander,targets);expander.click(function(){return that.toggle(expander,targets)})})}}window.SimpleExpand=SimpleExpand;$.fn.simpleexpand=function(options){var instance=new SimpleExpand;instance.activate(this,options);return this}})(jQuery);
\ No newline at end of file
diff --git a/static/style/content.css b/static/style/content.css
index fef6e53..aff69b0 100755
--- a/static/style/content.css
+++ b/static/style/content.css
@@ -7,11 +7,9 @@
 	overflow: auto;
 }
 
-.content-section {
-	display: none;
-}
+/* TODO: Content section should simply be the  'selected' style. selected style is unnedded */
 
-.content-section-selected {
+.content-section {
 	padding-top: 3px;
 	margin-left: 70px;
 	margin-right: 70px;
diff --git a/static/style/site.css b/static/style/site.css
index a67c721..db0c621 100755
--- a/static/style/site.css
+++ b/static/style/site.css
@@ -74,6 +74,9 @@ h1 {
 	cursor:pointer;
 }
 
+#content-nav a:last-child .content-nav-item {
+	border-right: none;
+}
 .content-nav-item-selected {
 	color: #2898CD;
 }
@@ -98,10 +101,6 @@ h1 {
 }
 
 
-.content-nav-item-right{
-	border-right: none;
-}
-
 .content-nav-item-icon {
 	width: 77px;
 	height: 77px;
diff --git a/static/style/style.css b/static/style/style.css
index 48a8c55..eb34a17 100755
--- a/static/style/style.css
+++ b/static/style/style.css
@@ -1,161 +1 @@
-.slideshow {
-	width: 900px;
-	margin-left: auto;
-	margin-right: auto;
-	height: 507px;
-	background-color: white;
-}
 img { display: block; }
-
-.slide-hidden {
-	width: 900px;
-	height: 461px;
-	display: none;
-}
-
-.slide-current {
-	width: 900px;
-	height: 461px;
-}
-
-#content {
-	background-color: white;
-	width: 900px;
-	margin: auto;
-	display: block;
-	overflow: hidden;
-}
-
-#content-text {
-	background-color: white;
-	width: 49%;
-	float: left;
-}
-
-#content-graphic {
-	background-color: white;
-	width: 49%;
-	float: right;
-	text-align: center;
-}
-
-#content-graphic-item {
-	width: 100%;
-}
-
-#content-header-first {
-	color: #7f7f7f;
-	font-size: 28px;
-	margin-top: 24px;
-	margin-left: 40px;
-}
-
-#content-header-second {
-	color: #f5a322;
-	margin-left: 40px;
-	font-size: 20px;
-}
-
-#content-body {
-	font-family: "Lucida Grande", arial, sans-serif;
-	margin-top: 45px;
-	margin-left: 40px;
-	color: #808080;
-	font-size: 14pt;
-	line-height: 22pt;
-}
-/* Index page News */
-.content-news {
-	background-color: white;
-	width: 90%;
-	float: left;
-}
-
-.content-news-header {
-	color: #7f7f7f;
-	font-size: 28px;
-	margin-top: 24px;
-	margin-left: 40px;
-}
-
-.content-news-body {
-	font-family: "Lucida Grande", arial, sans-serif;
-	margin-top: 20px;
-	margin-left: 40px;
-	margin-bottom: 10px;
-	color: #808080;
-	font-size: 14pt;
-	line-height: 22pt;
-}
-
-#store-badges {
-	margin-left: 0px;
-}
-#store-badges img {
-	float: left;
-	margin: 10px 30px 10px 0;
-}
-
-#announcement-banner {
-	text-align: center;
-	background-color: #f5a322;
-	color: white;
-	height: 60px;
-	line-height: 60px;
-	font-size: 18px;
-	letter-spacing: .5px;
-}
-
-#discussion-container {
-	width: 100%;
-	clear: both;
-	background-color: #e9e9e9;
-	padding-top: 20px;
-	padding-bottom: 20px;
-}
-
-#discussion-container::after {
-	content: ".";
-	display: block;
-	clear: both;
-	visibility: hidden;
-	line-height: 0;
-	height: 0px;
-}
-
-#discussion-text {
-	width:50%;
-	float:left;
-}
-
-#discussion-header {
-	color: #555;
-	margin-top: 32px;
-	margin-left: 40px;
-	font-size: 20px;
-}
-
-#discussion-body {
-	font-family: "Lucida Grande", arial, sans-serif;
-	margin-top: 12px;
-	margin-left: 40px;
-	margin-right: 25px;
-	color: #808080;
-	font-size: 14pt;
-	line-height: 22pt;
-}
-
-#disscussion-tweets {
-	width: 50%;
-	float: right;
-}
-
-.timeline-header {
-	display: none;
-}
-
-#announcement-banner > a {
-	color: white;
-	text-decoration: none;
-	border-bottom: 2px solid;
-}