.container {
width: 1100px;
margin: 0 auto;
}

.clear {
clear: both;
}

/*=========================================
	Blu Boxes
=========================================*/
.blu_0 {
float: left;
width: 3%;
margin-left: 1%;
margin-right: 1%;
}

.blu_1 {
float: left;
width: 8%;
margin-left: 1%;
margin-right: 1%;
}

.blu_2{
float: left;
width: 18%;
margin-left: 1%;
margin-right: 1%;
}

.blu_3{
float: left;
width: 28%;
margin-left: 1%;
margin-right: 1%;
}

.blu_4{
float: left;
width: 38%;
margin-left: 1%;
margin-right: 1%;
}

.blu_5{
float: left;
width: 48%;
margin-left: 1%;
margin-right: 1%;
}

.blu_6{
float: left;
width: 58%;
margin-left: 1%;
margin-right: 1%;
}

.blu_7{
float: left;
width: 68%;
margin-left: 1%;
margin-right: 1%;
}

.blu_8{
float: left;
width: 78%;
margin-left: 1%;
margin-right: 1%;
}

.blu_9{
float: left;
width: 88%;
margin-left: 1%;
margin-right: 1%;
}

.blu_10{
float: left;
width: 98%;
margin-left: 1%;
margin-right: 1%;
}

/* Floats */

.floatleft {
float: left;
}

.floatright {
float: right;
}


/*=========================================
	Offsets
=========================================*/
.offset_0 {
margin-left: 5%;
}

.offset_1 {
margin-left: 10%;
}

.offset_2 {
margin-left: 20%;
}

.offset_3 {
margin-left: 30%;
}

.offset_4 {
margin-left: 40%;
}

.offset_5 {
margin-left: 50%;
}

.offset_6 {
margin-left: 60%;
}

.offset_7 {
margin-left: 70%;
}

.offset_8 {
margin-left: 80%;
}

.offset_9 {
margin-left: 90%;
}

/*=========================================
	Afters
=========================================*/
.after_0 {
margin-right: 5%;
}

.after_1 {
margin-right: 10%;
}

.after_2 {
margin-right: 20%;
}

.after_3 {
margin-right: 30%;
}

.after_4 {
margin-right: 40%;
}

.after_5 {
margin-right: 50%;
}

.after_6 {
margin-right: 60%;
}

.after_7 {
margin-right: 70%;
}

.after_8 {
margin-right: 80%;
}

.after_9 {
margin-right: 90%;
}





/*=========================================
	Media Queries
=========================================*/

/* This is stage 2, when the main container becomes smaller. */

@media screen and (max-width: 999px) {
.container {
width: 720px;
}
}

/* Stage 3, when the layout becomes fluid, and the size of the browser. */

@media screen and (max-width: 719px) {
.container {
width: 100%;
}

}

/* Here, all the elements are the same size.  This way, mobile users can also use the site. */

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

.blu_1 {
width: 98%;
}

.blu_2 {
width: 98%;
}

.blu_3 {
width: 98%;
}

.blu_4 {
width: 98%;
}
.blu_5 {
width: 98%;
}

.blu_6 {
width: 98%;
}

.blu_7 {
width: 98%;
}

.blu_8 {
width: 98%;
}
.blu_9 {
width: 98%;
}

.blu_10 {
width: 98%;
}
}