moved monthSelect into navigation, improved month and week selection look

2 files changed, 40 insertions, 21 deletions

diff --git a/chakra/grade1mathematics.html b/chakra/grade1mathematics.html
index 6568d2b..58884b4 100644
--- a/chakra/grade1mathematics.html
+++ b/chakra/grade1mathematics.html
@@ -26,31 +26,31 @@
 		<img src="../assets/default/images/help.png" alt="Help" title="Help" class="topNav floatRight" />
 		<img src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight" />
 	</nav>
-</section>
-
-<section id="middle">
 	<section id="curriculum">
 		<a href="#">Link</a> to subject curriculum.</a>
 	</section>
 	<section id="monthSelect">
-		<header>Months</header>
-		<ul class="menuSelectType">
-			<li><a href="#weeksA"><img src="../assets/default/images/month_A.png"/></a></li>
-			<li><a href="#weeksB"><img src="../assets/default/images/month_B.png"/></a></li>
-			<li><a href="#weeksC"><img src="../assets/default/images/month_C.png"/></a></li>
-			<li><a href="#weeksD"><img src="../assets/default/images/month_D.png"/></a></li>
-			<li><a href="#weeksE"><img src="../assets/default/images/month_E.png"/></a></li>
-			<li><a href="#weeksF"><img src="../assets/default/images/month_F.png"/></a></li>
-			<li><a href="#weeksG"><img src="../assets/default/images/month_G.png"/></a></li>
-			<li><a href="#weeksH"><img src="../assets/default/images/month_H.png"/></a></li>
-			<li><a href="#weeksI"><img src="../assets/default/images/month_I.png"/></a></li>
-			<li><a href="#weeksJ"><img src="../assets/default/images/month_J.png"/></a></li>
-		</ul>
-	</section><!-- end monthSelect -->
+	<header class="floatLeft">Months</header>
+	<ul class="menuSelectType">
+		<li><a href="#weeksA"><img src="../assets/default/images/month_A.png"/></a></li>
+		<li><a href="#weeksB"><img src="../assets/default/images/month_B.png"/></a></li>
+		<li><a href="#weeksC"><img src="../assets/default/images/month_C.png"/></a></li>
+		<li><a href="#weeksD"><img src="../assets/default/images/month_D.png"/></a></li>
+		<li><a href="#weeksE"><img src="../assets/default/images/month_E.png"/></a></li>
+		<li><a href="#weeksF"><img src="../assets/default/images/month_F.png"/></a></li>
+		<li><a href="#weeksG"><img src="../assets/default/images/month_G.png"/></a></li>
+		<li><a href="#weeksH"><img src="../assets/default/images/month_H.png"/></a></li>
+		<li><a href="#weeksI"><img src="../assets/default/images/month_I.png"/></a></li>
+		<li><a href="#weeksJ"><img src="../assets/default/images/month_J.png"/></a></li>
+	</ul>
+</section><!-- end monthSelect -->
+</section>
+
+<section id="middle">
 
 	<section id="weeks">
 		<section id="weeksA" class="weekList">
-			<header>Month A - Weeks</header>
+			<header class="floatLeft">Weeks</header>
 			<ul class="menuSelectType">
 				<li><a href="#week1"><img src="../assets/default/images/week1.png"/></a></li>
 				<li><a href="#week2"><img src="../assets/default/images/week2.png"/></a></li>
@@ -61,6 +61,12 @@
 			<article id="week1" class="lesson">
 				<header class="lessonName">Quadrilaterals</header>
 				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /></a>
+				<header class="lessonName">Adding up to 10</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a>
+				<header class="lessonName">Everyday expressions</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview3.jpg" alt="Everyday expressions" title="Everyday expressions" /></a>
+				<header class="lessonName">Can and can't</header>
+				<a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview4.jpg" alt="Can and can't" title="Can and can't" /></a>
 			</article>
 		
 			<article id="week2" class="lesson">
@@ -79,7 +85,7 @@
 			</article>
 		</section><!-- end weeksA -->
 		<section id="weeksB" class="weekList">
-			<header>Month B - Weeks</header>
+			<header class="floatLeft">Weeks</header>
 			<ul class="menuSelectType">
 				<li><a href="#week5"><img src="../assets/default/images/week1.png"/></a></li>
 				<li><a href="#week6"><img src="../assets/default/images/week2.png"/></a></li>
@@ -104,7 +110,7 @@
 			</article>
 		</section><!-- end weeksB -->
 		<section id="weeksC" class="weekList">
-			<header>Month C - Weeks</header>
+			<header class="floatLeft">Weeks</header>
 			<ul class="menuSelectType">
 				<li><a href="#week9"><img src="../assets/default/images/week1.png"/></a></li>
 				<li><a href="#week10"><img src="../assets/default/images/week2.png"/></a></li>
diff --git a/css/chakra.css b/css/chakra.css
index dbe1ae2..71b1ca9 100644
--- a/css/chakra.css
+++ b/css/chakra.css
@@ -19,6 +19,10 @@ img
 	border: none;
 }
 
+.selected {
+	background: #FFFFFF;
+}
+
 /* ====================================== */
 /* ========== HTML ELEMENTS ============= */
 h1 { }
@@ -52,6 +56,13 @@ header, footer, aside, nav, article, section {
 		margin: 0 auto;
 	}
 
+#monthSelect header {
+	text-align: left;
+	font-size: 1.4em;
+	margin: 5px 0 5px 0;
+	padding-bottom: 2px;
+}
+	
 .topNav {
 	width: 30px;
 	height: 30px;
@@ -60,11 +71,13 @@ header, footer, aside, nav, article, section {
 .floatLeft {
 	float: left;
 	margin-left: 5px;
+	margin-bottom: 5px;
 }
 
 .floatRight {
 	float: right;
 	margin-right: 5px;
+	margin-bottom: 5px;
 }
 
 /* ====================================== */
@@ -108,7 +121,7 @@ header, footer, aside, nav, article, section {
 	.middleRow ul li:hover {
 		text-decoration: underline;
 		border: 3px solid #424242;
-	}	
+	}
 
 /* ====================================== */
 /* ============ ADMIN SECTION =========== */