/* Add HandWiki color to the top navigation for stand-alone pages */

/* Page layout */

:root {
  --background-color: #fffffa;
  --text-color: #212529;
  --link-color: #2c68a0;
  --link-visited-color: blue;
  --external-link-color: #2c68a8;
  --hover-color: #9400D3;
  --sitebar-background-color: #f5f5f5;
  --toc-background-color: #f8f9fa;
  --head-background-color: #e6e6ff;
  --white-background-color: #ffffff;
  --yellow-background-color: #ffb84d;
  --gray-background-color: #f9f9f9;

}

.hw-theme-light {
  --background-color: #fffffa;
  --text-color: #212529;
  --external-link-color: #2c68a8;
  --link-visited-color: blue;
  --link-color: #2c68a0;
  --hover-color: #9400D3;
  --sitebar-background-color: #f5f5f5;
  --toc-background-color: #f8f9fa;
  --head-background-color: #e6e6ff;
  --white-background-color: #ffffff;
  --yellow-background-color: #ffb84d;
  --gray-background-color: #f9f9f9;
}


/* Dark mode switch */
.hw-theme-dark  {
  --background-color: #3F3F3F;
  --text-color: #fff;
  --link-color: #ffb84d;
  --external-link-color:#ccccff;
  --link-visited-color: #99ccff;
  --hover-color:  #9bedfe;
  --sitebar-background-color: #353935;
  --toc-background-color: #353935;
  --head-background-color: #4a235a;
  --white-background-color: #353935;
  --yellow-background-color: #ac6a07;
  --gray-background-color: #262626;
}


/* The switch - the box around the darkslider */
.darkswitch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin-top:-17px;
  float: right;
}

/* Hide default HTML checkbox */
.darkswitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.darkslider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.darkslider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 0px;
  bottom: 4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  box-shadow: 0 0px 15px #2020203d;
  background: white  url('/wiki/skins/Timeless/resources/images/sunny.png');
  background-repeat: no-repeat;
  background-position: center;
}

input:checked + .darkslider {
  background-color: #ffb84d;
}

input:focus + .darkslider {
  box-shadow: 0 0 1px #ffb84d;
}

input:checked + .darkslider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background: #232323 url('/wiki/skins/Timeless/resources/images/night.png');
  background-repeat: no-repeat;
  background-position: center;
}

/* Rounded darksliders */
.darkslider.round {
  border-radius: 30px;
}


.darkslider.round:before {
  border-radius: 50%;
}


body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--background-color);
}

.handtopnav {
background-color: #ffffff;
background: linear-gradient(  #d3fffe, #fffffa  );
padding-top: 0.0em;
padding-bottom: 0.0em;
line-height: 2.5rem;
overflow: hidden;
color: #000000;
margin: 0px;
margin-top: 0px;
font-weight: 400;
font-size: 17px;
height: 41.6px;
vertical-align: middle;
height: auto;
padding-left: 0.4em;
padding-right: 0.4em;
border-bottom: 1px solid grey;
}

.deskContent {
   display: block;
   position: absolute;  left: 130px;
}

.phoneContent {
  display: none;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 620px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}



/* Style the links inside the navigation bar */
.handtopnav a {
  float: right;
  color: #000000;
  text-align: right;
  text-decoration: none;
  font-size: 1.1em;
  padding: 0px 8px;
}




/* Change the color of links on hover */
.handtopnav a:hover {
  color: inherit;
}

.handtopnav a:visited {
  color: inherit;
}


/* Add a color to the active/current link */
.handtopnav a.active {
  background-color: #4CAF50;
  color: white;
}


/* A link that has not been visited */
a:link {
    color: var(--link-color);
}
/* A link that has been visited */
a:visited {
    color: var(--link-visited-color);
}
/* A link that is hovered on */
a:hover {
    color: blue;
}
/* A link that is selected */
a:active {
    color: green;
}