--- a/stylesheets/foundation.css +++ b/stylesheets/foundation.css @@ -1,1 +1,1206 @@ - +/* Foundation v2.1.4 http://foundation.zurb.com */ +/* Artfully Masterminded by ZURB */ + +/* -------------------------------------------------- + Table of Contents +----------------------------------------------------- +:: Reset & Standards +:: Links +:: Lists +:: Tables +:: Misc +*/ + + +/* -------------------------------------------------- + :: Global Reset & Standards + -------------------------------------------------- */ + + /* + Eric Meyer's CSS Reset + http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) + */ + + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + vertical-align: baseline; + } + html { + font-size: 62.5%; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + body { + line-height: 1; + } + ol, ul { + list-style: none; + } + blockquote, q { + quotes: none; + } + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; + } + + + + body { background: #fff; font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; } + + + +/* -------------------------------------------------- + :: Links + -------------------------------------------------- */ + a { color: #2a85e8; text-decoration: none; line-height: inherit; } + a:hover { color: #11639d; } + a:focus { color: #cc4714; outline: none; } + p a, p a:visited { line-height: inherit; } + + +/* -------------------------------------------------- + :: Lists + -------------------------------------------------- */ + ul, ol { margin-bottom: 18px; } + ul { list-style: none outside; } + ol { list-style: decimal; } + ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } + ul.square { list-style: square outside; } + ul.circle { list-style: circle outside; } + ul.disc { list-style: disc outside; } + li { margin-bottom: 12px; } + ul.large li { line-height: 21px; } + + +/* -------------------------------------------------- + :: Tables + -------------------------------------------------- */ + table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd; } + + table thead, table tfoot { background: #f5f5f5; } + table thead tr th, + table tfoot tr th, + table tbody tr td, + table tr td, + table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; } + table thead tr th, + table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; } + table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; } + table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; } + + table tbody tr.even, + table tbody tr.alt { background: #f9f9f9; } + table tbody tr:nth-child(even) { background: #f9f9f9; } + table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; } + +/* -------------------------------------------------- + :: Misc +---------------------------------------------------*/ + .left { float: left; } + .right { float: right; } + .hide { display: none; } + .highlight { background: #ff0; } + +/* Arfully Masterminded by ZURB */ + +/* -------------------------------------------------- + :: Typography + -------------------------------------------------- */ + h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 } + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } + h1 { font-size: 46px; font-size: 4.6rem; margin-bottom: 12px;} + h2 { font-size: 35px; font-size: 3.5rem; margin-bottom: 9px; } + h3 { font-size: 28px; font-size: 2.8rem; margin-bottom: 9px; } + h4 { font-size: 21px; font-size: 2.1rem; margin-bottom: 3px; } + h5 { font-size: 18px; font-size: 1.8rem; font-weight: normal; margin-bottom: 3px; } + h6 { font-size: 15px; font-size: 1.5rem; font-weight: normal; } + + .subheader { color: #777; font-weight: 300; margin-bottom: 24px; } + + p { line-height: 17px; margin: 0 0 18px; } + p img { margin: 0; } + p.lead { font-size: 18px; font-size: 1.8rem; line-height: 24px; } + + em, i { font-style: italic; line-height: inherit; } + strong, b { font-weight: bold; line-height: inherit; } + small { font-size: 60%; line-height: inherit; } + + h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; } + + /* Blockquotes */ + blockquote, blockquote p { line-height: 20px; color: #777; } + blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; } + blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555; } + blockquote cite:before { content: "\2014 \0020"; } + blockquote cite a, blockquote cite a:visited { color: #555; } + + hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; } + + abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; } + abbr { text-transform: none; } + + /** + * Print styles. + * + * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ + * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) + */ + .print-only { display: none !important; } + @media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ + p a, p a:visited { color: #444 !important; text-decoration: underline; } + p a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } + .hide-on-print { display: none !important; } + .print-only { display: block !important; } + } +/* Arfully Masterminded by ZURB */ + +/* -------------------------------------------------- + :: Grid + + This is the mobile-friendly, responsive grid that + lets Foundation work much of its magic. + + -------------------------------------------------- */ + + .container { padding: 0 20px; } + + .row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; } + /* To fix the grid into a certain size, set max-width to width */ + .row .row { min-width: 0; } + + .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; } + .column:first-child, .columns:first-child { margin-left: 0; } + + .row .one.columns { width: 4.3%; } + .row .two.columns { width: 13%; } + .row .three.columns { width: 21.68%; } + .row .four.columns { width: 30.37%; } + .row .five.columns { width: 39.1%; } + .row .six.columns { width: 47.8%; } + .row .seven.columns { width: 56.5%; } + .row .eight.columns { width: 65.2%; } + .row .nine.columns { width: 73.9%; } + .row .ten.columns { width: 82.6%; } + .row .eleven.columns { width: 91.3%; } + .row .twelve.columns { width: 100%; } + + .row .offset-by-one { margin-left: 13.1%; } + .row .offset-by-two { margin-left: 21.8%; } + .row .offset-by-three { margin-left: 30.5%; } + .row .offset-by-four { margin-left: 39.2%; } + .row .offset-by-five { margin-left: 47.9%; } + .row .offset-by-six { margin-left: 56.6%; } + .row .offset-by-seven { margin-left: 65.3%; } + .row .offset-by-eight { margin-left: 74.0%; } + .row .offset-by-nine { margin-left: 82.7%; } + .row .offset-by-ten { margin-left: 91.4%; } + + .row .centered { float: none; margin: 0 auto; } + + .row .offset-by-one:first-child { margin-left: 8.7%; } + .row .offset-by-two:first-child { margin-left: 17.4%; } + .row .offset-by-three:first-child { margin-left: 26.1%; } + .row .offset-by-four:first-child { margin-left: 34.8%; } + .row .offset-by-five:first-child { margin-left: 43.5%; } + .row .offset-by-six:first-child { margin-left: 52.2%; } + .row .offset-by-seven:first-child { margin-left: 60.9%; } + .row .offset-by-eight:first-child { margin-left: 69.6%; } + .row .offset-by-nine:first-child { margin-left: 78.3%; } + .row .offset-by-ten:first-child { margin-left: 87%; } + .row .offset-by-eleven:first-child { margin-left: 95.7%; } + + /* Source Ordering */ + .push-two { left: 17.4% } + .push-three { left: 26.1%; } + .push-four { left: 34.8%; } + .push-five { left: 43.5%; } + .push-six { left: 52.2%; } + .push-seven { left: 60.9%; } + .push-eight { left: 69.6%; } + .push-nine { left: 78.3%; } + .push-ten { left: 87%; } + + .pull-two { right: 17.4% } + .pull-three { right: 26.1%; } + .pull-four { right: 34.8%; } + .pull-five { right: 43.5%; } + .pull-six { right: 52.2%; } + .pull-seven { right: 60.9%; } + .pull-eight { right: 69.6%; } + .pull-nine { right: 78.3%; } + .pull-ten { right: 87%; } + + + + img, object, embed { max-width: 100%; height: auto; } + img { -ms-interpolation-mode: bicubic; } + + /* Nicolas Gallagher's micro clearfix */ + .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; } + .row:after, .clearfix:after { clear: both; } + .row, .clearfix { zoom: 1; } + + + + +/* -------------------------------------------------- + :: Block grids + + These are 2-up, 3-up, 4-up and 5-up ULs, suited + for repeating blocks of content. Add 'mobile' to + them to switch them just like the layout grid + (one item per line) on phones + + For IE7/8 compatibility block-grid items need to be + the same height. You can optionally uncomment the + lines below to support arbitrary height, but know + that IE7/8 do not support :nth-child. + -------------------------------------------------- */ + + .block-grid { display: block; overflow: hidden; } + .block-grid>li { display: block; height: auto; float: left; } + + .block-grid.two-up { margin-left: -4% } + .block-grid.two-up>li { margin-left: 4%; width: 46%; } +/* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */ + + .block-grid.three-up { margin-left: -2% } + .block-grid.three-up>li { margin-left: 2%; width: 31.3%; } +/* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */ + + .block-grid.four-up { margin-left: -2% } + .block-grid.four-up>li { margin-left: 2%; width: 23%; } +/* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ + + .block-grid.five-up { margin-left: -1.5% } + .block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; } +/* .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */ + +/* Artfully masterminded by ZURB */ + + + +/* -------------------------------------------------- + Table of Contents +----------------------------------------------------- +:: Buttons +:: Alerts +:: Notices/Alerts +:: Tabs +:: Pagination +:: Lists +:: Panels +:: Nav +:: Video +:: Microformats +*/ + + + + +/* -------------------------------------------------- + Buttons + -------------------------------------------------- */ + + .button { + background: #00a6fc; + display: inline-block; + text-align: center; + padding: 9px 34px 11px; + color: #fff; + text-decoration: none; + font-weight: bold; + line-height: 1; + font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif; + position: relative; + cursor: pointer; + border: none; + } + + /* Don't use native buttons on iOS */ + input[type=submit].button { -webkit-appearance: none; } + + .button.nice { + background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px; + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); + text-shadow: 0 -1px 1px rgba(0,0,0,0.28); + background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%); + background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -34px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.4)), color-stop(100%,transparent)); + border: 1px solid #0593dc; + -webkit-transition: background-color .15s ease-in-out; + -moz-transition: background-color .15s ease-in-out; + -o-transition: background-color .15s ease-in-out; + } + + .button.radius { + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + } + .button.round { + -moz-border-radius: 1000px; + -webkit-border-radius: 1000px; + border-radius: 1000px; + } + + .button.full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; + } + + .button.left-align { + text-align: left; + text-indent: 12px; + } + + /* Sizes ---------- */ + .small.button { font-size: 11px; padding: 8px 20px 10px; width: auto; } + .medium.button { font-size: 13px; width: auto; } + .large.button { font-size: 18px; padding: 11px 48px 13px; width: auto; } + + /* Nice Sizes ---------- */ + .nice.small.button { background-position: 0 -36px; } + .nice.large.button { background-position: 0 -30px; } + + /* Colors ---------- */ + .blue.button { background-color: #00a6fc; } + .red.button { background-color: #e91c21; } + .white.button { background-color: #e9e9e9; color: #333; } + .black.button { background-color: #141414; } + + /* Nice Colors ---------- */ + .nice.blue.button { border: 1px solid #0593dc; } + .nice.red.button { border: 1px solid #b90b0b; } + .nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; } + .nice.black.button { border: 1px solid #000; } + + /* Hovers ---------- */ + .button:hover, .button:focus { background-color: #0192dd; color: #fff; } + .blue.button:hover, .blue.button:focus { background-color: #0192dd; } + .red.button:hover, .red.button:focus { background-color: #d01217; } + .white.button:hover, .white.button:focus { background-color: #dadada; color: #333; } + .black.button:hover, .black.button:focus { background-color: #000; } + + /* Disabled ---------- */ + .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; } + + + +/* -------------------------------------------------- + Alerts + -------------------------------------------------- */ + + div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; background: #eee; border: 1px solid rgba(0,0,0,0.1); margin-bottom: 12px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 0 1px rgba(255,255,255,0.9); position: relative; } + .alert-box.success { background-color: #7fae00; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } + .alert-box.warning { background-color: #c08c00; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } + .alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); } + + .alert-box a.close { color: #000; position: absolute; right: 4px; top: 0; font-size: 18px; opacity: 0.2; padding: 4px; } + .alert-box a.close:hover,.alert-box a.close:focus { opacity: 0.4; } + + +/* -------------------------------------------------- + Tabs + -------------------------------------------------- */ + dl.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; } + dl.tabs dt { display: block; width: auto; height: 30px; padding: 0 9px 0 20px; line-height: 30px; float: left; color: #999; font-size: 11px; text-transform: uppercase; cursor: default; } + dl.tabs dt:first-child { padding: 0 9px 0 0; } + dl.tabs dd { display: block; width: auto; height: 30px; padding: 0; float: left; } + dl.tabs dd a { display: block; width: auto; height: 29px; padding: 0 9px; line-height: 30px; border: solid 1px #ddd; margin: 0 -1px 0 0; color: #555; background: #eee; } + dl.tabs dd a.active { background: #fff; border-width: 1px 1px 0 1px; height: 30px; } + + .nice.tabs { border-bottom: solid 1px #eee; margin: 0 0 30px 0; height:43px; } + .nice.tabs dd a { padding: 7px 18px 9px; font-size: 15px; font-size: 1.5rem; color: #555555; background: none; border: none; } + .nice.tabs dd a.active { font-weight: bold; color: #333; background: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 3px solid #00a6fc; margin: 0 10px; position: relative; top: -5px; } + .nice.tabs dd:first-child a.active { margin-left: 0; } + + dl.tabs.vertical { height: auto; } + dl.tabs.vertical dt, dl.tabs.vertical dd, dl.nice.tabs.vertical dt, dl.nice.tabs.vertical dd { float: none; height: auto; } + dl.tabs.vertical dd a { display: block; width: auto; height: auto; padding: 15px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 1px 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } + dl.tabs.vertical dd a.active { height: auto; margin: 0; border-width: 1px 0 0; background: #fff; } + + .nice.tabs.vertical { border-bottom: solid 1px #eee; height: auto; } + .nice.tabs.vertical dd a { padding: 15px 20px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; border-top: 1px solid #eee; background: #fff; } + .nice.tabs.vertical dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } + .nice.tabs.vertical dd:first-child a.active { margin: 0; } + + ul.tabs-content { margin: 0; display: block; } + ul.tabs-content>li { display:none; } + ul.tabs-content>li.active { display: block; } + + dl.contained, dl.nice.contained { margin-bottom: 0; } + dl.contained.tabs dd a { padding: 0 14px; } + dl.nice.contained.tabs dd a { padding: 7px 18px 9px; } + + ul.contained.tabs-content { padding: 0; } + ul.contained.tabs-content>li { padding: 20px; border: solid 0 #ddd; border-width: 0 1px 1px 1px; } + ul.nice.contained.tabs-content>li { border-color: #eee; } + +/* -------------------------------------------------- + Pagination + -------------------------------------------------- */ + ul.pagination { display: block; height: 24px; margin-left: -5px; } + ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; } + ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; } + ul.pagination li.current a, ul.pagination li:hover a, ul.pagination li a:focus { border-bottom: solid 2px #00a6fc; color: #141414; } + ul.pagination li.unavailable a { cursor: default; color: #999; } + ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { border-bottom: none; } + +/* -------------------------------------------------- + Lists + -------------------------------------------------- */ + ul.nice, ol.nice { list-style: none; margin: 0; } + ul.nice li, ol.nice li { padding-left: 13px; position: relative } + ul.nice li span.bullet, ol.nice li span.number { position: absolute; left: 0; top: 0; color: #ccc; } + +/* -------------------------------------------------- + Panels + -------------------------------------------------- */ + div.panel { + padding: 20px 20px 2px 20px; + background: #efefef; + background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#F4F4F4)); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#F4F4F4',GradientType=0 ); + box-shadow: 0 2px 5px rgba(0,0,0,0.15); + -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15); + -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25); + margin: 0 0 20px 0; + } + +/* -------------------------------------------------- + Nav Bar with Dropdowns + -------------------------------------------------- */ + + .nav-bar { height: 45px; background: #fff; margin-top: 20px; border: 1px solid #ddd; } + .nav-bar>li { float: left; display: block; position: relative; padding: 0; margin: 0; border-right: 1px solid #ddd; line-height: 45px; } + .nav-bar>li>a { position: relative; font-size: 14px; padding: 0 20px; display: block; text-decoration: none; font-size: 15px; font-size: 1.5rem; } + .nav-bar>li>input { margin: 0 16px; } + .nav-bar>li ul { margin-bottom: 0; } + .nav-bar>li li { line-height: 1.3; } + .nav-bar>li.has-flyout>a { padding-right: 36px; } + .nav-bar>li.has-flyout>a:after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #2a85e8; display: block; position: absolute; right: 18px; bottom: 20px; } + .nav-bar>li:hover>a { color: #141414; z-index: 2; } + .nav-bar>li:hover>a:after { border-top-color: #141414; } + + .flyout { background: #fff; margin: 0; padding: 20px; border: 1px solid #ddd; position: absolute; top: 45px; left: -1px; width: 400px; z-index: 10; } + .flyout.small { width: 200px; } + .flyout.large { width: 600px; } + .flyout.right { left: auto; right: 0; } + .flyout p:last-child { margin-bottom: 0; } + .nav-bar>li .flyout { display: none; } + .nav-bar>li:hover .flyout { display: block; } + + +/* -------------------------------------------------- + Video + Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ + -------------------------------------------------- */ + + .flex-video { + position: relative; + padding-top: 25px; + padding-bottom: 67.5%; + height: 0; + margin-bottom: 16px; + overflow: hidden; + } + + .flex-video.widescreen { padding-bottom: 57.25%; } + .flex-video.vimeo { padding-top: 0; } + + .flex-video iframe, + .flex-video object, + .flex-video embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + + +/* -------------------------------------------------- + Microformats + -------------------------------------------------- */ + + /* hCard */ + ul.vcard { display: inline-block; margin: 0 0 12px 0; border: 1px solid #ddd; padding: 10px; } + ul.vcard li { margin: 0; display: block; } + ul.vcard li.fn { font-weight: bold; font-size: 15px; font-size: 1.5rem; } + + p.vevent span.summary { font-weight: bold; } + p.vevent abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; } + + + + + +/* Artfully masterminded by ZURB + Make sure to include app.js / foundation.js if you are going to use inline label inputs +*/ + + +/* ----------------------------------------- + Standard Forms +----------------------------------------- */ + + form { margin: 0 0 18px; } + form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; } + + input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; } + input.input-text, textarea, select { display: block; margin-bottom: 9px; } + label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; } + + /* Text input and textarea font and padding */ + input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; background: #fff; } + input.input-text:focus, textarea:focus { outline: none !important; } + input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; } + input.input-text:focus, textarea:focus { background: #f9f9f9; } + + /* Inlined Label Style */ + input.placeholder, textarea.placeholder { color: #888; } + + /* Text input and textarea sizes */ + input.input-text, textarea { width: 254px; } + input.small, textarea.small { width: 134px; } + input.medium, textarea.medium { width: 254px; } + input.large, textarea.large { width: 434px; } + + /* Fieldsets */ + form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; } + + /* Inlined Radio & Checkbox */ + .form-field input[type=radio], div.form-field input[type=checkbox] { display: inline; width:auto; margin-bottom:0; } + + /* Errors */ + .form-field.error input, input.input-text.red { border-color: #C00000; background-color: rgba(255,0,0,0.15); } + .form-field.error label, label.red { color: #C00000; } + .form-field.error small, small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: #C00000; width: 260px; } + + .small + small.error { width: 140px; } + .medium + small.error { width: 260px; } + .large + small.error { width: 440px; } + + /* ----------------------------------------- + Nicer Forms + ----------------------------------------- */ + form.nice div.form-field input, form.nice input.input-text, form.nice textarea { border: solid 1px #bbb; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } + form.nice div.form-field input, form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff; } + form.nice div.form-field input:focus, form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; } + + form.nice fieldset { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } + + form.nice div.form-field input[type=radio], form.nice div.form-field input[type=checkbox] { display: inline; width:auto; margin-bottom:0; } + + form.nice div.form-field.error small, form.nice small.error { padding: 6px 4px; border: solid 0 #C00000; border-width: 0 1px 1px 1px; margin-top: -10px; background: #C00000; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; } + + form.nice div.form-field.error .small + small, form.nice .small + small.error { width: 132px; } + form.nice div.form-field.error .medium + small, form.nice .medium + small.error { width: 252px; } + form.nice div.form-field.error .large + small, form.nice .large + small.error { width: 432px; } + + /* ----------------------------------------- + Custom Forms + ----------------------------------------- */ + + form.custom span.custom { display: inline-block; width: 14px; height: 14px; position: relative; top: 2px; border: solid 1px #ccc; background: url(../images/misc/custom-form-sprites.png) 0 0 no-repeat; } + form.custom span.custom.radio { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; } + form.custom span.custom.radio.checked { background-position: 0 -14px; } + form.custom span.custom.checkbox.checked { background-position: 0 -28px; } + + form.custom div.custom.dropdown { position: relative; display: inline-block; width: auto; height: 28px; margin-bottom: 9px; } + form.custom div.custom.dropdown a.current { display: block; width: auto; line-height: 26px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; } + form.custom div.custom.dropdown a.selector { position: absolute; width: 26px; height: 26px; display: block; background: url(../images/misc/custom-form-sprites.png) -14px 0 no-repeat; right: 0; top: 0; border: solid 1px #ddd; } + form.custom div.custom.dropdown:hover a.selector, + form.custom div.custom.dropdown.open a.selector { background-position: -14px -26px; } + + form.custom div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0; top: 27px; margin: 0; padding: 0; background: rgba(255,255,255,0.9); border: solid 1px #ddd; z-index: 10; } + form.custom div.custom.dropdown ul li { cursor: pointer; padding: 3px 38px 3px 6px; margin: 0; white-space: nowrap} + form.custom div.custom.dropdown ul li.selected { background: url(../images/misc/custom-form-sprites.png) right -52px no-repeat; } + form.custom div.custom.dropdown ul li:hover { background-color: #2a85e8; color: #fff; } + form.custom div.custom.dropdown ul li.selected:hover { background: url(../images/misc/custom-form-sprites.png) #2a85e8 right -78px no-repeat; } + form.custom div.custom.dropdown ul.show { display: block; } + + form.custom div.custom.dropdown.open ul { display: block; } + + +/* CSS for jQuery Orbit Plugin 1.2.3 + * www.ZURB.com/playground + * Copyright 2010, ZURB + * Free to use under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + + + +/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY + ================================================== */ +#caseStudies { + width: 1000px; + height: 210px; + background: #fff url('../images/orbit/loading.gif') no-repeat center center; + overflow: hidden; } +#caseStudies>img, +#caseStudies>div, +#caseStudies>a { display: none; } + + + + +/* CONTAINER + ================================================== */ + +div.orbit-wrapper { + width: 1px; + height: 1px; + position: relative; } + +div.orbit { + width: 1px; + height: 1px; + position: relative; + overflow: hidden } + +div.orbit.with-bullets { + margin-bottom: 40px; +} + +div.orbit>img { + position: absolute; + top: 0; + left: 0; + /* display: none; */ } + +div.orbit>a { + border: none; + position: absolute; + top: 0; + left: 0; + line-height: 0; + display: none; } + +.orbit>div { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + +/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */ + + +/* TIMER + ================================================== */ + +div.timer { + width: 40px; + height: 40px; + overflow: hidden; + position: absolute; + top: 10px; + right: 10px; + opacity: .6; + cursor: pointer; + z-index: 1001; } + +span.rotator { + display: block; + width: 40px; + height: 40px; + position: absolute; + top: 0; + left: -20px; + background: url(../images/orbit/rotator-black.png) no-repeat; + z-index: 3; } + +span.mask { + display: block; + width: 20px; + height: 40px; + position: absolute; + top: 0; + right: 0; + z-index: 2; + overflow: hidden; } + +span.rotator.move { + left: 0 } + +span.mask.move { + width: 40px; + left: 0; + background: url(../images/orbit/timer-black.png) repeat 0 0; } + +span.pause { + display: block; + width: 40px; + height: 40px; + position: absolute; + top: 0; + left: 0; + background: url(../images/orbit/pause-black.png) no-repeat; + z-index: 4; + opacity: 0; } + +span.pause.active { + background: url(../images/orbit/pause-black.png) no-repeat 0 -40px } + +div.timer:hover span.pause, +span.pause.active { + opacity: 1 } + + +/* CAPTIONS + ================================================== */ + +.orbit-caption { + display: none; + font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; } + +.orbit-wrapper .orbit-caption { + background: #000; + background: rgba(0,0,0,.6); + z-index: 1000; + color: #fff; + text-align: center; + padding: 7px 0; + font-size: 13px; + position: absolute; + right: 0; + bottom: 0; + width: 100%; } + + +/* DIRECTIONAL NAV + ================================================== */ + +div.slider-nav { + display: block } + +div.slider-nav span { + width: 78px; + height: 100px; + text-indent: -9999px; + position: absolute; + z-index: 1000; + top: 50%; + margin-top: -50px; + cursor: pointer; } + +div.slider-nav span.right { + background: url(../images/orbit/right-arrow.png); + right: 0; } + +div.slider-nav span.left { + background: url(../images/orbit/left-arrow.png); + left: 0; } + +/* BULLET NAV + ================================================== */ + +.orbit-bullets { + position: absolute; + z-index: 1000; + list-style: none; + bottom: -40px; + left: 50%; + margin-left: -50px; + padding: 0; } + +.orbit-bullets li {