Rivergronrps theme 09 - CLEVER GIRL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://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}



   <!---
Theme 'Clever Girl' | by Stephanie @ Rivergronrps
            .
           .|.
           |||
           |||
           |||
           |||
           j_I  K&M4E
          .)_(.
          |===|
          /___\
         //___\\
        /=======\
       / .-"""-. \
      |__|     |__|

 Please fill free to edit to your liking, just please don't remove the credit or redistrube it. My inbox is always open if you have any questionss or problems with the theme.
--->






<meta name="color:Background" content="#ffffff"/>





<meta name="color:accent" content=""/>
<meta name="color:post title" content=""/>
<meta name="color:accent" content=""/>
<meta name="color:bold" content=""/>
<meta name="color:italic" content=""/>
<meta name="color:pagination" content=""/>
<meta name="color:links" content=""/>
<meta name="color:hover" content=""/>
<meta name="color:post background" content=""/>
<meta name="color:text" content=""/>

<meta name="image:accent" content=""/>
<meta name="image:icon" content=""/>
<meta name="image:png" content=""/>
<meta name="image:background" content=""/>


<meta name="text:title" content="" />
<meta name="text:subtitle" content="" />
<meta name="text:home link title" content="refresh" />
<meta name="text:ask link title" content="fanmail" />
<meta name="text:question title" content="wondered" />
<meta name="text:link 1" content="" />
<meta name="text:link 1 text" content="" />
<meta name="text:link 2" content="" />
<meta name="text:link 2 text" content="" />
<meta name="text:link 3" content="" />
<meta name="text:link 3 text" content="" />


 <link id="webfont_arquitecta" rel="stylesheet" type="text/css" href="https://assets.tumblr.com/fonts/arquitecta/stylesheet.css?v=3"/>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">


    /*CREDIT! YOU CAN MOVE IT AROUND THE THEME, BUT DONT REMOVE IT COMPLETELY OR PUT IT ON A PAGE*/

#cred a {
position:fixed;
z-index:99;
color:{color:links};
font-size:14px;
font-family:'arquitecta';
font-weight: bold;
bottom:0px;
right:-108px;
padding:8px;
text-transform: lowercase;
-webkit-transition: all 0.7s ease-in; -moz-transition: all 0.7s ease-in; transition: all 0.7s ease-in
}

#cred a:hover{
    right:0px;

}


.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
z-index:999999999!important;
}



::-webkit-scrollbar-thumb {
height:auto;
background-color:{color:accent};
background-image:url('{image:accent}');
}

::-webkit-scrollbar {
height:9px;
width:6px;
}

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

a {
text-decoration:none;
outline:none;
-moz-outline-style:none;
color:{color:links};
-moz-transition-duration:0.7s;
-webkit-transition-duration:0.7s;
-o-transition-duration:0.7s;
}

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

img {
    border:none;
}

pre {
    border-bottom: 3px solid {color:accent};
    border-top: 3px solid {color:accent};
    height:12px;
    overflow:hidden;
    font-size:11px;
    padding:4px;
    letter-spacing:0.5px;
    color:{color:text};
    font-family:'Arquitecta';
    text-align:center;
    text-transform:lowercase;
}

 small, sup, sub {
font-size:9.5px;

 }

       b, strong {
          font-weight:bold;
          color:{color:bold};
       }


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

}

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

}

h1 {
letter-spacing:1px;
font-family:'Arquitecta';
font-weight:bold;
text-transform:lowercase;
font-size:23px;
line-height:30px;
text-align:left;
font-style:italic;
color:{color:post title};
text-align:center;
}

h2 {
letter-spacing:1px;
font-family:'Arquitecta';
font-weight:bold;
text-transform:lowercase;
font-size:16px;
line-height:24px;
font-style:italic;
color:{color:post title};
text-align:center;
}


 hr {
    border: 1px solid {color:accent};
        -webkit-border-image: url({image:accent}) 30 30 round;
    -o-border-image: url({image:accent}) 30 30 round;
    border-image: url({image:accent}) 30 30 round;
 }

/*ENTRIES*/

#entries {
width:540px;
padding-left:20px;
margin-left:340px;
margin-top:160px;
font-size:11px;
line-height:12px;
font-family:'arial';
letter-spacing:0.5px;
text-align: justify;
position:fixed;
overflow:scroll;
overflow-x:hidden;
height:70%;
padding-right:3px;
}


#post {
width:500px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
margin-top:-50px;
margin-left:-1px;
background-color:{color:post background};
text-align: justify;
overflow:hidden;
color:{color:text};
word-wrap: break-word;

}


#entrybar {
width:518px;
height:auto;
margin-left:0px;
margin-top:50px;
padding-bottom:30px;
}



/* IMAGES*/

#png {
 position:absolute;
 max-width:250px;
 max-height:300px;
 float:center;
 overflow:hidden;
}

#image {
position:absolute;
background:{color:accent};
top:15px;
left:656px;
width:125px;
height:125px;
border-radius:100px;
z-index:999;
overflow:hidden;
border: 5px solid {color:background};
background-image: url({image:icon});
}

/* TITLES */


#blogtitle {
font-family: 'Arquitecta';
font-size:20px;
letter-spacing:1px;
font-style:italic;
font-weight:bold;
color:{color:post title};
z-index: 99;
}

#subtitle {
text-transform:uppercase;
font-family: arial;
font-size:9.5px;
color:{color:post title};
z-index: 99;
}

#titlebox {
    position:absolute;
    border-top: 4px solid {color:accent};
    padding-top:7px;
    border-bottom: 4px solid {color:accent};
    padding-bottom:4px;
    height:50px;
    top:280px;
    line-height:23px;
    height:50px;
    width:250px;
    text-align:center;
    background:{color:background};
}

/* DESCRIPTION */



#descbox {
position:fixed;
top:22px;
left:360px;
z-index: 99;
}

#description {
text-align:justify;
font-family:'Arial';
font-size:10.5px;
position:fixed;
text-transform:none;
padding:10px;
color:{color:text};
background:{color:post background};
line-height:11px;
letter-spacing:0.5px;
width:265px;
height:100px;
overflow-y:auto;
}

#description a {
    color:{color:links};
    -moz-transition-duration:0.7s;
-webkit-transition-duration:0.7s;
-o-transition-duration:0.7s;

}

#description a:hover{
 color:{color:text};
    -moz-transition-duration:0.7s;
-webkit-transition-duration:0.7s;
-o-transition-duration:0.7s;

}

/* LINKS */


#nav {
top:28px;
position:fixed;
line-height:30%;
font-family:arial;
text-align:right;
text-transform:lowercase;
z-index:998;
left:762px;
}

#nav a {
   width:110px;
   height:15px;
    display: block;
    font-size: 10.5px;
    letter-spacing:1px;
    padding:2px;
    padding-right:5px;
    background-color:{color:accent};
    background-image:url('{image:accent}');
    color:{color:post background};
    line-height:150%;
     margin-bottom:1px;
    margin-left:0px;
    -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; transition: all 0.5s ease-in
}

#nav a:hover {
       width:120px;
        font-style:italic;
        text-shadow: .1px .1px .5px {color:post background};
   background-color:{color:links text color};
   color:{color:links background color};
 -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in
}




/*POST INFO*/

#info {
text-transform:lowercase;
font-size:10px;
color:{color:post background};
width:512px;
margin-left:-1px;
margin-top:0px;
background-color: {color:accent};
padding:4px;
line-height:14px;
padding-top:5px;
padding-bottom:4px;
overflow:hidden;
background-image:url('{image:accent}');
text-align:center;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}


#info a {
color:{color:post background};
-moz-transition-duration:0.7s;
-webkit-transition-duration:0.7s;
-o-transition-duration:0.7s;
}

#info a:hover {
-moz-transition-duration:0.7s;
-webkit-transition-duration:0.7s;
-o-transition-duration:0.7s;
text-shadow: .1px .1px .5px {color:post background};
font-style:italic;
}

 }

#tags {
color:{color:post background};
font-size:9.5px;
text-transform:lowercase;
width: 514px;
line-height:9px;
margin-bottom:0px;
margin-top: -2px;
margin-left:-4px;
text-align: center;
padding:3px;
padding-bottom:0px;
    overflow:hidden;
}

 #tags a:hover {
font-style:italic;
text-shadow: .1px .1px .5px {color:post background};
-moz-transition-duration:0.7s;
-webkit-transition-duration:0.7s;
-o-transition-duration:0.7s;
 }


/* IMESSAGE CHAT POST */
.answer span,.convo li {
margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative
}

.answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{
    float:left;background:{color:accent};color:{color:text};left:3px}

    .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{
content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid {color:accent};border-bottom-right-radius:1em .5em}

.answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:{color:background};color:{color:text}}.them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid {color:background};border-bottom-left-radius:1em .5em}.me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}



        .convo {
            overflow: hidden;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }




/* QUESTIONS */



#inquiry {
    background-color: {color:accent};
    color:{color:post background};
    text-align: justify;
    font-family:arial;
    font-size: 10.5px;
    font-style:none;
    margin-left: 40px;
    margin-top:7px;
    position:relative;
    padding:5px;
    padding-left:20px;
    line-height:10px;
}

#inquiry a {
      color:{color:post background};
       line-height:14px;
}

#portrait {
    width:50px;
    height:50px;
    margin-top:0px;
    margin-left:-6px;
    position: absolute;
    z-index:9;
}

#portrait img {
    border:solid 4px {color:post background};
    border-radius:100px;
}


#reaction {
    padding-top:12px;
    text-align: justify;
    margin-top: 8px;
}

#reactionbar {
    width:auto;
    height:auto;
    padding:7px;
    margin-left:0px;
    margin-top:0px;
    margin-bottom:3px;
    background-color:{color:answer backg};
}

 /*PAGINATION*/



 #pagibox {
position:absolute;
top:352px;
   width:250px;
   text-align:center;
   padding-top:5px;
   font-family:'arquitecta';
  color:{color:text};
  }


 #pagibox a {
     font-weight:bold;
       color:{color:pagination};
           -moz-transition-duration:0.7s;
-webkit-transition-duration:0.7s;
-o-transition-duration:0.7s;
 }

#pagibox a:hover {
color:{color:text};
    -moz-transition-duration:0.7s;
-webkit-transition-duration:0.7s;
-o-transition-duration:0.7s;
}

#wrap {
height:375px;
width:250px;
position:fixed;
left:55px;
top:50%;
margin-top:-187.5px;}

.audioimg img {
          width:75px;
          height:75px;
          color:{color:text};
          text-align:center;
          text-transform:uppercase;
       }

       .audioinfo {
          color:{color:text};
          font-size:11px;
          padding-left:5px;
       }



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

<div id="wrap">

  <div id="png"><img src="{image:png}"></div>

 <div id="titlebox">
 <div id="blogtitle">{text:title}</div>
      <div id="subtitle">{text:subtitle}</div>
 </div>

 <div id="pagibox"> {block:Pagination} {block:PreviousPage}<a href="{PreviousPage}">backwards</a>{/block:PreviousPage} / {block:NextPage}<a href="{NextPage}">forwards</a>{/block:NextPage} {/block:Pagination}</div>

  </div>

<div id="image"></div>



 <div id="descbox"class="fade-in one"><div id="description"class="fade-in one">{description}</div></div>


<div id="nav">
<a href="/">{text:home link title}</a><br/>
<a href="/ask" >{text:ask link title}</a><br/>
<a href="{text:link 1}">{text:link 1 text}</a><br/>
<a href="{text:link 2}">{text:link 2 text}</a><br/>
<a href="{text:link 3}">{text:link 3 text}</a><br/>




</div></div>


<div id="entries"class="fade-in two">
{block:Posts}
<div id="entrybar">
<div id="post">



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

{block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}</p>
{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 style ="text-align:right; letter-spacing:1px; padding-bottom:10px"> — {Source}</div>
{/block:Source}{/block:Quote}

{block:Link}<h1><i class="fa fa-link" aria-hidden="true"></i>&nbsp;<a href="{URL}" {Target}>{Name}</a></h1>{block:Excerpt}<blockquote>{excerpt}</blockquote>{/block:Excerpt}{block:Description}{Description}{/block:Description}{/block:Link}

{block:Chat}
<div class="posting">
{block:Title}<h1>{Title}</h1><br>{/block:Title}
<ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><span style="font-weight:bold">{Label}</span></span>{/block:Label}
{Line}</li>{/block:Lines}</ul>
</div>
{/block:Chat}


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

    {block:Audio}
 {block:AudioPlayer}
                <table>
                    <tr><td>
                     {block:AlbumArt}
        <div class="audioimg"><img src="{AlbumArtURL}">
                            </div>
                            {/block:AlbumArt}</td><td>
                            <div class="audioplayer">
                                {AudioPlayerWhite}
                            </div>
                            <div class="audioinfo">
                                {block:Artist}<b>Name</b>: {Artist}{/block:Artist}<br>
                                {block:Album}<b>Album</b>: {Album}<br>
                                {/block:Album} {block:TrackName}<b>Track</b>: {TrackName}{/block:TrackName}
                            </div>
                        </td>
                    </tr>
                </table>

                {/block:AudioPlayer}

{/block:AudioPlayer}
               {block:AudioEmbed} {AudioEmbed}{/block:AudioEmbed}

                <div class="text">
                    {Caption}
                </div>
                {/block:Caption} {/block:Audio}

{block:Answer}
<div id="reactionbar">
<div id="portrait"><span style="width:48px;height:48px;"><img src="{AskerPortraitURL-48}"></span></div>

<div id="inquiry"><span style="font-wight:bold; font-style:italic; text-transform:uppercase">{asker} {text:question title}:</span> {Question}</div></div>

<div id="reaction">{Answer}</div>

{/block:Answer}</div>

{block:Date}<div id="info">
<a href="{Permalink}"> <i class="fa fa-clock-o" aria-hidden="true"></i> {12HourWithZero}:{Minutes}{AmPm}  {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>&nbsp;
{block:NoteCount} <i class="fa fa-heart" aria-hidden="true"></i> {NoteCount}{/block:NoteCount}{block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} <a href="{SourceURL}"></a>{block:ContentSource}{/block:RebloggedFrom}
<div id="tags">{block:HasTags}<i class="fa fa-tags" aria-hidden="true"></i> {block:Tags}<a href="{TagURL}">{tag}</a>, {/block:Tags}{/block:HasTags}</div>{/block:Date}</div>
</div>


{/block:Posts}

{block:PostNotes}{PostNotes}{/block:PostNotes}</div>




<div id="cred">
<a href="https://rivergronrps.tumblr.com/tagged/my-themes"><i class="fa fa-plane"></i> &nbsp;Rivergronrps</a>
</div>
</div>





    </body></html>