body, html {
  margin:0;
  padding:0;
  height: 100%;
}

#maincontainer{
  max-width: 1360px;
  min-height: 100%;
  width: 90%; /* fallback */
  width: calc(100% - 52px);
  margin: 0 auto;
  background-color:#ffffff;
  border: 1px solid #949494;
  border-top: 0;
  padding: 0 14px 0 14px;
  box-shadow: 0px 0px 12px #b4b4b4;
  border-radius: 0px 0px 5px 5px;
}

#topsection{
  padding-bottom:10px;
  padding-top:10px;
}

#topsection h1{
  margin: 0;
  padding-top: 15px;
}

#contentwrapper{
  float: left;
  width: 100%;
  background-color:#ffffff;
}

.dark #maincontainer, .dark #contentwrapper{
  background-color:#161616;
  box-shadow: none;
  border: 0;
}

#contentcolumn{
  margin-right: 210px; /*Set right margin to RightColumnWidth*/
}

#contentcolumn .innertube{ clear:both; }

#rightcolumn{
  float: left;
  width: 210px; /*Width of right column*/
  margin-left: -210px; /*Set left margin to -(RightColumnWidth) */
  position: relative;
}
div.hidemenu {display:none;}
	
#footer{
  clear: left;
  width: 100%;
  text-align: center;
  padding: 20px 0 20px 0;
}

.innertube{
  margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
  margin-top: 0;
}

.clear {clear:both;}
img {border:0;}
td img {vertical-align:middle}
table,tr,td { padding:0;margin:0;border:0; }
table { border-collapse: collapse; border-spacing: 0; }
table.tool {float:left;}
table.tool td { white-space: nowrap; }
table.syntaxtable td { padding:2px; padding-right:5px; }
table.fixed { table-layout:fixed; }
table.infotable td, table.infotable th { vertical-align:top; padding:4px; border:1px solid #c0c0c0; }
table.infotable th {background-color:#eeeeee; text-align:left; font-weight:600;}
.dark table.infotable th {background-color:#333;}
td.top, th.top { vertical-align:top; }
td.right, th.right, table.infotable th.right { text-align:right; }
tr.bold td {font-weight:600;}
tr.comment td {font-style:italic;text-align:center;}
div.right-2nd-cell table td + td, div.right-2nd-cell table th + th { text-align:right; }
/* freeze-sort tables */
div.ectable { display:inline-block; min-width:90%; }
div.ectable.table-small {min-width:50%;}
div.ectable.fullwidth {width:100%;}
div.ectable table {width:100%;}
th.ts i {padding-left:5px;}
th.ts {cursor:pointer;}
div.ectable table.infotable tbody tr:nth-child(even) { background-color: #f8f8f8; }
div.ectable table.infotable tbody tr:hover { background-color: #fff9cb; }
.dark div.ectable table.infotable tbody tr:nth-child(even) { background-color: #222; }
.dark div.ectable table.infotable tbody tr:hover { background-color: #26497C; }
.dark table.infotable td, .dark table.infotable th { border-color: #111;}

div.lastsub {padding-bottom:10px;}
label input { border:1px solid #ffffff; }
.resultbox { min-height:26px; }
#result1 {min-height:45px; }

.ampm,.pref-tz { margin-left: 4px; }


.warning, .error { font-weight:600; color:#8b0000; }

body {
  font-size: 14px;
  background-color: #d4d9dd;
  font-family: 'Open Sans', 'Lucida Grande', sans-serif;
  font-weight: 400;
  line-height: 1.55;
  color: #000000;
}

.dark body {
  background-color: #121212;
  color: #d6d6d6;
}

span.logo { 
  height:60px; 
  width:286px;
  background-position:left;
  background-repeat:no-repeat;
  background-size:contain;
  display:inline-block;
  background-image: url("/img/epochconverter.svg");
  text-indent: -9999px;
}

.dark span.logo {filter: invert(90%);}

pre,code,kbd {font-family: Consolas,monospace; }
code {background-color:#f0f0f0;}
pre {white-space: pre-wrap;}
pre, pre code {background-color:#fafafa;}
.dark code, .dark pre {background-color:#1c1c1c;}

a { color: #21759a; text-decoration: none; }
.dark a { color:#6699CC; }
a:active, a:hover {color:#882222;}
.dark a:active, .dark a:hover { color:#86B9EC; }
p a { border-bottom: 1px solid #dfdfdf; }
.dark p a { border-color: #202020; }
a.nocolor, a i.fa {color:#444;}
.dark a.nocolor, .dark a i.fa {color:#d6d6d6;}
a i.fa.blue {color: #21759a;}
a.currentpage { color:#222222; }
.dark a.currentpage {color:#dddddd; }
a.currentpage:after {
    content: '\2022';
    padding-left:5px;
    color:#822;
}
.dark a currentpage:after {
  color:#cccccc;
}

h1,h2 {
  font-family: 'Roboto Slab', sans-serif;
  font-weight: 400;
  line-height: 1.2em;
}
h1 {
  border-bottom:1px solid #dedede; 
  font-size:2.1em;
  color:#882222;
  padding-bottom:10px;
  margin-bottom:14px;
}
.dark h1 { color: rgb(166, 86, 82); border-bottom: 1px solid #555;}
.dark h2, .dark h3 { color: #ccc;}

#rightcolumn h4 {
  padding:4px 0 2px 0;
  margin: 16px 0 0 0;
  font-weight: 600;
}
#rightcolumn .links { padding-left: 0; }

#topsection h1 {padding-top:30px;}
h2 {
  font-size:1.65em;
  color:#143470;
  margin-bottom:14px;
  margin-top:46px;
  padding:0;
}
#rightcolumn h2 {background:none;text-indent:0;}
h2.first, p.first, h2#efhead { padding-top:0; margin-top:0;}
h3 {
  font-size:1.1em; 
  color:#444;
  font-weight:600;
  padding:0;
  margin:15px 0 15px 0;
}
p { margin: 8px 0 20px; }
b,em,strong { font-weight: 700; }
#timebox { width:180px;border:1px solid #333333; text-align:center; }
#timebox b { color:#882222 }
.small,#footer { font-size:0.9em; }

.highlight, .highlightbox { 
  text-align:center; 
  padding:10px; 
  border-radius:8px;
  border:1px solid #003D5D; 
  margin:0; 
  margin-bottom:20px; 
  color:#222;
}
.highlight h3, .highlightbox h3 {
  font-size:27px; 
  font-weight:normal; 
  color:#222;
}
.highlight { background-color:#ccddff; }
.dark .highlight, .dark .highlight h3, .dark .highlightbox h3 { color: #eee;}
.inline{ display:inline; }

input[type=button], input[type=submit], input[type=text], select, button, textarea {
  -webkit-appearance: none;
}
input, button, select, textarea {
  border:1px solid #999;
  padding:4px;
  font-size:1.1em;
  border-radius: 2px;
  box-shadow: 2px 2px 4px #ddd;
}
@-moz-document url-prefix() { select { padding:3px; }}
@supports (-ms-ime-align:auto) { select { padding:3px  }}
textarea { box-shadow: none; }
.dark input, .dark button, .dark select, .dark textarea {
  background-color: #333333;
  color: #dddddd;
  box-shadow: none;
  border: 1px solid #222222;
}
.dark textarea { background-color: #222; }
input[type=button], input[type=submit], button {
  border-radius: 3px;
  background-color: #eeeeee;
  cursor: pointer;
}

input:focus, button:focus, select:focus, input.button:hover, button.button:hover {
  border:1px solid #666;
  box-shadow: 0px 0px 5px #777;
}

input.button, button.button {
  border-radius: 3px;
  border: 1px solid;
  border-color: #adb1b8 #a2a6ac #8d9096;
  background-color: #fff9cb;
  background-image: linear-gradient(to bottom, #fff9cb 0%, #faf3c5 100%);
  color: #333;
  box-shadow: none;
  cursor: pointer;
}
.dark input.button, .dark button.button {
  background-image: none;
  background-color: #555555;
  color: #dddddd;
  border: 0;
}
input[type="text"]:disabled { color:#5e5e5e; background-color: #dedede; }
.dark input[type="text"]:disabled { color: #555; background-color:#222; }

button.show-comments {
  margin-top: 20px;
  padding: 6px 40px 6px 40px;
  cursor: pointer;
  box-shadow: none;
}

input.dateform {width:30px;}
input.year {width:50px;}
form div {padding-top:7px;}
form#hf  {padding-top:20px;}

input[type="radio"], input[type="check"], select, label { cursor: pointer; }
input[type="radio"], input[type="check"] { box-shadow: none;}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 3px;
  padding-right: 20px !important;
}

.dark select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='lightgray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}

hr.lefthr {
  border: none;
  border-top: 1px dashed #888;
  max-width: 500px;
  height: 1px;
  text-align: left;/*this will align it for IE*/
  margin: 6px auto 20px 0; /*this will align it left for Mozilla*/
}

.help[title] {cursor: help;}
tr.otherYear {color:#727272;}
tr.currentWeek, tr.currentDay {
  font-size:1.2em; background-color: #fff9cb !important;
}
td.numbers, th.numbers, table.infotable th.numbers {text-align:right;}
.nowrap { white-space: nowrap; }
a.current {
  font-weight:600;
  font-size:1.3em;
}


div.menu h4 { cursor:pointer; }
div.menu-closed .links { display:none; }
div.menu-open links { display:block; } 

/* CLOCK SMALL */
#ecclock,.ecclock {
  display:inline;
  text-align: center; 
  padding: 8px 10px; 
  border-radius:8px;
  margin:0;
  font-size:1.2em;
  font-weight: 600;
  background-color:#eaeafa;
  background-image: linear-gradient(to bottom,#ededfd 0%,#dddded 100%);
  line-height: 2.5;
}
#clocknotice,.clocknotice { 
  padding-left:9px;
  display:inline;
  color: #cccccc; 
}
.dark #ecclock,.dark .ecclock { background-color: #555555; background-image:none; }

/* homepage table */ 
td.proglang {font-weight:600;width:120px;vertical-align:top}
td.progcode {vertical-align:top}

/* homepage only */
#br td {vertical-align:middle} 
#br label {padding-left:7px;padding-right:7px;}
#br-d3 span.datesep {padding:0;}

.topbtn i.fa { padding-top: 7px; padding-bottom: 7px; background-color: #f6f6f6; margin-top: 6px; }
.topbtn i.fa:hover { background-color: #e6e6e6; } 
.topbtn { display:none;margin-top: 14px;} /* only mobile */
.long .topbtn {display:block;}
.dark .topbtn i.fa {background-color: #222; color: #666; border:0;}

.social-footer i.fa {color: #555;}
.social-footer i.fa:hover {color:#21759a;}
.dark .social-footer i.fa {color:#b6b6b6;}
.dark .social-footer i.fa:hover { color:#21759a;}
.footer-links {padding-top:5px;}

#mobilelink, #mobilemenulink, span.close { display:none; }

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
  border-collapse: collapse; border-spacing: 0; 
}

.mobileonly {display:none;}
.desktoponly {display:inline;}

kbd {
  background:#EEEEEE none repeat scroll 0 0;
  border-color:#CCCCCC #AAAAAA #888888 #BBBBBB;
  border-style:solid;
  border-width:1px 1px 2px 2px;
  padding:2px 3px;
  white-space:nowrap;
}
.dark kbd {background:none;}

.utcal { display:inline-block; min-width:120px; }
span.datesep { padding: 0 4px 0 4px; }

.dark .hidedark {display:none;}
.dark .hljs { color: #666; }

.preferencetable { width: 100%; }
.preferencetable select, .preferencetable option {font-size: 1.1em;}
.preferencetable td {
  padding-bottom: 20px;
  width: 50%;
}

/* cookie consent */
body .cc-revoke, body .cc-window { font-size:15px; line-height:1.3em; }
body .cc-window {border: 1px solid #bbbbbb;}
body .cc-btn {height: inherit !important;}

#responsive {
  content:"L"; 
  z-index: 3; 
  position: absolute;
  top: -999em;
  left: -999em;
}




/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width: 0px) and (max-width: 920px){
  #responsive {content:"M"; z-index: 2;}
  #maincontainer {width: calc(100% - 48px);}
  #mobilelink {display:block;}
  #mobilemenulink {
    display:block;
    float:right;
    margin-top:10px;
    margin-right:10px;
  }
  #mobilemenulink a {
    border:1px solid #999;
    border-radius: 3px;
    box-shadow: 2px 2px 4px #ddd;		
    background-color: #fff9cb;
    background-color: #eeeeee;
    color:#333333;
    font-size:20px;
    padding:6px;
    padding-left:12px; 
    padding-right:12px;
  }
  .dark #mobilemenulink a { filter: invert(100%); }
  #rightcolumn {
    display: none;
    position: absolute;
    right: 0;
    width: 220px;
    top: 0;
    z-index:100;
    box-shadow: 0px 0px 15px black;
    background: white;
    padding: 10px;
    padding-bottom:0;
    -webkit-transform-origin: 100% 50%;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    outline: 0;
    min-height:100%;
  }
  .dark #rightcolumn {background:#222222;}
  #rightcolumn .innertube {height:100%;position: relative; padding-bottom:0; }
  #rightcolumn h2 {padding-top:14px; margin-top:0;}
  #rightcolumn .firstsub {
    border:0;
    padding-top:10px;
    padding-left:0;
  }
  #contentcolumn {margin-right:0;}
  div.lastsub {padding-bottom:0;}
  .innertube{margin:5px;}
  table.tool td {white-space:normal;}
  span.close {
    display:block;
    position:relative;
    left:5px;
    top:10px;
    width:20px;
    height:20px;
    background-image:url(/img/close-button.svg);
    background-repeat:no-repeat;		
    background-size: cover;
    cursor: pointer;
  }
  .dark span.close {filter: invert(90%);}
  .mobileonly {display:inline;}
  .desktoponly {display:none;}
  .socialcount {display:none;}
  pre {white-space: pre-wrap; }
  td,pre {word-break: break-all; }
  .infotable td {word-break: normal;}
  .biggerlinks a, a.biggerlinks {display:inline-block; margin:6px;}
  input,textarea {max-width: 90% !important;}
}

@media only screen and (max-width: 478px) {
  div#ecclock{display:block;margin-top:5px; font-size:1.3em;}
  tr.currentWeek, tr.currentDay {font-size:1.0em;}
  .infotable.wrapmobile td, .infotable.wrapmobile th {word-break: break-all;}
  .hidexs {display:none;}
}

@media only screen and (max-width: 746px) {
  #responsive {content:"S"; z-index:1;}
  body {background: #ffffff; }
  #contentwrapper { -webkit-text-size-adjust:110%; }
  #footer { -webkit-text-size-adjust:100% } 
  #maincontainer{ width:auto; padding:0 6px 0 6px; border:0; box-shadow:none; }
  table.syntaxtable {display:none; }
  input.dateform {width:25px;}
  input.year {width:40px;}
  div.ad_keywords {display:none; }
  input,button,select {margin-bottom:3px;}
  .hidemobile {display:none;}
  #rightcolumn .sub { border:0;padding-left:10px; width:auto; }
  table.infotable {width:auto;}
  #EpochClock { font-size:60px !important; }
  #Time {font-size: 26px !important;}
  #earlyyears a  {display:inline-block; margin:4px;}
  table.syntaxtable td, table.preferencetable td  {display: table-row;}
  table.syntaxtable td.progcode {border-bottom:10px solid transparent;}
  table.preferencetable td { border-bottom: 15px solid transparent;}
  span.logo { max-width:286px; width:75%; }
  .utcal { min-width:auto; }
}

@media only screen and (min-width: 1200px) {
  #responsive {content:"XL"; z-index:4;}
  body { font-size:15px; }
  #maincontainer{
    padding: 0 48px 0 48px;
    box-shadow: 0px 0px 12px #b4b4b4;
    width: calc(100% - 120px);
  }
  #contentcolumn { margin-right: 250px; }
  #rightcolumn { margin-left:-240px; width:240px; }
  td.proglang { width:160px; }
  form div.clear { padding-top:15px; }
  input,button,select { padding:5px; }
  @-moz-document url-prefix() { select { padding:4px; }}
  @supports (-ms-ime-align:auto) { select { padding:3px  }}
}


@media only screen and (min-width: 1340px) {
  #responsive {content:"XXL"; z-index:5;}
  #maincontainer{
    padding: 0 58px 0 58px;
    width: calc(100% - 160px);
  }
  #contentcolumn {margin-right: 360px;}
  #rightcolumn { 
     margin-left:-310px; /* 280 */
     width:310px;
  }
  td.proglang {width:180px;}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ styles */
  .hide-ie{ display: none; }
  select { padding-right: 2px !important; }
}


/* ===========================
   =========== Ads ===========
   =========================== */

div.ad_code {
  padding:10px 0 0 0;
  margin:0;
  width:100%;
  max-width:100%;
}
div.ad_code>span { display: inline-block; }
div.ad_center { margin:auto; text-align:center; }

/* div.ad_code, .bnr_full, .bnr_content, .bnr_right, .bnr_right_long { border:1px solid black; } */
div.ad_rightbar { padding-top: 20px; }

.bnr_full, .bnr_content { width: 234px; height: 60px; }
.bnr_right { width: 125px; height: 240px; } /* 125x125 or 120x240 */
.bnr_right_long { width: 160px; height: 600px; } /* hidden for small screens */

@media (max-width:920px) {
  .bnr_right, .bnr_right_long, body.charset div.ad_rightbar { display: none !important; }
}
@media (min-width:370px) {
  .bnr_full, .bnr_content { width: 320px; height: 100px; }
}
@media (min-width:510px) {
  .bnr_full, .bnr_content { width: 468px; height: 100px; }
}
@media (min-width:820px) {
  .bnr_full { width: 728px; height: 90px; }
}
@media (min-width:1024px), (min-width:820px) and (max-width:920px) {
  .bnr_content { width: 728px; height: 90px; }
}
@media (min-width:1064px) {
  .bnr_full { width: 970px; height: 90px; }
}
@media (min-width:1340px) {
  .x_bnr_right { width: 250px; height: 250px; }
  .bnr_right { width: 300px; height: 250px; }
  .bnr_right_long { width: 300px; height: 600px; }
}
@media (min-width:1500px) {
  .bnr_content { width: 970px; height: 90px; }
}