/*-----------------------------------------------------------------------------------*/
/*  lexielein.com — style.css
/*  Based on Kampoeng Mac OS X CSS3 project; adapted for Mavericks aesthetic
/*-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------*/
/*  0.  Reset
/*-----------------------------------------------------------------------------------*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0; padding: 0; border: 0; outline: 0;
  font-size: 100%; vertical-align: baseline; background: transparent;
}
ol, ul { list-style: none; }
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }

::-moz-selection { background: rgba(124,196,255,0.7); }
::selection      { background: rgba(124,196,255,0.7); }

/*-----------------------------------------------------------------------------------*/
/*  1.  Base
/*-----------------------------------------------------------------------------------*/

html, body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", Arial, sans-serif;
  font-size: 12px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #000;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

a {
  color: #1a4a9a;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/*-----------------------------------------------------------------------------------*/
/*  2.  Menu bar  (#head)
/*-----------------------------------------------------------------------------------*/

#head {
  background: -webkit-linear-gradient(top, #e9e9e9 0%, #bbbabb 100%);
  background:    -moz-linear-gradient(top, #e9e9e9 0%, #bbbabb 100%);
  background:         linear-gradient(to bottom, #e9e9e9 0%, #bbbabb 100%);
  width: 100%;
  height: 22px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  border-bottom: 1px solid #444;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Left nav */
#head nav#menu {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 22px;
}
#head nav#menu ul { margin: 0; padding: 0; }
#head nav#menu ul li {
  float: left;
  position: relative;
  height: 22px;
}

/* Apple logo item */
#head nav#menu ul li.apple a {
  display: block;
  padding: 0 12px;
  font-size: 16px;
  line-height: 22px;
  color: #1a1a1a;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Site name — bold, no hover highlight */
#head nav#menu ul li#site-name a {
  font-weight: 700;
  padding: 0 10px;
  color: #1a1a1a;
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  text-decoration: none;
  display: block;
  height: 22px;
  line-height: 22px;
}
#head nav#menu ul li#site-name:hover {
  background: none;
  border-bottom: none;
}

/* Regular nav items */
#head nav#menu ul li a {
  display: block;
  color: #1a1a1a;
  font-size: 13px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  padding: 0 10px;
  font-weight: 400;
  height: 22px;
  line-height: 22px;
}
#head nav#menu ul li.here a {
  font-weight: 700;
}

/* Hover highlight — blue lozenge */
#head nav#menu ul li:not(#site-name):hover {
  background: -webkit-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
  background:    -moz-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
  background:         linear-gradient(to bottom, #7793f5 0%, #406df2 50%, #275af1 100%);
}
#head nav#menu ul li:not(#site-name):hover a {
  color: #fff;
  text-shadow: none;
}

/* Active page highlight */
#head nav#menu ul li.here {
  background: -webkit-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
  background:    -moz-linear-gradient(top, #7793f5 0%, #406df2 50%, #275af1 100%);
  background:         linear-gradient(to bottom, #7793f5 0%, #406df2 50%, #275af1 100%);
  border-bottom: 1px solid #1746d7;
}
#head nav#menu ul li.here a {
  color: #fff;
  text-shadow: none;
}

/* Right nav */
#head nav#menu-dx {
  position: absolute;
  right: 10px;
  top: 0;
  line-height: 22px;
}
#head nav#menu-dx ul { margin: 0; padding: 0; }
#head nav#menu-dx ul li {
  float: left;
  height: 22px;
  line-height: 22px;
}
#head nav#menu-dx ul li.time,
#head nav#menu-dx ul li#clock {
  font-size: 13px;
  color: #1a1a1a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  padding: 0 8px;
}

/*-----------------------------------------------------------------------------------*/
/*  3.  Desktop (#page)
/*-----------------------------------------------------------------------------------*/

#page {
  /* Change background.jpg to your preferred desktop wallpaper */
  background: url(background.jpg) center center no-repeat;
  background-size: cover;
  background-color: #3a4a5a;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 22px;
  box-sizing: border-box;
}

/*-----------------------------------------------------------------------------------*/
/*  4.  Typography (inside windows)
/*-----------------------------------------------------------------------------------*/

.page-heading {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  border-bottom: 1px solid #d0d0d0;
  padding-bottom: 8px;
  margin-bottom: 14px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.post-entry {
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.post-entry:last-of-type {
  border-bottom: none;
}

.post-date {
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.post-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a4a9a;
  margin-bottom: 4px;
  text-decoration: none;
  -webkit-user-select: text;
  user-select: text;
}
.post-title:hover { text-decoration: underline; }

.post-tags { margin-bottom: 5px; }

.tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 8px;
  margin-right: 4px;
  border: 0.5px solid;
}
.tag-tech  { background: #dde8f8; color: #1a3a88; border-color: #aac0e0; }
.tag-poetry { background: #ddf0e4; color: #1a5a30; border-color: #aad0b8; }
.tag-journal { background: #edddf0; color: #5a1a54; border-color: #c5aad0; }
.tag-misc { background: #c2b4cf; color: #42154d; border-color: #d0b4e1; }

.post-excerpt {
  font-size: 12px;
  color: #444;
  line-height: 1.55;
  margin-bottom: 4px;
  -webkit-user-select: text;
  user-select: text;
}

.read-more {
  display: inline-block;
  font-size: 11px;
  color: #2255cc;
  text-decoration: none;
}
.read-more:hover { text-decoration: underline; }

/*-----------------------------------------------------------------------------------*/
/*  5.  Window body layout (shared)
/*-----------------------------------------------------------------------------------*/

.window-body {
  display: flex;
  min-height: 360px;
  background: #fff;
}

.main-content {
  flex: 1;
  padding: 14px 16px;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  -webkit-user-select: text;
  user-select: text;
}

/* Aqua-style scrollbar */
.win-scrollbar {
  width: 15px;
  background: -webkit-linear-gradient(left, #d4d4d4, #e4e4e4);
  background:         linear-gradient(to right, #d4d4d4, #e4e4e4);
  border-left: 0.5px solid #bbb;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
  flex-shrink: 0;
}
.scroll-arrow {
  width: 13px;
  height: 13px;
  background: -webkit-linear-gradient(top, #e8e8e8, #d0d0d0);
  background:         linear-gradient(to bottom, #e8e8e8, #d0d0d0);
  border: 0.5px solid #aaa;
  border-radius: 2px;
  font-size: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  cursor: default;
  flex-shrink: 0;
}
.scroll-track {
  flex: 1;
  width: 11px;
  margin: 2px 0;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  position: relative;
}
.scroll-thumb {
  width: 11px;
  height: 40px;
  background: -webkit-linear-gradient(left, #c0c0c0, #d8d8d8);
  background:         linear-gradient(to right, #c0c0c0, #d8d8d8);
  border: 0.5px solid #aaa;
  border-radius: 3px;
  position: absolute;
  top: 4px;
}

/*-----------------------------------------------------------------------------------*/
/*  6.  Status bar
/*-----------------------------------------------------------------------------------*/

.win-statusbar {
  background: -webkit-linear-gradient(top, #c8c8c8, #b8b8b8);
  background:         linear-gradient(to bottom, #c8c8c8, #b8b8b8);
  border-top: 1px solid #909090;
  padding: 0 10px;
  height: 20px;
  font-size: 10px;
  color: #444;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/*-----------------------------------------------------------------------------------*/
/*  7.  Badges window body
/*-----------------------------------------------------------------------------------*/

.badges-body {
  padding: 10px;
  background: #f0f0f0;
  -webkit-user-select: none;
  user-select: none;
}

.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 0.5px solid #ccc;
  padding-bottom: 3px;
  margin-bottom: 7px;
  margin-top: 10px;
}
.sidebar-label:first-child { margin-top: 0; }

.badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}

/* Placeholder badges — replace the divs with <img> tags pointing to your .gif files */
.badge {
  width: 88px;
  height: 31px;
  border: 0.5px solid #aaa;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
}
.badge img { width: 88px; height: 31px; display: block; border: none; }

.badge-trans {
  background: linear-gradient(to right, #55cdfc 0%, #55cdfc 20%, #f7a8b8 20%, #f7a8b8 40%, #fff 40%, #fff 60%, #f7a8b8 60%, #f7a8b8 80%, #55cdfc 80%);
  color: #333;
}
.badge-hox  { background: #cc2222; color: #fff; }
.badge-mac  { background: #e8e8e8; color: #333; }
.badge-neo  { background: #1a3a6a; color: #aaccff; }

.sidebar-links li { margin-bottom: 5px; }
.sidebar-links a  { font-size: 11px; color: #2255cc; text-decoration: none; }
.sidebar-links a:hover { text-decoration: underline; }

.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }

/*-----------------------------------------------------------------------------------*/
/*  8.  Individual post window
/*-----------------------------------------------------------------------------------*/

#post-window {
  width: 640px;
  left: 30px;
  top: 38px;
}

.post-body {
  min-height: 440px;
}

h2.post-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  -webkit-user-select: text;
  user-select: text;
}

.post-content {
  margin-top: 14px;
  -webkit-user-select: text;
  user-select: text;
}

.post-content p {
  font-size: 13px;
  color: #333;
  line-height: 1.65;
  margin-bottom: 12px;
}

.post-content h3 {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 18px 0 6px;
}

.post-content blockquote {
  border-left: 3px solid #b0b8d8;
  margin: 12px 0 12px 8px;
  padding: 4px 0 4px 12px;
  color: #555;
  font-style: italic;
}

.post-content em  { font-style: italic; }
.post-content strong { font-weight: 700; }

.post-content a {
  color: #2255cc;
  text-decoration: none;
}
.post-content a:hover { text-decoration: underline; }

.post-nav {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #ebebeb;
}

/*-----------------------------------------------------------------------------------*/
/*  9.  iframe content frame
/*-----------------------------------------------------------------------------------*/

#content-frame {
  display: block;
  width: 100%;
  height: 85vh;
  border: none;
  background: #fff;
}