Files
xrpl-dev-portal/css/main.css

991 lines
25 KiB
CSS

@font-face {
font-family: "rippleicons";
src: url("../font/icons-69f2993ae31bde255c4a342228474e94.eot");
src: url("../font/icons-69f2993ae31bde255c4a342228474e94.eot?#iefix") format("embedded-opentype"), url("../font/icons-69f2993ae31bde255c4a342228474e94.woff") format("woff"), url("../font/icons-69f2993ae31bde255c4a342228474e94.ttf") format("truetype"), url("../font/icons-69f2993ae31bde255c4a342228474e94.svg?#icons") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "rippleicons";
display: inline-block;
vertical-align: middle;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-ripple-logo:before {
font-family: "rippleicons";
display: inline-block;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
}
.icon-ripple-logo:before {
content: "\e001";
}
.modal-open {
overflow: hidden;
}
.modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-dialog {
position: relative;
margin-left: auto;
margin-right: auto;
width: auto;
padding: 10px;
z-index: 1050;
}
.modal-content {
position: relative;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
outline: none;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
filter: alpha(opacity=0);
}
.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50);
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
min-height: 16.428571429px;
}
.modal-header .close {
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.428571429;
}
.modal-body {
position: relative;
padding: 20px;
}
.modal-footer {
margin-top: 15px;
padding: 19px 20px 20px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-footer:before,
.modal-footer:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
@media screen and (min-width: 768px) {
.modal-dialog {
width: 600px;
padding-top: 30px;
padding-bottom: 30px;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
color: #898788;
font-family: 'Open Sans', sans-serif;
}
body .content-root {
background-color: #f3f6fb;
-webkit-box-shadow: inset 780px 0 #ffffff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0, 0, 0, 0.1);
box-shadow: inset 780px 0 #ffffff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0, 0, 0, 0.1);
}
body:not(.no-literate) .header {
position: relative;
}
body:not(.no-literate) .header .left .header-menu-button {
display: none;
position: absolute;
right: 20px;
top: 8px;
width: 40px;
height: 38px;
padding: 3px 4px;
border: 1px solid #ccc;
border-radius: 4px;
background: url('../img/burger.png') center no-repeat;
-moz-border-radius: 4px;
z-index: 888;
}
body:not(.no-literate) .header .left .header-menu-button svg {
z-index: -1;
}
body:not(.no-literate) .header .right {
width: 50px;
}
body:not(.no-literate) .header .right iframe {
width: 50px;
}
body:not(.no-literate) .content-root {
background: #4a4a4c;
}
body:not(.no-literate) .content > pre,
body:not(.no-literate) .content > blockquote {
color: #fff;
}
body:not(.no-literate) a {
color: #517ab8;
}
body:not(.no-literate) .content {
width: 100%;
overflow-x: hidden;
padding-top: 10px;
/********************** CODE *****************/
/********************** CODE *****************/
}
body:not(.no-literate) .content > h1,
body:not(.no-literate) .content > h2,
body:not(.no-literate) .content > h3 {
color: #474648;
font-family: 'Open Sans', sans-serif;
}
body:not(.no-literate) .content h1,
body:not(.no-literate) .content h2,
body:not(.no-literate) .content .big-heading,
body:not(.no-literate) .content h3 {
padding-top: 20px;
padding-bottom: 10px;
}
body:not(.no-literate) .content h1:before,
body:not(.no-literate) .content h2:before,
body:not(.no-literate) .content .big-heading:before,
body:not(.no-literate) .content h3:before {
display: none;
}
body:not(.no-literate) .content h1 {
font-size: 25px;
}
body:not(.no-literate) .content h2 {
font-size: 20px;
}
body:not(.no-literate) .content h3 {
font-size: 17px;
}
body:not(.no-literate) .content pre {
display: block;
position: relative;
float: left;
width: 40%;
width: -moz-calc(100% - 550px);
width: -webkit-calc(100% - 550px);
width: -o-calc(100% - 550px);
width: calc(100% - 550px);
overflow-x: auto;
}
body:not(.no-literate) .content pre:after {
content: ".";
display: block;
visibility: hidden;
line-height: 0;
height: 0;
}
body:not(.no-literate) .content pre code {
color: #fff;
word-wrap: break-word;
}
body:not(.no-literate) .content ul + pre {
width: -moz-calc(100% - 570px);
width: -webkit-calc(100% - 570px);
width: -o-calc(100% - 570px);
width: calc(100% - 570px);
}
body:not(.no-literate) .content li {
position: relative;
}
body:not(.no-literate) .content li pre {
width: -moz-calc(100% - 620px);
width: -webkit-calc(100% - 620px);
width: -o-calc(100% - 620px);
width: calc(100% + 620px);
padding-left: calc(100% + 40px);
overflow: inherit;
}
body:not(.no-literate) .guidelines-content {
box-shadow: none;
background: #fff;
color: #6E6F7E;
padding: 0 15%;
}
body:not(.no-literate) .guidelines-content .content {
padding-top: 20px;
}
body:not(.no-literate) .guidelines-content .terms-conditions-link-container {
font-size: 15px;
background: #F3EEAE;
border: 1px solid #e6db55;
padding: 10px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin: 15px 0;
color: #695221;
}
body:not(.no-literate) .guidelines-content .terms-conditions-link-container a {
text-decoration: underline;
color: #695221;
}
body:not(.no-literate) .guidelines-content .download-all {
text-align: center;
font-size: 15px;
background: #F9FAFC;
border: 1px solid #b5c1da;
padding: 10px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin: 20px 0 20px;
}
body:not(.no-literate) .guidelines-content .download-all a {
cursor: pointer;
color: #507BBA;
font-weight: bold;
font-size: 18px;
}
body:not(.no-literate) .guidelines-content .download-all a svg {
display: inline-block;
margin-top: -3px;
vertical-align: middle;
}
body:not(.no-literate) .guidelines-content .brand-guidelines-row {
overflow: hidden;
padding-bottom: 25px;
position: relative;
}
body:not(.no-literate) .guidelines-content .brand-guidelines-row p {
padding: 0;
color: #6E6E70;
font-size: 14px;
}
body:not(.no-literate) .guidelines-content .brand-guidelines-row p a {
text-decoration: underline;
}
body:not(.no-literate) .guidelines-content .brand-guidelines-row p strong {
color: #346AA9;
}
body:not(.no-literate) .guidelines-content .brand-guidelines-title {
color: #474648;
font-weight: 600;
font-family: 'Open sans' sans-serif;
border: 0;
}
body:not(.no-literate) .guidelines-content .terms-conditions-content p {
margin-bottom: 20px;
color: #6E6E70;
}
body:not(.no-literate) .guidelines-content .terms-conditions-content p + h2 {
padding-top: 0;
}
body:not(.no-literate) .guidelines-content .xrp-logos {
text-align: center;
overflow: hidden;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo {
position: relative;
display: inline-block;
width: 32%;
float: left;
margin-right: 2%;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 7px;
moz-border-radius: 7px;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo:nth-of-type(3n+3) {
margin-right: 0;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container {
padding-bottom: 90%;
position: relative;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container {
padding-top: 23%;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
background-position: center;
background-repeat: no-repeat;
background-size: 90%;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container.logo-triskelion {
background-image: url(../img/ripple-triskelion.png);
background-size: 50%;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container.logotype {
background-image: url(../img/logotype.png);
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container.logo-full {
background-image: url(../img/logo-lg.png);
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container.badge-blue,
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container.badge-gray {
background-size: 52%;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container.bg-badge-white {
background-image: url(../img/badge-white.png);
background-size: 80%;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-download-link {
position: absolute;
bottom: 0;
text-decoration: none;
left: 0;
display: block;
width: 100%;
background: #F5F5F5;
height: 50px;
line-height: 50px;
font-weight: bold;
font-size: 17px;
border-top: 1px solid #ddd;
border-radius: 0 0 7px 7px;
moz-border-radius: 0 0 7px 7px;
cursor: pointer;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-download-link:hover {
color: #346AA9;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-download-link svg {
display: inline-block;
margin-top: -2px;
vertical-align: middle;
}
body:not(.no-literate) .guidelines-content .brand-usage-types {
padding-top: 25px;
}
body:not(.no-literate) .guidelines-content .brand-usage-types hr {
display: block;
width: 39%;
float: left;
border-color: #ddd;
}
body:not(.no-literate) .guidelines-content .brand-usage-types .unacceptable {
float: left;
}
body:not(.no-literate) .guidelines-content .usage-brand {
overflow: hidden;
margin-bottom: 30px;
}
body:not(.no-literate) .guidelines-content .usage-brand .brand-img {
width: 40%;
padding-right: 30px;
float: left;
}
body:not(.no-literate) .guidelines-content .usage-brand .brand-img img {
width: 100%;
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info {
float: left;
width: 60%;
padding-left: 55px;
position: relative;
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info:before {
content: "";
height: 16px;
position: absolute;
left: 25px;
top: 2px;
display: block;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info.acceptable-use:before {
width: 20px;
background-image: url('../img/icon-check.png');
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info.unacceptable-use:before {
top: 3px;
width: 16px;
background-image: url('../img/icon-remove.png');
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info span {
font-size: 14px;
font-weight: bold;
display: block;
color: #474648;
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info li {
font-size: 14px;
padding-left: 20px;
}
body:not(.no-literate) .guidelines-content hr {
margin-bottom: 30px;
}
body:not(.no-literate) .guidelines-content .attribution-badges {
margin-bottom: 50px;
padding-top: 25px;
overflow: hidden;
text-align: center;
}
body:not(.no-literate) .guidelines-content .attribution-badges > div {
width: 25%;
min-width: 140px;
display: inline-block;
text-align: center;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge {
position: relative;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge span.badge-blue {
margin: 0 auto 20px;
width: 100%;
height: 100px;
display: block;
background: url('../img/Ripple_attribution_badge_blue.svg') center no-repeat;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge span.badge-gray {
margin: 0 auto 20px;
width: 100%;
height: 100px;
display: block;
background: url('../img/Ripple_attribution_badge_gray.svg') center no-repeat;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge span.badge-white {
margin: 0 auto 20px;
width: 100%;
height: 100px;
display: block;
background: url('../img/Ripple_attribution_badge_white.svg') #000000 center no-repeat;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge a.download-logo {
display: none;
opacity: 0.6;
position: absolute;
top: 0;
right: 10%;
width: 33px;
height: 28px;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge a.download-logo svg {
width: 33px;
height: 28px;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge:hover a.download-logo {
display: block;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge:hover a.download-logo:hover {
opacity: 1;
}
body:not(.no-literate) .guidelines-content .badge-example {
padding-bottom: 15px;
position: relative;
}
body:not(.no-literate) .guidelines-content .badge-example img {
width: 100%;
}
body:not(.no-literate) .guidelines-content .badge-example .badge-location {
text-align: center;
font-size: 12px;
position: absolute;
bottom: 0;
display: inline-block;
}
body:not(.no-literate) .guidelines-content .badge-example .badge-location.left {
left: 0;
}
body:not(.no-literate) .guidelines-content .badge-example .badge-location.right {
left: auto;
right: 0;
}
body:not(.no-literate) .guidelines-content .badge-example .badge-location.center {
left: 50%;
margin-left: -75px;
}
body:not(.no-literate) .guidelines-content .badge-example .badge-location:before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
width: 1px;
height: 70px;
border-left: 1px solid #EC008D;
}
body:not(.no-literate) .guidelines-content .badge-example .badge-location:after {
color: #EC008D;
content: "●";
position: absolute;
bottom: 100%;
left: 50%;
line-height: 4px;
margin-left: -3px;
}
.modal .modal-body .modal-body-content {
height: 360px;
overflow-x: auto;
border: 1px solid #ccc;
color: #323332;
padding: 10px 15px;
font-size: 14px;
}
.modal .modal-header {
position: relative;
background: #326BAA;
padding: 20px 30px;
}
.modal .modal-header .modal-title {
color: #FFFFFF;
font-size: 19px;
}
.modal .modal-header .close {
position: absolute;
right: 15px;
top: 15px;
font-size: 30px;
line-height: 15px;
height: 15px;
color: #93A5CF;
}
.modal .modal-footer {
border-top: 0;
margin: 0;
padding-top: 10px;
text-align: center;
}
.modal .modal-footer .btn {
color: #fff;
font-size: 17px;
text-align: center;
padding: 13px 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 170px;
display: inline-block;
outline: none;
border: 0;
}
.modal .modal-footer .btn.btn-download {
background: #56B95C;
cursor: pointer;
}
.modal .modal-footer .btn.btn-disabled {
background: #ccc;
cursor: default;
}
.modal .modal-footer .modal-checkbox {
text-align: left;
padding-bottom: 10px;
}
.modal .modal-footer .modal-checkbox label {
display: inline-block;
vertical-align: top;
color: #323332;
font-size: 17px;
}
.modal .modal-footer .modal-checkbox input {
margin: 7px 5px 2px 0;
}
.badge-blue {
margin: 0 auto 20px;
width: 135px;
height: 58px;
display: inline-block;
background: url('../img/Ripple_attribution_badge_blue.svg') center no-repeat;
}
.badge-gray {
margin: 0 auto 20px;
width: 135px;
height: 58px;
display: inline-block;
background: url('../img/Ripple_attribution_badge_gray.svg') center no-repeat;
}
.badge-white {
margin: 0 auto 20px;
width: 135px;
height: 58px;
display: inline-block;
background: url('../img/Ripple_attribution_badge_white.svg') #000000 center no-repeat;
}
.menubar .section {
padding-top: 10px;
}
.menu a {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
.menu a.level-1 {
color: #474648;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
.menu a.level-2 {
padding-left: 25px;
color: #466db2;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
.menu a.level-2.active {
color: #517ab8 !important;
}
.menu a.level-3 {
padding-left: 50px;
color: #7A7979;
}
.menu a.level-3:before {
content: "- ";
}
.menu a.active {
border: solid 1px #CED3E1 !important;
background: rgba(206, 211, 225, 0.5);
}
.menu a.active:after {
display: none;
}
.menu a.active:hover {
color: #517ab8 !important;
}
.menu li.level-2 a {
border: solid 1px transparent;
}
.menu li.level-2 a:hover,
.menu li.level-2 a:active {
border: solid 1px #CED3E1;
background: rgba(206, 211, 225, 0.5);
}
.header {
background: #5d89ae;
padding-top: 0;
padding-bottom: 0;
height: 56px;
position: relative;
-webkit-box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, 0.1);
}
.header h1 {
border: 0;
margin-top: -3px;
color: #fff;
font-size: 30px;
line-height: 56px;
font-weight: normal;
font-family: 'Open Sans', sans-serif;
}
.header h1 i {
display: inline-block;
margin-top: -2px;
margin: 0 5px;
font-size: 24px;
line-height: 56px;
vertical-align: top;
}
.header h1 + ul {
margin-left: 30px;
border: 0;
}
.header h1 + ul li {
display: inline-block;
border: 0;
}
.header h1 + ul li a {
border: 0;
display: inline-block;
line-height: 56px;
padding: 0 20px;
color: #fff;
font-size: 13px;
text-shadow: none;
}
.header h1 + ul li a:hover {
color: #fff;
text-decoration: none;
}
.header h1 + ul li.active a,
.header h1 + ul li:hover a {
background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 1180px) {
body:not(.no-literate) .modal .modal-dialog {
width: 700px;
}
}
@media (max-width: 1180px) {
body:not(.no-literate) .body .content-root {
background: #fff;
box-shadow: none;
width: 100%;
}
body:not(.no-literate) .content pre {
width: 100%;
overflow-x: auto;
float: none;
}
body:not(.no-literate) .content pre code {
color: #000;
padding-left: 20px;
}
body:not(.no-literate) .content li pre {
width: 100%;
padding-left: 0;
}
body:not(.no-literate) .content li pre code {
padding-left: 20px;
color: #000;
}
body:not(.no-literate) .content ul + pre {
width: 100%;
}
body:not(.no-literate) .guidelines-content {
padding: 0;
}
body:not(.no-literate) .guidelines-content .content {
padding-top: 50px;
}
.content {
width: 100%;
max-width: 100%;
background: #fff;
}
.content pre {
width: 100%;
padding-left: 0;
}
}
@media (max-width: 900px) {
body:not(.no-literate) .guidelines-content {
padding: 0;
}
body:not(.no-literate) .guidelines-content .content {
padding: 0 20px;
padding-top: 50px;
}
body:not(.no-literate) .guidelines-content .brand-guidelines-row {
padding-bottom: 50px;
}
body:not(.no-literate) .guidelines-content .brand-guidelines-row .guidelines-label {
padding: 0;
text-align: center;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo {
width: 49%;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo:nth-of-type(3n+3) {
margin-right: 2%;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo:nth-of-type(even) {
margin-right: 0;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo a.logo-download-link {
line-height: 40px;
height: 40px;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container {
height: -webkit-calc(100% - 40px);
height: -moz-calc(100% - 40px);
height: calc(100% - 40px);
}
body:not(.no-literate) .guidelines-content .guidelines-graphics-part {
margin-bottom: 30px;
width: 100%;
}
body:not(.no-literate) .guidelines-content .guidelines-text-part {
width: 100%;
max-width: 100%;
padding-bottom: 50px;
}
body:not(.no-literate) .guidelines-content .guidelines-text-part .brand-guidelines-title,
body:not(.no-literate) .guidelines-content .guidelines-text-part p {
max-width: 100%;
}
body:not(.no-literate) .guidelines-content .logo-trademark-guideline .colors-info ul {
width: 100%;
}
body:not(.no-literate) .guidelines-content .logo-trademark-guideline .colors-info ul li {
width: 33%;
}
body:not(.no-literate) .guidelines-content .badge-example .badge-location {
font-size: 10px;
}
body:not(.no-literate) .guidelines-content .badge-example .badge-location:before {
height: 60px;
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info {
width: 100%;
}
body:not(.no-literate) .guidelines-content .usage-brand .brand-img {
padding: 0 10%;
width: 100%;
margin-bottom: 20px;
}
body:not(.no-literate) .guidelines-content .usage-brand .brand-img img {
max-width: 365px;
}
}
@media (max-width: 700px) {
body:not(.no-literate) .header {
position: relative;
}
body:not(.no-literate) .header .left .header-menu-button {
display: inline-block;
}
body:not(.no-literate) .header .left ul {
margin: 0;
display: none;
position: absolute;
width: 100%;
top: 100%;
left: 0;
background-color: #5D89AE;
border: 1px solid #fff;
border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
z-index: 999;
}
body:not(.no-literate) .header .left ul li {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
padding: 0;
}
body:not(.no-literate) .header .left ul li a {
width: 100%;
font-weight: normal;
font-size: 18px;
line-height: 50px;
border-bottom: 1px solid #fff;
height: 50px;
}
body:not(.no-literate) .header .left ul li:last-child a {
border-bottom: 0px solid #fff;
}
body:not(.no-literate) .header .left ul.active {
display: block;
}
body:not(.no-literate) .header .right {
right: 90px;
width: 50px;
}
}
@media (max-width: 400px) {
body:not(.no-literate) .header {
position: relative;
}
body:not(.no-literate) .header .left .header-menu-button {
display: inline-block;
}
body:not(.no-literate) .header .left ul {
display: none;
}
body:not(.no-literate) .guidelines-content .content {
padding-top: 0;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo {
width: 100%;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo:nth-of-type(3n+3) {
margin-right: 0;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo:nth-of-type(even) {
margin-right: 0;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo a.logo-download-link {
line-height: 50px;
height: 50px;
}
body:not(.no-literate) .guidelines-content .xrp-logos .xrp-logo .logo-container .bg-container {
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
}
body:not(.no-literate) .guidelines-content .brand-usage-types hr {
width: 100%;
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info {
padding-left: 20px;
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info:before {
left: 0;
}
body:not(.no-literate) .guidelines-content .usage-brand .usage-brand-info ul li {
padding-left: 0;
}
body:not(.no-literate) .guidelines-content .attribution-badges {
margin-bottom: 15px;
}
body:not(.no-literate) .guidelines-content .attribution-badges > div {
width: 100%;
margin-bottom: 15px;
}
body:not(.no-literate) .guidelines-content .attribution-badges .attribution-badge span {
margin-bottom: 5px !important;
}
body:not(.no-literate) .guidelines-content .badge-example {
display: none;
}
}