/*----------------------------------[ FONTS ]-----------------------------------*/

@font-face {
	font-family: 'c64pro';
	src: url('fonts/C64_Pro-STYLE.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'headingfont';
	src: url('fonts/Outfit-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'regularfont';
	src: url('fonts/Outfit-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'micron55';
	src: url('fonts/MicroN55.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

body {
	margin:0px;
	background-color:rgb(240, 241, 245);
}

body > div {
	background-color:white;
}

h1,h2,h3,h4,h5 {
	font-family:headingfont;
	color:#28303A;
}

h1 {
	font-size:50px;
	line-height: 45px;
	letter-spacing: -2px;	
	
	vertical-align:center;
}
h1 img.icon {
	width:50px;
	position:relative;
	top:5px;
	padding-right:20px;
}
h2 {
	font-size:28px;
}
h3 {
	font-size:22px;
}
h4 {
	font-size:18px;
}
h5 {
	font-size:14px;
}

p {
	font-family:times;
	font-size:18px;
	color:#28303A;
	font-weight:400;
}
p > img.icon {
	width:18px;
	position:relative;
	top:3px;
	padding-right:10px;
}
p.hanging {
  padding-left: 22px ;
  text-indent: -22px ;
}

p code,
li code {
	font-family:monospace,courier;
	font-size: 17px;
	color: rgb(102, 142, 74);
	font-weight:400;
}

span.subtle {
	color:#999;
}

div.content ol {
	padding-left: 25px;
}

div.content ol li {
	padding-bottom:5px;
	font-family:times;
	font-size:18px;
	color:#28303A;
}

ul {
	padding-left: 18px;
}

ul li {
	padding-bottom:5px;
	font-family:times;
	font-size:18px;
	color:#28303A;
}

ul.menu {
	overflow:hidden;
}

ul.menu li {
	float:left;
	margin-left: 5px;
	margin-right: 25px;
	font-size: 20px;
}

ul.vmenu ul {
	margin-top: 10px;
	margin-bottom: 20px;
	margin-left:25px;
}


li.break {
	margin-top:14px;
}

a[href] {
	text-decoration:none;
	color: #4374fc;
}

a[href]:visited {
	text-decoration:none;
	color: #345ac4;
}

a[href]:hover, a[href]:visited:hover {
	text-decoration:underline;
}

a.slug:hover {
	text-decoration:none;
}

div.content p.lastmodified {
	font-style:italic;
	text-align:right;
}

.feature p.lastmodified {
	font-style:italic;
	text-align:left;
}

div.content p.pagesettings {
	font-style:italic;
	text-align:right;
}

div.date {
	margin-top:10px;
	font-size:12px;
	font-family:times;
	font-style:italic;
}

div.date em {
	padding-left:20px;
	color: #aaa;
}

div.warning {
	border-radius:4px;
	background-color:rgb(255, 198, 204);
	
	padding:15px;
	margin-bottom:15px;
}

div.note {
	border-radius:4px;
	background-color:rgb(255, 249, 198);
	
	padding:15px;
	margin-bottom:15px;
}

div.note.hacker {
	background-image:url("icon-hackernote.png");
	background-repeat:no-repeat;
	background-size: 66px 66px;
	background-position:top right;
}

div.note h4,
div.warning h4 {
	margin-top:0px;
	margin-bottom:5px;
}

div.note p:last-child,
div.warning p:last-child {
	margin-bottom:0px;
}

div.note + h4,
div.warning + h4 {
	margin-top:80px;
}

p.note {
	color:#888;
}

a.img {
	cursor: -moz-zoom-in;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}

img.appicon {
	float:right;
	margin-right:0px;
	margin-left:20px;
	margin-top:0px;
	margin-bottom:15px;
}

img.utilshot {
	float:right;
	margin-right:0px;
	margin-left:20px;
	margin-top:0px;
	margin-bottom:15px;
	
	max-width:240px !important;
}

video {
	display:block;
	max-width:90%;
	height:auto;
	
	padding:5px;
	margin:0 auto;
	border:3px solid #999;
	border-style:double;
}

.hidden {
	display:none;
}

.transparent {
	opacity:0.0;
}

div.columns3 {
	display:grid;

	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows: auto;
	
	grid-column-gap:20px;
}

div#disqus_recommendations {
	display:none;
}

a.button {
	display:inline-block;
	border:1px solid #ccc;
	color:#28303A;
	padding:0px 5px;
	border-radius:3px;
	cursor:pointer;
	
	-webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a.button:hover {
	text-decoration: none;
}

a.fancybutton,
input.fancybutton {
	border-width:0px;
	border-radius:10px;
	background-color:yellow;
	
	display:inline-block;
	width:180px;
	height:50px;
	
	margin-top:20px;
	margin-bottom:20px;
	margin-right:20px;
	
	
	line-height:50px;
	text-align:center;
	
	color:white !important;
	font-family:headingfont;
	font-size:18px;

	cursor:pointer;

	-webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a.fancybutton:hover {
	text-decoration: none;
}

.fancybutton.signin,
.fancybutton.submit {
	background-color:#2cc162;
}
.fancybutton.reset,
.fancybutton.order {
	background-color:#0070e8;
}
.fancybutton.learn,
.fancybutton.download {
	background-color:#2cc162;
}

ul.twocolumns {
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
}
ul.threecolumns {
	columns: 3;
	-webkit-columns: 3;
	-moz-columns: 3;
}

@media (max-width: 600px) {
	ul.threecolumns {
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
	}
}


div.clear {
	clear:both;
}

cite.clear {
	clear:both;
	text-align:center;
	display:block;

	font-style:italic;
	font-size:20px;

	margin-top:20px;
	margin-bottom:20px;
}

ol.footnotes {
	font-size: 10px;
	padding-left: 15px;
	font-family: sans-serif;
	font-style: italic;
}
ol.footnotes li {
	padding-bottom:10px;
}
hr {
	height:1px;
	background-color:#999;
	border:0;
	width:60%;
	
	margin-top:50px;
	margin-bottom:50px;
}

hr.halfheight {
	margin-bottom:0px;
}

hr.clear {
	clear:both;
}

blockquote:not(.tiktok-embed) {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 75%;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
}

blockquote:not(.tiktok-embed):before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -5px;
	top: -20px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "\2014 \2009";
}

div.post {
	clear:both;
}

div.post > div:first-child {
	padding-top: 20px;
	padding-left: 20px;
	width: 70%;
	float: right;
	box-sizing:border-box;
}

div.post > div:first-child em {
	padding-left:20px;
}

div.post > div:last-child {
	position: relative;
	width:    30%; /* desired width */
	
	border:1px solid black;
	
	margin-bottom:20px;
}

div.post > div:last-child:before {
	content:     "";
	display:     block;
	padding-top: 100%; /* initial ratio of 1:1*/
}

div.post > div:last-child div {
	position: absolute;
	top:      0;
	left:     0;
	bottom:   0;
	right:    0;
	
	margin:5px;
	background-size:cover;
	background-position: center center;
}


/*----------------------------------[ BODY ROOT ]-----------------------------------*/

body > div.root {
	background-image:url("c64c-profile-crop-wide.jpg");
	background-repeat:no-repeat;
	background-position:bottom center;
}

body > div.root.noback {
	background-image:none;
}


@media (max-width: 1400px) {
	body > div.root {
		background-size:100%;
	}
}

@media (min-width: 1400px) {
	body > div.root {
		background-size:1400px;
	}
}

/*----------------------------------[ HEADERS ]-----------------------------------*/

body > div.root > div.header.home {
	background-color:#f0f1f5;
	background-image:none;
	padding-top:0px;
	
	overflow:hidden;
}

div.logo.home {
	position:relative;
	max-width:1100px;

	padding:20px;
	margin-left:auto;
	margin-right:auto;
}

div.introduction.grid {
	display:grid;
	grid-template-columns: 55% 45%;
	gap:20px;
}

div.logo.home div.introduction img {
	width:90%;
	height:auto;

	margin:50px auto;
}

div.logo.home h1 {
	margin-top:50px;
	margin-bottom:10px;
}
div.logo.home h3 {
	margin-top:0px;
}


body > div.logo > div {
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
}

body > div.logo.header {
	overflow:hidden;
	background-color:#f0f1f5; /*#eeeeee;*/
	
	margin-top:20px;
	margin-bottom:20px;
}

body > div.logo.header img.logo {
	float: left;
	width: 40%;
	max-width:350px;
	height: auto;
	margin-left: 10px;

	margin-bottom:10px;
	margin-top:10px;
}
body > div.logo.header img.c64 {
	float: right;
	width: 40%;
	max-width:350px;
	height: auto;
	margin-right: 10px;
	
	margin-bottom:10px;
	margin-top:10px;
}

div.main {
	position:relative;
	max-width:1100px;

	padding:20px;
	margin-left:auto;
	margin-right:auto;
}

div.main.welcome {
	background-image:none;
	padding-top:0px;
}

div.introduction img.c64csystem {
	width:55%;
	height:auto;
	
	float:left;
	padding-right:20px;
	padding-bottom:20px;
}

@media (max-width: 600px) {
	div.introduction img.c64csystem {
		width:95%;
		height:auto;
	
		float:none;
		padding-right:0px;
		padding-bottom:0px;
	}
}

div.introduction img.hr {
	display: block;
	margin:60px auto;
	width: 48px;
	clear:both;
}

div.introduction cite.clear { 
	background-color: #4374fc;
	color: white;
	padding: 20px;
	border-radius:3px;
}

@media (max-width: 1000px) {
	div.introduction h1 {
		font-size:40px;
		line-height:40px;
	}
}
@media (max-width: 600px) {
	div.introduction h1 {
		font-size:30px;
		line-height:30px;
	}
}




/*----------------------------------[ NAVIGATION ]-----------------------------------*/

div.topnav {
	background-color:#f0f1f5;
}

div.topnav.home {
	background-color:#fff;
}

div.topnav div.tabs {
	max-width:1100px;
	
	margin-left: auto;
	margin-right: auto;
	
}

div.topnav div.tabs ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

div.topnav div.tabs ul li {
	margin: 0;
	padding: 0;
	
	height: 5vw;
	max-height:60px;
	width: calc(100% / 5);
	
	font-family:c64pro;
	text-align:center;
	color:white;
	font-size:16px;

	display:inline-flex;
  flex-direction:column;
	justify-content:center;		
	text-transform:uppercase;
}

@media (max-width: 1000px) {
	div.topnav div.tabs ul li {
		font-size:12px;
	}
}

@media (max-width: 600px) {
	div.topnav div.tabs ul li {
		font-size:8px;
	}
}

div.topnav div.tabs ul li a {
	color:white;
	text-decoration:none;

	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	
	height:100%;
}

div.topnav div.tabs ul li:nth-child(1) {
	background: #e60c34; /* #e40052; */
	background: -moz-linear-gradient(top, 	 #dd5a63 0%, #dd5a63 50%, #e60c34 50%, #e60c34 100%);
	background: -webkit-linear-gradient(top, #dd5a63 0%, #dd5a63 50%, #e60c34 50%, #e60c34 100%);
	background: linear-gradient(to bottom, 	 #dd5a63 0%, #dd5a63 50%, #e60c34 50%, #e60c34 100%);

/* 
	background: -moz-linear-gradient(top, 	 #ec4c86 0%, #ec4c86 50%, #e40052 50%, #e40052 100%);
	background: -webkit-linear-gradient(top, #ec4c86 0%, #ec4c86 50%, #e40052 50%, #e40052 100%);
	background: linear-gradient(to bottom, 	 #ec4c86 0%, #ec4c86 50%, #e40052 50%, #e40052 100%);
 */
}
div.topnav div.tabs ul li:nth-child(2) {
	background: #f5661a; /* Old browsers */
	background: -moz-linear-gradient(top, 	 #f8945f 0%, #f8945f 50%, #f5661a 50%, #f5661a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f8945f 0%, #f8945f 50%, #f5661a 50%, #f5661a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, 	 #f8945f 0%, #f8945f 50%, #f5661a 50%, #f5661a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
div.topnav div.tabs ul li:nth-child(3) {
	background: #d6dd1b; /* Old browsers */
	background: -moz-linear-gradient(top,		 #e2e75f 0%, #e2e75f 50%, #d6dd1b 50%, #d6dd1b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #e2e75f 0%, #e2e75f 50%, #d6dd1b 50%, #d6dd1b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, 	 #e2e75f 0%, #e2e75f 50%, #d6dd1b 50%, #d6dd1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
div.topnav div.tabs ul li:nth-child(4) {
	background: #2cc162; /* Old browsers */
	background: -moz-linear-gradient(top,    #6bd491 0%, #6bd491 50%, #2cc162 50%, #2cc162 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #6bd491 0%, #6bd491 50%, #2cc162 50%, #2cc162 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,   #6bd491 0%, #6bd491 50%, #2cc162 50%, #2cc162 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
div.topnav div.tabs ul li:nth-child(5) {
	background: #0070e8; /* #3b97f7; */ /* Old browsers */
	background: -moz-linear-gradient(top,    #558ee6 0%, #558ee6 50%, #0070e8 50%, #0070e8 100%);
	background: -webkit-linear-gradient(top, #558ee6 0%, #558ee6 50%, #0070e8 50%, #0070e8 100%);
	background: linear-gradient(to bottom,   #558ee6 0%, #558ee6 50%, #0070e8 50%, #0070e8 100%);

/* 
	background: -moz-linear-gradient(top,    #76b6f9 0%, #76b6f9 50%, #3b97f7 50%, #3b97f7 100%);
	background: -webkit-linear-gradient(top, #76b6f9 0%, #76b6f9 50%, #3b97f7 50%, #3b97f7 100%);
	background: linear-gradient(to bottom,   #76b6f9 0%, #76b6f9 50%, #3b97f7 50%, #3b97f7 100%);
 */
}

body > div.bar1,
body > div.bar2,
body > div.bar3,
body > div.bar4,
body > div.bar5 {
	height:1vw;
	max-height:10px;
	width:100%;
}

body > div.bar1 {
	background-color:#e60c34; /* #e40052; */
}
body > div.bar2 {
	background-color:#f5661a;
}
body > div.bar3 {
	background-color:#d6dd1b;
}
body > div.bar4 {
	background-color:#2cc162;
}
body > div.bar5 {
	background-color: #0070e8; /* #3b97f7; */
}
div.sectioncontent.bar1 > h2:first-child {
	border: #000 0px solid;
	border-color:#e60c34; /* #e40052; */
	border-bottom-width: 6px;
}
div.sectioncontent.bar2 > h2:first-child {
	border: #000 0px solid;
	border-color:#f5661a;
	border-bottom-width: 6px;
}
div.sectioncontent.bar3 > h2:first-child {
	border: #000 0px solid;
	border-color:#d6dd1b;
	border-bottom-width: 6px;
}
div.sectioncontent.bar4 > h2:first-child {
	border: #000 0px solid;
	border-color:#2cc162;
	border-bottom-width: 6px;
}
div.sectioncontent.bar5 > h2:first-child {
	border: #000 0px solid;
	border-color:#3b97f7;
	border-bottom-width: 6px;
}






p.more a {
	display: inline-block;
	border: 1px solid #4374fc;

	border-radius: 4px;
	padding-left:10px;
	padding-right:10px;

	height: 30px;
	line-height: 30px;
}

div.main div.sectioncontent div.date {
	display:inline-block;
	padding-left:20px;
}
div.main div.sectioncontent h3.posttitle {
	display:inline-block;
}

ul.quicklinks {
  overflow:hidden;
  padding-bottom:10px;
}

ul.quicklinks li {
	float:left;
	width:25%;
}

@media (max-width: 600px) {
	ul.quicklinks li {
		width:33%;
	}
}

div.main div.overlay {
	/* 
	background:rgba(255,255,255,0.6) url("logo-sidebar.png") 16px bottom no-repeat;
	background-size:100px;
	 */
	background:rgba(255,255,255,0.6);
	background-size:100px;
	overflow:hidden;
}

div.main div.overlay div.sidebar {
	float:left;
	width:30%;
	
	padding-top: 		 18px;
	padding-right: 	 20px;
	padding-bottom: 100px;
	
	box-sizing: border-box;
}

div.main div.overlay div.content {
	float:right;
	width:70%;
	padding-bottom:300px;
}

div.main div.overlay div.content div.sidemenu,
div.main div.overlay div.sidebar div.sidemenu {
	display:none;
}

@media (max-width: 600px) {
	div.main div.overlay {
		position:relative;
	}

	div.main div.overlay div.sidebar {
		float:none;
		width:100%;

		position:absolute;
		top:0px;
		left:-100%;
		z-index:1;
		background-color:white;
		padding-right:0px;
		
		transition:left 0.2s ease-in;
	}
	
	div.main div.overlay div.sidebar.show {
		left:0%;
	}
	
	div.main div.overlay div.content {
		float:none;
		width:100%;
		padding-bottom:200px;
	}
	
	div.main div.overlay div.content div.sidemenu {
		display: block;
		height: 50px;
		width: 50px;
		margin-bottom:15px;
		
		background-image: url("icon-plus.svg");
		background-size: 64px 64px;
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	div.main div.overlay div.sidebar div.sidemenu	{
		display: block;
		height: 50px;
		width: 50px;
		
		background-image: url("icon-back.svg");
		background-size: 64px 64px;
		background-repeat: no-repeat;
		background-position: center center;
	}
}

div.main div.overlay div.sidebar img.fit {
	display:block;
	margin:0px auto;
	
	border-width:0px;
}

div.main div.overlay div.sidebar p.center {
	text-align:center;
}

div.main div.overlay div.sidebar p.center span {
	display:block;
	font-style:italic;
	padding:5px 0px;
}

div.main div.overlay div.sidebar ul {
	padding-left: 20px;
}
div.main div.overlay div.sidebar ul li {
	padding-bottom: 5px;
}

div.main div.overlay div.sidebar > ol li {
	padding-top:10px;
}

div.main div.overlay div.sidebar ol li ol {
	padding-bottom:20px;
}

div.main div.overlay div.sidebar ol li ol li ol {
	padding-bottom:0px;
}

div.sidebar h2 {
	font-size: 26px;
	color:#555;
	border:0px solid #e7e7e7;
	border-bottom-width:1px;
	
	margin-top:40px;
}
div.sidebar h2:first-of-type {
	margin-top:16px;
}

div.sidebar h3 {
	font-size: 16px;
	font-weight:normal;
}

h3.posttitle {
	font-size: 16px;
	font-weight:normal;
	margin-top:3px;
	margin-bottom:20px;
}

div.sidebar p {
	color:#555;
	font-size:14px;
	text-align:justify;
	margin-right:20px;
}

div.sidebar ul li,
div.sidebar ol li {
	color:#555;
	font-size:16px;
}

div.sidebar img.separator {
	display:block;
	
	margin-left:auto;
	margin-right:auto;
	
	padding-right:20px;
	
	width:150px;
	height:96px;
}

div.sidebar img.donate {
  width:154px;
  height:125px;
  
  display:block;
  margin-left:auto;
  margin-right:auto;
}

div.sidebar ol {
	padding-left:25px;
}

div.sidebar div.socialmedia {
	overflow:hidden;
	text-align:center;
}

div.sidebar div.socialmedia a {
	display:inline-block;
	text-align:center;

	width:30%;
}

div.sidebar div.socialmedia img {
	margin:20px 0px;
	
	width:60%;
	
	max-width:64px;
	max-height:64px;
}


/* 
div.content > h1:first-of-type {
	margin-top:15px;
}

 */
div.content p {
	text-align:justify;
}

div.main div.overlay div.content div.sectionicon {
  float:right;
	width:30%;
	
	text-align:right;
	
	box-sizing:border-box;
}

div.main div.overlay div.content div.sectionicon img {
	width:90%;

	border: 1px solid #999;
	border-radius: 5%;
	padding: 5px;

	box-sizing: border-box;
}

div.main div.overlay div.content div.sectionicon.plain img {
	width:90%;

	border: 0px solid #999;
	border-radius: none;
	padding: 5px;

	box-sizing: border-box;
}

div.main div.overlay div.content div.sectioncontent {
	margin-bottom:80px;
}

div.main div.overlay div.content div.sectioncontent .rssbutton {
	float:right;
}

/*----------------------------------[ TABLES ]-----------------------------------*/

table.thinoutline {
	border:0px solid black;
	border-left-width:1px;
	border-top-width:1px;
	
	border-collapse:collapse;
	
	margin-top:30px;
	margin-bottom:10px;
}

table.thinoutline.full {
	width:100%;
}

table.thinoutline th {
	background-color:#dfdfdf;
}

table.thinoutline th,table.thinoutline td {
	text-align:left;
	border:0px solid black;
	border-right-width:1px;
	border-bottom-width:1px;
	padding:5px;
}

table.thinoutline td img {
	border:1px solid black;
}

table.thinoutline td div.paypal div img {
	border-width:0px;
}

table.filetree th:nth-child(2) {
	text-align:center;
}

table.filetree td:first-child {
	white-space:nowrap;
}

table.filetree td.n1 {
	padding-left:20px;
}
table.filetree td.n2 {
	padding-left:40px;
}
table.filetree td.n3 {
	padding-left:60px;
}

table.filetree td.application {
	width:40px;
	min-width:40px;
	background-image:url("https://s3.amazonaws.com/com.c64os.resources/c64os/users_guide/filesystem/icon-application.png");
	background-position:center center;
	background-size:20px 20px;
	background-repeat:no-repeat;
}
table.filetree td.folder {
	width:40px;
	min-width:40px;
	background-image:url("https://s3.amazonaws.com/com.c64os.resources/c64os/users_guide/filesystem/icon-folder.png");
	background-position:center center;
	background-size:20px 20px;
	background-repeat:no-repeat;
}
table.filetree td.seq {
	width:40px;
	min-width:40px;
	background-image:url("https://s3.amazonaws.com/com.c64os.resources/c64os/users_guide/filesystem/icon-seq.png");
	background-position:center center;
	background-size:20px 20px;
	background-repeat:no-repeat;
}
table.filetree td.prg {
	width:40px;
	min-width:40px;
	background-image:url("https://s3.amazonaws.com/com.c64os.resources/c64os/users_guide/filesystem/icon-prg.png");
	background-position:center center;
	background-size:20px 20px;
	background-repeat:no-repeat;
}
table.filetree td.utility {
	width:40px;
	min-width:40px;
	background-image:url("https://s3.amazonaws.com/com.c64os.resources/c64os/users_guide/filesystem/icon-utility.png");
	background-position:center center;
	background-size:20px 20px;
	background-repeat:no-repeat;
}

/* 
table.filetree td:nth-child(1) {
	width:20%;
}
table.filetree td:nth-child(3) {
	width:80%;
}
*/

/*----------------------------------[ IMAGES ]-----------------------------------*/

img.fit {
	max-width:90%;
	height:auto;
	
	border:1px solid #999;
	border-radius: 3px;
	padding:5px;
	
	box-sizing:border-box;
}

img.tightfit {
	max-width:100%;
	height:auto;
	
	border:1px solid #999;
	padding:0px;
	
	box-sizing:border-box;
}

img.fixed {
	max-width:90%;
	max-height:auto;
	
	border:1px solid #999;
	padding:5px;
	
	box-sizing:border-box;
}

img.frame {
	border:1px solid #999;
	padding:5px;
	
	box-sizing:border-box;
}

img.frameless {
	border-width:0px;	
}

img.center {
	display:block;
	margin:0px auto;
}

div.twoup img {
	width:49%;
	box-sizing:border-box;
}
div.threeup img {
	width:32%;
	box-sizing:border-box;
}
div.fourup img {
	width:24%;
	box-sizing:border-box;
}
div.vertical_horizontal_up a:first-child img {
	width:35%;
	box-sizing:border-box;
}
div.vertical_horizontal_up a:last-child img {
	width:61%;
	box-sizing:border-box;
}
div.horizontal_vertical_up a:first-child img {
	width:61%;
	box-sizing:border-box;
}
div.horizontal_vertical_up a:last-child img {
	width:35%;
	box-sizing:border-box;
}

div.vertical_vertical_horizontal_up a img {
	width:25%;
	box-sizing:border-box;
}
div.vertical_vertical_horizontal_up a:last-child img {
	width:43%;
	box-sizing:border-box;
}
div.horizontal_horizontal_vertical_up a img {
	width:37.5%;
	box-sizing:border-box;
}
div.horizontal_horizontal_vertical_up a:last-child img {
	width:22%;
	box-sizing:border-box;
}

img.signature {
	width:250px;
}

/*------------------------[ CGFX IMAGES BLOCKS ]------------------------------*/

div.cgfx:not(.fullwidth) {
	margin-top:50px;
	margin-bottom:50px;

	overflow:hidden;
}

div.cgfx img {
	cursor:pointer;
}

div.cgfx:not(.play) video {
	display:none;
}

div.cgfx.play img {
	display:none;
}

div.cgfx.fullwidth {
	max-width:90%;

	margin-bottom:5px;

	border:1px solid #999;
	border-radius: 3px;
	padding:5px;
	
	box-sizing:border-box;
}

div.cgfx.fullwidth video,
div.cgfx.fullwidth img {
	width:100%;
	max-width:100%; /* override video styles */

	margin:0px auto;
	padding:0px;
	border:0px;
}

@media (max-width: 600px) {
	div.cgfx {
		text-align:center;
	}

	div.cgfx.left div {
		width:95%;
		text-align:left;
	}

	div.cgfx.right div {
		width:95%;
		text-align:left;
	}

	div.cgfx video,
	div.cgfx img {
		width:85%;

		margin:0px auto;
		padding:0px;
		border:0px;
	}
}

@media (min-width: 600px) {
	div.cgfx.left video,
	div.cgfx.left img {
		float:left;
	}
	div.cgfx.left div {
		float:right;
		width:40%;
	}

	div.cgfx.right video,
	div.cgfx.right img {
		float:right;
	}
	div.cgfx.right div {
		float:left;
		width:40%;
	}

	div.cgfx video,
	div.cgfx img {
		width:50%;

		margin:0px;
		padding:0px;
		border:0px;
	}
}




/*----------------------------------[ FOOTER ]-----------------------------------*/

div.sitemap {
	background-color:#f0f1f5;
	border-top:1px solid #999;
	
	padding-top:25px;
	padding-bottom:25px;
}

div.sitemap > div {
	overflow:hidden;
	max-width:1100px;

	padding:20px;
	margin-left:auto;
	margin-right:auto;

	background:url("logo-opcoders-mono.png") 40px 22px no-repeat;
	background-size:80px;
}

div.sitemap div.gridcontainer {
	float:right;
	width:70%;

	display: grid;
	grid-columns: 1, 1, 1;
	column-gap: 30px;
	color:#666;
}

div.sitemap div.gridcontainer h2 {
	margin-top:0px;
	color:#666;
}

div.sitemap div.gridcontainer > div {
	vertical-align:top;
}

div.sitemap div.gridcontainer > div.content {
	grid-column-start: 1;
	grid-row-start:1;
	grid-row-end:3;
}
div.sitemap div.gridcontainer > div.legal {
	grid-column-start: 2;
	grid-row-start:1;
	grid-row-end:2;
}
div.sitemap div.gridcontainer > div.about {
	grid-column-start: 3;
	grid-row-start:1;
	grid-row-end:2;
}

div.sitemap div.gridcontainer > div.copyright {
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start:2;
	grid-row-end:3;

	font-size:12px;
	
	display: grid;
  align-items: end;	
  padding-bottom: 3px;
}

div.sitemap h2 {
	font-size:20px;
}

div.sitemap ul {
	list-style-type: none;
	padding: 0;
	margin: 0; 
}

div.sitemap ul li {
	font-family:regularfont;
	font-size:14px;
}

div.sitemap ul li a {
	color:#999 !important;
}

div.sitemap div.gridcontainer > div.copyright {
	font-size:12px;
	font-family:regularfont;
}

@media (max-width: 600px) {
	div.sitemap {
		background-size:100px 100px;
	}

	div.sitemap div.gridcontainer {
		float:none;
		width:100%;
	}
	
	div.sitemap > div {
		background:none;
	}
}





/*----------------------------------[ DONATIONS ]-----------------------------------*/

div.donate img.hidden {
	display:none;
}

div.donationpopover {
	position:fixed;
	z-index:5;
	
	top:40px;
	right: 0;
	left: 0;
	bottom:40px;
	
	margin-right: auto;
	margin-left: auto;
    
	max-width:960px;
	
	height:auto;

	box-shadow:0px 0px 45px -20px black;
	
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

div.donationpopover.hidden {
	display:none;
}

div.donationpopover div.top {
	background-color:#0070e8;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

div.donationpopover h1 {
	color:white;
	text-align:center !important;
	font-size: 30px !important;
	line-height: 60px !important;
	letter-spacing: 0px !important;
	margin-top:0px;
	margin-bottom:0px;
}

div.donationpopover h2 {
	font-size:22px;
	text-align:left;

	margin-top: 10px !important;
	margin-bottom: 15px !important;
}

div.donationpopover div.middle {
	background-color:white;

	position:absolute;
	top:60px;
	bottom:70px;
	left:0px;
	right:0px;

	padding:20px;
	overflow:auto;
}

div.donationpopover div.footer {
	position:absolute;
	bottom:0px;
	height:70px;
	
	left:0px;
	right:0px;
	
	background-color:#4374fc;
	background-image: url("pattern-raster.png");
}

div.donationpopover div.footer img.logo {
	position:absolute;
	bottom:15px;
	left:20px;
	
	width:44px;
}

div.donationpopover div.footer h4 {
	position:absolute;

	bottom:0px;
	right:0px;

	margin-right:20px;
	color:white;
	
	cursor:pointer;
}

div.product {
	display:grid;

	grid-template-columns:2fr 3fr;
	grid-template-rows: auto;
	
	grid-column-gap:20px;

	margin-bottom:20px;
}

div.product > div.image {
	text-align:center;

	margin-top:20px;
	margin-bottom:20px;
}

div.product img.product {
	width:auto;
	max-width:300px;
}

div.product > div.description {
	text-align:left;
	
	margin-left:20px;
	margin-right:20px;
}

div.product > div table {
	margin:0 auto;
}

div.roundedbox_container {
	display:grid;
	
	grid-template-columns:1fr 1fr;
	grid-template-rows: auto;
	
	grid-column-gap:20px;
	
	margin-bottom:20px;
}


@media only screen and (max-width: 600px) {
	div.donationpopover {
		top:0px;
		bottom:0px;
	
		border-top-left-radius:0px;
		border-top-right-radius:0px;
	}
	
	div.product {
		grid-template-columns:1fr;
		grid-row-gap:20px;
	}
	
	div.roundedbox_container {
		grid-template-columns:1fr;
		grid-row-gap:20px;

	}
}


div.roundedbox {
	border-top:1px solid #dcdcdc;
	border-left:1px solid #dcdcdc;

	border-bottom:1px solid #ececec;
	border-right:1px solid #ececec;
	
	border-radius:8px;
	background-color:#f6f6f6;
	
	overflow:hidden;
}

div.roundedbox.white {
	background-color:#fff;
	border-width:0px;
}

div.roundedbox_container div.label {
	padding-left:15px;
	padding-bottom:5px;
	font-size:14px;
}

div.roundedbox_container div.roundedbox img.logo {
	display:block;
	padding:10px;
	width:75px;
	
	margin-left:auto;
	margin-right:auto;
}

div.roundedbox img.logo.digitalocean {
	width:40%;
	max-width:290px;
	margin:20px;
	float:right;
	border-radius:4px;
}

div.roundedbox_container div.roundedbox img.paybutton {
	display:block;

	padding-top:20px;
	padding-bottom:20px;

	margin-left:auto;
	margin-right:auto;
}

div.roundedbox_container div.roundedbox img.qrcode {
	height:100px;
	padding-top:0px;
}

div.roundedbox_container div.roundedbox div.bitaddr {
	font-size:12px;
	text-align:center;
	font-family:sans-serif;
	
	padding-top:10px;
	padding-bottom:10px;
}