/*DЕMONSTRATION STYLE* /
[class*=gridcol] {
	margin: 1em 0 0;
}
[class*=gridcol]:before {
	content: 'Lorem Ipsum Dolor Sit Amet';
	display: block;
	background: RGBA(0,0,0,.2);
	border-radius: 3px;
}
/**/


/* NULL Style */
body, div, p, h1, h2, h3, h4, h5, h6, a, hr, td
article, aside, figcaption, figure, footer, header, hgroup, nav, section, time {margin: 0; padding: 0;}
table {border-collapse: collapse;}
hr {border: none; height: 1px; background: #000;}
img {border: 0; max-width: 100%; max-height: 100%;}



/* HTML5 for IE */
/* Into <head> insert code:
 * <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 */
article, aside, figcaption, figure, footer, header, hgroup, nav, section {display: block;}


/* GRID 960 */
.grid24, .grid16, .grid12, .grid10 {
	width: 960px;
	margin: 0 auto;
	font-size: 0;
}
.gridrow {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 0;
}
[class*=gridcol] {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	margin-right: 10px;
	font-size: 1rem;
}
[class*=gridcol]:not([class*=offset]) {
	margin-left: 10px;
}


/*__GRID 24 COLUMNS__*/
.grid24 .gridcol1  {width:  20px;}
.grid24 .gridcol2  {width:  60px;}
.grid24 .gridcol3  {width: 100px;}
.grid24 .gridcol4  {width: 140px;}
.grid24 .gridcol5  {width: 180px;}
.grid24 .gridcol6  {width: 220px;}
.grid24 .gridcol7  {width: 260px;}
.grid24 .gridcol8  {width: 300px;}
.grid24 .gridcol9  {width: 340px;}
.grid24 .gridcol10 {width: 380px;}
.grid24 .gridcol11 {width: 420px;}
.grid24 .gridcol12 {width: 460px;}
.grid24 .gridcol13 {width: 500px;}
.grid24 .gridcol14 {width: 540px;}
.grid24 .gridcol15 {width: 580px;}
.grid24 .gridcol16 {width: 620px;}
.grid24 .gridcol17 {width: 660px;}
.grid24 .gridcol18 {width: 700px;}
.grid24 .gridcol19 {width: 740px;}
.grid24 .gridcol20 {width: 780px;}
.grid24 .gridcol21 {width: 820px;}
.grid24 .gridcol22 {width: 860px;}
.grid24 .gridcol23 {width: 900px;}
.grid24 .gridcol24 {width: 940px;}
.grid24 .offset1   {margin-left:  50px;}
.grid24 .offset2   {margin-left:  90px;}
.grid24 .offset3   {margin-left: 130px;}
.grid24 .offset4   {margin-left: 170px;}
.grid24 .offset5   {margin-left: 210px;}
.grid24 .offset6   {margin-left: 250px;}
.grid24 .offset7   {margin-left: 290px;}
.grid24 .offset8   {margin-left: 330px;}
.grid24 .offset9   {margin-left: 370px;}
.grid24 .offset10  {margin-left: 410px;}
.grid24 .offset11  {margin-left: 450px;}
.grid24 .offset12  {margin-left: 490px;}
.grid24 .offset13  {margin-left: 530px;}
.grid24 .offset14  {margin-left: 570px;}
.grid24 .offset15  {margin-left: 610px;}
.grid24 .offset16  {margin-left: 650px;}
.grid24 .offset17  {margin-left: 690px;}
.grid24 .offset18  {margin-left: 730px;}
.grid24 .offset19  {margin-left: 770px;}
.grid24 .offset20  {margin-left: 810px;}
.grid24 .offset21  {margin-left: 850px;}
.grid24 .offset22  {margin-left: 890px;}
.grid24 .offset23  {margin-left: 930px;}
/* END of 24 columns */


/*__GRID 16 COLUMNS__*/
.grid16 .gridcol1  {width:  40px;}
.grid16 .gridcol2  {width: 100px;}
.grid16 .gridcol3  {width: 160px;}
.grid16 .gridcol4  {width: 220px;}
.grid16 .gridcol5  {width: 280px;}
.grid16 .gridcol6  {width: 340px;}
.grid16 .gridcol7  {width: 400px;}
.grid16 .gridcol8  {width: 460px;}
.grid16 .gridcol9  {width: 520px;}
.grid16 .gridcol10 {width: 580px;}
.grid16 .gridcol11 {width: 640px;}
.grid16 .gridcol12 {width: 700px;}
.grid16 .gridcol13 {width: 760px;}
.grid16 .gridcol14 {width: 820px;}
.grid16 .gridcol15 {width: 880px;}
.grid16 .gridcol16 {width: 940px;}
.grid16 .offset0   {margin-left:  65px;}
.grid16 .offset1   {margin-left:  70px;}
.grid16 .offset2   {margin-left: 130px;}
.grid16 .offset3   {margin-left: 190px;}
.grid16 .offset4   {margin-left: 250px;}
.grid16 .offset5   {margin-left: 310px;}
.grid16 .offset6   {margin-left: 370px;}
.grid16 .offset7   {margin-left: 430px;}
.grid16 .offset8   {margin-left: 490px;}
.grid16 .offset9   {margin-left: 550px;}
.grid16 .offset10  {margin-left: 610px;}
.grid16 .offset11  {margin-left: 670px;}
.grid16 .offset12  {margin-left: 730px;}
.grid16 .offset13  {margin-left: 790px;}
.grid16 .offset14  {margin-left: 850px;}
.grid16 .offset15  {margin-left: 910px;}
/* END of 16 columns */


/*__GRID 12 COLUMNS__*/
.grid12 .gridcol1  {width:  60px;}
.grid12 .gridcol2  {width: 140px;}
.grid12 .gridcol3  {width: 220px;}
.grid12 .gridcol4  {width: 300px;}
.grid12 .gridcol5  {width: 380px;}
.grid12 .gridcol6  {width: 460px;}
.grid12 .gridcol7  {width: 540px;}
.grid12 .gridcol8  {width: 620px;}
.grid12 .gridcol9  {width: 700px;}
.grid12 .gridcol10 {width: 780px;}
.grid12 .gridcol11 {width: 860px;}
.grid12 .gridcol12 {width: 940px;margin-left:10px;margin-right:10px;}
.grid12 .offset03  {margin-left:  30px;}
.grid12 .offset1   {margin-left:  90px;}
.grid12 .offset2   {margin-left: 170px;}
.grid12 .offset3   {margin-left: 250px;}
.grid12 .offset4   {margin-left: 330px;}
.grid12 .offset5   {margin-left: 410px;}
.grid12 .offset6   {margin-left: 490px;}
.grid12 .offset7   {margin-left: 570px;}
.grid12 .offset8   {margin-left: 650px;}
.grid12 .offset9   {margin-left: 730px;}
.grid12 .offset10  {margin-left: 810px;}
.grid12 .offset11  {margin-left: 890px;}

/* END of 12 columns */


/*__GRID 10 COLUMNS__*/
.grid10 .gridcol1  {width:  76px;}
.grid10 .gridcol2  {width: 172px;}
.grid10 .gridcol3  {width: 268px;}
.grid10 .gridcol4  {width: 364px;}
.grid10 .gridcol5  {width: 460px;}
.grid10 .gridcol6  {width: 556px;}
.grid10 .gridcol7  {width: 652px;}
.grid10 .gridcol8  {width: 748px;}
.grid10 .gridcol9  {width: 844px;}
.grid10 .gridcol10 {width: 940px;}
.grid10 .offset1   {margin-left: 106px;}
.grid10 .offset2   {margin-left: 202px;}
.grid10 .offset3   {margin-left: 298px;}
.grid10 .offset4   {margin-left: 394px;}
.grid10 .offset5   {margin-left: 490px;}
.grid10 .offset6   {margin-left: 586px;}
.grid10 .offset7   {margin-left: 682px;}
.grid10 .offset8   {margin-left: 778px;}
.grid10 .offset9   {margin-left: 874px;}
/* END of 10 columns */