body{
width: 90%;
margin: 0 auto;
background-color: white;
}

#header{
width: 90%;
height:10%; 
margin: 1%;
background-color: white;
margin-top: 0%;
padding-top: 0%;
border: solid black 1px;
background-size:cover;
background-image:url("../website/images/p212.jpg");
background-size: 80%;
}

#nav{
width: 90%;
height:0%; 
margin: 1%;
margin-top: 0%;
background-color: white;
border: solid black 1px;
text-align: left;
}

#np{
width: 90%;
height:0%; 
margin: 1%;
margin-top: 0%;
background-color: white;
border: solid white 1px;
text-align: left;
padding: 1%;
}

#container{
width: 90%;
height:10%; 
margin: 1%;
background-color: white;
margin-top: 0%;
padding-top: 0%;
border: solid black 1px;
background-size:cover;
}


li{
display:inline-block;
text-align:left;
margin:1%;
}

h1{
color: black;
font-family: helvetica;
text-align:left;
letter-spacing: 0.1em;
font-size:3em;
margin-top: 5%;
margin:1%;
}

h3{
color: black;
font-family: helvetica;
font-size:.8em;
text-align: left;
padding-left:0%;
letter-spacing: 0.1em;
}

h4{
color: indianred;
font-family: helvetica;
font-size:.7em;
text-align: left;
letter-spacing: 0.1em;
padding: 0%;
}

.collapsible {
margin: 1%;
text-align: left;
background-color: white;
border-style: double;
border: solid white 2px;
cursor: pointer;
padding:0%;
font-size:2em;
}

.active, .collapsible:hover {
background-color: lightgray;
width:95%;
}

#drawing{
width: 90%;
height:50%;
margin-left: 0%;
background-color: white;
border: solid white 2px;
display: none;

}

#figurative{
width: 90%;
height:50%;
margin: 1%;
margin-left: 0%;
background-color: white;
border: solid white 2px;
display: none;
}

#depictionsoflife{
width: 90%;
margin: 1%;
background-color: white;
border: solid white 2px;
display: none;
}

#expressionism{
width: 90%;
margin: 1%;
background-color: white;
border: solid white 2px;
display: none;
}

#watercolor{
width: 90%;
margin: 1%;
background-color: white;
border: solid white 2px;
display: none;

}

#statement{
width: 85%;
height:10%;
background-color: white;
border: solid white 1px;
margin-left:1%;
margin-top:10%;
float:;
}

#cv{
width: 85%;
height:10%;
background-color: white;
border: solid black 1px;
margin-left:7%;
margin-top:2%;
float:;
}

#contact{
  width: 85%;
height:10%;
background-color: white;
border: solid black 1px;
margin-left:7%;
margin-top:2%;
float:;
}

a{
	text-decoration: none;
	color:black;
}


h1:hover {
    background-color: ;
}

h1:active {
    background-color: ;
}


li:hover {
    background-color: #fff338;
}

li:active {
    background-color: #fff338;
}

.box{
    height: 50%;
    width:90%;
    overflow-y: auto;
    float:center;
    background-color: white;
    border-style: solid;
    border-color:white;
    margin: 5%;
    padding-left: 0%;
}

.thumbnail{
transition: transform 0.5s;
-webkit-transition-property: all;
-webkit-transition-duration: 0.1s;
-webkit-transition-timing-function: ease;
margin:1.5%;
}

.thumbnail:hover{

  transform: scale(1.1);
}