/*
This is the Wobkit Core CSS. It's a work in progress, as all things are.
By Tad Dockery, started 2011.
Wobkit Core (hereafter Wobcore) is totally free; I have no interest in restricting it in any way.

Section List
------------
Reset
Presentation
Content layout
Border
Clearfix
Mobile
*/

/*
Reset
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre, blockquote,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, hr,
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 
{ 
  padding: 0;
  margin: 0;
  font-size: 100%;
  font-weight: normal;
}

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

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

img
{
  border: 0;
}

address, caption, dfn, th, var
{
  font-style: normal;
}

caption, th
{
  text-align: left;
}

/*
Presentation utility classes
*/

.left { float: left !important; clear: none !important; }
.right { float: right !important; clear: none !important; }
.min-small { min-height: 200px; }
.min-med { min-height: 300px; }
.min-big { min-height: 400px; }

.tx-justify { text-align: justify; }
.tx-right { text-align: right; }
.tx-center { text-align: center; }

.top-space { margin-top: 0.25em; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/*
Content layout classes
*/

/* A variation of http://csswizardry.com/2011/10/the-island-object/ */
.island { padding: 1em; margin-bottom: 1em; }
.island:last-child { margin-bottom: 0; }
.island > :last-child { margin-bottom: 0; }

.media img { display: block; float: left; }

nav ul, .pseudo-nav { list-style-type: none; }
nav ul li, .pseudo-nav li { float: left; margin-left: 1em; padding-right: 1em; }

/*
Border styles
Multiple br-classes can be used in conjunction to achieve different effects.
Use wisely.
*/

[class*="br-"] { border-style: solid; border-width: 1px; }
[class~="br-chunk"] { border-width: 3px; }
[class~="br-lump"] { border-width: 5px; }
[class~="br-dashed"] { border-style: dashed; }
[class~="br-dotted"] { border-style: dotted; }
[class~="br-double"] { border-style: double; }
[class~="br-stagger"]:before { content: "Google this"; border-style: solid; border-width: 3px; }
[class~="br-round"] { border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
[class~="br-left"] { border-bottom-style: none; border-right-style: none; border-top-style: none; }
[class~="br-right"] { border-bottom-style: none; border-left-style: none; border-top-style: none; }
[class~="br-bottom"] { border-left-style: none; border-right-style: none; border-top-style: none; }
[class~="br-top"] { border-bottom-style: none; border-right-style: none; border-left-style: none; }

[class*="gridlines"] > div { border-left-style: solid; border-left-width: 1px; }
[class~="gridlines-dashed"] > div { border-left-style: dashed; }
[class~="gridlines-dotted"] > div { border-left-style: dotted; }
[class~="gridlines-double"] > div { border-left-style: double; border-left-width: 3px; }
[class*="gridlines"] > div:first-child { border-left-style: none; }

/*
Clearfix, a la 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; }

/*
Grids
A lightweight 9- or 12-column grid system
*/

.grids { width: 100%; clear: both; overflow: hidden; margin: 0 auto 0.9%; padding: 0 0 0.9%; list-style: none; line-height: 150%; }

/**
Gutters are 1.9% wide
9-cols are 9% wide
12-cols are 6.275% wide
**/

[class*="grid-"] { float: left; margin: 0 0 0 0.9%; padding: 0 0 1% 1%; list-style: none; }
[class*="grid-"]:first-child { margin: 0 0 0 1.9%; padding: 0 0 1% 0; }

.grid-free { width: 96.2%; }

.cols-9 > .grid-1 { width: 9%; }
.cols-9 > .grid-2 { width: 19.9%; }
.cols-9 > .grid-3 { width: 30.8%; }
.cols-9 > .grid-4 { width: 41.7%; }
.cols-9 > .grid-5 { width: 52.6%; }
.cols-9 > .grid-6 { width: 63.5%; }
.cols-9 > .grid-7 { width: 74.4%; }
.cols-9 > .grid-8 { width: 85.3%; }
.cols-9 > .grid-9 { width: 96.2%; margin: 0 0 0 1.9%; padding: 0 0 1% 0; }

.cols-12 > .grid-1 { width: 6.275%; }
.cols-12 > .grid-2 { width: 14.45%; }
.cols-12 > .grid-3 { width: 22.625%; }
.cols-12 > .grid-4 { width: 30.8%; }
.cols-12 > .grid-5 { width: 38.975%; }
.cols-12 > .grid-6 { width: 47.15%; }
.cols-12 > .grid-7 { width: 55.325%; }
.cols-12 > .grid-8 { width: 63.5%; }
.cols-12 > .grid-9 { width: 71.675%; }
.cols-12 > .grid-10 { width: 79.85%; }
.cols-12 > .grid-11 { width: 88.025%; }
.cols-12 > .grid-12 { width: 96.2%; margin: 0 0 0 1.9%; padding: 0 0 1% 0; }

/**
Mobile
For mobile, we just go ahead and linearize everything.
**/
@media (max-width: 780px)
{

html { font-size: 1.125em; }
body { -webkit-text-size-adjust: none; }

[class*="gridlines"] > div { border-left-style: none; }

.grids { margin: 0; width: auto; }
[class*="grid-"], .grids [class*="grid-"] { width: auto; float: none; margin: 0; }

}