/*
CSS for The Eve of Spring: The Kurama/Botan (KuraBo) Fanlisting
KXB.NORTHSTAR.NU [ver. 2]
Hand-coded by Ainna (https://northstar.nu) (c) 2018-2019
Fanart by Artelle (https://www.deviantart.com/ArtelleArt)
Background pattern from Toptal Subtle Patterns
*/

































































/*

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: #fbebf3; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #c4e8e8; 
}

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

html, body {
	-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 {
    margin: 0px;
    font: 16px/150% 'Montserrat', Arial, Sans-Serif;
    background: #fbebf3 url('hbg4.jpg') top left repeat-x;
    color:#3b6794;
    padding: 0px;
}

a, a:visited, a:active  {
    /*color:#be5672; */
    color: #cc6699;
    text-decoration: none;
}

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

h3 {
    font: 16px/120% 'Century', verdana, sans-serif;
    color: #d55d6c;
}

del, strike {
    color:#90a599;
}

b, strong, em, i, abbr {
     color:#4a7f89;
}

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 {
	border: 1px dotted #4a7f89;
	font-size: 14px;
	text-transform: uppercase;
	background: #f9eeef;
	padding: 5px;
	padding: 10px;
	color: #281c3c;
}

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

.left {
    text-align: left;
}

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

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

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

.shadow{
    -moz-box-shadow: 10px 8px #edeeed;
    -webkit-box-shadow: 10px 8px #edeeed;
    box-shadow: 10px 8px #edeeed;
}

.bq, blockquote {
    width: 100%;
    background: #e2e1ef;
    text-align: center;
    padding: 10px;
    color: #627372;
}

.stat, .credit, .bq, blockquote {
    color: #888;
    text-align: center;
    text-transform: uppercase;
    /*margin-left: -10px;*/
    background: #e2e1ef;
    padding: 10px;
    letter-spacing: 1px;
}

.stat {
    font: 14px/150% 'Vollkorn', Garamond, Serif;
}


.credit {
    font: 8px/150% 'Vollkorn', Garamond, Serif;
}

#stats {
    width: 50%;
    margin: 0 auto;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    font: italic 11px/100% 'Vollkorn', Garamond, Serif;
}

.members {
    margin: 0 auto;
    width: 90%;
    background: #e2e1ef;
    font: 12px/120% 'Vollkorn', Garamond, Serif;
    letter-spacing: 1px;
    padding: 10px;
    text-transform: uppercase;
}

.members ul {
    margin-left: 20px;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

#menu ul {
    margin-left: 20px;
    columns: 3;
    -webkit-columns: 3;
    -moz-columns: 3;
}

.bq, blockquote {
    font: 14px/150% 'Vollkorn', Garamond, Serif;
}



.def {
    font: 12px/180% 'Montserrat', Verdana, Sans-Serif;
    text-align: justify;
    color: #555;
}

.av {
	border-radius: 50%;
	margin-right: 20px;
	margin-bottom: 20px;
	width: 150px;
	height: 150px;
}

.text {
    width: 90%;
    margin: 0 auto;
}

.textleft {
    width: 60%;
    float: left;
}

.textright {
    width: 28%;
    float: right;
    padding: 10px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


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;
}

table {
	border-collapse:collapse;
	border:1px solid #9db9af;
    text-align: center;
    background: #e2e3d7;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    -khtml-border-radius: 10px; 
}

td, th {
	padding:5px;
}

th {
    color: #fff;
	background: #93bdb2;
    text-transform: uppercase;
}

.odd {
    background: #a0d3d4;
}

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

.affiliates {
    width: 100%;
}

#container {
    width: 1088px;
    margin-left: auto;
    height: 100%;
}

#header {
    background: url('kxb by artelle.jpg') no-repeat;
    width: 1088px;
    height: 471px;
    text-align: right;
}

#menu {
  position: absolute;
  right: 460px;
  top: 350px;
  width: 550px;
  height: 70px;
  background: #e2eaea;
  padding: 10px;
}

#menu ul {
    text-align: center;
    margin: 3px 0 0 -15px;
    text-transform: uppercase;
}

#menu ul li {
    list-style: none;
    display: inline;
}

#menu a, #menu a:active, #menu a:visited {
    font: 20px/150% 'Quicksand', 'Book Antiqua', Garamond, Serif;
    color: #cc6699;
}

#menu a.alt {
     color: #368988;
}

#menu a:hover {
    color: #7587c9;
    border-bottom: 1px solid #d55d6c;
    text-shadow: 1px 1px 2px #c5e4df;
}

#button {
    margin: 0 auto;
    width: 440px;
    text-align: center;
}


#content {
  padding: 20px;
  text-align: justify;
  margin: 0 auto;
}

#content h2 {
    color: #8a9dac;
    font: 22px/120% 'Caveat', 'Book Antiqua', Garamond, Serif;
    letter-spacing: 5px;
    text-align: center;
    margin-bottom: -5px;
    text-transform: uppercase;
}

#content p {
    /*margin-top: -10px;
    margin-bottom: 30px;*/
}

#content ul {
    margin-left: 5px;
    padding-left: 0;
    list-style: none;
}

#content ul li {
    padding: 5px 0px 2px 20px;
    background: url(bullet.gif) no-repeat 0 5px;
    font: 12px/120% 'Vollkorn', Georgia, Serif;
    text-align: left;
}


#footer {
    width: 50%;
    padding: 20px;
    float: left;
    margin-left: 60px;
    text-align: center;
    font: 8px/100% 'Vollkorn', Georgia, Serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
}