/* =Fonts ----------------------------------------------- */ @font-face { font-family: "Titillium"; font-weight: normal; font-style: normal; src:url("/fonts/titillium/TitilliumText22L003-webfont.eot"); src:url("/fonts/titillium/TitilliumText22L003-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/titillium/TitilliumText22L003-webfont.woff") format("woff"), url("/fonts/titillium/TitilliumText22L003-webfont.ttf") format("truetype"), url("/fonts/titillium/TitilliumText22L003-webfont.svg#TitilliumText22LRegular") format("svg"); } @font-face { font-family: "Titillium"; font-weight: bold; font-style: normal; src:url("/fonts/titillium/TitilliumText22L005-webfont.eot"); src:url("/fonts/titillium/TitilliumText22L005-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/titillium/TitilliumText22L005-webfont.woff") format("woff"), url("/fonts/titillium/TitilliumText22L005-webfont.ttf") format("truetype"), url("/fonts/titillium/TitilliumText22L005-webfont.svg#TitilliumText22LBold") format("svg"); } @font-face { font-family: "TitilliumXBold"; font-weight: bold; font-style: normal; src:url("/fonts/titillium/TitilliumText22L006-webfont.eot"); src:url("/fonts/titillium/TitilliumText22L006-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/titillium/TitilliumText22L006-webfont.woff") format("woff"), url("/fonts/titillium/TitilliumText22L006-webfont.ttf") format("truetype"), url("/fonts/titillium/TitilliumText22L006-webfont.svg#TitilliumText22LXBold") format("svg"); } @font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; src: url("/fonts/open-sans/OpenSans-Regular-webfont.eot"); src: url("/fonts/open-sans/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/open-sans/OpenSans-Regular-webfont.woff") format("woff"), url("/fonts/open-sans/OpenSans-Regular-webfont.ttf") format("truetype"), url("/fonts/open-sans/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg"); } @font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; src: url("/fonts/open-sans/OpenSans-Semibold-webfont.eot"); src: url("/fonts/open-sans/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/open-sans/OpenSans-Semibold-webfont.woff") format("woff"), url("/fonts/open-sans/OpenSans-Semibold-webfont.ttf") format("truetype"), url("/fonts/open-sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold") format("svg"); } @font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; src: url("/fonts/open-sans/OpenSans-Bold-webfont.eot"); src: url("/fonts/open-sans/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/open-sans/OpenSans-Bold-webfont.woff") format("woff"), url("/fonts/open-sans/OpenSans-Bold-webfont.ttf") format("truetype"), url("/fonts/open-sans/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg"); } /* =Elements ----------------------------------------------- */ body { font: 100%/1.4 Georgia, "Times New Roman", Times, serif; margin: 0; padding: 0; background: white; color: black; padding-bottom: 1.5625em; /* @25px */ } body.has-background { background: rgb(214, 228, 227) url(/images/shared/background-tile.png) top repeat-x; background-image: url(/images/shared/background-top.png), url(/images/shared/background-tile.png), none; background-repeat: no-repeat, repeat-x; } .has-background #content, .has-background #footer { background: white; -webkit-box-shadow : rgba(0, 0, 0, 0.15) 0 5px 7px; -moz-box-shadow : rgba(0, 0, 0, 0.15) 0 5px 7px; -ms-box-shadow : rgba(0, 0, 0, 0.15) 0 5px 7px; -o-box-shadow : rgba(0, 0, 0, 0.15) 0 5px 7px; box-shadow : rgba(0, 0, 0, 0.15) 0 5px 7px; } #footer { /* position: relative; z-index: 1;*/ } a img { border-width: 0; } a { color: rgb(30, 102, 147); /* @deep-blue */ text-decoration: none; } a[id], a[name] { color: inherit; } a:hover, a:active { text-decoration: underline; } a[id]:hover, a[id]:active, a[name]:hover, a[name]:active { text-decoration: none; } h1, h2, h3, h4, h5, h6, p, ol, ul, dl, table, form, blockquote, header, footer, section, article, aside, nav { margin-top: 1.357em; margin-bottom: 0; } header, footer, section, article, aside, nav { display: block; } *:first-child { margin-top: 0; } h1+*, h2+*, h3+*, h4+*, h5+*, h6+* { margin-top: 0.35em; /* @after-headline-margin */ } h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 1.5em; } h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } button { cursor: pointer; } button[disabled] { cursor: default; } /* For Firefox */ #footer nav a abbr { border-width: 0; } /* =Quotes ----------------------------------------------- */ blockquote { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .pull-quote blockquote p { position:relative; font-style:italic; font-family: Georgia, "Times New Roman", Times, serif; font-size:1.09em; line-height:1.66; } .pull-quote cite { margin-top:0; font-style:normal; font-family: Georgia, "Times New Roman", Times, serif; } .quote { margin:1.55em 30px; background-color:#efefef; padding:1em 15px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } .quote .cite { margin-top:0.5em; } .quote cite { font-style:italic; } .quote cite strong { font-style:normal; } /* =Buttons ----------------------------------------------- */ #books-page .section-intro .action a, .aside .search button, #content .discussion form .submit button, .book .action a.buy-now, .standard form button, .standard-form button, .primary-action a, .primary-action button, .secondary-action a, .secondary-action button, #header .account h3 a, #header .subscribe button, .primary-action > span { /* Data URI encoded from: /images/shared/gradient/cantaloupe.svg */ background: rgb(222, 103, 36) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjQ2LCAxNzUsIDMyKSIgLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMjIyLCAxMDMsIDM2KSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogPC9kZWZzPgogPGc+CiAgPHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIHN0cm9rZS13aWR0aD0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIC8+CiA8L2c+Cjwvc3ZnPgogICAg) top repeat-x; background-size: contain; border-radius: 0.25em; border-width: 0; color: white; display: inline-block; font-family: "TitilliumXBold", Helvetica, Arial, sans-serif; font-weight: bold; padding: 0.2em 0.75em; padding-bottom: 0.1em; text-decoration: none; text-align: center; } .main.article .subscribe form p.submit { font-size: 0.875em; } #content .discussion form .submit button, .secondary-action button { font-size: 1em; } #header .account h3 a, #header .subscribe button { background: rgb(215, 215, 215) url(/images/shared/gradient/mercury-small-transition.svg) top repeat-x; background-size: contain; color: rgb(67, 124, 153); font-size: 0.8125em; /* @13px */ border: 1px solid rgb(170, 170, 170); } .aside .search button, #header .subscribe button { margin: 0; padding: 0.5em 0.5em 0.05em; font-size: 0.6875em; /* @11px */ } #header .search h3 a { background: #e1e1e1 url('//images.mauldineconomics.com/shared/branding/search-button-background.png') left top no-repeat; color: rgb(67, 124, 153); font-size: 13px; /* @13px */ border: 1px solid rgb(170, 170, 170); border-radius: 0.25em; padding:6px 8px 6px 35px; font-family:"TitilliumXBold", Helvetica,Arial,sans-serif; font-weight:normal; font-size:13px; } #header .subscribe button { text-transform: uppercase; } #books-page .section-intro .action a, .aside .search button, #content .discussion form .submit button, .book .action a.buy-now, .secondary-action a, .secondary-action button, .standard form button, .standard-form button, .primary-action button, .primary-action a { padding: 0.4em 0.75em 0.2em; } .aside .search button, #content .discussion form .submit button, .standard-form button, .standard form button, .secondary-action a, .secondary-action button { /* Data URI encoded from: mercury.svg */ background: rgb(225, 225, 225) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LCAyNTUsIDI1NSkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDIyNSwgMjI1LCAyMjUpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+CiAgICA=) top repeat-x; background-size: contain; color: rgb(67, 124, 153); border: 1px solid rgb(225, 225, 225); /* @mithril */ } #books-page .section-intro .action a, .book .action a.buy-now, .primary-action button, .primary-action a { /* Data URI encoded from: blue.svg */ background: rgb(65, 134, 166) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMTAwLCAxNjMsIDE5OCkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDY1LCAxMzQsIDE2NikiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x; background-size: contain; color: white; /* Give this a border width, so it will line up with secondary buttons. */ border: 1px solid; border-color: rgb(100, 163, 198) rgb(100, 163, 198) rgb(65, 134, 166) rgb(100, 163, 198); } #books-page .section-intro .action a:hover, #books-page .section-intro .action a:active, .book .action a.buy-now:hover, .book .action a.buy-now:active, .standard-form .primary-action button:hover, .standard-form .primary-action button:active, .primary-action button:hover, .primary-action button:active, .primary-action a:hover, .primary-action a:active { /* Data URI encoded from: blue-dark.svg */ background: rgb(45, 114, 146) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoODAsIDE0MywgMTc4KSIgLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoNDUsIDExNCwgMTQ2KSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogPC9kZWZzPgogPGc+CiAgPHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIHN0cm9rZS13aWR0aD0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIC8+CiA8L2c+Cjwvc3ZnPgogICAg) top repeat-x; background-size: contain; color: white; } .subscribe-tout .primary-action a, .subscribe-tout .secondary-action a, .subscribe-login-tout .secondary-action a, #content .resources .premium .primary-action a, #content .resources .premium .secondary-action a { line-height: 0.8; padding-top: 0.5em; padding-bottom: 0.35em; } .subscribe-tout .primary-action a span, .subscribe-tout .secondary-action a span, .subscribe-login-tout .secondary-action a span, #content .resources .premium .primary-action a span, #content .resources .premium .secondary-action a span { font-size: 0.6875em; /* @11px */ font-family: Arial, Helvetica, sans-serif; color: rgb(128, 128, 128); /* @aluminum */ font-weight: normal; } .subscribe-tout .primary-action a span, #content .resources .premium .primary-action a span { color: white; } .subscribe-tout .primary-action a strong, .subscribe-tout .secondary-action a strong, .subscribe-login-tout .secondary-action a strong, #content .resources .premium .primary-action a strong, #content .resources .premium .secondary-action a strong { text-transform: uppercase; } .aside .search button:hover, .aside .search button:active, #content .discussion form .submit button:hover, #content .discussion form .submit button:active, .secondary-action a:hover, .secondary-action a:active, .secondary-action button:hover, .secondary-action button:active, .standard-form button:hover, .standard-form button:active, .standard form button:hover, .standard form button:active, #header .account h3 a:hover, #header .account h3 a:active, #header .subscribe button:hover, #header .subscribe button:active { color: rgb(30, 69, 103); color: rgb(0, 81, 119); } a:hover .primary-action > span, a:active .primary-action > span { /* Data URI encoded from: /images/shared/gradient/cantaloupe-light.svg */ background: rgb(242, 123, 56) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjY2LCAxOTUsIDUyKSIgLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMjQyLCAxMjMsIDU2KSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogPC9kZWZzPgogPGc+CiAgPHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIHN0cm9rZS13aWR0aD0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIC8+CiA8L2c+Cjwvc3ZnPgogICAg) top repeat-x; background-size: contain; } .primary-action b { margin-left: 0.5em; vertical-align: -0.2em; display: inline-block; /* Data URI encoded from: /images/shared/gradient/tangerine.svg */ background: rgb(211, 68, 7) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwcHgiIGhlaWdodD0iNTAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWRpZW50IiB4MT0iMC41IiB5MT0iMCIgeDI9IjAuNSIgeTI9IjEiPgogICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9InJnYigyMzMsIDExNywgNCkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDIxMSwgNjgsIDcpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+Cg==) top repeat-x; background-size: contain; border-radius: 100px; } a:hover .primary-action b, a:active .primary-action b { /* Data URI encoded from: /images/shared/gradient/tangerine-light.svg */ background: rgb(221, 78, 17) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwcHgiIGhlaWdodD0iNTAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWRpZW50IiB4MT0iMC41IiB5MT0iMCIgeDI9IjAuNSIgeTI9IjEiPgogICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9InJnYigyNDMsIDEyNywgMTQpIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9InJnYigyMjEsIDc4LCAxNykiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4K) top repeat-x; background-size: contain; } .primary-action i { display: block; background: transparent url(/images/shared/triangle.png) 6px 50% no-repeat; background-image: url(/images/shared/triangle.svg), none; height: 1em; width: 1em; } /* Firefox only */ x:-moz-any-link, #header .account h3 a { padding-bottom: 0; } /* KUDOS: http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox */ button::-moz-focus-inner { border: 0; padding: 0; } #header .search p { position: relative; line-height: 1; } #header .search input { margin: 0; padding: 2px 4px; } #header .search button { margin: 0; display: block; background: transparent url(/images/shared/lense.png) center no-repeat; background-image: url(/images/shared/lense.svg), none; width: 18px; height: 100%; border-width: 0; font-size: 0; color: transparent; line-height: 1.357em; position: absolute; top: 0; right: 0; } /* =Layout ----------------------------------------------- */ #header, #content, #footer { width: 1000px; margin: 0 auto; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -ms-box-sizing : border-box; -o-box-sizing : border-box; box-sizing : border-box; } /* =Header ----------------------------------------------- */ #header { /* background: rgb(49, 49, 49) url(/images/shared/branding/background.jpg) no-repeat; */ color: white; border-bottom: 4px solid rgb(221, 221, 221); /* @dark-mercury */ position: relative; } #header .branding { background: transparent url(/images/shared/branding/photo.png) 13px 0 no-repeat; padding-top: 17px; padding-left: 141px; padding-bottom: 32px; height: 44px; } #header .branding h2 { display: inline-block; height: 44px; } #header .branding h2 a { vertical-align: top; display: inline-block; background: transparent url(/images/shared/branding/mauldin-economics.png) no-repeat; width: 171px; height: 44px; font-size: 0; color: transparent; } #header .branding .tagline { vertical-align: bottom; display: inline-block; font-family: "Titillium", Helvetica, Arial, sans-serif; font-size: 0.8125em; /* @13px */ font-style: italic; color: rgb(204, 204, 204); /* @silver */ line-height: 1; position: relative; top: 0.25em; margin-left: 1em; } #header label br { display: none; } .aside .search input, #header label input { border: 1px solid rgb(170, 170, 170); background: white; line-height: 1.125; border-radius: 2px; padding: 0.25em 0.5em; } #header .subscribe { margin: 0; /* Data URI encoded from: deep-blue.svg */ background: rgb(59, 110, 134) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoOTIsIDE2MiwgMTk3KSIgLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoNTksIDExMCwgMTM0KSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogPC9kZWZzPgogPGc+CiAgPHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIHN0cm9rZS13aWR0aD0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIC8+CiA8L2c+Cjwvc3ZnPgogICAg) top repeat-x; background-size: contain; color: white; padding: 0.75em 1em 0.5em; } #header .subscribe h3 { font-family: "Titillium", Helvetica, Arial, sans-serif; font-weight: bold; font-size: 0.8125em; /* @13px */ line-height: normal; margin-bottom: 0; } #header .subscribe form, #header .subscribe p { margin-top: 0; } #header .subscribe p { white-space: nowrap; } .aside .search input, #header .subscribe input { width: 110px; } #header .account h3 { font-family: "TitilliumXBold", Helvetica, Arial, sans-serif; font-size:1em; } #header .account h3 span { font-family: "Titillium", Helvetica, Arial, sans-serif; font-size:0.8em; font-weight:bold; } /* =Nav ----------------------------------------------- */ #header nav { margin-top: 0; /* Data URI encoded from: steel.svg */ /* background: rgb(82, 82, 82) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMTA5LCAxMDksIDEwOSkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDgyLCA4MiwgODIpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+CiAgICA=) top repeat-x; background-size: contain; */ font-family: "Titillium", Helvetica, Arial, sans-serif; font-weight: bold; font-size: 1.0625em; /* @17px */ } #header nav ul, #header nav li { list-style: none; margin-left: 0; padding-left: 0; margin-bottom:0; } #header nav ul { overflow: auto; } #header nav li { display: block; float: left; width:20%; } #header nav li:first-child a { border-left-width: 0; } #header nav li:last-child a { border-right-width: 0; } /* For IE8 */ #header nav li.last a { border-right-width: 0; } #header nav a { line-height: 1; display: block; /* Data URI encoded from: steel.svg */ background: rgb(82, 82, 82) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMTA5LCAxMDksIDEwOSkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDgyLCA4MiwgODIpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+CiAgICA=) top repeat-x; background-size: contain; padding: 0.67em 3.15em 0.57em; text-decoration: none; color: white; font-size:0.9em; border-left : 1px solid rgb(75, 75, 75); border-right : 1px solid rgb(145, 145, 145); border-left : 1px solid rgba(75, 75, 75, 1); border-right : 1px solid rgba(255, 255, 255, 0.35); } #header nav li:first-child a { -webkit-border-top-left-radius: 0.5em; -moz-border-radius-topleft: 0.5em; border-top-left-radius: 0.5em; } #header nav li:last-child a { -webkit-border-top-right-radius: 0.5em; -moz-border-radius-topright: 0.5em; border-top-right-radius: 0.5em; } /* Firefox only */ x:-moz-any-link, #header nav a { padding: 0.65em 3.15em 0.5em; } #header nav a:hover, #header nav a:active { /* Data URI encoded from: steel-light.svg */ background: rgb(107, 107, 107) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMTMzLCAxMzMsIDEzMykiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDEwNywgMTA3LCAxMDcpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+CiAgICA=) top repeat-x; background-size: contain; } #header nav .active a { /* Data URI encoded from: fern.svg */ background: rgb(107, 137, 77) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMTQ0LCAxNzEsIDExNykiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDEwNywgMTM3LCA3NykiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x; background-size: contain; } #header nav li ul li { display: block; float: left; width:auto; } /* Comment this out to recalculate the button widths below. */ #header nav a { padding-left: 0; padding-right: 0; text-align: center; } /* #header nav .home a { width: 128px; } #header nav .analysis a { width: 231px; } #header nav .resources a { width: 245px; } #header nav .about a { width: 163px; } #header nav .members a { width: 225px; } */ /* =Navigation ----------------------------------------------- */ .nav-button { display: none; } /* hide the navigation button by default */ .dropdown_4columns { margin:-1px auto 0 auto; float:left; position:absolute; left:-999em; /* Hides the drop down */ text-align:left; padding:10px 5px 10px 5px; border-top:1px solid #000; /*top:120px; */ background:#dcdcdc !important; font-size:0.8em !important; /* Rounded Corners */ -moz-border-bottom-left-radius: 0px 5px 5px 5px; -webkit-border-bottom-left-radius: 0px 5px 5px 5px; border-bottom-left-radius: 0px 5px 5px 5px; -moz-border-bottom-right-radius: 0px 5px 5px 5px; -webkit-border-bottom-right-radius: 0px 5px 5px 5px; border-bottom-right-radius: 0px 5px 5px 5px; z-index:888; /* Drop Shadow */ -moz-box-shadow:0px 0px 5px #666666; -webkit-box-shadow:0px 0px 5px #666666; box-shadow:0px 0px 5px #666666; } .dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .dropdown_3columns {width: 420px;} .dropdown_4columns {width: 730px;} .dropdown_5columns {width: 700px;} #menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns { left:0px; top:auto; } .column_1, .column_2, .column_3, .column_4, .column_5 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; overflow:hidden; } .column_1 {width:230px;} .column_2 {width:270px;} .column_3 {width:410px;} .column_4 {width:550px;} .column_5 {width:690px;} .dropdown_4columns h2{ font-size:1.2em; background-color:#cacaca; color:#6FA12F; padding:3px 10px; margin-bottom:0.5em; } #header nav .dropdown_4columns li:first-child a { border-top-left-radius: 0em; } #header nav .dropdown_4columns li:last-child a { border-top-right-radius: 0em; } #header nav .resources .dropdown_4columns a { width: 210px; padding:5px 10px; border:0; } .dropdown_4columns li a, .dropdown_4columns li a:active, .dropdown_4columns li a:link { font-size:0.85em; background:#dcdcdc !important; color:#333 !important; font-weight:normal; text-align:left !important; border-left:0 !important; } .dropdown_4columns li a:hover { background:#efefef !important; text-align:left !important; } .about_dropdown { width:19% !important; margin-left:60% !important; } .about_dropdown ul li{ display:block !important; float:none !important; } .about_dropdown ul li a{ padding-left:1em !important; border-right:0 !important; } .articles_dropdown { width:19%; margin-left:20%; } .articles_dropdown ul li{ display:block !important; float:none !important; } .articles_dropdown ul li a{ padding-left:1em !important; border-right:0 !important; } .publications_dropdown { width:72%; margin-left:16.6667%; } .imgshadow { /* Better style on light background */ background:#FFFFFF; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 0px 5px #666666; -webkit-box-shadow:0px 0px 5px #666666; box-shadow:0px 0px 5px #666666; } /* =Footer ----------------------------------------------- */ #footer { margin-top: 0; border-width: 4px 0 0; border-style: solid; border-color: rgb(221, 221, 221); /* @dark-mercury */; padding: 1em 1.4em 2em; -webkit-border-bottom-right-radius: 0.5em; -webkit-border-bottom-left-radius: 0.5em; -moz-border-radius-bottomright: 0.5em; -moz-border-radius-bottomleft: 0.5em; border-bottom-right-radius: 0.5em; border-bottom-left-radius: 0.5em; } #footer, #footer a { color: rgb(102, 102, 102); /* @steel */ } #footer ul, #footer li { list-style: none; margin-left: 0; padding-left: 0; } #footer li { margin-left: 1em; } #footer .social h2, #footer .social div { display: inline; } #footer .social a { /* opacity: 0.8; */ -webkit-transition : opacity 0.2s; -moz-transition : opacity 0.2s; -ms-transition : opacity 0.2s; -o-transition : opacity 0.2s; transition : opacity 0.2s; } #footer .social a:hover, #footer .social a:active { text-decoration: none; opacity: 1; } #footer .social li { margin-left: 0.5em; } #footer .social img, #footer .social iframe { vertical-align: top; /* position: relative;*/ } #footer .social img { top: -0.2em; } #footer .legal, #footer .social h2 { color: rgb(102, 102, 102); /* @steel */ font-size: 0.75em; /* @12px */ } #footer .social h2 { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; /* @bold */ } #footer ul, #footer li { list-style: none; margin-left: 0; padding-left: 0; } #footer li { display: inline; } #footer nav li { display: inline-block; line-height: 1; border-left: 1px solid #b3b3b3; padding-left: 0.5em; margin-left: 0.3em; } #footer nav li:first-child { border-left-width: 0; padding-left: 0; margin-left: 0; } /* Prevent iPhones from making the legal text really big and on a separate line. */ #footer .legal p { -webkit-text-size-adjust: none; } /* =Content ----------------------------------------------- */ /* #content.standard, #content .dialog, #content .login, #content.text { border-width: 0 1px; border-style: solid; border-color: rgb(221, 221, 221); /* @dark-mercury } */ #content.mauldin-economics { background-image: url(/images/shared/photos/chair-3.png); background-position: 740px 115px; background-repeat: no-repeat; } #content.john-mauldin { background-image: url(/images/shared/photos/chair-2.jpg); background-position: 740px 115px; background-repeat: no-repeat; } #content.mauldin-economics .main.about-us, #content.john-mauldin .main.about-us { width: 585px; /* 600 - 15 */ } #content.tony-sagami .main.about-us { width: 820px; /* 600 - 15 */ } #content .main.about-us img { float: right; margin: 0 0.5em 1em 1em; border-radius: 2px; } #content .main.about-us img:first-child+* { margin-top: 0; } #content .main.contact .body { font-size: 0.875em; /* @14px */ } #content .faqs { margin-top: 1.5em; } #content.standard > section h2, #content .main.article .body h2 { /* font-size: 1.25em; */ font-size: 1.4em; } #content.standard > section h3, #content .main.article .body h3 { /* font-size: 1.15em; */ font-size: 1.3em; } /* KLUDGE: Make second-level headlines (h2) look like third-level headlines (h3) We’re doing this to make Yield Articles match the style of other articles throughout the site. (If we can make all of the articles use the same stucture, this rule can be removed). */ /* #content .main.article .body h2 { font-size: 1.15em; } */ /* TBD: Prevent iPhones from making the article paragraphs bigger than the sub headlines? */ /* #content .main.article .body { -webkit-text-size-adjust: none; } */ #content.standard > section h4, #content.standard > section h5, #content.standard > section h6, #content .main.article .body h4, #content .main.article .body h5, #content .main.article .body h6 { font-size: 1em; } #content.standard > section .single-letter-headlines h3 { float: left; margin-right: 0.5em; font-size: inherit; } /* =Contact ----------------------------------------------- */ #content .main.contact .vcard { margin-top: 1.55em; overflow: auto; } #content .main.contact .vcard h2 { margin-top: 0; } #content .main.contact .vcard p { margin-top: 0; } #content .main.contact .vcard .org { font-weight: bold; } /* =Text Manager ----------------------------------------------- */ #content.standard, #content.text, #content.text .main { position: relative; } /* Make space for the text manager, if the headline is especially long. TBD: We may want to apply this to all ".main" sections. I’m only applying it to article lists, for now. */ #content.text .main.article-list h1 { padding-right: 6em; } .text-manager { position: absolute; top: 1.7em; right: 1em; line-height: 1; } .main .text-manager { right: 0; } .standard .text-manager { right: 250px; } .text-manager, .text-manager li a { color: #666; } .text-manager h3, .text-manager ul, .text-manager li { display: inline; } .text-manager h3 { font-family: Arial, Helvetica, sans-serif; margin-top: 0; background: transparent; border-width: 0; font-weight: normal; text-transform: none; /* We’re using a fixed size here so the text manager itself won’t resize when it’s active. */ font-size: 11px; } .text-manager ul, .text-manager li { list-style: none; margin-left: 0; padding-left: 0; } .text-manager ul { margin-top: 0; margin-left: 0.25em !important; /* We’re using a fixed size here so the text manager itself won’t resize when it’s active. */ font-size: 14px; } .text-manager li { display: inline; margin-left: 0.25em !important; } .text-manager li a, .text-manager li a:hover, .text-manager li a:active { border-width: 0 !important; } .text-manager li a { color: rgb(153, 153, 153) !important; } .text-manager li a:hover, .text-manager li a:active { color: rgb(102, 102, 102) !important; text-decoration: none; } .text-manager li.active a { font-weight: bold; cursor: default; color: rgb(102, 102, 102) !important; } /* =Home ----------------------------------------------- */ #content .featured { margin-top: 1em; background: rgb(86, 194, 224) url(/images/home/ocean.svg); background-size: contain; color: white; padding: 20px; } #content .featured a { display: block; text-decoration: none; } #content .featured h1 { font-size: 3.75em; /* @60px */ font-family: "Titillium", Helvetica, Arial, sans-serif; font-weight: bold; } #content .featured h1+p { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 600; /* @semi-bold */ font-size: 1.125em; /* @18px */ line-height: normal; } #content .featured .primary-action { font-size: 1.125em; /* @18px */ } #content .featured a { color: white; } /* Make the links in the recent and articles sections less prominent. */ #content .recent a, #content .articles section > a { color: black; } #content .recent a:hover, #content .recent a:active, #content .articles section > a:hover, #content .articles section > a:active { color: rgb(30, 102, 147); /* @deep-blue */ text-decoration: none; } #content .articles { margin-top: 1em; border-bottom: 4px solid rgb(221, 221, 221); /* @dark-mercury */ overflow: auto; } #content .articles section { padding: 1.4em; /* @line-height */ border-width: 1px 0 0 0; border-style: solid; border-color: rgb(221, 221, 221); /* @dark-mercury */ overflow: auto; } #content .articles section a { text-decoration: none; display: block; } #content .articles section p a:hover, #content .articles section p a:active { text-decoration: underline; } #content .articles section a h2 { line-height: normal; } #content .articles section a:hover h2, #content .articles section a:active h2 { color: rgb(30, 102, 147); /* @deep-blue */ } #content .articles img { display: block; margin-top: 0.75em; margin-bottom: 1em; } #content .articles section.item-1 { font-size: 0.9375em; /* 15px */ } #content .articles section.item-2, #content .articles section.item-3 { font-size: 0.875em; /* 14px */ } #content .articles h2 { font-size: 1.357em; /* 19px */ } #content .articles section.item-1 h2 { font-size: 1.66666666666667em; /* 25px */ } #content .videos .date, #content .videos .duration, #content .articles .byline, #content .articles .date { margin-top: 0.35em; /* @after-headline-margin */ color: rgb(102, 102, 102); /* @steel */ font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; text-transform: uppercase; display: inline; } #content .videos .duration, #content .articles .date { margin-left: 0.5em; border-left: 1px solid rgb(143, 143, 143); padding-left: 0.75em; } #content .articles p { margin-top: 0.35em; /* @after-headline-margin */ } #content .recent section { padding: 1em 1.4em 4.1em; } #content .recent h2 { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 600; /* @semi-bold */ color: rgb(111, 161, 47); /* @fern */ text-transform: uppercase; font-size: 1em; /* @14px */ /*background: rgb(241, 241, 241); *//* @mercury */ line-height: 1; padding-top: 0.75em; padding-left: 1.1428em; /* @16px */ padding-bottom: 1px; margin-bottom: 1em; } #content .recent h2 a { color: rgb(111, 161, 47); /* @fern */ } #content .recent h2 a:hover { color: #1e6693; } #content .recent { font-size: 0.875em; /* @14px */ } #content .recent .news a, #content .recent .videos a { display: block; } #content .recent ol, #content .recent li { list-style: none; margin-left: 0; padding-left: 0; } #content .recent li { margin-top: 1.4em; /* @line-height */ } #content .recent li:first-child { margin-top: 0; } #content .recent h2 { margin: -0.5em -1em 1.25em; } #content .recent img { display: block; margin-bottom: 0.5em; } #content .recent .more a, #content .subscription-list .more a { color: rgb(30, 102, 147); /* @deep-blue */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; /* @bold */ font-size: 0.8571em; /* @12px*/ text-transform: lowercase; } #content .subscription-list .more a { font-size: 0.75em; /* @12px*/ } #content .recent .more a:hover span, #content .recent .more a:active span, #content .subscription-list .more a:hover span, #content .subscription-list .more a:active span { text-decoration: underline; } #content .recent .more a:after, #content .subscription-list .more a:after { content: " →"; color: black; } #content .recent .date { font-style: normal; text-transform: uppercase; color: rgb(102, 102, 102); /* @steel */ font-family: Arial, Helvetica, sans-serif; font-size: 0.7857em; } #content .about { background: rgb(241, 241, 241); /* @mercury */ } #content .about section { margin-top: 1.4em; /* @line-height */ padding: 1em 1.25em; } #content .about h2 { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; /* @normal-weight */ background: rgb(215, 215, 215); color: rgb(51, 51, 51); /* @tungsten */ font-size: 1em; border-radius: 0.5em; padding: 0.2em 0.65em; margin: -1em -0.65em 0; } #content .about h2 a { color: inherit; } #content .about h2 a:hover, #content .about h2 a:active { color: rgb(30, 102, 147); /* @deep-blue */ text-decoration: none; } #content .about h3 { margin-top: 0.5em; font-size: 0.875em; /* @14px */ } #content .about h3 a { color: rgb(111, 161, 47); /* @fern */ } #content .about p { margin-top: 0; font-size: 0.875em; /* @14px */ } div.home-editorial { position: relative; overflow: hidden; } div.home-editorial .ribbon { background-color: #1e4985; overflow: hidden; white-space: nowrap; /* top left corner */ position: absolute; padding:0px !important; left: -35px; top: 20px; /* for 45 deg rotation */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* for creating shadow */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; } div.home-editorial .ribbon .txt { color: #fff; display: block; font: bold; margin: 1px 0; padding: 5px 30px; text-align: center; font-family:"Open Sans", Arial, Helvetica, sans-serif; text-decoration: none; font-size: 13px; /* for creating shadow */ } /* =Resources ----------------------------------------------- */ #content section.login, #content .resources { padding: 1em; } #content section.login { padding: 3em; overflow: auto; font-size: 0.875em; /* @14px */ } #content .login > .primary, #content .login > aside { width: 44%; float: left; } #content .login form { margin-top: 1.5em; } #content .login h1+div form { margin-top: 0.35em; /* @after-headline-margin */ } #content .login aside { margin-top: 0; font-size: 0.9375em; border-left: 1px solid rgb(225, 225, 225); /* @mithril */ margin-left: 5%; padding-left: 5%; } #content .resources h1 { position: absolute; left: -9999px; } #content .resources h2 { color: rgb(111, 161, 47); /* @fern */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; /* @semi-bold */ font-size: 1.25em; /* @20px */ border-bottom: 1px dotted rgb(168, 168, 168); padding-bottom: 0.2em; margin-bottom: 1px; } #content .resources .books h2 { background: transparent; margin-bottom: 0; text-transform: uppercase; font-size: 0.875em; /* @14px */ font-weight: 600; /* @semi-bold */ } #content .resources h3 { margin-top: 0; font-size: 1em; /* @16px */ } #content .resources .premium h3 { font-size: 1.125em; /* @18px */ } #content .resources h3+p { font-size: 0.875em; /* @14px */ } #content .resources .free h2+section, #content .resources .premium h2+section, #content .resources .partners h2+section { /* Data URI encoded from: sky-blue.svg */ background: rgb(255, 255, 255) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjM4LCAyNDUsIDI0OCkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI1NSwgMjU1LCAyNTUpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+CiAgICA=) top repeat-x; background-size: contain; } #content .resources .free section, #content .resources .premium section, #content .resources .partners section { padding-left: 190px; padding-right: 12em; position: relative; border-top: 1px solid rgb(225, 225, 225); /* @mithril */ margin-top: 0; } #content .resources .free h2+section, #content .resources .premium h2+section, #content .resources .partners h2+section { border-top-width: 0; } #content .resources section section { padding: 1em 0; } #content .resources .premium ul, #content .resources .premium li { list-style: none; margin-left: 0; padding-left: 0; } #content .resources .premium ul { margin-top: 2.5625em; /* headline.height + top.padding (25 + 16) */ } #content .resources .free .secondary-action, #content .resources .partners .secondary-action { margin-top: 2.375em; /* headline.height + top.padding (22 + 16) */ } #content .resources .premium li { margin-top: 0.5em; } #content .resources .premium li:first-child { margin-top: 0; } #content .resources .premium ul, #content .resources .free .secondary-action, #content .resources .partners .secondary-action { position: absolute; top: 0; right: 1em; } #content .resources .premium li, #content .resources .free .secondary-action, #content .resources .partners .secondary-action { width: 10em; } #content .resources .premium li a, #content .resources .free .secondary-action a, #content .resources .partners .secondary-action a { display: block; width: 100%; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -ms-box-sizing : border-box; -o-box-sizing : border-box; box-sizing : border-box; } #content .resources .image { position: absolute; top: 0; left: 0; width: 160px; height: 100%; background-repeat: no-repeat; background-position: center; } #content .resources .image span { background: transparent url(/images/resources/divider.png) right no-repeat; position: absolute; top: 10%; right: -21px; /* 175 + span.width (6px) */ height: 80%; width: 6px; } #content .resources .books { border-width: 4px 0 1px; border-style: solid; border-color: rgb(221, 221, 221); /* @dark-mercury */ background: rgb(241, 241, 241); /* @mercury */ margin-left: -1em; margin-right: -1em; padding: 1em 1em 0; margin-bottom: 2.5em; } #content .resources .books ul, #content .resources .books li { list-style: none; margin-left: 0; padding-left: 0; } #content .resources .books ul { margin-top: 0; overflow: auto; } #content .resources .books li { float: left; width: 20%; /* -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -ms-box-sizing : border-box; -o-box-sizing : border-box; box-sizing : border-box; */ font-size: 0.875em; /* @14px */ text-align: center; } #content .resources .books a { display: block; padding: 1em; border-radius: 2px; } #content .resources .books li:first-child { margin-left: 0; } #content .resources .books img { border: 1px solid rgb(204, 204, 204); /* @silver */ margin-bottom: 0.5em; } #content .resources .books a { -webkit-transition : opacity 0.35s; -moz-transition : opacity 0.35s; -ms-transition : opacity 0.35s; -o-transition : opacity 0.35s; transition : opacity 0.35s; } #content .resources .books { -webkit-transition : background-color 0.35s; -moz-transition : background-color 0.35s; -ms-transition : background-color 0.35s; -o-transition : background-color 0.35s; transition : background-color 0.35s; } #content .resources .books:hover { background: rgb(215, 215, 215); background: rgb(221, 221, 221); /* @dark-mercury */ background: rgb(235, 235, 235); /* box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.25); */ } #content .resources .books:hover a { opacity: 0.5; } #content .resources .books a:hover { opacity: 1.0; } #content .resources .books a:hover img { opacity: 1.0; /* box-shadow: rgba(0, 0, 0, 0.15) 0 0 2px; border-color: rgb(200, 200, 200); */ } /* #content .resources .books a { -webkit-transition : all 0.35s; -moz-transition : all 0.35s; -ms-transition : all 0.35s; -o-transition : all 0.35s; transition : all 0.35s; } #content .resources .books a:hover, #content .resources .books a:active { background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); } */ #content .resources .books a:hover img, #content .resources .books a:active img { border-color: rgb(75, 135, 170); /* @deep-blue (top) */ } #content .resources .books a:hover, #content .resources .books a:active { text-decoration: none; } /* =Columns ----------------------------------------------- */ #content .dialog, #content { overflow: auto; } #content.order { overflow: visible; } #content .sub-nav, #content .aside { margin-top: 0; padding-top: 1.5em; float: left; } #content .aside { border-width: 0 0 0 1px; border-style: solid; border-color: rgb(221, 221, 221); /* @dark-mercury */ float: right; width: 230px; background: rgb(241, 241, 241); /* @mercury */ padding: 1.5em 20px; -moz-box-sizing : border-box; box-sizing : border-box; } #content.standard > section, #content .dialog .inner, #content .main.news, #content .main.book, #content .main.books, #content .main.photos, #content .main.videos, #content .main.contact, #content .main.general, #content .main.about-us, #content .main.conversations, #content .main.conversations-signed-out, #content .main.appearances, #content .main.account, #content .main.profile, #content .main.payment, #content .main.about-subscription, #content .main.renew, #content .main.confirmation, #content .main.article, #content .main.article-list, #content .main.subscription-list { float: left; margin-top: 0; padding: 1.5em 0; min-height: 400px; padding-bottom: 4.2em; /* @line-height x 3 */ } #content .main.order { padding-bottom: 4.2em; /* @line-height x 3 */ } #content.standard > section, #content .dialog .inner, #content .main.news, #content .main.book, #content .main.books, #content .main.photos, #content .main.videos, #content .main.contact, #content .main.general, #content .main.about-us, #content .main.conversations, #content .main.conversations-signed-out, #content .main.appearances, #content .main.account, #content .main.profile, #content .main.payment, #content .main.about-subscription, #content .main.renew, #content .main.confirmation, #content .main.article, #content .main.article-list, #content .subscription-list { margin-left: 20px; width: 600px; } #content .main.article-wide { width: 720px; } #content.standard > section, #content .main.general, #content .main.contact, #content .dialog .inner, #content .main.search-results { margin-left: 150px; /* Make room for the sub-nav (even if it isn’t present) */ } #content .main.book, #content .main.photos, #content .main.videos, #content .main.account, #content .main.profile, #content .main.payment, #content .main.about-subscription, #content .main.renew, #content .main.confirmation, #content .main.conversations, #content .main.conversations-signed-out, #content .main.appearances, #content .main.subscription-list { width: 830px; max-width: 999999px; } #content .resources { padding-bottom: 4.2em; /* @line-height x 3 */ } #content.standard > section h1, #content .dialog h1, #content .main.news h1, #content .main.book h1, #content .main.books h1, #content .main.photos h1, #content .main.videos h1, #content .main.contact h1, #content .main.general h1, #content .main.about-us h1, #content .main.conversations > h1, #content .main.conversations-signed-out > h1, #content .main.appearances h1, #content .main.account h1, #content .main.profile h1, #content .main.payment h1, #content .main.about-subscription h1, #content .main.renew h1, #content .main.confirmation h1, #content .main.article-list h1, #content .main.subscription-list h1, #content .main.article > header h2 { color: rgb(111, 161, 47); /* @fern */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; /* @semi-bold */ font-size: 1.25em; /* @20px */ border-bottom: 1px dotted rgb(168, 168, 168); padding-bottom: 0.2em; margin-bottom: 1px; } #content.standard > section { font-size: 0.875em; /* @14px */ } #content.standard > section h1 { font-size: 1.43em; /* @20px */ margin-bottom: 0.7em; /* @14px */ } #content .main.renew h2 { margin-top: 1em; font-family: inherit; font-size: 0.9375em; /* @15px */ } /* Calendar List View ----------------------------------------------- */ #content .cal-list{ margin-top:20px; } #content .cal-month { color: rgb(111, 161, 47); font-size:.95em; margin-bottom:18px; } #content .cal-date{ color: rgb(102, 102, 102); /* @steel */ font-size:.82em; /*text-transform: uppercase;*/ font-family: Arial, Helvetica, sans-serif; margin-bottom:0px; } #content .cal-title { margin-bottom:0px; margin-top:0px; font-size:.95em; } #content .cal-body{ margin-top:0px; font-size:.9em; } #content .cal-location{ font-style:italic; } /* =Order/Renew ----------------------------------------------- */ .order.disabled form .standard-form { cursor: default; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; filter: alpha(opacity=20); } .order-header { text-align: center; background: transparent url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iM3B4IiBoZWlnaHQ9IjFweCIgdmlld0JveD0iMCAwIDMwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPHJlY3QgZmlsbD0icmdiKDE2OCwgMTY4LCAxNjgpIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPg0KPC9zdmc+DQo=) bottom left repeat-x; width: 1000px; margin: 0 auto; } .order-header > * { display: inline-block; vertical-align: middle; margin: 1em 0; padding: 0 1.5em; } .order-header > h3 { border-left: 1px solid rgb(204, 204, 204); } #content .main.order > h1:first-child { font-size: 1.375em; /* @22px */ color: rgb(67, 123, 0); background: transparent url(/images/order/checkmark-big.png) 0 2px no-repeat; padding-left: 30px; } #content .main.order .description { font-size: 0.9375em; /* @15px */ margin-top: 1.4em; /* @line-height */ } #content .main.order .description > p:first-child { font-size: 1.13333333333333em; /* 1@7px */ } /* Change bullets into orange arrows. */ #content .main.about-us .body ul, #content .main.about-us .body ul li, #content .main.order .description ul, #content .main.order .description ul li { list-style: none; margin-left: 0; padding-left: 0; } #content .main.about-us .body ul, #content .main.order .description ul { position: relative; padding-left: 2.5em; } #content .main.about-us .body ul li, #content .main.order .description ul li { margin-top: 0.7em; /* @line-height / 2 */ } #content .main.about-us .body ul li:first-child, #content .main.order .description ul li:first-child { margin-top: 0; } #content .main.about-us .body ul li:before, #content .main.order .description ul li:before { left: 1em; position: absolute; content: "→"; color: rgb(208, 101, 33); } #content .main.order .options { background: #fdf7e7; font-family: Arial, Helvetica, sans-serif; font-size: 15px; padding: 1em 1.5em; border-radius: 0.25em; } #content .main.order .options .item+.item { margin-top: 0.5em; } #content .main.order .options h2 label, #content .main.order .options p { padding-left: 30px; } #content .main.order .options h2, #content .main.order .options label { color: #c75f1e; font-size: 16px; } #content .main.order .options label { display: block; background: transparent url(/images/order/checkmark-grey.png) left no-repeat; cursor: pointer; line-height: 19px; } #content .main.order .options .active label { display: block; background: transparent url(/images/order/checkmark.png) left no-repeat; } #content .main.order .options p { margin-top: 0; font-size: 14px; } #content .main.order .options.hide-radios input { position: absolute; left: -9999px; } #content.order { position: relative; } #content .order-preview { position: absolute; right: 35px; top: 30px; } #content .main.order .payment-info { position: relative; overflow: visible; } #content .main.order .accepted-credit { margin-left: 9em; display: block; } #content .main.order .features { position: absolute; width: 270px; top: 450px; right: 35px; font-size: 0.875em; /* @14px */ } #content .main.order .features h2 { color: rgb(79, 135, 2); font-size: 1.07142857142857em; /* @15px */ } #content .main.order .features ul, #content .main.order .features li { margin-top: 1.4em; /* @line-height */ } #content .main.order .features li:first-child { margin-top: 0; } #content .main.order .features ul, #content .main.order .features li { list-style: none; margin-left: 0; padding-left: 0; } #content .main.order .features li { background: transparent url(/images/order/checkmark-simple.png) 0 2px no-repeat; padding-left: 25px; } #content .main.order .secure { margin-top: 0; position: absolute; right: -310px; /* Attempt to line up with the preview image. */ top: 30px; } #content .main.order .secure { font-size: 13px; color: rgb(90, 90, 90); text-align: center; font-family: Arial, Helvetica, sans-serif; } #content .main.order .secure a, #content .main.order .secure strong { display: block; } #content .main.order .secure strong { margin-top: 0.5em; font-size: 14px; text-transform: uppercase; } #content .main.order { margin-left: 40px; margin-right: 360px; } #content .main.order .primary-action { margin-bottom: 3em; } #content .main.order .disclosure { font-size: 0.8125em; /* @13px */ max-width: 99999px; } #content .main.order h2 { font-size: 1em; } #content .main.order .required-note { margin-top: 1.4em; /* @line-height */ margin-bottom: -0.7em; /* @line-height / 2 */ } #content .main.order form ul, #content .main.order form li { list-style: none; margin-left: 0; padding-left: 0; } #content .main.order form li { margin-top: 0.25em; } #content .main.order form li input { margin-right: 0.5em; } #content .main.order form input { vertical-align: top; } #content .main.order form a { text-decoration: underline; } #content .main.order section.select p, #content .main.renew section.select p { display: inline; } #content .main.order form ul, #content .main.order form p, #content .main.order form dl, #content .main.order form h6, #content .main.renew form p, #content .main.renew form dl, #content .main.renew form h6 { font-size: 0.875em; /* @14px */ } #content .main.order form h6, #content .main.renew form h6 { width: 10em; display: inline-block; font-weight: normal; } #content .main.order form .submit button, #content .main.renew form .submit button { font-size: 1.14285714285714em; /* @16px */ } #content .main.order form > section, #content .main.renew form > section { margin-top: 0; } #content .main.order form > .details, #content .main.renew form > .details { margin-top: 1em; padding-top: 0; padding-bottom: 0; } #content .main.renew .details h2 { margin-top: 0; } /* KLUDGE (optional): Attempt to line up with the fields inside the section. */ #content .main.order form > p, #content .main.renew form > p { padding-left: 10px; } .main.confirmation dt, .main.renew dt { font-weight: bold; margin-right: 0.5em; margin-top: 1em; } .main.confirmation dt:after, .main.renew dt:after { content: ":"; } .main.confirmation dd, .main.renew dd { margin-left: 0; padding-left: 0; } #content .dialog h1 { margin-bottom: 1.4em; } #content .main.news > section, #content .main.article-list > article, #content .main.article-list > section { border-top: 1px solid rgb(225, 225, 225); /* @mithril */ margin-top: 0; padding: 1em 0; } #content .main.article-list.has-featured > section { padding-left: 0.25em; padding-right: 0.25em; } #content .main.news > h1+section, #content .main.article-list > .pseudo-footer+section, #content .main.article-list > footer+section, /* KLUDGE: Currently the top pager is inside of a footer element. */ #content .main.article-list > header+article, #content .main.article-list > h1+article, #content .main.article-list > h1+section, #content .main.article-list > hgroup+article, #content .main.article-list > hgroup+section { border-top-width: 0; } #content .main.article-list > hgroup h2 { margin-top: 0.7em; margin-bottom: 0.7em; font-size: 1em; /* @16px */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; /* @normal-weight */ color: rgb(102, 102, 102); /* @steel */ } /* KLUDGE: Prevent content from overlapping the results count. */ #content .main.article-list > .pseudo-footer { height: 40px; margin-bottom: 1.4em; } #content .main.article-list.has-featured h1+section { /* Data URI encoded from: sky-blue.svg */ background: rgb(255, 255, 255) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjM4LCAyNDUsIDI0OCkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI1NSwgMjU1LCAyNTUpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+CiAgICA=) top repeat-x; background-size: contain; } #content .main.about-subscription h1, #content .main.book h1 { width: 600px; } #content .main.about-subscription .text-manager, #content .main.book .text-manager { right: 230px; } /* =Options ----------------------------------------------- */ #content .options { overflow: auto; } #content .options h3 { position: absolute; left: -9999px; } #content .options .save, #content .options .save li, #content .options .third-party-share, #content .options .third-party-share li { list-style: none; margin: 0; padding: 0; float: left; position: relative; } #content .options .save li { margin-left: 0.25em; } #content .options .save li:first-child { margin-left: 0; } #content .article .options .third-party-share { float: right; } #content .options .save a, #content .video .options .third-party-share a { display: block; text-indent: -9999px; overflow: hidden; border-width: 0; } #content .options .save a { background: transparent url(/images/buttons/save.png) no-repeat; height: 19px; } #content .options .email a { background-position: 0 0; width: 50px; } #content .options .print a { background-position: -53px 0; width: 47px; } #content .options .download a { background-position: -103px 0; width: 68px; } #content .options .favorite a { background-position: -174px 0; width: 61px; } #content .options .unfavorite a { background-position: -302px 0; width: 61px; } #content .options .favorite_loading a { background-position: -238px 0; width: 61px; } #content .videos .third-party-share a { background: transparent url(/images/buttons/share.png) no-repeat; background-position: 0 0; width: 18px; height: 18px; margin-right: 2px; display: block; text-indent: -9999px; overflow: hidden; border-width: 0; } #content .videos .facebook a { background-position: -20px 0; } #content .videos .twitter a { background-position: -40px 0; } #content .videos .stumbleupon a { background-position: -60px 0; } #content .videos .reddit a { background-position: -80px 0; } #content .videos .delicious a { background-position: -100px 0; } #content .videos .bebo a { background-position: -120px 0; } /* =Article ----------------------------------------------- */ .signature em { min-width: 171px; padding-top: 70px; display: block; background: transparent url(/images/newsletter/signature.png) no-repeat 0 5px; font-style: normal; } .signature + .email { margin-top: 0; padding: 0 0 1.357em; border-bottom: 1px solid rgb(221, 221, 221); /* @dark-mercury */ } #content .main.about-us .body { font-size: 0.875em; /* @14px */ padding: 1.4em 0.25em 0; } #content .main.news section, #content .main.press-releases section { padding-left: 0.25em; padding-right: 0.25em; } #content .main.books h1+.item, #content .main.news h1+section, #content .main.press-releases h1+section, #content .main.about-us .body { margin-top: 0; /* Data URI encoded from: sky-blue.svg */ background: transparent url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjM4LCAyNDUsIDI0OCkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDI1NSwgMjU1LCAyNTUpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+CiAgICA=) top repeat-x; background-size: 124px auto; } #content .main.about-us .body h2 { font-size: 1.25em; /* @20px */ } #content .main.general .body, #content .main.article .body { margin-top: 1.5em; font-size: 0.9375em; /* @15px */ line-height: 1.5; } #content .main.article-list article .body, #content .main.article header+.body { margin-top: 0.35em; /* @after-headline-margin */ } #content .main.article .body .links { font-weight: bold; } #content .main.article h1, #content .main.article-list h2 { font-size: 1.375em; /* @22px */ } #content .main.article-list.has-featured h1+section h2 { font-size: 1.25em; /* @20px */ } /* Press Release, sub-headline */ #content .main.article article header h1+h2 { font-size: 1.15em; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; /* @normal-weight */ /* KLUDGE (Make the space above and below consistent). */ margin-bottom: 0.35em; /* @line-height */ } #content .main.books h2 { font-size: 1.28571428571429em; /* @18px */ } #content .main.news h2, #content .main.article-list h2, #content .subscription-list section h3 { font-size: 1.125em; /* @18px */ } #content .main.article-list article h3, #content .main.article-list section h3 { font-size: 1em; } #content .main.news section h2 a, #content .main.article-list article h2 a, #content .main.article-list section h2 a { color: inherit; display: block; text-decoration: none; } #content .main.news section p { font-size: 0.875em; /* @14px*/ } #content .main.news section h2 a:hover, #content .main.news section h2 a:active, #content .main.article-list article h2 a:hover, #content .main.article-list article h2 a:active, #content .main.article-list section h2 a:hover, #content .main.article-list section h2 a:active { color: rgb(30, 102, 147); /* @deep-blue */ } #content .main.news .date, #content .main.article .date, #content .main.article .byline, #content .main.article-list .date, #content .main.article-list .weblog, #content .main.article-list .byline, #content .subscription-list .date, #content .subscription-list .byline { color: rgb(102, 102, 102); /* @steel */ text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; } #content .main.article .date, #content .main.article .byline { font-size: 0.75em; /* @12px */ } #content .videos .date, #content .videos .duration, #content .main.news .date, #content .main.article-list .date, #content .main.article-list .weblog, #content .main.article-list .byline, #content .subscription-list .date, #content .subscription-list .byline { font-size: 0.6875em; /* @11px */ } #content .main.article .date, #content .main.article-list .date, #content .main.article-list .weblog, #content .subscription-list .date { margin-top: 0.35em; /* @after-headline-margin */ } #content .main.article-list article p, #content .main.article-list section p { font-size: 0.875em; /* @14px */ } .main.article .body #special-offer { float: left; margin-right: 1em; } .main.article footer .footer, .main.article .legal, .main.article-list .legal { font-size: 0.75em; /* @12px */ } .main.article .footerbox, .main.article-list .footerbox { font-size: 0.9em; background-color:#f5f5f5; padding:10px; margin:2em auto 0 auto; } .main.article .tout { background: rgb(247, 247, 247); padding: 1.4em; /* @line-height */ border-radius: 0.25em; } .main.article .subscribe { background: rgb(253, 247, 231); padding: 1.4em 2.8em; /* @line-height */; border-radius: 0.25em; font-family: Arial, Helvetica, sans-serif; } .main.article .subscribe h2 { font-size: 0.9375em; color: rgb(199, 95, 30); } .main.article .subscribe h2, .main.article .subscribe h2+p { display: inline } .main.article .subscribe h2+p { font-size: 0.75em; /* @12px */ } .main.article .subscribe label br { display: none; } .main.article .subscribe form { margin-top: 0.75em; } .main.article .subscribe form p { margin-top: 0; font-size: 0.8125em; /* @13px */ display: inline; } .main.article .subscribe form label span { font-weight: bold; margin-right: 0.5em; } .main.article .subscribe input { border: 1px solid rgb(176, 176, 176); width: 250px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); font-size: inherit; } .main.article .subscribe button { position: relative; top: -0.1em; vertical-align: center; } #content .main.article nav, #content .main.article-list nav { font-size: 0.75em; /* @12px */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 600; /* @semi-bold */ text-align: right; } #content .main.article nav { margin-top: 1.4em; /* @line-height */ } #content .main.article-list nav.sort ul { font-size: 0.91666666666667em; /* 11px */ } #content .main.article nav ul, #content .main.article nav li, #content .main.article-list nav ul, #content .main.article-list nav li { list-style: none; margin-left: 0; padding-left: 0; } #content .main.article nav li, #content .main.article-list nav li { text-transform: lowercase; } #content .main.article nav li { display: inline-block; line-height: 1; } #content .main.article nav .next { border-left: 1px solid; padding-left: 0.6em; margin-left: 0.4em; } #content .main.article nav .previous:before, #content .main.article-list nav .previous:before { content: "← "; } #content .main.article nav .next:after, #content .main.article-list nav .next:after { content: " →"; } #content .main.article-list footer { margin-top: 0; margin-bottom: 1.4em; /* @line-height */ } #content .main.article-list nav { overflow: auto; border-top: 1px solid rgb(225, 225, 225); /* @mithril */ margin-top: 0; padding: 1em 0.25em; } /* KLUDGE: Currently the top pager is inside of a footer element. */ #content .main.article-list .search-results-count+footer nav { border-top-width: 0; } #content .main.article-list nav .previous { float: left; } #content .main.article-list nav .next { float: right; } /* =Search ----------------------------------------------- */ #content .search-results-count { margin-top: 1em; /* KLUDGE: Make the count not take up any space. */ position: absolute; font-size: 0.875em; /* @14px */ } /* =Tags ----------------------------------------------- */ #content .main .tags, #content .main .permalink { font-size: 0.8125em; /* @13px */ } #content .main .permalink { margin-top: 0.25em; } #content .main .tags h3, #content .main .permalink h3 { font-family: inherit; font-weight: normal; font-size: inherit; } #content .main .tags h3:after, #content .main .permalink h3:after { content: ":"; } #content .main .tags h3, #content .main .tags ul, #content .main .tags li, #content .main .permalink h3, #content .main .permalink p { display: inline; } #content .main .tags ul, #content .main .tags li { list-style: none; margin-left: 0; padding-left: 0; } #content .main .tags li:after { content: ", "; } #content .main .tags li:last-child:after { content: ""; } /* =Byline/Date ----------------------------------------------- */ #content .article .date, #content .article .byline, #content .article-list .date, #content .article-list .weblog, #content .article-list .byline, #content .subscription-list .date, #content .subscription-list .byline { display: inline-block; line-height: 1; color: rgb(128, 128, 128); /* @aluminum */ } #content .article .byline+.date, #content .article-list .byline+.date, #content .article-list .byline+.weblog, #content .article-list .weblog+.date, #content .subscription-list .byline+.date { border-left: 1px solid; padding-left: 0.6em; margin-left: 0.4em; } #content .main.news > section > .date+p, #content .article-list > article > .date+p, #content .article-list > section > .date+p { margin-top: 0.25em; } /* =Discuss ----------------------------------------------- */ #content .discussion { border-top: 3px solid #ccc; padding: 14px 0; position: relative; } #content .discussion h2 { position: relative; margin-top: -8px; /* KLUDGE: This should probably be accomplished with vertical-align or line-height instead. */ float: left; margin-right: 1em; background: transparent url(/images/article/discussion-icon.png) no-repeat top right; min-height: 18px; padding-top: 4px; padding-right: 22px; font-size: 1.125em; /* @18px */ } #content .discussion h2+ul li { border-left: 1px solid rgb(200, 200, 200); padding-left: 0.75em; margin-left: 0.75em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 0.78571428571429em; /* @11px */ } #content .discussion h2+ul li:first-child { border-left-width: 0; padding-left: 0; margin-left: 0; } #content .discussion .comment-count { margin-top: 0; position: absolute; top: 14px; right: 0; font-weight: bold; font-size: 0.875em; /* 14px */ } #content .discussion .intro { clear: both; padding-top: 1em; /* @line-height */ font-size: 0.875em; /* 14px */ } #content .discussion form { margin-top: 0.75em; } #content .discussion form p:first-child { margin-top: 0; } #content .discussion label { display: block; } #content .discussion label span { display: block; position: absolute; left: -9999px; } #content .discussion label br { display: none; } #content .discussion textarea { display: block; width: 99%; height: 110px; } #content .discussion form .submit { margin-top: 0.75em; overflow: auto; } #content .discussion form .submit li { margin-right: 0.5em; } #content .discussion ul, #content .discussion li { list-style: none; margin: 0; padding: 0; } #content .discussion ul { overflow: auto; } #content .discussion li { float: left; } /* =Comments ----------------------------------------------- */ #fb-root { margin-top: 2.8em; /* @line-height x 2 */ } #content .comments { margin-bottom: 1.4em; /* @line-height */ } #content .comments h2 { position: absolute; left: -99999px; } #content .comments .empty { font-size: 0.875em; /* @14px */ } #content .comment { font-size: 0.875em; /* @14px */ position: relative; padding: 12px 0 12px 62px; } #content .comment, #content .comment + .paging { border-top: 1px dotted #a8a8a8; } #content section.comments .comment+.paging { padding-top: 0.75em; } #content .comment img { position: absolute; top: 12px; left: 0; max-width:10% !important; width:50px; height:auto; } #content .comment h3 { margin-top: 0; float: left; margin-right: 1em; font-family: Arial, Helvetica, sans-serif; font-size: 1em; /* @16px */ } #content .comment .time { margin-top: 0; color: #666; font-family: Arial, Helvetica, sans-serif; font-size: 0.78571428571429em; /* @11px */ line-height: 19px; /* KLUDGE: Attempt to match the line height of the headline next to this. */ } #content .comment p { margin-top: 1em; } #content .comment .reply { margin-top: 0; position: absolute; top: 12px; right: 2px; } #content section.comments .paging { font-size: 0.9em; margin-bottom: 0.75em; overflow: auto; text-align: right; } #content section.comments .paging ul, #content section.comments .paging li { list-style: none; margin-left: 0; padding-left: 0; } #content section.comments .paging ul { margin-top: 0; float: right; } #content section.comments .paging li { display: block; float: left; } #content section.comments .paging li a { margin: 0 2px; line-height: 1.2; color: #2d5270; } #content section.comments .paging li.active { font-weight: bold; } #content section.comments .paging .first { margin-right: 0.35em; text-transform: uppercase; } #content section.comments .paging .last { margin-left: 0.35em; text-transform: uppercase; } #content section.comments .paging .first a:before { content: "« "; } #content section.comments .paging .last a:after { content: " »"; } /* =Language ----------------------------------------------- */ #content .main.article header { position: relative; } #content .language { margin-top: 0; font-size: 0.6875em; /* @11px */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; /* @normal-weight */ position: absolute; right: 0; margin-top: 0; top: 30px; } #content .language, #content .language li a { color: rgb(128, 128, 128); /* @aluminum */ } #content .language li.active a { color: black; } #content .language h3 { position: absolute; left: -9999px; } #content .language ul, #content .language li { list-style: none; margin-left: 0; padding-left: 0; } #content .language li { display: inline-block; line-height: 1; border-left: 1px solid; padding-left: 0.6em; margin-left: 0.4em; } #content .language li { border-left: 1px solid; padding-left: 0.6em; margin-left: 0.4em; } #content .language li:first-child { border-left-width: 0; padding-left: 0; margin-left: 0; } /* =Sub Nav ----------------------------------------------- */ #content .sub-nav { width: 127px; margin-left: 3px; } #content .sub-nav > ul { font-size: 0.6875em; /* @11px */ } #content .sub-nav a { color: rgb(51, 51, 51); /* @tungsten */ text-decoration: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; /* @bold */ display: block; padding: 0.35em 0.5em; border-left: 5px solid transparent; -webkit-transition : color 0.2s; -moz-transition : color 0.2s; -ms-transition : color 0.2s; -o-transition : color 0.2s; transition : color 0.2s; } #content .sub-nav ul, #content .sub-nav li { list-style: none; margin-left: 0; padding-left: 0; } #content .sub-nav li { margin-top: 0.25em; } #content .sub-nav li:first-child { margin-top: 0; } #content .sub-nav .active a { background: rgb(247, 247, 247); border-color: rgb(49, 125, 167); color: rgb(30, 102, 147); /* @deep-blue */ } #content .sub-nav a:hover, #content .sub-nav a:active { text-decoration: none; color: rgb(30, 102, 147); /* @deep-blue */ } /* sub-sub-nav */ #content .sub-nav ul ul { display: none; margin: 0.25em 0 0; } #content .sub-nav ul .active ul { display: block; } #content .sub-nav ul .active ul a { font-weight: normal; color: #333; padding: 0.35em 0.5em 0.35em 1em; border-color: #fff; background: none; } #content .sub-nav ul .active ul a:hover, #content .sub-nav ul .active ul a:active { color: #1e6693; } #content .sub-nav ul .active ul .active a { color: #6fa12f; } /* =Aside ----------------------------------------------- */ #content .aside .connect h2 { font-size: 0.75em; /* @12px */ color: rgb(102, 102, 102); /* @steel */ font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 700; /* @bold */ } #content .aside .article-list { padding-top: 1em; } #content .aside .article-list h2 { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; /* @normal-weight */ background: rgb(215, 215, 215); color: rgb(51, 51, 51); /* @tungsten */ font-size: 1em; border-radius: 0.5em; padding: 0.2em 0.65em; margin: -1em -0.65em 0; } #content .aside .article-list ul, #content .aside .article-list ol { font-size: 0.875em; /* @14px */ margin-left: 0; padding-left: 0; } #content .aside .article-list li { margin-top: 0.7em; /* @line-height / 2 */ padding-left: 0; margin-left: 1.5em; } /* =Connect ----------------------------------------------- */ #content .aside .connect { border-width: 2px 0; border-style: solid; border-color: rgb(212, 212, 212); padding: 0.75em 0; } #content .aside .connect h2 { line-height: 1; color: #666; } #content .aside .connect ul, #content .aside .connect li { list-style: none; margin: 0; padding: 0; } #content .aside .connect ul { margin-top: 0.5em; overflow: auto; } #content .aside .connect li { margin-left: 5px; display: block; float: left; } #content .aside .connect li:first-child { margin-left: 0; } #content .aside .connect li a { display: block; } /* =Book Ad ----------------------------------------------- */ #content .aside .ad { margin: 0; } #content .aside .ad.book-190 { position: relative; background: #fff url(/images/ads/book-190.png) no-repeat; height: 150px; } #content .aside .ad.book-190 h2, #content .aside .ad.book-190 blockquote { position: absolute; left: -9999px; } #content .aside .ad.book-190 ul, #content .aside .ad.book-190 li { list-style: none; margin: 0; padding: 0; } #content .aside .ad.book-190 .learn-more, #content .aside .ad.book-190 .buy-now { display: block; position: absolute; top: 120px; text-indent: -9999px; overflow: hidden; height: 20px; border-width: 0 !important; } #content .aside .ad.book-190 .learn-more { left: 17px; width: 75px; } #content .aside .ad.book-190 .buy-now { left: 106px; width: 71px; } /* =Subscriptions ----------------------------------------------- */ #content .subscription-list { margin-bottom: 1.5em; } #content .main.order form > section, #content .main.renew form > section, #content .main.payment form, #content .main.account form, #content .main.confirmation h1+div, #content .main.confirmation > section, #content .subscription-list > section, #content .subscription-list aside > section { padding: 1em 10px 0; overflow: auto; } #content .subscription-list aside section section, #content .subscription-list > section section { width: 75%; float: left; padding-right: 20px; -moz-box-sizing : border-box; box-sizing : border-box; } #content .subscription-list nav { margin-top: 0.75em; width: 25%; float: right; /*border-left: 1px dotted rgb(204, 204, 204);*/ /* @silver */ background: transparent url(/images/resources/divider.png) left no-repeat; padding-left: 20px; -moz-box-sizing : border-box; box-sizing : border-box; } #content .subscription-list nav ul, #content .subscription-list nav li { margin-left: 0; padding-left: 0; } #content .subscription-list nav ul { font-size: 0.875em; /* @14px */ } #content .subscription-list nav li { margin-top: 0.7em; /* @line-height / 2 */ margin-left: 1em; } #content .subscription-list nav li:first-child { margin-top: 0; } #content .main.profile .comments h2, #content .main.payment form h3, #content .main.order form h3, #content .main.renew form h3, #content .main.account h2, #content .main.confirmation section h2, #content .subscription-list h2 { color: rgb(102, 102, 102); /* @steel */ text-transform: uppercase; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 600; /* @semi-bold */ font-size: 0.875em; /* @14px */ background: rgb(241, 241, 241); /* @mercury */ padding: 0.25em 10px; margin: 0 -10px 1em; } #content .main.profile .help { margin-top: 1.4em; /* @line-height */ font-size: 0.875em; /* @14px */ position: absolute; top: 4em; right: 0; text-align: right; } #content .main.profile .help a { display: block; } #content .main.profile .subscriptions { margin-top: 2.1em; } #content .main.profile .subscriptions h2 { position: absolute; left: -9999px; font-size: 1em; margin-bottom: 0.5em; font-size: 0.875em; /* @14px */ } #content .main.profile .comments { margin-top: 2.8em; } #content .main.profile .comments ul { font-size: 0.875em; /* @14px */ } #content .main.profile .comments h2 { position: static; padding-left: 2em; margin-left: 0; margin-right: 0; } #content .main.profile .subscriptions h3 { font-size: 0.8125em; /* @13px */ margin-bottom: 0.5em; color: rgb(100, 100, 100); font-weight: normal; } #content .main.profile .subscriptions table { border-collapse: collapse; font-size: 0.875em; /* @14px */ width: 100%; } #content .main.profile .subscriptions th, #content .main.profile .subscriptions td { padding: 0.5em 1em; text-align: left; font-weight: normal; } #content .main.profile .subscriptions thead th { background: #efefef; font-weight: bold; font-family: Arial, Helvetica, sans-serif; padding-top: 0.25em; padding-bottom: 0.25em; color: rgb(102, 102, 102); /* @steel */ text-transform: uppercase; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 600; /* @semi-bold */ background: rgb(241, 241, 241); /* @mercury */ } #content .main.profile .subscriptions tbody tr { border-bottom: 1px solid #e1e1e1; } #content .main.profile .subscriptions tbody th { font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #content .main.profile .subscriptions table th.price { width: 8em; /*was 4 */ } #content .main.profile .subscriptions table th.date { width: 7em; } #content .main.profile .subscriptions table th.options { width: 120px; /* was 200 */ } #content .main.profile .profile { margin-top: 1.4em; /* @line-height */ } #content .main.profile img { float: left; } #content .main.profile .profile ul, #content .main.profile .profile li { list-style: none; margin-left: 0; padding-left: 0; } #content .main.profile .profile h2, #content .main.profile .profile p, #content .main.profile .profile ul { font-size: 0.875em; /* @14px */ margin-left: 65px; } #content .main.profile .profile h2 { font-size: 0.9375em; /* @15px */ margin-top: 0; } #content .main.profile .profile ul { margin-top: 0; font-size: 0.875em; /* @14px */ } #content .main.profile .profile li { margin-top: 0.35em; /* @after-headline-margin */ } #content .main.order form h3, #content .main.renew form h3, #content .main.payment form h3 { margin-top: 1em; } #content .main.payment form .hiddenFields+h3 { margin-top: 0; } #content .subscription-list h3 a, #content .main.article .byline a, #content .main.article-list .byline a, #content .subscription-list .byline a { color: inherit; } #content .subscription-list h3 a:hover, #content .subscription-list h3 a:active, #content .article .byline a:hover, #content .article .byline a:active, #content .article-list .byline a:hover, #content .article-list .byline a:active, #content .subscription-list .byline a:hover, #content .subscription-list .byline a:active { color: rgb(30, 102, 147); /* @deep-blue */ text-decoration: none; } #content .subscription-list .date+p { margin-top: 0.35em; /* @after-headline-margin */ font-size: 0.875em; /* @14px */ } #content .subscription-list .more { margin-top: 0.5em; text-align: right; } #content .subscription-list .other h2 span { background: transparent url(/images/members/key.png) right no-repeat; padding-right: 2em; } /* =Videos ----------------------------------------------- */ .videos .inner { position: relative; } .photos .nav > ul, .videos .slideshow ul { margin: 0; height: 0; } .photos .nav > ul, .photos .nav > ul li, .videos .slideshow ul, .videos .slideshow li { list-style: none; margin-left: 0; padding-left: 0; } .photos .nav > ul li.next, .photos .nav > ul li.previous, .videos .slideshow li.next, .videos .slideshow li.previous { top: 70px; } .photos .nav > ul li.next, .photos .nav > ul li.previous { top: 80px; } .photos .nav > ul li.next, .videos .slideshow li.next { margin-top: 0; position: absolute; right: 20px; } .photos .nav > ul li.previous, .videos .slideshow li.previous { margin-top: 0; position: absolute; left: 20px; } .photos .nav-item a, .photos .nav > ul li a, .videos .slideshow li a { display: block; width: 17px; height: 34px; text-indent: -9999px; overflow: hidden; border-width: 0; } .photos .nav-item .next a, .photos .nav > ul .next a, .videos .slideshow .next a { background: transparent url(/images/arrows/right.png) no-repeat; } .photos .nav-item .previous a, .photos .nav > ul .previous a, .videos .slideshow .previous a { background: transparent url(/images/arrows/left.png) no-repeat; } .photos .nav > ul .next a, .photos .nav > ul .previous a, .videos .slideshow .next a, .videos .slideshow .previous a { width: 13px; height: 28px; background-position: 0 -3px; } .photos .nav > ul .next a, .videos .slideshow .next a { background-position: -3px -3px; } .photos .nav-item a:hover, .photos .nav-item a:active, .photos .nav > ul li a:hover, .photos .nav > ul li a:active, .videos .slideshow li a:hover, .videos .slideshow li a:active { border-width: 0 !important; background-position: -17px 0; } .photos .nav > ul .next a:hover, .photos .nav > ul .next a:active, .videos .slideshow .next a:hover, .videos .slideshow .next a:active { background-position: -20px -3px; } .photos .nav > ul .previous a:hover, .photos .nav > ul .previous a:active, .videos .slideshow .previous a:hover, .videos .slideshow .previous a:active { background-position: -17px -3px; } .photos .nav > ul a.disabled, .photos .nav-item a.disabled, .videos .slideshow li a.disabled { background-position: 0 0 !important; cursor: default; opacity: 0.25; } .photos .nav > ul .next a.disabled, .videos .slideshow .next a.disabled { background-position: -3px -3px !important; } .photos .nav > ul .previous a.disabled, .videos .slideshow .previous a.disabled { background-position: 0 -3px !important; } /* Hide the videos while the page is loading. */ .scriptable .main.videos, .scriptable .main.photos { visibility: hidden; } .scriptable .main.videos.loaded, .scriptable .main.photos.loaded { visibility: visible; } #videos-page #content .spinner, #photos-page #content .spinner { position: absolute; top: 100px; left: 365px; /* (830 - 100) / 2 */ } .videos .list { margin-top: 1.55em; } .videos .list .item { position: relative; margin-top: 1.55em; background-color: #efefef; -moz-border-radius : 6px; -webkit-border-radius : 6px; border-radius : 6px; padding: 15px 20px 15px 525px; min-height: 380px; /* Height of the video (this will be updated to the height of the tallest video, by the JavaScript.) */ } .photos .album .now-viewing, .videos .list .item .now-playing, .conversations .now-playing{ margin-top: 0; padding-bottom: 0.25em; border-bottom: 1px solid #d2d2d2; } .photos .album .now-viewing, .videos .list .item .now-playing, .conversations .now-playing, .conversations .biographies header h2{ letter-spacing: 0.1em; color: #993c00; font-size: 0.75em; /* @12px */ text-transform: uppercase; } .conversations .biographies header h1 { font-size: 1.125em; /* @18px */ } .conversations .biographies aside { margin-top: 0; font-size: 0.875em; /* @14px */ color: #565656; } .conversations .biographies aside h2 { font-size: 1em; } .videos .list .item h4 { margin-top: 1em; font-size: 1em; } .videos .list .item .description { font-size: 0.875em; /* @14px */ margin-top: 0.35em; /* @after-headline-margin */ } .videos .list .item img { display: block; margin: 1em 0; } /* KLUDGE: Play nice with video.js placeholder images. */ .videos .list .item .video img { margin: 0; } .main.videos { position: relative; } .videos .slideshow { margin-top: 3em; } .scriptable .videos .nav, .scriptable .videos .nav-sub { position: absolute; z-index: 1; } .videos .nav { right: 2px; } .videos .nav-sub { left: 2px; } /* Archive */ .videos .nav, .videos .nav h2, .photos .nav h2, .videos .nav-sub h2, .videos .nav-sub ul { font-family: Arial, Helvetica, sans-serif; } .photos .nav h2, .videos .nav-sub h2 { font-size: 1.09em; } .videos .nav ul, .videos .nav-sub ul { font-size: 0.6875em; /* @11px */ } .videos .nav ul, .videos .nav li, .videos .nav-sub ul, .videos .nav-sub li { list-style: none; margin-left: 0; padding-left: 0; } .videos .nav h2 { position: absolute; left: -9999px; } .videos .nav li.active a { color: #878787; } .videos .nav li { display: inline-block; line-height: 0.8; border-left: 1px solid #b3b3b3; padding-left: 0.4em; margin-left: 0.2em; } .videos .nav li:first-child { border-left-width: 0; padding-left: 0; margin-left: 0; } .sort h3, .sort ul, .sort li, .videos .nav-sub h2, .videos .nav-sub ul, .videos .nav-sub li { float: left; } /* Sub Nav */ .photos .nav h2, .videos .nav-sub h2 { color: rgb(111, 161, 47); /* @fern */ font-size: 0.75em; /* 12px */ text-transform: uppercase; } .photos .nav h2 { margin-bottom: 1em; } .videos .nav-sub ul { margin-left: 2em; } .sort li a, .videos .nav-sub li a, .conversations .library .categories li a { color: #787878; font-weight: bold; padding: 4px 7px; border-width: 0 !important; background-color: #e7e7e7; } .sort li a, .conversations .library .categories li a { display: block; padding: 2px 7px; } .sort li:first-child a, .videos .nav-sub li:first-child a, .conversations .library .categories li:first-child a { -moz-border-radius-topleft : 4px; -moz-border-radius-bottomleft : 4px; -webkit-border-top-left-radius : 4px; -webkit-border-bottom-left-radius : 4px; border-top-left-radius : 4px; border-bottom-left-radius : 4px; } .sort li:last-child a, .videos .nav-sub li:last-child a, .conversations .library .categories li:last-child a { -moz-border-radius-topright : 4px; -moz-border-radius-bottomright : 4px; -webkit-border-top-right-radius : 4px; -webkit-border-bottom-right-radius : 4px; border-top-right-radius : 4px; border-bottom-right-radius : 4px; } .videos .nav-sub li a:hover, .videos .nav-sub li a:active, .conversations .library .categories li a:hover, .conversations .library .categories li a:active { border-width: 0 !important; padding-bottom: 4px !important; background-color: #d5d5d5; text-decoration: none; } .sort li a:hover, .sort li a:active, .conversations .library .categories li a:hover, .conversations .library .categories li a:active { background-color: #c8c8c8; padding-bottom: 2px !important; text-decoration: none; } .sort li.selected a, .videos .nav-sub li.active a, .conversations .library .categories li.active a { background-color: #a0a0a0; color: #fff; } .conversations .library .categories li.active a { background-color: #8a8a8a; } .videos .list .item .video { position: absolute; top: 15px; left: 15px; width: 480px; height: 380px; } /* VideoJS positions the video element absolutely in full-screen mode. Accomodate this by temporarily disabling other positioned elements. */ /* .video-js-fullscreen #new-header, .video-js-fullscreen #header, .video-js-fullscreen #another-subscribe, .video-js-fullscreen #new-topics, .video-js-fullscreen #topics, .video-js-fullscreen #nav, .video-js-fullscreen #content, .video-js-fullscreen .videos .list .item .video { position: static; overflow: visible; } */ /* TEMP */ .videos .list > h3 { position: absolute; left: -9999px; } .videos .nav, .videos .nav-sub { margin-top: 3em; } .scriptable .videos .nav, .scriptable .videos .nav-sub { margin-top: 0; } .videos .nav ul, .videos .nav-sub ul { margin-top: 0; } /* Slideshow */ .videos .slideshow, .photos .nav .slideshow { border: 1px solid #e1e1e1; -moz-border-radius : 6px; -webkit-border-radius : 6px; border-radius : 6px; padding: 10px 60px; position: relative; } .videos .slideshow .item, .photos .nav .slideshow li { float: left; margin-right: 15px; } .photos .nav li a, .videos .slideshow .item a { display: block; padding: 5px !important; width: 120px; border-width: 0 !important; font-family: Arial, Helvetica, sans-serif; line-height: normal; } .photos .slideshow .item a span, .videos .slideshow .item a span { font-size: 0.75em; /* @12px */ } .videos .slideshow .item a .date { margin-top: 0 !important; font-size: 0.6875em; /* @11px */ } .videos .slideshow .item a .duration { margin-top: 0 !important; font-size: 0.6875em; /* @11px */ margin-left: 0.7em !important; padding-left: 0.5em !important; } .photos .nav li a .headline, .videos .slideshow .item a .headline { display: block; line-height: 1.4em; /* @line-height */ /* TBD: Limit the headline to a single line? width: 120px; overflow: hidden; white-space: nowrap; */ } .photos .nav li a:hover, .photos .nav li a:active, .photos .nav li.active a, .videos .slideshow .item a:hover, .videos .slideshow .item a:active, .videos .slideshow .item.active a { border-width: 0 !important; background-color: #e7e7e7; -moz-border-radius : 2px; -webkit-border-radius : 2px; border-radius : 2px; text-decoration: none; } .videos .slideshow .item a { color: rgb(102, 102, 102); /* @steel */ } .videos .slideshow .item .headline { color: rgb(30, 102, 147); /* @deep-blue */ display: block; } /* =Photos ----------------------------------------------- */ /* Deep Ocean */ .photos .album .grid ul li a { line-height: normal; font-family: Arial, Helvetica, sans-serif; font-size: 0.8125em; /* @13px */ color: #1e4666; background: transparent url(/images/arrows/deep-ocean.png) no-repeat right; padding-right: 8px; } .photos .album .grid ul .previous a { background: transparent url(/images/arrows/deep-ocean_left.png) no-repeat left; padding-right: 0; padding-left: 8px; } .photos .album .grid ul .next a { background-position: 100% 60%; } .photos .album .grid ul .previous a { background-position: 0 60%; } .photos .nav ul, .photos .nav li, .photos .album ul, .photos .album li { list-style: none; margin-left: 0; padding-left: 0; } .photos .nav, .photos .album { margin-top: 1.75em; } /* Nav */ /* .photos .nav { position: absolute; top: 400px; width: 100%; } */ .photos .nav { position: relative; } .photos .nav h2 { margin-left: 2px; } .photos .nav li.active strong { font-weight: normal; } .photos .nav ul { margin: 0; } /* Album */ .photos .album { margin-top: 1.55em; background-color: #efefef; -moz-border-radius : 6px; -webkit-border-radius : 6px; border-radius : 6px; padding: 15px 20px 15px 524px; position: relative; /* TBD: Make this dynamic? */ min-height: 335px; /* Make some room for the nav. */ /* margin-bottom: 200px; */ } .photos .album h2 { margin-top: 1em; font-size: 1em; } .photos .album .count { margin-top: 0; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; /* @12px */ } .photos .album > ul { margin: 0; } .photos .album > ul li { position: absolute; top: 15px; left: 55px; width: 400px; background-color: #efefef; /* We want to cover up the images below this one, including the captions. */ } .photos .album > ul li .caption { padding-top: 0.8em; font-size: 0.875em; /* @14px */ } .photos .nav-item .previous, .photos .nav-item .next { position: absolute; top: 148px; /* (image.height - button.height + image.topMargin) / 2 */ } .photos .nav-item .previous { left: 23px; /* (image.left - 15 + button.width) */ } .photos .nav-item .next { left: 470px; /* (image.left + image.width + 15) */ } /* Grid */ .photos .grid { overflow: auto; margin-top: 1em; } .photos .grid .item { margin: 0 2px 2px 0; } .photos .grid .item a { display: block; border-width: 0 !important; } .photos .grid .item .border { position: absolute; top: 0; left: 0; width: 66px; /* 70 - borderWidth * 2 */ height: 49px; /* 53 - borderWidth * 2 */ border: 2px solid #1e9cd0; display: none; } .photos .grid .item a:hover .border, .photos .grid .item a:active .border, .photos .grid .item.active a .border { display: block; } .photos .album .image, .photos .grid .image { background-color: #333; } .photos .grid .image { width: 70px; } .photos .album img, .photos .grid .item img { display: block; margin: 0 auto; } .photos .grid ul { margin-top: 0.25em; } .photos .grid li { text-transform: lowercase; } .photos .grid .previous { float: left; } .photos .grid .next { float: right; } .photos .grid .next .disabled, .photos .grid .previous .disabled { color: #ccc; border-width: 0 !important; cursor: default; } .photos .grid .previous .disabled { background-image: url(/images/arrows/silver-left.png) !important; } .photos .grid .next .disabled { background-image: url(/images/arrows/silver-right.png) !important; } /* =Over My Shoulder ----------------------------------------------- */ #content.over-shoulder .main h1+.note { font-size: 0.875em; /* 14px */ } .sort h3 { font-size: 12px; color: #1E4666; float: left; margin-right: 1em; } .sort ul { margin-top: 0; } #content .main.article-list nav.sort { margin: 1em 0; border-top-width: 0; font-family: Arial, Helvetica, sans-serif; } .aside .search h2 { font-size: 0.75em; /* @12px */ } .aside .search label span { position: absolute; left: -9999px; } .aside .search label br { display: none; } #content .article .pdf, #content .article-list .pdf { font-size: 0.875em; /* @14px */ } #content .article .pdf a[href], #content .article-list .pdf a[href] { border-width: 0 !important; background: transparent url(/images/icons/pdficon.gif) no-repeat 0 0; display: inline-block; padding-left: 22px; min-height: 16px; /* http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */ -webkit-word-break: break-all; -moz-word-break: break-all; -ms-word-break: break-all; -o-word-break: break-all; word-break: break-all; word-break: break-word; /* Non standard for webkit */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } #content .save-discuss h3, #content .vote h3 { position: absolute; left: -9999px; } #content .vote p { margin-top: 0; } #content .save-discuss ul, #content .save-discuss li, #content .vote ul, #content .vote li { list-style: none; margin: 0; padding: 0; } #content .save-discuss { float: left; } #content.over-shoulder .main.article article, #content.over-shoulder .main.article-list article { overflow: auto; } #content.over-shoulder .main.article .pdf, #content.over-shoulder .main.article-list .pdf { margin-top: 0; float: left; max-width: 500px; } #content .vote { margin-top: 0; float: right; color: #3c3c3c; line-height: 19px; } #content .vote p { font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; margin-right: 0.25em; } #content .save-discuss { color: #5c5c5c; font-size: 0.6875em; /* 11px */ vertical-align: top; } #content .save-discuss, #content .save-discuss *, #content .vote, #content .vote * { vertical-align: top; } #content .save-discuss ul, #content .save-discuss li, #content .vote p, #content .vote ul, #content .vote li { display: inline; } #content .save-discuss a, #content .vote a { display: inline-block; text-indent: -9999px; overflow: hidden; border-width: 0; } #content .save-discuss a { background: transparent url(/images/buttons/save.png) no-repeat; height: 19px; } #content .vote a { background: transparent url(/images/buttons/vote.png) no-repeat; height: 19px; width: 20px; } #content .save-discuss .discuss a { background-position: -437px 0; width: 60px; } #content .vote .Down a { background-position: -22px 0; } /* =Conversations (Library) ----------------------------------------------- */ .conversations .library { position: relative; margin-top: 10px; background: #efefef url(/images/conversations/dining-table.jpg) no-repeat 15px 15px; padding: 15px 15px 15px 515px; -moz-border-radius : 6px; -webkit-border-radius : 6px; border-radius : 6px; line-height: 1.55; } .conversations .library .branding img, .conversations .library .branding h3 { left: 70px; top: 30px; position: absolute; } .conversations .library .branding img { margin: 0; float: none; } .conversations .library .branding h2 { position: absolute; top: 34px; /* padding + 4 */ left: 147px; /* padding + image width + 11 */ margin: 0; background: transparent url(/images/conversations/logo.png) no-repeat; width: 251px; height: 74px; text-indent: -9999px; overflow: hidden; } .conversations .library .player { position: absolute; bottom: 15px; left: 15px; width: 480px; line-height: 1.55em; font-size: 11px; } .conversations .library .play-button { display: block; background: transparent url(/images/buttons/play-round.png) no-repeat; text-indent: -9999px; overflow: hidden; } .conversations .library .play-button:hover, .conversations .library .play-button:active { background-position: 0 -64px; border-width: 0 !important; } .conversations .library .audio-player .seconds .range-field .background { width: 290px; } .conversations .library .categories, .conversations .library .categories li { list-style: none; margin: 0; padding: 0; } .conversations .library .categories { font-family: Arial, Helvetica, sans-serif; overflow: hidden; margin: 1em 0; font-size: 0.6875em;; /* @11px */ } .conversations .library .categories li { display: block; float: left; } .conversations .library .inner { height: 228px; overflow-y: auto; overflow-x: hidden; /* Prevent a horizontal scrollbar, in IE7. */ padding-right: 10px; } .conversations .library .inner .date, .conversations .library .inner .duration { font-size: 0.6875em;; /* @11px */ } .conversations .library h4, .conversations .library h5, .conversations .library .description, .conversations .library ul { font-size: 0.75em; /* 12px */ } .conversations .library .inner p, .conversations .library .inner ul { margin-top: 0; } .conversations .library .inner .item { margin-top: 0.2em; border-top: 1px solid #c4c4c4; padding: 0.3em 0.5em 0.3em 18px; } .conversations .library .inner .item.clickable { cursor: pointer; } .conversations .library .inner .item.clickable:hover, .conversations .library .inner .item.clickable:active { background-color: #d9e5e8; } .conversations .library .inner .item.clickable:hover a, .conversations .library .inner .item.clickable:active a { border-bottom: 1px dotted; } .conversations .library .inner h4+.item { border-top-width: 0; } .conversations .library .inner h4 { margin-top: 0.2em; background-color: #95b7bf; color: #fff; padding: 2px 5px; } .conversations .library .inner h4:first-child { margin-top: 0; } .conversations .library .inner h5, .conversations .library .inner .date, .conversations .library .inner .duration { color: #666; float: left; } .conversations .library .inner .date, .conversations .library .inner .duration { margin-left: 0.75em; white-space: nowrap; font-family: Arial, Helvetica, sans-serif; } .conversations .library .inner .duration { padding-left: 0.75em; background: transparent url(/images/delimiters/steel.png) no-repeat left; } .conversations .library .inner ul, .conversations .library .inner .description { clear: both; } .conversations .library .inner ul, .conversations .library .inner li { list-style: none; padding-left: 0; margin-left: 0; } .conversations .library .inner li { display: inline; background: transparent url(/images/arrows/fern.png) no-repeat left; padding-left: 13px; margin-left: 10px; } .conversations .library .inner li:first-child { margin-left: 0; } #active-conversations-library-item { background: #e1e1e1 url(/images/arrows/mocha.png) no-repeat 5px 8px; cursor: default; } #active-conversations-library-item a { cursor: default; border-bottom: 1px dotted transparent; } .conversations .biographies { margin-top: 15px; position: relative; padding-left: 15px; width: 485px; } .conversations .biographies .description { margin-top: 1.55em; } .conversations .biographies .description .note { font-size: 0.9em; } .conversations .biographies .options { position: absolute; top: 4px; /* Attempt to line up with the date headline on the left. (line height - font size) / 2 */ right: -330px; width: 305px; } .conversations .biographies .options .save { margin-top: 0; margin-bottom: 0.75em; } .conversations .biographies .options .files { clear: both; padding-left: 2px; font-size: 0.92857142857143em; /* @13px */ } .conversations .biographies .options .files, .conversations .biographies .options .files li { list-style: none; margin-left: 0; } .conversations .biographies .options .files li { background: transparent url(/images/arrows/ocean.png) no-repeat left; padding-left: 10px; } .conversations .biographies .options p { margin-top: 3em; color: #565656; font-size: 0.9em; font-weight: bold; } .conversations .biographies .options ul { margin-top: 0.75em; } .conversations .biographies .options .note { margin-top: 0; color: #565656; font-weight: normal; font-size: 0.85714285714286em; /* @12px */ } #content .biographies .intro, #content .biographies .body{ font-size: 0.875em; /* @14px */ } #content .biographies footer .note { font-size: 0.75em; /* @12px */ } #content .biographies .intro, #content .biographies .body { margin-top: 1.4em; /* @line-height */ } #content .branding img, #content .biographies .body img { float: left; margin: 10px 7px 0 0; border: 1px solid #c6c6c6; padding: 2px; } #content .branding img { margin-top: 0; } #content .biographies .body img { margin-top: 5px; } /* =Audio Players ----------------------------------------------- */ .audio-player { font-family: Verdana, Arial, Helvetica, sans-serif !important; border: 1px solid #b9b9b9; background: #f0f1f1; background: -moz-linear-gradient(top, #fff, #f0f1f1); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f1f1)); padding: 3px; line-height: 18px; -moz-border-radius : 2px; white-space: nowrap; } /* Firefox only */ x:-moz-any-link, .audio-player { padding-top: 2px; } .audio-player p { margin-top: 0 !important; margin-left: 5px; display: inline-block; } .audio-player p:first-child { margin-left: 0; } .audio-player .mute, .audio-player .unmute { margin-left: 3px; } .audio-player .volume { margin-left: -1px; } .audio-player label > span:first-child { display: block; position: absolute; left: -9999px; } .audio-player .time { color: #666; font-size: 9px; line-height: 9px; position: relative; vertical-align: bottom; bottom: 4px; } .audio-player button { position: relative; display: inline-block; text-indent: -9999px; overflow: hidden; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; height: 18px; border-width: 0; padding: 0; cursor: pointer; } .audio-player .play button, .audio-player .pause button { background: transparent url(/images/buttons/play.png) no-repeat; width: 32px; } .audio-player .play button { background-position: 0 0; } .audio-player .play button:hover, .audio-player .play button:active { background-position: 0 -18px; } .audio-player .pause button { background-position: 0 -36px; } .audio-player .pause button:hover, .audio-player .pause button:active { background-position: 0 -54px; } .audio-player .mute { position: relative; } .audio-player .mute button, .audio-player .unmute button { background: transparent url(/images/buttons/mute.png) no-repeat; width: 18px; } .audio-player .unmute button { background-position: 0 -18px; } .audio-player .seconds, .audio-player .volume { display: inline-block; } .audio-player .range-field { position: relative; display: inline-block; height: 18px; vertical-align: bottom; border-width: 0 !important; } /* Firefox only */ x:-moz-any-link, .audio-player .range-field { bottom: -1px; } .audio-player .range-field .background { display: inline-block; float: none; height: 4px; width: 45px; background-color: #c8c9c8; vertical-align: bottom; position: relative; bottom: 7px; } .audio-player .range-field .indicator { display: block; height: 4px; background-color: #75a667; } /* =Forms ----------------------------------------------- */ form .error-message { margin-top: 1.4em !important; /* @line-height */ background-color: rgb(247, 234, 234); border: 1px solid rgb(226, 174, 173); padding: 1.5em !important; border-radius: 0.25em; } form .error-message h1 { color: rgb(196, 61, 58); font-size: 1em; background: transparent url(/images/shared/alert.png) 0 0 no-repeat; padding-left: 30px; margin-bottom: 1em; } form .error-message dt, form .error-message li { color: rgb(196, 61, 58); } form .error-message dt { font-weight: bold; } form .error-message dt, form .error-message dd { margin-left: 3.5em; padding-left: 0; } form .error-message dt { display: list-item; list-style: disc outside none; } form .error input[type="text"], form .error input[type="email"], form .error input[type="username"], form .error input[type="password"], form .error textarea { background: #fff5e6 !important; border-color: #cc9e80 !important; } input:-moz-placeholder { color: rgb(135, 135, 135) !important; text-transform: lowercase; } input::-webkit-input-placeholder { color: rgb(135, 135, 135); text-transform: lowercase; } /* For browsers that don’t support the placeholder attribute */ form .placeholder { color: rgb(135, 135, 135); margin: 0; display: block; position: absolute; top: 0.1em; left: 0; padding: 0.45em 0.5em; /* @input-padding */ font-style: normal; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 1; text-transform: lowercase; } /* .standard-form label br { display: none; } */ #content .main.payment form p, #content .main.account form p { font-size: 0.875em; /* @14px */ } .main.payment .credit { background: transparent url(/images/members/credit-113x26.png) no-repeat; background-image: url(/images/members/credit-113x26.svg), none; min-height: 26px; width: 113px; text-indent: -9999px; overflow: hidden; } .standard-form form:first-child { border-top-width: 0; margin-top: 0; padding-top: 0; } #free-form .text input { width:330px; } .standard-form { margin-top: 1.4em; /* @line-height */ } .standard-form .text input { /* display: block; float: right; */ border: 1px solid rgb(170, 170, 170); background: white; line-height: 1.125; border-radius: 0.25em; padding: 0.25em 4px; } .standard-form p { margin-top: 1em; } .hiddenFields+p, .hiddenFields+h3 { margin-top: 0; } .standard-form p.submit { margin-top: 1.5em; } .standard-form .required-note+p.text { margin-top: 1.4em; /* @line-height */ } .standard form button, .standard-form button { font-size: 1.14285714285714em; } .standard form .primary-action button, .standard-form .primary-action button { line-height: inherit; } .standard-form .noedit { font-weight: bold; color: rgb(30, 102, 147); /* @deep-blue */ } .standard form .required-note, .standard-form .required-note, .standard-form .disclosure, .login .disclosure { font-style: italic; color: rgb(100, 100, 100); max-width: 33em; } .standard form .required label > span:first-child { font-weight: bold; } .standard-form .required-note em, .standard form .required-note em, .standard-form .required em, .standard form .required em { color: #993c00; } .standard-form .image span { position: absolute; left: -99999px; } .standard-form .image img { border-radius: 2px; } .standard-form section.select { margin-top: 0.5em; } .standard-form section.select h6 { font-weight: inherit; font-family: inherit; font-size: inherit; } .standard-form section.select p { margin-top: 0; } .standard-form section.select p span { position: absolute; left: -9999px; } /* Use about half the normal amount of margin between paragraphs. */ .standard-form p.text, .standard-form p.select { margin-top: 0.5em; } .standard-form > section, .standard-form .file { margin: 1.55em 0; } /* Make minor options look a little smaller. */ .standard-form .forgot, .standard-form .checkbox { font-size: 12px; } /* Text Fields */ .standard-form .text input { width: 20em; width: 220px; } /* Position each label to the left of the field it belongs to. */ .standard-form .upload label > span:first-child, .standard-form .text label > span:first-child, .standard-form .select label > span:first-child, .standard-form section h6 { display: inline-block; width: 10em; /* IE7: Simulate "display:inline-block" */ *display: inline; *zoom: 1; } /* Hide the line-returns. */ .standard-form label br { display: none; } /* Adjust the width of the labels so they won't wrap. (These numbers are arbitrary.) */ .payment .text label > span:first-child, .payment .select label > span:first-child { width: 11em; } .account .upload label > span:first-child, .account .text label > span:first-child { width: 13em; } /* Attempt to make any fields that don't have labels line up with the fields that do. */ .standard-form p.auto-login, .standard-form p.submit, .standard-form p.checkbox, .standard-form label span.note { padding-left: 0.25em; margin-left: 10em; } .standard-form label span.note { display: block; padding-left: 0.35em; font-size: 0.85714285714286em; /* @12px */ margin-left: 11.6666666666667em; /* 140px (10em) */ } .standard-form p.submit, .standard-form p.checkbox { margin-top: 1em; } /* Adjust the width of the labels so they won't wrap. (These numbers are arbitrary.) */ .payment p.submit { margin-left: 11em; } .account p.submit { margin-left: 13em; } .standard form .text input { width: 20em; font-size: inherit; display: inline-block; } .standard form button { display: inline-block; } /* =Subscribe Tout ----------------------------------------------- */ .subscribe-tout { text-align: center; } .subscribe-tout.over-shoulder h1 { background: url(/images/over-shoulder/tout.png) center no-repeat; height: 96px; text-indent: -9999px; overflow: hidden; } .subscribe-tout.over-shoulder h2 { position: absolute; left: -9999px; } .subscribe-tout.yield-shark-tout h1 { background: url(/images/yield-shark/tout.png) center no-repeat; height: 82px; text-indent: -9999px; overflow: hidden; } .subscribe-tout h3 { margin-top: 1em; color: rgb(29, 100, 148); font-size: 1.125em; /* @18px */ } .subscribe-tout p { font-size: 0.9375em; /* @15px */ } .subscribe-tout ul { margin: 1.4em 0; } .subscribe-tout ul, .subscribe-tout li { list-style: none; margin-left: 0; padding-left: 0; } .subscribe-tout li { display: inline; margin-left: 0.25em; } .subscribe-tout li:first-child { margin-left: 0; } .subscribe-tout li a { min-width: 8em; } /* =Subscribe/Login Tout ----------------------------------------------- TODO: The Subscribe Tout CSS can be removed once this is in place. ----------------------------------------------- */ #modal.subscribe-login-tout .inner { //width: 630px; } .subscribe-login-tout h1 { margin: -35px -55px 0; padding: 0.75em 1em 0.5em; color: white; font-size: 0.9375em; /* @15px */ text-transform: uppercase; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 600; /* @semi-bold */ /* Data URI encoded from: clover.svg */ background: rgb(114, 160, 56) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMTQ0LCAxODgsIDg4KSIgLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMTE0LCAxNjAsIDU2KSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogPC9kZWZzPgogPGc+CiAgPHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIHN0cm9rZS13aWR0aD0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIC8+CiA8L2c+Cjwvc3ZnPgogICAg) top repeat-x; background-size: contain; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .subscribe-login-tout h1, .subscribe-login-tout h1 + p { text-align: center; } .subscribe-login-tout h1 + p { font-size: 0.9375em; /* @15px */ max-width: 550px; margin: 1em auto 0; color: rgb(51, 51, 51); } .subscribe-login-tout h2 { color: rgb(29, 100, 148); font-family: Arial, Helvetica, sans-serif; font-size: 1em; } .subscribe-login-tout h3 { margin-top: 1em; color: rgb(29, 100, 148); font-size: 1.125em; /* @18px */ } .subscribe-login-tout .group { margin-top: 1.4em; /* @line-height */ overflow: auto; } .subscribe-login-tout .group > section { margin-top: 0; width: 50%; float: left; -moz-box-sizing : border-box; box-sizing : border-box; } .subscribe-login-tout .signup { padding-right: 2em; } .subscribe-login-tout .signup-wide { padding-right: 0 !important; width:100% !important; float:none !important; text-align:center; } .subscribe-login-tout .signup-wide img{ margin:2.1em auto !important; } .subscribe-login-tout .signin { border-left: 1px solid rgb(225, 225, 225); /* @mithril */ padding-left: 2em; } .subscribe-login-tout .signup h2 + p { font-size: 0.875em; } .subscribe-login-tout .signup p img { display: block; margin: 2.1em 0; /* @line-height x 1.5 */ } .subscribe-login-tout .signup .secondary-action { text-align: center; } .subscribe-login-tout .signup .secondary-action a { padding-left: 2em; padding-right: 2em; } .subscribe-login-tout form p { margin-top: 1em; } /* KLUDGE: Reset standard form styles. */ .subscribe-login-tout form .auto-login, .subscribe-login-tout form .submit, .subscribe-login-tout form label span { display: block !important; width: auto !important; margin-left: 0 !important; padding-left: 0 !important; } .subscribe-login-tout form .submit { width: 220px !important; text-align: center; } .subscribe-login-tout form .submit button { padding: 0.55em 1.75em 0.35em; font-size: 1.14285714285714em; /* @16px */ } /* =Form (legacy) ----------------------------------------------- We should move these styles to .standard form ----------------------------------------------- */ #freeform .required-note em, #freeform .required em { color:#993c00; text-decoration:none; } #freeform textarea, #freeform .text input { border: 1px solid rgb(170, 170, 170); background: white; line-height: 1.125; border-radius: 2px; padding: 0.25em 4px; width: 330px; } #freeform label br { display:none; } #freeform p.text { margin-top:0.5em; overflow:auto; width:478px; } #freeform .required-note+p.text { margin-top:1.55em; } #freeform textarea, #freeform .text input { display:block; float:right; } #freeform label span { display:block; float:left; width:135px; } #freeform ul.submit, #freeform .submit li { list-style:none; margin-left:0; padding-left:0; } #freeform .submit li { display:inline; margin-left:1em; } #freeform .submit li:first-child { margin-left:0; } #freeform ul.submit, #freeform .submit, #freeform .checkbox { margin-left: 140px; } #freeform .submit { margin-top:2em; } #freeform label .note { margin-top:0.25em; } #freeform .error-message, #freeform label .note { display:block; width:310px; margin-left: 140px; } #freeform select { position:relative; left:3px; } #action-msg { -moz-box-shadow:0 2px 10px #333; -webkit-box-shadow:0 2px 10px #333; box-shadow:0 2px 10px #333; background:#fff; border:1px solid #333; color:#666; display:block; font-size:1.27em; font-weight:normal; opacity:0.95; padding:10px; position:absolute; text-align:center; width:350px; z-index:45; } /* =Modal Window ----------------------------------------------- */ #modal { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); } #modal.full-black { background: rgba(0, 0, 0, 1.0) !important; } #modal .inner { -webkit-box-shadow : rgba(0, 0, 0, 0.1) 0 0 15px; -moz-box-shadow : rgba(0, 0, 0, 0.1) 0 0 15px; -ms-box-shadow : rgba(0, 0, 0, 0.1) 0 0 15px; -o-box-shadow : rgba(0, 0, 0, 0.1) 0 0 15px; box-shadow : rgba(0, 0, 0, 0.1) 0 0 15px; border-radius: 10px; margin: 0 auto; position: relative; padding: 35px 55px; background-color: #fff; max-width: 530px; margin-top: 10px; } #modal .close { margin: 0; position: absolute; top: 1px; right: 1px; } #modal .close a { display: block; background: transparent url(/images/buttons/close.png) no-repeat; width: 29px; height: 29px; text-indent: -9999px; overflow: hidden; } #modal .close a:hover, #modal .close a:active { background-position: 0 -29px; } #modal .inner .standard-form { font-size: 0.875em; /* @14px */ } #modal .inner .standard-form h1 { margin-top: 0; font-size: 1.57142857142857em; /* @22px */ border-bottom: 1px dotted rgb(168, 168, 168); padding-bottom: 0.2em; } #modal .inner .standard-form h2 { margin-top: 1.4em; /* @line-height */ font-size: 1.28571428571429em; /* @18px */ } /* =Calendar ----------------------------------------------- */ #fc_calendar .event a { background-color:#f0f0f0; } .calendar-event-details { background-color:#fff; border:1px solid #999; padding:10px; -moz-box-shadow :rgba(0, 0, 0, 0.5) 0 0 10px; -webkit-box-shadow :rgba(0, 0, 0, 0.5) 0 0 10px; box-shadow :rgba(0, 0, 0, 0.5) 0 0 10px; } .calendar-event-details h5 { font-size: 0.8125em; } .calendar-event-details p { font-size: 0.8125em; } #fc_calendar { text-align:left; margin:0 auto; background:#ffffff; width:830px; padding-left:3px; padding-bottom:3px; font-size: 0.8125em; /* @13px */ } #fc_calendar table { border-collapse:collapse; } #fc_calendar #fc_inner td { border-width:2px 0 0 2px; border-style:solid; border-color:#fff; vertical-align:top; background:#f0f0f0; color:#000; } #fc_calendar #fc_inner td:first-child { border-left-width:0; } #fc_outer { width:830px; margin:0; padding:0; } #fc_inner { width:830px; } #fc_calendar .event { margin-top:0.55em; color:#010101; } #fc_calendar table table .event a { color:#2f6f87; text-decoration:none; background-color:transparent; display: block; } #fc_calendar .out_of_range { background-color:transparent; } #fc_calendar .out_of_range .date { display:none; } #fc_calendar .first_day { margin-left:0; } #fc_calendar .last_day { margin-right:0; } #fc_calendar .day_cell .index_difference_1 { margin-top:21px; } #fc_calendar .day_cell .index_difference_2 { margin-top:45px; } #fc_calendar .day_cell .date { font-weight:bold; color:#5a833c; font-size: 0.9em; padding:0; border:none; margin:0; } #fc_calendar .day_cell .date a { font-weight:bold; color:#5a833c; text-decoration:none; } #fc_calendar .day_cell .date .num { margin-right:5px; } #fc_calendar .day_cell .date a:hover { color:#000; text-decoration:underline; } #fc_calendar .out_of_range .date { background:transparent url(/themes/solspace_themes/calendar/img/pad_date.png) repeat-x; color:#999; } #fc_calendar .day_cell { width:106px; /* This is effectively a min-width. */ height:110px; /* This is effectively a min-height. */ background-color:#f0f0f0; padding:3px 5px; } #fc_calendar .today { background-color:#e0eaec !important; } #days_of_week th { padding:3px 0; color:#666; text-align:center; text-transform:uppercase; font-size: 0.9em; font-weight:bold; font-family: Arial, Helvetica, sans-serif; background:transparent url(/images/calendar/background_day.jpg) repeat-x 0 0; } #month_year th { padding:15px 0; color:#4d7836; text-align:center; font-size: 1.1em; font-weight:bold; font-family: Arial, Helvetica, sans-serif; } #month_year th img { padding:0 10px; } #month_year th a:hover { border:none; } #calendar-page a.arrow_left, #calendar-page a.arrow_right { display:inline-block; width:11px; height:15px; color:transparent; text-indent:-9999px; overflow:hidden; } #calendar-page a.arrow_left { background:transparent url(/images/calendar/arrow_left.gif) no-repeat 0 3px; } #calendar-page a.arrow_right { background:transparent url(/images/calendar/arrow_right.gif) no-repeat 0 3px; } #calendar-page a.arrow_left:hover { background:transparent url(/images/calendar/arrow_left_on.gif) no-repeat 0 3px; } #calendar-page a.arrow_right:hover { background:transparent url(/images/calendar/arrow_right_on.gif) no-repeat 0 3px; } #calendar-page h1 a, #calendar-page h1 a:hover { padding:0 0 0 5px; border:none; } /* =Site Map ----------------------------------------------- */ #sitemap { overflow: auto; padding-bottom: 2.8em; /* @line-height x 2 */ } #sitemap ul.col, #sitemap ul.col2 { width:300px; display:block; float:left; list-style:none; margin-top: 0; margin-left:0; padding-left:0; } #sitemap ul.col2 { position:absolute; left:300px; } #sitemap ul.col li, #sitemap ul.col2 li { margin-top: 1em; } #sitemap ul.col li li, #sitemap ul.col2 li li { margin-top: 0.35em; } #sitemap ul.col li:first-child, #sitemap ul.col2 li:first-child { margin-top: 0 !important; } #sitemap ul.col > li > a, #sitemap ul.col2 > li > a { font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: black; } #sitemap ul.col li ul, #sitemap ul.col2 li ul { margin-top:0; margin-left: 0; padding-left: 0; } #sitemap ul.col li ul li, #sitemap ul.col2 li ul li { font-weight:normal; margin-top:0; list-style-type:disc; margin-left: 1.5em; padding-left: 0; } /* =Books ----------------------------------------------- */ #books-page .item { padding: 18px 0 18px 200px; border-bottom: 1px solid rgb(225, 225, 225); /* @mithril */ position: relative; font-size: 0.875em; /* @14px */ min-height: 200px; /* Make enough room for the image. */ } #books-page .item .image { position: absolute; top: 20px; left: 25px; } #books-page .item .image+p { margin-top: 0.35em; /* @after-headline-margin */ } #books-page .image a img { border: 1px solid #ccc; } #books-page .image a:hover img { border: 1px solid #1e6693; } #books-page .section-intro { margin-top: 1em; } .about-subscription .section-intro .body, .about-subscription .section-description .body, #books-page .section-intro .body, #books-page .section-description .body { display: table-cell; width: 600px; padding: 0 20px 18px 0; } .about-subscription .preview, #books-page .section-intro .image { float: left; margin: 0 15px 0 0; } .about-subscription .preview { margin-bottom: 1em; } .about-subscription .section-intro .body .cite, .about-subscription .section-intro .body .text, #books-page .section-intro .body .action, #books-page .section-intro .body .price { margin: 1em 0 0 166px; } #books-page .body blockquote { color:#993c00; margin:0; } #books-page .section-intro .price { color:#900; margin:0.75em 0 0; } .about-subscription .pull-quote, #books-page .pull-quote { display: table-cell; height: 100%; padding-left: 15px; vertical-align: middle; width: 200px; font-size: 0.875em; /* @14px */ } .about-subscription .pull-quote blockquote p, #books-page .pull-quote blockquote p { padding-left: 30px; } #books-page .pull-quote .cite { margin-top: 1em; margin-left: 30px; } .about-subscription .pull-quote blockquote .left, .about-subscription .pull-quote blockquote .right, #books-page .pull-quote blockquote .left, #books-page .pull-quote blockquote .right { position: absolute; color: #d4d4d4; font-size: 80px; font-style: normal; } .about-subscription .pull-quote blockquote .left, #books-page .pull-quote blockquote .left { display: block; line-height: 1; top: -10px; left: -5px; } .about-subscription .pull-quote blockquote .right, #books-page .pull-quote blockquote .right { line-height: 0.8; } .about-subscription .section-description, #books-page .section-description { padding: 18px 0 0; } .about-subscription .section-intro .body, #books-page .section-intro .body { border-bottom: 1px solid rgb(225, 225, 225); /* @mithril */ } .about-subscription .section-intro .body, .about-subscription .section-description .body, #books-page .section-intro .body, #books-page .section-description .body { font-size: 0.9375em; /* @15px */ line-height: 1.5; } #books-page .section-description .body h2 { font-size: 1.25em; /* @20px */ } #books-page .section-intro h2 { font-size: 1em; } #books-page .section-intro h4.action { font-size: 1em; } #books-page .section-description p.action { margin: 0; } #books-page .quote blockquote { color: #000; } #books-page .section-intro .body .cite { margin-top:0.5em; } /*----------------------------------------------- Widescreen styles ----------------------------------------------- */ /* =Header ----------------------------------------------- */ #header .search { position: absolute; top:50px; right: 60px; } #header .subscribe { margin: 0; /* Data URI encoded from: deep-blue.svg */ background: rgb(59, 110, 134) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoOTIsIDE2MiwgMTk3KSIgLz4KICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2IoNTksIDExMCwgMTM0KSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogPC9kZWZzPgogPGc+CiAgPHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIHN0cm9rZS13aWR0aD0iMCIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIC8+CiA8L2c+Cjwvc3ZnPgogICAg) top repeat-x; background-size: contain; color: white; padding: 0.75em 1em 0.5em; position: absolute; top: 0; right: 1em; width: 190px; -moz-box-sizing : border-box; box-sizing : border-box; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 3px; -webkit-border-bottom-right-radius : 0.5em; -webkit-border-bottom-left-radius : 0.5em; -moz-border-radius-bottomright : 0.5em; -moz-border-radius-bottomleft : 0.5em; border-bottom-right-radius : 0.5em; border-bottom-left-radius : 0.5em; } #header .account { margin: 0; position: absolute; top:13px; right: 60px; } /* =Content ----------------------------------------------- */ #content .featured { margin-top: 0; background: rgb(86, 194, 224) url(/images/home/shark-photo.png) left no-repeat; background-image: url(/images/home/shark-photo.png), url(/images/home/ocean.svg), none; background-position: left, center; background-size: auto, cover; } #content .featured h1 { margin-left: 270px; /* Image replacement (optional) */ background: transparent url(/images/home/announcing-yield-shark.png) no-repeat; width: 432px; height: 52px; font-size: 0; color: transparent; } #content .featured .primary-action { margin-top: 0.5em; text-align: right; } #content .featured p { margin-left: 350px; } #content .group { /* border-width: 0 1px 0; border-style: solid; border-color: rgb(221, 221, 221); /* @dark-mercury */ overflow: auto; } #content .group .main { max-width: 75%; float: left; -moz-box-sizing : border-box; box-sizing : border-box; } #content .about { border-left: 1px solid rgb(221, 221, 221); /* @dark-mercury */ max-width: 25%; float: right; -moz-box-sizing : border-box; box-sizing : border-box; } /* Add a background image to the container, instead of a real border. (So it will look like the columns are the same height.) */ #content .group, #content.has-aside { background-image: url(/images/home/silver.svg), url(/images/home/mercury.svg); background-position: 75% 0, right; background-repeat: repeat-y, repeat-y; background-size: auto, 25% auto; background: white url(/images/home/mercury.png) right repeat-y\9; } #content.has-aside { background-position: 768px 0, right; background-size: auto, 230px auto; } #content .about, #content .aside { border-left-width: 0; background: transparent; } #content .articles, #content .about { margin-top: 0; } #content .articles section { margin-top: 0; width: 50%; -moz-box-sizing : border-box; box-sizing : border-box; float: left; } #content .articles section.item-1 { border-width: 0; } #content .articles section.item-2 { border-width: 0 0 0 1px; } #content .articles section.item-3 { border-width: 1px 0 0 1px; } /* Add a background image to the container, instead of a real border. (So it will look like the columns are the same height.) */ #content .articles { background: transparent url(/images/home/silver.svg) center repeat-y; } #content .articles section.item-2, #content .articles section.item-3 { border-left-width: 0; } #content .recent section { border-left: 1px solid rgb(221, 221, 221); /* @dark-mercury */ margin-top: 0; width: 33.333%; -moz-box-sizing : border-box; box-sizing : border-box; float: left; } #content .recent section:first-child { border-left-width: 0; } /* Add a background image to the container, instead of a real border. (So it will look like the columns are the same height.) */ #content .recent { width: 749px; overflow: auto; background-image: url(/images/home/silver.svg), url(/images/home/silver.svg), url(/images/home/241-241-241.png); background-position: 33.333% 0, 66.666% 0, 50% 7px; background-repeat: repeat-y, repeat-y, repeat-x; } #content .recent section { border-left-width: 0; } #content .recent section h2 { /* position: relative; z-index: -1; */ } #footer p, #footer ul { display: inline; } #footer p { display: inline-block; margin-top: 0.25em; } #footer .legal { margin-top: 0; display: inline-block; } #footer .social { margin-top: 0; float: right; } #footer a { text-decoration: none; } #footer a:hover, #footer a:active { text-decoration: underline; } /* =Text Manager ----------------------------------------------- */ body.medium #content { font-size: 1.15em; } body.large #content { font-size: 1.25em; } /* Maybe later… (This works, but may cause problems if Firefox or Opera support zoom on the future.) body.medium { zoom: 115%; -moz-transform: scale(1.15); -o-transform: scale(1.15); } body.large { zoom: 125%; -moz-transform: scale(1.25); -o-transform: scale(1.25); } */ /* =Confirmation ----------------------------------------------- */ /* KLUDGE: We should turn this table into a definition list. */ .main.confirmation table { font-family: inherit !important; font-size: inherit !important; } .main.confirmation td { width: auto !important; text-align: left !important; } .main.confirmation h1+div h3 { font-size: 0.9375em; /* @15px */ font-family: inherit; } .main.confirmation p, .main.confirmation dt, .main.confirmation dd, .main.confirmation th, .main.confirmation td { font-size: 0.875em; /* @14px */ } .main.confirmation section dl { margin-top: 0.7em; /* @line-height / 2 */ border-top: 1px solid rgb(221, 221, 221); /* @dark-mercury */ padding-top: 0.7em; /* @line-height / 2 */ overflow: auto; } .main.confirmation section h2+dl { margin-top: 0; border-top-width: 0; padding-top: 0; } .main.confirmation section dt, .main.confirmation section dd { margin-top: 0; } .main.confirmation section dt { float: left; font-weight: normal; } .main.confirmation section .product dd { margin-top: 1.4em; /* @line-height */ } .main.confirmation section dd { margin-left: 150px; } .main.confirmation section dd .discount { color: rgb(166, 31, 27); font-weight: normal; } /* Position “Billing” and “Credit” side by side. */ .main.confirmation .billing { float: left; width: 395px; } .main.confirmation .credit { margin-left: 415px; width: 395px; } .main.confirmation .summary { clear: both; padding-top: 2.4em !important; } /* Position “Order” and “Term” side by side. */ .main.confirmation .order { float: left; width: 395px; } .main.confirmation .term { margin-top: 0; padding-top: 0; border-width: 0; margin-left: 415px; width: 395px; } .main.confirmation .product { clear: both; } /* Position “Product” and “Total” on the right. */ .main.confirmation .product dd { margin-left: 565px; /* left-column.width + the usual margin (415 + 150) */ } .main.confirmation .total { padding-left: 415px; } /* =About Subscription ----------------------------------------------- */ .main.about-subscription .section-intro { margin-top: 1em; } .main.about-subscription .section-intro .banner { margin-bottom: 1em; } .main.about-subscription .body .preview+h2 { margin-top: 0; } .main.about-subscription .body h2 { font-size: 1.46666666666667em; /* @22px */ } .main.about-subscription .body h3 { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; /* @normal-weight */ font-size: 1.2em; /* @18px */ margin-bottom: 1.5em; } .main.about-subscription .body ul, .main.about-subscription .body li { list-style: none; margin-left: 0; padding-left: 0; } .main.about-subscription .body ul li { margin-top: 0.5em; background: transparent url(/images/order/checkmark.png) 20px 2px no-repeat; padding-left: 50px; } .main.about-subscription .body ul li:first-child { margin-top: 0; } .main.about-subscription .primary-action { margin: 1.4em 0; text-align: center; font-size: 1.06666666666667em; /* @16px */ font-size: 1.14285714285714em; /* @16px */ } .main.about-subscription .primary-action:last-child { margin-bottom: 0.7em; } /* =Conversations Signed Out ----------------------------------------------- */ #content .main.conversations-signed-out p { margin-top: 1em; font-size: 0.875em; /* @14px */ } /* =Color (Over My Shoulder) ----------------------------------------------- */ #content.over-shoulder .text-manager { margin-top: 77px; top: 0.5em; } #content.over-shoulder .main.article-list h1, #content.over-shoulder .main.article > header h2 { background: url(/images/order/over-shoulder.png) no-repeat; text-indent: -9999px; overflow: hidden; height: 77px; padding-bottom: 0.7em; } #content.over-shoulder.has-aside { background-image: url(/images/home/silver.svg), url(/images/over-shoulder/green.svg); } #content.over-shoulder .main.article h1, #content.over-shoulder .main.article-list section h2 a, #content.over-shoulder .main.article-list article h2 a { color: rgb(45, 90, 53); } #content.over-shoulder .main.article-list section h2 a:hover, #content.over-shoulder .main.article-list section h2 a:active, #content.over-shoulder .main.article-list article h2 a:hover, #content.over-shoulder .main.article-list article h2 a:active { color: rgb(128, 78, 32); } #content.over-shoulder .main a, #content.over-shoulder .aside a { color: rgb(128, 78, 32); } #content.over-shoulder .aside .article-list h2 { background: rgb(215, 225, 215) !important; color: rgb(41, 82, 47) !important; } /* =Color (Yield Shark) ----------------------------------------------- */ #content.yield-shark .text-manager { margin-top: 71px; top: 0.5em; } #content.yield-shark .main.article-list h1, #content.yield-shark .main.article > header h2 { background: url(/images/order/yield-shark.png) no-repeat; text-indent: -9999px; overflow: hidden; height: 71px; padding-bottom: 0.7em; } #content.bulls-eye .main.article-list h1, #content.bulls-eye .main.article > header h2 { background: url(/images/order/bulls-eye-investor.png) no-repeat; text-indent: -9999px; overflow: hidden; height: 71px; padding-bottom: 0.7em; } #content.just-one-trade .main.article-list h1, #content.just-one-trade .main.article > header h2 { background: url(/images/order/just-one-trade-header.png) no-repeat; text-indent: -9999px; overflow: hidden; height: 71px; padding-bottom: 0.7em; } #content.world-money-analyst .main.article-list h1, #content.world-money-analyst .main.article > header h2 { background: url(/images/order/world-money-analyst.png) no-repeat; text-indent: -9999px; overflow: hidden; height: 71px; padding-bottom: 0.7em; } #content.world-money-analyst2 .main.article-list h1, #content.world-money-analyst2 .main.article > header h2 { background: url(/images/order/world-money-analyst2.png) no-repeat; text-indent: -9999px; overflow: hidden; height: 71px; padding-bottom: 0.7em; } #content.trans-tech .main.article-list h1, #content.trans-tech .main.article > header h2 { background: url(/images/trans-tech/transtech_banner_lg.jpg) no-repeat; text-indent: -9999px; overflow: hidden; height: 71px; padding-bottom: 0.7em; } #content.rational-bear .main.article-list h1, #content.rational-bear .main.article > header h2 { background: url(/images/order/rational-bear.png) no-repeat; text-indent: -9999px; overflow: hidden; height: 71px; padding-bottom: 0.7em; } #content.yield-shark .byline, #content.yield-shark .byline a, #content.yield-shark .date { color: rgb(178, 102, 34) !important; } #content.yield-shark .byline a:hover, #content.yield-shark .byline a:active { text-decoration: underline; } #content.yield-shark.has-aside { background-image: url(/images/home/silver.svg), url(/images/yield-shark/orange.svg); } #content.yield-shark .main.article h1, #content.yield-shark .main.article .body h2, #content.yield-shark .main.article .body h3, #content.yield-shark .main.article-list section h2 a, #content.yield-shark .main.article-list article h2 a, #content.yield-shark .main.article-list section span { color: rgb(110, 26, 12); } #content.yield-shark .main.article-list section span { font-style:italic; font-weight:bold; } #content.yield-shark .main.article-list section h2 a:hover, #content.yield-shark .main.article-list section h2 a:active, #content.yield-shark .main.article-list article h2 a:hover, #content.yield-shark .main.article-list article h2 a:active { color: rgb(178, 102, 34); } #content.yield-shark .main a, #content.yield-shark .aside a { color: rgb(178, 102, 34); } #content.yield-shark .aside .article-list h2 { background: rgb(242, 228, 215) !important; color: rgb(110, 26, 12) !important; } /* NEW SUBSCRIBE STYLES */ #header .subscribe { padding:0.75em 1em; } #header .subscribe a { display:block; width:151px; height:18px; text-indent:-9999px; background:url(/images/buttons/header-subs.png) } #header .subscribe a:hover { background-position:0 -18px; } p.secondary-action a.button { display:inline-block; font-family:"TitilliumXBold",Helvetica,Arial,sans-serif; font-size:1em; font-weight:bold; text-align:center; text-decoration:none; color:rgb(67, 124, 153); padding:0.2em 0.75em; border:1px solid rgb(225, 225, 225); /* @mithril */ /* Data URI encoded from: mercury.svg */ background:rgb(225, 225, 225) url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZ2IoMjU1LCAyNTUsIDI1NSkiIC8+CiAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0icmdiKDIyNSwgMjI1LCAyMjUpIiAvPgogIDwvbGluZWFyR3JhZGllbnQ+CiA8L2RlZnM+CiA8Zz4KICA8cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgc3Ryb2tlLXdpZHRoPSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgLz4KIDwvZz4KPC9zdmc+CiAgICA=) top repeat-x; background-size:contain; } .email-only { display: none; } /* Homepage */ div#home-hero img{ display:block; } div#banner div{ background-color:#F0F0F0; padding-bottom:0.3em; } div#home-banner-main-top { margin:10px 0 0 20px; position:relative; } div#home-banner-main-top-title { color:#fff; position:absolute; bottom:11px; background: rgba(0, 0, 0, 0.5) !important; min-height:40px; width:100%; float:left; } div#home-banner-main-top-title p{ padding:0 1em; margin:0; font-style:normal !important; font-weight:bold; } div#home-banner-main-top-title p.author{ font-size:0.8em !important; font-style:italic !important; font-weight:normal !important; } div#home-banner-main-top-title p.author{ font-size:0.8em !important; } div#home-banner-main-top-title p a{ color:#fff; } div#home-banner-main-top-title p a:hover{ color:#fff; } div#home-banner-main-top-right { margin:10px 20px 0 0; } div.site-margin { padding:0 20px; } #home-lead-stories-wrapper { background-color:#f0f0f0; padding:0px; font-family:Arial, Helvetica, sans-serif; } #home-lead-stories-wrapper .site-margin { display: -webkit-flex; display: flex; } #home-lead-stories-wrapper img{ margin:auto; border:0; } .home-lead-story { background-color:#e4e4e4; margin-top: 0; padding:0px; margin-bottom:1em; flex: 1; } .home-lead-story img{ margin:auto; border:0; } .home-lead-story div{ padding:20px; } .home-lead-story div p { margin-top: 0; line-height:120%; margin-bottom:0.5em; font-size:0.8em; } p.author { font-size:0.7em !important; font-style:italic; } span.article-time { color:#999; } /* Home Editorial Articles */ #home-editorial-stories-wrapper { background-color:#F0F0F0; padding:10px 0px; font-family:Arial, Helvetica, sans-serif; } .home-editorial-header { background-color: #fff; padding: 0; } .home-editorial-header h1 { color: #6fa12f; font-size: 1.4em; font-weight:normal; font-family: Arial, Helvetica; margin:0; padding-top:10px; } .home-editorial-header h1 span { float:right; font-size:15px; } #home-editorial-stories-wrapper img{ margin:auto; border:0; } #home-editorial-stories-wrapper .site-margin { display: -webkit-flex; display: flex; } #home-editorial-stories-wrapper .home-lead-story { background-color:#E4E4E4; margin-top: 0; padding:0px; margin-bottom:1em; flex: 1; } div.default-column { padding:15px 20px; line-height:120%; font-size:0.9em; } div.default-column .image-right{ float:right; margin:0 0 1em 1em; } div.default-column h1 { color:#6fa12f; font-size:1.5em; } div.default-column p { margin-top:1em; } /* ----- RIGHT BAR ------ */ .home-videobar { margin-top:1.5em; margin-right:20px; padding:1em 20px; background-color:#f0f0f0; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; font-size:0.9em; } .home-videobar h1{ font-size:1.5em; } .home-videobar h2{ margin-top:0em; font-size:1.2em; } #navigation ul { margin-top:0 } .home-videobar hr { margin:1em 0 0.2em 0; height:1px; background:none !important; border:0 !important; border-bottom:1px dotted #bbb !important; } .home-videobar p{ line-height:120%; } .home-videobar .videos { margin:0 !important; } .home-videobar .videos .slideshow { border: 0; border-radius: 6px 6px 6px 6px; padding: 10px 0px 0 30px; position: relative; margin:0 !important; } .home-videobar .videos .slideshow .item { margin-right: 15px !important; } .home-videobar .videos .slideshow .item img { width:100%; height:auto; } .home-videobar .videos .slideshow .item a { border-width: 0 !important; display: block; font-family: Arial,Helvetica,sans-serif; line-height: normal; padding: 5px !important; width: 85px; } .home-videobar .videos .slideshow li.previous { left: 0px; margin-top: 0; position: absolute; } .home-videobar .videos .slideshow li.next { margin-top: 0; position: absolute; right: 0px; } /* Publications */ .home-publication { background-color:#696969; margin-top: 2em; padding:0px; margin-bottom:1em; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; min-height:310px; } .home-publication img{ border:0; margin: -30px 0 0 20%; } .home-publication h2{ color:#fff; padding:0 0.7em; font-size:1.2em; margin:0; } .home-publication p{ color:#fff; padding:1em; font-size:0.9em; margin:0 !important; } .home-publication p a{ color:#fff; font-weight:bold; } .home-publication div{ padding:20px; } .home-publication div p { margin-top: 0; line-height:120%; margin-bottom:0.5em; font-size:0.8em; } /* Mauldin Circle */ div#mauldin-circle-wrapper h1 { color:#b2b2b2; text-align:center; font-weight:bold; margin:3em 0 0 0; } div#mauldin-circle-box { background-color:#f2f0e9; margin-top: 0.5em; padding:1em; margin-bottom:1em; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; } div#mauldin-circle-box h2{ color:#333; padding:0 0.7em; font-size:1.2em; margin:0; } div#mauldin-circle-box p{ color:#333; padding:1em; font-size:0.9em; margin:0 !important; } div#mauldin-circle-box img{ float:left; margin:0 1em 0 0; } /* ------- TTA Alert/Monthly/Weekly Icons ---------- */ img.tta-icon { position:relative; top:3px; } form#_cof_ajax_form { display:none; } /* Resources Section ----------------------------------------------- */ #content .main.general .body, #content .main.article.blog .body { font-size:1em; } #content .main.general .body, #content .main.article.blog .body h1 { font-size:2em; } #content .main.general .body, #content .main.article.blog .body h2 { font-size:1.5em; } #content .main.general .body, #content .main.article.blog .body h3 { font-size:1.06em; } #content .main.general .body, #content .main.article.blog .body h4 { font-size:1em; } #content .main.general .body, #content .main.article.blog .body h5 { font-size:0.813em; } div.g-recaptcha { transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: scale(.9); -webkit-transform: scale(.9); } /* OPT-IN BOXES - FREE ARTICLES */ .article .optin-footerbox { background-color: #F6F9F5; font-size: 0.9em; margin: 0 auto; padding: 20px 10px; } .article .optin-footerbox, p { margin-bottom:1em; } .article .optin-footerbox h2 { font-size: 24px; text-align: center; margin-top:10px; } .article .optin-footerbox.tftf img { margin-top:-50px; } .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .article .optin-footerbox .button { background-color: #dd6b20; background-image: none; border: medium none; color: #fff; cursor: pointer; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.6; margin-bottom: 0; min-width: 270px; padding: 9px 13px; text-align: center; text-transform: uppercase; transition: background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s; vertical-align: middle; white-space: nowrap; } .article .optin-footerbox .footer-email { background: #fff url("/images/transformational-technologies/shared/email-field-icon.png") no-repeat scroll 5px 50%; border: 1px solid #aaa; border-radius: 2px; box-shadow: 0 0 3px #aaa; font-size: 1em; padding: 10px 0 10px 3em; transition: padding 0.25s ease 0s; width: 380px; margin-top:3px; position:relative; top:3px; } .article .footertriangle { margin: 0px; padding: 0px; position: relative; top:0px; } .article .footertriangle:after { content: ""; position: absolute; top: 100%; left: 50%; border-top: 20px solid blue; border-top-color: inherit; border-left: 20px solid transparent; border-right: 20px solid transparent; } /* /* CFA/HAA Footer */ div.cfa-haa-footer { text-align:center; } div.cfa-haa-footer img { display:block; margin:0 auto; } div.cfa-haa-footer .cfa { float:left; width:40%; } div.cfa-haa-footer .haa { width:40%; margin:auto; } div.cfa-haa-footer p { font-size:0.75em; line-height:130%; } /* ADDTHIS */ div.addthistopright { float:right; margin:5px 0 10px 20px; } /* _______________________________ Mobile version - preset code from cssgrid.net 480px */ @media handheld, only screen and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 759px), only screen and (-webkit-min-device-pixel-ratio: 3) { .examplecontainer {} body {} body.has-background { background-attachment: scroll; background-clip: border-box; background: #D6E4E3; background-origin: padding-box; background-size: auto auto; } #header, #content, #footer { width:100%; margin: 0 auto; } /* Popup -------------------------------------------------------- */ #fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap { display:none; } /* ----- Navigation ------- */ #header { width:100%; position: fixed; top:0; left:0; z-index:200; background:#2F2F2F; height:40px; border-bottom:0; -webkit-box-shadow: 0px 0px 8px 2px #999; -moz-box-shadow: 0px 0px 8px 2px #999; box-shadow: 0px 0px 8px 2px #999; } /* ----- Navigation ------- */ #navigation { width:100%; position: fixed; top:0; left:0px; z-index:100; } /* Navigation Button -------------------------------------------------------- */ .nav-button { display: block !important; position: absolute !important; top: 7px !important; left: 7px !important; width: 50px !important; height: 35px !important; background: url('/images/buttons/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background: url('/images/buttons/menu-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background: url('/images/buttons/menu-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background: url('/images/buttons/menu-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: 21px, 100% !important; cursor: pointer !important; border: 0 none !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 0 4px rgba(0,0,0,.7) inset !important; border-radius: 5px !important; z-index: 999 !important; text-indent: -9999px !important; } .nav-button:hover { background-color: rgba(0,0,0,.1) !important; } .nav-button.open { background: url('/images/buttons/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background: url('/images/buttons/close-icon-large.png'), -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background: url('/images/buttons/close-icon-large.png'), -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background: url('/images/buttons/close-icon-large.png'), -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: 21px, 100% !important; } /* Navigation Bar -------------------------------------------------------- */ body { padding-top: 0px !important; } #navigation li ul { width:100% !important;/* leaves room for padding */ cursor:default; position:relative; display:block; background: #dcdcdc url(/images/uploads/dp/clear.gif);/* trick to keep'em open */ z-index:888; height:auto; overflow:hidden; text-align:left; margin-top:0px; padding:1em; -moz-border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -khtml-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -khtml-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } .primary-nav { width: 100% !important; float: none !important; background-color: #2F2F2F !important; /* change the menu color */ background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2)) !important; display: block !important; height: 50px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-shadow: 0 1px 2px rgba(0,0,0,.6) !important; position: absolute !important; top: 0px !important; left: 0px !important; z-index: 998 !important; clear: both !important; } .primary-nav li { display: none !important; width: 100% !important; font-family: Arial !important; } .primary-nav li a { display: block !important; width: 90% !important; padding: 10px 5% !important; font-size: 14px !important; font-weight: bold !important; text-shadow: -1px -1px 0 rgba(0,0,0,.15) !important; color: white !important; text-decoration: none !important; border-bottom: 1px solid rgba(0,0,0,.2) !important; border-top: 1px solid rgba(255,255,255,.1) !important; } .primary-nav li a:hover { background-color: #797979 !important; border-top-color: transparent !important; } .primary-nav > li:first-child { border-top: 1px solid rgba(0,0,0,.2) !important; } /* Toggle the navigation bar open */ .primary-nav.open { height: auto !important; padding-top: 50px !important; } .primary-nav.open li { display: block !important; } #header nav li:last-child a { border-top-right-radius: 0em; } /* Submenus – optional .parent class indicates dropdowns */ .primary-nav > li:hover > a { background: #797979 !important; border-bottom-color: transparent !important; } .primary-nav li.parent > a:after { /*content: "â–¼" !important; */ color: rgba(255,255,255,.5) !important; float: right !important; } .primary-nav li.parent > a:hover { background: #797979 !important; } .primary-nav li ul { display: none !important; background: rgba(0,0,0,.5) !important; border-top: 0 none !important; padding: 0 !important; } .primary-nav li ul a { border: 0 none !important; font-size: 12px !important; padding: 10px 5% !important; font-weight: normal !important; } .primary-nav li:hover ul { display: block !important; border-top: 0 none !important; } #header nav li:first-child a { border-top-left-radius: 0em; } .primary-nav li.parent > ul { display:block; } .dropdown_4columns { display: none !important; position:relative; top:0 !important; margin-top:0px; margin-left:0px; float:none !important; } .dropdown_1column {width: 100%;} .dropdown_2columns {width: 100%;} .dropdown_3columns {width: 100%;} .dropdown_4columns {width: 100%;} .dropdown_5columns {width: 100%;} .column_1, .column_2, .column_3, .column_4, .column_5 { display:block; float:none; position: relative; } .column_1 {width:100%;} .column_2 {width:100%;} .column_3 {width:100%;} .column_4 {width:100%;} .column_5 {width:100%;} #header nav .resources .dropdown_4columns a { width: 100%; } /* ----- END Navigation ------- */ /* ----- Logo ------- */ #header .branding { background: none !important; width:50%; } #header .branding h2 { padding:0; position:fixed !important; right:1em !important; /* top:-0.45em !important; */ top:0; z-index: 2000 !important; } #header .branding h2 a { background: url("/images/shared/branding/mauldin-economics.png") no-repeat right; background-size: 70% auto; color: transparent; } p.tagline { display:none !important; } #header nav li { } #header .subscribe { display:none; } #header .account { display:none; } #header .search { display:none; } #header nav .mobile-only { display:inline; } div#home-hero { margin-top:120px; margin-bottom:0 !important; background-color: #F0F0F0; padding-top: 20px; padding-bottom: 20px; } #content { margin-top:50px; } #content .articles, #content .recent { background-image: none !important; background: none !important; } #content .articles section { padding: 1em; /* @line-height */ } div#home-banner-main-top { margin-left:0px; } div#home-banner-main-top-right { margin-right:0; } div#home-banner-main-top-right img{ width:100% !important; height:auto !important; } /* ---------- Video ------------ */ div.home-videobar { margin-right:0px; font-size:2em; } div.home-videobar .inner .fp-video div { width:100% !important; max-width:100% !important; } div.home-videobar .inner .fp-video object { width:100% !important; } .videos { width:100% !important; } div.home-videobar .slideshow { width:100% !important; } div.home-videobar .outer { width:100% !important; } /* Hide video for mobile */ div.home-videobar { display:none; } div.default-column .image-right { } div.default-column .image-right img{ max-width:20% !important; } #footer { width:100%; } #home-lead-stories-wrapper .site-margin { display: block !important; } #home-lead-stories-wrapper .home-lead-story { display: block !important; } #home-editorial-stories-wrapper .site-margin { display: block !important; } #home-editorial-stories-wrapper .home-lead-story { display: block !important; } .home-editorial-header { margin:-15px auto !important; } #lead-story4 { margin-bottom:0; } } /* _______________________________ Provide higher res assets for iPhone 4 - preset code from cssgrid.net */ @media only screen and (max-device-width: 959px) and (-webkit-min-device-pixel-ratio: 2) { /* An example of how to override an image with one twice the size for iPhone 4. Specify the original pixel size with background-size. .download { background: url(../img/downarrow@2x.png) no-repeat; background-size: 27px 28px; } */ #header { -webkit-box-shadow : rgba(0, 0, 0, 0.15) 0 15px 17px; } #header .branding h2 a { /* ipad air issue webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height:80px; width:311px; */ margin-top:0px; } #content { /* ipad air issue margin-top:120px; */ } /* ----- Navigation ------- */ #navigation { width:100%; /* ipad air issue position: fixed; */ top:0; left:0px; z-index:100; } /* Navigation Button -------------------------------------------------------- */ .nav-button { top: 6px !important; left: 10px !important; width: 40px !important; height: 40px !important; background-size: 44px, 90% !important; } .nav-button.open { background-size: 80px, 100% !important; } /* Navigation Bar -------------------------------------------------------- */ .primary-nav { /* ipad air issue height: 120px !important; */ } .primary-nav li a { /* ipad air issue font-size: 3.5em !important; padding:0.6em !important; */ } /* Toggle the navigation bar open */ .primary-nav.open { padding-top: 120px !important; } #navigation ul li a{ margin-right:0 !important; padding-right:0 !important; display:block !important; width:100% !important; } } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { .home-publication { min-height: 330px !important; } } @media only screen and (max-width: 480px) { #banner.container { margin-top:40px; padding-top:10px; } .hidden-mob { display:none; } #content .main.article, #content .main.article-list, #content .subscription-list { width: 93% !important; max-width:100%; padding-right:20px; margin-left:10px; } #content .main.article img, #content .main.article-list img, #content .subscription-list img{ max-width: 93% !important; height:auto !important; } /*#header .branding h2 a { padding-top:20px; }*/ .text-manager { display:none; } .hidden-mobile, .hidden-mob { display:none !important; } #content .comment img { display:none; } #content .aside .connect { border:0; } #content .aside { float: none; width: 100%; } #content.has-aside { background-image:none; } #home-lead-stories-wrapper .site-margin { display: block !important; font-size:18px; } #home-lead-stories-wrapper .home-lead-story { display: block !important; } #home-editorial-stories-wrapper .site-margin { display: block !important; } #home-editorial-stories-wrapper .home-lead-story { display: block !important; } .home-editorial-header { margin:-15px auto !important; } #lead-story4 { margin-bottom:0; } #content.mauldin-economics .main.about-us, #content.john-mauldin .main.about-us { width:95%; /* 600 - 15 */ } #content .main.about-us { margin-left:10px; width:95% !important; } .article .optin-footerbox.tftf img { margin-top:-30px; } #home-lead-stories-wrapper p, #home-editorial-stories-wrapper p { font-size:20px !important; } #home-lead-stories-wrapper p, #home-editorial-stories-wrapper p.author { font-size:18px !important; } #home-lead-stories-wrapper img, #home-editorial-stories-wrapper img { width:100% !important; height:auto; margin-bottom:0; } div#home-banner-main-top-title p { font-size:20px !important; } div#home-banner-main-top-title p.author { font-size:18px !important; } div.home-lead-story img { float: none !important; margin: 0 0 1em 0 !important; } div.home-about-john p { font-size:18px; } #home-publications-wrapper p { font-size:18px; } #home-publications-wrapper .home-publication p { font-size:18px; } #home-publications-wrapper { padding-left:0; padding-right:0; } .home-publication h2 { font-size:0.9em; display:block; } div.default-column h1 { font-size:1em; } #content .resources .premium ul, #content .resources .free .secondary-action, #content .resources .partners .secondary-action { position: relative; } #content .resources .image { position: relative; width: 100%; height: 100px; } #content .resources .free section, #content .resources .premium section, #content .resources .partners section { padding-left: 10px; padding-right: 10px; } #content .resources .premium ul, #content .resources .free .secondary-action, #content .resources .partners .secondary-action { position: relative; top: 0; right: 0; left: 0; margin:auto; } #content .resources .premium ul { margin-top: 1em; } #content .resources .premium li, #content .resources .free .secondary-action, #content .resources .partners .secondary-action { width: 100%; } #content .resources h3 { margin:auto; text-align:center; } } @media screen and (max-width: 767px) { .subscribe-login-tout .group > section { width: 100%; float:none; } .subscribe-login-tout .signup{display:none} .subscribe-login-tout .signin{border-left: 0px solid rgb(225, 225, 225);padding-left:0em;} #modal .inner { padding: 25px 25px; } } #ouibounce-modal{z-index:60}