/* Hello! You are currently viewing the CSS code for birdcorevoyager.com! */

/*Code to pre-load button borders so they don't flash white when you hover or click on the button */
body:after{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url('/assets/core/design/border-button.png') url('/assets/core/design/border-button-hover.png') url('/assets/core/design/border-button-active.png') url('/assets/core/design/border-button-disabled.png');
}

/* Basic text formatting */
body {  background-color: #C98D97; background-image: url('/assets/core/design/background.png'); font-family: "Liberation Sans", "Arial", sans-serif; font-size: 12px; image-rendering: pixelated; letter-spacing: 1px; margin: 0; word-spacing: 1px;  }
h1, h2, h3, h4, h5, h6 {  font-family: "Dyuthi", "Arial Rounded MT Bold", "Arial", sans-serif; margin-top: 0; margin-bottom: 6pt;  }

/* Standard link styling */
a {  text-decoration: none; color: #0158B4;  }
a:focus, a:hover {  text-decoration: underline; color: #EE2469;  }
a:active {  text-decoration: none; color: #16CC55;  }

/* Table */
th {  text-align: right;  }
td {  text-align: left;  }

/* The header image in the top-left corner of the page */
header {  margin: 4px 0 0;  }
.logo img{  width: 150px; height: 64px;  }

/* Where everything goes */
#container {  margin: 4px auto; max-width: 762px;  }

/* Where the actual content goes */
main {  float: left; line-height: 20px; min-height: 360px; width: 480px; padding: 12px; background-color: white; border: 2px solid #CC7A9F; border-image: url('/assets/core/design/border.png') 2 repeat; margin: 4px 2px 8px 0;  }
main p {  margin-top: 6pt;  }
code {  font-family: "Liberation Mono", "Menlo";  }

/* Border for the Cusdis comment section on blog posts */
#comments {  border: 1px solid #EEE; padding: 16px; border-radius: 4px 0 4px 0;  }

/* Various bits of style information pertaining to the "blog" parts of the website */
#postlistdiv ul {  list-style-type: none; padding: 0; margin: 0;  }
#postlistdiv h3 {  margin-top: 4px; margin-bottom: 0;  }
#postlistdiv h5 {  margin: 0;  }
#postlistdiv p {  margin-top: 0;  }
#postlistdiv a {  font-weight: bold;  }
#recentpostlistdiv ul, #statuscafe {  list-style-type: none; margin: 0; padding: 6px;  }
.postdate-label {  display: block; font-weight: bold;  }
#postDescription {  color: #636; font-style: italic;  }
#postDate {  color: #333; font-style: italic;  }
figure img {  height: auto; image-rendering: optimizequality; max-width: 100%;  }
figcaption {  text-align: center; font-style: italic;  }
#nextprev table {  width: 100%;  }
#nextprev td {  width: 42%; padding: 0 8px; height: 45px;  }
#nextprev td:nth-of-type(1) {  text-align: right;  }
#nextprev td:nth-of-type(2) {  border: 1px solid #CAC; border-style: none solid; text-align: center; width: 16%;  }
#nextprev td:nth-of-type(3) {  text-align: left;  }
#moreposts {  font-weight: bold; font-variant: all-small-caps;  }

/* Menu link layout */
#menu {  float: right; text-decoration: none; line-height: 32px; margin: 16px 0;  }
/* Individual menu link styling */
#menu a {  margin-left: 6px; padding: 6px; color: #700040; font-weight: bold; text-decoration: none; background: linear-gradient(0deg, #D8D 0%, #D9D 55%, #EAE 55%, #EAE 100%); border: 1px solid #969; border-radius: 4px 0 4px 0;  }
#menu a:focus, #menu a:hover {  color: #A01170; background: linear-gradient(0deg, #E9E 0%, #EAE 55%, #FCF 55%, #FCF 100%); border: 1px solid #A7A;  }
#menu a:active {  color: #670037; background: linear-gradient(180deg, #D9D 0%, #D9D 45%, #E2A2E2 55%, #E2A2E2 100%); border: 1px solid #670037;  }

/* Sidebar */
#sidebar {  float: right; position: sticky; top: 0;  }
.sidebox {  width: 200px; margin: 4px 0 8px 2px; padding: 0 0 4px; background-color: #E2E2F1; border: 2px solid #97B2CC; border-image: url('/assets/core/design/border-sidebox.png') 2 repeat;  }
.sidebox-label {  background: linear-gradient(90deg, #516193 0%, #7184BF 100%); color: white; font-family: "Dyuthi", "Arial Rounded MT Bold", sans-serif; font-size: 12px; font-weight: bold; margin: 0; padding: 4px;  }
.sidebox h5 {  margin: 6px 0 0 0; font-family: "Arial";  }
#statuscafe-username {  display: inline-grid; text-transform: uppercase; font-size: 11px;  }

/* The boxes used for the random fact thingy and the credits */
.funbox {  background-color: #EEF; padding: 2px; border: 2px solid #8FADCC; border-image: url('/assets/core/design/border-funbox.png') 2 repeat; max-width: 512px; height: 192px; margin: 4px;  }

/* Button! */
button {  text-decoration: none; height: 24px; color: black; background-color: #B6BED4; border: 4px solid #737F9C; border-image: url('/assets/core/design/border-button.png') 4 stretch; border-radius: 6px; cursor: pointer; font-family: "Tahoma", sans-serif; margin: 1px; padding: 0 4px;  }
button:focus, button:hover {  background-color: #B7ABD9; border-image: url('/assets/core/design/border-button-hover.png') 4 stretch;  }
button:active {  background-color: #A3ABC2; border-image: url('/assets/core/design/border-button-active.png') 4 stretch;  }
button:disabled {  background-color: #D4D4D4; border-image: url('/assets/core/design/border-button-disabled.png') 4 stretch; color: grey; cursor: not-allowed;  }

/* The bottom part of the website */
footer {  padding: 16px; text-align: center; background-color: #F1D9EB; border: 2px solid #B095CC; border-image: url('/assets/core/design/border-footer.png') 2 repeat; clear: both;  }
/* Bottom menu link layout */
#footlist {  font-size: 12px; padding: 0;  }
/* The 'social' buttons in the footer */
#footlist li {  list-style: none; display: inline-flex;  }
/* 'Social' link styling */
footer a {  color: #247; text-decoration: none;  }
footer a:focus, footer a:hover {  color: #A47;  }
footer a:active {  color: #187; text-decoration: none;  }

/*  For screens smaller than 800x600 resolution, but at least 640x480, automatically scale the "main" section  */
@media only screen and (max-width: 793px) {
  #container {  margin: 4px 8px;  }
  main {  width: 63%;  }
}
@media only screen and (max-width: 768px) {
  main {  width: 62%;  }
}
@media only screen and (max-width: 743px) {
  main {  width: 61%;  }
}
@media only screen and (max-width: 718px) {
  main {  width: 60%;  }
}
@media only screen and (max-width: 693px) {
  main {  width: 59%;  }
}

/* Alternate layout for even smaller screens--the "mobile" layout, basically */
@media only screen and (max-width: 617px) {
  body, .sidebox-label, .postdate-label {  font-size: 12px;  }
  header {  width: 85%; margin: 4px auto 0; text-align: center;  }
  #menu {  margin: 8px; float: none;  }
  main {  width: 85%; margin: 12px auto 6px; float: none; padding: 16px 12px;  }
  #sidebar {  float: none; position: initial;  }
  .funbox {  max-width: 100%;  }
  .sidebox {  width: 85%; margin: 4px auto;	padding: 16px 12px;  }
  .sidebox-label {  background: none; color: black;  }
  #statuscafe-username {  display: inline;  }
  footer {  width: 85%; margin: 4px auto;	float: none; padding: 16px 12px;  }
}