/* Laidout Style */


/****************** General ****************/

body {
  background: white;
  /*background-attachment: scroll;
  background-repeat: no-repeat;*/
  font-family: bookman, sans-serif;
  border-width: 0;
  margin: 0;
  padding: 0;
  box-shadow: inset 0px 0px 150px #88afff;
}

body.nonfront {
    background: url(../hlonggradstrip.png) white;
    background-attachment: scroll;
    background-repeat: repeat-y;
    font-family: bookman, sans-serif;
    border-width: 0;
    margin: 0;
    padding: 0;
}


body.gray {
    background: #dddddd;
    background-attachment: scroll;
    background-repeat: no-repeat;
    font-family: bookman, sans-serif;
    border-width: 0;
    margin: 0;
    padding: 5;
    box-shadow: none;
  }
body.gray h1 {
    font-size: 32pt;
    color: rgb(0,0,0);
  }
body.gray a:link { color: #cc0000 }
body.gray a:visited { color: #aa0000 }
body.gray a:hover { color: #220066 }
body.gray a:active { color: #ff0000 }


.fuzzy-dot {
	background-color: #88afff;
	border-radius: 50%;
	width: .8em;
	height: .8em;
	filter: blur(1px);
	display: inline-block;
	margin-left: .3em;
}

.article-date {
	font-size: 80%;
	font-style: italic;
}

h1 {
    font-size: 32pt;
    color: rgb(192,0,0);
}

article header h2 {
	margin-bottom: .1em;
}

a:link    { text-decoration:none; color: #cc0000 }
a:visited { color: #aa0000 }
a:hover   { background-color: #eeeeee; color: #550099 }
a:active  { color: #ff0000 }

#main {
	display: inline-block;
	position: relative;
	width: 1200px;
	max-width: 90%;
	white-space:normal;
}

.whole {
	min-height: 100vh;
	white-space:nowrap;
}

code {
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 0px .5em 0px .5em;
  		font-family: courier;
  		
  		word-wrap: normal;
		overflow-x: auto;
		white-space: pre;
}
span.code {
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 1px;
  		font-family: courier;
}
div.code {
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 5px;
  		font-family: courier;
  		margin: 1em;
}
div.section {
  	  /*background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 5;*/
      font-size: 110%;
      font-weight: bold;
	  padding: 1em 0em .5em 0em;
}
pre {
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 1px;
  		padding: 10px;
  		word-wrap: normal;
		overflow-x: auto;
		white-space: pre;
}
pre.code {
	   font-family: courier;
  		background: #eeeeee;
  		border-color: #000000;
  		border-width: 0px;
  		padding: 10px;
}

.license {
  font-style: italic;
  font-size: 80%;
  color: #555;
}

.arrow-up {
  display: inline-block;
  margin: .2em;
  width: 0; 
  height: 0; 
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  
  border-bottom: 1em solid black;
}

.arrow-down {
  display: inline-block;
  margin: .2em;
  width: 0; 
  height: 0; 
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  
  border-top: 1em solid #f00;
}

.arrow-right {
  display: inline-block;
  margin: .2em;
  width: 0; 
  height: 0; 
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  
  border-left: 1em solid green;
}

.arrow-left {
  display: inline-block;
  margin: .2em;
  width: 0; 
  height: 0; 
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent; 
  
  border-right: 1em solid blue; 
}

.dotted-list li {
	display: inline-block;
}
.dotted-list li:not(:last-child)::after {
  content: " • "; /* The dot character with spaces for visual separation */
  margin: 0 5px; /* Adjust spacing as needed */
}

/* --------------------- sidebar -------------------------- */

#sidemenu a:link { text-decoration:none; color: #cc0000 }
#sidemenu a:visited { color: #aa0000 }
#sidemenu a:hover { background-color:transparent; color: #220066 }
#sidemenu a:active { color: #ff0000 }
  
td.padded { 
  	padding: 10px;
}

#side {
	width: 3em;
	/*height: 100%;*/
	display: inline-block;
	float: left;
	text-align: center;
	position: relative;
	padding: 1.5em .5em .5em 1em; 
}

.sidenav {
	transform-origin: left top;
		transform: rotate(-90deg) translateX(-100%);
	/*height: 100%;*/
	white-space:nowrap;
	position:relative;
	width: 100vh;
	font-size: 90%;
	text-align: right;
	max-width: 90vmin;
	max-height: 90vmin;
}
.sidenav {
	padding: 0px;
	margin: 0px;
}
.sidenav li {
	font-weight: 700;
	display: inline-block;
	
}
.sidenav a {
	display: block;
	padding: .5em;
}
.sidenav a:hover {
	background: radial-gradient(ellipse at center, rgba(50,50,255,.5) 0%, rgba(0,0,0,0) 75%);
}

#bg {
	display: none;
	background: linear-gradient(to bottom, #88afff 0px, rgba(0, 0, 0, 0) 5em),
					linear-gradient(to right, #88afff 0px, rgba(0, 0, 0, 0) 5em);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.sidenav a.feeds {
	padding: 0px;
	transform: rotate(90deg);
}
.feeds img {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	/*margin-top: .5em;*/
}

#bannercont {
	height:0px;
	max-width:90%;
	width:700px;
	height:308px;
	padding:0;
	position:relative;
	}

#smallbanner {
	height:0px;
	max-width:90%;
	width:300px;
	height:132px;
	padding:0;
	position:relative;
	}
	

.video-link {
	display: inline-block;
	background-color: #eee;
	border-radius: .5em;
	padding: .75em;
	text-align: center;
	width: 300px;
	max-width: 100%;
	transform: scale(1);
	transition: all .15s ease-in-out;
}
.video-link:hover {
	background-color: #ddd;
	transform: scale(1.03);
	transition: all .15s ease-in-out;
}
.video-link p {
	padding: .5em;
	margin: 0px;
}


#main img {
	max-width: 100%;
}

/* ------------------ keyref --------------- */

.cntlkey, .metakey, .altkey, .shiftkey {
	border: 1px solid #bbb;
	background-color: #ddd;
	color: #444;
	padding: .25em;
	margin: .1em;
	border-radius: .4em;
	-moz-border-radius: .4em;
	font-family: sans-serif, courier;
	font-size: 85%;
	display: inline-block;
   box-shadow: 0px .1em .15em #555;
}

.cntlkey::before  { content: "control"; }
.altkey::before   { content: "alt"; }
.metakey::before  { content: "meta"; }
.shiftkey::before { content: "shift"; }

.keystyle {
   border: 1px solid #bbb;
   padding: .25em .25em .15em .25em;
   margin: .1em;
   border-radius: .4em;
	font-size: 90%;
	font-weight: bold;
   display: inline-block;
   box-shadow: 0px .1em .2em #555;
}

table.formattable {
	border-width: 1px 1px 1px 1px;
	border-spacing: 0px;
	border-style: outset outset outset outset;
	border-color: #888;
	border-collapse: collapse;
}
table.formattable th {
	border-width: 1px 1px 1px 1px;
	padding: 1px 1px 1px 1px;
	border-style: inset inset inset inset;
	border-color: #ccc;
	-moz-border-radius: 0px;
}
table.formattable td {
	border-style: inset inset inset inset;
	border-color: #ccc;
	padding: .2em .6em .2em .6em;
	-moz-border-radius: 0px;
}
td.area { background-color: #cccccc; border-width: 1px 1px 1px 1px; }
td.key { background-color: #ffffff; text-align: right; border-width: 1px 0px 1px 1px; }
td.id { background-color: #dddddd; border-width: 1px 1px 1px 1px; }
td.description { background-color: #ffffff; border-width: 1px 1px 1px 0px; }


/* ----------------- faq stuff ------------- */  
  
.qHeader {
     font-size: 125%;
     font-weight: bold;
     padding-left: 2em;
    color: #800;
}

.qaheader {
	margin:.5em 0px 1em 0px;
	padding: .3em;
	color: #ccc;
	background: #555;
	text-align: center;
	font-weight: 700;
	font-size: 2em;
	font-family: 'Montserrat', sans-serif;
}
.qAndA {
	max-width: 1000px;
	margin: 0px;
	text-align: left;
}
.qAndA dt {
	cursor: pointer;
	margin-top: .5em;
	font-weight: 700;
	width: 100%;
	padding: .5em;
	background: #ddd;
}
.qAndA dd {
	display:none;
	width: 100%;
	padding: .5em;
	margin: 0px 0px 1em 0px;
}

hr {
  height: 1px;
  background: transparent;
  border: none;
  clear: both;
  width: 70%;
  background-image: linear-gradient(to right, transparent, #333, transparent);
}

.expand {
    float: right;
    display:block;
    background-color:#eee;
    color: #888;
    padding: .5em;
    border-width: 1px;
    border-radius: 1em;
    border-color: #ccc;
    border-style: solid;
    font-size: .9em;
 }
 .expand:hover {
    background-color: #777;
    border-color: #777;
    color: #fff;
 }

/* ------------------------------ media queries ----------------------- */

@media only screen and (max-width: 850px) {
	#bannercont {
		height:0px;
		max-width:90%;
		width:700px;
		padding:44% 0 0 0;
		position:relative;
	}
}

@media only screen and (max-width: 700px) {
	.whole {
		box-shadow: inset 0px 0px 20% #88afff;
	}
	#main {
		display: block;
		padding: 1em;
	}
	#side {
		float: none;
		width: 100%;
		display: block;
		text-align: center;
		padding: .5em .5em .5em .5em; 
	}
    .sidenav {
		transform: none;
		width: 100%;
		white-space:normal;
		text-align: center;
	}
	.feeds {
		padding: 0px;
		transform: none;
	}
	.feeds img {
		margin-top: 0;
		width: 12px;
		height: 12px;
	}

	/*ul.sidenav {
	  counter-reset: my-custom-counter 8;
	  list-style: none;
	}

	ul.sidenav li {
	  counter-increment: my-custom-counter -1;
	}

	ul.sidenav li::before {
	  content: counter(my-custom-counter) '. ';
	  color: #f23c50;
	  font-size: 2.5rem;
	  font-weight: bold;
	}*/
	ul.sidenav {
	  display: flex;
	  justify-content: center;
  	  flex-direction: row-reverse;
  	  flex-wrap: wrap;
  	}
}





/****************** Misc post styles ****************/

.comicsContainer {
	margin: 1em;
	border-width: 5px;
	border-color: #00f;
	border-style: solid;
	padding: 10px;
	background-color: #999;
	position: relative;
	display: inline-block;
	width: 50vw;
	height: 20vw;
	overflow: hidden;
	cursor: none;
}
.parallaxBG {
	cursor: none;
}
.parallax2 {
	pointer-events: none;
	position: absolute;
}
.parallax1 {
	pointer-events: none;
	cursor: none;
}

.parallax-svg {
	border: 3px solid gray;
}

.images_title {
	font-size: 125%;
	font-weight: bold;
}
ul li {
	margin-bottom: .75em;
}
ul.qlist b {
	display: block;
	margin-bottom: .5em;
}

.sectionhead {
	font-size: 120%;
	font-weight: bold;
}
.thumbblock {
	width: 175px;
	display: inline-block;
	vertical-align: middle;
}
.thumbblock img {
	max-width: 175px;
}
.blurbblock {
	padding-left: 15px;
	max-width: 95%;
	width: 600px;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}
.row {
	padding-bottom: .5em;
}
@media only screen and (max-width: 765px) {
	.row { padding-bottom: 2em; }
	.blurbblock { text-align: center; }
}

/****************** Download chart ****************/

table.downloadchart {
	border-spacing: .1em;
	border-collapse: collapse;
}
.downloadchart thead th {
	text-align: left;
	background: #eef;
	padding: .5em;
	border: 1px solid #ccd2ff;
}
.downloadchart tr:hover {
	background: #f2f3ff;
}
.downloadchart td {
	border-width: 1px 1px 1px 1px;
	border-color: #ddd;
	border-style: solid;
	/*padding: .5em;*/
}
.downloadchart td:first-child {
	border-width: 1px 0px 1px 1px;
}
.downloadchart td:last-child {
	border-width: 1px 1px 1px 0px;
}
.downloadchart a {
	display:flex;
	padding: .5em;
	/*text-decoration:none;*/
	color: inherit;
}
.downloadchart td:first-child > a { 
	color: rgb(0,0,0);
}
.downloadchart td:last-child > a { 
	color: #cc0000;
}
.downloadchart a:hover {
	background: #f2f3ff;
}

#unstableDL thead th {
	background: #fdd;
}
#unstableDL tr:hover, #unstableDL a:hover {
	background: #fee;
}

.gridTable {
	display:inline-block;
}
.tableRow {
  display: grid;
  text-decoration: none;
  color: inherit;
  grid-template-columns: repeat(2);
  border: 2px solid #ccd2ff;
  border-bottom: none;
  cursor: pointer;
  /*height: 2em;*/
}

.tableRow:hover, .tableRow:focus {
	background: #f2f3ff;
	outline: none;
}

.tableRow:last-child {
	border-bottom: 2px solid #ccd2ff;
}

.tableCell {
  padding: .5em;
  border-right: 2px solid #ccd2ff;
}

.tableCell:last-child {
	border-right: none;
}

/************************ DTP Comparison chart ****************/
td.Yes {
  background: #00ff00;
  text-align: center;
}

td.No {
  background: #ffaaaa;
  text-align: center;
}

td.planned {
  background: #dddddd;
  text-align: center;
}

td.partial {
  background: #ddffdd;
  text-align: center;
}

td.plugin {
  background: #ddffff;
  text-align: center;
}

span.Yes {
  background: #00ff00;
}

span.No {
  background: #ffaaaa;
}

span.planned {
  background: #dddddd;
}

span.plugin {
  background: #ddffff;
}

span.partial {
  background: #ddffdd;
}
td.partial a:hover { background-color:aaddaa; }
td.plugin  a:hover { background-color:aadddd; }

.thetable {
  margin-top: 2.5em;
  padding: 5;
}
.thetable {
  border:2px solid #bbb;
  padding:0px;
  border-collapse: collapse;
}
.thetable td {
  padding:2px;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 0px solid #ccc;
  border-top: 0px solid #ccc;
} 
.thetable td div { display: none; }
.thetable td:hover div { display: block; }
.thetable td.header {
  background:#ddd;
  font-weight:bold;
  text-align: center;
}
.thetable td.desc {
  padding-left:1em;
}

.thetable a {
  display:block;
}
.thetable td.desc > a {
  display: inline;
}
.thetable tr:hover {
  background-color: #f0f0f0;
}
.floatingNote {
  position: absolute;
  left: 50%;
  padding: .5em;
  max-width: 90%;
  background: white;
  border: 1px solid #bbb;
  box-shadow: 0px 0px 40px #555;
  text-align: left;
}
.floatingNote a { display: inline-block; }