/*----------------------------------[ 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/blue highway rg.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:url("pattern-raster.png");
	margin-bottom:20px;
}

body > div {
	background-color:white;
}

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

h1 {
	font-size:50px;
	line-height: 45px;
	letter-spacing: -2px;	
}
h2 {
	font-size:28px;
}
h3 {
	font-size:22px;
}
h4 {
	font-size:18px;
}
h5 {
	font-size:14px;
}

p {
	font-family:times;
	font-size:18px;
	color:#333;
}

ul {
	padding-left: 18px;
}

ul li {
	padding-bottom:5px;
}

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.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 {
	margin-top:0px;
	margin-bottom:5px;
}

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

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

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

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

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

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 {
	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: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;
}



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

body > div.logo {
	overflow:hidden;
	background-color:#f0f1f5;
}

div.logo.home {

/* 
	background:url("background-grey.png") repeat-x;
	background-size:auto 100%;
*/


	overflow:hidden;
	background-color:#f0f1f5;
	text-align:center;
}

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

div.logo.home img {
	max-width: 700px;
	width: 80%;
	height:auto;
	margin-bottom:-8px;
}

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

div.byline {
	background-color:white;
	color: #aaa;

	padding-top:5px;
	padding-bottom:0px;
	
	font-family:micron55;
	
	text-align: center;
	font-size: 8px;
}

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

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

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

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

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

div.introduction img.hr {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 64px;
	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: #e40052; /* Old browsers */
	background: -moz-linear-gradient(top, 	 #ec4c86 0%, #ec4c86 50%, #e40052 50%, #e40052 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ec4c86 0%, #ec4c86 50%, #e40052 50%, #e40052 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, 	 #ec4c86 0%, #ec4c86 50%, #e40052 50%, #e40052 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
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: #3b97f7; /* Old browsers */
	background: -moz-linear-gradient(top,    #76b6f9 0%, #76b6f9 50%, #3b97f7 50%, #3b97f7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #76b6f9 0%, #76b6f9 50%, #3b97f7 50%, #3b97f7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,   #76b6f9 0%, #76b6f9 50%, #3b97f7 50%, #3b97f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

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:#e40052;
}
body > div.bar2 {
	background-color:#f5661a;
}
body > div.bar3 {
	background-color:#d6dd1b;
}
body > div.bar4 {
	background-color:#2cc162;
}
body > div.bar5 {
	background-color:#3b97f7;
}
div.sectioncontent.bar1 > h2:first-child {
	border: #000 0px solid;
	border-color:#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-commodore.png") 16px bottom no-repeat;
	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%;
	}
	
	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 {
	max-width:100%;
}

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

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

div.sidebar img.separator {
	display:block;
	
	margin-left:auto;
	margin-right:auto;
	
	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.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 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;
}

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

img.fit {
	max-width:90%;
	height:auto;
	
	border:1px solid #999;
	padding:5px;
	
	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;	
}

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




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

div.search {
	background-color: transparent;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

div.search span {
	font-family:micron55;
	font-size:8px;
	color:white;
}

div.search span a {
	color:white !important;
}





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

	background-color:#4374fc;
	background-image: url("pattern-raster.png");
	
	box-shadow:0px 0px 45px -20px black;
	
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

div.donationpopover.hidden {
	display:none;
}

div.donationpopover h1 {
	text-align:center !important;
	font-size: 30px !important;
	line-height: 45px !important;
	letter-spacing: 0px !important;
}

div.donationpopover h1.top {
	margin-top:10px !important;
	margin-bottom:10px !important;

	color:white;
}

div.donationpopover h2 {
	font-size:18px;
	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:80px;
	
	left:0px;
	right:0px;
}

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

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:1fr 1fr;
	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-top:20px;
	margin-bottom: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;
}


@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:3px;
	background-color:#f6f6f6;
}

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