/* 주월국 BBS - Windows XP/2000년대 초반 감성 CSS
   오래된 브라우저 호환을 위해 flex/grid/modern selector를 사용하지 않습니다. */

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #1b3f74;
  color: #111111;
  font-family: Gulim, Dotum, Verdana, Arial, sans-serif;
  font-size: 12px;
}

a:link { color: #003399; text-decoration: none; }
a:visited { color: #663399; text-decoration: none; }
a:hover { color: #ff3300; text-decoration: underline; }

.shell {
  width: 760px;
  margin-top: 18px;
  margin-bottom: 18px;
  border: 3px double #003399;
  background: #f8fbff;
}

.topline {
  background: #001f5f;
  color: #ffff99;
  font-weight: bold;
  padding: 4px;
  border-bottom: 1px solid #99bbff;
}

.masthead {
  height: 92px;
  background: #c7d9ff;
  border-bottom: 2px solid #3366cc;
  text-align: center;
  color: #003366;
}

.ascii {
  padding-top: 22px;
  font-family: "Courier New", monospace;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px #ffffff;
}

.subtitle {
  padding-top: 6px;
  font-size: 12px;
  color: #003399;
}

.navbar {
  background: #e8eefc;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #99bbee;
  padding: 6px 10px;
  font-weight: bold;
}

.statusbar {
  background: #fffbe0;
  color: #333333;
  border-bottom: 1px solid #e0d080;
  padding: 4px 10px;
  font-size: 11px;
}

.content {
  padding: 12px;
  vertical-align: top;
}

.footer {
  background: #e6e6e6;
  color: #555555;
  border-top: 1px solid #bbbbbb;
  text-align: center;
  padding: 6px;
  font-size: 11px;
}

.box {
  background: #ffffff;
  border: 1px solid #6699cc;
  margin-bottom: 10px;
  padding: 10px;
}

.box h2, .box h3 {
  margin: 0 0 8px 0;
  padding: 4px 6px;
  background: #ecf3ff;
  border-left: 6px solid #3366cc;
  color: #003366;
}

.narrow {
  width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.homegrid {
  width: 100%;
}

.leftcol {
  width: 520px;
  vertical-align: top;
  padding-right: 8px;
}

.rightcol {
  width: 190px;
  vertical-align: top;
}

.formtable {
  width: 100%;
  border-collapse: collapse;
}

.formtable th {
  width: 120px;
  background: #eef4ff;
  border: 1px solid #b6c7e8;
  padding: 6px;
  text-align: right;
  color: #003366;
}

.formtable td {
  border: 1px solid #d8e2f5;
  padding: 6px;
}

input, textarea, select {
  font-family: Gulim, Dotum, Verdana, Arial, sans-serif;
  font-size: 12px;
}

input[type=text], input[type=password], textarea {
  border: 1px solid #7f9db9;
  background: #ffffff;
}

input[type=submit], input[type=reset], input[type=button], .button, .bigbtn {
  border: 2px outset #d6d3ce;
  background: #ece9d8;
  color: #000000;
  padding: 2px 8px;
  font-size: 12px;
}

.button, .bigbtn {
  display: inline-block;
}

.bigbtn {
  font-size: 14px;
  font-weight: bold;
  padding: 6px 14px;
}

.wide {
  width: 95%;
}

textarea {
  width: 95%;
}

.board {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.board th {
  background: #d9e8ff;
  color: #003366;
  border-top: 2px solid #3366cc;
  border-bottom: 1px solid #99bbee;
  padding: 5px;
}

.board td {
  border-bottom: 1px dotted #bbbbbb;
  padding: 6px 4px;
}

.board tr:hover td {
  background: #fff7cc;
}

.toolbar {
  text-align: right;
  margin: 6px 0;
}

.pages {
  text-align: center;
  margin-top: 10px;
}

.postmeta {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.postmeta th {
  background: #eef4ff;
  border: 1px solid #c7d6ee;
  padding: 5px;
}

.postmeta td {
  border: 1px solid #d8e2f5;
  padding: 5px;
}

.postbody {
  min-height: 160px;
  border: 1px solid #d0d0d0;
  background: #fffffc;
  padding: 12px;
  line-height: 1.6;
  font-size: 13px;
}

.reply {
  border: 1px solid #dddddd;
  background: #fafafa;
  margin-bottom: 6px;
}

.replyhead {
  background: #f0f0f0;
  border-bottom: 1px solid #dddddd;
  padding: 4px;
  font-weight: bold;
  color: #003366;
}

.replybody {
  padding: 8px;
  line-height: 1.5;
}

.message {
  border: 1px solid #cc9900;
  background: #fff7cc;
  color: #663300;
  padding: 8px;
  margin-bottom: 10px;
  font-weight: bold;
}

.small, .hint {
  font-size: 11px;
  color: #666666;
}

.hanjaName {
  font-family: Batang, Gulim, serif;
  letter-spacing: 1px;
}

.hanjaInput {
  font-family: Batang, Gulim, serif;
}

.empty {
  text-align: center;
  color: #777777;
  padding: 20px;
}

.replycount {
  color: #cc3300;
  font-size: 11px;
}

.infotable {
  width: 100%;
  border-collapse: collapse;
}

.infotable th {
  background: #f2f2f2;
  border: 1px solid #cccccc;
  width: 70px;
  padding: 4px;
}

.infotable td {
  border: 1px solid #dddddd;
  padding: 4px;
}

.center { text-align: center; }
.inline { display: inline; margin: 0; padding: 0; }
.gazetteSeal {
  text-align: center;
  border: 3px double #993333;
  background: #fff8f0;
  color: #993333;
  font-family: Batang, serif;
  font-size: 18px;
  font-weight: bold;
  margin: 8px 0;
  padding: 8px;
}

.rightform {
  float: right;
  margin: 0;
}

.commentwrite {
  margin-top: 10px;
  border-top: 1px dotted #cccccc;
  padding-top: 8px;
}

/* ------------------------------------------------------------
   반응형 보강 (v2.1.1)
   - XP/IE 6~8을 위해 기본 레이아웃은 CSS2 중심의 유동폭으로 둡니다.
   - 최신 브라우저에서는 media query로 작은 화면을 한 단 더 보정합니다.
   ------------------------------------------------------------ */

.shell {
  width: 94%;
  max-width: 960px;
}

* html .shell {
  width: 94%;
}

.navbar {
  line-height: 1.7;
}

.navbar a, .navbar form {
  white-space: nowrap;
}

.content, .box, .postbody, .replybody, .board td, .formtable td, .postmeta td, .infotable td {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.board, .formtable, .postmeta, .infotable {
  table-layout: fixed;
}

input, textarea, select {
  max-width: 96%;
}

input.wide, textarea, .wide {
  width: 95%;
}

img, object, embed {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 720px) {
  body {
    background: #f8fbff;
    font-size: 13px;
  }

  .shell {
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    border-left: 0;
    border-right: 0;
  }

  .topline {
    display: none;
  }

  .masthead {
    height: auto;
    padding: 12px 4px;
  }

  .ascii {
    padding-top: 0;
    font-size: 19px;
    letter-spacing: 0;
  }

  .subtitle {
    padding-top: 4px;
  }

  .navbar {
    padding: 6px;
  }

  .navbar a, .navbar .inline {
    display: inline-block;
    margin: 2px 6px 2px 0;
  }

  .statusbar {
    padding: 5px 6px;
    line-height: 1.5;
  }

  .content {
    padding: 8px 6px;
  }

  .box {
    padding: 8px;
  }

  .narrow {
    width: auto;
  }

  .homegrid, .homegrid tbody, .homegrid tr, .leftcol, .rightcol {
    display: block;
    width: auto;
  }

  .leftcol {
    padding-right: 0;
  }

  .rightcol {
    margin-top: 8px;
  }

  .bigbtn {
    margin: 2px 0;
  }

  .board {
    font-size: 11px;
  }

  .board th, .board td {
    padding: 5px 3px;
  }

  .formtable, .formtable tbody, .formtable tr, .formtable th, .formtable td,
  .postmeta, .postmeta tbody, .postmeta tr, .postmeta th, .postmeta td {
    display: block;
    width: auto;
  }

  .formtable th, .postmeta th {
    text-align: left;
  }

  input[type=text], input[type=password], textarea, select {
    width: 95%;
    box-sizing: border-box;
  }

  textarea {
    min-height: 120px;
  }

  .toolbar {
    text-align: left;
    line-height: 1.8;
  }

  .rightform {
    float: none;
    display: block;
    margin-top: 4px;
  }
}

@media screen and (max-width: 480px) {
  .ascii {
    font-size: 16px;
  }

  .box h2, .box h3 {
    font-size: 14px;
  }

  .board th:first-child, .board td:first-child,
  .board th:nth-child(4), .board td:nth-child(4),
  .board th:last-child, .board td:last-child {
    display: none;
  }

  .gazetteSeal {
    font-size: 15px;
  }

  .postbody {
    padding: 8px;
    font-size: 12px;
  }
}

/* 가입 승인 관리 */
.adminrequests {
  table-layout: auto;
}

.adminrequests td {
  vertical-align: top;
}

.rejectnote {
  width: 90px;
}