/* CSS for the EBRO Adventure website */

body {
     background-color: #bed8f3;
     background-image: url(images/landscape2_1360x955.jpg);
     background-repeat: no-repeat;
     background-position: bottom right;
     background-attachment: fixed;
     margin-top: 0;
     margin-left: 0;
     margin-right: 0;
     margin-bottom: 0;
     padding: 0;
     font-family: Verdana, Helvetica, Arial, sans-serif;
     font-size: .9em;
     color: white;
     line-height: 1.25em;
}

/* PAGE LAYOUT */

#header {
  width: 100%;
}

#header, #navigation, #bodycontent {
  position: absolute;
}

#navigation, #bodycontent {
  top: 8.95em;
}

#bodycontent {
  left: 200px;
  width: 540px;
}

/* End of PAGE LAYOUT */

/* MASTHEAD */

#sitebranding p {
  background-color: #bed8f3;
  border-top: 3px solid #7da5d8;
  border-bottom: 3px solid #7da5d8;
  margin: 0;
  padding-top: .3em;
  padding-bottom: .2em;
  padding-left: .8em;
  font-size: 1.5em;
}

#mastblock {
  position: absolute;
  top: 15px;
  left: 140px;
  background-color: transparent;
  font-family: cursive;
  color: black;
  width: 152px;
  height: 30px;
  padding: 5px;
}

#mastblock h1 {
   padding-top: 1em;
   font-family: cursive;
   color: black;
   text-align: left;
   font-size: 1.75em;
   font-weight: 700;
   margin-bottom: -3px;
}


hr {
  border: none;
  background-color: black;
  color: #3b307c;
  height: 3px;
  width: 100%;
}

#topblock {
  position: absolute;
  top: 3px;
  right: 0px;
  background-color: transparent;
  font-family: cursive;
  font-size: 1.1em;
  font-weight: 800;
  color: black;
  width: 205px;
  height: 30px;
  padding: 5px;
}

#tagline h1 {
  border-top: 3px solid #3b307c;
  background-color: #3b307c;
  border-bottom: 3px solid #bed8f3;
  margin: 0;
  padding-top: .3em;
  padding-bottom: .2em;
  padding-left: 1.8em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  font-style: normal;
  font-weight: 700;
  color: white;
}

/* End of MASTHEAD */

/* HOME PAGE */

#bodycontent1 h1 {
   background-color: transparent;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 2.0em;
   font-weight: 700;
   line-height: 1.25em;
   color: #FFE9CA;
   margin-bottom: -12px;
   margin-left: -18px;
   padding-top: .1em;
}

#bodycontent2 h1 {
   background-color: transparent;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.40em;
   font-weight: normal;
   line-height: 1.80em;
   color: #ffffff;
   margin-bottom: -12px;
   margin-left: -12px;
   padding-top: .8em;
}

#bodycontent3 h1 {
   background-color: transparent;
   font-family: Arial, Helvetica, sans-serif;
   text-align: justify;
   font-size: .95em;
   font-weight: normal;
   line-height: 1.15em;
   color: #ffffff;
   margin-bottom: -7px;
   margin-left: -7px;
   padding-top: .8em;
}

/* End of HOME PAGE */

/* NAVIGATION */

#navigation {
  background-color: #ffffff;
  <!-- background-image: url(images/landscape0041_200x350.jpg) -->;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-attachment: fixed;
  width: 150px;
  height: 550px;
  margin-left: 25px;
  border: 3px solid #3b307c;
  font-family: Arial, Helvetica, sans-serif;
}

#navigation ul {
  margin: 0;
  padding: 0;
}

#navigation li {
  display: block;
  padding: 5px 5px 5px 0.5em;
  text-decoration: none;
  list-style: none;
}

#navigation li a:link, #navigation li a:visited, {
  color: #3b307c;
}

#navigation li a:hover {
  color: #bed8f3;
}

#navigation li a:active {
  color: #93bdb3;
}

#navigation ul ul {
  margin-left: 12px;
}

#navigation ul ul a:link, #navigation ul ul a:visited, {
  color: #93bdb3;
}

#navigation ul ul a:hover {
  color: #bed8f3;
}

#navigation ul ul a:active {
  color: #93bdb3;
}

#bubble1 {
  background-color: transparent;
  background-image: url(images/bubble1.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-attachment: fixed;
  width: 50px;
  height: 50px;
  margin-left: 25px;
  margin-bottom: 25px;
}

#bubble2 {
  background-color: transparent;
  background-image: url(images/bubble2.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-attachment: fixed;
  width: 75px;
  height: 75px;
  margin-left: 25px;
  margin-bottom: 25px;
}

#bubble3 {
  background-color: transparent;
  background-image: url(images/bubble3.jpg);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-attachment: fixed;
  width: 100px;
  height: 100px;
  margin-left: 25px;
  margin-bottom: 25px;
}
/* End of NAVIGATION */

/* FOOTER */

#footer {
  position: absolute;
  left: 200px;
  right: 0px;
  bottom: 0px;
  line-height: 1.25em;
  text-align: left;
}

/* End of FOOTER */


/* HEADINGS */

h1 {
   background-color: white;
   font-family: cursive;
   color: #3b307c;
   font-size: 3em;
   font-weight: bold;
   margin: 0;
   padding-top: 1.1em;
   padding-left: .6em;
   padding-bottom: .4em;
}

h2 {
   padding-top: 1em;
   color: #FFE9CA;
   font-size: 1.75em;
   font-weight: 700;
}

h3 {
   /* background-color: white; */
   color: #3b307c;
   font-size: 1.25em;
   font-weight: normal;
   line-height: 1.25em;
   margin-bottom: -12px;
   padding-top: .8em;
}

h4 {
   padding-top: 1em;
   font-family: cursive;
   color: black;
   font-size: 1.75em;
   font-weight: 700;
   margin-bottom: -3px;
}

h5 {
   background-color: transparent;
   color: #3b307c;
   font-size: 1.05em;
   font-weight: normal;
   line-height: 1.25em;
   margin-bottom: -12px;
   padding-top: .8em;
}

/* End of HEADINGS */

/* TEXT */

p {
  text-align: justify;
  font-size: .8em;
  color: #ccffff;
}

.nudged {
  position: relative;
  top: 10px;
  left: 10px;
}

.larger {
  font-size: +1;
}

.black {
  color: #000000;
}

.white {
  color: #ffffff;
}

.navy {
  color: #3b307c;
}

.teal {
  color: teal;
}

.purple {
  color: purple;
}

.pampas {
  color: #93bdb3;
}

.red {
  color: red;
  font-size: 1.2em;
}

.yellow {
  color: yellow;
}

.sky {
  color: #bed8f3;
}

.skin {
  color: #FFE9CA;
}

.aqua {
  color: #CCFFFF;
}

.contact {
  font-weight: 700;
  color: black;
}

.ebro {
  font-family: cursive;
  font-size: 1.2em;
  font-weight: 900;
  color: #3b307c;
}

/* End of TEXT */

/* HYPERLINKS */

a:link, a:visited {
  color: #FFE9CA;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: white;
}

a:active {
  color: #FFE9CA;
}

/* End of HYPERLINKS */

/* LISTS */

ul li {
  font-size: .9em;
  list-style-type: square;
}

ol li {
  font-size: .8em;  list-style-type: square;
}

<!-- LIST STYLES can be circle, disc, square or none -->

/* BORDERS */

.dottedborder {
  border: 1px dotted silver;
}

/* PADDING */

.pixelpadding {
  padding: 30px;
  border: 1px dashed gray;
}

.empadding {
  padding: 2em;
  border: 1px dashed gray;
}

.percentagepadding {
  padding: 5%;
  border: 1px dashed gray;
}

/* CSS Tabs */

ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
font: bold 11px arial, helvetica, sans-serif; /* set font as desired */
border-bottom: 1px solid #3b307c; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 25px 10px; /* THIRD number must change with respect to padding-top (X) below */
}

ul#tabnav li { /* do not change */
display: inline;
}

body#adventure li.adventure, body#inclusive li.inclusive, body#budget li.budget, body#survive li.survive, body#booking li.booking, body#confirmation li.confirmation, body#invalid li.invalid, body#contactus li.contactus, body#enquirysent li.enquirysent, body#enquiryfailed li.enquiryfailed, body#climate li.climate, body#checklist li.checklist, body#links li.links { /* settings for selected tab */
border-bottom: 1px solid #3b307c; /* set border color to page background color */
background-color: #3b307c; /* set background color to match above border color */
}

body#adventure li.adventure a, body#inclusive li.inclusive a, body#budget li.budget a, body#survive li.survive a, body#booking li.booking a, body#confirmation li.confirmation a, body#invalid li.invalid a, body#contactus li.contactus a, body#enquirysent li.enquirysent a, body#enquiryfailed li.enquiryfailed a, body#climate li.climate a, body#checklist li.checklist a, body#links li.links a { /* settings for selected tab link */
background-color: #3b307c; /* set selected tab background color as desired */
color: #e2edff; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #3b307c; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #e2edff; /* set unselected tab background color as desired */
color: #3b307c; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}

ul#tabnav a:hover { /* settings for hover effect */
background: e2edff; /* set desired hover color */
}

/* END OF CSS Tabs */

/* BLOCKS */

#copyright {
  position: absolute;
  top: 85px;
  right: 12px;
  background-color: transparent;
  font-family: cursive;
  font-size: .75em;
  font-weight: 700;
  color: white;
  text-align: right;
  width: 300px;
  height: 30px;
  padding: 5px;
}

#googlebox {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: transparent;
  width: 250px;
  height: 30px;
  margin: 0;
  padding: 0;
}

#redblock {
  position: absolute;
  top: 200px;
  left: 200px;
  color: white;
  background-color: red;
  width: 90px;
  height: 90px;
  padding: 5px;
}

#yellowblock {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: yellow;
  color: red;
  width: 50px;
  height: 50px;
  padding: 5px;
}

#blueblock {
  position: absolute;
  top: 118px;
  left: 0px;
  background-color: #ffffff;
  color: #3b307c;
  width: 727px;
  border: 3px solid #3b307c;
  padding: 20px;
}

#nav {
  float: right;
  width: 300px;
  background-color: pink;
}

.feature {
  float: right;
  margin: 10px;
}

/* IMAGES */

img {
  border: 15px solid white;
}

/* PHOTO GALLERY */

.galleryphoto {
  padding-bottom: 20px;
  margin-bottom: 10px;
}

.galleryphoto p {
  width: 430px;
  margin-top: 0;
  font-size: .7em;
  font-weight: normal;
  color: #FFFFFF;
  line-height: 1.4em;
}

.photocredit {
  font-weight: normal;
  color: #FFE9CA;
}

/* End of PHOTO GALLERY */

/* SNAPBOX - HOME PAGE */
<!-- BOTTOM -->
#snapboxH4 {
  position: absolute;
  left: 160px;
  top: 428px;
  background-color: transparent;
  color: white;
  width: 250px;
  height: 190px;
  padding: 0px;
}

<!-- LEFT -->
#snapboxH1 {
  position: absolute;
  left: 0px;
  top: 340px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 177px;
  padding: 0px;
}

<!-- TOP -->
#snapboxH2 {
  position: absolute;
  left: 150px;
  top: 260px;
  background-color: transparent;
  color: white;
  width: 225px;
  height: 177px;
  padding: 0px;
}

<!-- RIGHT -->
#snapboxH3 {
  position: absolute;
  left: 345px;
  top: 415px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 165px;
  padding: 0px;
}

/* End of SNAPBOX - HOME PAGE */

/* SNAPBOX - ABOUT US */
<!-- LEFT -->
#snapboxA1 {
  position: absolute;
  left: 0px;
  top: 170px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- TOP -->
#snapboxA2 {
  position: absolute;
  left: 145px;
  top: 60px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- RIGHT -->
#snapboxA3 {
  position: absolute;
  left: 345px;
  top: 165px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- BOTTOM -->
#snapboxA4 {
  position: absolute;
  left: 175px;
  top: 225px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

/* End of SNAPBOX - ABOUT US */

/* SNAPBOX - LOCATION */
<!-- LEFT -->
#snapboxL1 {
  position: absolute;
  left: 45px;
  top: 120px;
  background-color: transparent;
  color: white;
  width: 165px;
  height: 220px;
  padding: 0px;
}

<!-- TOP -->
#snapboxL2 {
  position: absolute;
  left: 145px;
  top: 60px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- RIGHT -->
#snapboxL3 {
  position: absolute;
  left: 365px;
  top: 135px;
  background-color: transparent;
  color: white;
  width: 175px;
  height: 225px;
  padding: 0px;
}

<!-- BOTTOM -->
#snapboxL4 {
  position: absolute;
  left: 175px;
  top: 225px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

/* End of SNAPBOX - LOCATION */

/* SNAPBOX - FISHING */
<!-- LEFT -->
#snapboxF1 {
  position: absolute;
  left: 0px;
  top: 180px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- TOP -->
#snapboxF2 {
  position: absolute;
  left: 145px;
  top: 60px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- RIGHT -->
#snapboxF3 {
  position: absolute;
  left: 345px;
  top: 165px;
  background-color: transparent;
  color: white;
  width: 165px;
  height: 220px;
  padding: 0px;
}

<!-- BOTTOM -->
#snapboxF4 {
  position: absolute;
  left: 190px;
  top: 225px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

/* End of SNAPBOX - FISHING */

/* SNAPBOX - METHODS */
<!-- LEFT -->
#snapboxM1 {
  position: absolute;
  left: 0px;
  top: 170px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- TOP -->
#snapboxM2 {
  position: absolute;
  left: 145px;
  top: 60px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- RIGHT -->
#snapboxM3 {
  position: absolute;
  left: 345px;
  top: 195px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- BOTTOM -->
#snapboxM4 {
  position: absolute;
  left: 175px;
  top: 225px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

/* End of SNAPBOX - METHODS */

/* SNAPBOX - BOATS */
<!-- LEFT -->
#snapboxB1 {
  position: absolute;
  left: 0px;
  top: 170px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- TOP -->
#snapboxB2 {
  position: absolute;
  left: 145px;
  top: 60px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- RIGHT -->
#snapboxB3 {
  position: absolute;
  left: 345px;
  top: 165px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

<!-- BOTTOM -->
#snapboxB4 {
  position: absolute;
  left: 175px;
  top: 225px;
  background-color: transparent;
  color: white;
  width: 165px;
  height: 220px;
  padding: 0px;
}

/* End of SNAPBOX - BOATS */

/* SNAP SHOTs */

#snapbox1 {
  position: relative;
  top: 35px;
  left: 45px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox2 {
  position: relative;
  top: -223px;
  left: 280px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox3 {
  position: relative;
  top: -250px;
  left: 260px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox4 {
  position: relative;
  top: -525px;
  left: 490px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox5 {
  position: relative;
  top: -255px;
  left: 400px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox6 {
  position: relative;
  top: 60px;
  left: 110px;
  background-color: transparent;
  color: white;
  width: 165px;
  height: 220px;
  padding: 0px;
}

#snapbox7 {
  position: relative;
  top: -575px;
  left: 480px;
  background-color: transparent;
  color: white;
  width: 165px;
  height: 220px;
  padding: 0px;
}

#snapbox8 {
  position: relative;
  top: -255px;
  left: 280px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox9 {
  position: relative;
  top: -350px;
  left: 260px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox11 {
  position: relative;
  top: 60px;
  left: 45px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox12 {
  position: relative;
  top: -180px;
  left: 280px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox13 {
  position: relative;
  top: -220px;
  left: 260px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox14 {
  position: relative;
  top: -505px;
  left: 480px;
  background-color: transparent;
  color: white;
  width: 165px;
  height: 220px;
  padding: 0px;
}

#snapbox15 {
  position: relative;
  top: 40px;
  left: 110px;
  background-color: transparent;
  color: white;
  width: 165px;
  height: 220px;
  padding: 0px;
}

#snapbox16 {
  position: relative;
  top: -255px;
  left: 280px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

#snapbox17 {
  position: relative;
  top: -290px;
  left: 260px;
  background-color: transparent;
  color: white;
  width: 200px;
  height: 167px;
  padding: 0px;
}

/* End of SNAP SHOTs */

/* End of IMAGES */

/* TABLES */

td, th {
font-size: 0.7em
}

.datatable {
  border: 1px solid #D6DDE6;
  border-collapse: collapse;
  line-height: .7em;
  width: 75%;
}

.datatable td {
  border: 1px solid #D6DDE6;
  background-color: #ffffff;
  color: #3b307c;
  padding: 4px;
}

.datatable th {
  border: 2px solid gray;
  background-color: silver;
  font-weight: bold;
  text-align: left;
  padding-left: 4px;
}

.datatable caption {
  font-weight: bold;
  font-size: .8em;
  color: #ffffff;
  text-align: left;
  padding-top: 3px;
  padding-bottom: 8px;
}

.datatable tr.hover, .datatable tr.hilite {
  background-color: #DFE7F2;
  color: black;
}

.datatable.booking td {
  background-color: #ffffff;
  padding: 4px;
  text-align: justify;
  font-size: 1.0em;
  color: #3b307c;
}

.block td {
  background-color: transparent;
  font-size: .8em;
  color: navy;
  padding: 4px;
}

form.contact {
  padding: 10;
  margin: 10;
  margin-top: -15px;
}

form.contact fieldset {
  border: 2px solid #3b307c;
  padding: 20px;
}

form.contact legend {
  font-weight: bold;
  font-size: small;
  color: #3b307c;
  padding: 20px;
}

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

form.booking {
  padding: 0;
  margin: 0;
  margin-top: 10px;
}

form.booking fieldset {
  border: 1px solid silver;
  padding-top: 0px;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  margin-top: -20px;
}

form.booking legend {
  font-weight: bold;
  font-size: small;
  color: #93bdb3;
  padding: 10px;
}

form.booking label.fixedwidth {
  display: block;
  width: 80px;
  float: left;
}

.formtext {
  text-align: justify;
  font-size: .8em;
  color: #3b307c;
}

.smallformtext {
  text-align: justify;
  font-size: .75em;
  color: #3b307c;
}

/* End of TABLES */