/* Bagua Theme - 45royale */

@import url('http://static.tumblr.com/wassjkj/D2bln3y09/reset.css');

/* Structure
--------------------------------------------------- ***/
html{ overflow: auto; }

body {
	color: #939393;
	font: normal 15px 'Metrophobic', arial, serif;
}

#container {
	overflow: auto;
}

#column {
	margin: 50px auto;
	width: 884px;
}

#header, #content, #footer {
	margin: 7px;
	background-color: #fff;
}

.border {
	background-color: #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 7px 0 rgba(0,0,0,0.2);
	box-shadow: 0 0 7px 0 rgba(0,0,0,0.2);
}

.group { overflow: hidden; }

/* Typography
--------------------------------------------------- ***/
h3 { font-size: 20px; }

/* Scroll
--------------------------------------------------- ***/
.jspContainer {
	overflow: hidden;
	position: relative;
}

.jspPane { position: absolute; }

.jspVerticalBar {
	width: 16px; height: 100%;
	position: absolute;
	top: 0; right: 20px;
}

.jspVerticalBar * { margin: 0; padding: 0; }

.jspCap {
	height: 50px;
	display: block;
}

.jspCapTop { background: url(http://static.tumblr.com/wassjkj/U0pln3y1r/track_top.png) no-repeat bottom left; }
.jspCapBottom { background: url(http://static.tumblr.com/wassjkj/PsEln3y27/track_btm.png) no-repeat top left; }

.jspTrack {
	position: relative;
	background: url(http://static.tumblr.com/wassjkj/SLvln3y2m/track_bg.png) repeat-y;
}

.jspDrag {
	position: relative;
	top: 0; left: 2px;
	cursor: pointer;
	background: url(http://static.tumblr.com/wassjkj/r7Jln3y34/track_drag_bg.png) repeat-y;
}

.jspDragTop, .jspDragBottom {
	display: block;
	width: 10px; height: 4px;
	position: absolute;
}

.jspDragTop {
	top: -4px; left: 0;
	background: url(http://static.tumblr.com/wassjkj/eHPln3y3m/track_drag_top.png) no-repeat top left;
}

.jspDragBottom {
	bottom: -4px; left: 0;
	background: url(http://static.tumblr.com/wassjkj/oiOln3y47/track_drag_btm.png) no-repeat bottom left;
}

/* Header
--------------------------------------------------- ***/
#header { margin-bottom: 30px; padding: 12px 5px 20px 30px; }

#header .mast {
	padding: 0 0 0 0;
	min-height: 85px;
	clear: both;
}

#header #title {
	float: left;
	width: 450px;
}

#title h1 { font-size: 45px; }
h1 a { color: #4d4d4d; }

#header #nav {
	padding: 8px 0 0 90px;
	width: 241px;
	float: right;
}

#header #searchform input {
	color: #9c9793;
	font-size: 14px;
	margin: 0 0 19px 0; padding: 5px 15px 5px 28px;
	width: 172px; height: 20px;
	background: url(http://static.tumblr.com/wassjkj/V89ln3yik/bg_search.png) no-repeat;
	outline: none;
}

#header #nav a {
	margin: 0 20px 0 0;
	width: 27px; height: 27px;
	display: block;
	float: left;
	position: relative;
}

#header #nav li.profile a { background: url(http://static.tumblr.com/wassjkj/ozqln3y4t/icon_profile.png) no-repeat; }
#header #nav li.twitter a { background: url(http://static.tumblr.com/wassjkj/ZZiln3y58/icon_twitter.png) no-repeat; }
#header #nav li.random a { background: url(http://static.tumblr.com/wassjkj/7cvln3y5o/icon_random.png) no-repeat; }
#header #nav li.ask a { margin: 0 17px 0 0; background: url(http://static.tumblr.com/wassjkj/1AOln3y6k/icon_ask.png) no-repeat; }
#header #nav li.archive a { width: 30px; background: url(http://static.tumblr.com/wassjkj/WtUln3y78/icon_archive.png) no-repeat; }
#header #nav li a:hover, #header #nav li a.active { background-color: #4d4d4d !important; } 
#header #nav li a.active { background-color: #4d4d4d !important; }

/*
#header #nav li a {
	-webkit-transition: background .3s ease;
	-moz-transition: background .3s ease;
	-o-transition: background .3s ease;
	transition: background .3s ease;
}

#header #nav li a:hover {
	background: #4d4d4d;
}
*/

/* Tooltips */
#header #nav a:hover > .tip { display: block; }

.tip {
	padding: 5px 0 0 0;
	display: none;
	position: absolute;
	z-index: 100;
	background: url(http://static.tumblr.com/wassjkj/ofAln3y7s/bg_tip.png) no-repeat top center;
}

.tip { top: 33px; }
#header #nav li.profile a .tip { right: -21px; }
#header #nav li.twitter a .tip { right: -22px; }
#header #nav li.random a .tip { right: -27px; }
#header #nav li.ask a .tip { right: -13px; }
#header #nav li.archive a .tip { right: -28px; }

.tip .bubble {
	color: #fff;
	font: bold 13px 'Helvetica Neue', Arial, sans-serif;
	padding: 3px 14px 5px 14px;
	display: block;
	background: url(http://static.tumblr.com/wassjkj/Pciln3y8y/bg_bubble.png);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

.portrait {
	margin: 2px 31px 0 0;
	position: relative;
	float: left;
}

.portrait, .portrait span, .portrait img { width: 80px; height: 80px; }

.portrait span {
	display: block;
	position: absolute;
	top: 0; left: 0;
	background: url(http://static.tumblr.com/wassjkj/iidln3y9i/bg_portrait.png) no-repeat;
}

#profile, #ask {
	color: #4d4d4d;
	margin: 20px 27px 0 0; padding: 27px 0 10px 0;
	overflow: auto;
	background: url(http://static.tumblr.com/wassjkj/UOVln3y9v/bg_div.png) repeat-x;
}

/* Profile
--------------------------------------------------- ***/
#about {
	width: 420px;
	float: left;
}

#about h3 { margin: 0 0 10px 0; }

#about p {
	color: #9c9793;
	font: normal 17px/20px 'Rokkitt', arial, serif;
}

#following {
	padding: 0 0 0 14px;
	width: 230px;
	float: right;
	background: url(http://static.tumblr.com/wassjkj/FGZln3yaa/bg_entry.png) repeat-y;
}

#following h3 { margin: 0 0 4px 21px; }

#following ul { overflow: hidden; }
#following ul.two { height: 90px; }
#following ul.three { height: 135px; }
#following ul.four { height: 180px; }

#following li a {
	margin: 10px 0 10px 21px;
	display: block;
	float: left;
	position: relative;
}

#following li a, #following li a img, #following li a span { width: 25px; height: 25px; }

#following li a span {
	display: block;
	position: absolute;
	top: 0; left: 0;
	background: url(http://static.tumblr.com/wassjkj/GbAlnggpo/bg-following.png) no-repeat;
}

/* Ask
--------------------------------------------------- ***/
#ask .group { float: left; }
#ask h3 { margin: 0 0 10px 0; }

/* Footer
--------------------------------------------------- ***/
#footer {
	margin-top: 30px; padding: 0 10px;
	overflow: hidden;
}

.node {
	font-size: 14px; line-height: 21px;
	margin: 0; padding: 19px 19px 25px 20px;
	border-right: 1px dotted #d7d7d7;
	width: 170px; height: auto;
	float: left;
}

.node.last { border: none; }
.node h3 { margin: 0 0 9px 0; }
.node h3, .node h3 a { color: #4d4d4d; }

/* Posts
--------------------------------------------------- ***/
#content { padding: 30px; }

.post {
	position: relative;
	background: url(http://static.tumblr.com/wassjkj/3doln3yau/bg_post.png) no-repeat 110px bottom;
}

/* Tags */

h2.tags_heading {
	font-size: 25px;
	margin: 0 0 20px 110px;
}

h2.tags_heading span { font-weight: bold; }

/* Date */
.date {
	color: #c0c0c0;
	font-size: 16px;
	text-align: center; text-transform: uppercase;
	margin: 10px 28px 0 0;
	width: 82px;
	display: block;
	position: absolute;
	top: 0; left: 0;
}

.date span.day {
	font-family: 'Rokkitt', arial, serif;
	font-size: 55px;
	margin: 0 0 5px 0; padding: 15px 0 0 0;
	width: 82px; height: 67px;
	display: block;
	background: url(http://static.tumblr.com/wassjkj/t49ln3yb8/bg_date.png) no-repeat;
}

.samedate .date { height: 82px; }

/* Entry */
.entry {
	margin: 30px 0 30px 110px;
	width: 540px; min-height: 165px;
	float: left;
	background: url(http://static.tumblr.com/wassjkj/T2lln3ybn/bg_entry.png) repeat-y top right;
}

.entry p, .entry ul li, .entry ol li {
	font-family: 'Rokkitt', arial, serif;
	font-size: 17px; line-height: 21px;
}

.entry ul {
	list-style-type: disc;
	margin: 0 0 0 15px;
}

.entry ol {
	list-style-type: decimal;
	margin: 0 0 0 19px;
}

.entry ul, .entry ol { padding: 0 0 10px 0; }
.entry ul li, .entry ol li { padding: 0 0 5px 0; }

.entry blockquote {
margin: 0 0 25px 0; padding: 0 0 0 10px;
	border-left: 3px solid #d7d7d7;
}

/* Meta
--------------------------------------------------- ***/
.meta {
	padding: 37px 0 0 0;
	width: 125px; height: auto;
	float: right;
}

.meta a {
	margin: 0 0 6px 25px;
	display: block;
}

.meta .details {
	margin: 0 0 21px 0; padding: 0 0 25px 0;
	background: url(http://static.tumblr.com/wassjkj/i0dln3yc4/bg_meta.png) no-repeat bottom left;
}

.meta .share {
	margin: 0 0 6px 0;
	position: relative;
}

.meta .share .sharelink { cursor: pointer; }

.meta .share .expand {
	padding: 9px 0 0 10px;
	width: 171px; height: 77px;
	display: none;
	position: absolute;
	top: -89px; left: -30px;
	background: url(http://static.tumblr.com/wassjkj/ozWln3ycl/bg_share.png) no-repeat;
}

.meta .share .expand input {
	color: #939393;
	font: normal 11px 'Metrophobic', arial, serif;
	text-align: center;
	letter-spacing: -0.25px;
	margin: 0 0 21px 0;
	width: 160px;
	background-color: #f3f3f3;
}

.meta .share .expand .twitter-share-button { margin: 0 6px 0 4px; float: left; }
.meta .share .expand .fb-like-button { float: left; }

.meta .highres {
	margin: 21px 0 0 0; padding: 24px 0 0 0;
	background: url(http://static.tumblr.com/wassjkj/i0dln3yc4/bg_meta.png) no-repeat top left;
}

/* Text
--------------------------------------------------- ***/
.text .entry { padding: 0 35px 0 0; }
.text h1 { font-size: 31px; line-height: 34px; }
.text h1 a { color: #4d4d4d; }
.text p { margin: 8px 0 7px 0; }

/* Photo
--------------------------------------------------- ***/
.photo .entry, .photoset .entry { margin: 25px 0; padding: 0 35px 0 110px; }
.photo p, .photoset p { margin: 15px 0 0 0; }

/* Quote
--------------------------------------------------- ***/
.quote .entry { padding: 25px 35px 30px 0; }

.quote blockquote {
	color: #4d4d4d;
	font: bold italic 20px/28px 'Droid Serif', Georgia, serif;
	margin: 0; padding: 0 0 10px 0;
	border: none;
}

.quote p {
	color: #939393;
	font: normal 16px 'Metrophobic', arial, serif;
	text-align: right;
}

/* Link
--------------------------------------------------- ***/
.link .entry { padding: 10px 35px 35px 0; }

.link span.heading {
	color: #939393;
	font-size: 13px;
}

.link h1 { font-size: 33px; line-height: 37px; padding-bottom: 9px; }

.link h1 a {
	color: #4d4d4d;
	font-size: 33px; line-height: 37px;
}

/* Chat
--------------------------------------------------- ***/
.chat .entry { padding: 0 35px 0 0; }

.chat h2 a {
	color: #4d4d4d;
	font-size: 24px; line-height: 26px;
	margin: 0 0 15px 0;
	display: block;
}

.chat p {
	font: normal 16px 'Metrophobic', arial, serif;
	margin: 0 0 11px 0;
}

.chat p strong {
	color: #939393;
	font-weight: normal;
}

.chat .chatstream span { color: #4d4d4d; }

/* Audio
--------------------------------------------------- ***/
.audio .entry { padding: 5px 35px 0 0; }

.audio .audiometa {
	width: 380px;
	float: left;
}

.audio .artist {
	color: #939393;
	font-size: 16px;
}

.audio h2 a {
	color: #4d4d4d;
	font-size: 28px;
}

.audio p { margin: 6px 0 0 0; }
.audio .plays { font-size: 16px; }

.audio .album {
	margin: 4px 0 0 0;
	float: right;
	position: relative;
}

.audio .album, .audio .cover img, .audio .track { width: 122px; height: 122px; }

.audio .track {
	display: block;
	position: absolute;
	top: 0; left: 0;
	background: url(http://static.tumblr.com/wassjkj/drxln3ydn/bg_album.png) no-repeat;
}

.audio .track .player {
	width: 41px; height: 41px;
	display: block;
	position: absolute;
	right: 33px; bottom: 33px;
}

.audio .audio_player {
	width: 26px; height: 26px;
	overflow: hidden;
}

/* Video
--------------------------------------------------- ***/
.video .entry { padding: 0 35px 0 0; }
.video .entry p { margin: 15px 0 0 0; }

/* Permalink
--------------------------------------------------- ***/
#notes {
	margin: 26px 0 0 112px;
	width: 570px;
}

#notes h4 {
	color: #4d4d4d;
	padding: 0 0 16px 0;
	border-bottom: 1px dotted #d7d7d7;
}

#notes .notes li {
	font: normal 17px 'Rokkitt', arial, serif;
	padding: 12px 0;
	border-bottom: 1px dotted #d7d7d7;
}

#notes .notes li img {
	width: 24px; height: 24px;
	float: left;
}

#notes .notes li .action {
	margin: 0 0 0 11px; padding: 2px 0 0 0;
	float: left;
}

#notes .notes li .action a { text-decoration: underline; }

#disqus { 
	margin: 30px 0 0 112px;
	width: 570px;
	padding-bottom: 30px;
	position: relative;
	background: url(http://static.tumblr.com/wassjkj/3doln3yau/bg_post.png) no-repeat 110px bottom;
	}

/* Pagination
--------------------------------------------------- ***/
#pagination {
	padding: 30px 0 0 0;
	width: 697px;
	overflow: hidden;
	float: right;
}

#pagination .prev, #pagination .prev a, #pagination .next, #pagination .next a { display: block; }
#pagination .prev, #pagination .prev a { float: left; }
#pagination .next, #pagination .next a { float: right; }

#pagination .prev, #pagination .next, #pagination .active a {
	height: 40px;
	background: url(http://static.tumblr.com/wassjkj/sOnln3ye6/btn_bg_rt.png) no-repeat top right;
	position: relative;
}

#pagination .active { padding: 0 !important; }
#pagination .prev, #pagination .next, #pagination .active a { padding: 0 20px 0 0; }

#pagination span.cap {
	display: block;
	width: 20px; height: 40px;
	background: url(http://static.tumblr.com/wassjkj/PWPln3yen/btn_bg_lt.png) no-repeat;
}

#pagination span.title {
	color: #fff;
	font-size: 16px;
	display: none;
	position: absolute;
	top: 0;
}

#pagination .prev span.title { padding: 8px 0 0 43px; left: 0; }
#pagination .next span.title { padding: 8px 43px 0 0; right: 0; }

#pagination span.arrow {
	width: 40px; height: 40px;
	position: absolute;
	top: 0;
}

#pagination .prev span.arrow { left: 0; background: url(http://static.tumblr.com/wassjkj/8fTln3yf4/btn_prev.png) no-repeat; }
#pagination .next span.arrow { right: 0; background: url(http://static.tumblr.com/wassjkj/Dt5ln3yfi/btn_next.png) no-repeat; }

#pagination .prev, #pagination .next { background-color: #ebebeb; }

/* Shared
--------------------------------------------------- ***/
.frame {
	text-align: center;
	padding: 20px;
	background: url(http://static.tumblr.com/wassjkj/Dz0ln3yg2/bg_frame.jpg) bottom right;
}

.frame object { display: block; }

.tags {
	margin: 15px 0 10px 0;
	overflow: hidden;
}

.audio .tags { background: none; }

.tags a {
	color: #fefefe;
	font-size: 13px;
	margin: 0 12px 10px 0; padding: 0 0 0 18px;
	height: 25px;
	display: block;
	float: left;
	background: url(http://static.tumblr.com/wassjkj/suVln3ygm/tag_left.png) no-repeat top left;
}

.tags a span {
	padding: 3px 14px 0 0;
	height: 22px;
	display: block;
	background: url(http://static.tumblr.com/wassjkj/F6sln3yh5/tag_right.png) no-repeat bottom right;
}

.clear {
	font-size: 0;
	line-height: 0;
	height: 0;
	content: ".";
	display: block;
	clear: both;
}

.spin {
		-webkit-animation-name: spin;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-duration: 3s;	
		/*
		Because FF doesn't support mask-image (not even in FF5) so the
		spinning looks like arse. Saving this here for the time being.
		*/
		-moz-animation-name: spin;
		-moz-animation-iteration-count: infinite;
		-moz-animation-timing-function: linear;
		-moz-animation-duration: 2s;	
		
		animation-name: spin;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-duration: 2s;	
}


.cover img {
	 -webkit-mask-image: url('http://static.tumblr.com/wassjkj/2Upln3yhs/album_mask.png');
	 mask-image: url('http://static.tumblr.com/wassjkj/2Upln3yhs/album_mask.png');
}


@-webkit-keyframes spin {

	0% {
			
			-webkit-transform: rotate(0deg);
		
		}
	
	10% {
	
			-webkit-transform: rotate(36deg);
	
	}

	20% {
	
			-webkit-transform: rotate(72deg);
	
	}
	
	30% {
	
			-webkit-transform: rotate(108deg);
	
	}
	
	40% {
	
			-webkit-transform: rotate(144deg);
	
	}
			

	50% {
	
			-webkit-transform: rotate(180deg);
	
		}


	60% {
	
			-webkit-transform: rotate(216deg);
	
		}


	70% {
	
			-webkit-transform: rotate(252deg);
	
		}
		

	80% {
	
			-webkit-transform: rotate(288deg);
	
		}


	90% {
	
			-webkit-transform: rotate(324deg);
	
		}


	100% {
	
			-webkit-transform: rotate(360deg);
	
		}
		
}

/* Under review */
@-moz-keyframes spin {

	0% {
			
			-moz-transform: rotate(0deg);
			
		}
		
	25% {
	
			-moz-transform: rotate(90deg);
	
	}
	
	50% {
	
			-moz-transform: rotate(180deg);
	
	}
	
	75% {
	
			-moz-transform: rotate(270deg);
	
	}
	
	100% {
	
			-moz-transform: rotate(360deg);
	
		}
		
}

#profile { overflow: auto; }
#ask, #profile { display: none; }

/* Link color transition
--------------------------------------------------- ***/

a {
	-webkit-transition: color .3s ease;
	-moz-transition: color .3s ease;
	-o-transition: color .3s ease;
	transition: color .3s ease;
}

a:hover, .title a:hover { color: #4d4d4d; }

.tags a span, .tags a {
	-webkit-transition: background-color .3s ease;
	-moz-transition: background-color .3s ease;
	-o-transition: background-color .3s ease;
	transition: background-color .3s ease;
}

.tags a:hover span, .tags a:hover {
	background-color: #4d4d4d !important;
	color: #fff !important;
}