Ever Blue

<!DOCTYPE html><html><head>


<title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:TagPage} | {Tag}{/block:TagPage}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}


<!---
                        [ #01 ] - Ever Blue
                + PAGE BY VALHALLASGODDESS/VALKYRIETHEMES +

    - DO NOT remove credit
    - DO NOT redistribute to make your own theme.
    - DO NOT use this as a base code.

                        + CREDITS +
    - Music Player by Fukuo
    - Pop up by Starious
    - Fish Gadget by Abowman
    - Accordion CSS by Codrops

------->

                        <!--- TOOP TIPS --->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://static.tumblr.com/3lcgguq/DCPn25qvq/jquery.style-my-tooltips.js"></script>
<script src="http://static.tumblr.com/3lcgguq/Eifn25qw3/style-my-tooltips.css"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:200,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>
<style>
#s-m-t-tooltip{
max-width:300px;
z-index:10;
margin:24px 14px 7px 12px;
padding:5px;
padding-bottom:7px;
background:#232323;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 3px #232323;
-webkit-box-shadow:0px 0px 3px #232323;
box-shadow:0px 0px 3px #232323;
font-family: "tinytots";
text-transform: uppercase;
font-size:8px;
color:#ffffff;}

@font-face { font-family: "alienleague"; src: url('http://static.tumblr.com/3lcgguq/SIdn1bh78/alienleague.ttf'); }

@font-face {
font-family: "tinytots"; src: url('http://static.tumblr.com/3lcgguq/UXPn25o2c/tinytots.ttf'); }

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }

::-webkit-scrollbar-thumb:vertical {
background-color: #77bbee; <!--- This is the Scrollbar color --->
height: 50px;}

::-webkit-scrollbar-button:start:decrement {
display:block;
height:15px;
width: 5px;
background-color: #77bbee;} /* This is the Scrollbar's Top color */

::-webkit-scrollbar-button:end:increment {
display:block;
height:15px;
width: 5px;
background-color: #77bbee;} /* This is the Scrollbar's Bottom color */

::-webkit-scrollbar {
height: 5px;
width: 5px;
background-color: #fff;} /* This is the Scrollbar's Background Color */

body {
background-color: #e2f7f7; /* This is the overall background color */
background-image:url(''); /* This is where you change the background image */
background-attachment: fixed;
background-repeat: repeat;}

a {
text-decoration: none;
color: #F57A58; /* This is the color of a link */
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}

a:hover {
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
text-decoration: line-through;}

b {
color: #abc123;} /* This is the bolded color of the font */

i {
color: #B08fcd;} /* This is the italicized color of the font */

#topbar {
position: fixed;
width: 100%;
height: 50px;
top: 0px;
z-index: 10;
left: 0px;
background-color: #bddde8;} /* This is the color of the Top bar */

#container {
width: 100%;
height: 100%;}

#leftaquarium {
width: 25%;
height: 83%;
position: fixed;
top: 100px;
left: 7.5%;
border: 1px solid #bddde8;} /* This is the border color of the aquarium on the left */

#rightaquarium {
width: 25%;
height: 83%;
position: fixed;
top: 100px;
right: 7.5%;
border: 1px solid #bddde8;} /* This is the border color of the aquarium on the right */

.ac-container{
position: relative;
top: 90px;
width: 450px;
margin: 10px auto 30px auto;}

.ac-container label:hover{
background: #fff;}

.ac-container label{
font-family: "alienleague";
padding: 15px 20px;
position: relative;
letter-spacing: 2px;
text-align: center;
display: block;
text-transform: lowercase;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 30px;
font-size: 20px;
background-color: #fff;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #EC82AF; /*********************/
color: #fff;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background-image: transparent url(../images/arrow_down.png) no-repeat center center;}

.ac-container input:checked + label:hover:after{
background-image: url(../images/arrow_up.png);}

.ac-container input{
display: none;}

.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;

transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;}

.ac-container input:checked ~ article{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}

.ac-container article p{
text-align: justify;
font-family: calibri;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}

.ac-container input:checked ~ article.ac-small{
height: 140px;}

.ac-container input:checked ~ article.ac-medium{
height: 180px;}

.ac-container input:checked ~ article.ac-large{
height: 230px;}

.titles {
width: 410px;
margin: 10px auto 10px auto;
font-family: "alienleague";
text-align: center;
letter-spacing: 2px;
text-transform: lowercase;
padding: 20px;
background-color: #bddde8;
font-size: 25px;
color: #fff;}

#bubble-music {
position:fixed;
left:20px;
top:60px;
width:30px;
height:30px;
background-color: #bddde8;
border-radius:100%;
-moz-border-radius:100%;
overflow:hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out}

#bubble-music:hover {
border-radius:9px;
color: #fff;
-moz-border-radius:9px;
width:140px;
height:30px;}

.music_embed {
margin:-23px 0 0 70px;
z-index:1;
font-family:consolas;
font-size:8px;
color: #fff;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out}

#bubble-music:hover .music_embed {
margin:-22px 0 0 8px;
color: #fff;
opacity:1;}

#etroscript {
color: #fff;
font-family: "alienleague";
text-transform: lowercase;
font-size: 25px;
margin-top: 5px;
text-align: center;}

#etrosblessing {
color: #fff;
margin-top: 2px;
font-family: "tinytots";
text-transform: uppercase;
text-align: center;
font-size: 8px;}

#etroschampion {
margin-left: -400px;
margin-top: -35px;
text-align: center;
font-family: "tinytots";
text-transform: uppercase;
font-size: 8px}

#etroschampion a{
font-family: "tinytots";
color: #fff;
width:70px;
height:10px;
text-align: center;
font-size: 8px;
margin: 5px;
padding:10px;
text-decoration: none;
margin-right: 20px;
text-transform: uppercase;
display: inline-block;}

#etroschampion a:hover {
color: #b3dde8;
background-color: #fff;}

#hi {
margin-left: 400px;
margin-top: -40px;
text-align: center;
font-family: "tinytots";
text-transform: uppercase;
font-size: 8px}

#hi a{
font-family: "tinytots";
color: #fff;
width:70px;
height:10px;
text-align: center;
font-size: 8px;
text-decoration: none;
margin: 5px;
padding:10px;
margin-right: 20px;
text-transform: uppercase;
display: inline-block;}

#hi a:hover {
color: #b3dde8;
background-color: #fff;}

#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;}

.popup_block{
display: none;
background: #FFFFFF;
padding: 20px;
float: left;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;}

img.btn_close {
float: right;
border-radius: 50%;
background-color: #fff;
margin: -55px -55px 0 0;}

*html #fade {
position: absolute;}

*html .popup_block {
position: absolute;}

</style>
<body>
<div id="popup_name" class="popup_block">
<iframe frameborder="0"
height="195"
id="ask_form"
scrolling="no"
src="http://www.tumblr.com/ask_form/PUT YOUR URL HERE.tumblr.com"
width="100%">
</iframe>
</div>
<div id="topbar">
<div id="etroscript">For the Team</div> <!--- Title of Top Bar --->
<div id="etrosblessing">We swim together!</div> <!--- Subtitle of Top Bar --->
<div id="etroschampion">
<a href="/">Home</a>
<a href="#?w=500" rel="popup_name" class="poplight">
Message
</a>
</div>
<div id="hi">
<a href="http://www.tumblr.com/dashboard">Dashboard</a>
<a href="http://www.valkyriethemes.tumblr.com">Credit</a>
</div>
</div>

<!---
This code comes with pre-edited fish colorings that resemble each of the main characters of Free! (i.e Haru, Mako, Nagisa, Rei, and Rin) but of course, you don't have to use them. If you would you like to make your own, go to http://abowman.com/google-modules/fish/ and fill it out to your preferences. In the code where it says the width and height, change it to this if you have a screen solution of 1376 x 1366 :

width: 340px
height: 532px

but remember that this is only for people who want to design their own fish codes. If you have knowledge of HTML, you can delve directly into the code itself and just change the colors of the fish below. If you are making your own code, replace my existing code with yours within the div tags.
--->

<div id="container">
<div id="leftaquarium"> <!--- This is the left aquarium --->
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor5=EC649C&up_fishColor8=F45540&up_fishColor7=F45540&up_backgroundColor=F0F7FF&up_fishColor9=F45540&up_fishName=Fish&up_fishColor1=4DB7E1&up_backgroundImage=http://&up_numFish=5&up_fishColor2=C1DD5D&up_foodColor=FCB347&up_fishColor10=F45540&up_fishColor4=B08FCA&up_fishColor6=F45540&up_fishColor3=F57A58&" width="340px" height="532px"><param name="movie" value="http://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor5=EC649C&up_fishColor8=F45540&up_fishColor7=F45540&up_backgroundColor=F0F7FF&up_fishColor9=F45540&up_fishName=Fish&up_fishColor1=4DB7E1&up_backgroundImage=http://&up_numFish=5&up_fishColor2=C1DD5D&up_foodColor=FCB347&up_fishColor10=F45540&up_fishColor4=B08FCA&up_fishColor6=F45540&up_fishColor3=F57A58&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object></div>

<div id="rightaquarium"> <!--- This is the right aquarium --->
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor5=EC649C&up_fishColor8=F45540&up_fishColor7=F45540&up_backgroundColor=F0F7FF&up_fishColor9=F45540&up_fishName=Fish&up_fishColor1=4DB7E1&up_backgroundImage=http://&up_numFish=5&up_fishColor2=C1DD5D&up_foodColor=FCB347&up_fishColor10=F45540&up_fishColor4=B08FCA&up_fishColor6=F45540&up_fishColor3=F57A58&" width="340px" height="532px"><param name="movie" value="http://cdn.abowman.com/widgets/fish/fish.swf?up_fishColor5=EC649C&up_fishColor8=F45540&up_fishColor7=F45540&up_backgroundColor=F0F7FF&up_fishColor9=F45540&up_fishName=Fish&up_fishColor1=4DB7E1&up_backgroundImage=http://&up_numFish=5&up_fishColor2=C1DD5D&up_foodColor=FCB347&up_fishColor10=F45540&up_fishColor4=B08FCA&up_fishColor6=F45540&up_fishColor3=F57A58&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object></div>


<!--- If you want to use your own music, copy everything from <embed src... all the way to that /> and replace my code with yours --->

<div id="bubble-music">
<img style="margin:7px;" src="http://media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif">
    <div class="music_embed">
    <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://db.tt/UkLBRQXl&t0=Ever Blue&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
    </div>
</div>

<!---

Okay so to make the different FAQ questions and answer boxes, what you have to do is pay attention to your coding. Do you see how it says "ac-1" for the first question and then "ac-2" for the second? For every new question, the number after ac has to match in order for it to work. For example, if you had a fifth question, you would write "ac-5" and if you had six, you'd write "ac-6". Another thing to pay attention to is the actual size of the answer box. Where it says "ac-small", that is the designated size. It goes from ac-small, ac-medium, and lastly, ac-large. Depending on how much you write in an answer, you should change that article class to fit.

Copy and Paste this code to get a new box but remember to change the ac-# to whatever question you're on:

<section class="ac-container">
    <div>
        <input id="ac-#" name="accordion-1" type="checkbox" />
        <label for="ac-#">QUESTION</label> <!--- Write your question here
        <article class="ac-small">
            <p>Answer</p> <!--- Your answer goes in between the <p> and </p>
        </article>
        </div>
    <div>

If you want to have a title before your next question, paste this and write in your title:

<div class="titles">Title</div>

--->

<section class="ac-container">
<div class="titles">Title</div>

<!--- Start of First Question --->

    <div>
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1">Question</label>
        <article class="ac-small">
            <p>Answer</p>
        </article>
        </div>
    <div>

<!--- End of First Question --->
<!--- Start of Second Question --->
        <div>
        <input id="ac-2" name="accordion-1" type="checkbox" />
        <label for="ac-2">Question</label>
        <article class="ac-small">
            <p>Answer</p>
        </article>
        </div>

<!-- End of Second Question --->
      <div>
        <input id="ac-3" name="accordion-1" type="checkbox" />
        <label for="ac-3">Question</label>
        <article class="ac-small">
            <p>Answer</p>
        </article>
        </div>
            <div>
        <input id="ac-4" name="accordion-1" type="checkbox" />
        <label for="ac-4">Question</label>
        <article class="ac-small">
            <p>Answer</p>
        </article>
        </div>
        <div>
        <input id="ac-5" name="accordion-1" type="checkbox" />
        <label for="ac-5">Question?</label>
        <article class="ac-small">
            <p>Answer</p>
        </article>
        </div>



<!--- DON'T TOUCH ANYTHING BELOW THIS --->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>



$(document).ready(function() {

	//



//When you click on a link with class of poplight and the href starts with a #

$('a.poplight[href^=#]').click(function() {

    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size



    //Pull Query & Variables from href URL

    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query string value



    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');


    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;



    //Apply Margin to Popup

    $('#' + popID).css({

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft

    });



    //Fade in Background

    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies



    return false;

});



//Close Popups and Fade Layer

$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...

    $('#fade , .popup_block').fadeOut(function() {

        $('#fade, a.close').remove();  //fade them both out

    });

    return false;

});





});

</script>
</section>

</div>
</body>
</head>
</html>