@charset "UTF-8";
/* CSS Document */
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure, figcaption {
     display: block;
}
body {
	margin:0px;
	padding:0px;
}
#centeringDiv {
	width: 980px;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}
header {
	background-color: #FFFF00;
	width: 100%;
	height: 50px;
}
footer{
	background-color:rgba(0,0,0,1);
	color: #fff;
	bottom:0px;
	width:100%;
	position:fixed;
	height: 30px;
	padding-left: 10px;
	padding-top:5px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
.popup {
	position: absolute;/*VERY IMPORTANT*/
	width: 500px;
	height: 500px;
	left: -600px;/*This value gets replaced in javascript so ANY number is OK*/
	top: 0px;/*This value gets replaced in javascript so ANY number is OK*/
	z-index: 1000;
}
#popup1 {
	background-image:url(../images/articleBackground/popUpBox1.png);
}
#popup2 {
	background-image:url(../images/articleBackground/popUpBox2.png);
}
#popup3 {
	background-image:url(../images/articleBackground/popUpBox3.png);
}
#popup4 {
	background-image:url(../images/articleBackground/popUpBox4.png);
}
#popup5 {
	background-image:url(../images/articleBackground/popUpBox5.png);
}
#popup6 {
	background-image:url(../images/articleBackground/popUpBox6.png);
}
#popup7 {
	background-image:url(../images/articleBackground/popUpBox7.png);
}
#popup8 {
	background-image:url(../images/articleBackground/popUpBox8.png);
}
.pageHeader{
	position:absolute;
	left: 250px;
	width:500px;
	height:150px;
	top:-50px;
}
#pageHeader1{
	background-image:url(../images/SelfPortrait.png);
}
#pageHeader2{
	background-image:url(../images/Narrative1.png);
}
#pageHeader3{
	background-image:url(../images/Documentary.png);
}
#pageHeader4{
	background-image:url(../images/Experimental.png);
}
#pageHeader5{
	background-image:url(../images/Profile.png);
}
#pageHeader6{
	background-image:url(../images/MusicVideo.png);
}
#pageHeader7{
	background-image:url(../images/Narrative2.png);
}
#pageHeader8{
	background-image:url(../images/Exploration.png);
}
#Bio{
	z-index: 1000;
	height: 500px;
	width: 500px;
	position:relative;
	top:0px;
	left:0px;
	background-image:url(../images/Btn/CollinF-BioDropUp.png);
}
#BioHeader{
	width:500px;
	height:45px;
	position:fixed;
	bottom:0px;
	margin-left:-250px;
	left:50%;
	z-index:1000;
}
.floatRight{
	float:right;
}
.floatLeft{
	float:left;	
}
#welcome{
	position:absolute;
	left:220px;
	top:-280px;
	opacity:0;
}
#welcomeText{
	position:absolute;
	width:500px;
	height:300px;
}
#viewContainer,#startContainer{
	border-thickness: 10px;
	background-color: #fff;
	position: absolute;
	width: 150px;
	height: 75px;
	border: 9px inset #000;
	left:50%;
	margin-left:-75px;
	bottom: 20%;
}
#view{
	position:relative;
	top:10px;
	left:10px;
	border-thickness: 10px;
	background-color: #fff;
	width: 130px;
	height:40px;
	text-align: center;
	padding-top: 15px;
	font-family: 'Arvo', serif,bold;
	font-size: 17px;
	color:#fff;
	background-color:#000;
	-webkit-transition: all 0.25s ease-in-out 0s;
	-moz-transition: all 0.25s ease-in-out 0s;
	-ms-transition: all 0.25s ease-in-out 0s;
	-o-transition: all 0.25s ease-in-out 0s;
	transition: all 0.25s ease-in-out 0s;
}
#view:hover{
	background-color:#fff;
	color:#000;
}
nav {
	top: 0px;
	position: fixed;
	width: 100%;
	height: 40px;
	z-index: 101;
	color: #fff;
	font-weight: bold;
	text-align: center;
	/*background-image: -webkit-gradient(linear, 50.00% 100.00%, 50.00% 0.00%, color-stop( 0% , rgba(75,73,73,1.00)),color-stop( 100% , rgba(18,18,18,1.00)),color-stop( 100% , rgba(86,86,86,1.00)));
	background-image: -webkit-linear-gradient(90deg,rgba(75,73,73,1.00) 0%,rgba(18,18,18,1.00) 100%,rgba(86,86,86,1.00) 100%);
	background-image: linear-gradient(0deg,rgba(75,73,73,1.00) 0%,rgba(18,18,18,1.00) 100%,rgba(86,86,86,1.00) 100%);*/
	background-color:#000;
	border-radius: 0px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
#allArticles {
	height: 700px;
	width: 980px;
	overflow: hidden;/*Necessary to hide non-visible articles*/
	position: relative;
	background-color: ;
}
#allArticlesWrapper {
	position: absolute;
	z-index: 100;
	height: 700px;/*total height of all individual articles including padding and margin*/
	width: 9800px;
	left: 0px;
	top: 0px;
}
.articleBox {
	width: 980px;
	height: 700px;
	position: relative;
	float: left;
	margin-top: 50px;
}
.articleText{
	border-radius: 0px;
	width: 600px;
	height: auto;
	color: #fff;
	padding: 10px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	border-width: 10px;
	border-spacing: 5px 5px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	-webkit-box-shadow: 4px 5px 14px -3px #000000;
	box-shadow: 4px 5px 14px -3px #000000;
	border-color: #000000;
}
#articleText1{
	background-color:rgba(255,0,0,1);	
}
#articleText2{
	background-color:rgba(255,164,0,1);	
}
#articleText3{
	background-color:rgba(34,55,229,1);	
}
#articleText4{
	background-color:rgba(232,12,87,1);	
}
#articleText5{
	background-color:rgba(0,232,117,1);	
}
#articleText6{
	background-color:rgba(181,0,255,1);	
}
#articleText7{
	background-color:rgba(0,178,34,1);	
}
#articleText8{
	background-color:rgba(255,87,0,1);	
}
#start{
	background-image: url(../images/Btn/startOff.png);
	position: absolute;
	left: 400px;
	top: 900px;
	width: 150px;
	height: 75px;
	text-align: center;
	color: #fff;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 24px;
	opacity: 0;
	-webkit-transition: all 0.25s ease-in-out 0s;
	-moz-transition: all 0.25s ease-in-out 0s;
	-ms-transition: all 0.25s ease-in-out 0s;
	-o-transition: all 0.25s ease-in-out 0s;
	transition: all 0.25s ease-in-out 0s;
	cursor:pointer;
}
#start:hover{
	background-image:url(../images/Btn/startOn.png);
}
.btn {
	width: 11%;
	height: 40px;
	float: left;
	text-align: center;
	cursor: pointer;
	padding-top: 0px;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	cursor:pointer;
}
.btn:hover{
	background-color: #FFF;
}
#btn0:hover{
	color: rgba(0,0,0,1);
}
#btn1:hover{
	color: rgba(255,0,0,1);
}
#btn2:hover{
	color: rgba(255,164,0,1);
}
#btn3:hover{
	color: rgba(34,55,229,1);
}
#btn4:hover{
	color: rgba(232,12,87,1);
}
#btn5:hover{
	color: rgba(0,232,117,1);
}
#btn6:hover{
	color: rgba(181,0,255,1);
}
#btn7:hover{
	color: rgba(0,178,34,1);
}
#btn8:hover{
	color: rgba(255,87,0,1);
}
.nav{
	width: 150px;
	height: 90px;
	background-image: url(../images/Btn/shinyBoxOff.png);
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	opacity:1;
	color:#fff;
	padding-top: 60px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size:18px;
	text-align:center;
	cursor:pointer;
}
.nav:hover {
	/*background-image: url(../images/Btn/shinyBoxOn.png);*/
}
#nav1{
	position:absolute;
	top: 100px;
	left: 10%;
}
#nav1:hover{
	background-image:url(../images/Btn/shinyBoxRed.png);
}
#nav2{
	position:absolute;
	top:100px;
	left: 30%;
}
#nav2:hover{
	background-image:url(../images/Btn/shinyBoxOrange.png);
}
#nav3{
	position:absolute;
	top: 100px;
	left: 50%;
}
#nav3:hover{
	background-image:url(../images/Btn/shinyBoxBlue.png);
}
#nav4{
	position:absolute;
	top:100px;
	left: 70%;
}
#nav4:hover{
	background-image:url(../images/Btn/shinyBoxMagenta.png);
}
#nav5{
	position:absolute;
	top: 300px;
	left: 10%;
}
#nav5:hover{
	background-image:url(../images/Btn/shinyBoxTeal.png);
}
#nav6{
	position:absolute;
	top:300px;
	left: 30%;
}
#nav6:hover{
	background-image:url(../images/Btn/shinyBoxPurple.png);
}
#nav7{
	position:absolute;
	top:300px;
	left: 50%;
}
#nav7:hover{
	background-image:url(../images/Btn/shinyBoxGreen.png);
}
#nav8{
	position:absolute;
	top:300px;
	left: 70%;
}
#nav8:hover{
	background-image:url(../images/Btn/shinyBoxRedOrange.png);
}