@charset "UTF-8";

/* For CSS Samples */
.css-sample { margin: 14px 16px 18px 16px; padding: 15px; }
.css-sample p { margin: 3px 0; padding: 5px; }
.sample-border { border: 1px solid #ccc; }
.sample1-1 { border: 1px solid #ccc; color: #f00; background: transparent; }
.sample1-2 { background: #808080; color: #fff; }
.sample1-3 { background: #808080; color: #fff; font-size: 200%; font-weight: bold; }
.sample2-1-red { color: #f00; background: transparent; }
.sample2-1-blue { color: #00f; background: transparent; }
.sample2-2-1 { color: #f00; background: #808080; }
.sample2-2-2 { color: #f00; background: transparent; font-style: italic; }
.sample2-3 { color: #fff; background: #000; }
.sample3-1 { color: #00f; background: transparent; }
.sample3-2-1 { color: #00f; background: transparent; }
.sample3-2-2 { color: #000; background: transparent; }
.sample3-3-1 { color: #00f; background: transparent; }
.sample3-3-2 { color: #008000; background: transparent; }
.quiz { background: #f9f9f9; border: 1px solid #ccc; padding: 10px 20px 15px; margin: 20px 35px; }
.quiz p { margin: 0; padding: 0; font-size: 130%; font-weight: bold; }
.quiz ol { margin: 5px 0 20px; padding: 0 20px; line-height: 140%; list-style-type: upper-roman; font-weight: bold; }
.quiz li { border-bottom: 2px solid #ddd; padding: 0.1em 0; margin: 0.6em 0 0.2em; }
.quiz code { margin-left: 1em; }


dd.source { padding: 8px 20px; margin: 8px 18px; border: 1px solid #ccc; }
dd.source code { margin: 0; padding: 0; }
dd.css-sample { margin: 8px 18px; padding: 20px; border: 1px solid #aaa; }
.bg-repeat { background: #fff url("../css_properties/pictures/bg_repeat.png"); color: #000; }
.bg-repeat-x { background: #fff url("../css_properties/pictures/bg_repeat.png") repeat-x; }
.bg-repeat-y { background: #fff url("../css_properties/pictures/bg_repeat.png") repeat-y; color: #000; }
.bg-no-repeat { background: #fff url("../css_properties/pictures/bg_repeat.png") no-repeat; color: #000; }
.bg-scroll { background: #fff url("../css_properties/pictures/bg_repeat.png") scroll; color: #000; line-height: 300%; height: 5em; overflow: auto; }
.bg-fixed { background: #fff url("../css_properties/pictures/bg_repeat.png") fixed; color: #000; line-height: 300%; height: 5em; overflow: auto; }

.bg-lt { background: #fff url("../css_properties/pictures/bg_repeat.png"); color: #000; }
.bg-cc { background: #fff url("../css_properties/pictures/bg_repeat.png") center center; color: #000; }
.bg-3080 { background: #fff url("../css_properties/pictures/bg_repeat.png") 30% 80%; color: #000; }
.bg-10020 { background: #fff url("../css_properties/pictures/bg_repeat.png") 100px 20px; color: #000; }
.no-repeat { background-repeat: no-repeat; }


.italic { font-style: italic; }
.bold { font-weight: bold; }
.fs-90 { font-size: 90%; }
.fs-100 { font-size: 100%; }
.fs-150 { font-size: 150%; }
.fs-200 { font-size: 200%; }
.lh-100 { line-height: 100%; }
.lh-150 { line-height: 150%; }
.lh-300 { line-height: 300%; }

.arial { font-family: "Arial", sans-serif; font-size: 125%; }
.arial-b { font-family: "Arial Black", sans-serif; font-size: 125%; }
.impact { font-family: "Impact", sans-serif; font-size: 125%; }
.times { font-family: "Times New Roman", serif; font-size: 125%; }
.serif { font-family: serif; font-size: 125%; }
.sans-serif { font-family: sans-serif; font-size: 125%; }
.cursive { font-family: cursive; font-size: 125%; }
.monospace { font-family: monospace; font-size: 125%; }
.fantasy { font-family: fantasy; font-size: 125%; }

.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.under_over_through { text-decoration: underline overline line-through; }
.text-indent{ text-indent: 1em; }
.ls-1em { letter-spacing: 1em; }

dd.w-50p { width: 50%; padding: 20px 0; }
.bd-thin { border: solid thin; }
.bd-medium { border: solid medium; }
.bd-thick { border: solid thick; }
.bd-none { border: none; }
.bd-solid { border: 2px solid; }
.bd-dotted { border: dotted; }
.bd-dashed { border: 2px dashed; }
.bd-double { border: double; }
.bd-groove { border: groove; }
.bd-ridge { border: groove; }
.bd-inset { border: inset; }
.bd-outset { border: outset; }

.float-object {
	float: left;
	padding: 0.2em;
	margin: 0 0.3em;
	background: #666;
	color: #fff;
}
.of {
	border: 1px solid #999;
	padding: 0;
	margin: 1em auto;
	width: 8em;
	height: 4em;
	text-align: left;
}
.visible { overflow: visible; }
.hidden { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }

.dp-li { display: list-item; }
.va-base { vertical-align: baseline; }
.va-top { vertical-align: text-top; }
.va-middle { vertical-align: middle; }
.va-bottom { vertical-align: text-bottom; }
.va-sup { vertical-align: super; }
.va-sub { vertical-align: sub; }

a.relative1:hover {
	position: relative;
	top: 1em;
	left: 1em;
}
a.relative2:hover {
	position: relative;
	top: 1px;
	left: 1px;
}

.parent {
	width: 100px;
	height: 100px;
	border: 1px solid #ccc;
	position: relative;
}
.child1 {
	position: absolute;
	top: 20px;
	left: 10px;
	background: #666;
	color: #fff;
}
.child2 {
	position: absolute;
	bottom: 10%;
	right: 30%;
	background: #666;
	color: #fff;
}
.zi-sample { font-family: Arial,Verdana,Chicago,sans-serif; position: relative; height: 100px; }
.z-cascading {
	position: absolute;
	line-height: 1em;
	top: 15px;
	left: 10px;
	font-size: 30pt;
	color: #666;
	background: transparent;
}
.z-style {
	position: absolute;
	line-height: 1em;
	top: 35px;
	left: 60px;
	font-size: 35pt;
	color: #999;
	background: transparent;
}
.z-sheets {
	position: absolute;
	line-height: 1em;
	top: 20px;
	left: 120px;
	font-size: 40pt;
	color: #ccc;
	background: transparent;
}
.z-index1 { z-index: 1; }
.z-index2 { z-index: 2; }
.z-index3 { z-index: 3; }

.lst-disc { list-style-type: disc; }
.lst-circle { list-style-type: circle; }
.lst-square { list-style-type: square; }
.lst-decimal { list-style-type: decimal; }
.lst-lower-roman { list-style-type: lower-roman; }
.lst-upper-roman { list-style-type: upper-roman; }
.lst-lower-alpha { list-style-type: lower-alpha; }
.lst-upper-alpha { list-style-type: upper-alpha; }
.lst-none { list-style-type: none; }


#right-contents ul.lsp-outside { background: #f6f6f6; border: 1px solid #ddd; list-style-position: outside; }
#right-contents ul.lsp-inside { background: #f6f6f6; border: 1px solid #ddd; list-style-position: inside; }

#right-contents ul.lsi-bean { list-style: url("../css_properties/pictures/bean.png") outside; margin: 0 5em; line-height: 100%; }
#right-contents ul.lsi-bean2 { list-style: url("../css_properties/pictures/bean.png") outside; margin: 0 5em; line-height: 400%; }
ul.lsi-bean li { padding: 0 0.5em; margin-top: 1em; }

.separate { border-collapse: separate; }

a.link-sample1:link { color: #00f; text-decoration: none; }
a.link-sample1:visited { color: #800080; text-decoration: none; }
a.link-sample1:hover { position: relative; top: 1px; left: 1px; }
a.link-sample1:active { text-decoration: underline; }

.blue { color: blue; }
.green { color: green; }
.red { color: red; }
.purple { color: #800080; }

.good-link { color: #444; text-decoration: underline; }
.good-visited { color: #888; text-decoration: underline; }

.first-letter-sample:first-letter { font-size: 200%; }
.first-line-sample:first-line { font-size: 200%; }

.inch { width: 1in; height: 1in; padding: 0; margin: 10px; line-height: 1in; text-align: center; background: #666; color: #fff; list-style: none; }
.centi { width: 1cm; height: 1cm; padding: 0; margin: 10px; line-height: 1cm; text-align: center; background: #666; color: #fff; list-style: none; }

.layout-box {
	width: 3.5em;
	height: 3.5em;
	line-height: 3.5em;
	text-align: center;
	background: #ccc;
	color: #fff;
	font-size: 10pt;
	font-family: Arial,Verdana,Chicago,sans-serif;
}