/*-----------------------------------------------------------------------------------*/
/*  lexielein.com — window.css
/*  Window chrome: titlebar, traffic lights, positioning
/*  Adapted from Kampoeng Mac OS X CSS3 project
/*-----------------------------------------------------------------------------------*/

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

.window {
  background: -webkit-linear-gradient(top, rgba(218,218,218,1) 0%, rgba(188,188,188,1) 36px, #ededed 36px);
  background:    -moz-linear-gradient(top, rgba(218,218,218,1) 0%, rgba(188,188,188,1) 36px, #ededed 36px);
  background:         linear-gradient(to bottom, rgba(218,218,218,1) 0%, rgba(188,188,188,1) 36px, #ededed 36px);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 20px 60px 4px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.35);
  text-align: left;
  position: absolute;
  z-index: 10;
  overflow: hidden;
}

/* Window separator line below titlebar */
.window .container {
  border-top: 1px solid #686868;
  position: relative;
}

/*-----------------------------------------------------------------------------------*/
/*  2.  Traffic light controls
/*-----------------------------------------------------------------------------------*/

nav.control-window {
  position: absolute;
  left: 8px;
  top: 0;
  z-index: 10;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
}

nav.control-window a {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  text-indent: -9999px;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

/* Inner shadow to give depth */
nav.control-window a:before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
  top: 0; left: 0; right: 0; bottom: 0;
}

/* Gloss highlight overlay */
nav.control-window a:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 6px;
  border-radius: 50%;
  background: -webkit-linear-gradient(top,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 51%,
    rgba(255,255,255,0.1) 100%);
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 51%,
    rgba(255,255,255,0.1) 100%);
}

nav.control-window a.close    { background: radial-gradient(circle at 40% 35%, #ff7a73, #e03030); }
nav.control-window a.minimize { background: radial-gradient(circle at 40% 35%, #fecc45, #d4940a); }
nav.control-window a.maximize { background: radial-gradient(circle at 40% 35%, #72d24a, #2a9c2a); }
nav.control-window a.deactivate { background: #b5b5b5; }

/* Dim when window not focused — add class .inactive to .window */
.window.inactive nav.control-window a.close    { background: #c8c8c8; }
.window.inactive nav.control-window a.minimize { background: #c8c8c8; }
.window.inactive nav.control-window a.maximize { background: #c8c8c8; }

/*-----------------------------------------------------------------------------------*/
/*  3.  Title text
/*-----------------------------------------------------------------------------------*/

h1.titleInside {
  position: relative;
  z-index: 2;
  color: #3c3c3c;
  font-size: 13px;
  font-weight: 500;
  line-height: 36px;
  height: 36px;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255,255,255,0.7);
  text-align: center;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", Arial, sans-serif;
}

/*-----------------------------------------------------------------------------------*/
/*  4.  Window positions
/*-----------------------------------------------------------------------------------*/

/* Blog window: main large window */
#blog-window {
  width: 560px;
  left: calc(50% - 367px);
  top: 38px;
}

/* Badges window: smaller floating panel to the right */
#badges-window {
  width: 160px;
  left: calc(50% - 367px + 574px);
  top: 38px;
}

/*-----------------------------------------------------------------------------------*/
/*  5.  Aqua push-button (reused from Kampoeng)
/*-----------------------------------------------------------------------------------*/

a.button {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid #9a9a9a;
  text-decoration: none;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Geneva", Arial, sans-serif;
  font-weight: normal;
  color: #000;
  text-shadow: 0 1px 0 rgba(255,255,255,0.09);
  background-image: -webkit-linear-gradient(bottom, #ebebeb 0%, #f3f3f3 50%, #ffffff 100%);
  background-image:         linear-gradient(to top, #ebebeb 0%, #f3f3f3 50%, #ffffff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
  padding: 0 10px;
}
a.button:active {
  background-image: -webkit-linear-gradient(bottom, #d3f7fd 0%, #a1d1f9 50%, #d4e9fc 100%);
  background-image:         linear-gradient(to top, #d3f7fd 0%, #a1d1f9 50%, #d4e9fc 100%);
  border-color: #5a5caf #56578f #52536f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 0 rgba(0,0,0,0.09);
}

/*-----------------------------------------------------------------------------------*/
/*  Shell window positions (index.html)
/*-----------------------------------------------------------------------------------*/

#main-window {
  width: 560px;
  height: auto;
  left: calc(50% - 367px);
  top: 38px;
}

#badges-window {
  width: 160px;
  left: calc(50% - 367px + 574px);
  top: 38px;
}