/* 960 Grid System
Version 1.1
2008-12-15
Created by Nathan Smith. See the official site for more info: http://960.gs/
============================================================================
Thank you for downloading the 960 Grid System. I hope it helps to streamline
web development workflow. Enclosed in the bundle are printable sketch sheets
and template files for Adobe Fireworks and Photoshop, OmniGraffle and Visio.
Also included is a lightweight CSS file, which contains the grid dimensions.
To use this file, simply include the 960.css in the of the HTML page.
You may also use the reset.css and text.css files, or opt to leave them out.
Here is an example of the XHTML code necessary to incorporate the CSS files:
The files in the 960 Grid System are free of charge, licensed under GPL/MIT.
============================================================================
Special thanks to Eric Meyer for his comprehensive browser reset stylesheet.
http://meyerweb.com/eric/tools/css/reset/
*/
body
{
background: url(../images/diagonal.gif) repeat 0 0;
color: #2a2a2a;
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow:auto;
}
body > .container_12 {
height:auto;
}
.container_12
{
/*background: #fff url(../images/12_col.gif) repeat-y;*/
padding:10px;
text-align:left;
}
.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 {
padding: 0 0 20px 0;
}
.container_12 .grid_3 {
width:220px;
float:left;
background:#f5f5f5;
}
.container_12 .grid_6 {
/*width:500px;*/
float:left;
background:#fff;
}
.container_12 .grid_9 {
width:720px
}
.container_12 .grid_12 {
width:940px
}
.alpha {
margin-left:0
}
.omega {
margin-right:0
}
.container_12 .grid_1 {
width:60px
}
.container_12 .grid_2 {
width:140px
}
.container_12 .grid_4 {
width:470px;
padding-right:10px;
}
.container_12 .grid_5 {
width:380px
}
.container_12 .grid_7 {
width:540px
}
.container_12 .grid_8 {
width:620px
}
.container_12 .grid_10 {
width:780px
}
.container_12 .grid_11 {
width:860px
}
.container_12 .prefix_3 {
padding-left:240px
}
.container_12 .prefix_6 {
padding-left:480px
}
.container_12 .prefix_9 {
padding-left:720px
}
.container_12 .prefix_100 {
padding:0 10px;
}
.container_12 .prefix_1 {
padding-left:80px
}
.container_12 .prefix_2 {
padding-left:160px
}
.container_12 .prefix_4 {
padding-left:320px
}
.container_12 .prefix_5 {
padding-left:400px
}
.container_12 .prefix_7 {
padding-left:560px
}
.container_12 .prefix_8 {
padding-left:640px
}
.container_12 .prefix_10 {
padding-left:800px
}
.container_12 .prefix_11 {
padding-left:880px
}
.container_12 .suffix_3 {
padding-right:240px
}
.container_12 .suffix_6 {
padding-right:480px
}
.container_12 .suffix_9 {
padding-right:720px
}
.container_12 .suffix_1 {
padding-right:80px
}
.container_12 .suffix_2 {
padding-right:160px
}
.container_12 .suffix_4 {
padding-right:320px
}
.container_12 .suffix_5 {
padding-right:400px
}
.container_12 .suffix_7 {
padding-right:560px
}
.container_12 .suffix_8 {
padding-right:640px
}
.container_12 .suffix_10 {
padding-right:800px
}
.container_12 .suffix_11 {
padding-right:880px
}
/* CLEAR STUFF */
.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
}
.clearfix {
display:inline-block
}
* html .clearfix {
height:1%
}
.clearfix {
display:block
}
.clear_soft {
clear: both;
}