/*
Flying Swing Grids Layout
Copyright (c) 2008-2100, Taobao.com Inc. Some rights reserved.
Doc Link: http://lifesinger.org/blog/?p=448
*/

/**
 * Update Log:
 * 2009-05-18   yubo    修正Chrome和Safari下，20090211解决bug时，引入的另一个bug. 不能用display: inline-block
 * 2009-02-11   yubo    解决Chrome和Safari下选取文字时，背景区域不对的bug
 * 2008-12-23   yubo    调整position: relative的影响区域
 * 2008-12-18	yubo	margin: 0 auto; -> margin-left: auto; margin-right: auto;
 * 2008-11-02	yubo	created initial version
 */

/***********************************************
 * Basic
 ***********************************************/
#page, #page3 { width: 950px; margin-left: auto; margin-right: auto; } /* Golden width ^o^ */
/* For liquid layout. You can override it with any favorite percent. */
/*#page2 { width: 100%; } 不设置，默认就是100%. */
#page3 { width: 750px; } /* 750 is still suitable for 'small, intro' page. */

.col-main { float: left; width: 100%; }
.col-sub, .col-extra { float: left; }

/***********************************************
 * Default
 ***********************************************/
/* 2 Columns: .grid-c2-s5 */
.grid-c2 .main-wrap { margin-left: 200px; }
.grid-c2 .col-sub { width: 190px; margin-left: -100%; }
.grid-c2f .main-wrap { margin-right: 200px; }
.grid-c2f .col-sub { width: 190px; margin-left: -190px; }

/* 3 Columns: .grid-c3-s5e6 */
.grid-c3 .main-wrap { margin: 0 240px 0 200px; }
.grid-c3 .col-sub { width: 190px; margin-left: -100%; }
.grid-c3 .col-extra { width: 230px; margin-left: -230px; }
.grid-c3f .main-wrap { margin: 0 200px 0 240px; }
.grid-c3f .col-sub { width: 190px; margin-left: -190px; }
.grid-c3f .col-extra { width: 230px; margin-left: -100%; }
.grid-c3e .main-wrap { margin-right: 440px; }
.grid-c3e .col-sub { width: 190px; margin-left: -430px; }
.grid-c3e .col-extra { width: 230px; margin-left: -230px; }
.grid-c3d .main-wrap { margin-right: 440px; }
.grid-c3d .col-sub { width: 190px; margin-left: -190px; }
.grid-c3d .col-extra { width: 230px; margin-left: -430px; }
.grid-c3c .main-wrap { margin-left: 440px; }
.grid-c3c .col-sub { width: 190px; margin-left: -100%; }
.grid-c3c .col-extra { width: 230px; margin-left: -100%; left: 200px; }
.grid-c3b .main-wrap { margin-left: 440px; }
.grid-c3b .col-sub { width: 190px; margin-left: -100%; left: 240px; }
.grid-c3b .col-extra { width: 230px; margin-left: -100%; }

/***********************************************
 * 2 Columns
 * normal - main : sub
 *      f - sub  : main
 ***********************************************/
/* s4 */
.grid-c2-s4 .main-wrap { margin-left: 160px; }
.grid-c2-s4 .col-sub { width: 150px; margin-left: -100%; }
.grid-c2-s4f .main-wrap { margin-right: 160px; }
.grid-c2-s4f .col-sub { width: 150px; margin-left: -150px; }

/* s6 */
.grid-c2-s6 .main-wrap { margin-left: 240px; }
.grid-c2-s6 .col-sub { width: 230px; margin-left: -100%; }
.grid-c2-s6f .main-wrap { margin-right: 240px; }
.grid-c2-s6f .col-sub { width: 230px; margin-left: -230px; }

/* s7 */
.grid-c2-s7 .main-wrap { margin-left: 280px; }
.grid-c2-s7 .col-sub { width: 270px; margin-left: -100%; }
.grid-c2-s7f .main-wrap { margin-right: 280px; }
.grid-c2-s7f .col-sub { width: 270px; margin-left: -270px; }

/* s8 */
.grid-c2-s8 .main-wrap { margin-left: 320px; }
.grid-c2-s8 .col-sub { width: 310px; margin-left: -100%; }
.grid-c2-s8f .main-wrap { margin-right: 320px; }
.grid-c2-s8f .col-sub { width: 310px; margin-left: -310px; }

/* s9 */
.grid-c2-s9 .main-wrap { margin-left: 360px; }
.grid-c2-s9 .col-sub { width: 350px; margin-left: -100%; }
.grid-c2-s9f .main-wrap { margin-right: 360px; }
.grid-c2-s9f .col-sub { width: 350px; margin-left: -350px; }

/* s10 */
.grid-c2-s10 .main-wrap { margin-left: 400px; }
.grid-c2-s10 .col-sub { width: 390px; margin-left: -100%; }
.grid-c2-s10f .main-wrap { margin-right: 400px; }
.grid-c2-s10f .col-sub { width: 390px; margin-left: -390px; }

/* s11 */
.grid-c2-s11 .main-wrap { margin-left: 440px; }
.grid-c2-s11 .col-sub { width: 430px; margin-left: -100%; }
.grid-c2-s11f .main-wrap { margin-right: 440px; }
.grid-c2-s11f .col-sub { width: 430px; margin-left: -430px; }

/* s12 */
.grid-c2-s12 .main-wrap { margin-left: 480px; }
.grid-c2-s12 .col-sub { width: 470px; margin-left: -100%; }
.grid-c2-s12f .main-wrap { margin-right: 480px; }
.grid-c2-s12f .col-sub { width: 470px; margin-left: -470px; }

/***********************************************
 * 3 Columns
 * normal - sub   : main  : extra
 *      f - extra : main  : sub
 *      e - main  : sub   : extra
 *      d - main  : extra : sub
 *      c - sub   : extra : main
 *      b - extra : sub   : main
 ***********************************************/
/* s5e7 */
.grid-c3-s5e7 .main-wrap { margin: 0 280px 0 200px; }
.grid-c3-s5e7 .col-sub { width: 190px; margin-left: -100%; }
.grid-c3-s5e7 .col-extra { width: 270px; margin-left: -270px; }
.grid-c3-s5e7f .main-wrap { margin: 0 200px 0 280px; }
.grid-c3-s5e7f .col-sub { width: 190px; margin-left: -190px; }
.grid-c3-s5e7f .col-extra { width: 270px; margin-left: -100%; }
.grid-c3-s5e7e .main-wrap { margin-right: 480px; }
.grid-c3-s5e7e .col-sub { width: 190px; margin-left: -470px; }
.grid-c3-s5e7e .col-extra { width: 270px; margin-left: -270px; }
.grid-c3-s5e7d .main-wrap { margin-right: 480px; }
.grid-c3-s5e7d .col-sub { width: 190px; margin-left: -190px; }
.grid-c3-s5e7d .col-extra { width: 270px; margin-left: -470px; }
.grid-c3-s5e7c .main-wrap { margin-left: 480px; }
.grid-c3-s5e7c .col-sub { width: 190px; margin-left: -100%; }
.grid-c3-s5e7c .col-extra { width: 270px; margin-left: -100%; left: 200px; }
.grid-c3-s5e7b .main-wrap { margin-left: 480px; }
.grid-c3-s5e7b .col-sub { width: 190px; margin-left: -100%; left: 280px; }
.grid-c3-s5e7b .col-extra { width: 270px; margin-left: -100%; }

/* s9e6 */
.grid-c3-s9e6 .main-wrap { margin: 0 240px 0 360px; }
.grid-c3-s9e6 .col-sub { width: 350px; margin-left: -100%; }
.grid-c3-s9e6 .col-extra { width: 230px; margin-left: -230px; }
.grid-c3-s9e6f .main-wrap { margin: 0 360px 0 240px; }
.grid-c3-s9e6f .col-sub { width: 350px; margin-left: -350px; }
.grid-c3-s9e6f .col-extra { width: 230px; margin-left: -100%; }
.grid-c3-s9e6e .main-wrap { margin-right: 600px; }
.grid-c3-s9e6e .col-sub { width: 350px; margin-left: -590px; }
.grid-c3-s9e6e .col-extra { width: 230px; margin-left: -230px; }
.grid-c3-s9e6d .main-wrap { margin-right: 600px; }
.grid-c3-s9e6d .col-sub { width: 350px; margin-left: -350px; }
.grid-c3-s9e6d .col-extra { width: 230px; margin-left: -590px; }
.grid-c3-s9e6c .main-wrap { margin-left: 600px; }
.grid-c3-s9e6c .col-sub { width: 350px; margin-left: -100%; }
.grid-c3-s9e6c .col-extra { width: 230px; margin-left: -100%; left: 360px; }
.grid-c3-s9e6b .main-wrap { margin-left: 600px; }
.grid-c3-s9e6b .col-sub { width: 350px; margin-left: -100%; left: 240px; }
.grid-c3-s9e6b .col-extra { width: 230px; margin-left: -100%; }

/* s8e8 */
.grid-c3-s8e8 .main-wrap { margin: 0 320px 0 320px; }
.grid-c3-s8e8 .col-sub { width: 310px; margin-left: -100%; }
.grid-c3-s8e8 .col-extra { width: 310px; margin-left: -310px; }

/***********************************************
 * Clearing
 ***********************************************/
.grid-c:after,
.grid-c2-s4:after, .grid-c2-s4f:after,
.grid-c2:after, .grid-c2f:after,
.grid-c2-s6:after, .grid-c2-s6f:after,
.grid-c2-s7:after, .grid-c2-s7f:after,
.grid-c2-s8:after, .grid-c2-s8f:after,
.grid-c2-s9:after, .grid-c2-s9f:after,
.grid-c2-s10:after, .grid-c2-s10f:after,
.grid-c2-s11:after, .grid-c2-s11f:after,
.grid-c2-s12:after, .grid-c2-s12f:after,
.grid-c3:after, .grid-c3f:after, .grid-c3e:after, .grid-c3d:after, .grid-c3c:after, .grid-c3b:after,
.grid-c3-s5e7:after, .grid-c3-s5e7f:after, .grid-c3-s5e7e:after, .grid-c3-s5e7d:after, .grid-c3-s5e7c:after, .grid-c3-s5e7b:after,
.grid-c3-s9e6:after, .grid-c3-s9e6f:after, .grid-c3-s9e6e:after, .grid-c3-s9e6d:after, .grid-c3-s9e6c:after, .grid-c3-s9e6b:after,
.grid-c3-s8e8:after,
.main-wrap:after, .col-sub:after, .col-extra:after {
	content: '\0020';
	display: block;
	height: 0;
	clear: both;
}
.grid-c,
.grid-c2-s4, .grid-c2-s4f,
.grid-c2, .grid-c2f,
.grid-c2-s6, .grid-c2-s6f,
.grid-c2-s7, .grid-c2-s7f,
.grid-c2-s8, .grid-c2-s8f,
.grid-c2-s9, .grid-c2-s9f,
.grid-c2-s10, .grid-c2-s10f,
.grid-c2-s11, .grid-c2-s11f,
.grid-c2-s12, .grid-c2-s12f,
.grid-c3, .grid-c3f, .grid-c3e, .grid-c3d, .grid-c3c, .grid-c3b,
.grid-c3-s5e7, .grid-c3-s5e7f, .grid-c3-s5e7e, .grid-c3-s5e7d, .grid-c3-s5e7c, .grid-c3-s5e7b,
.grid-c3-s9e6, .grid-c3-s9e6f, .grid-c3-s9e6e, .grid-c3-s9e6d, .grid-c3-s9e6c, .grid-c3-s9e6b,
.grid-c3-s8e8,
.main-wrap, .col-sub, .col-extra {
	zoom: 1; /* clearing float for ie */
}

/***********************************************
 * Misc
 ***********************************************/
/* bug fix: 当主栏没有内容时，在ff和chrome等浏览器下，布局不对 */
.col-main {
	min-height: 1px;
}

/* bug fix: 解决Chrome和Safari下选取文字时，背景区域不对的bug */
body:first-of-type .main-wrap {
    position: relative;
}

/**
 * 最开始，position: relative是加在所有.col-sub和.col-extra上的
 * 当时调整的原因是position: relative有时会导致ie6下的性能问题
 * 但后来经过研究，ie6下的性能问题实际上是因为没有hasLayout引起的
 * 其它问题暂时都是空穴来风，尚未考证
 *
 * 依旧采用下面的写法，是出于最小影响原理
 * 因为只有下面这些布局需要position: relative来实现
 */
.grid-c3c .col-extra, .grid-c3b .col-sub,
.grid-c3-s5e7c .col-extra, .grid-c3-s5e7b .col-sub,
.grid-c3-s9e6c .col-extra, .grid-c3-s9e6b .col-sub {
	position: relative;
}

/* EOF */