/* Default style */

* {margin:0; padding: 0;}
body {font: small/1.6 Verdana, Arial, lucida, helvetica, sans-serif; background: #fff; color: #333; text-align:center;}
* html body {font-size: x-small;}
p {margin-bottom: 0.2em;}
hr, #top {display: none;}
#url {font-size: 83%; text-align: right;}
#url a {color: #333; text-decoration: none;}
#url a:hover {text-decoration: underline;}
#wrap {width: 950px; margin: auto; text-align: left;}
#header {position: relative; width: 100%; margin-bottom: 12px;}
#header h1 {margin-left: 10px; font-size: 250%; font-weight: normal;}
#header h1 a {color: #999; text-decoration: none;}
#header h1 a b {display: block; float: left; font: bold 150% Times, 'Times New Roman', serif; color: #f0f; letter-spacing: -5px; margin-right: 7px; position: relative; top: 0.1em; cursor: pointer; cursor: hand;} 
#header h1 a span {position: relative; bottom: 1em; font-size: 40%; color: #999;}
* html #header h1 a b {margin-right: -1px;}
#header h2.slogan {position: relative; bottom: 0.9em; color: #666; font-weight: bold; font-size: 100%; }
#menu {position: absolute; right: 0; bottom: 0; width: 720px;}
#menu ul {display: table; list-style: none; width: 720px; text-align: center;}
#menu ul li {float: left; display: inline; width: 180px; padding-bottom: 5px; font-size: 112%; font-weight: bold; line-height: 220%;} 
#menu ul li a, #menu ul li a:active {display: block; width: 100%; color: #000; background: #eee; border: 2px solid #fff; text-decoration: underline;}
html>body #menu ul li a {width: auto;}
#menu ul li a:hover {text-decoration: none; color: #000; background: #fff;}
#menu ul li.fuchsia a:hover {color: #f0f;}
#menu ul li.red a:hover {color: #f00;}
#menu ul li.green a:hover {color: #080;}
#menu ul li.blue a:hover {color: #00f;}
#side {float: left;  margin-bottom: 10px; width: 230px; text-align: left;}
#side dl {display: block;}
#side dt {width: 205px; color: #000; background: #fcf; font-weight: bold; line-height: 220%; margin-bottom: 1px; padding-left: 10px; border-top: 2px solid #f6f; border-bottom: 2px solid #f6f; cursor: default;}
* html #side dt {width: 215px}
#side dd {width: 230px;}
#side a {display: block; position: relative; width: 100%; margin: 1px 15px 1px 0; padding-left: 15px; background: #eee; color: #000; border: 1px solid #eee; line-height: 200%; text-decoration: underline; white-space: nowrap;overflow: hidden;}
html>body #side a {width: 198px; outline: none;}
#side .mode {text-decoration: none; cursor: default;background: #eee url(arrow.png) right center no-repeat;}
#side a:hover, #side a.select {margin-right: 0; background: #fff; color: #000; text-decoration: none; border-color: #fff;}
#line {clear: both; margin: 1px 0 0.5em; width: 215px; line-height: 2px; height: 2px; overflow: hidden;}
#remark {width: 215px; font-size: 83%; text-align: center;} 
#content {float: right; width: 720px; position: relative;}
#demo {width: 720px; margin-bottom: 1em; position: relative; overflow: hidden;}
#demo a {cursor: default;}
#demoin {padding: 0 12px; height: 30em; border: 3px #f55 solid;}
* html #demoin {width: 100%; overfl\ow: auto;}
#drag {position: absolute; visibility: hidden; width: 3px; height: 30em; background: #f55; overflow: hidden; cursor: w-resize;}
#endDemo {display: block; position: absolute; right: 4px; top: 4px; width: 10px; height: 10px; background: #f55; color: #fff; font-size: 9px; line-height: 10px;text-decoration: none; text-align: center;}
#note {display: none; width: 720px; margin-bottom: 1em; font-size: 83%; text-align: center;}
#notein {padding: 0 35px;}
#info {width: 720px; text-align: justify; position: relative;}
#infoin {padding: 5px 35px 20px 35px; width: 650px;}
* html #infoin {width: 100%;}
#ldquo, #rdquo {position: absolute; font: bold 520%/100% Times, 'Times New Roman', serif; color: #f8f;}
#ldquo {left: 0; top: 0;}
#rdquo {right: 0; bottom: -0.5em;}
#info h2 {color: #f0f;}
#info .big {font-size: 150%; font-weight: normal;}
#info ol {margin-bottom: 0.2em;}
#info ol li {margin-left: 3em;}
#infoin .clear {clear: both; line-height: 1em; height: 1em;}
#note {margin-bottom: 0.5em;}
#note a, #info a {color: #f6f; text-decoration: underline;}
#note .hover a, #info .hover a {color: #c0c;}
#note a:hover, #info a:hover {color: #c0c; text-decoration: none;}
#footer {clear: both; width: 100%; padding: 5px 0; text-align: center; border-top: 1px solid #999;}
#footer.right {text-align: right;}
#footer a {display: inline; margin: 0 2px; padding: 2px 7px; background: #eee; color: #000; font-size: 83%; text-decoration: underline;}
* html #footer a {width: 1em;}
#footer a:hover {background: #fff; color: #f0f; text-decoration: none;}
fieldset {margin-bottom: 10px; padding: 3px 10px 7px 10px; text-align: right;}
legend {font-weight: bold; font-size: 83%; padding: 1px 5px;}
label {font-size: 83%;}
input {width: 180px; padding: 2px 5px; line-height: 110%; border: 1px solid #999; font-size: 83%;}
input.submit {text-align: center; width: 5em; font-weight: bold;}
/* Style for modalbox */
#overlay, #modalbox {position: fixed; display: none; left: 0; top: 0; width: 100%; height: 100%;}
#overlay {background: #666; z-index: 200;}
#modalbox {text-align: center; z-index: 201; overflow: auto;}
#dlg {margin: 5px auto; width: 600px; background: #fff; border: 3px double #333; position: relative;}
#dlg a {display: block; position: absolute; top: 0; right: 0; line-height: 100%;}
#dlg a img {border: none; border-left: 1px solid #678; border-bottom: 1px solid #678;}
* html #overlay, * html #modalbox {position: absolute;}

/* Style for print */  

@media print { 
#url,
#menu,
#side,
#info .left,
#footer,
#endDemo,
#drag,
#notein {display: none;}
#content {width: 720px; float: none;}
#wrap {width: 720px;}
#demoin {border: none; padding: 0;}
}


/* Media for Opera */

@media screen and (max-width: 980px) { 
#wrap {width: 720px;}
#menu {width: 540px;}
#menu ul {width: 540px;}
#menu ul li {width: 135px;}
#side {width: 720px;}
#side dl {float: left; margin-right: 22px;}
#side dl.last {margin: 0; width: 215px; overflow: hidden;}
#line {width: 720px;}
}