@charset "UTF-8";

/**
* Langarth fluid grid system
*
*
* @author        Matthew Davies (md@langarth.com)
* @date          21 Dec 2011
* @update        26 Aug 2013
*/

.container { padding-left: 5px; padding-right: 5px; margin-left: auto; margin-right: auto; }

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12 { display: inline; float: left; margin-left: 5px; margin-right: 5px; }

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* mobile portait */
@media only screen and (min-width : 320px) {

.container { width: 310px !important; }

.box1  { width: 15px; }
.box2  { width: 40px; }
.box3  { width: 65px; }
.box4  { width: 90px; }
.box5  { width: 115px; }
.box6  { width: 140px; }
.box7  { width: 165px; }
.box8  { width: 190px; }
.box9  { width: 215px; }
.box10 { width: 240px; }
.box11 { width: 265px; }
.box12 { width: 290px; }

.push1  { margin-left: 15px; }
.push2  { margin-left: 40px; }
.push3  { margin-left: 65px; }
.push4  { margin-left: 90px; }
.push5  { margin-left: 115px; }
.push6  { margin-left: 140px; }
.push7  { margin-left: 165px; }
.push8  { margin-left: 190px; }
.push9  { margin-left: 215px; }
.push10 { margin-left: 240px; }
.push11 { margin-left: 265px; }

.pull1  { margin-right: 15px; }
.pull2  { margin-right: 40px; }
.pull3  { margin-right: 65px; }
.pull4  { margin-right: 90px; }
.pull5  { margin-right: 115px; }
.pull6  { margin-right: 140px; }
.pull7  { margin-right: 165px; }
.pull8  { margin-right: 190px; }
.pull9  { margin-right: 215px; }
.pull10 { margin-right: 240px; }
.pull11 { margin-right: 265px; }

}

/* mobile landscape */
@media only screen and (min-width : 480px) {

.container { width: 420px !important; }

.box1  { width: 25px; }
.box2  { width: 60px; }
.box3  { width: 95px; }
.box4  { width: 130px; }
.box5  { width: 165px; }
.box6  { width: 200px; }
.box7  { width: 235px; }
.box8  { width: 270px; }
.box9  { width: 305px; }
.box10 { width: 340px; }
.box11 { width: 375px; }
.box12 { width: 410px; }

.push1  { margin-left: 25px; }
.push2  { margin-left: 60px; }
.push3  { margin-left: 95px; }
.push4  { margin-left: 130px; }
.push5  { margin-left: 165px; }
.push6  { margin-left: 200px; }
.push7  { margin-left: 235px; }
.push8  { margin-left: 270px; }
.push9  { margin-left: 305px; }
.push10 { margin-left: 340px; }
.push11 { margin-left: 375px; }

.pull1  { margin-right: 25px; }
.pull2  { margin-right: 60px; }
.pull3  { margin-right: 95px; }
.pull4  { margin-right: 130px; }
.pull5  { margin-right: 165px; }
.pull6  { margin-right: 200px; }
.pull7  { margin-right: 235px; }
.pull8  { margin-right: 270px; }
.pull9  { margin-right: 305px; }
.pull10 { margin-right: 340px; }
.pull11 { margin-right: 375px; }

}

/* small tablet */
@media only screen and (min-width : 600px) {

body { min-width: 600px; }

.container { width: 550px !important; }

.box1  { width: 35px; }
.box2  { width: 80px; }
.box3  { width: 125px; }
.box4  { width: 170px; }
.box5  { width: 215px; }
.box6  { width: 260px; }
.box7  { width: 305px; }
.box8  { width: 350px; }
.box9  { width: 395px; }
.box10 { width: 440px; }
.box11 { width: 485px; }
.box12 { width: 530px; }

.push1  { margin-left: 35px; }
.push2  { margin-left: 80px; }
.push3  { margin-left: 125px; }
.push4  { margin-left: 170px; }
.push5  { margin-left: 215px; }
.push6  { margin-left: 260px; }
.push7  { margin-left: 305px; }
.push8  { margin-left: 350px; }
.push9  { margin-left: 395px; }
.push10 { margin-left: 440px; }
.push11 { margin-left: 485px; }

.pull1  { margin-right: 35px; }
.pull2  { margin-right: 80px; }
.pull3  { margin-right: 125px; }
.pull4  { margin-right: 170px; }
.pull5  { margin-right: 215px; }
.pull6  { margin-right: 260px; }
.pull7  { margin-right: 305px; }
.pull8  { margin-right: 350px; }
.pull9  { margin-right: 395px; }
.pull10 { margin-right: 440px; }
.pull11 { margin-right: 485px; }

}

/* tablet portrait */
@media only screen and (min-width : 768px) {

body { min-width: 768px; }

.container { width: 720px !important; }

.box1  { width: 50px; }
.box2  { width: 110px; }
.box3  { width: 170px; }
.box4  { width: 230px; }
.box5  { width: 290px; }
.box6  { width: 350px; }
.box7  { width: 410px; }
.box8  { width: 470px; }
.box9  { width: 530px; }
.box10 { width: 590px; }
.box11 { width: 650px; }
.box12 { width: 710px; }

.push1  { margin-left: 50px; }
.push2  { margin-left: 110px; }
.push3  { margin-left: 170px; }
.push4  { margin-left: 230px; }
.push5  { margin-left: 290px; }
.push6  { margin-left: 350px; }
.push7  { margin-left: 410px; }
.push8  { margin-left: 470px; }
.push9  { margin-left: 530px; }
.push10 { margin-left: 590px; }
.push11 { margin-left: 650px; }

.pull1  { margin-right: 50px; }
.pull2  { margin-right: 110px; }
.pull3  { margin-right: 170px; }
.pull4  { margin-right: 230px; }
.pull5  { margin-right: 290px; }
.pull6  { margin-right: 350px; }
.pull7  { margin-right: 410px; }
.pull8  { margin-right: 470px; }
.pull9  { margin-right: 530px; }
.pull10 { margin-right: 590px; }
.pull11 { margin-right: 650px; }

}

/* tablet landscape / netbook */
@media only screen and (min-width : 1024px) {

body { min-width: 1024px; }

.container { width: 960px !important; }

.box1  { width: 70px; }
.box2  { width: 150px; }
.box3  { width: 230px; }
.box4  { width: 310px; }
.box5  { width: 390px; }
.box6  { width: 470px; }
.box7  { width: 550px; }
.box8  { width: 630px; }
.box9  { width: 710px; }
.box10 { width: 790px; }
.box11 { width: 870px; }
.box12 { width: 950px; }

.push1  { margin-left: 70px; }
.push2  { margin-left: 150px; }
.push3  { margin-left: 230px; }
.push4  { margin-left: 310px; }
.push5  { margin-left: 390px; }
.push6  { margin-left: 470px; }
.push7  { margin-left: 550px; }
.push8  { margin-left: 630px; }
.push9  { margin-left: 710px; }
.push10 { margin-left: 790px; }
.push11 { margin-left: 870px; }

.pull1  { margin-right: 70px; }
.pull2  { margin-right: 150px; }
.pull3  { margin-right: 230px; }
.pull4  { margin-right: 310px; }
.pull5  { margin-right: 390px; }
.pull6  { margin-right: 470px; }
.pull7  { margin-right: 550px; }
.pull8  { margin-right: 630px; }
.pull9  { margin-right: 710px; }
.pull10 { margin-right: 790px; }
.pull11 { margin-right: 870px; }

}

/* desktop */
@media only screen and (min-width : 1280px) {

body { min-width: 1280px; }

.container { width: 1140px !important; }

.box1  { width: 85px; }
.box2  { width: 180px; }
.box3  { width: 275px; }
.box4  { width: 370px; }
.box5  { width: 465px; }
.box6  { width: 560px; }
.box7  { width: 655px; }
.box8  { width: 750px; }
.box9  { width: 845px; }
.box10 { width: 940px; }
.box11 { width: 1035px; }
.box12 { width: 1130px; }

.push1  { margin-left: 85px; }
.push2  { margin-left: 180px; }
.push3  { margin-left: 275px; }
.push4  { margin-left: 370px; }
.push5  { margin-left: 465px; }
.push6  { margin-left: 560px; }
.push7  { margin-left: 655px; }
.push8  { margin-left: 750px; }
.push9  { margin-left: 845px; }
.push10 { margin-left: 940px; }
.push11 { margin-left: 1035px; }

.pull1  { margin-right: 85px; }
.pull2  { margin-right: 180px; }
.pull3  { margin-right: 275px; }
.pull4  { margin-right: 370px; }
.pull5  { margin-right: 465px; }
.pull6  { margin-right: 560px; }
.pull7  { margin-right: 655px; }
.pull8  { margin-right: 750px; }
.pull9  { margin-right: 845px; }
.pull10 { margin-right: 940px; }
.pull11 { margin-right: 1035px; }

}