making the CSS more readable and changing the grid indents to be position: relative then offset with left rather than padding (makes far better sense)

This commit is contained in:
Dave Gamache 2011-09-08 22:27:52 -07:00
parent 737336c221
commit 94f0591c4f
4 changed files with 479 additions and 467 deletions

View File

@ -7,7 +7,6 @@
* 8/17/2011
*/
$(document).ready(function() {
/* Tabs Activiation

View File

@ -132,12 +132,12 @@
input[type="reset"],
input[type="button"] {
background: #eee; /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
@ -163,12 +163,12 @@
input[type="button"]:hover {
color: #222;
background: #ddd; /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
border: 1px solid #888;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa; }
@ -180,12 +180,12 @@
input[type="button"]:active {
border: 1px solid #666;
background: #ccc; /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
.button.full-width,
button.full-width,
@ -304,8 +304,8 @@
textarea:focus {
border: 1px solid #aaa;
color: #444;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2); }
textarea {
min-height: 60px; }
@ -330,6 +330,12 @@
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
hr {
border: solid #ddd;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 30px;
height: 0; }

View File

@ -21,9 +21,19 @@
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
[class*="g-"] { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
.container {
position: relative;
width: 960px;
margin: 0 auto;
padding: 0; }
[class*="g-"] {
position: relative;
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px; }
.row {
margin-bottom: 20px; }
/* Nested Column Classes */
.alpha { margin-left: 0; }
@ -51,21 +61,21 @@
.g-2-3rds { width: 620px; }
/* Offsets */
.indent-1 { padding-left: 60px; }
.indent-2 { padding-left: 120px; }
.indent-3 { padding-left: 180px; }
.indent-4 { padding-left: 240px; }
.indent-5 { padding-left: 300px; }
.indent-6 { padding-left: 360px; }
.indent-7 { padding-left: 420px; }
.indent-8 { padding-left: 480px; }
.indent-9 { padding-left: 540px; }
.indent-10 { padding-left: 600px; }
.indent-11 { padding-left: 660px; }
.indent-12 { padding-left: 720px; }
.indent-13 { padding-left: 780px; }
.indent-14 { padding-left: 840px; }
.indent-15 { padding-left: 900px; }
.indent-1 { left: 60px; }
.indent-2 { left: 120px; }
.indent-3 { left: 180px; }
.indent-4 { left: 240px; }
.indent-5 { left: 300px; }
.indent-6 { left: 360px; }
.indent-7 { left: 420px; }
.indent-8 { left: 480px; }
.indent-9 { left: 540px; }
.indent-10 { left: 600px; }
.indent-11 { left: 660px; }
.indent-12 { left: 720px; }
.indent-13 { left: 780px; }
.indent-14 { left: 840px; }
.indent-15 { left: 900px; }
@ -73,7 +83,6 @@
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 976px) {
.container { width: 752px; }
@ -102,21 +111,21 @@
.g-2-3rds { width: 475px; }
/* Offsets */
.indent-1 { padding-left: 47px; }
.indent-2 { padding-left: 94px; }
.indent-3 { padding-left: 141px; }
.indent-4 { padding-left: 188px; }
.indent-5 { padding-left: 235px; }
.indent-6 { padding-left: 282px; }
.indent-7 { padding-left: 329px; }
.indent-8 { padding-left: 376px; }
.indent-9 { padding-left: 423px; }
.indent-10 { padding-left: 470px; }
.indent-11 { padding-left: 517px; }
.indent-12 { padding-left: 564px; }
.indent-13 { padding-left: 611px; }
.indent-14 { padding-left: 658px; }
.indent-15 { padding-left: 705px; }
.indent-1 { left: 47px; }
.indent-2 { left: 94px; }
.indent-3 { left: 141px; }
.indent-4 { left: 188px; }
.indent-5 { left: 235px; }
.indent-6 { left: 282px; }
.indent-7 { left: 329px; }
.indent-8 { left: 376px; }
.indent-9 { left: 423px; }
.indent-10 { left: 470px; }
.indent-11 { left: 517px; }
.indent-12 { left: 564px; }
.indent-13 { left: 611px; }
.indent-14 { left: 658px; }
.indent-15 { left: 705px; }
}
@ -124,7 +133,6 @@
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
@ -164,7 +172,7 @@
.indent-12,
.indent-13,
.indent-14,
.indent-15 { padding-left: 0; }
.indent-15 { left: 0; }
}
@ -173,7 +181,6 @@
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container { width: 420px; }