A new skin

git-svn-id: svn://svn.alpinelinux.org/acf/core/trunk@230 ab2d0c66-481e-0410-8bed-d214d4d58bed

1 files changed, 112 insertions, 48 deletions

diff --git a/www/static/webconf.css b/www/static/webconf.css
index 2c09494..071d959 100644
--- a/www/static/webconf.css
+++ b/www/static/webconf.css
@@ -3,7 +3,7 @@
 
 /* Default definitions */
 body {
-	background: #fff url("/static/alpine.gif") no-repeat top center;
+	background: #fff url("/static/header_body.png") no-repeat 5px 5px;
 	font-family: Geneva, Arial, Helvetica, San-Serif;
 	margin: 0em;
 	padding: 0em;
@@ -39,14 +39,43 @@ pre.code {
 	padding: .5em;
 }
 /*----------------------------------------------------------------------------------
+ * Logotypes and icons
+ *----------------------------------------------------------------------------------
+ */
+#logo {
+	margin: 25px 0px 0px 194px;
+	padding: 0px 0px 0px 0px;
+	width: 680px;
+	height: 76px;
+//	color: #333;
+	position: absolute;
+//	border: 1px #0FF solid;
+	background: #fff url("/static/alpine.png") no-repeat top left;
+}
+
+/*----------------------------------------------------------------------------------
  * Header
  *----------------------------------------------------------------------------------
  */
 #head {
-	padding: 1em 1em 1em 0em;
-	color: #333; 
+//	margin: 0px 0px 0px 200px;
+	margin: 0px 0px 0px 0px;
+	padding: 163px 0px 0px 70px;
+	width: 150px;
+//	height: 10px;
+	color: #333;
+//	border: 1px #0FF solid;
+	background: transparent url("/static/alpine_logo.png") no-repeat top left;
+//	background: #cff url("/static/alpine.png") no-repeat 100px 50px;
+//	background: transparent url("/static/alpine_org.png") no-repeat top left;
 	// margin: -1em 0em 0em 0em;
-	padding: 1em;
+//	padding: 1em;
+
+//	background: #fcf;
+//	height: 80px;
+//	width: 200px;
+//	float: left top;
+	position: absolute;
 	}
 
 #head h1 {
@@ -54,13 +83,13 @@ pre.code {
 	color: #33A;
 	// font-family: Palatino, Times-Roman, Serif;
 	font-weight: bold;
-	margin: 0em 0em 0em 0em;
+	margin: 0em 0em 0em 0px;
 	//float: left;
 	// width: 49%;
 	}
 
 #head h2 {
-	margin: 0em 0em 0em 0em;
+//	margin: 0em 0em 0em 0em;
 	font-size: 100%;
 	font-weight: light;
 	float: right;
@@ -87,30 +116,32 @@ pre.code {
 	display: block;
 	background: #eee;
 	// border: 1px #222 solid;
-	width: 19%;
+	width: 180px;
+//	height: 100em;
 	float: left;
-	margin: 5em 0em 0em 1em;
-	padding: 0em 0em 0em .5em;
-	// border-right: 1px #ccc solid;
+	margin: 180px 0px 0px 5px;
+	padding: 5px 0px 5px 10px;
+	border: 1px #57b solid;
+	border-right: none;
 	}
 
 #mainmenu h3 {
 	// background-color: #eee;
 	color: #448;
-	padding:  .25em 0em  0em .25em;
+	padding: 10px 0px 0px 0px;
 	font-weight: normal;
 	font-size: 138%;
 	margin: 0em 0em .1em 0em;
 	}
 
 #mainmenu ul {
-	padding: .2em 0em .6em 1em;
+	padding: 0px 0px 0px 0px;
 	margin: 0;
 	list-style-type: none;
 	}
 #mainmenu li {
 	background-color: inherit;
-	padding: .1em 0em .1em 1em;
+	padding: 2px 2px 2px 10px;
 	}
 
 #mainmenu a:hover {
@@ -123,8 +154,11 @@ pre.code {
 	 
 #mainmenu #selected {
 	background-color: #fff;
-	// border: 1px solid #666;
-	//border-right: 1px solid #ffd;
+//	border: 1px solid #666;
+	border: 1px #57b solid;
+	border-right: none;
+	font-weight: Bold;
+	color: #24a;
 	}
 	
 
@@ -133,11 +167,15 @@ pre.code {
  *----------------------------------------------------------------------------------
  */
 #submenu {
-	width: 75%;
-	margin: 0 1em 0 0;
+//	width: 75%;
+	margin: 73px 10px 0px 195px;
+//	height: 60px;
 //	font-weight: Bold;
-	background: transparent url(/static/greypx.gif) repeat-x bottom left;
-	float: right;
+	//background: transparent url(/static/greypx.gif) repeat-x center left;
+//	background: #ff0;
+//	float: right;
+	position: absolute;
+	//border: 1px #f00 solid;
 	}
 	
 #submenu p {
@@ -146,17 +184,17 @@ pre.code {
 
 #submenu h2 {
 	font-weight: normal;
-	font-size: 161%;
+	font-size: 10pt;
 	color: #228;
 	float: left;
-	margin: 0em;
-	margin-top: .2em;
+	margin: 10px 0px 0px 5px;
+//	margin-top: .2em;
 	}
 
 #submenu ul {
-	margin: 0em 2em 0em 0em;
+	margin: 0px 0px 0px 0px;
 	list-style: none;
-	padding: 0em 2em 0em 2em;
+	padding: 0em 20px 0em 20px;
 	float: right;
 	background: transparent;
 	}
@@ -169,10 +207,16 @@ pre.code {
 	// margin: 0em .5em 0em .5em;
 	// border-bottom: none;
 	color: #33A;
-	background: transparent url("/static/unselected.gif") repeat-x top left;
+//	background: transparent url("/static/unselected.gif") repeat-x top left;
+	background: #eee;
+	display: block;
+	font-size: 10pt;
 	float: left;
-	margin: 0;
-	padding: 0;
+	margin: 0px;
+	padding: 7px 7px;
+	height: 15px;
+	border: 1px #57b solid;
+//	border-bottom: 1px #fff solid;
 	}
 
 #submenu #selected {
@@ -180,10 +224,15 @@ pre.code {
 	background: #fff;
 	display: block;
 	float: left;
-	margin: 0em;
-	padding: .75em 1em;
-	border: 1px solid #ccc;
-	border-bottom: none;
+	font-weight: Bold;
+	font-size: 10pt;
+	color: #24a;
+	margin: 0px;
+	height: 15px;
+	padding: 7px 7px;
+//	border: 1px solid #ccc;
+	border: 3px #57b solid;
+	border-bottom: 1px #fff solid;
 	}
 
 
@@ -191,9 +240,11 @@ pre.code {
 	display: block;
 	float: left;
 	margin: 0em;
-	padding: .75em 1em;
-	border: 1px solid #ccc;
-	border-bottom: none;
+	padding: 0px 0px;
+//	border: 1px solid #ccc;
+	
+//	border: 1px #57b solid;
+//	border-bottom: none;
 	// background: #eee;
 	} 
 
@@ -208,21 +259,30 @@ pre.code {
  *----------------------------------------------------------------------------------
  */
 #content {
-	display: block;
+	margin: 180px 10px 0px 195px;
+//	display: block;
+//	display: inline;
 	float:left;
-	width: 70%;
+//	width: 800px;
 	color: #333;
-	padding: 2em 0em 3em 3em;
+	padding: 0px 0px 0px 10px;
+	position: absolute;
 	// border-left: #ccc 1px solid;
+//	background: #fcc;
+//	border: 1px #0F0 solid;
 	}
 
 #content h1 {
 	font-size: 120%;
-	// width: 100%;
+	text-align: left;
+//	width: 400px;
+	width: 100%;
 	background-color: #eee;
 	border-bottom: 2px solid #aaa;
-	margin: 1em 0em 1em 0em;
-	clear: both;
+//	margin: 10px 0px 0px 0px;
+//	clear: both;
+//	display: block;
+//	float: right;
 	}
  
 #content h2 {
@@ -246,7 +306,7 @@ pre.code {
 #content p {
 	// margin: 1em 1em 0em 1em;
 	clear: both;
-	padding: .5em 0em .5em 0em;
+//	padding: .5em 0em .5em 0em;
 	}
 
 #content p.error {
@@ -320,7 +380,7 @@ pre.code {
 	}
 	
 #content form {
-	padding: 1em 0em;
+//	padding: 1em 0em;
 	}
 
 #content dl {
@@ -354,14 +414,18 @@ pre.code {
  */
 
 #footer {
+	margin: 50px 0px 20px 0px;
 	float: right;
-	clear: both;
+//	position: relative;
+//	clear: both;
 	text-align: center;
-	font-size: 80%;
-	width: 70%;	
-	color: #666;
-	margin: 1em 3em 1em 2em;
-	padding: 1em 0em 1em;
+	vertical-align: middle;
+	font-size: 10pt;
+	width: 100%;	
+	color: #bbb;
+//	margin: 0 0 0 0;
+	padding: 0 0 0 0;
 	border-top: 1px dotted #ccc;
 	border-bottom: 1px dotted #ccc;
+//	background: #ccf;
 	}