64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--- don't remove the credit leave the credit if you want to use parts of the theme ---> <meta name="color:Background" content="#ffffff" /> <meta name="color:Text" content="#000000" /> <meta name="color:AskBackground" content="#f2f0db" /> <meta name="color:AskText" content="#270005" /> <meta name="color:EntryBackground" content="#f9f0c9" /> <meta name="color:DescText" content="#c73100" /> <meta name="color:BlogTitle" content="#7a0d10" /> <meta name="color:BlogTitleBackground" content="#6a6428" />

Tumblr Theme

Embed Size (px)

DESCRIPTION

Theme code for Tumblr

Citation preview

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!---

don't remove the credit

leave the credit if you want to use parts of the theme

--->

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

<meta name="color:Text" content="#000000" />

<meta name="color:AskBackground" content="#f2f0db" />

<meta name="color:AskText" content="#270005" />

<meta name="color:EntryBackground" content="#f9f0c9" />

<meta name="color:DescText" content="#c73100" />

<meta name="color:BlogTitle" content="#7a0d10" />

<meta name="color:BlogTitleBackground" content="#6a6428" />

<meta name="color:SidebarBackground" content="#fddfa0" />

<meta name="color:Bold" content="#7a0d10" />

<meta name="color:Italic" content="#d76f6c" />

<meta name="color:NormalLink" content="#b31b0e" />

<meta name="color:NormalLinkHover" content="#6a6428" />

<meta name="color:DescLink" content="#6a6428" />

<meta name="color:PostTitle" content="#740f06" />

<meta name="color:BlockquoteBorder" content="#7a0d10" />

<meta name="color:Navi1Background" content="#c94e25"/>

<meta name="color:Navi2Background" content="#d76f6c"/>

<meta name="color:Navi3Background" content="#f8bd45"/>

<meta name="color:Navi4Background" content="#6a6428"/>

<meta name="color:Navi1Text" content="#441505"/>

<meta name="color:Navi2Text" content="#310402"/>

<meta name="color:Navi3Text" content="#6d3139"/>

<meta name="color:Navi4Text" content="#033620"/>

<meta name="color:Pagination" content="#740f06"/>

<meta name="color:ChatOddBackground" content="#f9f0c9" />

<meta name="color:ChatOddText" content="#7a0d10" />

<meta name="color:ChatEvenBackground" content="#ed9430" />

<meta name="color:ChatEvenText" content="#661d05" />

<meta name="color:ChatEvenName" content="#b31b0e" />

<meta name="color:ChatOddName" content="#6a6428" />

<meta name="color:SidebarImageBorder" content="#c94e25"/>

<meta name="color:ArrowBackground" content="#c94e25"/>

<meta name="color:ArrowText" content="#7a0d10" />

<meta name="color:CustomLinkBackground" content="#c94e25"/>

<meta name="color:CustomLinkText" content="#7a0d10" />

<meta name="color:TagText" content="#270005" />

<meta name="color:TagLink" content="#ef8c87"/>

<meta name="color:TagLinkHover" content="#270005" />

<meta name="color:MusicPlayer" content="#d76f6c"/>

<meta name="color:MusicText" content="#310402"/>

<meta name="if:InfiniteScrolling" content="0" />

<meta name="if:ShowCaptions" content="0">

<meta name="if:FadingPhoto" content="1" />

<meta name="if:Big Posts" content="0" />

<meta name="if:Monochrome" content="0" />

<meta name="if:ShowTags" content="0" />

<meta name="if:MusicPlayer" content="1" />

<meta name="image:Image1" content="http://static.tumblr.com/ad5ae688e5458e3c22f4762a8be88929/7fjp0ap/8L2ml7nco/tumblr_static_3.jpg"/>

<meta name="image:Image2" content="http://static.tumblr.com/c5567771a155f6b94871f2fd37a64517/7fjp0ap/XIWml7oxo/tumblr_static_4.jpg" />

<meta name="image:Image3" content="http://static.tumblr.com/4eff582fd57ab6a355af4154087c58af/7fjp0ap/Ksbml7oy8/tumblr_static_8.jpg"/>

<meta name="image:Image4" content="http://static.tumblr.com/44c6bfbe09b4e559e6b8fd2f96f8ee19/7fjp0ap/WL6ml7p2h/tumblr_static_7.jpg" />

<meta name="image:Image5" content="http://static.tumblr.com/5c43aec51a1fc5ae1c93d343bcee5c18/7fjp0ap/7hOml7p0h/tumblr_static_1.jpg"/>

<meta name="image:Image6" content="http://static.tumblr.com/e6331143baafde2dbb43436cb0bd22f7/7fjp0ap/E8Lml7nbc/tumblr_static_6.jpg" />

<meta name="image:Image7" content="http://static.tumblr.com/302f0eb877075dc059eade7f92080b91/7fjp0ap/y2Cml7p2l/tumblr_static_2.jpg"/>

<meta name="image:Image8" content="http://static.tumblr.com/f9d993d82a940c7f3612544f107e1f8e/7fjp0ap/0KQml7oyo/tumblr_static_5.jpg" />

<meta name="image:Background" content="http://static.tumblr.com/dca01f7dd497dec93de9e7915b35263d/7fjp0ap/lFLml99t0/tumblr_static_bg2.png"/>

<meta name="image:CornerImage" content="" />

<meta name="image:MusicImage" content="http://media.tumblr.com/tumblr_m7vzqpkDar1r6o8v2.gif" />

<meta name="text:Background Repeat" content="repeat"/>

<meta name="text:MusicCode" content="code"/>

<meta name="text:MusicName" content="musique"/>

<meta name="text:Link1" content="" />

<meta name="text:Link1 URL" content="/"/>

<meta name="text:Link2" content="" />

<meta name="text:Link2 URL" content="/"/>

<meta name="text:Link3" content="" />

<meta name="text:Link3 URL" content="/"/>

<meta name="text:Link4" content="" />

<meta name="text:Link4 URL" content="/"/>

<meta name="text:Link5" content="" />

<meta name="text:Link5 URL" content="/"/>

<meta name="text:Link6" content="" />

<meta name="text:Link6 URL" content="/"/>

<meta name="text:Link7" content="" />

<meta name="text:Link7 URL" content="/"/>

<meta name="text:Link8" content="" />

<meta name="text:Link8 URL" content="/"/>

<head>

<link href='http://fonts.googleapis.com/css?family=Tulpen+One' rel='stylesheet' type='text/css'>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<script src="http://static.tumblr.com/7fjp0ap/3muml55ib/modernizr.custom.js"></script>

<style type="text/css">

body {

background-image: url('{image:background}');

background-color: {color:background};

background-attachment: fixed;

background-repeat: {text:Background Repeat};

color: {color:text};

margin: 0;

}

@font-face {

font-family: "heather";

src: url('http://static.tumblr.com/7fjp0ap/yh5mcyonf/heather_.ttf');}

@font-face {

font-family: "neverwinter";

src: url('http://static.tumblr.com/7fjp0ap/G1tml9bjr/neverwinter.ttf');}

@font-face {

font-family: "matura";

src: url('http://static.tumblr.com/7fjp0ap/iHXml9bd9/maturasc.ttf');}

::-webkit-scrollbar-thumb {

background-color: {color:desctext};

height: 5px;

width: 8px;

}

::-webkit-scrollbar {

height: 5px;

width: 8px;

background-color: {color:sidebarbackground};

}

a{

color: {color:normallink};

text-decoration: none;

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

}

a:hover{

color: {color:normallinkhover};

text-decoration: none;

}

#sidebar{

position: fixed;

overflow:hidden;

left: 20px;

top: 0px;

bottom:0px;

width:400px;

text-align: center;

padding: 1px;

padding-bottom:0px;

background-color: {color:sidebarbackground};

font-family: consolas;

font-size: 10px;

}

.border1{

position:fixed;

left:422px;

top:0px;

bottom:0px;

width:4px;

}

.border1x{

display:block;

width:100%;

height:25%;

}

.border2{

position:fixed;

left:16px;

top:0px;

bottom:0px;

width:4px;

}

#descbox0{

width: 294px;

padding: 3px;

border: 1px solid {color:desctext};

margin-top:20px;

display:inline-block;

text-align:center;

margin-left:3px;

}

#descbox{

width: 272px;

padding: 10px;

border: 1px solid {color:desctext};

color: {color:desctext};

font-family: calibri;

font-size: 11px;

display:inline-block;

text-align:center;

}

#descbox a{

color: {color:desclink};

}

#navibox{

margin-top:20px;

width: 302px;

display:inline-block;

margin-bottom:10px;

margin-left:4px;

}

#navibox a{

text-transform: none;

display: block;

float:left;

width: 25%;

padding:3px;

padding-left:0px;

padding-right:0px;

text-align: center;

font-family: calibri;

font-size: 10px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

}

#titlebox{

display: inline-block;

margin-top:30px;

font-size: 25px;

letter-spacing:1px;

line-height:20px;

font-family: neverwinter;

width: 292px;

padding: 5px;

margin-left:3px;

background-color: {color:BlogTitleBackground};

text-align: center;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

}

#titlebox a{

color: {color:blogtitle};

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

}

#titlebox a:hover{

color: {color:blogtitlehover};

}

#pagi{

display:inline-block;

margin-top: 5px;

font-size: 20px;

margin-bottom:5px;

font-family: calibri;

z-index: 999;

}

#pagi a{

color:{color:pagination};

}

#posts{

{block:ifBigPosts}width: 530px;{/block:ifBigPosts}

{block:ifNotBigPosts}width: 430px;{/block:ifNotBigPosts}

margin-left: 490px;

margin-bottom: 40px;

}

img.center {

display: block;

margin-left: auto;

margin-right: auto;

}

#entry{

{block:ifBigPosts}width: 520px;{/block:ifBigPosts}

{block:ifNotBigPosts}width: 420px;{/block:ifNotBigPosts}

position:relative;

margin-top: 30px;

z-index:999999;

overflow: hidden;

background-color: ;

-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

}

.entry{

{block:ifBigPosts}width: 500px;{/block:ifBigPosts}

{block:ifNotBigPosts}width: 400px;{/block:ifNotBigPosts}

text-align: left;

position:relative;

padding: 10px;

padding-bottom:0px;

z-index:999999;

font-family: calibri;

font-size: 12px;

overflow: hidden;

background-color: {color:entrybackground};

color: {color:text};

-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

}

.entry img{

{block:ifBigPosts}max-width: 500px;{/block:ifBigPosts}

{block:ifNotBigPosts}max-width: 400px;{/block:ifNotBigPosts}

{block:ifFadingPhoto}

opacity: 0.7;

-webkit-transition: all 0.7s ease-in-out;

-moz-transition: all 0.7s ease-in-out;

-o-transition: all 0.7s ease-in-out; {/block:ifFadingPhoto}

}

{block:ifFadingPhoto}

.entry img:hover{

opacity: 1;

}

.photosetfade {

opacity: 0.7;

filter:alpha(opacity=70);

-moz-opacity: 0.7;

-webkit-transition: all 0.7s linear;

-moz-transition: all 0.7s linear;

-o-transition: all 0.7s linear;

}

.photosetfade:hover {

opacity: 1;

filter:alpha(opacity=100);

-moz-opacity: 0.9;

}

{/block:ifFadingPhoto}

{block:ifMonochrome}

.mono{

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */

filter: gray; /* IE6-9 */

-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */

-webkit-transition: all 0.7s linear;

-moz-transition: all 0.7s linear;

-o-transition: all 0.7s linear;

}

.mono:hover{

filter: none;

-webkit-filter: grayscale(0%);

}

{/block:ifMonochrome}

.entry b, strong{

color: {color:Bold};

}

b,strong{

color: {color:Bold};

}

.entry i, em{

color: {color:Italic};

}

.entry a{

color: {color:NormalLink};

text-decoration: none;

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

}

.entry a:hover{

color: {color:NormalLinkHover};

text-decoration: none;

}

.entry h1 a{

color: {color:normallink};

}

blockquote{

border-left: 5px solid {color:blockquoteborder};

font-size: 12px;

padding-left:10px;

padding-right: 4px;

padding-top: 3px;

padding-bottom: 3px;

margin:5px;

text-align:justify;

}

.entry blockquote img{

max-width: 90%;

margin-left: 3px;

}

#quote{

color: {color:Quote};

padding: 15px;

font-family: heather;

letter-spacing: 1px;

line-height: 10px;

}

#perma{

margin-bottom:-2px;

margin-left:-10px;

{block:ifBigPosts}width: 520px;{/block:ifBigPosts}

{block:ifNotBigPosts}width: 420px;{/block:ifNotBigPosts}

margin-top: 10px;

display: inline-block;

background-color: {color:navi4background};

}

#perma a{

font-family: calibri;

font-size: 9px;

letter-spacing: 1px;

display:block;

float:left;

width:32%;

text-align:center;

height:100%;

padding: 2px;

font-style: none;

}

#entry:hover #tags{

margin-top:0px;

height:25px;

overflow:auto;

-webkit-transition: all 0.8s ease;

-moz-transition: all 0.8s ease;

-o-transition: all 0.8s ease;

}

#tags{

font-family: calibri;

font-size: 9px;

letter-spacing: 1px;

width: 100px;

margin-top: -6px;

padding: 3px;

{block:ifBigPosts}width: 520px;{/block:ifBigPosts}

{block:ifNotBigPosts}width: 420px;{/block:ifNotBigPosts}

position:relative;

overflow:hidden;

height:0px;

color: {color:Tagtext};

background: transparent;

z-index:-1;

text-align: left;

-webkit-transition: all 0.8s ease;

-moz-transition: all 0.8s ease;

-o-transition: all 0.8s ease;

}

#tags a{

color: {color:TagLink};

font-style: none;

}

#tags a:hover {

color: {color:TagLinkHover};

font-style: none;

}

.permalink {

font-family: calibri;

font-size: 10px;

color: {color:Text};

text-transform: uppercase;

text-align: center;

{block:ifBigPosts}width: 514px;{/block:ifBigPosts}

{block:ifNotBigPosts}width: 414px;{/block:ifNotBigPosts}

margin-top: 20px;

margin-bottom: 10px;

margin-left: -10px;

float: left;

background-color: {color:entrybackground};

}

.permalink b {

color: {color:Bold};

font-weight: normal;

}

#date {

color: {color:text};

}

.permalink a {

color: {color:NormalLink};

text-decoration: none;

}

.title{

color: {color:posttitle};

margin-bottom:10px;

padding-top: 5px;

padding-bottom: 5px;

font-size: 28px;

font-family: matura;

line-height: 100%;

letter-spacing: 2px;

text-transform: none;

text-align: center;

border-bottom: 1px {color:Text} solid;

}

.ask {

{block:ifBigPosts}width: 480px;{/block:ifBigPosts}

{block:ifNotBigPosts}width: 380px;{/block:ifNotBigPosts}

display: inline-block;

padding: 10px;

line-height: 10px;

text-align: justify;

background-color: {color:askbackground};

font-family: comic;

color: {color:asktext};

font-size: 10px;

text-transform: none;

}

.ask i {

font-style: normal;

}

.ask b {

font-weight: normal;

}

.ask a{

float: left;

display: block;

margin-right: 5px;

font-family: calibri;

}

.askimg{

display: block;

float: left;

margin-right: 10px;

width: 48px;

height:48px;

border: 2px solid {color:entrybackground};

}

.askimg img{

width: 48px;

height: 48px;

}

iframe#tumblr_controls {

right:3px !important;

top:100%;

position:fixed !important;

opacity: 0.5;

filter:alpha(opacity=0.5);

-moz-opacity: 0.5;

-webkit-transition: all 0.5s linear;

-moz-transition: all 0.5s linear;

-o-transition: all 0.5s linear;

}

iframe#tumblr_controls:hover {

opacity: 1;

filter:alpha(opacity=1);

-moz-opacity: 1;

}

#source{

font-family: consolas;

font-size:7pt;

text-align: right;

margin-top: -5px;

}

ol.notes {

background-color:{color:EntryBackground};

font-family:tahoma;

font-size:10px;

padding-top:10px;

border: 0px;

padding-left:15px;

margin-top:10px;

{block:ifBigPosts}width:476px;{/block:ifBigPosts}

{block:ifNotBigPosts}width:376px;{/block:ifNotBigPosts}

margin-left: 0px;

list-style-type: none;}

ol.notes li.note {

background: ;

padding:5px;

{block:ifBigPosts}width:480px;{/block:ifBigPosts}

{block:ifNotBigPosts}width:380px;{/block:ifNotBigPosts}

letter-spacing: 0px;

text-align: left;

}

ol.notes li.note a{

color:{color:Link};

background: ;

font-family:tahoma;

text-transform:none;

letter-spacing:0px;

font-size:10px;}

ol.notes li.note img.avatar {

vertical-align: -4px;

margin-right: 0px;

}

#musicbox{

width: 270px;

height: 100px;

text-align: left;

}

.cover {

width:100px;

height: 100px;

display: block;

position:absolute;

z-index:2

}

.cover img{

width: 100px;

height: 100px;

}

.coverx{

width: 100px;

height: 100px;

display: block;

position:absolute;

z-index:1

}

.coverx img{

width: 100px;

height: 100px;

}

.playbutton {

width:20px;

height: 30px;

overflow: hidden;

position:relative;

z-index:100;

margin: 15px 24px 13px 16px;

}

.playbox {

opacity: 0.8;

background-color: #000000;

position: absolute;

z-index: 1000;

margin-top:23px;

margin-left:20px;

-webkit-border-radius:100px;

-moz-border-radius: 100px;

border-radius: 100px;

}

.audioplayer {

float:left;

margin-left: 100px;

position: absolute;

display: block;

margin-top: 10px;

padding-bottom:7px;

}

.infomusic {

text-align:left;

{block:ifbigposts}max-width: 390px;{/block:ifbigposts}

{block:ifnotbigposts}max-width: 290px;{/block:ifnotbigposts}

margin-left:10px;

padding:5px;

}

.odd .line {

background-color: {color:chatoddbackground};

padding: 3px;

margin-bottom:3px;

color:{color:chatoddtext};

}

.even .line {

background-color: {color:ChatEvenBackground};

padding:3px;

margin-bottom:3px;

color:{color:chateventext};

}

.odd .name {

color: {color:chatoddname};

padding: 3px;

}

.even .name {

color: {color:chatevenname};

padding: 3px;

}

/*START FROM HERE*/

.fc-slideshow {

position: relative;

width: 300px;

height: 300px;

box-shadow: inset 0 0 3px rgba(0,0,0,0.4), 0 0 0 10px {color:sidebarimageborder};

border-radius: 50%;

margin: 0 auto;

background: {color:sidebarimageborder};

-webkit-perspective: 1200px;

-moz-perspective: 1200px;

perspective: 1200px;

}

.fc-slideshow nav {

top: 0;

height: 100%;

width: 100%;

position: absolute;

z-index: 10000;

}

.fc-slideshow nav > div {

position: absolute;

height: 100%;

top: 0;

width: 50%;

}

.fc-slideshow nav .fc-left {

left: 0;

}

.fc-slideshow nav .fc-right {

right: 0;

}

.fc-slideshow nav > div span {

height: 33%;

width: 100%;

position: absolute;

left: 0;

cursor: pointer;

}

.fc-slideshow nav > div span:first-child {

top: 0;

}

.fc-slideshow nav > div span:nth-child(2) {

top: 33%;

}

.fc-slideshow nav > div span:nth-child(3) {

top: 66%;

}

.fc-slideshow nav i,

.no-csstransforms3d .fc-slideshow nav > div span {

position: absolute;

width: 100%;

height: 30px;

top: 50%;

margin-top: -20px;

pointer-events: none;

opacity: 0;

-webkit-backface-visibility: hidden;

-webkit-transition: all 0.2s ease;

-moz-backface-visibility: hidden;

-moz-transition: all 0.2s ease;

backface-visibility: hidden;

transition: all 0.2s ease;

}

/* Some fallbacks */

.no-csstransforms3d .fc-slideshow nav > div span {

z-index: 1000;

width: 30px;

background: rgba(0,0,0,0);

}

.no-csstransforms3d .fc-slideshow nav .fc-left span {

left: -80px;

}

.no-csstransforms3d .fc-slideshow nav .fc-right span {

right: -80px;

left: auto;

}

.no-csstransforms3d .fc-slideshow nav i {

width: 30px;

cursor: pointer;

}

.fc-slideshow nav .fc-left i {

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

transform-origin: 100% 50%;

text-align: left;

}

.fc-slideshow nav .fc-right i {

-webkit-transform-origin: 0% 50%;

-moz-transform-origin: 0% 50%;

transform-origin: 0% 50%;

text-align: right;

}

.fc-slideshow nav i.icon-arrow-left {

left: 0;

}

.no-csstransforms3d .fc-slideshow nav i.icon-arrow-left {

left: -100px;

}

.fc-slideshow nav i.icon-arrow-right {

right: 0;

}

.no-csstransforms3d .fc-slideshow nav i.icon-arrow-right {

right: -60px;

}

.icon-arrow-left:before,

.icon-arrow-right:before {

font-family: calibri;

speak: none;

font-style: normal;

font-weight: normal;

font-size: 20px;

background: {color:arrowbackground};

color: {color:arrowtext};

width: 30px;

height: 30px;

line-height: 30px;

text-align: center;

display: inline-block;

margin: 0 20px;

border-radius: 20% 10% 50% 5% / 25% 10% 30% 75%;

-webkit-font-smoothing: antialiased;

}

.icon-arrow-left:before {

content: "\00AB";

}

.icon-arrow-right:before {

content: "\00BB";

}

.csstransforms3d .fc-slideshow nav > div span:hover ~ i,

.no-csstransforms3d .fc-slideshow nav i,

.no-csstransforms3d .fc-slideshow nav > div span {

opacity: 1;

}

.csstransforms3d .fc-slideshow nav > div span:nth-child(2):hover ~ i{

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

transform: rotate(0deg);

}

.csstransforms3d .fc-slideshow nav > .fc-left span:first-child:hover ~ i,

.csstransforms3d .fc-slideshow nav > .fc-right span:nth-child(3):hover ~ i {

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

}

.csstransforms3d .fc-slideshow nav > .fc-right span:first-child:hover ~ i,

.csstransforms3d .fc-slideshow nav > .fc-left span:nth-child(3):hover ~ i {

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

transform: rotate(-45deg);

}

ul.fc-slides {

list-style: none;

margin: 0;

padding: 0;

}

ul.fc-slides li {

display: none;

}

.no-js ul.fc-slides li {

display: block;

}

.fc-flip {

width: 100%;

height: 100%;

border-radius: 50%;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.fc-flip div {

width: 100%;

height: 100%;

position: absolute;

border-radius: 50%;

top: 0;

left: 0;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

backface-visibility: hidden;

}

.fc-flip .fc-back {

-webkit-transform: rotateY(-180deg);

-moz-transform: rotateY(-180deg);

transform: rotateY(-180deg);

}

.fc-slideshow img {

width: 300px;

height: 300px;

border-radius: 50%;

}

.fc-slideshow a {

z-index:999999999;

position: absolute;

color: {color:customlinktext};

top: 73%;

margin-top: 30px;

line-height: 30px;

height: 30px;

left: 80px;

right: 80px;

background: {color:customlinkbackground};

font-size: 12px;

font-family:calibri;

text-transform: none;

text-align: center;

border-radius: 20% 10% 50% 5% / 25% 10% 30% 75%;

}

.fc-overlay-light,

.fc-overlay-dark {

opacity: 0;

}

.fc-overlay-light {

background: rgba(255,255,255,1);

}

.fc-overlay-dark {

background: rgba(0,0,0,1);

}

/* No JS fallback */

.no-js .fc-slideshow {

height: auto;

box-shadow: none;

}

.no-js .fc-slideshow h3 {

position: relative;

width: auto;

height: auto;

left: auto;

right: auto;

top: auto;

margin: 5px;

}

#container{

display:inline-block;

margin-top:30px;

width:300px;

}

/* MUSIC PLAYER */

#playertab{

position:fixed;

z-index:999;

bottom:0px;

right:-170px;

height:10px;

line-height:10px;

padding:7px 8px 3px 5px;

letter-spacing:2px;

background-color:{color:musicplayer};

-moz-border-radius:10px 0px 0px 0px;

border-radius:10px 0px 0px 0px;

-webkit-transition: opacity 1s linear;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

}

#mus{

float:left;

color:{color:musictext};

padding-right:100px;

-webkit-transition: opacity 1s linear;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

}

#playertab:hover #mus{

padding-right:0px;

opacity:0;

}

#playertab:hover{

right:0px;

}

{CustomCSS}

</style>

</head>

{block:IfInfiniteScrolling}

<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>

{/block:IfInfiniteScrolling}

<body>

{block:ifmusicplayer}

<div id='playertab'>

<div id='mus'><img src='{image:musicimage}' style='margin-right:8px;'/> {text:musicname}</div>

<div style='float:left;width:120px'>{text:musiccode}</div>

</div>

<!--playertab-->

{/block:ifmusicplayer}

<div class="border1">

<div class="border1x" style="background-color:{color:navi1background};"></div>

<div class="border1x" style="background-color:{color:navi2background};"></div>

<div class="border1x" style="background-color:{color:navi3background};"></div>

<div class="border1x" style="background-color:{color:navi4background};"></div>

</div>

<div class="border2">

<div class="border1x" style="background-color:{color:navi4background};"></div>

<div class="border1x" style="background-color:{color:navi3background};"></div>

<div class="border1x" style="background-color:{color:navi2background};"></div>

<div class="border1x" style="background-color:{color:navi1background};"></div>

</div>

<div id="sidebar">

<center>

<div id="container">

<div id="fc-slideshow" class="fc-slideshow">

<ul class="fc-slides">

<li><img src="{image:image1}" />{block:ifLink1}<a href="{text:Link1 URL}">{text:Link1}</a>{/block:ifLink1}</li>

<li><img src="{image:image2}" />{block:ifLink2}<a href="{text:Link2 URL}">{text:Link2}</a>{/block:ifLink2}</li>

<li><img src="{image:image3}" />{block:ifLink3}<a href="{text:Link3 URL}">{text:Link3}</a>{/block:ifLink3}</li>

<li><img src="{image:image4}" />{block:ifLink4}<a href="{text:Link4 URL}">{text:Link4}</a>{/block:ifLink4}</li>

<li><img src="{image:image5}" />{block:ifLink5}<a href="{text:Link5 URL}">{text:Link5}</a>{/block:ifLink5}</li>

<li><img src="{image:image6}" />{block:ifLink6}<a href="{text:Link6 URL}">{text:Link6}</a>{/block:ifLink6}</li>

<li><img src="{image:image7}" />{block:ifLink7}<a href="{text:Link7 URL}">{text:Link7}</a>{/block:ifLink7}</li>

<li><img src="{image:image8}" />{block:ifLink8}<a href="{text:Link8 URL}">{text:Link8}</a>{/block:ifLink8}</li>

</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="http://static.tumblr.com/7fjp0ap/MF0ml55gx/jquery.flipshow.js"></script>

<script>

$( function() {

$( '#fc-slideshow' ).flipshow();

} );

</script>

</div>

</center>

<center>

<div id="titlebox">

<a href="/">{Title}</a>

</div>

</center>

<center>

<div id="descbox0">

<div id="descbox">{Description}</div>

</div>

</center>

<center>

<div id="navibox">

<a href="/" style="background-color:{color:navi1background};color:{color:navi1text};">Home</a>

<a href="/ask" style="background-color:{color:navi2background};color:{color:navi2text};">Message</a>

<a href="/archive" style="background-color:{color:navi3background};color:{color:navi3text};">Archive</a>

<a href="http://a--themes.tumblr.com/" style="background-color:{color:navi4background};color:{color:navi4text};">Theme</a>

</div>

</center>

{block:IfNotInfiniteScrolling}

<center>

<div id="pagi">

{block:Pagination}

{block:PreviousPage}<a href="{PreviousPage}">« </a>{/block:PreviousPage}

{block:NextPage}<a href="{NextPage}"> »</a>{/block:NextPage}

{/block:Pagination}

</div>

</center>

{/block:IfNotInfiniteScrolling}

</div>

<div id="posts">

{block:Posts}

<div id="entry">

<div class="entry" >

{block:Text}

{block:Title}<div class="title">{Title}</div>{/block:Title}{Body}

{/block:Text}

{block:Photo}

{LinkOpenTag}<div class="mono"><img src="{PhotoURL-500}" class="center"></div>{LinkCloseTag}

{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}

{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}

{Caption}

{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}

{/block:Photo}

{block:Photoset}

{block:IfBigPosts}<div class="mono"><div class="photosetfade">{Photoset-500}</div></div>{/block:IfBigPosts}

{block:IfNotBigPosts}<div class="mono"><div class="photosetfade">{Photoset-400}</div></div>{/block:IfNotBigPosts}

{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}

{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}

{Caption}

{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}

{/block:Photoset}

{block:Link}

<div class="title">

<a href="{URL}" {Target}>{Name}</a>

</div>

{block:Description}{Description}{/block:Description}

{/block:Link}

{block:Quote}

<div id="quote">{Quote}</div>{block:Source} <div id="source"> —{Source}</div> {/block:Source}{/block:Quote}

{block:Chat}

{block:Title}

<div class="title">{Title}</div>

{/block:Title}

{block:Lines}<div class="{Alt}">

<div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>

{/block:Lines}

{/block:Chat}

{block:Audio}

<div id="musicbox">

<div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div></div>

<div class="coverx"><img src="http://media.tumblr.com/90911ce35307a2b68bb52c9794d02dd0/tumblr_inline_mgshunrUnn1r8s568.png"></div>

{block:AlbumArt}

<div class="cover"><img src="{AlbumArtURL}"></div>

{/block:AlbumArt}

<div class="audioplayer">

<div class="infomusic"> {block:Artist} <b>Artist:</b> {Artist}{/block:Artist}</div> <div class="infomusic"><b>Track:</b> {block:TrackName} "{TrackName}" {/block:TrackName}</div> <b> <div class="infomusic">Plays: </b> {PlayCountWithLabel} </div> </div></div>

{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}

{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}

{Caption}

{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}

{/block:Audio}

{block:Video}

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

{block:IfNotBigPosts}{Video-400}{/block:IfNotBigPosts}

{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}

{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}

{Caption}

{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}

{/block:Video}

{block:Answer}

<div class="ask"><div class="askimg"><img src="{AskerPortraitURL-128}"></div><i>{Asker}</i> <b>sent:</b><br /><br/>

{Question}</div>

{Answer}

{/block:Answer}

{block:PermalinkPage}

<div class="permalink">

<center><div id="date">{block:Date}posted {12Hour}:{Minutes} {AmPm} on {DayOfWeek}, {Month} {DayOfMonth}, {Year}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</div>{block:RebloggedFrom}<b>origin:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a> &nbsp;|&nbsp; <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a><br />{/block:RebloggedFrom}

{block:HasTags}<b>tags &raquo;</b> {block:Tags} #<a href="/tagged/{Tag}">{Tag}</a>{/block:Tags}{/block:HasTags}</center>

{block:PostNotes}

{PostNotes}

{/block:PostNotes}

</div>

{/block:PermalinkPage}

{block:IndexPage}

<div id="perma">

<a href="{ReblogURL}" style="background-color:{color:navi1background};color:{color:navi1text};">REBLOG</a> {block:Date}<a href="{Permalink}" style="background-color:{color:navi3background};color:{color:navi3text};">{TimeAgo}</a>{/block:Date}{block:NoteCount} <a href="{Permalink}" style="background-color:{color:navi4background};color:{color:navi4text};"> {NoteCountWithLabel}</a>{/block:NoteCount}

</div>

{/block:IndexPage}

</div>

{block:indexpage}

{block:IfShowTags}

{block:HasTags}

<div id="tags">

<b>tags:{block:Tags} <b>#</b><a href="/tagged/{Tag}">{Tag}</a>{/block:Tags}

</div>

{/block:HasTags}

{/block:IfShowTags}

{/block:indexpage}

</div>

{/block:Posts}

</div>

<div>

<img src="{image:cornerimage}" style="position:fixed;

max-height: 100%;

max-width: 500px;

right:-20px;

bottom:-5px;

z-index:-9;

">

</div>

</body>

</html>