diff options
Diffstat (limited to 'usr/lib/mageiawelcome/css/kickstart-grid.css')
-rwxr-xr-x | usr/lib/mageiawelcome/css/kickstart-grid.css | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/usr/lib/mageiawelcome/css/kickstart-grid.css b/usr/lib/mageiawelcome/css/kickstart-grid.css new file mode 100755 index 0000000..8a9a6d6 --- /dev/null +++ b/usr/lib/mageiawelcome/css/kickstart-grid.css @@ -0,0 +1,167 @@ +/* + 99Lime.com HTML KickStart by Joshua Gatcke + kickstart-grids.css + + DO NOT EDIT THIS FILE unless you know what you are doing. +*/ +/*--------------------------------- + GRID/COLUMNS +----------------------------------- + tinyfluidgrid.com + & girlfriendnyc.com + with changes by 99Lime +-----------------------------------*/ + /* + & Columns : 12 + & Gutter %: 20% + & MaxWidth: 1280px + */ + +.grid{ +max-width:1220px; +margin:0 auto; +padding:0 2em; +} + +.grid.flex{ +width:100%; +max-width:100%; +padding:0 2%; +padding:2em; +} + +.row{ +display:block; +overflow:hidden; +clear:both; +} + +*[class*="col_"].alpha{margin-left:0;} +*[class*="col_"].omega{margin-right:0;} + +.col_1 { width: 6.6666666666667%; } +.col_2 { width: 15%; } +.col_3 { width: 23.333333333333%; } +.col_4 { width: 31.666666666667%; } +.col_5 { width: 40%; } +.col_6 { width: 48.333333333333%; } +.col_7 { width: 56.666666666667%; } +.col_8 { width: 65%; } +.col_9 { width: 73.333333333333%; } +.col_10 { width: 81.666666666667%; } +.col_11 { width: 90%; } +.col_12 { width: 98.333333333333%; } + +*[class*="col_"]{ +margin-left: 0.83333333333333%; +margin-right: 0.83333333333333%; +margin-top:0.5em; +margin-bottom:0.5em; +float: left; +display: block; +} + +.grid img{ +max-width: 100%; +height:auto; +} + +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} +.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +* html .clearfix, *:first-child+html .clearfix{zoom:1} + +/* Viewable Grids + To view your grids, add the class .visible to any grid container. + This will add a background color so you can see the layout of your grids. +*/ +*[class*="col_"].visible{ +background:#eee; +border:1px dotted #ccc; +} + + +/*--------------------------------- + Responsive Grid Media Queries - 1280, 1024, 768, 480 + 1280-1024 - desktop (default grid) + 1024-768 - tablet landscape + 768-480 - tablet + 480-less - phone landscape & smaller +-----------------------------------*/ +@media all and (min-width: 1024px) and (max-width: 1280px) { + + .grid *[class*="col_"]{} + .grid{max-width: 1024px;} + .show-desktop {display:block;} + .hide-desktop {display:none;} + .show-tablet {display:none;} + .hide-tablet {display:block;} + .show-phone {display:none;} + .hide-phone {display:block;} + +} + +@media all and (min-width: 768px) and (max-width: 1024px) { + + .grid *[class*="col_"]{} + .grid{max-width: 768px;} + .show-desktop {display:none;} + .hide-desktop {display:block;} + .show-tablet {display:block;} + .hide-tablet {display:none;} + .show-phone {display:none;} + .hide-phone {display:block;} + +} + + +@media all and (min-width: 480px) and (max-width: 768px) { + + .grid *[class*="col_"]{ + float:none; + width:auto; + clear:both; + display:block; + } + + /* columns inside of columns */ + .grid *[class*="col_"] [class*="col_"]{ + margin-left:0; + margin-right:0; + width:100%; + } + + .grid{max-width: 480px;} + .show-desktop {display:none;} + .hide-desktop {display:block;} + .show-tablet {display:block;} + .hide-tablet {display:none;} + .show-phone {display:none;} + .hide-phone {display:block;} + +} + +@media all and (max-width: 480px) { + + .grid *[class*="col_"]{ + float:none; + width:auto; + clear:both; + display:block; + } + + /* columns inside of columns */ + .grid *[class*="col_"] [class*="col_"]{ + margin-left:0; + margin-right:0; + width:100%; + } + + .grid{max-width: 100%;/*320*/} + .show-desktop {display:none;} + .hide-desktop {display:block;} + .show-tablet {display:none;} + .hide-tablet {display:block;} + .show-phone {display:block;} + .hide-phone {display:none;} + +} |