/* style.portfolio.css bevat definities van vaak onzichtbare kaders die
   page.portfolio.html gebruikt om informatie op het scherm ordelijk te presenteren.
   Naamgeving is in het Engels.
*/


/* body beschrijft de globale eigenschappen. Achtergrond, lettertype, letterkleur. uitlijning van tekst.
   Lokale variaties worden in de betreffende div's aangegeven.
*/
body {
	height:120vh;
	width:100vw;
 	overflow-y:hidden;
	overflow-x:hidden;
	background:Snow;
	font-family: Verdana;
	color:Gray;
}

/* topOfBody is een onzichtbaar kader voor de presentatie van navigatie, bedoeld voor
   de bovenkant van het scherm */
.topOfBody {
	float:left;
	height:auto;
	width:100%;
	border-top: 1px solid DarkRed;
}

/* topOfBody wordt smaller en schuift op bij grotere shermen.*/
@media only screen and (min-width:768px) {
	.topOfBody {margin-left:3%; width:80%}
}


/* navigationField is een onzichtbaar dat standaard een klikbaar element bevat.*/
.navigationField {
   float:left;
   height: auto;
}

/* menuButton, button en inlineButton zijn onzichtbare kaders die een gebied markeren waarvan het aanklikken
   zorgt voor een verandering van het scherm (nieuwe blik op dezelfde pagina of verandering van pagina).*/
.menuButton {
	float:left;
	width: 100%;
	height:auto;
	text-align:center;
	color:DarkRed;
	font-variant:small-caps;
}

.button {
   float: left;
   background: Snow;
   width:100%;
   height:auto;
   padding:0.2em 0em 0.2em 0em;
   border-radius:0.2em;
   text-align:center;
   font-variant:small-caps;
}

@media only screen and (max-width:768px) {
.button {font-size:0.9em;}
}

.titleButton {
   float: left;
   background: Linen;
   height:auto;
   padding:0.2em 0em 0.2em 0em;
   border-radius:0.5em;
   text-align:center;
   font-size:0.8em;
}

.inlineButton {
   font-variant:small-caps;
}

/* menuButton, class button en class inlineButton reageren op aanraking door de muis */
.menuButton:hover {
	cursor:pointer;
}

.button:hover {
   cursor:pointer;
   text-decoration:underline;
}

.titleButton:hover {
	cursor:pointer;
}

.inlineButton:hover {
   cursor:pointer;
   text-decoration:underline;
}



/* page is een onzichtbaar raamwerk voor het deel van het scherm dat verticaal
kan scrollen*/
.page {
   float:left;
   width:100%;
   height:36em;
   overflow-y: scroll;
   margin-top:0.5em;
}

/* contentArea is een onzichtbaar raamwerk voor het presenteren van inhoud die
bestaat uit tekst en klikbare plaatjes.*/
.contentArea {
   float:left;
   width:100%; 
   height:auto;
}

/*contentArea wordt smaller en schuift naar het midden op grotere shermen*/
@media only screen and (min-width: 768px) {
	.contentArea {margin-left:25%; width:52%};
}

/* beelden in de -contentArea- zijn gevoelig voor 'aanraking' met de muis*/
.contentArea img:hover {
   cursor:pointer;
   border:1px solid DimGray;
}

/* textArea is een onzichtbaar raamwerk voor het presenteren van inhoud die
bestaat uit tekst en niet gevoelige plaatjes.*/
.textArea {
   float:left;
   width:100%; 
   height: auto;
}

/*textArea wordt smaller en schuift naar het midden op grotere shermen*/
@media only screen and (min-width:768px) {
	.textArea {margin-left:25%; width:52%}
}


/* menuShield is een kader met donkerrode achtergrond voor titelpagina en inhoudsopgave
van de site */
.menuShield {
	float:left;
	width:100%;
	height:auto;
	padding-top:1em;
	padding-bottom:1em;
	background-color: DarkRed;
}


.menuShield div {
	float:left;
}

/* topLine is het onzichtbare kader voor de bovenste regel (alleen in menuShield)*/
.topLine {
	float:left;
	margin-left:10%;
	width:80%;
	height:auto;
	padding-top:1em;
	padding-bottom:1em;
	text-align:center;
	font-family:'Eras ITC',sans-serif;
	font-size:1.6em;
	color:Snow;"
}

/* column is een onzichtbaar kader voor delen van de inhoudsopgave (alleen in menuShield)*/
.column {
	float:left; 
	margin-left:30%;
	width:40%;
	height:auto;
	padding-top:1em;
	padding-bottom:1em;
}

/* op smallere schermen kunnen columns niet naast elkaar staan, ze verbreden zicht tot 9)5 van
het omvattende kader, en verschijnen daarin onder elkaar */
@media only screen and (max-width:768px) {
.column {width:90%; margin-left:5%}
}

/* diaFrame is een onzichtbaar kader voor de presentatie van een schilderij, met beschrijving
(alleen in contentArea) */
.diaFrame {
	float:left;
	width:100%;
	height:auto;
	padding-top:1em;
	height:auto;
	padding-bottom:3em;
}

.diaFrame div {
	float:left;
}

/* imgField is het onzichtbare kader voor de afbeelding van een schilderij (alleen binnen diaFrame)*/
.imgField {
	width:70%;
	margin-left:15%;
	height:auto;
	padding-top:0.5em;
	height:auto;
	text-align:center;
}

/* specsLine is het onzichtbare kader voor de presentatie van technische gegevens van een schilderij
(alleen binnen diaFrame)*/
.specsLine {
	margin-left:10%;
	width:80%;
	height: auto;
	padding-top:1em;
	text-align:center;
	font-size:0.8em;
	font-style:italic;
}

/* titleLine is het onzichtbare kader voor de presentatie van de titel van een schilderij
(alleen binnen diaFrame)*/
.titleLine {
	float:left;
	margin-left:10%;
	width:80%;
	padding-top:0.5em;
	height:auto;
	text-align:center;
	font-size:1.2em;
}

/* headLine is het onzichtbare kader voor de presentatie van de titel van een pagina */
.headLine {
   float: left;
   width:100%;
   padding-top:2em;
   height:auto;
   padding-bottom:1em;
   text-align:center;
   font-variant: small-caps;
}

/* section is het onzichtbare kader voor de presentatie van tekstgedeelte op een pagina*/
.section {
   float:left;
   width:55%;
   margin-left:20%;
   padding-bottom:0.5em;
}

@media only screen and (max-width:768px) {
.section {width:80%; margin-left:10%}
}

.section > div {
	float:left;
	width:100%;
	padding-top:1em;
	height:auto;
}

/*catStrip is het onzichtbare kader voor naast elkaar geplaatste miniaturen van schilderijen*/
.catStrip {
   float:left;
}

.catStrip div {
   float:left;
   margin-left:1%;
   padding-top:0.5em;
}

/* largeFrame is het onzichtbare kader voor vergrotingen dat veeticaal kan scrollen,
alleen in -secondWindow*/
.largeFrame {
	float:left;
	width:100%;
	height:100vh;
	overflow-y:scroll;
}

/*largeFrame schuift op naar het midden en wodt smaller op grotere scherme*/
@media only screen and (min-width:768px) {
	.largeFrame {width:60%; margin-left:20%}
}

/* afbeeldingen binnen largeFrame beslaan 95% van de breedte van het kader */
.largeFrame img {
	float:left;
	width:95%;
	height:auto;
}

/* <div>'s binnen largeFrame beslaan 95% van de breedte van het kader, en hebben een lege onderrand
van 1 regel breed */
.largeFrame div {
	float:left;
	width:95%;
	padding-bottom:1em;
	height:auto;
	text-align:center;
}

.red div {
	float:left;
	width:100%;
	height:2em;
	border:1px solid Red;
}

.blue div {
	float:left;
	width:100%;
	height:2em;
	border:1px solid Blue;
}