/* CSS Document */
/* $Id: fa5674263bf60344285e0a511cf1c1272a1177cf $ */
ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
   margin: 0;
   padding: 0;
   border: 0;
}

html,body {
  height: calc(100% - 10px);
  margin: 0;
  padding-bottom: 80px; /* helps full screen on mobile */
}

body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: #4b4b4b;
   color: #666666;
   text-align: center;
   padding: 10px;
}

#centeredbody {
   display: flex;
   justify-content: center;
   align-items: center;
}

.wrapper {
   width: 770px;
   background-color:#FFFFFF;
   border: 1px solid #000000;
   text-align:left;
}

.wrapper1 {
   margin:10px auto;
}

.wrapper2 { /* for centered page, eg project page */
   height:100%;
   max-height: 600px;/*for mozilla*/
   /*max-width: 1500px; */
   width: 900px;

   position: relative;
}

.wrappermain {
   min-height: 600px;
   width: 900px;

   position: relative;
}

#nav {
   margin: auto;
   width: 720px;
}

#nav ul {
   padding: 0;
   margin: 0;
   text-align: right;
}

#nav ul li {
   display: inline;
   padding: 0;
   margin: 0;
}

#nav ul li a {
   font-size: 80%;
   color: #000000;
   background-color:#FFFFFF;
   text-decoration: none;
   padding: 0 15px;
   border-right: 1px solid #ffffff;
   text-align: center;
   width: 9em;
}

#nav ul li a:hover, #nav ul li a:focus {
   background-color: #696969;
   color: #E5E5E5;
}

#content{
   background-color: red;
   margin-left: 200px;
}

#content p{
   font-size: 80%;
   margin: 20px;
}

#content h1{
   font-size: 130%;
   color: #003366;
   padding: 0;
   margin: 20px;
}

#content h2 {
   font-size: 110%;
   color: #003366;
   padding: 0;
   margin: 20px;
}

.projectlist img {
   margin: 5px 10px 3px 10px;
   /* padding: 20px; # around images */
   padding: 3px;
   /* border: 2px solid #777777; # frame around images */
   border: 1px solid #777777;
}


#content p.right{
   float: right;
}

.container {
   width: 99%; 
   float:right;
   background-color:#6633CC;
}

.projectlist a {
   font-size: 12px;
   color: #575757;
   text-decoration: none;
}

.projectlist a:hover, .projectlist a:focus {
   text-decoration: underline;
}

.projectlist div {
   font-style: italic;
   float: left;
   margin: 10px 16px;
}

.projectlist p {
}

img {
   border: none;
}

div.projectlist {
   /* margin: 20px 80px; # around projectlist */
   margin: 20px 110px;
}

p.clear {
   clear: both;
}

.verysmallplacer {
   font-size: 1px;
}

.imageholder {
   margin: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /*height: 450px; */
   width: 900px;
   /*	padding: 30px 0px 0px 0px; */

/* Use flex box center vertically https://css-tricks.com/centering-css-complete-guide/ */
/* TODO: Check browser suport */
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.mainimage {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   /* padding: 30px; */
}

.mainimage img {
   border: 2px solid #777777;
   padding: 40px;
}

.project img {
   margin: 0;
   padding: 40px;
   border: 2px solid #777777;
}

div.project {
   margin: 10px 62px 0px 40px;
}

.project div {
   font-size: 12px
}

.projectdescr {
/*   width: 135px; */
   width: 180px;
}

.projectdescr p {
   text-align: left;
   font-size: 75%;
}

.showlist {
   text-align: left;
   width: 75%;
   line-height: 130% ;
}

.showlist p {
   font-size: 75%;
   text-indent: 5%; 
   padding: 0 0 1% 0;
}

.showlist img {
   display: block;
   padding: 5% 0 0% 0;
   margin-left: auto;
   margin-right: auto;
}
	
.showlist h4 {
   font-size: 90%
}

.showlist h5 {
   font-size: 75%
}

.showlist ul li {
   font-size: 75%;
   padding: 0;
   margin: 0px 0px 0px 20px;
}