iFold theme

<html>

<head>

<title>TITLE GOES HERE</title>

<!--this page has been made by sailorslayer.tumblr.com do not remove credit--->

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<style>

body

{

padding: 0;

margin: 0;

list-style: none;

background-color: #FFFFFF;

background-attachment: fixed;

background-image:url('');

margin-bottom: 50px;


margin: 0;

}


section

{

display: block;

}


.accordion

{

background-color: #FAFAFA;

border: 1px solid #ccc;

width: 600px;

padding: 10px;

margin: 50px auto;


-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;


-moz-box-shadow: 0 1px 0 #999;

-webkit-box-shadow: 0 1px 0 #999;

box-shadow: 0 1px 0 #999;

}


.accordion section

{

border-bottom: 1px solid #ccc;

margin: 5px;


background-color: #FFFFFF;

background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));

background-image: -webkit-linear-gradient(top, #FFFFFF, #BBEFFA);

background-image: -moz-linear-gradient(top, #FFFFFF, #BBEFFA);

background-image: -ms-linear-gradient(top, #FFFFFF, #BBEFFA);

background-image: -o-linear-gradient(top, #FFFFFF, #BBEFFA);

background-image: linear-gradient(top, #FFFFFF, #BBEFFA);


-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}


.accordion h2,

.accordion p

{

margin: 0;


}


.accordion p

{

padding: 10px;

}


.accordion h2 a

{

display: block;

position: center;

font: 14px/1 'Trebuchet MS', 'Lucida Sans';

padding: 10px;

color: #0574FA;

text-decoration: none;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}


.accordion h2 a:hover

{

background: #335CFF;

}


.accordion h2 + div

{

height: 0;

overflow:auto;

-moz-transition: height 0.3s ease-in-out;

-webkit-transition: height 0.3s ease-in-out;

-o-transition: height 0.3s ease-in-out;

transition: height 0.3s ease-in-out;

font: 12px/1 'Trebuchet MS', 'Lucida Sans';

padding: 10px;

color: #33CFFF;

text-decoration: none;

}


.accordion :target h2 a:after

{

content: '';

position: absolute;

right: 10px;

top: 50%;

margin-top: -3px;

border-top: 5px solid #333;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

}


.accordion :target h2 + div

{

height: 100px;

}

a:link {color:#33DDFF;}      /* unvisited link */
a:visited {color:#1EABC7;}  /* visited link */
a:hover {color:#75E4FA;}  /* mouse over link */
a:active {color:#62E3FC;}  /* selected link */

</style>

</head>


<body>


<div class="accordion">

<center>


<a href="/">Return</a>  ||  <a href="/ask">Ask</a>  ||  <a href="/submit">Submit</a>  ||  <a href="http://sailorslayer.tumblr.com/">Credit


<section id="one">
<h2><a href="#one">Theme Basics</a></h2>
<div><P>
This theme comes with 5 basic sections but you can add more, if needed (see section 2).  You can customize each section, heading, and color (including the gradient for each heading).  Width of the sections are 600px.
<P>Put whatever you want in each one of these little boxes.  They will adjust to size.  To do a list <ul><li>just</li><li>do</li><li>this</li></ul><br><a href="/">You can even put links in</a> or an image if you want<br>
<img src="http://static.tumblr.com/172d40afb9c12c9081721cfe88469bd9/yidacpy/FoZmumkay/tumblr_static_sailorslayer.gif">
</div>
</section>


<section id="two">

<h2><a href="#two">Adding extra sections</a></h2>

<div>
<P>Each box can be filled to the brim and adding more is simple.


<!--to add more sections just reuse each section and change the headings:
<section id="__">
<h2><a href="#__">new heading here</a></h2>
<div><P></div></section>--replace __ with your section head.  you can customize them to be whatever you want and not just numbers.---!>


<p>


</p>

</div>

</section>


<section id="three">

<h2><a href="#three">Theme Usage</a></h2>

<div>
<P>
This theme is ideal for people who use a lot of tags, have a lot to add, or RP main pages.<P>
<b>There is free usage on this theme as long as the credit remains intact.</b>

</div>

</section>


<section id="four">

<h2><a href="#four">-heading-</a></h2>

<div>


</div>

</section>


<section id="five">

<h2><a href="#five">-heading-.</a></h2>

<div>


<P>

</div>

</section>


</div>