/* ---------------------------------- - EDGE Framework - edge.setyono.net - v0.9.10 (Crixalis) ------------------------------------- */ /* ---------------- EDGE Normalize ---------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, body { margin: 0; padding: 0; } body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } } html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a { cursor: pointer; text-decoration: none; } a:focus { outline: none; } a:active, a:hover { outline: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } hr { -moz-box-sizing: content-box; box-sizing: content-box; display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc; } img { border: 0; display: inline-block; vertical-align: middle; -ms-interpolation-mode: bicubic; } img, object, embed { max-width: 100%; height: auto; } object, embed { height: 100%; } #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object { max-width: none !important; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } abbr[title] { border-bottom: 1px dotted; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; height: auto; min-height: 50px; } table { border-collapse: collapse; border-spacing: 0; } /* Miscellaneous useful HTML classes */ .left { float: left !important; } .right { float: right !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } .hide { display: none !important; visibility: hidden !important; } .visual-hide { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .bold, b, strong { font-weight: 700 !important; } .italic, em { font-style: italic !important; } .antialiased { -webkit-font-smoothing: antialiased; } /* ----------------- EDGE Typography ----------------- */ body { position: relative; background: white; font-size: 16px; font-family: "Helvetica", Helvetica, Arial, "sans-serif"; font-weight: 400; line-height: 1.5; color: #222222; } .baseline { background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.3) 100%); background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.3) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.3) 100%); background-size: 100% 1.5em; } h1, h2, h3, h4, h5, h6 { color: #222222; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif"; font-weight: 700; } a { color: #3a2c3d; } h1 { font-size: 2.75em; } h2 { font-size: 2.25em; } h3 { font-size: 1.75em; } h4 { font-size: 1.375em; } h5 { font-size: 1.125em; } h6 { font-size: 1em; } p { margin-top: 0; margin-bottom: 1em; } p:last-child { margin-bottom: 0; } .inline-list { zoom: 1; } .inline-list:before, .inline-list:after { content: " "; display: table; } .inline-list:after { clear: both; } .inline-list > li { display: inline-block; float: left; vertical-align: top; } ul { list-style-type: disc; padding-left: 20px; } ul[class] { list-style-type: none; padding-left: 0; } ul ul { list-style-type: circle; } ol { list-style-type: decimal; padding-left: 25px; } ol ol { list-style-type: lower-alpha; } blockquote { margin-bottom: 1em; } blockquote cite { display: block; font-style: italic; } /* ------------ EDGE Grid ------------ */ .row { margin: 0 auto; width: 100%; max-width: 1150px; zoom: 1; } .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } .row.collapse { margin: 0 auto; width: 100%; max-width: 1140px; } .row.collapse .column, .row.collapse .columns { padding-right: 0; padding-left: 0; } .row .row { margin-right: -5px; margin-left: -5px; width: auto; max-width: none; } .row .row.collapse { margin: 0; padding-right: 0; padding-left: 0; width: auto; max-width: none; } .column, .columns { position: relative; float: left; padding-right: 5px; padding-left: 5px; width: 100%; } .large-1 { width: 8.33333%; } .large-2 { width: 16.66667%; } .large-3 { width: 25%; } .large-4 { width: 33.33333%; } .large-5 { width: 41.66667%; } .large-6 { width: 50%; } .large-7 { width: 58.33333%; } .large-8 { width: 66.66667%; } .large-9 { width: 75%; } .large-10 { width: 83.33333%; } .large-11 { width: 91.66667%; } .large-12 { width: 100%; } .column.large-centered, .columns.large-centered { display: block; float: none; margin-right: auto !important; margin-left: auto !important; } @media only screen and (min-width: 461px) { .large-offset-1 { margin-left: 8.33333%; } .push-1 { left: 8.33333%; right: auto; } .pull-1 { right: 8.33333%; left: auto; } .large-offset-2 { margin-left: 16.66667%; } .push-2 { left: 16.66667%; right: auto; } .pull-2 { right: 16.66667%; left: auto; } .large-offset-3 { margin-left: 25%; } .push-3 { left: 25%; right: auto; } .pull-3 { right: 25%; left: auto; } .large-offset-4 { margin-left: 33.33333%; } .push-4 { left: 33.33333%; right: auto; } .pull-4 { right: 33.33333%; left: auto; } .large-offset-5 { margin-left: 41.66667%; } .push-5 { left: 41.66667%; right: auto; } .pull-5 { right: 41.66667%; left: auto; } .large-offset-6 { margin-left: 50%; } .push-6 { left: 50%; right: auto; } .pull-6 { right: 50%; left: auto; } .large-offset-7 { margin-left: 58.33333%; } .push-7 { left: 58.33333%; right: auto; } .pull-7 { right: 58.33333%; left: auto; } .large-offset-8 { margin-left: 66.66667%; } .push-8 { left: 66.66667%; right: auto; } .pull-8 { right: 66.66667%; left: auto; } .large-offset-9 { margin-left: 75%; } .push-9 { left: 75%; right: auto; } .pull-9 { right: 75%; left: auto; } .large-offset-10 { margin-left: 83.33333%; } .push-10 { left: 83.33333%; right: auto; } .pull-10 { right: 83.33333%; left: auto; } .large-offset-11 { margin-left: 91.66667%; } .push-11 { left: 91.66667%; right: auto; } .pull-11 { right: 91.66667%; left: auto; } } @media only screen and (max-width: 460px) { .column, .columns { width: 100%; } .small-1 { width: 8.33333%; } .small-2 { width: 16.66667%; } .small-3 { width: 25%; } .small-4 { width: 33.33333%; } .small-5 { width: 41.66667%; } .small-6 { width: 50%; } .small-7 { width: 58.33333%; } .small-8 { width: 66.66667%; } .small-9 { width: 75%; } .small-10 { width: 83.33333%; } .small-11 { width: 91.66667%; } .small-12 { width: 100%; } .small-offset-1 { margin-left: 8.33333%; } .small-offset-2 { margin-left: 16.66667%; } .small-offset-3 { margin-left: 25%; } .small-offset-4 { margin-left: 33.33333%; } .small-offset-5 { margin-left: 41.66667%; } .small-offset-6 { margin-left: 50%; } .small-offset-7 { margin-left: 58.33333%; } .small-offset-8 { margin-left: 66.66667%; } .small-offset-9 { margin-left: 75%; } .small-offset-10 { margin-left: 83.33333%; } .column.small-centered, .columns.small-centered { display: block; float: none; margin-right: auto !important; margin-left: auto !important; } } /* ----------------- EDGE Block Grid ----------------- */ [class*="-tile-"] { display: block; margin-right: -5px; margin-left: -5px; zoom: 1; } [class*="-tile-"]:before, [class*="-tile-"]:after { content: " "; display: table; } [class*="-tile-"]:after { clear: both; } [class*="-tile-"] > li { display: block; position: relative; float: left; height: auto; padding: 0 5px; } [class*="-tile-"].collapse { display: block; margin-right: 0; margin-left: 0; zoom: 1; } [class*="-tile-"].collapse:before, [class*="-tile-"].collapse:after { content: " "; display: table; } [class*="-tile-"].collapse:after { clear: both; } [class*="-tile-"].collapse > li { display: block; position: relative; float: left; height: auto; padding: 0; } .large-tile-1 > li { width: 100%; } .large-tile-1 > li:nth-of-type(1n+1) { clear: both; } .large-tile-2 > li { width: 50%; } .large-tile-2 > li:nth-of-type(2n+1) { clear: both; } .large-tile-3 > li { width: 33.33333%; } .large-tile-3 > li:nth-of-type(3n+1) { clear: both; } .large-tile-4 > li { width: 25%; } .large-tile-4 > li:nth-of-type(4n+1) { clear: both; } .large-tile-5 > li { width: 20%; } .large-tile-5 > li:nth-of-type(5n+1) { clear: both; } .large-tile-6 > li { width: 16.66667%; } .large-tile-6 > li:nth-of-type(6n+1) { clear: both; } .large-tile-7 > li { width: 14.28571%; } .large-tile-7 > li:nth-of-type(7n+1) { clear: both; } .large-tile-8 > li { width: 12.5%; } .large-tile-8 > li:nth-of-type(8n+1) { clear: both; } .large-tile-9 > li { width: 11.11111%; } .large-tile-9 > li:nth-of-type(9n+1) { clear: both; } .large-tile-10 > li { width: 10%; } .large-tile-10 > li:nth-of-type(10n+1) { clear: both; } .large-tile-11 > li { width: 9.09091%; } .large-tile-11 > li:nth-of-type(11n+1) { clear: both; } .large-tile-12 > li { width: 8.33333%; } .large-tile-12 > li:nth-of-type(12n+1) { clear: both; } @media only screen and (max-width: 460px) { [class*="large-tile-"] > li { width: 100%; } [class*="small-tile-"] > li:nth-child(n) { clear: none; } .small-tile-1 > li { width: 100%; } .small-tile-1 > li:nth-of-type(1n+1) { clear: both; } .small-tile-2 > li { width: 50%; } .small-tile-2 > li:nth-of-type(2n+1) { clear: both; } .small-tile-3 > li { width: 33.33333%; } .small-tile-3 > li:nth-of-type(3n+1) { clear: both; } .small-tile-4 > li { width: 25%; } .small-tile-4 > li:nth-of-type(4n+1) { clear: both; } .small-tile-5 > li { width: 20%; } .small-tile-5 > li:nth-of-type(5n+1) { clear: both; } .small-tile-6 > li { width: 16.66667%; } .small-tile-6 > li:nth-of-type(6n+1) { clear: both; } .small-tile-7 > li { width: 14.28571%; } .small-tile-7 > li:nth-of-type(7n+1) { clear: both; } .small-tile-8 > li { width: 12.5%; } .small-tile-8 > li:nth-of-type(8n+1) { clear: both; } .small-tile-9 > li { width: 11.11111%; } .small-tile-9 > li:nth-of-type(9n+1) { clear: both; } .small-tile-10 > li { width: 10%; } .small-tile-10 > li:nth-of-type(10n+1) { clear: both; } .small-tile-11 > li { width: 9.09091%; } .small-tile-11 > li:nth-of-type(11n+1) { clear: both; } .small-tile-12 > li { width: 8.33333%; } .small-tile-12 > li:nth-of-type(12n+1) { clear: both; } } /* ----------------- EDGE Visibility ----------------- */ .hide-for-large, .show-for-small, .show-for-mini { display: none !important; } .hide-for-small, .hide-for-mini, .show-for-large { display: inherit !important; } table.hide-for-large, table.show-for-small, table.show-for-mini { display: none !important; } table.hide-for-small, table.hide-for-mini, table.show-for-large { display: table !important; } thead.hide-for-large, thead.show-for-small, thead.show-for-mini { display: none !important; } thead.hide-for-small, thead.hide-for-mini, thead.show-for-large { display: table-header-group !important; } tbody.hide-for-large, tbody.show-for-small, tbody.show-for-mini { display: none !important; } tbody.hide-for-small, tbody.hide-for-mini, tbody.show-for-large { display: table-row-group !important; } tr.hide-for-large, tr.show-for-small, tr.show-for-mini { display: none !important; } tr.hide-for-small, tr.hide-for-mini, tr.show-for-large { display: table-row !important; } td.hide-for-large, td.show-for-small, td.show-for-mini, th.hide-for-large, th.show-for-small, th.show-for-mini { display: none !important; } td.hide-for-small, td.hide-for-mini, td.show-for-large, th.hide-for-small, th.hide-for-mini, th.show-for-large { display: table-cell !important; } img.hide-for-large, img.show-for-small, img.show-for-mini, span.hide-for-large, span.show-for-small, span.show-for-mini, em.hide-for-large, em.show-for-small, em.show-for-mini, strong.hide-for-large, strong.show-for-small, strong.show-for-mini, sub.hide-for-large, sub.show-for-small, sub.show-for-mini, sup.hide-for-large, sup.show-for-small, sup.show-for-mini, big.hide-for-large, big.show-for-small, big.show-for-mini, small.hide-for-large, small.show-for-small, small.show-for-mini { display: none !important; } img.hide-for-small, img.hide-for-mini, img.show-for-large, span.hide-for-small, span.hide-for-mini, span.show-for-large, em.hide-for-small, em.hide-for-mini, em.show-for-large, strong.hide-for-small, strong.hide-for-mini, strong.show-for-large, sub.hide-for-small, sub.hide-for-mini, sub.show-for-large, sup.hide-for-small, sup.hide-for-mini, sup.show-for-large, big.hide-for-small, big.hide-for-mini, big.show-for-large, small.hide-for-small, small.hide-for-mini, small.show-for-large { display: inline-block !important; } @media only screen and (max-width: 460px) { .hide-for-small, .show-for-large { display: none !important; } .show-for-small, .hide-for-large { display: inherit !important; } table.hide-for-small, table.show-for-large { display: none !important; } table.show-for-small, table.hide-for-large { display: table !important; } thead.hide-for-small, thead.show-for-large { display: none !important; } thead.show-for-small, thead.hide-for-large { display: table-header-group !important; } tbody.hide-for-small, tbody.show-for-large { display: none !important; } tbody.show-for-small, tbody.hide-for-large { display: table-row-group !important; } tr.hide-for-small, tr.show-for-large { display: none !important; } tr.show-for-small, tr.hide-for-large { display: table-row !important; } td.hide-for-small, td.show-for-large, th.hide-for-small, th.show-for-large { display: none !important; } td.show-for-small, td.hide-for-large, th.show-for-small, th.hide-for-large { display: table-cell !important; } img.hide-for-small, img.show-for-large, span.hide-for-small, span.show-for-large, em.hide-for-small, em.show-for-large, strong.hide-for-small, strong.show-for-large, sub.hide-for-small, sub.show-for-large, sup.hide-for-small, sup.show-for-large, big.hide-for-small, big.show-for-large, small.hide-for-small, small.show-for-large { display: none !important; } img.show-for-small, img.hide-for-large, span.show-for-small, span.hide-for-large, em.show-for-small, em.hide-for-large, strong.show-for-small, strong.hide-for-large, sub.show-for-small, sub.hide-for-large, sup.show-for-small, sup.hide-for-large, big.show-for-small, big.hide-for-large, small.show-for-small, small.hide-for-large { display: inline-block !important; } } @media only screen and (max-width: 180px) { .hide-for-mini { display: none !important; } .show-for-mini { display: inherit !important; } table.hide-for-mini { display: none !important; } table.show-for-mini { display: table !important; } thead.hide-for-mini { display: none !important; } thead.show-for-mini { display: table-header-group !important; } tbody.hide-for-mini { display: none !important; } tbody.show-for-mini { display: table-row-group !important; } tr.hide-for-mini { display: none !important; } tr.show-for-mini { display: table-row !important; } td.hide-for-mini, th.hide-for-mini { display: none !important; } td.show-for-mini, th.show-for-mini { display: table-cell !important; } img.hide-for-mini, span.hide-for-mini, em.hide-for-mini, strong.hide-for-mini, sub.hide-for-mini, sup.hide-for-mini, big.hide-for-mini, small.hide-for-mini { display: none !important; } img.show-for-mini, span.show-for-mini, em.show-for-mini, strong.show-for-mini, sub.show-for-mini, sup.show-for-mini, big.show-for-mini, small.show-for-mini { display: inline-block !important; } } /* --------------- EDGE Button --------------- */ button, .button, input[type="submit"], input[type="reset"] { display: inline-block; cursor: pointer; position: relative; border: 1px solid transparent; padding: 10px 20px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; background-color: #3a2c3d; color: white; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), transparent); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), transparent); background-image: linear-gradient(top, rgba(255, 255, 255, 0.1), transparent); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-box-shadow: inset 1px 1px rgba(255, 255, 255, 0.1); -moz-box-shadow: inset 1px 1px rgba(255, 255, 255, 0.1); box-shadow: inset 1px 1px rgba(255, 255, 255, 0.1); } button:focus, .button:focus, input[type="submit"]:focus, input[type="reset"]:focus { outline: none; } button:hover, .button:hover, input[type="submit"]:hover, input[type="reset"]:hover { background-color: #48374c; } button:active, .button:active, input[type="submit"]:active, input[type="reset"]:active { background-color: #2c212e; } /* --------------- EDGE Form --------------- */ [type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], select, textarea { width: 100%; outline: none; padding: 0.625em; border: 1px solid #d7d7d7; border-top: 1px solid #cacaca; } [type="text"]:hover, [type="password"]:hover, [type="date"]:hover, [type="datetime"]:hover, [type="datetime-local"]:hover, [type="month"]:hover, [type="week"]:hover, [type="email"]:hover, [type="number"]:hover, [type="search"]:hover, [type="tel"]:hover, [type="time"]:hover, [type="url"]:hover, select:hover, textarea:hover { border: 1px solid #bebebe; -webkit-box-shadow: inset 0 0 3px #d7d7d7; -moz-box-shadow: inset 0 0 3px #d7d7d7; box-shadow: inset 0 0 3px #d7d7d7; } [type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, select:focus, textarea:focus { border: 1px solid #3a2c3d; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); } label { display: block; line-height: normal; padding-top: 0.625em; padding-bottom: 0.625em; border: 1px solid transparent; } label.prefix, label.postfix { border: 1px solid #d7d7d7; border-top: 1px solid #cacaca; text-align: center; color: #333333; background: #d7d7d7; overflow: hidden; } label.prefix { border-right: none; } label.postfix { border-left: none; } input::-webkit-calendar-picker-indicator { display: none; } input[type="date"]::-webkit-input-placeholder { visibility: hidden !important; }