html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, uxl, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: top; /* baseline; */
}

/* ===================== Reset Ends - Body & Headers ================================= */

html {
   overflow-y: scroll; /* stop firefox scroll bar jmp */
}

body {
   background: #f0f0f0 url() no-repeat fixed;
   background-position: left top;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 100%;
   line-height: 1.25;
   margin: 5px;
}
* {
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
   color: #000080;
   margin: 0 10px 0 10px;
}
h1 { 
   font-size: 200%;
}
h2 {
    font-size: 100%;
    color: #800000;
}
h3, h4 {
   font-size: 100%;
}
h5 { 
   font-size: 90%;
}
h6 { 
   font-size: 80%;
}
.red {
    color: red;
}
div#page {
    width: 100%;
    max-width: 700px;
    margin: auto;
}
div#header {
    width: 100%;
    font-size: 400%;
    font-weight: 900;
    margin: auto;
}
img#header2 {
    width: 20%;
    margin: auto;
}
#about, #home {
    padding: 20px;
    border: 1px solid black;
}

/* ########## Tables ############### */
.rTable {
    width: 100%;
    max-width: 700px;
    margin: auto;
    display: table;
    border: 1px solid black;
}
.rTableRow      {
    display: table-row;
}
/* grid - % with respect to container */
[class*="col-"] {
    position: relative;
    float: left;
    padding: 10px;
/*    border: 1px solid green;*/
}
.col-05  {width: 5%;}
.col-083 {width: 8.3333335%;}
.col-10  {width: 10%;}
.col-15  {width: 15%;}
.col-20  {width: 20%;}
.col-25  {width: 25%;}
.col-30  {width: 30%;}
.col-333 {width: 33.333333%;}
.col-35  {width: 35%;}
.col-40  {width: 40%;}
.col-45  {width: 45%;}
.col-50  {width: 50%;}
.col-55  {width: 55%;}
.col-60  {width: 60%;}
.col-65  {width: 65%;}
.col-70  {width: 70%;}
.col-75  {width: 75%;}
.col-80  {width: 80%;}
.col-85  {width: 85%;}
.col-90  {width: 90%;}
.col-95  {width: 95%;}
.col-100 {width: 100%;}

/* 10 rows grid - % with respect to container */
.row-1   {height: 10%;}
.row-2   {height: 20%;}
.row-3   {height: 30%;}
.row-4   {height: 40%;}
.row-5   {height: 50%;}
.row-6   {height: 60%;}
.row-7   {height: 70%;}
.row-8   {height: 80%;}
.row-9   {height: 90%;}
.row-10  {height: 100%;}

/* ############# menu ###############*/
.nav {
    display:inline-block;
    margin: auto;
}
.nav ul {
    float: left;
    -webkit-transition: .5s;
    transition: .5s;
    display:inline-block;
    list-style: none;
    background: no-repeat center top;
    margin: 0;
    padding: 0;
}
.nav a {
    display: block;
    color: black;
    text-decoration:none;
}
.nav li:hover > ul {
    visibility: visible;
    opacity: 1;
}
.nav li {
    opacity:0.8;
    background: no-repeat center top;
    float: left;
    position: relative;
    -webkit-transition: .5s;
    transition: .5s;
    display:inline-block;
    padding: 16px;
    padding: 10px 20px;
}
/* ########### links ######### */
a {
    font-weight:600;
    color: #363566;
    text-decoration: none;
    background: none;
}
a:visited {
    color: #363566;
}
a:hover {
    color: #bc3bc4; /* was ff3535; */
}
[class*="image"] {
    position: absolute;
    width: 600px;
    top: 0px;
    left: 0px;
}
a.image101 {
    background-image: url("light/Alport_1.jpg");
    background-position: -100px -200px;
    height: 900px;
}
a.image102 {
    background-image: url("light/hut_1.jpg");
    background-position: -20px -20px;
    height: 441px;
}
a.image103 {
    background-image: url("light/stanage_6.jpg");
    height: 419px;
}
a.image104 {
    background-image: url("light/wyver-r.jpg");
    height: 451px;
}
a.image105 {
    background-image: url("light/black rocks1.jpg");
    height: 497px;
}
a.image106 {
    background-image: url("light/chevin5.jpg");
    height: 443px;
}
a.image107 {
    background-image: url("light/Quarry Near Crich 1.jpg");
    height: 480px;
}
a.image108 {
    background-image: url("light/sud-back-hall.jpg");
    height: 450px;
}
a.image109 {
    background-image: url("light/ColdRock.jpg");
    height: 436px;
}
a.image110 {
    background-image: url("light/Garden 2.jpg");
    height: 480px;
}
a.image111 {
    background-image: url("light/Quarry Near Crich 2.jpg");
    height: 400px;
}
a.image112 {
    background-image: url("light/sud-brush.jpg");
    height: 467px;
}
a.image113 {
    background-image: url("light/black rocks 3.jpg");
    height: 400px;
}
a.image114 {
    background-image: url("light/cromford-stream.jpg");
    height: 466px;
}
a.image115 {
    background-image: url("light/hpj-house.jpg");
    height: 437px;
}
a.image116 {
    background-image: url("light/shin.jpg");
    height: 469px;
}
a.image117 {
    background-image: url("light/sud-high-chair.jpg");
    height: 421px;
}
a.image118 {
    background-image: url("light/wheelhouse2.jpg");
    height: 400px;
}
a.image119 {
    background-image: url("light/bow-path.jpg");
    height: 480px;
}
a.image120 {
    background-image: url("light/dark-wood.jpg");
    height: 426px;
}
a.image121 {
    background-image: url("light/Old Loco.jpg");
    height: 480px;
}
a.image122 {
    background-image: url("light/stanage_1.jpg");
    height: 900px;
}
a.image123 {
    background-image: url("light/sud-rockinghorse.jpg");
    height: 604px;
}
a.image124 {
    background-image: url("light/swinney-wood.jpg");
    height: 409px;
}
a.image125 {
    background-image: url("light/bow-swing.jpg");
    height: 353px;
}
a.image126 {
    background-image: url("light/earl_grey_tower.jpg");
    height: 838px;
}
a.image127 {
    background-image: url("light/stanage_5.jpg");
    height: 444px;
}
a.image128 {
    background-image: url("light/the-path.jpg");
    height: 503px;
}
a.image201 {
    background-image: url("float/fnf1.jpg");
    height: 411px;
}
a.image202 {
    background-image: url("float/fnf2.jpg");
    height: 468px;
}
a.image203 {
    background-image: url("float/fnf3.jpg");
    height: 410px;
}
a.image204 {
    background-image: url("float/fnf4.jpg");
    height: 401px;
}
a.image205 {
    background-image: url("float/fnf5.jpg");
    height: 401px;
}
a.image206 {
    background-image: url("float/fnf6.jpg");
    height: 500px;
}
a.image207 {
    background-image: url("float/fnf7.jpg");
    height: 454px;
}
a.image208 {
    background-image: url("float/fnf8.jpg");
    height: 491px;
}
a.image209 {
    background-image: url("float/fnf9.jpg");
    height: 511px;
}
a.image210 {
    background-image: url("float/fnf10.jpg");
    height: 400px;
}
a.image211 {
    background-image: url("float/fnf11.jpg");
    height: 461px;
}
a.image212 {
    background-image: url("float/fnf12.jpg");
    height: 461px;
}
a.image301 {
    background-image: url("paint/casa.jpg");
    height: 298px;
}
a.image302 {
    background-image: url("paint/Malyan-Spout.jpg");
    height: 806px;
}
a.image303 {
    background-image: url("paint/Frost-and-Reeds-at-Snape.jpg");
    height: 396px;
}
a.image304 {
    background-image: url("paint/River-Alde-at-Iken.jpg");
    height: 300px;
}
a.image305 {
    background-image: url("paint/shining-cliff-woods-in-spring.jpg");
    height: 482px;
}
a.image306 {
    background-image: url("paint/Veiw-from-Curber-Edge.jpg");
    height: 774px;
}
a.image307 {
    background-image: url("paint/windy-tree.jpg");
    height: 308px;
}
a.image308 {
    background-image: url("paint/Contact.jpg");
    height: 423px;
}
.pic-box {
    position: relative;
    width: 331px;
    height: 252px;
    border: 1px solid black;
}
.pic-frame {
    position: absolute;
    width: 329px;
    height: 250px;
    overflow: hidden;
    border: 10px solid white;
    padding: 1px;
}
.tl {
    top: 0;
    left: 0;
}
.tr {
    top: 0;
    right: 0;
}
.bl {
    bottom: 0;
    left: 0;
}
.br {
    bottom: 0;
    right: 0;
}