/**
* (c) Marko Kokkonen
* Suomen Pienyrittäjäin Mainostoimisto Oy
* http://www.spym.fi/
*/

/* =============================================================================
   Blueprint Grid Framework (fluid for responsive design)
   ========================================================================== */

/* A container should group your entire grid. */
.container, .clearfix {
    margin: 0 auto;
}

/* For modern browsers */
.container:before,
.container:after,
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.container:after, .clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.container, .clearfix {
    zoom:1;
}

/* Sets up basic grid floating and margin. */
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
float: left;
margin-right: 1.05%; /* 10px */
}

/* The last column in a row needs this class. */
.last { margin-right: 0; }

/** Use these classes to set the width of a column. */
.span-1 {width: 3.16%;} /* 30px */
.span-2 {width: 7.37%;} /* 70px */
.span-3 {width: 11.58%;} /* 110px */
.span-4 {width: 15.79%;} /* 150px */
.span-5 {width: 20%;}   /* 190px */
.span-6 {width: 24.21%;} /* 230px */
.span-7 {width: 28.41%;} /* 270px (reduced by .01%) */
.span-8 {width: 32.63%;} /* 310px */
.span-9 {width: 36.84%;} /* 350px */
.span-10 {width: 41.05%;} /* 390px */
.span-11 {width: 45.26%;} /* 430px */
.span-12 {width: 49.47%;} /* 470px */
.span-13 {width: 53.68%;} /* 510px */
.span-14 {width: 57.89%;} /* 550px */
.span-15 {width: 62.11%;} /* 590px */
.span-16 {width: 66.32%;} /* 630px */
.span-17 {width: 70.53%;} /* 670px */
.span-18 {width: 74.74%;} /* 710px */
.span-19 {width: 78.94%;} /* 750px (reduced by .01%) */
.span-20 {width: 83.16%;} /* 790px */
.span-21 {width: 87.37%;} /* 830px */
.span-22 {width: 91.58%;} /* 870px */
.span-23 {width: 95.79%;} /* 910px */
.span-24 {width:100%; margin-right:0;} /* 950px */

/** Use these classes to set the width of an input. */

input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {
border-left-width: 1px;
border-right-width: 1px;
padding-left: 5px;
padding-right: 5px;
}

/** Use these classes to set the width of an input. */
input.span-1, textarea.span-1 { width: 1.89%; } /* 18px */
input.span-2, textarea.span-2 { width: 6.11%; } /* 58px */
input.span-3, textarea.span-3 { width: 10.32%; } /* 98px */
input.span-4, textarea.span-4 { width: 14.53%; } /* 138px */
input.span-5, textarea.span-5 { width: 18.74%; } /* 178px */
input.span-6, textarea.span-6 { width: 22.95%; } /* 218px */
input.span-7, textarea.span-7 { width: 27.16%; } /* 258px */
input.span-8, textarea.span-8 { width: 31.37%; } /* 298px */
input.span-9, textarea.span-9 { width: 35.58%; } /* 338px */
input.span-10, textarea.span-10 { width: 39.79%; } /* 378px */
input.span-11, textarea.span-11 { width: 44%; } /* 418px */
input.span-12, textarea.span-12 { width: 48.21%; } /* 458px */
input.span-13, textarea.span-13 { width: 52.42%; } /* 498px */
input.span-14, textarea.span-14 { width: 56.63%; } /* 538px */
input.span-15, textarea.span-15 { width: 60.84%; } /* 578px */
input.span-16, textarea.span-16 { width: 65.05%; } /* 618px */
input.span-17, textarea.span-17 { width: 69.26%; } /* 658px */
input.span-18, textarea.span-18 { width: 73.47%; } /* 698px */
input.span-19, textarea.span-19 { width: 77.68%; } /* 738px */
input.span-20, textarea.span-20 { width: 81.89%; } /* 778px */
input.span-21, textarea.span-21 { width: 86.11%; } /* 818px */
input.span-22, textarea.span-22 { width: 90.32%; } /* 858px */
input.span-23, textarea.span-23 { width: 94.53%; } /* 898px */
input.span-24, textarea.span-24 { width: 98.74%; } /* 938px */

/** Add these to a column to append empty cols. */

.append-1 { padding-right: 4.21%;} /** 40px */
.append-2 { padding-right: 8.42%;} /* 80px */
.append-3 { padding-right: 12.63%;} /* 120px */
.append-4 { padding-right: 16.84%;} /* 160px */
.append-5 { padding-right: 21.05%;} /* 200px */
.append-6 { padding-right: 25.26%;} /* 240px */
.append-7 { padding-right: 29.47%;} /* 280px */
.append-8 { padding-right: 33.68%;} /* 320px */
.append-9 { padding-right: 37.89%;} /* 360px */
.append-10 { padding-right: 42.11%;} /* 400px */
.append-11 { padding-right: 46.32%;} /* 440px */
.append-12 { padding-right: 50.53%;} /* 480px */
.append-13 { padding-right: 54.74%;} /* 520px */
.append-14 { padding-right: 58.95%;} /* 560px */
.append-15 { padding-right: 63.16%;} /* 600px */
.append-16 { padding-right: 67.37%;} /* 640px */
.append-17 { padding-right: 71.58%;} /* 680px */
.append-18 { padding-right: 75.79%;} /* 720px */
.append-19 { padding-right: 80%;} /* 760px */
.append-20 { padding-right: 84.21%;} /* 800px */
.append-21 { padding-right: 88.42%;} /* 840px */
.append-22 { padding-right: 92.63%;} /* 880px */
.append-23 { padding-right: 96.84%;} /* 920px */

/** Add these to a column to prepend empty cols. */

.prepend-1 { padding-left: 4.21%;} /** 40px */
.prepend-2 { padding-left: 8.42%;} /* 80px */
.prepend-3 { padding-left: 12.63%;} /* 120px */
.prepend-4 { padding-left: 16.84%;} /* 160px */
.prepend-5 { padding-left: 21.05%;} /* 200px */
.prepend-6 { padding-left: 25.26%;} /* 240px */
.prepend-7 { padding-left: 29.47%;} /* 280px */
.prepend-8 { padding-left: 33.68%;} /* 320px */
.prepend-9 { padding-left: 37.89%;} /* 360px */
.prepend-10 { padding-left: 42.11%;} /* 400px */
.prepend-11 { padding-left: 46.32%;} /* 440px */
.prepend-12 { padding-left: 50.53%;} /* 480px */
.prepend-13 { padding-left: 54.74%;} /* 520px */
.prepend-14 { padding-left: 58.95%;} /* 560px */
.prepend-15 { padding-left: 63.16%;} /* 600px */
.prepend-16 { padding-left: 67.37%;} /* 640px */
.prepend-17 { padding-left: 71.58%;} /* 680px */
.prepend-18 { padding-left: 75.79%;} /* 720px */
.prepend-19 { padding-left: 80%;} /* 760px */
.prepend-20 { padding-left: 84.21%;} /* 800px */
.prepend-21 { padding-left: 88.42%;} /* 840px */
.prepend-22 { padding-left: 92.63%;} /* 880px */
.prepend-23 { padding-left: 96.84%;} /* 920px */

/* Border on right hand side of a column. */

.border {
    padding-right: 0.42%; /* 4px */
    margin-right: 0.53%; /* 5px */
    border-right: 1px solid #ddd;
}

/* Border with more whitespace, spans one column. */
.colborder {
    padding-right: 2.52%; /* 24px */
    margin-right: 2.63%; /* 25px */
    border-right: 1px solid #ddd;
}

/* Use these classes on an element to push it into the
next column, or to pull it into the previous column. */

.pull-1 { margin-left: -3.16%; } /* -40px */
.pull-2 { margin-left: -7.37%; } /* -80px */
.pull-3 { margin-left: -11.58%;} /* -120px */
.pull-4 { margin-left: -15.79%;} /* -160px */
.pull-5 { margin-left: -20%; } /* -200px */
.pull-6 { margin-left: -24.21%;} /* -240px */
.pull-7 { margin-left: -28.41%;} /* -280px */
.pull-8 { margin-left: -32.63%;} /* -320px */
.pull-9 { margin-left: -36.84%;} /* -360px */
.pull-10 { margin-left: -41.05%;} /* -400px */
.pull-11 { margin-left: -45.26%;} /* -440px */
.pull-12 { margin-left: -49.47%;} /* -480px */
.pull-13 { margin-left: -53.68%;} /* -520px */
.pull-14 { margin-left: -57.89%;} /* -560px */
.pull-15 { margin-left: -62.11%;} /* -600px */
.pull-16 { margin-left: -66.32%;} /* -640px */
.pull-17 { margin-left: -70.53%;} /* -680px */
.pull-18 { margin-left: -74.74%;} /* -720px */
.pull-19 { margin-left: -78.94%;} /* -760px */
.pull-20 { margin-left: -83.16%;} /* -800px */
.pull-21 { margin-left: -87.37%;} /* -840px */
.pull-22 { margin-left: -91.58%;} /* -880px */
.pull-23 { margin-left: -95.79%;} /* -920px */
.pull-24 { margin-left: -100%; } /* -960px */

/* PeteC: Added because I can't see how this could work otherwise */
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}

.push-1 { margin: 0 -4.21% 1.5em 4.21%; } /* 0 -40px 1.5em 40px; */
.push-2 { margin: 0 -8.42% 1.5em 8.42%; } /* 0 -80px 1.5em 80px; */
.push-3 { margin: 0 -12.63% 1.5em 12.63%; } /* 0 -120px 1.5em 120px */
.push-4 { margin: 0 -16.84% 1.5em 16.84%; } /* 0 -160px 1.5em 160px */
.push-5 { margin: 0 -21.05% 1.5em 21.05%; } /* 0 -200px 1.5em 200px */
.push-6 { margin: 0 -25.26% 1.5em 25.26%; } /* 0 -240px 1.5em 240px */
.push-7 { margin: 0 -29.47% 1.5em 29.47%; } /* 0 -280px 1.5em 280px */
.push-8 { margin: 0 -33.68% 1.5em 33.68%; } /* 0 -320px 1.5em 320px */
.push-9 { margin: 0 -37.89% 1.5em 37.89%; } /* 0 -360px 1.5em 360px */
.push-10 { margin: 0 -42.11% 1.5em 42.11%; } /* 0 -400px 1.5em 400px */
.push-11 { margin: 0 -46.32% 1.5em 46.32%; } /* 0 -440px 1.5em 440px */
.push-12 { margin: 0 -50.53% 1.5em 50.53%; } /* 0 -480px 1.5em 480px */
.push-13 { margin: 0 -54.74% 1.5em 54.74%; } /* 0 -520px 1.5em 520px */
.push-14 { margin: 0 -58.95% 1.5em 58.95%; } /* 0 -560px 1.5em 560px */
.push-15 { margin: 0 -63.16% 1.5em 63.16%; } /* 0 -600px 1.5em 600px */
.push-16 { margin: 0 -67.37% 1.5em 67.37%; } /* 0 -640px 1.5em 640px */
.push-17 { margin: 0 -71.58% 1.5em 71.58%; } /* 0 -680px 1.5em 680px */
.push-18 { margin: 0 -75.79% 1.5em 75.79%; } /* 0 -720px 1.5em 720px */
.push-19 { margin: 0 -80% 1.5em 80%; } /* 0 -760px 1.5em 760px */
.push-20 { margin: 0 -84.21% 1.5em 84.21%; } /* 0 -800px 1.5em 800px */
.push-21 { margin: 0 -88.42% 1.5em 88.42%; } /* 0 -840px 1.5em 840px */
.push-22 { margin: 0 -92.63% 1.5em 92.63%; } /* 0 -880px 1.5em 880px */
.push-23 { margin: 0 -96.84% 1.5em 96.84%; } /* 0 -920px 1.5em 920px */
.push-24 { margin: 0 -100% 1.5em 100%; } /* 0 -960px 1.5em 960px */

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: left; position:relative;}

/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
margin-top:1.5em;
}
div.append-bottom, .append-bottom {
margin-bottom:1.5em;
}