@import "icons.less";
@import "modals.less";
@import "variables.less";
@import "mixins";
*{
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

body{
	color: #898788;
	font-family: 'Open Sans', sans-serif;
	.content-root {
		background-color: #f3f6fb;
		-webkit-box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
		 box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1); 
	}
	
	&:not(.no-literate){ 
		.header {
			position: relative;
			.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;
					svg {
						z-index: -1;
					}
				}
			}
			.right {
				width: 50px;
				iframe {
					width: 50px;
				}
			}
		}
		.content-root{
			background: #4a4a4c;
		}	
		.content > pre, .content > blockquote {
			color: #fff;
		}
		a{
			color:#517ab8;
		}
		.content{

			width: 100%;
			overflow-x: hidden;
			padding-top: 10px;
			&>h1,&>h2,&>h3{
				color: #474648;				
				font-family: 'Open Sans', sans-serif;
				text-transform: capitalize;
			}
			h1,  h2, .big-heading, h3{
				padding-top: 20px;
				padding-bottom: 10px;
				&:before{
					display: none;
				}
			}
			h1 {
				font-size: 25px
			}
			h2 {
				font-size: 20px;
			}
			h3 {
				font-size: 17px; 
			}
			/**********************       CODE      *****************/ 
			
			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;
				
				&:after {
					content: ".";
					display: block;
					
					visibility: hidden;
					line-height: 0;
					height: 0;
				}

				code{
					color: #fff;
					word-wrap:break-word;
				}

			}

			ul + pre {
				width: -moz-calc(~"100% - 570px");
				width: -webkit-calc(~"100% - 570px");
				width: -o-calc(~"100% - 570px");
				width: calc(~"100% - 570px");
			}
			li {
				position: relative;
				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;
				 code{
				 	
				 }
				   
				}
			}
			ul,p,pre,h1,h2,h3,h4,h5,h6,blockquote {
				
			}
			
			/**********************       CODE      *****************/ 
		}
		
		.guidelines-content {
			box-shadow: none;
			background: #fff;
			color: #6E6F7E;
			padding:0 15%;
			.content {
				padding-top: 20px;
			}
			.terms-conditions-link-container {
				font-size: 15px;
				background: #F3EEAE;
				border: 1px solid darken(#F3EEAE, 20%);
				padding: 10px 20px;
				border-radius: 5px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				margin: 15px 0;
				color: #695221;
				a {
					text-decoration: underline;
					color: #695221;
				}
			}
			.download-all {
				text-align: center;
				font-size: 15px;
				background: #F9FAFC;
				border: 1px solid darken(#F9FAFC, 20%);
				padding: 10px 20px;
				border-radius: 5px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				margin: 20px 0 20px;
				a {
					cursor: pointer;
					color: #507BBA;
					font-weight: bold;
					font-size: 18px;
					svg {
						display: inline-block;
						margin-top: -3px;
						vertical-align: middle;
					}
				}
			}
			.brand-guidelines-row {
				overflow: hidden;
				padding-bottom: 25px;
				position: relative;	

				p {
					padding: 0;
					color: #6E6E70;
					font-size: 14px;
					a {
						text-decoration: underline;
					}
					strong {
						color: #346AA9;
					}
				}			
			}
			.brand-guidelines-title {
				color: #474648;
				text-transform: inherit;
				font-weight: 600;
				font-family: 'Open sans' sans-serif;
				border: 0;
			}
			.terms-conditions-content {
				p {
					margin-bottom: 20px;
					color: #6E6E70;
					&+h2{
						padding-top: 0;
					}
				}
				
			}
			.xrp-logos {
				text-align: center;
				overflow: hidden;
				.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;

					&:nth-of-type(3n+3) {
						margin-right: 0;
					}

					.logo-container {						
						padding-bottom: 90%;
						position: relative;
						.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%;
							&.logo-triskelion {
								background-image: url(../img/ripple-triskelion.png);
								background-size: 50%;
							}
							&.logotype {
								background-image: url(../img/logotype.png);
								
							}	
							&.logo-full {
								background-image: url(../img/logo-lg.png);
							}
							&.badge-blue, &.badge-gray {
								background-size: 52%;
							}
							&.bg-badge-white {
								background-image: url(../img/badge-white.png);
								background-size: 80%;
							}
						}
					}
					.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;
						&:hover {
							color: #346AA9;
						}
						svg {
							display: inline-block;
							margin-top: -2px;
							vertical-align: middle;
						}
					}
				}
			}
			
			
			
			.brand-usage-types {
				padding-top: 25px;
				hr {
					display: block;
					width: 39%;
					float: left;
					border-color: #ddd;
				}
				.unacceptable {
					float: left;
				}
			}
			.usage-brand {
				overflow: hidden;
				margin-bottom: 30px;
				.brand-img {
					width: 40%;
					padding-right: 30px;
					float: left;
					img {
						width: 100%;
					}
				}
				.usage-brand-info {
					float: left;
					width: 60%;
					padding-left: 55px;
					position: relative;
					&:before {
						content: "";
						height: 16px;						
						position: absolute;
						left: 25px;
						top:2px;
						display: block;
						background-position: center;
						background-size: contain;
						background-repeat: no-repeat;
					}
					&.acceptable-use:before {
						width: 20px;
						background-image: url('../img/icon-check.png');
						
					}
					&.unacceptable-use:before {						
						top: 3px;
						width: 16px;
						background-image: url('../img/icon-remove.png');
					}
					span {
						font-size: 14px;
						font-weight: bold;
						display: block;
						color: #474648;						

					}
					li {
						font-size: 14px;
						padding-left: 20px;
					}

				}
			}
			hr {
				margin-bottom: 30px;
			}
			
			.attribution-badges {
				margin-bottom: 50px;
				padding-top: 25px;
				overflow: hidden;
				text-align: center;
				&>div {
					width: 25%;
					min-width: 140px;
					display: inline-block;
					text-align: center;
				}
				.attribution-badge {
					position: relative;
					span.badge-blue {
						margin: 0 auto 20px;
						width: 100%;
						height: 100px;
						display: block;
						background: url('../img/Ripple_attribution_badge_blue.svg') center no-repeat;
					}
					span.badge-gray {
						margin: 0 auto 20px;
						width: 100%;
						height: 100px;
						display: block;
						background: url('../img/Ripple_attribution_badge_gray.svg') center no-repeat;
					}
				
					span.badge-white {						
						margin: 0 auto 20px;
						width: 100%;
						height: 100px;
						display: block;
						background: url('../img/Ripple_attribution_badge_white.svg') #000 center no-repeat;
					}
					a.download-logo {
						display: none;
						opacity: 0.6;
						position: absolute;
						top: 0;
						right: 10%;
						width: 33px;
						height: 28px;
						svg   {
							width: 33px;
							height: 28px;
						}
					}
					&:hover {
						a.download-logo {
							display: block;
							&:hover {
								opacity: 1;
							}
						}
					}
				}
			}
			.badge-example {
				padding-bottom: 15px;
				position: relative;
				img { 
					width: 100%;
				}
				.badge-location {
					text-align: center;
					font-size: 12px;
					position: absolute;
					bottom: 0;
					display: inline-block;
					
					&.left {
						left: 0;
					}
					&.right {
						left: auto;
						right: 0;
					}
					&.center {
						left: 50%;
						margin-left: -75px;
					}
					&:before {
						content: "";
						position: absolute;
						bottom: 100%;
						left: 50%;
						width: 1px;
						height: 70px;
						border-left: 1px solid #EC008D;

					}
					&: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-header {
		position: relative;
		background: #326BAA;
		padding: 20px 30px;
		.modal-title {
			color: #FFFFFF;
			font-size: 19px;
			
		}
		.close {
			position: absolute;
			right: 15px;
			top: 15px;
			font-size: 30px;
			line-height: 15px;
			height: 15px;
			color: #93A5CF;
		}
	}
	.modal-footer {
		border-top: 0;
		margin: 0;
		padding-top: 10px;
		text-align: center;
		.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;

			&.btn-download {
				background: #56B95C;
				cursor: pointer;
			}
			&.btn-disabled {
				background: #ccc;
				cursor: default;
			}
		}
		.modal-checkbox {
			text-align: left;
			padding-bottom: 10px;
			label {
				display: inline-block;
				vertical-align: top;
				color: #323332;
				font-size: 17px;
			}
			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') #000 center no-repeat;
}
.menubar .section{
	padding-top: 10px;
}
.menu{
	a{
		font-family: 'Open Sans', sans-serif;
		font-size: 13px;

		&.level-1{
			color: #474648;
			font-size: 13px;
			font-family: 'Open Sans', sans-serif;
			text-transform: capitalize;
		}
		&.level-2{
			padding-left: 25px;	
			color: #466db2;
			font-size: 13px;
			font-family: 'Open Sans', sans-serif;
			text-transform: capitalize;
			&.active {
				color: #517ab8 !important;
				
			}
		}
		&.level-3 {
			padding-left: 50px;
			color: #7A7979;
			&:before {
				content: "- ";
			}
		}
		&.active{
			
			border: solid 1px #CED3E1 !important;
			background: rgba(206, 211, 225, 0.5);
			&:after{
				display: none;
			}
			&:hover {
				color: #517ab8 !important;
			}
		}
	}
	
	li.level-2{
		
		a {
			border: solid 1px transparent;
			
			&:hover, &: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);
	h1{
		border:0;
		margin-top: -3px;
		color: #fff;
		font-size: 30px;
		line-height: 56px;
		font-weight: normal;
		font-family: 'Open Sans', sans-serif;		
		i{
			display: inline-block;
			margin-top: -2px;
			margin: 0 5px;
			font-size: 24px;
			line-height: 56px;
			vertical-align: top;
		}
	}
	h1 + ul{
		margin-left: 30px;
		border:0;
		li{
			display: inline-block;
			border:0;
			// margin-right: 10px;
			a{
				border:0;
				display: inline-block;
				line-height: 56px;
				padding: 0 20px;
				color: #fff;		
				font-size: 13px;	
				text-shadow:none;
				&:hover{
					color: #fff;			
					text-decoration: none;
				}
			}
			&.active, &: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%;
			}
			.content {
				pre {
					width: 100%;
					
					overflow-x: auto;
					float: none;
					code {
						color: #000;
						padding-left: 20px;
					}
				}
				li {
					pre {
						width: 100%;
						padding-left: 0;
						code{
							padding-left: 20px;
							color: #000;
						}
					}
				}
				ul + pre {
					width: 100%;
				}

			}
			.guidelines-content {
				padding: 0;
				.content {
					padding-top: 50px;
				}
			}
		}		
	}
	.content {
		width: 100%;
		max-width: 100%;
		background: #fff;
		pre {
			width: 100%;
			padding-left: 0;
		}
		
	}
}
@media (max-width: 900px) {
	body{

		&:not(.no-literate){ 			
			.guidelines-content {
				padding: 0;
				.content {
					padding: 0 20px;
					padding-top: 50px;
				}
				.brand-guidelines-row {
					padding-bottom: 50px;
					.guidelines-label {
						padding: 0;
						text-align: center;
					}

				}
				.xrp-logos {
					.xrp-logo {
						width: 49%;
						&:nth-of-type(3n+3) {
							margin-right: 2%;
						}
						&:nth-of-type(even) {
							margin-right: 0;
						}
						a.logo-download-link {
							line-height: 40px;
							height: 40px;
						}

						.logo-container .bg-container {
							height: -webkit-calc(~"100% - 40px");
							height: -moz-calc(~"100% - 40px");
							height: calc(~"100% - 40px");
						}
					}
				}
				.guidelines-graphics-part{
					margin-bottom: 30px;
					width: 100%;						
				}
				.guidelines-text-part {
					width: 100%;
					max-width: 100%;
					padding-bottom:  50px;
					.brand-guidelines-title,p {
						max-width: 100%;
					}
				}
				.logo-trademark-guideline {
					.colors-info {
						ul {
							width: 100%;
							li{
								width: 33%;
							}
						}
					}
				}
				.badge-example {
					.badge-location {
						font-size: 10px;
						&:before {
							height: 60px;
						}
					}
				}
				.usage-brand {
					.usage-brand-info {
						width: 100%;
					}
					.brand-img {
						padding: 0 10%;
						width: 100%;
						margin-bottom: 20px;
						img {
							max-width: 365px;
						}
					}
				}
				
			}
		}		
	}
}


@media (max-width: 700px) {
	body{

		&:not(.no-literate){ 
			.header {
				position: relative;
				.left {
					.header-menu-button {
						display: inline-block;						
					}
					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;
						li {
							display: block;
							width: 100%;
							height: 50px;
							line-height: 50px;								
							padding: 0;
							a {
								width: 100%;
								
								font-weight: normal;
								font-size: 18px;
								line-height: 50px;	
								border-bottom: 1px solid #fff;
								height: 50px;	
							}
							&:last-child {
								a {
									border-bottom: 0px solid #fff;
								}
							}
						}
						&.active {
							display: block;
						}
					}

				}
				.right {
					right: 90px;
					width: 50px;										
				}
			}
		}
	}
}



@media (max-width: 400px) {

	body{

		&:not(.no-literate){ 
			.header {
				position: relative;
				.left {
					.header-menu-button {
						display: inline-block;						
					}
					ul {
						display: none;
					}
				}
			}
			.guidelines-content {
				.content {
					padding-top: 0;
				}

				.xrp-logos {

					.xrp-logo {

						width: 100%;
						&:nth-of-type(3n+3) {
							margin-right: 0;
						}
						&:nth-of-type(even) {
							margin-right: 0;
						}
						a.logo-download-link {
							line-height: 50px;
							height: 50px;
						}
						.logo-container .bg-container {
							height: -webkit-calc(~"100% - 50px");
							height: -moz-calc(~"100% - 50px");
							height: calc(~"100% - 50px");
						}
					}
				}
				.brand-usage-types {
					hr {
						width: 100%;
					}
				}
				.usage-brand {
					
					.usage-brand-info {
						padding-left: 20px;
						&:before {
							left: 0;
						}
						ul {
							li {
								padding-left: 0;
							}
						}
					}
				}
				.attribution-badges {
					margin-bottom: 15px;
					&>div {
						width: 100%;
						margin-bottom: 15px;
					}
					.attribution-badge {

						span {
							margin-bottom:  5px !important;
						}
					}

				}
				.badge-example {
					display: none;
				}
			}
		}
	}
}