/*
960 Grid System Modified for
Responsive layout 960 Grid
System ~ Core CSS.
Learn more ~ http://960.gs/
Author: InkThemes
Licensed under GPL and MIT.
*/
/*
Forces backgrounds to span full width,
even if there is horizontal scrolling.
Increase this if your layout is wider.
Note: IE6 works fine without this fix.
*/
/* `Container >> 24 Columns
-----------------------------------*/
.container_24 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* `Grid >> Global
-----------------------------------*/
.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, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
display: inline;
float: left;
margin-left: 5px;
margin-right: 5px;
}
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
-----------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* `Grid >> 24 Columns
-----------------------------------*/
.container_24 .grid_1 {
width: 30px;
}
.container_24 .grid_2 {
width: 70px;
}
.container_24 .grid_3 {
width: 110px;
}
.container_24 .grid_4 {
width: 150px;
}
.container_24 .grid_5 {
width: 190px;
}
.container_24 .grid_6 {
width: 230px;
}
.container_24 .grid_7 {
width: 270px;
}
.container_24 .grid_8 {
width: 310px;
}
.container_24 .grid_9 {
width: 350px;
}
.container_24 .grid_10 {
width: 390px;
}
.container_24 .grid_11 {
width: 430px;
}
.container_24 .grid_12 {
width: 470px;
}
.container_24 .grid_13 {
width: 510px;
}
.container_24 .grid_14 {
width: 550px;
}
.container_24 .grid_15 {
width: 590px;
}
.container_24 .grid_16 {
width: 630px;
}
.container_24 .grid_17 {
width: 670px;
}
.container_24 .grid_18 {
width: 710px;
}
.container_24 .grid_19 {
width: 750px;
}
.container_24 .grid_20 {
width: 790px;
}
.container_24 .grid_21 {
width: 830px;
}
.container_24 .grid_22 {
width: 870px;
}
.container_24 .grid_23 {
width: 910px;
}
.container_24 .grid_24 {
width: 950px;
}
/* `Clear Floated Elements
-----------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before, .clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
zoom: 1;
}
/* This query is applied for
Protait Tablet ipad
*/
@media only screen and (min-width: 768px) and (max-width: 960px) {
.container_24 {
margin-left: auto;
margin-right: auto;
width: 750px;
}
/* Each columns are measured
For their specific size.
*/
.container_24 .grid_1 {
width: 3.167%;
}
.container_24 .grid_2 {
width: 7.333%;
}
.container_24 .grid_3 {
width: 11.5%;
}
.container_24 .grid_4 {
width: 15.667%;
}
.container_24 .grid_5 {
width: 19.833%;
}
.container_24 .grid_6 {
width: 24%;
}
.container_24 .grid_7 {
width: 28.167%;
}
.container_24 .grid_8 {
width: 32.333%;
}
.container_24 .grid_9 {
width: 36.5%;
}
.container_24 .grid_10 {
width: 40.667%;
}
.container_24 .grid_11 {
width: 44.833%;
}
.container_24 .grid_12 {
width: 49%;
}
.container_24 .grid_13 {
width: 53.167%;
}
.container_24 .grid_14 {
width: 57.333%;
}
.container_24 .grid_15 {
width: 61.5%;
}
.container_24 .grid_16 {
width: 65.667%;
}
.container_24 .grid_17 {
width: 69.833%;
}
.container_24 .grid_18 {
width: 74%;
}
.container_24 .grid_19 {
width: 78.167%;
}
.container_24 .grid_20 {
width: 82.333%;
}
.container_24 .grid_21 {
width: 86.5%;
}
.container_24 .grid_22 {
width: 90.667%;
}
.container_24 .grid_23 {
width: 94.833%;
}
.container_24 .grid_24 {
width: 99%;
}
}
/* This query is applied for
landscape ipad, Mobile
*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container_24 {
width: 480px;
}
/* `Grid 1 to 12 columns
Moved to 100% width
Acroding to container width
In landscape tablet screen
*/
.container_24 .grid_1, .container_24 .grid_2, .container_24 .grid_3, .container_24 .grid_4, .container_24 .grid_5, .container_24 .grid_6, .container_24 .grid_7, .container_24 .grid_8, .container_24 .grid_9, .container_24 .grid_10, .container_24 .grid_11, .container_24 .grid_12 {
width: 100%;
}
/* Grid 13 to 24 columns
Fixed in 470px in minimum
Width 480px to maximum 767px
Screen
*/
.container_24 .grid_13 {
width: 470px;
}
.container_24 .grid_14 {
width: 470px;
}
.container_24 .grid_15 {
width: 470px;
}
.container_24 .grid_16 {
width: 470px;
}
.container_24 .grid_17 {
width: 470px;
}
.container_24 .grid_18 {
width: 470px;
}
.container_24 .grid_19 {
width: 470px;
}
.container_24 .grid_20 {
width: 470px;
}
.container_24 .grid_21 {
width: 470px;
}
.container_24 .grid_22 {
width: 470px;
}
.container_24 .grid_23 {
width: 470px;
}
.container_24 .grid_24 {
width: 470px;
}
}
/* This query is applied for protait ipad, Mobile
*/
@media only screen and (max-width: 480px) {
.container_24 {
width: 300px;
}
/* Grid 1 to 24 columns are
Fixed in mobile layout
*/
.container_24 .grid_1, .container_24 .grid_2, .container_24 .grid_3, .container_24 .grid_4, .container_24 .grid_5, .container_24 .grid_6, .container_24 .grid_7, .container_24 .grid_8, .container_24 .grid_9, .container_24 .grid_10, .container_24 .grid_11, .container_24 .grid_12, .container_24 .grid_13, .container_24 .grid_14, .container_24 .grid_15, .container_24 .grid_16, .container_24 .grid_17, .container_24 .grid_18, .container_24 .grid_19, .container_24 .grid_20, .container_24 .grid_21, .container_24 .grid_22, .container_24 .grid_23, .container_24 .grid_24 {
width: 92%;
}
#respond textarea {
margin-left: 9px;
width: 100%;
}
#wp-calendar {
width: 95%;
}
}