body{
margin:0;
padding:0;
}

#maincontainer{
width: 960px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
background-color:#ffffff;
}

#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:#1c1c1c;
}

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

#contentcolumn .innertube{ clear:both; }

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

.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.infotable td, table.infotable th { vertical-align:top; padding:4px; border:1px solid #bbbbbb; }
table.infotable th {background-color:#eeeeee; text-align:left; font-weight:600;}
label input { border:1px solid #ffffff; }
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;}
.tdvaluesmall, .tdvaluedate { width:200px; }
div.lastsub {padding-bottom:10px;}

.resultbox { min-height:26px; }
#result1 {min-height:45px; }

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

body {
font-size: 14px;
background: #D4D9DD url(/img/bg.png) repeat-y fixed center;
font-family: "Open Sans", "Lucida Grande", sans-serif;
font-weight: 400;
line-height: 1.55;
color: #000000;
margin-bottom: 40px;
}

body.dark {
background: #121212;
color: #fefefe;
}

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


a { color: #21759a; text-decoration: none; }
.dark a { color: #ffccff; }
a:active, a:hover {color:#882222;}
.dark a:active, .dark a:hover { color: ff8888; }
p a { border-bottom: 1px solid #dfdfdf; }
.dark p a { border-color: #222222; }
a.nocolor, a i.fa {color:#444;}
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', Georgia, 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, .dark h2, .dark h3 {color: #ffaaaa;}

#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 { 
font-weight: 700;
}

#timebox { width:180px;border:1px solid #333333; text-align:center; }
#timebox b { color:#882222 }
#ad_code,div.ad_code {
padding:20px;
padding-left:0;
margin-left:0;
width:728px; 
}
div.ad_keywords, div.ad_center {margin:auto; }

.small,#footer {
font-size:0.9em;
}

.highlight, .highlightbox { 
text-align:center; 
padding:10px; 
border-radius: 10px;
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 {background-color: #338888; color: #dddddd;}
.inline{
display:inline;
}

input[type=button], input[type=submit], textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
input, button, select, textarea {
border:1px solid #999;
padding:4px;
font-size:1.1em;
border-radius: 2px;
-webkit-box-shadow: 2px 2px 4px #ddd;
box-shadow: 2px 2px 4px #ddd;
}
.dark input !important, .dark button, .dark select, .dark textarea {
background-color: #1c1c1c;
color: #222222
box-shadow: 2px 2px 4px #444444; 
}

textarea {
box-shadow: none;
}

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;
-webkit-box-shadow: 0px 0px 5px #777;
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;
}

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

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

input[type="radio"], select, label.radio, label.select {
cursor: pointer;
}

input[type="radio"] {
box-shadow: none;
}

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:#999999}
tr.currentWeek, tr.currentDay {
font-weight:600;
font-size:1.2em; 
}
td.numbers {text-align:right;}
.nowrap { white-space: nowrap; }

/* CLOCK SMALL */
#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%);
}
#clocknotice { 
padding-left:9px;
display:inline;
color: #cccccc; 
}

/* 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;}

/* social */
.socialbtn a { padding-right:3px; }
.socialbtn i.fa { padding-top: 7px; padding-bottom: 7px; background-color: #f6f6f6; margin-top: 6px; }
.socialbtn i.fa:hover { background-color: #e6e6e6; } 

#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;
}

b.utcal { display:inline-block; min-width:120px; }

/* 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 : 979px){
	#responsive {content:"M"; z-index: 2;}
	body {
		background: #D4D9DD url(/img/bg-740.png) repeat-y fixed center;
	}
	#mobilelink {
		display:block;
	}
	#mobilemenulink {
		display:block;
		float:right;
		margin-top:10px;
		margin-right:10px;
	}
	#mobilemenulink a {
		border:1px solid #999;
		border-radius: 3px;
		-webkit-box-shadow: 2px 2px 4px #ddd;
		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;
	}

	#maincontainer{
		width: 730px;
	}

	#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%;
	}
	
	#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:2px;
	        top:10px;
		width:25px;
		height:25px;
		background-image:url(/img/close_button.gif);
    		background-repeat:no-repeat;		
		cursor: pointer;
	}
	
	.mobileonly {display:inline;}
	.desktoponly {display:none;}
	.socialcount {display:none;}
	pre {white-space: pre-wrap; }
	td,pre {word-break: break-all; }
	.clock {width:auto  !important;}
	.biggerlinks a, a.biggerlinks {display:inline-block; margin:6px;}
	input {max-width: 90% !important;}
}


@media only screen and (max-width: 446px) {
	div#ecclock{display:block;margin-top:5px;font-size:inherit;}
}

@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:6px; }
	table.syntaxtable {display:none; }
	input.dateform {width:25px;}
	input.year {width:40px;}
	select[name=tz] {width:80px;}
	div.ad_keywords {display:none; }
	input,button {margin-bottom:3px;}
	.hidemobile {display:none;}
	#rightcolumn .sub { border:0;padding-left:10px; width:auto; }
	#ad_code,div.ad_code {width:auto; min-width:125px;}
	table.infotable {width:auto;}
	#EpochClock { font-size:60px !important; }
	#Time {font-size: 26px !important;}
	#earlyyears a  {display:inline-block; margin:4px;}
	.tdvaluesmall { width:80px; }
	table.syntaxtable td {display: table-row;}
	table.syntaxtable td.progcode {border-bottom:10px solid transparent;}
}

@media only screen and (min-width: 1240px) {
	#responsive {content:"XL"; z-index:4;}
	body {
		background: #D4D9DD url(/img/bg-1240.png) repeat-y fixed center;
	}
	#maincontainer{width: 1120px;}
	#contentcolumn {margin-right: 250px;}
	#rightcolumn {margin-left:-220px; width:220px;}
	td.proglang {width:160px;}
	input, button, select { padding:5px; }
	form div.clear { padding-top:15px; }
	div.ad_code.ad_center {width:970px;}
}


@media only screen and (min-width: 1500px) {
        #responsive {content:"XXL"; z-index:5;}
        body {
         background: #D4D9DD  url(/img/bg-1500.png) repeat-y fixed center;
	 font-size:15px;
        }
        #maincontainer{width: 1340px;}
        #contentcolumn {margin-right: 360px;}
        #rightcolumn { 
	 margin-left:-280px; 
	 width:280px; 
	}
        td.proglang {width:180px;}
	div.ad_code { text-align:left; padding: 25px; padding-left:0; }
	div.ad_code.ad_center {width:1180px;}
}