/* Foundation v2.2 http://foundation.zurb.com */ /* Artfully Masterminded by ZURB */ /* -------------------------------------------------- :: 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: #777; position: relative; -webkit-font-smoothing: antialiased;} /* -------------------------------------------------- :: Links -------------------------------------------------- */ a { color: #2a85e8; text-decoration: none; line-height: inherit; -moz-transition: all .1s ease-in-out 0s; -webkit-transition: all .1s ease-in-out 0s; -ms-transition: all .1s ease-in-out 0s; -o-transition: all .1s ease-in-out 0s;} a.bluelink {color: #2a85e8 !important;} a:hover { color: #11639d; } a:focus { color: #cc4714; outline: none; top:1px; position:relative; } 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; } ul.arrow li {background: url("../images/icons/arrow.png") no-repeat scroll 0 0 transparent;list-style: none outside none; padding-left: 25px;} ul.check li {background: url("../images/icons/check.png") no-repeat scroll 0 0 transparent;list-style: none outside none; padding-left: 25px;} ul.cross li {background: url("../images/icons/cross.png") no-repeat scroll 0 0 transparent;list-style: none outside none; padding-left: 25px;} ul.document li {background: url("../images/icons/document.png") no-repeat scroll 0 0 transparent;list-style: none outside none; padding-left: 25px;} ul.lock li {background: url("../images/icons/lock.png") no-repeat scroll 0 0 transparent;list-style: none outside none; padding-left: 25px;} ul.plus li {background: url("../images/icons/plus.png") no-repeat scroll 0 0 transparent;list-style: none outside none; padding-left: 25px;} ul.star li {background: url("../images/icons/star.png") no-repeat scroll 0 0 transparent;list-style: none outside none; padding-left: 25px;} ul.zoom li {background: url("../images/icons/zoom.png") no-repeat scroll 0 0 transparent;list-style: none outside none; padding-left: 25px;} /* -------------------------------------------------- :: Tables -------------------------------------------------- */ table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd; width:100%; } 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; } table.zebra {text-align:left; margin-bottom:25px;} table.zebra th { color: #444; font-size: 14px; font-weight: normal; padding: 10px 8px; } table.zebra td {color: #777;padding: 8px;} table.zebra tr.odd {background:#f2f2f2;} table.minimal { background: #FFFFFF; border-collapse: collapse; text-align: left;margin-bottom:25px; } table.minimal th { border-bottom: 2px solid #444; color: #666666; font-size: 14px; font-weight: normal; padding: 10px; } table.minimal td { border-bottom: 1px solid #CCCCCC; color: #999; padding: 8px 10px; } table.minimal tbody tr:hover td {color:#444;} table.box {text-align:left;border-collapse:collapse;margin-bottom:25px; } table.box th {font-weight:normal;background:#ccc;border-top:4px solid #ddd;border-bottom:1px solid #fff;color:#666666;padding:10px;} table.box td {background:#f9f9f9;border-bottom:1px solid #fff;color:#999;border-top:1px solid transparent;padding:8px 10px;} table.box tr:hover td {background:#eee;color:#444;} .simple {border-top:1px solid #CFCFCF; border-left:1px solid #CFCFCF; border-right:0; border-bottom:0; width:100%;} .simple td, .simple-style th {border-right:1px solid #CFCFCF; border-bottom:1px solid #CFCFCF; text-align:center; padding:5px 0; width:20%;} .simple th {background-color:#dedede; font-size:120%;text-shadow: 0 1px 0 #fff;} .simple tr:nth-child(even) {background: #fff;} .simple tr:nth-child(odd) {background: #F6F6F6;} /* -------------------------------------------------- :: Misc ---------------------------------------------------*/ .left { float: left; } .right { float: right; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .hide { display: none; } .highlight { background: #ff0; } /* Artfully Masterminded by ZURB */ /* -------------------------------------------------- :: Typography -------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: #181818; font-family: 'Marvel', "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.25; font-weight:100;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 29px; font-size: 2.9rem; margin-bottom: 18px;} h2 { font-size: 26px; font-size: 2.6rem; margin-bottom: 9px; } h3 { font-size: 23px; font-size: 2.3rem; margin-bottom: 9px; } h4 { font-size: 20px; font-size: 2.0rem; margin-bottom: 3px; } h5 { font-size: 17px; font-size: 1.7rem; font-weight: normal; margin-bottom: 3px; } h6 { font-size: 14px; font-size: 1.4rem; font-weight: normal; } .subheader { color: #777; font-weight: 300; margin-bottom: 24px; } p { font-size: 13px; font-size: 1.3rem; line-height: 1.75; margin: 0 0 18px; } p img { margin: 0; } p.lead { font-size: 18px; font-size: 1.8rem; line-height: 1.5; } 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:before {content:"\000022"; font-size:500%;float:left;font-family: Arial,Helvetica,sans-serif;margin: 20px 20px 0 0;} blockquote, blockquote p { line-height: 20px; color: #777; font-family: Georgia,"Times New Roman",Times,serif; font-style: italic;margin: 20px 0;} 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: 30px 0 40px 0; height: 0; } .totop {background: url("../images/icons/totop.png") no-repeat scroll 0 0 transparent; padding-left: 20px;} abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; } abbr { text-transform: none; } p.dropcap:first-letter {display: block;float: left;font-family: Georgia,"Times New Roman",Times,serif;font-size: 280%;margin: 7px 4px 0 0;} code { background:url(../images/extensions/code.png) #f7f7f7; padding: 20px; display: block; font-size: 12px; color: #555; margin-bottom: 10px; border: 1px solid #ccc; clear: both; font:12px/1.5 Courier, "Courier New", monospace; white-space: pre; overflow:auto; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px;} /** * 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; } } /* Artfully 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; } [class*="column"] + [class*="column"]:last-child { float: right; } .row .one { width: 4.3%; } .row .two { width: 13%; } .row .three { width: 21.679%; } .row .four { width: 30.37%; } .row .five { width: 39.1%; } .row .six { width: 47.8%; } .row .seven { width: 56.5%; } .row .eight { width: 65.2%; } .row .nine { width: 73.9%; } .row .ten { width: 82.6%; } .row .eleven { width: 91.3%; } .row .twelve { 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; } #map_canvas img, .map_canvas img {max-width: none!important;} /* 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; } .row.display { background: none repeat scroll 0 0 #F4F4F4; border-radius: 3px 3px 3px 3px; margin-bottom: 10px; } .row.display .column, .row.display .columns { background: none repeat scroll 0 0 #E7E7E7; border-radius: 3px 3px 3px 3px; font-size: 11px; padding-bottom: 6px; padding-top: 6px; text-indent: 3px; } /* -------------------------------------------------- :: 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.2%; } /* .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 */ /* -------------------------------------------------- Buttons -------------------------------------------------- */ .button, .pagenav-prev a, .pagenav-next a { background: #00a6fc; text-align: center; padding: 9px 34px 11px; color: #fff; text-decoration: none; font-weight: bold; font-size: 13px; font-size: 1.3rem; line-height: 1; font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif; position: relative; cursor: pointer; border: none; outline: none; margin: 0; } /* Don't use native buttons on iOS */ input[type=submit].button, button.button { -webkit-appearance: none; } /* Hide inner focus effect in Firefox */ button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; } .button.nice { background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -31px; -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); 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 -31px, -moz-linear-gradient(top, rgba(255,255,255,.4) 0%, transparent 100%); background: #00a6fc url(../images/misc/button-gloss.png) repeat-x 0 -31px, -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 ---------- */ .mini.button {font-size: 11px; padding: 3px 10px 2px; width: auto;} .tiny.button { font-size: 10px; padding: 6px 14px 8px; width: auto; } .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.mini.button { background-position: 0 -41px; } .nice.tiny.button { background-position: 0 -37px; } .nice.small.button { background-position: 0 -34px; } .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; } .green.button { background-color: #5b8737; } /* 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; } .nice.green.button { border: 1px solid #4a6b2d; } /* 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; } .green.button:hover, .green.button:focus { background-color: #699c40; } /* Hovers ---------- */ .nice.button:active { -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.15); -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.15); box-shadow: inset 0 1px 0 rgba(0,0,0,.15); } /* Disabled ---------- */ .button.disabled, .button[disabled] { opacity: 0.6; cursor: default; } /* Correct FF button padding */ @-moz-document url-prefix(http://) { input[type=submit].button::-moz-focus-inner, button.button::-moz-focus-inner { border: 0; padding: 0; } input[type=submit].tiny.button { padding: 5px 14px 7px; } input[type=submit].small.button { padding: 7px 20px 8px; } input[type=submit].medium.button { padding: 8px 34px 9px; } input[type=submit].large.button { padding: 9px 48px 10px; } } /* -------------------------------------------------- Alerts -------------------------------------------------- */ div.alert-box { background: none repeat scroll 0 0 #EEEEEE; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px 3px 3px 3px; display: block; font-size: 13px; font-weight: bold; margin-bottom: 12px; padding: 6px 30px 6px 7px; position: relative; text-shadow: 0 1px rgba(255, 255, 255, 0.9); } .alert-box.success { background-color: #7FAE00; color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } .alert-box.warning { background-color: #F68B01; color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } .alert-box.error { background-color: #C00000; color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } .alert-box.info { background-color: #2A85E8; color: #FFFFFF; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } .alert-box a.close { color: #000000; font-size: 18px; opacity: 0.2; padding: 4px; position: absolute; right: 4px; top: 0; } .alert-box a.close:hover, .alert-box a.close:focus { opacity: 0.4; } /* -------------------------------------------------- Labels -------------------------------------------------- */ .label { padding: 0 4px 2px; font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: #00a6fc; } .label.radius { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .label.round { padding: 1px 7px 2px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } /* Colors ---------- */ .blue.label { background-color: #00a6fc; } .red.label { background-color: #e91c21; } .green.label { background-color: #7fae00; } .white.label { background-color: #e9e9e9; color: #333; } .black.label { background-color: #141414; } /* -------------------------------------------------- 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;-moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important; } dl.tabs dd a.active { background: #fff; border-width: 1px 1px 0 1px; height: 30px; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} .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; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} .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; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} .nice.tabs dd:first-child a.active { margin-left: 0; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} 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; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} dl.tabs.vertical dd a.active { height: auto; margin: 0; border-width: 1px 0 0; background: #fff; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} .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;-moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important; } .nice.tabs.vertical dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} .nice.tabs.vertical dd:first-child a.active { margin: 0; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} 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; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} dl.nice.contained.tabs dd a { padding: 7px 18px 9px; -moz-transition:none !important; -webkit-transition:none !important; -ms-transition:none !important; -o-transition:none !important;} ul.contained.tabs-content { padding: 0; } ul.contained.tabs-content>li { padding: 20px; border: solid 0 #ddd; border-width: 0 1px 1px 1px; } ul.contained.vertical.tabs-content>li { border-width: 1px 1px 1px 1px; } ul.nice.contained.tabs-content>li { border-color: #eee; } /* -------------------------------------------------- Pagination -------------------------------------------------- */ .pagination {border-bottom: 1px solid #D3D3D3; border-top: 1px solid #D3D3D3; height: 15px; padding: 10px 0;clear:both;} .pagenav {padding: 0 5px;} .pagination ul, .pagination p { display: inline-block; line-height:1; } .pagination ul li { float: left; display: block; color: #999; font-size: 12px; } .pagination ul li pagenav { display: block; color: #555; } .pagination ul li a.pagenav:hover { border-bottom: solid 1px #00a6fc; color: #141414; } .counter {padding: 0 15px 0 0; margin: 0 15px 0 0; font-size: 12px; margin-bottom: 18px; vertical-align:top; border-right: 1px solid #555555;} /* -------------------------------------------------- Breadcrumbs -------------------------------------------------- */ .breadcrumbs { display: block; background: #f4f4f4; padding: 7px 10px; border: 1px solid #ddd; border-radius: 2px; overflow: hidden; margin:10px 0 25px 0;font-size:11px; text-transform: uppercase;} .breadcrumbs span, .breadcrumbs a {padding: 0 5px;} /* -------------------------------------------------- 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, .advanced-search-tip { 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)); background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%); 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;margin:0;float:right;} .nav-bar>li { float: left; display: block; position: relative; padding: 0; margin: 0; line-height: 45px; } .nav-bar>li>a.main { position: relative; 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:0;} .nav-bar>li ul li { line-height: 1;margin:0; } .nav-bar>li ul li a {display:block;padding:12px 8px;color:#666;} .nav-bar>li ul li ul li a {display:block;padding:4px 8px 4px 25px;} .nav-bar>li ul li a:hover {background: #9fc3ea;} .nav-bar>li li { line-height: 1.3; } .nav-bar>li.has-flyout>a.main { padding-right: 36px; } .nav-bar>li.has-flyout>a.flyout-toggle { position: absolute; right: 0; top: 0; margin: 0 20px 0 0; padding: 22px 0; z-index: 2; display: block; } .nav-bar>li.has-flyout>a.flyout-toggle span { content: ""; width: 0; height: 0; border-left: 4px solid transparent;border-right: 4px solid transparent; border-top: 4px solid #2a85e8; display: block; } .flyout { background: #fff; margin: 0; padding: 0; border: 1px solid #ddd; position: absolute; top: 45px; left: -1px; width: 400px; z-index: 40; } .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; } ul.dritte li a {font-size:12px;padding:0 0 0 20px;color: #999 !important;} ul.dritte li a:before {content:"• ";color:#999;} ul.dritte li a.flyout-toggle, .nav-bar>li ul li a.flyout-toggle {display:none !important;} ul.dritte {line-height:10px; padding: 0;} .nav-bar>li>a {color:#fff;} .nav-bar>li>a:hover {color:#2A85E8;} .nav-bar>li ul li a:hover {color:#000;} /* -------------------------------------------------- Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na -------------------------------------------------- */ dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px -9px; padding-top: 4px; } dl.sub-nav dt, dl.sub-nav dd { float: left; display: inline; margin-left: 9px; margin-bottom: 4px; } dl.sub-nav dt { color: #999; font-weight: normal; } dl.sub-nav dd a { text-decoration: none; -webkit-border-radius: 12px; -moz-border-radius: 12px; } dl.sub-nav dd.active a { background: #00A6FC; color: #fff; padding: 3px 9px; } /* -------------------------------------------------- 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; } /* -------------------------------------------------- Tooltips -------------------------------------------------- */ .has-tip { border-bottom: dotted 1px #ccc; cursor: help; font-weight: bold; color: #333; } .has-tip:hover { border-bottom: dotted 1px #0593dc; color: #0192dd; } .tooltip { display: none; background: rgb(0,0,0); background: rgba(0,0,0,0.8); position: absolute; color: #fff; font-weight: bold; font-size: 12px; font-size: 1.2rem; padding: 5px; z-index: 999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; line-height: normal; } .tooltip > .nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent rgb(0,0,0) transparent; border-color: transparent transparent rgba(0,0,0,0.8) transparent; position: absolute; top: -10px; left: 10px; } .tooltip.tip-override > .nub { border-color: transparent transparent rgb(0,0,0) transparent !important; border-color: transparent transparent rgba(0,0,0,0.8) transparent !important; top: -10px !important; } .tooltip.tip-top > .nub { border-color: rgb(0,0,0) transparent transparent transparent; border-color: rgba(0,0,0,0.8) transparent transparent transparent; top: auto; bottom: -10px; } .tooltip.tip-left, .tooltip.tip-right, .has-tip.tip-left, .has-tip.tip-right { float: none !important; } .tooltip.tip-left > .nub { border-color: transparent transparent transparent rgb(0,0,0); border-color: transparent transparent transparent rgba(0,0,0,0.8); right: -10px; left: auto; } .tooltip.tip-right > .nub { border-color: transparent rgb(0,0,0) transparent transparent; border-color: transparent rgba(0,0,0,0.8) transparent transparent; right: auto; left: -10px; } .tooltip.noradius { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .has-tip.opened { color: #0192DD !important; border-bottom: dotted 1px #0593DC !important; } .tap-to-close { display: block; font-size: 10px; font-size: 1.0rem; color: #888; font-weight: normal; } /* 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; font-family:arial,helvetica,sans-serif;} form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; font-family:arial,helvetica,sans-serif;} input {font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(../images/misc/input-bg.png) #fff;border: 1px solid #BBBBBB;border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; font-family:arial,helvetica,sans-serif; } input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; font-family:arial,helvetica,sans-serif;} input.input-text, textarea, select { display: block; margin-bottom: 9px; font-family:arial,helvetica,sans-serif;} 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; } /* Text input and textarea, disabled */ input.input-text[disabled], textarea[disabled] { background-color: #ddd; } /* Inlined Label Style */ input.placeholder, textarea.placeholder { color: #888; } /* Text input and textarea sizes */ input.input-text, textarea { width: 254px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } input.small, textarea.small { width: 134px; } input.medium, textarea.medium { width: 254px; } input.large, textarea.large { width: 434px; } input.expand, textarea.expand { width: 100%; } /* Fieldsets */ form fieldset { padding: 10px; border: solid 1px #ddd; margin: 20px 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: 254px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .small + small.error { width: 134px; } .medium + small.error { width: 254px; } .large + small.error { width: 434px; } .expand + small.error { width: 100%; } .small.oversize + small.error { width: 144px; } .medium.oversize + small.error { width: 264px; } .large.oversize + small.error { width: 444px; } .expand.oversize + small.error { width: 100%; } /* ----------------------------------------- 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; } /* Text input and textarea, disabled */ form.nice div.form-field input[disabled], form.nice input.input-text[disabled], form.nice textarea[disabled] { background-color: #ddd; } 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; } form.nice div.form-field.error .small.oversize + small, form.nice .small.oversize + small.error { width: 136px; } form.nice div.form-field.error .medium.oversize + small, form.nice .medium.oversize + small.error { width: 256px; } form.nice div.form-field.error .large.oversize + small, form.nice .large.oversize + small.error { width: 436px; } /* ----------------------------------------- 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 { display: block; position: relative; width: auto; height: 28px; margin-bottom: 9px; margin-top: 2px; } form.custom div.custom.dropdown a.current { display: block; width: auto; line-height: 26px; min-height: 26px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; background-color: #fff; } form.custom div.custom.dropdown a.selector { position: absolute; width: 26px; height: 26px; display: block; background: url(../images/misc/custom-form-sprites.png) -14px 1px 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: #fff; background: rgba(255,255,255,0.95); border: solid 1px #ddd; } form.custom div.custom.dropdown ul li { cursor: pointer; padding: 3px 38px 3px 6px; min-height: 18px; 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; z-index: 10; } form.custom div.custom.dropdown.small { width: 134px !important; } form.custom div.custom.dropdown.medium { width: 254px !important; } form.custom div.custom.dropdown.large { width: 434px !important; } form.custom div.custom.dropdown.expand { width: 100% !important; } form.custom div.custom.dropdown.open.small ul { width: 132px !important; } form.custom div.custom.dropdown.open.medium ul { width: 252px !important; } form.custom div.custom.dropdown.open.large ul { width: 432px !important; } form.custom div.custom.dropdown.open.expand ul { width: 100% !important; box-sizing: border-box; } /* Custom input, disabled */ form.custom .custom.disabled { background-color: #ddd; } /* ----------------------------------------- Nicer Custom Forms ----------------------------------------- */ form.custom.nice span.custom.checkbox { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } form.custom.nice div.custom.dropdown a.current { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-image: url(../images/misc/input-bg-outset.png); background-position: bottom right; } form.custom.nice div.custom.dropdown a.selector { height: 27px; border-width: 0 0 0 1px; } form.custom.nice div.custom.dropdown ul { 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; } /* CSS for jQuery Orbit Plugin 1.4.0 * Maintained for Foundation. foundation.zurb.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php /* 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 .orbit-slide { max-width: 100%; position: absolute; top: 0; left: 0; } div.orbit a.orbit-slide { border: none; line-height: 0; display: none; } div.orbit div.orbit-slide { 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.orbit-wrapper div.timer { width: 40px; height: 40px; overflow: hidden; position: absolute; top: 10px; right: 10px; opacity: .6; cursor: pointer; z-index: 31; } div.orbit-wrapper 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; } div.orbit-wrapper span.mask { display: block; width: 20px; height: 40px; position: absolute; top: 0; right: 0; z-index: 2; overflow: hidden; } div.orbit-wrapper span.rotator.move { left: 0 } div.orbit-wrapper span.mask.move { width: 40px; left: 0; background: url(../images/orbit/timer-black.png) repeat 0 0; } div.orbit-wrapper 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; } div.orbit-wrapper span.pause.active { background: url(../images/orbit/pause-black.png) no-repeat 0 -40px } div.orbit-wrapper div.timer:hover span.pause, div.orbit-wrapper span.pause.active { opacity: 1 } /* CAPTIONS ================================================== */ .orbit-caption { display: none; font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; } .orbit-wrapper .orbit-caption { background: none; z-index: 30; color: #fff; text-align: left; padding: 120px 0 0 0; font-size: 13px; position: absolute; left: 0; top: 0; width: 33%; } /* DIRECTIONAL NAV ================================================== */ div.orbit-wrapper div.slider-nav { display: block } div.orbit-wrapper div.slider-nav span { width: 39px; height: 50px; text-indent: -9999px; position: absolute; z-index: 30; bottom: 20px; cursor: pointer; } div.orbit-wrapper div.slider-nav span.right { background: url(../images/orbit/right-arrow.png); left: 39px; } div.orbit-wrapper div.slider-nav span.left { background: url(../images/orbit/left-arrow.png); left: 0; } /* BULLET NAV ================================================== */ ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -40px; left: 50%; margin-left: -50px; padding: 0; } ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url(../images/orbit/bullets.jpg) no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; } ul.orbit-bullets li.active { color: #222; background-position: -8px 0; } ul.orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; } ul.orbit-bullets li.active.has-thumb { background-position: 0 0; border-top: 2px solid #000; } /* FLUID LAYOUT ================================================== */ div.orbit img.fluid-placeholder { visibility: hidden; position: static; display: block; width: 100%; } div.orbit, div.orbit-wrapper { width: 100% !important; } .slideshow {margin:0 0 25px 0;} ul.orbit-bullets { position: absolute; z-index: 30; list-style: none; bottom: -50px; left: 50%; margin-left: -50px; padding: 0; } ul.orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url(../images/orbit/bullets.jpg) no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; } ul.orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; } ul.orbit-bullets li.active { color: #222; background-position: -8px 0; } ul.orbit-bullets li.active.has-thumb { background-position: 0 0; border-top: 2px solid #000; } /* CSS for jQuery Reveal Plugin * Maintained for Foundation. foundation.zurb.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php /* -------------------------------------------------- Reveal Modals -------------------------------------------------- */ .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background: #000; z-index: 40; display: none; top: 0; left: 0; } .reveal-modal { visibility: hidden; top: 100px; left: 50%; margin-left: -300px; width: 520px; background: #eee url(../images/misc/modal-gloss.png) no-repeat -200px -80px; position: absolute; z-index: 41; padding: 30px 40px 34px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); box-shadow: 0 0 10px rgba(0,0,0,.4); } .reveal-modal.small { width: 200px; margin-left: -140px;} .reveal-modal.medium { width: 400px; margin-left: -240px;} .reveal-modal.large { width: 600px; margin-left: -340px;} .reveal-modal.xlarge { width: 800px; margin-left: -440px;} .reveal-modal .close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold; cursor: pointer; } .reveal-modal .row { min-width: 0; } /* Mobile */ @media handheld, only screen and (max-width: 1023px) { .reveal-modal-bg { position: absolute; } .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 60%; top: 60px; left: 15%; margin-left: 0; padding: 20px; height: auto; } } @media handheld, only screen and (max-width: 767px) { .reveal-modal-bg { position: absolute; } .reveal-modal, .reveal-modal.small, .reveal-modal.medium, .reveal-modal.large, .reveal-modal.xlarge { width: 80%; top: 15px; left: 5%; margin-left: 0; padding: 20px; height: auto; } } /* NOTES Close button entity is × Example markup

Awesome. I have it.

Your couch. I it's mine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam.

×
*/ /* -------------------------------------------------- :: Typography -------------------------------------------------- */ @media handheld, only screen and (max-width: 767px) { h1 { font-size: 32px; font-size: 3.2rem; line-height: 1.3; } h2 { font-size: 28px; font-size: 2.8rem; line-height: 1.3; } h3 { font-size: 21px; font-size: 2.1rem; line-height: 1.3; } h4 { font-size: 18px; font-size: 1.8rem; line-height: 1.2; } h5 { font-size: 16px; font-size: 1.6rem; line-height: 1.2; } h6 { font-size: 15px; font-size: 1.5rem; line-height: 1.2; } body, p { font-size: 15px; font-size: 1.5rem; line-height: 1.4; } } /* -------------------------------------------------- :: Grid -------------------------------------------------- */ /* Mobile */ @media only screen and (max-width: 767px) { body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .container { min-width: 0; margin-left: 0; margin-right: 0; } .row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } .row .row .column, .row .row .columns { padding: 0; } .column, .columns { width: auto !important; float: none; margin-left: 0; margin-right: 0; } .column:last-child, .columns:last-child { margin-right: 0; float: none; } [class*="column"] + [class*="column"]:last-child { float: none; } [class*="column"]:before, [class*="column"]:after { content:""; display:table; } [class*="column"]:after { clear: both; } #selnav {width:100%;float:right;padding:5px 0;} .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .centered { margin-left: 0 !important; } .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto; } .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto; } /* Mobile 4-column Grid */ .row .phone-one:first-child, .row .phone-two:first-child, .row .phone-three:first-child, .row .phone-four:first-child { margin-left: 0; } .row .phone-one:last-child, .row .phone-two:last-child, .row .phone-three:last-child, .row .phone-four:last-child { float: right; } .row .phone-one, .row .phone-two, .row .phone-three, .row .phone-four { margin-left: 4.4%; float: left; min-height: 1px; position: relative; padding: 0; } .row .phone-one { width: 21.68% !important; } .row .phone-two { width: 47.8% !important; } .row .phone-three { width: 73.9% !important; } .row .phone-four { width: 100% !important; } .row .push-one-phone { left: 26.08%; } .row .push-two-phone { left: 52.2% } .row .push-three-phone { left: 78.3% } .row .pull-one-phone { right: 26.08% } .row .pull-two-phone { right: 52.2% } .row .pull-three-phone { right: 78.3%; } } /* -------------------------------------------------- :: Block Grids -------------------------------------------------- */ @media only screen and (max-width: 767px) { .block-grid.mobile { margin-left: 0; } .block-grid.mobile > li { float: none; width: 100%; margin-left: 0; } } /* -------------------------------------------------- :: Mobile Visibility Affordances ---------------------------------------------------*/ .show-on-phones { display: none !important; } .show-on-tablets { display: none !important; } .show-on-desktops { display: block !important; } .hide-on-phones { display: block !important; } .hide-on-tablets { display: block !important; } .hide-on-desktops { display: none !important; } /* Modernizr-enabled tablet targeting */ @media only screen and (max-width: 1280px) and (min-width: 768px) { .touch .hide-on-phones { display: block !important; } .touch .hide-on-tablets { display: none !important; } .touch .hide-on-desktops { display: block !important; } .touch .show-on-phones { display: none !important; } .touch .show-on-tablets { display: block !important; } .touch .show-on-desktops { display: none !important; } } @media only screen and (max-width: 767px) { .hide-on-phones { display: none !important; } .hide-on-tablets { display: block !important; } .hide-on-desktops { display: block !important; } .show-on-phones { display: block !important; } .show-on-tablets { display: none !important; } .show-on-desktops { display: none !important; } } /* Specific overrides for elements that require something other than display: block */ table.show-on-desktops { display: table !important; } table.hide-on-phones { display: table !important; } table.hide-on-tablets { display: table !important; } @media only screen and (max-width: 1280px) and (min-width: 768px) { .touch table.hide-on-phones { display: table !important; } .touch table.hide-on-desktops { display: table !important; } .touch table.show-on-tablets { display: table !important; } } @media only screen and (max-width: 767px) { table.hide-on-tablets { display: table !important; } table.hide-on-desktops { display: table !important; } table.show-on-phones { display: table !important; } } /* -------------------------------------------------- :: Forms ---------------------------------------------------*/ @media only screen and (max-width: 767px) { div.form-field input, div.form-field input.small, div.form-field input.medium, div.form-field input.large, div.form-field input.oversize, input.input-text, input.input-text.oversize, textarea, form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 100%; padding: 6px 2% 4px; font-size: 18px; } form.nice div.form-field input, form.nice div.form-field input.oversize, form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } form.nice div.form-field.error small, form.nice small.error { padding: 6px 2%; display: block; } form.nice div.form-field.error .small + small, form.nice .small + .error { width: auto; } form.nice div.form-field.error .medium + small, form.nice .medium + .error { width: auto; } form.nice div.form-field.error .large + small, form.nice .large + .error { width: auto; } form.nice div.form-field.error .expand + small, form.nice .expand + .error { width: auto; } } /* -------------------------------------------------- :: UI ---------------------------------------------------*/ /* Buttons */ @media only screen and (max-width: 767px) { .button { display: block; } button.button, input[type="submit"].button { width: 100%; padding-left: 0; padding-right: 0; margin-bottom: 5px; } .template-menu {width:100%;} .orbit-caption p {display:none !important;} .orbit-wrapper .orbit-caption {padding:20px 0 0 0;} .slider-nav {display:none !important;} #options li, ul.option-set {width:100%;} } /* Tabs */ @media only screen and (max-width: 767px) { dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; } dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; } dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0 #ccc; border-width: 1px 0 0; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; } dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0 0; } .nice.tabs.mobile { border-bottom: solid 1px #ccc; height: auto; } .nice.tabs.mobile dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; } .nice.tabs.mobile dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0; height: auto; } .nice.tabs.mobile dd:first-child a.active { margin: 0; } dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0; } dl.contained.tabs.mobile dd a { padding: 18px 20px; } dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; } dl.tabs.mobile + ul.contained { margin-left: -20px; margin-right: -20px; border-width: 0 0 1px 0; } } /* Nav Bar */ @media only screen and (max-width: 767px) { .nav-bar { height: auto; } .nav-bar>li { float: none; display: block; border-right: none; } .nav-bar>li>a.main { text-align: left; border-top: 1px solid #ddd; border-right: none; } .nav-bar>li:first-child>a.main { border-top: none; } .nav-bar>li.has-flyout>a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; border-left: 1px dashed #eee; display: block; } .nav-bar>li.has-flyout>a.flyout-toggle span { content: ""; width: 0; height: 0; border-left: 4px solid transparent;border-right: 4px solid transparent; border-top: 4px solid #2a85e8; display: block; } .nav-bar>li.has-flyout>a.flyout-toggle:hover span { border-top-color: #141414; } .flyout { position: relative; width: auto; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px; } .flyout.right { float: none; right: auto; left: -1px; } .flyout.small, .flyout.large { width: auto; } .flyout p:last-child { margin-bottom: 18px; } } /* Tooltips */ @media only screen and (max-width: 767px) { .tooltip { font-size: 14px; font-size: 1.4rem; line-height: 1.4; padding: 7px 10px 9px 10px; } .tooltip > .nub, .tooltip.top > .nub, .tooltip.left > .nub, .tooltip.right > .nub { border-color: transparent transparent rgb(0,0,0) transparent; border-color: transparent transparent rgba(0,0,0,0.85) transparent; top: -12px; left: 10px; } } /* Video */ @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { .flex-video { padding-top: 0; } } #mod-search-searchword {border:none;margin:35px 0 0 0;font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555;border-bottom:1px dotted #999;background:transparent;width:100%;} .template-logo {margin:0 0 20px 0;} .template-menu {margin:0;padding:30px 0 0;} .menutop {padding-bottom: 0 !important;} .clearboth {clear:both;} .landingpage {text-align:center; border-top:1px solid #D3D3D3; border-bottom:1px solid #D3D3D3;padding:5px 0;margin: 15px 0;} .center {text-align:center;} .footer .moduletable {margin: 0 0 20px 0;} .bgblackbottom .moduletable {margin:20px 0 0 0;} .underline h3 {border-bottom: 1px dotted #999999;margin-bottom: 20px;padding-bottom: 10px;} .bgblackbottom h3, .bgblack h3 {color: #fff;} .actions {float:right;} .actions li {display:inline;} nav select {float:right;} .textover {position:relative;top:0;left:0;} .template-slideshow h2 {color:#fff;} .image-with-border-and-shadow {border: 1px solid #d5d5d5;box-shadow: 3px 3px 5px rgba(0,0,0,0.5);} em.box {background: none repeat scroll 0 0 #FDFDFD;border: 1px dotted #AAAAAA;font-family: "Courier New",Courier,monospace;font-style: normal;padding: 0 3px;white-space: nowrap;} h3.acc-header {background: url(../images/icons/faq.png) no-repeat 0 0 transparent;padding: 0 0 0 35px;} /* -------------------------------------------------- :: Modul Class Suffixes ---------------------------------------------------*/ .moduletable.border {border: 1px solid #D3D3D3; padding: 15px;} .moduletable.border h3 {color:#2A85E8;} .moduletable.bg-grey {background: none repeat scroll 0 0 #F0F0F0;border: 1px solid #D5D5D5;padding: 15px;} .moduletable.bg-black {background: none repeat scroll 0 0 #000;border: 1px solid #D5D5D5;padding: 15px;} .moduletable.bg-black h3 {color:#fff;} .moduletable.blue-line {border-left: 2px solid #2A85E8; padding: 0 0 0 15px;} .moduletable.orange-line {border-left: 2px solid #cc4714; padding: 0 0 0 15px;} .moduletable.grey-line {border-left: 2px solid #d3d3d3; padding: 0 0 0 15px;} .moduletable {margin: 20px 0;} /* -------------------------------------------------- :: Icons for Modules ---------------------------------------------------*/ .icon-facebook h3 {background: url(../images/icons/facebook.png) no-repeat 0 0 transparent;padding: 0 0 0 35px;} .icon-twitter h3 {background: url(../images/icons/twitter.png) no-repeat 0 0 transparent;padding: 0 0 0 35px;} .icon-dribble h3 {background: url(../images/icons/dribble.png) no-repeat 0 0 transparent;padding: 0 0 0 35px;} /* -------------------------------------------------- :: XMap Styling ---------------------------------------------------*/ #xmap li, #xmap ul {line-height: 19px;margin: 5px 0;} #xmap ul li a {background-position: -270px 5px;padding-left: 40px;} #xmap ul li li a {background-position: -230px 5px;padding-left: 80px;} #xmap ul li li li a {background-position: -190px 5px;padding-left: 120px;} #xmap ul li li li li a {background-position: -150px 5px;padding-left: 160px;} #xmap ul li a {background-image: url("../images/extensions/xmap-arrow.png");background-repeat: no-repeat;} /* -------------------------------------------------- :: Margin and Paddings ---------------------------------------------------*/ .margin-right-20 {margin-right:20px;} .margin-bottom-10 {margin-bottom: 10px;} .margin-top-27 {margin-top:27px;} .margin-left-5 {margin-left:5px;} /* -------------------------------------------------- :: Mod_Menu ---------------------------------------------------*/ .joomla-nav li a {background: url("../images/extensions/xmap-arrow.png") no-repeat -270px 5px ;padding-left: 40px;} .joomla-nav li a:hover {background: url("../images/extensions/xmap-arrow.png") no-repeat -260px 5px ;padding-left: 50px;} .joomla-nav img {float:left;} .template-menu img {float:left;margin:-3px 5px 0 0;} /* -------------------------------------------------- :: CSS3 Shadows ---------------------------------------------------*/ .box-shadow { position:relative; float:left; width:94%; padding:1em 3%; margin:0 0 30px 0; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .box-shadow:before, .box-shadow:after { content:""; position:absolute; z-index:-2; } .box-shadow p { } /* Lifted corners */ .box1 { -moz-border-radius:4px; border-radius:4px; } .box1:before, .box1:after { bottom:15px; left:10px; width:50%; height:20%; max-width:300px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .box1:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } .box2 { -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } /* Curved shadows */ .box3:before { top:10px; bottom:10px; left:0; right:50%; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; } .box4:before { right:0; } .box5:before { top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .box6:before { top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } /* -------------------------------------------------- :: Com_Content ---------------------------------------------------*/ dl.article-info {border-top: 1px solid #D3D3D3; border-bottom: 1px solid #D3D3D3; font-size:10px;margin: 0 0 10px 0;opacity:0.5;} dl.article-info:hover, dl.article-info:active {opacity:1;} dt.article-info-term {display: none;} dd.category-name, dd.create, dd.modified, dd.published, dd.createdby, dd.hits {display:inline;margin-right: 10px;padding-right:10px;border-right: 1px dotted #D3D3D3;} .archive #month, .archive #year, .archive #limit {display:inline;} .items-row {clear:both;} .categories-list li {padding:10px; border:1px solid #D3D3D3;} .categories-list dt, .categories-list dd {display:inline;} .categories-list dl {border-top: 1px dotted #D3D3D3; padding: 5px 0 0 0; margin: 5px 0 0 0;} .categories-list p {margin:0;} .pagenav-prev {float: left;} .pagenav-next {float: right;} ul.pagenav {padding:20px 0 40px; border-top: 1px solid #d3d3d3;border-bottom: 1px solid #d3d3d3;} .items-row {margin: 0 0 25px 0;padding: 0 0 25px 0;border-bottom:1px solid #d3d3d3;} .row-separator {clear: both; height: 0; display:block;} .category-list #limit {display:inline;margin:0;} /* -------------------------------------------------- :: Com_Weblinks ---------------------------------------------------*/ .cat-list-row0 p, .cat-list-row1 p {margin:5px 0;} .weblink-category #limit {display:inline;margin:0;} .weblink-count dt, .weblink-count dd {display:inline;} /* -------------------------------------------------- :: Com_Contact ---------------------------------------------------*/ .contact-category #limit {display:inline;margin:0;} #contact-form input {width:95%;max-width:600px;} #contact-form textarea {width:96.5%;max-width:603px;} #contact-form #jform_contact_email_copy {width:auto;} #contact-slider address span {display:block;} .jicons-text {width:65px;display:inline-block;} .hr-no-margin {margin:10px 0;} .contact-address p, .contact-contactinfo p{margin: 0 0 5px 0;} .contact-miscinfo .jicons-text {display:none;} #contact-form #jform_contact_name-lbl, #contact-form #jform_contact_email-lbl, #contact-form #jform_contact_emailmsg-lbl, #contact-form #jform_contact_message-lbl {margin:0;} #jform_contact_email_copy, #jform_contact_email_copy-lbl {display:inline;} .email-copy-inline {float:right;margin: 7px 20px 0 0;} dd .invalid {border:1px solid #FF0000;} /* -------------------------------------------------- :: Com_Search & Com_Finder ---------------------------------------------------*/ .vertical-align-top {vertical-align: top;} .advanced-search-tip {margin: 0 4px !important;} .advanced-search-tip p {margin: 0 0 7px 0;opacity:0.7;} .advanced-search-tip p:hover {opacity:1;} .advanced-search-tip p:before {content:"• ";color:#999;} ul.autocompleter-choices {font-family: arial,helvetica,sans-serif !important;} li.filter-date {margin: 0 0 20px 0 !important; padding: 0 0 20px 0 !important; border-bottom: 1px solid #D3D3D3;} .filter-branch {display: inline-block; margin: 0; width: 50%;} dd.result-url {margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #D3D3D3;font-size:10px;color:#d0d0d0;} dd.result-text {} dt.result-title {font-weight:bold;margin: 0 0 5px 0;} /* -------------------------------------------------- :: Extensions ---------------------------------------------------*/ .sige_thumb img {-moz-transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s;} .sige_thumb img:hover {z-index:999;border: 1px solid #666;-moz-transform: scale(1.2,1.2);} #sb-overlay {opacity:0.9 !important;} .nspImage {} .nspImage:hover {} .nspTopInterface { position: absolute; right: 20px; top: 40px; } .addthis_default_style a {-moz-transition:none;border: none !important;} .lighter-code {opacity:0.5;} .acc-header-active, .acc-header {margin: 15px 0 !important;} /* -------------------------------------------------- :: General ---------------------------------------------------*/ .bgblackbottom {background: #000; margin: 30px -20px 0 -20px;padding: 20px 20px 0 20px;} .bgblackfooter {background: #000; margin: 0 -20px 0 -20px;padding: 0 20px;} .bgblackfooter p {color:#999;padding: 20px 0 0 0;} .bgblackbottom a {color:#999;} .bgblackbottom p {color:#999;} .bgblack {background: #000; margin: 0 -20px 20px -20px;padding: 0 20px;} .tip-wrap {background: #d5d5d5; padding: 10px;} #system-message li, #system-message ul {margin-bottom: 0;} #system-message dt {border-right: 1px solid #FFFFFF;float: left;margin: 0 10px 0 0;padding: 0 10px 0 0;} .inlineblock {display:inline;} /* -------------------------------------------------- :: Sortable Portfolio ---------------------------------------------------*/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } .isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } article, aside, details, figcaption, figure,section { display: block; } .element { 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)); background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%); 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); width: 200px; height: 200px; margin: 5px; padding:15px; float: left; overflow: hidden; position: relative; color: #222; } .element * { position: absolute; margin: 0; } .variable-sizes .element.width2 { width: 230px; } .variable-sizes .element.height2 { height: 230px; } .variable-sizes .element.width2.height2 { font-size: 2.0em; } .element.large, .variable-sizes .element.large, .variable-sizes .element.large.width2.height2 { font-size: 3.0em; width: 350px; height: 350px; z-index: 100; } .clickable .element:hover { cursor: pointer; } .clickable .element:hover h3 { text-shadow: 0 0 10px white, 0 0 10px white ; } .clickable .element:hover h2 { color: white; } #options { padding-bottom: 1.0em; } #options h3 { margin-bottom: 0.2em; font-size: 15px; } #options h4 { font-weight: bold; } #options ul { margin: 0; list-style: none; } #options ul ul { margin-left: 1.5em; } #options li { float: left; margin-bottom: 0.2em; } #options li a { display: block; padding: 0.4em 0.5em; background-color: #DDD; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; -ms-border-radius:7px; -o-border-radius:7px; margin:0 10px 10px 0; color: #222; font-weight: bold; text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); background-image: -moz-linear-gradient( -90deg, hsla( 0, 0%, 100%, 0.5 ) , hsla( 0, 0%, 100%, 0.0 ) ); background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( hsla( 0, 0%, 100%, 0.5 ) ), to( hsla( 0, 0%, 100%, 0.0 ) ) ); background-image: -o-linear-gradient( -90deg, hsla( 0, 0%, 100%, 0.5 ) , hsla( 0, 0%, 100%, 0.0 ) ); } #options li a:hover { background-color: #5BF; } #options li a:active { background-color: #39D; -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); } #options li a.selected { background-color: #000; text-shadow: none; color: white; } /* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .sortable h2 {position:relative;font-size:16px;} .sortable img {position:relative;width:200px;} /* -------------------------------------------------- :: Pricing Tables ---------------------------------------------------*/ .ws-pricing-table ul { list-style:none; margin:0; border:1px solid #999; padding:4%; text-align:center; background:#FFF; -moz-transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s; width:92%; margin: 0 0 20px 0; } .ws-pricing-table ul:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05) -moz-box-shadow:3px 5px 7px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 7px rgba(0,0,0,.5); box-shadow:0 0 7px rgba(0,0,0,.5); cursor:pointer; background:#d8e9f9; } .ws-pricing-table ul:hover > li:nth-child(2) { background: #fff; } .ws-pricing-table ul li { border-bottom:1px dotted #999; padding:10px 0; margin: 0; } .ws-pricing-table ul li:first-child { color:#FFFFFF; font-size:18px; font-weight:bold; background:#2A85E8; margin:0; } .ws-pricing-table ul li:nth-child(2) { background:#f0f0f0; } .ws-pricing-table ul li:nth-child(3) { font-size:12px; font-weight:bold; } .ws-pricing-table ul li:nth-child(n+4) { font-size:14px; } .ws-pricing-table ul li:last-child { border-bottom:0 none; padding: 10px 0 0; margin: 10px 0 15px 0; }