/*

CSS for OF THIMBLES AND ACORNS: The Fanlisting for Peter Pan and Wendy [Ver. 2]
HTML and CSS Hand-coded by Ainna (c) 2023

Peter Pan and Wendy Moira Angela Darling are characters from J.M. Barrie's "Peter Pan," now in the public domain.

Images are screencapped from the official "Peter Pan" (2003) film trailer, directed by P.J. Hogan and starring Jeremy Sumpter and Rachel Hurd-Wood.

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

Background pattern from Toptal Subtle Patterns.

This is a non-profit, fan-based site.
No copyright infringment is intended.

*/




























































































/*

                         -------------------------------
                         |          L E A R N          |         
                         |                             |
                         |           F R O M           |
                         |                             |
                         |           Y O U R           |
                         |                             |
                         |            O W N            |        
                         |                             |
                         |       S O U R C E S !       |    
                         -------------------------------

I put together a LOT of tutorials in the web to come up with this final design.
Copying+pasting my CSS is absolutely NOT okay. 

*/













































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

/* Track */
::-webkit-scrollbar-track {
  background: #F1F7EF; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #75b8ae; 
}

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

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;
    padding: 0px;
    font: 21px/150% 'EB Garamond', Georgia, Serif;
    background: #eee url('pwppr.png') repeat top left;
    color:#555;
    height: 100%;
}

a, a:visited, a:active {
    color: #EE522F;
    text-decoration: none;
    border-bottom: 1px dotted #91beab;
}

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

b, strong, th {
    color: #6191BF;
}

i, em {
    color: #89B885;
}

del, strike {
    color:#bbb;
}

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

.nbsp {
    margin-right: 5px;
}


.corners, #menu, #members ul li, 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, .owners {
    -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%;
}

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


.bq, blockquote {
    background-color: #EBF3FD;
    text-align: center;
    padding: 10px;
    margin: 0 auto;
    letter-spacing: 1px;
}

.bq, blockquote {
    width: 60%;
    font-size: 16px;
    line-height:120%;
}


.stat {
    color: #777;
    text-align: center;
    text-transform: uppercase;
}


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


img {
    filter:Alpha(opacity=65);
    -moz-opacity:0.65;
    opacity:0.65;
    border:none;
}

img:hover {
    filter:Alpha(opacity=100);
    -moz-opacity:1.00;
    opacity:1.00;
    border:none;
    transition: .5s ease;
}

table {
    margin: 0 auto;
	border-collapse:collapse;
    text-align: center;
    background: inherit;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    -khtml-border-radius: 10px; 
}

td, th {
	padding:5px;
	border-bottom:1px dotted #ccc;
}

th {
	background: #F1F7EF;
    text-transform: uppercase;
}

.odd {
    background: #a0d3d4;
}

.clearfix {
	clear: both;
}


#top {
    height: 355px;
}

#gray {
    margin: 0 auto;
    width: 768px;
}

#menu {
    width: 750px;
    margin:0 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
}

#vers {
    background: url('2003-h.png') no-repeat;
    width: 768px;
    height: 479px;
    margin: 0 auto;
    margin-left: 1px;
}

#nsnu {
  width: 750px;
  margin: 0 auto;
}



/* Style the tab */
.tab {
  overflow: hidden;
  padding: 10px;
}

/* Style the buttons inside the tab */
.tab button, .tablinks {
  text-transform: uppercase;
  font: 18px/120% 'EB Garamond', Georgia, Serif;
  color: #636817;
  background-color: inherit;
  border: none;
  outline: none;
  padding: 5px 10px;
  margin: 5px;
  transition: 0.3s;
}

.lm {
    color: #6FAD44;
}

.rightstat {
    background: rgba(255, 255, 255, 0.4);
    padding: 10px;
    width: 35%;
    float: right;
    text-align: center;
    padding: 20px;
    margin-left: 20px;
}

.tab button, .tablinks, .cursor {
cursor: pointer;
}

/* Change background color of buttons on hover */
.tab button:hover, .tablinks:hover {
  color: #b52b4a;  
  text-shadow: 1px 1px 2px #ccc;
}


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

.center {
    text-align:center;
}

.tabcontent {
  animation: fadeEffect 0.7s; /* Fading effect takes 1 second */
}

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

h1, h2 {
    font: 40px/100% 'Satisfy', Garamond, Serif;
    color: #bbb;
    text-align: center;
    letter-spacing: 1px;
    margin: 60px 0 -20px 0;
}


#nsnu ul {
    margin-left: 0;
    padding-left: 50px;
    list-style: none;
    line-height: 90%;
    width: 80%;
}

#nsnu ul li {
    font-size: 18px;
    padding: 5px 0px 20px 25px;
    background: url(starbullet.gif) no-repeat 0 10px;
    text-align: left;
}

.bar {
    margin-left: 50px;
    padding-left: 20px;
    border-left: 15px solid #eee;
    width: 80%;
    font: 12px/150% 'Raleway';
}

/*.bar, table, .floralbg {
    background: url('floral footer.png') no-repeat center;
}*/


#members ul {
   columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
}

#members ul li {
    list-style: none;
    padding: 15px;
    font-size: 80%;
    line-height: 80%;
    padding: 5px 0px 2px 15px;
    text-align: left; 
    margin-bottom: 20px;
    border: 1px #fff dotted;
    background: rgba(255, 255, 255, 0.3);
}

#members ul li:hover {
    background: rgba(255, 255, 255, 0.7);
}

.country {
    font-size: 70%;
}

.anchor {
    cursor: pointer;
}

#footer {
    width: 70%;
    margin:0 auto;
    text-align:center;
    color: #627f7b;
    z-index:3;
    padding-bottom: 30px;
    
}

#footer, .stat, .enthver, .owners {
    font-family: 'Raleway', Verdana, Serif;
    text-transform: uppercase;
}

#footer, .stat {
    font-size: 10px;
    line-height: 100%;
}

.enthver {
    font-size: 8px;
}

.owners {
    font-size: 12px;
}