@charset "utf-8";
/* CSS Document */

*{ 
margin: 0 auto 0 auto;
text-align: left;
/* this is the wild card selector that centers the boxes and sets
 the text align as standard to left, the margin auto, keeeps things in the middle of the screen */	
 }

body {
	background-color: #434343;
	}
	
	a:link {text-decoration: none; border: none; color: black;}
	a:visited {text-decoration: none; color: navy;}
	a:active {text-decoration: none; color: white;}
	a:hover {text-decoration: none; color: maroon;}
	
#container {
	font-size: medium;
	height: auto;
	width: 880px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	background-color: white;
	}
#container2 {
	font-size: medium;
	height: 7000px;
	width: 880px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
	background-color: white;
	}
#title {
	padding: 10px;
	height: 40px;
	width: 860px;
	background-color: white;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #F3FEFF;
	text-align: center;
	border: thin;
	border-color: black;
	}
#title H1 {
	font: Arial, sans-serif ;
	font-style: normal;
	color: navy;
	font-size: 18px;
	float: left;
	padding: 5px 5px 5px 50px;
	font-style: normal;
	font-weight: lighter;
	 
	}
#title H2 {
	font: Arial, sans-serif;
	font-style: normal;
	font-weight: lighter;
	color: gray;
	font-size: 16px;
	padding: 5px 50px 5px 5px;
	float: right;
		}
#bannerbox {
	height: 143px;
	width: 880px;
	background-color: grey; 
	padding: 0px 0px 0px 0px;
	}	
		
#menubox {
	height: 45px;
	width: 875px;
	background-color: #5c5c5c;
	padding: 5px 0px 5px 5px;
	}
	
	#menubox2 {
	height: 45px;
	width: 880px;
	background-color: #5c5c5c;
	padding: 0px 0px 0px 0px;
	}
ul {
  text-align: left;
  display: inline;
  padding: 5px 4px 5px 10px;/* this looks like the padding for the menu, I have changed the last value from 17 to 5px */
  margin: 0;
   list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  float: right;
  	
  }
  
  #welcome-box{
	height: 170px;
	width: 820px;
	background-color: white;
	padding: 20px 30px 20px 30px;/* the order here is top */
	}
  #shorttext-box{
	height: 150px;
	width: 820px;
	background-color: white;
	padding: 10px 10px 10px 10px;/* the order here is top */
	}

	#techbox{
	height: 150px;
	width: 870px;
	background-color: #e3e3e3;
	padding: 20px 0px 0px 10px;/* the order here is top */
	}
	
	}#project-title{
	height: 20px;
	width: 830px;
	background-color: silver; /* project title within the welcome box */
	font-size: 16px;
	font: Arial, Helvetica, sans-serif;
	color: black;
	padding: 0px 0px 0px 0px;
	margin: 10px;
	}
	 
ul li {
  font: 12px/18px sans-serif; 
  color: black; /* lettering of the menu box  */
  display: inline-block;
  margin-right: -1px;/* this was set to -4 changed may 2016 */
  position: relative;
  padding: 8px 20px; /* padding of the menu gives the width to the boxes, first number vertical padding, if this number is too small then you can't link to the buttons in the dropdown*/
  background: silver; /* background of the menu butons */ 
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  font: Arial, sans-serif;
  	font-style: normal;
	font-weight: lighter;
	color: black; /* controls the colour for the font in the main menu boxes */
	font-size: 12px;
  }
  
ul li:hover {
  background: gray;/* button hover colour */
  color: maroon; /* this is the colour for the text in the dropdown menu */
  
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 30px; /* this controls the distance of the dropdown menu to the main menu, set the number too high and it can't link, jkc 2015aug */
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: grey; /* this is the dropdown menu */
  display: block; 
  color: black; /* text for the dropdown menu */
  text-shadow: 0 0px 0 #000;
}
ul li ul li:hover { background: silver; }/* this is the hover colour of dropdown menu */
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

/*********************************************************************************/
/* end of menu controls                                                       */
/*********************************************************************************/
}
	
	.left 
	{
		float:left;
		padding: 10px; /* this is used for word wrap with images in text */
	}
		
	.right 
	{
		float:right;
		padding: 10px; /* this is used for word wrap with images in text */
			}
			
	.center 
	{
		float:none;
		text-align: center; /* used this to center and image within a div horizontaly */
	}
	
#intro-box{
	height: 180px;
	width: 820px;
	background-color: white;
	padding: 10px 10px 10px 10px;
	}
	#artist-box{
	height: 170px;
	width: 820px;
	background-color: white;
	padding: 20px 30px 20px 30px;/* the order here is top */
	}
	.video-mainbox{
	height: 170px;
	width: 780px;
	background-color: silver;
	padding: 10px 10px 10px 10px;
	}
	#video-box1{
	height: 170px;
	width: 840px;
	background-color: gray;
	padding: 10px 10px 10px 10px;
	}
	#video-box2{
	height: 150px;
	width: 840px;
	background-color: gray;
	padding: 10px 10px 10px 10px;
	}
	#video-box3{
	height: 150px;
	width: 840px;
	background-color: gray;
	padding: 10px 10px 10px 10px;
	}
.section-title{
	height: 26px;
	width: 880px;
	background-color: #e3e3e3; /* strip title for any section */
	font-size: 16px;
	font: Arial, Helvetica, sans-serif;
	color: black;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	}
.introfilmbox
	{
		float: left;
		margin-left: 14px;
		background-color: #e3e3e3;
		height: 160px;
		width: 280px;
		padding: 10px 10px 10px 10px;
		float: left;
	}	
.introtextbox
	{
		float: left;
		margin-left: 14px;
		background-color: #e3e3e3;
		height: 160px;
		width: 470px;
		padding: 10px 10px 10px 10px;
		float: right;
	}
	.article-box{
	height: 240px;
	width: 820px;
	background-color: white;
	padding: 10px 10px 10px 10px;
	}
	.articlepicbox
	{
		float: left;
		margin-left: 14px;
		background-color: #e3e3e3;
		height: 220px;
		width: 280px;
		padding: 10px 10px 10px 10px;
		float: left;
	}	
	.articletextbox
	{
		float: left;
		margin-left: 14px;
		background-color: #e3e3e3;
		height: 220px;
		width: 470px;
		padding: 10px 10px 10px 10px;
		float: right;
	}
	.textwrapright
	{
	float: right;
	margin: 10px;
	clear: none;
	}
	.textwrapleft
	{
	float: left;
	margin: 10px;
	clear: none;
	}
#longtext-box{
	height: 1500px;
	width: 800px;
	background-color: white;
	padding: 10px 10px 10px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium
	font-style: normal
	text-align : left;
	color : black;
	font-style : normal;
	font-weight : 500; 
	margin-left: 40px;
	}
	
#longtext-box H1 {
	font: Arial, sans-serif ;
	font-style: bold;
	color: navy;
	font-size: 20px;
	float: left;
	padding: 5px 5px 5px 5px;
	font-style: normal;
	font-weight: lighter;
	 }
#longtext-box H2 {
	font: Arial, sans-serif ;
	font-style: bold;
	color: gray;
	font-size: 18px;
	padding: 5px 5px 5px 5px;
	font-style: normal;
	font-weight: lighter;
	font-variant-caps: titling-caps; /* added 5aug 2015 doesn't do anything */
	 }	
	 #longtext-box H3 {
	font: Arial, sans-serif ;
	font-style: normal;
	color: navy;
	font-size: 14px;
	padding: 0px 0px 0px 0px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 10px;
	 }
	#longtext-box H4 {
	font: Arial, sans-serif;
	font-style: normal;
	color: black;
	font-size: 14px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 20px;
	 }
	#longtext-box p {
	font: Arial, sans-serif;
	font-style: normal;
	color: black;
	font-size: 16px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 20px;
	 }	
	  

	#longvideo-box
	{
	height: 1500px;
	width: 860px;
	background-color: white;
	padding: 10px 10px 10px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium
	font-style: normal
	text-align : left;
	color : black;
	font-style : normal;
	font-weight : 500; 
	}
	
	.videobox
	{
		float: left;
		margin-left: 14px;
		background-color: white;
		height: 130px;
		width: 240px;
		padding: 10px 10px 10px 10px;
		float: left;
	}	
		.videotextbox
	{
		float: left;
		margin-left: 14px;
		background-color: white;
		height: 130px;
		width: 460px;
		padding: 10px 10px 10px 10px;
		float: right;
	}	
	.videotextbox p
	{
	font: Arial, sans-serif;
	font-style: italic;
	color: black;
	font-size: 12px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 20px;
	}	
		#longphoto-box
	{
	height: 1500px;
	width: 800px;
	background-color: white;
	padding: 10px 10px 10px 10px;
	}
	.photo-mainbox{
	height: 150px;
	width: 760px;
	background-color: white;
	padding: 10px 10px 10px 10px;
	}
		
	.photobox
	{
		float: left;
		margin-left: 14px;
		background-color: white;
		height: 130px;
		width: 240px;
		padding: 0px 0px 0px 0px;
		float: left;
	}
	.phototextbox
	{
		float: left;
		margin-left: 14px;
		background-color: white;
		height: 130px;
		width: 460px;
		padding: 10px 10px 10px 10px;
		float: right;
	}	
	.phototextbox p
	{
	font: Arial, sans-serif;
	font-style: italic;
	color: black;
	font-size: 11px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 20px;
	}		
#darkstrip {
	height: 4px;
	width: 880px;
	background-color: #5c5c5c;
	}
.darkstrip {
	height: 2px;
	width: 800px;
	background-color: #5c5c5c;
	}
#darkstrip2 {
	height: 4px;
	width: 880px;
	background-color: #5c5c5c;
		}
#textstrip{
	height: 30px;
	width: 790px;
	background-color: white;
	padding: 10px 0px 0px 50px;
		}	
#textstrip H2 {
	font: Arial, sans-serif;
	font-style: normal;
	font-weight: lighter;
	color: gray;
	font-size: 16px;
	float: left;
	}
#projects{
	height: 140px;
	width: 820px;
	background-color: white;
	padding: 10px 30px 20px 30px;
	}
.columns {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}			
#spacebox{
	height: 100px;
	width: 820px;
	background-color: white;
	padding: 10px 30px 20px 30px;
	}
#newsbox{
	height: 140px;
	width: 820px;
	background-color: white;
	padding: 10px 30px 20px 30px;
	}
#endbox{
	height: 180px;
	width: 760px;
	background-color: white;
	padding: 10px 10px 10px 10px;
	}
#endbox2{
	height: 2900px;
	width: 760px;
	background-color: white;
	padding: 60px 60px 40px 60px;
	}		
	
#mainbox {
	background-color: white; /* this defines the height of the container holding the slide show */
	width: 840px;  /* i don't knnow why this has to be 20px smaller must be to do with the gallery container */
	height: 600px; /* this sets the height of the gallery box */
	}
	#projectbox{
	height: 6500px;
	width: 840px;
	background-color: white;
	padding: 30px 00px 20px 0px;
	margin-left: 40px;
	}
	.text1 H2 {
	font: Arial, sans-serif ;
	font-style: normal;
	color: navy;
	font-size: 18px;
	padding: 0px 0px 0px 0px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 10px;
	 }
	.text1 H3 {
	font: Arial, sans-serif ;
	font-style: normal;
	color: navy; 
	font-size: 14px;
	padding: 0px 0px 0px 0px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 0px;
	 }
	.text1 H4 {
	font: Arial, sans-serif;
	font-style: normal;
	color: black;
	font-size: 14px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 20px;
	 }
	.text1 p {
	font: Arial, sans-serif;
	font-style: normal;
	color: black;
	font-size: 12px;
	font-style: normal;
	font-weight: lighter;
	margin-left: 20px;
	 }		
.text1{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	text-align: left;
	color: navy; 
	line-height: 1.5;
	margin-left: 25px;
	width: 740px;
	}
.text2{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: bold;
	text-align: left;
	color: #4a4a4a;
	width: 700px;
	margin-left: 70px;
	line-height: 1.5;
	}

.text3{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	text-align: left;
	color: black; 
	line-height: 1.5;
	margin-left: 10px;
	width: 450px;
	}
	
.text4{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: italic;
	text-align: left;
	color: black; 
	line-height: 1.5;
	margin-left: 10px;
	width: 800px;
	}
	
.text5{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	text-align: left;
	color: navy; 
	line-height: 1.5;
	margin-left: 10px;
	width: 740px;
	}
	
.text6{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
	text-align: left;
	color: navy; 
	line-height: 1.5;
	margin-left: 5px;
	width: 200px;
	}
#imagesbox {
	background-color: #e3e3e3;
	width: 880px;
	height: 180px;
	padding: 20px 00px 00px 0px;/* the order here is top */
	}
	


.filmbox1
	{
		float: left;
		height: 160px;
		margin-left: 14px;
		background-color: white;
	}
.filmbox2
	{
		float: left;
		height: 160px;	
		margin-left: 8px;	
		background-color: white;
	}
.filmbox3
	{
		float: right;
		height: 160px;
		background-color: white;
		margin-right: 14px;
	}
	
#thirdbox {
	background-color: white;
	width: 880px;
	height: 200px;
	}

.textbox1,
.textbox2,
.textbox3
	{
		width: 215px;  /* trying to make these three boxes line up in a row */
		height: 150px;
		text-align: center;
		display: inline-block;
		margin-top: 0em;
		padding: 1em 2em 1em 2em;
		background-color: white;
		}
.textbox1
	{
		float: left;
		margin-left: 14px;
	}
.textbox2
	{
		float: left;	
		margin-left: 8px;
	}
.textbox3
	{
		float: right;
		margin-right: 14px;
	}	
	
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */


.gallerycontainer{
	position: relative;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 20px;/*Add a height attribute and set to largest image's height to prevent overlaying*/
	background-color: transparent;  /* this transparent setting allows the dropdown menu to work */
	width: 816px;
	height: 400px
	z-index: x;
	border: thin;
	border-color: black;  /* I am trying to make a border around the screen or the group of thumbnails */
	}

.thumbnail img{
	margin: 0 5px 5px 0;

}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{

}/* i removed the border from here 	border: 1px solid #666666; */

.thumbnail span{ /*CSS for enlarged image*/
	position: absolute;
	padding: 50px;
	left: auto;
	border: none;
	visibility: hidden;
	color: #CCCCCC;
	text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
	border-width: 0;
	padding: 0px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
	visibility: visible;
	top: 0;
	left: 340px; /*position where enlarged image should offset horizontally */
	z-index: x; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: medium;
	font-style: normal;
	font-variant: small-caps;
	text-align: right;
	font-weight: 300px;
	}
/*********************************************************************************/
/* end of the thumbnail images                                                                  */
/*********************************************************************************/
	
#footer {
	padding: 0px;
	height: 40px;
	width: 780px;
	float: left; /* not sure about this jkc */
	background-color: gray;
}


	.container3	{
		overflow:auto;
		width: 880px;
		background-color: silver;
	}
	.container4	{
		overflow:auto;
		margin: 10em auto;
		width: 840px;
		height: 100px;
		background-color: silver;
		padding: 0px
		font: all-small-caps;
		font-family: sans-serif;
		color: black;
		padding: 20px;
	}	
	.container5{
		overflow:auto;
		margin: 0em auto;
		width: 880px;
		background-color: yellow;
	}	
	#page	{
		position: relative;
		overflow: hidden;
		width: 880px;
		background-color: fuchsia;
	}




/*********************************************************************************/
/* Copyright                                                         */
/*********************************************************************************/

	#copyright {
		overflow: hidden;
		padding: 5em 0em;
		border-top: 1px solid rgba(0,0,0,0.1);
	}
	
	#copyright p {
		letter-spacing: 0.20em;
		text-align: center;
		text-transform: uppercase;
		font-size: 0.80em;
		color: rgba(0,0,0,0.6);
	}
	
	#copyright a
	{
		text-decoration: none;
		color: rgba(0,0,0,1);
	}