/* STYLESHEET COMPILED USING SASS 3.2.1 CSS files should not be edited directly, as those edits will be overridden next time SASS is compiled. SOURCE FILES index.scss -> index.css.css index-desktop.scss -> index-desktop.css.css */ /* ---------------------------------------------------------- Client Name CSS Managed by: Blue State Digital TABLE OF CONTENT 01 - HTML5 Boilerplate 02 - COMMON STYLES 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - SIDEBAR 07 - FRAMEWORK 08 - UTILITY 09 - PRINT COLOR GUIDE (Main Site Colors and their Hex Codes) ---------------------------------------------------------- */ /* 01 =HTML5 Boilerplate ------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /* end HTML5 Boilerplate reset */ /* HTML5 boilerplate base styles */ html { overflow-y: scroll; } body { font: 13px/1.231 sans-serif; *font-size: small; } select, input, textarea, button { font: 99% sans-serif; } pre, code, kbd, samp { font-family: monospace, sans-serif; } ul, ol { list-style-type: none; } small { font-size: 85%; } b, strong, th { font-weight: bold; } i, em { font-style: italic; } td, td img { vertical-align: top; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } pre { padding: 15px; white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } textarea { overflow: auto; } .ie6 legend, .ie7 legend { margin-left: -7px; } input[type="radio"] { vertical-align: text-bottom; } input[type="checkbox"] { vertical-align: bottom; } .ie7 input[type="checkbox"] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; } .ie7 img { -ms-interpolation-mode: bicubic; } label, input[type=button], input[type=submit], button { cursor: pointer; } button, input, select, textarea { margin: 0; } button { width: auto; overflow: visible; } /* end HTML5 boilerplate base styles */ /* BSD base styles */ caption, th { text-align: left; } /* 02 =COMMON STYLES ------------------------- */ body { font-size: 15px; font-family: "futura-pt", sans-serif; } select, input, textarea { color: #444; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } h1, h2, h3 { font-weight: normal; font-family: "Sue Ellen Francisco", cursive; text-transform: uppercase; } .base h1 { font-size: 28px; } .base h2 { font-size: 24px; } .base h3 { font-size: 20px; } .base h4 { font-size: 18px; } .base p { margin-bottom: 15px; } a:hover, a:active { outline: none; } a, a:active, a:visited { color: #607890; text-decoration: none; } a:hover, a:focus { color: #036; } a:link { -webkit-tap-highlight-color: #FF5E99; } blockquote { font-size: 36px; font-family: "Sue Ellen Francisco", cursive; font-weight: normal; line-height: 1.5; text-align: center; padding: 20px 0 40px; margin: 20px 0 10px; background: url(/page/-/esjt/images/static/blockquote-top.png) center top no-repeat, url(/page/-/esjt/images/static/blockquote-bottom.png) center bottom no-repeat; color: #303030; } .base ul, .base ol { margin-left: 1.8em; margin-bottom: 15px; } .base ul li { list-style: disc; } .base ol li { list-style: decimal; } .base li ol { margin-bottom: 0; } .base li ul { margin-bottom: 0; } #codeigniter_profiler { display: none; } #codeigniter_profiler + div { display: none; } /* 03 =LAYOUT ------------------------- */ body { background: #e7e7e7 url(/page/-/esjt/images/static/body-bg.png) 0 0 repeat; } .fixed { width: 960px; position: relative; margin: 0 auto; } header { background: #fff; } #navigation { background: #000; border-top: 4px solid #FFF; padding-bottom: 5px; position: relative; z-index: 5; } #navigation .ap-logo { width: 200px; height: 50px; background: transparent url(/page/-/esjt/images/static/header-ap-logo.png) 0 0 no-repeat; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display: block; position: relative; left: -11px; } #navigation .ap-invisible-link { position: absolute; top: 250px; left: 160px; width: 298px; height: 23px; } #navigation #main-nav { font-family: "Sue Ellen Francisco", cursive; font-size: 20px; text-transform: uppercase; position: absolute; top: 16px; left: 200px; width: 800px; } #navigation #main-nav li { display: block; float: left; position: relative; margin-right: 30px; cursor: pointer; } #navigation #main-nav li a { display: block; color: #FFF; position: relative; z-index: 5; } #navigation #main-nav li a:hover { color: #fdd103; } #navigation #main-nav li.node_partner-portal > a, #navigation #main-nav li.node_donate > a { background: #393939; padding: 8px 10px 3px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-size: 16px; position: relative; top: -5px; } #navigation #main-nav li.node_donate > a { background: #fdd103; color: #000; margin-right: 0; } #navigation #main-nav li.node_donate > a:hover { background: #FFF; } #navigation #main-nav li:hover ul, #navigation #main-nav li a:hover + ul { display: block; } #navigation #main-nav li ul { display: none; position: absolute; z-index: 3; top: 0; width: 180px; margin-left: -90px; padding-top: 50px; left: 50%; font-family: "futura-pt", sans-serif; font-weight: bold; background: transparent; font-size: 13px; text-transform: none; } #navigation #main-nav li ul:before { content: ""; position: absolute; left: 50%; width: 0; height: 0; top: 42px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid black; margin-left: -8px; } #navigation #main-nav li ul li { display: block; float: none; margin: 0; } #navigation #main-nav li ul li a { float: none; background: black; padding: 15px 15px 0; margin: 0; } #navigation #main-nav li ul li.first_child a { -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #navigation #main-nav li ul li.last_child a { padding-bottom: 15px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #navigation #main-nav li ul li.first_child.last_child a { -webkit-border-radius: 8px; border-radius: 8px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #connect { position: relative; z-index: 4; } #connect #quick-signup { padding: 8px 0; } #connect #quick-signup label { visibility: hidden; left: -9999%; position: absolute; } #connect #quick-signup input { margin-right: 5px; } #connect #quick-signup input#quick-zip { width: 70px; } #connect #quick-signup input#quick-email { width: 200px; } #connect .social { position: absolute; right: 0; top: 11px; } #connect .social li { width: 100px; float: left; overflow: hidden; } #logo { padding: 20px 0; position: relative; z-index: 1; height: 143px; } #logo a { width: 483px; height: 147px; display: block; background: url(/page/-/esjt/images/static/esjt-logo.png) 0 0 no-repeat; } #logo .header-image { position: absolute; right: 0; bottom: -16px; background: transparent url() 0 0 no-repeat; } body.blue-theme #connect { background-color: #1c89bb; background-position: 0 0; background-repeat: repeat-x; background-image: url("/page/-/images/esjt/static/connect-bg.png"); background-image: -webkit-gradient(linear, left top, left bottom, from(#167195), to(#1c89bb)); background-image: -webkit-linear-gradient(top, #167195, #1c89bb); background-image: -moz-linear-gradient(top, #167195, #1c89bb); background-image: -o-linear-gradient(top, #167195, #1c89bb); background-image: linear-gradient(to bottom, #167195, #1c89bb); box-shadow: 0 2px 5px #1774a4; } body.blue-theme #logo { background: #2098d1 url(/page/-/esjt/images/static/header-bg-blue.png) center 0 repeat; } body.blue-theme #logo .header-image { background-image: url(/page/-/esjt/images/static/header-image-backpack.png); width: 427px; height: 191px; } body.red-theme #connect { background-color: #bd3600; background-position: 0 0; background-repeat: repeat-x; background-image: url("/page/-/images/esjt/static/connect-bg.png"); background-image: -webkit-gradient(linear, left top, left bottom, from(#b23400), to(#bd3600)); background-image: -webkit-linear-gradient(top, #b23400, #bd3600); background-image: -moz-linear-gradient(top, #b23400, #bd3600); background-image: -o-linear-gradient(top, #b23400, #bd3600); background-image: linear-gradient(to bottom, #b23400, #bd3600); box-shadow: 0 2px 5px #59190a; } body.red-theme #logo { background: #bd3600 url(/page/-/esjt/images/static/header-bg-red.png) center 0 repeat; } body.red-theme #logo .header-image { background-image: url(/page/-/esjt/images/static/header-image-books.png); width: 383px; height: 211px; } body.green-theme #connect { background-color: #2ab8a3; background-position: 0 0; background-repeat: repeat-x; background-image: url("/page/-/images/esjt/static/connect-bg.png"); background-image: -webkit-gradient(linear, left top, left bottom, from(#1f8f7f), to(#2ab8a3)); background-image: -webkit-linear-gradient(top, #1f8f7f, #2ab8a3); background-image: -moz-linear-gradient(top, #1f8f7f, #2ab8a3); background-image: -o-linear-gradient(top, #1f8f7f, #2ab8a3); background-image: linear-gradient(to bottom, #1f8f7f, #2ab8a3); box-shadow: 0 2px 5px #239f8d; } body.green-theme #logo { background: #2ab8a3 url(/page/-/esjt/images/static/header-bg-green.png) center 0 repeat; } body.green-theme #logo .header-image { background-image: url(/page/-/esjt/images/static/header-image-girl.png); width: 388px; height: 183px; } body.pink-theme #connect { background-color: #ba0832; background-position: 0 0; background-repeat: repeat-x; background-image: url("/page/-/images/esjt/static/connect-bg.png"); background-image: -webkit-gradient(linear, left top, left bottom, from(#a8062e), to(#ba0832)); background-image: -webkit-linear-gradient(top, #a8062e, #ba0832); background-image: -moz-linear-gradient(top, #a8062e, #ba0832); background-image: -o-linear-gradient(top, #a8062e, #ba0832); background-image: linear-gradient(to bottom, #a8062e, #ba0832); box-shadow: 0 2px 5px #a7062c; } body.pink-theme #logo { background: #ba0832 url(/page/-/esjt/images/static/header-bg-pink.png) center 0 repeat; } body.pink-theme #logo .header-image { background-image: url(/page/-/esjt/images/static/header-image-group.png); width: 326px; height: 183px; } body.yellow-theme #connect { background-color: #cca100; background-position: 0 0; background-repeat: repeat-x; background-image: url("/page/-/images/esjt/static/connect-bg.png"); background-image: -webkit-gradient(linear, left top, left bottom, from(#b89000), to(#cca100)); background-image: -webkit-linear-gradient(top, #b89000, #cca100); background-image: -moz-linear-gradient(top, #b89000, #cca100); background-image: -o-linear-gradient(top, #b89000, #cca100); background-image: linear-gradient(to bottom, #b89000, #cca100); box-shadow: 0 2px 5px #ad8a00; } body.yellow-theme #logo { background: #cca100 url(/page/-/esjt/images/static/header-bg-yellow.png) center 0 repeat; } body.yellow-theme #logo .header-image { background-image: url(/page/-/esjt/images/static/header-image-notepad.png); width: 297px; height: 183px; } body.gray-theme #connect { background-color: #3f3f3f; background-position: 0 0; background-repeat: repeat-x; background-image: url("/page/-/images/esjt/static/connect-bg.png"); background-image: -webkit-gradient(linear, left top, left bottom, from(#2e2e2e), to(#3f3f3f)); background-image: -webkit-linear-gradient(top, #2e2e2e, #3f3f3f); background-image: -moz-linear-gradient(top, #2e2e2e, #3f3f3f); background-image: -o-linear-gradient(top, #2e2e2e, #3f3f3f); background-image: linear-gradient(to bottom, #2e2e2e, #3f3f3f); box-shadow: 0 2px 5px #222; } body.gray-theme #logo { background: #3f3f3f url(/page/-/esjt/images/static/header-bg-gray.png) center 0 repeat; } body.gray-theme #logo .header-image { background-image: url(/page/-/esjt/images/static/header-image-ebook.png); width: 486px; height: 183px; } #container { width: 960px; margin: 0 auto 30px; background: #FFF; -webkit-box-shadow: 0 3px 12px #DDD; box-shadow: 0 3px 12px #DDD; position: relative; } #content { padding: 20px; background: #FFF; width: 620px; float: left; } body.full-width #content { width: auto; float: none; } .title-tab-wrapper { z-index: 7; } h2.title-tab { background: #FFF; color: #8f8f8f; padding: 10px 30px 0; font-size: 48px; -webkit-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-top: 10px; display: inline-block; } h2.arrow-header { font-size: 30px; color: #939598; position: relative; margin-bottom: 5px; clear: both; } h2.arrow-header.left { text-align: left; } h2.arrow-header.left span { left: -47px; top: 0; } h2.arrow-header.right { text-align: right; } h2.arrow-header.right span { background-position: -37px 0; right: -47px; top: 9px; } h2.arrow-header span { width: 37px; height: 64px; display: block; position: absolute; background: transparent url(/page/-/esjt/images/static/arrow-sprite.png) 0 0 no-repeat; } span.ss-icon { font-size: 60%; position: relative; top: 2px; margin-left: 5px; } .blog-style .entry { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #EEE; } .blog-style .entry .entry-thumb { float: left; margin-right: 20px; } .blog-style .entry .entry-summary { float: left; } .blog-style .entry h2 { font-family: "futura-pt", sans-serif; font-weight: bold; text-transform: none; } footer { position: relative; width: 960px; height: 80px; margin: 0 auto; } footer .left { height: 80px; border-right: 1px solid #cacbcd; float: left; width: 218px; } footer .right { height: 80px; width: 720px; padding-left: 20px; border-left: 1px solid #FFF; float: right; } footer .ap-logo { display: block; background: transparent url(/page/-/esjt/images/static/footer-ap-logo.png) 0 0 no-repeat; width: 205px; height: 77px; } footer .about { padding-top: 5px; font-size: 16px; color: #5a5a5a; margin-bottom: 15px; } footer .about a { color: #045e26; } footer .about a span.sprite { display: inline-block; position: relative; top: 1px; margin-left: 5px; background: transparent url(/page/-/esjt/images/static/arrow-sprite.png) -75px -48px no-repeat; width: 5px; height: 11px; } footer .about a span.ss-icon { top: 1px; margin-left: 3px; } footer .copyright { font-size: 10px; text-transform: uppercase; } form input.text { padding: 5px 15px; font-family: "futura-pt", sans-serif; text-transform: uppercase; font-size: 12px; border: 0; box-shadow: 0 2px 3px #979797 inset; -webkit-box-shadow: 0 2px 3px #979797 inset; } form input.submit, form button.submit { padding: 0 20px 0px; height: 27px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-size: 14px; background: #fdd103; border: 0; font-family: "Sue Ellen Francisco", cursive; text-transform: uppercase; } form input.submit:hover, form button.submit:hover { background: #FFF; } form label.inline { display: inline; } form .select-box { background: #FFF; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; position: relative; display: inline-block; border: 1px solid #DDD; box-shadow: 0 2px 3px #EEE inset; -webkit-box-shadow: 0 2px 3px #EEE inset; } form .select-box select { background: transparent; border: 0; -webkit-appearance: none; -moz-appearance: none; padding: 5px 10px 5px 28px; font-size: 14px; font-family: "futura-pt", sans-serif; } form .select-box span.ss-icon { position: absolute; top: 10px; left: 10px; margin: 0; } html.oldie #navigation #main-nav { font-size: 18px; } html.oldie #navigation #main-nav li { margin-right: 15px; } html.oldie input.text { border: 1px solid #DDD; } /* 04 =HOMEPAGE ------------------------- */ #hero { width: 536px; height: 246px; margin: 0 20px 20px 0; padding: 2px; float: left; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: #fdd103; } #hero .cycle-slideshow nav { position: absolute; z-index: 1000; top: 75px; background: rgba(255, 255, 255, 0.4); border: 1px solid #000; cursor: pointer; -webkit-border-radius: 25px; border-radius: 25px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; width: 50px; height: 50px; } #hero .cycle-slideshow nav span { background: transparent url(/page/-/esjt/images/static/arrow-sprite.png) 0 0 no-repeat; width: 16px; height: 19px; display: block; position: absolute; top: 16px; } #hero .cycle-slideshow nav.cycle-next { right: 15px; } #hero .cycle-slideshow nav.cycle-next span { background-position: -75px -19px; left: 20px; } #hero .cycle-slideshow nav.cycle-prev { left: 15px; } #hero .cycle-slideshow nav.cycle-prev span { background-position: -74px 0; left: 16px; } #hero .cycle-slideshow .cycle-slide img { -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; width: 536px; height: 246px; } #hero .cycle-slideshow .cycle-slide .info { background: rgba(0, 0, 0, 0.7); padding: 15px; position: absolute; bottom: 2px; margin: 0 -2px; width: 510px; height: 29px; } #hero .cycle-slideshow .cycle-slide .info h4 { color: #fdd103; text-transform: uppercase; width: 410px; margin-right: 20px; float: left; } #hero .cycle-slideshow .cycle-slide .info a { background: #fdd103; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; text-align: center; position: relative; text-transform: uppercase; font-family: "Sue Ellen Francisco", cursive; color: #000; width: 60px; float: right; padding: 7px 15px 3px 5px; font-size: 16px; } #hero .cycle-slideshow .cycle-slide .info a:hover { background: #FFF; } #hero .cycle-slideshow .cycle-slide .info a:hover { background: #FFF; } #hero .cycle-slideshow .cycle-slide .info a span { background: transparent url(/page/-/esjt/images/static/arrow-sprite.png) -74px -38px no-repeat; width: 9px; height: 10px; position: absolute; top: 10px; right: 7px; display: block; } .homepage-tout { -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; width: 360px; float: right; height: 250px; position: relative; background: transparent url(/page/-/esjt/images/static/infographic-tout-home-bg.png) center center no-repeat; } .homepage-tout a.yellow-button { color: #000; font-size: 25px; width: 80%; padding: 5px 0; margin: 0 10%; display: block; position: absolute; bottom: 20px; left: 0; } .homepage-tout a.yellow-button .arrow-sprite { width: 16px; height: 19px; position: absolute; top: 50%; margin-top: -10px; right: 10px; background: transparent url(/page/-/esjt/images/static/arrow-sprite.png) -75px -19px no-repeat; display: block; } .stat-module { background: #000; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; width: 360px; float: right; height: 160px; padding: 15px 0 75px; text-transform: uppercase; position: relative; } .stat-module .info { padding: 15px; height: 29px; background: #393939; position: absolute; bottom: 0; left: 0; width: 330px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .stat-module .info h4 { color: #fdd103; text-transform: uppercase; width: 240px; margin-right: 10px; float: left; position: relative; top: -2px; } .stat-module .info a { background: #fdd103; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; text-align: center; position: relative; text-transform: uppercase; font-family: "Sue Ellen Francisco", cursive; color: #000; width: 60px; float: right; padding: 7px 15px 3px 5px; font-size: 16px; } .stat-module .info a:hover { background: #FFF; } .stat-module .info a:hover { background: #FFF; } .stat-module .info a span { background: transparent url(/page/-/esjt/images/static/arrow-sprite.png) -74px -38px no-repeat; width: 9px; height: 10px; position: absolute; top: 10px; right: 7px; display: block; } .stat-module .side { width: 48%; position: relative; height: 160px; } .stat-module .left { float: left; color: #2cbfaa; text-align: right; } .stat-module .left .graph { background: #2cbfaa; border-bottom: 5px solid #196c60; right: 0; margin-left: 8px; height: 150px; } .stat-module .left .stat { left: 0; } .stat-module .right { float: right; color: #2098d1; text-align: left; } .stat-module .right .graph { background: #2098d1; border-bottom: 5px solid #125879; left: 0; margin-right: 8px; height: 80px; } .stat-module .right .stat { right: 0; } .stat-module .stat { width: 115px; position: absolute; bottom: 0; } .stat-module h3 { font-size: 30px; font-weight: bold; font-family: "futura-pt", sans-serif; margin-bottom: 5px; } .stat-module .graph { width: 45px; position: absolute; bottom: 0; } #audiences li { display: block; float: left; width: 174px; margin-right: 10px; } #audiences li.last-child { margin-right: 0; } #audiences li img { margin-bottom: 12px; } #audiences li h2 { font-size: 28px; text-align: center; } #audiences a { color: #000; } #audiences a:hover { color: #1f557a; } /* 05 =SUBPAGES ------------------------- */ .entry-thumb { display: block; } .entry-thumb img { display: block; } .yellow-button { padding: 5px 20px 0px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-size: 30px; background: #fdd103; border: 0; font-family: "Sue Ellen Francisco", cursive; text-transform: uppercase; text-align: center; color: #000; } .yellow-button:hover { background: #FFF; } body#stats-page #container { -webkit-box-shadow: none; box-shadow: none; background: transparent; } body#stats-page h2.arrow-header.right { position: absolute; right: 22px; top: -40px; } .infographic-single { margin: 0 auto; display: block; } .infographic-group { margin: 20px 0; position: relative; } .infographic-group a { display: block; float: left; } .infographic-group a:first-child { margin-right: 20px; } .infographic-group span.arrow-sprite { top: 0; left: 0; width: 37px; height: 64px; display: block; position: absolute; background: transparent url(/page/-/esjt/images/static/arrow-sprite.png) 0 0 no-repeat; } .infographic-group span.arrow-sprite.left { top: 30px; left: -30px; } .infographic-group span.arrow-sprite.right { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); background-position: -37px 0; top: 10px; left: 462px; } .more-information { background: #393939; color: #FFF; padding: 40px; } .more-information h3 { font-size: 20px; font-family: "futura-pt", sans-serif; font-weight: 400; text-transform: none; line-height: 1.4; margin-bottom: 40px; } .more-information h4 { font-size: 16px; font-weight: 300; line-height: 1.4; } .more-information a { color: #FFF; text-decoration: underline; } .more-information a:hover { color: #fdd103; } #stat-module { overflow: hidden; background: #bb3900; color: #FFF; padding: 20px 0; height: 760px; position: relative; } #stat-module h1 { font-size: 30px; font-family: "futura-pt", sans-serif; text-align: left; font-weight: bold; float: left; margin: 0 0 20px 60px; } #stat-module .restart { color: #000; font-size: 22px; padding: 5px 50px 0px; margin-right: 60px; float: right; display: none; } #stat-submit { margin: 0 20px 20px 0; padding-right: 103px; position: absolute; padding: 35px 103px 35px 0; width: 350px; top: 80px; left: 0; } #stat-submit .arrow { width: 0; height: 0; border-top: 165px solid transparent; border-bottom: 165px solid transparent; border-left: 103px solid #d13f02; position: absolute; top: 0; right: 0; } #stat-submit .form-area { background: #d13f02; width: 240px; height: 220px; padding: 20px 60px; } #stat-submit .form-area h2 { font-size: 30px; font-family: "futura-pt", sans-serif; font-weight: bold; padding: 39px 0; display: none; } #stat-submit .select-box { width: 100%; margin: 0 0 10px 0; background: #fff3ba; -webkit-box-shadow: 0 2px 2px #d0be8e inset; box-shadow: 0 2px 2px #d0be8e inset; } #stat-submit .select-box select { -webkit-appearance: none; -moz-appearance: none; border: 0; background: transparent; padding: 10px 15px; font-size: 17px; font-weight: bold; font-family: "futura-pt", sans-serif; text-transform: uppercase; width: 100%; } #stat-submit .select-box select option { text-transform: uppercase; } #stat-submit button { width: 100%; } #stat-results { padding-left: 30px; } #stat-results .result { background: #d13f02; -webkit-border-radius: 6px; border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 20px; width: 360px; color: #FFF; position: absolute; right: -470px; top: 80px; } #stat-results .result .legend { background: #df4a0d; font-weight: bold; color: #353535; font-size: 16px; padding: 10px 0; text-align: center; margin: 10px -20px -20px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #stat-results .result .notice { position: absolute; top: 130px; left: 0; width: 340px; text-align: center; padding: 0 30px; font-size: 20px; } #stat-results .result .notice a { color: #fdd103; } #stat-results .result .notice a:hover { color: #FFF; } #stat-results .result .graph { position: relative; height: 250px; } #stat-results .result .graph .bar { background: #FFF; position: absolute; bottom: 0; width: 22%; margin-right: 4%; } #stat-results .result .graph .bar.bar0 { left: 0; } #stat-results .result .graph .bar.bar1 { left: 26%; } #stat-results .result .graph .bar.bar2 { left: 52%; } #stat-results .result .graph .bar.bar3 { left: 78%; margin-right: 0; } #stat-results .result .numbers { position: relative; } #stat-results .result .numbers .bar { width: 22%; margin-right: 4%; float: left; text-align: center; margin-top: -40px; } #stat-results .result .numbers .bar.bar3 { margin-right: 0; } #stat-results .result .numbers .bar h4 { font-weight: normal; font-size: 18px; } #stat-results .result .numbers .bar h3 { font-family: "futura-pt", sans-serif; font-size: 30px; font-weight: bold; color: #d13f02; margin-bottom: 12px; text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white, 0 0 5px white; } #stat-results .result .numbers .bar h3.zero0 { color: #FFF; text-shadow: none; } #stat-results h2 { clear: both; font-family: "futura-pt", sans-serif; font-weight: bold; margin-bottom: 20px; font-size: 20px; color: #fdd103; } #stat-results h2 span { color: #FFF; } #stat-share { display: none; padding: 20px 60px; position: absolute; width: 840px; top: 510px; left: 0; } #stat-share .item { background: #FFF; -webkit-border-radius: 8px; border-radius: 8px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 20px; width: 360px; } #stat-share h2 { text-transform: uppercase; font-weight: bold; font-family: "futura-pt", sans-serif; font-size: 20px; text-align: center; } #stat-share p { padding: 10px 20px; font-size: 16px; color: #777; font-family: "futura-pt", sans-serif; line-height: 1.3; margin: 0; } #stat-share .yellow-button { width: 70%; margin: 10px auto 0; display: block; padding: 15px 20px 10px; color: #000; } #stat-share .yellow-button:hover { background: #fdda36; } #stat-share .facebook { float: left; } #stat-share .facebook h2 { color: #3e5a9a; } #stat-share .twitter { float: right; } #stat-share .twitter h2 { color: #219cd9; } #map-box { width: 600px; height: 443px; } #map .image-wrapper { padding: 30px 0 110px; background: transparent url(/page/-/idas/static/chalkboard-bg.jpg) center -120px repeat; margin-bottom: 30px; } #map #container { background: transparent; -webkit-box-shadow: none; box-shadow: none; } #map #content { padding: 0; background: transparent; } #map #sort-area .info-box { width: 340px; float: right; margin-left: 20px; padding-top: 30px; color: #FFF; } #map #sort-area .info-box h1 { font-size: 32px; margin-bottom: 15px; } #map #sort-area .info-box p { font-size: 18px; margin-bottom: 15px; } #map #sort-area .relatvive-map-container { float: left; } #map #results-area { margin-bottom: 20px; } #map #results-area .map-result { background: #FFF; -webkit-border-radius: 8px; border-radius: 8px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 20px; display: none; } #map #results-area .partners { margin-bottom: 20px; } #map #results-area .resources { float: left; width: 430px; margin-right: 20px; } #map #results-area .happening { float: right; width: 430px; } .resource-feed .entry .entry-thumb { width: 100px; } .resource-feed .entry .entry-thumb img { width: 100px; } .resource-feed .entry .entry-summary { width: 500px; } .resource-feed .entry h2 { font-size: 20px; } .staff-feed .entry .entry-thumb { width: 100px; } .staff-feed .entry .entry-thumb img { width: 100px; } .staff-feed .entry .entry-summary { width: 500px; } .staff-feed .entry h2 { font-size: 20px; } .blog-feed .entry .entry-thumb { width: 180px; } .blog-feed .entry .entry-thumb img { width: 180px; } .blog-feed .entry .entry-summary { width: 420px; } .partner-index .entry { float: left; width: 450px; } .partner-index .entry:nth-child(odd) { margin-right: 20px; } .partner-index a { margin: 0; font-size: 32px; font-weight: bold; } .partner-index span.ss-icon { font-size: 32px; margin: 0 8px 0 0; top: 5px; } #partner-search { margin-bottom: 20px; } #partner-search h3 { display: inline-block; margin-right: 10px; } #partner-search form { display: inline-block; position: relative; top: -6px; } #partner-search form input.text { margin-right: 5px; -webkit-box-shadow: 0 2px 3px #979797 inset, 1px 1px 2px #999; box-shadow: 0 2px 3px #979797 inset, 1px 1px 2px #DDD; } h2.no-results { font-family: "futura-pt", sans-serif; font-weight: bold; } #resource-sort { display: inline-block; margin: 0 0 20px 10px; } #resource-sort fieldset { display: inline; } /* 06 =SIDEBAR ------------------------- */ #sidebar { width: 280px; float: right; padding: 20px 20px 20px 0; } #sidebar #calls-to-action .entry { padding: 20px; margin-bottom: 20px; } #sidebar #calls-to-action .entry img { margin: 0 -20px 10px; } #sidebar #calls-to-action h1 { color: white; font-family: "futura-pt", sans-serif; font-weight: bold; font-size: 18px; text-align: center; margin-bottom: 10px; } #sidebar #calls-to-action .yellow-button { font-size: 25px; display: block; position: relative; padding: 5px 30px 0 10px; color: black; } #sidebar #calls-to-action .yellow-button .arrow-sprite { width: 16px; height: 19px; position: absolute; top: 50%; margin-top: -10px; right: 10px; background: transparent url(/page/-/esjt/images/static/arrow-sprite.png) -75px -19px no-repeat; display: block; } #sidebar #calls-to-action .stat-module { float: none; height: auto; padding: 0; width: auto; margin: 0 0 10px; background: transparent; } #sidebar #calls-to-action .stat-module h3 { font-size: 32px; } #sidebar #calls-to-action .stat-module p { font-size: 11px; } #sidebar #calls-to-action .stat-module .left { color: white; } #sidebar #calls-to-action .stat-module .left .graph { background-color: #6cd8c6; border-color: #addad2; } #sidebar #calls-to-action .stat-module .right { color: white; } #sidebar #calls-to-action .stat-module .right .graph { background-color: #68c3b4; border-color: #90cec3; height: 40px; } #sidebar #calls-to-action .stat-module .stat { width: 60px; } #sidebar .infographic-tout { background: transparent url(/page/-/esjt/images/static/infographic-tout-sidebar-bg.png) center center no-repeat !important; height: 172px; width: 240px; } #sidebar .infographic-tout a { margin-top: 130px; } body.full-width #sidebar { display: none; } body.green-theme #sidebar #calls-to-action .entry { background: #2e9785; } body.green-theme #sidebar #calls-to-action .entry .stat-module .left .graph { background-color: #6cd8c6; border-color: #addad2; } body.green-theme #sidebar #calls-to-action .entry .stat-module .right .graph { background-color: #6cd8c6; border-color: #addad2; } body.yellow-theme #sidebar #calls-to-action .entry { background: #c39b00; } body.yellow-theme #sidebar #calls-to-action .entry .stat-module .left .graph { background-color: #ffd943; border-color: #f6e18f; } body.yellow-theme #sidebar #calls-to-action .entry .stat-module .right .graph { background-color: #ffd943; border-color: #f6e18f; } body.blue-theme #sidebar #calls-to-action .entry { background: #348ecb; } body.blue-theme #sidebar #calls-to-action .entry .stat-module .left .graph { background-color: #96c7e8; border-color: #d3e3ee; } body.blue-theme #sidebar #calls-to-action .entry .stat-module .right .graph { background-color: #96c7e8; border-color: #d3e3ee; } body.gray-theme #sidebar #calls-to-action .entry { background: #404040; } body.gray-theme #sidebar #calls-to-action .entry .stat-module .left .graph { background-color: gray; border-color: #a1a1a1; } body.gray-theme #sidebar #calls-to-action .entry .stat-module .right .graph { background-color: gray; border-color: #a1a1a1; } body.pink-theme #sidebar #calls-to-action .entry { background: #ba0839; } body.pink-theme #sidebar #calls-to-action .entry .stat-module .left .graph { background-color: #f34f7c; border-color: #f193ad; } body.pink-theme #sidebar #calls-to-action .entry .stat-module .right .graph { background-color: #f34f7c; border-color: #f193ad; } body.red-theme #sidebar #calls-to-action .entry { background: #ae3700; } body.red-theme #sidebar #calls-to-action .entry .stat-module .left .graph { background-color: #fa7234; border-color: #f4a27b; } body.red-theme #sidebar #calls-to-action .entry .stat-module .right .graph { background-color: #fa7234; border-color: #f4a27b; } /* 07 =FRAMEWORK ------------------------- */ /* SKIN OVERRIDES Last Update: March 7, 2011 NOTE: These definitions assume that framework elements have been wrapped in a div with the id "framework". For the YUI styles to work the body id should be "bsd" */ #framework div.bsd-speakout .firstname { width: 49%; margin-right: 2%; } #framework div.bsd-speakout .lastname { width: 49%; } #framework div.bsd-speakout .textbox { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #framework div.bsd-speakout .city, #framework div.bsd-speakout .state_cd, #framework div.bsd-speakout .zip { width: 32%; margin-right: 2%; } #framework div.bsd-speakout .zip { margin-right: 0; } #framework div.bsd-speakout .bsd-speakout-show-formfield label { font-size: 14px; } #framework div.bsd-speakout .bsd-speakout-show-formfield.state_cd label { font-size: 13px; } /*=TYPOGRAPHY ---------------------------------------------------------- */ #framework #SKIN h1, #framework #SKIN .basic .main #eventdetail .title, #framework #profiledetail #sectionheader, #framework #stdheader #title { font-size: 24px; font-weight: bold; line-height: 30px; margin-bottom: 6px; } /*if using cufon or typekit for headers be sure to target the following header ids/classes #titletext - header for Outeach pages .headertitle — header for Comunity pages */ #framework #contribution .contribheader, #framework #SKIN h2, #framework #sectionheader, #framework #SKIN .widget_header, #framework #SKIN .widget_title, #framework #community .communitypostinlist .title, #framework #community .header, #framework #community .communitypostfull .title, #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework a#host-button, #framework #loginform .logintitle, #framework #signupform .signuptitle, #framework #outreach_content #loginform .logintitle, #framework #outreach_content #signupform .signuptitle, #framework #manageform .managetitle, #framework #forgotpw .header { font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; } #framework #SKIN h3, #framework #SKIN .basic .main .typedescheader, #framework #community .postlist table.head .text, #framework #community .subheader, #framework #community .profileteaser .title, #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead { font-size: 14px; font-weight: bold; line-height: 20px; margin-bottom: 6px; } #framework #SKIN h4, #framework #SKIN h5 { font-size: 12px; font-weight: bold; line-height: 18px; } /*HEADERS WITH BOTTOM BORDERS*/ #framework #contribution .contribheader, #framework #sectionheader, #framework .sectionheader, #framework #SKIN .header, #framework #SKIN .basic .main .typedescheader, #framework #community .header #framework #community .communitypostfull .title, #framework #community .journaltitle, #framework #community .journalarchive .journalarchivetitle, #framework #stdheader, #framework #community .profileteaser .title, #framework #odgettingstarted .odsechead, #framework #odprogress .odsechead, #framework #odyourpage .odsechead, #framework #odstats .odsechead, #framework #odaddress .odsechead, #framework #odgroup .odsechead, #framework #outreach_content .omhead, #framework #manageform .managetitle, #framework #forgotpw .header { border-bottom: 1px solid #ddd; padding-bottom: 3px; } /*WIDGET HEADERS*/ #framework #SKIN .widget_header { background: #eee; border-bottom: 1px solid #ddd; margin-bottom: 6px; padding: 5px 10px; position: relative; } /*SUB-HEADERS*/ #framework #SKIN .widget_subheader, #framework #community .subheader { background: #F2F7F7; border-bottom: 1px solid #ddd; padding: 5px 10px; } /*=FORM ELEMENTS ---------------------------------------------------------- */ #framework .checkbox, #framework .radiobutton, #framework.label, #framework .text { margin: 0 .5em 0 0; } /*=BUTTONS ---------------------------------------------------------- */ /*INPUT BUTTONS*/ #framework input[type=button], #framework input[type=submit], #framework .submit, #framework #invitationpage #submit_button, #framework #date-filter, #framework .loginbutton input, #framework .signupbutton input, #framework #community input[type=submit], #framework .utils_search button { cursor: pointer; } /*Targets most Buttons*/ /*INPUT HOVER STATES Note this will only work for modern browsers*/ /*RSVP and DETAILS BUTTONS*/ #framework #event_results .event_footer .links { float: left; } #framework #event_results .event_footer .links .detail_button, #framework #event_results .event_footer .links .rsvp_button { float: right; } #framework #event_results .event_footer .links .detail_button a, #framework #event_results .event_footer .links .rsvp_button a { display: block; margin-left: 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 2px 10px; } #framework #event_results .event_footer .links .detail_button a { background: #eee; border: 1px solid #ccc; padding: 2px 10px 1px; } #framework #event_results .event_footer .links .rsvp_button a { background: #555; color: #fff; padding: 3px 10px 2px; } #framework #event_results .event_footer .links .detail_button a:hover, #framework #event_results .event_footer .links .rsvp_button a:hover { background: #33; border-color: #333; color: #eee; } /*Hover state for RSVP and Details buttons*/ /*CONTACT IMPORTER BUTTOM FOR SHARE AND INVITE FORMS*/ #framework #contact_importer_button { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; } /*You can change the background color to match your other input button styles*/ /*SEARCH BUTTON*/ /*=TEXT INPUT FIELDS AND TEXTAREAS ---------------------------------------------------------- */ /*Use this definition to target most of the text input fields*/ /*=TABS NOTE If the background color for your page is not white you will have to update the bottom border color for the active tabs for Framework, Events and Friends i.e. #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } ---------------------------------------------------------- */ /*FRAMEWORK TABS*/ #framework #SKIN #blue_hat { background: none; border-bottom: 1px solid #ddd; height: 43px; } #framework #SKIN #blue_hat ul { display: inline; float: right; height: auto; margin: 0 5px; padding: 18px 0 0 0; } #framework #SKIN #blue_hat li { background: #eee; border: 1px solid #ddd; border-top-left-radius: 3px; display: inline; float: right; padding: 5px 10px 4px; text-decoration: none; } #framework #SKIN #blue_hat li a { color: #888; text-decoration: none; } #framework #SKIN #blue_hat .blue_hat_active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework #SKIN #blue_hat .blue_hat_active a { color: #555; } #framework #SKIN #blue_hat li a:hover { background: none; color: #555; } /*EVENT TABS*/ #framework ul#event_order { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 10px 0; top: 0; width: 100%; } #framework ul#event_order li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; } #framework ul#event_order li a { color: #888; } #framework ul#event_order a:hover { color: #555; } #framework ul#event_order li.active { background: none; border-bottom: 1px solid #fff; font-weight: bold; } #framework ul#event_order li.active a { color: #555; } /*WIDGET TABS*/ /*Note that the active tab background color should be the same as the .widget_header background color under the WIDGET HEADERS category above*/ #framework #SKIN .widget_tabs { margin: 0; padding: 0; } #framework #SKIN .widget_tabs li { border-top-left-radius: 3px; float: left; list-style: none; padding: 5px 10px 4px 10px; margin: 0 5px 0 0; list-style-type: none; } #framework #SKIN .widget_tabs li.active_tab { background: #eee; font-weight: bold; } #framework #SKIN .widget_tabs li.inactive_tab { background: #ddd; } /*FRIENDS TABS*/ #framework #SKIN #friends_tabs { border-bottom: 1px solid #ddd; margin: 18px 0 6px 0; } #framework #SKIN #friends_tabs ul { margin: 0; padding: 5px 0 0 0; list-style: none; } #framework #SKIN #friends_tabs li { border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline; float: left; margin: 0 0 -1px 5px; list-style-type: none; padding: 5px 10px 4px; } #framework #SKIN #friends_tabs ul li.active_tab { background: none; border: 1px solid #ddd; border-bottom: 1px solid #fff; } #framework #SKIN #friends_tabs ul li.active_tab a { color: #555; font-weight: bold; } #framework #SKIN #friends_tabs ul li.inactive_tab { background: #eee; border: 1px solid #ddd; } /*=SPEAKOUT TABS */ #framework #speakout #tabs { margin-top: 18px; } #framework #speakout #nav-tabs, #framework #speakout #tip-tabs { border-bottom: 1px solid #ddd; clear: both; float: left; list-style-type: none; margin: 0 0 18px 0; top: 0; width: 100%; } #framework #speakout td.tips { padding: 0 10px; } #framework #speakout #tip-tabs { width: 300px; } #framework #speakout #nav-tabs li, #framework #speakout #tip-tabs li { background: #eee; border: 1px solid #ddd; color: #888; display: inline; float: left; margin: 0 0 -1px 5px; padding: 5px 10px 4px; text-decoration: none; } #framework #speakout #nav-tabs li.tab-on, #framework #speakout #tip-tabs li.tip-on { background: none; border-bottom: 1px solid #fff; color: #555; font-weight: bold; } #framework #speakout #nav-tabs li.tab-off, #framework #speakout #tip-tabs li.tip-off { cursor: pointer; } /*YUI POP OVER This controls the style of the pop over opened after clicking the contact importer button As noted above, in order for this to work the body id should be "bsd" ---------------------------------------------------------- */ #bsd .yui-panel { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #bsd .yui-panel-container.shadow .underlay { display: none; } #bsd .yui-panel .container-close { right: 10px; } /*This targets the close button in the popover. You can replace the default image with one of your choosing. Image dimensions should be 12px square*/ #bsd .yui-panel .hd { background: #eee; color: #333; border: none; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; line-height: 24px; margin-bottom: 6px; padding: 10px; } #bsd .yui-panel .bd { font-size: 12px; line-height: 18px; padding: 6px; } #bsd #contact_importer_wrapper { margin: 0; } #bsd #contact_importer_wrapper #contact_importer_error { margin: 18px 0 0 0; } #bsd #contact_importer_dialog .button-group button { background: #eee; border: 1px solid #ddd; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; padding: 3px 10px; } /*Contact Listings*/ #bsd #contact_importer_wrapper #results_table_header { background: #eee; } #bsd #contact_importer_wrapper #results_table_outer { border: 1px solid #ddd; } /*=LAYOUT ---------------------------------------------------------- */ /*SOCIAL NET WIDGET COLUMNS*/ #framework #SKIN #widget_group_1 { float: left; width: 49%; } /*Left column*/ #framework #SKIN #widget_group_2 { float: right; width: 49%; } /*Right column*/ /*SPEAKOUT*/ #framework .group_field { margin-bottom: 10px; float: left; margin-right: 5px; } #framework #speakout .splash { margin: 0 0 20px 0; } #framework #speakout table { clear: left; margin: 0 20px 10px 0; } #framework #speakout #recipient_table { width: 300px; } #framework #speakout .recipient-header { font-weight: bold; } #framework #speakout .recipient-divider { padding-top: 10px; font-style: italic; } #framework #speakout .recipient-header th { text-align: auto !important; } #framework #speakout .stat { text-align: right; padding-right: 4px; } #framework #speakout td { vertical-align: top; } #framework #speakout .step { margin-top: 15px; } #framework #speakout .field { width: 50%; padding-left: 10px; } #framework #speakout th.divider { padding: 10px; font-size: 16px; background: #eee; } #framework #speakout #speakout_form { margin-top: 20px; } #framework #speakout h4 { font-size: 16px; } #framework #speakout table#landing div.goal { float: right; margin: 10px; padding: 15px 15px 0; width: 280px; border: 1px solid #CCC; } #framework #speakout table#landing div.goal td { padding: 5px; } #framework #speakout table#landing div.goal input.landing-button, #framework #speakout table#landing div.goal input.landing-button-over { display: block; margin-top: 15px; } #framework #speakout table#landing div.goal input#addr1, #framework #speakout table#landing div.goal input#addr2, #framework #speakout table#landing div.goal input#email { width: 200px; } /*=PLEASE DO NOT DELETE OR MODIFY ANY OF THE STYLES BELOW ---------------------------------------------------------- */ #framework #SKIN #widget_directory_search_groups_by_keyword { float: none !important; } /* 08 =UTILITY ------------------------- */ .cufon-loading * { visibility: hidden !important; } .floatl { float: left; margin: 0; padding: 0 10px 10px 0; } .floatr { float: right; margin: 0; padding: 0 0 10px 10px; } .required { color: red; } .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } .hidden { display: none; visibility: hidden; } /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } ::-moz-selection { background: #1fb9e7; color: #fff; text-shadow: none; } ::selection { background: #1fb9e7; color: #fff; text-shadow: none; } .relative-map-container { position: relative; width: 600px; color: #000; } ul.state-abbreviations { padding: 0; margin: 0; font-family: Arial, sans-serif; font-size: 10px; /* Should be map width/60 px */ } ul.state-abbreviations li { list-style: none; position: absolute; top: 0; left: 0; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } ul.state-abbreviations li.AL { top: 56.59%; left: 66.16%; } ul.state-abbreviations li.AK { top: 68.18%; left: 10.83%; } ul.state-abbreviations li.AZ { top: 50%; left: 19.33%; } ul.state-abbreviations li.AR { top: 51.36%; left: 54.83%; } ul.state-abbreviations li.CA { top: 38.40%; left: 6.16%; } ul.state-abbreviations li.CO { top: 37.27%; left: 31.66%; } ul.state-abbreviations li.CT { display: none; } ul.state-abbreviations li.DE { display: none; } ul.state-abbreviations li.FL { top: 69.09%; left: 77.83%; } ul.state-abbreviations li.GA { top: 56.36%; left: 72.66%; } ul.state-abbreviations li.HI { top: 77.72%; left: 29.66%; color: #FFF; } ul.state-abbreviations li.ID { top: 20.45%; left: 18.66%; } ul.state-abbreviations li.IL { top: 34.09%; left: 60.5%; } ul.state-abbreviations li.IN { top: 34.09%; left: 65.66%; } ul.state-abbreviations li.IA { top: 28.86%; left: 53.16%; } ul.state-abbreviations li.KS { top: 40%; left: 44.5%; } ul.state-abbreviations li.KY { top: 41.13%; left: 69%; } ul.state-abbreviations li.LA { top: 60.90%; left: 55%; } ul.state-abbreviations li.ME { top: 10.45%; left: 90.83%; } ul.state-abbreviations li.MD { display: none; } ul.state-abbreviations li.MA { display: none; } ul.state-abbreviations li.MI { top: 24.77%; left: 67.66%; } ul.state-abbreviations li.MN { top: 16.81%; left: 50.83%; } ul.state-abbreviations li.MS { top: 57.95%; left: 60.33%; } ul.state-abbreviations li.MO { top: 41.13%; left: 54.5%; } ul.state-abbreviations li.MT { top: 11.81%; left: 28.16%; } ul.state-abbreviations li.NE { top: 30.68%; left: 42.5%; } ul.state-abbreviations li.NV { top: 32.04%; left: 12.66%; } ul.state-abbreviations li.NH { display: none; } ul.state-abbreviations li.NJ { display: none; } ul.state-abbreviations li.NM { top: 50.90%; left: 29.66%; } ul.state-abbreviations li.NY { top: 20.68%; left: 83%; } ul.state-abbreviations li.NC { top: 45.22%; left: 80.16%; } ul.state-abbreviations li.ND { top: 12.04%; left: 41.66%; } ul.state-abbreviations li.OH { top: 32.27%; left: 71.16%; } ul.state-abbreviations li.OK { top: 49.09%; left: 46.16%; } ul.state-abbreviations li.OR { top: 16.13%; left: 8.66%; } ul.state-abbreviations li.PA { top: 28.18%; left: 79.66%; } ul.state-abbreviations li.RI { display: none; } ul.state-abbreviations li.SC { top: 51.59%; left: 77.16%; } ul.state-abbreviations li.SD { top: 21.13%; left: 41.83%; } ul.state-abbreviations li.TN { top: 47.04%; left: 66.16%; } ul.state-abbreviations li.TX { top: 61.36%; left: 42.5%; } ul.state-abbreviations li.UT { top: 35%; left: 21.66%; } ul.state-abbreviations li.VT { display: none; } ul.state-abbreviations li.VA { top: 39.09%; left: 80%; } ul.state-abbreviations li.WA { top: 6.36%; left: 11%; } ul.state-abbreviations li.WV { top: 37.27%; left: 74.83%; } ul.state-abbreviations li.WI { top: 21.36%; left: 58.66%; } ul.state-abbreviations li.WY { top: 24.77%; left: 29.5%; } /* 09 =PRINT ------------------------- */ @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a:after { content: " (" attr(href) ")"; } abbr:after { content: " (" attr(title) ")"; } .ir a:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } #sidebar, #editToggle, .editThis, #navigation, #addthis, #search, #nav { display: none; } /* hide disqus since it is extraneous content that just increases page size */ #disqus_thread { display: none; } a.dsq-brlink { display: none; } /* float blog entry images to decrease page length */ #main { overflow: hidden; } #main img { float: left; clear: both; /*keeps images from piling up next to each other*/ margin: 0 10px 10px 0; } }