html {
	overflow-y: scroll;
}

body {

	background:#1c1818;
	background-image: url(design/squares.jpg);
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color: #FFFFFF;
	margin-top: 30px;

}

	

a:link {color:#FFFFFF}
a:visited {color:#FFFFFF}
a:hover {color:#CCCCCC}
a:active {color:#FFFFFF}

a {

	text-decoration:none;
	font-size:12px;

}

	

/* website boxes */


	/* main container element */
		#bigbox {
			max-width:1000px;
			min-width:800px;
			min-height: 600px;	
			margin:0 auto;
			text-align:left;
			border:1px solid #504442;
			background:#1c1818;
		}

	/* logo element */
		.logo {
			display:flex;
			flex
			width:0 auto;
			height:200px;
			min-height:200px;
			align-items: center;
  			justify-content: center;
			background:#000000;
			background-image: url('design/header.jpg');
		}

	/* collapsible style */

		.collapsible {
			background-color: #1c1818;
			color: #CCCCCC;
			cursor: pointer;
			padding: 18px 40px 18px 40px;
			width: 100%;
			border: none;
			text-align: left;
			outline: none;
			font-size: 20px;
		}

		.collapsible h1 {
			float: right;
			margin: 0px;
			font-size: 20px;
			color: #504442;
		}

		.collapsibleAlt {
			background-color: #181515;
		}

	/* active/hover collapsible aesthetics */

		.collapsible:hover {
			background-color: #362f2f;
		}

		.active {
			border-bottom:6px solid rgb(250, 204, 0);
			color: rgb(250, 204, 0);
		}

		.active:hover {
			border-bottom:6px solid rgb(250, 204, 0);
			color: rgb(250, 204, 0);
		}

		.active h1{
			color: rgb(250, 204, 0);
		}
		
		.active:hover h1{
			color: rgb(250, 204, 0);
		}

	/* collapsible content */

		.content {
			padding: 0 18px;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.1s ease-out;
			background-color: #1c1818;
			border-bottom:1px solid #504442;
		}

		.content2 {
			padding: 0 18px;
			max-height: 0;
			background-color: #1c1818;
		}
		

	/* category names */

		.category {
			background-color: #504442;
			color: #1c1818;
			padding: 7px;
			margin:0px;
			padding-left: 18px;
			border: none;
			text-align: left;
			outline: none;
			font-size: 15px;
		}

/* content boxes */

	/* main div */

		.contentFlex {
			display: flex;
			flex-wrap: nowrap;
			height:0 auto;
		}
		
		.contentBox {
			width:inherit;
			height:0 auto;
			padding: 30px 90px 30px 90px; 
			text-align: center;
			font-size: 15px;
			font-weight: normal;
			overflow:auto;
		}

		.contentBox2 {
			height:0 auto;
			min-height:360px;
			background-image: url('design/allback.jpg');
		}

		.contentAbout {
			padding: 30px 40px 30px 40px; 
		}

		.contentBox h2 {
			margin:0px 0px 30px 0px;
			font-size: 20px;
		}

	/* list of links */

		.listBar {
			text-align: center;
			padding: 0px;
			width:220px;
			max-width:220px;
			min-height: 250px;
			height:0 auto;
			display:inline-block;
			margin-left:34px;
			display:inline-block;
		}

		.barWide {
			text-align: center;
			padding: 0px;
			width:320px;
			max-width:320px;
			min-height: 250px;
			height:0 auto;
			display:inline-block;
			margin-left:34px;
			display:inline-block;
		}

	/* basic content */

		.revealContent {
			padding: 0px;
			margin: 0px;
			text-align: left;
			min-height: 250px;
			width:100%;
			min-width:200px;
		}

		.revealContent h1 {
			padding: 7px 20px 7px 20px;
			margin: 10px 0px 20px 0px;
			font-size: 15px;
			text-align:center;
			width:200px;
			min-width:200px;
			border:1px solid rgb(250, 204, 0);
			font-weight: normal;
		}

		.revealContentNarrow {
			min-height: 100px;
			height:0 auto;
			margin-bottom: 20px;
		}

	/* yellow header */

		.listBar h1 {
			padding: 7px 0px 7px 0px;
			font-size: 15px;
			margin: 0px;
			width:0 auto;
			border:1px solid rgb(250, 204, 0);
			font-weight: normal;
		}

	/* link div */

		.linkDiv {
			width:0 auto;
			height:0 auto;
			padding:2px 20px 2px 20px;
			line-height: 1.8;
		}

		.linkDiv a {
			font-size: 16px;
			font-weight: bold;
		}

/* media */

	/* photograph */
		.photoSelf {
			float:right;
			padding: 0px 0px 25px 25px;
		}

	/* thumbnail screenshot */
		
		.screenShot {
			width:0 auto;
			height: 250px;
			min-height: 250px;
			display:inline-block;
			background-color: #1c1818;

		}

		.screenThumb {
			width:0 auto;
			height:0 auto;
			min-height: 100px;
			display:inline-block;
			box-sizing: border-box;

		}

		.screenThumb:after {
			content: "";
			display: table;
			clear: both;
		}

		.column {
			float: left;
			width: 160px;
			padding: 10px 10px 40px 10px;
		  }

		.column img {
			opacity: 0.8; 
			cursor: pointer; 
			width: 160px;
		  }
		  
		.column img:hover {
			opacity: 1;
		  }

		.columnArt {
			float: left;
			width: 100px;
			padding: 4px 4px 4px 4px;
		  }

		.columnArt img {
			opacity: 0.8; 
			cursor: pointer; 
			border:1px solid #aa928e;
			width: 100px;
		  }
		  
		.columnArt img:hover {
			opacity: 1;
		  }

/* whatever this is */

	#footer {
			clear:both;
		}