cleaned up 2nd page of chakra

27 files changed, 203 insertions, 118 deletions

diff --git a/assets/default/images/chakra_logo.png b/assets/default/images/chakra_logo.png
index b7f9b3a..b7f9b3a 100755..100644
--- a/assets/default/images/chakra_logo.png
+++ b/assets/default/images/chakra_logo.png
diff --git a/assets/default/images/english.png b/assets/default/images/english.png
index 6a3eaab..6a3eaab 100755..100644
--- a/assets/default/images/english.png
+++ b/assets/default/images/english.png
diff --git a/assets/default/images/favicon.ico b/assets/default/images/favicon.ico
index 20bf7f1..20bf7f1 100755..100644
--- a/assets/default/images/favicon.ico
+++ b/assets/default/images/favicon.ico
diff --git a/assets/default/images/geography.png b/assets/default/images/geography.png
index 3a9a2dc..3a9a2dc 100755..100644
--- a/assets/default/images/geography.png
+++ b/assets/default/images/geography.png
diff --git a/assets/default/images/grade1.png b/assets/default/images/grade1.png
index 2e27b65..2e27b65 100755..100644
--- a/assets/default/images/grade1.png
+++ b/assets/default/images/grade1.png
diff --git a/assets/default/images/grade2_bw.png b/assets/default/images/grade2_bw.png
index 28eb7c0..28eb7c0 100755..100644
--- a/assets/default/images/grade2_bw.png
+++ b/assets/default/images/grade2_bw.png
diff --git a/assets/default/images/grade3.png b/assets/default/images/grade3.png
index 8248bf0..8248bf0 100755..100644
--- a/assets/default/images/grade3.png
+++ b/assets/default/images/grade3.png
diff --git a/assets/default/images/grade4_bw.png b/assets/default/images/grade4_bw.png
index c597442..c597442 100755..100644
--- a/assets/default/images/grade4_bw.png
+++ b/assets/default/images/grade4_bw.png
diff --git a/assets/default/images/grade5_bw.png b/assets/default/images/grade5_bw.png
index a8a9d8a..a8a9d8a 100755..100644
--- a/assets/default/images/grade5_bw.png
+++ b/assets/default/images/grade5_bw.png
diff --git a/assets/default/images/grade6.png b/assets/default/images/grade6.png
index 26e6f9b..26e6f9b 100755..100644
--- a/assets/default/images/grade6.png
+++ b/assets/default/images/grade6.png
diff --git a/assets/default/images/grade7_bw.png b/assets/default/images/grade7_bw.png
index 6ff1dd1..6ff1dd1 100755..100644
--- a/assets/default/images/grade7_bw.png
+++ b/assets/default/images/grade7_bw.png
diff --git a/assets/default/images/grade8_bw.png b/assets/default/images/grade8_bw.png
index 15b3be7..15b3be7 100755..100644
--- a/assets/default/images/grade8_bw.png
+++ b/assets/default/images/grade8_bw.png
diff --git a/assets/default/images/health.png b/assets/default/images/health.png
index 305c8d0..305c8d0 100755..100644
--- a/assets/default/images/health.png
+++ b/assets/default/images/health.png
diff --git a/assets/default/images/help.png b/assets/default/images/help.png
index 9209167..9209167 100755..100644
--- a/assets/default/images/help.png
+++ b/assets/default/images/help.png
diff --git a/assets/default/images/history.png b/assets/default/images/history.png
index 79a79c0..79a79c0 100755..100644
--- a/assets/default/images/history.png
+++ b/assets/default/images/history.png
diff --git a/assets/default/images/karma_logo.png b/assets/default/images/karma_logo.png
index fa04651..dc8610a 100755..100644
--- a/assets/default/images/karma_logo.png
+++ b/assets/default/images/karma_logo.png
diff --git a/assets/default/images/mathematics.png b/assets/default/images/mathematics.png
index e8a6ee2..e8a6ee2 100755..100644
--- a/assets/default/images/mathematics.png
+++ b/assets/default/images/mathematics.png
diff --git a/assets/default/images/music.png b/assets/default/images/music.png
index 0530497..0530497 100755..100644
--- a/assets/default/images/music.png
+++ b/assets/default/images/music.png
diff --git a/assets/default/images/mystuff.png b/assets/default/images/mystuff.png
index 40d3dba..40d3dba 100755..100644
--- a/assets/default/images/mystuff.png
+++ b/assets/default/images/mystuff.png
diff --git a/assets/default/images/nepali.png b/assets/default/images/nepali.png
index 08b82a7..08b82a7 100755..100644
--- a/assets/default/images/nepali.png
+++ b/assets/default/images/nepali.png
diff --git a/assets/default/images/profile.png b/assets/default/images/profile.png
index 16b5f9b..16b5f9b 100755..100644
--- a/assets/default/images/profile.png
+++ b/assets/default/images/profile.png
diff --git a/assets/default/images/science.png b/assets/default/images/science.png
index 7422dcb..7422dcb 100755..100644
--- a/assets/default/images/science.png
+++ b/assets/default/images/science.png
diff --git a/chakra/grade1.html b/chakra/grade1.html
index 102c861..043d004 100755..100644
--- a/chakra/grade1.html
+++ b/chakra/grade1.html
@@ -1,9 +1,8 @@
-<html lang="en">
-
+<!doctype html>
+<html>
 <head>
 <title>Chakra (Alpha)</title>
 <meta name="keywords" content="karma,javascript,html5,sugar,sugarlabs,gsoc,ole,nepal">
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta charset="utf-8">
 
 <link rel="stylesheet" href="../css/chakra.css" type="text/css"/>
@@ -14,33 +13,39 @@
 <script type="text/javascript" src="../js/jquery.jgrowl_minimized.js"></script>
 <script type="text/javascript" src="../js/jquery.idTabs.min.js"></script>
 
-<link type="image/ico" rel="icon" href="../../assets/default/images/favicon.ico" /> 
-
+<link type="image/ico" rel="icon" href="./../assets/default/images/favicon.ico" /> 
 </head>
 
 <body>
 
-<div id="mainmenu">
-<div id="navigation">
-<a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Chakra icon" title="Chakra" class="chakra_logo"></a>
-<img src="../assets/default/images/grade1.png" alt="Grade 1 icon" class="icon_left">
-
-<img src="../assets/default/images/help.png" alt="Help" title="Help" class="icon_right">
-<img src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="icon_right">
-</div>
-<div id="subjects">
-<ul>
-<li id="grade1"><a href="grade1english.html"><img src="../assets/default/images/english.png" alt="English" title="English">English</a></li>
-<li id="grade2"><a href="grade1mathematics.html"><img src="../assets/default/images/mathematics.png" alt="Mathematics" title="Mathematics">Mathematics</a></li>
-<li id="grade3"><a href="#tab_grade3"><img src="../assets/default/images/science.png" alt="Science" title="Science">Science</a></li>
-<li id="grade4"><a href="#tab_grade4"><img src="../assets/default/images/geography.png" alt="Geography" title="Geography">Geography</a></li>
-<li id="grade5"><a href="#tab_grade5"><img src="../assets/default/images/music.png" alt="Music" title="Music">Music</a></li>
-<li id="grade6"><a href="#tab_grade6"><img src="../assets/default/images/nepali.png" alt="Nepali" title="Nepali">Nepali</a></li>
-<li id="grade7"><a href="#tab_grade7"><img src="../assets/default/images/history.png" alt="History" title="History">History</a></li>
-<li id="grade8"><a href="#tab_grade8"><img src="../assets/default/images/health.png" alt="Health" title="Health">Health</a></li>
-</ul>
-</div>
-</div>
+<section id="navigation">
+	<nav id="knavbar">
+		<section id="knavbarLeft">
+		<a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Chakra Home" class="topNav floatLeft"></a>
+		<img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1" class="topNav floatLeft">
+		<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">
+		</section>
+	</nav>
+</section>
+
+<section id="middle">
+	<section class="middleRow">
+	<ul>
+		<li><a href="grade1english.html"><img src="../assets/default/images/english.png" alt="English" title="English"><p>English</p></a></li>
+		<li><a href="grade1mathematics.html"><img src="../assets/default/images/mathematics.png" alt="Mathematics" title="Mathematics"><p>Mathematics</p></a></li>
+		<li><a href="#tab_grade3"><img src="../assets/default/images/science.png" alt="Science" title="Science"><p>Science</p></a></li>
+		<li><a href="#tab_grade4"><img src="../assets/default/images/geography.png" alt="Geography" title="Geography"><p>Geography</p></a></li>
+	</ul>
+	</section>
+	<section class="middleRow">
+	<ul>
+		<li><a href="#tab_grade5"><img src="../assets/default/images/music.png" alt="Music" title="Music"><p>Music</p></a></li>
+		<li><a href="#tab_grade6"><img src="../assets/default/images/nepali.png" alt="Nepali" title="Nepali"><p>Nepali</p></a></li>
+		<li><a href="#tab_grade7"><img src="../assets/default/images/history.png" alt="History" title="History"><p>History</p></a></li>
+		<li><a href="#tab_grade8"><img src="../assets/default/images/health.png" alt="Health" title="Health"><p>Health</p></a></li>
+	</ul>
+</section>
 
 </body>
 </html>
diff --git a/chakra/grade1english.html b/chakra/grade1english.html
index f9b6f54..f9b6f54 100755..100644
--- a/chakra/grade1english.html
+++ b/chakra/grade1english.html
diff --git a/chakra/grade1mathematics.html b/chakra/grade1mathematics.html
index b6a1215..b6a1215 100755..100644
--- a/chakra/grade1mathematics.html
+++ b/chakra/grade1mathematics.html
diff --git a/css/chakra.css b/css/chakra.css
index 901eaaa..35ad961 100755..100644
--- a/css/chakra.css
+++ b/css/chakra.css
@@ -1,8 +1,17 @@
+/* ====================================== */
+/* ====== CHAKRA CSS TEMPLATE FILE ====== */
+/* ====================================== */
+
+/* ====================================== */
+/* ========= MAIN PROPERTIES ============ */
 body
 { 
 	background: #D8D8D8;
-	margin: 0;
+	margin: 0 auto;
+	width: 80%;
+	min-width: 640px;
 	padding: 0;
+	font-family: "Georgia", serif;
 }
 
 img
@@ -10,91 +19,146 @@ img
 	border: none;
 }
 
-#page_container {
-	width: 100%;
+/* ====================================== */
+/* ========== HTML ELEMENTS ============= */
+h1 { }
+h2 { }
+h3 { }
+h4 { }
+h5 { }
+h6 { }
+p { }
+span { }
+
+/* ====================================== */
+/* ========== HTML 5 ELEMENTS =========== */
+header, footer, aside, nav, article {
+	display: block;
 }
 
+/* ====================================== */
+/* =========== NAVIGATION BAR =========== */
 #navigation
 {
-	width: 640px;
+	display: block;
+	width: 100%;
 	background: #6E6E6E;
-	padding-bottom: 0.1em;
-	padding-top: 0.1em;
-	margin: 0 auto;
+	padding-top: 0.2em;
+	padding-bottom: 0.2em;
 }	
-
-.top-nav {
+	#knavbar {
+		display: table;
+		width: 640px;
+		margin: 0 auto;
+	}
+	#knavbarLeft {
+		display: table-cell;
+	}
+	#knavbar aside {
+		display: table-cell;
+	}
+
+.topNav {
 	width: 30px;
 	height: 30px;
 }
 
-.left-float {
+.floatLeft {
 	float: left;
-	margin-right: 3px;
-}
-
-.right-float {
-	float: right;
 	margin-left: 3px;
 }
 
-.clear-float {
-	clear: both;
-	line-height: 0px;
-}
-
-#month
-{
-	vertical-align: middle;
+.floatRight {
 	float: right;
+	margin-right: 3px;
 }
 
-#grades
+/* ====================================== */
+/* =========== MIDDLE SECTION =========== */
+#middle
 {
-	width: 640px;
+	display: block;
 	padding: .5em 0 .5em 0;
-	margin: 0 auto;
 	background: #BDBDBD;
 }
-
-#grades ul
-{
-	list-style: none;
-	padding: 0;
-	margin: 0;
+	.middleRow ul { 
+		display: table; 
+		margin: 0 auto;
+		padding: 0;
+		background: #BDBDBD;
+	}
+	.middleRow ul li {
+		display: table-cell;
+		text-align: center;
+		margin: 0;
+		border: 3px solid #BDBDBD;
+	}
+	.middleRow ul li a {
+		display: block;
+		text-decoration: none;
+		font-weight: bold;
+		color: #000;
+		padding: 0.4em;
+	}
+	.middleRow ul li a img {
+		width: 120px;
+	}
+	.middleRow ul li:hover {
+		text-decoration: underline;
+		border: 3px solid #424242;
+	}
+
+/* ====================================== */
+/* ============ ADMIN SECTION =========== */
+#admin {
+	display: block;
+	background: #4080c0;
+	width: 100%;
+	margin: 0 auto;
 }
 
-#grades p {
-	line-height: 0;
+#admin ul {
+	display: table;
+	list-style: none;
+	margin: 0 auto;
+	padding: .5em 0 .5em 0;
 }
 
-#grades ul li
-{
-	float: left;
-	width: 160px;
+#admin ul li {
+	display: table-cell;
 	text-align: center;
+	padding: 0.2em 2em 0.2em 2em;
 }
 
-#grades ul li a
+#admin ul li a
 {
+	display: block;
 	text-decoration: none;
-	text-align: center;
 	font-weight: bold;
 	color: #000000;
-	margin: .2em 0 .2em 0;
+}
+#admin ul li a:hover {
+	text-decoration: underline;
+}
+#admin p {
+	line-height: 0;
 }
 
-#grades ul li img
+#admin img
 {
-	border: none;
-	width: 120px;
+	height: 50px;
+	width: auto;
 }
 
-#grades li:hover {
-	text-decoration: underline;
-	outline-width: 3px;
-	outline-style: solid;
-	outline-color: #424242;
+
+/* ====================================== */
+/* ============  =========== */
+
+
+#month
+{
+	vertical-align: middle;
+	float: right;
 }
 
 #subjects
@@ -253,35 +317,35 @@ img
 }
 
 #admin {
+	display: block;
 	background: #4080c0;
-	width: 640px;
+	width: 100%;
 	margin: 0 auto;
 }
 
-#admin ul
-{
+#admin ul {
+	display: table;
 	list-style: none;
-	margin: 0;
+	margin: 0 auto;
 	padding: .5em 0 .5em 0;
 }
 
-#admin ul li
-{
-	float: left;
-	width: 210px;
+#admin ul li {
+	display: table-cell;
 	text-align: center;
+	padding: 0.2em 2em 0.2em 2em;
 }
 
 #admin ul li a
 {
-	height: 5.5em;
-	width: 210px;
+	display: block;
 	text-decoration: none;
-	text-align: center;
 	font-weight: bold;
 	color: #000000;
 }
-
+#admin ul li a:hover {
+	text-decoration: underline;
+}
 #admin p {
 	line-height: 0;
 }
diff --git a/index.html b/index.html
index c6b96cb..ffbfa10 100755..100644
--- a/index.html
+++ b/index.html
@@ -18,36 +18,52 @@
 </head>
 
 <body>
-<div id="page_container">
-<div id="navigation">
-<img src="assets/default/images/chakra_logo.png" alt="Home" title="Home" class="top-nav left-float"/>
-<img src="assets/default/images/help.png" alt="Help" title="Help" class="top-nav right-float"/>
-<img src="assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="top-nav right-float"/>
-<div class="clear-float">&nbsp;</div>
-</div><!-- end navigation -->
-<div id="grades">
-<ul>
-<li id="grade1"><a href="chakra/grade1.html"><img src="assets/default/images/grade1.png" alt="Grade 1" title="grade1"/><p>Grade 1</p></a></li>
-<li id="grade2"><a href="#tab_grade2"><img src="assets/default/images/grade2_bw.png" alt="Grade 2" title="grade2"/><p>Grade 2</p></a></li>
-<li id="grade3"><a href="#tab_grade3"><img src="assets/default/images/grade3.png" alt="Grade 3" title="grade3"/><p>Grade 3</p></a></li>
-<li id="grade4"><a href="#tab_grade4"><img src="assets/default/images/grade4_bw.png" alt="Grade 4" title="grade4"/><p>Grade 4</p></a></li>
-<li id="grade5"><a href="#tab_grade5"><img src="assets/default/images/grade5_bw.png" alt="Grade 5" title="grade5"/><p>Grade 5</p></a></li>
-<li id="grade6"><a href="#tab_grade6"><img src="assets/default/images/grade6.png" alt="Grade 6" title="grade6"/><p>Grade 6</p></a></li>
-<li id="grade7"><a href="#tab_grade7"><img src="assets/default/images/grade7_bw.png" alt="Grade 7" title="grade7"/><p>Grade 7</p></a></li>
-<li id="grade8"><a href="#tab_grade8"><img src="assets/default/images/grade8_bw.png" alt="Grade 8" title="grade8"/><p>Grade 8</p></a></li>
-</ul>
-<div class="clear-float">&nbsp;</div>
-</div><!-- end grades -->
-
-<div id="admin">
-<ul>
-<li id="profile"><a href="#tab_profile"><img src="assets/default/images/profile.png" alt="Student Profile" title="My profile"/><p>Student Profile</p></a></li>
-<li id="mystuff"><a href="#tab_mystuff"><img src="assets/default/images/mystuff.png" alt="My Stuff" title="My stuff"/><p>My Stuff</p></a></li>
-<li id="about"><a href="#tab_about"><img src="assets/default/images/karma_logo.png"  alt="About Karma" title="About Karma"/><p>About Karma</p></a></li>
-</ul>
-<div class="clear-float">&nbsp;</div>
-</div><!-- end admin -->
-
-</div><!-- end page_container -->
+<!--
+
+#  How best to add in knavbar?
+# How best to handle different screen resolutions?
+# Is it bad to use ul and ols for layout? 
+
+-->
+
+<section id="navigation">
+	<nav id="knavbar">
+		<section id="knavbarLeft">
+			<img src="assets/default/images/chakra_logo.png" alt="Home" title="Home" class="topNav floatLeft"/>
+		</section>
+		<aside>
+			<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"/>
+		</aside>
+	</nav>
+</section>
+
+<section id="middle">
+	<section class="middleRow">
+	<ul>
+		<li><a href="chakra/grade1.html"><img src="assets/default/images/grade1.png" alt="Grade 1" title="grade1"/><p>Grade 1</p></a></li>
+		<li><a href="#tab_grade2"><img src="assets/default/images/grade2_bw.png" alt="Grade 2" title="grade2"/><p>Grade 2</p></a></li>
+		<li><a href="#tab_grade3"><img src="assets/default/images/grade3.png" alt="Grade 3" title="grade3"/><p>Grade 3</p></a></li>
+		<li><a href="#tab_grade4"><img src="assets/default/images/grade4_bw.png" alt="Grade 4" title="grade4"/><p>Grade 4</p></a></li>
+	</ul>
+	</section>
+	<section class="middleRow">
+	<ul>
+		<li><a href="#tab_grade5"><img src="assets/default/images/grade5_bw.png" alt="Grade 5" title="grade5"/><p>Grade 5</p></a></li>
+		<li><a href="#tab_grade6"><img src="assets/default/images/grade6.png" alt="Grade 6" title="grade6"/><p>Grade 6</p></a></li>
+		<li><a href="#tab_grade7"><img src="assets/default/images/grade7_bw.png" alt="Grade 7" title="grade7"/><p>Grade 7</p></a></li>
+		<li><a href="#tab_grade8"><img src="assets/default/images/grade8_bw.png" alt="Grade 8" title="grade8"/><p>Grade 8</p></a></li>
+	</ul>
+	</section>
+</section><!-- end grades -->
+
+<section id="admin">
+	<ul>
+		<li id="profile"><a href="#tab_profile"><img src="assets/default/images/profile.png" alt="Student Profile" title="My profile"/><p>Student Profile</p></a></li>
+		<li id="mystuff"><a href="#tab_mystuff"><img src="assets/default/images/mystuff.png" alt="My Stuff" title="My stuff"/><p>My Stuff</p></a></li>
+		<li id="about"><a href="#tab_about"><img src="assets/default/images/karma_logo.png"  alt="About Karma" title="About Karma"/><p>About Karma</p></a></li>
+	</ul>
+</section><!-- end admin -->
+
 </body>
 </html>