* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html { position: relative; min-height: 100%; } body { background-color: #000; color:#A86; font: 16px Georgia,"Palatino Linotype","Times New Roman",Times,serif; font-size:1.3em; width:auto; margin: 0 0 125px; /*margin:0px;*/ border:0px; padding:0px; background-image:url("Ocean.jpg"); background-repeat:no-repeat; background-size: cover; } #banner { position:relative; height:100px; width:100%; margin: 0px 0px 20px 0px; padding: 0px; background:url("Tukat_Banner.jpg")no-repeat scroll 0px 0px; background-size: 100% 100%; } #subbanner { position:absolute; top:10px; height:80px; width:80px; right:0px; margin:0px; padding: 0px; background-image:url("Sails.png"); background-repeat:no-repeat; } #main { position:relative; height:1150px; } #pageHeader { position:absolute; top:110px; left:0px; height:500px; width:14em; background: url('left_peek.png') no-repeat scroll 0px 60px transparent; } #links{ position:relative; top:50px; left:0px; width:100%; text-align:center; padding-right:10px; } #subbanner p { font-size:x-small; } .IpBox { position: absolute; height:1.4em; width:8em; color: #975; font-size:.83em; text-align:left; right: 30px; top: -60px; /* hides IpBox above subbanner */ } #subbanner:hover .IpBox { top:80px; /* shows IpBox below subbanner */ } footer { display: block; position:relative; left: 0px; width:100%; text-align:left; color:#653; padding:0.5em; font-style:italic; margin:0px auto; }  h1 { font-size:2.5em; } h2 { font-size:1.875em; } p { padding-right: 0px; padding-left: 10px; } a { height:100%;   /* or (height:266px)   BOTH required for */ display:block;  /* Sprite links to work */ } a:link { color:#A86; /* unvisited link */ text-decoration:none !important; /* remove link underline */ padding:5px; } a:visited { color:#753; /* visited link */ text-decoration:none; } a:hover { color:#FDB; /* mouse over link */ } a:active { color:#FFF;  /* selected link */ } .sansserif { font-family:Arial,Helvetica,sans-serif; } .serif { font-family:"Times New Roman",Times,serif; }  /* Begin phogal */  #wrap { position: relative; display:flex; flex-direction:row; justify-content:space-around; align-content:flex-start;  /*flex-end*/ flex-wrap: wrap; align-items:stretch;  /*baseline*/ padding:1px 8px; /* w3-row-padding */ } #wrap:after { content:"";display:table;clear:both; /* w3-row-padding:after */ } #wrap  > .box{ order:0; flex: initial; align-self:auto; } .box { position: relative; margin: 20px 10px; /* added 10px padding-L/R for IE*/ right:10px; /* added 10px H/W, float:left for IE */ height: 246px; width: 246px; float:left;  } .boxInner { position: absolute; width: 246px; height: 246px; margin:0px 10px; border: 3px solid #555; border-radius: 25px; overflow: hidden; background:rgba(0,0,0,0) url('notavail.jpg') 0px 0px; } img	{ height: 266px; max-width: 266px; margin:0px auto; width:100%; border:0;	/* =< IE9 */ } .boxInner .titleBox { position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: -100px; /* hides titleBox outside boxInner */ background: rgba(0, 0, 0, 0.5); color: #FFF; padding: 10px; text-align: center; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .boxInner:hover .titleBox { margin-bottom: 0; /* shows titleBox inside boxInner */ } .sprite1{ background: url('GalleryThumbs.jpg') 0px 0px; } .sprite2{ background: url('GalleryThumbs.jpg') -266px 0px; } .sprite3{ background: url('GalleryThumbs.jpg') -532px 0px; } .sprite4{ background: url('GalleryThumbs.jpg') -798px 0px; } .sprite5{ background: url('GalleryThumbs.jpg') -1064px 0px; } .sprite6{ background: url('GalleryThumbs.jpg') 0px -266px; } .sprite7{ background: url('GalleryThumbs.jpg') -266px -266px; } .sprite8{ background: url('GalleryThumbs.jpg') -532px -266px; } .sprite9{ background: url('GalleryThumbs.jpg') -798px -266px; } .sprite10{ background: url('GalleryThumbs.jpg') -1064px -266px; }  /* For mobile: */ @media only screen and (max-width:600px) { /*mobile screen size*/ #links { text-align:right; } .boxInner .titleBox { margin-bottom: 0px; /* ALWAYS shows titles on small screens*/ } }