From: Gerfried Fuchs <rhonda@debian.org>
Date: Thu, 28 Oct 2010 14:26:15 +0000 (+0200)
Subject: First import of kalle's proposal
X-Git-Url: https://git.deb.at/?a=commitdiff_plain;h=0195ff621f90a84f0e510809db22c43fe9d59c9c;p=deb%2Fpackages.git

First import of kalle's proposal
---

diff --git a/static/Pics/dep.png b/static/Pics/dep.png
new file mode 100644
index 0000000..cc2a137
Binary files /dev/null and b/static/Pics/dep.png differ
diff --git a/static/Pics/gradient.png b/static/Pics/gradient.png
new file mode 100644
index 0000000..33009da
Binary files /dev/null and b/static/Pics/gradient.png differ
diff --git a/static/Pics/greydot.png b/static/Pics/greydot.png
new file mode 100644
index 0000000..ec23c01
Binary files /dev/null and b/static/Pics/greydot.png differ
diff --git a/static/Pics/openlogo-50.png b/static/Pics/openlogo-50.png
new file mode 100644
index 0000000..f4e75fc
Binary files /dev/null and b/static/Pics/openlogo-50.png differ
diff --git a/static/Pics/rec.png b/static/Pics/rec.png
new file mode 100644
index 0000000..2376fc5
Binary files /dev/null and b/static/Pics/rec.png differ
diff --git a/static/Pics/sug.png b/static/Pics/sug.png
new file mode 100644
index 0000000..d7ba341
Binary files /dev/null and b/static/Pics/sug.png differ
diff --git a/static/debian.css b/static/debian.css
index fce9493..6355549 100644
--- a/static/debian.css
+++ b/static/debian.css
@@ -1,638 +1,673 @@
-/* css file for debian web site - Jutta Wrage 2004 */
-
-/* all pages have a header, outer inner and footer
-leftcol and maincol can be omitted, there will be other boxes
-to replace later (eg. two content columns)
-normal page:
-<div id="header">
-  <div id="upperheader">
-     <div id="logo">
-     </div> <!-- end logo -->
-     <div id="serverselect">
-     </div> <!-- end serverselect -->
-  </div> <!-- end upperheader -->
-  <div id="navbar">
-  </div> <!-- end navbar -->
-</div> <!-- end header -->
-<div id="outer">
-  <div id="inner">
-    <div id="leftcol">
-      Leftcol is for menus - if omitted, maincol can be omitted, too
-    </div> <!-- end leftcol -->
-    <div id="maincol">
-      Maincol with margin left is for the content
-      But content may go directly to inner
-    </div> <!-- end maincol -->
-  </div> <!-- end inner -->
-  <div id="footer">
-    <hr class="hidecss"> This line is a divider for lynx
-  </div> <!-- end footer -->
-</div> <!-- end outer -->
-color logo #C60036
-cd-pages: bgcolor="#e09e86" - navbar
-*/
-
-/* { border: 1px solid yellow; } */
-html, body {
-	color: #000000;
-	background-color: #FFFFFF;
-	margin: 0 4px 0 4px;
-	padding: 0;
-	text-align: left;
-	font-family: Arial, Helvetica, sans-serif;
-	/* min-width: 440px - commented out due to mozilla problems*/
+/*
+ *      www.debian.org stylesheet proposal
+ *
+ *      Kalle Soderman, 2008 debian.css
+ *
+ *      Copyleft : This work is free, you can copy, spread, and modify it under
+ *      the terms of the Free Art License http://artlibre.org/licence/lal/en/
+ *
+ *
+ *      Font size table
+ *      ---------------
+ *      Browser default 16px
+ *
+ *      14px	87.5%		body	
+ *      24px	1.714em
+ *      18px	1.286em
+ *      16px	1.143em
+ *      12px	0.857em
+ *      11px	0.786em
+ *      8px 	0.57em
+ */
+
+html {
+	background-color: transparent;
+}
+
+body {
+	margin: 0;
+	font: normal 87.5% sans-serif;
+	line-height: 1.6;
+	color: black;
+	background-color: white;
 }
-/* direction directive reverses the navbar, too */
-/* html[lang|=ar] {
-      direction: rtl !important;
-      text-align: right !important;
-} */
 
-img { border: 0; }
+#outer {
+	margin: 0 10px 0 62px;
+}
 
-h1 { text-align: center; }
+/*
+ * 	Header
+ */
 
-acronym {
-	border-bottom: 1px dotted #000000;
+#header {
+	margin:0;
+	padding:0 10px 0 62px;
+	font-size: 1em;
+	background-image:url('Pics/gradient.png');
+	background-position: 0 0;
+	background-repeat: repeat-x;
 }
 
-hr.hidecss {
-	border: 0;
+#header a:link
+, #second-nav a:link {
+	text-decoration: none;
 }
 
-hr {
-	border-bottom: 0;
-	border-top: 1px solid #BFC3DC;
+#header a:hover
+, #second-nav a:hover {
+	text-decoration: underline;
 }
 
-samp {
-	display: block;
-	margin-left: 2em;
+#breadcrumbs {
+	font-size: 0.786em;
+	background-color: transparent;
+	background-color: #f5f6f7;
+	margin:0;	
+	padding: 6px 0.25em 7px  0.25em;
+	border-bottom: 1px solid #d2d3d7 ;
+	text-transform:lowercase;
+	line-height: 1;
 }
-div.sampleblock {
-	width: 80%;
-	margin: auto;
-	font-family:courier, serif;
-	font-size: 90%;
+
+p.section {
+	font-family:monospace;
+	position:absolute;
+	top: 0px;
+	left:62px;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	background-color: #c70036;
+	line-height: 16px;
+	color:white;
+	padding: 0 5px 0 5px;
+	margin:0;
+	font-size: 1em;
 }
-div.quoteblock {
-	width: 75%;
-	margin: auto;
-	font-size: 90%;
-	text-align: justify;
+
+#navbar {
+	background-color: transparent;
+	list-style:none;
+	display:block;
+	border-bottom:1px solid #c70036;
+	text-indent:0;
+	padding: 0;
+	margin-top:0;
+	margin-bottom:0;
+	line-height:1;
+}
+
+#navbar ul {
+	margin:0 ;
+	padding:0 ;
+	height: 54px;
+	clear: both;
+	overflow: hidden;
 }
 
-.quoteblock div.preimg {
+#navbar li {
+	list-style: none;
 	float: left;
-	margin-top: 0.2em;
+	padding: 0;
+	margin: 0;
+	font-size: 1em;
 }
-.quoteblock cite {
+
+#navbar a:link
+, #navbar a:visited {
+	padding: 30px 1em 10px 1em;
+	border-left: 1px solid transparent;
+	border-right: 1px solid transparent;
 	display: block;
-	text-align: right;
 }
-blockquote.question {
-	font-style: italic;
-}
-blockquote.question p span {
-	font-style: normal;
-	width: 10%;
+
+#navbar a:visited {
+	color: #54638c;
 }
-#pagewidth {
-	width: 100%;
-	text-align: left;
+
+#navbar a:hover
+, #navbar a:visited:hover {
+	background-color: #efefef;
+	border-left: 1px solid  #d2d3d7;
+	border-right: 1px solid #d2d3d7;
 }
 
-/* now the header*/
-#header {
-	margin-left: -3px;
-	width: 100%;
-	height: auto;
+#sitetools {
+	text-align:left;
+	margin: 0 10px 0 0;
+	padding: 0px 0 1px 0;
+	position: absolute;
+	top:0;
+	right:0;
+	border-right: 1px solid white;
+	border-left: 1px solid #d2d3d7;
+	line-height: 1;
 }
 
-/* upper nested header box*/
 #upperheader {
-	width: 100%;
-	margin-top: 11px;
-	height: auto;
-	/* height: 4.8em; */
-	background: #FFFFFF;
+	margin:0;
+	padding:0;
 }
 
 #logo {
-	float: left;
-	margin-left: 6px;
-	background: #FFFFFF;
+	position:absolute;
+	top:0;
+	left:0;
+	padding: 0;
+	background-color: transparent;
+	border: 1px solid transparent;
+	border-top: 0;
 }
 
-#serverselect {
-	float: right;
+#logo a {
 	display: block;
-	padding-top: 1px;
-	margin-right: 6px;
-	margin-left: auto;
-	text-align: right;
-	top: 0;
-	right: 0;
+	height:71px;
+	padding: 8px 5px 0 5px;
 }
 
-#serverselect:lang(de) {
-	width: 15em;
-}
-#serverselect:lang(en) {
-	width: 13em;
+#logo img {
+	margin-top: 5px;
 }
 
-#serverselect p {
-	color: #990000;
-	font-size: 0.8em;
-	font-weight: normal;
+#logo:hover {
+	border: 1px solid #d2d3d7 ;
+	border-top: 0;
+	background-color: #eee;
 }
 
-#serverselect p select {
-	font-size: 88%;
-}
+/*
+ * 	Links
+ */
 
-#serverselect p input {
-	font-size: 88%;
-}
-.centerlogo {
-	margin-left: 260px;
-	margin-right: auto;
-	width: 125px;
-	text-align: center;
-	vertical-align: bottom;
-}
-#cdlogo {
+a:link	{
+	color: #0035c7;
+	text-decoration: underline;
 }
 
-#navbar {
-	/* margin-top: 1em; */
-	clear: both;
-	padding-left: 0px;
-	/* margin-top: 5px; */
-	padding-top: 6px;
-	padding-bottom: 4px;
-	width: 100%;
-	height: auto;
-	text-align: center;
-	background: #DF0451;
-}
-#navbar ul {
-	display: inline;
-	list-style-type: none; 
-	padding-left:  0px;
-	line-height: 1.5em;
+a:visited {
+	color: #54638c;
 }
-#navbar ul li {
-	display: inline;
-	margin: 0;
-	white-space: nowrap;
-}
-#navbar a {
-	color: #FFFFFF;
+
+a:hover {
 	text-decoration: none;
-	padding: 0.2em 0.4em 0.2em 0.4em;
-	background-color: #000084;
-	border: 1px solid #000084;
-	font-family: Arial, Helvetica, sans-serif;
-	font-weight: bold;
-	font-size: 0.9em;
+	color: #00207a;
 }
-#navbar a:hover {
-	background: #0000CC;
+
+a:active {
+	color:#c2c3c7;
 }
-#navbar .hidecss, .hidecss {
-	display: none;
+
+a img {
+	border:0;
 }
 
-/* the rest of page out of two nested boxes around */
+/*
+ *	Leftcol (Should be renamed secondnav)
+ */
 
-#outer {
-	background-color: #FFFFFF;
-	width: auto;
-	/* border:solid white 2px; */
+#second-nav {
+	width: 16em;
+	float:right;
+	padding:0 0 0 1em;
+	margin: 1em 0 10px 1em;
+	border-left:1px solid #d3d6df;
+	font-size: 0.786em;
+	line-height: 1.5;
 }
 
-#inner {
-	margin: -2px;
-	margin-top: 0;
-	width: 100%;
-	background: #FFFFFF;
-	/* overflow: auto; */
+#second-nav ul {
+	padding:0;
+	margin:0;
+	list-style:none;
 }
 
-#leftcol {
-	float: left;
-	margin: 0em 0.4em 0 0;
-	padding-left: 0;
-	padding-bottom: 1em;
-	width: auto;
-	background: #BBDDFF;
-	font-size: 0.9em;
-	font-family: Arial, Helvetica, sans-serif;
-	border: 1px solid #BBDDFF;
-	/* overflow: auto; */
-}
-#leftcol a:link, #leftcol a:visited {
-	display: block;
+#second-nav ul ul {
+	margin-left: 1em;
 }
-#leftcol a:hover {
-	background-color: #DDEEFF;
-	/* background-color: #FFFFFF; */
+
+#second-nav li {
+	font-weight: normal;
+	margin-top:0.5em;
 }
-#leftcol ul {
-	margin: 2px;
-	padding: 0;
-	list-style-type: none;
+
+#second-nav p {
+	line-height: 1;
 	font-weight: bold;
 }
-#leftcol ul.votemenu {
-	width: 11em;
-}
-#leftcol ul.cdmenu {
-	width: 12em;
-}
-#leftcol ul.votemenu ul li, #leftcol ul.cdmenu ul li {
-	padding-bottom: 0.4em;
-}
-#leftcol li ul {
-	display: inline;
+
+#second-nav h2 {
+	margin:0;
 }
-#leftcol ul li {
-	padding: 0.2em 0;
+
+
+/*
+ *	Typography
+ */
+
+p {
+	margin: 0 0 1em 0;
 }
-#leftcol ul ul {
-	font-size: 0.9em;
-	margin: 0;
+
+h1
+, h2
+, h3
+, h4 {
+	font-weight: 600;
+	margin-bottom: 0.5em;
+	margin-top: 1em;
 }
-#leftcol ul li a {
-	line-height: 1.2em;
-	padding-right: 0.5em;
-	/* padding: 0.2em 0 0.3em 0em; */
+
+h1 {
+	line-height: 1em;
 }
-#leftcol ul ul li a {
+
+h4 {
+	font-size: 1em;
 	font-weight: normal;
-	padding: 0.1em 0.5em;
-	line-height: 1.1em;
-}
-#leftcol ul ul li {
-	padding-top: 0;
-}
-#leftcol p {
-	margin-left: 2px;
-	margin-right: 2px;
+	font-style: italic;
 }
-#leftcol p a {
-	display: block;
-	margin: 0;
+
+h3 {
+	font-size: 1em;
 }
-#leftcol p img {
-	margin-left: 1em;
+
+h2 {
+	font-size: 1.143em;
 }
 
-#maincol {
-	background: #FFFFFF;
-	margin-left: 12em;
-	margin-right: 0.5em;
-	margin-bottom: 1em;
+ol,ul {
+	padding-left: 2em;
+	margin-left:0;
 }
 
-#maincol:lang(en), #maincol:lang(cz), #maincol:lang(ko),
-	#maincol:lang(no), #maincol:lang(sk), #maincol:lang(tr),
-	#maincol:lang(zh-CN), #maincol:lang(zh-HK), #maincol:lang(zh-TW) {
-	margin-left: 10em;
+hr {
+	border: none;
+	background-color: #bbb;
+	height: 1px;
 }
 
-#lefthalfcol {
-	float: left;
-	margin-left: 0em;
-	width: 49%;
+.hidecss {
+	display: none;
 }
 
-#lefthalfcol dl {
-	margin-top: 0em;
+pre {
+	overflow: auto;
 }
 
-#righthalfcol {
-	margin-left: 50%;
-	width: 50%;
+dd {
+	margin-left: 2em;
+	margin-bottom: 1em;
 }
 
-#righthalfcol dl {
-	margin-right: 0.2em;
+.toc {
+	font-size: 0.8em;
+	list-style:none;
+	margin: 1em 0 1em 0;
+	background-image: url('Pics/greydot.png');
+	background-position: bottom left;
+	background-repeat: repeat-x;
+	line-height:1.5;
+	padding: 0;
+	max-width: 67%;
 }
 
-#footer {
-	clear: both;
-	width: 100%;
-	padding-top: 3px;
-	bottom: 0;
-	text-align: center;
-	margin: 1em 0 0 0;
-	border-top: 1px solid #BFC3DC;
+.toc li {
+	background-image: url('Pics/greydot.png');
+	background-position: top left;
+	background-repeat: repeat-x;
+	padding: 0.25em 0 0.25em 0;
+ }
+
+.toc a {
+	display:block;
 }
 
-#fineprint {
-	margin-top: 0.2em;
-	padding-top: 3px;
-	text-align: center;
-	font-size: 0.85em;
+.toc a:hover {
+	display:block;
+	background-color: #f0f0f4;
 }
 
-.bordertop { border-top: 1px solid #BFC3DC; }
+/*
+ *	Sitemap 
+ */
 
-dl.gloss dt {
-	font-weight: bold;
+.card {
+	clear:both;
+	margin:2em 0 2em 0;
+	background-position: 0 -50px;
+	background-repeat: repeat-x;
+	padding:8px 0 8px 0;
 }
 
-#footer ul {
-	display: inline;
-	list-style-type: none;
+.card ul {
+	margin:0.5em 0 1em 0;
 }
 
-#footer ul li {
-	display: inline;
+.card ul li {
+	list-style:none;
 }
 
-#footer ul li a, table.y2k td {
-	white-space: nowrap;
+.card h2 {
+	margin:0;
 }
 
-#footer p {
-	margin: 0px;
+.lefthalf {
+	float:left;
 }
 
-#main {
-	background: #bbddff;
-	padding: 1em 0; /* have some padding to get rid of collapsed margins */
+.righthalf {
+	margin-left:50%;
 }
 
-/* classes for cards */
-
-.cardleft {
-	margin: 0 0 1em;
-	float: left;
-	width: 49%;
+.lefthalf ul {
+	margin-top:0;
 }
-.cardright {
-	margin-left: 50%
-	/*margin: 0 1% 2em 50%; */
+
+/*
+ * 	Footer
+ */
+
+#footer {
+	font-size: 0.786em;
+	border: 1px solid #dfdfe0;
+	border-bottom: 0;
+	padding:1em;
+	background-color: #f2f3f6;
+	margin: 0 0 0 0;
 }
-.card {
-	clear: left;
-	margin: 0 0 1em;
+
+#footer hr {
+	border-top: 1px solid #d2d3d7;
+	border-bottom: 1px solid white;
+	height: 0;
 }
 
-.cardleft h2, .cardright h2, .card h2 {
-	font-size: 120%;
-	background: #000000;
-	color: #FFD400;
+#footer .editbar li {
 	display: inline;
-	padding: 0.2em 0.4em;
-	margin: 0 10px;
-	font-family: Arial, Helvetica, sans-serif;
-	letter-spacing: 0.2em;
+	margin-right: 2em;
 }
 
-.cardleft dl dd, .cardright dl dd , .card dl dd {
-	padding-bottom: 0.5em;
+#footer .info {
+	font-size: 1em;
 }
 
-.cardleft div, .cardright div, .card div {
-	border: 2px solid #000000;
-	background: #FFFFFF;
-	padding: 0.5em;
-	margin: 2px 10px;
-	/* the next two lines xpand the div to heigth of left inner div */
-	overflow: auto;
+#fineprint {
+	margin-bottom: 1em;
 }
 
-div.lefthalf {
-	float: left;
-	width: 49%;
-	border: 0;
-	margin: 0; 
+#footermap {
+	list-style:none;
+	margin: 0 0 0 0;
 	padding: 0;
-}
-
-div.righthalf {
+	width:100%;
+	font-size: 11px;
+	overflow: hidden;
+	line-height: 1.6;
 	border: 0;
-	margin: 0;
-	padding: 0;
 }
-/* colors for packages, warnings and news in ports */
-.warning, dt.new, .no {
-	color: red; /* FF0000 */
+
+ul#footermap-cola a
+, ul#footermap-colb a
+, ul#footermap-colc a
+, ul#footermap-cold a
+, ul#footermap-cole a {
+	padding-left: 0;
 }
 
-.psmallcenter, .psmalltrademark {
-	clear: both;
-	font-size: 0.85em;
-	text-align: center;
-}
-
-.psmalltrademark {
-	color: green;
-}
-table.ridgetable, table.reltable {
-	border-width: 4px;
-	border-color: gray;
-	margin: 0 1em 1em 1em;
-	border-style: ridge;
-	border-collapse: collapse;
-}
-table.vote {
-	margin: 0 auto;
-	border-width: 3px;
-	border-color: gray;
-	border-style: ridge;
-	border-collapse: collapse;
-}
-#pcontentsres col, #pcontentsres th, #pdownload th, #pdownload td, table.ridgetable th, table.ridgetable td,
-	table.reltable td, table.reltable th {
-	border: 2px #BFC3DC;
-	border-style: ridge;
-	padding: 0.1em;
-}
-table.reltable th {
-	background-color: #44CCCC;
-}
-table.vote th {
-	border: 1px solid gray;
-	background-color: #DDDDDD;
-}
-table.vote td {
-	border: 1px solid gray;
-	padding: 4px;
-}
-table.reltable tr.odd {
-	background-color: #FFFFFF;
-}
-table.reltable tr.even {
-	background-color: #DDDDDD;
-}
-table.stattrans {
-	margin: 0 auto;
-	width: 95%;
-	border: 1px solid black;
-	background-color: #cdc9c9;
-}
-table.stattrans th {
-	text-align: center;
-	padding: 2px;
-}
-table.stattrans td {
-	text-align: right;
-	padding: 2px;
-}
-table.stattrans tbody th {
-	text-align: left;
-	font-weight: normal;
+ul#footermap-cola
+, ul#footermap-colb
+, ul#footermap-colc
+, ul#footermap-cold
+, ul#footermap-cole {
+	float:left;
+	width: 19%;
+	min-width: 11em;
+	height: 12em; /* Update when adding items */
+	margin:0 1% 0 0;
+	padding: 10px 0 0 0;
+	list-style: none;
 }
 
-/* partners */
-.partnertype {
-	background-color: #DD0000;
-	padding: 0.2em 0 0.2em 1em;
-	color: #FFFFFF;
+ul#footermap-cole {
+	width: 18.9%;
+	margin-right:0;
+}
 
+#footermap-wrap {
+	padding:1em;
+	border-top: 1px solid white;
 }
-div.partnerlogo {
-	display: table-cell;
-	vertical-align: middle;
-	text-align: center;
-	width: 30%;
+
+#footermap a {
+	margin: 0;
 }
-div.partnerdesc {
-	display: table-cell;
-	font-size: 85%;
+
+#footermap ul{
+	list-style: none;
+	padding:0;
 }
-div.cdflash {
-	background-color: #E09E86;
-	width: 80%;
-	margin: auto;
-	text-align: center;
+
+#footermap li {
+	text-indent:0;
+	background-color: transparent;
+	font-weight:bold;
+	margin-top: 0.5em;
 }
-.cdrsync {
-	color: #6B1300;
+
+#footermap li ul {
+	margin: 0;
+	padding: 0:
 }
-/* debian installer */
 
-.dierror {
-	background-color: #FF6060;
+#footermap li li {
+	margin:0;
+	text-indent:0;
+	padding:0;
+	font-weight:normal;
+	line-height: 1.5;
+	border:0;
+	background-image:none;
+	background-color:transparent;
 }
-.dibad {
-	background-color: #F7FF60;
+
+#sitetools form {
+	margin:0;
+	padding:0;
 }
-.digood {
-	background-color: #7AFF71;
+
+#sitetools input {
+	margin: 0 0 0 0.25em;
+	padding-left: 4px;
+	font-size: 0.786em;
+	padding-right: 4px;
 }
 
-/* useful classes */
+#sitetools select {
+	font-size: 0.786em;
+	margin-left: 0.5em;
+}
 
-th.eventheader {
-	background-color: #BBDDFF;
+#sitetools form p {
+	display: inline;
+	line-height: 1;
+	margin:0;
+	padding:0;
+	font-size: 0.786em;
 }
-.center {
-	text-align: center;
+
+.sitetool a {
+	margin: 0.5em 0 0.5em 1em;
+	padding: 0 0 0 0;
+	float: left;
 }
-.right {
-	text-align: right;
+
+.sitetool {
+	margin:0;
+	padding: 2px 5px 2px 5px;
+	border-left: 1px solid white;
+	border-right: 1px solid #d2d3d7;
+	display:block;
+	float:left;
 }
-ul.circlelist {
-	list-style-type: circle;
+
+#serverselect input
+, #serverselect option 
+, #serverselect select {
+	font-size: 11px;
 }
-.centerdiv table {
-	margin-left: auto;
-	margin-right: auto;
+
+#serverselect ul {
+	display: inline;
+	margin-left: 2em;
 }
-ul.discless {
-	list-style-type: none;
+
+#serverselect li {
+	list-style: none;
+	display: inline;
+	padding:0 1em 0 1em;
+	margin:0;
 }
-.top, img.ico {
-	vertical-align: top;
+
+#serverselect form p {
+	margin:0;
+	padding:0;
+	line-height: 1;
 }
-img.ico {
+
+
+
+.lcol50 {
 	float: left;
-	margin: 0 0.2em 0 0;
+	width: 49%;
+	font-size:0.8em;
+	margin:0 0 0 0;
+	padding:0 0.5em 0 0;
 }
-img.rightico {
-	float: right;
-	vertical-align: top;
-	margin: 0 0 0 0.2em;
+
+.lcol50 h2 {
+	margin-top:0;
 }
-img.cve {
-	vertical-align: -25px;
+
+.rcol50 {
+	margin:0 0 0 51%;
+	padding:0;
+	font-size:0.8em;
 }
-.y2kok, .yes {
-	color: #00BB00;
+
+/*
+ *	Extras
+ */
+
+.clear {
+	clear:both
 }
-.y2kok2 {
-	color: #00BBBB;
+
+#clear {
+	clear:both;
+	border:0;
+	height:1px;
+	display:block;
+ }
+
+.quicklist:before {
+	content: "Quick Links: ";
+	font-weight: bold;
 }
-.bluehead {
-	color: #0000FF !important;
+
+.quicklist {
+	list-style: none;
+	font-size: 0.8em;
+	margin:0;
+	padding:0;
+	text-indent:0;
 }
-span.halfsize {
-	font-size: 80%;
+
+.quicklist li  {
+	display:inline;
 }
-span.ddpbooktitle, span.merchtitle {
-	font-size: larger;
+
+.item p{
+	margin: 0;
 }
-a:link { color: #0000FF; }
-a:visited { color: #800080; }
-a:hover { color: #F000FF; }
-a:active { color: #FF0000; }
 
-.navpara a, col.y2k {
-	white-space: nowrap;
-	/* this is to keep from breaking at whitespace in anchors */
+.item h2
+, .item p
+, .item ul{
+	margin-right: 10px 
 }
 
-/* language dependent stuff */
-/* quotes */
-html[lang="de"] q:before {
-	content: "\00BB";
+.col50 {
+	width:50%;
+	float: left;
 }
-html[lang="de"] q:after {
-	content: "\00AB";
+
+.lastcol {
+	margin: auto;
+	width: 50%;
+	float:left;
 }
-html[lang="de"] q q:before {
-	content: "\203A";
+
+.lastcol h2
+, .lastcol p
+, .lastcol ul {
+	margin-left:  10px;
+	margin-right:0;
 }
-html[lang="de"] q q:after {
-	content: "\2039";
+
+.line {
+	clear: both;
+	display: block;
+	margin: 0 0 2em 0;
+	padding: 0;
+	width: auto;
+	overflow: hidden;
 }
-html[lang="pl"] q:before { content: "\201E"; }
-html[lang="pl"] q:after { content: "\201D"; }
-html[lang="pl"] q q:after { content: "\2019"; }
-html[lang="pl"] q q:before { content: "\201A"; }
 
-html[lang="fr"] q:before { content: "\00AB\00A0"; }
-html[lang="fr"] q:after { content: "\00A0\00BB"; } 
-html[lang="fr"] q q:before { content: "\2039\00A0"; }
-html[lang="fr"] q q:after { content: "\00A0\203A"; }
+.cardleft {
+	width:50%;
+	float: left;
+}
 
-#leftcol:lang(ja) ul ul {
-	font-size: 0.95em;
+.cardright {
+	margin: auto;
+	width: 50%;
+	float:left;
+}
+
+.cardleft div 
+, .cardleft h2 {
+	margin-right: 0.5em;
 }
-html[lang|="zh"] strong {
-	/* color: #FFFFFF; */
-	background-color: yellow;
+
+.cardright div
+, .cardight h2 {
+	margin-left: 0.5em;
 }
-.underline { text-decoration: underline; }
-.clr { clear:both; }
-/*.content{padding:5px;} */ /*padding for content */
-/* #header .content{padding-bottom:0;} */ /*padding bottom 0 to remove space in IE5 Mac*/
 
-/* for l10n-arabic */
-.bidi {
-	direction: rtl;
-	text-align: right;
+ul.votemenu {
+	font-size: 0.8em;
+	list-style:none;
+	margin: 1em 0 1em 0;
+	background-image: url('Pics/greydot.png');
+	background-position: bottom left;
+	background-repeat: repeat-x;
+	line-height:1.5;
+	padding: 0;
+	max-width: 67%;
+}
+
+.votemenu li {
+	background-image: url('Pics/greydot.png');
+	background-position: top left;
+	background-repeat: repeat-x;
+	padding: 0.25em 0 0.25em 0;
+ }
+
+.votemenu a {
+	display:block;
 }
 
-#leftcol, #navbar, #navbar a {
-	-moz-border-radius: 15px;
-	/* this goes to the end as the css validator does not like it
-	will be replaced by border-radius with css3 */
+.votemenu a:hover {
+	display:block;
+	background-color: #f0f0f4;
 }
diff --git a/static/debpkg.css b/static/debpkg.css
new file mode 100644
index 0000000..c3aa031
--- /dev/null
+++ b/static/debpkg.css
@@ -0,0 +1,267 @@
+/*
+ *      packages.debian.org stylesheet proposal
+ *
+ *      Kalle Soderman, 2009 debpkg.css
+ *
+ *      Copyleft : This work is free, you can copy, spread, and modify it under
+ *      the terms of the Free Art License http://artlibre.org/licence/lal/en/
+ *
+ *
+ *      Font size table
+ *      ---------------
+ *      Browser default 16px
+ *
+ *      14px	87.5%		body	
+ *      24px	1.714em
+ *      18px	1.286em
+ *      16px	1.143em
+ *      12px	0.857em
+ *      11px	0.786em
+ *      8px 	0.57em
+ */
+
+@import url("debian.css");
+
+#header {
+	background-image:url('./Pics/gradient.png');
+}
+
+#footer {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+#pnavbar {
+	font-size: 0.786em;
+	background-color: transparent;
+	background-color: #f5f6f7;
+	margin:0;	
+	padding: 6px 0.25em 7px  0.25em;
+	border-bottom: 1px solid #d2d3d7 ;
+	text-transform:lowercase;
+	line-height: 1;
+}
+
+
+#pmoreinfo {
+	width: 20em;
+	float:right;
+	padding:0 0 0 1em;
+	margin: 1em 0 10px 1em;
+	border-left:1px solid #d3d6df;
+	font-size: 0.786em;
+	line-height: 1.5;
+}
+
+#pmoreinfo ul {
+	padding:0;
+	margin:0;
+	list-style:none;
+}
+
+#pmoreinfo ul ul {
+	margin-left: 1em;
+}
+
+#pmoreinfo li {
+	font-weight: normal;
+	margin-top:0.5em;
+}
+
+#pmoreinfo p {
+	line-height: 1;
+	font-weight: bold;
+}
+
+#pmoreinfo h2 {
+	margin:0;
+}
+
+
+#packagesearch #breadcrumbs {
+	margin-bottom: 0;
+}
+	
+#hpacketsearch form {
+	margin:0; padding:0;
+}
+
+#hpacketsearch {
+	background:#f7f8fc;
+	border-bottom: 1px solid #e2e3e7;
+	display:block;
+	padding:0;
+
+	font-size: 0.786em;
+}
+
+#psearchtoomanyhits {
+	padding:10px;
+	border: 1px solid #cccca3;
+	margin:0;
+	margin-top:10px;
+	background-color:#ffffcb;
+}
+
+#psearchres {
+	margin: 0 0 2em 0;
+}
+
+#psearchres h2{
+	margin:0;
+	padding:0;
+}
+
+#psearchres h3{
+	margin:0;
+	padding:0;
+}
+
+#psearchres ul li{
+	margin:0 0 0.5em 0;
+	padding:0;
+}
+
+#pothers {
+	margin-top:0.25em;	
+	float: right;
+}
+
+#psource {
+	margin-top:0.25em;
+}
+
+/*
+ * 	Package sidebar
+ */
+#ptablist {
+
+}
+
+/*
+ * 	Package dependencies
+ */
+
+#pdeplegend {
+	margin-bottom:2em;
+	font-weight:bold;
+	padding: 0 0.5em 0 0;
+	border:1px solid #d3d6df;
+}
+
+#pdeplegend img {
+	margin-left: 1em;
+}
+
+#pdeplegend tr,#pdeplegend ul,#pdeplegend li {
+	margin:0; padding:0;
+}
+
+#pdeplegend td {
+	padding-left: 1.5em;
+	padding-right: 1em;
+}
+
+#pdeps dd {
+	margin:0;
+	padding:0;
+}
+
+#pdeps dt {
+	margin-top:0.5em;
+}
+
+#pdeps ul.uldep, #pdeps ul.uladep {
+	list-style-type: disc;
+	list-style-image: url(Pics/dep.png);
+}
+
+.uldep dt {
+
+}
+
+#pdeps ul.ulrec, #pdeps ul.ulidep {
+	list-style-type: square;
+	list-style-image: url(Pics/rec.png);
+}
+
+#pdeps ul.ulsug {
+	list-style-type: circle;
+	list-style-image: url(Pics/sug.png);
+}
+
+#pdownload {
+	margin-bottom:1em;
+	text-align: left;
+}
+
+#pdownload table {
+	text-align:left;
+}
+
+#pdeplegend td li {
+	padding-left:0;
+}
+
+#pdeplegend td,#pdeplegend tr,#pdeplegend table,#pdeplegend ul,#pdeplegend li,#pdeplegend tbody {
+	margin:0;
+	paddding:0;
+}
+
+.pkgreport #pdeplegend td li {
+	margin:0.25em 0 0 2em;
+}
+
+#ptags {
+	font-size: 0.786em;
+	padding: 1em;
+	margin-right: 22em;
+}
+
+.card {
+	clear:both;
+	margin:2em 0 2em 0;
+	background-position: 0 -50px;
+	background-repeat: repeat-x;
+	padding:8px 0 8px 0;
+}
+
+.card ul {
+	margin:0.5em 0 1em 0;
+}
+
+.card ul li {
+	list-style:none;
+}
+
+.card h2 {
+	margin:0;
+}
+
+#lefthalfcol {
+	float:left;
+	width: 50%;
+	padding-right: 1em;
+	margin:0;
+}
+
+#righthalfcol {
+	margin:0;
+	margin-left:50%;
+	padding-left: 1em;
+}
+
+#lefthalfcol dl
+, #righthalfcol dl {
+	margin-top: 0;
+}
+#lefthalfcol dd
+, #righthalfcol dd {
+	margin-bottom: 1em;
+}	
+
+.lefthalf ul {
+	margin-top:0;
+}
+
+
diff --git a/templates/html/head.tmpl b/templates/html/head.tmpl
index f8d520b..656a792 100644
--- a/templates/html/head.tmpl
+++ b/templates/html/head.tmpl
@@ -9,29 +9,43 @@
 <meta name="Keywords" content="[% organisation %],  [% keywords %]">
 [% html_meta %]
 
-<link href="/debian.css" rel="stylesheet" type="text/css" media="all">
-<link href="/packages.css" rel="stylesheet" type="text/css" media="all">
-<link href="/packages-site.css" rel="stylesheet" type="text/css" media="all">
+<link href="/debpkg.css" rel="stylesheet" type="text/css" media="all">
 [% IF rss_alternate %]
 <link rel="alternate" type="application/rss+xml" title="RSS" href="[% rss_alternate %]">
 [% END %]
 <script src="/packages.js" type="text/javascript"></script>
 </head>
 <body>
-[%- IF sitewidemsg -%]
-<div id="psitewidemsg" class="[% sitewidemsg.importance %]">
-[%- IF sitewidemsg.title -%]<h2>[% sitewidemsg.title %]</h2>[% END %]
-[% sitewidemsg.txt %]
-</div>
-[%- END -%]
 <div id="header">
    <div id="upperheader">
 
    <div id="logo">
   <!-- very Debian specific use of the logo stuff -->
-  <a href="[% logo.url %]"><img src="[% logo.src %]" alt=""></a>
-  <a href="[% logo.url %]"><img src="/Pics/debian-small.png" alt="[% logo.alt %]" width="90" height="31"></a>
+<a href="[% logo.url %]"><img src="[% logo.src %]" alt="Debian" with="50" height="61"></a>
 </div> <!-- end logo -->
+<p class="hidecss"><a href="#inner">[% g('skip the navigation') %]</a></p>
+<p class="section">Packages</p>
+</div> <!-- end upperheader -->
+<!-- navbar -->
+<div id="navbar">
+<ul>
+   <li><a href="http://www.debian.org/intro/about">About Debian</a></li>
+   <li><a href="http://www.debian.org/distrib/">Getting Debian</a></li>
+   <li><a href="http://www.debian.org/support">Support</a></li>
+   <li><a href="http://www.debian.org/devel/">Developers'&nbsp;Corner</a></li>
+</ul>
+</div> <!-- end navbar -->
+
+<div id="pnavbar">
+ &lsaquo;&nbsp;&nbsp;<a href="[% packages_homepage %]" title="[% g('%s Packages Homepage', organisation) %]">[% g('Packages') %]</a>
+[% FOREACH n IN navigation %]
+ &lsaquo;&nbsp;&nbsp;[% IF n.url %]<a href="[% n.url %]" [% IF n.title %]title="[% n.title %]"[% END %]>[% n.name %]</a>[% ELSE %][% n.name %][% END %] 
+[% END %]
+</div> <!-- end navbar -->
+
+</div> <!-- end header -->
+<div id="outer">
+<div id="inner">
 
 [%- IF print_search_field %]
 [% checked = 'checked="checked"'
@@ -57,21 +71,13 @@
 </div> <!-- end hpacketsearch -->
 </form>
 [% END %]
+[%- IF sitewidemsg -%]
+<div id="psitewidemsg" class="[% sitewidemsg.importance %]">
+[%- IF sitewidemsg.title -%]<h2>[% sitewidemsg.title %]</h2>[% END %]
+[% sitewidemsg.txt %]
+</div>
+[%- END -%]
 
-</div> <!-- end upperheader -->
-
-<p class="hidecss"><a href="#inner">[% g('skip the navigation') %]</a></p>
-<div id="pnavbar">
- &gt;&gt; <a href="[% project_homepage %]" title="[% g('%s Homepage', organisation) %]">[% organisation %]</a>
- &gt;&gt; <a href="[% packages_homepage %]" title="[% g('%s Packages Homepage', organisation) %]">[% g('Packages') %]</a>
-[% FOREACH n IN navigation %]
- &gt;&gt; [% IF n.url %]<a href="[% n.url %]" [% IF n.title %]title="[% n.title %]"[% END %]>[% n.name %]</a>[% ELSE %][% n.name %][% END %] 
-[% END %]
-</div> <!-- end navbar -->
-
-</div> <!-- end header -->
-<div id="outer">
-<div id="inner">
 
 [%- IF page_title %]
   <h1>[% page_title %]</h1>