@charset "utf-8";

/*
*	Title: Vicuna: VegaCrystal
*	URI: http://vicuna.jp/
*	Last Modified: 2007-05-23
*	Author: wu
*
*	Hint:
*	common.cssからレイアウトに関するスタイルを抜き出したモジュール
*	[←★→]マークのついた指定を全て反転させることでカラムの左右入れ替えが可能
*
*	3-1.containers
*	3-2.[Sngle column]
*		3-2-1.div#utilities
*	3-3.[Double column]
*		3-3-1.div#main
*		3-3-2.div#utilities
*/


/*======================================

	3-1.Containers Layout
	
=======================================*/

body {
	margin: 0 20px; /* 左右余白 */
	text-align: center; /* for IE6 中央寄せ */
}

div#header,
div#content,
div#footer {
	margin: 0 auto; /* 中央寄せ */
	width: 100%;  /* 固定幅に変更可能　例: (800px | 60em) */
	min-width: 40em; /* 可変時の幅の最小値 */
	max-width: 70em; /* 可変時の幅の最大値 */
	text-align: left;
}

/*======================================

	3-2. [Sngle column]
	bodyにclass="single"がついた時のレイアウト
	
=======================================*/

body.single ul#flip1 {
	position: absolute;
	right: 0;
	top: 0;
}

body.single div#main ol.topicPath {
	margin-right: 7em;
}

/*--------------------------------------
	3-2-1. div#utilities
---------------------------------------*/

body.single div#utilities {
	margin-top: 1em;
}

body.single div#utilities dl.navi {
	margin-top: 0;
	display: inline; /* for WinIE */
	float: left;
	width: 320px;
}

body.single div#utilities dl.others {
	margin-top: 0;
	margin-left: 360px;
	padding-left: 10px;
	border-left: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

/*======================================

	3-3. [Double column] body.double 
	bodyにclass="double"がついた時のレイアウト
	[←★→]マークのついた指定を反転させることでカラムの位置入れ替えが可能
	
=======================================*/

/*--------------------------------------
	3-3-1. div#main
---------------------------------------*/

body.double div#main {
	float: left; /* [←★→] */
	width: 70%;
	border-right: 1px solid #eee; /* [←★→] */
	margin-right: -1px; /* [←★→] */
	border-bottom: 1px solid #eee;
}

/*--------------------------------------
	3-3-2. div#utilities
---------------------------------------*/

body.double div#utilities {
	padding-top: 0;
	float: right; /* [←★→] */
	clear: right; /* [←★→] */
	width: 30%;
}

body.double div#utilities dl {
	margin: 3px 5px 0.2em;
}