Resubmitting Assignment 2 and 3

css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/style.css

@@ -0,0 +1,191 @@
+/* 
+This rule uses the universal selector, *, to apply the border-box model to all elements on a site
+
+see Paul Irish article for where these styles came from and more on why to do it:
+http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+*/
+
+/* apply a natural box layout model to all elements */
+*, *:before, *:after {
+  -moz-box-sizing: border-box; 
+  -webkit-box-sizing: border-box; 
+  box-sizing: border-box;
+}
+
+/* This is not the only thing you should do for responsive images, but it is a start. Remember that this style will not make your image or video grow any bigger than the original so you have to put in the largest version you will need.
+That can be a performance issue since small screens will download the same image as large ones.
+This article by Luke Wroblewski goes into more detail about that: http://www.lukew.com/ff/entry.asp?1851
+*/
+img,video{
+  width: auto; 
+  max-width: 100%; 
+  height: auto;
+}
+
+/* =====================================
+CSS for <iframe> embedded element
+===================================== */
+.videoWrapper {
+position: relative;
+padding-bottom: 56.25%; /* 16:9 */
+/* if your video is 4:3 ratio then use the padding-bottom below:*/
+/*padding-bottom: 75%;*/ /* 4:3 */
+padding-top: 25px; /* may need to adjust depending on the size of the player controls of the service you use */
+height: 0;
+}
+.videoWrapper iframe {
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+}
+
+/* =====================================
+Basic styles
+===================================== */
+body{
+    font-family:;
+    font-size:100%;
+    line-height:1.5;
+    background-color:#DEB887;
+  }
+
+    .CA{
+      background-color: #C0C0C0;
+
+
+}
+
+  .creative{
+    background-color:#99CC33; 
+  }
+
+  .Fine{
+    background-color: #99CC33;
+  }
+    .PA{
+      background-color:#C0C0C0; 
+    }
+      .MA{
+        background-color: #99CC33;
+      }
+
+  .track.FA{
+    background-color: #FF6600;
+  }
+p{
+    margin-bottom:1em;
+}
+
+h1,h2,h3,h4,h5,h6{
+    font-family:;
+}
+
+h1{
+font-size:2em;
+line-height:2em;
+}
+
+
+h2{
+font-size:1.6em;
+line-height:1.6em;
+}
+
+
+h3{
+font-size:1.4em;
+line-height:1.4em;
+}
+
+
+h4{
+font-size:1.2em;
+line-height:1.2em;
+}
+
+
+/* ============================
+* NAVIGATION 
+* Modified from: http://webdesign.tutsplus.com/tutorials/   htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/
+* =============================*/  
+
+#main_nav{
+clear:both;
+}  
+
+#main_nav ul{
+list-style: none;
+}
+
+#main_nav li a{
+display:block;
+color:#fff;
+background-color: #555;
+text-transform: uppercase;
+padding: 0.625em; /* 10/16 */
+text-decoration:none;
+border-bottom: 1px solid #eee;
+font-weight:900;
+}
+
+#main_nav li a:hover{
+ color:#555;
+background-color: #fff;
+}
+
+#main_nav li a:active{
+color:#555;
+background-color: #f90;
+}  
+
+/* menu button */
+.menu a{
+padding:0.5em 0.625em; /*10/16 */
+background-color: #555;
+background-color: rgba(60,60,60,.6);
+border-radius:5px;
+color: #fff;
+text-decoration:none;
+}
+
+.menu a:hover{
+color:#555;
+background-color: #f90;
+}
+
+.menu{
+margin-bottom:1em;
+position:fixed;
+float: right; 
+}
+
+
+
+/* =====================================
+index.html styles
+===================================== */
+
+
+
+
+/* =====================================
+sessions styles
+===================================== */
+
+
+
+
+/* =====================================
+about styles
+===================================== */
+
+section.about {
+
+}
+
+.about{
+
+}
+