/*

CSS for Per Aspera Ad Astra: The "Voltron: Legendary Defender" Fanlisting
HTTPS://VLD.NORTHSTAR.NU [ver. 2]

Hand-coded by Ainna (https://northstar.nu) (c) 2019
Fanart by Teaffeine (http://instagram.com/teaffeine), used with permission

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

"Voltron: Legendary Defender" (c) Dreamworks Animation.
No copyright infringement 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. 

*/













































































































































































































































body {
    margin: 0px;
    font: 15px/140% 'Montserrat', verdana, sans-serif;
    background: #aacce6 url('vld bg.gif') top left repeat;
    color:#3b3c45;
    padding: 0px;
}

a, a:visited, a:active  {
    color:#9c605d;
    text-decoration: none;
}

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

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

del, strike {
    color:#90a599;
}

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: 0px;
	border: 1px dotted #1B2F4F;
	font: 14px/100% Rubik, Verdana, Tahoma, sans-serif;
	text-transform: uppercase;
	background: #93bdb2;
	padding: 5px;
	padding: 10px;
}

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

.joinform, input[type=submit], input[type=reset] {
    margin:0 auto;
    text-align: center;
}

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

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


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

.opacity, input, textarea, select {
    -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;
}

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

.stat {
    color: #888;
    font: 10px/100% 'Roboto Slab', Verdana, Sans-serif;
    text-align: center;
    text-transform: uppercase;
    margin-left: -10px;
}

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

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

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

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

.textright {
    width: 65%;
    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;
}

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

#header {
        background: url('vld by teaffeine.png') no-repeat;
        width: 768px;
        height: 542px;
}

#menu {
  height: 70px;
  padding: 10px;
  text-align: center;
  background: #93bdb2;
  font: 24px/120% 'Roboto Slab', Verdana, Sans-serif;
  /*position: relative;
  left: -5px;
  font: 14px/120% 'Roboto Slab', Verdana, Sans-serif;*/
}

#menu ul {
   /*columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;*/
}

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

#menu a, #menu a:active, #menu a:visited {
    color: #e6f3e4;
}

#menu a:hover {
    color: #ffffcc;
}

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


#content {
  padding: 30px;
  text-align: justify;
  margin: 0 auto;
  background: #c9e3ee;
}

#content h2 {
    color: #8a9dac;
    font: 24px 'Roboto Slab', Serif;
    letter-spacing: 10px;
    text-align: center;
    margin-top: -10px;
}

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

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

#content ul li {
    padding: 5px 0px 2px 25px;
    background: url(check.gif) no-repeat 0 10px;
    font: 12px/120% 'Roboto Slab', Verdana, Sans-serif;
    text-align: left;
}


#footer {
    padding: 20px;
    text-align:center;
    font: 8px/100% 'Montserrat', Verdana, Sans-Serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
}