@charset "UTF-8";
/* CSS Document */
/*
Here are some commonly used CSS class selectors which 
-can applied to multiple elements on a page
-can be applied in and combination
*/
@font-face {
 font-family: RIOT;
 src: url("../fonts/RIOT.eot"), /* EOT file for IE */
		url("../fonts/RIOT.ttf") /* TTF file for CSS3 browsers */
}
* {
	box-sizing:border-box;/*This allows you to set and border width and padding but the div will retain its set width and set height*/
}
html, body {
	width:100%;
	min-height:100%;
	height:auto;
}
header, nav, section, article, figure, figcaption, aside, footer {/*ensures older browsers display these tags correctly*/
	display:block;/*only this property should be in this CSS selector set*/
}
body {/*these are the 5 basic CSS properties and values to start a website*/
	font-family: Verdana, sans-serif;/*change this for your design*/
	font-size: 100%;/*DON'T CHANGE THIS VALUE HERE - you can set font sizes in other selector styles*/
	color: rgba(255,255,255,1.00);/*main text color, default black, change as needed*/
	padding: 0;/*removes default settings*/
	z-index: 0;/*stacking order - small numbers a below high numbers*/
	position: relative;
	background-color: #000000;
}
#centeringDiv {
	width: 980px;
	height: 750px;
	margin: 0 auto;
	position: relative;
	z-index: 1;/*stacking order - small numbers a below high numbers*/
}
header {
	height: 212px;
	width: auto;
	position: relative;
}
#nameBox {
	font-family: RIOT;
	font-size: 4em;
	color: #FFFFFF;
	text-align: center;
	width: 100%;
	position: relative;
}
nav {
	height: 30px;
	width: 800px;
	margin: 0 auto;
	position: relative;
}
.btn {
	width: 189px;
	font-family: RIOT;
	height: 30px;
	text-align: center;
	cursor: pointer;
	float: left;
	margin-right: 10px;
	color: #FFFFFF;
}
.btn:hover {
	border-bottom: 3px solid #FFFFFF;
}
#allArticles {
	width: 100%;
	height: 600px;
	position: relative;
	/* [disabled]overflow-x: hidden; */
	overflow: hidden;
}
#allArticlesWrapper {
	width: 4000px;
	height: 600px;
	position: relative;
	top: 0px;
	left: 0px;
}
article {
	width: 980px;
	height: 600px;
	position: relative;
	float: left;
	padding: 10px;
}
#article0 {
}
#photonmusic {
	float: left;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#article1 {
}
#article2 {
}
#article3 {
}

/*===========Class rules to apply to multiple elements in the HTML===============================*/
.frame {/*this creates a frame around photo/text*/
	width: auto;/*fits the frame tightly around the photo/text*/
	height: auto;/*fits the frame tightly around the photo/text*/
	margin: 3px 10px 10px 10px;/*separates the outer wrapping text away from the frame border*/
	padding: 5px;/*separates the inner photo/text away from the frame border*/
	text-align: center;/*centers any caption under/above the photo inside frame*/
	border: 1px dotted #000000;/*styles the frame - adjust as desired*/
}
.frame p, figure p, figcaption p {text-indent: 0px;}/*for any paragraphs inside photo frames*/
.floatLeft {	float: left;}/*positions an element on the left of parent div and have text wrap around it*/
.floatRight {float: right;}/*positions an element on the right of parent div and have text wrap around it*/
.centerText {text-align: center;}/*apply to p, h1, h2, h3, h4, h5, h6 tags - positions text in center of parent div*/
.centerBox {	margin:0 auto;clear: both;}/*apply to div or figure tags - positions element in center of parent div - no outer text wrapping*/
.clearFloats {clear: both;}/*apply to div tags - clears away and floating or text wrapping*/
.roundedCorners10 {border-radius: 10px;}/*apply to img tags for rounded corners*/
.roundedCorners15 {border-radius: 15px;}
.roundedCorners20 {border-radius: 20px;}
.boxShadow5 {box-shadow: 5px 5px 5px #000000;}/*apply to div or img tags for shadows*/
.boxShadow10 {box-shadow: 10px 10px 10px #000000;}
.textShadow5 {text-shadow: 5px 5px 10px #000000;}/*apply to p, h1, h2, h3, h4, h5, h6 tags for shadows*/
.textShadow10 {text-shadow: 10px 10px 20px #000000;}
footer {
	width: 980px;
	height: 35px;
	padding: 10px;
	font-size: 0.8em;
	text-align: center;
	position: relative;
	clear: both;
}

.projectTitle{
	font-family: as;
	font-size:3em;
	color:#BE2CCF;
	position: absolute;
	text-align:center;
	z-index:30;
}
#projectTitle1 {
	top: 66px;
	left: 65px;
	width: 300px;
	height: 100px;
}
#projectTitle2 {
	top: 150px;
	left: 74px;
	width: 300px;
	height: 100px;
}
#projectTitle3 {
	top: 132px;
	left: 174px;
	width: 300px;
	height: 100px;
}

.webGraphic {
	position:absolute;
	z-index:20;	
}
#webGraphic1 {
	top: 72px;
	left: 256px;
	width: 300px;
	height: 100px;
}
#webGraphic2 {
	top: 72px;
	left: 256px;
	width: 300px;
	height: 100px;
}
#webGraphic3 {
	top: 72px;
	left: 256px;
	width: 300px;
	height: 100px;
}

.webBtn {
	width: 150px;
	height:50px;
	text-align:center;
	cursor:pointer;
	position:absolute;
	z-index:50;	
}
#webBtn1 {
	top: 500px;
	left: 600px;
}
#webBtn2 {
	top: 502px;
	left: 685px;
}
#webBtn3 {
	top: 500px;
	left: 600px;
}
#webBtn4 {
	top: 500px;
	left: 600px;
}

.projectInfo {
	width: 700px;
	height:300px;
	position:absolute;
	z-index:40;	
}
#projectInfo1 {
	top: 200px;
	left: 50px;
}
#projectInfo2 {
	top: 166px;
	left: 49px;
}
#projectInfo3 {
	top: 200px;
	left: 50px;
}
#projectInfo4 {
	top: 200px;
	left: 50px;
}