@charset "UTF-8"; /*--------------------------- - Title: Layout Module - Author: http://vicuna.jp/ - Modified by: YOUR NAME - Last modify: 2009.0308 - Licence: MIT Licence ---------------------------*/ body { margin: 0 8px; text-align: center; } div#header, div#content, div#footer { /*width: 95%; (60%~ | 600px~ | 60em~) etc. min-width: 600px; max-width: 1000px;*/ width: 1096px /*1060px*/; margin: 0 auto; position: relative; text-align: left; } /*======================================== Multi Column Layout - Double sidebar R ┏━━┓┏┓┏┓ ┃━━┃┃┃┃┃ ┗━━┛┗┛┗┛ This blog is using this layout (2011-08-22) ========================================*/ body.multi2 div#main { margin-right: -1px; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; float: left; width: 601px/*565px*/; } /* Utilities ---------------*/ body.multi2 div#utilities { margin-right: 20px; float: right; clear: right; width: 475px; } body.multi2 div#utilities dl.navi { margin: 0; padding: 0; float: left; width: 175px; } body.multi2 div#utilities dl.navi dt, body.multi2 div#utilities dl.navi dd { margin-right: 0; margin-left: 0; } body.multi2 div#utilities div.others { margin: 10; padding: 0; float: right; clear: right; width: 300px; } /*======================================== Single Column Layout ┏━━━┓ ┃━━━┃ ┣━┳━┫ ┗━┻━┛ ========================================*/ body.single h1 { border-bottom: none; } body.individual div.entry { margin-top: 0; } /* Utilities ---------------*/ body.single div#utilities { margin: 10px 10px; } body.single div#utilities dl { margin: 0; } body.single div#utilities dl.navi { margin-left: 2%; border: 1px solid #eee; float: left; width: 47%; display: inline; /* for IE6 */ } body.single div#utilities dl.others { margin-right: 2%; border: 1px solid #eee; float: right; clear: right; width: 47%; display: inline; /* for IE6 */ } body.single div#utilities ul.thumb li { width: 20%; } /* clearfix */ body.single div#utilities { _height: 1px; min-height: 1px; /*¥*//*/ height: 1px; overflow: hidden; /**/ } body.single div#utilities:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*======================================== Double Column Layout - Sidebar on right ┏━━━┓┏┓ ┃━━━┃┃┃ ┗━━━┛┗┛ ========================================*/ body.double div#main { width: 75%; float: left; margin-right: -1px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; } /* Utilities ---------------*/ body.double div#utilities { width: 25%; float: left; clear: right; } /*======================================== Double Column Layout - Sidebar on left ┏┓┏━━━┓ ┃┃┃━━━┃ ┗┛┗━━━┛ ========================================*/ body.double-l div#main { width: 75%; float: right; margin-left: -1px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; } /* Utilities ---------------*/ body.double-l div#utilities { width: 25%; float: right; clear: left; } /*======================================== Multi Column Layout - Wing ! Negative Margin Layout ┏┓┏━━┓┏┓ ┃┃┃━━┃┃┃ ┗┛┗━━┛┗┛ ========================================*/ 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 p.topicPath, body.multi div#main ul#flip1, body.multi div#main div.entry, body.multi div#main p.archives, body.multi div#main div.freeSpace { margin-left: 210px; margin-right: 210px; } body.multi div#main h1 { margin-left: 180px; margin-right: 180px; } /* Utilities ---------------*/ body.multi div#utilities { float: right; clear: right; width: 180px; } body.multi div#utilities 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#utilities dl.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 L ┏┓┏┓┏━━┓ ┃┃┃┃┃━━┃ ┗┛┗┛┗━━┛ ========================================*/ body.multi2-l div#main { margin-left: -1px; border-left: 1px solid #eee; border-bottom: 1px solid #eee; float: right; width: 55%; } /* Utilities ---------------*/ body.multi2-l div#utilities { float: left; clear: left; width: 45%; } body.multi2-l div#utilities dl.navi { margin-top: 0; float: left; width: 50%; } body.multi2-l div#utilities dl.navi dt, body.multi2-l div#utilities dl.navi dd { margin-right: 0; } body.multi2-l div#utilities dl.others { margin-top: 0; float: left; width: 50%; clear: right; _width: auto; /* for IE6 */ } /*======================================== Eye Catch ========================================*/ /* Header - ---------------*/ body.eye-h div#header { height: 180px; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; } body.eye-h div#header p.siteName { margin: 0; position: absolute; top: 55px; left: 30px; } body.eye-h div#header p.description { margin: 0; position: absolute; top: 80px; left: 30px; } body.eye-h ul#globalNavi { width: 100%; position: absolute; left: 0; bottom: 0; } /* Header Banner - ---------------*/ body.eye-hb div#header { padding-top: 0; } body.eye-hb div#header p.siteName { margin: 0; } body.eye-hb div#header p.siteName a { height: 180px; display: block; text-indent: -9999px; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; overflow: auto; } body.eye-hb div#header p.description { display: none; } /* Content - ---------------*/ body.eye-c div#content { padding-top: 180px; border-top: none; background-image: url(images/eyecatch/image1.png); background-repeat: no-repeat; } body.eye-c div#utilities dl.navi { top: auto; } /* Main - ---------------*/ body.eye-m div#content { 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#content { background-position: 180px 0; } /* ---------------*/ body.set2 div#utilities { position: absolute; top: 0; right: 0; } body.set2 div#utilities dl.navi { float: right; background-color: #fff; } body.set2 div#utilities dl.navi dt, body.set2 div#utilities dl.navi dd { margin-right: 5px; } body.set2 div#utilities dl.others { margin-top: 180px; float: left; clear: left; } body.set2 div#utilities dl.others dt, body.set2 div#utilities dl.others dd { margin-right: 0; } /*======================================== Others ========================================*/ /* Navi on top ---------------*/ body.gt div#header { padding-top: 30px; } body.gt ul#globalNavi { width: 100%; position: absolute; top: 0; left: 0; } /* No Centering - ---------------*/ body.al { margin: 0; text-align: left; } body.al div#header, body.al div#content, body.al div#footer { margin-left: 0; margin-right: 0; } /* Fixed 800px - ---------------*/ body.f800 div#header, body.f800 div#content, body.f800 div#footer { width: 800px; } /* Fixed 850px - ---------------*/ body.f850 div#header, body.f850 div#content, body.f850 div#footer { width: 850px; } /* Fixed 900px - ---------------*/ body.f900 div#header, body.f900 div#content, body.f900 div#footer { width: 900px; } /* Fixed 950px - ---------------*/ body.f950 div#header, body.f950 div#content, body.f950 div#footer { width: 950px; } /* Fixed 1000px - ---------------*/ body.f1000 div#header, body.f1000 div#content, body.f1000 div#footer { width: 1000px; } /* For this blog only"> ---------------*/ div#topSitemap001{ float: left; width: 48%; } div#topSitemap002{ float: right; width: 48%; }