/* Please keep this file [✓] UTF-8 encoded */


/* undo FOUC-fixing inline-stylesheets */
body {
    background-image:none !important;
}
body #wrapper {
    display:block !important;
}



/* Page header - override bootstrap defaults */
.page-header {
    padding: 0em 2.0em 2.0em 2.0em;
    margin: 0;
    border-bottom: 0;
    color:#fff;
    position:relative;
    
    /* gradient background */
    background: #8d56A8; /* Old browsers */
    background: -moz-linear-gradient(top,  #8d56A8 0%, #6d3688 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #8d56A8 0%, #6d3688 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #8d56A8 0%, #6d3688 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d56a8', endColorstr='#6d3688',GradientType=0 ); /* IE6-9 */
    
}
.page-header img {
    vertical-align:text-bottom;
    max-width:40%;
    height:auto;
}
.page-header img#metrics-logo {
    height:75px;
    width:auto !important;
}
.page-header div {
    text-align:right;
    position:absolute;
    right:2.5em;
    bottom: 0.9em;
    max-width: 400px;
}
.page-header div p {
    font-size: 14px;
    line-height: 16px;
}
@media (max-width: 767.99999px) {
    .page-header {
        display:none;
    }
    .navbar-header .navbar-brand.visible-xs {
        display:block !important;
    }
    .navbar.hidden-xs {
        display:none;
    }
}
@media (max-width: 1199.99999px) {
    .page-header div {
        max-width:330px;
    }
    .page-header div p {
        font-size:12px;
        line-height:14px;
    }
}




/* general font and color */
body {
    background-color: #fff;
    color: black;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    line-height: 24px;
}
@media (max-width: 991.99999px) {
    body {
        font-size: 14px;
        line-height: 21px;
    }
}


/* primary button color */
.btn-primary {
    color: #fff !important;
    background-color: #8d56A8;
    border-color: #7d4698;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #7d4698;
    border-color: #6d3688;
}


/* format secondary navigation */
@media (min-width: 768px) {
    .navbar-secondary {
        margin-bottom: 0;
        border: 0;
        background-color: #8d56A8;
        border-radius:0;
    }
    .navbar-secondary .navbar-nav {
        margin-right:0;
    }
    .navbar-secondary .navbar-nav>li>a {
        font-size:14px;
        color:white;
        padding: 5px 10px;
        margin: 10px 5px;
    }
    .navbar-secondary .navbar-nav>li.active>a, 
    .navbar-secondary .navbar-nav>li.active>a:hover, 
    .navbar-secondary .navbar-nav>li>a:hover {
        background-color: rgba(0,0,0,0.2) !important;
        color:white;
    }
}

.navbar-secondary {
    min-height:0px;
}
.navbar-secondary .section-header {
    padding:3px 14px;
    text-transform:uppercase;
    font-size:12px;
    background-color: #aaa;
    color:white;
    margin-top:20px;
}
.navbar-secondary .section-header:first-of-type {
    margin-top:0px;
}
.navbar-secondary .navbar-nav>li>a {
    margin-bottom: 0px !important;
}


/* images */
img {
    max-width:100%;
    height:auto;
}


/* breadcrumb navigation */
.breadcrumb {
    padding: 0;
    margin-bottom: 10px;
    margin-top:0;
    background-color: transparent;
    border-radius: 0;
    font-size:14px;
}
.breadcrumb > li + li:before {
    content: '\00BB';
    color:#888;
}


/* headlines */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #7d4698;
    font-weight:bold;
}
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 12px; }
h5, .h5 { font-size:  8px; }
h6, .h6 { font-size:  6px; }



/* link color */
a, a:hover, a:active, a:focus, a:visited {
    color:#68b030;
}


/* main menu hover color */
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    background-color: #e8e8e8;
}


/* format blockquotes */
blockquote {
  background: #fafafa;
  color: #333;
  margin: 1.8em 12px .8em 0;
  padding: 0.5em 12px 1em 12px;
  border-left: 12px solid #cdcdcd;
  font-style:italic;
}
blockquote:before {
  content: '\201C';
  color: #cdcdcd;
  font-size: 5em;
  line-height: 0.2em;
  display:block;
  position:relative;
  top:6px;
}



/* logo size */
.navbar-brand img {
    height:20px;
    width:auto;
}


/* back to top button */
body .topButton {
    background-color: #68b030;
    position:fixed;
    z-index:1;
    bottom:1em;
    right:1em;
}
.topButton a, .topButton a:hover {
    display:block;
    padding:.7em 1em 1em 1em;
    color:white;
    font-weight:bold;
    text-decoration:none;
}


/* add a no-padding-for-columns class */
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}



/* page footer */
#footer {
    margin-top:2em;
    padding-top:2em;
    padding-bottom:2em;
    background-color: #f5f5f5;
    color:#999;
    border-top:1px solid #ccc;
    
}
#footer .pull-right a {
    margin-left:2em;
}
#footer .pull-right a:first-of-type {
    margin-left:0;
}
#footer .no-gutter {
    margin-bottom:1em;
}



/* mobile navbar colors */
.navbar-default .navbar-toggle .icon-bar {
    background-color:#fff;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #9d66b8;
}
@media (max-width: 767.99999px) {
    .navbar-header {
        background-color: #7d4698;
    }
}


/* align mobile submenu */
@media (max-width: 767.99999px) {
    .navbar-nav .dropdown-menu {
        margin-left:1em;
    }
}


/* format callouts */
.bs-callout {
    padding: 20px 20px 15px 20px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
    border-left-color: #7d4698;
}
.bs-callout h1, .bs-callout h2, .bs-callout h3, .bs-callout h4, .bs-callout h5, .bs-callout h6, 
.bs-callout .h1, .bs-callout .h2, .bs-callout .h3, .bs-callout .h4, .bs-callout .h5, .bs-callout .h6 {
    margin-top:0;
}
.bs-callout-default {
    border-left-color: #777;
}
.bs-callout-default h2, .bs-callout-default h3, .bs-callout-default h4 {
    color: #777;
}
.bs-callout-primary {
    border-left-color: #428bca;
}
.bs-callout-primary h2, .bs-callout-primary h3, .bs-callout-primary h4 {
    color: #428bca;
}
.bs-callout-success {
    border-left-color: #5cb85c;
}
.bs-callout-success h2, .bs-callout-success h3, .bs-callout-success h4 {
    color: #5cb85c;
}
.bs-callout-danger {
    border-left-color: #d9534f;
}
.bs-callout-danger h2, .bs-callout-danger h3, .bs-callout-danger h4 {
    color: #d9534f;
}
.bs-callout-warning {
    border-left-color: #f0ad4e;
}
.bs-callout-warning h2, .bs-callout-warning h3, .bs-callout-warning h4 {
    color: #f0ad4e;
}
.bs-callout-info {
    border-left-color: #5bc0de;
}
.bs-callout-info h2, .bs-callout-info h3, .bs-callout-info h4 {
    color: #5bc0de;
}

/* home jumbotron */
.jumbotron {
    padding-bottom: 10px;
}
.jumbotron h1 {
    margin-top: -20px;
    font-size: 50px;
}
@media only screen and (max-width : 991px) { .jumbotron h1 { font-size: 46px; } }
@media only screen and (max-width : 352px) {
    .jumbotron h1 {
        font-size: 38px;
    }
    .jumbotron p {
        display: none;
    }
}

/* home dashboard page */
.dashboard {
    padding:0em 5em 0 5em;
}
.dashboard .col-sm-4 {
    margin-bottom:2em;
    text-align:center;
}
.dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active {
    text-decoration:none;
    display:block;
    border:1px solid #ccc;
    border-radius:5px;
    padding:2em 2em 1em 2em;
    color:#999;
}
.dashboard h2 {
    font-size: 42px;
    color: rgb(125, 70, 152);
    padding-top: 0;
    margin-top: 0;
}
.dashboard h3 {
    font-size: 26px;
}
@media (max-width: 992px) {
    .dashboard h3 {
        font-size: 20px;
    }
}
.dashboard h3, .dashboard p {
    color: #999;
}
.dashboard p.lead {
    color: #333;
}
.dashboard a[href], .dashboard a[href]:hover, .dashboard a[href]:focus, .dashboard a[href]:active, .dashboard a[href] h3 {
    color:#68b030;
}
.dashboard a[href]:hover {
    background-color: #F8f8f8;
}
/* fixed box height by screen size: */
@media (min-width: 1200px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:260px; } }
@media (min-width: 992px) and (max-width: 1199.99999px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:290px; } }
@media (min-width: 768px) and (max-width: 991.99999px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:280px; } }
.dashboard a[href] p {
    color:black;
}
@media (max-width: 767.99999px) {
    .dashboard {
        padding:1em;
    }
    .dashboard .row {
        margin-right:-13px; /* 15px minus border */
    }
    .dashboard .col-sm-4 {
        margin-bottom:1em;
    }
    .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active {
        text-align:left;
        padding:1em 1em 0 1em;
    }
    .dashboard p {
        padding-left:2.1em;
    }
    .dashboard .fa-4x, .dashboard h2 {
        font-size:20px;
        margin:0;
        display:inline-block;
    }
}



/* table of contents side box */
div.list-group {
    margin-top:3em;
}
div.list-group a.list-group-item {
    color:#68b030 !important;
}



/* external links */
a[target="_blank"]:before {
    content: " \f08e";
    font-family: 'FontAwesome';
    font-size:14px;
    position:relative;
    top:1px;
    margin-right:3px;
}

a.btn[target="_blank"]:before {
    content: "";
}



/* news page */
.news .links {
    position:relative;
    top:-10px;
}
.news .links a {
    margin-right:1em;
}
.news h3 .label {
    font-size: 12px;
    position: relative;
    top: -2px;
    margin-left: 5px;
}
.metrics-news-link {
    text-transform: capitalize;
}

/* faq */
.faq h2 {
    font-size:24px;
}
.faq p {
    margin-bottom:2em;
}



/* related events table */
.events a.link { padding-right:1em; }
.events th.dates { width:20%; }
.events th.tags { width:20%; }
.events th.description { width:60%; }
.events td span.dates {
    color: #7d4698;
    font-weight: bold;
}



/* horizontal line divider */
hr {
    margin-top:50px;
    border-top: 1px solid #cdcdcd;
}


/* community and featured badge */
.community, .featured {
    position:relative;
    overflow:hidden;
}
.community:before, .featured:before {
    content: "Community";
    width:150px;
    display:block;
    position:absolute;
    right:-2.7em;
    top:1.8em;
    background-color: #5cb85c;
    font-size: 90%;
    padding: .2em 2.6em .3em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    vertical-align: baseline;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.featured:before {
    content: "Featured";
    background-color: #7d4698;
}
@media (max-width: 991.99999px) {
    .community:before, .featured:before {
        width:130px;
    }
}


@media only screen and (max-width: 767.99999px) {
    
    /* Force table to not be like tables anymore */
	.responsive-table table, 
	.responsive-table thead, 
	.responsive-table tbody, 
	.responsive-table th, 
	.responsive-table td, 
	.responsive-table tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.responsive-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.responsive-table tr { 
	    border: 1px solid #ccc; 
        margin-bottom:1em;
    }
 
	.responsive-table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50% !important; 
		white-space: normal;
		text-align:left;
	}
 
	.responsive-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	.responsive-table td:before { content: attr(data-title); }
}



/* tools and sources */
.tools {
    margin-top:2em;
}
.tools a:hover, .tools a:active, .tools a:focus {
    text-decoration:none;
}
.tools a:before {
    content:'';
    display:none;
}
.tools p {
    color:black;
    line-height:21px;
}
.tools [class*='col-'] {
    text-align:center;
    margin-bottom:2em;
}
.tools .logo {
    width:150px;
    height:150px;
    margin:0 auto;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
}
.tools-xs .logo {
    width:100px;
    height:100px;
}
.tools-xs p {
    font-size:14px;
    line-height:18px;
}

@media (max-width: 399.99999px) {
    .tools [class*='col-'] {
        width:100%;
        float:none;
    }
}



/* tooltips */
.tor-tooltip {
    position:relative;
    color:#68b030;
    border-bottom: 1px dotted #68b030;
}
.tor-tooltip-content {
    position:absolute;
    z-index:1;
    color:white;
    background-color: rgba(0,0,0,0.8);
    padding:10px 14px;
    width:300px;
    left:-9999px;
    top:30px;
    opacity:0;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    border-radius:3px;
    line-height:20px;
}
.tor-tooltip-content:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: rgba(0,0,0,0.8);
	border-width: 6px;
	margin-left: -6px;
}
.tor-tooltip:hover .tor-tooltip-content, .tor-tooltip:focus .tor-tooltip-content {
    opacity:1;
    left:-130px;
}
/* reposition on mobile devices: */
@media (max-width: 767.99999px) {
    .tor-tooltip {
        position:static;
    }
    .tor-tooltip-content {
        margin:0 auto;
        width:90%;
        max-width:500px;
    }

    .tor-tooltip:hover .tor-tooltip-content, .tor-tooltip:focus .tor-tooltip-content {
        left:1em;
        right:1em;
        top:inherit;
        margin-top:30px;
    }    
    .tor-tooltip-content:after {
        display:none;
    }
}


/* data page */

/* tabs */
ul.nav-tabs {
    margin-top:2em;
    margin-bottom:1em;
}
ul.nav-tabs>li {
    margin-top:10px;
}
.nav-tabs>li:not(.active)>a {
    border-color: #eee #eee #ddd;
}

/* graphs */
img.graph {
    width:100%;
}
/* forms and fields */
form {
    margin-top:4em;
}
form label {
    width:100%;
    max-width:100px;
}
form input, form select {
    width:100%;
    max-width:200px;
}
form input[type=checkbox], form input[type=radio] {
    width:20px;
}
label.checkbox-label, label.radio-label {
    max-width: initial;
    width: auto;
    font-weight: normal;
    margin-right: 20px;
}




/* Show submenu on "hover", desktop: */
@media (min-width: 768px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* hide submenus and carets on mobile version, but keep the language submenu: */
@media (max-width: 767.99999px) {
    .navbar-nav :not(.dropdown-language) .dropdown-menu {
        display:none;
    }
    .navbar-nav :not(.dropdown-language) .dropdown-toggle .caret {
        display:none;
    }
}


/* Anchor-Links for Headlines */
.anchor {
    opacity:0;
    text-decoration:none;
}
*:hover > .anchor {
    opacity:1;
    color:#78c040;
}
*:hover > .anchor:hover {
    text-decoration:none;
    color:#68b030;
}


/* No JavaScript fallbacks */


/* same for mobile - also for browsers with script enabled, so no ".noscript" here */
#navbar-toggle-checkbox {
    display: none;
}
body.noscript #navbar-toggle-checkbox:checked ~ .collapse {
    display: block;
}


/* open LANGUAGE submenu in non-js mobile menu */

@media (max-width: 767.99999px) {
    body.noscript .navbar-nav .dropdown-language .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        display: block !important;
    }
}




/* code highlighting */

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted,
.token.function {
  color: #c7254e; /* red */
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.inserted {
  color: #7d4698; /* purple */
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999; /* light gray */
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #000; /* black */
}


/* Onionoo-specific Styles */

.onionoo a .fa.fa-chevron-right {
    font-size:70%;
}
.onionoo .required-true {
}
.onionoo .required-false {
    color: #aaa;
}
.onionoo .properties {
    margin-top: 10px;
    margin-bottom: 10px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding:0;
}
.onionoo .request-response {
    float:right;
    font-size:60%;
}
.onionoo .properties li {
    padding: 15px;
    overflow:hidden;
    border-top:1px solid #ddd;
}
.onionoo .properties li:nth-child(odd) {
    background: #f8f8f8;
}
.onionoo h4, .onionoo .h4 { font-size: 16px; }

/* method table */
@media only screen and (max-width: 767.99999px) {
  .onionoo .responsive-table td:before {
    width: 25% !important;
  }
  .onionoo .responsive-table td {
    padding-left: 30% !important;
  }
}
.onionoo th.method { width:10%; }
.onionoo th.url { width:40%; }
.onionoo th.description { width:50%; }


/* Styles used on our various protocol specification pages. */

span.red {
    color:#d9534f;
}
span.blue {
    color:#337ab7;
}