/*  Copyright : RST FORUM  */ .container-12								{ margin:0 auto; width:960px; overflow:hidden; } .container-12 .container-12 							{ margin:0 -16px 0 -16px; width:auto; display:inline-block; } .grila_1								{ width:48px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_2 							{ width:128px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_3 							{ width:208px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_4 							{ width:288px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_5 							{ width:368px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }		 .grila_6 							{ width:448px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_7 							{ width:528px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_8 							{ width:608px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_9								{ width:688px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_10							{ width:768px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_11							{ width:848px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .grila_12							{ width:928px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; } .offset_1							{ margin-left:96px; } .offset_2							{ margin-left:176px; } .offset_3 							{ margin-left:256px; } .offset_4 							{ margin-left:336px; } .offset_5 							{ margin-left:416px; } .offset_6 							{ margin-left:496px; } .offset_7 							{ margin-left:576px; } .offset_8 							{ margin-left:656px; } .offset_9							{ margin-left:736px; } .offset_10							{ margin-left:816px; } .offset_11							{ margin-left:896px; } .show-phone 						{ display:none !important; } .show-tablet 						{ display:none !important; } .show-screen						{ display:inherit !important; } .hide-phone							{ display:inherit !important; } .hide-tablet						{ display:inherit !important; } .hide-screen						{ display:none !important; } /***** Grafica mare ( than 960px )   *****/ @media only screen and (min-width:1200px) { .container-12 								{ margin:0 auto; width:1200px; overflow:hidden; } .container-12 .container-12 							{ margin:0 -20px 0 -20px; width:auto; display:inline-block; } .grila_1								{ width:60px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_2 							{ width:160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_3 							{ width:260px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_4 							{ width:360px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_5 							{ width:460px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }		 .grila_6 							{ width:560px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_7 							{ width:660px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_8 							{ width:760px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_9								{ width:860px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_10							{ width:960px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_11							{ width:1060px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .grila_12							{ width:1160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; } .offset_1							{ margin-left:120px; } .offset_2							{ margin-left:220px; } .offset_3 							{ margin-left:320px; } .offset_4 							{ margin-left:420px; } .offset_5 							{ margin-left:520px; } .offset_6 							{ margin-left:620px; } .offset_7 							{ margin-left:720px; } .offset_8 							{ margin-left:820px; } .offset_9							{ margin-left:920px; } .offset_10							{ margin-left:1020px; } .offset_11							{ margin-left:1120px; } .show-phone 						{ display:none !important; } .show-tablet 						{ display:none !important; } .show-screen						{ display:inherit; } .hide-phone							{ display:inherit !important; } .hide-tablet						{ display:inherit !important; } .hide-screen						{ display:none !important; } } /***** Tableta (Smaller than 959px) *****/ @media only screen and (min-width: 768px) and (max-width: 959px) { .container-12 								{ margin:0 auto; width:768px; overflow:hidden; } .container-12 .container-12 							{ margin:0 -14px 0 -14px; width:auto; display:inline-block; } .grila_1								{ width:36px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_2 							{ width:100px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_3 							{ width:164px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_4 							{ width:228px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_5 							{ width:292px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }		 .grila_6 							{ width:356px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_7 							{ width:420px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_8 							{ width:484px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_9								{ width:548px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_10							{ width:612px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_11							{ width:676px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .grila_12							{ width:740px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; } .offset_1							{ margin-left:78px; } .offset_2							{ margin-left:142px; } .offset_3 							{ margin-left:206px; } .offset_4 							{ margin-left:270px; } .offset_5 							{ margin-left:334px; } .offset_6 							{ margin-left:398px; } .offset_7 							{ margin-left:462px; } .offset_8 							{ margin-left:526px; } .offset_9							{ margin-left:590px; } .offset_10							{ margin-left:654px; } .offset_11							{ margin-left:718px; } .show-phone 						{ display:none !important; } .show-tablet 						{ display:inherit !important; } .show-screen						{ display:none !important; } .hide-phone							{ display:inherit !important; } .hide-tablet						{ display:none !important; } .hide-screen						{ display:inherit !important; } } /***** Telefon (portrait 300px) *****/ @media only screen and (max-width: 767px) { .container-12 								{ margin:0 auto; width:300px; overflow:hidden; } .container-12 .container-12 							{ margin:0; width:auto; display:inline-block; } .grila_1, .grila_2, .grila_3, .grila_4, .grila_5, .grila_6, .grila_7, .grila_8, .grila_9, .grila_10, .grila_11, .grila_12							{ width:300px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; } .offset_1, .offset_2, .offset_3, .offset_4, .offset_5, .offset_6, .offset_7, .offset_8, .offset_9, .offset_10, .offset_11							{ margin-left:0; } .show-phone 						{ display:inherit !important; } .show-tablet 						{ display:none !important; } .show-screen						{ display:none !important; } .hide-phone							{ display:none !important; } .hide-tablet						{ display:inherit !important; } .hide-screen						{ display:inherit !important; } }	  /***** Telefon (landscape 420px) *****/ @media only screen and (min-width: 480px) and (max-width: 767px) { .container-12 								{ margin:0 auto; width:456px; overflow:hidden; } .container-12 .container-12 							{ margin:0; width:auto; display:inline-block; } .grila_1, .grila_2, .grila_3, .grila_4, .grila_5, .grila_6, .grila_7, .grila_8, .grila_9, .grila_10, .grila_11, .grila_12							{ width:456px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; } .show-phone 						{ display:inherit !important; } .show-tablet 						{ display:none !important; } .show-screen						{ display:none !important; } .hide-phone							{ display:none !important; } .hide-tablet						{ display:inherit !important; } .hide-screen						{ display:inherit !important; } } /***** Clean up *****/ .container:after 					{ content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }  .clearfix:before, .clearfix:after, .continer-12:before, .container-12:after 							{ content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } .container-12:after,	.clearfix:after 		{ clear:both; } .container-12,  .clearfix 							{ zoom:1; } .clear 								{ clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0;	} HTML  <div class="container-12">  <!-- Container 12 -->   <div class="grila_1>   </div>   <!-- Grila poate fi , 1,2,3,4,5,6,7,8,9,10,11,12    P.S uitate in codu sursa css si vezi width pentru fiecare si o sa-ti dai seama .....   Pentru nelamuriri lasa comentariu -->  </div> <!-- Container 12::END -->