web,tools: Add a list of recent donors
[gnupg-doc.git] / web / share / site.css
index 1e9237d..9fb803d 100644 (file)
  */
 
 body {
-  background-color: #f0f0fc;
+  background: #f0f0fc;
+  font-family: "Proxima Nova Regular","Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  height: 100%;
 }
 
+/*
+div#wrapper {
+  background: transparent url(/share/email-envelope.png) top right no-repeat;
+}
+*/
+
+div#wrapper,
+div#footer {
+    max-width: 850px;
+    margin: auto;
+}
+
+
 h1,
 h2,
 h3 {
-  color: #5c6064;
+  color: #000;
+  font-family: "Helvetica Neue",Arial,sans-serif;
   font-weight: bold;
   font-variant: small-caps;
   letter-spacing: 0.1em;
@@ -28,32 +45,21 @@ h3 {
 
 h1,
 h2 {
-  font-size: large;
-}
-
-h1:first-letter,
-h2:first-letter,
-h3:first-letter {
-  color: #784c6c;
-}
-
-
-h1:first-letter,
-h2:first-letter {
   font-size: x-large;
 }
 
-h3:first-letter {
-  font-size: large;
+h3 {
+       font-size: 1em;
 }
 
+
 /*
    Links
  */
 
 
 a:link {
-  color: #784c6c;
+/*  color: #784c6c;*/
   font-weight: bold;
   text-decoration: none;
 }
@@ -65,7 +71,7 @@ a:hover {
 }
 
 a:visited {
-  color: #5c6064;
+/*  color: #5c6064; */
   font-weight: bold;
   text-decoration: none;
 }
@@ -79,15 +85,11 @@ a.img:hover {
    Raise attention
  */
 
-li.important {
-  color: red;
-}
-
+li.important,
 span.important {
   color: red;
 }
 
-
 div.urgent {
   width: 85%;
   text-align: center;
@@ -95,6 +97,10 @@ div.urgent {
   font-weight: bold;
 }
 
+.ii {
+  display: none !important;
+}
+
 
 /*
    Other elements as commonly used by org-mode
@@ -144,18 +150,31 @@ div.entry-qotd
     padding-top: 5%;
     font-size: 125%;
     border-bottom: 3px #FFb580 solid;
-    font-family: verdana,arial,helvetica;
+    font-family: verdana,helvetica;
     margin-bottom: 2%;
 }
 
 
 
 #header {
-    background: url(/share/logo-gnupg-light-purple-bg.png) center no-repeat;
-    height: 120px;
+    background: transparent;
+    height: 150px;
     padding: 0px;
 }
 
+#header a.logo img {
+       height: 120px;
+}
+#header a.logo:hover img {
+    background: transparent;
+    opacity: 0.4;
+    filter: alpha(opacity=40); /* For IE8 and earlier */
+}
+#header a,
+#header a:hover {
+       background: transparent;
+}
+
 #cornerImage {
     width: 128px;
     height: 130px;
@@ -165,46 +184,137 @@ div.entry-qotd
     padding-right: 2%;
 }
 
-#leftColumn {
-    float: left;
-    text-align: right;
-    width: 18%;
-}
-
 
 /*
    Navigation
  */
+
+/* Reset the link attributes for nav except for hover  */
+nav a:visited,
+a:link {
+    color: #757575;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+nav ul,
+ul ul.sub-menu {
+    margin: 0;
+    padding: 0;
+    z-index: 5;
+}
+
 nav ul {
+    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
+    padding: 0 20px;
+    border-radius: 10px;
+    background: #efefef;
     list-style: none;
-    font-size: 100%;
-    font-family: verdana,arial,helvetica;
-    margin-bottom: 1em;
 }
 
-nav ul ul {
-    font-size: 70%;
+
+nav ul li,
+ul ul.sub-menu li {
+    list-style-type: none;
+    display: inline-block;
 }
 
-nav * li a {
-    color: #784c6c;
+
+/*Link Appearance*/
+nav ul li a,
+ul li ul.sub-menu li a {
+    text-decoration: none;
+    color: #fff;
+    padding: 10px;
+    display:inline-block;
 }
 
+/*Make the parent of sub-menu relative*/
+nav ul li {
+    position: relative;
+}
 
-nav * li a:after {
-    content: " \21d0";
-    /* FIXME: Hide the arrow using the background color.  We should use
-       width or something similar to get it aligned.  */
-    color: #f0f0fc;
+/*sub menu*/
+nav ul li ul.sub-menu {
+    display:none;
+}
+nav ul li:hover ul.sub-menu {
+    display:block;
+    background: #5f6975;
+    color: #fff;
+    z-index: 99;
+    border-radius: 0px;
+    position: absolute;
+    top: 41px;
+    left: 0;
+}
+nav ul ul li {
+    border-bottom: 1px solid #575f6a;
+    position: relative;
+    width: 100%;
 }
 
-nav * li a.selected:after {
-    content: " \21d0";
-    color: #784c6c;
+nav ul ul li a {
+    display:block !important;
 }
 
-nav img {
-    border-width: 0;
+nav ul ul li a:hover {
+    background: #4b545f;
+}
+
+
+/* The second menu line for stop menu with sub-menus.
+   This is a non-nested list.  */
+nav.subnav {
+    margin-top: 1.5em;
+}
+
+nav.subnav ul {
+    display: inline-table;
+    list-style: none;
+    color: #757575;
+    position: relative;
+    box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
+    border-radius: 6px;
+    background-color: #efefef;
+}
+
+nav.subnav ul li a {
+    display: block;
+    font-weight: normal;
+    text-decoration: none;
+    padding: 0 30px 0 10px;
+}
+
+nav * li a.selected {
+    color: #0093DD;
+}
+
+
+/*
+    The bottom menu
+ */
+
+#nav_bottom ul {
+    list-style: none;
+    padding-left: 0;
+    margin-left: 0;
+    float: left;
+}
+
+#nav_bottom li {
+    float: left;
+    padding-right: 3em;
+}
+
+#nav_bottom p {
+    clear: left;
+    padding-top: 1em;
+}
+
+#nav_bottom a {
+    clear: left;
+    font-variant: normal;
 }
 
 
@@ -213,10 +323,6 @@ nav img {
  */
 
 main {
-    float: left;
-    margin-left: 5%;
-    margin-right: 5%;
-    width: 72%;
 }
 
 main ul {
@@ -225,22 +331,53 @@ main ul {
     margin-left: 1em;
 }
 
+div#content {
+  background-color: #fff;
+  margin-top: 1em;
+  padding: 1em;
+  box-shadow: 0 1px 1px rgba(154,170,207,0.1);
+}
+
+div#content a,
+div#footer a {
+  color: #0093DD !important;
+}
 
 div.outline-text-2 {
-  padding-top: 5px;
-  padding-right: 3px;
-  border-top: 2px solid #5c6064;
-  border-right: 2px solid #784c6c;
+  margin: 0;
+  padding: 0.5em 0.5em 0 0;
+  border-top: 2px solid #DEECF9;
+  border-right: 2px solid #DEECF9;
 }
 
 div.outline-text-3 {
   padding-top: 3px;
   padding-right: 3px;
-  border-top: 1px solid #5c6064;
-  border-right: 1px solid #784c6c;
+  border-top: 1px solid #E2EEFA;
+  border-right: 1px solid #E2EEFA;
+}
+
+div.outline-text-2,
+div.outline-text-3 {
+  margin-bottom: 2em;
+}
+
+div.outline-text-3,
+div > h3 {
+  margin-left: 1em;
 }
 
+h2,
+h3 {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
 
+h3 {
+  font-size: 1em;
+}
+
+/* Not anymore used:
 #rightColumn {
     float: right;
     width: 18%;
@@ -254,28 +391,40 @@ div.outline-text-3 {
     padding-left: 0;
     margin-left: 1em;
 }
+*/
+
+.morelink {
+    font-size: smaller;
+    font-variant: normal;
+    font-weight: normal;
+    text-decoration: none;
+}
+
+.morelink:after {
+    content: "{more}";
+}
+
 
 #cpyright {
-    font-style: italic;
-    font-size: 0.6em;
+    padding-top: 4em;
 }
 
 #smallnote {
-    font-style: italic;
     font-size: 0.8em;
 }
 
 #footer {
+    border-top: 2px solid #5c6064;
     margin-top: 5em;
-    margin-left: 10%;
-    width: 80%;
+    margin-left: 5%;
+    margin-right: 5%;
     clear: both;
+    font-size: 0.8em;
 }
 
-#footer p {
-    font-style: italic;
-    font-size: 0.3em;
-    padding: 2em 0;
+
+#checkoutSummary {
+    background-color: #f0f0f0;
 }
 
 
@@ -286,11 +435,46 @@ div.outline-text-3 {
 
 pre {
     border: thin black solid;
-    background-color: #C4C4C4;
+    background-color: #efefef;
     padding: 0.5em;
     overflow: auto;
 }
 
+/* Classes used by makeinfo (manuals).  */
+
+pre.display {
+    font-family:inherit;
+}
+pre.format {
+    font-family:inherit;
+}
+pre.smalldisplay {
+    font-family:inherit;
+    font-size:smaller;
+}
+pre.smallformat {
+    font-family:inherit;
+    font-size:smaller;
+}
+pre.smallexample {
+    font-size:smaller;
+}
+pre.smalllisp {
+    font-size:smaller;
+}
+
+span.sc {
+    font-variant:small-caps;
+}
+span.roman {
+    font-family:serif;
+    font-weight:normal;
+}
+span.sansserif {
+    font-family:sans-serif;
+    font-weight:normal;
+}
+
 
 /* Table stuff */
 
@@ -319,5 +503,101 @@ td.right  {
 }
 
 
+/* Tag cloudlist.  */
+
+#tagcloudlist ul {
+    list-style: none;
+    float: left;
+}
+
+#tagcloudlist li {
+    float: left;
+    line-height: 130%;
+    font-variant: small-caps;
+    padding-right: 1em;
+}
+
+#tagcloudlist li:before  {
+    content: "\00bb\00a0";
+}
+
+#tagcloudlist p {
+   clear: left;
+   padding-top: 1em;
+   font-size: 0.8em;
+}
+
+#tagcloudlist p.doclear {
+   clear: left;
+   padding-top: 0;
+   padding-bottom: 0;
+   margin-top: 0;
+   margin-bottom: 0;
+}
+
+#tagcloudlist a {
+   font-variant: normal;
+   font-size: 0.8em;
+}
+
+
+/* A box of logos.  */
+
+.logobox p {
+  margin-top: 20px;
+}
+
+.logobox img {
+    margin-right: 20px;
+}
+
+
+/* Donation stuff. */
+
+.buttonbox {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    float: none;
+}
+
+.donate-button {
+    overflow: hidden;
+    display: inline-block;
+    background-image: linear-gradient(#28A0E5, #015E94);
+    border: 0px none;
+    padding: 1px;
+    text-decoration: none;
+    border-radius: 5px;
+    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    line-height: 30px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    float: left;
+    margin-right: 20px;
+    margin-bottom: 20px;
+}
+
+.donate-button-low {
+    overflow: hidden;
+    display: inline-block;
+    background-image: linear-gradient(#28A0E5, #015E94);
+    border: 0px none;
+    text-decoration: none;
+    border-radius: 4px;
+    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    line-height: 20px;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    float: left;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    margin-top: 5px;
+}
+
+
 
 /* EOF */
\ No newline at end of file