diff --git a/Gemfile b/Gemfile index bb5cfc84..1a593a5a 100644 --- a/Gemfile +++ b/Gemfile @@ -9,7 +9,7 @@ ruby RUBY_VERSION # # This will help ensure the proper Jekyll version is running. # Happy Jekylling! -# gem "jekyll", "3.2.1" +gem "jekyll", "3.3.1" # This is the default theme for new Jekyll sites. You may change this to anything you like. # gem "minima" diff --git a/Gemfile.lock b/Gemfile.lock index cac555ef..c099775e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -196,6 +196,7 @@ PLATFORMS DEPENDENCIES github-pages + jekyll (= 3.3.1) RUBY VERSION ruby 2.4.0p0 diff --git a/LICENSE b/LICENSE index b70c7531..40005950 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2016 Sebastian Nitu (http://sebnitu.com) +Copyright (c) 2017 Sebastian Nitu (http://sebnitu.com) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. \ No newline at end of file +THE SOFTWARE. diff --git a/docs/_data/project.yml b/docs/_data/project.yml index 2cea77d2..cd2da1ca 100644 --- a/docs/_data/project.yml +++ b/docs/_data/project.yml @@ -3,6 +3,7 @@ version: v2.1.0 year: 2017 author: Sebastian Nitu url: http://sebnitu.com +year: 2017 repository: type : git url : https://github.com/sebnitu/BaseWeb.git diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index 460f1ef0..207cb92a 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -5,7 +5,7 @@ diff --git a/docs/assets/css/baseweb.css b/docs/assets/css/baseweb.css index 7c5ada53..39d83d30 100644 --- a/docs/assets/css/baseweb.css +++ b/docs/assets/css/baseweb.css @@ -2673,6 +2673,218 @@ fieldset[disabled] .input { transform: translate3d(0, 0, 0); } +/*============================================================================== + @Tabs - scss/blocks/_tabs.scss +==============================================================================*/ +/** + * Base styles for tab wrapper, nav and content + */ +.tabs { + position: relative; + margin: 2em 0; +} + +.tabs .tabs-nav, +.tabs .tabs-content { + margin: 0; +} + +.tabs .tabs-nav { + z-index: 10; +} + +.tabs .tabs-content { + z-index: 5; +} + +.tabs-nav { + margin: 2em 0; + text-align: center; +} + +.tabs-nav ul { + display: flex; + list-style: none; + margin: 0; +} + +.tabs-nav ul li { + flex: 1 0 auto; + margin: 0; +} + +.tabs-nav a { + display: block; + padding: 1em; + border: none; +} + +.tabs-nav.inline ul { + flex-wrap: wrap; +} + +.tabs-nav.inline ul li { + flex: 0 0 auto; +} + +.tabs-nav.inline ul li a { + padding: 1em 2em; +} + +.tabs-content { + margin: 2em 0; +} + +.tabs-content .tabs-panel { + display: none; +} + +.tabs-content .tabs-panel.active { + display: block; +} + +/** + * Tabs Style: Default + */ +.style-fold .tabs-nav ul, +.tabs-nav.style-fold ul { + background: #f5f5f5; + border: 1px solid #e6e6e6; + border-radius: 3px; +} + +.style-fold .tabs-nav ul li, +.tabs-nav.style-fold ul li { + border-right: 1px solid #e6e6e6; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.style-fold .tabs-nav ul li:first-child, +.tabs-nav.style-fold ul li:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} + +.style-fold .tabs-nav ul li:last-child, +.tabs-nav.style-fold ul li:last-child { + border-right: none; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +.style-fold .tabs-nav a, +.tabs-nav.style-fold a { + color: #303030; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.style-fold .tabs-nav a:hover, +.tabs-nav.style-fold a:hover { + background: #e6e6e6; + color: #303030; +} + +.style-fold .tabs-nav ul li.active, +.tabs-nav.style-fold ul li.active { + background: #ffffff; +} + +.style-fold .tabs-nav .active a, +.tabs-nav.style-fold .active a { + color: #303030; +} + +.style-fold .tabs-nav .active a:hover, +.tabs-nav.style-fold .active a:hover { + background: #ffffff; +} + +.style-fold .tabs-nav.inline ul li:last-child, +.tabs-nav.style-fold.inline ul li:last-child { + border-right: 1px solid #e6e6e6; +} + +.style-fold .tabs-nav ul { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.style-fold .tabs-nav ul li { + border-bottom: 1px solid transparent; + margin-bottom: -1px; +} + +.style-fold .tabs-nav ul li:first-child { + border-bottom-left-radius: 0; +} + +.style-fold .tabs-nav ul li:last-child { + border-bottom-right-radius: 0; +} + +.style-fold .tabs-nav ul li.active { + border-bottom: 1px solid #ffffff; +} + +.style-fold .tabs-content { + padding: 1em 2em; + border: 1px solid #e6e6e6; + border-top: none; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} + +/** + * Tabs Style: Line + */ +.style-line .tabs-nav ul, +.tabs-nav.style-line ul { + border-bottom: 1px solid #e6e6e6; +} + +.style-line .tabs-nav ul li, +.tabs-nav.style-line ul li { + border-bottom: 3px solid transparent; + margin-bottom: -1px; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.style-line .tabs-nav a, +.tabs-nav.style-line a { + color: #aaaaaa; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.style-line .tabs-nav a:hover, +.tabs-nav.style-line a:hover { + color: #1489C9; +} + +.style-line .tabs-nav ul li.active, +.tabs-nav.style-line ul li.active { + border-bottom: 3px solid #1489C9; +} + +.style-line .tabs-nav .active a, +.tabs-nav.style-line .active a { + color: #303030; +} + +.style-line .tabs-nav .active a:hover, +.tabs-nav.style-line .active a:hover { + color: #1489C9; +} + +.style-line .tabs-content { + padding: 1em 2em; + border: 1px solid #e6e6e6; + border-top: none; +} + /*============================================================================== @Grid System - scss/custom/_custom.scss ==============================================================================*/ @@ -3348,9 +3560,38 @@ body { /** * Widget Menu */ -.widget-menu .active > a { +.widget-menu ul { + list-style: none; + margin: 1em 0; +} + +.widget-menu ul ul { + margin: 0 0 0 1em; +} + +.widget-menu ul li { + margin: 1px 0; +} + +.widget-menu ul li a { + display: block; + padding: 0.5em 1em; color: #aaaaaa; border: 0 none; + border-radius: 3px; +} + +.widget-menu ul li a:hover { + color: #303030; +} + +.widget-menu .active > a { + background: #f5f5f5; + color: #de5151; +} + +.widget-menu .active > a:hover { + color: #de5151; } .widget-menu ul ul { @@ -3395,7 +3636,7 @@ body { @media (min-width: 760px) { .widget-back { - margin: 1em 0; + margin: 0; text-align: left; } .widget-back:first-child, .widget-back:last-child { @@ -3613,6 +3854,15 @@ body { } } +/** + * Featured Images + */ +.main .featured { + margin: 0 0 2em 0; + width: 100%; + height: auto; +} + /** * Comments */ @@ -5042,3 +5292,10 @@ figure { float: left; margin: 1em 1em 0 0; } + +/** + * Tabs + */ +.demo-tabs.inverted { + background: #303030; +} diff --git a/docs/assets/css/baseweb.min.css b/docs/assets/css/baseweb.min.css index 6db7584d..608ae5d2 100644 --- a/docs/assets/css/baseweb.min.css +++ b/docs/assets/css/baseweb.min.css @@ -7,4 +7,4 @@ * @url http://sebnitu.com * * Copyright (c) 2016 Sebastian Nitu (MIT Licensed) - */html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}table{font-size:1em}*,*:before,*:after{-moz-box-sizing:border-box;box-sizing:border-box}::-moz-selection{background:rgba(132,183,45,0.25);text-shadow:none}::selection{background:rgba(132,183,45,0.25);text-shadow:none}.clearfix:after{content:'';display:table;clear:both}.remove-clearfix:after{content:none;display:none;clear:none}.float-left{float:left}.float-right{float:right}html{font-size:14px}body{font-family:"Open Sans","Helvetica Neue","HelveticaNeue",helvetica,arial,sans-serif;font-size:14px;line-height:1.5em;font-weight:normal;color:#303030;-webkit-font-smoothing:subpixel-antialiased}h1,h2,h3,h4,h5,h6{margin:1rem 0;font-family:inherit;font-weight:normal;line-height:1.25em;color:#303030}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#1489C9;border:0 none}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#b357cd}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.25em}h4{font-size:1.1em}h5{font-size:1.1em;color:rgba(48,48,48,0.6)}h6{font-size:1.1em;color:rgba(48,48,48,0.3)}@media (min-width: 760px){h1{font-size:3em}h2{font-size:2em}h3{font-size:1.5em}h4,h5,h6{font-size:1.25em}}p{margin:1em 0}a{color:#1489C9;text-decoration:none;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:all 0.25s linear;transition:all 0.25s linear}a:hover{cursor:pointer;color:#b357cd;border-color:#b357cd}strong{font-weight:bold}em{font-style:italic}small{font-size:0.8em}mark{margin:0 2px;padding:0 5px;background:rgba(255,255,0,0.5);border-radius:3px}cite{font-style:italic}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #aaa}.text-lead{font-size:1.57143em;line-height:1.4em;color:#303030;font-weight:300}.text-small{font-size:0.8em;line-height:1.5em}.text-soften{font-weight:normal;color:#aaa}.text-harden{font-weight:bold;color:#303030}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}ul,ol{margin:1em 0 1em 2em;padding:0}ul ul,ul ol,ul li,ol ul,ol ol,ol li{margin-top:0.5em;margin-bottom:0.5em}ul,ul ul ul ul{list-style:disc}ul ul{list-style:circle}ul ul ul{list-style:disc}ol,ol ol ol ol{list-style:decimal}ol ol{list-style:lower-alpha}ol ol ol{list-style:lower-roman}dl{margin:1em 0}dl dt{margin:1em 0 0;font-weight:bold;color:#303030}dl dd{margin:0 0 1em 1em}.list{list-style:none;margin:1rem 0;background:none}.list>li{margin:0;padding:1rem;background-clip:padding-box}.list>li:after{content:'';display:table;clear:both}.list.flush>li,.list-docs>li{padding-left:0;padding-right:0}.list.rowed>li,.list-docs>li{border-bottom:1px solid rgba(0,0,0,0.1)}.list.rowed>li:first-child,.list-docs>li:first-child{border-top:1px solid rgba(0,0,0,0.1)}.list.bordered{border:1px solid rgba(0,0,0,0.1)}.list.bordered>li{border-bottom:1px solid rgba(0,0,0,0.1)}.list.bordered>li:last-child{border-bottom:0 none}.list.linked>li{padding:0}.list.linked>li>a{display:block;padding:1rem;background-clip:padding-box;border:0 none}.list.linked>li>a:after{content:'';display:table;clear:both}.list.rounded{border-radius:3px}.list.rounded>li:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.list.rounded>li:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.list.striped>li:nth-of-type(odd){background-color:rgba(0,0,0,0.05)}.list.hover>li{-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.list.hover>li:hover{background-color:rgba(241,196,15,0.1)}blockquote{margin:1rem 0;padding:0.5em 1.5em;background:#f5f5f5;border-radius:3px}blockquote footer,blockquote .blockquote-footer{display:block;position:relative;margin:1rem 0;font-size:100%}@media (min-width: 760px){blockquote{padding:1em 2em}}code,pre{background:#f5f5f5;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:1em;line-height:1.5em;border-radius:3px}code{display:inline;margin:0;padding:0;white-space:nowrap;line-height:inherit;color:#de5151;background:none}pre{margin:1.5rem 0;padding:0.75rem;overflow:auto;color:#303030}pre code{display:block;margin:0;padding:0.75rem;overflow:auto;white-space:pre;font-size:100%;color:inherit;background:none;border:0 none}pre.max-height{max-height:400px}table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;margin:1rem 0;overflow:auto}table tr{vertical-align:top}table th{color:#303030;font-weight:bold;text-align:left}.table{margin:2em 0;background:none;border-collapse:separate}.table td,.table th{padding:0.5em 0.75em}.table.rowed td,.table-docs td,.table.rowed th,.table-docs th{border-bottom:1px solid rgba(0,0,0,0.1)}.table.rowed thead:first-child tr:first-child td,.table-docs thead:first-child tr:first-child td,.table.rowed thead:first-child tr:first-child th,.table-docs thead:first-child tr:first-child th,.table.rowed tfoot:first-child tr:first-child td,.table-docs tfoot:first-child tr:first-child td,.table.rowed tfoot:first-child tr:first-child th,.table-docs tfoot:first-child tr:first-child th,.table.rowed tbody:first-child tr:first-child td,.table-docs tbody:first-child tr:first-child td,.table.rowed tbody:first-child tr:first-child th,.table-docs tbody:first-child tr:first-child th{border-top:1px solid rgba(0,0,0,0.1)}.table.columned td,.table.columned th{border-right:1px solid rgba(0,0,0,0.1)}.table.columned tr td:first-child,.table.columned tr th:first-child{border-left:1px solid rgba(0,0,0,0.1)}.table.bordered td,.table.bordered th{border-bottom:1px solid rgba(0,0,0,0.1)}.table.bordered thead:first-child tr:first-child td,.table.bordered thead:first-child tr:first-child th,.table.bordered tfoot:first-child tr:first-child td,.table.bordered tfoot:first-child tr:first-child th,.table.bordered tbody:first-child tr:first-child td,.table.bordered tbody:first-child tr:first-child th{border-top:1px solid rgba(0,0,0,0.1)}.table.bordered td,.table.bordered th{border-right:1px solid rgba(0,0,0,0.1)}.table.bordered tr td:first-child,.table.bordered tr th:first-child{border-left:1px solid rgba(0,0,0,0.1)}.table.condensed td,.table.condensed th{padding:0.25em 0.5em}.table.expanded td,.table-docs td,.table.expanded th,.table-docs th{padding:1em 1.25em}.table.rounded{border-radius:3px}.table.rounded thead:first-child tr:first-child td:first-child,.table.rounded thead:first-child tr:first-child th:first-child,.table.rounded tfoot:first-child tr:first-child td:first-child,.table.rounded tfoot:first-child tr:first-child th:first-child,.table.rounded tbody:first-child tr:first-child td:first-child,.table.rounded tbody:first-child tr:first-child th:first-child{border-top-left-radius:3px}.table.rounded thead:first-child tr:first-child td:last-child,.table.rounded thead:first-child tr:first-child th:last-child,.table.rounded tfoot:first-child tr:first-child td:last-child,.table.rounded tfoot:first-child tr:first-child th:last-child,.table.rounded tbody:first-child tr:first-child td:last-child,.table.rounded tbody:first-child tr:first-child th:last-child{border-top-right-radius:3px}.table.rounded thead:last-child tr:last-child td:first-child,.table.rounded thead:last-child tr:last-child th:first-child,.table.rounded tfoot:last-child tr:last-child td:first-child,.table.rounded tfoot:last-child tr:last-child th:first-child,.table.rounded tbody:last-child tr:last-child td:first-child,.table.rounded tbody:last-child tr:last-child th:first-child{border-bottom-left-radius:3px}.table.rounded thead:last-child tr:last-child td:last-child,.table.rounded thead:last-child tr:last-child th:last-child,.table.rounded tfoot:last-child tr:last-child td:last-child,.table.rounded tfoot:last-child tr:last-child th:last-child,.table.rounded tbody:last-child tr:last-child td:last-child,.table.rounded tbody:last-child tr:last-child th:last-child{border-bottom-right-radius:3px}.table.striped tbody tr:nth-of-type(odd) td,.table.striped tbody tr:nth-of-type(odd) th{background-color:rgba(0,0,0,0.05)}.table.striped-horizontal tbody tr:nth-of-type(odd) td,.table.striped-horizontal tbody tr:nth-of-type(odd) th{background-color:rgba(0,0,0,0.05)}.table.striped-vertical tr td:nth-of-type(odd),.table.striped-vertical tr th:nth-of-type(odd){background-color:rgba(0,0,0,0.05)}.table.hover tbody tr td{-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.table.hover tbody tr:hover td{background-color:rgba(241,196,15,0.1)}.table.valign-baseline tr{vertical-align:baseline}.table.valign-top tr{vertical-align:top}.table.valign-middle tr,.table-docs tr{vertical-align:middle}.table.valign-bottom tr{vertical-align:bottom}.table.align-left tr td,.table.align-left tr th{text-align:left}.table.align-center tr td,.table.align-center tr th{text-align:center}.table.align-right tr td,.table.align-right tr th{text-align:right}.table-responsive{margin:2em 0}.table-responsive>table{margin:0}@media (max-width: 759px){.table-responsive{overflow:auto}.table-responsive>table td,.table-responsive>table th{white-space:nowrap}}img{display:block;margin:1rem 0;max-width:100%;height:auto}img.align-center{display:block;margin-left:auto;margin-right:auto}p img.align-center{margin-top:0;margin-bottom:0}img.align-left{float:left;margin:1rem 1.5rem 1rem 0}p img.align-left{margin-top:0}img.align-right{float:right;margin:1rem 0 1rem 1.5rem}p img.align-right{margin-top:0}img.rounded{border-radius:3px}img.circle{border-radius:50%}img.polaroid{background:#fff;background-clip:padding-box;padding:0.5rem;border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 3px rgba(0,0,0,0.1)}hr{display:block;height:0;width:100%;clear:both;margin:2rem 0;padding:0;background:none;border:0 none;border-bottom:1px solid rgba(0,0,0,0.1)}hr.dotted{border-bottom:1px dotted rgba(0,0,0,0.25)}hr.dashed{border-bottom:1px dashed rgba(0,0,0,0.25)}hr.double{border-bottom:3px double rgba(0,0,0,0.1)}form{margin:2.25em 0;font-size:1em;line-height:1.5em}fieldset{margin:1.5em 0;padding:0;border:0 none}legend{display:inline-block;margin:-.75em .75em;padding:0 .75em;font-size:1.57143em;line-height:1.5em;font-weight:bold;color:#303030;border:0 none}form .row{margin-bottom:.75em}form .row:last-child{margin-bottom:0}form .col{margin-bottom:.75em}form .col:last-child{margin-bottom:0}@media (min-width: 760px){form .col{margin-bottom:0}}.form-group{margin-bottom:1.5em}.form-group:last-child{margin-bottom:0}.form-group.inline{margin-right:-0.75em;margin-bottom:.75em}.form-group.inline:after{content:'';display:table;clear:both}.form-group.inline:last-child{margin-bottom:-.75em}.form-group.inline>*{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}.form-group.inline>*.float-right{float:right}.form-group.inline .form-group,.form-group.inline .input-group{display:inline-block;vertical-align:top;margin:0 .75em 0 0}.form-group.inline .form-group:last-child,.form-group.inline .input-group:last-child{margin-right:0}.form-header{margin-bottom:1.5em;color:#aaa}.form-header:last-child{margin-bottom:0}.form-header h1,.form-header h2,.form-header h3,.form-header h4,.form-header h5,.form-header h6{margin:.5em 0;font-size:1.4em;line-height:1.2em}.form-header p{margin:.5em 0;color:#aaa}.form-action{margin-bottom:1.5em}.form-action:last-child{margin-bottom:0}.form-action:after{content:'';display:table;clear:both}.form-action .button,.form-action .input-align{float:left;margin:0 .75em 0 0}.form-action .button:last-child,.form-action .input-align:last-child{margin-right:0}.form-action .button.float-right,.form-action .input-align.float-right{float:right}.form-action .input-align{margin-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.form-action.form-action-center{text-align:center}.form-action.form-action-center .button,.form-action.form-action-center .input-align{display:inline-block;float:none}.input-group{margin-bottom:1.5em}.input-group:last-child{margin-bottom:0}.input-group.inline{margin-right:-0.75em;margin-bottom:.75em}.input-group.inline:after{content:'';display:table;clear:both}.input-group.inline:last-child{margin-bottom:-.75em}.input-group.inline>*{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}.input-group.inline>*.float-right{float:right}label{display:inline-block;margin:0 0 .5em 0;font-size:1em;line-height:1.5em;font-weight:600;color:#303030}label:last-child{margin-bottom:0}label.sub{font-weight:normal}label.hide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}label.block{display:block;padding-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}label.inline{display:inline-block;padding-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.inline label.block,.inline label.inline{padding-bottom:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.input,.checkbox,.radio,.choice{position:relative;display:block;width:100%;margin:0 0 .75em 0}.input:last-child,.checkbox:last-child,.radio:last-child,.choice:last-child{margin-bottom:0}.input{padding:.75em;font-family:inherit;font-size:1em;line-height:1.5em;color:#303030;background-color:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 3px transparent,inset 0 1px 3px rgba(0,0,0,0.05);-moz-box-sizing:border-box;box-sizing:border-box;border-radius:3px;-webkit-transition:border-color 0.25s,background-color 0.25s,box-shadow 0.25s;transition:border-color 0.25s,background-color 0.25s,box-shadow 0.25s}.input::-webkit-input-placeholder{color:#aaa}.input:-moz-placeholder{color:#aaa}.input::-moz-placeholder{color:#aaa}.input:-ms-input-placeholder{color:#aaa}.input:focus{outline:none;background-color:#fff;border:1px solid #1489c9;box-shadow:0 1px 3px rgba(0,0,0,0.05),inset 0 1px 3px transparent}.input.disabled,.input[readonly],.input[disabled]{opacity:0.5;background:rgba(0,0,0,0.05)}.checkbox,.radio,.choice{cursor:pointer;color:#303030;font-weight:normal}.checkbox.disabled,.radio.disabled,.choice.disabled{opacity:0.5}.choice{padding:0.75em 0.75em 0.75em 2.25em;background:rgba(0,0,0,0.05);border:1px solid transparent;box-shadow:none;border-radius:3px}.choice input[type="checkbox"],.choice input[type="radio"]{position:absolute;top:auto;margin:5px 0 0 -20px}input[type="checkbox"],input[type="radio"]{position:relative;top:-1px;margin:0 5px 0 0}input[type="file"],input[type="range"]{display:block;margin:0 0 .75em 0}input[type="range"]{width:100%}input[type="search"]{-webkit-appearance:none}input[type="color"].input{width:3.125rem;height:3.125rem;padding:.25em}textarea.input{height:auto;max-width:100%}select.input{-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-position:100% center;background-repeat:no-repeat;padding-right:30px}select[multiple].input,select[size].input{height:auto;padding:.75em;background-image:none}.note{margin-bottom:.75em;font-size:1em;color:#aaa}.note:last-child{margin-bottom:0}.note p{margin:0 0 .75em 0}.note p:last-child{margin-bottom:0}label+.note{margin-top:0}.form-group+.note,.input-group+.note{margin-top:-.75em}.req{color:#de5151}label.inline,.button.inline,.input.inline,.checkbox.inline,.radio.inline,.choice.inline,.inline label,.inline .button,.inline .input,.inline .checkbox,.inline .radio,.inline .choice{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}label.inline.float-right,.button.inline.float-right,.input.inline.float-right,.checkbox.inline.float-right,.radio.inline.float-right,.choice.inline.float-right,.inline label.float-right,.inline .button.float-right,.inline .input.float-right,.inline .checkbox.float-right,.inline .radio.float-right,.inline .choice.float-right{float:right}.disabled input[type="file"],.disabled input[type="range"],.disabled input[type="checkbox"],.disabled input[type="radio"],.disabled .input,.disabled .checkbox,.disabled .radio,.disabled .choice,fieldset[disabled] input[type="file"],fieldset[disabled] input[type="range"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] input[type="radio"],fieldset[disabled] .input,fieldset[disabled] .checkbox,fieldset[disabled] .radio,fieldset[disabled] .choice{opacity:0.5}.disabled .input,fieldset[disabled] .input{background:rgba(0,0,0,0.05)}.input.success{border-color:#84b72d}.checkbox.success,.radio.success,.note.success{color:#668e23}.choice.success{background-color:rgba(132,183,45,0.1)}.success .input{border-color:#84b72d}.success .checkbox,.success .radio,.success .note{color:#668e23}.success .choice{background-color:rgba(132,183,45,0.1)}.input.warning{border-color:#dab10d}.checkbox.warning,.radio.warning,.note.warning{color:#c29d0b}.choice.warning{background-color:rgba(218,177,13,0.15)}.warning .input{border-color:#dab10d}.warning .checkbox,.warning .radio,.warning .note{color:#c29d0b}.warning .choice{background-color:rgba(218,177,13,0.15)}.input.error{border-color:#de5151}.checkbox.error,.radio.error,.note.error{color:#d42828}.choice.error{background-color:rgba(222,81,81,0.1)}.error .input{border-color:#de5151}.error .checkbox,.error .radio,.error .note{color:#d42828}.error .choice{background-color:rgba(222,81,81,0.1)}.input.active{border-color:#1489C9}.checkbox.active,.radio.active,.note.active{color:#0f699b}.choice.active{background-color:rgba(20,137,201,0.1)}.active .input{border-color:#1489C9}.active .checkbox,.active .radio,.active .note{color:#0f699b}.active .choice{background-color:rgba(20,137,201,0.1)}.button{cursor:pointer;display:inline-block;outline:none;margin:0;padding:0.75em 1.5em;font-family:inherit;font-size:1em;line-height:1.5em;font-weight:inherit;color:#303030;text-align:center;white-space:nowrap;vertical-align:top;background:none;box-shadow:inset 0 0 0 transparent;border:1px solid rgba(0,0,0,0.15);border-radius:3px;-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0.75s;transition-duration:0.75s;-webkit-transition-timing-function:linear;transition-timing-function:linear;color:#303030;text-shadow:none;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button:hover,.button:focus{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button:active{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button:hover,.button:focus{color:#303030;background-color:#fafafa;border-color:rgba(0,0,0,0.25)}.button:active{color:#303030;background-color:#f5f5f5;border-color:rgba(0,0,0,0.25)}.button.inverted{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#303030;background-clip:border-box;border:1px solid rgba(255,255,255,0.15)}.button.inverted:hover,.button.inverted:focus{color:#fff;background-color:#353535;border-color:rgba(255,255,255,0.25)}.button.inverted:active{color:#fff;background-color:#3a3a3a;border-color:rgba(255,255,255,0.25)}.button.clip-border{background-clip:border-box}.button.clip-padding{background-clip:padding-box}.button.default,.button-group.default .button,.button-group-wrapper.default .button{color:#303030;text-shadow:none;background-color:#efefef;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.default:hover,.button-group.default .button:hover,.button-group-wrapper.default .button:hover,.button.default:focus,.button-group.default .button:focus,.button-group-wrapper.default .button:focus{color:#303030;background-color:#eaeaea;border-color:rgba(0,0,0,0.25)}.button.default:active,.button-group.default .button:active,.button-group-wrapper.default .button:active{color:#303030;background-color:#e5e5e5;border-color:rgba(0,0,0,0.25)}.button.blue,.button.primary,.button.active,.button-group.blue .button,.button-group.primary .button,.button-group.active .button,.button-group-wrapper.blue .button,.button-group-wrapper.primary .button,.button-group-wrapper.active .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#1489C9;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.blue:hover,.button.primary:hover,.button.active:hover,.button-group.blue .button:hover,.button-group.primary .button:hover,.button-group.active .button:hover,.button-group-wrapper.blue .button:hover,.button-group-wrapper.primary .button:hover,.button-group-wrapper.active .button:hover,.button.blue:focus,.button.primary:focus,.button.active:focus,.button-group.blue .button:focus,.button-group.primary .button:focus,.button-group.active .button:focus,.button-group-wrapper.blue .button:focus,.button-group-wrapper.primary .button:focus,.button-group-wrapper.active .button:focus{color:#fff;background-color:#1279b2;border-color:rgba(0,0,0,0.25)}.button.blue:active,.button.primary:active,.button.active:active,.button-group.blue .button:active,.button-group.primary .button:active,.button-group.active .button:active,.button-group-wrapper.blue .button:active,.button-group-wrapper.primary .button:active,.button-group-wrapper.active .button:active{color:#fff;background-color:#0f699b;border-color:rgba(0,0,0,0.25)}.button.green,.button.success,.button-group.green .button,.button-group.success .button,.button-group-wrapper.green .button,.button-group-wrapper.success .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#84b72d;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.green:hover,.button.success:hover,.button-group.green .button:hover,.button-group.success .button:hover,.button-group-wrapper.green .button:hover,.button-group-wrapper.success .button:hover,.button.green:focus,.button.success:focus,.button-group.green .button:focus,.button-group.success .button:focus,.button-group-wrapper.green .button:focus,.button-group-wrapper.success .button:focus{color:#fff;background-color:#75a328;border-color:rgba(0,0,0,0.25)}.button.green:active,.button.success:active,.button-group.green .button:active,.button-group.success .button:active,.button-group-wrapper.green .button:active,.button-group-wrapper.success .button:active{color:#fff;background-color:#668e23;border-color:rgba(0,0,0,0.25)}.button.orange,.button.warning,.button-group.orange .button,.button-group.warning .button,.button-group-wrapper.orange .button,.button-group-wrapper.warning .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#e69242;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.orange:hover,.button.warning:hover,.button-group.orange .button:hover,.button-group.warning .button:hover,.button-group-wrapper.orange .button:hover,.button-group-wrapper.warning .button:hover,.button.orange:focus,.button.warning:focus,.button-group.orange .button:focus,.button-group.warning .button:focus,.button-group-wrapper.orange .button:focus,.button-group-wrapper.warning .button:focus{color:#fff;background-color:#e3852b;border-color:rgba(0,0,0,0.25)}.button.orange:active,.button.warning:active,.button-group.orange .button:active,.button-group.warning .button:active,.button-group-wrapper.orange .button:active,.button-group-wrapper.warning .button:active{color:#fff;background-color:#d8781d;border-color:rgba(0,0,0,0.25)}.button.red,.button.danger,.button-group.red .button,.button-group.danger .button,.button-group-wrapper.red .button,.button-group-wrapper.danger .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#de5151;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.red:hover,.button.danger:hover,.button-group.red .button:hover,.button-group.danger .button:hover,.button-group-wrapper.red .button:hover,.button-group-wrapper.danger .button:hover,.button.red:focus,.button.danger:focus,.button-group.red .button:focus,.button-group.danger .button:focus,.button-group-wrapper.red .button:focus,.button-group-wrapper.danger .button:focus{color:#fff;background-color:#da3c3c;border-color:rgba(0,0,0,0.25)}.button.red:active,.button.danger:active,.button-group.red .button:active,.button-group.danger .button:active,.button-group-wrapper.red .button:active,.button-group-wrapper.danger .button:active{color:#fff;background-color:#d42828;border-color:rgba(0,0,0,0.25)}.button.black,.button.secondary,.button-group.black .button,.button-group.secondary .button,.button-group-wrapper.black .button,.button-group-wrapper.secondary .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#606060;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.black:hover,.button.secondary:hover,.button-group.black .button:hover,.button-group.secondary .button:hover,.button-group-wrapper.black .button:hover,.button-group-wrapper.secondary .button:hover,.button.black:focus,.button.secondary:focus,.button-group.black .button:focus,.button-group.secondary .button:focus,.button-group-wrapper.black .button:focus,.button-group-wrapper.secondary .button:focus{color:#fff;background-color:#6d6d6d;border-color:rgba(0,0,0,0.25)}.button.black:active,.button.secondary:active,.button-group.black .button:active,.button-group.secondary .button:active,.button-group-wrapper.black .button:active,.button-group-wrapper.secondary .button:active{color:#fff;background-color:#7a7a7a;border-color:rgba(0,0,0,0.25)}.button.small,.button-group.small .button,.button-group-wrapper.small .button{padding:0.5em 1.25em;font-size:0.85em}.button.large,.button-group.large .button,.button-group-wrapper.large .button{font-size:1.4em}.button.block{display:block;width:100%}.button.clip-padding{background-clip:padding-box}.button.clip-border{background-clip:border-box}.button.close{width:1.5em;height:1.5em;padding:0;font-size:1.5em;line-height:1.5em;vertical-align:middle;background:none;border:0 none;box-shadow:none;border-radius:50%}.video-wrapper{position:relative;display:block;height:0;margin:2em 0;padding-bottom:56.25%;overflow:hidden}.video-wrapper .video-item,.video-wrapper embed,.video-wrapper iframe,.video-wrapper object,.video-wrapper video{position:absolute;top:0;left:0;width:100%;height:100%;border:0 none}.video-wrapper .ratio-16x9{padding-bottom:56.25%}.video-wrapper .ratio-4x3{padding-bottom:75%}.video-wrapper .ratio-3x2{padding-bottom:66.66667%}.button-group{vertical-align:middle;margin:0;display:inline-block;float:none;margin-right:0}.button-group:after{content:'';display:table;clear:both}.button-group>.button{position:relative;z-index:1;margin:0}.button-group>.button:hover{z-index:2}.button-group>.button:focus{z-index:3}.button-group>.button:active{z-index:4}.button-group>.button.active{z-index:5}.button-group+.button-group{margin-top:0;margin-left:.75em}.button-group>.button{width:auto}.button-group>.button{display:inline-block;float:left;border-radius:0}.button-group>.button+.button{margin-top:0;margin-left:-1px}.button-group>.button:first-child{border-top-left-radius:0;border-top-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.button-group>.button:last-child{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.button-group.block{display:block;float:none}.button-group.block+.button-group{margin-top:1em;margin-left:0}.button-group.vertical{margin-right:0}.button-group.vertical>.button{display:block;width:100%;float:none;border-radius:0}.button-group.vertical>.button+.button{margin-top:-1px;margin-left:0}.button-group.vertical>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.vertical>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.button-group.fluid{display:table;width:100%}.button-group.fluid>*{display:table-cell}.button-group>.button.is-1-of-1,.button-group.has-1>.button{width:100%}.button-group>.button.is-1-of-2,.button-group.has-2>.button{width:50%}.button-group>.button.is-1-of-3,.button-group.has-3>.button{width:33.33333%}.button-group>.button.is-1-of-4,.button-group.has-4>.button{width:25%}.button-group>.button.is-1-of-5,.button-group.has-5>.button{width:20%}.button-group>.button.is-1-of-6,.button-group.has-6>.button{width:16.66667%}.button-group>.button.is-1-of-7,.button-group.has-7>.button{width:14.28571%}.button-group>.button.is-1-of-8,.button-group.has-8>.button{width:12.5%}.button-group>.button.is-1-of-9,.button-group.has-9>.button{width:11.11111%}.button-group>.button.is-1-of-10,.button-group.has-10>.button{width:10%}.button-group>.button.is-1-of-11,.button-group.has-11>.button{width:9.09091%}.button-group>.button.is-1-of-12,.button-group.has-12>.button{width:8.33333%}.button-group.has-2,.button-group.has-margin-2{margin-right:-1px}.button-group.has-3,.button-group.has-margin-3{margin-right:-2px}.button-group.has-4,.button-group.has-margin-4{margin-right:-3px}.button-group.has-5,.button-group.has-margin-5{margin-right:-4px}.button-group.has-6,.button-group.has-margin-6{margin-right:-5px}.button-group.has-7,.button-group.has-margin-7{margin-right:-6px}.button-group.has-8,.button-group.has-margin-8{margin-right:-7px}.button-group.has-9,.button-group.has-margin-9{margin-right:-8px}.button-group.has-10,.button-group.has-margin-10{margin-right:-9px}.button-group.has-11,.button-group.has-margin-11{margin-right:-10px}.button-group.has-12,.button-group.has-margin-12{margin-right:-11px}@media (max-width: 479px){.button-group.stack-for-tiny{display:block;float:none;margin-right:0}.button-group.stack-for-tiny+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-tiny>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-tiny>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-tiny>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-tiny>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}@media (max-width: 759px){.button-group.stack-for-small{display:block;float:none;margin-right:0}.button-group.stack-for-small+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-small>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-small>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-small>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-small>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}@media (max-width: 989px){.button-group.stack-for-medium{display:block;float:none;margin-right:0}.button-group.stack-for-medium+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-medium>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-medium>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-medium>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-medium>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}.button-group-wrapper{display:block;margin:0 0 -1em -1em}.button-group-wrapper:after{content:'';display:table;clear:both}.button-group-wrapper>.button,.button-group-wrapper .button-group{float:left}.button-group-wrapper>.button.float-left,.button-group-wrapper .button-group.float-left{float:left}.button-group-wrapper>.button.float-right,.button-group-wrapper .button-group.float-right{float:right}.button-group-wrapper .button-group.block{float:none;clear:both}.button-group-wrapper>.button,.button-group-wrapper .button-group,.button-group-wrapper .button-group.block,.button-group-wrapper .button-group+.button-group,.button-group-wrapper .button-group.block+.button-group,.button-group-wrapper .button-group.stack-for-small,.button-group-wrapper .button-group.stack-for-mobile,.button-group-wrapper .button-group.stack-for-tablet,.button-group-wrapper .button-group.stack-for-small+.button-group,.button-group-wrapper .button-group.stack-for-mobile+.button-group,.button-group-wrapper .button-group.stack-for-tablet+.button-group{margin-top:0;margin-left:1em;margin-bottom:1em}.notice{margin:2em 0;padding:0.25em 1.25em;font-size:1em;line-height:1.5em;border-radius:3px;color:#303030;text-shadow:0 1px 0 rgba(255,255,255,0.25);background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.05)}.notice .close{float:right;margin:0.45em -0.25em 0 1em;color:inherit}.notice .close+*{padding-right:2.5em}.notice.inverted{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.25);background:rgba(48,48,48,0.9);border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.05)}.notice.blue,.notice.info{background:rgba(20,137,201,0.1)}.notice.blue.inverted,.inverted.notice.info{background:rgba(20,137,201,0.9)}.notice.green,.notice.success{background:rgba(132,183,45,0.1)}.notice.green.inverted,.inverted.notice.success{background:rgba(132,183,45,0.9)}.notice.yellow,.notice.warning{background:rgba(241,196,15,0.1)}.notice.yellow.inverted,.inverted.notice.warning{background:rgba(218,177,13,0.9)}.notice.orange{background:rgba(230,146,66,0.1)}.notice.orange.inverted{background:rgba(230,146,66,0.9)}.notice.red,.notice.danger{background:rgba(222,81,81,0.1)}.notice.red.inverted,.inverted.notice.danger{background:rgba(222,81,81,0.9)}.notice.violet{background:rgba(188,107,211,0.1)}.notice.violet.inverted{background:rgba(188,107,211,0.9)}.notice.small{font-size:0.9em}.notice.large{font-size:1.1em}.notice.inline{display:inline;margin:0;padding:0 0.25em;box-shadow:none}.notice.inline.inverted{border:0 none}@media (min-width: 760px){.notice.pull-left{width:45%;float:left;margin:0.5em 5% 1em 0}}@media (min-width: 760px){.notice.pull-right{width:45%;float:right;margin:0.5em 0 1em 5%}}.breadcrumb{display:block;margin:1em 0;font-size:1em}.breadcrumb ul,.breadcrumb ol{margin:0;list-style:none}.breadcrumb ul:after,.breadcrumb ol:after{content:'';display:table;clear:both}.breadcrumb li{float:left;margin:0}.breadcrumb li a{border:0 none}.breadcrumb .current{color:#aaa}.breadcrumb li:after{content:"/";padding:0 0.75em;color:rgba(0,0,0,0.25)}.breadcrumb li:last-child:after{content:none}.breadcrumb.wrapped{padding:0.5em 1em;background:#e8f3fa;border:1px solid rgba(0,0,0,0.1);border-radius:3px}.dropdown,.dropdown-content,.dropdown-menu{position:relative;display:block;width:16rem;margin:0;font-size:.85714rem;line-height:1.35em;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 6px rgba(0,0,0,0.15);border-radius:3px}.dropdown{padding:0}.dropdown>.dropdown-content,.dropdown>.dropdown-menu{width:auto;margin:0;background:none;border:0 none;border-top:1px solid rgba(0,0,0,0.1);box-shadow:none;border-radius:0}.dropdown>.dropdown-content:first-child,.dropdown>.dropdown-menu:first-child{border-top:0 none;border-top-left-radius:3px;border-top-right-radius:3px}.dropdown>.dropdown-content:last-child,.dropdown>.dropdown-menu:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.dropdown-content{padding:1em}.dropdown-content>*{margin-top:0.5em;margin-bottom:0.5em}.dropdown-content>:first-child{margin-top:0}.dropdown-content>:last-child{margin-bottom:0}.dropdown-content>hr{margin:1em 0}.dropdown-content>a.block{display:block;margin:-0.5em;padding:1em;color:#303030;border:0 none;border-radius:3px}.dropdown-content>a.block:hover{background:rgba(0,0,0,0.05);color:#303030}.dropdown-content>a.block>*{margin-top:0.5em;margin-bottom:0.5em}.dropdown-content>a.block>:first-child{margin-top:0}.dropdown-content>a.block>:last-child{margin-bottom:0}.dropdown-content>.button{display:block}.dropdown-menu{list-style:none;padding:0.5em}.dropdown-menu li{position:relative;margin:0;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.dropdown-menu li:hover{background:rgba(0,0,0,0.05);background-clip:padding-box}.dropdown-menu li:hover>a{color:#303030}.dropdown-menu li.active>a{color:#aaa}.dropdown-menu li.active:hover{background:none}.dropdown-menu li:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.dropdown-menu li:last-child{border-bottom:0 none;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.dropdown-menu li a{display:block;padding:0.75em 1em;color:#303030;border:0 none}.dropdown-trigger{position:relative}.dropdown-trigger .dropdown{position:absolute;z-index:100;opacity:0;visibility:hidden;-webkit-transition:"transform, opacity, visibility";transition:"transform, opacity, visibility";-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:0.25s;transition-delay:0.25s}.dropdown-trigger:not(.on-click):hover>.dropdown,.dropdown-trigger.active>.dropdown{z-index:105;opacity:1;visibility:visible;-webkit-transition:transform,opacity,visibility;transition:transform,opacity,visibility;-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:none;transition-delay:none}.dropdown-trigger .dropdown{margin:-1px 0 0 0;top:100%;left:0;right:auto;bottom:auto;-webkit-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}.dropdown-trigger:not(.on-click):hover>.dropdown,.dropdown-trigger.active>.dropdown{margin:-1px 0 0 0;top:100%;left:0;right:auto;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.dropdown-menu{position:relative}.dropdown-menu .dropdown-menu{position:absolute;z-index:100;opacity:0;visibility:hidden;-webkit-transition:"transform, opacity, visibility";transition:"transform, opacity, visibility";-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:0.25s;transition-delay:0.25s}.dropdown-menu>li:hover>.dropdown-menu,.dropdown-menu.active>li>.dropdown-menu{z-index:105;opacity:1;visibility:visible;-webkit-transition:transform,opacity,visibility;transition:transform,opacity,visibility;-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:none;transition-delay:none}.dropdown-menu .dropdown-menu{margin:-1px 0 0 -1px;top:-0.5em;left:100%;right:auto;bottom:auto;-webkit-transform:translate3d(-1em, 0, 0);-ms-transform:translate3d(-1em, 0, 0);transform:translate3d(-1em, 0, 0)}.dropdown-menu>li:hover>.dropdown-menu,.dropdown-menu.active>li>.dropdown-menu{margin:-1px 0 0 -1px;top:-0.5em;left:100%;right:auto;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.container{width:100%;min-width:none;max-width:none;margin:0;padding:0 1.5rem}.row{width:100%;margin-left:0;margin-right:0}.col{width:100%;float:none;padding-left:0;padding-right:0}@media (min-width: 760px){.container{width:100%;min-width:none;max-width:80rem;margin:0 auto;padding:0 1.5rem}.container:after{content:'';display:table;clear:both}.row{width:auto;margin-left:-.75rem;margin-right:-.75rem}.row:after{content:'';display:table;clear:both}.col{min-height:1px;float:left;padding-left:.75rem;padding-right:.75rem}.col.col-left{float:left}.col.col-right{float:right}.col-no-inner-gutter{padding-left:0;padding-right:0}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}.prefix-1{margin-left:8.33333%}.prefix-2{margin-left:16.66667%}.prefix-3{margin-left:25%}.prefix-4{margin-left:33.33333%}.prefix-5{margin-left:41.66667%}.prefix-6{margin-left:50%}.prefix-7{margin-left:58.33333%}.prefix-8{margin-left:66.66667%}.prefix-9{margin-left:75%}.prefix-10{margin-left:83.33333%}.prefix-11{margin-left:91.66667%}.suffix-1{margin-right:8.33333%}.suffix-2{margin-right:16.66667%}.suffix-3{margin-right:25%}.suffix-4{margin-right:33.33333%}.suffix-5{margin-right:41.66667%}.suffix-6{margin-right:50%}.suffix-7{margin-right:58.33333%}.suffix-8{margin-right:66.66667%}.suffix-9{margin-right:75%}.suffix-10{margin-right:83.33333%}.suffix-11{margin-right:91.66667%}}.has-1,.has-2,.has-3,.has-4,.has-5,.has-6,.has-7,.has-8,.has-9,.has-10,.has-11,.has-12{display:block}.has-1:after,.has-2:after,.has-3:after,.has-4:after,.has-5:after,.has-6:after,.has-7:after,.has-8:after,.has-9:after,.has-10:after,.has-11:after,.has-12:after{content:'';display:table;clear:both}.is-1-of-1,.has-1>*,.is-1-of-2,.has-2>*,.is-1-of-3,.has-3>*,.is-1-of-4,.has-4>*,.is-1-of-5,.has-5>*,.is-1-of-6,.has-6>*,.is-1-of-7,.has-7>*,.is-1-of-8,.has-8>*,.is-1-of-9,.has-9>*,.is-1-of-10,.has-10>*,.is-1-of-11,.has-11>*,.is-1-of-12,.has-12>*{float:left}.is-1-of-1,.has-1>*{width:100%}.is-1-of-2,.has-2>*{width:50%}.is-1-of-3,.has-3>*{width:33.33333%}.is-1-of-4,.has-4>*{width:25%}.is-1-of-5,.has-5>*{width:20%}.is-1-of-6,.has-6>*{width:16.66667%}.is-1-of-7,.has-7>*{width:14.28571%}.is-1-of-8,.has-8>*{width:12.5%}.is-1-of-9,.has-9>*{width:11.11111%}.is-1-of-10,.has-10>*{width:10%}.is-1-of-11,.has-11>*{width:9.09091%}.is-1-of-12,.has-12>*{width:8.33333%}body{background:#f5f5f5}.header{padding:2em 0}.home .header{padding-bottom:0;border-bottom:0 none}.main{background:#fff}.home .header{background:none}.main{padding:1em 0 2em}.footer{padding:2em 0}@media (min-width: 760px){.home .header{padding-bottom:2em}.main{padding:2em 0}}.header .flex{display:flex;justify-content:space-between;align-items:center;margin:0}.header .logo{display:flex;align-items:center;border:0 none}.header .logo img{margin:0}.header .logo .version{margin-top:8px;margin-left:10px;color:#aaa;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.header .logo:hover .version{color:#b357cd}.home .header .logo .version{color:rgba(255,255,255,0.5)}.home .header .logo:hover .version{color:#fff}.header .nav ul.menu-hori{display:flex;align-items:center;margin:0;list-style:none}.header .nav ul.menu-hori li{margin:0 15px}.header .nav ul.menu-hori li:first-child{margin-left:0}.header .nav ul.menu-hori li:last-child{margin-right:0}.header .nav ul.menu-hori li a:not(.button){color:#303030;font-size:1.07143em}.header .nav ul.menu-hori li a:not(.button):hover{color:#b357cd}.header .nav ul.menu-hori li.active a:not(.button){color:#aaa;border:0 none}.home .header .nav ul.menu-hori li a:not(.button){color:#fff;border-color:rgba(255,255,255,0.1);font-size:1.07143em}.home .header .nav ul.menu-hori li a:not(.button):hover{border-color:#fff}.home .header .nav ul.menu-hori li.active a:not(.button){color:rgba(255,255,255,0.5)}.home .header .nav li>.button,.home .header .nav .dropdown-trigger>.button{background-clip:padding-box}.header .dropdown-trigger .dropdown{margin:-1px 0 0 0;top:100%;left:auto;right:0;bottom:auto;-webkit-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}.header .dropdown-trigger:not(.on-click):hover>.dropdown,.header .dropdown-trigger.active>.dropdown{margin:-1px 0 0 0;top:100%;left:auto;right:0;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.icon.icon-more{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:8px;height:1.5em;margin:0 0 0 10px;float:right}.icon.icon-more .dot{display:inline-block;width:3px;height:3px;margin:0 0 2px 0;background:#303030;border-radius:50%}.icon.icon-more .dot:last-child{margin-bottom:1px}.header .logo .mobile,.header .nav .mobile{display:inline-block}.header .logo .desktop,.header .nav .menu-hori.desktop{display:none}@media (min-width: 930px){.header .nav .mobile{display:none}.header .nav .menu-hori.desktop{display:flex}}@media (min-width: 480px){.header .logo .mobile{display:none}.header .logo .desktop{display:flex}}.hero{position:relative;background:#1489C9}.hero{position:relative}.hero:after{background:inherit;bottom:0;content:'';display:block;height:50%;left:0;position:absolute;right:0;transform:skewY(-4deg);transform-origin:100%;z-index:-1}.hero:before{content:'';position:absolute;top:100%;left:0;width:100%;height:15em;background:#fff;z-index:-2}.hero-content{text-align:center;margin-bottom:2em}.hero-content .container{padding-top:2em;padding-bottom:2em}.hero-content h1{font-size:1.28571em;line-height:1.5em;font-weight:300;color:#fff}@media (min-width: 480px){.hero-content{margin-bottom:5em}.hero-content .container{padding:5em 5em 6em}.hero-content h1{font-size:1.42857em}}@media (min-width: 760px){.hero-content{margin-bottom:10em}.hero-content .container{padding:10em 10em 12em}.hero-content h1{font-size:1.71429em}}@media (min-width: 1400px){.hero-content{margin-bottom:15em}}.main .flex,.main .feature{margin-bottom:4em}.main .flex:last-child,.main .feature:last-child{margin-bottom:0}.home .row{margin-bottom:4em}.home hr{margin:8em 0}.home .main img{width:250px;height:auto;margin:1em auto 3em}@media (min-width: 760px){.main .flex{display:flex;justify-content:space-between;align-items:stretch}.main .flex>*{width:50%;margin-right:6em}.main .flex>*:last-child{margin-right:0}.main .feature{display:flex;justify-content:space-between;align-items:center}.main .feature>*{width:50%}.main .feature .feature-content{width:50%;margin-left:3em;margin-right:6em}.main .feature .feature-ill{width:50%;margin-left:6em;margin-right:0}.main .feature.reverse{flex-direction:row-reverse}.main .feature.reverse .feature-content{margin-left:6em;margin-right:3em}.main .feature.reverse .feature-ill{margin-left:0;margin-right:6em}.home .main img{width:auto;margin:0 auto}}.widget{margin:0;padding:2rem 0;border-bottom:1px solid rgba(0,0,0,0.1);border-radius:3px}.widget:first-child{padding-top:1rem}.widget:last-child{padding-bottom:1rem;border-bottom:0 none}.widget h2{margin:0.5rem 0;font-size:1.14286em;font-weight:600}.widget-menu .active>a{color:#aaa;border:0 none}.widget-menu ul ul{display:none}.widget-menu .active>ul{display:block}.widget-contents .active>a{color:#aaa;border:0 none}.widget-action{display:none}@media (min-width: 760px){.widget-action{display:block}}.widget-back{text-align:center}.widget-back:first-child,.widget-back:last-child{padding:0}@media (min-width: 760px){.widget-back{margin:1em 0;text-align:left}.widget-back:first-child,.widget-back:last-child{padding:1em 0}}@media screen and (max-width: 759px){.table-docs tr,.table-docs th,.table-docs td{display:block}.table-docs tr{padding:0.5em 0.75em;border-bottom:1px solid rgba(0,0,0,0.1)}.table-docs tr:first-child{border-top:1px solid rgba(0,0,0,0.1)}.table-docs tr th,.table-docs tr td{padding:0.5rem 0;border-bottom:1px dotted rgba(0,0,0,0.1)}.table-docs tr th:last-child,.table-docs tr td:last-child{border-bottom:0 none}.table-docs tbody:first-child tr:first-child th,.table-docs tbody:first-child tr:first-child td{border-top:0 none}}.list-docs{margin:1.5rem 0}.list-docs h3{font-size:1.28571em;color:#aaa;font-weight:300}.list-docs.numbered{counter-reset:list-counter}.list-docs.numbered li{position:relative;padding-left:3em}.list-docs.numbered li:before{content:counter(list-counter);counter-increment:list-counter;position:absolute;top:1.5rem;left:0;font-size:2em;line-height:1.5em;color:#aaa}.subsection:last-child .list-docs:last-child li:last-child{border-bottom:0 none}.subsection{margin:2rem 0}@media (min-width: 760px){.subsection{margin:3rem 0}}.swatch{display:inline-block;border:1px solid rgba(0,0,0,0.1);width:44px;height:44px;border-radius:3px}.swatch-wrap{position:relative;height:44px;min-width:44px}.swatch-wrap .swatch{position:absolute;top:0;left:0}.swatch-wrap .swatch-value{margin-left:49px;display:inline-block;width:auto;font-family:Menlo,Monaco,Consolas,"Courier New",monospace}.article-listing{list-style:none;margin:0}.article-listing li{margin:2rem 0}.article-listing li:first-child{margin-top:0}.article-listing h1{font-size:2em}.article-listing h1 a{color:#303030}.article-listing h1 a:hover{color:#b357cd}.article{position:relative}.article header{text-align:center}.article header:after{content:'';display:inline-block;margin:1em auto;height:1px;width:3em;background:rgba(0,0,0,0.1)}.article .date,.article .meta{text-transform:uppercase;letter-spacing:1px;color:#aaa}.article .date a,.article .meta a{color:#aaa}.article .date a:hover,.article .meta a:hover{color:#b357cd}.article .content{font-size:1.14286em;line-height:1.5em}.page-nav{margin:2em 0}.page-nav .button{display:block;margin:0.5em 0}@media (min-width: 480px){.page-nav{margin:4em 0;display:flex;justify-content:space-between;align-items:center}.page-nav .button{width:50%;margin-right:1em}.page-nav .button:last-child{margin-right:0}}.comments-wrapper{margin:2em 0}@media (min-width: 760px){.comments-wrapper{margin:6em 0}}.block-action{margin:2em 0;padding:1.5em 3em;background:#1489C9;border-radius:3px;color:#fff;text-align:center}.block-action h3{color:#fff}.block-action .button-group-wrapper{display:block}.block-action .button-group-wrapper .button{width:100%;display:block;background-clip:padding-box}@media (min-width: 760px){.block-action .button-group-wrapper{display:inline-block}.block-action .button-group-wrapper .button{width:auto;display:inline-block}}.footer{color:#aaa;text-align:center}.footer .logo{border:0 none}.footer img{display:inline-block;opacity:0.4}.footer a{color:#aaa}.footer a:hover{color:#b357cd}@media (min-width: 760px){.footer{text-align:left}.footer .logo{position:relative;top:-3px;float:right}.footer img{margin:0}}figure{margin:1em 0}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000}.highlight .gd .x{color:#000}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000}.highlight .gi .x{color:#000}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .na{color:#008080}.highlight .nb{color:#0086B3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:#008080}.highlight .ni{color:#800080}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:#000080}.highlight .nv{color:#008080}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:#008080}.highlight .vg{color:#008080}.highlight .vi{color:#008080}.highlight .il{color:#099}.swatch-black{background-color:#000}.swatch-white{background-color:#fff}.swatch-gray-pale{background-color:#f5f5f5}.swatch-gray-lighter{background-color:#ccc}.swatch-gray-light{background-color:#aaa}.swatch-gray{background-color:#606060}.swatch-gray-dark{background-color:#303030}.swatch-gray-darker{background-color:#101010}.swatch-red-pale{background-color:rgba(222,81,81,0.1)}.swatch-red-lighter{background-color:#e67c7c}.swatch-red-light{background-color:#e26666}.swatch-red{background-color:#de5151}.swatch-red-dark{background-color:#da3c3c}.swatch-red-darker{background-color:#d42828}.swatch-red-orange-pale{background-color:rgba(231,112,69,0.1)}.swatch-red-orange-lighter{background-color:#ed9272}.swatch-red-orange-light{background-color:#ea815b}.swatch-red-orange{background-color:#e77045}.swatch-red-orange-dark{background-color:#e45e2e}.swatch-red-orange-darker{background-color:#dd4f1c}.swatch-orange-pale{background-color:rgba(230,146,66,0.1)}.swatch-orange-lighter{background-color:#ecac6f}.swatch-orange-light{background-color:#e99f59}.swatch-orange{background-color:#e69242}.swatch-orange-dark{background-color:#e3852b}.swatch-orange-darker{background-color:#d8781d}.swatch-yellow-orange-pale{background-color:rgba(242,173,35,0.1)}.swatch-yellow-orange-lighter{background-color:#f5bf53}.swatch-yellow-orange-light{background-color:#f3b63b}.swatch-yellow-orange{background-color:#f2ad23}.swatch-yellow-orange-dark{background-color:#eda30e}.swatch-yellow-orange-darker{background-color:#d5920d}.swatch-yellow-pale{background-color:rgba(241,196,15,0.1)}.swatch-yellow-lighter{background-color:#f4d03f}.swatch-yellow-light{background-color:#f2ca27}.swatch-yellow{background-color:#f1c40f}.swatch-yellow-dark{background-color:#dab10d}.swatch-yellow-darker{background-color:#c29d0b}.swatch-yellow-green-pale{background-color:rgba(192,196,25,0.1)}.swatch-yellow-green-lighter{background-color:#e1e42b}.swatch-yellow-green-light{background-color:#d7da1b}.swatch-yellow-green{background-color:#c0c419}.swatch-yellow-green-dark{background-color:#aaad16}.swatch-yellow-green-darker{background-color:#949613}.swatch-green-pale{background-color:rgba(132,183,45,0.1)}.swatch-green-lighter{background-color:#9ed146}.swatch-green-light{background-color:#93cb32}.swatch-green{background-color:#84b72d}.swatch-green-dark{background-color:#75a328}.swatch-green-darker{background-color:#668e23}.swatch-blue-green-pale{background-color:rgba(70,166,124,0.1)}.swatch-blue-green-lighter{background-color:#62bd95}.swatch-blue-green-light{background-color:#50b589}.swatch-blue-green{background-color:#46a67c}.swatch-blue-green-dark{background-color:#3f946e}.swatch-blue-green-darker{background-color:#378261}.swatch-blue-pale{background-color:rgba(20,137,201,0.1)}.swatch-blue-lighter{background-color:#27a5e9}.swatch-blue-light{background-color:#1699e0}.swatch-blue{background-color:#1489C9}.swatch-blue-dark{background-color:#1279b2}.swatch-blue-darker{background-color:#0f699b}.swatch-blue-violet-pale{background-color:rgba(99,119,211,0.1)}.swatch-blue-violet-lighter{background-color:#8b9ade}.swatch-blue-violet-light{background-color:#7788d9}.swatch-blue-violet{background-color:#6377d3}.swatch-blue-violet-dark{background-color:#4f65cd}.swatch-blue-violet-darker{background-color:#3b54c8}.swatch-violet-pale{background-color:rgba(188,107,211,0.1)}.swatch-violet-lighter{background-color:#ce92df}.swatch-violet-light{background-color:#c57fd9}.swatch-violet{background-color:#bc6bd3}.swatch-violet-dark{background-color:#b357cd}.swatch-violet-darker{background-color:#aa44c7}.swatch-red-violet-pale{background-color:rgba(210,89,146,0.1)}.swatch-red-violet-lighter{background-color:#dd81ac}.swatch-red-violet-light{background-color:#d86d9f}.swatch-red-violet{background-color:#d25992}.swatch-red-violet-dark{background-color:#cd4584}.swatch-red-violet-darker{background-color:#c33577}.swatch-bg-color{background-color:#f5f5f5}.swatch-bg-selection{background-color:rgba(132,183,45,0.25)}.swatch-border-color{background-color:rgba(0,0,0,0.1)}.swatch-border-color-hover{background-color:rgba(0,0,0,0.25)}.demo{margin:1.5em -1.5em;padding:0 1.5em;overflow:auto;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1)}.demo .box{width:50px;height:50px;margin:0 auto;color:#fff;background:#1489C9;border-radius:3px}@media (min-width: 760px){.demo{margin:1.5em 0;padding:1.5em 3em;border:1px solid rgba(0,0,0,0.1);border-radius:3px}}.demo.demo-vertical-center{height:200px}.demo.demo-vertical-center .box{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.demo-border-radius{display:inline-block;background:#1489C9;width:30px;height:30px}.mixin-border-radius{border-radius:50%}.mixin-border-radius-top{border-top-left-radius:50%;border-top-right-radius:50%}.mixin-border-radius-top-left{border-top-left-radius:50%}.mixin-border-radius-top-right{border-top-right-radius:50%}.mixin-border-radius-bottom{border-bottom-right-radius:50%;border-bottom-left-radius:50%}.mixin-border-radius-bottom-left{border-bottom-left-radius:50%}.mixin-border-radius-bottom-right{border-bottom-right-radius:50%}.mixin-border-radius-left{border-top-left-radius:50%;border-bottom-left-radius:50%}.mixin-border-radius-left-top{border-top-left-radius:50%}.mixin-border-radius-left-bottom{border-bottom-left-radius:50%}.mixin-border-radius-right{border-top-right-radius:50%;border-bottom-right-radius:50%}.mixin-border-radius-right-top{border-top-right-radius:50%}.mixin-border-radius-right-bottom{border-bottom-right-radius:50%}.demo.demo-transform-skew .box{-webkit-transform:skew(30deg, 10deg);-ms-transform:skew(30deg, 10deg);transform:skew(30deg, 10deg)}.demo.demo-rotate .box{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.demo.demo-transition .box{background-color:#1489C9;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.demo.demo-transition .box:hover{background-color:#de5151}@-webkit-keyframes example{0%{background-color:#de5151}50%{background-color:#1489C9}100%{background-color:#de5151}}@keyframes example{0%{background-color:#de5151}50%{background-color:#1489C9}100%{background-color:#de5151}}.demo.demo-animation .box{-webkit-animation:example 10s linear 1s infinite normal;animation:example 10s linear 1s infinite normal}.demo.demo-linear-gradient .box{width:100%;background-image:-webkit-linear-gradient(left,#bc6bd3,#1489C9,#84b72d);background-image:-moz-linear-gradient(left,#bc6bd3,#1489C9,#84b72d);background-image:-ms-linear-gradient(left,#bc6bd3,#1489C9,#84b72d);background-image:linear-gradient(left,#bc6bd3,#1489C9,#84b72d)}.demo.demo-radial-gradient .box{width:100px;height:100px;background-image:-webkit-radial-gradient(circle,#1489C9,#bc6bd3);background-image:-moz-radial-gradient(circle,#1489C9,#bc6bd3);background-image:-ms-radial-gradient(circle,#1489C9,#bc6bd3);background-image:radial-gradient(circle,#1489C9,#bc6bd3)}.demo.demo-text-truncate .box{width:150px;height:auto;padding:1em 1.5em;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo.demo-logo-image .logo{display:block;margin:1.5rem auto;padding:0;border:0 none;background:url("../img/baseweb-hori-black.svg") no-repeat left center;background-size:187px 40px;width:187px;height:40px;font-size:0;line-height:0;text-indent:100%;white-space:nowrap;overflow:hidden}.demo.demo-text-mask{-webkit-text-fill-color:rgba(0,0,0,0.25);-webkit-background-clip:text;background-clip:text;background-image:url("../img/demo-mask.jpg");background-repeat:no-repeat;background-position:center center;background-size:cover}.demo.demo-text-mask p{margin:1rem 0;font-size:4em;line-height:1em;text-align:center;text-transform:uppercase;font-weight:900;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo.demo-triangle{text-align:center}.demo.demo-triangle:after{content:'';display:table;clear:both}.example-triangle-1,.example-triangle-2,.example-triangle-3{content:'';display:inline-block;width:0;height:0;border:0 none;border-style:solid;border-color:transparent}.example-triangle-1{border-color:transparent;border-width:14px 14px 14px 0;border-right-color:#1489C9}.example-triangle-2{border-color:transparent;border-width:14px 14px 0 14px;border-top-color:#6377d3}.example-triangle-3{border-color:transparent;border-width:14px 0 14px 14px;border-left-color:#bc6bd3}.demo-grid{margin:1.5rem 0}.demo-grid .col{margin-top:0.75rem;margin-bottom:0.75rem}.demo-grid .col p{margin:0;padding:1rem;background:#f5f5f5;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:1em;line-height:1.5em;text-align:center;border-radius:3px}.demo-grid-semantic .demo-wrapper,.demo-grid-semantic .demo-content,.demo-grid-semantic .demo-aside,.demo-grid-semantic .demo-article{background:rgba(20,137,201,0.1)}.demo-grid-semantic .demo-wrapper p,.demo-grid-semantic .demo-content p,.demo-grid-semantic .demo-aside p,.demo-grid-semantic .demo-article p{margin:0;padding:1rem;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:1em;line-height:1.5em;text-align:center}.demo-grid-semantic .demo-aside p,.demo-grid-semantic .demo-article p{margin:0.75rem 0;background:#f5f5f5;border-radius:3px}.demo-grid-semantic .demo-wrapper{width:100%;min-width:none;max-width:80rem;margin:0 auto;padding:0 1.5rem}.demo-grid-semantic .demo-wrapper:after{content:'';display:table;clear:both}.demo-grid-semantic .demo-content{width:auto;margin-left:-.75rem;margin-right:-.75rem}.demo-grid-semantic .demo-content:after{content:'';display:table;clear:both}.demo-grid-semantic .demo-aside,.demo-grid-semantic .demo-article{min-height:1px;float:left;padding-left:.75rem;padding-right:.75rem}.demo-grid-semantic .demo-aside.col-left,.demo-grid-semantic .demo-article.col-left{float:left}.demo-grid-semantic .demo-aside.col-right,.demo-grid-semantic .demo-article.col-right{float:right}.demo-grid-semantic .demo-aside{width:33.33333%}.demo-grid-semantic .demo-article{width:66.66667%}@media (min-width: 760px){.demo-grid-prefix-suffix{padding-left:0.75rem;padding-right:0.75rem}}.demo-grid-prefix-suffix .row{background:rgba(20,137,201,0.1)}@media (min-width: 760px){.demo-grid-nested{padding-left:0.75rem;padding-right:0.75rem}}.demo-grid-nested .col{margin-top:0;margin-bottom:0;background:rgba(20,137,201,0.1)}.demo-grid-nested .col p{margin:0.75rem 0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo.demo-mini-grid{padding:1.5em 3em}.demo-mini-grid .mini-grid{margin:1rem 0}.demo-mini-grid .mini-grid:after{content:'';display:table;clear:both}.demo-mini-grid .mini-grid>*{margin:0;padding:1rem 0;background:#f5f5f5;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:1em;line-height:1.5em;text-align:center;border-left:1px solid rgba(0,0,0,0.1)}.demo-mini-grid .mini-grid>*:first-child{border-left:0 none;border-top-left-radius:3px;border-bottom-left-radius:3px}.demo-mini-grid .mini-grid>*:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.demo-buttons{padding-top:1rem}.demo-buttons>p{margin-left:-0.5rem}.demo-buttons>p:after{content:'';display:table;clear:both}.demo-buttons .button,.demo-buttons .button-custom,.demo-buttons .button-custom-mobile{float:left;margin:0.5rem 0 0 0.5rem}.demo-buttons-mobile>p{margin-left:0}.demo-buttons-mobile .button,.demo-buttons-mobile .button-custom-mobile{margin-left:0}.button-custom{cursor:pointer;display:inline-block;outline:none;margin:0;padding:0.75em 1.5em;font-family:inherit;font-size:1em;line-height:1.5em;font-weight:inherit;color:#303030;text-align:center;white-space:nowrap;vertical-align:top;background:none;box-shadow:inset 0 0 0 transparent;border:1px solid rgba(0,0,0,0.15);border-radius:3px;-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0.75s;transition-duration:0.75s;-webkit-transition-timing-function:linear;transition-timing-function:linear;color:#fff;text-shadow:none;background-color:#bc6bd3;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button-custom:hover,.button-custom:focus{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button-custom:active{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button-custom:hover,.button-custom:focus{color:#fff;background-color:#b357cd;border-color:rgba(0,0,0,0.25)}.button-custom:active{color:#fff;background-color:#aa44c7;border-color:rgba(0,0,0,0.25)}.button-custom-mobile{cursor:pointer;display:inline-block;outline:none;margin:0;padding:0.75em 1.5em;font-family:inherit;font-size:1em;line-height:1.5em;font-weight:inherit;color:#303030;text-align:center;white-space:nowrap;vertical-align:top;background:none;box-shadow:inset 0 0 0 transparent;border:1px solid rgba(0,0,0,0.15);border-radius:3px;-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0.75s;transition-duration:0.75s;-webkit-transition-timing-function:linear;transition-timing-function:linear;color:#303030;text-shadow:none;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,0.15);display:block;width:100%}.button-custom-mobile:hover,.button-custom-mobile:focus{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button-custom-mobile:active{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button-custom-mobile:hover,.button-custom-mobile:focus{color:#303030;background-color:#f2f2f2;border-color:rgba(0,0,0,0.25)}.button-custom-mobile:active{color:#303030;background-color:#e6e6e6;border-color:rgba(0,0,0,0.25)}.demo .notice{margin-top:1em;margin-bottom:1em}.custom-breadcrumb{display:block;margin:1em 0;font-size:1em}.custom-breadcrumb ul,.custom-breadcrumb ol{margin:0;list-style:none}.custom-breadcrumb ul:after,.custom-breadcrumb ol:after{content:'';display:table;clear:both}.custom-breadcrumb li{float:left;margin:0}.custom-breadcrumb li a{color:#84b72d;border:0 none}.custom-breadcrumb li a:hover{color:#de5151}.custom-breadcrumb .current{color:#aaa}.custom-breadcrumb li:after{content:"»";padding:0 0.75em;color:rgba(0,0,0,0.25)}.custom-breadcrumb li:last-child:after{content:none}.breadcrumb.custom-wrapped{padding:0.5em 1em;background:rgba(170,68,199,0.1);border:3px solid rgba(0,0,0,0.05);border-radius:0}.demo-dropdown{padding:2em 3em 2em;overflow:visible}.demo-dropdown:after{content:'';display:table;clear:both}.demo-dropdown>.dropdown-trigger{float:left;margin:1em 1em 1em 0}.demo-dropdown-styles{padding:2em 3em 3em}.demo-dropdown-styles>.dropdown,.demo-dropdown-styles>.dropdown-content,.demo-dropdown-styles>.dropdown-menu{float:left;margin:1em 1em 0 0} + */html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}table{font-size:1em}*,*:before,*:after{-moz-box-sizing:border-box;box-sizing:border-box}::-moz-selection{background:rgba(132,183,45,0.25);text-shadow:none}::selection{background:rgba(132,183,45,0.25);text-shadow:none}.clearfix:after{content:'';display:table;clear:both}.remove-clearfix:after{content:none;display:none;clear:none}.float-left{float:left}.float-right{float:right}html{font-size:14px}body{font-family:"Open Sans","Helvetica Neue","HelveticaNeue",helvetica,arial,sans-serif;font-size:14px;line-height:1.5em;font-weight:normal;color:#303030;-webkit-font-smoothing:subpixel-antialiased}h1,h2,h3,h4,h5,h6{margin:1rem 0;font-family:inherit;font-weight:normal;line-height:1.25em;color:#303030}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#1489C9;border:0 none}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#b357cd}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.25em}h4{font-size:1.1em}h5{font-size:1.1em;color:rgba(48,48,48,0.6)}h6{font-size:1.1em;color:rgba(48,48,48,0.3)}@media (min-width: 760px){h1{font-size:3em}h2{font-size:2em}h3{font-size:1.5em}h4,h5,h6{font-size:1.25em}}p{margin:1em 0}a{color:#1489C9;text-decoration:none;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:all 0.25s linear;transition:all 0.25s linear}a:hover{cursor:pointer;color:#b357cd;border-color:#b357cd}strong{font-weight:bold}em{font-style:italic}small{font-size:0.8em}mark{margin:0 2px;padding:0 5px;background:rgba(255,255,0,0.5);border-radius:3px}cite{font-style:italic}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #aaa}.text-lead{font-size:1.57143em;line-height:1.4em;color:#303030;font-weight:300}.text-small{font-size:0.8em;line-height:1.5em}.text-soften{font-weight:normal;color:#aaa}.text-harden{font-weight:bold;color:#303030}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}ul,ol{margin:1em 0 1em 2em;padding:0}ul ul,ul ol,ul li,ol ul,ol ol,ol li{margin-top:0.5em;margin-bottom:0.5em}ul,ul ul ul ul{list-style:disc}ul ul{list-style:circle}ul ul ul{list-style:disc}ol,ol ol ol ol{list-style:decimal}ol ol{list-style:lower-alpha}ol ol ol{list-style:lower-roman}dl{margin:1em 0}dl dt{margin:1em 0 0;font-weight:bold;color:#303030}dl dd{margin:0 0 1em 1em}.list{list-style:none;margin:1rem 0;background:none}.list>li{margin:0;padding:1rem;background-clip:padding-box}.list>li:after{content:'';display:table;clear:both}.list.flush>li,.list-docs>li{padding-left:0;padding-right:0}.list.rowed>li,.list-docs>li{border-bottom:1px solid rgba(0,0,0,0.1)}.list.rowed>li:first-child,.list-docs>li:first-child{border-top:1px solid rgba(0,0,0,0.1)}.list.bordered{border:1px solid rgba(0,0,0,0.1)}.list.bordered>li{border-bottom:1px solid rgba(0,0,0,0.1)}.list.bordered>li:last-child{border-bottom:0 none}.list.linked>li{padding:0}.list.linked>li>a{display:block;padding:1rem;background-clip:padding-box;border:0 none}.list.linked>li>a:after{content:'';display:table;clear:both}.list.rounded{border-radius:3px}.list.rounded>li:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.list.rounded>li:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.list.striped>li:nth-of-type(odd){background-color:rgba(0,0,0,0.05)}.list.hover>li{-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.list.hover>li:hover{background-color:rgba(241,196,15,0.1)}blockquote{margin:1rem 0;padding:0.5em 1.5em;background:#f5f5f5;border-radius:3px}blockquote footer,blockquote .blockquote-footer{display:block;position:relative;margin:1rem 0;font-size:100%}@media (min-width: 760px){blockquote{padding:1em 2em}}code,pre{background:#f5f5f5;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:1em;line-height:1.5em;border-radius:3px}code{display:inline;margin:0;padding:0;white-space:nowrap;line-height:inherit;color:#de5151;background:none}pre{margin:1.5rem 0;padding:0.75rem;overflow:auto;color:#303030}pre code{display:block;margin:0;padding:0.75rem;overflow:auto;white-space:pre;font-size:100%;color:inherit;background:none;border:0 none}pre.max-height{max-height:400px}table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;margin:1rem 0;overflow:auto}table tr{vertical-align:top}table th{color:#303030;font-weight:bold;text-align:left}.table{margin:2em 0;background:none;border-collapse:separate}.table td,.table th{padding:0.5em 0.75em}.table.rowed td,.table-docs td,.table.rowed th,.table-docs th{border-bottom:1px solid rgba(0,0,0,0.1)}.table.rowed thead:first-child tr:first-child td,.table-docs thead:first-child tr:first-child td,.table.rowed thead:first-child tr:first-child th,.table-docs thead:first-child tr:first-child th,.table.rowed tfoot:first-child tr:first-child td,.table-docs tfoot:first-child tr:first-child td,.table.rowed tfoot:first-child tr:first-child th,.table-docs tfoot:first-child tr:first-child th,.table.rowed tbody:first-child tr:first-child td,.table-docs tbody:first-child tr:first-child td,.table.rowed tbody:first-child tr:first-child th,.table-docs tbody:first-child tr:first-child th{border-top:1px solid rgba(0,0,0,0.1)}.table.columned td,.table.columned th{border-right:1px solid rgba(0,0,0,0.1)}.table.columned tr td:first-child,.table.columned tr th:first-child{border-left:1px solid rgba(0,0,0,0.1)}.table.bordered td,.table.bordered th{border-bottom:1px solid rgba(0,0,0,0.1)}.table.bordered thead:first-child tr:first-child td,.table.bordered thead:first-child tr:first-child th,.table.bordered tfoot:first-child tr:first-child td,.table.bordered tfoot:first-child tr:first-child th,.table.bordered tbody:first-child tr:first-child td,.table.bordered tbody:first-child tr:first-child th{border-top:1px solid rgba(0,0,0,0.1)}.table.bordered td,.table.bordered th{border-right:1px solid rgba(0,0,0,0.1)}.table.bordered tr td:first-child,.table.bordered tr th:first-child{border-left:1px solid rgba(0,0,0,0.1)}.table.condensed td,.table.condensed th{padding:0.25em 0.5em}.table.expanded td,.table-docs td,.table.expanded th,.table-docs th{padding:1em 1.25em}.table.rounded{border-radius:3px}.table.rounded thead:first-child tr:first-child td:first-child,.table.rounded thead:first-child tr:first-child th:first-child,.table.rounded tfoot:first-child tr:first-child td:first-child,.table.rounded tfoot:first-child tr:first-child th:first-child,.table.rounded tbody:first-child tr:first-child td:first-child,.table.rounded tbody:first-child tr:first-child th:first-child{border-top-left-radius:3px}.table.rounded thead:first-child tr:first-child td:last-child,.table.rounded thead:first-child tr:first-child th:last-child,.table.rounded tfoot:first-child tr:first-child td:last-child,.table.rounded tfoot:first-child tr:first-child th:last-child,.table.rounded tbody:first-child tr:first-child td:last-child,.table.rounded tbody:first-child tr:first-child th:last-child{border-top-right-radius:3px}.table.rounded thead:last-child tr:last-child td:first-child,.table.rounded thead:last-child tr:last-child th:first-child,.table.rounded tfoot:last-child tr:last-child td:first-child,.table.rounded tfoot:last-child tr:last-child th:first-child,.table.rounded tbody:last-child tr:last-child td:first-child,.table.rounded tbody:last-child tr:last-child th:first-child{border-bottom-left-radius:3px}.table.rounded thead:last-child tr:last-child td:last-child,.table.rounded thead:last-child tr:last-child th:last-child,.table.rounded tfoot:last-child tr:last-child td:last-child,.table.rounded tfoot:last-child tr:last-child th:last-child,.table.rounded tbody:last-child tr:last-child td:last-child,.table.rounded tbody:last-child tr:last-child th:last-child{border-bottom-right-radius:3px}.table.striped tbody tr:nth-of-type(odd) td,.table.striped tbody tr:nth-of-type(odd) th{background-color:rgba(0,0,0,0.05)}.table.striped-horizontal tbody tr:nth-of-type(odd) td,.table.striped-horizontal tbody tr:nth-of-type(odd) th{background-color:rgba(0,0,0,0.05)}.table.striped-vertical tr td:nth-of-type(odd),.table.striped-vertical tr th:nth-of-type(odd){background-color:rgba(0,0,0,0.05)}.table.hover tbody tr td{-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.table.hover tbody tr:hover td{background-color:rgba(241,196,15,0.1)}.table.valign-baseline tr{vertical-align:baseline}.table.valign-top tr{vertical-align:top}.table.valign-middle tr,.table-docs tr{vertical-align:middle}.table.valign-bottom tr{vertical-align:bottom}.table.align-left tr td,.table.align-left tr th{text-align:left}.table.align-center tr td,.table.align-center tr th{text-align:center}.table.align-right tr td,.table.align-right tr th{text-align:right}.table-responsive{margin:2em 0}.table-responsive>table{margin:0}@media (max-width: 759px){.table-responsive{overflow:auto}.table-responsive>table td,.table-responsive>table th{white-space:nowrap}}img{display:block;margin:1rem 0;max-width:100%;height:auto}img.align-center{display:block;margin-left:auto;margin-right:auto}p img.align-center{margin-top:0;margin-bottom:0}img.align-left{float:left;margin:1rem 1.5rem 1rem 0}p img.align-left{margin-top:0}img.align-right{float:right;margin:1rem 0 1rem 1.5rem}p img.align-right{margin-top:0}img.rounded{border-radius:3px}img.circle{border-radius:50%}img.polaroid{background:#fff;background-clip:padding-box;padding:0.5rem;border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 3px rgba(0,0,0,0.1)}hr{display:block;height:0;width:100%;clear:both;margin:2rem 0;padding:0;background:none;border:0 none;border-bottom:1px solid rgba(0,0,0,0.1)}hr.dotted{border-bottom:1px dotted rgba(0,0,0,0.25)}hr.dashed{border-bottom:1px dashed rgba(0,0,0,0.25)}hr.double{border-bottom:3px double rgba(0,0,0,0.1)}form{margin:2.25em 0;font-size:1em;line-height:1.5em}fieldset{margin:1.5em 0;padding:0;border:0 none}legend{display:inline-block;margin:-.75em .75em;padding:0 .75em;font-size:1.57143em;line-height:1.5em;font-weight:bold;color:#303030;border:0 none}form .row{margin-bottom:.75em}form .row:last-child{margin-bottom:0}form .col{margin-bottom:.75em}form .col:last-child{margin-bottom:0}@media (min-width: 760px){form .col{margin-bottom:0}}.form-group{margin-bottom:1.5em}.form-group:last-child{margin-bottom:0}.form-group.inline{margin-right:-0.75em;margin-bottom:.75em}.form-group.inline:after{content:'';display:table;clear:both}.form-group.inline:last-child{margin-bottom:-.75em}.form-group.inline>*{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}.form-group.inline>*.float-right{float:right}.form-group.inline .form-group,.form-group.inline .input-group{display:inline-block;vertical-align:top;margin:0 .75em 0 0}.form-group.inline .form-group:last-child,.form-group.inline .input-group:last-child{margin-right:0}.form-header{margin-bottom:1.5em;color:#aaa}.form-header:last-child{margin-bottom:0}.form-header h1,.form-header h2,.form-header h3,.form-header h4,.form-header h5,.form-header h6{margin:.5em 0;font-size:1.4em;line-height:1.2em}.form-header p{margin:.5em 0;color:#aaa}.form-action{margin-bottom:1.5em}.form-action:last-child{margin-bottom:0}.form-action:after{content:'';display:table;clear:both}.form-action .button,.form-action .input-align{float:left;margin:0 .75em 0 0}.form-action .button:last-child,.form-action .input-align:last-child{margin-right:0}.form-action .button.float-right,.form-action .input-align.float-right{float:right}.form-action .input-align{margin-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.form-action.form-action-center{text-align:center}.form-action.form-action-center .button,.form-action.form-action-center .input-align{display:inline-block;float:none}.input-group{margin-bottom:1.5em}.input-group:last-child{margin-bottom:0}.input-group.inline{margin-right:-0.75em;margin-bottom:.75em}.input-group.inline:after{content:'';display:table;clear:both}.input-group.inline:last-child{margin-bottom:-.75em}.input-group.inline>*{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}.input-group.inline>*.float-right{float:right}label{display:inline-block;margin:0 0 .5em 0;font-size:1em;line-height:1.5em;font-weight:600;color:#303030}label:last-child{margin-bottom:0}label.sub{font-weight:normal}label.hide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}label.block{display:block;padding-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}label.inline{display:inline-block;padding-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.inline label.block,.inline label.inline{padding-bottom:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.input,.checkbox,.radio,.choice{position:relative;display:block;width:100%;margin:0 0 .75em 0}.input:last-child,.checkbox:last-child,.radio:last-child,.choice:last-child{margin-bottom:0}.input{padding:.75em;font-family:inherit;font-size:1em;line-height:1.5em;color:#303030;background-color:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 3px transparent,inset 0 1px 3px rgba(0,0,0,0.05);-moz-box-sizing:border-box;box-sizing:border-box;border-radius:3px;-webkit-transition:border-color 0.25s,background-color 0.25s,box-shadow 0.25s;transition:border-color 0.25s,background-color 0.25s,box-shadow 0.25s}.input::-webkit-input-placeholder{color:#aaa}.input:-moz-placeholder{color:#aaa}.input::-moz-placeholder{color:#aaa}.input:-ms-input-placeholder{color:#aaa}.input:focus{outline:none;background-color:#fff;border:1px solid #1489c9;box-shadow:0 1px 3px rgba(0,0,0,0.05),inset 0 1px 3px transparent}.input.disabled,.input[readonly],.input[disabled]{opacity:0.5;background:rgba(0,0,0,0.05)}.checkbox,.radio,.choice{cursor:pointer;color:#303030;font-weight:normal}.checkbox.disabled,.radio.disabled,.choice.disabled{opacity:0.5}.choice{padding:0.75em 0.75em 0.75em 2.25em;background:rgba(0,0,0,0.05);border:1px solid transparent;box-shadow:none;border-radius:3px}.choice input[type="checkbox"],.choice input[type="radio"]{position:absolute;top:auto;margin:5px 0 0 -20px}input[type="checkbox"],input[type="radio"]{position:relative;top:-1px;margin:0 5px 0 0}input[type="file"],input[type="range"]{display:block;margin:0 0 .75em 0}input[type="range"]{width:100%}input[type="search"]{-webkit-appearance:none}input[type="color"].input{width:3.125rem;height:3.125rem;padding:.25em}textarea.input{height:auto;max-width:100%}select.input{-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-position:100% center;background-repeat:no-repeat;padding-right:30px}select[multiple].input,select[size].input{height:auto;padding:.75em;background-image:none}.note{margin-bottom:.75em;font-size:1em;color:#aaa}.note:last-child{margin-bottom:0}.note p{margin:0 0 .75em 0}.note p:last-child{margin-bottom:0}label+.note{margin-top:0}.form-group+.note,.input-group+.note{margin-top:-.75em}.req{color:#de5151}label.inline,.button.inline,.input.inline,.checkbox.inline,.radio.inline,.choice.inline,.inline label,.inline .button,.inline .input,.inline .checkbox,.inline .radio,.inline .choice{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}label.inline.float-right,.button.inline.float-right,.input.inline.float-right,.checkbox.inline.float-right,.radio.inline.float-right,.choice.inline.float-right,.inline label.float-right,.inline .button.float-right,.inline .input.float-right,.inline .checkbox.float-right,.inline .radio.float-right,.inline .choice.float-right{float:right}.disabled input[type="file"],.disabled input[type="range"],.disabled input[type="checkbox"],.disabled input[type="radio"],.disabled .input,.disabled .checkbox,.disabled .radio,.disabled .choice,fieldset[disabled] input[type="file"],fieldset[disabled] input[type="range"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] input[type="radio"],fieldset[disabled] .input,fieldset[disabled] .checkbox,fieldset[disabled] .radio,fieldset[disabled] .choice{opacity:0.5}.disabled .input,fieldset[disabled] .input{background:rgba(0,0,0,0.05)}.input.success{border-color:#84b72d}.checkbox.success,.radio.success,.note.success{color:#668e23}.choice.success{background-color:rgba(132,183,45,0.1)}.success .input{border-color:#84b72d}.success .checkbox,.success .radio,.success .note{color:#668e23}.success .choice{background-color:rgba(132,183,45,0.1)}.input.warning{border-color:#dab10d}.checkbox.warning,.radio.warning,.note.warning{color:#c29d0b}.choice.warning{background-color:rgba(218,177,13,0.15)}.warning .input{border-color:#dab10d}.warning .checkbox,.warning .radio,.warning .note{color:#c29d0b}.warning .choice{background-color:rgba(218,177,13,0.15)}.input.error{border-color:#de5151}.checkbox.error,.radio.error,.note.error{color:#d42828}.choice.error{background-color:rgba(222,81,81,0.1)}.error .input{border-color:#de5151}.error .checkbox,.error .radio,.error .note{color:#d42828}.error .choice{background-color:rgba(222,81,81,0.1)}.input.active{border-color:#1489C9}.checkbox.active,.radio.active,.note.active{color:#0f699b}.choice.active{background-color:rgba(20,137,201,0.1)}.active .input{border-color:#1489C9}.active .checkbox,.active .radio,.active .note{color:#0f699b}.active .choice{background-color:rgba(20,137,201,0.1)}.button{cursor:pointer;display:inline-block;outline:none;margin:0;padding:0.75em 1.5em;font-family:inherit;font-size:1em;line-height:1.5em;font-weight:inherit;color:#303030;text-align:center;white-space:nowrap;vertical-align:top;background:none;box-shadow:inset 0 0 0 transparent;border:1px solid rgba(0,0,0,0.15);border-radius:3px;-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0.75s;transition-duration:0.75s;-webkit-transition-timing-function:linear;transition-timing-function:linear;color:#303030;text-shadow:none;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button:hover,.button:focus{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button:active{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button:hover,.button:focus{color:#303030;background-color:#fafafa;border-color:rgba(0,0,0,0.25)}.button:active{color:#303030;background-color:#f5f5f5;border-color:rgba(0,0,0,0.25)}.button.inverted{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#303030;background-clip:border-box;border:1px solid rgba(255,255,255,0.15)}.button.inverted:hover,.button.inverted:focus{color:#fff;background-color:#353535;border-color:rgba(255,255,255,0.25)}.button.inverted:active{color:#fff;background-color:#3a3a3a;border-color:rgba(255,255,255,0.25)}.button.clip-border{background-clip:border-box}.button.clip-padding{background-clip:padding-box}.button.default,.button-group.default .button,.button-group-wrapper.default .button{color:#303030;text-shadow:none;background-color:#efefef;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.default:hover,.button-group.default .button:hover,.button-group-wrapper.default .button:hover,.button.default:focus,.button-group.default .button:focus,.button-group-wrapper.default .button:focus{color:#303030;background-color:#eaeaea;border-color:rgba(0,0,0,0.25)}.button.default:active,.button-group.default .button:active,.button-group-wrapper.default .button:active{color:#303030;background-color:#e5e5e5;border-color:rgba(0,0,0,0.25)}.button.blue,.button.primary,.button.active,.button-group.blue .button,.button-group.primary .button,.button-group.active .button,.button-group-wrapper.blue .button,.button-group-wrapper.primary .button,.button-group-wrapper.active .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#1489C9;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.blue:hover,.button.primary:hover,.button.active:hover,.button-group.blue .button:hover,.button-group.primary .button:hover,.button-group.active .button:hover,.button-group-wrapper.blue .button:hover,.button-group-wrapper.primary .button:hover,.button-group-wrapper.active .button:hover,.button.blue:focus,.button.primary:focus,.button.active:focus,.button-group.blue .button:focus,.button-group.primary .button:focus,.button-group.active .button:focus,.button-group-wrapper.blue .button:focus,.button-group-wrapper.primary .button:focus,.button-group-wrapper.active .button:focus{color:#fff;background-color:#1279b2;border-color:rgba(0,0,0,0.25)}.button.blue:active,.button.primary:active,.button.active:active,.button-group.blue .button:active,.button-group.primary .button:active,.button-group.active .button:active,.button-group-wrapper.blue .button:active,.button-group-wrapper.primary .button:active,.button-group-wrapper.active .button:active{color:#fff;background-color:#0f699b;border-color:rgba(0,0,0,0.25)}.button.green,.button.success,.button-group.green .button,.button-group.success .button,.button-group-wrapper.green .button,.button-group-wrapper.success .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#84b72d;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.green:hover,.button.success:hover,.button-group.green .button:hover,.button-group.success .button:hover,.button-group-wrapper.green .button:hover,.button-group-wrapper.success .button:hover,.button.green:focus,.button.success:focus,.button-group.green .button:focus,.button-group.success .button:focus,.button-group-wrapper.green .button:focus,.button-group-wrapper.success .button:focus{color:#fff;background-color:#75a328;border-color:rgba(0,0,0,0.25)}.button.green:active,.button.success:active,.button-group.green .button:active,.button-group.success .button:active,.button-group-wrapper.green .button:active,.button-group-wrapper.success .button:active{color:#fff;background-color:#668e23;border-color:rgba(0,0,0,0.25)}.button.orange,.button.warning,.button-group.orange .button,.button-group.warning .button,.button-group-wrapper.orange .button,.button-group-wrapper.warning .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#e69242;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.orange:hover,.button.warning:hover,.button-group.orange .button:hover,.button-group.warning .button:hover,.button-group-wrapper.orange .button:hover,.button-group-wrapper.warning .button:hover,.button.orange:focus,.button.warning:focus,.button-group.orange .button:focus,.button-group.warning .button:focus,.button-group-wrapper.orange .button:focus,.button-group-wrapper.warning .button:focus{color:#fff;background-color:#e3852b;border-color:rgba(0,0,0,0.25)}.button.orange:active,.button.warning:active,.button-group.orange .button:active,.button-group.warning .button:active,.button-group-wrapper.orange .button:active,.button-group-wrapper.warning .button:active{color:#fff;background-color:#d8781d;border-color:rgba(0,0,0,0.25)}.button.red,.button.danger,.button-group.red .button,.button-group.danger .button,.button-group-wrapper.red .button,.button-group-wrapper.danger .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#de5151;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.red:hover,.button.danger:hover,.button-group.red .button:hover,.button-group.danger .button:hover,.button-group-wrapper.red .button:hover,.button-group-wrapper.danger .button:hover,.button.red:focus,.button.danger:focus,.button-group.red .button:focus,.button-group.danger .button:focus,.button-group-wrapper.red .button:focus,.button-group-wrapper.danger .button:focus{color:#fff;background-color:#da3c3c;border-color:rgba(0,0,0,0.25)}.button.red:active,.button.danger:active,.button-group.red .button:active,.button-group.danger .button:active,.button-group-wrapper.red .button:active,.button-group-wrapper.danger .button:active{color:#fff;background-color:#d42828;border-color:rgba(0,0,0,0.25)}.button.black,.button.secondary,.button-group.black .button,.button-group.secondary .button,.button-group-wrapper.black .button,.button-group-wrapper.secondary .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#606060;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.black:hover,.button.secondary:hover,.button-group.black .button:hover,.button-group.secondary .button:hover,.button-group-wrapper.black .button:hover,.button-group-wrapper.secondary .button:hover,.button.black:focus,.button.secondary:focus,.button-group.black .button:focus,.button-group.secondary .button:focus,.button-group-wrapper.black .button:focus,.button-group-wrapper.secondary .button:focus{color:#fff;background-color:#6d6d6d;border-color:rgba(0,0,0,0.25)}.button.black:active,.button.secondary:active,.button-group.black .button:active,.button-group.secondary .button:active,.button-group-wrapper.black .button:active,.button-group-wrapper.secondary .button:active{color:#fff;background-color:#7a7a7a;border-color:rgba(0,0,0,0.25)}.button.small,.button-group.small .button,.button-group-wrapper.small .button{padding:0.5em 1.25em;font-size:0.85em}.button.large,.button-group.large .button,.button-group-wrapper.large .button{font-size:1.4em}.button.block{display:block;width:100%}.button.clip-padding{background-clip:padding-box}.button.clip-border{background-clip:border-box}.button.close{width:1.5em;height:1.5em;padding:0;font-size:1.5em;line-height:1.5em;vertical-align:middle;background:none;border:0 none;box-shadow:none;border-radius:50%}.video-wrapper{position:relative;display:block;height:0;margin:2em 0;padding-bottom:56.25%;overflow:hidden}.video-wrapper .video-item,.video-wrapper embed,.video-wrapper iframe,.video-wrapper object,.video-wrapper video{position:absolute;top:0;left:0;width:100%;height:100%;border:0 none}.video-wrapper .ratio-16x9{padding-bottom:56.25%}.video-wrapper .ratio-4x3{padding-bottom:75%}.video-wrapper .ratio-3x2{padding-bottom:66.66667%}.button-group{vertical-align:middle;margin:0;display:inline-block;float:none;margin-right:0}.button-group:after{content:'';display:table;clear:both}.button-group>.button{position:relative;z-index:1;margin:0}.button-group>.button:hover{z-index:2}.button-group>.button:focus{z-index:3}.button-group>.button:active{z-index:4}.button-group>.button.active{z-index:5}.button-group+.button-group{margin-top:0;margin-left:.75em}.button-group>.button{width:auto}.button-group>.button{display:inline-block;float:left;border-radius:0}.button-group>.button+.button{margin-top:0;margin-left:-1px}.button-group>.button:first-child{border-top-left-radius:0;border-top-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.button-group>.button:last-child{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.button-group.block{display:block;float:none}.button-group.block+.button-group{margin-top:1em;margin-left:0}.button-group.vertical{margin-right:0}.button-group.vertical>.button{display:block;width:100%;float:none;border-radius:0}.button-group.vertical>.button+.button{margin-top:-1px;margin-left:0}.button-group.vertical>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.vertical>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.button-group.fluid{display:table;width:100%}.button-group.fluid>*{display:table-cell}.button-group>.button.is-1-of-1,.button-group.has-1>.button{width:100%}.button-group>.button.is-1-of-2,.button-group.has-2>.button{width:50%}.button-group>.button.is-1-of-3,.button-group.has-3>.button{width:33.33333%}.button-group>.button.is-1-of-4,.button-group.has-4>.button{width:25%}.button-group>.button.is-1-of-5,.button-group.has-5>.button{width:20%}.button-group>.button.is-1-of-6,.button-group.has-6>.button{width:16.66667%}.button-group>.button.is-1-of-7,.button-group.has-7>.button{width:14.28571%}.button-group>.button.is-1-of-8,.button-group.has-8>.button{width:12.5%}.button-group>.button.is-1-of-9,.button-group.has-9>.button{width:11.11111%}.button-group>.button.is-1-of-10,.button-group.has-10>.button{width:10%}.button-group>.button.is-1-of-11,.button-group.has-11>.button{width:9.09091%}.button-group>.button.is-1-of-12,.button-group.has-12>.button{width:8.33333%}.button-group.has-2,.button-group.has-margin-2{margin-right:-1px}.button-group.has-3,.button-group.has-margin-3{margin-right:-2px}.button-group.has-4,.button-group.has-margin-4{margin-right:-3px}.button-group.has-5,.button-group.has-margin-5{margin-right:-4px}.button-group.has-6,.button-group.has-margin-6{margin-right:-5px}.button-group.has-7,.button-group.has-margin-7{margin-right:-6px}.button-group.has-8,.button-group.has-margin-8{margin-right:-7px}.button-group.has-9,.button-group.has-margin-9{margin-right:-8px}.button-group.has-10,.button-group.has-margin-10{margin-right:-9px}.button-group.has-11,.button-group.has-margin-11{margin-right:-10px}.button-group.has-12,.button-group.has-margin-12{margin-right:-11px}@media (max-width: 479px){.button-group.stack-for-tiny{display:block;float:none;margin-right:0}.button-group.stack-for-tiny+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-tiny>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-tiny>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-tiny>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-tiny>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}@media (max-width: 759px){.button-group.stack-for-small{display:block;float:none;margin-right:0}.button-group.stack-for-small+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-small>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-small>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-small>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-small>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}@media (max-width: 989px){.button-group.stack-for-medium{display:block;float:none;margin-right:0}.button-group.stack-for-medium+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-medium>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-medium>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-medium>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-medium>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}.button-group-wrapper{display:block;margin:0 0 -1em -1em}.button-group-wrapper:after{content:'';display:table;clear:both}.button-group-wrapper>.button,.button-group-wrapper .button-group{float:left}.button-group-wrapper>.button.float-left,.button-group-wrapper .button-group.float-left{float:left}.button-group-wrapper>.button.float-right,.button-group-wrapper .button-group.float-right{float:right}.button-group-wrapper .button-group.block{float:none;clear:both}.button-group-wrapper>.button,.button-group-wrapper .button-group,.button-group-wrapper .button-group.block,.button-group-wrapper .button-group+.button-group,.button-group-wrapper .button-group.block+.button-group,.button-group-wrapper .button-group.stack-for-small,.button-group-wrapper .button-group.stack-for-mobile,.button-group-wrapper .button-group.stack-for-tablet,.button-group-wrapper .button-group.stack-for-small+.button-group,.button-group-wrapper .button-group.stack-for-mobile+.button-group,.button-group-wrapper .button-group.stack-for-tablet+.button-group{margin-top:0;margin-left:1em;margin-bottom:1em}.notice{margin:2em 0;padding:0.25em 1.25em;font-size:1em;line-height:1.5em;border-radius:3px;color:#303030;text-shadow:0 1px 0 rgba(255,255,255,0.25);background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.05)}.notice .close{float:right;margin:0.45em -0.25em 0 1em;color:inherit}.notice .close+*{padding-right:2.5em}.notice.inverted{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.25);background:rgba(48,48,48,0.9);border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.05)}.notice.blue,.notice.info{background:rgba(20,137,201,0.1)}.notice.blue.inverted,.inverted.notice.info{background:rgba(20,137,201,0.9)}.notice.green,.notice.success{background:rgba(132,183,45,0.1)}.notice.green.inverted,.inverted.notice.success{background:rgba(132,183,45,0.9)}.notice.yellow,.notice.warning{background:rgba(241,196,15,0.1)}.notice.yellow.inverted,.inverted.notice.warning{background:rgba(218,177,13,0.9)}.notice.orange{background:rgba(230,146,66,0.1)}.notice.orange.inverted{background:rgba(230,146,66,0.9)}.notice.red,.notice.danger{background:rgba(222,81,81,0.1)}.notice.red.inverted,.inverted.notice.danger{background:rgba(222,81,81,0.9)}.notice.violet{background:rgba(188,107,211,0.1)}.notice.violet.inverted{background:rgba(188,107,211,0.9)}.notice.small{font-size:0.9em}.notice.large{font-size:1.1em}.notice.inline{display:inline;margin:0;padding:0 0.25em;box-shadow:none}.notice.inline.inverted{border:0 none}@media (min-width: 760px){.notice.pull-left{width:45%;float:left;margin:0.5em 5% 1em 0}}@media (min-width: 760px){.notice.pull-right{width:45%;float:right;margin:0.5em 0 1em 5%}}.breadcrumb{display:block;margin:1em 0;font-size:1em}.breadcrumb ul,.breadcrumb ol{margin:0;list-style:none}.breadcrumb ul:after,.breadcrumb ol:after{content:'';display:table;clear:both}.breadcrumb li{float:left;margin:0}.breadcrumb li a{border:0 none}.breadcrumb .current{color:#aaa}.breadcrumb li:after{content:"/";padding:0 0.75em;color:rgba(0,0,0,0.25)}.breadcrumb li:last-child:after{content:none}.breadcrumb.wrapped{padding:0.5em 1em;background:#e8f3fa;border:1px solid rgba(0,0,0,0.1);border-radius:3px}.dropdown,.dropdown-content,.dropdown-menu{position:relative;display:block;width:16rem;margin:0;font-size:.85714rem;line-height:1.35em;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 6px rgba(0,0,0,0.15);border-radius:3px}.dropdown{padding:0}.dropdown>.dropdown-content,.dropdown>.dropdown-menu{width:auto;margin:0;background:none;border:0 none;border-top:1px solid rgba(0,0,0,0.1);box-shadow:none;border-radius:0}.dropdown>.dropdown-content:first-child,.dropdown>.dropdown-menu:first-child{border-top:0 none;border-top-left-radius:3px;border-top-right-radius:3px}.dropdown>.dropdown-content:last-child,.dropdown>.dropdown-menu:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.dropdown-content{padding:1em}.dropdown-content>*{margin-top:0.5em;margin-bottom:0.5em}.dropdown-content>:first-child{margin-top:0}.dropdown-content>:last-child{margin-bottom:0}.dropdown-content>hr{margin:1em 0}.dropdown-content>a.block{display:block;margin:-0.5em;padding:1em;color:#303030;border:0 none;border-radius:3px}.dropdown-content>a.block:hover{background:rgba(0,0,0,0.05);color:#303030}.dropdown-content>a.block>*{margin-top:0.5em;margin-bottom:0.5em}.dropdown-content>a.block>:first-child{margin-top:0}.dropdown-content>a.block>:last-child{margin-bottom:0}.dropdown-content>.button{display:block}.dropdown-menu{list-style:none;padding:0.5em}.dropdown-menu li{position:relative;margin:0;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.dropdown-menu li:hover{background:rgba(0,0,0,0.05);background-clip:padding-box}.dropdown-menu li:hover>a{color:#303030}.dropdown-menu li.active>a{color:#aaa}.dropdown-menu li.active:hover{background:none}.dropdown-menu li:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.dropdown-menu li:last-child{border-bottom:0 none;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.dropdown-menu li a{display:block;padding:0.75em 1em;color:#303030;border:0 none}.dropdown-trigger{position:relative}.dropdown-trigger .dropdown{position:absolute;z-index:100;opacity:0;visibility:hidden;-webkit-transition:"transform, opacity, visibility";transition:"transform, opacity, visibility";-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:0.25s;transition-delay:0.25s}.dropdown-trigger:not(.on-click):hover>.dropdown,.dropdown-trigger.active>.dropdown{z-index:105;opacity:1;visibility:visible;-webkit-transition:transform,opacity,visibility;transition:transform,opacity,visibility;-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:none;transition-delay:none}.dropdown-trigger .dropdown{margin:-1px 0 0 0;top:100%;left:0;right:auto;bottom:auto;-webkit-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}.dropdown-trigger:not(.on-click):hover>.dropdown,.dropdown-trigger.active>.dropdown{margin:-1px 0 0 0;top:100%;left:0;right:auto;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.dropdown-menu{position:relative}.dropdown-menu .dropdown-menu{position:absolute;z-index:100;opacity:0;visibility:hidden;-webkit-transition:"transform, opacity, visibility";transition:"transform, opacity, visibility";-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:0.25s;transition-delay:0.25s}.dropdown-menu>li:hover>.dropdown-menu,.dropdown-menu.active>li>.dropdown-menu{z-index:105;opacity:1;visibility:visible;-webkit-transition:transform,opacity,visibility;transition:transform,opacity,visibility;-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:none;transition-delay:none}.dropdown-menu .dropdown-menu{margin:-1px 0 0 -1px;top:-0.5em;left:100%;right:auto;bottom:auto;-webkit-transform:translate3d(-1em, 0, 0);-ms-transform:translate3d(-1em, 0, 0);transform:translate3d(-1em, 0, 0)}.dropdown-menu>li:hover>.dropdown-menu,.dropdown-menu.active>li>.dropdown-menu{margin:-1px 0 0 -1px;top:-0.5em;left:100%;right:auto;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.tabs{position:relative;margin:2em 0}.tabs .tabs-nav,.tabs .tabs-content{margin:0}.tabs .tabs-nav{z-index:10}.tabs .tabs-content{z-index:5}.tabs-nav{margin:2em 0;text-align:center}.tabs-nav ul{display:flex;list-style:none;margin:0}.tabs-nav ul li{flex:1 0 auto;margin:0}.tabs-nav a{display:block;padding:1em;border:none}.tabs-nav.inline ul{flex-wrap:wrap}.tabs-nav.inline ul li{flex:0 0 auto}.tabs-nav.inline ul li a{padding:1em 2em}.tabs-content{margin:2em 0}.tabs-content .tabs-panel{display:none}.tabs-content .tabs-panel.active{display:block}.style-fold .tabs-nav ul,.tabs-nav.style-fold ul{background:#f5f5f5;border:1px solid #e6e6e6;border-radius:3px}.style-fold .tabs-nav ul li,.tabs-nav.style-fold ul li{border-right:1px solid #e6e6e6;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.style-fold .tabs-nav ul li:first-child,.tabs-nav.style-fold ul li:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.style-fold .tabs-nav ul li:last-child,.tabs-nav.style-fold ul li:last-child{border-right:none;border-top-right-radius:3px;border-bottom-right-radius:3px}.style-fold .tabs-nav a,.tabs-nav.style-fold a{color:#303030;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.style-fold .tabs-nav a:hover,.tabs-nav.style-fold a:hover{background:#e6e6e6;color:#303030}.style-fold .tabs-nav ul li.active,.tabs-nav.style-fold ul li.active{background:#fff}.style-fold .tabs-nav .active a,.tabs-nav.style-fold .active a{color:#303030}.style-fold .tabs-nav .active a:hover,.tabs-nav.style-fold .active a:hover{background:#fff}.style-fold .tabs-nav.inline ul li:last-child,.tabs-nav.style-fold.inline ul li:last-child{border-right:1px solid #e6e6e6}.style-fold .tabs-nav ul{border-bottom-right-radius:0;border-bottom-left-radius:0}.style-fold .tabs-nav ul li{border-bottom:1px solid transparent;margin-bottom:-1px}.style-fold .tabs-nav ul li:first-child{border-bottom-left-radius:0}.style-fold .tabs-nav ul li:last-child{border-bottom-right-radius:0}.style-fold .tabs-nav ul li.active{border-bottom:1px solid #fff}.style-fold .tabs-content{padding:1em 2em;border:1px solid #e6e6e6;border-top:none;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.style-line .tabs-nav ul,.tabs-nav.style-line ul{border-bottom:1px solid #e6e6e6}.style-line .tabs-nav ul li,.tabs-nav.style-line ul li{border-bottom:3px solid transparent;margin-bottom:-1px;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.style-line .tabs-nav a,.tabs-nav.style-line a{color:#aaa;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.style-line .tabs-nav a:hover,.tabs-nav.style-line a:hover{color:#1489C9}.style-line .tabs-nav ul li.active,.tabs-nav.style-line ul li.active{border-bottom:3px solid #1489C9}.style-line .tabs-nav .active a,.tabs-nav.style-line .active a{color:#303030}.style-line .tabs-nav .active a:hover,.tabs-nav.style-line .active a:hover{color:#1489C9}.style-line .tabs-content{padding:1em 2em;border:1px solid #e6e6e6;border-top:none}.container{width:100%;min-width:none;max-width:none;margin:0;padding:0 1.5rem}.row{width:100%;margin-left:0;margin-right:0}.col{width:100%;float:none;padding-left:0;padding-right:0}@media (min-width: 760px){.container{width:100%;min-width:none;max-width:80rem;margin:0 auto;padding:0 1.5rem}.container:after{content:'';display:table;clear:both}.row{width:auto;margin-left:-.75rem;margin-right:-.75rem}.row:after{content:'';display:table;clear:both}.col{min-height:1px;float:left;padding-left:.75rem;padding-right:.75rem}.col.col-left{float:left}.col.col-right{float:right}.col-no-inner-gutter{padding-left:0;padding-right:0}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}.prefix-1{margin-left:8.33333%}.prefix-2{margin-left:16.66667%}.prefix-3{margin-left:25%}.prefix-4{margin-left:33.33333%}.prefix-5{margin-left:41.66667%}.prefix-6{margin-left:50%}.prefix-7{margin-left:58.33333%}.prefix-8{margin-left:66.66667%}.prefix-9{margin-left:75%}.prefix-10{margin-left:83.33333%}.prefix-11{margin-left:91.66667%}.suffix-1{margin-right:8.33333%}.suffix-2{margin-right:16.66667%}.suffix-3{margin-right:25%}.suffix-4{margin-right:33.33333%}.suffix-5{margin-right:41.66667%}.suffix-6{margin-right:50%}.suffix-7{margin-right:58.33333%}.suffix-8{margin-right:66.66667%}.suffix-9{margin-right:75%}.suffix-10{margin-right:83.33333%}.suffix-11{margin-right:91.66667%}}.has-1,.has-2,.has-3,.has-4,.has-5,.has-6,.has-7,.has-8,.has-9,.has-10,.has-11,.has-12{display:block}.has-1:after,.has-2:after,.has-3:after,.has-4:after,.has-5:after,.has-6:after,.has-7:after,.has-8:after,.has-9:after,.has-10:after,.has-11:after,.has-12:after{content:'';display:table;clear:both}.is-1-of-1,.has-1>*,.is-1-of-2,.has-2>*,.is-1-of-3,.has-3>*,.is-1-of-4,.has-4>*,.is-1-of-5,.has-5>*,.is-1-of-6,.has-6>*,.is-1-of-7,.has-7>*,.is-1-of-8,.has-8>*,.is-1-of-9,.has-9>*,.is-1-of-10,.has-10>*,.is-1-of-11,.has-11>*,.is-1-of-12,.has-12>*{float:left}.is-1-of-1,.has-1>*{width:100%}.is-1-of-2,.has-2>*{width:50%}.is-1-of-3,.has-3>*{width:33.33333%}.is-1-of-4,.has-4>*{width:25%}.is-1-of-5,.has-5>*{width:20%}.is-1-of-6,.has-6>*{width:16.66667%}.is-1-of-7,.has-7>*{width:14.28571%}.is-1-of-8,.has-8>*{width:12.5%}.is-1-of-9,.has-9>*{width:11.11111%}.is-1-of-10,.has-10>*{width:10%}.is-1-of-11,.has-11>*{width:9.09091%}.is-1-of-12,.has-12>*{width:8.33333%}body{background:#f5f5f5}.header{padding:2em 0}.home .header{padding-bottom:0;border-bottom:0 none}.main{background:#fff}.home .header{background:none}.main{padding:1em 0 2em}.footer{padding:2em 0}@media (min-width: 760px){.home .header{padding-bottom:2em}.main{padding:2em 0}}.header .flex{display:flex;justify-content:space-between;align-items:center;margin:0}.header .logo{display:flex;align-items:center;border:0 none}.header .logo img{margin:0}.header .logo .version{margin-top:8px;margin-left:10px;color:#aaa;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.header .logo:hover .version{color:#b357cd}.home .header .logo .version{color:rgba(255,255,255,0.5)}.home .header .logo:hover .version{color:#fff}.header .nav ul.menu-hori{display:flex;align-items:center;margin:0;list-style:none}.header .nav ul.menu-hori li{margin:0 15px}.header .nav ul.menu-hori li:first-child{margin-left:0}.header .nav ul.menu-hori li:last-child{margin-right:0}.header .nav ul.menu-hori li a:not(.button){color:#303030;font-size:1.07143em}.header .nav ul.menu-hori li a:not(.button):hover{color:#b357cd}.header .nav ul.menu-hori li.active a:not(.button){color:#aaa;border:0 none}.home .header .nav ul.menu-hori li a:not(.button){color:#fff;border-color:rgba(255,255,255,0.1);font-size:1.07143em}.home .header .nav ul.menu-hori li a:not(.button):hover{border-color:#fff}.home .header .nav ul.menu-hori li.active a:not(.button){color:rgba(255,255,255,0.5)}.home .header .nav li>.button,.home .header .nav .dropdown-trigger>.button{background-clip:padding-box}.header .dropdown-trigger .dropdown{margin:-1px 0 0 0;top:100%;left:auto;right:0;bottom:auto;-webkit-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}.header .dropdown-trigger:not(.on-click):hover>.dropdown,.header .dropdown-trigger.active>.dropdown{margin:-1px 0 0 0;top:100%;left:auto;right:0;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.icon.icon-more{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:8px;height:1.5em;margin:0 0 0 10px;float:right}.icon.icon-more .dot{display:inline-block;width:3px;height:3px;margin:0 0 2px 0;background:#303030;border-radius:50%}.icon.icon-more .dot:last-child{margin-bottom:1px}.header .logo .mobile,.header .nav .mobile{display:inline-block}.header .logo .desktop,.header .nav .menu-hori.desktop{display:none}@media (min-width: 930px){.header .nav .mobile{display:none}.header .nav .menu-hori.desktop{display:flex}}@media (min-width: 480px){.header .logo .mobile{display:none}.header .logo .desktop{display:flex}}.hero{position:relative;background:#1489C9}.hero{position:relative}.hero:after{background:inherit;bottom:0;content:'';display:block;height:50%;left:0;position:absolute;right:0;transform:skewY(-4deg);transform-origin:100%;z-index:-1}.hero:before{content:'';position:absolute;top:100%;left:0;width:100%;height:15em;background:#fff;z-index:-2}.hero-content{text-align:center;margin-bottom:2em}.hero-content .container{padding-top:2em;padding-bottom:2em}.hero-content h1{font-size:1.28571em;line-height:1.5em;font-weight:300;color:#fff}@media (min-width: 480px){.hero-content{margin-bottom:5em}.hero-content .container{padding:5em 5em 6em}.hero-content h1{font-size:1.42857em}}@media (min-width: 760px){.hero-content{margin-bottom:10em}.hero-content .container{padding:10em 10em 12em}.hero-content h1{font-size:1.71429em}}@media (min-width: 1400px){.hero-content{margin-bottom:15em}}.main .flex,.main .feature{margin-bottom:4em}.main .flex:last-child,.main .feature:last-child{margin-bottom:0}.home .row{margin-bottom:4em}.home hr{margin:8em 0}.home .main img{width:250px;height:auto;margin:1em auto 3em}@media (min-width: 760px){.main .flex{display:flex;justify-content:space-between;align-items:stretch}.main .flex>*{width:50%;margin-right:6em}.main .flex>*:last-child{margin-right:0}.main .feature{display:flex;justify-content:space-between;align-items:center}.main .feature>*{width:50%}.main .feature .feature-content{width:50%;margin-left:3em;margin-right:6em}.main .feature .feature-ill{width:50%;margin-left:6em;margin-right:0}.main .feature.reverse{flex-direction:row-reverse}.main .feature.reverse .feature-content{margin-left:6em;margin-right:3em}.main .feature.reverse .feature-ill{margin-left:0;margin-right:6em}.home .main img{width:auto;margin:0 auto}}.widget{margin:0;padding:2rem 0;border-bottom:1px solid rgba(0,0,0,0.1);border-radius:3px}.widget:first-child{padding-top:1rem}.widget:last-child{padding-bottom:1rem;border-bottom:0 none}.widget h2{margin:0.5rem 0;font-size:1.14286em;font-weight:600}.widget-menu ul{list-style:none;margin:1em 0}.widget-menu ul ul{margin:0 0 0 1em}.widget-menu ul li{margin:1px 0}.widget-menu ul li a{display:block;padding:0.5em 1em;color:#aaa;border:0 none;border-radius:3px}.widget-menu ul li a:hover{color:#303030}.widget-menu .active>a{background:#f5f5f5;color:#de5151}.widget-menu .active>a:hover{color:#de5151}.widget-menu ul ul{display:none}.widget-menu .active>ul{display:block}.widget-contents .active>a{color:#aaa;border:0 none}.widget-action{display:none}@media (min-width: 760px){.widget-action{display:block}}.widget-back{text-align:center}.widget-back:first-child,.widget-back:last-child{padding:0}@media (min-width: 760px){.widget-back{margin:0;text-align:left}.widget-back:first-child,.widget-back:last-child{padding:1em 0}}@media screen and (max-width: 759px){.table-docs tr,.table-docs th,.table-docs td{display:block}.table-docs tr{padding:0.5em 0.75em;border-bottom:1px solid rgba(0,0,0,0.1)}.table-docs tr:first-child{border-top:1px solid rgba(0,0,0,0.1)}.table-docs tr th,.table-docs tr td{padding:0.5rem 0;border-bottom:1px dotted rgba(0,0,0,0.1)}.table-docs tr th:last-child,.table-docs tr td:last-child{border-bottom:0 none}.table-docs tbody:first-child tr:first-child th,.table-docs tbody:first-child tr:first-child td{border-top:0 none}}.list-docs{margin:1.5rem 0}.list-docs h3{font-size:1.28571em;color:#aaa;font-weight:300}.list-docs.numbered{counter-reset:list-counter}.list-docs.numbered li{position:relative;padding-left:3em}.list-docs.numbered li:before{content:counter(list-counter);counter-increment:list-counter;position:absolute;top:1.5rem;left:0;font-size:2em;line-height:1.5em;color:#aaa}.subsection:last-child .list-docs:last-child li:last-child{border-bottom:0 none}.subsection{margin:2rem 0}@media (min-width: 760px){.subsection{margin:3rem 0}}.swatch{display:inline-block;border:1px solid rgba(0,0,0,0.1);width:44px;height:44px;border-radius:3px}.swatch-wrap{position:relative;height:44px;min-width:44px}.swatch-wrap .swatch{position:absolute;top:0;left:0}.swatch-wrap .swatch-value{margin-left:49px;display:inline-block;width:auto;font-family:Menlo,Monaco,Consolas,"Courier New",monospace}.article-listing{list-style:none;margin:0}.article-listing li{margin:2rem 0}.article-listing li:first-child{margin-top:0}.article-listing h1{font-size:2em}.article-listing h1 a{color:#303030}.article-listing h1 a:hover{color:#b357cd}.article{position:relative}.article header{text-align:center}.article header:after{content:'';display:inline-block;margin:1em auto;height:1px;width:3em;background:rgba(0,0,0,0.1)}.article .date,.article .meta{text-transform:uppercase;letter-spacing:1px;color:#aaa}.article .date a,.article .meta a{color:#aaa}.article .date a:hover,.article .meta a:hover{color:#b357cd}.article .content{font-size:1.14286em;line-height:1.5em}.page-nav{margin:2em 0}.page-nav .button{display:block;margin:0.5em 0}@media (min-width: 480px){.page-nav{margin:4em 0;display:flex;justify-content:space-between;align-items:center}.page-nav .button{width:50%;margin-right:1em}.page-nav .button:last-child{margin-right:0}}.main .featured{margin:0 0 2em 0;width:100%;height:auto}.comments-wrapper{margin:2em 0}@media (min-width: 760px){.comments-wrapper{margin:6em 0}}.block-action{margin:2em 0;padding:1.5em 3em;background:#1489C9;border-radius:3px;color:#fff;text-align:center}.block-action h3{color:#fff}.block-action .button-group-wrapper{display:block}.block-action .button-group-wrapper .button{width:100%;display:block;background-clip:padding-box}@media (min-width: 760px){.block-action .button-group-wrapper{display:inline-block}.block-action .button-group-wrapper .button{width:auto;display:inline-block}}.footer{color:#aaa;text-align:center}.footer .logo{border:0 none}.footer img{display:inline-block;opacity:0.4}.footer a{color:#aaa}.footer a:hover{color:#b357cd}@media (min-width: 760px){.footer{text-align:left}.footer .logo{position:relative;top:-3px;float:right}.footer img{margin:0}}figure{margin:1em 0}.highlight .c{color:#998;font-style:italic}.highlight .err{color:#a61717}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000}.highlight .gd .x{color:#000}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000}.highlight .gi .x{color:#000}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .na{color:#008080}.highlight .nb{color:#0086B3}.highlight .nc{color:#458;font-weight:bold}.highlight .no{color:#008080}.highlight .ni{color:#800080}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#900;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:#000080}.highlight .nv{color:#008080}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:#008080}.highlight .vg{color:#008080}.highlight .vi{color:#008080}.highlight .il{color:#099}.swatch-black{background-color:#000}.swatch-white{background-color:#fff}.swatch-gray-pale{background-color:#f5f5f5}.swatch-gray-lighter{background-color:#ccc}.swatch-gray-light{background-color:#aaa}.swatch-gray{background-color:#606060}.swatch-gray-dark{background-color:#303030}.swatch-gray-darker{background-color:#101010}.swatch-red-pale{background-color:rgba(222,81,81,0.1)}.swatch-red-lighter{background-color:#e67c7c}.swatch-red-light{background-color:#e26666}.swatch-red{background-color:#de5151}.swatch-red-dark{background-color:#da3c3c}.swatch-red-darker{background-color:#d42828}.swatch-red-orange-pale{background-color:rgba(231,112,69,0.1)}.swatch-red-orange-lighter{background-color:#ed9272}.swatch-red-orange-light{background-color:#ea815b}.swatch-red-orange{background-color:#e77045}.swatch-red-orange-dark{background-color:#e45e2e}.swatch-red-orange-darker{background-color:#dd4f1c}.swatch-orange-pale{background-color:rgba(230,146,66,0.1)}.swatch-orange-lighter{background-color:#ecac6f}.swatch-orange-light{background-color:#e99f59}.swatch-orange{background-color:#e69242}.swatch-orange-dark{background-color:#e3852b}.swatch-orange-darker{background-color:#d8781d}.swatch-yellow-orange-pale{background-color:rgba(242,173,35,0.1)}.swatch-yellow-orange-lighter{background-color:#f5bf53}.swatch-yellow-orange-light{background-color:#f3b63b}.swatch-yellow-orange{background-color:#f2ad23}.swatch-yellow-orange-dark{background-color:#eda30e}.swatch-yellow-orange-darker{background-color:#d5920d}.swatch-yellow-pale{background-color:rgba(241,196,15,0.1)}.swatch-yellow-lighter{background-color:#f4d03f}.swatch-yellow-light{background-color:#f2ca27}.swatch-yellow{background-color:#f1c40f}.swatch-yellow-dark{background-color:#dab10d}.swatch-yellow-darker{background-color:#c29d0b}.swatch-yellow-green-pale{background-color:rgba(192,196,25,0.1)}.swatch-yellow-green-lighter{background-color:#e1e42b}.swatch-yellow-green-light{background-color:#d7da1b}.swatch-yellow-green{background-color:#c0c419}.swatch-yellow-green-dark{background-color:#aaad16}.swatch-yellow-green-darker{background-color:#949613}.swatch-green-pale{background-color:rgba(132,183,45,0.1)}.swatch-green-lighter{background-color:#9ed146}.swatch-green-light{background-color:#93cb32}.swatch-green{background-color:#84b72d}.swatch-green-dark{background-color:#75a328}.swatch-green-darker{background-color:#668e23}.swatch-blue-green-pale{background-color:rgba(70,166,124,0.1)}.swatch-blue-green-lighter{background-color:#62bd95}.swatch-blue-green-light{background-color:#50b589}.swatch-blue-green{background-color:#46a67c}.swatch-blue-green-dark{background-color:#3f946e}.swatch-blue-green-darker{background-color:#378261}.swatch-blue-pale{background-color:rgba(20,137,201,0.1)}.swatch-blue-lighter{background-color:#27a5e9}.swatch-blue-light{background-color:#1699e0}.swatch-blue{background-color:#1489C9}.swatch-blue-dark{background-color:#1279b2}.swatch-blue-darker{background-color:#0f699b}.swatch-blue-violet-pale{background-color:rgba(99,119,211,0.1)}.swatch-blue-violet-lighter{background-color:#8b9ade}.swatch-blue-violet-light{background-color:#7788d9}.swatch-blue-violet{background-color:#6377d3}.swatch-blue-violet-dark{background-color:#4f65cd}.swatch-blue-violet-darker{background-color:#3b54c8}.swatch-violet-pale{background-color:rgba(188,107,211,0.1)}.swatch-violet-lighter{background-color:#ce92df}.swatch-violet-light{background-color:#c57fd9}.swatch-violet{background-color:#bc6bd3}.swatch-violet-dark{background-color:#b357cd}.swatch-violet-darker{background-color:#aa44c7}.swatch-red-violet-pale{background-color:rgba(210,89,146,0.1)}.swatch-red-violet-lighter{background-color:#dd81ac}.swatch-red-violet-light{background-color:#d86d9f}.swatch-red-violet{background-color:#d25992}.swatch-red-violet-dark{background-color:#cd4584}.swatch-red-violet-darker{background-color:#c33577}.swatch-bg-color{background-color:#f5f5f5}.swatch-bg-selection{background-color:rgba(132,183,45,0.25)}.swatch-border-color{background-color:rgba(0,0,0,0.1)}.swatch-border-color-hover{background-color:rgba(0,0,0,0.25)}.demo{margin:1.5em -1.5em;padding:0 1.5em;overflow:auto;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1)}.demo .box{width:50px;height:50px;margin:0 auto;color:#fff;background:#1489C9;border-radius:3px}@media (min-width: 760px){.demo{margin:1.5em 0;padding:1.5em 3em;border:1px solid rgba(0,0,0,0.1);border-radius:3px}}.demo.demo-vertical-center{height:200px}.demo.demo-vertical-center .box{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.demo-border-radius{display:inline-block;background:#1489C9;width:30px;height:30px}.mixin-border-radius{border-radius:50%}.mixin-border-radius-top{border-top-left-radius:50%;border-top-right-radius:50%}.mixin-border-radius-top-left{border-top-left-radius:50%}.mixin-border-radius-top-right{border-top-right-radius:50%}.mixin-border-radius-bottom{border-bottom-right-radius:50%;border-bottom-left-radius:50%}.mixin-border-radius-bottom-left{border-bottom-left-radius:50%}.mixin-border-radius-bottom-right{border-bottom-right-radius:50%}.mixin-border-radius-left{border-top-left-radius:50%;border-bottom-left-radius:50%}.mixin-border-radius-left-top{border-top-left-radius:50%}.mixin-border-radius-left-bottom{border-bottom-left-radius:50%}.mixin-border-radius-right{border-top-right-radius:50%;border-bottom-right-radius:50%}.mixin-border-radius-right-top{border-top-right-radius:50%}.mixin-border-radius-right-bottom{border-bottom-right-radius:50%}.demo.demo-transform-skew .box{-webkit-transform:skew(30deg, 10deg);-ms-transform:skew(30deg, 10deg);transform:skew(30deg, 10deg)}.demo.demo-rotate .box{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.demo.demo-transition .box{background-color:#1489C9;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.demo.demo-transition .box:hover{background-color:#de5151}@-webkit-keyframes example{0%{background-color:#de5151}50%{background-color:#1489C9}100%{background-color:#de5151}}@keyframes example{0%{background-color:#de5151}50%{background-color:#1489C9}100%{background-color:#de5151}}.demo.demo-animation .box{-webkit-animation:example 10s linear 1s infinite normal;animation:example 10s linear 1s infinite normal}.demo.demo-linear-gradient .box{width:100%;background-image:-webkit-linear-gradient(left,#bc6bd3,#1489C9,#84b72d);background-image:-moz-linear-gradient(left,#bc6bd3,#1489C9,#84b72d);background-image:-ms-linear-gradient(left,#bc6bd3,#1489C9,#84b72d);background-image:linear-gradient(left,#bc6bd3,#1489C9,#84b72d)}.demo.demo-radial-gradient .box{width:100px;height:100px;background-image:-webkit-radial-gradient(circle,#1489C9,#bc6bd3);background-image:-moz-radial-gradient(circle,#1489C9,#bc6bd3);background-image:-ms-radial-gradient(circle,#1489C9,#bc6bd3);background-image:radial-gradient(circle,#1489C9,#bc6bd3)}.demo.demo-text-truncate .box{width:150px;height:auto;padding:1em 1.5em;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo.demo-logo-image .logo{display:block;margin:1.5rem auto;padding:0;border:0 none;background:url("../img/baseweb-hori-black.svg") no-repeat left center;background-size:187px 40px;width:187px;height:40px;font-size:0;line-height:0;text-indent:100%;white-space:nowrap;overflow:hidden}.demo.demo-text-mask{-webkit-text-fill-color:rgba(0,0,0,0.25);-webkit-background-clip:text;background-clip:text;background-image:url("../img/demo-mask.jpg");background-repeat:no-repeat;background-position:center center;background-size:cover}.demo.demo-text-mask p{margin:1rem 0;font-size:4em;line-height:1em;text-align:center;text-transform:uppercase;font-weight:900;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo.demo-triangle{text-align:center}.demo.demo-triangle:after{content:'';display:table;clear:both}.example-triangle-1,.example-triangle-2,.example-triangle-3{content:'';display:inline-block;width:0;height:0;border:0 none;border-style:solid;border-color:transparent}.example-triangle-1{border-color:transparent;border-width:14px 14px 14px 0;border-right-color:#1489C9}.example-triangle-2{border-color:transparent;border-width:14px 14px 0 14px;border-top-color:#6377d3}.example-triangle-3{border-color:transparent;border-width:14px 0 14px 14px;border-left-color:#bc6bd3}.demo-grid{margin:1.5rem 0}.demo-grid .col{margin-top:0.75rem;margin-bottom:0.75rem}.demo-grid .col p{margin:0;padding:1rem;background:#f5f5f5;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:1em;line-height:1.5em;text-align:center;border-radius:3px}.demo-grid-semantic .demo-wrapper,.demo-grid-semantic .demo-content,.demo-grid-semantic .demo-aside,.demo-grid-semantic .demo-article{background:rgba(20,137,201,0.1)}.demo-grid-semantic .demo-wrapper p,.demo-grid-semantic .demo-content p,.demo-grid-semantic .demo-aside p,.demo-grid-semantic .demo-article p{margin:0;padding:1rem;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:1em;line-height:1.5em;text-align:center}.demo-grid-semantic .demo-aside p,.demo-grid-semantic .demo-article p{margin:0.75rem 0;background:#f5f5f5;border-radius:3px}.demo-grid-semantic .demo-wrapper{width:100%;min-width:none;max-width:80rem;margin:0 auto;padding:0 1.5rem}.demo-grid-semantic .demo-wrapper:after{content:'';display:table;clear:both}.demo-grid-semantic .demo-content{width:auto;margin-left:-.75rem;margin-right:-.75rem}.demo-grid-semantic .demo-content:after{content:'';display:table;clear:both}.demo-grid-semantic .demo-aside,.demo-grid-semantic .demo-article{min-height:1px;float:left;padding-left:.75rem;padding-right:.75rem}.demo-grid-semantic .demo-aside.col-left,.demo-grid-semantic .demo-article.col-left{float:left}.demo-grid-semantic .demo-aside.col-right,.demo-grid-semantic .demo-article.col-right{float:right}.demo-grid-semantic .demo-aside{width:33.33333%}.demo-grid-semantic .demo-article{width:66.66667%}@media (min-width: 760px){.demo-grid-prefix-suffix{padding-left:0.75rem;padding-right:0.75rem}}.demo-grid-prefix-suffix .row{background:rgba(20,137,201,0.1)}@media (min-width: 760px){.demo-grid-nested{padding-left:0.75rem;padding-right:0.75rem}}.demo-grid-nested .col{margin-top:0;margin-bottom:0;background:rgba(20,137,201,0.1)}.demo-grid-nested .col p{margin:0.75rem 0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo.demo-mini-grid{padding:1.5em 3em}.demo-mini-grid .mini-grid{margin:1rem 0}.demo-mini-grid .mini-grid:after{content:'';display:table;clear:both}.demo-mini-grid .mini-grid>*{margin:0;padding:1rem 0;background:#f5f5f5;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:1em;line-height:1.5em;text-align:center;border-left:1px solid rgba(0,0,0,0.1)}.demo-mini-grid .mini-grid>*:first-child{border-left:0 none;border-top-left-radius:3px;border-bottom-left-radius:3px}.demo-mini-grid .mini-grid>*:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.demo-buttons{padding-top:1rem}.demo-buttons>p{margin-left:-0.5rem}.demo-buttons>p:after{content:'';display:table;clear:both}.demo-buttons .button,.demo-buttons .button-custom,.demo-buttons .button-custom-mobile{float:left;margin:0.5rem 0 0 0.5rem}.demo-buttons-mobile>p{margin-left:0}.demo-buttons-mobile .button,.demo-buttons-mobile .button-custom-mobile{margin-left:0}.button-custom{cursor:pointer;display:inline-block;outline:none;margin:0;padding:0.75em 1.5em;font-family:inherit;font-size:1em;line-height:1.5em;font-weight:inherit;color:#303030;text-align:center;white-space:nowrap;vertical-align:top;background:none;box-shadow:inset 0 0 0 transparent;border:1px solid rgba(0,0,0,0.15);border-radius:3px;-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0.75s;transition-duration:0.75s;-webkit-transition-timing-function:linear;transition-timing-function:linear;color:#fff;text-shadow:none;background-color:#bc6bd3;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button-custom:hover,.button-custom:focus{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button-custom:active{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button-custom:hover,.button-custom:focus{color:#fff;background-color:#b357cd;border-color:rgba(0,0,0,0.25)}.button-custom:active{color:#fff;background-color:#aa44c7;border-color:rgba(0,0,0,0.25)}.button-custom-mobile{cursor:pointer;display:inline-block;outline:none;margin:0;padding:0.75em 1.5em;font-family:inherit;font-size:1em;line-height:1.5em;font-weight:inherit;color:#303030;text-align:center;white-space:nowrap;vertical-align:top;background:none;box-shadow:inset 0 0 0 transparent;border:1px solid rgba(0,0,0,0.15);border-radius:3px;-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0.75s;transition-duration:0.75s;-webkit-transition-timing-function:linear;transition-timing-function:linear;color:#303030;text-shadow:none;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,0.15);display:block;width:100%}.button-custom-mobile:hover,.button-custom-mobile:focus{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button-custom-mobile:active{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button-custom-mobile:hover,.button-custom-mobile:focus{color:#303030;background-color:#f2f2f2;border-color:rgba(0,0,0,0.25)}.button-custom-mobile:active{color:#303030;background-color:#e6e6e6;border-color:rgba(0,0,0,0.25)}.demo .notice{margin-top:1em;margin-bottom:1em}.custom-breadcrumb{display:block;margin:1em 0;font-size:1em}.custom-breadcrumb ul,.custom-breadcrumb ol{margin:0;list-style:none}.custom-breadcrumb ul:after,.custom-breadcrumb ol:after{content:'';display:table;clear:both}.custom-breadcrumb li{float:left;margin:0}.custom-breadcrumb li a{color:#84b72d;border:0 none}.custom-breadcrumb li a:hover{color:#de5151}.custom-breadcrumb .current{color:#aaa}.custom-breadcrumb li:after{content:"»";padding:0 0.75em;color:rgba(0,0,0,0.25)}.custom-breadcrumb li:last-child:after{content:none}.breadcrumb.custom-wrapped{padding:0.5em 1em;background:rgba(170,68,199,0.1);border:3px solid rgba(0,0,0,0.05);border-radius:0}.demo-dropdown{padding:2em 3em 2em;overflow:visible}.demo-dropdown:after{content:'';display:table;clear:both}.demo-dropdown>.dropdown-trigger{float:left;margin:1em 1em 1em 0}.demo-dropdown-styles{padding:2em 3em 3em}.demo-dropdown-styles>.dropdown,.demo-dropdown-styles>.dropdown-content,.demo-dropdown-styles>.dropdown-menu{float:left;margin:1em 1em 0 0}.demo-tabs.inverted{background:#303030} diff --git a/docs/assets/img/devlog/illustration-tabs-small.png b/docs/assets/img/devlog/illustration-tabs-small.png new file mode 100644 index 00000000..7fe9ce3a Binary files /dev/null and b/docs/assets/img/devlog/illustration-tabs-small.png differ diff --git a/docs/assets/img/devlog/illustration-tabs.png b/docs/assets/img/devlog/illustration-tabs.png new file mode 100644 index 00000000..b7e5c70d Binary files /dev/null and b/docs/assets/img/devlog/illustration-tabs.png differ diff --git a/docs/assets/js/jquery.docready.js b/docs/assets/js/jquery.docready.js index 41c2d60a..8add6794 100644 --- a/docs/assets/js/jquery.docready.js +++ b/docs/assets/js/jquery.docready.js @@ -17,16 +17,22 @@ $(document).ready(function () { /** - * Bind document click event + * @Notices */ + $('.dismissible > .close').on('click', function() { + $(this).closest('.dismissible').fadeOut(); + }); + + /** + * @Dropdowns + */ + // Bind document click event $(document).click(function(){ // Hide all dropdowns that are click activated $('.dropdown-trigger.on-click').removeClass('active'); }); - /** - * Bind the click event to .dropdown-trigger - */ + // Bind the click event to .dropdown-trigger $('.dropdown-trigger.on-click').click(function(e) { // Is the dropdown already active? @@ -47,9 +53,7 @@ e.stopPropagation(); }); - /** - * Bind the click event to .dropdown - */ + // Bind the click event to .dropdown $('.dropdown-trigger.on-click .dropdown').click(function(e) { // Hide all dropdowns that are click activated @@ -65,6 +69,63 @@ e.stopPropagation(); }); + /** + * @Tabs + */ + $('.tabs-nav').each(function(e) { + + // Save this + var $this = $(this); + + // Save our tabs content + var tabs_content = $this.parents('.tabs').find('.tabs-content'); + var has_content = tabs_content.length; + + // Check our other tabs content method if one wasn't found yet + if (!has_content) { + // Check if we have a linked content data attribute + tabs_content = $this.attr('data-content'); + if (tabs_content) { + // Save our tabs content + tabs_content = $('#' + tabs_content); + // Set has_content to true + if (tabs_content.length) { + has_content = 1; + } + } else { + console.log('Tabs content does not exist!'); + } + } + + // Add click event to tab links + $this.find('a').click(function() { + // Check if item is already active or not + var is_active = $(this).parents('li').hasClass('active'); + + if (!is_active) { + // Remove active class from all children nav items + $this.find('li').removeClass('active'); + // Add active class to currently selected item + $(this).parents('li').addClass('active'); + + // Check if tabs-nav has an associated content block + if (has_content) { + // Hide current active content + tabs_content.find('.tabs-panel').removeClass('active'); + // Show new active content + var target = $(this).attr('href'); + $(target).addClass('active'); + } else { + console.log('Tabs content does not exist!'); + } + } + + // Stop the default behavior + return false; + }); + + }); + /** * Sticky Element */ @@ -72,7 +133,7 @@ containerSelector : '.row', additionalMarginTop : 0 }); - + /** * Navigation Toggle */ @@ -81,6 +142,15 @@ return false; }); + /** + * New Tab Links + */ + $('.onclick-newtab').click(function() { + $(this).attr('target', '_blank'); + window.open($(this).attr('href')); + return false; + }); + }); /** diff --git a/docs/assets/js/scripts.min.js b/docs/assets/js/scripts.min.js index 39e99cfd..79b5bb75 100644 --- a/docs/assets/js/scripts.min.js +++ b/docs/assets/js/scripts.min.js @@ -1 +1 @@ -!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TSS: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0||!(i("body").width().theiaStickySidebar:after {content: ""; display: table; clear: both;}')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:"",transform:"none"})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};if(a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.length&&(a.container=a.sidebar.parent()),a.sidebar.parents().css("-webkit-transform","none"),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length){var r=/(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;a.sidebar.find("script").filter(function(i,t){return 0===t.type.length||t.type.match(r)}).remove(),a.stickySidebar=i("
").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)}a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var d=a.stickySidebar.offset().top,s=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),d-=a.stickySidebar.offset().top,s=a.stickySidebar.outerHeight()-s-d,0==d?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==s?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()a.container.width())return void o()}var d=i(document).scrollTop(),s="static";if(d>=a.sidebar.offset().top+(a.paddingTop-a.options.additionalMarginTop)){var c,p=a.paddingTop+t.additionalMarginTop,l=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,b=a.sidebar.offset().top,g=a.sidebar.offset().top+e(a.container),f=0+t.additionalMarginTop,h=a.stickySidebar.outerHeight()+p+l0?Math.min(y,f):Math.max(y,c-a.stickySidebar.outerHeight()),y=Math.max(y,u),y=Math.min(y,S-a.stickySidebar.outerHeight());var k=a.container.height()==a.stickySidebar.outerHeight();s=(k||y!=f)&&(k||y!=c-a.stickySidebar.outerHeight())?d+y-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==s)a.stickySidebar.css({position:"fixed",width:n(a.stickySidebar)+"px",transform:"translateY("+y+"px)",left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))+"px",top:"0px"});else if("absolute"==s){var v={};"absolute"!=a.stickySidebar.css("position")&&(v.position="absolute",v.transform="translateY("+(d+y-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom)+"px)",v.top="0px"),v.width=n(a.stickySidebar)+"px",v.left="",a.stickySidebar.css(v)}else"static"==s&&o();"static"!=s&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=d}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}function n(i){var t;try{t=i[0].getBoundingClientRect().width}catch(i){}return"undefined"==typeof t&&(t=i.width()),t}var r={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,disableOnResponsiveLayouts:!0,sidebarBehavior:"modern"};t=i.extend(r,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery),function(i){"use strict"}(jQuery),function(i){"use strict";i(document).ready(function(){i(document).click(function(){i(".dropdown-trigger.on-click").removeClass("active")}),i(".dropdown-trigger.on-click").click(function(t){var o=i(this).hasClass("active");i(".dropdown-trigger.on-click").removeClass("active"),i(this).parents(".dropdown-trigger").addClass("active"),o||i(this).addClass("active"),t.stopPropagation()}),i(".dropdown-trigger.on-click .dropdown").click(function(t){i(".dropdown-trigger.on-click").removeClass("active"),i(this).parents(".dropdown-trigger").addClass("active"),i(this).addClass("active"),t.stopPropagation()}),i(".sticky").theiaStickySidebar({containerSelector:".row",additionalMarginTop:0}),i("#widget-toggle").each(function(){}),i(".widget-menu .toggle").click(function(){return i(this).parent().toggleClass("active"),!1})}),i(window).on("load",function(){})}(jQuery); \ No newline at end of file +!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TSS: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0||!(i("body").width().theiaStickySidebar:after {content: ""; display: table; clear: both;}')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:"",transform:"none"})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};if(a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.length&&(a.container=a.sidebar.parent()),a.sidebar.parents().css("-webkit-transform","none"),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length){var s=/(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;a.sidebar.find("script").filter(function(i,t){return 0===t.type.length||t.type.match(s)}).remove(),a.stickySidebar=i("
").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)}a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var r=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),r-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-r,0==r?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()a.container.width())return void o()}var r=i(document).scrollTop(),d="static";if(r>=a.sidebar.offset().top+(a.paddingTop-a.options.additionalMarginTop)){var c,p=a.paddingTop+t.additionalMarginTop,l=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,b=a.sidebar.offset().top,g=a.sidebar.offset().top+e(a.container),f=0+t.additionalMarginTop,h=a.stickySidebar.outerHeight()+p+l0?Math.min(m,f):Math.max(m,c-a.stickySidebar.outerHeight()),m=Math.max(m,u),m=Math.min(m,S-a.stickySidebar.outerHeight());var y=a.container.height()==a.stickySidebar.outerHeight();d=(y||m!=f)&&(y||m!=c-a.stickySidebar.outerHeight())?r+m-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:n(a.stickySidebar)+"px",transform:"translateY("+m+"px)",left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))+"px",top:"0px"});else if("absolute"==d){var v={};"absolute"!=a.stickySidebar.css("position")&&(v.position="absolute",v.transform="translateY("+(r+m-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom)+"px)",v.top="0px"),v.width=n(a.stickySidebar)+"px",v.left="",a.stickySidebar.css(v)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=r}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}function n(i){var t;try{t=i[0].getBoundingClientRect().width}catch(i){}return"undefined"==typeof t&&(t=i.width()),t}var s={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,disableOnResponsiveLayouts:!0,sidebarBehavior:"modern"};t=i.extend(s,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery),function(i){"use strict"}(jQuery),function(i){"use strict";i(document).ready(function(){i(".dismissible > .close").on("click",function(){i(this).closest(".dismissible").fadeOut()}),i(document).click(function(){i(".dropdown-trigger.on-click").removeClass("active")}),i(".dropdown-trigger.on-click").click(function(t){var o=i(this).hasClass("active");i(".dropdown-trigger.on-click").removeClass("active"),i(this).parents(".dropdown-trigger").addClass("active"),o||i(this).addClass("active"),t.stopPropagation()}),i(".dropdown-trigger.on-click .dropdown").click(function(t){i(".dropdown-trigger.on-click").removeClass("active"),i(this).parents(".dropdown-trigger").addClass("active"),i(this).addClass("active"),t.stopPropagation()}),i(".tabs-nav").each(function(t){var o=i(this),e=o.parents(".tabs").find(".tabs-content"),a=e.length;a||(e=o.attr("data-content"),e?(e=i("#"+e),e.length&&(a=1)):console.log("Tabs content does not exist!")),o.find("a").click(function(){var t=i(this).parents("li").hasClass("active");if(!t)if(o.find("li").removeClass("active"),i(this).parents("li").addClass("active"),a){e.find(".tabs-panel").removeClass("active");var n=i(this).attr("href");i(n).addClass("active")}else console.log("Tabs content does not exist!");return!1})}),i(".sticky").theiaStickySidebar({containerSelector:".row",additionalMarginTop:0}),i(".widget-menu .toggle").click(function(){return i(this).parent().toggleClass("active"),!1}),i(".onclick-newtab").click(function(){return i(this).attr("target","_blank"),window.open(i(this).attr("href")),!1})}),i(window).on("load",function(){})}(jQuery); \ No newline at end of file diff --git a/docs/assets/scss/_baseweb.scss b/docs/assets/scss/_baseweb.scss index 09137cae..ee233998 100644 --- a/docs/assets/scss/_baseweb.scss +++ b/docs/assets/scss/_baseweb.scss @@ -44,6 +44,7 @@ @import "blocks/notices"; @import "blocks/breadcrumbs"; @import "blocks/dropdowns"; +@import "blocks/tabs"; // Custom @import "custom/custom"; diff --git a/docs/assets/scss/custom/_custom.scss b/docs/assets/scss/custom/_custom.scss index a92279fb..192d0a51 100644 --- a/docs/assets/scss/custom/_custom.scss +++ b/docs/assets/scss/custom/_custom.scss @@ -438,10 +438,40 @@ body { * Widget Menu */ .widget-menu { - .active > a { + ul { + list-style: none; + margin: 1em 0; + } + ul ul { + margin: 0 0 0 1em; + } + ul li { + margin: 1px 0; + } + ul li a { + display: block; + padding: 0.5em 1em; color: $color-light; border: 0 none; + @include border-radius(); + + &:hover { + color: $color; + } + } + + + // Active Item + .active > a { + background: $bg-color; + color: $red; + + &:hover { + color: $red; + } } + + // Display Styles ul ul { display: none; } @@ -485,7 +515,7 @@ body { } @include media-min('medium') { .widget-back { - margin: 1em 0; + margin: 0; text-align: left; &:first-child, @@ -718,6 +748,15 @@ body { } } +/** + * Featured Images + */ +.main .featured { + margin: 0 0 2em 0; + width: 100%; + height: auto; +} + /** * Comments */ diff --git a/docs/assets/scss/custom/_demos.scss b/docs/assets/scss/custom/_demos.scss index dff27d6c..3068d92f 100644 --- a/docs/assets/scss/custom/_demos.scss +++ b/docs/assets/scss/custom/_demos.scss @@ -447,3 +447,10 @@ $filename: 'scss/custom/_demos.scss'; margin: 1em 1em 0 0; } } + +/** + * Tabs + */ +.demo-tabs.inverted { + background: $color; +} diff --git a/docs/devlog/_posts/2017-01-16-exploring-tabs/index.md b/docs/devlog/_posts/2017-01-16-exploring-tabs/index.md new file mode 100644 index 00000000..11fa5286 --- /dev/null +++ b/docs/devlog/_posts/2017-01-16-exploring-tabs/index.md @@ -0,0 +1,308 @@ +--- +layout: post +title: "Exploring Tabs" +date: 2017-01-16 +img: illustration-tabs.png +comments: true +--- + +Tabs + +

Tabs have arrived! BaseWeb now makes available the tabs block component which includes two robust mixins for creating and styling semantic tabs.

+ +Before I get into the solution we applied in BaseWeb, I want to explore the process of researching and developing this component. Tabs are a very common user interface control and have been around for a while. This is important because it means users have an expectation with how tabs function and look. So when developing a tabs system, we want to make sure we are as predictable as possible for users as well as being clear visually. So lets put together a checklist to clearly define how tabs should look and function before we code. + +1. **Tabs are used to switch between views within the same context.** It's important to note that tabs should only be used as a high level organizational control for content. +2. **Tabs appear horizontally above the panel they represent.** This may seem obvious, but keeping this pattern consistent leverages the already learned behavior of users. +3. **Only one tab should be active at a time.** This shouldn't be mistaken for content toggle controls like the accordion where multiple content panes can be active at once. +4. **Tab text is usually short and descriptive.** They should be easily scannable and there should be no confusion what content a user will see when a tab is clicked. +5. **Tabs should not be used as site navigation.** This is something I've seen before and it can cause confusion and inconsistency for a user. There's a clear distinction between a site's navigation and tab controls and this should be represented both functionally and visually. +6. **Tabs shouldn't contain content that needs to be compared.** Because only one tab panel should be active at a time, content between tabs shouldn't need to be compared or needed to be viewed together. If your content requires this sort of interaction, tabs are not the appropriate control. +7. **Active tabs should be super obvious and work even when only two tabs are present.** This deals more with the visuals of the tabs themselves, but it's helpful to know which tab is currently active, even when only two exist. We'll talk more about this when we go over tab styling. + +## Tackling the Markup + +A semantic tabs system contains two primary parts, the tab controls and the panels of content they toggle. We'll start with the tabs who's markup we can write similar to a set of navigation links: + +```html + +``` + +Next, we'll write a quick set of divs that represent our content panes which we'll control with the tabs navigation. + +```html +
+
+ ... +
+
+ ... +
+
+ ... +
+
+``` + +Lastly we'll link the tab navigation using the `href` attribute on the links with the`id` value of the content panel they toggle. We'll also need to settle on a class that we use to show the active tab item and also one to show and hide the panels. Lets just go with `.active` as it's pretty clear. + +The other markup aspect we'll need to handle is how we link the tabs control group to a tabs content group. The main concern here is in the case our document may have more than one set of tabs on a view. So we decided to incorporate two methods that are fairly intuitive and lets the developer decide what works best for them. + +### Data Attribute Link + +The first method we can use is a data attribute link that ties our two elements together. So let's add `data-content=""` to our tabs-nav element, a unique ID to the tabs-content and add the ID as the data attribute's value. + +```html + +
+ ... +
+``` + +This method allows us to clearly tie together tab components and guarantees we'll never have any conflicts with other tabs in our page. + +### Wrapper Link + +The second method is simply just wrapping our tab components with a `
` element. This gives us all the hooks we'll need to style our components and interact with them in JavaScript without having to specifically give each component unique IDs and data attributes. + +```html +
+ +
+ ... +
+
+``` + +## Adding Behavior with JavaScript + +A lot of what makes tab controls a useful pattern in content organization is their behavior. It's important to make sure we adhere to the patterns I've highlighted in the introduction, and now that we have some semantic markup, we can dive into writing our behavior. + +I'm personally very comfortable writing interface plugins in jQuery, but feel free to write this behavior in any framework or even raw JavaScript as you see fit. Making BaseWeb ambiguous in the way a developer handles their JavaScript was intentional. + +The first thing we'll want to do is iterate through all instances of our tab controls and work with their behavior separately to avoid any conflicts. In jQuery, we can do this using the `jQuery.each()` iteration function. + +```js +$('.tabs-nav').each(function(e) { + // Do some stuff... +}); +``` + +The next thing we'll want to do is check if our tab controls have content linked and then save it for later. We'll check first if we used the `.tab` wrapper and then if `.tabs-content` exists. + +```js +// Save this +var $this = $(this); + +// Save our tabs content +var tabs_content = $this.parents('.tabs').find('.tabs-content'); +var has_content = tabs_content.length; +``` + +If content wasn't found, we'll check if we used the data attribute method. If no content is found that way either, we just output a message in console. + +```js +// Check our other tabs content method if one wasn't found yet +if (!has_content) { + // Check if we have a linked content data attribute + tabs_content = $this.attr('data-content'); + if (tabs_content) { + // Save our tabs content + tabs_content = $('#' + tabs_content); + // Set has_content to true + if (tabs_content.length) { + has_content = 1; + } + } else { + console.log('Tabs content does not exist!'); + } +} +``` + +Next we'll add a click event on our tab controls and stop the default behavior. + +```js +// Add click event to tab links +$this.find('a').click(function() { + + // Stop the default behavior + return false; +}); +``` + +When our tabs are clicked, we check if it's already active. If it's not, we remove all active classes off our tabs, add one to the tab that was just clicked and check again if there is content associated. If so, we toggle the active class on our tab panel using the href value of our active tab control. + +```js +// Check if item is already active or not +var is_active = $(this).parents('li').hasClass('active'); + +if (!is_active) { + // Remove active class from all children nav items + $this.find('li').removeClass('active'); + // Add active class to currently selected item + $(this).parents('li').addClass('active'); + + // Check if tabs-nav has an associated content block + if (has_content) { + // Hide current active content + tabs_content.find('.tabs-panel').removeClass('active'); + // Show new active content + var target = $(this).attr('href'); + $(target).addClass('active'); + } else { + console.log('Tabs content does not exist!'); + } +} +``` + +That about does it with our JavaScript! Here's all of it together: + +```js +$('.tabs-nav').each(function(e) { + + // Save this + var $this = $(this); + + // Save our tabs content + var tabs_content = $this.parents('.tabs').find('.tabs-content'); + var has_content = tabs_content.length; + + // Check our other tabs content method if one wasn't found yet + if (!has_content) { + // Check if we have a linked content data attribute + tabs_content = $this.attr('data-content'); + if (tabs_content) { + // Save our tabs content + tabs_content = $('#' + tabs_content); + // Set has_content to true + if (tabs_content.length) { + has_content = 1; + } + } else { + console.log('Tabs content does not exist!'); + } + } + + // Add click event to tab links + $this.find('a').click(function() { + // Check if item is already active or not + var is_active = $(this).parents('li').hasClass('active'); + + if (!is_active) { + // Remove active class from all children nav items + $this.find('li').removeClass('active'); + // Add active class to currently selected item + $(this).parents('li').addClass('active'); + + // Check if tabs-nav has an associated content block + if (has_content) { + // Hide current active content + tabs_content.find('.tabs-panel').removeClass('active'); + // Show new active content + var target = $(this).attr('href'); + $(target).addClass('active'); + } else { + console.log('Tabs content does not exist!'); + } + } + + // Stop the default behavior + return false; + }); + +}); +``` + +## Styling Our Tabs + +So we've got some solid semantic markup and handled our requirements for tab behaviors, it's time to add our styles! There are many options here for creating tab styles, and there are a few helpful patterns that are specific to tabs that can have huge usability benefits, but first lets isolate styles that are universal to any tab controls. This mainly deals with establishing our show and hide styles with the active class, `z-index` order and structural styles. + +```scss +// Tab Wrapper +.tabs { + position: relative; + margin: 1em 0; + + .tabs-nav, + .tabs-content { + margin: 0; + } + .tabs-nav { + z-index: 10; + } + .tabs-content { + z-index: 5; + } +} + +// Tab Navigation +.tabs-nav { + margin: 1em 0; + text-align: center; + + ul { + display: flex; + list-style: none; + margin: 0; + } + ul li { + flex: 1 0 auto; + margin: 0; + } + a { + display: block; + padding: 1em; + border: none; + } +} + +// Tab Content +.tabs-content { + margin: 1em 0; + + .tabs-panel { + display: none; + } + .tabs-panel.active { + display: block; + } +} +``` + +Now we've got a fully functional tabs block component with just the bare minimum styling that you can test here. + +

See the Pen BaseWeb Tabs - Vanilla by Sebastian Nitu (@sebnitu) on CodePen.

+ + +With this as our base, we can go any stylistic direction we'd like. [Mary Lou](https://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/) wrote a great post on Codrops if you're looking for some inspiration. For our purposes, we want some very basic styles that can be easily adopted in most projects without much effort. Here are the two options that we came up with which can be modified to suit most situations. + +

See the Pen BaseWeb Tabs - Fold Styles by Sebastian Nitu (@sebnitu) on CodePen.

+ + +

See the Pen BaseWeb Tabs - Line Styles by Sebastian Nitu (@sebnitu) on CodePen.

+ + +## Conclusion + +That wraps up our tabs block component solution. We've managed to hit all our requirements we listed in the introduction. The next steps we took in BaseWeb involve creating a variable map for customization and some handy mixins that abstract our styles a bit. You can read more about that implementation over on the [documentations page](/docs/blocks/tabs/). + +### Further Reading + + diff --git a/docs/docs/blocks/notices.md b/docs/docs/blocks/notices.md index ca7b67d2..922de5bf 100644 --- a/docs/docs/blocks/notices.md +++ b/docs/docs/blocks/notices.md @@ -51,14 +51,6 @@ $('.dismissible > .close').on('click', function() {
- -
# Notice Variables diff --git a/docs/docs/blocks/tabs.md b/docs/docs/blocks/tabs.md new file mode 100644 index 00000000..e489fc09 --- /dev/null +++ b/docs/docs/blocks/tabs.md @@ -0,0 +1,395 @@ +--- +layout: page +title: "Tabs" +order: 5 +--- + +Tabs are a high level navigational component that enable switching between views of related groups of content. They appear above the content they describe and consist of two primary parts: navigation items and the content they represent. Optionally, you can use the tabs wrapping `div` with the class of `.tabs` (default) for more easily grouping content together. Tabs are linked to their content part using the `href` attribute whos hash value contains the ID of the content it describes. + +```html +
+ +
+
...
+
...
+
...
+ ... +
+
+``` + +
+ +
+ +
+

Tab Content 1

+

Tab Content 2

+

Tab Content 3

+

Tab Content 4

+

Tab Content 5

+
+
+ +
+ +Tabs can also be displayed without the wrapping `.tabs` element. + +```html + +
+
...
+
...
+
...
+ ... +
+``` + +
+ + +
+

Tab Content 1

+

Tab Content 2

+

Tab Content 3

+

Tab Content 4

+

Tab Content 5

+
+ +
+ +
+ When not using the tabs wrapping element, you'll need to establish the connected between the tabs navigation and the content it represents some other way. You can do this using the data attribute on the tabs navigation element (e.g. `data-content="tabs-content"`) and the id attribute on the tabs content(e.g. `id="tabs-content"`). +
+ +BaseWeb also has two available tab style sets that can be used using the `.style-fold` (shown in examples above) or `.style-line` classes. + +```html +
+ ... +
+``` + +
+ +
+ +
+

Tab Content 1

+

Tab Content 2

+

Tab Content 3

+

Tab Content 4

+

Tab Content 5

+
+
+ +
+ +## Tabs JavaScript + +There are many ways you can create the tabs behavior, all with varying features and complexity. For simplicities sake, below is a jQuery example for creating tabs using BaseWeb tabs markup. The key feature here is that it enables you to omit the tabs wrapper and allows for an unlimited number of tab blocks in a single document. + +```js +$('.tabs-nav').each(function(e) { + + // Save this + var $this = $(this); + + // Save our tabs content + var tabs_content = $this.parents('.tabs').find('.tabs-content'); + var has_content = tabs_content.length; + + // Check our other tabs content method if one wasn't found yet + if (!has_content) { + // Check if we have a linked content data attribute + tabs_content = $this.attr('data-content'); + if (tabs_content) { + // Save our tabs content + tabs_content = $('#' + tabs_content); + // Set has_content to true + if (tabs_content.length) { + has_content = 1; + } + } else { + console.log('Tabs content does not exist!'); + } + } + + // Add click event to tab links + $this.find('a').click(function() { + // Check if item is already active or not + var is_active = $(this).parents('li').hasClass('active'); + + if (!is_active) { + // Remove active class from all children nav items + $this.find('li').removeClass('active'); + // Add active class to currently selected item + $(this).parents('li').addClass('active'); + + // Check if tabs-nav has an associated content block + if (has_content) { + // Hide current active content + tabs_content.find('.tabs-panel').removeClass('active'); + // Show new active content + var target = $(this).attr('href'); + $(target).addClass('active'); + } else { + console.log('Tabs content does not exist!'); + } + } + + // Stop the default behavior + return false; + }); + +}); +``` + +
+ +# Tabs Variables + +Tabs variables are encompassed within the '$tabs' map and are used throughout all tab mixins to set default values. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableDefault
$tabs('classes')true *
$tabs('class-wrapper')'tabs'
$tabs('class-nav')'tabs-nav'
$tabs('class-content')'tabs-content'
$tabs('class-content-panel')'tabs-panel'
$tabs('margin')2em 0
$tabs('padding-nav')1em
$tabs('padding-nav-inline')1em 2em
$tabs('padding-content')1em 2em
$tabs('background')#f5f5f5
$tabs('background-fade')#e6e6e6
$tabs('background-accent')$white
$tabs('border')1px solid #e6e6e6
$tabs('border-radius')$border-radius
$tabs('color')$color
$tabs('color-fade')$color-light
$tabs('color-accent')$blue
$tabs('transition')$transition
+ +
+\* Whether or not we should output tabs classes. Set to `false` if you want to use the tabs modifier mixins semantically and/or reduce CSS output. +
+ +
+ +
+ +# Tab Mixins + +Tab mixins are used to create the base styles for a tabs. + +
    + +
  • + +## make-tabs + +Creates the base styles for a the tabs block including tab wrapper, navigation and content whos default classes are output as `.tabs`, `.tabs-nav` and `.tabs-content` respectivly. + +```scss +@include make-tabs( $options: () ); +``` + + + + + + + + + + + + +
    VariableTypeDefault
    $optionsMap$tabs()
    + +### Example Usage + +To create a custom set of tab styles, you can use the make-tabs mixin to apply the base stack order, margins and content display styles. + +```scss +// Outputs the default styles using the values in the $tabs map. +@include make-tabs(); + +// Create tab styles using custom tab classes class: +@include make-tabs(( + 'class-nav' : 'nav', + 'class-content' : 'content', + 'class-content-panel' : 'panel' +)); +``` + +
    • + +
  • + +## add-tab-style + +Creates a predefined stylistic feel for your tabs. There are currently two presets, fold and line style tabs. + +```scss +@include add-tab-style( $options: (), $style : 'fold', $class : null ); +``` + + + + + + + + + + + + + + + + + + + + + + +
    VariableTypeDefault
    $optionsMap$tabs()
    $styleString (fold, line)'fold'
    $classString'style-#{$style}'
    + +### Example Usage + +By default, both tab styles are output using their default classes `.style-fold` and `.style-line`. + +```scss +// Tabs Style: Default +@include add-tab-style($style: 'fold'); + +// Tabs Style: Line +@include add-tab-style($style: 'line'); +``` + +```html +
    + +
    + ... +
    +
    + +
    + ... +
    +``` + +
    • + +
+ +
diff --git a/package.json b/package.json index 31019168..3520064e 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "BaseWeb", "description": "BaseWeb is a fresh SCSS front-end development framework and library built to help keep your projects simple, organized and responsive.", "short_description": "A fresh front-end development framework.", +<<<<<<< HEAD "version": "2.1.0", "keywords": ["BaseWeb", "CSS", "Sass", "Front-end", "Framework"], "homepage": "http://sebnitu.github.com/baseweb/", @@ -9,19 +10,33 @@ "url": "http://sebnitu.com", "year": "2017", +======= + "version": "2.0.0", + "keywords": [ + "BaseWeb", + "CSS", + "Sass", + "Front-end", + "Framework" + ], + "homepage": "http://getbaseweb.com", + "author": "Sebastian Nitu", + "url": "http://sebnitu.com", + "year": "2017", +>>>>>>> 700a6965cd66f93c42d3f6df718153a5fd3ab824 "repository": { - "type" : "git", - "url" : "https://github.com/sebnitu/BaseWeb.git" + "type": "git", + "url": "https://github.com/sebnitu/BaseWeb.git" }, - - "licenses": [{ - "type" : "The MIT License (MIT)", - "url" : "http://en.wikipedia.org/wiki/MIT_License" - }], - + "licenses": [ + { + "type": "The MIT License (MIT)", + "url": "http://en.wikipedia.org/wiki/MIT_License" + } + ], "devDependencies": { - "node-watch" : "0.4.*", - "node-sass" : "3.10.*", - "uglify-js" : "2.7.*" + "node-watch": "0.4.*", + "node-sass": "3.10.*", + "uglify-js": "2.7.*" } } diff --git a/src/css/baseweb.css b/src/css/baseweb.css index e2a37c1a..7f2f9e64 100644 --- a/src/css/baseweb.css +++ b/src/css/baseweb.css @@ -2673,6 +2673,218 @@ fieldset[disabled] .input { transform: translate3d(0, 0, 0); } +/*============================================================================== + @Tabs - scss/blocks/_tabs.scss +==============================================================================*/ +/** + * Base styles for tab wrapper, nav and content + */ +.tabs { + position: relative; + margin: 2em 0; +} + +.tabs .tabs-nav, +.tabs .tabs-content { + margin: 0; +} + +.tabs .tabs-nav { + z-index: 10; +} + +.tabs .tabs-content { + z-index: 5; +} + +.tabs-nav { + margin: 2em 0; + text-align: center; +} + +.tabs-nav ul { + display: flex; + list-style: none; + margin: 0; +} + +.tabs-nav ul li { + flex: 1 0 auto; + margin: 0; +} + +.tabs-nav a { + display: block; + padding: 1em; + border: none; +} + +.tabs-nav.inline ul { + flex-wrap: wrap; +} + +.tabs-nav.inline ul li { + flex: 0 0 auto; +} + +.tabs-nav.inline ul li a { + padding: 1em 2em; +} + +.tabs-content { + margin: 2em 0; +} + +.tabs-content .tabs-panel { + display: none; +} + +.tabs-content .tabs-panel.active { + display: block; +} + +/** + * Tabs Style: Default + */ +.style-fold .tabs-nav ul, +.tabs-nav.style-fold ul { + background: #f5f5f5; + border: 1px solid #e6e6e6; + border-radius: 3px; +} + +.style-fold .tabs-nav ul li, +.tabs-nav.style-fold ul li { + border-right: 1px solid #e6e6e6; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.style-fold .tabs-nav ul li:first-child, +.tabs-nav.style-fold ul li:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; +} + +.style-fold .tabs-nav ul li:last-child, +.tabs-nav.style-fold ul li:last-child { + border-right: none; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +.style-fold .tabs-nav a, +.tabs-nav.style-fold a { + color: #303030; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.style-fold .tabs-nav a:hover, +.tabs-nav.style-fold a:hover { + background: #e6e6e6; + color: #303030; +} + +.style-fold .tabs-nav ul li.active, +.tabs-nav.style-fold ul li.active { + background: #ffffff; +} + +.style-fold .tabs-nav .active a, +.tabs-nav.style-fold .active a { + color: #303030; +} + +.style-fold .tabs-nav .active a:hover, +.tabs-nav.style-fold .active a:hover { + background: #ffffff; +} + +.style-fold .tabs-nav.inline ul li:last-child, +.tabs-nav.style-fold.inline ul li:last-child { + border-right: 1px solid #e6e6e6; +} + +.style-fold .tabs-nav ul { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.style-fold .tabs-nav ul li { + border-bottom: 1px solid transparent; + margin-bottom: -1px; +} + +.style-fold .tabs-nav ul li:first-child { + border-bottom-left-radius: 0; +} + +.style-fold .tabs-nav ul li:last-child { + border-bottom-right-radius: 0; +} + +.style-fold .tabs-nav ul li.active { + border-bottom: 1px solid #ffffff; +} + +.style-fold .tabs-content { + padding: 1em 2em; + border: 1px solid #e6e6e6; + border-top: none; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} + +/** + * Tabs Style: Line + */ +.style-line .tabs-nav ul, +.tabs-nav.style-line ul { + border-bottom: 1px solid #e6e6e6; +} + +.style-line .tabs-nav ul li, +.tabs-nav.style-line ul li { + border-bottom: 3px solid transparent; + margin-bottom: -1px; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.style-line .tabs-nav a, +.tabs-nav.style-line a { + color: #aaaaaa; + -webkit-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.style-line .tabs-nav a:hover, +.tabs-nav.style-line a:hover { + color: #1489C9; +} + +.style-line .tabs-nav ul li.active, +.tabs-nav.style-line ul li.active { + border-bottom: 3px solid #1489C9; +} + +.style-line .tabs-nav .active a, +.tabs-nav.style-line .active a { + color: #303030; +} + +.style-line .tabs-nav .active a:hover, +.tabs-nav.style-line .active a:hover { + color: #1489C9; +} + +.style-line .tabs-content { + padding: 1em 2em; + border: 1px solid #e6e6e6; + border-top: none; +} + /*============================================================================== @Grid System - scss/custom/_custom.scss ==============================================================================*/ diff --git a/src/css/baseweb.min.css b/src/css/baseweb.min.css index e0d45d17..97878b18 100644 --- a/src/css/baseweb.min.css +++ b/src/css/baseweb.min.css @@ -8,4 +8,4 @@ * @url http://sebnitu.com * * Copyright (c) 2016 Sebastian Nitu (MIT Licensed) - */html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}table{font-size:1em}*,*:before,*:after{-moz-box-sizing:border-box;box-sizing:border-box}::-moz-selection{background:rgba(132,183,45,0.25);text-shadow:none}::selection{background:rgba(132,183,45,0.25);text-shadow:none}.clearfix:after{content:'';display:table;clear:both}.remove-clearfix:after{content:none;display:none;clear:none}.float-left{float:left}.float-right{float:right}html{font-size:16px}body{font-family:"Helvetica Neue","HelveticaNeue",helvetica,arial,sans-serif;font-size:16px;line-height:1.5em;font-weight:normal;color:#303030;-webkit-font-smoothing:subpixel-antialiased}h1,h2,h3,h4,h5,h6{margin:1rem 0;font-family:inherit;font-weight:bold;line-height:1.25em;color:#303030}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#1489C9;border:0 none}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#b357cd}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.25em}h4{font-size:1.1em}h5{font-size:1.1em;color:rgba(48,48,48,0.6)}h6{font-size:1.1em;color:rgba(48,48,48,0.3)}@media (min-width: 760px){h1{font-size:3em}h2{font-size:2em}h3{font-size:1.5em}h4,h5,h6{font-size:1.25em}}p{margin:1em 0}a{color:#1489C9;text-decoration:none;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:all 0.25s linear;transition:all 0.25s linear}a:hover{cursor:pointer;color:#b357cd;border-color:#b357cd}strong{font-weight:bold}em{font-style:italic}small{font-size:0.8em}mark{margin:0 2px;padding:0 5px;background:rgba(255,255,0,0.5);border-radius:3px}cite{font-style:italic}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #aaa}.text-lead{font-size:1.375em;line-height:1.4em;color:#303030;font-weight:300}.text-small{font-size:0.8em;line-height:1.5em}.text-soften{font-weight:normal;color:#aaa}.text-harden{font-weight:bold;color:#303030}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}ul,ol{margin:1em 0 1em 2em;padding:0}ul ul,ul ol,ul li,ol ul,ol ol,ol li{margin-top:0.5em;margin-bottom:0.5em}ul,ul ul ul ul{list-style:disc}ul ul{list-style:circle}ul ul ul{list-style:disc}ol,ol ol ol ol{list-style:decimal}ol ol{list-style:lower-alpha}ol ol ol{list-style:lower-roman}dl{margin:1em 0}dl dt{margin:1em 0 0;font-weight:bold;color:#303030}dl dd{margin:0 0 1em 1em}.list{list-style:none;margin:1rem 0;background:none}.list>li{margin:0;padding:1rem;background-clip:padding-box}.list>li:after{content:'';display:table;clear:both}.list.flush>li{padding-left:0;padding-right:0}.list.rowed>li{border-bottom:1px solid rgba(0,0,0,0.1)}.list.rowed>li:first-child{border-top:1px solid rgba(0,0,0,0.1)}.list.bordered{border:1px solid rgba(0,0,0,0.1)}.list.bordered>li{border-bottom:1px solid rgba(0,0,0,0.1)}.list.bordered>li:last-child{border-bottom:0 none}.list.linked>li{padding:0}.list.linked>li>a{display:block;padding:1rem;background-clip:padding-box;border:0 none}.list.linked>li>a:after{content:'';display:table;clear:both}.list.rounded{border-radius:3px}.list.rounded>li:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.list.rounded>li:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.list.striped>li:nth-of-type(odd){background-color:rgba(0,0,0,0.05)}.list.hover>li{-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.list.hover>li:hover{background-color:rgba(241,196,15,0.1)}blockquote{margin:1rem 0;padding:0.5em 1.5em;background:#f5f5f5;border-radius:3px}blockquote footer,blockquote .blockquote-footer{display:block;position:relative;margin:1rem 0;font-size:100%}@media (min-width: 760px){blockquote{padding:1em 2em}}code,pre{background:#f5f5f5;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:.875em;line-height:1.5em;border-radius:3px}code{display:inline;margin:0;padding:0;white-space:nowrap;line-height:inherit;color:#de5151;background:none}pre{margin:1.5rem 0;padding:0.75rem;overflow:auto;color:#303030}pre code{display:block;margin:0;padding:0.75rem;overflow:auto;white-space:pre;font-size:100%;color:inherit;background:none;border:0 none}pre.max-height{max-height:400px}table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;margin:1rem 0;overflow:auto}table tr{vertical-align:top}table th{color:#303030;font-weight:bold;text-align:left}.table{margin:2em 0;background:none;border-collapse:separate}.table td,.table th{padding:0.5em 0.75em}.table.rowed td,.table.rowed th{border-bottom:1px solid rgba(0,0,0,0.1)}.table.rowed thead:first-child tr:first-child td,.table.rowed thead:first-child tr:first-child th,.table.rowed tfoot:first-child tr:first-child td,.table.rowed tfoot:first-child tr:first-child th,.table.rowed tbody:first-child tr:first-child td,.table.rowed tbody:first-child tr:first-child th{border-top:1px solid rgba(0,0,0,0.1)}.table.columned td,.table.columned th{border-right:1px solid rgba(0,0,0,0.1)}.table.columned tr td:first-child,.table.columned tr th:first-child{border-left:1px solid rgba(0,0,0,0.1)}.table.bordered td,.table.bordered th{border-bottom:1px solid rgba(0,0,0,0.1)}.table.bordered thead:first-child tr:first-child td,.table.bordered thead:first-child tr:first-child th,.table.bordered tfoot:first-child tr:first-child td,.table.bordered tfoot:first-child tr:first-child th,.table.bordered tbody:first-child tr:first-child td,.table.bordered tbody:first-child tr:first-child th{border-top:1px solid rgba(0,0,0,0.1)}.table.bordered td,.table.bordered th{border-right:1px solid rgba(0,0,0,0.1)}.table.bordered tr td:first-child,.table.bordered tr th:first-child{border-left:1px solid rgba(0,0,0,0.1)}.table.condensed td,.table.condensed th{padding:0.25em 0.5em}.table.expanded td,.table.expanded th{padding:1em 1.25em}.table.rounded{border-radius:3px}.table.rounded thead:first-child tr:first-child td:first-child,.table.rounded thead:first-child tr:first-child th:first-child,.table.rounded tfoot:first-child tr:first-child td:first-child,.table.rounded tfoot:first-child tr:first-child th:first-child,.table.rounded tbody:first-child tr:first-child td:first-child,.table.rounded tbody:first-child tr:first-child th:first-child{border-top-left-radius:3px}.table.rounded thead:first-child tr:first-child td:last-child,.table.rounded thead:first-child tr:first-child th:last-child,.table.rounded tfoot:first-child tr:first-child td:last-child,.table.rounded tfoot:first-child tr:first-child th:last-child,.table.rounded tbody:first-child tr:first-child td:last-child,.table.rounded tbody:first-child tr:first-child th:last-child{border-top-right-radius:3px}.table.rounded thead:last-child tr:last-child td:first-child,.table.rounded thead:last-child tr:last-child th:first-child,.table.rounded tfoot:last-child tr:last-child td:first-child,.table.rounded tfoot:last-child tr:last-child th:first-child,.table.rounded tbody:last-child tr:last-child td:first-child,.table.rounded tbody:last-child tr:last-child th:first-child{border-bottom-left-radius:3px}.table.rounded thead:last-child tr:last-child td:last-child,.table.rounded thead:last-child tr:last-child th:last-child,.table.rounded tfoot:last-child tr:last-child td:last-child,.table.rounded tfoot:last-child tr:last-child th:last-child,.table.rounded tbody:last-child tr:last-child td:last-child,.table.rounded tbody:last-child tr:last-child th:last-child{border-bottom-right-radius:3px}.table.striped tbody tr:nth-of-type(odd) td,.table.striped tbody tr:nth-of-type(odd) th{background-color:rgba(0,0,0,0.05)}.table.striped-horizontal tbody tr:nth-of-type(odd) td,.table.striped-horizontal tbody tr:nth-of-type(odd) th{background-color:rgba(0,0,0,0.05)}.table.striped-vertical tr td:nth-of-type(odd),.table.striped-vertical tr th:nth-of-type(odd){background-color:rgba(0,0,0,0.05)}.table.hover tbody tr td{-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.table.hover tbody tr:hover td{background-color:rgba(241,196,15,0.1)}.table.valign-baseline tr{vertical-align:baseline}.table.valign-top tr{vertical-align:top}.table.valign-middle tr{vertical-align:middle}.table.valign-bottom tr{vertical-align:bottom}.table.align-left tr td,.table.align-left tr th{text-align:left}.table.align-center tr td,.table.align-center tr th{text-align:center}.table.align-right tr td,.table.align-right tr th{text-align:right}.table-responsive{margin:2em 0}.table-responsive>table{margin:0}@media (max-width: 759px){.table-responsive{overflow:auto}.table-responsive>table td,.table-responsive>table th{white-space:nowrap}}img{display:block;margin:1rem 0;max-width:100%;height:auto}img.align-center{display:block;margin-left:auto;margin-right:auto}p img.align-center{margin-top:0;margin-bottom:0}img.align-left{float:left;margin:1rem 1.5rem 1rem 0}p img.align-left{margin-top:0}img.align-right{float:right;margin:1rem 0 1rem 1.5rem}p img.align-right{margin-top:0}img.rounded{border-radius:3px}img.circle{border-radius:50%}img.polaroid{background:#fff;background-clip:padding-box;padding:0.5rem;border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 3px rgba(0,0,0,0.1)}hr{display:block;height:0;width:100%;clear:both;margin:2rem 0;padding:0;background:none;border:0 none;border-bottom:1px solid rgba(0,0,0,0.1)}hr.dotted{border-bottom:1px dotted rgba(0,0,0,0.25)}hr.dashed{border-bottom:1px dashed rgba(0,0,0,0.25)}hr.double{border-bottom:3px double rgba(0,0,0,0.1)}form{margin:2.25em 0;font-size:1em;line-height:1.5em}fieldset{margin:1.5em 0;padding:0;border:0 none}legend{display:inline-block;margin:-.75em .75em;padding:0 .75em;font-size:1.375em;line-height:1.5em;font-weight:bold;color:#303030;border:0 none}form .row{margin-bottom:.75em}form .row:last-child{margin-bottom:0}form .col{margin-bottom:.75em}form .col:last-child{margin-bottom:0}@media (min-width: 760px){form .col{margin-bottom:0}}.form-group{margin-bottom:1.5em}.form-group:last-child{margin-bottom:0}.form-group.inline{margin-right:-0.75em;margin-bottom:.75em}.form-group.inline:after{content:'';display:table;clear:both}.form-group.inline:last-child{margin-bottom:-.75em}.form-group.inline>*{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}.form-group.inline>*.float-right{float:right}.form-group.inline .form-group,.form-group.inline .input-group{display:inline-block;vertical-align:top;margin:0 .75em 0 0}.form-group.inline .form-group:last-child,.form-group.inline .input-group:last-child{margin-right:0}.form-header{margin-bottom:1.5em;color:#aaa}.form-header:last-child{margin-bottom:0}.form-header h1,.form-header h2,.form-header h3,.form-header h4,.form-header h5,.form-header h6{margin:.5em 0;font-size:1.4em;line-height:1.2em}.form-header p{margin:.5em 0;color:#aaa}.form-action{margin-bottom:1.5em}.form-action:last-child{margin-bottom:0}.form-action:after{content:'';display:table;clear:both}.form-action .button,.form-action .input-align{float:left;margin:0 .75em 0 0}.form-action .button:last-child,.form-action .input-align:last-child{margin-right:0}.form-action .button.float-right,.form-action .input-align.float-right{float:right}.form-action .input-align{margin-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.form-action.form-action-center{text-align:center}.form-action.form-action-center .button,.form-action.form-action-center .input-align{display:inline-block;float:none}.input-group{margin-bottom:1.5em}.input-group:last-child{margin-bottom:0}.input-group.inline{margin-right:-0.75em;margin-bottom:.75em}.input-group.inline:after{content:'';display:table;clear:both}.input-group.inline:last-child{margin-bottom:-.75em}.input-group.inline>*{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}.input-group.inline>*.float-right{float:right}label{display:inline-block;margin:0 0 .5em 0;font-size:1em;line-height:1.5em;font-weight:600;color:#303030}label:last-child{margin-bottom:0}label.sub{font-weight:normal}label.hide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}label.block{display:block;padding-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}label.inline{display:inline-block;padding-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.inline label.block,.inline label.inline{padding-bottom:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.input,.checkbox,.radio,.choice{position:relative;display:block;width:100%;margin:0 0 .75em 0}.input:last-child,.checkbox:last-child,.radio:last-child,.choice:last-child{margin-bottom:0}.input{padding:.75em;font-family:inherit;font-size:1em;line-height:1.5em;color:#303030;background-color:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 3px transparent,inset 0 1px 3px rgba(0,0,0,0.05);-moz-box-sizing:border-box;box-sizing:border-box;border-radius:3px;-webkit-transition:border-color 0.25s,background-color 0.25s,box-shadow 0.25s;transition:border-color 0.25s,background-color 0.25s,box-shadow 0.25s}.input::-webkit-input-placeholder{color:#aaa}.input:-moz-placeholder{color:#aaa}.input::-moz-placeholder{color:#aaa}.input:-ms-input-placeholder{color:#aaa}.input:focus{outline:none;background-color:#fff;border:1px solid #1489c9;box-shadow:0 1px 3px rgba(0,0,0,0.05),inset 0 1px 3px transparent}.input.disabled,.input[readonly],.input[disabled]{opacity:0.5;background:rgba(0,0,0,0.05)}.checkbox,.radio,.choice{cursor:pointer;color:#303030;font-weight:normal}.checkbox.disabled,.radio.disabled,.choice.disabled{opacity:0.5}.choice{padding:0.75em 0.75em 0.75em 2.25em;background:rgba(0,0,0,0.05);border:1px solid transparent;box-shadow:none;border-radius:3px}.choice input[type="checkbox"],.choice input[type="radio"]{position:absolute;top:auto;margin:5px 0 0 -20px}input[type="checkbox"],input[type="radio"]{position:relative;top:-1px;margin:0 5px 0 0}input[type="file"],input[type="range"]{display:block;margin:0 0 .75em 0}input[type="range"]{width:100%}input[type="search"]{-webkit-appearance:none}input[type="color"].input{width:3.125rem;height:3.125rem;padding:.25em}textarea.input{height:auto;max-width:100%}select.input{-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-position:100% center;background-repeat:no-repeat;padding-right:30px}select[multiple].input,select[size].input{height:auto;padding:.75em;background-image:none}.note{margin-bottom:.75em;font-size:1em;color:#aaa}.note:last-child{margin-bottom:0}.note p{margin:0 0 .75em 0}.note p:last-child{margin-bottom:0}label+.note{margin-top:0}.form-group+.note,.input-group+.note{margin-top:-.75em}.req{color:#de5151}label.inline,.button.inline,.input.inline,.checkbox.inline,.radio.inline,.choice.inline,.inline label,.inline .button,.inline .input,.inline .checkbox,.inline .radio,.inline .choice{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}label.inline.float-right,.button.inline.float-right,.input.inline.float-right,.checkbox.inline.float-right,.radio.inline.float-right,.choice.inline.float-right,.inline label.float-right,.inline .button.float-right,.inline .input.float-right,.inline .checkbox.float-right,.inline .radio.float-right,.inline .choice.float-right{float:right}.disabled input[type="file"],.disabled input[type="range"],.disabled input[type="checkbox"],.disabled input[type="radio"],.disabled .input,.disabled .checkbox,.disabled .radio,.disabled .choice,fieldset[disabled] input[type="file"],fieldset[disabled] input[type="range"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] input[type="radio"],fieldset[disabled] .input,fieldset[disabled] .checkbox,fieldset[disabled] .radio,fieldset[disabled] .choice{opacity:0.5}.disabled .input,fieldset[disabled] .input{background:rgba(0,0,0,0.05)}.input.success{border-color:#84b72d}.checkbox.success,.radio.success,.note.success{color:#668e23}.choice.success{background-color:rgba(132,183,45,0.1)}.success .input{border-color:#84b72d}.success .checkbox,.success .radio,.success .note{color:#668e23}.success .choice{background-color:rgba(132,183,45,0.1)}.input.warning{border-color:#dab10d}.checkbox.warning,.radio.warning,.note.warning{color:#c29d0b}.choice.warning{background-color:rgba(218,177,13,0.15)}.warning .input{border-color:#dab10d}.warning .checkbox,.warning .radio,.warning .note{color:#c29d0b}.warning .choice{background-color:rgba(218,177,13,0.15)}.input.error{border-color:#de5151}.checkbox.error,.radio.error,.note.error{color:#d42828}.choice.error{background-color:rgba(222,81,81,0.1)}.error .input{border-color:#de5151}.error .checkbox,.error .radio,.error .note{color:#d42828}.error .choice{background-color:rgba(222,81,81,0.1)}.input.active{border-color:#1489C9}.checkbox.active,.radio.active,.note.active{color:#0f699b}.choice.active{background-color:rgba(20,137,201,0.1)}.active .input{border-color:#1489C9}.active .checkbox,.active .radio,.active .note{color:#0f699b}.active .choice{background-color:rgba(20,137,201,0.1)}.button{cursor:pointer;display:inline-block;outline:none;margin:0;padding:0.75em 1.5em;font-family:inherit;font-size:1em;line-height:1.5em;font-weight:inherit;color:#303030;text-align:center;white-space:nowrap;vertical-align:top;background:none;box-shadow:inset 0 0 0 transparent;border:1px solid rgba(0,0,0,0.15);border-radius:3px;-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0.75s;transition-duration:0.75s;-webkit-transition-timing-function:linear;transition-timing-function:linear;color:#303030;text-shadow:none;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button:hover,.button:focus{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button:active{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button:hover,.button:focus{color:#303030;background-color:#fafafa;border-color:rgba(0,0,0,0.25)}.button:active{color:#303030;background-color:#f5f5f5;border-color:rgba(0,0,0,0.25)}.button.inverted{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#303030;background-clip:border-box;border:1px solid rgba(255,255,255,0.15)}.button.inverted:hover,.button.inverted:focus{color:#fff;background-color:#353535;border-color:rgba(255,255,255,0.25)}.button.inverted:active{color:#fff;background-color:#3a3a3a;border-color:rgba(255,255,255,0.25)}.button.clip-border{background-clip:border-box}.button.clip-padding{background-clip:padding-box}.button.default,.button-group.default .button,.button-group-wrapper.default .button{color:#303030;text-shadow:none;background-color:#efefef;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.default:hover,.button-group.default .button:hover,.button-group-wrapper.default .button:hover,.button.default:focus,.button-group.default .button:focus,.button-group-wrapper.default .button:focus{color:#303030;background-color:#eaeaea;border-color:rgba(0,0,0,0.25)}.button.default:active,.button-group.default .button:active,.button-group-wrapper.default .button:active{color:#303030;background-color:#e5e5e5;border-color:rgba(0,0,0,0.25)}.button.blue,.button.primary,.button.active,.button-group.blue .button,.button-group.primary .button,.button-group.active .button,.button-group-wrapper.blue .button,.button-group-wrapper.primary .button,.button-group-wrapper.active .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#1489C9;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.blue:hover,.button.primary:hover,.button.active:hover,.button-group.blue .button:hover,.button-group.primary .button:hover,.button-group.active .button:hover,.button-group-wrapper.blue .button:hover,.button-group-wrapper.primary .button:hover,.button-group-wrapper.active .button:hover,.button.blue:focus,.button.primary:focus,.button.active:focus,.button-group.blue .button:focus,.button-group.primary .button:focus,.button-group.active .button:focus,.button-group-wrapper.blue .button:focus,.button-group-wrapper.primary .button:focus,.button-group-wrapper.active .button:focus{color:#fff;background-color:#1279b2;border-color:rgba(0,0,0,0.25)}.button.blue:active,.button.primary:active,.button.active:active,.button-group.blue .button:active,.button-group.primary .button:active,.button-group.active .button:active,.button-group-wrapper.blue .button:active,.button-group-wrapper.primary .button:active,.button-group-wrapper.active .button:active{color:#fff;background-color:#0f699b;border-color:rgba(0,0,0,0.25)}.button.green,.button.success,.button-group.green .button,.button-group.success .button,.button-group-wrapper.green .button,.button-group-wrapper.success .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#84b72d;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.green:hover,.button.success:hover,.button-group.green .button:hover,.button-group.success .button:hover,.button-group-wrapper.green .button:hover,.button-group-wrapper.success .button:hover,.button.green:focus,.button.success:focus,.button-group.green .button:focus,.button-group.success .button:focus,.button-group-wrapper.green .button:focus,.button-group-wrapper.success .button:focus{color:#fff;background-color:#75a328;border-color:rgba(0,0,0,0.25)}.button.green:active,.button.success:active,.button-group.green .button:active,.button-group.success .button:active,.button-group-wrapper.green .button:active,.button-group-wrapper.success .button:active{color:#fff;background-color:#668e23;border-color:rgba(0,0,0,0.25)}.button.orange,.button.warning,.button-group.orange .button,.button-group.warning .button,.button-group-wrapper.orange .button,.button-group-wrapper.warning .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#e69242;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.orange:hover,.button.warning:hover,.button-group.orange .button:hover,.button-group.warning .button:hover,.button-group-wrapper.orange .button:hover,.button-group-wrapper.warning .button:hover,.button.orange:focus,.button.warning:focus,.button-group.orange .button:focus,.button-group.warning .button:focus,.button-group-wrapper.orange .button:focus,.button-group-wrapper.warning .button:focus{color:#fff;background-color:#e3852b;border-color:rgba(0,0,0,0.25)}.button.orange:active,.button.warning:active,.button-group.orange .button:active,.button-group.warning .button:active,.button-group-wrapper.orange .button:active,.button-group-wrapper.warning .button:active{color:#fff;background-color:#d8781d;border-color:rgba(0,0,0,0.25)}.button.red,.button.danger,.button-group.red .button,.button-group.danger .button,.button-group-wrapper.red .button,.button-group-wrapper.danger .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#de5151;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.red:hover,.button.danger:hover,.button-group.red .button:hover,.button-group.danger .button:hover,.button-group-wrapper.red .button:hover,.button-group-wrapper.danger .button:hover,.button.red:focus,.button.danger:focus,.button-group.red .button:focus,.button-group.danger .button:focus,.button-group-wrapper.red .button:focus,.button-group-wrapper.danger .button:focus{color:#fff;background-color:#da3c3c;border-color:rgba(0,0,0,0.25)}.button.red:active,.button.danger:active,.button-group.red .button:active,.button-group.danger .button:active,.button-group-wrapper.red .button:active,.button-group-wrapper.danger .button:active{color:#fff;background-color:#d42828;border-color:rgba(0,0,0,0.25)}.button.black,.button.secondary,.button-group.black .button,.button-group.secondary .button,.button-group-wrapper.black .button,.button-group-wrapper.secondary .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#606060;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.black:hover,.button.secondary:hover,.button-group.black .button:hover,.button-group.secondary .button:hover,.button-group-wrapper.black .button:hover,.button-group-wrapper.secondary .button:hover,.button.black:focus,.button.secondary:focus,.button-group.black .button:focus,.button-group.secondary .button:focus,.button-group-wrapper.black .button:focus,.button-group-wrapper.secondary .button:focus{color:#fff;background-color:#6d6d6d;border-color:rgba(0,0,0,0.25)}.button.black:active,.button.secondary:active,.button-group.black .button:active,.button-group.secondary .button:active,.button-group-wrapper.black .button:active,.button-group-wrapper.secondary .button:active{color:#fff;background-color:#7a7a7a;border-color:rgba(0,0,0,0.25)}.button.small,.button-group.small .button,.button-group-wrapper.small .button{padding:0.5em 1.25em;font-size:0.85em}.button.large,.button-group.large .button,.button-group-wrapper.large .button{font-size:1.4em}.button.block{display:block;width:100%}.button.clip-padding{background-clip:padding-box}.button.clip-border{background-clip:border-box}.button.close{width:1.5em;height:1.5em;padding:0;font-size:1.5em;line-height:1.5em;vertical-align:middle;background:none;border:0 none;box-shadow:none;border-radius:50%}.video-wrapper{position:relative;display:block;height:0;margin:2em 0;padding-bottom:56.25%;overflow:hidden}.video-wrapper .video-item,.video-wrapper embed,.video-wrapper iframe,.video-wrapper object,.video-wrapper video{position:absolute;top:0;left:0;width:100%;height:100%;border:0 none}.video-wrapper .ratio-16x9{padding-bottom:56.25%}.video-wrapper .ratio-4x3{padding-bottom:75%}.video-wrapper .ratio-3x2{padding-bottom:66.66667%}.button-group{vertical-align:middle;margin:0;display:inline-block;float:none;margin-right:0}.button-group:after{content:'';display:table;clear:both}.button-group>.button{position:relative;z-index:1;margin:0}.button-group>.button:hover{z-index:2}.button-group>.button:focus{z-index:3}.button-group>.button:active{z-index:4}.button-group>.button.active{z-index:5}.button-group+.button-group{margin-top:0;margin-left:.75em}.button-group>.button{width:auto}.button-group>.button{display:inline-block;float:left;border-radius:0}.button-group>.button+.button{margin-top:0;margin-left:-1px}.button-group>.button:first-child{border-top-left-radius:0;border-top-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.button-group>.button:last-child{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.button-group.block{display:block;float:none}.button-group.block+.button-group{margin-top:1em;margin-left:0}.button-group.vertical{margin-right:0}.button-group.vertical>.button{display:block;width:100%;float:none;border-radius:0}.button-group.vertical>.button+.button{margin-top:-1px;margin-left:0}.button-group.vertical>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.vertical>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.button-group.fluid{display:table;width:100%}.button-group.fluid>*{display:table-cell}.button-group>.button.is-1-of-1,.button-group.has-1>.button{width:100%}.button-group>.button.is-1-of-2,.button-group.has-2>.button{width:50%}.button-group>.button.is-1-of-3,.button-group.has-3>.button{width:33.33333%}.button-group>.button.is-1-of-4,.button-group.has-4>.button{width:25%}.button-group>.button.is-1-of-5,.button-group.has-5>.button{width:20%}.button-group>.button.is-1-of-6,.button-group.has-6>.button{width:16.66667%}.button-group>.button.is-1-of-7,.button-group.has-7>.button{width:14.28571%}.button-group>.button.is-1-of-8,.button-group.has-8>.button{width:12.5%}.button-group>.button.is-1-of-9,.button-group.has-9>.button{width:11.11111%}.button-group>.button.is-1-of-10,.button-group.has-10>.button{width:10%}.button-group>.button.is-1-of-11,.button-group.has-11>.button{width:9.09091%}.button-group>.button.is-1-of-12,.button-group.has-12>.button{width:8.33333%}.button-group.has-2,.button-group.has-margin-2{margin-right:-1px}.button-group.has-3,.button-group.has-margin-3{margin-right:-2px}.button-group.has-4,.button-group.has-margin-4{margin-right:-3px}.button-group.has-5,.button-group.has-margin-5{margin-right:-4px}.button-group.has-6,.button-group.has-margin-6{margin-right:-5px}.button-group.has-7,.button-group.has-margin-7{margin-right:-6px}.button-group.has-8,.button-group.has-margin-8{margin-right:-7px}.button-group.has-9,.button-group.has-margin-9{margin-right:-8px}.button-group.has-10,.button-group.has-margin-10{margin-right:-9px}.button-group.has-11,.button-group.has-margin-11{margin-right:-10px}.button-group.has-12,.button-group.has-margin-12{margin-right:-11px}@media (max-width: 479px){.button-group.stack-for-tiny{display:block;float:none;margin-right:0}.button-group.stack-for-tiny+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-tiny>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-tiny>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-tiny>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-tiny>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}@media (max-width: 759px){.button-group.stack-for-small{display:block;float:none;margin-right:0}.button-group.stack-for-small+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-small>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-small>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-small>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-small>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}@media (max-width: 989px){.button-group.stack-for-medium{display:block;float:none;margin-right:0}.button-group.stack-for-medium+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-medium>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-medium>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-medium>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-medium>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}.button-group-wrapper{display:block;margin:0 0 -1em -1em}.button-group-wrapper:after{content:'';display:table;clear:both}.button-group-wrapper>.button,.button-group-wrapper .button-group{float:left}.button-group-wrapper>.button.float-left,.button-group-wrapper .button-group.float-left{float:left}.button-group-wrapper>.button.float-right,.button-group-wrapper .button-group.float-right{float:right}.button-group-wrapper .button-group.block{float:none;clear:both}.button-group-wrapper>.button,.button-group-wrapper .button-group,.button-group-wrapper .button-group.block,.button-group-wrapper .button-group+.button-group,.button-group-wrapper .button-group.block+.button-group,.button-group-wrapper .button-group.stack-for-small,.button-group-wrapper .button-group.stack-for-mobile,.button-group-wrapper .button-group.stack-for-tablet,.button-group-wrapper .button-group.stack-for-small+.button-group,.button-group-wrapper .button-group.stack-for-mobile+.button-group,.button-group-wrapper .button-group.stack-for-tablet+.button-group{margin-top:0;margin-left:1em;margin-bottom:1em}.notice{margin:2em 0;padding:0.25em 1.25em;font-size:1em;line-height:1.5em;border-radius:3px;color:#303030;text-shadow:0 1px 0 rgba(255,255,255,0.25);background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.05)}.notice .close{float:right;margin:0.45em -0.25em 0 1em;color:inherit}.notice .close+*{padding-right:2.5em}.notice.inverted{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.25);background:rgba(48,48,48,0.9);border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.05)}.notice.blue,.notice.info{background:rgba(20,137,201,0.1)}.notice.blue.inverted,.inverted.notice.info{background:rgba(20,137,201,0.9)}.notice.green,.notice.success{background:rgba(132,183,45,0.1)}.notice.green.inverted,.inverted.notice.success{background:rgba(132,183,45,0.9)}.notice.yellow,.notice.warning{background:rgba(241,196,15,0.1)}.notice.yellow.inverted,.inverted.notice.warning{background:rgba(218,177,13,0.9)}.notice.orange{background:rgba(230,146,66,0.1)}.notice.orange.inverted{background:rgba(230,146,66,0.9)}.notice.red,.notice.danger{background:rgba(222,81,81,0.1)}.notice.red.inverted,.inverted.notice.danger{background:rgba(222,81,81,0.9)}.notice.violet{background:rgba(188,107,211,0.1)}.notice.violet.inverted{background:rgba(188,107,211,0.9)}.notice.small{font-size:0.9em}.notice.large{font-size:1.1em}.notice.inline{display:inline;margin:0;padding:0 0.25em;box-shadow:none}.notice.inline.inverted{border:0 none}@media (min-width: 760px){.notice.pull-left{width:45%;float:left;margin:0.5em 5% 1em 0}}@media (min-width: 760px){.notice.pull-right{width:45%;float:right;margin:0.5em 0 1em 5%}}.breadcrumb{display:block;margin:1em 0;font-size:1em}.breadcrumb ul,.breadcrumb ol{margin:0;list-style:none}.breadcrumb ul:after,.breadcrumb ol:after{content:'';display:table;clear:both}.breadcrumb li{float:left;margin:0}.breadcrumb li a{border:0 none}.breadcrumb .current{color:#aaa}.breadcrumb li:after{content:"/";padding:0 0.75em;color:rgba(0,0,0,0.25)}.breadcrumb li:last-child:after{content:none}.breadcrumb.wrapped{padding:0.5em 1em;background:#e8f3fa;border:1px solid rgba(0,0,0,0.1);border-radius:3px}.dropdown,.dropdown-content,.dropdown-menu{position:relative;display:block;width:16rem;margin:0;font-size:.75rem;line-height:1.35em;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 6px rgba(0,0,0,0.15);border-radius:3px}.dropdown{padding:0}.dropdown>.dropdown-content,.dropdown>.dropdown-menu{width:auto;margin:0;background:none;border:0 none;border-top:1px solid rgba(0,0,0,0.1);box-shadow:none;border-radius:0}.dropdown>.dropdown-content:first-child,.dropdown>.dropdown-menu:first-child{border-top:0 none;border-top-left-radius:3px;border-top-right-radius:3px}.dropdown>.dropdown-content:last-child,.dropdown>.dropdown-menu:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.dropdown-content{padding:1em}.dropdown-content>*{margin-top:0.5em;margin-bottom:0.5em}.dropdown-content>:first-child{margin-top:0}.dropdown-content>:last-child{margin-bottom:0}.dropdown-content>hr{margin:1em 0}.dropdown-content>a.block{display:block;margin:-0.5em;padding:1em;color:#303030;border:0 none;border-radius:3px}.dropdown-content>a.block:hover{background:rgba(0,0,0,0.05);color:#303030}.dropdown-content>a.block>*{margin-top:0.5em;margin-bottom:0.5em}.dropdown-content>a.block>:first-child{margin-top:0}.dropdown-content>a.block>:last-child{margin-bottom:0}.dropdown-content>.button{display:block}.dropdown-menu{list-style:none;padding:0.5em}.dropdown-menu li{position:relative;margin:0;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.dropdown-menu li:hover{background:rgba(0,0,0,0.05);background-clip:padding-box}.dropdown-menu li:hover>a{color:#303030}.dropdown-menu li.active>a{color:#aaa}.dropdown-menu li.active:hover{background:none}.dropdown-menu li:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.dropdown-menu li:last-child{border-bottom:0 none;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.dropdown-menu li a{display:block;padding:0.75em 1em;color:#303030;border:0 none}.dropdown-trigger{position:relative}.dropdown-trigger .dropdown{position:absolute;z-index:100;opacity:0;visibility:hidden;-webkit-transition:"transform, opacity, visibility";transition:"transform, opacity, visibility";-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:0.25s;transition-delay:0.25s}.dropdown-trigger:not(.on-click):hover>.dropdown,.dropdown-trigger.active>.dropdown{z-index:105;opacity:1;visibility:visible;-webkit-transition:transform,opacity,visibility;transition:transform,opacity,visibility;-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:none;transition-delay:none}.dropdown-trigger .dropdown{margin:-1px 0 0 0;top:100%;left:0;right:auto;bottom:auto;-webkit-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}.dropdown-trigger:not(.on-click):hover>.dropdown,.dropdown-trigger.active>.dropdown{margin:-1px 0 0 0;top:100%;left:0;right:auto;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.dropdown-menu{position:relative}.dropdown-menu .dropdown-menu{position:absolute;z-index:100;opacity:0;visibility:hidden;-webkit-transition:"transform, opacity, visibility";transition:"transform, opacity, visibility";-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:0.25s;transition-delay:0.25s}.dropdown-menu>li:hover>.dropdown-menu,.dropdown-menu.active>li>.dropdown-menu{z-index:105;opacity:1;visibility:visible;-webkit-transition:transform,opacity,visibility;transition:transform,opacity,visibility;-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:none;transition-delay:none}.dropdown-menu .dropdown-menu{margin:-1px 0 0 -1px;top:-0.5em;left:100%;right:auto;bottom:auto;-webkit-transform:translate3d(-1em, 0, 0);-ms-transform:translate3d(-1em, 0, 0);transform:translate3d(-1em, 0, 0)}.dropdown-menu>li:hover>.dropdown-menu,.dropdown-menu.active>li>.dropdown-menu{margin:-1px 0 0 -1px;top:-0.5em;left:100%;right:auto;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.container{width:100%;min-width:none;max-width:none;margin:0;padding:0 1.5rem}.row{width:100%;margin-left:0;margin-right:0}.col{width:100%;float:none;padding-left:0;padding-right:0}@media (min-width: 760px){.container{width:100%;min-width:none;max-width:62rem;margin:0 auto;padding:0 1.5rem}.container:after{content:'';display:table;clear:both}.row{width:auto;margin-left:-.75rem;margin-right:-.75rem}.row:after{content:'';display:table;clear:both}.col{min-height:1px;float:left;padding-left:.75rem;padding-right:.75rem}.col.col-left{float:left}.col.col-right{float:right}.col-no-inner-gutter{padding-left:0;padding-right:0}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}.prefix-1{margin-left:8.33333%}.prefix-2{margin-left:16.66667%}.prefix-3{margin-left:25%}.prefix-4{margin-left:33.33333%}.prefix-5{margin-left:41.66667%}.prefix-6{margin-left:50%}.prefix-7{margin-left:58.33333%}.prefix-8{margin-left:66.66667%}.prefix-9{margin-left:75%}.prefix-10{margin-left:83.33333%}.prefix-11{margin-left:91.66667%}.suffix-1{margin-right:8.33333%}.suffix-2{margin-right:16.66667%}.suffix-3{margin-right:25%}.suffix-4{margin-right:33.33333%}.suffix-5{margin-right:41.66667%}.suffix-6{margin-right:50%}.suffix-7{margin-right:58.33333%}.suffix-8{margin-right:66.66667%}.suffix-9{margin-right:75%}.suffix-10{margin-right:83.33333%}.suffix-11{margin-right:91.66667%}}.has-1,.has-2,.has-3,.has-4,.has-5,.has-6,.has-7,.has-8,.has-9,.has-10,.has-11,.has-12{display:block}.has-1:after,.has-2:after,.has-3:after,.has-4:after,.has-5:after,.has-6:after,.has-7:after,.has-8:after,.has-9:after,.has-10:after,.has-11:after,.has-12:after{content:'';display:table;clear:both}.is-1-of-1,.has-1>*,.is-1-of-2,.has-2>*,.is-1-of-3,.has-3>*,.is-1-of-4,.has-4>*,.is-1-of-5,.has-5>*,.is-1-of-6,.has-6>*,.is-1-of-7,.has-7>*,.is-1-of-8,.has-8>*,.is-1-of-9,.has-9>*,.is-1-of-10,.has-10>*,.is-1-of-11,.has-11>*,.is-1-of-12,.has-12>*{float:left}.is-1-of-1,.has-1>*{width:100%}.is-1-of-2,.has-2>*{width:50%}.is-1-of-3,.has-3>*{width:33.33333%}.is-1-of-4,.has-4>*{width:25%}.is-1-of-5,.has-5>*{width:20%}.is-1-of-6,.has-6>*{width:16.66667%}.is-1-of-7,.has-7>*{width:14.28571%}.is-1-of-8,.has-8>*{width:12.5%}.is-1-of-9,.has-9>*{width:11.11111%}.is-1-of-10,.has-10>*{width:10%}.is-1-of-11,.has-11>*{width:9.09091%}.is-1-of-12,.has-12>*{width:8.33333%} + */html,body{margin:0;padding:0}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}table{font-size:1em}*,*:before,*:after{-moz-box-sizing:border-box;box-sizing:border-box}::-moz-selection{background:rgba(132,183,45,0.25);text-shadow:none}::selection{background:rgba(132,183,45,0.25);text-shadow:none}.clearfix:after{content:'';display:table;clear:both}.remove-clearfix:after{content:none;display:none;clear:none}.float-left{float:left}.float-right{float:right}html{font-size:16px}body{font-family:"Helvetica Neue","HelveticaNeue",helvetica,arial,sans-serif;font-size:16px;line-height:1.5em;font-weight:normal;color:#303030;-webkit-font-smoothing:subpixel-antialiased}h1,h2,h3,h4,h5,h6{margin:1rem 0;font-family:inherit;font-weight:bold;line-height:1.25em;color:#303030}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#1489C9;border:0 none}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#b357cd}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.25em}h4{font-size:1.1em}h5{font-size:1.1em;color:rgba(48,48,48,0.6)}h6{font-size:1.1em;color:rgba(48,48,48,0.3)}@media (min-width: 760px){h1{font-size:3em}h2{font-size:2em}h3{font-size:1.5em}h4,h5,h6{font-size:1.25em}}p{margin:1em 0}a{color:#1489C9;text-decoration:none;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:all 0.25s linear;transition:all 0.25s linear}a:hover{cursor:pointer;color:#b357cd;border-color:#b357cd}strong{font-weight:bold}em{font-style:italic}small{font-size:0.8em}mark{margin:0 2px;padding:0 5px;background:rgba(255,255,0,0.5);border-radius:3px}cite{font-style:italic}abbr[title],abbr[data-original-title]{cursor:help;border-bottom:1px dotted #aaa}.text-lead{font-size:1.375em;line-height:1.4em;color:#303030;font-weight:300}.text-small{font-size:0.8em;line-height:1.5em}.text-soften{font-weight:normal;color:#aaa}.text-harden{font-weight:bold;color:#303030}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}ul,ol{margin:1em 0 1em 2em;padding:0}ul ul,ul ol,ul li,ol ul,ol ol,ol li{margin-top:0.5em;margin-bottom:0.5em}ul,ul ul ul ul{list-style:disc}ul ul{list-style:circle}ul ul ul{list-style:disc}ol,ol ol ol ol{list-style:decimal}ol ol{list-style:lower-alpha}ol ol ol{list-style:lower-roman}dl{margin:1em 0}dl dt{margin:1em 0 0;font-weight:bold;color:#303030}dl dd{margin:0 0 1em 1em}.list{list-style:none;margin:1rem 0;background:none}.list>li{margin:0;padding:1rem;background-clip:padding-box}.list>li:after{content:'';display:table;clear:both}.list.flush>li{padding-left:0;padding-right:0}.list.rowed>li{border-bottom:1px solid rgba(0,0,0,0.1)}.list.rowed>li:first-child{border-top:1px solid rgba(0,0,0,0.1)}.list.bordered{border:1px solid rgba(0,0,0,0.1)}.list.bordered>li{border-bottom:1px solid rgba(0,0,0,0.1)}.list.bordered>li:last-child{border-bottom:0 none}.list.linked>li{padding:0}.list.linked>li>a{display:block;padding:1rem;background-clip:padding-box;border:0 none}.list.linked>li>a:after{content:'';display:table;clear:both}.list.rounded{border-radius:3px}.list.rounded>li:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.list.rounded>li:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.list.striped>li:nth-of-type(odd){background-color:rgba(0,0,0,0.05)}.list.hover>li{-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.list.hover>li:hover{background-color:rgba(241,196,15,0.1)}blockquote{margin:1rem 0;padding:0.5em 1.5em;background:#f5f5f5;border-radius:3px}blockquote footer,blockquote .blockquote-footer{display:block;position:relative;margin:1rem 0;font-size:100%}@media (min-width: 760px){blockquote{padding:1em 2em}}code,pre{background:#f5f5f5;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:.875em;line-height:1.5em;border-radius:3px}code{display:inline;margin:0;padding:0;white-space:nowrap;line-height:inherit;color:#de5151;background:none}pre{margin:1.5rem 0;padding:0.75rem;overflow:auto;color:#303030}pre code{display:block;margin:0;padding:0.75rem;overflow:auto;white-space:pre;font-size:100%;color:inherit;background:none;border:0 none}pre.max-height{max-height:400px}table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%;margin:1rem 0;overflow:auto}table tr{vertical-align:top}table th{color:#303030;font-weight:bold;text-align:left}.table{margin:2em 0;background:none;border-collapse:separate}.table td,.table th{padding:0.5em 0.75em}.table.rowed td,.table.rowed th{border-bottom:1px solid rgba(0,0,0,0.1)}.table.rowed thead:first-child tr:first-child td,.table.rowed thead:first-child tr:first-child th,.table.rowed tfoot:first-child tr:first-child td,.table.rowed tfoot:first-child tr:first-child th,.table.rowed tbody:first-child tr:first-child td,.table.rowed tbody:first-child tr:first-child th{border-top:1px solid rgba(0,0,0,0.1)}.table.columned td,.table.columned th{border-right:1px solid rgba(0,0,0,0.1)}.table.columned tr td:first-child,.table.columned tr th:first-child{border-left:1px solid rgba(0,0,0,0.1)}.table.bordered td,.table.bordered th{border-bottom:1px solid rgba(0,0,0,0.1)}.table.bordered thead:first-child tr:first-child td,.table.bordered thead:first-child tr:first-child th,.table.bordered tfoot:first-child tr:first-child td,.table.bordered tfoot:first-child tr:first-child th,.table.bordered tbody:first-child tr:first-child td,.table.bordered tbody:first-child tr:first-child th{border-top:1px solid rgba(0,0,0,0.1)}.table.bordered td,.table.bordered th{border-right:1px solid rgba(0,0,0,0.1)}.table.bordered tr td:first-child,.table.bordered tr th:first-child{border-left:1px solid rgba(0,0,0,0.1)}.table.condensed td,.table.condensed th{padding:0.25em 0.5em}.table.expanded td,.table.expanded th{padding:1em 1.25em}.table.rounded{border-radius:3px}.table.rounded thead:first-child tr:first-child td:first-child,.table.rounded thead:first-child tr:first-child th:first-child,.table.rounded tfoot:first-child tr:first-child td:first-child,.table.rounded tfoot:first-child tr:first-child th:first-child,.table.rounded tbody:first-child tr:first-child td:first-child,.table.rounded tbody:first-child tr:first-child th:first-child{border-top-left-radius:3px}.table.rounded thead:first-child tr:first-child td:last-child,.table.rounded thead:first-child tr:first-child th:last-child,.table.rounded tfoot:first-child tr:first-child td:last-child,.table.rounded tfoot:first-child tr:first-child th:last-child,.table.rounded tbody:first-child tr:first-child td:last-child,.table.rounded tbody:first-child tr:first-child th:last-child{border-top-right-radius:3px}.table.rounded thead:last-child tr:last-child td:first-child,.table.rounded thead:last-child tr:last-child th:first-child,.table.rounded tfoot:last-child tr:last-child td:first-child,.table.rounded tfoot:last-child tr:last-child th:first-child,.table.rounded tbody:last-child tr:last-child td:first-child,.table.rounded tbody:last-child tr:last-child th:first-child{border-bottom-left-radius:3px}.table.rounded thead:last-child tr:last-child td:last-child,.table.rounded thead:last-child tr:last-child th:last-child,.table.rounded tfoot:last-child tr:last-child td:last-child,.table.rounded tfoot:last-child tr:last-child th:last-child,.table.rounded tbody:last-child tr:last-child td:last-child,.table.rounded tbody:last-child tr:last-child th:last-child{border-bottom-right-radius:3px}.table.striped tbody tr:nth-of-type(odd) td,.table.striped tbody tr:nth-of-type(odd) th{background-color:rgba(0,0,0,0.05)}.table.striped-horizontal tbody tr:nth-of-type(odd) td,.table.striped-horizontal tbody tr:nth-of-type(odd) th{background-color:rgba(0,0,0,0.05)}.table.striped-vertical tr td:nth-of-type(odd),.table.striped-vertical tr th:nth-of-type(odd){background-color:rgba(0,0,0,0.05)}.table.hover tbody tr td{-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.table.hover tbody tr:hover td{background-color:rgba(241,196,15,0.1)}.table.valign-baseline tr{vertical-align:baseline}.table.valign-top tr{vertical-align:top}.table.valign-middle tr{vertical-align:middle}.table.valign-bottom tr{vertical-align:bottom}.table.align-left tr td,.table.align-left tr th{text-align:left}.table.align-center tr td,.table.align-center tr th{text-align:center}.table.align-right tr td,.table.align-right tr th{text-align:right}.table-responsive{margin:2em 0}.table-responsive>table{margin:0}@media (max-width: 759px){.table-responsive{overflow:auto}.table-responsive>table td,.table-responsive>table th{white-space:nowrap}}img{display:block;margin:1rem 0;max-width:100%;height:auto}img.align-center{display:block;margin-left:auto;margin-right:auto}p img.align-center{margin-top:0;margin-bottom:0}img.align-left{float:left;margin:1rem 1.5rem 1rem 0}p img.align-left{margin-top:0}img.align-right{float:right;margin:1rem 0 1rem 1.5rem}p img.align-right{margin-top:0}img.rounded{border-radius:3px}img.circle{border-radius:50%}img.polaroid{background:#fff;background-clip:padding-box;padding:0.5rem;border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 3px rgba(0,0,0,0.1)}hr{display:block;height:0;width:100%;clear:both;margin:2rem 0;padding:0;background:none;border:0 none;border-bottom:1px solid rgba(0,0,0,0.1)}hr.dotted{border-bottom:1px dotted rgba(0,0,0,0.25)}hr.dashed{border-bottom:1px dashed rgba(0,0,0,0.25)}hr.double{border-bottom:3px double rgba(0,0,0,0.1)}form{margin:2.25em 0;font-size:1em;line-height:1.5em}fieldset{margin:1.5em 0;padding:0;border:0 none}legend{display:inline-block;margin:-.75em .75em;padding:0 .75em;font-size:1.375em;line-height:1.5em;font-weight:bold;color:#303030;border:0 none}form .row{margin-bottom:.75em}form .row:last-child{margin-bottom:0}form .col{margin-bottom:.75em}form .col:last-child{margin-bottom:0}@media (min-width: 760px){form .col{margin-bottom:0}}.form-group{margin-bottom:1.5em}.form-group:last-child{margin-bottom:0}.form-group.inline{margin-right:-0.75em;margin-bottom:.75em}.form-group.inline:after{content:'';display:table;clear:both}.form-group.inline:last-child{margin-bottom:-.75em}.form-group.inline>*{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}.form-group.inline>*.float-right{float:right}.form-group.inline .form-group,.form-group.inline .input-group{display:inline-block;vertical-align:top;margin:0 .75em 0 0}.form-group.inline .form-group:last-child,.form-group.inline .input-group:last-child{margin-right:0}.form-header{margin-bottom:1.5em;color:#aaa}.form-header:last-child{margin-bottom:0}.form-header h1,.form-header h2,.form-header h3,.form-header h4,.form-header h5,.form-header h6{margin:.5em 0;font-size:1.4em;line-height:1.2em}.form-header p{margin:.5em 0;color:#aaa}.form-action{margin-bottom:1.5em}.form-action:last-child{margin-bottom:0}.form-action:after{content:'';display:table;clear:both}.form-action .button,.form-action .input-align{float:left;margin:0 .75em 0 0}.form-action .button:last-child,.form-action .input-align:last-child{margin-right:0}.form-action .button.float-right,.form-action .input-align.float-right{float:right}.form-action .input-align{margin-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.form-action.form-action-center{text-align:center}.form-action.form-action-center .button,.form-action.form-action-center .input-align{display:inline-block;float:none}.input-group{margin-bottom:1.5em}.input-group:last-child{margin-bottom:0}.input-group.inline{margin-right:-0.75em;margin-bottom:.75em}.input-group.inline:after{content:'';display:table;clear:both}.input-group.inline:last-child{margin-bottom:-.75em}.input-group.inline>*{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}.input-group.inline>*.float-right{float:right}label{display:inline-block;margin:0 0 .5em 0;font-size:1em;line-height:1.5em;font-weight:600;color:#303030}label:last-child{margin-bottom:0}label.sub{font-weight:normal}label.hide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}label.block{display:block;padding-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}label.inline{display:inline-block;padding-top:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.inline label.block,.inline label.inline{padding-bottom:0.75em;border-top:1px solid rgba(0,0,0,0.2);border-color:transparent}.input,.checkbox,.radio,.choice{position:relative;display:block;width:100%;margin:0 0 .75em 0}.input:last-child,.checkbox:last-child,.radio:last-child,.choice:last-child{margin-bottom:0}.input{padding:.75em;font-family:inherit;font-size:1em;line-height:1.5em;color:#303030;background-color:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.2);box-shadow:0 1px 3px transparent,inset 0 1px 3px rgba(0,0,0,0.05);-moz-box-sizing:border-box;box-sizing:border-box;border-radius:3px;-webkit-transition:border-color 0.25s,background-color 0.25s,box-shadow 0.25s;transition:border-color 0.25s,background-color 0.25s,box-shadow 0.25s}.input::-webkit-input-placeholder{color:#aaa}.input:-moz-placeholder{color:#aaa}.input::-moz-placeholder{color:#aaa}.input:-ms-input-placeholder{color:#aaa}.input:focus{outline:none;background-color:#fff;border:1px solid #1489c9;box-shadow:0 1px 3px rgba(0,0,0,0.05),inset 0 1px 3px transparent}.input.disabled,.input[readonly],.input[disabled]{opacity:0.5;background:rgba(0,0,0,0.05)}.checkbox,.radio,.choice{cursor:pointer;color:#303030;font-weight:normal}.checkbox.disabled,.radio.disabled,.choice.disabled{opacity:0.5}.choice{padding:0.75em 0.75em 0.75em 2.25em;background:rgba(0,0,0,0.05);border:1px solid transparent;box-shadow:none;border-radius:3px}.choice input[type="checkbox"],.choice input[type="radio"]{position:absolute;top:auto;margin:5px 0 0 -20px}input[type="checkbox"],input[type="radio"]{position:relative;top:-1px;margin:0 5px 0 0}input[type="file"],input[type="range"]{display:block;margin:0 0 .75em 0}input[type="range"]{width:100%}input[type="search"]{-webkit-appearance:none}input[type="color"].input{width:3.125rem;height:3.125rem;padding:.25em}textarea.input{height:auto;max-width:100%}select.input{-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-position:100% center;background-repeat:no-repeat;padding-right:30px}select[multiple].input,select[size].input{height:auto;padding:.75em;background-image:none}.note{margin-bottom:.75em;font-size:1em;color:#aaa}.note:last-child{margin-bottom:0}.note p{margin:0 0 .75em 0}.note p:last-child{margin-bottom:0}label+.note{margin-top:0}.form-group+.note,.input-group+.note{margin-top:-.75em}.req{color:#de5151}label.inline,.button.inline,.input.inline,.checkbox.inline,.radio.inline,.choice.inline,.inline label,.inline .button,.inline .input,.inline .checkbox,.inline .radio,.inline .choice{float:left;width:auto;margin-right:0.75em;margin-bottom:.75em}label.inline.float-right,.button.inline.float-right,.input.inline.float-right,.checkbox.inline.float-right,.radio.inline.float-right,.choice.inline.float-right,.inline label.float-right,.inline .button.float-right,.inline .input.float-right,.inline .checkbox.float-right,.inline .radio.float-right,.inline .choice.float-right{float:right}.disabled input[type="file"],.disabled input[type="range"],.disabled input[type="checkbox"],.disabled input[type="radio"],.disabled .input,.disabled .checkbox,.disabled .radio,.disabled .choice,fieldset[disabled] input[type="file"],fieldset[disabled] input[type="range"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] input[type="radio"],fieldset[disabled] .input,fieldset[disabled] .checkbox,fieldset[disabled] .radio,fieldset[disabled] .choice{opacity:0.5}.disabled .input,fieldset[disabled] .input{background:rgba(0,0,0,0.05)}.input.success{border-color:#84b72d}.checkbox.success,.radio.success,.note.success{color:#668e23}.choice.success{background-color:rgba(132,183,45,0.1)}.success .input{border-color:#84b72d}.success .checkbox,.success .radio,.success .note{color:#668e23}.success .choice{background-color:rgba(132,183,45,0.1)}.input.warning{border-color:#dab10d}.checkbox.warning,.radio.warning,.note.warning{color:#c29d0b}.choice.warning{background-color:rgba(218,177,13,0.15)}.warning .input{border-color:#dab10d}.warning .checkbox,.warning .radio,.warning .note{color:#c29d0b}.warning .choice{background-color:rgba(218,177,13,0.15)}.input.error{border-color:#de5151}.checkbox.error,.radio.error,.note.error{color:#d42828}.choice.error{background-color:rgba(222,81,81,0.1)}.error .input{border-color:#de5151}.error .checkbox,.error .radio,.error .note{color:#d42828}.error .choice{background-color:rgba(222,81,81,0.1)}.input.active{border-color:#1489C9}.checkbox.active,.radio.active,.note.active{color:#0f699b}.choice.active{background-color:rgba(20,137,201,0.1)}.active .input{border-color:#1489C9}.active .checkbox,.active .radio,.active .note{color:#0f699b}.active .choice{background-color:rgba(20,137,201,0.1)}.button{cursor:pointer;display:inline-block;outline:none;margin:0;padding:0.75em 1.5em;font-family:inherit;font-size:1em;line-height:1.5em;font-weight:inherit;color:#303030;text-align:center;white-space:nowrap;vertical-align:top;background:none;box-shadow:inset 0 0 0 transparent;border:1px solid rgba(0,0,0,0.15);border-radius:3px;-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0.75s;transition-duration:0.75s;-webkit-transition-timing-function:linear;transition-timing-function:linear;color:#303030;text-shadow:none;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button:hover,.button:focus{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:.1s;transition-duration:.1s;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button:active{color:#303030;background:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);border-color:rgba(0,0,0,0.25);-webkit-transition-property:color,background-color,box-shadow,border-color;transition-property:color,background-color,box-shadow,border-color;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:linear;transition-timing-function:linear}.button:hover,.button:focus{color:#303030;background-color:#fafafa;border-color:rgba(0,0,0,0.25)}.button:active{color:#303030;background-color:#f5f5f5;border-color:rgba(0,0,0,0.25)}.button.inverted{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#303030;background-clip:border-box;border:1px solid rgba(255,255,255,0.15)}.button.inverted:hover,.button.inverted:focus{color:#fff;background-color:#353535;border-color:rgba(255,255,255,0.25)}.button.inverted:active{color:#fff;background-color:#3a3a3a;border-color:rgba(255,255,255,0.25)}.button.clip-border{background-clip:border-box}.button.clip-padding{background-clip:padding-box}.button.default,.button-group.default .button,.button-group-wrapper.default .button{color:#303030;text-shadow:none;background-color:#efefef;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.default:hover,.button-group.default .button:hover,.button-group-wrapper.default .button:hover,.button.default:focus,.button-group.default .button:focus,.button-group-wrapper.default .button:focus{color:#303030;background-color:#eaeaea;border-color:rgba(0,0,0,0.25)}.button.default:active,.button-group.default .button:active,.button-group-wrapper.default .button:active{color:#303030;background-color:#e5e5e5;border-color:rgba(0,0,0,0.25)}.button.blue,.button.primary,.button.active,.button-group.blue .button,.button-group.primary .button,.button-group.active .button,.button-group-wrapper.blue .button,.button-group-wrapper.primary .button,.button-group-wrapper.active .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#1489C9;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.blue:hover,.button.primary:hover,.button.active:hover,.button-group.blue .button:hover,.button-group.primary .button:hover,.button-group.active .button:hover,.button-group-wrapper.blue .button:hover,.button-group-wrapper.primary .button:hover,.button-group-wrapper.active .button:hover,.button.blue:focus,.button.primary:focus,.button.active:focus,.button-group.blue .button:focus,.button-group.primary .button:focus,.button-group.active .button:focus,.button-group-wrapper.blue .button:focus,.button-group-wrapper.primary .button:focus,.button-group-wrapper.active .button:focus{color:#fff;background-color:#1279b2;border-color:rgba(0,0,0,0.25)}.button.blue:active,.button.primary:active,.button.active:active,.button-group.blue .button:active,.button-group.primary .button:active,.button-group.active .button:active,.button-group-wrapper.blue .button:active,.button-group-wrapper.primary .button:active,.button-group-wrapper.active .button:active{color:#fff;background-color:#0f699b;border-color:rgba(0,0,0,0.25)}.button.green,.button.success,.button-group.green .button,.button-group.success .button,.button-group-wrapper.green .button,.button-group-wrapper.success .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#84b72d;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.green:hover,.button.success:hover,.button-group.green .button:hover,.button-group.success .button:hover,.button-group-wrapper.green .button:hover,.button-group-wrapper.success .button:hover,.button.green:focus,.button.success:focus,.button-group.green .button:focus,.button-group.success .button:focus,.button-group-wrapper.green .button:focus,.button-group-wrapper.success .button:focus{color:#fff;background-color:#75a328;border-color:rgba(0,0,0,0.25)}.button.green:active,.button.success:active,.button-group.green .button:active,.button-group.success .button:active,.button-group-wrapper.green .button:active,.button-group-wrapper.success .button:active{color:#fff;background-color:#668e23;border-color:rgba(0,0,0,0.25)}.button.orange,.button.warning,.button-group.orange .button,.button-group.warning .button,.button-group-wrapper.orange .button,.button-group-wrapper.warning .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#e69242;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.orange:hover,.button.warning:hover,.button-group.orange .button:hover,.button-group.warning .button:hover,.button-group-wrapper.orange .button:hover,.button-group-wrapper.warning .button:hover,.button.orange:focus,.button.warning:focus,.button-group.orange .button:focus,.button-group.warning .button:focus,.button-group-wrapper.orange .button:focus,.button-group-wrapper.warning .button:focus{color:#fff;background-color:#e3852b;border-color:rgba(0,0,0,0.25)}.button.orange:active,.button.warning:active,.button-group.orange .button:active,.button-group.warning .button:active,.button-group-wrapper.orange .button:active,.button-group-wrapper.warning .button:active{color:#fff;background-color:#d8781d;border-color:rgba(0,0,0,0.25)}.button.red,.button.danger,.button-group.red .button,.button-group.danger .button,.button-group-wrapper.red .button,.button-group-wrapper.danger .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#de5151;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.red:hover,.button.danger:hover,.button-group.red .button:hover,.button-group.danger .button:hover,.button-group-wrapper.red .button:hover,.button-group-wrapper.danger .button:hover,.button.red:focus,.button.danger:focus,.button-group.red .button:focus,.button-group.danger .button:focus,.button-group-wrapper.red .button:focus,.button-group-wrapper.danger .button:focus{color:#fff;background-color:#da3c3c;border-color:rgba(0,0,0,0.25)}.button.red:active,.button.danger:active,.button-group.red .button:active,.button-group.danger .button:active,.button-group-wrapper.red .button:active,.button-group-wrapper.danger .button:active{color:#fff;background-color:#d42828;border-color:rgba(0,0,0,0.25)}.button.black,.button.secondary,.button-group.black .button,.button-group.secondary .button,.button-group-wrapper.black .button,.button-group-wrapper.secondary .button{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.25);background-color:#606060;background-clip:border-box;border:1px solid rgba(0,0,0,0.15)}.button.black:hover,.button.secondary:hover,.button-group.black .button:hover,.button-group.secondary .button:hover,.button-group-wrapper.black .button:hover,.button-group-wrapper.secondary .button:hover,.button.black:focus,.button.secondary:focus,.button-group.black .button:focus,.button-group.secondary .button:focus,.button-group-wrapper.black .button:focus,.button-group-wrapper.secondary .button:focus{color:#fff;background-color:#6d6d6d;border-color:rgba(0,0,0,0.25)}.button.black:active,.button.secondary:active,.button-group.black .button:active,.button-group.secondary .button:active,.button-group-wrapper.black .button:active,.button-group-wrapper.secondary .button:active{color:#fff;background-color:#7a7a7a;border-color:rgba(0,0,0,0.25)}.button.small,.button-group.small .button,.button-group-wrapper.small .button{padding:0.5em 1.25em;font-size:0.85em}.button.large,.button-group.large .button,.button-group-wrapper.large .button{font-size:1.4em}.button.block{display:block;width:100%}.button.clip-padding{background-clip:padding-box}.button.clip-border{background-clip:border-box}.button.close{width:1.5em;height:1.5em;padding:0;font-size:1.5em;line-height:1.5em;vertical-align:middle;background:none;border:0 none;box-shadow:none;border-radius:50%}.video-wrapper{position:relative;display:block;height:0;margin:2em 0;padding-bottom:56.25%;overflow:hidden}.video-wrapper .video-item,.video-wrapper embed,.video-wrapper iframe,.video-wrapper object,.video-wrapper video{position:absolute;top:0;left:0;width:100%;height:100%;border:0 none}.video-wrapper .ratio-16x9{padding-bottom:56.25%}.video-wrapper .ratio-4x3{padding-bottom:75%}.video-wrapper .ratio-3x2{padding-bottom:66.66667%}.button-group{vertical-align:middle;margin:0;display:inline-block;float:none;margin-right:0}.button-group:after{content:'';display:table;clear:both}.button-group>.button{position:relative;z-index:1;margin:0}.button-group>.button:hover{z-index:2}.button-group>.button:focus{z-index:3}.button-group>.button:active{z-index:4}.button-group>.button.active{z-index:5}.button-group+.button-group{margin-top:0;margin-left:.75em}.button-group>.button{width:auto}.button-group>.button{display:inline-block;float:left;border-radius:0}.button-group>.button+.button{margin-top:0;margin-left:-1px}.button-group>.button:first-child{border-top-left-radius:0;border-top-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.button-group>.button:last-child{border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.button-group.block{display:block;float:none}.button-group.block+.button-group{margin-top:1em;margin-left:0}.button-group.vertical{margin-right:0}.button-group.vertical>.button{display:block;width:100%;float:none;border-radius:0}.button-group.vertical>.button+.button{margin-top:-1px;margin-left:0}.button-group.vertical>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.vertical>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.button-group.fluid{display:table;width:100%}.button-group.fluid>*{display:table-cell}.button-group>.button.is-1-of-1,.button-group.has-1>.button{width:100%}.button-group>.button.is-1-of-2,.button-group.has-2>.button{width:50%}.button-group>.button.is-1-of-3,.button-group.has-3>.button{width:33.33333%}.button-group>.button.is-1-of-4,.button-group.has-4>.button{width:25%}.button-group>.button.is-1-of-5,.button-group.has-5>.button{width:20%}.button-group>.button.is-1-of-6,.button-group.has-6>.button{width:16.66667%}.button-group>.button.is-1-of-7,.button-group.has-7>.button{width:14.28571%}.button-group>.button.is-1-of-8,.button-group.has-8>.button{width:12.5%}.button-group>.button.is-1-of-9,.button-group.has-9>.button{width:11.11111%}.button-group>.button.is-1-of-10,.button-group.has-10>.button{width:10%}.button-group>.button.is-1-of-11,.button-group.has-11>.button{width:9.09091%}.button-group>.button.is-1-of-12,.button-group.has-12>.button{width:8.33333%}.button-group.has-2,.button-group.has-margin-2{margin-right:-1px}.button-group.has-3,.button-group.has-margin-3{margin-right:-2px}.button-group.has-4,.button-group.has-margin-4{margin-right:-3px}.button-group.has-5,.button-group.has-margin-5{margin-right:-4px}.button-group.has-6,.button-group.has-margin-6{margin-right:-5px}.button-group.has-7,.button-group.has-margin-7{margin-right:-6px}.button-group.has-8,.button-group.has-margin-8{margin-right:-7px}.button-group.has-9,.button-group.has-margin-9{margin-right:-8px}.button-group.has-10,.button-group.has-margin-10{margin-right:-9px}.button-group.has-11,.button-group.has-margin-11{margin-right:-10px}.button-group.has-12,.button-group.has-margin-12{margin-right:-11px}@media (max-width: 479px){.button-group.stack-for-tiny{display:block;float:none;margin-right:0}.button-group.stack-for-tiny+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-tiny>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-tiny>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-tiny>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-tiny>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}@media (max-width: 759px){.button-group.stack-for-small{display:block;float:none;margin-right:0}.button-group.stack-for-small+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-small>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-small>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-small>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-small>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}@media (max-width: 989px){.button-group.stack-for-medium{display:block;float:none;margin-right:0}.button-group.stack-for-medium+.button-group{margin-top:1em;margin-left:0}.button-group.stack-for-medium>.button{display:block;width:100%;float:none;border-radius:0}.button-group.stack-for-medium>.button+.button{margin-top:-1px;margin-left:0}.button-group.stack-for-medium>.button:first-child{border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px}.button-group.stack-for-medium>.button:last-child{border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}}.button-group-wrapper{display:block;margin:0 0 -1em -1em}.button-group-wrapper:after{content:'';display:table;clear:both}.button-group-wrapper>.button,.button-group-wrapper .button-group{float:left}.button-group-wrapper>.button.float-left,.button-group-wrapper .button-group.float-left{float:left}.button-group-wrapper>.button.float-right,.button-group-wrapper .button-group.float-right{float:right}.button-group-wrapper .button-group.block{float:none;clear:both}.button-group-wrapper>.button,.button-group-wrapper .button-group,.button-group-wrapper .button-group.block,.button-group-wrapper .button-group+.button-group,.button-group-wrapper .button-group.block+.button-group,.button-group-wrapper .button-group.stack-for-small,.button-group-wrapper .button-group.stack-for-mobile,.button-group-wrapper .button-group.stack-for-tablet,.button-group-wrapper .button-group.stack-for-small+.button-group,.button-group-wrapper .button-group.stack-for-mobile+.button-group,.button-group-wrapper .button-group.stack-for-tablet+.button-group{margin-top:0;margin-left:1em;margin-bottom:1em}.notice{margin:2em 0;padding:0.25em 1.25em;font-size:1em;line-height:1.5em;border-radius:3px;color:#303030;text-shadow:0 1px 0 rgba(255,255,255,0.25);background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.05)}.notice .close{float:right;margin:0.45em -0.25em 0 1em;color:inherit}.notice .close+*{padding-right:2.5em}.notice.inverted{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.25);background:rgba(48,48,48,0.9);border:1px solid rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.05)}.notice.blue,.notice.info{background:rgba(20,137,201,0.1)}.notice.blue.inverted,.inverted.notice.info{background:rgba(20,137,201,0.9)}.notice.green,.notice.success{background:rgba(132,183,45,0.1)}.notice.green.inverted,.inverted.notice.success{background:rgba(132,183,45,0.9)}.notice.yellow,.notice.warning{background:rgba(241,196,15,0.1)}.notice.yellow.inverted,.inverted.notice.warning{background:rgba(218,177,13,0.9)}.notice.orange{background:rgba(230,146,66,0.1)}.notice.orange.inverted{background:rgba(230,146,66,0.9)}.notice.red,.notice.danger{background:rgba(222,81,81,0.1)}.notice.red.inverted,.inverted.notice.danger{background:rgba(222,81,81,0.9)}.notice.violet{background:rgba(188,107,211,0.1)}.notice.violet.inverted{background:rgba(188,107,211,0.9)}.notice.small{font-size:0.9em}.notice.large{font-size:1.1em}.notice.inline{display:inline;margin:0;padding:0 0.25em;box-shadow:none}.notice.inline.inverted{border:0 none}@media (min-width: 760px){.notice.pull-left{width:45%;float:left;margin:0.5em 5% 1em 0}}@media (min-width: 760px){.notice.pull-right{width:45%;float:right;margin:0.5em 0 1em 5%}}.breadcrumb{display:block;margin:1em 0;font-size:1em}.breadcrumb ul,.breadcrumb ol{margin:0;list-style:none}.breadcrumb ul:after,.breadcrumb ol:after{content:'';display:table;clear:both}.breadcrumb li{float:left;margin:0}.breadcrumb li a{border:0 none}.breadcrumb .current{color:#aaa}.breadcrumb li:after{content:"/";padding:0 0.75em;color:rgba(0,0,0,0.25)}.breadcrumb li:last-child:after{content:none}.breadcrumb.wrapped{padding:0.5em 1em;background:#e8f3fa;border:1px solid rgba(0,0,0,0.1);border-radius:3px}.dropdown,.dropdown-content,.dropdown-menu{position:relative;display:block;width:16rem;margin:0;font-size:.75rem;line-height:1.35em;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,0.1);box-shadow:0 2px 6px rgba(0,0,0,0.15);border-radius:3px}.dropdown{padding:0}.dropdown>.dropdown-content,.dropdown>.dropdown-menu{width:auto;margin:0;background:none;border:0 none;border-top:1px solid rgba(0,0,0,0.1);box-shadow:none;border-radius:0}.dropdown>.dropdown-content:first-child,.dropdown>.dropdown-menu:first-child{border-top:0 none;border-top-left-radius:3px;border-top-right-radius:3px}.dropdown>.dropdown-content:last-child,.dropdown>.dropdown-menu:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.dropdown-content{padding:1em}.dropdown-content>*{margin-top:0.5em;margin-bottom:0.5em}.dropdown-content>:first-child{margin-top:0}.dropdown-content>:last-child{margin-bottom:0}.dropdown-content>hr{margin:1em 0}.dropdown-content>a.block{display:block;margin:-0.5em;padding:1em;color:#303030;border:0 none;border-radius:3px}.dropdown-content>a.block:hover{background:rgba(0,0,0,0.05);color:#303030}.dropdown-content>a.block>*{margin-top:0.5em;margin-bottom:0.5em}.dropdown-content>a.block>:first-child{margin-top:0}.dropdown-content>a.block>:last-child{margin-bottom:0}.dropdown-content>.button{display:block}.dropdown-menu{list-style:none;padding:0.5em}.dropdown-menu li{position:relative;margin:0;border-bottom:1px solid rgba(0,0,0,0.1);-webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear}.dropdown-menu li:hover{background:rgba(0,0,0,0.05);background-clip:padding-box}.dropdown-menu li:hover>a{color:#303030}.dropdown-menu li.active>a{color:#aaa}.dropdown-menu li.active:hover{background:none}.dropdown-menu li:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.dropdown-menu li:last-child{border-bottom:0 none;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.dropdown-menu li a{display:block;padding:0.75em 1em;color:#303030;border:0 none}.dropdown-trigger{position:relative}.dropdown-trigger .dropdown{position:absolute;z-index:100;opacity:0;visibility:hidden;-webkit-transition:"transform, opacity, visibility";transition:"transform, opacity, visibility";-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:0.25s;transition-delay:0.25s}.dropdown-trigger:not(.on-click):hover>.dropdown,.dropdown-trigger.active>.dropdown{z-index:105;opacity:1;visibility:visible;-webkit-transition:transform,opacity,visibility;transition:transform,opacity,visibility;-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:none;transition-delay:none}.dropdown-trigger .dropdown{margin:-1px 0 0 0;top:100%;left:0;right:auto;bottom:auto;-webkit-transform:translate3d(0, -1em, 0);-ms-transform:translate3d(0, -1em, 0);transform:translate3d(0, -1em, 0)}.dropdown-trigger:not(.on-click):hover>.dropdown,.dropdown-trigger.active>.dropdown{margin:-1px 0 0 0;top:100%;left:0;right:auto;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.dropdown-menu{position:relative}.dropdown-menu .dropdown-menu{position:absolute;z-index:100;opacity:0;visibility:hidden;-webkit-transition:"transform, opacity, visibility";transition:"transform, opacity, visibility";-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:0.25s;transition-delay:0.25s}.dropdown-menu>li:hover>.dropdown-menu,.dropdown-menu.active>li>.dropdown-menu{z-index:105;opacity:1;visibility:visible;-webkit-transition:transform,opacity,visibility;transition:transform,opacity,visibility;-webkit-transition-duration:0.25s;transition-duration:0.25s;-webkit-transition-timing-function:;transition-timing-function:;-webkit-transition-delay:none;transition-delay:none}.dropdown-menu .dropdown-menu{margin:-1px 0 0 -1px;top:-0.5em;left:100%;right:auto;bottom:auto;-webkit-transform:translate3d(-1em, 0, 0);-ms-transform:translate3d(-1em, 0, 0);transform:translate3d(-1em, 0, 0)}.dropdown-menu>li:hover>.dropdown-menu,.dropdown-menu.active>li>.dropdown-menu{margin:-1px 0 0 -1px;top:-0.5em;left:100%;right:auto;bottom:auto;-webkit-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.tabs{position:relative;margin:2em 0}.tabs .tabs-nav,.tabs .tabs-content{margin:0}.tabs .tabs-nav{z-index:10}.tabs .tabs-content{z-index:5}.tabs-nav{margin:2em 0;text-align:center}.tabs-nav ul{display:flex;list-style:none;margin:0}.tabs-nav ul li{flex:1 0 auto;margin:0}.tabs-nav a{display:block;padding:1em;border:none}.tabs-nav.inline ul{flex-wrap:wrap}.tabs-nav.inline ul li{flex:0 0 auto}.tabs-nav.inline ul li a{padding:1em 2em}.tabs-content{margin:2em 0}.tabs-content .tabs-panel{display:none}.tabs-content .tabs-panel.active{display:block}.style-fold .tabs-nav ul,.tabs-nav.style-fold ul{background:#f5f5f5;border:1px solid #e6e6e6;border-radius:3px}.style-fold .tabs-nav ul li,.tabs-nav.style-fold ul li{border-right:1px solid #e6e6e6;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.style-fold .tabs-nav ul li:first-child,.tabs-nav.style-fold ul li:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.style-fold .tabs-nav ul li:last-child,.tabs-nav.style-fold ul li:last-child{border-right:none;border-top-right-radius:3px;border-bottom-right-radius:3px}.style-fold .tabs-nav a,.tabs-nav.style-fold a{color:#303030;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.style-fold .tabs-nav a:hover,.tabs-nav.style-fold a:hover{background:#e6e6e6;color:#303030}.style-fold .tabs-nav ul li.active,.tabs-nav.style-fold ul li.active{background:#fff}.style-fold .tabs-nav .active a,.tabs-nav.style-fold .active a{color:#303030}.style-fold .tabs-nav .active a:hover,.tabs-nav.style-fold .active a:hover{background:#fff}.style-fold .tabs-nav.inline ul li:last-child,.tabs-nav.style-fold.inline ul li:last-child{border-right:1px solid #e6e6e6}.style-fold .tabs-nav ul{border-bottom-right-radius:0;border-bottom-left-radius:0}.style-fold .tabs-nav ul li{border-bottom:1px solid transparent;margin-bottom:-1px}.style-fold .tabs-nav ul li:first-child{border-bottom-left-radius:0}.style-fold .tabs-nav ul li:last-child{border-bottom-right-radius:0}.style-fold .tabs-nav ul li.active{border-bottom:1px solid #fff}.style-fold .tabs-content{padding:1em 2em;border:1px solid #e6e6e6;border-top:none;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.style-line .tabs-nav ul,.tabs-nav.style-line ul{border-bottom:1px solid #e6e6e6}.style-line .tabs-nav ul li,.tabs-nav.style-line ul li{border-bottom:3px solid transparent;margin-bottom:-1px;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.style-line .tabs-nav a,.tabs-nav.style-line a{color:#aaa;-webkit-transition:all 0.25s linear;transition:all 0.25s linear}.style-line .tabs-nav a:hover,.tabs-nav.style-line a:hover{color:#1489C9}.style-line .tabs-nav ul li.active,.tabs-nav.style-line ul li.active{border-bottom:3px solid #1489C9}.style-line .tabs-nav .active a,.tabs-nav.style-line .active a{color:#303030}.style-line .tabs-nav .active a:hover,.tabs-nav.style-line .active a:hover{color:#1489C9}.style-line .tabs-content{padding:1em 2em;border:1px solid #e6e6e6;border-top:none}.container{width:100%;min-width:none;max-width:none;margin:0;padding:0 1.5rem}.row{width:100%;margin-left:0;margin-right:0}.col{width:100%;float:none;padding-left:0;padding-right:0}@media (min-width: 760px){.container{width:100%;min-width:none;max-width:62rem;margin:0 auto;padding:0 1.5rem}.container:after{content:'';display:table;clear:both}.row{width:auto;margin-left:-.75rem;margin-right:-.75rem}.row:after{content:'';display:table;clear:both}.col{min-height:1px;float:left;padding-left:.75rem;padding-right:.75rem}.col.col-left{float:left}.col.col-right{float:right}.col-no-inner-gutter{padding-left:0;padding-right:0}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}.prefix-1{margin-left:8.33333%}.prefix-2{margin-left:16.66667%}.prefix-3{margin-left:25%}.prefix-4{margin-left:33.33333%}.prefix-5{margin-left:41.66667%}.prefix-6{margin-left:50%}.prefix-7{margin-left:58.33333%}.prefix-8{margin-left:66.66667%}.prefix-9{margin-left:75%}.prefix-10{margin-left:83.33333%}.prefix-11{margin-left:91.66667%}.suffix-1{margin-right:8.33333%}.suffix-2{margin-right:16.66667%}.suffix-3{margin-right:25%}.suffix-4{margin-right:33.33333%}.suffix-5{margin-right:41.66667%}.suffix-6{margin-right:50%}.suffix-7{margin-right:58.33333%}.suffix-8{margin-right:66.66667%}.suffix-9{margin-right:75%}.suffix-10{margin-right:83.33333%}.suffix-11{margin-right:91.66667%}}.has-1,.has-2,.has-3,.has-4,.has-5,.has-6,.has-7,.has-8,.has-9,.has-10,.has-11,.has-12{display:block}.has-1:after,.has-2:after,.has-3:after,.has-4:after,.has-5:after,.has-6:after,.has-7:after,.has-8:after,.has-9:after,.has-10:after,.has-11:after,.has-12:after{content:'';display:table;clear:both}.is-1-of-1,.has-1>*,.is-1-of-2,.has-2>*,.is-1-of-3,.has-3>*,.is-1-of-4,.has-4>*,.is-1-of-5,.has-5>*,.is-1-of-6,.has-6>*,.is-1-of-7,.has-7>*,.is-1-of-8,.has-8>*,.is-1-of-9,.has-9>*,.is-1-of-10,.has-10>*,.is-1-of-11,.has-11>*,.is-1-of-12,.has-12>*{float:left}.is-1-of-1,.has-1>*{width:100%}.is-1-of-2,.has-2>*{width:50%}.is-1-of-3,.has-3>*{width:33.33333%}.is-1-of-4,.has-4>*{width:25%}.is-1-of-5,.has-5>*{width:20%}.is-1-of-6,.has-6>*{width:16.66667%}.is-1-of-7,.has-7>*{width:14.28571%}.is-1-of-8,.has-8>*{width:12.5%}.is-1-of-9,.has-9>*{width:11.11111%}.is-1-of-10,.has-10>*{width:10%}.is-1-of-11,.has-11>*{width:9.09091%}.is-1-of-12,.has-12>*{width:8.33333%} diff --git a/src/scss/_baseweb.scss b/src/scss/_baseweb.scss index 0b2d1ca1..a53b1194 100644 --- a/src/scss/_baseweb.scss +++ b/src/scss/_baseweb.scss @@ -42,6 +42,7 @@ @import "blocks/notices"; @import "blocks/breadcrumbs"; @import "blocks/dropdowns"; +@import "blocks/tabs"; // Custom @import "custom/custom"; diff --git a/src/scss/blocks/_notices.scss b/src/scss/blocks/_notices.scss index a647698c..d96b5847 100644 --- a/src/scss/blocks/_notices.scss +++ b/src/scss/blocks/_notices.scss @@ -27,19 +27,19 @@ $notices: ( 'pull-margin-left' : 0.5em 5% 1em 0, 'pull-margin-right' : 0.5em 0 1em 5%, - 'color' : $color-dark, - 'text-shadow' : 0 1px 0 rgba($white, 0.25), 'background' : rgba($black, 0.05), 'box-shadow' : 0 1px 3px rgba($black, 0.05), 'border' : 1px solid rgba($black, 0.15), 'border-radius' : $border-radius, + 'color' : $color-dark, + 'text-shadow' : 0 1px 0 rgba($white, 0.25), 'inverted' : ( - 'color' : $white, - 'text-shadow' : 0 1px 0 rgba($black, 0.25), 'background' : rgba($color-dark, 0.9), 'border' : 1px solid rgba($black, 0.15), 'box-shadow' : 0 1px 3px rgba($black, 0.05), + 'color' : $white, + 'text-shadow' : 0 1px 0 rgba($black, 0.25), ) ) !default; @@ -108,6 +108,7 @@ $notices: ( } @else if ($output == 'difference') { + // Cycle through properties and only output when different from default @each $property in $set { @if (map-get($o, $property) != map-get($notices, $property)) { #{$property}: map-get($o, $property); @@ -116,6 +117,7 @@ $notices: ( @if (map-get($o, 'class-inverted')) { &.#{map-get($o, 'class-inverted')} { + // Cycle through properties and only output when different from default @each $property in $set { @if (map-fetch($o, 'inverted', $property) != map-fetch($notices, 'inverted', $property)) { #{$property}: map-fetch($o, 'inverted', $property); diff --git a/src/scss/blocks/_tabs.scss b/src/scss/blocks/_tabs.scss new file mode 100644 index 00000000..9a2cdf68 --- /dev/null +++ b/src/scss/blocks/_tabs.scss @@ -0,0 +1,261 @@ +// Set file variable +$filename: 'scss/blocks/_tabs.scss'; + +//////////////////////////////////////////////////////////////////////////////// +// @Tabs Map +//////////////////////////////////////////////////////////////////////////////// + +$tabs: ( + 'classes' : true, + + 'class-wrapper' : 'tabs', + 'class-nav' : 'tabs-nav', + 'class-content' : 'tabs-content', + 'class-content-panel' : 'tabs-panel', + + 'margin' : 2em 0, + 'padding-nav' : 1em, + 'padding-nav-inline' : 1em 2em, + 'padding-content' : 1em 2em, + + 'background' : #f5f5f5, + 'background-fade' : #e6e6e6, + 'background-accent' : $white, + + 'border' : 1px solid #e6e6e6, + 'border-radius' : $border-radius, + + 'color' : $color, + 'color-fade' : $color-light, + 'color-accent' : $blue, + + 'transition' : $transition, + +) !default; + +//////////////////////////////////////////////////////////////////////////////// +// @Tabs Mixins +//////////////////////////////////////////////////////////////////////////////// + +// Make Tabs +// Creates the base styles for a the tabs block including tab wrapper, +// navigation and content. +// @param $options +// @type map +// @default $tabs map +@mixin make-tabs($options: ()) { + $o: map-merge($tabs, $options); + + // Tab Wrapper + .#{map-get($tabs, 'class-wrapper')} { + position: relative; + margin: map-get($o, 'margin'); + + .#{map-get($o, 'class-nav')}, + .#{map-get($o, 'class-content')} { + margin: 0; + } + .#{map-get($o, 'class-nav')} { + z-index: 10; + } + .#{map-get($o, 'class-content')} { + z-index: 5; + } + } + + // Tab Navigation + .#{map-get($tabs, 'class-nav')} { + margin: map-get($o, 'margin'); + text-align: center; + + ul { + display: flex; + list-style: none; + margin: 0; + } + ul li { + flex: 1 0 auto; + margin: 0; + } + a { + display: block; + padding: map-get($o, 'padding-nav'); + border: none; + } + + &.inline { + ul { + flex-wrap: wrap; + } + ul li { + flex: 0 0 auto; + + a { + padding: map-get($o, 'padding-nav-inline'); + } + } + } + } + + // Tab Content + .#{map-get($tabs, 'class-content')} { + margin: map-get($o, 'margin'); + + .#{map-get($o, 'class-content-panel')} { + display: none; + } + .#{map-get($o, 'class-content-panel')}.active { + display: block; + } + } + +} + +// Add Tab Style +// Creates the styles for tabs. +// @param $options +// @type map +// @default $tabs map +@mixin add-tab-style($options: (), $style : 'fold', $class : null) { + $o: map-merge($tabs, $options); + + @if ($class == null) { + $class: 'style-#{$style}'; + } + + @if ($style == 'fold') { + + .#{$class} .#{map-get($o, 'class-nav')}, + .#{map-get($o, 'class-nav')}.#{$class} { + ul { + background: map-get($o, 'background'); + border: map-get($o, 'border'); + @include border-radius(map-get($o, 'border-radius')); + } + ul li { + border-right: map-get($o, 'border'); + @include transition(map-get($o, 'transition')); + + &:first-child { + @include border-radius-left(map-get($o, 'border-radius')); + } + &:last-child { + border-right: none; + @include border-radius-right(map-get($o, 'border-radius')); + } + } + a { + color: map-get($o, 'color'); + @include transition(map-get($o, 'transition')); + + &:hover { + background: map-get($o, 'background-fade'); + color: map-get($o, 'color'); + } + } + + // Active State + ul li.active { + background: map-get($o, 'background-accent'); + } + .active a { + color: map-get($o, 'color'); + &:hover { + background: map-get($o, 'background-accent'); + } + } + + // Inline styles + &.inline ul li:last-child { + border-right: map-get($o, 'border'); + } + } + .#{$class} .#{map-get($o, 'class-nav')} { + ul { + @include border-radius-bottom(0); + } + ul li { + border-bottom: 1px solid transparent; + margin-bottom: -1px; + } + ul li:first-child { + @include border-radius-bottom-left(0); + } + ul li:last-child { + @include border-radius-bottom-right(0); + } + ul li.active { + border-bottom: 1px solid map-get($o, 'background-accent'); + } + } + .#{$class} .#{map-get($o, 'class-content')} { + padding: map-get($o, 'padding-content'); + border: map-get($o, 'border'); + border-top: none; + @include border-radius-bottom(map-get($o, 'border-radius')); + } + + } @else if ($style == 'line') { + + .#{$class} .#{map-get($o, 'class-nav')}, + .#{map-get($o, 'class-nav')}.#{$class} { + ul { + border-bottom: map-get($o, 'border'); + } + ul li { + border-bottom: 3px solid transparent; + margin-bottom: -1px; + @include transition(map-get($o, 'transition')); + } + a { + color: map-get($o, 'color-fade'); + @include transition(map-get($o, 'transition')); + &:hover { + color: map-get($o, 'color-accent'); + } + } + // Active State + ul li.active { + border-bottom: 3px solid map-get($o, 'color-accent'); + } + .active a { + color: map-get($o, 'color'); + &:hover { + color: map-get($o, 'color-accent'); + } + } + } + .#{$class} .#{map-get($o, 'class-content')} { + padding: map-get($o, 'padding-content'); + border: map-get($o, 'border'); + border-top: none; + } + + } @else { + @warn 'The tabs style of `#{$style}` does not exist'; + } +} + +// Check if we should output modifier classes +@if (map-get($tabs, 'classes') == true) { + +/*============================================================================== + @Tabs - #{$filename} +==============================================================================*/ + +/** + * Base styles for tab wrapper, nav and content + */ +@include make-tabs(); + +/** + * Tabs Style: Fold + */ +@include add-tab-style($style: 'fold'); + +/** + * Tabs Style: Line + */ +@include add-tab-style($style: 'line'); + +} // endif classes