worked on stage 3 which looks quite a bit better now, also started cleaning up the chakra.css file a bit

4 files changed, 107 insertions, 382 deletions

diff --git a/chakra/grade1.html b/chakra/grade1.html
index 212a2bb..198ea70 100755
--- a/chakra/grade1.html
+++ b/chakra/grade1.html
@@ -23,8 +23,8 @@
 <a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Chakra icon" title="Chakra"></a>
 <img src="../assets/default/images/grade1.png" alt="Grade 1 icon">
 
-<img id="nav_right" src="../assets/default/images/help.png" alt="Help" title="Help">
-<img id="nav_right" src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma">
+<img class="nav_right" src="../assets/default/images/help.png" alt="Help" title="Help">
+<img class="nav_right" src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma">
 </div>
 <div id="subjects">
 <ul>
diff --git a/chakra/grade1mathematics.html b/chakra/grade1mathematics.html
index dc26942..e60833b 100755
--- a/chakra/grade1mathematics.html
+++ b/chakra/grade1mathematics.html
@@ -20,14 +20,11 @@
 
 <div id="mainmenu">
 <div id="navigation">
-<a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Home"></a>
-<a href="grade1.html"><img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1"></a>
-<img src="../assets/default/images/mathematics.png" alt="English" title="Grade 1 - English">
+<a class="nav_left" href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Home"></a>
+<a class="nav_left" href="grade1.html"><img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1"></a>
+<img class="nav_left" src="../assets/default/images/mathematics.png" alt="English" title="Grade 1 - English">
 
-<img id="nav_right" src="../assets/default/images/help.png" alt="Help" title="Help">
-<img id="nav_right" src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma">
-
-<ul id="week_select">
+<div id="week_select">
 <li>Weeks:</li>
 <li><a href="#weeksA" class="selected">A</a></li>
 <li><a href="#weeksB">B</a></li>
@@ -39,248 +36,76 @@
 <li><a href="#weeksH">H</a></li>
 <li><a href="#weeksI">I</a></li>
 <li><a href="#weeksJ">J</a></li>
-</ul>
+</div>
 
+<img class="nav_right" src="../assets/default/images/help.png" alt="Help" title="Help">
+<img class="nav_right" src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma">
 
 </div>
 
 <div id="weeks">
-<div id="weeksA">
+<div id="weeksA" class="weeklist">
 <li>Weeks:</li>
 <li><a href="#week1">1</a></li>
 <li><a href="#week2">2</a></li>
 <li><a href="#week3">3</a></li>
 <li><a href="#week4">4</a></li>
 <br /><br />
-<div id="week1">
-<div id="lesson">
-<div id="preview">
-<img src="../assets/default/images/preview1.jpg"/>
-</div>
-<div id="lessonname">
-Quadrilaterals
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview2.jpg"/>
-<div id="lessonname">
-Adding up to 10
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview3.jpg"/>
-<div id="lessonname">
-Everyday expressions
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview4.jpg"/>
-<div id="lessonname">
-Can and can't
-</div>
-</div>
-</div>
-<div id="week2">
-<div id="lesson">
-<div id="preview">
-<img src="../assets/default/images/preview2.jpg"/>
-</div>
-<div id="lessonname">
-Quadrilaterals
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview3.jpg"/>
-<div id="lessonname">
-Adding up to 10
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview4.jpg"/>
-<div id="lessonname">
-Everyday expressions
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview1.jpg"/>
-<div id="lessonname">
-Can and can't
-</div>
-</div>
-</div>
-<div id="week3">
-<div id="lesson">
-<div id="preview">
-<img src="../assets/default/images/preview3.jpg"/>
-</div>
-<div id="lessonname">
-Quadrilaterals
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview4.jpg"/>
-<div id="lessonname">
-Adding up to 10
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview1.jpg"/>
-<div id="lessonname">
-Everyday expressions
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview2.jpg"/>
-<div id="lessonname">
-Can and can't
-</div>
-</div>
-</div>
-<div id="week4">
-<div id="lesson">
-<div id="preview">
-<img src="../assets/default/images/preview4.jpg"/>
-</div>
-<div id="lessonname">
-Quadrilaterals
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview1.jpg"/>
-<div id="lessonname">
-Adding up to 10
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview2.jpg"/>
-<div id="lessonname">
-Everyday expressions
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview3.jpg"/>
-<div id="lessonname">
-Can and can't
-</div>
-</div>
-</div>
-</div>
-<div id="weeksB">
+<div id="week1" class="lessonlist">
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Everyday expressions" title="Everyday expressions"><div id="lessonname">Everyday expressions</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Can and can't" title="Can and can't"><div id="lessonname">Can and can't</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Quadrilaterals" title="Quadrilaterals"><div id="lessonname">Quadrilaterals</div></a></li>
+</div>
+<div id="week2" class="lessonlist">
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Everyday expressions" title="Everyday expressions"><div id="lessonname">Everyday expressions</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Can and can't" title="Can and can't"><div id="lessonname">Can and can't</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Quadrilaterals" title="Quadrilaterals"><div id="lessonname">Quadrilaterals</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li>
+</div>
+<div id="week3" class="lessonlist">
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Can and can't" title="Can and can't"><div id="lessonname">Can and can't</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Quadrilaterals" title="Quadrilaterals"><div id="lessonname">Quadrilaterals</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Everyday expressions" title="Everyday expressions"><div id="lessonname">Everyday expressions</div></a></li>
+</div>
+<div id="week4" class="lessonlist">
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Quadrilaterals" title="Quadrilaterals"><div id="lessonname">Quadrilaterals</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Everyday expressions" title="Everyday expressions"><div id="lessonname">Everyday expressions</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Can and can't" title="Can and can't"><div id="lessonname">Can and can't</div></a></li>
+</div>
+</div>
+<div id="weeksB" class="weeklist">
 <li>Weeks:</li>
 <li><a href="#week5">1</a></li>
 <li><a href="#week6">2</a></li>
 <li><a href="#week7">3</a></li>
 <li><a href="#week8">4</a></li>
 <br /><br />
-<div id="week5">
-<div id="lesson">
-<div id="preview">
-<img src="../assets/default/images/preview1.jpg"/>
-</div>
-<div id="lessonname">
-Quadrilaterals
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview2.jpg"/>
-<div id="lessonname">
-Adding up to 10
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview3.jpg"/>
-<div id="lessonname">
-Everyday expressions
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview4.jpg"/>
-<div id="lessonname">
-Can and can't
-</div>
-</div>
-</div>
-<div id="week6">
-<div id="lesson">
-<div id="preview">
-<img src="../assets/default/images/preview2.jpg"/>
-</div>
-<div id="lessonname">
-Quadrilaterals
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview3.jpg"/>
-<div id="lessonname">
-Adding up to 10
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview4.jpg"/>
-<div id="lessonname">
-Everyday expressions
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview1.jpg"/>
-<div id="lessonname">
-Can and can't
-</div>
-</div>
-</div>
-<div id="week7">
-<div id="lesson">
-<div id="preview">
-<img src="../assets/default/images/preview3.jpg"/>
-</div>
-<div id="lessonname">
-Quadrilaterals
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview4.jpg"/>
-<div id="lessonname">
-Adding up to 10
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview1.jpg"/>
-<div id="lessonname">
-Everyday expressions
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview2.jpg"/>
-<div id="lessonname">
-Can and can't
-</div>
-</div>
-</div>
-<div id="week8">
-<div id="lesson">
-<div id="preview">
-<img src="../assets/default/images/preview4.jpg"/>
-</div>
-<div id="lessonname">
-Quadrilaterals
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview1.jpg"/>
-<div id="lessonname">
-Adding up to 10
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview2.jpg"/>
-<div id="lessonname">
-Everyday expressions
-</div>
-</div>
-<div id="lesson">
-<img src="../assets/default/images/preview3.jpg"/>
-<div id="lessonname">
-Can and can't
+<div id="week5" class="lessonlist">
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Everyday expressions" title="Everyday expressions"><div id="lessonname">Everyday expressions</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Can and can't" title="Can and can't"><div id="lessonname">Can and can't</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Quadrilaterals" title="Quadrilaterals"><div id="lessonname">Quadrilaterals</div></a></li>
+</div>
+<div id="week6" class="lessonlist">
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Everyday expressions" title="Everyday expressions"><div id="lessonname">Everyday expressions</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Can and can't" title="Can and can't"><div id="lessonname">Can and can't</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Quadrilaterals" title="Quadrilaterals"><div id="lessonname">Quadrilaterals</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li>
+</div>
+<div id="week7" class="lessonlist">
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Can and can't" title="Can and can't"><div id="lessonname">Can and can't</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Quadrilaterals" title="Quadrilaterals"><div id="lessonname">Quadrilaterals</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Everyday expressions" title="Everyday expressions"><div id="lessonname">Everyday expressions</div></a></li>
+</div>
+<div id="week8" class="lessonlist">
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Quadrilaterals" title="Quadrilaterals"><div id="lessonname">Quadrilaterals</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li>
+<li><a href="tab_grade8"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Everyday expressions" title="Everyday expressions"><div id="lessonname">Everyday expressions</div></a></li>
+<li><a href="tab_grade7"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Can and can't" title="Can and can't"><div id="lessonname">Can and can't</div></a></li>
 </div>
 </div>
 </div>
diff --git a/css/chakra.css b/css/chakra.css
index 5fe7f01..2c7ce06 100755
--- a/css/chakra.css
+++ b/css/chakra.css
@@ -5,12 +5,18 @@ margin:0;
 padding:0;
 }
 
+img
+{
+border: none;
+}
+
 #navigation
 {
 background: #6E6E6E;
-font-weight: bold;
 padding-bottom: 0.1em;
 padding-top: 0.1em;
+width: 100%;
+float: left;
 }
 
 #navigation img
@@ -19,12 +25,12 @@ border: none;
 height: 30px;
 }
 
-#nav_left
+.nav_left
 {
 float: left;
 }
 
-#nav_right
+.nav_right
 {
 float: right;
 }
@@ -139,14 +145,14 @@ outline-color: #424242;
 #week_select
 {
 list-style: none;
-padding: 0;
-margin: 0;
+display: inline;
 }
 
 #week_select li
 {
 float:left;
 font-weight: bold;
+line-height: 2em;
 }
 
 #week_select li a
@@ -155,17 +161,18 @@ text-decoration: none;
 text-align: center;
 float: left;
 color:#000000;
-padding-top: 0.5em;
-padding-bottom: 0.5em;
-padding-right: 0.7em;
-padding-left: 0.7em;
+padding-right: 0.6em;
+padding-left: 0.6em;
 }
 
-#week_select a:hover {
+#week_select a:hover
+{
 text-decoration: underline;
+background:#BDBDBD;
 }
 
-#week_select a.selected {
+#week_select a.selected
+{
 text-decoration: underline;
 background:#BDBDBD;
 }
@@ -177,41 +184,18 @@ text-align: center;
 font-weight: bold;
 }
 
-#lesson img
-{
-width: 250px;
-display:block;
-margin-left:auto;
-margin-right:auto; 
-}
-
-#lesson
-{
-float: left;
-width: 50%;
-height: 12em;
-line-height: 1.5em;
-}
-
 #weeks
 {
 list-style: none;
-background:#6E6E6E;
+background:#BDBDBD;
 float: left;
 width: 100%;
 font-weight: bold;
 }
 
-#weeks div div
-{
-text-decoration: none;
-text-align: center;
-font-weight: bold;
-}
-
-#weeks div div img
+.preview
 {
-width: 200px;
+width: 250px;
 }
 
 #weeks li
@@ -228,12 +212,13 @@ float: left;
 color:#000000;
 padding-top: 0.5em;
 padding-bottom: 0.5em;
-padding-right: 0.7em;
-padding-left: 0.7em;
+padding-right: 0.8em;
+padding-left: 0.8em;
 }
 
 #weeks a:hover {
-  text-decoration: underline;
+text-decoration: underline;
+background:#BDBDBD;
 }
 
 #weeks a.selected {
@@ -241,6 +226,26 @@ text-decoration: underline;
 background:#BDBDBD;
 }
 
+.weeklist
+{
+background:#6E6E6E;
+width: 100%;
+}
+
+.lessonlist a
+{
+width: 280px;
+height: 220px;
+margin-top: 1em;
+}
+
+.lessonlist a:hover {
+text-decoration: underline;
+outline-width:3px;
+outline-style:solid;
+outline-color: #424242;
+}
+
 #admin ul
 {
 list-style: none;
@@ -282,63 +287,6 @@ background:#BDBDBD;
 padding: 3;
 }
 
-#week
-{
-list-style: none;
-padding: 0;
-margin: 0;
-background:#BDBDBD;
-float:left;
-width: 100%;
-}
-
-#week li
-{
-float: left;
-}
-
-#week li a
-{
-height: auto;
-text-decoration: none;
-text-align: center;
-font-weight: bold;
-float: left;
-color:#000000;
-padding: 4em;
-}
-
-#week img
-{
-border: none;
-}
-
-#week a:hover {
-  text-decoration: underline;
-}
-
-#week a.selected {
-text-decoration: underline;
-}
-
-#admin img
-{
-border: none;
-}
-
-#chakra
-{
-background: #FFFFFF;
-width: 50px;
-}
-
-#chakra img
-{
-float: left;
-width: 50px;
-height: 50px;
-}
-
 #grade-menu
 {
 list-style: none;
@@ -371,53 +319,4 @@ text-decoration: underline;
 
 #grade-menu a.selected {
 text-decoration: underline;
-}
-
-#lessonlist ul
-{
-list-style: none;
-padding: 0.1em;
-float: left;
-}
-
-#lessonlist ul li ul
-{
-float: right;
-}
-
-#lessonlist li
-{
-float: left;
-margin: 0 0.15em;
-}
-
-#lessonlist
-{
-#float: left;
-}
-
-#lessonlist li a
-{
-height: 1.5em;
-line-height: 1.5em;
-width: 1.5em;
-display: block;
-border: 0.1em solid #dcdce9;
-color: #0d2474;
-text-decoration: none;
-text-align: center;
-background: #BDBDBD;
-}
-
-#lessons a:hover {
-background:#FFFFFF;
-border-bottom:1px solid #dcdce9;
-text-decoration: underline;
-}
-
-#lessons a.selected {
-background:#FFFFFF;
-color:#CC0000;
-font-weight:bold;
-text-decoration: underline;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 999da7e..0eac9b7 100755
--- a/index.html
+++ b/index.html
@@ -20,8 +20,9 @@
 
 <div id="mainmenu">
 <div id="navigation">
-<img src="assets/default/images/chakra_logo.png" alt="Home" title="Home"> <img id="nav_right" src="assets/default/images/help.png" alt="Help" title="Help">
-<img id="nav_right" src="assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma">
+<img src="assets/default/images/chakra_logo.png" alt="Home" title="Home">
+<img class="nav_right" src="assets/default/images/help.png" alt="Help" title="Help">
+<img class="nav_right" src="assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma">
 </div>
 <div id="grades">
 <ul>