/*  style1iPad.css for rickhunter.net 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: 4em;
  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;

}

#tagline p {
  font-style: italic;
  font-family: Georgia, Times, serif;
  border-top: 3px solid #7da5d8;
  border-bottom: 3px solid #7da5d8;

  padding-top: .2em;
  padding-bottom: .2em;
  padding-left: .8em;
  margin: 0;
  background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
}

em {
  text-transform: uppercase;
}

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;
}

.fun {
  color: #339999;
  font-family: Georgia, Times, serif;
  letter-spacing: 0.05em;
}

blockquote.fun {
  font-style: italic;
}

#bodycontentB {
width: 500px;
}

#bodycontentC {
width: 750px;
} 

#bodycontentD {
width: 750px;
} 

#navigation {
  width: 150px; 
  height: 750px; 
  background: #708DAF url(backgrounds/nav-bgB.jpg) no-repeat;
}

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;
}


table.trips {
  border-collapse: collapse;
}

table.trips th, table.trips td {
  padding: 4px;
  border: 1px solid #000066;

}

table.trips th {
  font-size: x-small;
  text-align: left;
  background: #241374 url(backgrounds/header-bg.jpg);
  color: #ffffff;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 2px;
  padding-right: 2px;
}

table.trips td {
  font-size: small;
  background: #e2edff url(backgrounds/td.jpg) repeat-x top;
}

table.trips caption {
  color: #000066;   
  font-size: small;   
  font-weight: bold;   
  text-align: left;
  padding-bottom: 5px;
}



form.contact fieldset {   
  border: 2px solid navy;   
  padding: 10px; 
}  

form.contact legend {   
  font-weight: bold;   
  font-size: small;   
  color: navy;   
  padding: 5px; 
}

form.contact {   
  padding: 0;   
  margin: 0;   
  margin-top: -15px;
  line-height: 150%;
}

form.contact label {
  font-weight: bold;
  font-size: small;
  color: white;
}

form.contact label.fixedwidth {   
  display: block;   
  width: 240px;   
  float: left; 
}

form.contact .buttonarea input {   
  background: navy;
  color: white;   
  font-weight: bold;   
  padding: 5px;   
  border: 1px solid white; 
}

form.contact .buttonarea {   
  text-align: center;   
  padding: 4px;   
  background-color: transparent; 
}


.gallerycontainer {
position: fixed;

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

.thumbnail img{
border: 1px solid white;
margin: 0 2px 2px 0;
align: right;
}

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

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

.thumbnail span{ /*CSS for enlarged image's caption*/
position: fixed;
top:  10%;
left:  245px;  /*  580px;  */
/*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:  23%;
left:  255px;  /*545px; */
max-height:  450px;
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 1px 1px 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:  180px;  /* 580px; */
/*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:  23%;
left:  245px;  /*  545px;  */
max-height:  450px;
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: 200px;  /*  600px;  position where enlarged image caption? should offset horizontally */
z-index: 52;
}

.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 */
z-index: 52;
}




/*
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, #second, #third, #fourth, #fifth, #sixth, #seventh {
  position: absolute;
}


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

#bodycontent {
  left: 240px;
}

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


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


#bodycontentB {
  top:  200px;
  left: 155px;  /*218px;  */
}

#bodycontentC {
  top: 985px;
  left: 1px;
}

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

#bodycontentE {
  top:  400px;
  left: 250px;
}
#header{
  width: 100%;
}

#second {
top: 70px;
left: 680px;
}

#third { 
top: 1100px;
left: 100px;
}

#fourth {
top: 70px;
left: 20px;
}

#fifth {
top: 1900px;
left: 100px;
}
#sixth {
top: 2500px;
left: 100px;
}
#seventh {
top: 3000px;
left: 100px;
}