agnostic-frontend 0.0.1.rc3 → 0.0.1.rc4

data/vendor/assets/stylesheets/grid/intuit.css

@@ -0,0 +1,927 @@
+@charset "UTF-8";
+/*------------------------------------*\
+  INUIT.CSS
+\*------------------------------------*/
+/*
+Author:             Harry Roberts
+Twitter:            @inuitcss
+Author URL:         csswizardry.com
+Project URL:        inuitcss.com
+Version:            3.2
+Date:               24 November 2011
+
+Copyright 2011 Harry Roberts
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+*/
+
+
+
+
+
+/*------------------------------------*\
+  CONTENTS
+\*------------------------------------*/
+/*
+RESET
+SHARED
+MAIN
+GRIDS
+CLEARFIX
+ISLAND
+MEDIA
+LOGO
+NAV
+TYPE
+IMAGES
+FORMS
+TABLES
+MESSAGES
+MISC
+CLASSES
+DIAGNOSTICS
+NARROW
+MOBILE
+PRINT
+*/
+
+
+
+
+
+/*------------------------------------*\
+  $RESET
+\*------------------------------------*/
+/*
+A more considered reset; more of a restart... csswizardry.com/2011/10/reset-restarted
+*/
+html,body,div,span,applet,object,iframe,
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
+a,abbr,address,cite,code,
+del,dfn,em,img,ins,kbd,q,s,samp,
+small,strong,sub,sup,tt,var,
+b,u,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;
+}
+article,aside,details,figcaption,figure,footer,
+header,hgroup,menu,nav,section{
+  display:block;
+}
+h1,h2,h3,h4,h5,h6{
+  font-size:1em;
+}
+table{
+  border-collapse:collapse;
+  border-spacing:0;
+}
+strong,b,mark{
+  font-weight:bold;
+  font-style:inherit;
+}
+em,i,cite,q,address,dfn,var{
+  font-style:italic;
+  font-weight:inherit;
+}
+abbr[title],dfn[title]{
+  cursor:help;
+  border-bottom:1px dotted;
+}
+ins{
+  border-bottom:1px solid;
+}
+a,u,ins{
+  text-decoration:none;
+}
+del,s{
+  text-decoration:line-through;
+}
+pre,code,samp,kbd{
+  font-family:monospace;
+}
+small{
+  font-size:0.75em;
+}
+img{
+  border:none;
+  font-style:italic;
+}
+input,
+select,option,optgroup,
+textarea{
+  font:inherit;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $SHARED
+\*------------------------------------*/
+/*
+Rather than repeating declarations over and over, let’s make a shared section.
+*/
+h1,h2,h3,h4,h5,h6,
+ul,ol,dl,p,address,figure,pre,fieldset,table,hr,
+.nav,.island,.media{
+  margin-bottom:24px;
+  margin-bottom:1.5rem;
+}
+figcaption,small{
+  font-size:12px;
+  font-size:0.75rem;
+}
+ul,ol,dd{
+  margin-left:3em;
+}
+small,code{
+  line-height:1;
+}
+pre,code,
+input,textarea{
+  font:inherit;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $MAIN
+\*------------------------------------*/
+html{
+  overflow-y:scroll; /* Force scrollbars 100% of the time */
+  font-size:100%; /* Use 16px as per informationarchitects.jp/en/100e2r/ and wilsonminer.com/posts/2008/oct/20/relative-readability/ */
+  line-height:1.5; /* A safe default for type of any size. */
+  /* You should always specify a colour and background, override these in your own stylesheet if desired. */
+  background-color:#fff;
+  color:#333;
+}
+body{
+  min-height:100%;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $GRIDS
+\*------------------------------------*/
+/*
+Build a custom grid-system igloo at inuitcss.com
+Include this igloo in igloos.css
+*/
+
+
+
+
+
+/*------------------------------------*\
+  $CLEARFIX
+\*------------------------------------*/
+/*
+Fix clearing issues as per: nicolasgallagher.com/micro-clearfix-hack/
+*/
+.cf,
+.grids,
+.media{
+  zoom:1;
+}
+.cf:before,
+.grids:before,
+.media:before,
+
+.cf:after,
+.grids:after,
+.media:after{
+  content:"";
+  display:table;
+}
+.cf:after,
+.grids:after,
+.media:after{
+  clear:both;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $ISLAND
+\*------------------------------------*/
+/*
+Use a class of .island whenever you want to box off an area of content as per: csswizardry.com/2011/10/the-island-object/
+Extend with classes like .promo to apply different colours etc to draw attention.
+*/
+.island{
+  padding:1.5em;
+}
+  .island > :last-child{
+    margin-bottom:0;
+  }
+
+
+
+
+
+/*------------------------------------*\
+  $MEDIA
+\*------------------------------------*/
+/*
+Based on @stubbornella’s media object: stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
+<a class="media promo">
+  <img src=product.jpg alt="" class=img>
+  <p class=body>Get Product for half price!</p>
+</a>
+*/
+.media{
+  display:block;
+}
+  .media .img{
+    float:left;
+    margin-right:10px;
+  }
+  .media .body{
+    overflow:hidden;
+    margin-bottom:0;
+  }
+
+
+
+
+
+/*------------------------------------*\
+  $LOGO
+\*------------------------------------*/
+/*
+Your logo is an image, not a h1: csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
+*/
+.logo,
+.logo img{
+  display:block;
+  width:auto; /* Width of your logo in pixels (ideally a round grid-number) */
+  height:auto; /* Height of your logo in pixels */
+}
+/* Based on the fact that we need to use an <img /> in our markup, let’s hide the actual image and use a background on the <a>--this gives us semantically sound markup and the ability to use sprites for hover effects! */
+.logo{
+  background:url(/path/to/logo);
+}
+  .logo:hover{
+    /* Hover states */
+    background-position:0 -00px;
+  }
+.logo img{
+  position:absolute;
+  left:-99999px;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $NAV
+\*------------------------------------*/
+/*
+Create an abstraction, as per: csswizardry.com/2011/09/the-nav-abstraction/
+*/
+.nav{
+  list-style:none;
+}
+.nav li{
+  display:inline;
+}
+.nav a{
+  display:inline-block;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $TYPE
+\*------------------------------------*/
+/*--- HEADINGS ---*/
+h1,.alpha{
+  font-size:2em;      /* 32px */
+  line-height:1.5;    /* 48px */
+}
+h2,.beta{
+  font-size:1.5em;    /* 24px */
+  line-height:1;      /* 24px */
+}
+h3,.gamma{
+  font-size:1.25em;   /* 20px */
+  line-height:1.2;    /* 24px */
+}
+h4,.delta{
+  font-size:1.125em;    /* 18px */
+  line-height:1.333;    /* 24px */
+}
+h5,.epsilon{
+  font-weight:bold;
+}
+h5,.epsilon,
+h6,.zeta{
+  font-size:1em;      /* 16px */
+  line-height:1.5;    /* 24px */
+}
+
+/*--- PARAGRAPHS ---*/
+/*
+Mo’ robust paragraph indenting: csswizardry.com/2010/12/mo-robust-paragraph-indenting/
+Uncomment to activate
+p+p{
+  text-indent:2em;
+  margin-top:-1.5em;
+}
+*/
+
+/*--- FIGURES ---*/
+figure img{
+  display:block;
+  margin-bottom:0;
+}
+
+/*--- LINKS ---*/
+/*
+Say no to negative hovers: csswizardry.com/2011/05/on-negative-hovers/
+A negative hover is one whose appearance is subtracted from on hover rather than added to.
+*/
+a:visited{
+  opacity:0.8; /* A bit basic, but it’s a bare minumum... */
+}
+a:hover{
+  text-decoration:underline;
+}
+a:active,
+a:focus{
+  /* Give clicked links a depressed effect. */
+  position:relative;
+  top:1px;
+}
+
+/*--- LISTS ---*/
+li > ul,
+li > ol{
+  /* Let’s take care of lists in lists */
+  margin-bottom:0;
+}
+
+/*
+A numbered list is NOT the same as an ordered one: csswizardry.com/2011/09/ordered-and-numbered-lists-the-differences/
+Use this class when you want a list to be numbered but it has no order.
+*/
+ul.numbered{
+  list-style:decimal outside;
+}
+dt{
+  font-weight:bold;
+}
+
+/*--- QUOTES ---*/
+/*
+Big up @boblet: html5doctor.com/blockquote-q-cite/
+*/
+q{ quotes:"‘" "’" "“" "”"; }
+
+q:before{ content:"‘"; content:open-quote; }
+q:after{ content:"’"; content:close-quote; }
+
+q q:before{ content: "“"; content: open-quote; }
+q q:after{ content: "”"; content: close-quote; }
+
+blockquote{ quotes: "“" "”"; }
+blockquote p:before{ content: "“"; content: open-quote; }
+blockquote p:after{ content: ""; content: no-close-quote; }
+blockquote p:last-of-type:after{ content: "”"; content: close-quote; }
+
+blockquote{
+  text-indent:-0.4em;
+}
+
+/*
+Mark up the source of a quote with .source:
+<blockquote>
+  <p>Lorem ipsum dolor sit amet. <b class=source>Joe Bloggs</b></p>
+</blockquote>
+*/
+.source{
+  display:block;
+  text-indent:0;
+  margin-top:-24px;
+  margin-top:-1.5rem;
+}
+  .source:before{
+    content:"—";
+  }
+
+/*--- GENERAL ---*/
+mark{
+  background-color:#ffc;
+  color:#333;
+}
+
+/*--- CODE ---*/
+pre,
+code{
+  font-family:"Inconsolata", "Monaco", "Consolas", "Courier New", Courier, monospace;
+}
+pre{
+  overflow:auto;
+  line-height:24px; /* Having to define explicit pixel values :( */
+}
+
+
+
+
+
+/*------------------------------------*\
+  $IMAGES
+\*------------------------------------*/
+img{
+  max-width:100%;
+  height:auto;
+  /* Give it some text styles to offset alt text */
+  color:#c00;
+}
+img.left  { margin:0 1.5em 0 0; }
+img.right { margin:0 0 0 1.5em; }
+
+/*--- FLASH/VIDEO ---*/
+object,
+embed,
+video{
+  max-width:100%;
+  height:auto;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $FORMS
+\*------------------------------------*/
+/*
+Unfortunately, and somewhat obviously, forms don’t fit the baseline all too well. Perhaps in a later version...
+*/
+fieldset{
+  padding:1.5em;
+  border:1px solid #ccc;
+}
+label{
+  display:block;
+}
+.text-input{
+  /* With the advent of various HTML5 input types (email, url, etc) input[type=text] is no longer suitable for for styling non-textearea text-inputs. Use .text-input instead. */
+}
+label,
+.text-input,
+textarea,
+.btn{
+  cursor:pointer;
+}
+  .text-input:active,
+  .text-input:focus,
+  textarea:active,
+  textarea:focus{
+    cursor:text;
+  }
+
+/* A class of .check-list can be added to a <ul> to create a multi-column list of inputs. */
+.check-list{
+  width:100%;
+  overflow:hidden;
+  list-style:none;
+  margin-left:0;
+}
+.check-list li{
+  width:25%;
+  float:left;
+}
+.check-label{
+  display:inline;
+}
+fieldset > :last-child{
+  /* Remove the margin from the last element in the fieldset--this makes our padding more consistent. */
+  margin-bottom:0;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $TABLES
+\*------------------------------------*/
+/*
+Unfortunately, and somewhat obviously, tables don’t fit the baseline all too well. Perhaps in a later version...
+*/
+table{
+  width:100%;
+  max-width:100%;
+}
+thead tr:last-of-type th{
+  /* Thicker border on the table-headers of the last row in the table head. */
+  border-bottom-width:2px;
+}
+tbody th{
+  /* Thicker right border on table-headers in the table body. */
+  border-right-width:2px;
+}
+th:empty{
+  /* Hide the borders on any empty table-headers. */
+  border:none;
+}
+th,td{
+  vertical-align:top;
+  padding:0.75em;
+  border:1px solid #ccc;
+}
+th{
+  font-weight:bold;
+  text-align:center
+}
+table [colspan]{
+  text-align:center;
+}
+table [rowspan]{
+  vertical-align:middle;
+}
+/*
+Assuming IE has an 'implied' colspan of one on cells without an explicit colspan attribute, fix/undo it.
+See jsfiddle.net/csswizardry/UJJay/
+*/
+[colspan="1"]{
+    text-align:left;
+}
+[rowspan="1"]{
+    vertical-align:top;
+}
+tbody tr:nth-of-type(odd){
+  background:rgba(0,0,0,0.05);
+}
+tfoot{
+  text-align:center;
+}
+tfoot td{
+  border-top-width:2px;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $MESSAGES
+\*------------------------------------*/
+/*
+Unfortunately feedback messages don’t fit the baseline all too well. Perhaps in a later version...
+*/
+.message{
+  font-weight:normal;
+  display:block;
+  padding:10px 10px 10px 36px;
+  border:1px solid #ccc;
+  margin-left:0;
+  
+  -moz-border-radius:2px;
+  -webkit-border-radius:2px;
+  border-radius:2px;
+  -moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
+  -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
+  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
+}
+  /*
+  With multiple errors it’s nice to group them:
+  <ul class=message>
+    <li>Please provide a surname.</li>
+    <li>Please enter a valid email address.</li>
+  </ul>
+  */
+  ul.message{
+    list-style:decimal outside; /* It’s also handy to number them. However, they might not necessarily be in a particular order, so we spoof it by putting numbers on an unordered list */
+    padding:10px 10px 10px 56px;
+  }
+.error{
+  border-color:#fb5766;
+  background:url(../img/css/icons/error.png) 10px center no-repeat #fab;
+}
+.success{
+  border-color:#83ba77;
+  background:url(../img/css/icons/success.png) 10px center no-repeat #d1feba;
+}
+.info{
+  border-color:#85a5be;
+  background:url(../img/css/icons/info.png) 10px center no-repeat #c4dbec;
+}
+.warning{
+  border-color:#d8d566;
+  background:url(../img/css/icons/warning.png) 10px center no-repeat #fef8c4;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $MISC
+\*------------------------------------*/
+.accessibility{
+  /* Hide content off-screen without hiding from screen-readers. N.B. This is not suited to RTL languages */
+  position:absolute;
+  left:-99999px;
+}
+.more-link:after{
+  /* Too many people use &raquo; in their markup to signify progression/movement, that ain’t cool. Let’s insert that using content:""; */
+  content:" »";
+}
+
+
+
+
+
+/*------------------------------------*\
+  $CLASSES
+\*------------------------------------*/
+/*
+Some not-too-pretty and insemantic classes to do odd jobs.
+*/
+.left { float:left; }
+.right  { float:right; }
+.clear  { clear:both; float:none; }
+
+.text-left    { text-align:left; }
+.text-right   { text-align:right; }
+.text-center,
+.text-centre  { text-align:center; }
+
+
+
+
+
+/*------------------------------------*\
+  $DIAGNOSTICS
+\*------------------------------------*/
+/*
+Apply a class of .debug to the html element ONLY WHEN YOUR SITE IS ON DEV.
+*/
+
+/*
+Red border    ==  something is wrong
+Yellow border   ==  something may be wrong, you should double check.
+Green border  ==  perfect, nice one!
+*/
+
+/*--- STYLES ---*/
+.debug [style],
+.debug style{
+  /* Inline styles aren’t great, can this be avoided? */
+  outline:5px solid yellow;
+}
+  .debug style{
+    display:block;
+  }
+
+/*--- IMAGES ---*/
+.debug img{
+  /* Images without alt attributes are bad! */
+  outline:5px solid red;
+}
+.debug img[alt]{
+  /* Images with alt attributes are good! */
+  outline-color:green;
+}
+.debug img[alt=""]{
+  /* Images with empty alt attributes are okay in the right circumstances. */
+  outline-color:yellow;
+}
+
+/*--- LINKS ---*/
+.debug a{
+  /* Links without titles are yellow, does your link need one? */
+  outline:5px solid yellow;
+}
+.debug a[title]{
+  /* Links with titles are green, title attributes can be very useful! */
+  outline-color:green;
+}
+.debug a[href="#"]{
+  /* Were you meant to leave that hash in there? */
+  outline-color:yellow;
+}
+.debug a[target]/*,
+.debug a[onclick],
+.debug a[href*=javascript]*/{
+  /* What were you thinking?! */
+  outline-color:red;
+}
+
+/*--- CLASSES/IDS ---*/
+.debug [class=""],
+.debug [id=""]{
+  /* Is this element meant to have an empty class/ID? */
+  outline:5px solid yellow;
+}
+
+
+
+
+
+/*------------------------------------*\
+  $NARROW
+\*------------------------------------*/
+/*
+CSS for tablets and narrower devices
+*/
+@media (min-width: 721px) and (max-width: 960px){
+}
+/*--- END NARROW ---*/
+
+
+
+
+
+/*------------------------------------*\
+  $MOBILE
+\*------------------------------------*/
+/*
+CSS for mobile devices.
+Linearise it!
+*/
+@media (max-width: 720px){
+/*------------------------------------*\
+  MAIN
+\*------------------------------------*/
+html{
+  font-size:1.125em; /* Make text slightly larger for smaller devices to improve readability. */
+}
+body{
+  -webkit-text-size-adjust:none;
+}
+.wrapper{
+  width:auto;
+}
+.grids{
+  margin:0;
+  width:auto;
+}
+[class^="grid-"],
+.grids [class^="grid-"]{
+  width:auto;
+  float:none;
+  margin:0;
+}
+
+
+
+
+
+/*------------------------------------*\
+  LOGO
+\*------------------------------------*/
+.logo{
+  margin-left:auto;
+  margin-right:auto;
+}
+
+
+
+
+
+/*------------------------------------*\
+  TYPE
+\*------------------------------------*/
+/*--- LISTS ---*/
+ul,
+ol,
+dl{
+  margin-left:1.5em;
+}
+
+
+
+
+
+/*------------------------------------*\
+  IMAGES
+\*------------------------------------*/
+img.left,
+img.right { max-width:50%; height:auto; }
+}
+/*--- END MOBILE ---*/
+
+
+
+
+
+/*------------------------------------*\
+  $PRINT
+\*------------------------------------*/
+/*
+Good ol’ fashioned paper...
+*/
+@media print{
+/*------------------------------------*\
+  MAIN
+\*------------------------------------*/
+/*
+Give everything some decent contrast.
+*/
+*{
+  background-color:#fff;
+  color:#000;
+  text-shadow:none!important;
+}
+/*
+Set a nice measure and take the font down to print-acceptable sizes.
+*/
+body{
+  font-size:0.75em; /* 12px (if base font-size was 16px) */
+}
+.wrapper{
+  width:75%;
+  margin:0 auto;
+}
+/*
+A list of things you don’t want printing. Add to/subtract from as necessary. 
+*/
+.nav,
+.footer{
+  display:none;
+}
+.logo img{
+  position:static;
+}
+/*
+Linearise
+*/
+.grids{
+  width:auto;
+}
+[class^="grid-"]{
+  width:auto;
+  float:none;
+  clear:both;
+}
+/*
+Don’t let images break anything.
+*/
+img{
+  max-width:100%;
+  height:auto;
+}
+/*
+Messages look odd with just borders.
+*/
+.message{
+  border:none;
+  font-weight:bold;
+}
+/*
+Display the href of any links.
+*/
+a:link:after,a:visited:after{
+  content:" (" attr(href) ")";
+  font-size:smaller;
+}
+/*
+Any links that are root relative to your site need prepending with your URL.
+*/
+a[href^="/"]:after{
+  content:" (http://yoururlhere.com" attr(href) ")";
+  font-size:smaller;
+}
+/*
+Any Flash/video content can’t be printed so leave a message.
+*/
+object:after{
+  content:"Flash/video content. Head to http://yoururlhere.com/ to view this content.";
+  display:block;
+  font-weight:bold;
+  margin-bottom:1.5em;
+}
+}
+/*--- END PRINT ---*/