/********************************************************************************************* 

2.  Grid 1200px

*********************************************************************************************/

.control {
    margin-top: 10px;
}

.container-12 {
	margin:0 auto;
	width: 1200px;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
	display:inline;
	float: left;
	margin-left: 5px;
	margin-right: 5px;
}

.nested {
    margin-left: 0px; 
    margin-right: 0px;
    margin-top: 10px!important;
}

.alpha {
	margin-left: 0;
}
.omega {
	margin-right: 0;
}
.beta {
	margin-left: 0;
	margin-right: 0;
}



@media only screen and (min-width: 1200px){

    .nested.grid-1,.nested.grid-2,.nested.grid-3,.nested.grid-4,.nested.grid-5,.nested.grid-6,.nested.grid-7,.nested.grid-8,.nested.grid-9,.nested.grid-10,.nested.grid-11,.nested.grid-12 {
    /*margin-left: 10px;
    margin-right: 10px;*/
}


    .contentGrid-content
{
    display:inline;
	float: left;
    width:800px;
    margin-top:10px;
    margin-left: 5px;
    margin-right: -5px;
}

.contentGrid-right
{
    display:inline;
	float: left;
    width:400px;
    margin-top:10px;
    margin-left: 5px;
    margin-right: -5px;
}

.contentGrid-bottom
{
    display:inline;
	float: left;
    width:1200px;
    margin-left: 5px;
    margin-right: -5px;
    margin-top: 10px;
}


.container-12 .grid-1 {
	width:90px;
}
.container-12 .grid-2 {
	width:190px;
}
.container-12 .grid-3 {
	width:290px;
}
.container-12 .grid-4 {
	width:390px;
}
.container-12 .grid-5 {
	width:490px;
}
.container-12 .grid-6 {
	width:590px;
}
.container-12 .grid-7 {
	width:690px;
}
.container-12 .grid-8 {
	width:790px;
}
.container-12 .grid-9 {
	width:890px;
}
.container-12 .grid-10 {
	width:990px;
}
.container-12 .grid-11 {
	width:1090px;
}
.container-12 .grid-12 {
	width:1190px;
}

.container-12 .grid-6.nested {
	width:600px;
}

.container-12 .grid-8.nested {
	width:800px;
}

    .container-12 .grid-12.nested {
	width:1200px;
}

    }
/********************************************************************************************* 

3.  Grid 960px (mediaqueries)

*********************************************************************************************/

@media only screen and (min-width: 960px) and (max-width: 1199px) {
.container-12 {
	width: 960px;
}

.contentGrid-content
{
    display:inline;
	float: left;
    width:630px;
    margin-top:10px;
    margin-left: 5px;
    margin-right: 5px;
}

.contentGrid-right
{
    display:inline;
	float: left;
    width:310px;
    margin-top:10px;
    margin-left: 5px;
    margin-right: -5px;
}

.contentGrid-bottom
{
    display:inline;
	float: left;
    width:950px;
    margin-left: 5px;
    margin-right: -5px;
    margin-top: 10px;
}


.container-12 .grid-1 {
	width:70px;
}
.container-12 .grid-2 {
	width:150px;
}
.container-12 .grid-3 {
	width:230px;
}
.container-12 .grid-4 {
	width:310px;
}
.container-12 .grid-5 {
	width:390px;
}
.container-12 .grid-6 {
	width:470px;
}
.container-12 .grid-7 {
	width:550px;
}
.container-12 .grid-8 {
	width:630px;
}

.container-12 .grid-8.nested {
	width:650px;
}

.container-12 .grid-9 {
	width:710px;
}
.container-12 .grid-10 {
	width:790px;
}
.container-12 .grid-11 {
	width:870px;
}
.container-12 .grid-12 {
	width:950px;
}
}
	
/********************************************************************************************* 

4.  Grid 720px (mediaqueries)

*********************************************************************************************/

/*@media only screen and (min-width: 720px) and (max-width: 959px) {
.container-12 {
	width: 720px;
    
}

.contentGrid-content
{
    display:inline;
	float: left;
    width:480px;
    margin-top:10px;
    margin-left: 5px;
    margin-right: -5px;
}

.contentGrid-right
{
    display:inline;
	float: left;
    width:240px;
    margin-top:10px;
    margin-left: 5px;
    margin-right: -5px;
}

.contentGrid-bottom
{
    display:inline;
	float: left;
    width:720px;
    margin-left: 5px;
    margin-right: -5px;
    margin-top: 10px;
}


.container-12 .grid-1 {
	width:50px;
}
.container-12 .grid-2 {
	width:110px;
}
.container-12 .grid-3 {
	width:170px;
}
.container-12 .grid-4 {
	width:230px;
}
.container-12 .grid-5 {
	width:290px;
}
.container-12 .grid-6 {
	width:350px;
}
.container-12 .grid-7 {
	width:410px;
}
.container-12 .grid-8 {
	width:470px;
}

.container-12 .grid-8.nested {
	width:490px;
}

.container-12 .grid-9 {
	width:530px;
}
.container-12 .grid-10 {
	width:590px;
}
.container-12 .grid-11 {
	width:650px;
}
.container-12 .grid-12 {
	width:710px;
}
}*/
	

/********************************************************************************************* 

5.  Grid lt 720px / Mobile (mediaqueries)

*********************************************************************************************/
	
@media only screen and (max-width: 959px) {
    .container-12, .container-16 {
	    width: 100%;
   
    }
    .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .nested {
	    width:100%;
	    margin-left: 0px;
	    margin-right: 0px;
    }

    .alpha {
	    margin-left: 0;
    }
    .omega {
	    margin-right: 0;
    }
    .beta {
	    margin-left: 0;
	    margin-right: 0;
    }
/*.container-16 .grid-1, .container-16 .grid-2, .container-16 .grid-3, .container-16 .grid-4, .container-16 .grid-5, .container-16 .grid-6, .container-16 .grid-7, .container-16 .grid-8, .container-16 .grid-9, .container-16 .grid-10, .container-16 .grid-11, .container-16 .grid-12, .container-16 .grid-13, .container-16 .grid-14, .container-16 .grid-15, .container-16 .grid-16, .container-12 .grid-1, .container-12 .grid-2, .container-12 .grid-3, .container-12 .grid-4, .container-12 .grid-5, .container-12 .grid-6, .container-12 .grid-7, .container-12 .grid-8, .container-12 .grid-9, .container-12 .grid-10, .container-12 .grid-11, .container-12 .grid-12 {
	width:100%;
}*/
}


/********************************************************************************************* 

6.  Responsive Image

*********************************************************************************************/


img.scale, img.responsive {
	max-width: 100%;
	height: auto;
}