font-family:'Questrial', sans-serif; background-color: #fafafa; background-position: center center; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fafafa), to(#ebebeb)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fafafa, #ebebeb); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fafafa, #ebebeb); /* IE 10 */ background: -ms-radial-gradient(circle, #fafafa ,#ebebeb); } body:before { /* top shadow */ content: ""; position: fixed; bottom: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 40px #FFF; -moz-box-shadow: 0px 0px 40px #FFF; -ms-box-shadow: 0px 0px 40px #FFF; -o-box-shadow: 0px 0px 40px #FFF; box-shadow: 0px 0px 40px #FFF; z-index: 100; } #content { /* Prevent vertical gaps */ line-height: 0; margin-top: 45px; -webkit-column-count: 5; -webkit-column-gap: 0px; -moz-column-count: 5; -moz-column-gap: 0px; column-count: 5; column-gap: 0px; } #content img, .post { width: 100% !important; height: auto !important; margin-right: -6px; } .post{ position: relative; box-shadow: 0px 3px 5px rgba(0,0,0,.25); } @media (max-width: 1900px) { #content { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } } @media (max-width: 1400px) { #content { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media (max-width: 1000px) { #content { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media (max-device-width: 1024px) { #content { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media (max-width: 400px) { #content { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } header, .pullDown{ -moz-animation-iteration-count: 1; -moz-animation-timing-function: ease-in-out; -moz-animation-name: bob; -moz-animation-duration: .5s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: bob; -webkit-animation-duration: .5s; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-name: bob; animation-duration: .5s; } @-webkit-keyframes bob { from { top: -75px; } to { top: 0; } } @-moz-keyframes bob { from { top: -75px; } to { top: 0; } } keyframes bob { from { top: -75px; } to { top: 0; } } .singlePost{ -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: sca; -webkit-animation-duration: .4s; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-name: sca; animation-duration: .4s; } @-webkit-keyframes sca { from { opacity: 0; } to { opacity: 1; } } @keyframes sca { from { opacity: 0; } to { opacity: 1; } } /* Start theme code */ a{ color: #bebebe; } ul.permalinkMeta li a:visited{ color: #fa8100; } ul.permalinkMeta li a:hover{ color: #e17400; } a:focus{ color: #fa8100; } .text{ line-height: 1.4; font-size: 12px; padding: 20px; color: #999999; min-height: 100px; max-height: 300px; overflow: hidden; background: #ebebeb; background: -moz-linear-gradient(top, #fafafa 0%, #ebebeb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#ebebeb)); background: -webkit-linear-gradient(top, #fafafa 0%,#ebebeb 100%); background: -o-linear-gradient(top, #fafafa 0%,#ebebeb 100%); background: -ms-linear-gradient(top, #fafafa 0%,#ebebeb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ebebeb',GradientType=0 ); background: linear-gradient(top, #fafafa 0%,#ebebeb 100%); } .text ul, text ol, blockquote{ margin-top: 10px; margin-left: 15px; } .text p{ margin-bottom: 10px; } .videoWrapper{ position: relative; } .videoWrapper embed, .videoWrapper iframe{ width: 100%; } blockquote{ border-left: 1px solid #F8F8F8; padding: 3px; } header{ position: fixed; top: 0; width: 100%; z-index: 100; background: #ebebeb; background: -moz-linear-gradient(top, #fafafa 0%, #ebebeb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#ebebeb)); background: -webkit-linear-gradient(top, #fafafa 0%,#ebebeb 100%); background: -o-linear-gradient(top, #fafafa 0%,#ebebeb 100%); background: -ms-linear-gradient(top, #fafafa 0%,#ebebeb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#ebebeb',GradientType=0 ); background: linear-gradient(top, #fafafa 0%,#ebebeb 100%); } header nav ul li a{ color: #999999; display: block; text-decoration: none; padding: 22px 15px 7px 15px; } header nav ul li a:visited{ color: #999999; } header h1, h2{ font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: normal; text-shadow: 1px 1px 0px rgba(255,255,255, .6); text-transform: uppercase; } aside h2{ margin-top: 25px; } ul.chat li{ list-style: none; padding: 5px 5px; } ul.chat li.odd{ background-color: rgba(0,0,0,.05); } .permalinkPost ul.chat{ margin: 15px; } .label{ font-weight: bold; } header h1 a, header h1 a:visited, h2 a, .singlePost a.hoverMeta article.post .text h2{ padding: 7px 15px; text-decoration: none; display: block; color: #bebebe; } a:visited{ color: #999999; } .permalinkPost a:visited{ color: #bebebe; } .permalinkPost a:hover{ color: #555555; } h2{ text-align: center; } header h1 a:hover, header nav ul li a:hover{ color: #555555; } header h1, header nav ul li{ float: left; } header nav{ float: right; } header nav ul li{ font-size: 14px; list-style: none; text-transform: capitalize; } iframe#tumblr_controls{ position: fixed !important; top: 50px !important; } .post .meta{ width: 100%; height: 100%; /* background-color: rgba(255, 162, 0, .75);*/ background-color: rgba(0, 0, 0, .75); position: absolute; z-index: 50; } .post .meta .details{ padding: 30px; height: 50%; } .singlePost{ position: relative; } a.hoverMeta{ text-decoration: none; } a.notesMeta{ right: 10px; padding: 20px; } a.highresMeta{ left: 10px; padding: 20px; } a.reblogMeta{ left: 50%; padding: 20px; margin-left: -37px; } a.hoverMeta article.post .text p, .singlePost article.post .text p, ul.chat li{ margin-top: 10px; } a.notesMeta:hover, a.highresMeta:hover, a.reblogMeta:hover, .time:hover, .summary a:hover{ color: #FFF; } a.highresMeta, a.notesMeta, a.reblogMeta{ font-size: 12px; text-decoration: none; position: absolute; bottom: 10px; z-index: 60; color: #b8b8b8; font-family: 'Oswald', sans-serif; } .time{ font-family: 'Oswald', sans-serif; font-size: 22px; color:#b8b8b8; text-transform: uppercase; } .post .meta .time{ text-align: center; margin-top: 0px; } .singlePost:hover .meta .time{ margin-top: 10px; } .summary a{ color: #b8b8b8 ; } .summary{ width: 50%; position: absolute; left: 25%; top: 0px; z-index: 70; line-height: 1.4; font-size: 12px; color: #FFF; text-align: center; max-height: 100px; overflow: hidden; } .meta, .permalinkLinks a, .time, a, .summary, aside, aside a img, h4,.previous,.next, .anchorPrev,.anchorNext, .toggleFollowing img, .toggleLikes img{ -webkit-transition: all .2s ease-in-out; /* -moz-transition: all .2s ease-in-out;*/ -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .meta, .permalinkLinks a, .summary{ opacity: 0; } .singlePost:hover .summary{ opacity: 1; margin-top: 60px; } .singlePost:hover .meta, .singlePost a:focus .meta{ opacity: 1; box-shadow: 0 0 60px rgba(0, 0, 0, 1) inset; } .singlePost:hover .permalinkLinks a{ opacity: 1; bottom: 30px; } .about{ padding-top: 90px; } .about img{ float: left; padding: 0 10px 0 0; width: 64px; height: 64px; } .about p{ margin-top: -4px; } input[type="text"]{ width: 90%; background: #fafafa; border: none; padding: 10px 10px 10px 10px; margin: 20px 0px 20px -1px; box-shadow: 1px 1px 1px rgba(0,0,0,.20) inset; color: #999999; font-size: 16px; } ul#likes li.like_post{ list-style: none; float: left; width: 100%; margin-right: 5px; margin-bottom: 5px; } ul#folowed li{ list-style: none; } .like_caption{ display: none; } .like_audio_post{ display: none; } aside a img{ opacity: .8; } aside a img:hover{ opacity: 1; } img.like_photo{ display: block; margin: 0 auto; width: 100%; } /*Permalink Shit*/ .permalinkPost{ margin: 100px auto 50px auto; background-color: #FFF; box-shadow: 0px 3px 5px rgba(0,0,0,.25); font-size: 12px; line-height: 1.4; color: #999999; width: 800px; position:relative; } ul.permalinkTags li, ul.permalinkMeta li{ float: left; list-style: none; margin-right: 5px; } ul.permalinkMeta{ float: left; } ul.permalinkMeta li{ margin-top: 25px; margin-right: 15px; color:#999999; } ul.permalinkMeta li a{ color: #fa8100; } ul.permalinkTags li{ margin-right: 10px; margin-top: 20px; } ul.permalinkTags li a{ display: block; padding: 5px; color: #FFF; background-color:#fa8100; border-left: 9px solid #fba300; text-decoration:none; } ul.permalinkTags li a:hover{ color: #FFF; background-color:#e17400; } ul.permalinkTags, ul.permalinkMeta{ overflow: hidden; padding-right: 15px; } .permalinkPost a img, .permalinkPost img{ display: block; margin: 0 auto; } .permalinkPost p img{ display: block; margin: 0 auto; padding: 15px; max-width: 200px; } img.permalinkImage{ width: 100%; } .permalinkPost ul, .permalinkPost ol{ margin-left: 50px; margin-bottom: 10px; } h2 a.asker{ display: inline; padding: 0; } .permalinkPost h2{ padding: 10px; } ol.notes { padding: 0px; margin: 0px 0px 25px 0px; list-style-type: none; border-bottom: solid 1px #e4e4e4; font-size: 12px; line-height: 1.4; } ol.notes a{ color: #fa8100; } ol.notes a:hover{ color: #555555; } ol.notes li.note { border-top: solid 1px #e4e4e4; overflow: hidden; background-color:#fafafa; } ol.notes li.note img.avatar { vertical-align: -4px; margin-right: 10px; width: 16px; height: 16px; float: left; padding: 10px; background-color: #fafafa; } ol.notes li.note span.action { font-weight: normal; color: #999999; margin-top:10px; display:block; } ol.notes li.note .answer_content { font-weight: normal; } ol.notes li.note blockquote { border-color: #eee; padding: 4px 10px; margin: 10px 0px 0px 25px; } ol.notes li.note blockquote a { text-decoration: none; } .permalinkPost p{ padding: 15px; } .permalinkPost blockquote{ padding-left: 20px; font-style: italic; } .permalinkPost ul.permalinkTags{ margin-left: 20px; float: left; } .permalinkPost ul.permalinkMeta{ margin-left: 20px; } .metadata{ } section.pullDown{ width: 100%; background: rgba(0,0,0, .75); font-size: 12px; padding: 45px 20px 0px 10px; position: fixed; z-index: 90; color: #FFF; line-height: 1.4; width: 100%; top: 0px; box-shadow:0px 5px 10px rgba(0,0,0, .25); } section.pullDown a{ color: #FFF; } section.pullDown p{ line-height: 1.5; margin-top: -3px; } .toggleFollowing img:hover, .toggleLikes img:hover{ opacity: .8; } #all{ display: none; width: 100%; padding: 10px; overflow: hidden; margin-left: -10px; } .trigger { position: absolute; left: 0px; border-top: 5px solid #fa8100; width: 100%; } .trigger h4{ background: #fa8100; margin-left: 15px; float: left; cursor: pointer; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-radius: 0px 0px 2px 2px; border-radius: 0px 0px 2px 2px; box-shadow:0px 4px 5px rgba(0,0,0, .1); font: italic 16px "Georgia", sans-serif; padding: 2px 10px; } h4:hover{ background-color: #e17400; padding-top: 8px; } .toggleDesc, .toggleFollowing, .toggleLikes{ width: 32%; float: left; margin: 0 5px; } ul#likes{ float: left; } .toggleLikes{ -webkit-column-count: 5; -webkit-column-gap: 5px; -moz-column-count: 5; -moz-column-gap: 5px; column-count: 5; column-gap: 5px; } .toggleFollowing ul li, .toggleLikes ul li{ float: left; margin-right: 4px; list-style: none; } .toggleDesc img{ padding-right: 5px; float: left; } footer{ width: 100%; overflow: hidden; font-size: 11px; } footer ul{ width: 90%; margin: 25px auto; list-style: none; text-align: center; } footer ul li{ display: inline; text-transform: capitalize; } footer ul li a{ text-decoration: none; color: #bebebe; padding:15px; } footer ul li a:visited{ color: #bebebe; } footer ul li a:hover{ color: #999999; } .anchorNext{ width:10%; height:100%; position:fixed; top:0; right:0; float:left; overflow:none; text-decoration: none; border-right: 0px solid #fa8100; } .anchorPrev{ width:10%; height:100%; position:fixed; top:0; left:0; float:left; overflow:none; text-decoration: none; border-left: 0px solid #fa8100; } .anchorPrev:hover{ border-left: 10px solid #e17400; } .anchorNext:hover{ border-right: 10px solid #e17400; } .anchorPrev:hover .previous, .anchorNext:hover .next{ background-color: #e17400; } .previous, .next{ font-size: 14px; color: #FFF; position: absolute; top: 50%; margin-top: -20px; background-color: #fa8100; padding:20px 10px; } .next{ right: 0; } .permaTagWrap, .permaMetaWrap, .permaDescWrap{ background-color: #f5f5f5; overflow:hidden; border-top:1px solid #e4e4e4; } .permaTagWrap>p, .permaMetaWrap>p, .permaDescWrap>p{ font-family: 'Oswald', sans-serif; color:#bebebe; font-size: 18px; float:left; padding:20px; background-color:#fafafa; } .permaDescWrap{ background-color:#fafafa; } http://hww.myspace.com/nurulfitrimaghfiroh http://www.twitter.com/nurul_fitri13 http://www.blogger.com/nurulfm13