html, body { margin: 0px;  background-image: url(images/bkgrd.jpg); background-repeat: repeat-x; }
table { border-collapse: collapse; }
p { font-family: Open Sans, sans-serif; font-size: 12px; margin-left: 0px; }
td { font-family: Open Sans, sans-serif; font-size: 12px; margin-left: 0px; }
li { font-family: Open Sans, sans-serif; font-size: 14px; margin-left: 0px; }

#wrapper { position: relative; margin-left: 0px;  margin-top: 0px; width: 100%; }
#top { position: absolute; top: 0px; left: 0px; width: 100%;  background-image: url(images/top-bkgrd.jpg); background-repeat: repeat-x; }
#admin { position: absolute; top: 0px; left: 0px; width: 25px; height: 25px; z-index: 5; }
#coverup { position: absolute; top: 112px; left: 0px; z-index: 5; }
#front { position: absolute; top: 150px; left: 0px; }
#box { position: absolute; top: 200px; left: 182px; background-color: #ffffff; opacity:0.8; filter: alpha(opacity=80); padding: 35px; }
#box-l { position: absolute; top: 200px; left: 182px; width: 564px; background-color: #ffffff; opacity:0.8; filter: alpha(opacity=80); padding: 35px; }
#subtitle { position: absolute; top: 111px; left: 0px;  z-index: 5; opacity:0.4; filter: alpha(opacity=40); }
#content { position: absolute; top: 150px; left: 182px; width: 100%; z-index: 5; }
#album {  position: absolute; top: 200px; left: 182px; width: 750px; }
#albumtop { position: absolute; top: 0px; left: 0px; width: 100%;  background-image: url(images/top-bkgrd.jpg); background-repeat: repeat-x; }
#albumadmin { position: absolute; top: 0px; left: 0px; width: 25px; height: 25px; z-index: 5; }
#albumsubtitle { position: absolute; top: 111px; left: 0px;  z-index: 5; opacity:0.4; filter: alpha(opacity=40); }
#albumcontent { position: absolute; top: 150px; left: 182px; width: 100%; z-index: 5; }
#albumback { display: none; }
#prev { position: absolute; top: 0px; left: 10px; }
#next { position: absolute; top: 0px; left: 776px; }

.head { font-family: Open Sans, sans-serif; font-size: 18px; color: #666666; margin-left: 0px; }
.subhead { font-family: Open Sans, sans-serif;  font-size: 14px; font-weight: bold; color: #6699cc; margin-left: 0px; }
.borderhead { font-family: Open Sans, sans-serif; font-size: 13px; font-weight: bold; color: #6699cc; border: 2px solid #c0b8b4; background-color: #dad1cc; }
.border { border: 2px solid #dad1cc; }
.top { vertical-align: center; text-align: center; }
.photos { width: 806px; height: auto; }
.prev, .next { margin-top: 50px; color: #ffffff; font-weight: 400; font-size: 50px; transition: 0.6s ease; user-select: none; }

/*iphone*/
#bkgrd { position: absolute; top: 0px; left: 0px; width: 100%; }
#boxsm { position: absolute; top: 140px; left: 40px; background-color: #ffffff; opacity:0.8; filter: alpha(opacity=80); padding: 35px; }

/*buttons*/
.button { font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; } 
input.button { font-family: Arial, sans-serif; font-size: 12px; color: #6699cc; text-align: center; background-color: #ffffff; border: 2px solid #832b7a; border-radius:15px; padding: 4px 10px; text-decoration: none; } 
input.button:hover { font-family: Arial, sans-serif; font-size: 12px; color: #6699cc; text-align: center; background-color: #f2f1f2; text-decoration: none; } 
a.button:link { color: #6699cc; text-align: center; background-color: #ffffff; border: 2px solid #832b7a; border-radius:15px; padding: 4px 10px; text-decoration: none; }
a.button:visited { color: #6699cc; text-align: center; background-color: #ffffff; border: 2px solid #832b7a; border-radius:15px; padding: 4px 10px; text-decoration: none; }
a.button:hover { color: #6699cc; text-align: center; background-color: #f2f1f2; border: 2px solid #832b7a; border-radius:15px; padding: 4px 10px; text-decoration: none; }
a.button:active { color: #6699cc; text-align: center; background-color: #f2f1f2; border: 2px solid #832b7a; border-radius:15px; padding: 4px 10px; text-decoration: none; }

/* photos - flexbox */
#row { position: absolute; top: 65px; left: -10px; width: 800px; display: flex; flex-wrap: wrap; padding: 0 4px; }
.column { width: 800px; flex: 18%; max-width: 18%; padding: 0 4px; } /* Create four equal columns that sits next to each other */
.column img { margin-top: 8px; vertical-align: middle; width: 100%; }
/*.photos { max-width: 800px; max-height: 700px; } */

/* Responsive layout - 2 column-layout side-by-side */
@media screen and (max-width: 800px) {
.column { flex: 50%; max-width: 50%; }
}

/* Responsive layout - 2 columns stacked */
@media screen and (max-width: 600px) {
.column { flex: 100%; max-width: 100%; }
}

a:visited { color: #330066; font-weight: bold; text-decoration: none; }
a:link  { color: #330066; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }

a.prev:visited { color: #ffffff; font-weight: 300; text-decoration: none; -webkit-text-stroke: 1px #330066; }
a.prev:link { color: #ffffff; font-weight: 300;  text-decoration: none; -webkit-text-stroke: 1px #330066; }
a.prev:hover { color: #6699cc; font-weight: 300; text-decoration: none; -webkit-text-stroke: 1px #330066; }
a.prev:active { color: #6699cc; font-weight: 300; text-decoration: none; -webkit-text-stroke: 1px #330066; }

a.next:visited { color: #ffffff; font-weight: 300; text-decoration: none;  -webkit-text-stroke: 1px #330066; }
a.next:link { color: #ffffff; font-weight: 300;  text-decoration: none; -webkit-text-stroke: 1px #330066; }
a.next:hover { color: #6699cc; font-weight: 300; text-decoration: none; -webkit-text-stroke: 1px #330066; }
a.next:active { color: #6699cc; font-weight: 300; text-decoration: none; -webkit-text-stroke: 1px #330066;}