@charset "UTF-8";
b,
strong {
font-weight: bolder; }
dfn {
font-style: italic; }
h1 {
font-size: 2em;
margin: .67em 0; }
mark {
background-color: #f7f7f7;
color: #333; }
small {
font-size: 80%; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sub {
bottom: -.25em; }
sup {
top: -.5em; }
img {
border-style: none; }
svg:not(:root) {
overflow: hidden; }
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em; }
figure {
margin: 1em 40px; }
hr {
box-sizing: content-box;
height: 0;
overflow: visible; }
button,
input,
optgroup,
select,
textarea {
font: inherit;
margin: 0; }
optgroup {
font-weight: bold; }
button,
input {
overflow: visible; }
button,
select {
text-transform: none; }
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button; }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
fieldset {
border: 1px solid #efefef;
margin: 0 2px;
padding: .35em .625em .75em; }
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal; }
textarea {
overflow: auto; }
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto; }
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
::-webkit-input-placeholder {
color: inherit;
opacity: .54; }
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit; }
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
.button--primary, .button--secondary {
font-smoothing: subpixel-antialiased;
font-size: 1em;
display: inline-block;
width: 100%;
margin: 0;
padding: 11px 24px;
text-align: center;
text-decoration: none;
border: 0;
border-radius: 2px;
outline: none;
font-weight: 300;
cursor: pointer; }
button:hover,
input[type='button']:hover,
input[type='reset']:hover,
input[type='submit']:hover,
.button--primary:hover, .button--secondary:hover {
text-decoration: none; }
@media only screen and (min-width: 768px) {
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
.button--primary, .button--secondary {
width: auto; } }
.clearfix {
display: block; }
.clearfix:after {
clear: both;
content: '\0020';
display: block;
height: 0;
overflow: hidden;
visibility: hidden; }
input[type='text'], input[type='number'], input[type='search'], input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea {
-webkit-appearance: textfield;
border-radius: 2px;
border: 1px solid #cdcdcd;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
font-size: 16px;
margin: 0;
outline: none;
padding: .6956522em .869565em;
vertical-align: baseline;
font-weight: 300; }
input[type='text']:active, input[type='number']:active, input[type='search']:active, input[type='password']:active, input[type='email']:active, input[type='url']:active, input[type='tel']:active, textarea:active, input[type='text']:focus, input[type='number']:focus, input[type='search']:focus, input[type='password']:focus, input[type='email']:focus, input[type='url']:focus, input[type='tel']:focus, textarea:focus {
border-color: #888;
outline: none; }
input[type='text']::-webkit-input-placeholder, input[type='number']::-webkit-input-placeholder, input[type='search']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder, input[type='email']::-webkit-input-placeholder, input[type='url']::-webkit-input-placeholder, input[type='tel']::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: contrast-friendly-search-color(#f7f7f7); }
input[type='text']::-moz-placeholder, input[type='number']::-moz-placeholder, input[type='search']::-moz-placeholder, input[type='password']::-moz-placeholder, input[type='email']::-moz-placeholder, input[type='url']::-moz-placeholder, input[type='tel']::-moz-placeholder, textarea::-moz-placeholder {
color: contrast-friendly-search-color(#f7f7f7); }
input[type='text']:-ms-input-placeholder, input[type='number']:-ms-input-placeholder, input[type='search']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder, input[type='email']:-ms-input-placeholder, input[type='url']:-ms-input-placeholder, input[type='tel']:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: contrast-friendly-search-color(#f7f7f7); }
input[type='text']::placeholder, input[type='number']::placeholder, input[type='search']::placeholder, input[type='password']::placeholder, input[type='email']::placeholder, input[type='url']::placeholder, input[type='tel']::placeholder, textarea::placeholder {
color: contrast-friendly-search-color(#f7f7f7); }
input[type='checkbox'], input[type='radio'] {
border-radius: 2px;
border: 1px solid #cdcdcd;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
height: 14px;
padding: 0;
vertical-align: middle;
width: 14px; }
input[disabled="disabled"][type='checkbox'] + label, input[disabled="disabled"][type='radio'] + label, form input[disabled="disabled"],
form select[disabled="disabled"],
form textarea[disabled="disabled"] {
opacity: .5;
cursor: not-allowed; }
.inner-wrapper {
margin: 0 auto;
max-width: 1030px; }
[class*='-col'].last-col,
[class*='-col'] [class*='-col'].last-col {
margin-right: 0; }
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col {
clear: none;
margin-bottom: 20px;
margin-right: 0;
padding: 0;
display: inline-block;
position: relative;
width: 100%; }
@media only screen and (min-width: 768px) {
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col {
float: left; } }
.list-ticks, .list {
list-style: none;
margin-left: 0; }
.list-ticks li, .list li {
border-bottom: 1px dotted #888;
margin-bottom: 0;
padding: 10px 0; }
.list-ticks li:last-of-type, .list li:last-of-type, .list-ticks .last-item, .list .last-item {
border: 0;
margin-bottom: 0;
padding-bottom: 0; }
.list-ticks li {
background-repeat: no-repeat;
background-position: 0 1em;
padding-left: 25px; }
.box {
background: #fff;
border: 1px solid #cdcdcd;
padding: 1.25em 20px; }
@media only screen and (min-width: 768px) {
.equal-height, .equal-height--vertical-divider {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
width: 100%; }
.equal-height .equal-height__item, .equal-height--vertical-divider .equal-height__item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }
* {
font-smoothing: subpixel-antialiased;
box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
font-size: 100%;
overflow-y: scroll; }
a,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
del,
details,
dfn,
div,
dl,
em,
embed,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline; }
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block; }
audio,
canvas,
progress,
video {
display: inline-block; }
audio:not([controls]) {
display: none;
height: 0; }
progress {
vertical-align: baseline; }
template,
[hidden] {
display: none; }
a {
background-color: transparent;
-webkit-text-decoration-skip: objects; }
abbr[title] {
border-bottom: 0;
text-decoration: underline; }
blockquote,
q {
quotes: none; }
legend {
border: 0; }
figure {
margin: 0; }
abbr,
acronym {
cursor: help; }
.link-arrow:after {
content: '\0000a0›'; }
nav ul li h2 a:after {
content: '\0000a0›'; }
nav ul li a:after,
ul li p a:after {
content: ''; }
img {
border: 0;
height: auto;
max-width: 100%; }
img .left {
margin-right: 20px; }
img .right {
margin-left: 20px; }
.middle img {
vertical-align: middle;
margin-top: 4em; }
ins {
background: #fffbeb;
text-decoration: none; }
.left {
float: left; }
.right {
float: right; }
.no-border {
border: 0; }
.link-top {
font-size: .875em;
clear: both;
margin-bottom: 40px;
margin-top: -40px; }
.link-top a {
background: #fff;
margin-right: 10px;
margin-top: -35px;
padding: 5px;
float: right; }
.caps {
text-transform: uppercase; }
.touch-border,
.touch-bottom {
float: left; }
@media only screen and (min-width: 768px) {
.touch-border,
.touch-bottom {
margin-bottom: -20px; } }
@media only screen and (min-width: 1030px) {
.touch-border,
.touch-bottom {
margin-bottom: -40px; } }
.accessibility-aid,
.off-left {
position: absolute;
left: -999em; }
.external {
background-size: .7em .7em;
padding-right: .9em;
background-image: url("https://assets.ubuntu.com/v1/f24a8aa0-external-link-orange.svg");
background-position: 100% top;
background-repeat: no-repeat; }
.no-svg .external {
background-image: url("https://assets.ubuntu.com/v1/f24a8aa0-external-link-orange.svg"); }
.text-center,
.align-center {
text-align: center; }
.no-margin-bottom {
margin-bottom: 0; }
.no-padding-bottom {
padding-bottom: 0; }
.pull-bottom-right {
float: right;
margin-right: -10px; }
@media only screen and (min-width: 768px) {
.pull-bottom-right {
margin-right: -40px;
margin-bottom: -40px; } }
@media only screen and (min-width: 1030px) {
.pull-bottom-right {
margin-right: -40px;
margin-bottom: -60px; } }
.pull-bottom-left {
float: left;
margin-left: -10px; }
@media only screen and (min-width: 768px) {
.pull-bottom-left {
margin-left: -40px;
margin-bottom: -40px; } }
@media only screen and (min-width: 1030px) {
.pull-bottom-left {
margin-left: -40px;
margin-bottom: -60px; } }
@media only screen and (max-width: 767px) {
.priority-0,
.not-for-small {
display: none; } }
@media only screen and (min-width: 768px) {
.for-mobile,
.for-small {
display: none; } }
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.video-container + .video-title {
margin-top: 20px; }
.pull-right {
float: right;
margin-right: -40px; }
@media only screen and (max-width: 768px) {
.pull-right {
margin-bottom: 20px; } }
.pull-left {
margin-left: -40px; }
.for-tablet,
.for-medium {
display: none; }
@media only screen and (min-width: 768px) {
.for-tablet,
.for-medium {
display: block; } }
@media only screen and (min-width: 768px) and (max-width: 1030px) {
.med-six-col .three-col {
width: 48.93617%; }
.med-six-col .three-col:nth-of-type(2n) {
margin-right: 0; } }
blockquote {
margin: 0; }
blockquote > p {
font-size: 1em;
margin: 0 0 .4em; }
blockquote small {
font-size: .8125em;
line-height: 1.4; }
.pull-quote {
text-indent: 0; }
.pull-quote p {
font-size: 1.5em;
line-height: 1.3;
margin-left: .4em;
padding-left: 10px;
padding-right: 10px;
text-indent: -.4em; }
.pull-quote p span {
color: #f7f7f7;
font-weight: bold;
left: -5px;
line-height: 0;
position: relative; }
.pull-quote p span:last-of-type {
left: 5px; }
.pull-quote p cite {
display: block;
font-size: .75em;
font-weight: 300;
margin: 10px 0 0;
text-indent: 0; }
@media only screen and (min-width: 768px) {
.pull-quote p {
padding-left: 0;
padding-right: 0;
text-indent: -.7em; }
.pull-quote p span {
top: 5px;
font-size: 1.391304348em; }
.pull-quote p cite {
margin-left: 0;
text-indent: 0; } }
@media only screen and (min-width: 1030px) {
.pull-quote p span {
top: 10px; } }
.row-quote {
border-radius: 0; }
.row-quote blockquote {
border-radius: 4px;
margin: 0;
padding: 0; }
.row-quote blockquote p {
color: #333;
line-height: 1.3;
margin-bottom: .75em;
padding-left: 10px;
padding-right: 10px;
text-indent: 0; }
.row-quote blockquote span {
color: #f7f7f7;
font-weight: bold;
left: -5px;
line-height: 0;
position: relative; }
.row-quote blockquote span + span {
left: 5px; }
.row-quote blockquote cite {
color: #333;
font-size: .75em;
font-style: normal;
margin-bottom: 0;
text-indent: 0; }
@media only screen and (min-width: 768px) {
.row-quote {
text-indent: -.4em; }
.row-quote blockquote {
text-indent: -7px; }
.row-quote blockquote p {
font-size: 1.5em;
padding-left: 0;
padding-right: 0;
text-indent: -.4em; }
.row-quote blockquote span {
top: 5px;
font-size: 1.391304348em; }
.row-quote blockquote cite {
margin-left: 0;
text-indent: 0; } }
@media only screen and (min-width: 1030px) {
.row-quote blockquote {
padding: 0 80px 20px;
text-indent: -10px; }
.row-quote blockquote p span {
top: 10px; } }
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
.button--primary {
color: #fff;
background-color: #e95420; }
button:hover,
input[type='button']:hover,
input[type='reset']:hover,
input[type='submit']:hover,
.button--primary:hover {
background-color: #d44615; }
button .external,
input[type='button'] .external,
input[type='reset'] .external,
input[type='submit'] .external,
.button--primary .external {
background-image: url("https://assets.ubuntu.com/v1/484aba04-external-link-white.svg"); }
.button--secondary {
color: #e95420;
background-color: #fff;
border: 1px solid #cdcdcd; }
.button--secondary:hover {
background-color: #efefef; }
@media only screen and (min-width: 620px) {
.nav-secondary {
border: 1px solid #d2d2d2;
border-top: 0; } }
.nav-secondary .breadcrumb {
margin-bottom: 0;
margin-left: 0;
padding-top: 2px;
padding-bottom: 3px; }
@media only screen and (min-width: 620px) {
.nav-secondary .breadcrumb {
float: left;
margin-left: 4px; } }
.nav-secondary .breadcrumb li {
color: #fff;
display: inline-block;
margin: 0;
width: 100%; }
@media only screen and (min-width: 620px) {
.nav-secondary .breadcrumb li {
display: inline-block;
width: auto; } }
.nav-secondary .breadcrumb li:first-of-type {
border-bottom: 1px solid #d2d2d2; }
@media only screen and (min-width: 620px) {
.nav-secondary .breadcrumb li:first-of-type {
border-bottom: 0; } }
.nav-secondary .breadcrumb li a {
color: #888;
font-size: 1em;
display: inline-block;
width: 100%;
margin-right: 0;
padding: 8px 10px;
text-decoration: none; }
@media only screen and (min-width: 620px) {
.nav-secondary .breadcrumb li a {
font-size: .875em; } }
@media only screen and (min-width: 620px) {
.nav-secondary .breadcrumb li .breadcrumb-link,
.nav-secondary .breadcrumb li .breadcrumb-link--second-level,
.nav-secondary .breadcrumb li .active {
display: inline-block;
float: none;
width: auto; } }
.nav-secondary .breadcrumb li .breadcrumb-link:after,
.nav-secondary .breadcrumb li .breadcrumb-link--second-level:after {
content: '\203A';
display: inline-block;
height: 5px;
margin-left: 8px;
position: absolute;
width: 5px; }
.nav-secondary .second-level-nav,
.nav-secondary .third-level-nav {
display: none;
overflow: hidden;
width: 100%;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #d2d2d2; }
@media only screen and (min-width: 620px) {
.nav-secondary .second-level-nav,
.nav-secondary .third-level-nav {
display: inline;
float: none;
margin-bottom: 0;
padding: 0;
width: auto;
border-bottom: 0; } }
.nav-secondary .second-level-nav li,
.nav-secondary .third-level-nav li {
margin: 0; }
@media only screen and (min-width: 620px) {
.nav-secondary .second-level-nav li,
.nav-secondary .third-level-nav li {
float: none;
width: auto; } }
.nav-secondary .second-level-nav li a,
.nav-secondary .third-level-nav li a {
font-size: .875em;
display: block;
width: 100%;
height: 100%;
padding: 10px;
color: #333; }
@media only screen and (max-width: 620px) {
.nav-secondary .second-level-nav li a.active,
.nav-secondary .third-level-nav li a.active {
font-weight: 500; } }
@media only screen and (min-width: 620px) {
.nav-secondary .second-level-nav li a,
.nav-secondary .third-level-nav li a {
padding: 8px 10px 0; }
.nav-secondary .second-level-nav li a.active,
.nav-secondary .third-level-nav li a.active {
color: #e95420; } }
@media only screen and (min-width: 620px) {
.nav-secondary .second-level-nav li {
width: auto; }
.nav-secondary .second-level-nav li .active,
.nav-secondary .second-level-nav li .breadcrumb-link--second-level {
color: #888; }
.nav-secondary .second-level-nav li .third-level-nav li a {
color: #333; }
.nav-secondary .second-level-nav li .third-level-nav li a:hover {
color: #e95420; }
.nav-secondary .second-level-nav li .third-level-nav li .active {
color: #e95420;
float: none; }
.nav-secondary .second-level-nav li .third-level-nav li .active:after {
content: ''; } }
.third-level-nav li a:hover {
color: #e95420; }
.third-level-nav li .active {
color: #e95420;
float: none; }
@media only screen and (max-width: 619px) {
#breadcrumbs:hover .second-level-nav,
#breadcrumbs:hover .third-level-nav,
#breadcrumbs:hover .active {
border: 0;
display: block;
overflow: visible;
float: left;
width: 100%;
position: relative;
clear: both; }
#breadcrumbs:hover li {
border: 0;
float: left; }
#breadcrumbs:hover .second-level-nav {
border-top: 1px solid #d2d2d2; }
#breadcrumbs:hover .second-level-nav li {
float: left; }
#breadcrumbs:hover .third-level-nav {
border-bottom: 1px solid #d2d2d2;
padding-top: 0; }
#breadcrumbs:hover .third-level-nav li {
width: 50%;
display: block;
padding-left: 10px; } }
code,
samp,
kbd {
font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', Courier, monospace;
text-align: left; }
pre,
code {
text-align: left;
white-space: pre-line;
word-spacing: normal;
word-wrap: break-word;
-moz-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
direction: ltr; }
.code-block {
overflow: auto;
margin: .5em 0;
padding: 1em;
border: 1px solid #cdcdcd;
border-radius: .5em; }
.code-block .code-block__line {
float: left;
clear: both;
margin: 0; }
.code-block.code-block--terminal {
color: #fff;
border: 0;
background-color: #333; }
.code-block.code-block--numbering {
counter-reset: line-numbering; }
.code-block.code-block--numbering .code-block__line::before {
width: 1.5em;
padding-right: 1em;
/* space after numbers */
content: counter(line-numbering);
counter-increment: line-numbering;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: right;
pointer-events: none;
opacity: .5; }
.code-snippet {
position: relative;
overflow: hidden;
transition: all .2s;
border: 1px solid #cdcdcd;
border-radius: 4px;
background-color: #fff; }
.code-snippet .code-snippet__input {
font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', Courier, monospace;
font-size: 1em;
font-weight: 300;
width: 100%;
padding: .7em 1em;
color: #333;
border: 0;
background: transparent; }
.code-snippet .code-snippet__copy-button {
position: absolute;
top: 0;
right: 0;
display: block;
width: 50px;
height: 100%;
text-indent: -9999px;
border-left: 1px solid #cdcdcd;
background-color: #fff;
background-image: url("https://assets.ubuntu.com/v1/994e60f9-get-link-url_16.svg");
background-repeat: no-repeat;
background-position: center; }
.code-snippet.code-snippet--terminal {
color: #fff;
border-color: #333;
background-color: #333; }
.code-snippet.code-snippet--terminal .code-snippet__input {
color: #fff; }
.code-snippet.code-snippet--terminal .code-snippet__copy-button {
border-left: 0; }
label {
cursor: pointer;
display: block;
margin-bottom: 4px; }
label.has-error {
color: #df382c; }
label.has-warning {
color: #eca918; }
label.has-success {
color: #38b44a; }
label.has-information {
color: #19b6ee; }
input[type='reset'] {
display: none; }
input[type='search'] {
-webkit-appearance: none;
border-radius: 0; }
input[type='checkbox'] + label, input[type='radio'] + label {
display: inline;
margin-left: 5px;
vertical-align: middle;
width: auto; }
input.has-error {
border: 1px solid #df382c; }
input.has-error:focus {
border: 1px solid #df382c; }
input.has-warning {
border: 1px solid #eca918; }
input.has-warning:focus {
border: 1px solid #eca918; }
input.has-success {
border: 1px solid #38b44a; }
input.has-success:focus {
border: 1px solid #38b44a; }
input.has-information {
border: 1px solid #19b6ee; }
input.has-information:focus {
border: 1px solid #19b6ee; }
form ul {
margin-left: 0;
list-style: none; }
textarea {
overflow: auto;
vertical-align: top; }
textarea[readonly='readonly'] {
color: #888;
cursor: default; }
textarea[readonly='readonly']:active, textarea[readonly='readonly']:focus {
border-color: #888;
outline: none; }
fieldset {
background-color: #f7f7f7;
background-position: -15px -15px;
background-repeat: no-repeat;
border-radius: 4px;
border: 0;
margin-bottom: 8px;
padding: 15px 20px; }
@media only screen and (min-width: 1030px) {
fieldset {
padding: 15px 20px; } }
fieldset h3 {
border-bottom: 1px dotted #cdcdcd;
margin-bottom: 9px;
padding-bottom: 10px; }
form input,
form select,
form textarea {
width: 100%; }
@media only screen and (min-width: 768px) {
.one-col {
float: left;
width: 6.40351%;
margin-right: 2.10526%; }
.one-col .one-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.two-col {
float: left;
width: 14.91228%;
margin-right: 2.10526%; }
.two-col .one-col {
float: left;
width: 43.81443%;
margin-right: 12.37113%; }
.two-col .two-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.three-col {
float: left;
width: 23.42105%;
margin-right: 2.10526%; }
.three-col .one-col {
float: left;
width: 27.83505%;
margin-right: 8.24742%; }
.three-col .two-col {
float: left;
width: 63.91753%;
margin-right: 8.24742%; }
.three-col .three-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.four-col {
float: left;
width: 31.92982%;
margin-right: 2.10526%; }
.four-col .one-col {
float: left;
width: 20.36082%;
margin-right: 6.18557%; }
.four-col .two-col {
float: left;
width: 46.90722%;
margin-right: 6.18557%; }
.four-col .three-col {
float: left;
width: 73.45361%;
margin-right: 6.18557%; }
.four-col .four-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.five-col {
float: left;
width: 40.4386%;
margin-right: 2.10526%; }
.five-col .one-col {
float: left;
width: 16.04124%;
margin-right: 4.94845%; }
.five-col .two-col {
float: left;
width: 37.03093%;
margin-right: 4.94845%; }
.five-col .three-col {
float: left;
width: 58.02062%;
margin-right: 4.94845%; }
.five-col .four-col {
float: left;
width: 79.01031%;
margin-right: 4.94845%; }
.five-col .five-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.six-col {
float: left;
width: 48.94737%;
margin-right: 2.10526%; }
.six-col .one-col {
float: left;
width: 13.23024%;
margin-right: 4.12371%; }
.six-col .two-col {
float: left;
width: 30.58419%;
margin-right: 4.12371%; }
.six-col .three-col {
float: left;
width: 47.93814%;
margin-right: 4.12371%; }
.six-col .four-col {
float: left;
width: 65.2921%;
margin-right: 4.12371%; }
.six-col .five-col {
float: left;
width: 82.64605%;
margin-right: 4.12371%; }
.six-col .six-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.seven-col {
float: left;
width: 57.45614%;
margin-right: 2.10526%; }
.seven-col .one-col {
float: left;
width: 11.25605%;
margin-right: 3.53461%; }
.seven-col .two-col {
float: left;
width: 26.04671%;
margin-right: 3.53461%; }
.seven-col .three-col {
float: left;
width: 40.83737%;
margin-right: 3.53461%; }
.seven-col .four-col {
float: left;
width: 55.62802%;
margin-right: 3.53461%; }
.seven-col .five-col {
float: left;
width: 70.41868%;
margin-right: 3.53461%; }
.seven-col .six-col {
float: left;
width: 85.20934%;
margin-right: 3.53461%; }
.seven-col .seven-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.eight-col {
float: left;
width: 65.96491%;
margin-right: 2.10526%; }
.eight-col .one-col {
float: left;
width: 9.79381%;
margin-right: 3.09278%; }
.eight-col .two-col {
float: left;
width: 22.68041%;
margin-right: 3.09278%; }
.eight-col .three-col {
float: left;
width: 35.56701%;
margin-right: 3.09278%; }
.eight-col .four-col {
float: left;
width: 48.45361%;
margin-right: 3.09278%; }
.eight-col .five-col {
float: left;
width: 61.34021%;
margin-right: 3.09278%; }
.eight-col .six-col {
float: left;
width: 74.2268%;
margin-right: 3.09278%; }
.eight-col .seven-col {
float: left;
width: 87.1134%;
margin-right: 3.09278%; }
.eight-col .eight-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.nine-col {
float: left;
width: 74.47368%;
margin-right: 2.10526%; }
.nine-col .one-col {
float: left;
width: 8.66743%;
margin-right: 2.74914%; }
.nine-col .two-col {
float: left;
width: 20.084%;
margin-right: 2.74914%; }
.nine-col .three-col {
float: left;
width: 31.50057%;
margin-right: 2.74914%; }
.nine-col .four-col {
float: left;
width: 42.91714%;
margin-right: 2.74914%; }
.nine-col .five-col {
float: left;
width: 54.33372%;
margin-right: 2.74914%; }
.nine-col .six-col {
float: left;
width: 65.75029%;
margin-right: 2.74914%; }
.nine-col .seven-col {
float: left;
width: 77.16686%;
margin-right: 2.74914%; }
.nine-col .eight-col {
float: left;
width: 88.58343%;
margin-right: 2.74914%; }
.nine-col .nine-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.ten-col {
float: left;
width: 82.98246%;
margin-right: 2.10526%; }
.ten-col .one-col {
float: left;
width: 7.7732%;
margin-right: 2.47423%; }
.ten-col .two-col {
float: left;
width: 18.02062%;
margin-right: 2.47423%; }
.ten-col .three-col {
float: left;
width: 28.26804%;
margin-right: 2.47423%; }
.ten-col .four-col {
float: left;
width: 38.51546%;
margin-right: 2.47423%; }
.ten-col .five-col {
float: left;
width: 48.76289%;
margin-right: 2.47423%; }
.ten-col .six-col {
float: left;
width: 59.01031%;
margin-right: 2.47423%; }
.ten-col .seven-col {
float: left;
width: 69.25773%;
margin-right: 2.47423%; }
.ten-col .eight-col {
float: left;
width: 79.50515%;
margin-right: 2.47423%; }
.ten-col .nine-col {
float: left;
width: 89.75258%;
margin-right: 2.47423%; }
.ten-col .ten-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.eleven-col {
float: left;
width: 91.49123%;
margin-right: 2.10526%; }
.eleven-col .one-col {
float: left;
width: 7.04609%;
margin-right: 2.2493%; }
.eleven-col .two-col {
float: left;
width: 16.34148%;
margin-right: 2.2493%; }
.eleven-col .three-col {
float: left;
width: 25.63687%;
margin-right: 2.2493%; }
.eleven-col .four-col {
float: left;
width: 34.93227%;
margin-right: 2.2493%; }
.eleven-col .five-col {
float: left;
width: 44.22766%;
margin-right: 2.2493%; }
.eleven-col .six-col {
float: left;
width: 53.52305%;
margin-right: 2.2493%; }
.eleven-col .seven-col {
float: left;
width: 62.81844%;
margin-right: 2.2493%; }
.eleven-col .eight-col {
float: left;
width: 72.11383%;
margin-right: 2.2493%; }
.eleven-col .nine-col {
float: left;
width: 81.40922%;
margin-right: 2.2493%; }
.eleven-col .ten-col {
float: left;
width: 90.70461%;
margin-right: 2.2493%; }
.eleven-col .eleven-col {
width: 100%;
margin-right: 0; } }
@media only screen and (min-width: 768px) {
.prepend-one {
margin-left: 8.50877%; }
.prepend-two {
margin-left: 17.01754%; }
.prepend-three {
margin-left: 25.52632%; }
.prepend-four {
margin-left: 34.03509%; }
.prepend-five {
margin-left: 42.54386%; }
.prepend-six {
margin-left: 51.05263%; }
.prepend-seven {
margin-left: 59.5614%; }
.prepend-eight {
margin-left: 68.07018%; }
.prepend-nine {
margin-left: 76.57895%; }
.prepend-ten {
margin-left: 85.08772%; }
.prepend-eleven {
margin-left: 93.59649%; } }
@media only screen and (min-width: 768px) {
.append-one {
margin-right: 8.50877%; }
.append-two {
margin-right: 17.01754%; }
.append-three {
margin-right: 25.52632%; }
.append-four {
margin-right: 34.03509%; }
.append-five {
margin-right: 42.54386%; }
.append-six {
margin-right: 51.05263%; }
.append-seven {
margin-right: 59.5614%; }
.append-eight {
margin-right: 68.07018%; }
.append-nine {
margin-right: 76.57895%; }
.append-ten {
margin-right: 85.08772%; }
.append-eleven {
margin-right: 93.59649%; } }
@media only screen and (min-width: 768px) {
.push-one {
float: left;
position: relative;
margin: 0 -8.50877% 0 8.50877%; }
.push-two {
float: left;
position: relative;
margin: 0 -19.12281% 0 19.12281%; }
.push-three {
float: left;
position: relative;
margin: 0 -27.63158% 0 27.63158%; }
.push-four {
float: left;
position: relative;
margin: 0 -36.14035% 0 36.14035%; }
.push-five {
float: left;
position: relative;
margin: 0 -44.64912% 0 44.64912%; }
.push-six {
float: left;
position: relative;
margin: 0 -53.15789% 0 53.15789%; }
.push-seven {
float: left;
position: relative;
margin: 0 -61.66667% 0 61.66667%; }
.push-eight {
float: left;
position: relative;
margin: 0 -70.17544% 0 70.17544%; }
.push-nine {
float: left;
position: relative;
margin: 0 -78.68421% 0 78.68421%; }
.push-ten {
float: left;
position: relative;
margin: 0 -87.19298% 0 87.19298%; }
.push-eleven {
float: left;
position: relative;
margin: 0 -95.70175% 0 95.70175%; } }
@media only screen and (min-width: 768px) {
.pull-one {
float: left;
position: relative;
margin-left: -6.40351%; }
.pull-two {
float: left;
position: relative;
margin-left: 17.01754%; }
.pull-three {
float: left;
position: relative;
margin-left: 25.52632%; }
.pull-four {
float: left;
position: relative;
margin-left: 34.03509%; }
.pull-five {
float: left;
position: relative;
margin-left: 42.54386%; }
.pull-six {
float: left;
position: relative;
margin-left: 51.05263%; }
.pull-seven {
float: left;
position: relative;
margin-left: 59.5614%; }
.pull-eight {
float: left;
position: relative;
margin-left: 68.07018%; }
.pull-nine {
float: left;
position: relative;
margin-left: 76.57895%; }
.pull-ten {
float: left;
position: relative;
margin-left: 85.08772%; }
.pull-eleven {
float: left;
position: relative;
margin-left: 93.59649%; } }
.banner {
background: #f7f7f7;
border-bottom: 0;
border-top: 0;
box-shadow: inset 0 -1px 0 #cccccc;
display: block;
min-width: 100%;
position: relative;
width: auto;
z-index: 2; }
@media only screen and (min-width: 620px) {
.banner {
border-bottom: 1px solid #cccccc;
box-shadow: none; } }
.banner .logo {
position: relative;
display: table;
float: left;
overflow: hidden;
height: 48px;
margin: 0 10px;
border-left: 0; }
@media only screen and (min-width: 620px) {
.banner .logo {
margin: 0 15px; } }
.banner .logo a {
display: table-cell;
height: 100%;
vertical-align: middle;
color: #333; }
.banner .logo a span {
display: inline-block; }
.banner h2 {
font-size: 1.563em;
position: relative;
top: 14px;
left: 4px;
display: block;
margin-bottom: 0;
text-transform: lowercase; }
.banner h2 a,
.banner h2 a:link,
.banner h2 a:visited {
float: left;
text-decoration: none;
color: #333; }
.banner .nav-primary {
overflow: hidden;
margin: 0 auto;
border: 0; }
@media only screen and (min-width: 620px) {
.banner .nav-primary {
max-width: 1030px; } }
.banner .nav-primary span {
display: none; }
.banner .nav-primary ul {
display: none;
float: left;
width: 100%;
margin: 0;
padding: 0;
border-top: 1px solid #cccccc;
box-shadow: inset 0 -1px 0 #cccccc;
background-color: #ebebeb; }
@media only screen and (min-width: 620px) {
.banner .nav-primary ul {
position: static;
display: block;
width: auto;
border-top: 0;
background-color: transparent;
box-shadow: none; } }
.banner .nav-primary ul li {
float: left;
width: 50%;
margin: 0;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background: transparent; }
@media only screen and (min-width: 620px) {
.banner .nav-primary ul li {
width: auto;
border-right: 0;
border-bottom: 0;
border-left: 1px solid #e3e3e3; }
.banner .nav-primary ul li:last-child {
border-right: 1px solid #e3e3e3; }
.banner .nav-primary ul li:last-child a {
border-right: 0; } }
@media only screen and (max-width: 620px) {
.banner .nav-primary ul li:nth-child(2n+2) {
border-right: 0; } }
.banner .nav-primary ul li a,
.banner .nav-primary ul li a:link,
.banner .nav-primary ul li a:visited {
font-size: 1em;
font-weight: 300;
position: relative;
display: block;
margin-bottom: 0;
padding: 8px 10px;
text-align: left;
text-decoration: none;
background-color: #ebebeb;
font-smoothing: subpixel-antialiased;
color: #333; }
@media only screen and (min-width: 620px) {
.banner .nav-primary ul li a,
.banner .nav-primary ul li a:link,
.banner .nav-primary ul li a:visited {
font-size: .875em;
padding: 14px 14px 13px;
text-align: center;
border-left: 1px solid white;
background-color: transparent;
color: #333; } }
.banner .nav-primary ul li a:hover,
.banner .nav-primary ul li a:link:hover,
.banner .nav-primary ul li a:visited:hover {
background: #f2f2f2; }
@media only screen and (min-width: 620px) {
.banner .nav-primary ul li a:hover,
.banner .nav-primary ul li a:link:hover,
.banner .nav-primary ul li a:visited:hover {
background-color: white; } }
.banner .nav-primary ul li a.active,
.banner .nav-primary ul li a:link.active,
.banner .nav-primary ul li a:visited.active {
background-color: #ddd; }
@media only screen and (min-width: 620px) {
.banner .nav-primary ul li a.active,
.banner .nav-primary ul li a:link.active,
.banner .nav-primary ul li a:visited.active {
background-color: #e3e3e3;
border-left: 0; } }
.banner .nav-toggle {
position: absolute;
top: 0;
right: 0;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
text-indent: -99999px;
background-image: url("https://assets.ubuntu.com/v1/12387180-navigation-menu-plain.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: 25px auto; }
@media only screen and (min-width: 620px) {
.banner .nav-toggle {
display: none; } }
.banner .nav-toggle .nav-toggle__link {
width: 48px;
height: 48px; }
.banner .nav-toggle .nav-toggle__link.open {
display: block; }
.banner .nav-toggle .nav-toggle__link.close {
display: none; }
@media only screen and (max-width: 620px) {
.banner #nav:hover ul {
display: block; }
.banner #nav:hover ul ul {
display: none; }
.banner #nav:hover .nav-toggle .nav-toggle__link.open {
display: none; }
.banner #nav:hover .nav-toggle .nav-toggle__link.close {
display: block; } }
ol,
ul {
margin-left: 20px;
margin-bottom: 20px; }
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0; }
nav ul,
nav ol {
list-style: none;
list-style-image: none; }
li {
font-size: 1em;
line-height: 1.5;
margin: 0 0 .4em;
padding: 0; }
.list-ticks li {
background-image: url("data:image/svg+xml;utf8, "); }
.no-bullets {
list-style: none;
margin-left: 0; }
.combined-list ul,
.combined-list div {
margin-bottom: 0; }
.combined-list .last-item {
border-bottom: 1px dotted #888;
padding-bottom: 10px; }
.combined-list .last-col {
margin-bottom: 20px; }
.combined-list .last-col .last-item {
border-bottom: 0;
padding-bottom: 0; }
@media only screen and (min-width: 768px) {
.combined-list ul,
.combined-list div {
margin-bottom: 20px; }
.combined-list .last-item {
border-bottom: 0;
padding-bottom: 0; } }
.inline-list {
margin-left: 0; }
.inline-list li {
display: inline;
list-style: none;
margin-right: 20px; }
.inline-list .last-item {
margin-right: 0; }
.list-step {
list-style: none;
margin-left: 60px; }
@media only screen and (max-width: 1030px) {
.list-step__item:first-child {
margin-top: 10px; } }
@media only screen and (min-width: 1030px) {
.list-step__title {
margin-bottom: 0; } }
.list-step__bullet {
box-shadow: 0 1px 3px 1px rgba(51, 51, 51, 0.2);
background: #fff;
border-radius: 50%;
padding: .3em .68em;
display: inline-block;
color: #e95420;
margin-right: .34375em;
margin-bottom: .625em;
margin-left: -60px; }
@media only screen and (max-width: 1030px) {
.list-step__bullet {
position: absolute;
top: -5px; } }
@media only screen and (min-width: 768px) {
.grid-list {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; } }
.grid-list__img {
display: block;
margin: auto;
max-width: 60px; }
.grid-list p {
font-size: .875rem; }
.grid-list__item {
border-bottom: 1px dotted #888;
margin-bottom: 30px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
@media only screen and (max-width: 768px) {
.grid-list__item > [class*='-col']:first-child {
width: 25%;
padding-right: 1rem; }
.grid-list__item > [class*='-col']:last-child {
width: 75%; } }
.grid-list__item:last-child {
border-bottom: 0; }
@media only screen and (min-width: 768px) {
.grid-list__item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-right: 1px dotted #888;
margin: 0;
padding: 1.5em .75em 0; }
.grid-list__item.last-col {
border-right: 0; }
.grid-list__item.last-row {
border-bottom: 0; } }
.row {
border-bottom: 1px dotted #888;
clear: both;
padding: 20px 10px 0;
position: relative; }
.row br {
display: none; }
.row.no-padding-bottom {
padding-bottom: 0; }
.row::after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden; }
.row--light {
background: #fff; }
.row--dark {
background: #333;
color: #fff; }
.row.row-grey, .row.row--grey {
background: #f7f7f7;
border: 0;
margin-top: -1px; }
.no-border {
border: 0; }
.row-hero {
margin-top: 20px;
padding-top: 0; }
.strip {
width: 100%;
display: block; }
.strip-inner-wrapper {
max-width: 1030px;
margin: auto; }
@media only screen and (min-width: 768px) {
.row-hero {
margin-top: 40px; }
.row {
border-radius: 0;
margin: 0;
padding: 40px 20px 20px; }
.row-grey {
margin-top: -1px; } }
@media only screen and (min-width: 769px) {
.row br {
display: block; } }
@media only screen and (min-width: 1030px) {
.row br {
display: block; }
.row {
padding: 60px 20px 40px; }
.no-border {
border: 0; } }
.header-search [type="search"],
.header-search [type="text"],
.search-form [type="search"],
.search-form [type="text"] {
-webkit-appearance: none;
background-color: #dedede;
box-shadow: none;
color: #333;
display: block;
float: left;
font-size: 1em;
margin-bottom: 0;
padding: 12px 10px;
transition: all .5s ease-out;
width: 100%; }
.header-search .svg-search-handle,
.search-form .svg-search-handle {
fill: #333; }
.header-search .svg-search-frame,
.search-form .svg-search-frame {
stroke: #333; }
.header-search placeholder,
.search-form placeholder {
color: #333;
opacity: 1; }
.header-search input:placeholder,
.search-form input:placeholder {
color: #333;
opacity: 1; }
.header-search ::-webkit-input-placeholder,
.search-form ::-webkit-input-placeholder {
color: #333;
opacity: 1; }
.header-search ::-moz-placeholder,
.search-form ::-moz-placeholder {
color: #333;
opacity: 1; }
.header-search :-ms-input-placeholder,
.search-form :-ms-input-placeholder {
color: #333;
opacity: 1; }
.header-search ::placeholder,
.search-form ::placeholder {
color: #333;
opacity: 1; }
.header-search [type="search"]:focus,
.search-form [type="search"]:focus {
background-color: lightgray;
border-color: #b3b3b3; }
.header-search [type=submit],
.search-form [type=submit] {
background: none;
display: block;
float: left;
line-height: 0;
margin-left: -40px;
overflow: visible;
padding: 3px 2px;
width: auto; }
.header-search [type=submit]:hover,
.search-form [type=submit]:hover {
background: none; }
.header-search [type=submit] img,
.search-form [type=submit] img {
height: 28px;
width: 28px;
margin-top: 2px; }
.banner .search-toggle {
background-image: url("data:image/svg+xml;utf8, ");
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 20px;
display: block;
height: 48px;
outline: none;
overflow: hidden;
position: absolute;
right: 0;
text-indent: -999em;
top: 0;
width: 24px; }
.banner .search-toggle .search-toggle__link {
width: 48px;
height: 48px; }
.banner .search-toggle .search-toggle__link.open {
display: block; }
.banner .search-toggle .search-toggle__link.close {
display: none; }
#site-search:hover form {
display: block; }
#site-search:hover .search-toggle .search-toggle__link.open {
display: none; }
#site-search:hover .search-toggle .search-toggle__link.close {
display: block; }
.header-search,
.search-form {
background: #f7f7f7;
border: 0;
display: none;
float: left;
position: relative;
margin: 0;
width: 100%;
z-index: 3; }
.search-form.active,
.header-search.active,
.header-search.open {
display: block; }
.search-form div,
.header-search div {
box-shadow: inset 0 -4px 4px -4px rgba(0, 0, 0, 0.3), inset 0 5px 5px -5px rgba(0, 0, 0, 0.3);
background: white;
margin: 10px;
position: relative;
z-index: 1; }
.search-form form [type="search"],
.header-search form [type="search"] {
background: #fff;
border: 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3) inset, 0 -1px 3px rgba(0, 0, 0, 0.2) inset, 0 2px 0 rgba(255, 255, 255, 0.4);
color: #333;
display: block;
float: left;
font-size: 1em;
height: auto;
margin: 0;
padding: 8px 10px;
width: 100%; }
.yes-js .header-inner .search-form,
.yes-js .header-inner .header-search {
display: none; }
.yes-js .header-inner .search-form form,
.yes-js .header-inner .header-search form {
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 10px;
position: relative;
top: 0;
width: 100%;
z-index: 999; }
@media only screen and (max-width: 620px) {
.banner .search-toggle {
right: 0; }
.no-svg .search-toggle,
.opera-mini .search-toggle {
background-image: url("https://assets.ubuntu.com/v1/75d8151d-search-white.png"); } }
@media only screen and (min-width: 620px) {
.banner .search-toggle {
display: none; } }
@media only screen and (min-width: 620px) {
.search-form,
.header-search {
background: none;
border-right: 0 none;
float: right;
margin-bottom: 0;
max-width: 220px;
overflow: hidden;
padding: 7px 0 5px 14px; }
.search-form form [type="text"],
.search-form form [type="search"],
.header-search form [type="text"],
.header-search form [type="search"] {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) inset;
box-sizing: content-box;
background-color: #dedede;
border: 0 solid #d8d8d8;
border-width: 0 0 1px;
color: #333;
font-size: .813em;
height: 24px;
margin-bottom: 0;
padding: .5em 2.5em .5em .5em;
transition: all .5s ease 0s;
width: 86px; }
.search-form form [type="text"]:focus,
.search-form form [type="search"]:focus,
.header-search form [type="text"]:focus,
.header-search form [type="search"]:focus {
background-color: lightgray;
border-color: #c4c4c4; }
.search-form .svg-search-handle,
.header-search .svg-search-handle {
fill: #333; }
.search-form .svg-search-frame,
.header-search .svg-search-frame {
stroke: #333; }
.search-form placeholder,
.header-search placeholder {
color: #333; }
.search-form input:placeholder,
.header-search input:placeholder {
color: #333; }
.search-form ::-webkit-input-placeholder,
.header-search ::-webkit-input-placeholder {
color: #333; }
.search-form ::-moz-placeholder,
.header-search ::-moz-placeholder {
color: #333; }
.search-form :-ms-input-placeholder,
.header-search :-ms-input-placeholder {
color: #333; }
.search-form ::placeholder,
.header-search ::placeholder {
color: #333; } }
@media only screen and (min-width: 620px) {
.header-search .svg-search-handle,
.search-form .svg-search-handle {
fill: #333; }
.header-search .svg-search-frame,
.search-form .svg-search-frame {
stroke: #333; }
.header-search placeholder,
.search-form placeholder {
color: #333; }
.header-search input:placeholder,
.search-form input:placeholder {
color: #333; }
.header-search ::-webkit-input-placeholder,
.search-form ::-webkit-input-placeholder {
color: #333; }
.header-search ::-moz-placeholder,
.search-form ::-moz-placeholder {
color: #333; }
.header-search :-ms-input-placeholder,
.search-form :-ms-input-placeholder {
color: #333; }
.header-search ::placeholder,
.search-form ::placeholder {
color: #333; } }
@media only screen and (max-width: 620px) {
.banner .nav-primary .header-search {
position: relative;
top: 0;
width: 100%; }
.banner .nav-primary .header-search [type="search"] {
background-color: #ebebeb;
color: #333; }
.banner .nav-primary .header-search [type="submit"] {
background-color: transparent;
height: 38px;
margin-top: 0;
width: 32px; }
.banner .nav-primary .header-search [type="submit"] img,
.banner .nav-primary .header-search [type="submit"] svg {
max-width: none; }
.banner .nav-primary .header-search.open {
display: block; }
.banner .search-toggle {
background-image: url("data:image/svg+xml;utf8, ");
background-position: center center;
background-repeat: no-repeat;
background-size: 25px auto;
cursor: pointer;
display: block;
height: 48px;
position: absolute;
right: 0;
text-indent: -99999px;
width: 48px; }
.no-svg .banner .search-toggle,
.opera-mini .banner .search-toggle {
background-image: url("https://assets.ubuntu.com/v1/2196e362-search-white.svg"); }
.opera-mini x:-o-prefocus,
.opera-mini .banner .search-toggle {
background-size: 25px auto; } }
@media only screen and (min-width: 620px) {
.search-form,
.header-search {
display: block; }
.search-form .svg-search-handle,
.header-search .svg-search-handle {
fill: #333; }
.search-form .svg-search-frame,
.header-search .svg-search-frame {
stroke: #333; }
.search-form form [type="text"]:focus,
.header-search form [type="text"]:focus {
width: 160px; }
.search-form [type="search"],
.search-form [type="text"],
.header-search [type="search"],
.header-search [type="text"] {
padding: 8px 10px; } }
@media only screen and (max-width: 1030px) {
.search-form,
.header-search {
margin-right: 10px; } }
@media only screen and (max-width: 620px) {
.banner .search-toggle {
right: 48px; } }
.ubuntu-search .nav-secondary,
.search-results .nav-secondary,
.search-no-results .nav-secondary {
display: none; }
.ubuntu-search section > h1,
.ubuntu-search section article h1,
.search-results section > h1,
.search-results section article h1,
.search-no-results section > h1,
.search-no-results section article h1 {
padding-bottom: 10px;
font-size: 1.438em;
margin-bottom: 0; }
.ubuntu-search section > h1,
.search-results section > h1,
.search-no-results section > h1 {
border-bottom: 1px dotted #cdcdcd; }
.ubuntu-search .main-search,
.search-results .main-search,
.search-no-results .main-search {
background-color: transparent;
margin: 0 0 20px;
padding: 20px 0; }
.ubuntu-search .main-search [type="search"],
.search-results .main-search [type="search"],
.search-no-results .main-search [type="search"] {
border: 1px solid #888;
float: left;
font-size: 2em;
padding: .2em 65px .2em .2em;
width: 100%; }
.ubuntu-search .main-search [type=submit],
.search-results .main-search [type=submit],
.search-no-results .main-search [type=submit] {
width: 32px;
height: 38px;
background-repeat: no-repeat;
background-position: center 8px;
background-color: transparent;
background-size: 28px 28px;
display: block;
float: left;
line-height: 0;
margin-left: -53px;
margin-top: -4px;
overflow: visible;
padding: 4px; }
.ubuntu-search .main-search [type=submit] img,
.search-results .main-search [type=submit] img,
.search-no-results .main-search [type=submit] img {
height: 45px;
width: 45px; }
.ubuntu-search .main-search [type=submit]:hover,
.search-results .main-search [type=submit]:hover,
.search-no-results .main-search [type=submit]:hover {
background: none; }
.ubuntu-search .search-result h1 .title-main,
.search-results .search-result h1 .title-main,
.search-no-results .search-result h1 .title-main {
margin-right: 20px; }
.ubuntu-search .search-result h1 .result-url,
.search-results .search-result h1 .result-url,
.search-no-results .search-result h1 .result-url {
color: #888;
display: block;
overflow: hidden;
padding-bottom: 2px;
text-overflow: ellipsis;
vertical-align: bottom; }
.ubuntu-search .search-result h1 .result-url a,
.search-results .search-result h1 .result-url a,
.search-no-results .search-result h1 .result-url a {
color: #888; }
.ubuntu-search .search-result p,
.search-results .search-result p,
.search-no-results .search-result p {
margin-bottom: 0; }
.ubuntu-search .num-results,
.search-results .num-results,
.search-no-results .num-results {
display: inline-block;
margin-left: 20px; }
.ubuntu-search .bottom-results-total,
.search-results .bottom-results-total,
.search-no-results .bottom-results-total {
margin: 0;
overflow: visible;
padding-top: 20px;
text-align: center;
width: 100%; }
.ubuntu-search .bottom-nav,
.search-results .bottom-nav,
.search-no-results .bottom-nav {
margin-top: -26px;
overflow: hidden; }
.ubuntu-search .bottom-nav ul,
.search-results .bottom-nav ul,
.search-no-results .bottom-nav ul {
margin-bottom: 0;
margin-left: 0;
overflow: hidden;
padding: 0; }
.ubuntu-search .bottom-nav li,
.search-results .bottom-nav li,
.search-no-results .bottom-nav li {
float: left;
margin-left: 15px; }
.ubuntu-search .bottom-nav li:first-child,
.search-results .bottom-nav li:first-child,
.search-no-results .bottom-nav li:first-child {
margin-left: 0; }
.ubuntu-search .nav-back,
.search-results .nav-back,
.search-no-results .nav-back {
float: left; }
.ubuntu-search .nav-back li:before,
.search-results .nav-back li:before,
.search-no-results .nav-back li:before {
color: #f7f7f7;
content: '\2039';
/* left chevron ‹ */
margin-right: 5px; }
.ubuntu-search .nav-back .item-extreme:before,
.search-results .nav-back .item-extreme:before,
.search-no-results .nav-back .item-extreme:before {
content: '\2039\2039';
/* double left chevron ‹ */ }
.ubuntu-search .nav-forward,
.search-results .nav-forward,
.search-no-results .nav-forward {
float: right; }
.ubuntu-search .nav-forward li:after,
.search-results .nav-forward li:after,
.search-no-results .nav-forward li:after {
color: #f7f7f7;
content: '\203A';
/* right chevron › */
margin-left: 5px; }
.ubuntu-search .nav-forward .item-extreme:after,
.search-results .nav-forward .item-extreme:after,
.search-no-results .nav-forward .item-extreme:after {
content: '\203A\203A';
/* double right chevron › */ }
.ubuntu-search .error-notification,
.search-results .error-notification,
.search-no-results .error-notification {
background-color: #fff;
color: #333;
display: block;
margin-top: 20px;
padding: 20px;
width: 100%; }
.ubuntu-search .result-line,
.search-results .result-line,
.search-no-results .result-line {
color: #888; }
.ubuntu-search .results-top,
.search-results .results-top,
.search-no-results .results-top {
border-bottom: 1px dotted #cdcdcd;
padding-bottom: .5em; }
.ubuntu-search .search-container,
.search-results .search-container,
.search-no-results .search-container {
padding-bottom: 0; }
@media only screen and (min-width: 620px) {
.ubuntu-search .main-search [type=submit] {
margin-left: -60px;
margin-top: 0; } }
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 300;
src: url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-l-webfont.woff2") format("woff2"), url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-l-webfont.woff") format("woff"); }
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-r-webfont.woff2") format("woff2"), url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-r-webfont.woff") format("woff"); }
@font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 700;
src: url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-b-webfont.woff2") format("woff2"), url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-b-webfont.woff") format("woff"); }
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 300;
src: url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-li-webfont.woff2") format("woff2"), url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-li-webfont.woff") format("woff"); }
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 400;
src: url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-ri-webfont.woff2") format("woff2"), url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-ri-webfont.woff") format("woff"); }
@font-face {
font-family: 'Ubuntu';
font-style: italic;
font-weight: 700;
src: url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-bi-webfont.woff2") format("woff2"), url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntu-bi-webfont.woff") format("woff"); }
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 400;
src: url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntumono-r-webfont.woff2") format("woff2"), url("https://assets.ubuntu.com/sites/ubuntu/latest/u/fonts/ubuntumono-r-webfont.woff") format("woff"); }
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
body {
color: #333;
font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-size: 16px;
font-weight: 300; }
a:focus {
outline: thin dotted; }
a:hover,
a:active {
outline: 0; }
a {
color: #e95420;
text-decoration: none; }
a:hover,
a:active,
a:focus {
text-decoration: underline; }
strong {
font-weight: 400; }
.caps-centered,
.muted-heading {
font-size: .875em;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase; }
small,
.smaller {
font-size: 13px; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
vertical-align: text-top; }
sub {
vertical-align: text-bottom; }
p + h2,
ul + h2,
ol + h2,
pre + h2 {
margin-top: 0.5625em; }
header nav a:link {
font-weight: normal; }
p + h3,
ul + h3,
ol + h3,
pre + h3 {
margin-top: .783em; }
p + h4,
ul + h4,
ol + h4,
pre + h4 {
margin-top: 1.21875; }
ol + h2,
p + h2,
pre + h2,
ul + h2 {
margin-top: .563em; }
ol + h3,
p + h3,
pre + h3,
ul + h3 {
margin-top: .783em; }
ol + h4,
p + h4,
pre + h4,
ul + h4 {
margin-top: 1.219em; }
.intro {
font-size: 1em;
line-height: 1.4; }
.row div p:last-child,
.row ul p:last-child {
margin-bottom: 0; }
.four-col p:last-child {
margin-bottom: 0; }
.note {
color: #888;
font-size: .813em; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Ubuntu, Arial, 'libra sans', sans-serif;
font-weight: 300;
line-height: 1.3; }
h1,
.heading-1 {
font-size: 2.8125em;
margin-bottom: .5em; }
h2,
.heading-2 {
font-size: 2em;
margin-bottom: .5em; }
h3,
.heading-3 {
font-size: 1.4375em;
margin-bottom: .522em; }
h4,
.heading-4 {
font-size: 1.25em;
font-weight: 400;
margin-bottom: .615em; }
h5,
.heading-5 {
font-size: 1em;
font-weight: 700;
margin-bottom: 1em; }
h6,
.heading-6 {
font-size: .8125em;
font-weight: 400;
margin-bottom: 1em;
letter-spacing: .1em;
text-transform: uppercase; }
p,
li {
font-size: 1em;
line-height: 1.5;
margin: 0;
margin-bottom: .75em;
padding: 0; }
button,
input,
select,
textarea {
font-family: Ubuntu,Arial,'libra sans',sans-serif; }
@media only screen and (min-width: 768px) and (max-width: 1030px) {
h1 {
font-size: 1.5234375em;
margin-bottom: .5em; }
h2 {
font-size: 1.348125em;
margin-bottom: .5em; }
h3 {
font-size: 1.1428125em;
margin-bottom: .522em; }
h4 {
font-size: 1.171875em;
font-weight: 400;
margin-bottom: .615em; }
h5 {
font-size: .9375em;
font-weight: 700;
margin-bottom: 1em; }
h6 {
font-size: .6778125em;
font-weight: 400;
margin-bottom: 1em;
letter-spacing: .1em;
text-transform: uppercase; }
.intro {
font-size: 1.13333em; } }
@media only screen and (max-width: 768px) {
h1 {
font-size: 1.421875em;
margin-bottom: .4375em; }
h2 {
font-size: 1.25825em;
margin-bottom: .4375em; }
h3 {
font-size: 1.066625em;
margin-bottom: .45675em; }
h4 {
font-size: 1.09375em;
font-weight: 400;
margin-bottom: .538125em; }
h5 {
font-size: .875em;
font-weight: 700;
margin-bottom: .875em; }
h6 {
font-size: .632625em;
font-weight: 400;
margin-bottom: .875em;
letter-spacing: .1em;
text-transform: uppercase; }
p,
li {
font-size: .875rem; } }
@media only screen and (min-width: 1030px) {
p,
li,
code,
pre {
font-size: 16px;
line-height: 1.5;
margin-bottom: .75em; }
.intro {
font-size: 1.25em; } }
dfn {
font-style: italic; }
code,
pre {
font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'Lucida Console', 'Courier New', Courier, monospace; }
table {
border-collapse: collapse;
border-spacing: 0;
overflow-x: scroll;
margin-bottom: 20px;
margin: 0 0 2.5em;
width: 100%; }
table th,
table td {
background: #f7f7f7;
border: 1px dotted #888;
padding: 15px 10px; }
table td {
text-align: center;
vertical-align: middle; }
table thead th {
border-collapse: separate;
border-spacing: 0 10px;
background: #fee3d2;
color: #333;
font-weight: normal; }
table tbody th {
font-weight: 300;
text-align: left; }
table th[scope='col'] {
text-align: center; }
table thead th:first-of-type {
text-align: left; }
@media only screen and (max-width: 768px) {
table {
display: block; } }
body footer.global #nav-global li:first-of-type a {
margin-left: 0; }
footer.global {
background: none;
border-top: 0;
box-shadow: inset 0 2px 2px -1px #cdcdcd;
clear: both;
display: block;
padding: 30px 10px 20px;
position: relative;
width: 100%; }
footer.global .legal {
background-image: none;
clear: both;
margin: 0 auto;
min-height: 40px;
position: relative;
width: 100%; }
footer.global .legal p,
footer.global .legal ul {
padding-left: 0; }
footer.global h2 {
font-size: .75em;
line-height: 1.4;
margin-bottom: 0;
padding-bottom: .5em; }
footer.global h2,
footer.global h2 a:link,
footer.global h2 a:visited {
color: #333;
font-weight: normal; }
footer.global ul {
margin: 0; }
footer.global li a:hover {
color: #e95420; }
footer.global li ul li a:link,
footer.global li ul li a:visited {
color: #333;
font-size: .75em; }
footer.global h2 a:hover,
footer.global h2 a:active {
color: #e95420; }
footer.global p {
color: #333;
font-size: 12px;
margin-bottom: 0; }
@media only screen and (max-width: 768px) {
footer.no-global .legal {
box-shadow: 0 2px 2px -1px #cdcdcd inset;
box-sizing: content-box;
margin-left: -10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px; } }
@media only screen and (min-width: 1030px) {
footer.global .legal {
width: 1030px; }
footer.global {
padding: 30px 0 20px; } }
svg:not(:root) {
overflow: hidden; }
figure {
width: 100%; }
figure caption {
display: block;
width: 100%;
text-align: center; }
object,
iframe,
embed,
canvas,
video,
audio {
display: block;
max-width: 100%;
margin: 0 auto 20px; }
audio:not([controls]) {
display: none;
height: 0; }
[hidden] {
display: none; }
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.video-container h3,
.video-container .video-title {
margin-top: 20px; }
.inline-logos {
float: left;
margin-left: 0;
padding: 0;
text-align: center;
width: 100%; }
.inline-logos .inline-logos__item {
display: inline-block;
margin-right: 20px;
padding: 0 0 20px;
width: 36%; }
@media only screen and (max-width: 300px) {
.inline-logos .inline-logos__item {
margin: 0 0 20px;
width: 100%; } }
.inline-logos .inline-logos__item.clear-row {
clear: left; }
.inline-logos .inline-logos__item.last-item {
border: 0; }
.inline-logos .inline-logos__image {
max-height: 32px;
max-width: 115px;
transition: all .3s ease-out;
vertical-align: middle; }
@media only screen and (min-width: 768px) {
.inline-logos {
padding-top: 20px; }
.inline-logos .inline-logos__item {
display: inline-block;
height: 56px;
line-height: 60px;
margin: 0 30px 30px;
width: 150px; }
.inline-logos .inline-logos__image {
float: none;
height: auto;
max-height: 56px;
max-width: 150px;
vertical-align: middle; } }
@media only screen and (min-width: 1030px) {
.inline-logos__item {
margin-bottom: 40px; } }
@media only screen and (min-width: 768px) {
.equal-height__align-vertically {
-webkit-align-items: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; } }
@media only screen and (min-width: 768px) {
.equal-height--vertical-divider {
position: relative; }
.equal-height--vertical-divider__item {
padding-left: 10px;
padding-right: 10px; }
.equal-height--vertical-divider__item:before {
content: '';
position: absolute;
right: -10px;
top: 0;
height: 100%;
width: 1px;
border-right: 1px dotted #888; }
.equal-height--vertical-divider .last-col, .equal-height--vertical-divider__item:last-of-type {
padding-right: 0; }
.equal-height--vertical-divider .last-col:before, .equal-height--vertical-divider__item:last-of-type:before {
border-right: 0; }
.equal-height--vertical-divider__item:first-of-type {
padding-left: 0; } }
@media only screen and (max-width: 768px) {
.equal-height--vertical-divider .equal-height--vertical-divider__item {
border-bottom: 1px dotted #888;
padding-bottom: 20px; }
.equal-height--vertical-divider .equal-height--vertical-divider__item:last-of-type {
border-bottom: 0;
padding-bottom: inherit; } }