/* Table of Content

==================================================

	#`XHTML, HTML4, HTML5 Reset

	#`Basic HTML

	#Media Queries

	#Font-Face */



/* #Site Styles

================================================== */

/* `XHTML, HTML4, HTML5 Reset

----------------------------------------------------------------------------------------------------*/



a,

abbr,

acronym,

address,

applet,

article,

aside,

audio,

b,

big,

blockquote,

body,

canvas,

caption,

center,

cite,

code,

dd,

del,

details,

dfn,

dialog,

div,

dl,

dt,

em,

embed,

fieldset,

figcaption,

figure,

font,

footer,

form,

h1,

h2,

h3,

h4,

h5,

h6,

header,

hgroup,

hr,

html,

i,

iframe,

img,

ins,

kbd,

label,

legend,

li,

mark,

menu,

meter,

nav,

object,

ol,

output,

p,

pre,

progress,

q,

rp,

rt,

ruby,

s,

samp,

section,

small,

span,

strike,

strong,

sub,

summary,

sup,

table,

tbody,

td,

tfoot,

th,

thead,

time,

tr,

tt,

u,

ul,

var,

video,

xmp {

  border: 0;

  margin: 0;

  padding: 0;

  font-size: 100%;

}



html,

body {

  height: 100%;

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

/*

  Override the default (display: inline) for

  browsers that do not recognize HTML5 tags.



  IE8 (and lower) requires a shiv:

  http://ejohn.org/blog/html5-shiv

*/

  display: block;

}



b,

strong {

/*

  Makes browsers agree.

  IE + Opera = font-weight: bold.

  Gecko + WebKit = font-weight: bolder.

*/

  font-weight: bold;

}



img {

  color: transparent;

  font-size: 0;

  vertical-align: middle;

/*

  For IE.

  http://css-tricks.com/ie-fix-bicubic-scaling-for-images

*/

  -ms-interpolation-mode: bicubic;

}



ol,

ul {

  list-style: none;

}



li {

/*

  For IE6 + IE7:



  "display: list-item" keeps bullets from

  disappearing if hasLayout is triggered.

*/

  display: list-item;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



th,

td,

caption {

  font-weight: normal;

  vertical-align: top;

  text-align: left;

}



q {

  quotes: none;

}



q:before,

q:after {

  content: '';

  content: none;

}



sub,

sup,

small {

  font-size: 75%;

}



sub,

sup {

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}



sub {

  bottom: -0.25em;

}



sup {

  top: -0.5em;

}



svg {

/*

  For IE9. Without, occasionally draws shapes

  outside the boundaries of <svg> rectangle.

*/

  overflow: hidden;

}





/* `Basic HTML

----------------------------------------------------------------------------------------------------*/



body {

  font: 13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;

}



pre,

code {

  font-family: 'DejaVu Sans Mono', Menlo, Consolas, monospace;

}



hr {

  border: 0 #ccc solid;

  border-top-width: 1px;

  clear: both;

  height: 0;

}



/* `Headings

----------------------------------------------------------------------------------------------------*/



h1 {

  font-size: 25px;

}



h2 {

  font-size: 23px;

}



h3 {

  font-size: 21px;

}



h4 {

  font-size: 19px;

}



h5 {

  font-size: 17px;

}



h6 {

  font-size: 15px;

}



/* `Spacing

----------------------------------------------------------------------------------------------------*/



ol {

  list-style: decimal;

}



ul {

  list-style: disc;

}



li {

  margin-left: 30px;

}



p,

dl,

hr,

h1,

h2,

h3,

h4,

h5,

h6,

ol,

ul,

pre,

table,

address,

fieldset,

figure {

  margin-bottom: 20px;

}



/* Table of Contents

==================================================

    #Base 960 Grid

    #Tablet (Portrait)

    #Mobile (Portrait)

    #Mobile (Landscape)

    #Clearing */







/* #Base 960 Grid

================================================== */



    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }

    .column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }

    .row                                        { margin-bottom: 20px; }



    /* Nested Column Classes */

    .column.alpha, .columns.alpha               { margin-left: 0; }

    .column.omega, .columns.omega               { margin-right: 0; }



    /* Base Grid */

    .container .one.column                      { width: 40px;  }

    .container .two.columns                     { width: 100px; }

    .container .three.columns                   { width: 160px; }

    .container .four.columns                    { width: 220px; }

    .container .five.columns                    { width: 280px; }

    .container .six.columns                     { width: 340px; }

    .container .seven.columns                   { width: 400px; }

    .container .eight.columns                   { width: 460px; }

    .container .nine.columns                    { width: 520px; }

    .container .ten.columns                     { width: 580px; }

    .container .eleven.columns                  { width: 640px; }

    .container .twelve.columns                  { width: 700px; }

    .container .thirteen.columns                { width: 760px; }

    .container .fourteen.columns                { width: 820px; }

    .container .fifteen.columns                 { width: 880px; }

    .container .sixteen.columns                 { width: 940px; }



    .container .one-third.column                { width: 300px; }

    .container .two-thirds.column               { width: 620px; }



    /* Offsets */

    .container .offset-by-one                   { padding-left: 60px;  }

    .container .offset-by-two                   { padding-left: 120px; }

    .container .offset-by-three                 { padding-left: 180px; }

    .container .offset-by-four                  { padding-left: 240px; }

    .container .offset-by-five                  { padding-left: 300px; }

    .container .offset-by-six                   { padding-left: 360px; }

    .container .offset-by-seven                 { padding-left: 420px; }

    .container .offset-by-eight                 { padding-left: 480px; }

    .container .offset-by-nine                  { padding-left: 540px; }

    .container .offset-by-ten                   { padding-left: 600px; }

    .container .offset-by-eleven                { padding-left: 660px; }

    .container .offset-by-twelve                { padding-left: 720px; }

    .container .offset-by-thirteen              { padding-left: 780px; }

    .container .offset-by-fourteen              { padding-left: 840px; }

    .container .offset-by-fifteen               { padding-left: 900px; }





/* #Tablet (Portrait)

================================================== */



/* Note: Design for a width of 768px */



@media only screen and (min-width: 768px) and (max-width: 959px) {

	.container                                  { width: 768px; }

	.container .column,

	.container .columns                         { margin-left: 10px; margin-right: 10px;  }

	.column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }

	.column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }



	.container .one.column                      { width: 28px; }

	.container .two.columns                     { width: 76px; }

	.container .three.columns                   { width: 124px; }

	.container .four.columns                    { width: 172px; }

	.container .five.columns                    { width: 220px; }

	.container .six.columns                     { width: 268px; }

	.container .seven.columns                   { width: 316px; }

	.container .eight.columns                   { width: 364px; }

	.container .nine.columns                    { width: 412px; }

	.container .ten.columns                     { width: 460px; }

	.container .eleven.columns                  { width: 508px; }

	.container .twelve.columns                  { width: 556px; }

	.container .thirteen.columns                { width: 604px; }

	.container .fourteen.columns                { width: 652px; }

	.container .fifteen.columns                 { width: 700px; }

	.container .sixteen.columns                 { width: 748px; }



	.container .one-third.column                { width: 236px; }

	.container .two-thirds.column               { width: 492px; }



	/* Offsets */

	.container .offset-by-one                   { padding-left: 48px; }

	.container .offset-by-two                   { padding-left: 96px; }

	.container .offset-by-three                 { padding-left: 144px; }

	.container .offset-by-four                  { padding-left: 192px; }

	.container .offset-by-five                  { padding-left: 240px; }

	.container .offset-by-six                   { padding-left: 288px; }

	.container .offset-by-seven                 { padding-left: 336px; }

	.container .offset-by-eight                 { padding-left: 348px; }

	.container .offset-by-nine                  { padding-left: 432px; }

	.container .offset-by-ten                   { padding-left: 480px; }

	.container .offset-by-eleven                { padding-left: 528px; }

	.container .offset-by-twelve                { padding-left: 576px; }

	.container .offset-by-thirteen              { padding-left: 624px; }

	.container .offset-by-fourteen              { padding-left: 672px; }

	.container .offset-by-fifteen               { padding-left: 720px; }

}





/*  #Mobile (Portrait)

================================================== */



    /* Note: Design for a width of 320px */



    @media only screen and (max-width: 767px) {

        .container { width: 300px; }

        .columns, .column { margin: 0; }		

        .container .one.column,

        .container .two.columns,

        .container .three.columns,

        .container .four.columns,

        .container .five.columns,

        .container .six.columns,

        .container .seven.columns,

        .container .eight.columns,

        .container .nine.columns,

        .container .ten.columns,

        .container .eleven.columns,

        .container .twelve.columns,

        .container .thirteen.columns,

        .container .fourteen.columns,

        .container .fifteen.columns,

        .container .sixteen.columns,

        .container .one-third.column,

        .container .two-thirds.column  { width: 300px; }



        /* Offsets */

        .container .offset-by-one,

        .container .offset-by-two,

        .container .offset-by-three,

        .container .offset-by-four,

        .container .offset-by-five,

        .container .offset-by-six,

        .container .offset-by-seven,

        .container .offset-by-eight,

        .container .offset-by-nine,

        .container .offset-by-ten,

        .container .offset-by-eleven,

        .container .offset-by-twelve,

        .container .offset-by-thirteen,

        .container .offset-by-fourteen,

        .container .offset-by-fifteen { padding-left: 0; }



    }





/* #Mobile (Landscape)

================================================== */



    /* Note: Design for a width of 480px */



    @media only screen and (min-width: 480px) and (max-width: 767px) {

        .container { width: 420px; }

        .columns, .column { margin: 0; }		

        .container .one.column,

        .container .two.columns,

        .container .three.columns,

        .container .four.columns,

        .container .five.columns,

        .container .six.columns,

        .container .seven.columns,

        .container .eight.columns,

        .container .nine.columns,

        .container .ten.columns,

        .container .eleven.columns,

        .container .twelve.columns,

        .container .thirteen.columns,

        .container .fourteen.columns,

        .container .fifteen.columns,

        .container .sixteen.columns,

        .container .one-third.column,

        .container .two-thirds.column { width: 420px; }

    }





/* #Clearing

================================================== */



    /* Self Clearing Goodness */

    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }



    /* Use clearfix class on parent to clear nested columns,

    or wrap each row of columns in a <div class="row"> */

    .clearfix:before,

    .clearfix:after,

    .row:before,

    .row:after {

      content: '\0020';

      display: block;

      overflow: hidden;

      visibility: hidden;

      width: 0;

      height: 0; }

    .row:after,

    .clearfix:after {

      clear: both; }

    .row,

    .clearfix {

      zoom: 1; }



    /* You can also use a <br class="clear" /> to clear columns */

    .clear {

      clear: both;

      display: block;

      overflow: hidden;

      visibility: hidden;

      width: 0;

      height: 0;

    }