basic template works for header and footer

6 files changed, 135 insertions, 145 deletions

diff --git a/css/epaath_images/bg_title_block.png b/css/epaath_images/bg_title_block.png
new file mode 100755
index 0000000..7311891
--- /dev/null
+++ b/css/epaath_images/bg_title_block.png
diff --git a/css/epaath_images/btn_back_hover.png b/css/epaath_images/btn_back_hover.png
new file mode 100755
index 0000000..0911fcc
--- /dev/null
+++ b/css/epaath_images/btn_back_hover.png
diff --git a/css/karma.css b/css/karma.css
index 454f3f5..50fb293 100755
--- a/css/karma.css
+++ b/css/karma.css
@@ -1,5 +1,9 @@
 /* import nepal's Themeroller theme */
+@import url(./ui.base.css);
 @import url(./theme/jquery-ui-1.7.2.custom.css);
+@import url(./ui.dialog.css);
+@import url(./ui.scoreboard.css);
+@import url(./ui.resizable.css);
 
 /*  special hack for the curren karma-loader notification  */
 @media screen {
@@ -21,172 +25,119 @@
 	}
 }
 
+body{
+    margin:0px;
+}
+
+
 
 #kHeader{
     background-image: url('./epaath_images/bg_header.png');
     background-repeat: repeat-x;
-    height: 89px;
-    width: 100%;
-    position: absolute;
-    top: 0em;
-
-/*
+    height: 80px;
     width: 100%;
-    height: 5.4em;
     position: absolute;
     top: 0em;
-*/
 }
 
+	#kHeader .left{
+    		 float: left;
+	}
 
+	#kHeader .right{
+    		 float: right;
+	}
 
+	#kHeader>div{
+		display:inline;
+		margin-left: 0.2em;
+		margin-right:0.2em
+	}
 
-#topbtn_left {
-	float: left;
-	height: 60px;
-	width: 60px;
-	padding-top: 13px;
-	padding-left: 5px;
-}
-	
-	
-#linkBack{
-    width: 60px;		
-    height: 59px;
-    background-image:url('./epaath_images/btn_back.png');
-}
-#linkBack:hover{
-    background:url('./epaath_images/btn_back_hover.png');
-}
+	#kHeader .kHeaderBtn{
+  		 width: 60px;
+		 height: 60px;
+		 margin-top: 13px;
+		 cursor:pointer;
+	}
 	
-#lesson_title {
-	float: left;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	font-size: 16pt;
-	font-weight: bold;
-	color: #FFFFFF;
-	margin-left: 10px;
-	background-image: url(./epaath_images/bg_title_block.png);
-}
-#topbtn_right {
-	float: right;
-	height: 60px;
-	width: 60px;
-	padding-top: 13px;
-	padding-right: 5px;
-}
-#linkHelp{
-    width: 60px;		height: 60px;
-    background:url(./epaath_images/btn_help.png);
-}
-		#linkHelp:hover{
-			background:url(./epaath_images/btn_help_hover.png);
-		}
-		#linkOle{
-			width: 60px;		height: 60px;
-			background:url(./epaath_images/btn_ole.png);
-		}
-		#linkOle:hover{
-			background:url(./epaath_images/btn_ole_hover.png);
-		}
-		#linkNext{
-			width: 60px;		height: 60px;
-			background:url(./epaath_images/btn_next.png);
-		}
-		#linkNext:hover{
-			background:url(./epaath_images/btn_next_hover.png);
-		}
+	#kHeaderBackBtn>a>div{
+		background-image:url(./epaath_images/btn_back.png);
+	}		
 
+	#kHeaderBackBtn>a>div:hover{
+		background:url('./epaath_images/btn_back_hover.png');
+	}
 
-#kFooter{
-  background-image: url('./epaath_images/bg_header.png');
-  width: 100%;
-  height: 5.4em;
-  position: absolute;
-  bottom: 0em;
-}
+	#kHeaderBackBtn>a>div{
+		background-image:url(./epaath_images/btn_back.png);
+	}
 
-#kFooter>div{
-  margin-top: 0.4em;
-  margin-bottom: 0.3em;
-  margin-right: 0.4em;
-  float:right;
-}
+	#kHeaderBackBtn>a>div:hover{
+		background:url('./epaath_images/btn_back_hover.png');
+	}
 
+	#kHeaderHelpBtn>a>div{
+		background-image:url(./epaath_images/btn_help.png);
+	}
 
-/*
+	#kHeaderHelpBtn>a>div:hover{
+		background:url(./epaath_images/btn_help_hover.png);
+	}
+
+	#kHeaderOleBtn>a>div{
+	    background-image:url(./epaath_images/btn_ole.png);
+	}
+
+	#kHeaderOleBtn>a>div:hover{
+	    background:url(./epaath_images/btn_ole_hover.png);
+	}
 
-#header {
-	background-image: url(../assets/image/bg_header.png);
-	background-repeat: repeat-x;
-	height: 89px;
-	width: 100%;
-	position: absolute;
-	left: 0px;
-	top: 0px;
-}
-#topbtn_left {
-	float: left;
-	height: 60px;
-	width: 60px;
-	padding-top: 13px;
-	padding-left: 5px;
-}
-	
-	
-	#linkBack{
-			width: 60px;		height: 59px;
-			background:url(../assets/image/btn_back.png);
-		}
-	#linkBack:hover{
-			background:url(../assets/image/btn_back_hover.png);
-		}
 	
-#lesson_title {
-	float: left;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	font-size: 16pt;
-	font-weight: bold;
-	color: #FFFFFF;
-	margin-left: 10px;
-	background-image: url(../assets/image/bg_title_block.png);
+#kHeaderLessonTitle {
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: 1.8em;
+    font-weight: bold;
+    color: #FFFFFF;
+    margin-left: 2em;
+    margin-top: 0.7em;
+    border:4px solid black;
+    padding-left:0.5em;
+    padding-right:0.5em;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    -moz-border-radius:35px;
+    -webkit-border-radius: 35px
 }
-#topbtn_right {
-	float: right;
-	height: 60px;
-	width: 60px;
-	padding-top: 13px;
-	padding-right: 5px;
+
+.ui-dialog-titlebar-close.ui-corner-all{
+ height:48px;
+ width: 48px;
+ top: 10%;
 }
-		#linkHelp{
-			width: 60px;		height: 60px;
-			background:url(../assets/image/btn_help.png);
-		}
-		#linkHelp:hover{
-			background:url(../assets/image/btn_help_hover.png);
-		}
-		#linkOle{
-			width: 60px;		height: 60px;
-			background:url(../assets/image/btn_ole.png);
-		}
-		#linkOle:hover{
-			background:url(../assets/image/btn_ole_hover.png);
-		}
-		#linkNext{
-			width: 60px;		height: 60px;
-			background:url(../assets/image/btn_next.png);
-		}
-		#linkNext:hover{
-			background:url(../assets/image/btn_next_hover.png);
-		}
-#footer {
-	background-image: url(../assets/image/bg_footer.png);
-	background-repeat: repeat-x;
-	position: absolute;
-	height: 69px;
-	width: 100%;
-	left: 0px;
-	bottom: 0px;
+
+#kFooter{
+    background-image: url('./epaath_images/bg_header.png');
+    width: 100%;
+    height: 5.4em;
+    position: absolute;
+    bottom: 0em;
 }
+       
+
+	#kFooter>div{
+		margin-top: 0.4em;
+    		margin-bottom: 0.3em;
+		margin-right: 0.4em;
+		float:right;
+	}
 
-*/
\ No newline at end of file
+	#kFooterCopyright{
+	    font-size: smaller;
+	    font-size: smaller;
+	    position: absolute;
+	    left: 0.5em;
+	    bottom: 0px;
+	    color: #fcbfe7;
+	    float: none;
+        }
diff --git a/css/ui.dialog.css b/css/ui.dialog.css
new file mode 100755
index 0000000..2997595
--- /dev/null
+++ b/css/ui.dialog.css
@@ -0,0 +1,13 @@
+/* Dialog
+----------------------------------*/
+.ui-dialog { position: relative; padding: .2em; width: 300px; }
+.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;  }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; } 
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
+.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
+.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
+.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; }
diff --git a/css/ui.dialog.css~ b/css/ui.dialog.css~
new file mode 100755
index 0000000..2997595
--- /dev/null
+++ b/css/ui.dialog.css~
@@ -0,0 +1,13 @@
+/* Dialog
+----------------------------------*/
+.ui-dialog { position: relative; padding: .2em; width: 300px; }
+.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;  }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; } 
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
+.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
+.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
+.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; }
diff --git a/css/ui.resizable.css b/css/ui.resizable.css
new file mode 100644
index 0000000..44efeb2
--- /dev/null
+++ b/css/ui.resizable.css
@@ -0,0 +1,13 @@
+/* Resizable
+----------------------------------*/
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
\ No newline at end of file