@import url('https://fonts.googleapis.com/css?family=Open+Sans:300, 400');


:root{
	--background-grey: #F7F7F7;
    --grey: #7c7c7c;
    --black: #333333;
    --pink: #e45785; 
    --morepink: #e45684; 
    --darkblue: #212d40;
    --mainblue: #333333;
	--background-selected-topic: #BCE3FE;
	--hover-grey: #DEDFE0;
	--section: #3474C5;
	--link-text: #3594FF;
	--table-border: #E5E8EC;
	--th-background: #2E3F58;
	--th-border: #40526E;
	--row-zebra: white;
}

html{
    box-sizing: border-box;
    font-family: 'Open Sans',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 13px;
    color: var(--black);
}

body {
	margin: 0;
}

p, li:not(.toc):not(.in-table) {
	
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
}

.header {
	
	background-color: var(--darkblue);
    position: fixed;
    width: 100%;
	min-height: 53px;
	max-height: 53px;
}

.header.wide {
	
	min-height: 53px;
	max-height: 53px;
}

.header.mobile {
	
	min-height: 53px;
	max-height: 53px;
}

.cplogo {
	position:fixed; 
	right: 20px; 
	width: auto;
	top: 14px;
}

.cplogo.wide {
	height: 26px; 
}

.cplogo.mobile {
	top: 12px;
	right: 14px;
	height: 30px;
}

.content {
	padding-bottom: 100px;
	background: var(--background-grey);
}

.content-wide {
	padding-top:53px;
}

.content-mobile {
	padding-top:53px;
	font-size: 14px;
}

.content .content-child {
	margin-top: 7px;
}

h1 {
	color: white;
	font-size: 15px;
	margin-left: 15px;
      margin-top: 14px;
     font-weight: 400;
}

h3 {
	font-size: 1.15em;
}

h3.section-mobile {
	padding-left: 20px;
	padding-right: 20px;
}

h2, h3, .current-section {
	color: var(--section);
	font-weight: normal;
}

.container > .topic:not(:first-child) > h3:not(.active-mobile) {
	padding-top: 30px;	
}

h5 {
	
    margin-top: 0px;
    margin-bottom: 0px;
}

.topic > ul, .topic > ol {
	padding-left: 40px;
}

ul, ol {
	padding-left: 20px;
}

.topic > pre, .subtopic > pre {
	margin-left: 20px;
}

.topic > :not(h3):not(table):not(ul):not(ol) {
	padding-left: 20px;
}

.topic > table {
	margin-left: 20px;
}

.subtopic {
	
	padding-bottom: 20px;
}

img {
    max-width: 90%;
    height: auto;
}

pre {
	 white-space: pre-wrap;
	 word-wrap: break-word; 
}

pre, .code {
	font-family: monospace;
}

.container-wide {
	padding-left: 300px;
	max-width: 1024px;
	padding-right: 20px;
    overflow: hidden;
}

.content-mobile {
	padding-left: 0px;
	padding-right: 20px;
    overflow: hidden;
}


.table-of-contents {
  position: fixed;
  max-width: 280px;
  height: 100%;
  font-size: 0.8em;
  border-left: 1px solid #E0E4E8;
  border-right: 1px solid #E0E4E8;
}

nav {	
  
	
}

.table-of-contents h4 {
	margin-top: 0px;
}
.table-of-contents ul {
	margin: 20px 5px 0px 5px;
  padding: 0;
}
.table-of-contents li {
	font-size: 13px;
	min-height: 28px;
	padding: 5px 15px 5px 15px;
    box-sizing: border-box;
}
.table-of-contents li:hover {
  cursor: pointer;
  background: var(--hover-grey);
}
.table-of-contents a:hover,
.table-of-contents a:active {
  text-decoration: none;
}

h3:target {
  animation: highlight 1s ease;
}

@keyframes highlight {
  from { background: var(--link-text); }
  to { background: var(--background-grey); }
}

.link{
    color: #909090;
    padding: 0 0 .25em 0; 
	font-size: 14px;
	vertical-align: bottom;
}

a:not([name]){
    color: var(--link-text);
    text-decoration: none;
}
.table-of-contents a {
  text-decoration: none;
  color: var(--black);
}

a:not([name]):hover{
    text-decoration: underline;
}

.active, .table-of-contents li:active {
	
	background-color: var(--background-selected-topic);
}

.current-section {
    font-size: 1.15em;
	position: fixed;
	top: 53px;
	padding-top: 10px;	
	padding-bottom: 10px;	
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 0;
	margin-bottom: 0;
	/* width 90% because we want background to be grey 
	when the sticky current-section is shown, 
	but not 100% because it will not break on words. */
	width: 90%;
	background: var(--background-grey);
}

.active-mobile {
	
}

table {
	border: 1px solid var(--table-border);
	border-collapse: collapse;
	margin: 0px;
	border-spacing: 1px;
}

th {
	background: var(--th-background);
	color: white;
	border: 1px solid var(--th-border);
	text-align: left;
}

th, td {
	min-height: 32px;
	height: 32px;
	padding: 10px;
	vertical-align: top;
}

td > ul {
    margin: 0;
    padding: 0 20px 0 20px;
}

tr:nth-child(even) {
	background: var(--row-zebra);
}