css descriptions

style.css

/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
*/


/**
 * Initial reset of any browser defaults on HTML5 elements
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/*
 * Make some HTML5 elements display block level
 * Display not properly defined in IE6/7/8/9 & FF3
*/

article, 
aside, 
details, 
figcaption, 
figure,
footer, 
header, 
hgroup, 
menu, 
nav, 
section {
  display: block;
}

/*
 * 
*/

blockquote, 
q { 
  quotes: none; 
}

/*
 * 
*/

blockquote:before, 
blockquote:after,
q:before, 
q:after { 
  content: ""; 
  content: none; 
}

/*
 * 
*/

ins { 
  background-color: #ff9; 
  color: #000; 
  text-decoration: none; 
}

/*
 * 
*/

mark { 
  background-color: #ff9; 
  color: #000; 
  font-style: italic; 
  font-weight: bold; 
}

/*
 * 
*/

del { 
  text-decoration: line-through; 
}

/*
 * 
*/

abbr[title], 
dfn[title] { 
border-bottom: 1px dotted; 
cursor: help; 
}


/* 
 * Remove most spacing between table cells
*/

table { 
  border-collapse: collapse; 
  border-spacing: 0; 
}

/*
 * 
*/

hr { 
  display: block; 
  height: 1px; 
  border: 0; 
  border-top: 1px solid #ccc; 
  margin: 1em 0; 
  padding: 0; 
}



/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */

/**
a. Hack retained to preserve specificity:
Helvetica looks better than Arial on Mac
Arial looks better than Helvetica on Windows
people were struggling to decide if we should put Arial or Helvetica first,
it's discovered the clever way is to use neither, get rid of both, and let the OS and browser decide, they will always pick the best

b. Allow font to resize in older versions:
Set font-size to small for IE 6/7
Percents could work for IE, but for backCompat purposes, we are using keywords
**/

body { 
  font:13px/1.231 sans-serif; 
  *font-size:small; 
}

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


/* Normalize monospace sizing:
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome 
 */

pre, 
code, 
kbd, 
samp { 
  font-family: monospace, sans-serif; 
  font-size: 1em;
}


/**
 * Minimal base styles.
 */

/* Always force a scrollbar in non-IE */

html { overflow-y: scroll; }

/* j.mp/webkit-tap-highlight-color */

a:link { -webkit-tap-highlight-color: #FF5E99; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */

a:hover, 
a:active { outline: none; }

a, 
a:active, 
a:visited { color: #607890; }

a:hover { color: #036; }

ul, 
ol { margin-left: 2em; }

ol { list-style-type: decimal; }

/* Remove margins for navigation lists */

nav ul, 
nav li { margin: 0; list-style:none; }

small { font-size: 85%; }

b, 
strong, 
th { font-weight: bold; }

td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */

sub, 
sup { 
  font-size: 75%; 
  line-height: 0; 
  position: relative; 
}

sup { 
  top: -0.5em; 
}

sub { 
  bottom: -0.25em; 
}

/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */

pre {
  white-space: pre; 
  white-space: pre-wrap; 
  word-wrap: break-word;
  padding: 15px;
}

.ie6 legend, 
.ie7 legend { 
  margin-left: -7px; 
} 

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

input, 
select { 
  vertical-align: middle; 
}

/* Hand cursor on clickable input elements */
label, 
input[type="button"], 
input[type="submit"], 
input[type="image"], 
button { 
  cursor: pointer; 
}

/* 1) Make inputs and buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
   2) WebKit browsers add a 2px margin outside the chrome of form elements. 
      Firefox adds a 1px margin above and below textareas */
button, 
input, 
select, 
textarea { 
  width: auto; 
  overflow: visible; 
  margin: 0; 
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

/* Remove extra padding and inner border in Firefox */
input::-moz-focus-inner,
button::-moz-focus-inner { border: 0; padding: 0; }

/* Colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; 
  -webkit-box-shadow: 0 0 5px red; 
  -moz-box-shadow: 0 0 5px red; 
  box-shadow: 0 0 5px red;
}

.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { 
  background-color: #f0dddd; 
}

/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink! */
::-moz-selection{ background: #FF5E99; color: #fff; text-shadow: none; }
::selection { background: #FF5E99; color: #fff; text-shadow: none; }

/*
 * Bicubic resizing for non-native sized IMG:
 * Allow high quality bicubic image resampling for <img> element
 * Improves readability when scaled in IE
 * - (Read before using) http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
*/

.ie7 img { -ms-interpolation-mode: bicubic; }


/**
 * You might tweak these..
 */

body, select, input, textarea {
  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* Set your base font here, to apply evenly */
  /* font-family: Georgia, serif;  */
}

/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }


/**
 * Primary styles
 *
 * Author: 
 */
















/**
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements in most situations.
   nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: block; overflow:hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



/**
 * Media queries for responsive design.
 *
 * These follow after primary styles so they will successfully override.
 */

@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, Mobile 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; } */
}


/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  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; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}