/* Rebuilt from the template of the old Hovorun Europe site (hovorun.gamersoxygen.com, 2008-2011),
   with its images in /static/legacy. */

* { box-sizing: content-box; }

body {
  margin: 0;
  background: #5fa7fb;
  font: 12px Verdana, Arial, Helvetica, sans-serif;
  color: #000;
}

a { color: #1a4fb4; }
a:hover { color: #e06a00; }

#bodycontainer {
  width: 950px;
  margin: 20px auto 0;
  background: #5fa7fb url(legacy/back6.jpg) no-repeat;
  text-align: center;
}

#container { width: 900px; margin: 0 auto; text-align: left; overflow: hidden; }

#header { height: 207px; text-align: center; }
#header img { display: block; margin: 0 auto; border: 0; }

/* top menu: the old image buttons on the purple bar */
#top_menu {
  height: 36px;
  margin: 0 0 10px;
  padding: 0 0 0 5px;
  background: url(legacy/menu-top-back.png) left center no-repeat;
}
#top_menu a {
  float: left;
  height: 21px;
  margin: 4px 0 0;
  padding: 3px 7px 4px;
  text-decoration: none;
}
#top_menu a:hover { background: url(legacy/menu-top-back-hover.png) repeat-x; }
#top_menu img { border: 0; display: block; }
#top_menu a.textbtn {
  font: bold 15px "Arial Rounded MT Bold", Arial, sans-serif;
  color: #fff;
  line-height: 21px;
  text-shadow: -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222, 0 2px 0 #222;
}

/* left column: purple buttons */
#sidebar_left { float: left; width: 200px; margin-top: 3px; }
#menuleft { list-style: none; margin: 0; padding: 0; }
#menuleft li { margin: 0 0 5px 8px; }
#menuleft a {
  display: block;
  width: 191px;
  height: 36px;
  line-height: 36px;
  background: url(legacy/btn_up.png) no-repeat;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
}
#menuleft a span { display: block; margin-left: 10px; white-space: nowrap; }
#menuleft a:hover { background-image: url(legacy/btn_active.png); color: #fff; }

.status {
  margin: 14px 0 0 8px;
  width: 175px;
  padding: 8px;
  border-radius: 6px;
  background: #fff;
  border: 2px solid #333366;
  font-weight: bold;
  text-align: center;
}
.status::before { content: "\25CF  "; }
.status.online { color: #2b9a2b; }
.status.offline { color: #c8322a; }

/* center column (468) and right column (208) */
#centerandright { width: 684px; margin-left: 215px; }
#center { float: left; width: 468px; margin-bottom: 20px; }
#sidebar_right { margin-left: 476px; width: 208px; }

.box_top { height: 4px; background: url(legacy/content-top.png) left bottom no-repeat; font-size: 0; }
.box_middle { background: url(legacy/content-middle.png) repeat-y; padding: 6px 14px 10px; line-height: 1.5; }
.box_bottom { height: 4px; background: url(legacy/content-bottom.png) left top no-repeat; font-size: 0; margin-bottom: 20px; }

.side { margin-bottom: 14px; }
.side_top { height: 4px; background: url(legacy/sidebar-right-top.png) no-repeat; font-size: 0; }
.side_middle { background: url(legacy/sidebar-right-middle.png) repeat-y; background-color: #fff; padding: 6px 10px 8px;
               border-left: 1px solid #000; border-right: 1px solid #000; }
.side_bottom { height: 4px; background: url(legacy/sidebar-right-bottom.png) no-repeat; font-size: 0; }

h1 { font-size: 18px; color: #1a4fb4; margin: 6px 0 10px; }
h2 { font-size: 14px; color: #1a4fb4; margin: 14px 0 6px; }
h3 { font-size: 12px; color: #e06a00; margin: 2px 0 6px; }
p { margin: 0 0 10px; }

table.rank { width: 100%; border-collapse: collapse; font-size: 11px; }
table.rank th { color: #666; font-weight: normal; text-align: left; padding: 1px 2px; }
table.rank td { padding: 2px; border-top: 1px solid #e6e6e6; }
table.rank td:first-child { width: 14px; font-weight: bold; color: #e06a00; }
table.rank td:last-child, table.rank th:last-child { text-align: right; }
table.rank td.empty { color: #888; font-weight: normal; text-align: left; }

/* Anna explains how to play: her speech bubble grows with the text */
.anna {
  width: 448px;
  margin-left: -4px;
  min-height: 190px;
  background: url(legacy/anna_top.png) no-repeat, url(legacy/anna_mid.png) repeat-y;
  color: #000;
}
.anna_text { width: 262px; padding: 8px 12px 4px; }
.anna_text h2 { margin-top: 0; }
.anna_bottom { width: 291px; height: 17px; margin-left: -4px; background: url(legacy/anna_explain_play_bottom.png) no-repeat; }

/* forms and buttons */
form label { display: block; margin: 10px 0; font-weight: bold; color: #333366; }
form input {
  display: block;
  width: 260px;
  margin-top: 3px;
  padding: 5px 7px;
  font: 13px Verdana, Arial, sans-serif;
  border: 2px solid #9db8e6;
  border-radius: 4px;
}
form input:focus { outline: none; border-color: #6a4fe0; }
.hp { position: absolute; left: -9999px; }

.button {
  display: inline-block;
  cursor: pointer;
  border: 0;
  margin: 8px 0;
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
  font: bold 13px Verdana, Arial, sans-serif;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  background: url(legacy/btn_up.png) center no-repeat, #6b4fe0;
  background-size: 100% 100%;
}
.button:hover { background-image: url(legacy/btn_active.png); color: #fff; }

.error { background: #ffe6e3; color: #c8322a; padding: 6px 10px; border-radius: 4px; font-weight: bold; }
.small { font-size: 11px; color: #555; }
code { background: #eef; padding: 0 4px; }

#footer {
  clear: both;
  background: #fff url(legacy/footer1px.png) center repeat-y;
  padding: 6px 10px;
  font-size: 11px;
  color: #000;
}
#footer img { vertical-align: middle; margin-right: 12px; }