/*
Theme Name: YHL Nebula
Theme URI: http://www.yuneique.com/yhl_nebula
Description: Nebula-based WordPress theme for Yoon Ha Lee.
Author: Yuneique
Author URI: http://www.yuneique.com
Version: 0.1


/*** GLOBAL : GENERAL STYLE DEFAULTS ***/

@viewport {
  width: device-width;
}

html {
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  font-size: 100%;
  margin: 0;
}

body, input, textarea {
  color: #222;    
  font-family: 'Poly', serif;
  font-family: Georgia, Times, "Times New Roman", serif;
  line-height: 1.5;
}

/*** BLOCKQUOTES ***/

blockquote {
  background-color: #f6f6f6;
  font-family: 'Volkhov', Georgia, Times, "Times New Roman", serif;
  line-height: 180%;
  padding: .1em .5em .1em .75em;
/*
  margin-top: .5em;
*/
  margin: .5em;
}

blockquote p {
  margin: 1.2em 0;
}

blockquote p:first-child {
  margin-top: .8em;
}

blockquote p:last-child {
  margin-bottom: .8em;
}

div.entry-summary blockquote {
  margin-top: 0;
}

div.entry-content blockquote {
  margin-bottom: 1em;
}

/*** HEADERS ***/

h1, h2, h3, h4, h5, h6 { 
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-weight: bold;
  clear: both;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

hr {
  background-color: #999;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

pre {
  font: 11px Monaco, monospace;
  line-height: 1.5;
  margin-bottom: 1.5em;
}

code {
  font: 11px Monaco, monospace;
}

p {
  /* margin: 4px 0 12px 0; */
  margin: .5em 0 1.2em 0;
}

a {
  color: #0a77e6;
}

a:link {
  text-decoration: none;
  border-bottom: 1px dashed;
}

div.widget-thumbnail a:link, div.entry-thumbnail a:link {
  border-bottom: none;
}

div.under-thumb a:link {
  border-bottom: 1px dashed;
}

a:visited {
/*
  color: #8b46d1;
*/
  color: #666;
}

a:hover {
  color: #065c88;
}

img.wp-post-image {
/*
  float: right;
*/
  padding: 0 0 .5em 0;
}

span.edit-link {
  font-size: small;
  text-transform: none;
  font-weight: normal;
}

div.entry-meta {
  font-family: "Arial", sans-serif;
  font-style: italic;
  margin-bottom: 1em;
}

div#nav-below {
  margin-top: 2em;
  padding-top: 1em;
  clear: right;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

div.nav-previous {
  float: left;
}

div.nav-next {
  float: right;
}

p.excerpt-read-more {
  font-size: smaller;
  text-align: right;
}

div.read-online-link {
  font-size: smaller;
  padding: 0 0 .5em 1em
}

div#site-info {
  margin-bottom: 1em;
  padding-top: 1em;
  color: #999;
  text-align: center;
}

div#copyright {
  margin: 0 auto;
  padding: .1em .5em;
  display: table;
  background-color: rgba(0,0,0,0.8);
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: smaller;
}

.top-header {
  color: #003399;
  text-transform: uppercase;
}

h2.series-name, h3.series-name, h4.series-name {
  margin-top: 0;
}

h2.widget-header {
/*
  color: #006699;
  margin: 0;
*/
  color: #003399;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  text-transform: uppercase;
  margin: .4em 0;
  font-size: 2em;
}

h3.widget-content-header {
  font-size: 1.5em;
  text-transform: uppercase;
  margin: 0;
}

h3.widget-content-header a:link {
  text-decoration: none;
}

h3.widget-content-header {
  margin-top: 1em
}

div.widget-thumbnail {
  text-align: center;
}

div.widget-thumbnail img {
  padding: .5em 0;
}

img.attachment-widget-thumbnail, img.attachment-category-thumbnail {
  border: 0;
}

.widget-meta {
  font-family: "Arial", sans-serif;
  font-style: italic;
}

/* plug-in */
.fancy-excerpt-more {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: smaller;
  margin-left: 1.25em;
}


/*** PAGE LAYOUT ***/

/* Styles that affect the entire layout of the page */
div#main {
  background-color: #fff;
  margin: 0;
}

div#content, div.content-like {
  padding: 1em;
}


/*** HEADER : MENU ***/

/* To see a menu in your header, you'll need to first add one in WordPress Admin */
#top-menu {
  background-color: rgba(59,59,88,0.85);
  width: 100%;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 1em;
  margin: 0;
  padding: 0;
}

ul.menu {
  margin: 0;
  padding: .5em 1em;
  list-style-type: none;
}

ul.menu li, ul.menu li a {
  color: #ccc;
  text-decoration: none;
  border: 0;
}

ul.menu ul {
  list-style-type: none;
  padding-left: 2em;
}

ul.menu li ul.sub-menu {
  text-align: center;
}

ul.menu li ul.sub-menu li {
  display: inline-block;
  margin-left: 0;
}


/*** HEADER : OTHER ***/

h1#header-title {
  margin: 0 1em;
  color: #fff;
}

/*** CONTENT : POSTS AND PAGES ***/

/* Entry and Page Titles */
h1.page-title, h1.entry-title {
  color: #003399;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  text-transform: uppercase;
  margin: .4em 0;
}

h1.homepage-post-title {
/*
  margin-top: 1em;
*/
}

div#content h1.homepage-post-title {
  margin-top: .5em;
}



h2.entry-title {
/*
  color: #003399;
*/
  color: #000;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  text-transform: uppercase;
  margin: 1em 0 0 0;
}

h2.entry-title a {
/*
  color: #003399;
*/
  color: #000;
  text-decoration: none;
}

h2.entry-title a:hover {
  color: #0a77e6;
}

h4.entry-categories {
  margin: 0;
  text-transform: uppercase;
}

h4 a:link {
  text-decoration: none;
}

div.entry-summary {
  margin-bottom: 1.5em;
}

.entry-thumbnail {
  text-align: center;
}

/* Media Alignment */
.alignright {
  /* Style for right-aligned images in posts */
  padding: 8px 0 8px 8px;
  /*
  float: right;
  */
}

.alignleft {
  /* Style for left-aligned images in posts */
  padding: 8px 8px 8px 0;
  float: left;
}

/* Entry Content */
.entry-content {
  /* Style that affects actual entry/post content */
}

.entry-content a {
  
}

.entry-content a:hover {
  
}

.entry-content h1, h2, h3, h4, h5 {
  
}

.entry-content ol li {
  
}

.entry-utility {
  /* Style for the entry utility, which sits below a post and provides info like categories, tags, feeds, and an edit link (for authors) */
}

.entry-meta {
  /* Style for the entry metadata (author, etc.) */
}

.skip-link {
  /* Style for the skip link */
  /*position: absolute;
  left: -9000px;*/
}

.navigation {
  /* Style for the navigation links (next/previous post) on a given post */
}


/*** CONTENT : COMMENTS ***/

div#comments {
  /* Style that affects the DIV containing all the comments */
}

.comments h3 {
  /* H3 header style for comments */
}

.comments ol {
  /* Comments are displayed as ordered lists by default, so you want to style that list so it looks the way you want */
}

.comments ol li {
  /* Style each list item in the comments ordered list */
}

.comments img {
  /* Style for the user avatar beside each comment */
  float: left;
  margin: 0 12px 8px 0;
}

.comments .comment {
  /* Style that applies to each individual comment in a series of comments */
}

.children ul li {
  /* A style that refers to the children (as in, responses to) any given comment */
}

.comment-reply-link {
  /* Style for the "Reply" link on a comment */
}

.comment-meta {
  /* Style for metadata for a comment */
}

div#respond {
  /* DIV that contains the comment response form */
}

div#respond h3 {
  /* H3 header for the comment response form */
}


/*** WIDGETS ***/
div.widget-container {
}

div.widget-content {
  padding: 1em;
}

div.widget-container-email {
  margin: 1em auto 0 auto;
  padding: 1em;
  border-top: 1px #666 solid;
  display: table;
  text-align: center;
}

div.widget-content-email {
  color: #000;
  font-size: smaller;
}

div.widget-content-email-header {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

input.search-input {
  border: 1px #999 solid;
}

input.search-button {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

div.search-button {
  text-align: center;
}


/*** FOOTER ***/
div#footer {
  clear: both;
}

ul.poetry-list li {
  margin-bottom: 1em;
}

ul.poetry-list li ul li {
  margin-bottom: 0;
}


.read-online-link {
  margin-top: 2em;
}

.under-thumb {
//  font-family: "Arial", sans-serif;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  margin-top: 0;
}

.email-addy {
  color: #000;
}


/*** YOUR CSS ***/


/***********************************************************/
/************************** SMALL **************************/

/** base styles, for the small-screen experience, go here **/

@media all and (min-width: 320px) {

  /** Header image **/

  div#header-image {
    background: #000 url('img/header_320minw.jpg') top center no-repeat;
    height: 100px;
    border-bottom: 2px #666 solid;
  }

  h1#header-title {
    display: none;
  }
  

  /** Menu **/

  div#top-menu {
    text-align: center;
  }

  ul.menu {
    margin: 0 auto;
    padding: 0;
  }

  ul.menu ul {
    margin: 0;
    padding: 0;
  }
  
  ul.menu ul ul {
      display: none;
  }

  ul.menu li {
    color: #ccc;
    display: block;
    padding: .2em .2em;
    border-bottom: #999 1px solid;
    border-collapse: collapse;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
  }
  
  ul.menu ul li {
    border: 0;
    font-size: .9em;
    margin: 0;
    padding: 0;
    font-weight: normal;
    text-transform: none;
  }

  .menu-item {
    text-align: center;
  }

  .menu-item a {
    text-decoration: none;
    color: #ccc;
  }

  .menu-item a:hover {
    color: #fff;
  }

}


/*********************************************************/
/******* HEADER IMAGE // STACKED CONTENT *****************/

@media all and (min-width: 768px) {
  div#header {
    border-bottom: 3px #bbb solid;
  }

  div#masthead {
    background: url('img/header_768w.jpg') bottom center no-repeat;
    min-height: 230px;
  }

  div#header-image {
/*
    background: url('img/header_768w.jpg') top center no-repeat;
    min-height: 200px;
*/
    background: none;
    border-bottom: 0;
  }

  div#main {
    background-color: rgba(255,255,255,0.9);
  }

  div#container, div.container-like, div.sidebar-full-container {
    width: 700px;
    margin: 0 auto;
  }
  
  div.container-like, div.widget-container {
    margin-top: 0;
  }
  
  blockquote.thumbnail-on-right {
    margin-right: 175px;
  }
  
  /** Menu **/
  
  #top-menu {
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 1em;
    display: table;
    width: auto;
    margin: 0 auto;
  }
  
  ul.menu {
    padding: .8em 0;
    display: table;
  }

  ul.menu li {
    display: table;
/*
    text-align: left;
*/
    float: left;
    border: 0;
    color: #ccc;
    font-weight: bold;
    margin-right: 2em;
  }

  ul.menu li:first-child {
    margin-left: 2em;
  }

  ul.menu ul {
      margin: 0;
      padding: 0;
  }
  
  ul.menu ul li {
    font-size: .9em;
    float: none;
    margin: 0 0 0 .5em;
    padding: 0;
  }
  
  ul.menu ul li:first-child {
    margin: 0 0 0 .5em;
  }

  .menu li {
  }

  .entry-thumbnail {
    float: right;
    width: 160px;
    margin-right: 1em;
  }

  img.wp-post-image {
    padding: 0 0 .5em 1em;
  }


  /*** WIDGETS ***/

  div.widget-content blockquote {
    margin-right: 135px;
  }

  div.widget-thumbnail {
    float: right;
    padding-left: 1.5em;
  }

  div.widget-container-email {
    margin: 1em auto 0 auto;
  }


/*  
  .entry-summary {
    float: left;
    margin-right: 180px;
  }
  
  .entry-content {
    clear: both;
  }
*/  
}


/****************************************************************/
/**************** COMPRESSED FULL-FLEDGED ***********************/

@media all and (min-width: 1024px) {
  body {
    background: #000 url('img/header_1024w.jpg') top center no-repeat;
  }

  div#masthead {
    background: none;
  }

  div#header {
    border: 0;
  }

  div#header-image {
    background: transparent;
    min-height: 180px;
  }

  div#main {
    background-color: transparent;
    margin-bottom: 2em;
    width: 100%;
  }

  div#main-column-holder {
    width: 700px;
    margin: 0 auto;
  }
  
  div#main-column-float {
    float: left;
  }

  div#container, div.container-like {
    width: 700px;
    background-color: rgba(255,255,255,0.9);
    border-bottom: 8px #744d78 solid;
    border-top: 8px #744d78 solid;
/*
    margin: 0 auto;
*/
    margin-left: -50px;
  }

  div.container-like {
    margin-bottom: .8em;
  }

  .under-thumb {
    text-align: right;
  }

  /*** SIDEBAR WIDGETS ***/

  div.sidebar-full-container {
    width: 180px;
    float: left;
    margin-left: 12px;
  }

  div.widget-container {
    background-color: rgba(255,255,255,0.9);
    border-bottom: 8px #666 solid;
    border-top: 8px #666 solid;
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
  }
  
  div.widget-content {
    font-size: smaller;
    padding: .75em;
  }

  div.widget-content blockquote {
    margin-right: .5em;
  }

  h2.widget-header {
    color: #006699;
    font-size: 1.5em;
    margin: 0;
  }

  h3.widget-content-header {
    font-size: 1.17em;
  }

  div.widget-container-email {
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    background-color: rgba(0,0,0,0.8);
    color: #ccc;
    margin-top: 0em;
    text-align: left;

/*
    width: 180px;
    float: left;
    margin-left: 12px;
*/
  }
  
  div.widget-content-email {
    color: #ccc;
    margin-top: 1.5em;
    padding: .5em;
    font-size: smaller;
  }

  .email-addy {
    color: #ccc;
  }

  div.widget-thumbnail {
    float: none;
    text-align: center;
    padding-left: 0;
  }

  
/*
  blockquote:first-line {
    font-size: 1.2em;
    font-variant: small-caps;
  }
*/

/*
  blockquote:first-letter {
    color: #333;
    float: left;
    margin: .2em .1em .2em 0;
    font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
    font-size: 3em;
    font-weight: bold;
  }
*/

  /** Menu **/
  
  #top-menu {
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 1em;
    display: table;
    width: auto;
    margin: 0 auto;
  }
  
  ul.menu {
    padding: .8em 0;
    display: table;
  }

  ul.menu li {
    display: table;
/*
    text-align: left;
*/
    float: left;
    border: 0;
    color: #ccc;
    font-weight: bold;
    margin-right: 4em;
  }

  ul.menu li:first-child {
    margin-left: 4em;
  }

  ul.menu ul {
      margin: 0;
      padding: 0;
  }
  
  ul.menu ul li {
    font-size: .9em;
    float: none;
    margin: 0 0 0 .5em;
    padding: 0;
  }
  
  ul.menu ul li:first-child {
    margin: 0 0 0 .5em;
  }

  .menu li {
  }

/*  
  .entry-summary blockquote {
    border-width: 0 0 0 3px;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
           -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
         -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
  }
*/

  div#access {
    padding-right: 100px;
  }

  div#site-info {
    padding-right: 100px;
  }

input.search-input {
  border: none;
}

div.search-button {
  text-align: left;
}


}


/*********************************************/
/************** MAXIMUM **********************/

@media all and (min-width: 1350px) {

  div#container, div.container-like  {
    width: 800px;
  }

  div.container-like {
    margin-bottom: 1em;
  }

  div#main-column-holder {
    width: 800px;
  }
  
  div.sidebar-full-container {
    width: 250px;
    margin-left: 20px;
  }

  div.widget-container {
  }
  
  div.widget-container-email {
  }

}