theme 12 "lola"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head><title>{Title}</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}



<!---@shayofrp
tutorial credit to @html-and-etc--->

<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#a8a8a8"/>
<meta name="color:Sidebar Links" content="#b8b8b8"/>
<meta name="color:DescriptionText" content="#b8b8b8"/>
<meta name="color:Hover" content="#f2f2image:f2"/>
<meta name="color:Scrollbar" content="#000000"/>
<meta name="color:ScrollbarBg" content="#ffffff"/>
<meta name="color:Post Links" content="#c0bfbf"/>
<meta name="color:Answer Backg" content="#000000"/>
<meta name="color:postbg" content="#ffffff"/>
<meta name="color:sidebarbg" content="#ffffff"/>
<meta name="color:infobg" content="#ffffff"/>
   <meta name="image:sidebar1" content=""/>
   <meta name="image:title" content=""/>
   <meta name="image:icon" content=""/>
   <meta name="image:link 1" content="" />
    <meta name="image:link 2" content="" />
   <meta name="image:link 3" content="" />
<meta name="image:tab1" content="" />
<meta name="image:tab2" content="" />
<meta name="image:tab3" content="" />
<meta name="image:Background" content=""/>
<meta name="text:Link 1" content="" />
<meta name="text:Link 2" content="" />
<meta name="text:Link 3" content="" />
<meta name="text:url" content="" />
<style type="text/css">


/**
tabs fonts
*/
body {font-family: arial }{ font-weight: 200; }
#content { width: 75%; position: relative; left: 125px; height: 100%; }

/**
* Define Accordion outside elements
**/
.ac-container1 {
position:fixed;
width: 300px;
overflow: hidden;
margin-left:-10px;
margin-top:150px;
color:{color:background};
background: {color:postbg};
padding: 10px;
text-align: justify;
z-index:999;
}
.ac-container1 label{
overflow:hidden;
color:{color:postbg};
cursor:pointer;
background: {color:background};
margin:5px;
padding: 5px ;
position: relative;
z-index: 20;
display: block;
height: 35px ;
line-height: 33px ;
font-size: 19px;
}
.ac-container1 label:hover{
background: {color:background};
}
.ac-container1 input:checked + label,
.ac-container1 input:checked + label:hover{
background: {color:background};
color: {color:postbg};
margin: 5px;
font-size: 19px;
padding: 5px;
}
.ac-container1 label:hover:after,
.ac-container1 input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(http://tympanus.net/Tutorials/CSS3Accordion/images/arrow_down.png) no-repeat center center;
}
.ac-container1 input:checked + label:hover:after{
background-image: url(http://tympanus.net/Tutorials/CSS3Accordion/images/arrow_up.png);
}
.ac-container1 input{
display: none;
}
.ac-container1 article{
margin-left:5px;
width:290px;
background: {color:scrollbarbg};
color:{color:postbg};
overflow: hidden;
height: 0px;
position: relative;

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

.ac-container1 article p{
margin: 5px;
padding: 10px;
display: block;
}
.ac-container1 input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.ac-container1 input:checked ~ article.ac-short{
height: 100px;
}
.ac-container1 input:checked ~ article.ac-tall{
height: 180px;
}
.ac-container1 input:checked ~ article.ac-grande{
height: 180px;
}

::-webkit-scrollbar-thumb {
height:auto;
background-color:{color:Scrollbar};
}

::-webkit-scrollbar {
height:9px;
width:4px;
background-color:{color:ScrollbarBg};
}

body {
background:{color:background};
margin:0px;
color:{color:text};
font-family:calibri;
font-size:10px;
line-height:100%;
letter-spacing:0px;
text-align:justify;
background-image:url('{image:Background}');
}

a {
text-decoration:none;
outline:none;
-moz-outline-style:none;
color:{color:Post Links};
}

img {
    border:none;
}

blockquote {
padding-left:5px;
border-left:2px solid;
}

blockquote blockquote {
padding-left:5px;
border-left:2px solid;
}

h1 {
font-size:24px;
text-transform:lowercase;
font-family:'arial';
font-style:italic;
line-height:10px;
text-align:left;
padding:0px;
}

a:hover {
color:{color:postbg};
-moz-transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
}

/*ENTRIES*/

#entries {
padding:10px;
width:500px;
margin-left:580px;
margin-top:100px;
font-size:11px;
font-family:'arial';
letter-spacing:0px;
line-height:110%;
position:relative;
}

#post {
width:500px;
padding-bottom:10px;
padding:10px;
margin-top:20px;
background-color:{color:postbg};
}

/*SIDEBAR*/

#sidebar {
margin-left:200px;
margin-top:-50px;
margin-left:170px;
}

#sidebarimage img{
    position:fixed;
    margin-top:100px;
    margin-left:-50px;
    border-color: {color:postbg};

}


#sidebarimage2 {
    position:fixed;
    margin-top:30px;
    margin-left:-100px;
    z-index:9;
}

#sidebarimage4 {
    position:fixed;
    margin-top:430px;
    margin-left:-50px;
    z-index:100;
}

#description {
text-align:justify;
font-family:'arial';
width:267px;
margin-top:430px;
margin-left:230px;
font-size:9px;
position:fixed;
text-transform:none;
line-height:120%;
color:{color:text};
   background-color:{color:sidebarbg};
   padding:10px
}


/*POST INFO*/

#info {
width:500px;
text-align:center;
font-family:'calibri';
margin-top:3px;
margin-left:px;
letter-spacing:1px;
font-size:10px;
font-style:none;
padding:1px;
line-height:10px;
background-color:{color:infobg};
}

#info a {
text-align:center;
color:{color:text};
}

#info a:hover {
-moz-transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
color:{color:Hover}
}

#tags {
float:left;
width:489px;
margin-top:-5px;
margin-left:-5px;
text-align:left;
font-size:6px;
padding:5px;
font-size:8px;
opacity:1;
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s
color:{color:text};
}

#tags a {
letter-spacing:0px;
font-size:7px;
text-align:center;
font-family:'arial';
text-decoration:none;
display:inline-block;
color:{color:text};
}

#tags a:hover {
background-color:#fff;
-moz-transition-duration:0.3s;
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
color:{color:Hover};
}

/*QUESTION*/

#asker {
color:{color:postbg};
padding:14px;
font-family:'arial';
font-size:11px;
letter-spacing:0px;
text-align:left;
margin-top:0px;
text-transform:lowercase;
line-height:100%;
background-color:{color:Answer Backg}
}

/*CREDIT*/

#cred {
position:fixed;
font-family:'Calibri';
text-transform:uppercase;
font-size:8px;
right:9px;
bottom:9px;
padding:4px;
letter-spacing:1px;
}

#pagination {
    position:fixed;
    height: auto;
    width:276px;
    font-size:8px;
    text-align:center;
    margin-left:231px;
    margin-top:510px;
    padding: 5px;
    font-family:arial;
    opacity: 1;
    color:{color:background};
    background-color: {color:postbg};
}

{CustomCSS}</style></head><body>

<div id="sidebar">
<div id="sidebarimage"><img src="{image:sidebar1}"></div>
<div id="sidebarimage2"><img src="{image:title}"></div>
<div id="sidebarimage4"><img src="{image:icon}"></div>

<section class="ac-container1">
<div>
<input id="tab1" name="ac" type="checkbox" />
<label for="tab1"><img src="{image:tab1}"></label>
<article class="ac-tall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum sagittis blandit. Nunc libero erat, egestas ac hendrerit eget, pulvinar quis diam. Sed sit amet nibh tortor. Mauris mollis nec nunc vitae varius. Cras volutpat leo magna, sed pharetra metus blandit a. Ut cursus convallis lacus vel pharetra. Donec id sem accumsan, lacinia ante et, commodo felis. Suspendisse ultrices fermentum urna vel aliquet. Fusce convallis a orci in placerat. Sed pulvinar at nunc a vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut lobortis, velit ut tristique lacinia, nulla orci ullamcorper felis, vitae mollis eros urna ac urna. Sed lacus tellus, tincidunt id lorem at, luctus scelerisque sem.

</p>
</article>
</div>
<div>
<input id="tab2" name="ac" type="checkbox"/>
<label for="tab2"><img src="{image:tab2}"></label>
<article class="ac-grande">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum sagittis blandit. Nunc libero erat, egestas ac hendrerit eget, pulvinar quis diam. Sed sit amet nibh tortor. Mauris mollis nec nunc vitae varius. Cras volutpat leo magna, sed pharetra metus blandit a. Ut cursus convallis lacus vel pharetra. Donec id sem accumsan, lacinia ante et, commodo felis. Suspendisse ultrices fermentum urna vel aliquet. Fusce convallis a orci in placerat. Sed pulvinar at nunc a vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut lobortis, velit ut tristique lacinia, nulla orci ullamcorper felis, vitae mollis eros urna ac urna. Sed lacus tellus, tincidunt id lorem at, luctus scelerisque sem.
</p>
</article>
</div>
<div>
<input id="tab3" name="ac" type="checkbox"/>
<label for="tab3"><img src="{image:tab3}"></label>
<article class="ac-grande">
<p>
<a href="helo"><img src="{image:Link 1}" /></a>
<a href="helo"><img src="{image:Link 2}" /></a>
<a href="helo"><img src="{image:Link 3}" /></a>
</article>
</div>

<div><!--...--></div>
</section>
</div>
<div id="description">{Description}</div>

<div id="pagination">

{block:JumpPagination length="5"}
{block:CurrentPage}<span class="pagination_a">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
{/block:JumpPagination}
</div>

<div id="entries">
{block:Posts}
<div id="post">

{block:Text}
<h1>{block:Title}{Title}{/block:Title}</h1>
{Body}{/block:Text}

{block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}{/block:Photo}

{block:Photoset}{Photoset-500}{block:Caption}{Caption}
{/block:Caption}{/block:Photoset}

{block:Quote}<h2>"{Quote}"</h2>
{block:Source}<div class="qsource"> —{Source}</div>
{/block:Source}{/block:Quote}

{block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}

{block:Chat}{block:Title}{Title}{/block:Title}{block:Lines}{block:Label}<b><u>{Label}</u></b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}

{block:Audio}<left>{block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" align="left" style="margin-right:10px" />{/block:AlbumArt}<span class="audio">{AudioPlayerBlack}</left></span>
{block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
{block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
{/block:ExternalAudio}<b>Played:</b> {PlayCount} times <br>
{/block:Audio}<br>

{block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}

{block:Answer}<div id="asker">{Question} —<span style="text-align:lowercase; color:#fcfcfc;font-style:italic; "><b><i>{Asker}</i></b><br></span> </div><left><div style="padding:4px;margin-top:3px;font-size:11px;"><font face="arial">{Answer}</font></div>{/block:Answer}

<div id="info">
<a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a> —
{block:RebloggedFrom} <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
and {block:ContentSource} <a href="{SourceURL}"><a href="{SourceURL}">source</a>{/block:ContentSource}
{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}
with {NoteCountWithLabel}</a>
{block:HasTags}<div id="tags">

{block:Tags}<a href="/tagged/{Tag}">#{Tag}</a>&nbsp;{/block:Tags}
</div>{block:HasTags}
</div>
</div>

{/block:Posts}
<br><br>{block:PostNotes}<div id="notes"><left>{PostNotes}</div>{/block:PostNotes}
{/block:Posts}</div></div></div>
<br><br><br><br>

<div id="cred">
<a href="http://shayofrp.tumblr.com/">CREDIT</a>
</div>
</div>




    </body></html>