@import "reset.css";

body {
	padding: .5em 2em;
	background-color: #597259;
	color: #fff;
	font: .9em/1.5 "Malgun Gothic", AppleGothic, sans-serif;
}
body :lang(en) {
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
}

a:link, a:visited {
	color: #b4ffb4;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	background-color: #395239; color: #75ff75; text-decoration: underline;
}

ins {
	background-color: #ffb;
	text-decoration: none;
}
ins:before {
	content: "추가: ";
	background-color: #ffb;
}

code {
	padding: 2px;
	background-color: #eee;
	color: #000;
	line-height: 1.3;
	font-family: "Bit Sera Sans Mono", "Courier New", Courier, 굴림체, monospace;
}
pre {
	margin: 1em 0;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: pre-wrap;      /* CSS3 */
  word-wrap: break-word;      /* IE 5.5+ */
}
pre code {
	display: block;
	padding: 8px;
	background: #325432;
	color: #fff;
	font-size: .9em;
}

abbr {
	border-bottom: dotted 1px #666;
	outline: 0;
	cursor: help;
}
a abbr {
	cursor: pointer;
}

input:focus,
textarea:focus,
select:focus {
	border: solid 2px #fc9fff;
	background-color: #ff8;
}
input[type="password"]:focus {
	border: solid 2px #fc9fff;
	background-color: #fcc;
}

figure {
	padding: 5px;
	border: dotted 1px #ddd;
}
figcaption {
	text-align: center;
}

#page {
	position: relative;
	width: 55em;
	margin: 0 auto;
}

header[role="banner"] {
	position: absolute;
	top: 0;
	right: 0;
	width: 13em;
	height: 13em;
	text-align: center;
}
header[role="banner"] h1 a {
	display: block;
	width: 106px;
	height: 106px;
	margin: 0 auto;
	overflow: hidden;
	background: url("/i/logo.png") no-repeat 0 0;
	text-indent: -9999em;
}

section[role="main"] {
	position: relative;
	width: 40em;
	border: solid 3px #9f9;
	-moz-box-shadow: 0 0 10px #75ff75;
	-webkit-box-shadow: 0 0 10px #75ff75;
	box-shadow: 0 0 10px #75ff75;
	background-color: #fff;
	color: #000;
}
section[role="main"] a:link,
section[role="main"] a:visited {
	color: #31a131;
	text-decoration: underline;
}
section[role="main"] a:hover,
section[role="main"] a:active,
section[role="main"] a:focus {
	background-color: #ff8;
	color: #1ebb1e;
	text-decoration: underline;
}
article.hentry .entry-content,
article.hentry .entry-summary {
	margin: 1em 2em;
}
article.hentry header h1 {
	margin: .2em -.3em;
	background-color: #fff;
	padding: .2em .5em;
	border: solid 3px #75ff75;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 3px #15aa15;
	-webkit-box-shadow: 0 0 3px #15aa15;
	box-shadow: 0 0 3px #15aa15;
	font-weight: bold;
	font-size: 1.7em;
	text-shadow: 2px 2px 2px #bbb;
}
article.hentry header h1 a:link,
article.hentry header h1 a:visited,
article.hentry header h1 a:hover,
article.hentry header h1 a:active,
article.hentry header h1 a:focus {
	color: #000000;
	text-decoration: none;
}
article.hentry header div.metadata {
	padding-right: 1em;
	text-align: right;
	font-size: .8em;
	color: #666;
}
article.hentry .contentWrap h2 {
	margin: 1em 0;
	font-size: 1.5em;
}
article.hentry .contentWrap h3 {
	margin: 1em 0;
	font-size: 1.3em;
}
article.hentry .contentWrap p {
	margin: .8em;
}
article.hentry .contentWrap ul,
article.hentry .contentWrap ol,
article.hentry .contentWrap dl {
	margin: .8em 0 .8em 1.5em;
}
article.hentry .contentWrap dt {
	font-weight: bold;
}
article.hentry .contentWrap dd {
	margin-left: 1.5em;
}
article.hentry .contentWrap dd + dt {
	margin-top: .5em;
}
article.hentry .contentWrap fieldset {
	margin: .8em 0;
	padding: .8em;
	border: solid 2px #bbb;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
article.hentry .contentWrap fieldset legend {
	padding: .5em .8em;
	border: solid 2px #bbb;
	border-radius: 3px;
	-moz-border-radius: 3px;
}
article.hentry .contentWrap table th {
	padding: .3em .5em;
	border: solid 1px #bbb;
	background-color: #fafafa;
}
article.hentry .contentWrap table td {
	padding: .3em .5em;
	border: solid 1px #bbb;
}
article.hentry .contentWrap img {
	max-width: 99%;
}

section[role="main"] article.hentry footer {
	margin: 1em 2em;
	padding: .5em;
	background-color: #eee;
	color: #333;
	font-size: .8em;
}
section[role="main"] article.hentry #comments {
	position: relative;
	margin: 1em 2em;
	font-size: .9em;
}
section[role="main"] article.hentry #comments h2 {
	margin: .5em 0;
	padding: .2em;
	border-bottom: solid 1px #666;
	font-size: 1.3em;
}
section[role="main"] article.hentry #comments article {
	min-height: 80px;
	counter-increment: comment;
	padding-right: 85px;
	padding-bottom: .5em;
	border-bottom: dashed 2px #ddd;
	margin-bottom: .5em;
}
section[role="main"] article.hentry #comments article:before {
	content: counters(comment, ".", decimal);
	float: left;
	margin-right: .3em;
	font-size: 2em;
	line-height: 1;
	font-family: "Molengo", artial, sans-serif;
}
section[role="main"] article.hentry #comments article .eg-image {
	position: absolute;
	right: 0;
}
section[role="main"] article.hentry #comments article span.metadata {
	font-size: .8em;
}
section[role="main"] article.hentry #comments article cite {
	font-weight: bold;
	font-style: normal;
}
section[role="main"] article.hentry #comments form legend {
	display: none;
}
section[role="main"] article.hentry #comments label {
	display: block;
}
section[role="main"] article.hentry #comments textarea {
	width: 95%;
	height: 10em;
	min-height: 5em;
	max-height: 20em;
	resize: vertical;
}
section[role="main"] article.hentry #comments button {
	font-size: 1.5em;
}

aside[role="complementary"] {
	position: absolute;
	top: 14em;
	right: 0;
	width: 14em;
}
aside[role="complementary"] ul {
	list-style: none;
}
aside[role="complementary"] ul > li {
	margin: 0 0 .5em;
}
aside[role="complementary"] ul > li h2 {
	margin-bottom: .3em;
	padding: .15em;
	border-bottom: solid 1px #eee;
	-moz-box-shadow: 0 1px #bbb;
	-webkit-box-shadow: 0 1px #bbb;
	box-shadow: 0 1px #bbb;
	color: #fff;
	font-weight: normal;
	font-size: 1.4em;
	text-shadow: 2px 2px 2px #325432;
}
aside[role="complementary"] ul ul {
	margin-left: 1.5em;
	list-style: circle;
}
aside[role="complementary"] ul ul > li {
	margin: 0 0 .3em;
	font-size: .8em;
}

footer[role="contentinfo"] {
	width: 40em;
	margin: .5em 0;
	text-align: center;
}
footer[role="contentinfo"] > * {
	font-size: .8em;
}