/* -------------------------------- SPLASH.CSS - SPLASH BY PIXEL LAB -------------------------------- Copyright 2014 - Pixel Lab http://www.pixellab.co/theme/splash FILE CONTENTS: 1. ANIMATIONS - 2. LANG - 3. RESET - 4. HTML, BODY - 5. FREQUENT TAGS - 6. #GLOBAL_NAV - 7. #SPLASH - 8. #POSTS - 9. #FOOTER - 10. .PAGINATION - 11. #POST_BOX - 12. #FLOAT_PLAYER - 13. #BODY_LOCK - 14. #OMNI_LOADING - 15.A. MEDIA_QUERIES - SCREEN SIZES 15.B. MEDIA_QUERIES - DOUBLE PIXEL SCREENS */ /* 1. ANIMATIONS */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @-moz-keyframes bounce { 0%, 100% { -moz-transform: translateY(0); } 50% { -moz-transform: translateY(7px); } } @-ms-keyframes bounce { 0%, 100% { -ms-transform: translateY(0); } 50% { -ms-transform: translateY(7px); } } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(7px); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @-moz-keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @-ms-keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @-webkit-keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes slide { 0%, 25% { opacity: 1; transform: translateY(0); } 50% { opacity: 0; transform: translateY(96px); } 75% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: translateY(0); } } @-moz-keyframes slide { 0%, 25% { opacity: 1; -moz-transform: translateY(0); } 50% { opacity: 0; -moz-transform: translateY(96px); } 75% { opacity: 0; -moz-transform: translateY(-14px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-ms-keyframes slide { 0%, 25% { opacity: 1; -ms-transform: translateY(0); } 50% { opacity: 0; -ms-transform: translateY(96px); } 75% { opacity: 0; -ms-transform: translateY(-14px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @-webkit-keyframes slide { 0%, 25% { opacity: 1; -webkit-transform: translateY(0); } 50% { opacity: 0; -webkit-transform: translateY(96px); } 75% { opacity: 0; -webkit-transform: translateY(-14px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } /* 2. LANG */ .indefinite_article[data-preceding-word*="iPhone"]:after, .indefinite_article[data-preceding-word*="iPad"]:after, .indefinite_article[data-preceding-word*="iPod"]:after { content: "n"; } /* 3. RESET */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; color: inherit; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* 4. HTML, BODY */ html, body { height: 100%; } body { background: #FCFCFC; color: #333; font: 12px/1.7 "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .no_scroll, .post_box_open, .body_lock_open { overflow: hidden; } /* 5. FREQUENT TAGS */ pre { padding: 15px 20px; color: #FCFCFC; background: #000; box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); } blockquote { border-left: 1px solid; padding-left: 20px; } ul, ol { list-style-type: disc; } h1, h2, h3, h4, h5, h6 { line-height: 1.2; margin: 15px 0 10px; } pre, p, blockquote, ul, ol { margin: 15px 0; } ul ul { list-style-type: circle; } code { margin: 10px 0; } li { margin: 15px 20px; } ul ul li, ol ol li { margin: 10px 0 10px 20px; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, pre:first-child, p:first-child, blockquote:first-child, ul:first-child, ol:first-child, code:first-child, li:first-child { margin-top: 0; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, pre:last-child, p:last-child, blockquote:last-child, ul:last-child, ol:last-child, code:last-child, li:last-child { margin-bottom: 0; } strong { font-weight: bold; font-weight: 500; } em { font-style: italic; } code { font-family: monospace; } i { display: inline-block; } .clear:before, .clear:after { content: ""; display: table; } .clear:after { clear: both; } .central_container { width: 100%; height: 100%; display: table; } .central_container .inner_container { display: table-cell; vertical-align: middle; } .menu { display: none; position: absolute; top: -5px; left: 100%; margin-left: 15px; background: #FFF; border: 1px solid #CCC; box-shadow: 0 1px 15px rgba(0,0,0,0.05); border-radius: 2px; color: #333; z-index: 1; } .menu.open { display: block; } .menu.left { left: initial; right: 100%; margin-left: 0; margin-right: 15px; } .menu.top { top: initial; bottom: -5px; } .menu.black { background: #000; color: #FFF; } .menu:before { width: 16px; height: 16px; position: absolute; top: 12px; left: -9px; content: ""; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #FFF; border: 1px solid #CCC; border-color: rgba(0,0,0,0.2); border-right-width: 0; border-top-width: 0; } .menu.left:before { left: initial; right: -9px; border-left-width: 0; border-bottom-width: 0; border-right-width: 1px; border-top-width: 1px; } .menu.top:before { top: initial; bottom: 12px; } .menu.black:before { background: #000; } .menu .menu { margin-left: -5px; } .menu .menu.right { margin-left: 0; margin-right: -5px; } .menu ul, .menu ul li { margin: 0; list-style: none; } .button { padding: 6px 20px 8px 20px; display: inline-block; cursor: pointer; background: #9DA6AD; border: 1px solid #9DA6AF; border-radius: 3px; color: #FFF; font: bold 14px/14px "Helvetica Neue", Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 500; text-align: center; text-decoration: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; user-select: none; } .button.blue { background: #529ecc; border-color: #529ECC; } .button.blue:active { background: #4E96C2; border-color: #4E96C2; color: #E3ECF3; color: rgba(255,255,255,0.80); } .button.green { background-color: #7CB15B; border-color: #7CB15B; color: #FFF; } .button.green:active { background-color: #679C48; border-color: #679C48; color: #E0EBDA; color: rgba(255,255,255,0.8); } /* 6. #GLOBAL_NAV */ #global_nav { position: fixed; top: 50px; left: 50px; z-index: 2147483647; } #global_menu_toggle { display: block; width: 24px; height: 24px; padding: 8px; border-radius: 1px; -moz-transition: ease background-color 100ms; -webkit-transition: ease background-color 100ms; transition: ease background-color 100ms; } #global_nav.include_background #global_menu_toggle { background-color: #CCC; background-color: rgba(0,0,0,0.2); } #global_nav.include_background #global_menu_toggle:hover { background-color: #BBB; background-color: rgba(0,0,0,0.25); } .post_box_open #global_nav.include_background #global_menu_toggle { background: none !important; } #global_menu_toggle svg { fill: #FFF; } .post_box_open #global_nav #global_menu_toggle svg, .post_box_open #global_nav.include_background #global_menu_toggle svg { fill: #CCC; } #global_menu { width: 180px; } #menu_details { padding: 20px; text-align: center; } #menu_details a { color: inherit; text-decoration: none; } #title_avatar { width: 64px; height: 64px; margin: auto; margin-bottom: 15px; background-size: cover; border-radius: 64px; } #menu_details h1 { font-size: 18px; font-weight: 400; margin: 0; margin-bottom: 10px; } #menu_details h1:last-child { margin-bottom: 0; } #menu_details p { margin: 0; } #menu_nav li { position: relative; display: block; white-space: nowrap; border-top: 1px solid #CCC; -moz-transition: ease background-color 100ms; -webkit-transition: ease background-color 100ms; transition: ease background-color 100ms; } #global_nav ul:first-child li:first-child { border-top-color: transparent; } /* #menu_nav li:nth-child(5) ~ li { display: none; } */ #menu_nav li:hover { background-color: #FCFCFC; } #menu_nav li:active, #menu_nav a.selected { background-color: #FCFCFC; -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,0.05); box-shadow: inset 0 1px 5px rgba(0,0,0,0.05); } #menu_nav a { padding: 12px 20px; display: block; white-space: nowrap; overflow: hidden; text-decoration: none; text-overflow: ellipsis; font-weight: bold; font-weight: 500; font-size: 14px; } #menu_nav .toggle { padding-right: 48px; } #menu_nav .toggle:after { width: 8px; height: 8px; position: absolute; right: 18px; top: 18px; content: ""; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border: 2px solid #CCC; border-left: 0; border-bottom: 0; } #menu_nav .toggle.selected:after { border: 0; } #ask_menu { width: 500px; height: 190px; border: 0; } #ask_menu:before { border-color: #E0E0E0; } #ask_menu iframe { background-color: transparent; } #social_links { padding: 10px; border-top: 1px solid #CCC; } #social_links:empty { display: none; } #social_links .social_link { width: 20px; height: 20px; padding: 10px; display: block; float: left; } #social_links .social_link:hover { background: #333; } #social_links .social_link i { width: 20px; height: 20px; display: block; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") -145px 0 no-repeat; } #social_links #social_500px i { background-position: -145px 0; } #social_links #social_behance i { background-position: -145px -25px; } #social_links #social_deviantart i { background-position: -145px -50px; } #social_links #social_dribbble i { background-position: -145px -75px; } #social_links #social_facebook i { background-position: -145px -100px; } #social_links #social_flickr i { background-position: -145px -125px; } #social_links #social_foursquare i { background-position: -145px -150px; } #social_links #social_googleplus i { background-position: -145px -175px; } #social_links #social_instagram i { background-position: -145px -200px; } #social_links #social_lastfm i { background-position: -145px -225px; } #social_links #social_linkedin i { background-position: -145px -250px; } #social_links #social_pinterest i { background-position: -145px -275px; } #social_links #social_rdio i { background-position: -145px -300px; } #social_links #social_soundcloud i { background-position: -145px -325px; } #social_links #social_spotify i { background-position: -145px -350px; } #social_links #social_twitter i { background-position: -145px -375px; } #social_links #social_vimeo i { background-position: -145px -400px; } #social_links #social_vine i { background-position: -145px -425px; } #social_links #social_youtube i { background-position: -145px -450px; } #social_links #social_rss i { background-position: -145px -475px; } #social_links #social_500px:hover i { background-position: -170px 0; } #social_links #social_behance:hover i { background-position: -170px -25px; } #social_links #social_deviantart:hover i { background-position: -170px -50px; } #social_links #social_dribbble:hover i { background-position: -170px -75px; } #social_links #social_facebook:hover i { background-position: -170px -100px; } #social_links #social_flickr:hover i { background-position: -170px -125px; } #social_links #social_foursquare:hover i { background-position: -170px -150px; } #social_links #social_googleplus:hover i { background-position: -170px -175px; } #social_links #social_instagram:hover i { background-position: -170px -200px; } #social_links #social_lastfm:hover i { background-position: -170px -225px; } #social_links #social_linkedin:hover i { background-position: -170px -250px; } #social_links #social_pinterest:hover i { background-position: -170px -275px; } #social_links #social_rdio:hover i { background-position: -170px -300px; } #social_links #social_soundcloud:hover i { background-position: -170px -325px; } #social_links #social_spotify:hover i { background-position: -170px -350px; } #social_links #social_twitter:hover i { background-position: -170px -375px; } #social_links #social_vimeo:hover i { background-position: -170px -400px; } #social_links #social_vine:hover i { background-position: -170px -425px; } #social_links #social_youtube:hover i { background-position: -170px -450px; } #social_links #social_rss:hover i { background-position: -170px -475px; } #menu_search { position: relative; border-top: 1px solid #CCC; } #search_form { white-space: nowrap; } #reset_button, #search_input, #search_button { float: left; } #reset_button, #search_button { width: 16px; height: 16px; margin: 15px 0; padding: 0; outline: none; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") -29px 0 no-repeat; border: 0; } #search_button { background-position: -29px 0; } #search_form.has_value #search_button { display: none; } #reset_button { margin-left: 20px; display: none; background-position: -29px -21px; } #search_form.has_value #reset_button { display: block; } #search_input { width: 125px; margin: 0; padding: 12px 0 12px 20px; border: 0; background: none; outline: none; font: inherit; font-size: 14px; } #search_form.has_value #search_input { padding-left: 15px; } #search_menu { width: 560px; } #search_menu.top:before { background-color: #FCFCFC; } #search_header { border-bottom: 1px solid #CCC; } #search_loading { width: 20px; padding: 10px; } #search_loading i { width: 20px; height: 20px; display: none; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") -120px 0 no-repeat; -moz-animation: spin linear 1s infinite; -webkit-animation: spin linear 1s infinite; animation: spin linear 1s infinite; } .loading_results #search_loading i { display: block; } #search_title { padding: 10px; font-size: 13px; font-weight: bold; font-weight: 500; text-align: center; } #search_title { cursor: default; } #search_controls { width: 50px; padding: 2px 10px; } #search_controls .search_control { display: inline-block; vertical-align: middle; } #search_layout { position: relative; width: 50px; overflow: hidden; background: #FAFAFA; border-radius: 5px; -moz-box-shadow: inset 0 0 0 1px #CCC, inset 0 0 10px rgba(0,0,0,0.05); -webkit-box-shadow: inset 0 0 0 1px #CCC, inset 0 0 10px rgba(0,0,0,0.05); box-shadow: inset 0 0 0 1px #CCC, inset 0 0 10px rgba(0,0,0,0.05); } #search_layout .selected_indicator { position: absolute; top: 0; width: 25px; height: 25px; background: #FFF; border: 1px solid #DDD; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,0.05); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.05); box-shadow: 0 0 10px rgba(0,0,0,0.05); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: left 250ms ease; -webkit-transition: left 250ms ease; transition: left 250ms ease; } #search_menu.list #search_layout .selected_indicator { left: 0; } #search_menu.grid #search_layout .selected_indicator { left: 25px; } #search_layout a { position: relative; width: 25px; height: 25px; display: block; float: left; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") -50px 0 no-repeat; } #search_layout #select_list_layout { background-position: -50px 0; } #search_layout #select_grid_layout { background-position: -50px -25px; } #search_results { height: 400px; overflow: hidden; overflow-y: scroll; background: #FCFCFC; } /* #search_results::-webkit-scrollbar { width: 17px; height: 17px; } #search_results::-webkit-scrollbar-thumb { background: #666; -webkit-background-clip: padding; border: 5px solid transparent; -webkit-border-radius: 17px; } */ #search_menu.grid #search_results_content { margin: 10px; } #search_results .results_col { width: 50%; float: left; } #search_menu.grid #search_results .results_col li { padding: 5px; } #search_menu.list #search_results li:hover { background: #EEE; } #search_menu #search_results a { text-decoration: none; } #search_menu.list #search_results .media { width: 50px; height: 50px; margin: 5px; display: inline-block; vertical-align: middle; background: center no-repeat; background-size: cover; } #search_menu.list #search_results .media img { display: none; } #search_menu.list #search_results .caption { width: 230px; padding: 15px; display: inline-block; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #search_menu.list #search_results .media + .caption { padding-left: 10px; width: 175px; } #search_menu.grid #search_results .media { width: 100%; } #search_menu.grid #search_results .media img { width: 100%; height: auto; display: block; } #search_menu.grid #search_results .caption { padding: 15px; background: #FFF; border: 1px solid #CCC; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; font-weight: 400; } #search_menu.grid #search_results .media + .caption { display: none; } #more_results { margin: 15px; padding: 15px; display: block; font-size: 14px; text-transform: capitalize; } /* 7. #SPLASH */ #splash { position: relative; width: 100%; height: 100%; overflow: hidden; } #splash_background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } #splash .central_container { position: relative; } #splash .inner_container { padding: 50px 146px; } #splash h1 { font-size: 40px; font-weight: bold; font-weight: 600; margin: 0; } #splash img { max-width: 100%; height: auto; } #splash .tagline { font-size: 18px; font-weight: 300; margin: 0; margin-top: 15px; } #splash .description { display: inline-block; max-width: 50%; font-size: 14px; margin-top: 15px; } #splash_arrow { width: 30px; height: 14px; position: absolute; bottom: 50px; left: 50%; margin-left: -15px; } #splash_arrow.bounce_animation { -moz-animation: bounce ease 1s infinite; -webkit-animation: bounce ease 1s infinite; animation: bounce ease 1s infinite; } #splash_arrow.pulse_animation { -moz-animation: pulse ease 3s infinite; -webkit-animation: pulse ease 3s infinite; animation: pulse ease 3s infinite; } #splash_arrow.slide_animation { -moz-animation: slide ease 4s infinite; -webkit-animation: slide ease 4s infinite; animation: slide ease 4s infinite; } #splash_arrow svg { fill: #FFF; } #splash.offscr_hide { visibility: hidden; background: none; } #splash.offscr_hide .central_container, #splash.offscr_hide #splash_arrow { display: none; } /* 8. #POSTS */ #posts { position: relative; margin: 0 auto; padding: 50px 0; } #posts.vertical { width: 500px; } #posts.vertical.large_posts { width: 800px; } #posts.permalink { width: 950px; padding: 100px 0; } .post { width: 250px; opacity: 0; } #posts.grid .post { margin: 30px; } #posts.vertical .post { position: relative; width: 500px; margin-bottom: 60px; } #posts.grid.large_posts .post { width: 400px; } #posts.vertical.large_posts .post { width: 800px; } .post_media { position: relative; width: 250px; } #posts.large_posts .post_media { width: 400px; } #posts.vertical .post:not(.has_caption) .post_media { width: 100%; } #posts.vertical .has_caption .post_media, #posts.vertical .post_media + .post_summary { float: left; } .post_media img, .post_media iframe { width: 100%; display: block; } #posts.vertical .post_media img { height: auto; } .video_preview { width: 100%; height: 150px; position: relative; background: url('http://static.tumblr.com/m9ln1jy/7H2n1ap0c/video_static_animated_no_preview.gif') #222 center repeat; } #posts.large_posts .video_preview, #posts.vertical .post:not(.has_caption) .video_preview { height: 250px; } #posts.large_posts .post:not(.has_caption) .video_preview { height: 500px; } .video_preview .retro_fuzz { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('http://static.tumblr.com/m9ln1jy/wAgn1a6mi/video_static_animated.gif') repeat; opacity: 0.04; } .post_media .play_button { width: 35px; height: 40px; position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -20px; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") -80px 0 no-repeat; } .post_summary { position: relative; } .post_summary code { white-space: normal; } #posts.grid .post_media + .post_summary { margin-top: 15px; } #posts.vertical .post_media + .post_summary { margin-left: 30px; width: 220px; } #posts.vertical.large_posts .post_media + .post_summary { width: 370px; } .post.photo:not(.has_caption) .post_summary, .post.video:not(.has_caption) .post_summary, .post.audio:not(.has_caption) .post_summary, .post.photoset:not(.has_caption) .post_summary { display: none; } .post_summary p:first-of-type strong:only-child, .post_summary p:first-of-type b:only-child { font-size: 14px; font-weight: 400; } .post_summary p:first-child strong:only-child a, .post_summary p:first-child b:only-child a { color: inherit; text-decoration: none; } .post_link { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #posts.vertical .post.has_caption .post_link { right: 50%; } #posts.vertical .post.text .post_link, #posts.vertical .post.link .post_link, #posts.vertical .post.quote .post_link, #posts.vertical .post.chat .post_link, #posts.vertical .post.answer .post_link { display: none; } .post_link .central_container { background: #FCFCFC; background: rgba(252,252,252,0.95); -moz-transition: ease visibility 100ms, ease opacity 100ms; -webkit-transition: ease visibility 100ms, ease opacity 100ms; transition: ease visibility 100ms, ease opacity 100ms; opacity: 0; visibility: hidden; } .photo:not(.has_caption) .post_link .central_container { background: #222; background: rgba(34,34,34,0.64); } .post:hover .post_link .central_container { visibility: visible; opacity: 1; } .post_link .inner_container { text-align: center; } .post_link .button_wrap { width: 24px; margin: auto; overflow: hidden; } .post_link .post_box_button, .post_link .float_player_button, .post_link .like_button, .post_link .reblog_button { height: 24px; float: left; } .post_link .button_break { width: 24px; height: 1px; float: left; margin: 15px 0; background: #CCC; } .post_link .post_box_button, .post_link .float_player_button { width: 24px; display: block; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") 0 0 no-repeat; } .post_link .post_box_button { background-position: 0 0; } .post_link .float_player_button { background-position: 0 -29px; } .post.offscr_hide .post_media, .post.offscr_hide .post_summary, .post.offscr_hide .post_link { display: none; } #post { width: 950px; } #post_media { position: relative; width: 500px; float: left; margin-right: 50px; } #post_media.big_layout { width: 100%; float: none; } #post_media img { width: 100%; height: auto; display: block; } #post_media.big_layout_available img { cursor: -moz-zoom-in; cursor: -webkit-zoom-in; } .photo #post_media.big_layout img { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; } .photoset #post_media iframe, .video #post_media iframe { width: 100%; } #exif_options { position: absolute; top: 30px; right: 30px; -moz-transition: ease opacity 100ms; -webkit-transition: ease opacity 100ms; transition: ease opacity 100ms; opacity: 0; } #post_media:hover #exif_options { opacity: 1; } #exif_menu_toggle { width: 24px; height: 24px; padding: 5px; display: block; background: #FFF; border-radius: 3px; } #exif_menu_toggle i { width: 24px; height: 24px; display: block; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") 0 -116px no-repeat; } #exif_menu { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; user-select: none; } .exif_sec { border-top: 1px solid #666; cursor: default; } .exif_sec:first-child { border-top: 0; } .exif_sec:empty { display: none; } #exif_camera { padding: 10px; } #exif_data { width: 225px; } #exif_data .exif_data { width: 75px; padding: 10px; float: left; box-sizing: border-box; border-right: 1px solid #666; font-weight: bold; font-weight: 500; text-align: center; } #exif_data .exif_data:last-child { border-right-color: transparent; } #invert_option { padding: 10px; display: none; } #post_box #invert_option { display: block; } #invert_option .button { display: block; text-align: center; } #post_content { font-size: 14px; } #post_media + #post_content { width: 400px; float: left; } #post_media.big_layout + #post_content { width: 750px; float: none; margin: auto; margin-top: 25px; } #post_content p:first-of-type > strong:only-child, #post_content p:first-of-type > b:only-child { font-size: 22px; font-weight: 400; } #post_content #audio_player { margin-bottom: 30px; padding: 10px; background: #000; } #post_content #audio_player .audio_player { height: 51px; } #post_content #audio_player iframe { width: 380px; height: 51px; } #post_author { margin-top: 30px; } #post_author:first-child { margin-top: 0; } #author_avatar { width: 45px; height: 45px; float: left; margin-right: 15px; } #author_avatar img { border-radius: 45px; } #author_information { float: left; color: #AAA; font-size: 12px; } #author_information h1 { color: #000; font-size: 14px; font-weight: 400; } #post_ad_unit { margin-top: 30px; } #disqus_thread { margin-top: 30px; } .post_tags { position: relative; overflow: hidden; color: #AAA; font-size: 12px; margin-top: 30px; } .post_tags:first-child { margin-top: 0; } .post_tags:after { width: 10px; content: ""; position: absolute; top: 0; right: 0; bottom: 0; background-image: -moz-linear-gradient(right, #FCFCFC 0%, rgba(252,252,252,0) 100%); background-image: -webkit-linear-gradient(right, #FCFCFC 0%, rgba(252,252,252,0) 100%); background-image: linear-gradient(right, #FCFCFC 0%, rgba(252,252,252,0) 100%); z-index: 1; } .post_tags_container { float: left; white-space: nowrap; } .post_tags_container.draggable { cursor: col-resize; cursor: -moz-grab; cursor: -webkit-grab; } .post_tags_container.draggable:active, #post_tags_container.draggable:active .tag { cursor: -moz-grabbing; cursor: -webkit-grabbing; } .post_tags .tag { display: inline-block; font-weight: bold; font-weight: 500; text-decoration: none; margin-right: 10px; } .post_tags .tag:last-child { margin-right: 0; } .post_tags .tag:before { content: "#"; } .post_footer { white-space: nowrap; margin-top: 30px; } .post_footer:first-child { margin-top: 0; } .footer_set { float: left; margin-right: 15px; padding-left: 15px; border-left: 1px solid #CCC; } .footer_set:empty { display: none; } .footer_set:first-child { padding-left: 0; border-left-color: transparent; } .footer_set:last-child { margin-right: 0; } .formatted_post_date { vertical-align: -2px; color: #AAA; font-size: 12px; font-weight: bold; font-weight: 500; line-height: 1; text-decoration: none; text-transform: capitalize; } .tumblr_buttons .like_button, .tumblr_buttons .reblog_button { float: left; height: 24px; margin-right: 10px; } .tumblr_buttons .reblog_button:last-child { margin-right: 0; } .note_count { position: relative; float: left; margin-left: 5px; background: #FFF; border: 1px solid #CCC; border-radius: 3px; } .note_count:before { content: ""; width: 8px; height: 8px; position: absolute; top: 50%; left: -5px; margin-top: -5px; background: #FFF; border: 1px solid #CCC; border-right-width: 0; border-top-width: 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .note_count .note_count_number { display: block; padding: 4px 8px; color: #AAA; font-weight: bold; font-weight: 500; line-height: 1; text-decoration: none; } .post_notes { width: 300px; z-index: 2; } .post_notes .notes { list-style: none; font-size: 12px; margin: 0; padding: 0; overflow: scroll; max-height: 367px; } .post_notes .notes li { margin: 0; padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #CCC; } .post_notes .notes li:last-child { border-bottom-color: transparent; } .post_notes .notes img { width: 25px; height: 25px; vertical-align: middle; margin-right: 5px; } .post_notes .notes a { text-decoration: none; font-weight: 500; } .post_notes .notes blockquote { margin-left: 30px; padding-left: 15px; white-space: normal; } .post_notes .notes blockquote a { font-style: italic; font-weight: normal; } .comment_button, .share_menu_toggle { width: 24px; height: 24px; display: block; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") 0 0 no-repeat; } .comment_button { float: left; margin-right: 15px; background-position: 0 -58px; } .permalink .comment_button { display: none; } .share_post { position: relative; float: left; } .share_menu_toggle { background-position: 0 -87px; } .share_menu { z-index: 1; } .share_options { width: 273px; } .share_options .share_option { width: 90px; height: 90px; display: block; float: left; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; border-color: rgba(0,0,0,0.2); } .share_options .share_option:active { background-color: #FCFCFC; box-shadow: inset 0 1px 5px rgba(0,0,0,0.05); } .share_options .pinterest_option, .share_options .instapaper_option, .share_options .email_option { border-right-color: transparent; } .share_options .share_option.disabled { cursor: default; background: none; box-shadow: none; } .share_options .share_option:after { content: ""; width: 90px; height: 90px; display: block; background-image: url('http://static.tumblr.com/m9ln1jy/Lpxn23wcy/social_options.png'); opacity: 0.4; -moz-transition: ease opacity 100ms; -webkit-transition: ease opacity 100ms; transition: ease opacity 100ms; } .share_options .share_option:hover:after { opacity: 0.6; } .share_options .share_option.disabled:after { opacity: 0.2; } .facebook_option:after { background-position: 0 0; } .twitter_option:after { background-position: -90px 0; } .pinterest_option:after { background-position: -180px 0; } .instapaper_option:after { background-position: -270px 0; } .google_option:after { background-position: -360px 0; } .linkedin_option:after { background-position: -450px 0; } .email_option:after { background-position: -540px 0; } #photo_selector { width: 100%; height: 130px; padding-top: 15px; white-space: nowrap; overflow-x: scroll; display: none; background: #EEE; border-bottom: 1px solid #CCC; } #photo_selector::-webkit-scrollbar { width: 15px; height: 15px; } #photo_selector::-webkit-scrollbar-thumb { background: #666; -webkit-background-clip: padding; border: 5px solid transparent; -webkit-border-radius: 17px; } #photo_selector.open { display: block; } #photo_selector a { height: 100px; margin-left: 15px; display: inline-block; vertical-align: middle; } #photo_selector a:last-child { margin-right: 15px; } #photo_selector img { display: block; } .short_url { width: 100%; } .short_url input { width: 100%; margin: 0; padding: 15px 0; background: none; border: 0; color: #999; font: inherit; font-size: 14px; text-align: center; } .tumblr_blog { font-weight: bold; font-weight: 500; text-decoration: none; } .chat_label { font-weight: bold; font-weight: 500; } /* 9. #FOOTER */ #footer { margin: 50px 0; } #infscr_loading { width: 50px; height: 50px; margin: auto; margin-bottom: 25px; visibility: hidden; } #infscr_loading svg { fill: #000; -moz-animation: spin linear 1s infinite; -webkit-animation: spin linear 1s infinite; animation: spin linear 1s infinite; } #footnote { color: #AAA; font-size: 12px; text-align: center; } /* 10. .PAGINATION */ .pagination { position: fixed; top: 0; bottom: 0; height: 100%; z-index: 2147483644; } #previous_page { left: -84px; -moz-transition: ease left 250ms; -webkit-transition: ease left 250ms; transition: ease left 250ms; } #next_page { right: -84px; -moz-transition: ease right 250ms; -webkit-transition: ease right 250ms; transition: ease right 250ms; } #splash.offscr_hide ~ #previous_page { left: 0; } #splash.offscr_hide ~ #next_page { right: 0; } .pagination a { display: block; padding: 30px; background: #FCFCFC; background: rgba(252,252,252,0.98); } .pagination i { width: 24px; height: 24px; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") 0 -145px no-repeat; } #previous_page i { background-position: 0 -145px; } #next_page i { background-position: 0 -174px; } /* 11. #POST_BOX */ #post_box { position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 0 124px; overflow: scroll; overflow-x: hidden; background: #FCFCFC; background: rgba(252,252,252,0.98); z-index: 2147483645; } #post_box.dark_room { background: #222; background: rgba(34,34,34,0.98); color: #FCFCFC; } #post_box #post { margin: 50px auto; } #close_post_box { position: fixed; top: 58px; right: 58px; width: 24px; height: 24px; display: block; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") 0 -203px no-repeat; opacity: 0; -moz-transition: ease opacity 500ms; -webkit-transition: ease opacity 500ms; transition: ease opacity 500ms; } #post_box:hover #close_post_box { opacity: 1; } #post_box_footer { position: fixed; left: 0; right: 0; bottom: -54px; height: 24px; padding: 15px; background: #FCFCFC; background: rgba(252,252,252,0.98); -moz-transition: ease bottom 500ms; -webkit-transition: ease bottom 500ms; transition: ease bottom 500ms; z-index: 2147483645; } body:not(.loading_something) #post_box:hover #post_box_footer { bottom: 0; } #post_box.dark_room #post_box_footer { background: #222; background: rgba(34,34,34,0.98); } #next_post_box { width: 24px; height: 24px; margin: auto; display: block; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") 0 -232px no-repeat; } #post_box.dark_room .post_tags:after { background-image: -moz-linear-gradient(right, #222 0%, rgba(34,34,34,0) 100%); background-image: -webkit-linear-gradient(right, #222 0%, rgba(34,34,34,0) 100%); background-image: linear-gradient(right, #222 0%, rgba(34,34,34,0) 100%); } #post_box.dark_room .note_count, #post_box.dark_room .note_count:before { background: #222; } /* 12. #FLOAT_PLAYER */ #float_player { position: fixed; bottom: -85px; height: 170px; right: 15px; width: 500px; z-index: 2147483645; -moz-transition: ease bottom 250ms; -webkit-transition: ease bottom 250ms; transition: ease bottom 250ms; } #float_player:hover { bottom: 15px !important; } /* 13. #BODY_LOCK */ #body_lock { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; display: none; z-index: 2147483646; } .body_lock_open #body_lock { display: block; } /* 14. #OMNI_LOADING */ #omni_loading { position: fixed; bottom: 30px; right: 30px; padding: 5px; display: none; background: #FCFCFC; border-radius: 3px; z-index: 2147483647; } body.loading_something #omni_loading { display: block; } #omni_loading_icon { width: 20px; height: 20px; background: url("http://static.tumblr.com/m9ln1jy/gBFn4hhlo/splash_sprite.png") -120px 0 no-repeat; -moz-animation: spin linear 1s infinite; -webkit-animation: spin linear 1s infinite; animation: spin linear 1s infinite; } /* 15.A. MEDIA QUERIES - SCREEN SIZES */ @media screen and (max-width: 1200px) { #splash .description { max-width: 75%; } #posts, #posts.permalink, #post { width: 500px; } #post_media { float: none; margin-right: 0; } #post_media.big_layout_available, .photo #post_media.big_layout { cursor: default; } #post_media + #post_content, #post_media.big_layout + #post_content { width: 500px; float: none; margin-top: 25px; } } @media screen and (max-width: 850px) { #menu_search.advanced_search { display: none; } } @media screen and (max-width: 790px) { #global_nav { top: 20px; left: 20px; } #splash .inner_container { padding: 50px; } #splash .description { max-width: 100%; } #post_box { padding: 0 84px; } #posts.permalink { width: auto; padding: 85px; } #post_box #post { margin: 85px 0; } #post, #post_media, #post_content { width: 100% !important; } .note_count { display: none; } .tumblr_buttons .reblog_button { margin-right: 0; } #close_post_box { top: 28px; right: 28px; } } @media screen and (max-width: 530px) { #float_player { left: 0; right: 0; width: 100%; } #float_player:hover { bottom: -85px !important; } } @media screen and (max-width: 450px) { #post_box { padding: 0 25px; } #posts.permalink { padding: 85px 25px; } .general_buttons { display: none; } } @media screen and (max-width: 351px) { #post_box { padding: 0 10px; } #posts.permalink { padding: 50px 10px; } } /* 15.B. MEDIA QUERIES - DOUBLE PIXEL SCREENS */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .share_options .share_option:after { background-image: url('http://static.tumblr.com/m9ln1jy/Iejn23wd8/social_options_2x.png'); background-size: 630px 90px; } #social_links .social_link i, #search_button, #reset_button, #search_layout a, .post_media .play_button, .post_link .post_box_button, .post_link .float_player_button, .comment_button, .share_menu_toggle, #omni_loading_icon, #search_loading i, #exif_menu_toggle i, #close_post_box, #next_post_box { background-image: url("http://static.tumblr.com/m9ln1jy/djun4hhly/splash_sprite_2x.png"); background-size: 500px 500px; } }