/* 
designed & coded by larissa of redcrown.net for pkmn.redcrown.net/gyarados
released under CC BY-NC-SA 4.0 -- http://creativecommons.org/licenses/by-nc-sa/4.0/
*/

body {
background: url(../img/contentbg.gif);
font:400 20px/26px  "Lato", "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
position:relative;
}

/* header */
.header { background-size:cover; }
#gyara { background:url('../img/bg.jpg'); }
.header img { 
margin:0 auto;
border:0px !important;
padding:0px;
}

.header img:hover {border:0px !important; }

/* sprites */

.navbar {
background:url('../img/bg.jpg');
border:0px;
}

.nav, .navbar-nav {
margin: 0 auto !important;
text-align:center;
}

.nav li:nth-child(2) {
margin-left:-147px !important;
}

img.sprite {
background:rgba(255,255,255,0.5);
padding:10px !important;
margin:20px auto;
border:8px solid #4384c6 !important;
box-shadow:10px 10px 0px rgba(255,255,255,0.2);
}

img.sprite:hover { background:rgba(255,255,255,0.5); border:8px solid #4384c6 !important;
}

/* content */

#content {
margin-top:20px;
}

.insetbox {
margin-bottom:10px !important;
}

.inset {
background:rgba(255,255,255,0.5);
box-shadow:10px 10px 0px #8FBBE4;
margin-top:15px;
margin-bottom:20px;
font-size:18px;
line-height:22px;
font-style:italic;
color:#777;
padding:10px;
}



.pokemon span {
width:150px !important;
display:inline-block;
font-size:20px;
line-height:24px;
margin:5px;
opacity:0.8;
box-shadow:3px 3px rgba(150,150,150,1),  -3px -3px 0px 0px rgba(255,255,255,1);
text-shadow: 2px 2px 0px rgba(150, 150, 150, 1);
}

.pokemon span:hover { opacity:1; }
/* label colors */
.label-water { background-color:#6890f0; }
.label-normal { background-color:#a8a878; }
.label-dark { background-color:#705848; }
.label-rock { background-color:#b8a038; }
.label-ice { background-color:#98d8d8; }
.label-ground { background-color:#e0c068; }
.label-dragon { background-color:#7038f8; }


ul {
list-style-type:none;
list-style-image:url(../img/list.png);
margin-left:50px !important;
}

li {
line-height:30px;
}


/* footer */

.line {
width:100%;
height:56px;
background:url(../img/line.jpg);
}

.foot {
margin-top:15px;
}

.flip { background:url('../img/flip.jpg'); }

#footer {
background:url(../img/darkblue.jpg);
color:#d5def6;
text-align:center;
width:100%;
font-size:18px;
line-height:24px;
}

#footer a {
color:#f1ccaf;
}

#footer a:after {height:3px; bottom:-3px; }

#footer span { color:#d29bc6; }

/* general text styles & utilities */

b, strong { font-family:Lato, 'lucida sans unicode', arial, sans-serif; color:#20aaac; font-weight:900; }
i, em { font-family:Lato, 'lucida sans unicode', arial, sans-serif; color:#208bac; font-weight:700; }
p.right { text-align:right; line-height:15px; padding-bottom:0px; clear:right; }
small { font-size:14px; line-height:18px; }
/*span { color:#ee6241; }*/
code { font-family:"Ubuntu Mono", "courier new", monospace; color:#4B5B6B; background:rgba(255,255,255,0.8); }
.big { font-size:22px; line-height:30px; }

blockquote {
border:0px;
background:rgba(255,255,255,0.5);
box-shadow:10px 10px 0px #8FBBE4;
margin-top:10px;
text-align: center;
}

hr {
height:32px;
background:url(../sprites/miniani.gif) top center no-repeat;
border:0px;
}

/* links
adapted from http://callmenick.com/post/simple-css3-transitions-transforms-animations-compilation
*/

a {
text-decoration:none;
color:#2c6dae;
position:relative;
font-weight:900;
cursor:crosshair;
}

a:after {
display: block;
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 5px;
background-color: #fff;
content: "";
transition: width 0.3s;
}
a:hover {
color: #2c6dae;
text-decoration: none;
}
a:hover:after {
  width: 100%;
}

a.none:after  { display:none !important; }


/* text headers

h1 {
font-family:Molot, Lato, helvetica, arial, sans-serif;
font-size:30px;
line-height:30px;
background-color:rgba(255,255,255,0.5);
padding:10px 0px;
width:100%;
}*/

/* images */

img.b {
background:rgba(255,255,255,0.5);
padding:0x !important;
margin:5px auto;
border:8px solid rgba(255,255,255,0.2) !important;
box-shadow:10px 10px 0px #8FBBE4;
}
img.b:hover { border-color:#4d9097; background:#F8F8F8; }
img.right { float:right; margin:0px 0px 5px 5px; }

.aff img, .codes img {
box-shadow:5px 5px 0px #8FBBE4 !important;
margin-right:10px;
margin-bottom:10px;
}

.aff img:hover, .codes img:hover {
box-shadow:5px 5px 0px #208bac !important;
}

/* index */

#left {
float:left;
margin:0px 30px 20px 0px;
font-size:14px;
line-height:16px;
font-style:italic;
color:#777;
text-align: center;
}

.start, h1, h2 {
font-family:molotregular, lato, helvetica, arial, sans-serif;
color:#4B5B6B;
font-size:26px;
line-height:32px;
}

.start a, .join a { font-weight:400; }

.join {
font-family:molotregular, lato, helvetica, arial, sans-serif;
font-size:22px;
line-height:24px;
color:#2c6dae;
}

.join a {
color:#4B5B6B;
}


/* fanlisting */

h3 {
font-family:molotregular, lato, helvetica, arial, sans-serif;
color:#4B5B6B;
text-align:center;
font-size:20px;
line-height:26px;
}


h4 {
font-family:molotregular, lato, helvetica, arial, sans-serif;
color:#4B5B6B;
font-size:22px;
line-height:28px;
}

input, textarea {
background:rgba(255,255,255,0.5);
padding:2px;
border:3px solid #2c6dae;
font:18px/24px Lato, "trebuchet ms", tahoma, verdana, arial, sans-serif;
color:#000;
margin:5px 0px;
}

select { 
padding:2px;
border:3px solid #2c6dae;
font:18px/24px Lato, "trebuchet ms", tahoma, verdana, arial, sans-serif;
color:#000;
margin:5px 0px;
background:rgba(255,255,255,0.5);
}

option { 
padding:2px;
font:18px/24px Lato, "trebuchet ms", tahoma, verdana, arial, sans-serif;
color:#000;
margin:5px 0px;
background:rgba(255,255,255,0.5);
}

input:focus, textarea:focus, select:focus { 
border-color:#20aaac; 
}

.help {
cursor:help;
}

.center { text-align:center; }

.flstat { text-align:left; }


/* fonts */

@font-face {
    font-family: 'molotregular';
    src: url('../fonts/Molot-webfont.eot');
    src: url('../fonts/Molot-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Molot-webfont.woff') format('woff'),
         url('../fonts/Molot-webfont.ttf') format('truetype'),
         url('../fonts/Molot-webfont.svg#molotregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* media queries */

/* responsive nav */

@media (max-width:420px) {
	.navbar {
    display:none;
	}
    .push-center {
    text-align:center;
    }
    
}

@media (min-width:420px) and (max-width:768px) {
	.navbar {
    display:none;
	}
    .push-center {
    text-align:center;
    }
    

}

@media (min-width:768px) and (max-width:1200px) {
    .push-center {
    text-align:center;
    }
    .push-top {
    margin-top:40px;
    }

}


@media (min-width:1200px) {
    .push {
    margin-left:20px;
    }
    .push-right {
    text-align:right;
    margin-left:20px;
    margin-right:-20px;
    }

    .push-top {
    margin-top:40px;
    }
}

/* 
animation
thanks to mikari of azurelight.net for this!
*/

#evolve { width:192px; height:192px; 
overflow:hidden; display:inline-block; margin-top:-50px; margin-left:15px; }

#evolve img { border:0px; }
#evolve img:hover {background:none; }

#magikarp, #gyarados { float:left;
animation-duration: 10s;   
animation-delay: 0s;   
animation-timing-function: linear;   
animation-iteration-count: 1;   
animation-direction: normal;   
animation-play-state: running; }

#magikarp { animation-name: evokarp;   
opacity:0; }

@keyframes evokarp {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:0; } 
}

#gyarados { animation-name: evodos;   
opacity:1; position:relative; top:-192px; }

@keyframes evodos {
0% { opacity:0; }
50% { opacity:0; }
100% { opacity:1; }
}