/************************************************************************

+------------------------------------------------------------------+
| Header_Text_Color                                                |
| Header_Back_Color                                                |
|                                                                  |
+--------+-------------------------+-------------------------------+
|        |  Nav_Back_Color  Header_Back_Color             |        |
+--------+-------------------------+-------------------------------+
         |                         |  +-------------------+
         |  Canvas_Text_Color      |  | Panel_Back_Color  |
         |  Canvas_Back_Color      |  | Canvas_Back_Color |
         |                         |  |                   |
         |                         |  +-------------------+
         |                         |  +-------------------+
         |                         |  |                   |
         +-------------------------+  +-------------------+
         +------------------------------------------------+
         |                                                |
         +------------------------------------------------+

Body_Back_Color
Body_Back_Text

*************************************************************************/

/* Set Variables values */


/*
  ref:
    http://codex.wordpress.org/CSS
*/

html {
}

body {
  font: 11pt Tahoma, Arial, Helvetica, sans-serif;
  background: #d3d3d3;
  color: #000000;
}

h1{
  font-size: 160%;
}

h2{
  font-size: 150%;
}

h3{
  font-size: 130%;
}

h4{
  font-size: 120%;
}

h5{
  font-size: 110%;
}

h6{
  font-size: 100%;
}

.title {         /* in sidebar */
  font-size: 120%;
}

/* H1 of head/title not same size of h1 of post content*/
#header h1 {
  font-size: 220%;
  font-weight: bold;
}

#header h2 {
  font-size: 200%;
}

#header h3 {
  font-size: 180%;
}

.post-title h1{ /* should be .post-title h1*/
  font-size: 300%;
}

a{
  text-decoration: none;
  color: #3f0000;
}

a:hover{
  text-decoration: none;
  color: #ff0000;
}

caption, th, td {
  font-weight: normal;
}

.post-content img{
  height: auto;
  max-width: 100%;
  margin: 0.5em;
}

img.aligncenter{
  margin: 0.5em 0em;
}

.sticky{
}

.gallery-caption{
  color: #000000;
}

.bypostauthor{
/*  display: inline-block;*/
}

.aligncenter, div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.skip {
  display: none;
}

pre {
  padding: 0.5em;
  margin: 0em;
  overflow: auto;
  background: #dfe0e1 /* Controls like EditBox, Code Box or Quote */ /* deprecated */;
  color: #000000;
  border: 1px dotted #b9bdc0 /* Panels border color */
}

code{
  padding: 0.1em;
  margin: 0em;
}

pre, code{
  font-family: monospace, serif;
  font-size: 11pt;
  border-radius: 0.2em;
}

embed, iframe, object {
  max-width: 100%;
  max-height: 100%;
}

/*----------------*/

#container {
  background: #dfe0e1;
  color: #000000;
}

#header {
  background: #152530;
background: linear-gradient(to bottom, #2c4e65 15%, #2c4e65 10%, #152530 70%);
  text-decoration: none;
}

#logo-header{
}

#title{
}

#logo-image{
}

#logo-text {
}

@media screen {
  #header h1{
  /*  text-outline: 2px 2px #ff0000; not supported yet by any browser */
    text-shadow: 0.1em 0.1em 0.1em #000000;
  }
}

@media screen{
  #container {
    box-shadow: 0.3em 0.3em 0.3em #999;
    border-radius: 0px 0px 5px 5px;
    margin-bottom: 1em;
  }

  #header {
    box-shadow: 0em 0.2em 0.5em 0.0em #828a90;
  }
}

#description{
  color: #ffffff;
  margin: 0.5em 0em;
}

#header a{
  text-decoration: none;
  color: #ffffff;
}

#wrapper {
}

/**      mainbar content     */

#mainbar { /*do not put padding or margin or border width */
  background: #f0f0f0;
  width: 100%;
}

#mainbar .post-title {
  padding: 0.2em 0;
  margin: 0.2em 0 0 0;
}

hr {
  color: #b9bdc0 /* Panels border color */;
  border-style: dotted;
  border-width: 0px 0px 1px 0px;
  margin: 0em;
  padding: 0em;
}

@media screen{
  #mainbar .post-title {
    border-bottom: 1px solid #b9bdc0 /* Panels border color */;
  }

  .post{
      border-bottom: 0.2em solid #c1c3c5;
/*    box-shadow: 0em 0.5em 0.5em -0.5em red;*/
/*    margin-bottom: 0.5em; */
  }

  .post-rest{
    border-top: 0.3em solid #d3d3d3;
    padding-top: 2em;
  }

}

@media print{
  #mainbar .post-title {
    border-bottom: 1px solid #333;
  }
}

#contents {
  border-style: solid;
  border-color: #b9bdc0 /* Panels border color */;
}

@media screen{
  #contents {
    border-bottom-width: 1px;
  }
}
ol#posts {
  list-style: none outside none;
  margin: 0;
  padding: 0;
}

li.post{
  list-style: none outside none;
/*  margin-bottom: 1em; */
}

ol#posts .more-link{
  text-decoration: none;
  font-size: 80%;
  color: #558caa;
}

.post-content p{
  margin: 0.1em 0.1em 1em;
}

.post-title a{
  color: #000000;
  text-decoration: none;
}

.post-title a:hover {
  color: #bf0000;
  text-decoration: none;
}

.infobar {
  list-style: none outside none;
  overflow: auto;
  font-size: 80%;
  color: #b4b4b4;
  padding: 0.1em 0 0 0;
}

.infobar li{
  display: block;
  padding: 0 0.2em;
}

.infobar a{
  text-decoration: none;
  color: #3f0000;
}


.infobar a{
  text-decoration: none;
  color: #3f0000;
}

.infobar a:hover{
  text-decoration: none;
  color: #ff0000;
}

.infobar .category{
}

.infobar .tags{
}

.infobar .comments-count{
}

li.post{
  clear: both;
  overflow: hidden;
}

table, th ,td, tr {
  border: 1px solid #b9bdc0 /* Panels border color */;
  border-collapse: collapse;
}

th, td {
  padding: 0.2em;
}

blockquote{
  padding: 0.5em;
  background: #dfe0e1;
  color: #000000;
  border: 1px dotted #b9bdc0 /* Panels border color */
}

/* Shared with comments */

.entry-type {
}

.entry-date{
}

.entry-date:before{
  content: "◊ "
}

.entry-author{
}

.entry-author:before{
  content: "• "
}

@media print{
  .post li.entry-edit {
    display: none;
  }

  a.comment-edit-link{
    display: none;
  }
}

div.post {
}

.post-content {
  clear: both;
  overflow: hidden;
  padding: 0.5em 0 0.5em 0;
  margin: 0;
}

/* pagination */

.pagination {
  font-size: 80%;
  list-style: none;
  /*margin: 0.5em 0.1em 0;*/
  margin: 0em;
  padding: 0.5em 0.5em;
  overflow: auto;
/*  color: $get(canvas_text);*/
/*  background: $get(border);*/
/*  border-radius: 3px 3px 0 0; */
  background: #35434c;
}

.pagination a{
  color: #ffffff;
}

.pagination a:hover{
  color: #ff0000;
}

@media print{
  #pagination {
    display: none;
  }
}

#pagination a{
  text-decoration: none;
}

.previous-posts {
}

.next-posts {
}

.page-numbers {
  list-style: none;
  margin: 0.5em 0.1em 0;
  padding: 0.1em 0.5em;
  overflow: auto;
  color: #000000;
  background: #b9bdc0 /* Panels border color */;
}

.page-numbers a{
  color: #3f0000;
  background: #000000;
}

.page-numbers a:hover{
  color: #ff0000;
}

.page-number{
  display: inline;
  padding: 0 0.2em;
}

#nav{
/*  border-top: 1px solid $mix(header_back, canvas_back);*/
  border-radius: 3px 3px 0 0;
  background: #35434c;
  color: #ffffff;
}

#nav-page, #nav-subpage {
  list-style: none;
  padding: 0;
  margin: 0;
  clear: both;
}

#nav-subpage {
  font-size: 80%;
  clear: both;
}

#nav-page ul, #nav-subpage ul {
}

#nav-page li, #nav-subpage ui {
  padding: 0.1em 0.4em;
  margin: 0.1em
}

#nav-page li{
  display: block;  
  margin: 0.1em 0.5em;  
}

#nav-subpage li {
  display: inline;
  margin: 0.1em 0.5em;
  padding: 0.2em;
}

#nav a{
    color: #ffffff;
}

#nav a:hover{
  color: #ffffff;
  border-color: #f00;
}

#nav a:hover{
  color: #ffffff;
}

#nav .current_page_item{
  border-radius: 3px;
  box-shadow: 0 0 0.4em 0 #ff7f7f;
  color: #152530;
  background: #ffffff;
}

#nav .current_page_parent{
  border-radius: 2px;
  box-shadow: 0 0 0.4em 0 #ff7f7f;
  background: #ffffff;
}

#nav .current_page_item a {
  text-decoration: none;
  color: #152530;
}

#nav .current_page_parent a {
  text-decoration: none;
  color: #152530;
}

.widget_tag_cloud a {
}

.comments-area{
}

#comments h2{
  font-size: 100%;
}

.comment-form-comment label{
  vertical-align: top;
}

.comment-list {
  list-style: none outside none;
  padding: 0.5em 0 0 0;
}

.comment-body {
  border-bottom: 1px solid #b9bdc0 /* Panels border color */;
  margin: 0.5em;
  padding-bottom: 0.5em;
}

.children{
}

.comment{
  background: #dfe0e1;
  color: #000000;
  padding: 0;
  overflow: auto;
}

.comment p {
  padding: 0;
  margin: 0.5em;
}

.avatar{
  padding: 0.2em;
  display: Block;
}

input[type=text]{
  border: 1px solid #b9bdc0 /* Panels border color */;
  padding: 0.2em;
  margin: 0;
  border-radius: 3px;
  color: #000000;
  background: #dfe0e1 /* Controls like EditBox, Code Box or Quote */ /* deprecated */;
}

input[type=submit]{
  padding: 0.2em;
  margin: 0;
  font: 11pt Tahoma, Arial, Helvetica, sans-serif;
  border-radius: 3px;
  border: 1px solid #828a90;
  color: #000000;
  background: #dfe0e1 /* Controls like EditBox, Code Box or Quote */ /* deprecated */;
}

textarea#comment {
  width: 95%;
  font-size: 100%;
  padding: 0.2em;
  border-radius: 3px;
  border: 1px solid #b9bdc0;
  color: #000000;
  background: #dfe0e1 /* Controls like EditBox, Code Box or Quote */ /* deprecated */;
}

#reply-title{
  font-size: 100%;
}

@media print{
  #reply-title{
    display: none;
  }
}
@media print{
  #commentform {
    display: none;
  }
}

/* sidebar */

#sidebar {
  color: #000000;
}

#sidebar a{
/*  color: $mix(highlight, canvas_text, 0); */
  color: #000000;
  text-decoration: none;
}

#sidebar a:hover{
  color: #ff0000;
  text-decoration: none;
}

#sidebar > ul {
  padding: 0em 1em;
  list-style-type: none;
}

#sidebar li{
}

#sidebar > ul > li {
  text-shadow: 2px 2px 2px #d7d7d7;
  padding-bottom: 1em;
  margin-bottom: 1em;
  list-style-type: none;
  border-bottom: 1px solid #b9bdc0 /* Panels border color */; /* Will override in other css */
  text-shadow: 2px 2px 2px #b9bdc0 /* Panels border color */;
}

#sidebar > ul > li > ul {
  text-shadow: none;
  color: #3f0000;
  text-decoration: none;
}

/* sub pages less padding */

#sidebar > ul > li > ul > li > ul {
  font-size: 80%;
}

.widget#sidebar li{
  color: #000000;
}

#footbar {
  background: #000;
  color: #f0f0f0;
/*  border-top: 3px solid $get(header_back); */
}

#footbar a{
  color: #f0f0f0;
  text-decoration: none;
}

#footbar > ul {
  list-style-type: none;
  margin: 0;
}

#footbar > ul >li {
  list-style-type: none;
  padding: 0.5em;
}

/*------------------------*/

#footer {
}

#calendar_wrap th, #calendar_wrap td{
  text-align: center;
}

#copyright {
  text-align: left; /* Do not change it */
  padding: 0 0.3em;
  margin: 0 1em;
  width: auto;
  height: auto;
  color: #aeb3b6;
  font-size: 80%;
}

#copyright a{
}

@media print{

  #pagination, #footer-info {
    display: none;
  }
}

@media print
{
  .pagebreak {
    page-break-inside: avoid; /* wrong when print one select post */
    page-break-after: auto;
  }
}

/* drawer */
.drawer-opened {
  background: #dfe0e1;
  color: #000000;
  border-color: #000000;
}

.drawer-closed {
  border-color: #ffffff;
}

#drawer {
/*  content: "≡"; */
  display: block;
  width: 1.6em;
  height: auto;
  margin: 0.0em;
  float: left;
}

/*
* ref: http://css-tricks.com/three-line-menu-navicon/
       in comments
*/

#drawer-button
{
    display: block;
    height: 0.26em;
    line-height: 0;
    width: auto;
    border-top: .74em double;
    border-bottom: .24em solid;
    margin: 0.2em;
    padding: 0em;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/** WordPress */

.wp-caption {
  max-width: 100%;
  padding: 0.1em;
  margin: 0.5em;
  background: #dfe0e1;
  color: #000000;
  border: 1px dotted #b9bdc0 /* Panels border color */;
  text-align: center;
}

.wp-caption img{
  margin: 0.5em 0em;
}

.wp-caption-text{
  color: #000000;
}

table#wp-calendar {
  width: 100%;
}