Snow works on IE7 and Firefox; cleaning up look now

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

1 files changed, 193 insertions, 335 deletions

diff --git a/www/snow/snow.css b/www/snow/snow.css
index 8e8bc6a..7804cf9 100644
--- a/www/snow/snow.css
+++ b/www/snow/snow.css
@@ -1,436 +1,294 @@
-/* "Snow" - a css for Alpine Configuration Framework - N. Angelacos 2007 - GPL2 */
+/* "Snow" - a css for Alpine Configuration Framework - 
+ * N. Angelacos 2007 - GPL2 */
 
 
-/* Default definitions */
-body { 
-	margin: 		0px 0px 0px 0px;
-	padding: 		0px 0px 0px 0px;
-	background:		url("alpine.jpg") no-repeat;
- 	background-position:	top center;
-	font-family: 		Helvetica, Geneva, Arial, SunSans-Regular, 
-					sans-serif, Verdana, "Trebuchet MS";
-}
+/* 
+ * -----------------------------------------------------------------------
+ * Debug Definitons
+ * -----------------------------------------------------------------------
+ */
+
+/* 
+ * -----------------------------------------------------------------------
+ * General Definitons
+ * -----------------------------------------------------------------------
+ */
 
-.hide {
+.hide	{
 	display:		none;
 	}
-	
-#page { 
-	position:		relative;
-	left:		0px;
-	top:		0px;
-}
 
-a {
-	text-decoration:	none;
-	border-bottom:	1px dotted #072966;
-	color:		#072966;
-}
-a:visited {
-	color:		#072966;
-}
-a:hover {
-	color:		red;
-}
-input {
-	border:		1px solid #ccc;
-}
-hr {
-	background-color:	#ff9933;
-	height: 		3px;
-}
-.error {
-	height:		0px;
-	font-size: 	11pt;
-	font-weight: 	bold;
-	color: 		#f33;
-}
+a, a:visited {
+	text-decoration:	underline;
+	color:			#072966;
+	}
 
-/*----------------------------------------------------------------------------------
- * Header, h-leader, h-nav, h-trailer
- *----------------------------------------------------------------------------------
- */
-#header {
-	position: 	relative;
-	margin: 		0px 0px 0px 0px;
-	padding: 		0px 0px 0px 0px;
-	// height: 		75px;
-	// background: 		url("alpine.jpg") no-repeat;
-	// background-position: 	top center;
-	//	border: 		1px solid #f00;
-}
+a:hover	{
+	background-color:	#4871b3;
+	color:			#fff;
+	}
 
-#logo {
-	float:		left;
-	width:		30%;
-	height:		70px;
-	display:	inline;
-	margin:		2px;
-	border:		0;
-	background:	url("logo-190x64.png") no-repeat;
 
+body 	{
+	background:	url("/static/alpine.jpg") no-repeat;
+	background-position:	top center;
+	font-family:	Arial, "Trebuchet MS",Geneva, Helvetica,  sans-serif;
+	font-size:	90%;
+	width:		100%;
 	}
 
-#logo .leader {
-	display:	none;
-	height:	0px;
-	}
 
-#logo .tailer {
-	 display:	none;
-	 height: 0px;
+.leader {
+	float:		left;
+	height:		0;
+	clear:		both;
 	}
 
-#logo h1 {
-	font-size:	200%;
-	display:	inline;
-	border:		0;
-	margin:		0;
-	display:	none;
+.tailer {
+	float:		left;
+	height:		0;
+	clear:		both;
+	}
+/*--------------------------------------------------------------------------------*/
+#page 	{ 
+	position:	relative;
 	}
 
-#logo p {
-	position:	absolute;
-	border:		0;
-	margin:		0;
-	bottom:		0;
-	left:		64px;
-	font-size:	75%;
-
+/*--------------------------------------------------------------------------------*/
+#header {
+	position: 	relative;
+	width:		100%;
 	}
 
 
 #header .mute {
-	float: 		right;
+	display:	inline;
+	float:		right;
 	font-size:      80%;
-	position:	absolute;
-	bottom:		0;
-	right:		1em;
+	margin:		8px 32px 0 0;
 	font-weight:	bold;
 	}
 
 #header .leader {
-	padding:		0.5em;
-	font-size:		60%;
-	float:			right;
-	display:		inline;
+	display:	none;
 	}
 
+#header .tailer {
+	clear: 		both;
+	width: 		100%;
+	background:	url("snowcap.gif") repeat-x; 
+	display:	block;
+	height: 	16px;
+	}
 
 
-#header .tailer {
-	clear: both;
-	width: 100%;
-	background:	url("snowcap.gif") repeat-x;
-	background-position: top right;
-	height: 16px;
+/*--------------------------------------------------------------------------------*/
+
+#logo {
+	float:		left;
+	width:		30%;
+	height:		70px;
+	display:	inline;
+	margin:		.25em;
+	background:	url("logo-190x64.png") no-repeat;
 	}
 
-.leader {
-	// clear: both;
-	// display: block;
+#logo .leader {
+	display:	none;
+	height:		0;
 	}
 
-.tailer {
-	/// clear:	both;
-	// display: block;
-	height:	0;
+#logo .tailer {
+	display:	none;
+	height:		0px;
 	}
 
-/*----------------------------------------------------------------------------------
- * Content and main menu
- *----------------------------------------------------------------------------------
- */
+#logo h1 {
+	font-size:	200%;
+	display:	none;
+	}
 
-/* DEFAULT DEFINITIONS */
-#main { /* 'content' is both the wrapper and the navmenu */
-	// position:		relative;
-	padding: 		0px 0px 0px 0px;
-	margin: 		0px 0px 0px 0px;
-	// margin:	0% 10% 0% 10%;
-	// clear:			both;
-	// border:			1px solid #00c;
-	background:		url("icicles.gif") no-repeat;
-	// background-color:	#cce;
-}
+#logo p {
+	position:	absolute;
+	bottom:		8px;
+	left:		.25em;
+	font-size:	100%;
+	}
 
 
+/*--------------------------------------------------------------------------------*/
 /* The .nav class is taken from suckerfish css dropdowns 
-   see http://www.alistapart.com/articles/dropdowns/  */
+   see http: http://www.alistapart.com/articles/dropdowns */
+
 #nav {
-	height:			auto;
-	display:		block;
-	clear:			both;
 	float:			right;
-	// width:			100%;
 	display:		inline;
-	font-size:		75%;
-	font-weight:		bold;
 	background-color:	#ccc;
+	width:			100%;
+	line-height:		1;
 	}	
-	
-#nav ul { /* all lists */
-	padding: 0;
-        margin: 0;
-        list-style: none;
-        line-height: 1;
-}
 
-#nav a {
-         display: block;
-	padding: .25em;
-	width: 19em;
-}
+#nav ul {
+        margin-right:		20em;
+	list-style: 		none;
+	float:			right;
+	}
 
 #nav li { /* all list items */
-        float: left;
-        border-left: 2px solid #fff;
-        border-right: 2px solid #fff;
-	padding: 0em 1em 0em 0.25em;
-	// width: 10em; /* width needed or else Opera goes nuts */
-}
+        float: 			left;
+	padding: 		0em 1em 2px 0;
+	text-decoration:	underline;
+	color:                  #072966;
+	font-size:		125%;
+	}
 
-#nav  li ul { /* second-level lists */
-	position: absolute;
-        // background-image: url("blutop.png");
-	background: transparent;
-	border:	none;
-        width: 20em;
-	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
-}
+#nav  li ul { /* second-level lists - hidden */
+	position: 		absolute; 
+        width: 			20em;
+	left:			-999em;
+	}
 
 #nav li ul ul { /* third-and-above-level lists */
-       margin: -1em 0 0 20em;
-}
+       margin: 			-1em 0 0 20em;
+		}
+
 #nav li ul li {
 	border: none;
+	font-size:		65%;
 	}
 
-#nav li:hover ul ul, #c-nav li:hover ul ul ul, #c-nav li.sfhover ul ul, #c-nav li.sfhover ul ul ul {
-        left: -999em;
-}
-#nav  li:hover ul, #c-nav li li:hover ul, #c-nav li li li:hover ul, #c-nav li.sfhover ul, #c-nav li li.sfhover ul, #c-nav li li li.sfhover ul { /* lists nested under hovered list items */
-        left: auto;
-        background: url("y-left.png") no-repeat #fff;
-	border-left: 1px solid #ccf;
-	border-top: 1px solid #aaa;
-	border-bottom: 1px solid #ccf;
+#nav li:hover ul ul {
+        left: -999em; 
 	}
 
-#nav a:hover {
-        background: url("blutop.png") repeat-x #ccf;
-	// color: #222;
+#nav li:hover ul  { /* lists nested under hovered list items */
+        left: 		auto;
+	clear:		none;
+	background:	#ccc;
+	border-left: 	1px solid #ccf;
+	border-top: 	1px solid #aaa;
+	border-bottom: 	1px solid #ccf;
 	}
+
+#nav a {
+	display:	block;
+	padding: 	2px;
+	width: 		19em;
+	}	
+
+
 /* End suckerfish */
 
-#main .leader {
-	display: 	block;
+/*--------------------------------------------------------------------------------*/
+#main 	{ 
 	clear:		both;
+	position:	relative;
+	display:	block;
+	margin:		0;
+	border:		0;
 	width:		100%;
-	
 	}
-	
-#main .postnav {
-	clear:		both;
-	margin:		0% 10% 0% 10%;
-	padding:	0;
-	// padding: 	.5em .5em;
+
+/*--------------------------------------------------------------------------------*/
+#postnav {
 	display:	block;
+	clear:		both;
 	font-size:	75%;
-	background:	url("blutop.png") repeat-x;
-	}	
+	color:		#248;
+	margin:		0 10%;
+	}
 
-#main .postnav h2 {
-	padding: 	.5em 0em 0em .5em;
-	color: #ccd;
-	display: inline;
-	clear: both;
+#postnav h2 {
+	font-size:	200%;
+	line-height:	200%;
 	}
 
-#content {
-	margin:	0% 10% 0% 10%;
-	padding: 0em .5em;
-	border: 1px solid #ccc;
-	clear: both;
+#postnav .tailer {
+	clear:		both;
+	display:	block;
 	}
 
 
-#main h1 {
-	display: block;
-	clear:	both;
-	width:	100%;
-	}
 
+/*--------------------------------------------------------------------------------*/
 #subnav {
-	width:	100%;
-	margin:	0% 10% 0% 10%;
-	//font-size: 60%;
-	font-weight: bold;
-	clear:both;
-	line-height: 1;
+	margin:		0 10%;
+	font-weight: 	bold;
+	clear:		both;
+	line-height: 	1;
 	}
 
 #subnav a {
-	display: inline;
-	padding: .25em .25em 0 .25em;
-	border: 1px solid #ccccff;
-	border-bottom: none;
-	background: url("blutop.png") repeat-x top;
-	color: #fff;
-	background-color: #aaa;
+	display: 		inline;
+	padding: 		.25em .25em 0 .25em;
+	border: 		1px solid #ccccff;
+	border-bottom: 		none;
+	background: 		url("blutop.png") repeat-x top;
+	color: 			#fff;
+	background-color: 	#aaa;
+	text-decoration:	none;
 	}
+/*
+
 #subnav a:hover {
 	color: #666;
 	background-color: #ddd;
 	}
+*/
 
 #subnav .selected {
-	background: #fff;
+	background:	transparent;
+	color:		#248;
 	}
 
-#subnav strong {
-	background: #fff;
-	border: 1px solid #ccccff;
-	padding: .25em .25em 0 .25em;
-	border-bottom:none;
-	color: #446;
-	}
+/*--------------------------------------------------------------------------------*/
 
-#subnav .selected a {
-	// background: url("sel-left.png") no-repeat top left;
+#content {
+	margin:		0 10% 0 10%;
+	padding: 	2em 2em;
+	border: 	1px solid #ccc;
+	background: url("icicles.gif") no-repeat 200% 0;
+	font-size:	80%;
+	line-height:	1.5;
+	
 	}
 
-
-/* CONTENT/WRAPPER */
-#wrapper { /* 'wrapper' is the area where you display the interesting things */
-	position: 	absolute;
-	top: 		20px;
-	right:		0px;
-	width: 		560px;
-	font-size: 	12px;
-}
-
-#background-wrapper {
-	padding: 		0px 0px 0px 0px;
-	margin: 		0px 0px 0px 0px;
-	background-image: 	url(watermark.jpg);
-	background-repeat: 	no-repeat;
-	background-position:200px 50px;
-}
-
-#wrapper h1 { 
-	clear: 		both;
-	height: 		18px;
-	padding: 		2px 0px 0px 5px;
-	margin: 		0px 0px 2px -20px;
-	text-decoration:	none;
-	font-size: 	14px;
-	font-weight: 	bold;
-	white-space: 	nowrap;
-	overflow: 	hidden;
-	border-bottom: 	1px solid #cacaca;
-	border-top: 	px solid #ccc;
-	background-image: 	url(h1.png);
-	color: 		#5c7b99;
-}
-
-#wrapper h2 { 
-	clear: 		both;
-	height: 		18px;
-	padding: 		2px 0px 0px 10px;
-	margin:		0px 0px 2px -20px;
-	text-decoration:	none;
-	font-size:	14px;
-	font-weight:	bold;
-	white-space:	nowrap;
-	overflow:		hidden;
-	border-bottom:	1px solid #cacaca;
-	border-top:	1px solid #ccc;
-	background-image:	url(h2.png);
-	color:		#5c7b99;
-}
-#wrapper h3 { 
-	clear: 		both;
-	height:		14px;
-	padding:		0px 0px 0px 15px;
-	margin:		0px 0px 2px -20px;
-	text-decoration:	none;
-	font-size:	12px;
-	font-weight:	thin;
-	white-space:	nowrap;
-	overflow:		hidden;
-	border-bottom:	1px solid #cacaca;
-	border-top:	1px solid #ccc;
-	background-image:	url(h3.png);
-	color:		#5c7b99;
-}
-
-#wrapper p {
+#content h1 {
+	display:	block;
+	font-size:	200%;
+	background:	#ccc;
+	}
+#content h2 {
+	font-size:	150%;
+	display:	block;
+	background:	#ccc;
 	clear:		both;
-}
-
-#wrapper dt {
-	float: 		left;
-	clear: 		both;
-	width: 		200px;
-	color: 		#000;
-	font-size: 	12px;
-	text-align:	left;
-	margin:		0px 5px 0px 0px;
-	padding:		5px 0px 5px 0px;
-	border-top:	1px solid #ddd;
+	}
+/*
+ #content dt {
+	display:	block;
+	clear:		right;
+	font-size:	120%
 	font-weight:	bold;
-}
+	} */
 
-#wrapper dd {
-	float: 		left;
-	width: 		350px;
-
-	color: 		#444;
-	font-size: 	12px;
-	margin: 		0px 0px 0px 5px;
-	padding: 		5px 0px 0px 0px;
-	font-weight: light;
-}
 
-#wrapper textarea {
-	width: 		99%;
-	height: 		300px;
-	border-right: 	1px solid #cacaca;
-	border-bottom: 	1px solid #cacaca;
-}
-#wrapper form {
-	display:		inline;
-}
-
-#wrapper dd select {
-	width: 		247px;
-	border-right:	1px solid #cacaca;
-	border-bottom:	1px solid #cacaca;
-}
-
-#wrapper .submit {
-	width: 		100px;
-	border-right:	1px solid #cacaca;
-	border-bottom:	1px solid #cacaca;
+#content dd {
+	width:		70%;
+	display:	inline;
+	float:		right;
 	background:	#eee;
+	<!--[if ie]>
+		width: 100%;
+	 	margin:	0 0 0 30%;
+	<![endif-->
 }
-#wrapper .text {
-	width: 		245px;
-	border-right:	1px solid #cacaca;
-	border-bottom:	1px solid #cacaca;
-	background:	white;
-}
-#wrapper table {
-	width: 		99%;
-}
 
-/* FOOTER */
+
 #footer {
 	clear: 		both;
 	border-top:	1px solid #d6d6d6;
 	position:		relative;
-	/width: 		100%;
 	padding-top:	5px;
 	margin-top:	15px;
 	margin-bottom:	10px;