/skin/frontend/ultimo/default/css/infortis/_shared/grid12.css

  1/*
  2 * 12-column grid system
  3 */
  4
  5
  6
  7/* Container */
  8.container {
  9	margin-left:auto;
 10	margin-right:auto;
 11}
 12.nested-container {
 13	width:102%;
 14	margin-left:-1%;
 15}
 16
 17/* Grid units */
 18.grid12-1,
 19.grid12-2,
 20.grid12-3,
 21.grid12-4,
 22.grid12-5,
 23.grid12-6,
 24.grid12-7,
 25.grid12-8,
 26.grid12-9,
 27.grid12-10,
 28.grid12-11,
 29.grid12-12,
 30.grid-full, /* Alias for full-width unit */
 31
 32/* Special grid units */
 33.grid-col2-sidebar,
 34.grid-col2-main
 35{ 
 36	/*position:relative;*/
 37	display:inline;
 38	float:left;
 39	margin-left:1%;
 40	margin-right:1%;
 41}
 42
 43/* Basic grid units width */
 44.grid12-1	{ width:6.33%; }
 45.grid12-2	{ width:14.66%; }
 46.grid12-3	{ width:23%; }
 47.grid12-4	{ width:31.33%; }
 48.grid12-5	{ width:39.67%; }
 49.grid12-6	{ width:48%; }
 50.grid12-7	{ width:56.33%; }
 51.grid12-8	{ width:64.67%; }
 52.grid12-9	{ width:73%; }
 53.grid12-10	{ width:81.33%; }
 54.grid12-11	{ width:89.67%; }
 55.grid12-12,
 56.grid-full	{ width:98%; }
 57
 58/* Grid units without left gutter (margin) */
 59.no-left-gutter.grid12-1	{ margin-left:0; width:7.33%; }
 60.no-left-gutter.grid12-2	{ margin-left:0; width:15.66%; }
 61.no-left-gutter.grid12-3	{ margin-left:0; width:24%; }
 62.no-left-gutter.grid12-4	{ margin-left:0; width:32.33%; }
 63.no-left-gutter.grid12-5	{ margin-left:0; width:40.67%; }
 64.no-left-gutter.grid12-6	{ margin-left:0; width:49%; }
 65.no-left-gutter.grid12-7	{ margin-left:0; width:57.33%; }
 66.no-left-gutter.grid12-8	{ margin-left:0; width:65.67%; }
 67.no-left-gutter.grid12-9	{ margin-left:0; width:74%; }
 68.no-left-gutter.grid12-10	{ margin-left:0; width:82.33%; }
 69.no-left-gutter.grid12-11	{ margin-left:0; width:90.67%; }
 70.no-left-gutter.grid12-12,
 71.no-left-gutter.grid-full	{ margin-left:0; width:99%; }
 72
 73/* Grid units without right gutter (margin) */
 74.no-right-gutter.grid12-1	{ margin-right:0; width:7.33%; }
 75.no-right-gutter.grid12-2	{ margin-right:0; width:15.66%; }
 76.no-right-gutter.grid12-3	{ margin-right:0; width:24%; }
 77.no-right-gutter.grid12-4	{ margin-right:0; width:32.33%; }
 78.no-right-gutter.grid12-5	{ margin-right:0; width:40.67%; }
 79.no-right-gutter.grid12-6	{ margin-right:0; width:49%; }
 80.no-right-gutter.grid12-7	{ margin-right:0; width:57.33%; }
 81.no-right-gutter.grid12-8	{ margin-right:0; width:65.67%; }
 82.no-right-gutter.grid12-9	{ margin-right:0; width:74%; }
 83.no-right-gutter.grid12-10	{ margin-right:0; width:82.33%; }
 84.no-right-gutter.grid12-11	{ margin-right:0; width:90.67%; }
 85.no-right-gutter.grid12-12,
 86.no-right-gutter.grid-full	{ margin-right:0; width:99%; }
 87
 88/* Grid units without any gutter (margin) */
 89.no-gutter.grid12-1		{ margin-left:0; margin-right:0; width:8.33%; }
 90.no-gutter.grid12-2		{ margin-left:0; margin-right:0; width:16.66%; }
 91.no-gutter.grid12-3		{ margin-left:0; margin-right:0; width:25%; }
 92.no-gutter.grid12-4		{ margin-left:0; margin-right:0; width:33.33%; }
 93.no-gutter.grid12-5		{ margin-left:0; margin-right:0; width:41.67%; }
 94.no-gutter.grid12-6		{ margin-left:0; margin-right:0; width:50%; }
 95.no-gutter.grid12-7		{ margin-left:0; margin-right:0; width:58.33%; }
 96.no-gutter.grid12-8		{ margin-left:0; margin-right:0; width:66.67%; }
 97.no-gutter.grid12-9		{ margin-left:0; margin-right:0; width:75%; }
 98.no-gutter.grid12-10	{ margin-left:0; margin-right:0; width:83.33%; }
 99.no-gutter.grid12-11	{ margin-left:0; margin-right:0; width:91.67%; }
100.no-gutter.grid12-12,
101.no-gutter.grid-full	{ margin-left:0; margin-right:0; width:100%; }
102
103/* Special grid units: basic structure of pages with 1 and 2 sidebars
104-------------------------------------------------------------- */
105/* 2 columns: fixed-width sidebar unit and fluid main unit.
106   Sidebar unit has the same width for all screen sizes equal or greater than 1280px.
107   Width of the main unit is fluid.
108*/
109.grid-col2-sidebar	{ width:23%; }
110.grid-col2-main		{ width:73%; }
111
112/* Another 2 columns inside ".grid-col2-main": fixed-width sidebar unit and fluid main unit */
113.grid-col3-sidebar 		{ width:31.52%; }
114.grid-col3-main			{ width:65.90%; }
115
116/* Vertically aligned grid
117-------------------------------------------------------------- */
118.v-grid-container {
119	display:table;
120	width:100%;
121}
122.v-grid {
123	float:none;
124	display:table-cell;
125	vertical-align:middle;
126}
127
128/* Utility classes
129-------------------------------------------------------------- */
130/* Units with no gutter (margin): alpha - first unit in a row, omega - last unit in a row */
131.alpha { margin-left:0; }
132.omega { margin-right:0; }
133
134/* Hide element if screen width is lower than the width specified in the class name */
135.hide-below-1680 { display:none !important; }
136.hide-below-1440 { display:none !important; }
137.hide-below-1360 { display:none !important; }
138.hide-below-1280 { display:none !important; }
139
140/* Container: stretched, without side margin 
141-------------------------------------------------------------- */
142/* Remove padding from stretched container (it is added for narrow screens via media queries) */
143.container.stretched { width:96%; padding-left:0; padding-right:0; }
144
145/* Stretch inner grid unit (full width) */
146.container.stretched > .grid-full { width:100%; margin-left:0; margin-right:0; }
147
148/* Grid units container: clears floats
149   (place grid units inside "div" with this class)
150-------------------------------------------------------------- */
151.grid-container { *zoom: 1; clear: both; }
152.grid-container:before,
153.grid-container:after { display: table; line-height: 0; content: ""; }
154.grid-container:after { clear: both; }
155
156/* Grid unit container: clears floats and adds vertical margin between units
157-------------------------------------------------------------- */
158.grid-container-spaced { *zoom: 1; clear: both; }
159.grid-container-spaced:before,
160.grid-container-spaced:after { display: table; line-height: 0; content: ""; }
161.grid-container-spaced:after { clear: both; }
162.grid-container-spaced .grid12-1,
163.grid-container-spaced .grid12-2,
164.grid-container-spaced .grid12-3,
165.grid-container-spaced .grid12-4,
166.grid-container-spaced .grid12-5,
167.grid-container-spaced .grid12-6,
168.grid-container-spaced .grid12-7,
169.grid-container-spaced .grid12-8,
170.grid-container-spaced .grid12-9,
171.grid-container-spaced .grid12-10,
172.grid-container-spaced .grid12-11,
173.grid-container-spaced .grid12-12,
174.grid-container-spaced .grid-full
175{
176	margin-bottom: 2%;
177}
178
179/* Grid presentation
180-------------------------------------------------------------- */
181.show-grid [class*="grid12-"] {
182	background-color: #eee;
183	text-align: center;
184	min-height: 40px;
185	line-height: 40px;
186	transition:			all 300ms ease-in-out;
187	-moz-transition:	all 300ms ease-in-out;
188	-webkit-transition:	all 300ms ease-in-out;
189	-o-transition:		all 300ms ease-in-out;
190}
191.show-grid [class*="grid12-"]:hover {
192	background-color: #F08080;
193}