@charset "UTF-8"; /** * Layouts CSS * * Layout: single, double, double-wt, double-tw, multi, multi-wtt, multi-ttw * Eye cach: eye-h, eye-m, eye-c * Special: multi eye-c spset1, multi-wtt eye-c spset2 * Fixed width: f800, f850, f900, f950, f1000 * Other: mt, al */ body { background-color: #fff; text-align: center; } div.inner { width: 95%; min-width: 600px; max-width: 1000px; margin: 0 auto; position: relative; text-align: left; } /* ==================== Single Column Layout ==================== */ body.single div#main {} /* Side ---------------*/ body.single div#side { margin: 10px 10px; } body.single div#side dl, body.single div#side ul { margin: 0; } body.single div#side dl.navi { margin-left: 2%; border: 1px solid #eee; float: left; width: 47%; display: inline; /* for IE6 */ } body.single div#side ul.others { margin-right: 2%; border: 1px solid #eee; float: right; clear: right; width: 47%; display: inline; /* for IE6 */ } /* clearfix */ body.single div#side { _height: 1px; min-height: 1px; /*¥*//*/ height: 1px; overflow: hidden; /**/ } body.single div#side:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /* ==================== Double Column Layout ==================== */ body.double div#main { width: 50%; float: left; margin-right: -1px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; } /* Side ---------------*/ body.double div#side { width: 50%; float: left; clear: right; } /* ==================== Double Column Layout - Sidebar on right ==================== */ body.double-wt div#main { width: 75%; float: left; margin-right: -1px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; } /* Side ---------------*/ body.double-wt div#side { width: 25%; float: left; clear: right; } /* ==================== Double Column Layout - Sidebar on left ==================== */ body.double-tw div#main { width: 75%; float: right; margin-left: -1px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; } /* Side ---------------*/ body.double-tw div#side { width: 25%; float: right; clear: left; } /* ==================== Multi Column Layout - Wing ==================== */ body.multi div#main { margin-right: -180px; float: left; width: 100%; background-position: 180px 0; /* for body.eye-c */ } body.multi div#main > * { margin-left: 210px; margin-right: 210px; } body.multi div#main h1, body.multi div#main p#topicPath, body.multi div#main div.box { margin-left: 210px; margin-right: 210px; } /* Side ---------------*/ body.multi divside { float: right; clear: right; width: 180px; } body.multi div#side dl.navi { margin: 0; border-right: 1px solid #eee; border-bottom: 1px solid #eee; width: 180px; position: absolute; top: 0; left: 0; background-color: #fff; } body.multi div#side ul.others { margin-top: 0; padding: 1px 0 5px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; background-color: #fff; } /* ==================== Multi Column Layout - Double sidebar Right ==================== */ body.multi-wtt div#main { margin-right: -1px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; float: left; width: 55%; } /* Side ---------------*/ body.multi-wtt div#side { float: right; clear: right; width: 45%; } body.multi-wtt div#side dl.navi { margin: 0; float: left; width: 50%; } body.multi-wtt div#side dl.navi dt, body.multi-wtt div#side dl.navi dd { margin-right: 0; } body.multi-wtt div#side ul.others { margin: 0; float: left; clear: right; width: 50%; _width: auto; /* for IE6 */ } /* ==================== Multi Column Layout - Double sidebar Left ==================== */ body.multi-ttw div#main { margin-left: -1px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; float: right; width: 55%; } /* Side ---------------*/ body.multi-ttw div#side { float: left; clear: left; width: 45%; } body.multi-ttw div#side dl.navi { margin-top: 0; float: left; width: 50%; } body.multi-ttw div#side dl.navi dt, body.multi-ttw div#side dl.navi dd { margin-right: 0; } body.multi-ttw div#side ul.others { margin-top: 0; float: left; width: 50%; clear: right; _width: auto; /* for IE6 */ } /* ==================== Eye Catch ==================== */ /* Header - ---------------*/ body.eye-h div#headerInner { height: 180px; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; } body.eye-h div#headerInner p#siteName { margin: 0; position: absolute; top: 50px; left: 40px; } body.eye-h div#headerInner p#siteName a { color: #fff; } body.eye-h div#headerInner p#description { margin: 0; position: absolute; top: 75px; left: 40px; color: #fff; } body.eye-h ul#globalMenu { width: 100%; position: absolute; left: 0; bottom: 0; } /* Content - ---------------*/ body.eye-c div#contentInner { padding-top: 180px; border-top: none; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; } body.eye-c div#side dl.navi { top: auto; } /* Main - ---------------*/ body.eye-m div#contentInner { border-top: none; } body.eye-m div#main { padding-top: 180px; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; } /* ==================== Special Layout set ==================== */ /* ---------------*/ body.set1 div#utilities dl.navi { top: 0; } body.set1 div#contentInner { background-position: 180px 0; } /* ---------------*/ body.set2 div#side { position: absolute; top: 0; right: 0; } body.set2 div#side dl.navi { float: right; background-color: #fff; } body.set2 div#side dl.navi dt, body.set2 div#side dl.navi dd { margin-right: 5px; } body.set2 div#side ul.others { margin-top: 180px; float: left; clear: left; } body.set2 div#side ul.others dt, body.set2 div#side ul.others dd { margin-right: 0; } /* ==================== Others ==================== */ /* Menu on top ---------------*/ body.mt div#header { padding-top: 30px; background-position: left bottom; } body.mt ul#globalMenu { width: 100%; position: absolute; top: 0; left: 0; bottom: auto; } /* No Centering - ---------------*/ body.al { margin: 0; text-align: left; } body.al div.inner { margin-left: 0; margin-right: 0; } /* Fixed 800px - ---------------*/ body.f800 div.inner { width: 800px; } /* Fixed 850px - ---------------*/ body.f850 div.inner { width: 850px; } /* Fixed 900px - ---------------*/ body.f900 div.inner { width: 900px; } /* Fixed 950px - ---------------*/ body.f950 div.inner { width: 950px; } /* Fixed 1000px - ---------------*/ body.f1000 div.inner { width: 1000px; }