base css file

base.css

/* base.css */
/* http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling/ */
/* http://developer.yahoo.com/yui/fonts/ */
/* http://developer.yahoo.com/yui/base/ */

/* Font Reset from YUI http://developer.yahoo.com/yui/fonts

If you want this size in pixels (px)	Declare this percent (%)
                  10	                        77
                  11	                        85
                  12	                        93 (was 93)
                  13	                        100
                  14	                        108 (was 107)
                  15	                        116 (was 114)
                  16	                        123.1 (was 122)
                  17	                        131 (was 129)
                  18	                        138.5 (was 136)
                  19	                        146.5 (was 144)
                  20	                        153.9 (was 152)
                  21	                        161.6 (was 159)
                  22	                        167
                  23	                        174
                  24	                        182
                  25	                        189
                  26	                        197
*/

body{
  font:13px/1.231 arial,helvetica,clean,sans-serif; /* YUI Font Reset */
  *font-size:small;     /* YUI Font Reset */
  *font:x-small;        /* YUI Font Reset */
  height: 100%;
  background: #fff;    /* not all browsers set white as the default background color  */
  color: #444;         /* color is set to create not too much contrast with the background color */
  line-height: 1.4;    /* line-height is to ensure that text is legible enough ( enough space between the lines) */
}

select,input,button,textarea,button {
  font:99% arial,helvetica,clean,sans-serif;
}

table {
  font-size:inherit;
  font:100%;
  border-collapse: collapse;
  border-spacing: 0;
}

pre,code,kbd,samp,tt {
  font-family:monospace;
  *font-size:108%;
  line-height:100%;
}

/* YUI Base css http://developer.yahoo.com/yui/base/ */

h1 {
	/*18px via YUI Fonts CSS foundation*/
	font-size:138.5%;
}

h2 {
	/*16px via YUI Fonts CSS foundation*/
	font-size:123.1%;
}

h3 {
	/*14px via YUI Fonts CSS foundation*/
	font-size:108%;
}

/* margin and padding values are reset for all these elements
 * you could remove from there elements you do not used in your documents, but I don't think it'd worth it
 */
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
  margin: 0;
  padding: 0;
}

h1,h2,h3,h4,h5,h6,p,blockquote,ul,ol,dl {
	/* top & bottom margin based on font size */
	margin:1em 0;
}

h1,h2,h3,h4,h5,h6,strong,th,dt,b {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold;
}

abbr,acronym {
  cursor: default;
  border: none;
  font-variant: normal;
}

em,blockquote, q, em, cite, dfn, i, cite, var, address {
	/*bringing italics back */
	font-style:italic;
}

ol,ul,dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}

ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;
}

ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}

dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}

th,td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}

/* all th should be centered unless they are in tbody (table body) */
th {
	/*distinguishing table headers from data cells*/
	text-align:center;
}

tbody th {text-align: left;}

/* caption and summary are very important for tabular data but because caption is nearly impossible to style across browsers many authors do not use it or use display:none to "hide" it (which is almost the same as not using it).
 * so to prevent such workaround, I am positioning this element off-screen
 */
caption {
  position: absolute;
  left: -999em;
}

/* this is to prevent border from showing around fieldsets and images (i.e., images inside anchors)
 */
fieldset, img {
  border: 0;
}

/* to prevent a gap from showing below images in some browsers
 */
img {vertical-align: top;}

/* color is to make that element stands out (see color set via body)
 * padding is used so Internet Explorer does not cut-off descenders in letters like p, g, etc.)
 */
legend {
  color: #000;
  padding-bottom: .5em;
}

/* See Eric Meyer's article about Fixed Monospace Sizing
 * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
 */
code {color: #06f;}
code, pre {font-family: "Courier New", monospace, serif; font-size: 1em;}

/* to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes) */
blockquote p:before, blockquote p:after, q:before, q:after {content: '';}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;}

/* we use margin for hr for the same reason we do for table */
hr {
  margin-right: 30px;
  margin-left: 30px;
  border-style: inset;
  border-width: 1px;
}

/* line height helps to set the vertical alignment of radio buttons and check boxes (remember to group these in fieldsets)
 */
fieldset {line-height: 1;}

/* vertical alignment of checkboxes (a different value is served to IE 7)
 */
input[type="checkbox"] {
  vertical-align: middle;
  *vertical-align: middle;
}

/* vertical alignment of radio buttons */
input[type="radio"] {vertical-align: middle;}

/* vertical alignment of input fields for IE 6 */
input {_vertical-align: middle;}

/* a specific font-size is set for these elements */
input, button, textarea, select, optgroup, option {
  font-size: 100%;
}

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}

/* styling for links and visited links as well as for links in a hovered, focus and active state
 * make sure to keep these rules in that order, with :active being last
 * a:focus and :focus are used to help keyboard users, you may change their styling, but make sure to give users a visual clue of the element's state.
 * outline:none used with the pseudo-class :active is to avoid the sticky outline when a user clicks on a link, but choose to not follow it
 * note that the last rule does not do anything in IE as this browser does not support "outline" (besides, it treats :active and :focus the same)
 */
a:link, a:visited {color: #000;}
:focus {outline: none;}
a:focus {outline: 1px dotted #000;}
a:active, input:active, select:active, textarea:active {outline: none;}

/*
 * End of base/reset
 */

/* 
 * slightly enhanced, universal clearfix hack
 */
.grouped:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.grouped { display: inline-block; }
/* start commented backslash hack \*/
* html .grouped { height: 1%; }
.grouped { display: block; }
/* close commented backslash hack */

/*
 * End clearfix hack
 */

/*
 * Awesome Buttons
 */

/*
    awesome buttons are based on a blog post by ZERB
    Read there blog post for more information:
    "Super awesome Buttons with CSS3 and RGBA":http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

    this buttons are even more awesome, as the need only one color for all three states,
    and have an super awesome onclick state
*/

/* set an awesome color for the buttons, feel free to add new colors like an .awesome.green or .awesome.secondary */
.awesome {
  background-color: #111 !important;
  color: #fff !important;
}

/* the awesome size gets set here. Feel free to add new sizes, like .awesome.small or .small.large */
.awesome { padding: 5px 10px 6px !important; font-size: 13px !important; }
.awesome:active { padding: 6px 10px 5px !important; }

/* Touch the rest at your onw risk. */
.awesome {
  border: 0 !important;
  cursor: pointer !important;
  font-style: normal !important;
  font-weight: bold !important;
  font: inherit !important;
  line-height: 1 !important;
  position: relative !important;
  text-align: center !important;
  text-decoration: none !important;

  /* vertical margin is the opposite of button's awesomeness */
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  /* not all browser support these, but who cares? */
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25), -2px 0 1px rgba(0,0,0,0.25) !important;

          border-radius: 5px !important;
     -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
          box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;

  /* who needs images these days? */
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.2), rgba(150,150,150,.2), rgba(0,0,0,.0)) !important;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.2)), color-stop(0.5, rgba(150,150,150,.2)), to(rgba(0,0,0,.0))) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30ffffff,endColorstr=#10000000) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=2);

  /* cross browser inline block hack
     see http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ */
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle !important;
  *display: inline !important;
  position: relative;

  /* IE luv */
  zoom: 1;

  /* disable text selection (Firefox only) */
  -moz-user-select: none;
}

/* OPERA only
   if there is no border set, Opera shows a transparent background-color if border-radius is set. */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) {
  input.awesome {
    border: 1px solid RGBa(0,0,0,0) !important;
  }
}

/* hide selection background color */
.awesome::selection {
  background: transparent;
}

.awesome {
  outline: 0; /* remove dotted line, works for links only */
}
.awesome::-moz-focus-inner {
  border: none; /* remove dotted lines for buttons */
}
.awesome:focus,
.awesome:hover {
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.4), rgba(150,150,150,.3), rgba(0,0,0,.0)) !important;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.4)), color-stop(0.5, rgba(150,150,150,.3)), to(rgba(0,0,0,.0))) !important;
  #filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50ffffff,endColorstr=#20000000) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=2);
}
.awesome:active {
  background-image: -moz-linear-gradient(top, rgba(0,0,0,.2), rgba(150,150,150,.2), rgba(255,255,255,.2)) !important;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.2)), color-stop(0.5, rgba(150,150,150,.2)), to(rgba(255,255,255,.2))) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20000000,endColorstr=#50ffffff) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=315,strength=1);

          box-shadow: inset 0 1px 2px rgba(0,0,0,0.7) !important;
     -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7) !important;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.7) !important;
}

/* Safari doesn't support inset box shadow, so we better remove it */
@media screen and (-webkit-min-device-pixel-ratio:0){
  .awesome:active {
    -webkit-box-shadow: none;
  }
}

/*
 * End of Awesome Buttons
 */

/*
 * Styling flash messages in Rails
 */
.notice, .alert {
  margin-top: 0px;
  padding: 5px;
}
.notice {
  border: solid 1px #99cc99;
  background-color: #e2f9e3;
  color: #006600;
}

.alert {
  border: 1px solid #cc0000;
  background-color: #eeaaaa;
  color: #cc0000;
}
/*
 * End styling flash messages in Rails
 */

/*
 * Default forms Styling
 */
label {
  width: 120px;
  display: inline-block;
}

input, textarea {
 font-size:110%;
}

select {
  font-size:120%;
}

input.bool, input[type="checkbox"] {
  margin-right:10px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="file"]:focus,
input[type="email"]:focus,
textarea:focus, select:focus {
  border:2px solid #2c2c2c;
}

input[type="text"],
input[type="password"],
input[type="file"],
input[type="email"],
textarea, select {
  width: 300px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border:2px solid #D2D1CF;
  color:#555555;
  outline: 0 none;
  padding:5px;
}

form .input label {
  vertical-align: middle;
}

form .input.text label {
  vertical-align: top;
}
/*
 * End default forms Styling
 */

/*
 * Styling errors Rails
 */
.field_with_errors input[type="text"],
.field_with_errors input[type="password"],
.field_with_errors input[type="file"],
.field_with_errors input[type="email"],
.field_with_errors textarea,
.field_with_errors select {
  border:2px solid #E0A7A7;
}
.field_with_errors input[type="text"]:focus,
.field_with_errors input[type="password"]:focus,
.field_with_errors input[type="file"]:focus,
.field_with_errors input[type="email"]:focus,
.field_with_errors textarea:focus {
  border:2px solid #B22222;
}

.field_with_errors .error {
  padding-left: 10px;
}
/*
 * End styling errors in Rails
 */

/*
 * Additional styles from paul irish html-boilerplate
 * http://github.com/paulirish/html5-boilerplate/blob/master/css/style.css
 */

/* 
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }

  a, a:visited { color: #444 !important; text-decoration: underline; }

  a:after { content: " (" attr(href) ")"; } 

  abbr:after { content: " (" attr(title) ")"; }
  
  .ir a:after { content: ""; }  /* Don't show links for images */
  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  
  tr, img { page-break-inside: avoid; }

  @page { margin: 0.5cm; }

  p, h2, h3 { orphans: 3; widows: 3; }

  h2, h3{ page-break-after: avoid; }
}



/*
 * Media queries for responsive design
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  
  
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust 
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

/*
 * End of styles from paul irish html-boilerplate
 */