style download button and links, clean up styles and add support for smaller resolutions

Author: danheberden

themes/jquery.com/i/download.png

@@ -8,86 +8,108 @@ a,
 .title {
 	color: #B24926;
 }
-
 #content a:hover {
 	color: #333;
 }
 
+
 #banner-secondary {
-  background: #222;
+	background: #222;
+	position: relative;
+}
+#banner-secondary a {
+	color: #b3b3b3;
 }
-#banner-secondary .feature-bar {
-  background: #111;
+#banner-secondary h3 {
+	color: #7ACEF4;
+	margin-bottom:0.5em;
+}
+#banner-secondary .features-box {
+	width:60%;
+	float: right;
 }
 .feature-box {
-  float:left;
-  width: 20%;
+	float:left;
+	width: 33%;
+	text-align: center;
+	padding: 0% 2%;
 }
-.feature-bar .feature-box-image {
-  width: 120px;
-  height: 107px;
-  overflow: hidden;
+#banner-secondary .features-box p {
+	font-size: .8em;
+	line-height: 1em;
+	padding: 0;
+}
+.features-box .feature-box-image {
+	margin: 0 auto 1em auto;
+	width: 120px;
+	height: 107px;
+	overflow: hidden;
 }
 .lightweight-footprint .feature-box-image {
-  background: url('i/feature-sprites.png') 0px 0px no-repeat;
+	background: url('i/feature-sprites.png') 0px 0px no-repeat;
 }
 .css3-compliant .feature-box-image{
-  background: url('i/feature-sprites.png') -139px 0px no-repeat;
+	background: url('i/feature-sprites.png') -139px 0px no-repeat;
 }
 .cross-browser .feature-box-image{
-  background: url('i/feature-sprites.png') -278px 0px no-repeat;
+	background: url('i/feature-sprites.png') -278px 0px no-repeat;
 }
 
-
-
 #banner-secondary p.intro {
 	padding: 0;
 }
 
-#banner-secondary .download-box {
-	border: 1px solid #aaa;
-	background: #333;
-	background: -moz-linear-gradient(left, #333 0%, #444 100%);
-	background: -webkit-linear-gradient(left, #333 0%, #444 100%);
-	background: -o-linear-gradient(left, #333 0%, #444 100%);
-	background: linear-gradient(to right, #333 0%, #444 100%);
+#banner-secondary .downloads-box {
 	float: right;
 	width: 40%;
 	text-align: center;
-	font-size: 20px;
-	padding: 10px;
-	border-radius: 5px;
-	box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
 }
 
-#banner-secondary .download-box h2 {
+#banner-secondary .downloads-box h2 {
 	color: #71D1FF;
 }
 
-#banner-secondary .download-box .button {
+#banner-secondary .downloads-box .button {
 	float: none;
 	display: block;
 	margin-top: 15px;
 }
+#banner-secondary .downloads-box span.download {
+	background: url('i/download.png') 0px 0px;
+	width: 44px;
+	height:37px;
+	position: relative;
+	top: 1em;
+	display:inline-block;
+	margin-right:0.5em;
+}
 
-#banner-secondary .download-box p {
+#banner-secondary .downloads-box p {
 	margin: 15px 0 5px;
 }
 
-#banner-secondary .download-option {
-	width: 45%;
-	float: left;
-	font-size: 16px;
+#banner-secondary .download-main {
+	height: 107px;
+	width: 90%;
+	margin-left:5%;
+	margin-bottom:1em;
 }
-
-#banner-secondary .download-legacy {
-	float: right;
+#banner-secondary .download-main > a {
+	background: #D18F4F;
+	color: #FFF;
+	display:block;
+	padding: 0.1em;
+	font-size: 2em;
+	width: 100%;
+	text-align:center;
+	text-decoration: none;
 }
 
-#banner-secondary .download-option span {
+
+#banner-secondary .download-main > a  span {
+	margin-top: 0.2em;
 	display: block;
-	font-size: 14px;
-	color: #71D1FF;
+	font-size: 0.4em;
 }
 
 #content .dev-links {
@@ -162,14 +184,14 @@ a,
 	display: none;
 }
 
-@media all and (max-width: 600px) {
-	#banner-secondary p.intro,
-	#banner-secondary .download-box {
-		float: none;
-		width: auto;
+@media all and (max-width: 820px) {
+	#banner-secondary .downloads-box {
+		float:none;
+		width: 100%;
+		margin-bottom: 1em;
 	}
-
-	#banner-secondary .download-box {
-		overflow: auto;
+	#banner-secondary .features-box {
+		float:none;
+		width:100%;
 	}
 }