body {
	font-size: 24px;
	line-height: 2;
}
body>div {
	margin: 10px 10px 30px;
	padding: 10px;
	border: 1px solid #aaa;
}
h2 {
	background-color: #000;
	color: #fff;
	padding: 2px 10px;
}
pre {
	padding: 20px;
}
dt {
	border-bottom: 1px dotted #aaa;
}
dd {
	margin-bottom: 1.5em;
}
#background {
	background-attachment: fixed;
	background-color: #ff0;
	background-image: url("../images/tile.gif");
	background-position: top left;
	background-repeat: repeat;
}
#border {
	padding: 20px;
}
#border:hover {
	outline-color: #af0;
	outline-style: solid;
	outline-width: 10px;
}
#border:active {
	outline-color: #f00;
	outline-style: double;
	outline-width: 10px;
}
.dotted, .dashed, .solid, .double, .groove, .ridge, .inset, .outset {
	border-width: 10px;
}
.dotted {
	border-style: dotted;
}
.dashed {
	border-style: dashed;
}
.solid {
	border-style: solid;
}
.double {
	border-style: double;
}
.groove {
	border-style: groove;
}
.ridge {
	border-style: ridge;
}
.inset {
	border-style: inset;
}
.outset {
	border-style: outset;
}
/**/

#left, #right, #bottom {
	margin: 10px;
	padding: 10px;
}
#left {
	width: 300px;
	height: 200px;
	background: #f00;
	float: left;
	font-size: 24px;
}
#right {
	width: 300px;
	height: 200px;
	background: #00f;
	float: right;
	font-size: 24px;
}
#bottom {
	width: 100px;
	height: 100px;
	background: #0f0;
	clear: both;
	font-size: 24px;
}
/*position*/

#static, #relative, #absolute, #fixed {
	width: 300px;
	height: 300px;
	background: #9aefa2;
	border: 1px solid darkgreen;
}
#static {
	position:static;
}
#relative {
	position:relative;
	top: -200px;
	left: 400px;
}
#absolute {
	position: absolute;
	width: 400px;
	height: 400px;
	background-image: url("images/tile.gif");
	clip: rect(0px, 400px, 150px, 0px);
	right: 0;
	opacity:0.8;
	z-index: 1;
}
#fixed {
	position:fixed;
	top: 10px;
	right: 10px;
	opacity:0.5
}
.inline, .block, .list-item, .run-in, .table, .inline-table, .table-row-group, .table-header-group, .table-footer-group, .table-row, .table-column-group, .table-column, .table-cell, .table-caption, .none {
	margin: 10px;
	padding: 10px;
}
/*display*/

.inline {
	display: inline;
	background-color: red;
}
.block {
	display: block;
	background-color: pink;
}
.inline-block {
	display: inline-block;
	background-color: green;
	padding: 20px;
	margin: 20px;
}
.list-item {
	display: list-item;
	background-color: blue;
}
.run-in {
	display: run-in;
	background-color: yellow;
}
.table {
	display: table;
	border: 2px solid #888;
	width: 600px;
}
.inline-table {
	display: inline-table;
	border: 2px solid #f80;
	width: 600px;
}
.table-row-group {
	display: table-row-group;
}
.table-header-group {
	display:table-header-group;
	background-color: purple;
	color: #fff;
}
.table-footer-group {
	display: table-footer-group;
	background-color: skyblue;
}
.table-column-group {
	display: table-column-group;
}
.table-row {
	display: table-row;
}
.table-column1 {
	display: table-column;
	background-color: green;
}
.table-column2 {
	display: table-column;
	background-color: lime;
}
.table-cell {
	display: table-cell;
	border: 1px solid #888;
}
.table-caption {
	display: table-caption;
	margin:0;
}
.none {
	display: none;
}
/*margin-padding*/

#box1, #box2 {
	width: 400px;
	height: 200px;
	box-sizing : content-box;
}
#box1 {
	margin-top: 100px;
	margin-right: 100px;
	margin-bottom: 100px;
	margin-left: 100px;
	background: gray;
}
#box2 {
	padding-top: 100px;
	padding-right: 100px;
	padding-bottom: 100px;
	padding-left: 100px;
	background: gray;
}
/*visibility*/

.visible {
	visibility:visible;
}
.hidden {
	visibility:hidden;
}
.collapse {
	visibility:collapse;
}
.collapse td {
	border:1px solid #000;
}
/*Boxsize*/

.max {
	max-width: 400px;
	max-height: 400px;
	overflow: hidden;
}
.min {
	min-width: 1000px;
	min-height: 100px;
	overflow: hidden;
	background-color: orange;
}
.scroll {
	width: 400px;
	height: 400px;
	overflow: scroll;
}
.line-height {
	font-size: 20px;
	line-height: 40px;
}

/*font*/
#font {
	width: 700px;
}
.times {
	font-size:50px;
	font-family:"Times New Roman", Times, serif;
}
.pgothic {
	font-size:50px;
	font-family:"Wii NTLG PGothic";
}
.gothic {
	font-size:50px;
	font-family:"Wii NTLG Gothic";
}
.variant {
	font-variant: small-caps;
}
.font-weight {
	font-weight: bold;
}
.font-color {
	color: red;
}
.font-italic {
	font-style: italic;
}
.font-oblique {
	font-style: oblique;
}
.direction {
	direction: rtl;
	unicode-bidi:bidi-override;
}
.talignl {
	text-align: left;
}
.talignc {
	text-align: center;
}
.talignr {
	text-align: right;
}
.underline {
	text-decoration: underline;
}
.overline {
	text-decoration: overline;
}
.line-through {
	text-decoration: line-through;
}
.blink {
	text-decoration: blink;
}
.indent {
	text-indent: 40px;
}
.shadow {
	text-shadow: 3px 3px 5px red;
}
.capitalize {
	text-transform: capitalize;
}
.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.letter-spacing {
	letter-spacing: 30px;
}
.word-spacing {
	word-spacing: 100px;
}
.pre {
	white-space: pre;
}
.nowrap {
	white-space: nowrap;
}
.pre-wrap {
	white-space: pre-wrap;
}
.pre-line {
	white-space: pre-line;
}

/*table*/
#table table {
	border-collapse: separate;
	border-spacing: 5px;
	width:80%;
	table-layout:fixed
}
#table td, #table th {
	background-color: pink;
	empty-cells: hide;
}
#table caption {
	caption-side: bottom;
}

/*cursor*/
.auto, .crosshair, .default, .pointer, .move, .e-resize, .ne-resize, .nw-resize, .n-resize, .se-resize, .sw-resize, .s-resize, .w-resize, .text, .wait, .help, .progress {
	display: inline;
	width: 200px;
	height: 100px;
	border: 1px solid blue;
}
.crosshair {
	cursor: crosshair;
}
.default {
	cursor: default;
}
.pointer {
	cursor: pointer;
}
.move {
	cursor: move;
}
.e-resize {
	cursor: e-resize;
}
.ne-resize {
	cursor: ne-resize;
}
.nw-resize {
	cursor: nw-resize;
}
.n-resize {
	cursor: n-resize;
}
.se-resize {
	cursor: se-resize;
}
.sw-resize {
	cursor: sw-resize;
}
.s-resize {
	cursor: s-resize;
}
.w-resize {
	cursor: w-resize;
}
.text {
	cursor: text;
}
.wait {
	cursor: wait;
}
.help {
	cursor: help;
}
.progress {
	cursor: progress;
}

/*valign*/
.valigntop {
	vertical-align: top;
}
.valignbottom {
	vertical-align: bottom;
}
.fontlarge {
	font-size:50px;
}

/*content*/
.quotes {
	quotes : "「" "」" "『" "』";
	color: green;
}
.quotes:before {
	content: open-quote;
	color: red;
}
.quotes:after {
	content: close-quote;
	color: red;
}
#content a:after {
	content:"（" attr(title) "）\a";
	color: red;
}
#content p {
	counter-increment: ptag;
}
#content p:before {
	content: "その" counter(ptag) "：";
}
#content p.reset {
	counter-reset: ptag;
}

/*List*/
ul.disc {
	list-style-type: disc;
}
ul.circle {
	list-style-type: circle;
}
ul.square {
	list-style-type: square;
}
ul.decimal {
	list-style-type: decimal;
}
ul.decimal-leading-zero {
	list-style-type: decimal-leading-zero;
}
ul.lower-roman {
	list-style-type: lower-roman;
}
ul.upper-roman {
	list-style-type: upper-roman;
}
ul.lower-greek {
	list-style-type: lower-greek;
}
ul.lower-latin {
	list-style-type: lower-latin;
}
ul.upper-latin {
	list-style-type: upper-latin;
}
ul.armenian {
	list-style-type: armenian;
}
ul.georgian {
	list-style-type: georgian;
}
ul.lower-alpha {
	list-style-type: lower-alpha;
}
ul.upper-alpha {
	list-style-type: upper-alpha;
}
ul.linone {
	list-style-type: none;
}
ul.hiragana {
	list-style-type: hiragana;
}
ul.katakana {
	list-style-type: katakana;
}
ul.image {
	list-style-image: url("../images/bullet.gif");
}
ul.inside {
	list-style-position: inside;
}
ul.outside {
	list-style-position: outside;
}