/*  style10.css for the "abv2.net.au"...picture display pages.... site  */

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  background-color: #111111;
  line-height: 125%;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: x-large;
  background-color: transparent;
  color: white;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 2em;
  margin: 0;
  background: Gray url(backgrounds/header2-bg.jpg) repeat-y right bottom;
}

h2 {
  color: white;
  font-size: 130%;
  font-weight: normal;
  padding-top: 15px;
}

li {
  font-size: small;
  list-style-type: none;
}

p {
  font-size: small;
  color: white;
}

span.prompt {
color: white;
font-weight: bold;

}

a {
  font-weight: bold;
}

a:link {
  color: black;
}

a:visited {
  color: navy;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: navy;
}

a:active {
  color: aqua;
  background-color: navy;
}


#bodycontentB {
width: 500px;
}

a:link {
  color: white;
}

a:visited {
  color: yellow;
}

a:hover {
  text-decoration: none;
  color: white;
  background-color: navy;
}



#bodycontentC {
width: 750px;
} 

#bodycontentD {
width: 750px;
} 

#navigation {
  width: 220px;
  height: 810px;
  background: #708DAF;
}

h2, ul {
  margin-top: 15px;
}

h3, ul {
 font-size: 18;
 margin-top: 10px;
}

h4, ul {
 font-size: 10;
 margin-top: 5px;
}

.textB {
left: 200px;
}

#header {
  border-top: 3px solid #7da5d8;

}

img.feature {
  float: right;
width: 300:
  margin: 10px;
}

img.featureA {
    margin: 10px;
}

img.featureB{
width: 400:
  margin: 10px;
}

img.featureC{
left: 100;
width: 400:
  margin: 10px;
}

img.featureD{
left: 100;
width: 400:
margin: 10px;
}



.gallerycontainer{
position: fixed;                 /*relative;*/

/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover {
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image's caption*/
position: fixed;
top:  13%;
left:  600px;
/* background-color: lightyellow; */
background-color: transparent;
padding: 5px;
/* border: 1px dashed gray; */
visibility: hidden;
color: white;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
position: fixed;
top:  25%;
left:  580px;
max-height:  500px;
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 1;
bottom: 1;
 -webkit-animation: fadein 0.3s; /* Safari and Chrome */
       -moz-animation: fadein 0.3s; /* Firefox */
        -ms-animation: fadein 0.3s; /* Internet Explorer */
         -o-animation: fadein 0.3s; /* Opera */
            animation: fadein 0.3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}?

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

left: 600px; /*position where enlarged image should offset horizontally */
z-index: 50;
}



.gallerycontainerA{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnailA img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnailA:hover{
background-color: transparent;
}

.thumbnailA:hover img{
border: 1px solid blue;
}

.thumbnailA span{ /*CSS for enlarged image's caption*/
position: fixed;
top:  13%;
left:  600px;
/*background-color: lightyellow; */
background-color: transparent;
padding: 5px;
/* border: 1px dashed gray; */
visibility: hidden;
color: white;
text-decoration: none;
}

.thumbnailA span img{ /*CSS for enlarged image*/
position: fixed;
top:  18%;
left:  580px;
max-height:  500px;
border-width: 0;
padding: 2px;
}

.thumbnailA:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 1;
bottom: 1;
 -webkit-animation: fadein 0.3s; /* Safari and Chrome */
       -moz-animation: fadein 0.3s; /* Firefox */
        -ms-animation: fadein 0.3s; /* Internet Explorer */
         -o-animation: fadein 0.3s; /* Opera */
            animation: fadein 0.3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}?

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

left: 600px; /*position where enlarged image caption? should offset horizontally */
z-index: 50;  
}

.gallerycontainerB{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/

left: 600px; /*position where enlarged image caption? should offset horizontally */
top: 200px;
z-index: 50;
}



/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured from the
top-left corner of the browser's content display.
*/


#navigation, #bodycontent, #bodycontentA, #bodycontentB, #bodycontentC, #bodycontentD, #bodycontentE, #header {
  position: absolute;
}


#navigation, #bodycontent {
top: 200px;
}

#bodycontent {
  left: 240px;
}

#textA {
left: 240px;
width: 400px;
}


#bodycontentA {
  top: 1120px;
  left: 20px;
}


#bodycontentB {
  top:  232px;
  left: 235px;
}


#bodycontentC {
  top: 1020px;
  left: 10px;
}

#bodycontentD {
  top:  700px;
  left: 250px;
}

#bodycontentE {
  top:  400px;
  left: 250px;
}


#header{
  width: 100%;
}