/* CONFIDENTIAL MATERIAL. DO NOT DISTRIBUTE. Copyright (c) 2010-2011, Flipboard, Inc. All Rights Reserved. Flipboard RSS Stylesheet Available Fonts: ------------------------ "HelveticaNeueLT-Condensed" "HelveticaNeueLT-MediumCond" "HelveticaNeueLT-BoldCond" Language codes: ------------------------ Japanese: .ja Korean: .ko Chinese: .zh English: .en */ body,menu,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } /*textarea { width: 500px; height: 2000px; } */ table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } em { font-style: italic; } strong { font-weight: bold; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } strike { display: inline; } /* BODY ----------------------------------------------------------------- */ body { padding-bottom: 50px; background-color: #f7f7f7; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-touch-callout: none; } a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.5); } #flipWrap { margin: 0px auto; border: 0px solid #000; margin-bottom: 100px; } /* FULLSCREEN GENERAL (AKA — 1.3 RSS) NOTE: there are also some .fullscreen rules down in flipAuthor ----------------------------------------------------------------- */ body.fullscreen { margin: 0px; padding: 0px; padding-top: 45px; padding-bottom: 100px; border-right: 10px solid #f7f7f7; border-left: 10px solid #f7f7f7; } body.fullscreen .flipFeedTitle { display: inline !important; text-align: left; letter-spacing: 0px; } body.fullscreen .flipFeedTitle:after { content: " via RSS"; text-transform: none; font-size: .7em; margin-left: 5px; color: #ccc; text-shadow: none; } body.fullscreen .flipFeedTitle span { display: none; } body.fullscreen .flipFeedTitle br { display: none; } body.fullscreen .flipFeedTitle em { display: none; } body.fullscreen .flipPublished { float: right !important; margin-bottom: 0px; margin-top: 3px; text-align: right; padding-bottom: 5px !important; } body.fullscreen .flipTitle { -webkit-box-shadow: 0px -1px 0px #fff, 0px -2px 0px #ddd; font-size: 36px; margin-top: 10px; padding-top: 10px !important; } /* PORTRAIT ----------------------------------------------------------- */ @media screen and (orientation:portrait) { body { margin: 0px 80px 10px 80px; overflow: hidden; /*min-height: 1200px;*/ } body.fullscreen { width: 748px; min-height: 1024px; } blockquote { width: 465px; margin-left: 35px; } #flipWrap { width: 545px; overflow: hidden; } .flipFeedTitle { width: 545px; } .flipRSS { width: 545px; font-size: 20px; } body.zh .flipRSS { font-size: 17px; color: #444; } body.ko .flipRSS { font-size: 17px; color: #444; } body.ja .flipRSS { font-size: 17px; } .flipRSS h1 { font-size: 20px; } .flipRSS h2 { font-size: 20px; } .flipRSS h3 { font-size: 20px; } .flipRSS h3 { font-size: 20px; } .flipRSS img { max-width: 545px !important; } .flipRSS figure img.fbMedium { max-width: 300px; height: auto !important; } .flipRSS figure.fbHuge { max-width: 539px !important; } .flipRSS img.fbLarge, .flipRSS img.fbHuge { width: 539px !important; height: auto; clear: both; max-width: 539px; } .flipRSS ol img.fbLarge, .flipRSS ol img.fbHuge { width: 504px !important; } /* BLOCKQUOTE IMG */ .flipRSS blockquote img.fbLarge { width: 465px !important; height: auto !important; } .flipRSS blockquote img.fbFirst.fbLarge.fbLandscape { margin-left: 0px !important; width: 465px !important; } /* Original Link */ .flipOriginal { width: 545px; } .flipOriginal a { width: 545px; } /* MISC LAYOUT DISRUPTERS */ table { max-width: 545px !important; width: auto !important; } table td { max-width: 545px !important; width: auto !important; } table tr { max-width: 545px !important; width: auto !important; } iframe { max-width: 545px; } object { background: #fff; border: 3px solid #fff; max-width: 545px; margin-bottom: 12px; } } /* LANDSCAPE ----------------------------------------------------------- */ @media screen and (orientation:landscape) { body { margin: 0px 125px 10px 125px; /*min-height: 800px; */ } body.fullscreen { width: 1004px; min-height: 768px; } blockquote { width: 648px; margin-left: 35px; } #flipWrap { width: 718px; overflow: hidden; } .flipFeedTitle { width: 718px; } .flipRSS { width: 710px; font-size: 20px; } body.zh .flipRSS { font-size: 18px; color: #444; } body.ko .flipRSS { font-size: 18px; color: #444; } body.ja .flipRSS { font-size: 18px; } .flipRSS h1 { font-size: 22px; } .flipRSS h2 { font-size: 22px; } .flipRSS h3 { font-size: 22px; } .flipRSS h4 { font-size: 22px; } .flipRSS img { max-width: 704px !important; } .flipRSS figure.fbHuge { max-width: 704px !important; } .flipRSS img.fbLarge, .flipRSS img.fbHuge { width: 704px !important; clear: both; height: auto; } .flipRSS ol img.fbLarge, .flipRSS ol img.fbHuge { width: 669px !important; } /* BLOCKQUOTE IMG */ .flipRSS blockquote img.fbLarge { width: 643px !important; height: auto !important; } .flipRSS blockquote img.fbFirst.fbLarge.fbLandscape { margin-left: 0px !important; width: 643px !important; } img.fbMicro { border: 0px solid #000 !important; } .flipOriginal { width: 710px; } .flipOriginal a { width: 710px; } /* MISC LAYOUT DISRUPTERS */ table { max-width: 710px !important; width: auto !important; } table td { max-width: 710px !important; width: auto !important; } table tr { max-width: 710px !important; width: auto !important; } iframe { width: 704px; max-width: 704px; background-color: transparent; border: 0px solid #fff; margin-bottom: 24px; } object { background: #fff; border: 3px solid #fff; max-width: 704px; margin-bottom: 24px; } } .flipOriginal a span { font-size: .7em; } /* GENERAL TYPOGRAPHY ----------------------------------------------------------------- */ blockquote { font-style: italic; color: inherit; border: 0px solid #000; text-align: justify; margin-bottom: 1em; } body.ko blockquote, body.ja blockquote, body.zh blockquote { font-style: normal; color: #666; } ol, ul { margin-left: 35px; } ol li, ul li { margin-bottom: .5em; } ul li { list-style: disc; } ol li { list-style: decimal; } a { text-decoration: none; color: #B11E0C; } a:visited { text-decoration: none; color: #B11E0C; } pre { white-space: pre-wrap; border: 0px dotted #ddd; background-color: #efefef; padding-top: 1em; margin-bottom: 1em; line-height: 1em;} table { clear: both; margin-top: 12px; margin-bottom: 12px;} br { margin-bottom: 1em; } /* SMALL-CAPS */ span.fbSC, acronym { font-size: .8em; letter-spacing: 1px; } div { float: none !important; padding: 0px !important; clear: both; } embed { background-color: #fff; border: 20px; } /* HEADERS ----------------------------------------------------------------- */ .flipRSS h1 { font-family: "HelveticaNeueLT-BoldCond"; } .flipRSS h2 { font-family: "HelveticaNeueLT-Condensed"; padding-bottom: .2em; padding-top: 1em; color: #222; } .flipRSS h3 { font-family: "HelveticaNeueLT-Condensed"; padding-bottom: .2em; padding-top: 1em; color: #222; } .flipRSS h4 { font-family: "HelveticaNeueLT-Condensed"; padding-bottom: .2em; padding-top: 1em; color: #222; } body.ja .flipRSS h1, body.ja .flipRSS h2, body.ja .flipRSS h3, body.ja .flipRSS h4 { font-family: "HiraKakuProN-W6"; } body.zh .flipRSS h1, body.zh .flipRSS h2, body.zh .flipRSS h3, body.zh .flipRSS h4 { font-family: "STHeitiTC-Medium"; } body.ko .flipRSS h1, body.ko .flipRSS h2, body.ko .flipRSS h3, body.ko .flipRSS h4 { font-family: "STHeitiK-Medium"; } .flipRSS h1 span.fbSC, .flipRSS h2 span.fbSC, .flipRSS h3 span.fbSC, .flipRSS h4 span.fbSC { font-size: inherit; text-transform: none; letter-spacing: normal; } /* Keep small caps out of headers */ .flipRSS h1 span.fbSC, .flipRSS h3 span.fbSC, .flipRSS h3 span.fbSC, .flipRSS h4 span.fbSC { font-size: inherit !important; } /* FEED TITLE ----------------------------------------------------------------- */ .flipFeedTitle { margin-top: 12px; margin-bottom: 48px; font-size: 16px; text-transform: uppercase; font-family: "HelveticaNeueLT-BoldCond"; letter-spacing: 1px; text-align: center; color: #666; text-shadow: 1px 1px 1px #fff; } .flipFeedTitle span { color: #ccc; font-size: .7em; text-transform: none; } .flipFeedTitle img { margin-right: 5px; vertical-align: top; margin-top: 4px; } body.ja .flipFeedTitle { font-family: "HiraKakuProN-W6"; letter-spacing: 0px; } body.zh .flipFeedTitle { font-family: "STHeitiTC-Medium"; letter-spacing: 0px; } body.ko .flipFeedTitle { font-family: "STHeitiK-Medium"; letter-spacing: 0px; } /* PUBLISHED DATE ----------------------------------------------------------------- */ .flipPublished { font-family: "HelveticaNeueLT-Condensed"; font-size: 13px; margin-bottom: 6px; color: #aaa; } /* TITLE ----------------------------------------------------------------- */ .flipTitle { width: 100%; font-family: "HelveticaNeueLT-BoldCond", "Helvetica Neue", sans-serif; font-size: 28px; line-height: 1.15em; letter-spacing: 0px; margin-bottom: 0px; color: #333; text-shadow: 1px 1px 1px #fff; overflow: hidden; } .flipTitle a { color: #333; } body.ja .flipTitle { font-family: "HiraKakuProN-W6"; letter-spacing: 0px; } body.zh .flipTitle { font-family: "STHeitiTC-Medium", "HiraKakuProN-W3"; letter-spacing: 0px; } body.ko .flipTitle { font-family: "STHeitiK-Medium"; letter-spacing: 0px; } /* AUTHOR ----------------------------------------------------------------- */ .flipAuthor { margin-left: 70px; margin-bottom: 20px; font-size: 15px; font-family: "HelveticaNeueLT-BoldCond", Georgia, Palatino; text-align: left; color: #aaa; display: block; } body.fullscreen .flipAuthor { margin-left: 0px; margin-top: 5px; } .flipAuthor:before { content: "— "; } body.en .flipAuthor:before { content: "— by "; font-style: italic; font-family: Palatino; font-weight: bold; } body.en.fullscreen .flipAuthor:before { content: "by "; font-family: "HelveticaNeueLT-Condensed"; font-weight: normal; font-style: normal; } body.zh .flipAuthor { font-family: "STHeitiTC-Medium", "HiraKakuProN-W3"; } body.ja .flipAuthor { font-family: "HiraKakuProN-W6"; letter-spacing: -1px; font-size: 13px; } body.ko .flipAuthor { font-family: "STHeitiK-Medium"; letter-spacing: 0px; font-size: 13px; margin-top: 5px; } /* This allows us to keep the margin-bottom from flipAuthor */ .flipAuthor:empty:before { content: "" !important; } .flipAuthor span { color: #777; } /* RSS BODY ----------------------------------------------------------------- */ .flipRSS { font-family: Georgia, Palatino, serif; line-height: 1.55em; text-align: justify; color: #222; } body.ja .flipRSS { font-family: "HiraMinProN-W3"; line-height: 1.6em; } body.zh .flipRSS { font-family: "STHeitiTC-Light", "HiraKakuProN-W3"; line-height: 1.6em; } body.ko .flipRSS { font-family: "STHeitiK-Light"; line-height: 1.6em; } .flipRSS p { margin-bottom: 1em; } /* IMAGES ----------------------------------------------------------------- */ .flipRSS img { display: block; margin: 12px 0px; border: 0px; -webkit-box-shadow: 0px 0px 0px; } .flipRSS img.fbLarge { border: 3px solid #fff !important; -webkit-box-shadow: 0px 2px 2px #dfdfdf; } .flipRSS img.fbMedium { float: left; border: 3px solid #fff !important; -webkit-box-shadow: 0px 2px 2px #dfdfdf; margin-right: 24px; margin-top: 5px; margin-bottom: 12px; } .flipRSS img.fbSmall { -webkit-box-shadow: none; -webkit-box-shadow: 0px 2px 2px #dfdfdf; float: left; clear: none; border: 3px solid #fff; margin-top: 5px; margin-right: 24px; } .flipRSS img.fbMicro { border: 0px solid #f00 !important; float: left; display: inline !important; clear: none; margin-bottom: 10px; margin-right: 5px; } .flipRSS a.fbMicro { float: left; display: inline; border: 0px solid #f00; } /* For thin images */ .flipRSS img.fbThin { } /* MASHABLE Specific — to get things at end of feed to lineup */ .feedflare a { float: left; display: inline; } hr { display: none; } /* Attempt at trying to style Mashable's nasty divs into something good */ /* div.fbMedium { float: left; display: inline; border: 20px solid #000; clear: both; } div.fbMedium img { float: left !important; display: inline; } */ /*div.flickr-thumb img.fbLarge { border: 30px solid #000 !important; float: left; }*/ /*.fbGraphic { border: 20px solid #000 !important; float: left; }*/ /*.flipRSS .flickr-thumb img { width: inherit !important; float: left; display: inline; border: 20px solid #000 !important; }*/ /* FIGURES ----------------------------------------------------------------- */ .flipRSS figure { clear: left; display: block; margin-right: 12px; float: left; margin-bottom: 0em; border: 0px solid #000; } .flipRSS figure img { margin-bottom: 0px; } .flipRSS figure img.fbMedium { margin-bottom: 0px; } .flipRSS figure figcaption { float: right; clear: both; color: #aaa; font-size: 10px; line-height: 1em; margin-top: 5px; margin-right: 4px; margin-bottom: 1em; font-family: "HelveticaNeueLT-MediumCond"; text-align: right; text-transform: uppercase; letter-spacing: 1px; } body.zh .flipRSS figure figcaption { font-family: "STHeitiTC-Light", "HiraKakuProN-W3"; letter-spacing: 0px; } body.ko .flipRSS figure figcaption { font-family: "STHeitiK-Light"; letter-spacing: 0px; } body.ja .flipRSS figure figcaption { font-family: "HiraKakuProN-W3"; letter-spacing: 0px; } /* don't show captions for super tiny images which are usually ads or buttons */ .flipRSS figure.fbSmall figcaption { display: none; } .flipRSS figure.fbMicro figcaption { display: none; } /* VIEW ORIGINAL ARTICLE ----------------------------------------------------------------- */ .flipOriginal { clear: both; font-family: "HelveticaNeueLT-Condensed"; margin-top: 40px; } .flipOriginal a { display: block; text-align: center; padding: 20px 0px; background-color: #efefef; border-radius: 5px; color: #999; text-shadow: 1px 1px 1px #fff; } .flipOriginal a:before { content: 'View Original Article'; } body.en .flipOriginal a:before { content: 'View Original Article'; } body.ko .flipOriginal a:before { content: '원문 보기'; } body.zh .flipOriginal a:before { content: '檢視原始檔'; } body.ja .flipOriginal a:before { content: '元のソースを表示'; }