/* baseLayout-1200 V1.3
   Jay Ohman, Ohman Automation Corp.
   Inspired by Dave Gamache, www.getskeleton.com */

/* ---------- Base elements ---------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
  tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
  output, ruby, section, summary, time, mark, audio, video {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: top; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body   { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table  { border-collapse: collapse; border-spacing: 0; }
hr     { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
*, *::after, *::before  { box-sizing: border-box; }

/* ---------- site font ---------- */
body   { background: #fff; font: 14px Verdana, Geneva, sans-serif; color: #444;
         -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* Fix for webkit rendering */

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 { margin-top: 10px; line-height: 1.2; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 24px; margin-bottom: 10px; }
h2 { font-size: 22px; margin-bottom: 8px; }
h3 { font-size: 20px; margin-bottom: 6px; }
h4 { font-size: 18px; margin-bottom: 4px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p      { margin: 0 0 10px 0; }
p img  { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777;  }

em     { font-style: italic; }
strong { font-weight: bold; color: #333; }
small  { font-size: 80%; }

/* ---------- Blockquotes ---------- */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
blockquote      { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 12px; color: #555; }
blockquote cite:before   { content: '\2014 \0020'; }  /* 2014 = em dash, 0020 = space */
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

/* ---------- Links ---------- */
a, a:visited     { color: #333; text-decoration: none; outline: 0; }
a:hover, a:focus { color: #000; }
p a, p a:visited { line-height: inherit; }
.astd a, .astd a:visited     { color: #33d; border-bottom: 1px solid #ccf; transition: all 0.2s; }
.astd a:hover, .astd a:focus { color: #00f; border-bottom: 1px solid #55b; }

/* ---------- Lists ---------- */
ul, ol    { margin-bottom: 10px; }
ul        { list-style: none outside; }
ol        { list-style: decimal; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc   { list-style: disc outside; }
ol, ul.square, ul.circle, ul.disc      { margin-left: 30px; }
ul ul, ul ol, ol ol, ol ul             { margin: 4px 0 5px 30px; }  /*  font-size: 90%;  */
ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; }
ul.medium li { line-height: 18px; }
li.tall-line { line-height: 21px; }

/* ---------- Images ---------- */
img.scale-with-grid { max-width: 100%; height: auto; }

/* ---------- Buttons ---------- */
button,
  .button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    background: #ddd linear-gradient(to bottom, #ddd 0%, #eee 50%, #e8e8e8 60%, #eee 75%, #ccc 100%);
    font: bold 11px Tahoma, Geneva, sans-serif; line-height: normal; color: #555; cursor: pointer;
    padding: 8px 10px; text-shadow: 0 1px rgba(255, 255, 255, .75); display: inline-block;
    border: 1px solid #aaa; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-radius: 3px; }
button:hover, button:focus,
  .button:hover, .button:focus,
  input[type="submit"]:hover, input[type="submit"]:focus,
  input[type="reset"]:hover, input[type="reset"]:focus,
  input[type="button"]:hover, input[type="button"]:focus {
    background: #eee linear-gradient(to bottom, #ddd 0%, #e8e8e8 50%, #fff 60%, #e8e8e8 75%, #ddd 100%);
    color: #222; border: 1px solid #bbb; border-top: 1px solid #ddd; border-left: 1px solid #ddd; }

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* ---------- Forms ---------- */
fieldset { margin-bottom: 20px; }
input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea, select {
    margin: 0; padding: 2px 4px; outline: none; color: #444; font: 13px Tahoma, Geneva, sans-serif;
    border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
    max-width: 100%; display: inline-block; background: #ffd; } /* width: 210px; */
select   { padding: 0; }
input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  textarea:focus {
    border: 1px solid #aaa; color: #444; box-shadow:  0 0 3px rgba(0,0,0,.2); }
input[type="checkbox"]  { display: inline; }
label span, legend span { font-weight: normal; font-size: 13px; color: #444; }

/* ---------- Misc ---------- */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom   { margin-bottom: 10px !important; }
.add-bottom    { margin-bottom: 20px !important; }
.add-top       { margin-top: 20px; }

/* ---------- page layout, 960px wide, divide into 16 columns ---------- */
.xxrow           { padding: 0; } /* padding: 10px 0; margin-bottom: 20px */
.xxrow + .row    { padding-top: 0; }
.container     { position: relative; margin: 0 auto; padding: 0; }
.container .column, .container .columns
               { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
/* nested columns */
.column.left, .columns.left       { margin-left: 0; margin-right: 10px; }
.column.right, .columns.right     { margin-left: 10px; margin-right: 0; }
.left.right                       { margin-left: 0; margin-right: 0; }

/* ---------- Clearing ---------- */
.container:after { content: '\0020'; display: block; clear: both; visibility: hidden; height: 0; }
/* to clear nested columns: use clearfix class on parent, 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; }
/* or use a <br class="clear" /> to clear columns */
.clear          { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* ---------- PC Monitor - full screen, 1 unit = 75px ---------- */
@media only screen and (min-width: 1220px) {
  .container                      { width: 1200px; }
  .container .one.column,
    .container .one.columns       { width:   55px; }
  .container .two.columns         { width:  130px; }
  .container .three.columns       { width:  205px; }
  .container .four.columns        { width:  280px; }
  .container .five.columns        { width:  355px; }
  .container .six.columns         { width:  430px; }
  .container .seven.columns       { width:  505px; }
  .container .eight.columns       { width:  580px; }
  .container .nine.columns        { width:  655px; }
  .container .ten.columns         { width:  730px; }
  .container .eleven.columns      { width:  805px; }
  .container .twelve.columns      { width:  880px; }
  .container .thirteen.columns    { width:  955px; }
  .container .fourteen.columns    { width: 1030px; }
  .container .fifteen.columns     { width: 1105px; }
  .container .sixteen.columns     { width: 1180px; }
  /* fractional widths */
  .container .one-third.column    { width:  380px; }
  .container .two-thirds.column   { width:  780px; }
  /* offset */
  .container .offset-by-one       { padding-left:   75px; }
  .container .offset-by-two       { padding-left:  150px; }
  .container .offset-by-three     { padding-left:  225px; }
  .container .offset-by-four      { padding-left:  300px; }
  .container .offset-by-five      { padding-left:  375px; }
  .container .offset-by-six       { padding-left:  450px; }
  .container .offset-by-seven     { padding-left:  525px; }
  .container .offset-by-eight     { padding-left:  600px; }
  .container .offset-by-nine      { padding-left:  675px; }
  .container .offset-by-ten       { padding-left:  750px; }
  .container .offset-by-eleven    { padding-left:  825px; }
  .container .offset-by-twelve    { padding-left:  900px; }
  .container .offset-by-thirteen  { padding-left:  975px; }
  .container .offset-by-fourteen  { padding-left: 1050px; }
  .container .offset-by-fifteen   { padding-left: 1125px; }
}
/* ---------- PC Monitor - windowed, 1 unit = 60px ---------- */
@media only screen and (min-width: 980px) and (max-width: 1219px) {
  /* unit widths */
  .container                      { width: 960px; }
  .container .one.column,
    .container .one.columns       { 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; }
  /* fractional widths */
  .container .one-third.column    { width: 300px; }
  .container .two-thirds.column   { width: 620px; }
  /* offset */
  .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 Landscape size, 1 unit = 48px (80%) ---------- */
@media only screen and (min-width: 788px) and (max-width: 979px) {
  .container                      { width: 768px; }
  .container .one.column,
    .container .one.columns       { 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; }
  /* fractional widths */
  .container .one-third.column    { width: 236px; }
  .container .two-thirds.column   { width: 492px; }
  /* offset */
  .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: 384px; }
  .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; }
}
/* ---------- Tablet & Mobile - general ---------- */
@media only screen and (max-width: 787px) {
  .container .columns, .container .column { margin: 0; }
  .container .one.column, .container .one.columns, .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: 100%; }
  .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; }
}
/* ---------- Tablet Portrait and Mobile Landscape size ---------- */
@media only screen and (min-width: 610px) and (max-width: 787px) {
  .container { width: 590px; }
}
/* ---------- Mobile Portrait - large ---------- */
@media only screen and (min-width: 360px) and (max-width: 609px) {
  .container { width: 340px; }
}
/* ---------- Mobile Portrait - small ---------- */
@media only screen and (max-width: 359px) {
  .container { width: 300px; }
}