/* Theme Name: Day One Theme URI: http://dayoneapp.com/blog Author: Paul Mayne Author URI: http://paulmayne.org/ Description: Day One App Blog Version: 1.0 */ /* =Reset (Normalizer) -------------------------------------------------------------- */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;} html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #EA4C89; color: #fff; text-shadow: none; } ::selection { background: #EA4C89; color: #fff; text-shadow: none; } a { color: #44C0FF; } a:visited { color: #44C0FF; } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 0; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #EEE; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; margin: 0;} svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } .info-message,.hilite{ display:block; clear:both; padding:11px; border:1px solid #d8d566; background: #fef8c4; -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; border-radius:3px;} /* =Day One App -------------------------------------------------------------- */ html { height: 100%; } body { height: 100%; min-width: 1000px; font-family: Lato, 'proxima-nova', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;} #m_tagline div { font-family: 'PT Serif', serif; } .content { width: 1000px; margin: 0 auto; } #preload { display: none; } /* =Nav -------------------------------------------------------------- */ #nav a#home-btn {text-indent: -9000px; background: url(/images/2/dayone-logo.png) center center no-repeat; background-size: 239px 22.3px; width: 239px; height: 69px; position: absolute; left: 0; display: block;} body.home #nav { background-color: transparent; position: absolute; right:0; padding-right: 50px;} #nav { height: 69px; background-color: #44c0ff; } #nav .content { position: relative; width: 952px; } .home #nav .content { width: 1027px; background: url(/images/2/dayone-home-ribbon.png) top center no-repeat; background-size: 295px 307px;} #main_nav { padding: 22px 0 0 0; margin: 0; list-style-type: none; text-align: right; } #main_nav li { display: inline; color: #fff; font-size: 12px; text-transform: uppercase; padding: 8px 13px;} #main_nav li:hover {background: #44ADE2; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; border-radius:4px;} #main_nav li a { color: #fff; text-decoration: none; font-weight: 700; } #main_nav li a:hover { color: #FFF; text-decoration: none;} /* =Main -------------------------------------------------------------- */ #main { padding: 25px 0 60px; } #main .content { position: relative; width: 950px; color: #3a3a3a; } #main .content h1 { border-top: 1px solid #eee; padding-right: 150px; color: #333; font-size: 34px; font-weight: 300; margin: 36px 0 5px 0; padding: 0; } #main .content h1.page_title { font-size: 58px; color: #D1D1D1; width: 100%; margin: 0 0 30px -4px; border-top: none; padding-right: 0; } #main .content h1 a { color: #44C0FF; text-decoration: none; } #main .content h1 a:hover { color: #44C0FF; text-decoration: none; } #main .content h1 .current, #main .content h1 .current a { color: #666; text-decoration: none; } #main .content h1 a.current:hover { color: #333; text-decoration: none; } #main .content h2 { font-size: 21px; color: #333; margin: 28px 0 10px; padding-right: 15px;} #main .content h2 a { color: #44C0FF; } #main .content h2 a:hover { color: #44C0FF; text-decoration: none; } #main .content h3 { font-size: 21px; color:#444; margin: 10px 0; padding-right: 150px; padding-top: 15px; border-top: 1px solid #eee;} #main .content h4 { font-size: 14px; color: #444; margin: 0 ; padding-right: 20px;} #main .content p, #main .content #page ul { padding-right: 150px; font-size: 16px; line-height: 26px; margin: 3px 0 10px;} #main .content #page ul li {padding-bottom:2px;} #main .content a { text-decoration: underline; color: #44C0FF; } #main .content a:hover { text-decoration: underline; color: #f15a71; } #main .content > ol, #main .content > ul { padding-right: 150px; } #main .content img {margin: 15px 0; max-width: 800px} /* =Page Nav -------------------------------------------------------------- */ #main .content .page_nav { padding: 12px 0; margin: 10px 0 18px; list-style-type: none; text-align: left; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;} #main .content .page_nav li { display: inline; font-size: 21px; } #main .content .page_nav li a { color: #f15a71; text-decoration: none; font-weight: 700; } #main .content .page_nav li a:hover { color: #44C0FF; text-decoration: none; } #main .content .page_nav li:before { padding: 0 15px 0 15px; content: "・"; color: #444; } #main .content .page_nav li:first-child:before { content: ""; padding: 0; } /* =Blog/Page -------------------------------------------------------------- */ #main .content .catmenu-container {float: right; width: 200px; padding: 3px; background: #efefef; border-radius: 2px; margin: -88px -50px 0 0;} #main .content .catmenu {margin:0; padding: 0; background: #fafafb; border-radius: 2px; border: 1px solid #d8d8d8; list-style: none;} #main .content .catmenu li:first-child {border-top:none} #main .content .catmenu li {border-bottom: 1px solid #eee; border-top: 1px solid #fff;} #main .content .catmenu a {display: block; padding: 8px 10px 8px 8px; text-shadow: 0 1px 0 #fff; border-left: 2px solid #fafafb; text-decoration: none; color: #44C0FF;} #main .content .catmenu a:hover {background:#fdfdfe; text-decoration:none !important;} #main .content .catmenu .current-cat a {background: #fff; border-left: 2px solid #d26911; font-weight: bold; color: #f15a71 !important; cursor: default; box-shadow: inset 0 0px 1px rgba(0,0,0,0.1);} #main .content .blog_cat {font-size: 30px !important; color:#333 !important;} #blog .post, #page, .post-excerpt { padding-bottom: 40px; width:700px} .post-excerpt {padding-bottom: 70px; margin-bottom:30px; border-bottom:1px solid #efefef;} .post-excerpt .pgee-read-more { display:block; float:right; padding:20px 10px 0 0; padding: 20px 10px 0 0; width:100%; text-align:right;} .post-excerpt a:hover {text-decoration:none !important;} .post-excerpt .pgee-read-more em {color:#bbbbbb;} .post-excerpt .pgee-read-more em:hover {color:#000000;} #blog .post .entry-meta, .post-excerpt .entry-meta { display: block; font-size: 12px; color: #aaa; font-weight: 500; margin-bottom:20px; font-style:italic;} #main .post-excerpt h2 {margin:0;} #main .content #blog p { padding-right: 0;} #main .content #blog img, #main .content #blog .video {max-width:700px;} #social_btns { height: 50px; padding-bottom: 30px; } .fb-like, .tw-like { float: left; } .nav-previous { float: left;} .nav-next { float: right;} .author_blurb img {float: left; margin: 5px 10px 10px 0 !important; width:90px; height:90px; border: 1px solid #0d0d0d;} .author_blurb p {font-style:italic;} .author_blurb .clear {display: block; clear:both;} .temp-img {float:right; width:200px;} /* =Uses Pages -------------------------------------------------------------- */ #main .content .post-uses h2.entry-title { margin-bottom: 30px; } h3.cat-title { border-width: 0 !important; padding-top:0 !important; margin-top: 0 !important; } .post-uses .post { /* border-top: 1px solid #E1E8ED; */ margin-bottom:5px; padding-bottom: 30px !important; } .post-uses .post blockquote { margin-bottom: 5px; } #blog.post-uses { min-height: 700px; } #blog.post-uses h2 { font-size: 41px; font-weight: lighter; margin: 28px 0 30px; } .entry-title, a.cat-17, a.cat-11 { display: none !important; } #main .content .uses-index .catmenu-container { margin: -120px 0 0 0; } .uses-subscat { margin: -130px 0 0 0 !important; } .uses-index p.description { max-width:600px; margin:50px 0 !important; } .cat-footer { border: 1px solid #E1E8ED; padding:20px; border-radius: 3px; width: 250px; } .cat-footer ul { margin:12px 0 0 0; } /* =About Page -------------------------------------------------------------- */ #products {margin-top: 15px;} .product {float: left; padding: 0 10px; width: 330px; min-height: 210px;} #products .product h4 {font-weight: bold; font-size: 21px !important;} #products .product p {padding-right:0;} #products .product p a {display:block;} .sync-product img {padding-top: 0;} /* =Contact Form -------------------------------------------------------------- */ form .field { position:relative; padding: 9px 0;} div.wpcf7 form.wpcf7-form .field p {color: #999; font-size: 13px !important;} form .field br { display: none; } form .field span.wpcf7-form-control-wrap { z-index: 1; } form .field label.place_label { position:absolute; top:20px; left:9px; font-size: 13px; color: #999; z-index: 2; } .form_explain {color: #999; font-size: 13px !important; font-style: italic; line-height: 20px !important;} form .field label.error { color: #67C5DF; font-size: 15px; left: 285px; } form .field span.wpcf7-not-valid-tip { border: none; left: 105%; top: 0; color: #67C5DF; font-size: 15px; } form input, form textarea, form select { font-size: 13px; color: #3a3a3a; -webkit-border-radius: 1px; border-radius: 1px; border: 1px solid #C2C7CA; } form input { width: 259px; height: 27px; padding: 5px 7px; } form select { width: 275px; height: 37px; padding: 10px 7px; background: #fff url(/images/webkit-dropdown.png) 251px center no-repeat; -webkit-appearance: none; -webkit-border-radius: 1px; font-size: 13px; color: #999; } form select.value { color: #3a3a3a; } form textarea { width: 400px; height: 147px; padding: 10px 7px; } #form_submit { margin-top: 10px; text-align: center; font-size: 16px; color: #fff; background-color: #00ABD7; border: 1px solid #009AC4; height: 37px; line-height: 37px; width: 123px; padding: 0; -webkit-border-radius: 2px; border-radius: 2px; } form div.wpcf7-response-output { padding: 10px 0; } form div.wpcf7-validation-errors { border: none; color: #67C5DF; } form div.wpcf7-mail-sent-ok { border: none; color: #67C5DF; } form div.wpcf7-mail-sent-ng { border: none; color: #f15a71; } form div.wpcf7-spam-blocked { border: none; color: #f15a71; } form span.wpcf7-list-item input { height: 13px; width: 23px;} form span.wpcf7-list-item {display: block;} div.wpcf7-response-output.wpcf7-display-none {display: block; float: left; margin-top: -55px; margin-left: 140px;} .wpcf7-validation-errors, span.wpcf7-not-valid-tip {color: #D34F2B !important;} /* =Header (Home) -------------------------------------------------------------- */ #header { position: relative; padding-bottom: 35px; background: url(/images/2/background-blur.jpg) center center no-repeat; background-size: 100% 100%;} #header .content { width: 1127px; height: 1103px; position: relative;} #header_buttons { width: 514px; height: 50px; padding:29px 0 29px 50px; position: relative; z-index: 2;} a.header_button { display:inline-block; overflow:hidden; text-indent: 100%; white-space: nowrap;} a#mac_store_link { background:url(/images/badge_macappstore-lrg.svg) no-repeat; background-size: 207px 50px; width:207px; height:50px;} a#ios_store_link {background:url(/images/badge_appstore-lrg.svg) no-repeat; background-size: 169px 50px; width:169px; height:50px; margin-left: 13px} a#android_store_link {background:url(/images/badge-google-play.svg) no-repeat; background-size: 169px 50px; width:169px; height:50px; margin-top: 13px} #feature_video { position: absolute; top: 96px; left: 50%; margin-left: -500px; width: 1000px; height: 562px; } #feature_slideshow { position: absolute; top: 160px; left: 50%; margin-left: -800px; width: 1600px; height: 660px; cursor: pointer; } /* 160px from the top of the doc */ #feature_slideshow .slide { position: relative; width: 1600px; height: 660px; line-height: 660px; text-align: center; background-color: transparent; } .slide img { position: relative; display: inline-block; vertical-align: middle; } .slide .quote { position: absolute; top: 0; width: 277px; font-size: 30px; color: #B7B7B7; height: 660px; line-height: 40px; display: table; opacity: 0; -webkit-transition: opacity 0.2s linear; text-shadow: 0px 1px 0px #fff; text-decoration: none;} .slide .quote a{ text-decoration: none;} .slide .quote.visible { opacity: 1; } .slide .quote span { display: table-cell; vertical-align: middle; } .slide .left_quote { padding-right: 67px; text-align: right; } .slide .right_quote { padding-left: 67px; text-align: left; } #masthead {display: block; vertical-align:middle; width: 1027px; height: 522px; background: url(/images/2/dayone-hero.png) center center no-repeat; background-size: 996px 483px; margin: 230px auto 0 auto;} #m_tagline {text-align: center; color: #fff;} #m_tagline h2 {font-size: 52px; margin: 38px 0 24px 0;} #m_tagline div {font-size: 20px; width: 442px; margin: 0 auto;} #awards {width: 240px; margin:30px auto 0 auto;} #ada-award img {margin-bottom: 10px; width:240px; height: 47px;} #aoy-award img {width:197px; height: 46px;} /* =Screens -------------------------------------------------------------- */ #screens { height: 182px; background-color: #3E3E3E; padding-top:22px;} #screens .content { text-align: center; } #screens .cols { display: inline-block; } #screens .col { display: inline-block; width: 124px; margin: 0 5px; } #screens .col.large { width: 264px; } #screens .col .thumb { position: relative; z-index: 2; cursor: pointer; float: left; width: 112px; height: 70px; border: 4px solid #222; margin-bottom: 5px; margin-bottom: 5px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;} #screens .col .thumb img { width: 100%; height: 100%; } #screens .col.large .thumb { width: 251px; height: 157px; } #screens .col.large .thumb.video:before { position: absolute; top: 34px; left: 79px; z-index: 3; content:url(/images/thumb-video-overlay.png); opacity: 0.75; } #screens .col.large .thumb:hover:before { opacity: 1; } #screens .col .thumb:hover {border-color: #E8E8E8;} /* =Features ---------------------------background-color: #49AAEE;----------------------------------- */ #features { height: 560px; background-color: #FFF; color: #3E3E3E; margin: 10px auto; text-align: center;} #features .content { position: relative; width:950px;} #features .feature { margin: 25px 15px 0 15px; height:180px; width:160px; float:left;} .feature .pic { display: inline-block; margin-bottom: 4px; } .feature .pic img { vertical-align: bottom; } .feature .title { font-size: 20px; line-height: 22px; margin: 7px 0 1px; } .feature .desc { font-size: 14px; line-height: 18px; margin: 1px 0; } /* =Video -------------------------------------------------------------- */ #video { height: 520px; background-color: #323232; color: #2784B0; text-align: center; margin-top:50px; padding-top:60px;} #video.page { background-color: #FFFFFF; text-align: left; margin-top:0; padding-top:0;} #video .content { position: relative; } #video iframe {width: 800px; height: 450px; border: 4px solid black; -webkit-border-radius: 4px; border-radius: 4px;} .inline-video {height: 520px; text-align: center; padding-top:30px;} .inline-video iframe {width: 800px; height: 450px;} /* =Blurbs -------------------------------------------------------------- */ #blurbs { height: 290px; background-color: #E8E8E8; } #blurbs .content { position: relative; padding-top: 36px; } #blurbs_slideshow { height: 254px; width: 100%; overflow: hidden;} .blurbs_panel { height: 254px; width: 100%; } a.blurb { display: block; position: relative; float: left; cursor: pointer; width: 316px; height: 203px; margin-left: 25px; background: transparent url(/images/blurb/left-quote.png) 27px 29px no-repeat; text-decoration: none;} a.blurb:hover, a.blurb.active { background-color: #fff; -webkit-border-radius: 10px; border-radius: 10px; } .blurbs_panel a.blurb:first-child { margin-left: 0; } a.blurb .quote { display: block; font-style: italic; width: 231px; text-align: left; color: #666; font-size: 18px; line-height: 25px; margin: 24px 0 0 52px; text-shadow: 0px 1px 0px #fff; text-decoration: none;} a.blurb .quote:after { position: relative; left: 10px; top: -1px; content: url(/images/blurb/right-quote.png); } a.blurb:hover .quote, a.blurb.active .quote { color: #505050; } a.blurb .src { position: absolute; height: 70px; line-height: 70px; width: 316px; bottom: 0; left: 0; text-align: center; color:#999999} a.blurb .src img { vertical-align: middle; } #blurbs_slideshow_pagers { display: block; position: absolute; top: 252px; left: 0; z-index: 20; text-align: center; width: 100%; } #blurbs_slideshow_pagers a { display: inline-block; height: 10px; width: 10px; background: transparent url(/images/blurb/pager_off.png) center center no-repeat; padding: 8px; } #blurbs_slideshow_pagers a.activeSlide, #blurbs_slideshow_pagers a:hover { background-image: url(/images/blurb/pager_on.png); } /* =Social -------------------------------------------------------------- */ #social { height: 353px; background-color: #fff; } #social .content { } #app_description { float: left; width: 444px; padding: 60px 39px 0 17px; font-size: 17px; color: #414141; line-height: 21px; } #app_description p { margin: 0 0 20px 0; } #app_socials { float: left; width: 390px; padding-top: 39px; } #app_socials a { cursor: pointer; display: block; height: 70px; line-height: 70px; font-size: 41px; color: #404040; text-decoration: none; padding-left: 114px; background-color: transparent; background-position: 36px center; background-repeat: no-repeat; } #app_socials a:hover { color: #43A9F1; text-decoration: none; } a#tw_social { background-image: url(/images/social/social-twitter.png); } a#fb_social { background-image: url(/images/social/social-facebook.png); } a#nl_social { background-image: url(/images/social/social-newsletter.png); } a#google_social { background-image: url(/images/social/social-google.png); } a#tw_social:hover { background-image: url(/images/social/social-twitter-hover.png); } a#fb_social:hover { background-image: url(/images/social/social-facebook-hover.png); } a#nl_social:hover { background-image: url(/images/social/social-newsletter-hover.png); } a#google_social:hover { background-image: url(/images/social/social-google-hover.png); } #like_counts { padding-top: 52px; } #like_counts .count { margin-bottom: 10px; } #like_counts .plusone { margin-top: 15px; } /* =Footer -------------------------------------------------------------- */ #wrapper { min-height: 100%; margin: 0 auto -454px; } #wrapper .push, #footer { height: 454px; } #footer { background-color: #3E3E3E; } #footer .content { text-align: center; } #footernav { padding: 50px 0 0 0; margin: 0; list-style-type: none; height: 22px; width: 100%;} #footernav li { display: inline-block; color: #fff; font-size: 15px; } #footernav li a { color: #fff; text-decoration: none; } #footernav li a:hover { color: #2D85AE; text-decoration: none; } #footernav li:before { padding: 0 10px 0 10px; content: "/"; color: #545454; } #footernav li:first-child:before { content: ""; padding: 0; } #do_logo { display: block; width: 170px; height: 121px; margin: 55px auto 0; background: transparent url(https://s3.amazonaws.com/dayoneappcom/images/dayone-folder.png) 0 0 no-repeat; } #bb_logo { display: block; width: 128px; height: 52px; margin: 55px auto 0; } div#privtos {color: #222; padding: 15px 0 0 0; margin: 0 0 -15px 0; font-style: italic; font-size: 13px;} #privtos a {color: #222; text-decoration: none;} #privtos a:hover {color: #2D85AE;} #copyright { font-size: 16px; color: #222; padding-top: 20px; } /* =Markdown styles -------------------------------------------------------------- */ /* code */ blockquote { border-left: solid .4em #ddd; padding-left: 1.2em; quotes: none; margin-bottom:25px;} pre, code { font: 1em 'Bitstream Vera Sans Mono', Courier New, monospace; } pre { background-color: #F6F6F6; border: #E8E8E8 1px solid; color: #444; display: block; margin: 12px 0; overflow: auto; padding: 6px 10px; white-space: pre; max-width:100%; overflow:auto; } code { color: #2C92B1; border: 1px solid #F8F8F8; } pre code { font-size: .9em; padding: 0!important; background-color: #F6F6F6; border: none!important; overflow:visible; } /* tables */ table { margin-right: auto; margin-top: 10px; margin-bottom: 20px; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-spacing: 0; } table th { padding: 3px 10px; background-color: #eee; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } table tr { } table td { padding: 3px 10px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; } /* sub */ sup,sub,a.footnote { font-size: 1.4ex; height: 0; line-height: 1; vertical-align: super; position: relative; } sub { vertical-align: sub; top: -1px; } /* =Media Queries -------------------------------------------------------------- */ /* =Retina -------------------------------------------------------------- */ @media all and (-webkit-min-device-pixel-ratio: 1.5) { #nav_arrow { background-image: url(/images/arrowdown-black@2x.png); background-size: 20px 8px; } #app_socials a { background-size: 60px 60px; } a#tw_social { background-image: url(/images/social/social-twitter@2x.png); } a#fb_social { background-image: url(/images/social/social-facebook@2x.png); } a#nl_social { background-image: url(/images/social/social-newsletter@2x.png); } a#tw_social:hover { background-image: url(/images/social/social-twitter-hover@2x.png); } a#fb_social:hover { background-image: url(/images/social/social-facebook-hover@2x.png); } a#nl_social:hover { background-image: url(/images/social/social-newsletter-hover@2x.png); } } /* =Mobile (Portrait) -------------------------------------------------------------- */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { body { min-width: 300px;} #nav .content, #main .content, .content { width: 300px !important; } #video iframe {width:260px; height:146px; margin:0 auto;} .inline-video iframe {width:300px; height:168px; margin:0 auto;} form textarea { width: 259px; height: 147px; padding: 10px 7px; } form span.wpcf7-list-item input { -ms-transform: scale(1.85); /* IE */ -moz-transform: scale(1.85); /* FF */ -webkit-transform: scale(1.85); /* Safari and Chrome */ -o-transform: scale(1.85); /* Opera */ padding: 8px; margin: 15px 0px; } /* Same for both portrait and landscape */ #m_tagline h2 {font-size: 22px; margin: -140px 0 8px 0;} #m_tagline div {font-size: 15px; width: 250px;} #masthead {margin-top: 0; padding-top: 310px;} .home #nav .content {background-size: 200px 208px; width: 200px !important} #header_buttons {padding: 0; height: 66px; width: 252px; margin: 0 auto; position: absolute; bottom: 0px;} #header .content {height: 700px;} #nav {height:50px;} body.home #nav {background-color: transparent; position: relative; right: inherit; padding-right: 0;} body.home #main_nav { margin: 0 0 0 0 !important; background: black; position: absolute; bottom: -20px; left: -120px; opacity: .4; width: 500px; text-align: center; font-size: 11px !important; padding: 0;} #main_nav li:before { padding: 0 5px; } #main_nav li { font-size: 16px; } #main_nav li:last-child {display:none;} #nav_arrow { display:none;} #screens { display: none;} #main .content h1.page_title { font-size: 22px; } #main .content h1, #main .content p, #main .content ul, #main .content #page ul, #main .content > ol, #main .content > ul { padding-right: 0; } #main .content ol, #main .content ul { padding-left: 20px; } #main .content h3 { padding-right: 0px; } #main .content img {max-width: 300px; height: auto;} #header {padding-bottom:20px;} #masthead {width: 300px; height: 167px; background-size: 300px 167px; } #awards {width: 120px;} #ada-award img {width:120px; height: 23.5px;} #aoy-award img {width:98.5px; height: 23px;} #header_buttons { padding: 16px 0; height: 66px; width:400px; margin:20px auto;} a#mac_store_link { background-size: 136px 33px; width: 136px; height: 33px;} a#ios_store_link { background-size: 111px 33px; width: 111px; height: 33px; margin-left: 0;} a#android_store_link { background-size: 111px 33px; width: 111px; height: 33px; margin-left: 0;} #nav a#home-btn {display: none} .page-parent #nav, .blog #nav, .archive #nav, .page-template-default #nav {height:33px;} .page-parent #main_nav, .blog #main_nav, .archive #main_nav, .page-template-default #main_nav {position: absolute; top: 0; left: -18px; padding: 5px 0 0 0;} h1.page_title { font-size: 22px !important; } .temp-img {float:none;} #features {height:1265px;} #features .content { width:320px;} #features .feature {width: 130px; height: 140px; margin-top:20px; padding:0;} .feature .pic img { margin:0 !important; padding:0 !important;} .feature .pic { height:auto;} .feature .title { font-size: 16px; line-height: 18px; margin: 3px 0 1px; } .feature .desc { font-size: 12px; line-height: 14px; margin: 1px 0; } #feature_slideshow { display: none; } #screens { height: auto; } #screens .col { width: 264px; margin: 0; } #screens .col .thumb:first-child { margin-right: 16px; } #blurbs { display: none; } #social { height: 475px; } #social .content { background: none; } #app_description { float: none; width: 300px; padding: 20px 0 10px; } #app_description p { margin: 0 0 10px 0; } #app_socials { float: left; width: 235px; padding-top: 10px;} #app_socials a { padding:2px 0 0 40px; background-position: left center; background-size: 35px 35px; font-size:25px; height:35px; line-height:35px; margin-bottom:20px;} #like_counts { margin:0 0 30px 0; padding-top:0;} /*#like_counts .count { float: left; } #like_counts .plusone { float: left; margin: 0 0 0 10px; } */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; margin-bottom: 15px;} .catmenu-container {display:none;} #main .content #blog img, #main .content #blog .video, #blog .post, #page, .post-excerpt {max-width:300px} #video, .inline-video {height: auto; margin-top: 0; padding: 15px 0 9px} #footernav { height: auto; padding-top: 20px;} #footernav li:before { padding: 0 2px 0 2px; content: "/"; color: #545454; } #do_logo { width: 70px; height: 50px; margin-top: 21px; background-size: 70px 50px; } #bb_logo { margin-top: 35px; } #menu-item-1641, .not-mobile {display:none !important;} .sync-product img {padding-top: 0;} .product {float: none; width: auto; min-height: inherit; border-top: 1px solid #EEE; margin-top:20px; padding-top: 13px;} /* =Page Nav -------------------------------------------------------------- */ #main .content .page_nav { padding: 12px 0; margin: 10px 0 18px; text-align: left; } #main .content .page_nav li { display:list-item; font-size: 17px; } #main .content .page_nav li a { color: #f15a71; text-decoration: none; font-weight: 700; } #main .content .page_nav li a:hover { color: #44C0FF; text-decoration: none; } #main .content .page_nav li:before { padding: 0 2px 0 5px; content: "・"; color: #444; } #main .content .page_nav li:first-child:before { padding: 0 2px 0 5px; content: "・"; color: #444; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; margin-bottom: 15px;} } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { body { min-width: 420px;} #nav .content, #main .content, .home #nav .content, .content { width: 420px; } #main_nav li:last-child {display:inline;} #features {height:810px;} #features .content { width:480px;} #feature_video { position: absolute; top: 96px; left: 50%; margin-left: -250px; width: 500px; height: 281px; } #main code { max-width: 420px; } /*#features .col { width: 100px; float: left; padding: 0 20px; } */#app_description { width: 420px;} #main .content #blog img, #main .content #blog .video, #blog .post, #page, .post-excerpt {max-width:420px} #video iframe {width:400px; height:225px;} .inline-video iframe {width:420px; height:236px;} #video {left: 74px;} #masthead { margin-left: 15px; display: block; vertical-align:middle; width: 400px; height: 222px; background-image: url(/images/home/home-products.png);background-size: 400px 222px;} } /* =Helper -------------------------------------------------------------- */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* =Print -------------------------------------------------------------- */ @media print { * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* Hide elements of page if the request comes from the ios app */ #inApp #nav, #inApp #footer, #inApp .push, #inApp #main h1:first-child { display: none; }