/*
CSS for THE ONE THING: The Tony/Pepper Fanlisting | ver. 3
Hand-coded by Ainna (fan.minty.nu) (c) 2019-23

Fanart by Beck, used with permission from the artist.
https://www.tumblr.com/chatnoircreatif

Image use is guided by the Fair Use Clause (https://fairuse.stanford.edu/overview/fair-use/what-is-fair-use/)

No copyright infringement intended. 

*/

































































/*

LEARN

FROM

YOUR

OWN

SOURCES!


Feel free to learn from bits and parts of the css here, but do NOT just copy and paste the ENTIRE style and html markup here to get my layout. That's plagiarism, and it's just not cool. I put together a LOT of tutorials in the web to come up with the final design, so it would be nice if you could RESPECT my efforts a little. Learn from your own research, and give credit where credit is due!

*/





























/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fff; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #dbd6c5; /*#a68455;*/
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #d9d1c1; 
}

html, body {
	height: 100vh;
	 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

body {
    width: 100vw;
    overflow-x: hidden;
    margin: 0px;
    padding: 0px;
    font: 16px/140% 'Raleway', Verdana, Sans-serif;
    background: #fff;
    color: #787878; /**/
}

a, a:visited, a:active  {
    color: #707F77;
    border-bottom: 1px dashed #eee;
    text-decoration: none;
}

a:hover, #footer a:hover {
    text-decoration: none;
    background: #E0CDBD;
}

b {
    color: #417fa6;
}

em, i {
    color: #608a7f;
}

h1, h2 {
    text-align:left;
    letter-spacing:-1px;
}

h1 {
    font:italic 28px/80% 'Lora', Serif;
    color: #CD7670;
    text-transform: uppercase;
}

h2 {
    font:24px/100% 'EB Garamond', Serif;
    color: #707F77;
}

.title {
    font-size: 20px;
    color: #BB7766;
    text-align: right;
}

.h1line, .splashline {
    margin-top: -10px;
    margin-bottom: -10px;
    border-bottom: 3px solid #aaa;
}

.h1line {
    width: 20%;
}

.splashline {
    width: 15%;
}

del, strike {
    color:#90a599;
}

ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

ul li {
    padding: 5px 0px 2px 25px;
    background: url(arrow.gif) no-repeat 0 3px;
    line-height: 12px;
    text-align: left;
}

hr {
border: 0;
height: 3px;
/*background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #8fb9af, rgba(0, 0, 0, 0));*/
}

fieldset {
    border:0px;
    margin:auto;
}

input, textarea, select, input[type=submit], input[type=reset] {
    border:1px solid #75b8ae;
	font: 14px/100% 'Coda', Verdana, Tahoma, sans-serif;
	/*text-transform: uppercase;*/
	background: inherit;
	padding: 10px;
}

input[type=submit], input[type=reset] {
    width: 150px;
    text-transform: uppercase;
}

input[type=text], textarea, select {
    width: 68%;
}

textarea {
overflow-x: hidden;
overflow-y: hidden;
width: 400px;
height: 200px;
}

.nbsp {
    margin-right: 5px;
}


.corners, input, textarea, select, button {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px; 
    -khtml-border-radius: 20px; 
}

.opacity, input, textarea, select, .bq, blockquote, #footer, .enthver {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75;
}

.joinform {
    margin: 0 auto;
    text-align: center;
}

.addform {
    text-align: left;
    margin: 10px;
    width: 100%;
    position: relative;
    left: 25%;
}

.center {
    text-align:center;
    margin:0 auto;
}



.left {
    float: left;
    padding-right: 20px;
    height: 100%;
}

.right {
    float: right;
    padding-left: 20px;
    text-align: justify;
}

.fls {
  float: right;
  margin-top: -220px;
}

.exits {
  float: right;
  margin-top: -100px;
}

.margin {
    margin-left: 100px;
}


.accent {
    color: #e19f9f;
}

.corners, input, textarea, select, .bq {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px; 
    -khtml-border-radius: 20px; 
}

.opacity, .enthver, #menu {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: alpha(opacity=65);
    opacity: 0.65;
}

.shadow, .name, .sitewide {
    -moz-box-shadow: 5px 5px 3px rgba(69, 126, 131, 0.4);
    -webkit-box-shadow: 5px 5px 3px rgba(69, 1265, 131, 0.4);
    box-shadow: 5px 5px 3px rgba(69, 126, 131, 0.4);
}

.nbsp {
    margin: 0 3px 2px 0;
}


.bq, blockquote {
    background-color: rgba(211, 222, 218, 0.4);
    width: 75%;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    font-size: 12px;
    letter-spacing: 1px;
}

.stat, .enthver {
    width: 85%;
    color: #777;
    padding: 5px;
    font: 10px/100% 'Muli', Verdana, Sans-serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.stat a, .stat a:active {
    border-bottom: 0px;
}

.scented {
    letter-spacing: 1px;
    text-transform: lowercase;
    font: 10px/100% Verdana, Sans-serif;
}

.quote {
    font: 14px/140% 'Montserrat', Verdana, Sans-Serif;
    letter-spacing: 1px;
}

.subnav {
    font: 13px/140% 'Montserrat', Verdana, Sans-Serif;
}


#inset {
    width: 40%;
    padding: 10px 5px;
    margin: 0px 0px 0px 10px;
    text-transform: none;
    border: 1px dashed #ccc;
}


.def {
    font: 13px/130% 'Roboto Slab', Verdana, Sans-serif;
    text-align: justify;
}

.av {
	width: 80px;
	height: 80px;
    box-shadow: 5px 5px rgba(0,0,0,0.4);
    margin: 8px;
}


img.trans {
filter:Alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
border:none;
}

img.trans:hover {
filter:Alpha(opacity=100);
-moz-opacity:1.00;
opacity:1.00;
border:none;
}


#container {
    width: 1300px;
    height: 700px;
    margin: 0 auto;
    position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#left {
        float: left;
        /*padding: 30px;*/
}

#header {
        background: url('Pepperony by Beck.png') no-repeat;
        background-size: contain;
        width: 715px;
        height: 640px;
        margin: 0 auto;
        padding-top: 20px;
}

#footer {
       width: 100%;
       margin:0 auto;
       color: #768c80;
       padding: 10px;
       text-align:center;
       font: 10px/100% 'Montserrat', Verdana, Sans-Serif;
}

#footer a {
    color: #7089a9;
}

#right {
    width: 550px;
    /*padding: 30px;*/
    float: left;
    margin-left: 20px;
}

#content {
    text-align: justify;
    padding-right: 20px;
    /*height: 640px;*/
}


#menu {
  height: 45px;
  padding-top: 30px;
  text-align: center;
  font: 18px/120% 'Montserrat', Verdana, Sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  color: #5676A2;
}

.tabcontent {
  background: inherit;
  width: 100%;
  height: 520px;
  display: none;
  padding: 0 30px 0 10px;
  border-top: none;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: justify;
  animation: fadeEffect 0.7s; /* Fading effect takes 1 second */
}

.tab {
  overflow: hidden;
  margin: 0 auto;
  z-index: 10;
  text-align: center;
}

#menu a, #menu a:active, #menu a:visited, #footer a, #footer a:active, #footer a:visited {
    color: #5676A2;
    border-bottom: 0;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}