From ce204a3841039bad484f9717cf3370eff31f8ef3 Mon Sep 17 00:00:00 2001
From: Hannes Magnusson <bjori@mongodb.com>
Date: Tue, 10 Dec 2013 14:27:23 -0800
Subject: [PATCH] Make these styles re-usable

---
 downloads.php         | 16 ++++++++--------
 styles/theme-base.css | 29 ++++++++++++-----------------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/downloads.php b/downloads.php
index 44cd1342c..1d2ca80d3 100644
--- a/downloads.php
+++ b/downloads.php
@@ -93,12 +93,12 @@ site_header("Downloads",
   <?php $mver = substr($v, 0, strrpos($v, '.')); ?>
   <?php $stable = $i++ === 0 ? "Current Stable" : "Old Stable"; ?>
 
-  <div class="download-box">
-    <h3 id="v<?php echo $v; ?>">
-      <span class="release-state"><?php echo $stable; ?></span>
-      PHP <?php echo $v; ?>
-      (<a href="/ChangeLog-<?php echo $MAJOR; ?>.php#<?php echo urlencode($v); ?>" class="changelog">Changelog</a>)
-    </h3>
+  <h3 id="v<?php echo $v; ?>" class="content-header">
+    <span class="release-state"><?php echo $stable; ?></span>
+    PHP <?php echo $v; ?>
+    (<a href="/ChangeLog-<?php echo $MAJOR; ?>.php#<?php echo urlencode($v); ?>" class="changelog">Changelog</a>)
+  </h3>
+  <div class="content-box">
 
     <ul>
       <?php foreach ($a['source'] as $rel): ?>
@@ -128,8 +128,8 @@ The following official GnuPG keys of the current PHP Release Manager can be used
 to verify the tags:
 </p>
 <?php foreach ($gpg as $branch => $data): ?>
-  <div class="download-box">
-  <h3 id="gpg-<?php echo $branch; ?>">PHP <?php echo $branch; ?></h3>
+  <h3 id="gpg-<?php echo $branch; ?>" class="content-header">PHP <?php echo $branch; ?></h3>
+  <div class="content-box">
   <pre>
 <?php echo $data; ?>
   </pre>
diff --git a/styles/theme-base.css b/styles/theme-base.css
index 43e6c29cb..28c7d190c 100755
--- a/styles/theme-base.css
+++ b/styles/theme-base.css
@@ -2832,9 +2832,8 @@ fieldset {
 }
 /* }}} */
 
-.download-box {
-    margin: 3em 0 4em;
-    position: relative;
+.content-box {
+    margin: .25em 0 2em;
     background-color: rgb(238, 238, 246);
     display: block;
     float: none;
@@ -2845,46 +2844,42 @@ fieldset {
     padding: 0.75em 0.625em;
     box-shadow: 2px 0 2px -2px rgb(212, 212, 232) inset, -2px 0 2px -2px rgb(212, 212, 232) inset;
 }
-.download-box h3 {
+.content-header {
     color: #333;
     font-size: 1.125em;
     line-height: 1.33;
     margin: 0;
     padding: 0;
-    position: absolute;
-    top: -2em;
-    left: 0;
-    right: 0;
 }
-.download-box h3 .release-state {
+.content-header .release-state {
     float: right;
     opacity: 0.8;
 }
-.download-box h3 .changelog {
+.content-header .changelog {
     color:#369;
 }
-.download-box ul, .download-box li {
+.content-box ul, .content-box li {
     list-style: none;
     display: block;
     margin: 0;
     padding: 0;
 }
-.download-box li {
+.content-box li {
     margin-bottom: 0.75em;
 }
-.download-box .md5sum {
+.content-box .md5sum {
     display: block;
     font: normal 14px / 1.46 "Source Code Pro", monospace;
 }
-.download-box .md5sum:before {
+.content-box .md5sum:before {
     content: "md5: ";
     font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
 }
-.download-box .releasedate {
+.content-box .releasedate {
     float: right;
     font-size: 0.9em;
 }
-.download-box pre {
+.content-box pre {
     background: white;
     border: solid 1px rgb(214, 214, 214);
     margin: 0px;
@@ -2893,7 +2888,7 @@ fieldset {
     font: normal 14px / 1.46 "Source Code Pro", monospace;
 }
 @media (max-width: 465px) {
-    .download-box h3 .release-state {
+    .content-box h3 .release-state {
         display: none;
     }
 }