@charset "utf-8";
/* NHN > UIT Center > Open UI Technology Team > Kim Taegon(gonom9@nhncorp.com) */

/* toolbar */
#toolbar { position:relative; z-index:1000; background:url(../images/bgMenu.gif) repeat-x 0 0; font-size:12px; height:35px; clear:both; }
#toolbar *{ margin:0; padding:0;}
#toolbar h1 { float:left; color:#fff; padding:10px 20px; font-size:12px;}
#toolbar .tb-btn-active { font-weight:bold; }
#toolbar .tb-menu-item-hover { color:white; background-color:navy; }
#toolbar .tb-menu-item-selected { color:white; background-color:green; }

#faceoffSelector { border:2px dotted #ff6600; }

#smartmenu {  position:absolute; top:10px; right:10px; margin:0; padding:0; font-size:12px; color:#fff; white-space:nowrap;}
#smartmenu li { display:none; list-style:none; font-weight:bold; }
#smartmenu li.active{ display:block;}
#smartmenu li dl{ margin:0; padding:0; display:inline;}
#smartmenu li dt,
#smartmenu li dd{ display:inline;}
#smartmenu li dt{ color:#ccc;}
#smartmenu li dd button{ background-color:#000; border:0; font-size:12px; font-family:Tahoma; font-weight:normal; color:#fff; cursor:pointer; border:1px solid #888; }
#layout-preview { display:none; width:120px; left:0px; right:0px; }

/* widgetMenu */
#toolbar .widgetMenu{ height:35px; margin:0; padding:0; font-size:12px; line-height:1.2; background:url(../images/bgMenu.gif) repeat-x 0 0;}
#toolbar .widgetMenu ul.widgetMenuList{ margin:0; padding:0; height:35px; float:left; }
#toolbar .widgetMenu ul.widgetMenuList li ul{ display:none; position:absolute; top:35px; left:0; height:auto; padding:10px 15px; background:#595959; border:1px solid #444;}
#toolbar .widgetMenu ul.widgetMenuList li.active ul{ display:block;}
#toolbar .widgetMenu ul.widgetMenuList.aCenter{ margin-left:auto; margin-right:auto;}
#toolbar .widgetMenu ul.widgetMenuList.aLeft{ margin-right:auto;}
#toolbar .widgetMenu ul.widgetMenuList.aRight{ margin-left:auto;}
#toolbar .widgetMenu li{ position:relative; padding-right:3px; float:left; list-style:none; background:url(../images/bgMenu.gif) no-repeat right -40px; white-space:nowrap;}
#toolbar .widgetMenu li button{ position:relative; float:left; height:35px; color:#fff !important; text-decoration:none !important; cursor:pointer; background-color:transparent; border:0; font-weight:bold; font-size:12px; font-family:Tahoma;}
#toolbar .widgetMenu li button span{ padding:0 15px;}
#toolbar .widgetMenu li.first button{ background:url(../images/bgMenu.gif) no-repeat left -40px; color:#f00 !important;}
#toolbar .widgetMenu li.active{ margin-left:-2px; background:url(../images/bgMenu.gif) no-repeat right -80px;}
#toolbar .widgetMenu li.active button{ font-weight:bold; color:#ff0 !important; background:url(../images/bgMenu.gif) no-repeat left -80px;}
#toolbar .widgetMenu li.active li{ float:none; background:none;}
#toolbar .widgetMenu li.active li.active{ margin:0;}
#toolbar .widgetMenu li li{ background:none; display:block !important; clear:both !important;}
#toolbar .widgetMenu li li.first{ background:none;}
#toolbar .widgetMenu li.active li.first{ padding-top:14px; background:url(../images/bgMenu.gif) no-repeat 30px top;}
#toolbar .widgetMenu li li button{ background:none; height:auto; font-weight:normal; text-align:left; float:none; display:block;}
#toolbar .widgetMenu li.active li button{ display:block; padding:0; float:none; height:auto; font-weight:normal; color:#fff !important; background:none; font-weight:normal;}
#toolbar .widgetMenu li.active li.active button{ color:#ff0 !important;}

/* preference dialog */
#propertyDialog { position:absolute; border:1px solid silver; background-color:white; padding:15px 20px; z-index:110; -moz-border-radius:5px; -webkit-border-radius:5px; margin:0 auto; display:none; width:250px; left:20px; top:60px;}
#propertyDialog fieldset{ border:1px dotted #ccc; padding:5px 10px; margin:0 0 10px 0; white-space:nowrap;}
#propertyDialog legend{ font-weight:bold; background-color:#fff; padding:0 5px; }
#propertyDialog label{ cursor:default;}
#propertyDialog .more { display:none;  margin:0; padding:0 0 0 10px; border-left:2px solid #eee;}
#propertyDialog .visible-more .more { display:block; }
#propertyDialog .visible-more .inputall { display:none; }
#propertyDialog .buttonArea{ text-align:center;}
#propertyDialog button{ cursor:pointer;}
.overlay { background-color:black; opacity:0.75; position:absolute; z-index:100; display:none; }

/* layout preview */

/* demoXe */
#demoXe { position:absolute; background:#fff; border:2px solid #ddd; padding:5px; width:100px; display:none; }
#demoXe * { margin:0; padding:0; font-size:0; line-height:0; }

/* Container + Header + Body + Footer */
#demoContainer { position:relative; }
#demoHeader { position:relative; height:10px; *zoom:1;
background:#ddd; margin-bottom:5px; }
#demoHeader:after { content:""; display:block; clear:both; }
#demoBody { position:relative; *zoom:1;
margin-bottom:5px; }
#demoBody:after { content:""; display:block; clear:both; }
#demoContent { position:relative; height:40px; text-align:justify; background:#ddd; }
#demoFooter { position:relative; height:10px; *zoom:1;
background:#ddd; }
#demoFooter address { text-align:center; }

/* Layout Width */
.demoFixed #demoContainer { width:100px; margin-left:auto; margin-right:auto; }
.demoLiquid #demoContainer { width:90%; margin-left:auto; margin-right:auto; }
.demoHybrid #demoContainer { width:90%; margin-left:auto; margin-right:auto; }

/* Align Layout */
.demoALeft #demoContainer { margin-left:0; }
.demoARight #demoContainer { margin-right:0; }

/* Extension */
.demoExtension,
.demoSection { position:relative; }
#demoBody .demoExtension { position:relative; display:none; height:40px; background:#ddd; }
#demoBody #demoContent { width:100%; height:40px; font-size:small; }
.demoExtension .demoSection { }

/* Layout Color */
.demoLiquid #demoHeader,
.demoLiquid #demoFooter,
.demoLiquid #demoContent,
.demoLiquid #demoBody .demoExtension { background:#999; }
.demoHybrid #demoHeader,
.demoHybrid #demoFooter,
.demoHybrid #demoContent { background:#999; }

/* ----- Fixed 2 Column Layout ----- */
.demoFixed .demoCE #demoBody .demoE1,
.demoFixed .demoEC #demoBody .demoE1 { width:15px; }
.demoFixed .demoCE #demoBody #demoContent,
.demoFixed .demoEC #demoBody #demoContent { width:80px; }
.demoFixed .demoCE #demoBody #demoContent { float:left; }
.demoFixed .demoEC #demoBody #demoContent { float:right; }
.demoFixed .demoCE #demoBody .demoE1,
.demoFixed .demoEC #demoBody .demoE1 { display:block; }
.demoFixed .demoCE #demoBody .demoE1 { float:right; clear:right; }
.demoFixed .demoEC #demoBody .demoE1 { float:left; clear:left; }

/* ----- Liquid 2 Column Layout ----- */
.demoLiquid .demoCE #demoBody .demoE1,
.demoLiquid .demoEC #demoBody .demoE1 { width:15%; }
.demoLiquid .demoCE #demoBody #demoContent,
.demoLiquid .demoEC #demoBody #demoContent { width:80%; }
.demoLiquid .demoCE #demoBody #demoContent { float:left; }
.demoLiquid .demoEC #demoBody #demoContent { float:right; }
.demoLiquid .demoCE #demoBody .demoE1,
.demoLiquid .demoEC #demoBody .demoE1 { display:block; }
.demoLiquid .demoCE #demoBody .demoE1 { float:right; clear:right; }
.demoLiquid .demoEC #demoBody .demoE1 { float:left; clear:left; }

/* ----- Hybrid 2 Column Layout ----- */
.demoHybrid .demoCE #demoBody { padding-right:20px; }
.demoHybrid .demoEC #demoBody { padding-left:20px; }
.demoHybrid .demoCE #demoBody .demoE1,
.demoHybrid .demoEC #demoBody .demoE1 { width:15px; }
.demoHybrid .demoCE #demoBody #demoContent { float:left; }
.demoHybrid .demoEC #demoBody #demoContent { float:right; }
.demoHybrid .demoCE #demoBody .demoE1,
.demoHybrid .demoEC #demoBody .demoE1 { display:block; }
.demoHybrid .demoCE #demoBody .demoE1 { float:right; clear:right; margin-left:-15px; right:-20px; }
.demoHybrid .demoEC #demoBody .demoE1 { float:left; clear:left; margin-right:-15px; left:-20px; }

/* ----- Fixed 3 Column Layout ----- */
.demoFixed .demoCEE #demoBody .demoE1,
.demoFixed .demoCEE #demoBody .demoE2,
.demoFixed .demoECE #demoBody .demoE1,
.demoFixed .demoECE #demoBody .demoE2,
.demoFixed .demoEEC #demoBody .demoE1,
.demoFixed .demoEEC #demoBody .demoE2 { display:block; width:15px; }
.demoFixed .demoCEE #demoBody #demoContent,
.demoFixed .demoECE #demoBody #demoContent,
.demoFixed .demoEEC #demoBody #demoContent { width:60px; }
.demoFixed .demoCEE #demoBody #demoContent { float:left; margin-right:5px; }
.demoFixed .demoECE #demoBody #demoContent { float:left; margin-right:-100%; left:20px; }
.demoFixed .demoEEC #demoBody #demoContent { float:right; }
.demoFixed .demoECE #demoBody .demoE1,
.demoFixed .demoEEC #demoBody .demoE1 { float:left; margin-right:5px; }
.demoFixed .demoCEE #demoBody .demoE1,
.demoFixed .demoEEC #demoBody .demoE2 { float:left; }
.demoFixed .demoCEE #demoBody .demoE2,
.demoFixed .demoECE #demoBody .demoE2 { float:right; }

/* ----- Liquid 3 Column Layout ----- */
.demoLiquid .demoCEE #demoBody .demoE1,
.demoLiquid .demoCEE #demoBody .demoE2,
.demoLiquid .demoECE #demoBody .demoE1,
.demoLiquid .demoECE #demoBody .demoE2,
.demoLiquid .demoEEC #demoBody .demoE1,
.demoLiquid .demoEEC #demoBody .demoE2 { display:block; width:15%; }
.demoLiquid .demoCEE #demoBody #demoContent,
.demoLiquid .demoECE #demoBody #demoContent,
.demoLiquid .demoEEC #demoBody #demoContent { width:60%; }
.demoLiquid .demoCEE #demoBody #demoContent { float:left; margin-right:5%; }
.demoLiquid .demoECE #demoBody #demoContent { float:left; margin-right:-100%; left:20%; }
.demoLiquid .demoEEC #demoBody #demoContent { float:right; }
.demoLiquid .demoECE #demoBody .demoE1,
.demoLiquid .demoEEC #demoBody .demoE1 { float:left; margin-right:5%; }
.demoLiquid .demoCEE #demoBody .demoE1,
.demoLiquid .demoEEC #demoBody .demoE2 { float:left; }
.demoLiquid .demoCEE #demoBody .demoE2,
.demoLiquid .demoECE #demoBody .demoE2 { float:right; }

/* ----- Hybrid 3 Column Layout ----- */
.demoHybrid .demoCEE #demoBody .demoE1,
.demoHybrid .demoCEE #demoBody .demoE2,
.demoHybrid .demoECE #demoBody .demoE1,
.demoHybrid .demoECE #demoBody .demoE2,
.demoHybrid .demoEEC #demoBody .demoE1,
.demoHybrid .demoEEC #demoBody .demoE2 { display:block; width:15px; }
.demoHybrid .demoCEE #demoBody { padding-right:40px; }
.demoHybrid .demoECE #demoBody { padding-left:20px; padding-right:20px; }
.demoHybrid .demoEEC #demoBody { padding-left:40px; }
.demoHybrid .demoCEE #demoBody #demoContent,
.demoHybrid .demoECE #demoBody #demoContent,
.demoHybrid .demoEEC #demoBody #demoContent { width:100%; }
.demoHybrid .demoCEE #demoBody #demoContent,
.demoHybrid .demoECE #demoBody #demoContent { float:left; margin-right:-100%; }
.demoHybrid .demoEEC #demoBody #demoContent { float:right; }
.demoHybrid .demoECE #demoBody .demoE1,
.demoHybrid .demoEEC #demoBody .demoE2 { float:left; left:-20px; margin-right:-20px; }
.demoHybrid .demoEEC #demoBody .demoE1 { float:left; left:-40px; margin-right:-20px; }
.demoHybrid .demoCEE #demoBody .demoE1,
.demoHybrid .demoECE #demoBody .demoE2 { float:right; left:20px; margin-left:-15px; }
.demoHybrid .demoCEE #demoBody .demoE2 { float:right; left:40px; margin-left:-15px; }

.aboutFaceOff { background-color:#EEE; color:#000; padding:20px; }
.aboutFaceOff h3 { padding:0; margin:0; font-size:14px; font-weight:bold; text-decoration:underline; margin-bottom:10px; }
.aboutFaceOff p,
.aboutFaceOff li { color:#666; }

fieldset.hideOption { float:left; border:0; margin:0; padding:0; }
fieldset.hideOption label { margin:10px 10px 0 10px !important; *margin-top:7px; font-family:tahoma; color:#fff !important; display:block; float:left;}