/*Dit is de body van de website. In principe het grotere geheel waarbinnen alles gebeurt.*/
body {
	margin: 0px;
	padding: 0px;
	
	background-image: url(experiment2.jpg);
	background-repeat: no-repeat;
	
	font-family: helvetica lt std, helvetica, arial;
	font-size: 16px;
	text-align: center;
}

/*Dit is de wrapper. Ongeveer hetzelfde als de body, maar beter aan te passen.*/
div#wrapper {
	margin: 0px;
	
	padding-left: 30px;
	padding-top: 15px;
	
	text-align: left;
}

/*Dit is code voor de linkjes binnen de wrapper. Normaal zwart, als je er overheen hovert grijs.*/
div#wrapper a:link {
	color: black;
	text-decoration: none;
}

div#wrapper a:visited {
	color: black;
	text-decoration: none;
}

div#wrapper a:hover {
	color: rgb(181,183,180);
}

/*Dit is het EYES2-logo dat linksboven op de website staat.*/
div#logo {
	width: 23.125em;
}

/*Deze twee spans zijn de twee woorden EYES2 en PHOTOGRAPHY.
EYES2 is in dit geval zwart gemaakt, PHOTOGRAPHY is grijs.*/
span.eyes2 {
	color: black;
}

span.photography {
	color: rgb(181,183,180);
}

/*De navigatie-div is bestemd voor de knoppen van ABOUT US en DIARIES.*/
div#navigatie {
	margin-top: -0.625em;
	margin-left: -39px;
	
	font-size: 25px;
}

div#navigatie ul {
	list-style: none;
}

div#navigatie ul li {
	display: inline;
}

/*Dit is het menu. Dat is het gedeelte op de homepagina, waardoor je naar het portfolio kunt doorklikken.
Het betreft hier specifiek de foto's waar je op klikt, niet de titels erboven. Die zijn ondergebracht in de div 'menutekst'.*/
div#menu {
	margin-left: auto;
	margin-right: auto;
}

/*Dit is de menutekst-div. Dit is dus de titel van elke klikbare foto op de homepagina.*/
div#menutekst {
	padding-top: 8em;
	padding-right: 120px;
	
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

div#menutekst ul {
	list-style: none;
}

div#menutekst ul li {
	padding-left: 120px;
	
	display: inline;
}

/*Dit zijn de linkjes binnen de menutekst. Het enige dat hier gebeurt is eigenlijk het grijs maken van een link
als je er boven hovert met je muis.*/
div#menutekst a:link {
	color: black;
	text-decoration: none;
}

div#menutekst a:visited {
	color: black;
	text-decoration: none;
}

div#menutekst a:hover {
	color: rgb(181,183,180);
}

/*dit is iets anders*/
div#onzichtbaretekst {
	display: none;
}

/*De menutekst2-div is het menu dat boven in het daadwerkelijke portfolio te vinden is.
De verschillende categorieën waarin het portfolio is opgedeeld.*/
div#menutekst2 {
	margin-top: -64px;
	margin-right: 340px;
	
	float: right;
	
	color: rgb(181,183,180);
}

div#menutekst2 ul {
	list-style: none;
}

div#menutekst2 ul li {
	padding-left: 5px;
	
	display: inline;
}

div#menutekst2 a:link {
	color: rgb(181,183,180);
}

div#menutekst2 a:visited {
	color: rgb(181,183,180);
	text-decoration: none;
}

div#menutekst2 a:hover {
	color: black;
}

span.current {
	color: black;
}

/*Deze div is voor de tekst op de ABOUT US-pagina.*/
div#content {
	width: 37.5em;
	padding-top: 0.143em;
}

/*Dit is de div die ook op de ABOUT US-pagina te vinden is. Dit is waar de contactgegevens van EYES2 vermeld staan.*/
div#lijst {
	margin-left: -40px;
}

div#lijst ul {
	list-style: none;
}

/*Dit is de div voor het 'more'-linkje bij de foto-pagina's.*/
div#meer {
	padding-left: 141px;
}

/*Dit is de div voor het 'more'-linkje bij de Diary-pagina.*/
div#meer2 {
	padding-right: 850px;
}

div#meer2 a:link {
	color: black;
}

div#meer2 a:visited {
	color: black;
	text-decoration: none;
}

div#meer2 a:hover {
	color: rgb(181,183,180);
}

/*De eerste foto in het menu op de homepagina. Wat ik hier precies mee van plan was, is mij eigenlijk ook een raadsel.*/
img.menufoto1 {
	width: 14.438em;
	height: 9.625em;
}

/*VOOR DE LIGGENDE FOTO'S*/
.gallerycontainer{
	position: relative;
	padding-top: 50px;
	padding-left: 30px;
	width: 330px;
	text-align: center;
}

.gallerycontainer2{
	position: relative;
	padding-top: 50px;
	width: 330px;
	text-align: center;
}

.thumbnail img{
	border: 1px solid white;
	margin: 0 3px 3px 0;
}

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

.thumbnail span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: transparent;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

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

.thumbnail:hover span{ /*CSS for enlarged image*/
	visibility: visible;
	top: 0px;
	left: 460px; /*position where enlarged image should offset horizontally */
}

/*VOOR DE STAANDE FOTO'S*/
.gallerycontainer{
	position: relative;
	padding-top: 50px;
	padding-left: 30px;
	width: 330px;
	text-align: center;
}

.gallerycontainer2{
	position: relative;
	padding-top: 50px;
	width: 330px;
	text-align: center;
}

.thumbnail2 img{
	border: 1px solid white;
	margin: 0 3px 3px 0;
}

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

.thumbnail2 span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: transparent;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

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

.thumbnail2:hover span{ /*CSS for enlarged image*/
	visibility: visible;
	top: -10px;
	left: 550px; /*position where enlarged image should offset horizontally */
}