/*
CSS for That's My Spot: The Sheldon Cooper Fanlisting [ver. 2]
Featuring fanart by Pulvis (https://deviantart.com/pulvis)
Hand-coded by Ainna (https://fan.minty.nu) (c) 2019-2022
*/

































































/*

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!

*/












































@font-face {
    font-family: 'Our Hand Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Our Hand Regular'), url('OurHand-Regular.woff') format('woff');
}

@font-face {
font-family: 'Wicked Grit Regular';
font-style: normal;
font-weight: normal;
src: local('Wicked Grit Regular'), url('WickedGrit.woff') format('woff');
}


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

/* Track */
::-webkit-scrollbar-track {
  background: #b7d2c7;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #a1c9be; 
}

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

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 */
}


html, body {
	height: 100vh;
}

body {
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0px;
    padding: 0px;
    font: 1rem/140% 'PT Sans', Verdana, Sans-Serif;
    background: #a1c9be url(bg.jpg);
    color: #4f686c;
    height: 100%;
}

a, a:visited, a:active  {
    color:#41877c;
    text-decoration: none;
}

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

b, strong {
    color: #67a98b;
}


del, strike {
    color:#343434;
}

hr {
width: 75%;
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #85b3c9, 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;
	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;
}


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

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

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

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

img.border {
    -moz-box-shadow: 10px #eee;
    -webkit-box-shadow: 10px #eee;
    box-shadow: 10px #eee;
}


img.bw {
    filter:Alpha(opacity=90);
    -moz-opacity:0.90;
    opacity:0.90;
    border:none;
    -webkit-filter: grayscale(90%); /* Safari 6.0 - 9.0 */
    filter: grayscale(90%);
}

img.bw:hover {
    filter:Alpha(opacity=100);
    -moz-opacity:1.00;
    opacity:1.00;
    border:none;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    transition: .5s ease;
}

.bq, blockquote, .leftstat {
    line-height: 100%;
    width: 80%;
    background: #e2eaec;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    font-size: 0.8rem;
    letter-spacing: 1px;
}


.stat {
    margin: 0 auto;
    text-align: center;
    font: 12px/100% Verdana, Sans-serif;
    text-transform: lowercase;
    letter-spacing: 1px;
    padding: 10px;
    margin-top: -5px;
    color: #ab7d82;
}

.bignumbers {
    font-size: 250%;
}


.leftstat {
    width: 35%;
    float: left;
    text-align: center;
    padding: 20px;
    margin: 8% 20px 8% 0;
}


.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;
    transition: .5s ease;
}

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

.clearfix {
	clear: both;
}


#shape {
    width: 1024px;
    height: 627px;
    margin: 0 auto;
    position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#sheldon {
    background: url('sheldon cooper by pulvis 3b.jpg') no-repeat;
    width: 1024px;
    height: 627px;
    margin: 0 auto;
}

.side {
  height: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 520px;
  background: #f1f1f1 url('bg.jpg') repeat top left;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 20px;
}


.sheldon {
    width: 1024px;
    height: 627px;
    
}

#right {
    width: 550px;
    height: 390px;
    overflow-y: auto;
    position: relative;
    top: -420px;
    right: 30px;
    float: right;
}

/*vhcenter
.sheldon {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}*/


#main {
  /*text-align: center;
  width: 700px;
  margin: 0 auto;*/
}

.main {
  margin-left: 50px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
  height: 680px;
  overflow-x: auto;
}

/*@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}*/


#menu {
  height: 72px;
  width: 100%;
  background: #e2eaec url('menubg.jpg') repeat-x;
  position: absolute;
  top: 543px;
}

/* Style the tab */
.tab {
  overflow: hidden;
  text-align: center;
  width: 530px;
  position: fixed;
  top: 140px;
  right: 30px;
  float: right;
  background: #95bcb0;
  padding: 10px 5px;
}

/* Style the buttons inside the tab */
.tab button {
  text-transform: uppercase;
  font: 20px/120% 'Wicked Grit Regular';
  color: #edf2d2;
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #fff;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 20px;
  margin-top: -20px;
  text-align: justify;
}

.tabcontent {
  animation: fadeEffect 0.7s;
}

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

.splash {
    margin-left: 0 auto;
    text-align: right;
}

.center {
    text-align:center;
}


.quote {
    font: italic 40px/100% 'Unica One', 'Vollkorn', Georgia, Serif;
    color: #725453;
}

#flnav ul, #flnav ol, #members ul {
   columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

#members ul li {
    margin: 0 auto;
    list-style: none;
    border-bottom: 1px dotted #555;
    padding: 10px 15px;
    background: url('check.gif') no-repeat 0 10px;
    margin: 5px 20px 0px 0px;
    line-height: 80%;
}

.nbsp {
    margin-right: 5px;
}

.name {
    font-size: 120%;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.country {
    font-size: 80%;
    font-style: italic;
}



h1, h2 {
    font: 60px/100% 'Our Hand Regular', Garamond, Serif;
    color: #75b8ae;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom:-5px;
}

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

#nsnu ul li {
    padding: 5px 0px 2px 25px;
    background: url(arrow.gif) no-repeat 0 10px;
    text-align: left;
}

#footer {
    width: 85%;
    margin:0 auto;
    text-align:center;
    z-index:3;
    margin-bottom: 10px;
}

#footer, .enthver {
    font: 11px/100% 'Coda', Verdana, Sans-Serif;
    color: #627f7b;
}