mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-18 02:39:56 +09:00
b3179d58d0
git-svn-id: http://xe-core.googlecode.com/svn/sandbox@4874 201d5d3c-b55e-5fd7-737f-ddc643e51545
391 lines
13 KiB
CSS
391 lines
13 KiB
CSS
@charset "utf-8";
|
|
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */
|
|
|
|
/* Float Clear */
|
|
.fClear { display:block; float:none; clear:both; margin:0; padding:0; width:0; height:0; overflow:hidden; font:0/0 Sans-serif; visibility:hidden; } /* Use it when you want to float clearing */
|
|
|
|
/* Container */
|
|
#container { position:relative; margin:0 auto; height:auto !important; } /* alignCenter = margin:0 auto | alignLeft = margin:0 | alignRight = margin:0 0 0 auto */
|
|
|
|
/* Header */
|
|
#header { }
|
|
|
|
/* Body */
|
|
#body { position:relative; }
|
|
#body:after { content:""; display:block; clear:both; }
|
|
|
|
/* Content */
|
|
#content { position:relative; }
|
|
#content .section { position:relative; }
|
|
|
|
/* Navigation */
|
|
#navigation { position:relative; }
|
|
#navigation .section { position:relative; }
|
|
|
|
/* Extra */
|
|
#extra { position:relative; }
|
|
#extra .section { position:relative; }
|
|
|
|
/* Footer */
|
|
#footer { position:relative; }
|
|
|
|
/* ---------- Common Display ---------- */
|
|
/* c = #content, n = #navigation, e = #extra */
|
|
.c1 #navigation,
|
|
.c2 #navigation,
|
|
.c3 #navigation,
|
|
.c1 #extra,
|
|
.c2 #extra,
|
|
.c3 #extra
|
|
.cn #extra,
|
|
.nc #extra { display:none; }
|
|
|
|
.cn #navigation,
|
|
.nc #navigation,
|
|
.ce #navigation,
|
|
.ec #navigation,
|
|
.ne #navigation,
|
|
.en #navigation,
|
|
.cne #navigation,
|
|
.ecn #navigation,
|
|
.nec #navigation,
|
|
.cen #navigation,
|
|
.nce #navigation,
|
|
.enc #navigation,
|
|
.cee #navigation,
|
|
.eec #navigation,
|
|
.ece #navigation,
|
|
.ce #extra,
|
|
.ec #extra,
|
|
.ne #extra,
|
|
.en #extra,
|
|
.cne #extra,
|
|
.ecn #extra,
|
|
.nec #extra,
|
|
.cen #extra,
|
|
.nce #extra,
|
|
.enc #extra,
|
|
.cee #extra,
|
|
.eec #extra,
|
|
.ece #extra { display:block; }
|
|
|
|
#extra .section{ display:none; }
|
|
.e0 #extra { display:none;}
|
|
.e1 #extra,
|
|
.e2 #extra,
|
|
.e3 #extra,
|
|
.e4 #extra,
|
|
.e5 #extra,
|
|
.e1 #extra .extra1,
|
|
.e2 #extra .extra1,
|
|
.e2 #extra .extra2,
|
|
.e3 #extra .extra1,
|
|
.e3 #extra .extra2,
|
|
.e3 #extra .extra3,
|
|
.e4 #extra .extra1,
|
|
.e4 #extra .extra2,
|
|
.e4 #extra .extra3,
|
|
.e4 #extra .extra4,
|
|
.e5 #extra .extra1,
|
|
.e5 #extra .extra2,
|
|
.e5 #extra .extra3,
|
|
.e5 #extra .extra4,
|
|
.e5 #extra .extra5,
|
|
.cee #extra .section,
|
|
.eec #extra .section,
|
|
.ece #extra .section { display:block;}
|
|
|
|
.nTop #navigation { display:block; }
|
|
|
|
.ne #navigation,
|
|
.ne #extra,
|
|
.ne #extra .section { float:left; }
|
|
.en #navigation,
|
|
.en #extra,
|
|
.en #extra .section { float:right; }
|
|
|
|
/* ---------- Fixed Layout Preset ---------- */
|
|
/* c = #content, n = #navigation, e = #extra */
|
|
|
|
/* Width */
|
|
.fixed #container { width:960px; }
|
|
.fixed #body { width:auto; }
|
|
.fixed #navigation,
|
|
.fixed #extra .section { width:200px; }
|
|
.fixed .c1 #content { width:100%; }
|
|
.fixed .c1 #navigation { width:300px; }
|
|
.fixed .c1 #extra { width:auto; }
|
|
.fixed .c1 #extra .section { width:300px; }
|
|
.fixed .c2 #content { width:740px; }
|
|
.fixed .c3 #content { width:520px;}
|
|
.fixed .cee #extra,
|
|
.fixed .eec #extra{ width:420px;}
|
|
.fixed .ece #extra { width:100%;}
|
|
|
|
/* Floating 1 Columns */
|
|
.fixed .c1 #content { clear:both; }
|
|
|
|
.fixed .ne #navigation,
|
|
.fixed .ne #extra .extra1 { margin-right:30px; }
|
|
|
|
.fixed .en #navigation,
|
|
.fixed .en #extra .extra1 { margin-left:30px; }
|
|
|
|
/* Floating 2 Columns */
|
|
.fixed .cn #content { float:left; }
|
|
.fixed .cn #navigation,
|
|
.fixed .cn #extra { float:right; }
|
|
|
|
.fixed .nc #content { float:right; }
|
|
.fixed .nc #navigation,
|
|
.fixed .nc #extra { float:left; }
|
|
|
|
.fixed .ce #content { float:left; }
|
|
.fixed .ce #navigation,
|
|
.fixed .ce #extra { float:right; *float:none; *left:20px; _left:17px; }
|
|
|
|
.fixed .ec #content { float:right; }
|
|
.fixed .ec #navigation,
|
|
.fixed .ec #extra { float:left; *float:none; }
|
|
|
|
/* Floating 3 Columns */
|
|
.fixed .cne #content { float:left; margin-right:20px; }
|
|
.fixed .cne #navigation { float:left; }
|
|
.fixed .cne #extra { float:right; }
|
|
|
|
.fixed .ecn #content { float:left; margin-right:-520px; left:220px; }
|
|
.fixed .ecn #navigation { float:right; }
|
|
.fixed .ecn #extra { float:left; }
|
|
|
|
.fixed .nec #content { float:right; }
|
|
.fixed .nec #navigation { float:left; margin-right:20px; }
|
|
.fixed .nec #extra { float:left; }
|
|
|
|
.fixed .cen #content { float:left; margin-right:20px; }
|
|
.fixed .cen #navigation { float:right; }
|
|
.fixed .cen #extra { float:left; }
|
|
|
|
.fixed .nce #content { float:left; margin-right:-520px; left:220px; }
|
|
.fixed .nce #navigation { float:left; }
|
|
.fixed .nce #extra { float:right; }
|
|
|
|
.fixed .enc #content { float:right; margin-left:20px; }
|
|
.fixed .enc #navigation { float:right; }
|
|
.fixed .enc #extra { float:left; }
|
|
|
|
.fixed .cee #content { float:left; _margin-right:-3px; }
|
|
.fixed .cee #extra { float:right; *float:none; *left:20px; }
|
|
.fixed .cee .section { float:left; }
|
|
.fixed .cee .extra1 { margin-right:20px; }
|
|
|
|
.fixed .eec #content { float:right; _margin-left:-3px; }
|
|
.fixed .eec #extra { float:left; *float:none; *left:0; }
|
|
.fixed .eec .section{ float:left;}
|
|
.fixed .eec .extra1{ margin-right:20px; }
|
|
|
|
.fixed .ece #content { float:left; margin-right:-100%; left:220px;}
|
|
.fixed .ece #extra { float:none; }
|
|
.fixed .ece .extra1{ float:left; }
|
|
.fixed .ece .extra2{ float:right; }
|
|
|
|
/* ---------- Liquid Layout Preset ---------- */
|
|
/* c = #content, n = #navigation, e = #extra */
|
|
|
|
/* Width */
|
|
.liquid #container { width:100%; }
|
|
.liquid #body { width:auto; }
|
|
.liquid .c1 #content { width:100%; }
|
|
.liquid .c1 #navigation { width:32%; }
|
|
.liquid .c1 #extra { width:66%; }
|
|
.liquid .c1 #extra .section { width:48.4%; }
|
|
.liquid .c2 #content { width:75%; }
|
|
.liquid .c2 #navigation,
|
|
.liquid .c2 #extra { width:23%; }
|
|
.liquid .c3 #content { width:56%; }
|
|
.liquid .c3 #navigation { width:20%; }
|
|
.liquid .c3 #extra { width:20%; }
|
|
.liquid .cee #extra,
|
|
.liquid .eec #extra { width:42%;}
|
|
.liquid .ece #extra { width:100%;}
|
|
.liquid .cee #extra .section,
|
|
.liquid .eec #extra .section{ width:48%; }
|
|
.liquid .ece #extra .section { width:20%; }
|
|
|
|
/* Floating 1 Columns */
|
|
.liquid .c1 #content { clear:both; }
|
|
|
|
.liquid .ne #navigation { margin-right:2%; }
|
|
.liquid .ne #extra .extra1 { float:left; }
|
|
.liquid .ne #extra .extra2 { float:right; }
|
|
|
|
.liquid .en #navigation { margin-left:2%; }
|
|
.liquid .en #extra .extra1 { float:right; }
|
|
.liquid .en #extra .extra2 { float:left; }
|
|
|
|
/* Floating 2 Columns */
|
|
.liquid .cn #content { float:left; }
|
|
.liquid .cn #navigation,
|
|
.liquid .cn #extra { float:right; }
|
|
|
|
.liquid .nc #content { float:right; }
|
|
.liquid .nc #navigation,
|
|
.liquid .nc #extra { float:left; }
|
|
|
|
.liquid .ce #content { float:left; _margin-right:-3px; }
|
|
.liquid .ce #navigation,
|
|
.liquid .ce #extra { float:right; *float:none; *left:2%; }
|
|
|
|
.liquid .ec #content { float:right; }
|
|
.liquid .ec #navigation,
|
|
.liquid .ec #extra { float:left; *float:none; }
|
|
|
|
/* Floating 3 Columns */
|
|
.liquid .cne #content { float:left; margin-right:2%; }
|
|
.liquid .cne #navigation { float:left; }
|
|
.liquid .cne #extra { float:right; }
|
|
|
|
.liquid .ecn #content { float:left; margin-right:-100%; left:22%; }
|
|
.liquid .ecn #navigation { float:right; }
|
|
.liquid .ecn #extra { float:left; }
|
|
|
|
.liquid .nec #content { float:right; }
|
|
.liquid .nec #navigation { float:left; margin-right:2%; }
|
|
.liquid .nec #extra { float:left; }
|
|
|
|
.liquid .cen #content { float:left; margin-right:2%; }
|
|
.liquid .cen #navigation { float:right; }
|
|
.liquid .cen #extra { float:left; }
|
|
|
|
.liquid .nce #content { float:left; margin-right:-100%; left:22%; }
|
|
.liquid .nce #navigation { float:left; }
|
|
.liquid .nce #extra { float:right; }
|
|
|
|
.liquid .enc #content { float:right; margin-left:2%; }
|
|
.liquid .enc #navigation { float:right; }
|
|
.liquid .enc #extra { float:left; }
|
|
|
|
.liquid .cee #content { float:left; _margin-right:-3px; }
|
|
.liquid .cee #extra { float:right; *float:none; *left:2%; }
|
|
.liquid .cee .extra1 { float:left; }
|
|
.liquid .cee .extra2 { float:right; }
|
|
|
|
.liquid .eec #content { float:right; _margin-left:-3px; }
|
|
.liquid .eec #extra { float:left; *float:none; *left:0; }
|
|
.liquid .eec .extra1{ float:left; }
|
|
.liquid .eec .extra2{ float:right; }
|
|
|
|
.liquid .ece #content { float:left; margin-right:-100%; left:22%;}
|
|
.liquid .ece #extra { float:none; }
|
|
.liquid .ece .extra1{ float:left; }
|
|
.liquid .ece .extra2{ float:right; }
|
|
|
|
/* ---------- Hybrid Layout Preset ---------- */
|
|
/* c = #content, n = #navigation, e = #extra */
|
|
|
|
/* Width */
|
|
.hybrid #container { width:100%; }
|
|
.hybrid #body { width:auto; }
|
|
.hybrid #content { width:100%; }
|
|
.hybrid #navigation { width:200px; }
|
|
.hybrid #extra { width:200px; }
|
|
.hybrid .c1 #navigation { width:300px; }
|
|
.hybrid .c1 #extra { width:auto; }
|
|
.hybrid .c1 #extra .section { width:300px; }
|
|
.hybrid .cee #extra,
|
|
.hybrid .eec #extra { width:420px;}
|
|
.hybrid .ece #extra { width:100%;}
|
|
.hybrid .cee #extra .section,
|
|
.hybrid .eec #extra .section,
|
|
.hybrid .ece #extra .section { width:200px; }
|
|
|
|
/* Floating 1 Columns */
|
|
.hybrid .c1 #content { clear:both; }
|
|
|
|
.hybrid .ne #navigation,
|
|
.hybrid .ne #extra .extra1 { margin-right:30px; }
|
|
|
|
.hybrid .en #navigation,
|
|
.hybrid .en #extra .extra1 { margin-left:30px; }
|
|
|
|
/* Floating 2 Columns */
|
|
.hybrid .cn #body { margin-right:220px; }
|
|
.hybrid .cn #content { float:left; margin-right:-100%; }
|
|
.hybrid .cn #navigation,
|
|
.hybrid .cn #extra { float:right; left:220px; clear:right; }
|
|
|
|
.hybrid .nc #body { margin-left:220px; }
|
|
.hybrid .nc #content { float:right; margin-left:-100%; *margin-left:0; }
|
|
.hybrid .nc #navigation,
|
|
.hybrid .nc #extra { float:left; left:-220px; clear:left; }
|
|
|
|
.hybrid .ce #body { margin-right:220px; }
|
|
.hybrid .ce #content { float:left; margin-right:-100%; }
|
|
.hybrid .ce #navigation,
|
|
.hybrid .ce #extra { float:right; left:220px; clear:right; *float:none; *left:100%; *margin-left:20px; *margin-right:-200px; }
|
|
.hybrid .ce #navigation { width:100% !important; right:-220px; }
|
|
|
|
.hybrid .ec #body { margin-left:220px; }
|
|
.hybrid .ec #content { float:right; margin-left:-100%; _float:left; _margin-left:0; _margin-right:-100%; }
|
|
.hybrid .ec #navigation,
|
|
.hybrid .ec #extra { float:left; left:-220px; clear:left; *float:none; *margin-right:-200px; }
|
|
.hybrid .ec #navigation { width:100% !important; }
|
|
|
|
/* Floating 3 Columns */
|
|
.hybrid .cne #body { margin-right:440px; }
|
|
.hybrid .cne #content { float:left; }
|
|
.hybrid .cne #navigation { float:left; margin-right:-200px; left:20px; }
|
|
.hybrid .cne #extra { float:right; margin-left:-200px; left:440px; }
|
|
|
|
.hybrid .ecn #body { margin-left:220px; margin-right:220px; }
|
|
.hybrid .ecn #content { float:left; margin-right:-100%; }
|
|
.hybrid .ecn #navigation { float:right; margin-left:-200px; left:220px; }
|
|
.hybrid .ecn #extra { float:left; left:-220px; }
|
|
|
|
.hybrid .nec #body { margin-left:440px; }
|
|
.hybrid .nec #content { float:right; }
|
|
.hybrid .nec #navigation { float:left; margin-right:-200px; left:-440px; }
|
|
.hybrid .nec #extra { float:left; margin-right:-200px; left:-220px; }
|
|
|
|
.hybrid .cen #body { margin-right:440px; }
|
|
.hybrid .cen #content { float:left; }
|
|
.hybrid .cen #navigation { float:right; margin-left:-200px; left:440px; }
|
|
.hybrid .cen #extra { float:left; margin-right:-200px; left:20px; }
|
|
|
|
.hybrid .nce #body { margin-left:220px; margin-right:220px; }
|
|
.hybrid .nce #content { float:left; margin-right:-100%; }
|
|
.hybrid .nce #navigation { float:left; margin-right:-200px; left:-220px; }
|
|
.hybrid .nce #extra { float:right; right:-220px; }
|
|
|
|
.hybrid .enc #body { margin-left:440px; }
|
|
.hybrid .enc #content { float:right; }
|
|
.hybrid .enc #navigation { float:right; margin-left:-200px; left:-20px; }
|
|
.hybrid .enc #extra { float:left; margin-right:-200px; left:-440px; }
|
|
|
|
.hybrid .cee #body { margin-right:440px;}
|
|
.hybrid .cee #content { float:left; margin-right:-100%; }
|
|
.hybrid .cee #navigation { right:-440px;}
|
|
.hybrid .cee #extra { float:right; left:440px; *float:none; *left:100%; *margin-left:20px; *margin-right:-420px; }
|
|
.hybrid .cee .extra1 { float:left; }
|
|
.hybrid .cee .extra2 { float:right; }
|
|
|
|
.hybrid .eec #body { margin-left:440px;}
|
|
.hybrid .eec #content { float:left; margin-right:-100%; }
|
|
.hybrid .eec #extra { float:left; left:-440px; *float:none; *margin-right:-420px; }
|
|
.hybrid .eec .section{ float:left;}
|
|
.hybrid .eec .extra1{ float:left; }
|
|
.hybrid .eec .extra2{ float:right; }
|
|
|
|
.hybrid .ece #body { margin:0 220px; }
|
|
.hybrid .ece #content { float:left; margin-right:-100%; }
|
|
.hybrid .ece #navigation { right:-220px; }
|
|
.hybrid .ece #extra { float:none; }
|
|
.hybrid .ece .extra1{ float:left; left:-220px; margin-right:-200px; }
|
|
.hybrid .ece .extra2{ float:right; right:-220px; margin-left:-200px; }
|
|
|
|
/* Navigation Top */
|
|
.nTop #navigation { position:absolute; float:right !important; width:auto !important; margin:0 !important; *clear:none !important; overflow:visible; top:-4em; left:auto !important; right:0; }
|
|
.nTop #navigation .section { position:absolute; float:right; top:0; right:0; width:auto; margin:0; padding:0; }
|
|
.nTop #navigation .section:after { content:""; display:block; clear:both; width:0; height:0; overflow:hidden; visibility:hidden; font:0/0 Sans-serif;}
|
|
.nTop #navigation h2 { position:absolute; left:0; top:0; width:0; height:0; border:0; overflow:hidden; visibility:hidden; font:0/0 Sans-serif; }
|
|
.nTop #navigation ul.nav { position:relative; display:block; float:right; margin:0; padding:0; list-style:none; overflow:hidden; text-align:right; white-space:nowrap; }
|
|
.nTop #navigation ul.nav li { position:relative; left:-1px; display:inline; white-space:nowrap; border-left:1px solid #ccc; padding-left:5px; }
|