body {
margin: 0;
background:#f6f6f6 url('images/bg.jpg') repeat;
font-family: 'petrona', sans-serif; font-size:16px;
color:#333; line-height:1.6
}

ul.topnav, em, q, h1,h2,h3,h4, .close, blockquote, #footnav, dt {  font-family: 'playfair display',serif; }

::-moz-selection { color: #666; background-color:#eee }
::selection { color: #666; background-color:#eee  }

/* TOP NAVIGATION */
nav { position: fixed; width: 100%; z-index: 1;}
ul.topnav {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 20px;
    margin: 0 auto;
}
ul.topnav { align-items: center; justify-content: center; margin:0 auto;}
ul.topnav { background: #000; margin: 0 auto; padding:0px; }
ul.topnav li { list-style: none; }
ul.topnav li.exit { display:none; }
ul.topnav li a {color:#ddd; font-size: 18px;
    display: inline-block; padding: 7px 12px; text-align: center;
      vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s
}
ul.topnav li a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ad1417;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
ul.topnav li a:hover:before, ul.topnav li a:focus:before, ul.topnav li a:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
ul.topnav li a.active { background-color: #333 }
ul.topnav li a:hover { color:#fff; }
ul.topnav li a.brand {padding: 3px 10px 6px 10px; margin-right:10px; color:#e43d45;
font-weight: 300; font-size:21px; letter-spacing: -1px }
ul.topnav li a.brand:before { background: transparent; }
ul.topnav li a.brand:hover { color:#999 }

/* HEADER */
#header { margin:0; width:100%; height:auto}
#header img {
    max-width: 100%;
    height: auto; display: block; margin: auto;
	padding-top:40px;
}

/* BASICS */
a { text-decoration: none;
	 -webkit-transition-property:all;
-webkit-transition-duration: 0.4s, 0.4s;
-webkit-transition-timing-function: linear, ease-in-out;

-moz-transition-property:all;
-moz-transition-duration:0.4s;
-moz-transition-timing-function: linear, ease-in-out;

-o-transition-property:all;
-o-transition-duration:0.4s;
-o-transition-timing-function: linear, ease-in-out;
color:#dd1d24
 }
#main .submenu .m4 a {
   border: 0px;
 
   -webkit-transition: border .25s ease;
      -moz-transition: border .25s ease;
        -o-transition: border .25s ease;
       -ms-transition: border .25s ease;
           transition: border .25s ease;
}
 
#main .submenu .m4 a:hover {
   border-bottom: 4px solid #f8ddde ;
}
h1,h2,h3 { text-transform: lowercase; }
h2 { color:#aa1919; margin-bottom: 10px; margin-top:20px; font-size:2.5rem; letter-spacing: 1px;
background: url(images/heading-1.gif) no-repeat; padding: 5px 20px 20px 100px }
h3 { font-size: 2rem; color:#777; background:url('images/heading-2.gif') no-repeat; padding: 15px 15px 20px 140px; -webkit-margin-after:0; margin-bottom:0 }
h4 { font-size:1.8rem; letter-spacing:-1px; color:#6e0307; display:block; margin:0; font-style:italic; text-align:center}

p {
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;}
.max { max-width: 760px !important; margin: 20px auto 0 auto; padding: 0 20px;}
#main p {text-indent: 30px; text-align: justify; line-height:26px;  }
#main h1 {  margin-bottom:20px; background-color:#000; color: #fff; display:inline; font-weight: 300; padding: 0px 25px 0px 50px; font-size:3rem; letter-spacing: 1px }
#main p:nth-child(2) { font-size:110%; line-height: 30px; text-indent:0; }
.bio { text-indent:0; color:#999; width:80%; margin:35px auto; font-size:20px; line-height: 24px }
.bio strong { font-size:16px; background-color:#ddd; color:#777; text-transform:uppercase; padding:0 5px; }
#chara { font-size:85%; color:#666; }
#chara img { margin-top:15px; }

.update { margin: 20px auto; padding: 8px; width:70%; font-size:120%; text-align:center; color:#888; background-color:#ddd; opacity:0.8; border-bottom: 4px solid #bbb }
.update em { color:#666; }
#main a { color:#dd1d24; -webkit-box-shadow: inset 0px -5px 0px -3px #999); padding:0 3px;
-moz-box-shadow: inset 0px -6px 0px -3px #ddd;
box-shadow: inset 0px -6px 0px -3px #ddd; }
#main a:hover { color:#f26b6a;
-webkit-box-shadow: inset 0px -20px 0px 0px #eee);
-moz-box-shadow: inset 0px -20px 0px 0px #eee;
box-shadow: inset 0px -20px 0px 0px #eee;
border-bottom:0px}
#main img { border:6px solid #333; margin-left: 15px; margin-right:15px;  opacity:0.7; max-width:100%; height:auto; padding:1px;
   -webkit-transition: opacity .5s ease;
      -moz-transition: opacity .5s ease;
        -o-transition: opacity .5s ease;
       -ms-transition: opacity .5s ease;
           transition: opacity .5s ease;
}
#main img:hover { opacity:1.0; border-color:#ac1718; }
.right { float: right; }
.left { float: left }
.center { margin: auto; text-align:center; display:block; }
em { color:#929292; font-size:90% }
u { color:#8e1216; }
s { color:#999; text-decoration-color: #dd616d; }
q { color:#777; background-color:#f8ddde; padding:0 3px; font-style:italic; font-size:90%}
strong { color:#dd616d; font-weight: 700; }
q::before { content: “ }
.close { text-indent:0; text-align:right; margin-top:20px; margin-right:40px; font-size:20px; letter-spacing:-1px;}
#main .close::before { content: "\2767"; padding-right:5px; color:#999; font-size:120%; font-style:normal }
#main .close a { color:#ab4e56; padding: 0px 5px; border-bottom:0;font-style:italic; }
#main .close a:hover { background:none; color:#afafaf; }
dt { background-color:#333; color: #fff; display:inline; font-weight:300; padding: 0px 15px; font-size:18px; letter-spacing: 0px; line-height:1.6 }
dd { margin-bottom:20px; line-height:1.6; margin-top:5px}
dd dt { background-color:transparent; color:#8e1216; padding:0; font-style:italic; font-size:16px; margin-top:0 }
#main ul { margin-left: 60px; color:#787279; margin:0 auto; width:80% }
ul li { padding:0; list-style:outside square  }
.divider { width:80%; margin: auto; color:#aaa; font-size:18px; text-align: center}
.divider:before {content: '\2014 \2766 \2014'; }

/* SUBMENU */
.submenu { width:80%; margin:0 auto; border-bottom: 1px solid #ddd; line-height:24px; }
#main .submenu .m4 a { font-style:italic; font-size:110%; letter-spacing:-1px; line-height:28px; font-family: 'playfair display',serif; box-shadow:none }
.submenu .m8 { color:#787279; padding-top:4px }

/* QUOTES */
blockquote { font-size:20px; width:80%; margin:20px auto; color:#999; border-left: 0px;
background: #eee; padding:30px 20px 20px 20px; opacity: 0.9; border-bottom:5px solid #ccc; }
blockquote:hover {opacity: 1.0; background-color:#e9e9e9}
blockquote .footer { font-size:14px; color:#dd616d; margin-top: 10px; display:block; width:100%; text-align:right; }
blockquote .footer::before { content:"\2014" }
blockquote span.char { text-transform: uppercase; color:#dd616d; font-family:petrona,sans-serif; font-size:90%  }
blockquote.dialogue { border-bottom:none;  url('images/bq-dia.jpg') repeat-y; font-size: 16px; text-indent: 0px; padding:15px 25px;
opacity: 0.9; }
blockquote.dialogue:hover { opacity: 1.0; }
blockquote.dialogue .footer { text-transform: uppercase; margin-top:10px; text-align:left; font-size: 70%; color:#c54551; width:100%; text-align:right; }

/* FANLISTING */
#main form p { text-indent:0; }
input,textarea,select,option { background-color:#eee; opacity:0.8; border:0px; box-shadow: 0px 2px #ccc; font-family:'playfair display',serif; font-size:20px; color:#dd616d; padding: 5px}
select,textarea { font-size:16px; }
input[type=radio],input[type=checkbox] { box-shadow:none }
input[type=submit],input[type=reset] {  opacity:1.0; font-size:18px; padding: 5px 15px}
input[type=submit] { box-shadow:none;background-color:#333; color:#f6f6f6 }
input[type=submit]:focus { background-color:#aa1919 }
input[type=reset] { box-shadow:inset 0 0 0 2px #999;background-color:#ccc; color:#666 }
input[type=reset]:focus { opacity:0.8}
#main p.list { text-indent: 0 }
.list strong { font-size:22px; }


/* FOOTER */
footer { background: color:#999; margin:40px 0 0 0;
font-size:12px; line-height:18px; min-height:104px; height:auto; }
.col { padding:0 20px; margin:0;}
footer a { color:#888; }
footer em, footer strong { color:#8e1216 }
footer img { border:0; margin:-20px auto; display:block; }
footer .content { padding: 20px 0}
footer a:hover { text-decoration:underline; color:#d9464f }

#footnav { display:block }
.clear { clear:both; }

@media screen and (max-width: 600px) {
  .bio {display: block; width:100%; font-size:18px }
  #main h1 { font-size:6vw; }
  h2, h3 { font-size:5vw }
  #main p { line-height: 24px; }
  #main p:nth-child(2) { line-height: 26px }
  #main img { max-width: 100%; height: auto; margin-left: 0; margin-right: 0 }
  #main img.left, #main img.right {margin-left:15px; margin-right: 15px}
  blockquote { font-size:18px; }
  blockquote.dialogue { font-size:14px; }

}
@media screen and (max-width: 400px) {
  .left, .right { float: none; display: block; margin: auto; position: relative; top:0; left:50%; transform: translate(-50%,0);}
  .submenu .m8 { padding-top:0px; padding-bottom:3px; }
  .submenu .m4 { padding-top:3px; }

}


.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #333;
    font-size:12px; color:#c7c7c7;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content:'';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltiptext a { box-shadow: none; }