/* basic */

body, html {background:fixed #000 url(../images/3v.jpg)no-repeat 0 20%;}
li, ul {list-style:none;}
legend {display:none;}
#header {margin:0 5%;padding:0;}
#header h1 {margin:0 40px 0 0;padding:0;float: left;letter-spacing: -0.1em;}
#header h3 {padding-top:23px;}
#header h3 li {float:left;padding:0 1em 1px 0;}
#header h3 li#lang {position: absolute;top: 4%;right: 5%;}
[role="main"], .main {margin:auto;}
iframe {-moz-border-radius: .3em;border-radius: .3em;}
#scplayer {width:90%;margin:35px 40px 0 0;}
img {border:2px solid #000;border-radius: .3em;}
#poetry {margin:-10px 0 0 30px;}
[role="main"] img, .main img {float:left; margin:0 20px 20px 0;}
.hide, .hidden {display:none;}
.edit {text-align:right;}
.edit a {text-transform: uppercase;font-size:15px;line-height:1px;opacity:0.01;text-decoration: none;color: #f7f7f7;}
.edit a:hover {opacity:1;filter:alpha(opacity=100); -moz-opacity:1;}
img {width:100%;}

/* typography */
#header h1 a {text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;}
#header h1 a:hover, #header h3 a:hover {text-decoration: none;} 
#header h3 {font-family:Abel, Myriad Pro, Helvetica, sans-serif;line-height: 1em;}
#header h3 li {text-transform: uppercase;font-size: 0.9em;height: 20px!important;font-weight: normal;}
#header h3 li#lang {font-size: 0.5em;line-height: 1em;font-weight: normal;}
#header h3 li#lang a:hover {text-decoration: none;}
#poetry {font-size: 12px;line-height: 10px;letter-spacing: 0.02em;font-weight: normal;}

/* Links */
a {color: #fff;}
a:hover {color: #f09;transition: color 0.2s ease-in-out;}




/* ==========================================================================
   Styling and layout for screen media (mobile first) */


@media screen {

body {margin: 0;}
.wrapper {padding-top: 2em;}
header, .container {margin: 0 auto;width: 90%;max-width: 86em;}
footer {margin: 0 0 0 10%;width: 50%;max-width: 86em;}
header {margin-top:3em;}
header h1 {margin:0 2em 0 0; float:left;}
header h3 {margin: 0;}
[role="article"] {margin-bottom: 1em;}
footer {margin-top:1em;padding: .5em 0;}

/* Links
   ========================================================================== */

a {position: relative;text-decoration: underline;color: #eee;}
a:hover, a:active {
  outline: 0;}
a:hover {text-decoration:none;}
a:active {top: 1px;}
a:focus {outline: thin dotted #06f;}
footer a, header a {color: #fff;text-decoration:none;}

[role="main"] a:hover,
[role="main"] a:active,
[role="complementary"] a:hover,
[role="complementary"] a:active,
footer a:hover, footer a:active {
  text-decoration: underline;}

[role="main"] h1 a:hover,
[role="main"] h1 a:active {
  text-decoration: none;
}


/* Typography
   ========================================================================== */

body {font-size: 0.9em;line-height: 1.1;color: #eee;font-family: Abel, Myriad Pro, Helvetica, sans-serif;font-weight: normal;}
footer {font-size:0.7em;color: #eee;}
#lang, #lang a {color :#eee;}
#poetry {color: #eee;}
header h3, header h3 a {color:#eee;}

h1 {
  font-size: 2em;
  line-height: 1.21428571428571;
  letter-spacing: -1px;
}

h1:first-child {
  margin-top: 0;
}

h2 { font-family: Arial, Helvetica, sans-serif;font-size: 1.5em;line-height: 1.33333333333333; margin: .75em 0;}
h3 {font-size: 1.28571428571429em;line-height: 1;margin-top:0;}
h4 {font-family: Arial, Helvetica, sans-serif; font-size: 1.14285714285714em;margin: 0;}
address {
  margin: 1em 0;
}

pre,
code,
kbd,
samp {
  font-family: Cousine, Consolas, "Lucida Console", Monaco, monospace;
}

pre {
  /* 13px */
  font-size: .92857142857143em;
  overflow-x: auto;
  border: 0px solid #e3e3e3;
  padding: 1em;
  -moz-border-radius: .35714285714286em;
  border-radius: .35714285714286em;
  tab-size: 4;
}

pre code {
  /* 13px */
  font-size: 1em;
  border: 0;
  background: none;
}

small,
figcaption,
tfoot,
.footnote {
  /* 12px */
  font-size: .85714285714286em;
}


/* Support for non-latin languages (can be removed if not required)
   ========================================================================== */

html[lang="ja-jp"] {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

html[lang="ko-kr"] {
  font-family: GulimChe, Gulim, sans-serif;
}

html[lang="zh-cn"] {
  font-family: SimHei, sans-serif;
}

html[lang="zh-tw"] {
  font-family: PMingLiU, sans-serif;
}


/* Embedded content
   ========================================================================== */

img,
video {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

/* image alignemnts */
img.align-left {
  float: left;
  margin: 1em 1em 1em 0;
}
img.align-right {
  float: right;
  margin: 1em 0 1em 1em;
}
img.align-center {
  display: block;
  margin: 1em auto;
}

/* Forms
   ========================================================================== */

form { margin: 0; }
fieldset { margin: 0; border: 0;padding: 0;}
/* improves appearance and consistency in all browsers */
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  /* improves appearance and consistency in IE7 */
  *vertical-align: middle;
}

/* colour placeholder text (Webkit and Mozilla only, so far) */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #888;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #888;
}

/* suppress red glow that Firefox adds to form fields by default, even when user is still typing
   add focus glow on form elements and kill phantom spacing and dotted border that appears in Firefox */
button:invalid,
a.button:invalid,
input:invalid,
input[type="button"]:invalid,
input[type="reset"]:invalid,
input[type="submit"]:invalid,
textarea:invalid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
button::-moz-focus-inner,
a.button::-moz-focus-inner,
input::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
textarea::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button:focus,
a.button:focus,
input:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
select:focus,
textarea:focus {
  -webkit-box-shadow: 0 0 7px #555;
  -moz-box-shadow: 0 0 7px #555;
  box-shadow: 0 0 7px #555;
  /* Opera */
  z-index: 1;
}

  /* remove inner padding and search cancel button in webkit on OS X */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

textarea,
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  /* remove iOS Safari default styling */
  -webkit-appearance: none;
  font-family: Arial, Helvetica, sans-serif;
  /* 12px */
  font-size: .85714285714286em;
  text-align: left;
  border: solid 1px #ccc;
  padding: .5em;
  background: #eee;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 0;
  border-radius: 0;
}

input[type="color"] {
  padding: 0;
  height: 2.33333333333333em;
}

textarea {
  min-height: 3em;
  /* removes default vertical scrollbar in IE7-9 */
  overflow: auto;
  /* improves readability and alignment in all browsers */
  vertical-align: top;
  resize: vertical;
  width: 100%;
}

select {
  font-family: Arial, Helvetica, sans-serif;
  /* 12px */
  font-size: .85714285714286em;
  text-align: left;
  border: solid 0px #ccc;
  padding: .5em;
  background: #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

textarea,
select[size],
select[multiple] {
  height: auto;
}

optgroup {
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  color: #333;
}

/* kill phantom spacing and dotted border that appears in Firefox */
optgroup::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* addresses box sizing set to content-box and excess padding in IE7-9 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  *height: 1em;
  *width: 1em;
}

/* make sure disable elements really are disabled */
button[disabled],
input[disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
input[type="submit"][disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled],
span.disabled {
  opacity: 1;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none;
  border: solid 0px #d2d2d2 !important;
  color: #888888 !important;
  background: #777 !important;
  cursor: default !important;
  top: 0 !important;
}

.large input {
  width: 50%;
  min-width: 302px;
}

.large textarea {
  height: 156px;
}

.small input {
  width: 25%;
  min-width: 151px;
}

.small textarea {
  height: 5.5em;
}


/* Buttons
   ========================================================================== */

button,
[role] a.button,
span.disabled,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  /* remove iOS Safari default styling */
  -webkit-appearance: none;
  -webkit-background-clip: padding;
  -khtml-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  width: auto;
  overflow: visible;
  font-family: Arial, Helvetica, sans-serif;
  /* 12px */
  font-size: .85714285714286em;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: solid 1px #aaa;
  -moz-border-radius: .35714285714286em;
  border-radius: .35714285714286em;
margin-top:5px;
  padding: .5em 1em;
  display: inline-block;
  /* display and zoom IE7 fix for display:inline-block */
  *display: inline;
  *zoom: 1;
  color: #111;
  outline: 0;
  background-color: #eee;
}

button:hover,
[role] a.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background-color: #fff;
}

button:active,
[role] a.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
  position: relative;
  top: 1px;
  color: #111;
  background-color: #fff;

}

/* Comments
   ========================================================================== */

.comments {
  margin-bottom: 1em;
  -moz-border-radius: .35714285714286em;
  border-radius: .35714285714286em;
  padding: 1em 1em 1px;
  background: #ccc;
  word-wrap: break-word;
}

.comments h4 .is-author {
  font-weight: normal;
}

.comments h4 .comment-anchor {
  float: right;
  font-weight: normal;
 }

.comments-author {
}

#cpreview {
  margin-bottom: 2px;
  -moz-border-radius: .35714285714286em;
  border-radius: .35714285714286em;
  padding: 1em;
}

.comments_error {
  background: #ff0 !important;
}

.required,
.error_message li {
  color: #c00;
}

.required {
	cursor: help;
}


/* Popup comments (can be removed if you don't use popups)
   ========================================================================== */

#popup-page .wrapper {
  padding-top: 0;
}

#popup-page .container {
  max-width: 52em;
}

}


/* addresses select alignment in Safari/Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

select,
select[size="0"],
select[size="1"] {
  height: 2.2em;
}

select:not([size]),
select:not([multiple]) {
  position: relative;
  top: -1px;
}

}



/* ==========================================================================
   Additional layout for screen media 490px and up
   ========================================================================== */


@media only screen and (min-width: 35em) {

nav ul {width: 90%;}
nav li {float: left;border-right: solid 0px #e1a61a;border-bottom: 0;}
nav li:first-child {border-left: solid 0px #e1a61a;}
nav a {padding: .5em 1em;}

}



/* ==========================================================================
   Additional layout for screen media 672px and up
   ========================================================================== */


@media only screen and (min-width: 48em) {

[role="main"] {width: 70%;}
h1 {font-size: 3em;}
h2 {font-size: 2em;}
h3 {font-size: 1.2em;}
}



/* ==========================================================================
   Additional layout for screen media 1280px and up */

@media only screen and (min-width: 80em) {
body {font-size: 100%;}
header,nav ul,.container,footer {width: 90%;}
}



/* ==========================================================================
   Additional layout for screen media 1800px and up */

@media only screen and (min-width: 112.5em) {
body {/* 18px */ font-size: 112.5%;}
}


/* ==========================================================================
   Styling and layout for print media */

@media print {
body {display:none;}
}