From dd107f4115eb370e63eba34c1d64e8947ddf396d Mon Sep 17 00:00:00 2001
From: Nicolae Claudius <nicolae_claudius@yahoo.com>
Date: Sun, 18 Sep 2011 08:11:59 -0700
Subject: [PATCH] refactor, normalize

---
 .../{application.css.erb => application.css}  |  21 +-
 app/assets/stylesheets/normalize.css          | 386 ++++++++++++++++
 app/assets/stylesheets/overrides.css.erb      |  16 +
 app/assets/stylesheets/theme/base.css         | 412 ++++++++++++++++++
 4 files changed, 817 insertions(+), 18 deletions(-)
 rename app/assets/stylesheets/{application.css.erb => application.css} (51%)
 create mode 100644 app/assets/stylesheets/normalize.css
 create mode 100644 app/assets/stylesheets/overrides.css.erb
 create mode 100644 app/assets/stylesheets/theme/base.css

diff --git a/app/assets/stylesheets/application.css.erb b/app/assets/stylesheets/application.css
similarity index 51%
rename from app/assets/stylesheets/application.css.erb
rename to app/assets/stylesheets/application.css
index 5742cf7..e246dfe 100644
--- a/app/assets/stylesheets/application.css.erb
+++ b/app/assets/stylesheets/application.css
@@ -2,25 +2,10 @@
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
-*= require web-app-theme/base
+*= require normalize
+*= require theme/base
 *= require web-app-theme/themes/default/style.css
 *= require active_scaffold
+*= require overrides
 *= require_self
 */
-
-#main .block .content h2 {
-  margin-left: 0;
-}
-
-#main .block .content .active-scaffold-header h2 {
-  font-size: 200%;
-}
-
-#main .active-scaffold th a {
-  text-shadow: none;
-}
-
-.flash .alert {
-  border: 1px solid #bb9004;
-  background: #f9c006 url("<%= asset_path("web-app-theme/themes/default/images/messages/warning.png") %>") no-repeat 10px center;
-}
diff --git a/app/assets/stylesheets/normalize.css b/app/assets/stylesheets/normalize.css
new file mode 100644
index 0000000..a7a472a
--- /dev/null
+++ b/app/assets/stylesheets/normalize.css
@@ -0,0 +1,386 @@
+/* =============================================================================
+   normalize.css
+   2011-07-06T20:20 UTC
+   //github.com/jonathantneal/normalize.css
+
+   Normalize.css is a customisable CSS file that makes browsers render all
+   elements more consistently and in line with modern standards. We researched
+   the differences between default browser styles in order to precisely target
+   only the styles that need normalizing.
+
+   How comment documentation is written:
+   Comments: (anchor) (type of change) (summary of issue) in (affected browsers)
+   Url: (url related to above comment)
+
+   To be concise, comments are restricted to a length of 77 characters or less.
+
+   What 'types of change' mean:
+   Addresses: Changes involving downgrades for greater cross-browser consistency
+   Corrects: Bug fixes and corrections to unexpected visual quirks
+   Improves: Improvements based on popular usage and html5 recommendation
+   ========================================================================== */
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * Corrects block display not defined in IE6/7/8/9 & FF3
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+	display: block;
+}
+
+/*
+ * 1. Improves visual focus of mouse in all browsers
+ * 2. Corrects text resizing oddly when font size is set using ems in IE6/7
+ *    http://clagnut.com/blog/348/#c790
+ * 3. Corrects page centering in all browsers regardless of content height
+ * 4. Improves visual appearance of containers during a delegated click in mSaf
+ *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
+ * 5. Corrects text resizing oddly after orientation change in all handhelds
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+
+html {
+	cursor: default; /* 1 */
+	font-size: 100%; /* 2 */
+	overflow-y: scroll; /* 3 */
+	-webkit-tap-highlight-color: transparent; /* 4 */
+	-ms-text-size-adjust: 100%; /* 5 */
+	-webkit-text-size-adjust: 100%; /* 5 */
+}
+
+/* 
+ * 1. Addresses text resizing limitations in IE6/7
+ *    Improves text sizing inconsistency in all browsers
+ *    Known issue: text sizing unnecessary for 'form'
+ * 2. Improves margins set oddly in IE6/7 FF3/4 S5 C10
+ */
+
+body,
+form,
+input,
+button,
+select, 
+textarea {
+	font-size: 100%; /* 1 */
+	margin: 0; /* 2 */
+}
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+/*
+ * Improves appearance when active or hovered in all browsers
+ * people.opera.com/patrickl/experiments/keyboard/test
+ */
+
+a,
+a:active,
+a:hover {
+	outline: none;
+}
+
+/*
+ * Addresses outline set oddly in C10
+ */
+
+a:focus {
+	outline: thin dotted;
+}
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+/*
+ * Corrects styling not present in IE6/7/8/9 S5 C10
+ */
+
+abbr {
+	_border-bottom: expression(this.title ? '1px dotted' : 'none');
+}
+
+abbr[title] {
+	border-bottom: 1px dotted;
+}
+
+/*
+ * Corrects style set incorrectly as 'bolder' in FF3/4 S4/5 C10
+*/
+
+b, 
+strong { 
+	font-weight: bold; 
+}
+
+/*
+ * Corrects styling not present in S5 C10
+ */
+
+dfn {
+	font-style: italic;
+}
+
+/*
+ * Corrects styling not present in IE6/7/8/9
+ */
+
+mark {
+	background: #FF0;
+	color: #000;
+}
+
+/*
+ * Corrects font family displayed oddly in IE6 S5 C10
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
+
+pre,
+code,
+kbd,
+samp {
+	font-family: monospace, monospace;
+	_font-family: 'courier new', monospace;
+	font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers
+ */
+
+pre {
+	white-space: pre;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+/*
+ * Addresses CSS quotes not supported in IE6/7
+ */
+
+q {
+	quotes: none;
+}
+
+/*
+ * Addresses quote property not supported in S4
+ */
+
+q:before,
+q:after {
+	content: '';
+	content: none;
+}
+
+/*
+ * Improves appearance in all browsers
+ */
+
+small,
+sub,
+sup {
+	font-size: 75%;
+}
+
+/*
+ * Improves appearance in all browsers
+ * gist.github.com/413930
+ */
+
+sub,
+sup {
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+/*
+ * Improves appearance of navigation-specific lists
+ */
+
+nav ul {
+	list-style: none;
+}
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * Corrects display not defined in IE6/7/8/9 & FF3
+ */
+
+audio[controls],
+canvas,
+video {
+	display: inline-block;
+	*display: inline;
+}
+
+audio {
+	display: none;
+	_display: expression(this.controls ? 'inline' : 'none');
+	*zoom: 1;
+}
+
+audio[controls] {
+	display: inline-block;
+}
+
+/*
+ * 1. Improves readability when inside 'a' in all browsers
+ * 2. Improves visual appearance when scaled in IE7
+ *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+	border: 0; /* 1 */
+	-ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9 
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects alignment displayed oddly in IE6/7
+ */
+
+legend {
+	*margin-left: -7px;
+}
+
+/*
+ * Improves appearance in all browsers
+ */
+
+button,
+input,
+select,
+textarea {
+	-webkit-appearance: none;
+	border-radius: 0;
+	vertical-align: baseline;
+	*vertical-align: middle;
+}
+
+/*
+ * 1. Corrects FF3/4 setting it using !important in the UA stylesheet
+ * 2. Corrects spacing displayed oddly in IE6/7
+ * 3. Corrects inability to style clickable 'input' types in iOS
+ */
+
+button,
+input {
+	line-height: normal; /* 1 */
+	_overflow: expression(this.type == 'button|reset|submit' ? 'visible' : ''); /* 2 */
+}
+
+/* 3 */
+
+button,
+input[type="button"], 
+input[type="reset"], 
+input[type="submit"] {
+	overflow: visible;
+}
+
+/*
+ * Addresses box sizing forced to border-box in IE6/7
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+	box-sizing: border-box;
+}
+
+/*
+ * Addresses sizing set oddly to searchfield in S5 iOS C10
+ * Known issue: -moz included to future-proof
+ */
+
+input[type="search"] {
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+	box-sizing: content-box;
+}
+
+/*
+ * Addresses inner padding displayed oddly in S5 C10 on OSX
+ */
+
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Corrects appearance displayed oddly in FF3/4
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+
+/*
+ * 1. Corrects scrollbar displayed oddly in IE6/7/8/9
+ * 2. Improves readability and alignment in all browsers
+ */
+
+textarea {
+	overflow: auto; /* 1 */
+	vertical-align: top; /* 2 */
+}
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+/* 
+ * Improves visual appearance in all browsers
+ */
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/overrides.css.erb b/app/assets/stylesheets/overrides.css.erb
new file mode 100644
index 0000000..a9aff7b
--- /dev/null
+++ b/app/assets/stylesheets/overrides.css.erb
@@ -0,0 +1,16 @@
+#main .block .content h2 {
+  margin-left: 0;
+}
+
+#main .block .content .active-scaffold-header h2 {
+  font-size: 200%;
+}
+
+#main .block .content .active-scaffold th a {
+  text-shadow: none;
+}
+
+.flash .alert {
+    border: 1px solid #bb9004;
+    background: #f9c006 url(<%=  asset_path("web-app-theme/themes/default/images/messages/warning.png") %>) no-repeat 10px center;
+}
diff --git a/app/assets/stylesheets/theme/base.css b/app/assets/stylesheets/theme/base.css
new file mode 100644
index 0000000..58a3487
--- /dev/null
+++ b/app/assets/stylesheets/theme/base.css
@@ -0,0 +1,412 @@
+/*
+    Override base to remove zero-reset.
+*/
+.clear { clear: both; height: 0; }
+
+.wat-cf:after {
+     content: "."; 
+     display: block; 
+     height: 0; 
+     clear: both; 
+     visibility: hidden;
+}
+
+.wat-cf {display: inline-block;}
+
+/* Hides from IE-mac \*/
+* html .wat-cf {height: 1%;}
+.wat-cf {display: block;}
+/* End hide from IE-mac */
+
+h1 { margin: 15px 0; font-size: 22px; font-weight: normal; }
+h2 { font-size: 22px; margin: 15px 0; font-weight: normal;}
+h3 { font-size: 18px; margin: 10px 0; font-weight: normal;}
+h4 { font-size: 16px; margin: 10px 0; font-weight: normal;}
+hr {height: 1px; border: 0; }
+p { margin: 15px 0;}
+a img { border: none; }
+
+body {
+  font-size: 12px;
+  font-family: sans-serif;  
+}
+
+#container {
+  min-width: 960px;
+}
+
+#header, #wrapper {
+  padding: 0 20px;
+}
+
+#header {
+  position: relative;
+  padding-top: 1px;  
+}
+
+#header h1 {
+  margin: 0;
+  padding: 10px 0;  
+  font-size: 26px;
+}
+
+#header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
+  text-decoration: none;
+}
+
+#main {  
+  width: 70%;
+  float: left;    
+}
+
+.actions-bar {
+  padding: 10px 1px;
+}
+
+.actions-bar .actions {
+  float: left;
+}
+
+
+.actions-bar .pagination {
+  float: right;
+  padding: 1px 0;
+}
+
+#sidebar {
+  width: 25%;
+  float: right;      
+}
+
+#sidebar h3 {  
+  padding: 10px 15px;
+  margin: 0;
+  font-size: 13px;
+}
+
+#sidebar .block {
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+}
+
+#sidebar .block .content {
+  padding: 0 15px;
+}
+
+#sidebar ul.navigation li a:link, #sidebar ul.navigation li a:visited {
+  display: block;
+  padding: 10px 15px;
+}
+
+#sidebar .block .sidebar-block, #sidebar .notice {
+  padding:10px;
+}
+
+#wrapper {
+  padding-top: 20px;
+}
+
+#main .block {
+  margin-bottom: 20px;
+  padding-top: 1px;
+}
+
+#main .block .content .inner {
+  padding: 0 15px 15px;  
+}
+
+#main .main p.first {
+  margin-top: 0;
+}
+
+#user-navigation {
+  position: absolute;
+  top: 0px;
+  right: 20px;  
+}
+
+#main-navigation {
+  width: 100%;
+}
+
+#user-navigation ul, #main-navigation ul, .secondary-navigation ul, #sidebar ul.navigation {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+#user-navigation ul li, #main-navigation ul li, .secondary-navigation ul li {
+  float: left;  
+}
+
+#main-navigation ul li {
+  margin-right: 5px;
+}
+
+#user-navigation ul li {
+  padding: 5px 10px;
+}
+
+#main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
+.secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
+#user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
+  text-decoration: none;
+}
+
+#main-navigation ul li a {
+  font-size: 14px;
+  line-height: 14px;
+  display: block;
+  padding: 8px 15px;
+}
+
+.secondary-navigation {
+  font-size: 13px;  
+  border-bottom-width: 10px;
+  border-bottom-style: solid;
+}
+
+.secondary-navigation ul li a {
+  display: block;
+  padding: 10px 15px;  
+}
+
+#footer {
+  padding-bottom: 20px;
+}
+
+/* pagination */
+
+.pagination a, .pagination span, .pagination em {
+  padding: 2px 5px;
+  margin-right: 5px; 
+  display: block;
+  float: left;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.pagination em {
+  font-weight: bold;  
+}
+
+.pagination a {
+  text-decoration: none;  
+}
+
+/* tables */
+.table {
+  width: 100%;
+  border-collapse: collapse;  
+  margin-bottom: 15px;
+}
+
+.table th {
+  padding: 10px;
+  font-weight: bold;
+  text-align: left;
+}
+
+.table th.first {
+  width: 30px;
+}
+
+.table th.last {
+  width: 200px;  
+}
+
+.table .checkbox {
+  margin-left: 10px;
+}
+
+.table td {
+  padding: 10px;
+}
+
+.table td.last {
+  text-align: right;
+}
+
+/* forms */
+
+input.checkbox {
+  margin: 0;
+  padding: 0;
+}
+
+.form .group {
+  margin-bottom: 15px;
+}
+
+.form div.left {
+  width: 20%;
+  float: left;
+}
+
+.form div.right {
+  width: 75%;
+  float: right;
+}
+
+.form .columns .column {
+  width: 48%;
+}
+
+.form .columns .left {
+  float: left;
+}
+
+.form .columns .right {
+  float: right;
+}
+
+.form label.label, .form input.text_field, .form textarea.text_area {
+  font-size: 1.2em;
+  padding: 1px 0;
+  margin: 0;
+}
+
+.form label.right {
+  text-align: right;
+}
+
+.form input.checkbox, .form input.radio {
+  margin-right: 5px;
+}
+
+.form label.checkbox, .form label.radio {
+  line-height: 1.5em;
+}
+
+.form label.label {
+  display: block;
+  padding-bottom: 2px;  
+  font-weight: bold;
+}
+
+.form div.fieldWithErrors label.label {
+  display: inline;
+}
+
+.form .fieldWithErrors .error {
+  color: red;
+}
+
+.form input.text_field, .form textarea.text_area {
+  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+}
+
+/* lists */
+
+ul.list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+ul.list li {
+  clear: left;
+  padding-bottom: 5px;
+}
+
+ul.list li .left {
+  float: left;  
+}
+
+ul.list li .left .avatar {
+  width: 50px;
+  height: 50px;
+}
+
+ul.list li .item {
+  margin-left: 80px;
+}
+
+ul.list li .item .avatar {
+  float: left;
+  margin: 0 5px 5px 0;
+  width: 30px;
+  height: 30px;
+}
+
+/* box */
+
+#box {
+  width: 500px;
+  margin: 50px auto;  
+}
+
+#box .block {
+  margin-bottom: 20px;
+}
+
+#box .block h2 {
+  padding: 10px 15px;
+  margin: 0;  
+}
+
+#box .block .content {
+  padding: 10px 20px;
+}
+
+/*  Inspired by http://particletree.com/features/rediscovering-the-button-element */
+
+a.button:link, a.button:visited, a.button:hover, a.button:active, button.button {
+  color: #222;
+  display:block;
+  float:left;
+  margin:0 7px 0 0;
+  background-color: #eee;
+  border:1px solid #bfbfbf;
+  font-size: 1em;
+  line-height: 1.3em;
+  font-weight:bold;
+  cursor:pointer;
+  padding:5px 10px 6px 7px;
+  text-decoration: none;
+}
+
+button.button {
+  width:auto;
+  overflow:visible;
+  padding:4px 10px 3px 7px; /* IE6 */
+}
+button.button[type] {
+  padding:5px 10px 5px 7px; /* Firefox */
+  line-height:17px; /* Safari */
+}
+
+*:first-child+html button.button[type] {
+  padding:4px 10px 3px 7px; /* IE7 */
+}
+
+button.button img, a.button img {
+  margin:0 3px -3px 0 !important;
+  padding:0;
+  border:none;
+  width:16px;
+  height:16px;
+}
+
+button.button:hover, a.button:hover {
+  background-color:#dedede;
+}
+
+button.button:active, a.button:active {
+  background-color:#e5e5e5;
+}
+.text_button_padding{
+  color: #222222;
+  display: block;
+  float: left;
+  font-size: 1em;
+  line-height: 2em;
+  margin: 0 7px 0 0;
+  padding: 5px 0 6px 7px;
+  text-decoration: none;
+}
+.link_button{
+  cursor: pointer;
+}
\ No newline at end of file