@charset "utf-8";
/* for rainforest publications - version 4 - 2017 */
/* styles for body of pages for individual pocket guides */
.pgTh1, .pgTh2, .pgTh3 {
visibility: visible;
}
/* above can be embedded into page title to shorten in stages */
/* such pgTh1 same as hide4tablet unless overridden */
/* such pgTh2 open for custom */
/* such pgTh3 same as hide4mobile unless overridden */
/* @group gp1- 3 line page headings */
/* use .pockgetpg to control responsive adjustments */
/* no need to use it if not affecting adjustments */
/* h1 works like a breadcrumb */
.pgTitle1 h1.pocketpg {
font-size: 1.5em;
color: #ceefcb;
}
h1.pocketpg a {
color: #ceefcb;
font-weight: 800;
padding: 2px 6px;
border-radius: 8px;
}
h1.pocketpg a:hover {
color: #fff;
background-color: #990000;
text-decoration: none;
}
.pgTitle1 h2 {
font-size: .9em;
}
.pgTitle1 h3 {
margin: 0;
padding: 25px 10px;
color: #fff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 2em;
line-height: 1.2em;
border-top: 2px solid #fff;
letter-spacing: .1em;
text-align: center;
background-color: #749bb8;
text-shadow: 1px 1px 3px rgba(0,0,0,.2);
}
/* the background color for h3 is usually changed on each page */
/* @end */
/* @group gp2- sidebar 1 - for left side w cover and special */
.sidebar1 {
width: 285px;
float: left;
position: relative;
text-align: center;
margin: 0 50px 20px 0;
background-color: #fff;
z-index: 9;
}
.sidebar1 .pocketGuidePromo1,
.sidebar1 .pocketGuidePromoB {
float: none;
}
/* @end */
/* @group gp3- for main content and sidebar 2 */
.main-content {
width: auto;
position: relative;
line-height: 2em;
z-index: 1;
color: #333;
}
.main-content .igc {
position: relative;
color: #000;
font-weight: 500;
}
/* for right sidebar inside the Individual Guide Content area */
.sidebar2 {
position: absolute;
width: 260px;
top: 0px;
right: 0px;
color: #333;
font-size: .9em;
line-height: 1.4em;
}
.sidebar2 img {
height: auto !important;
width: auto !important;
max-width: 100%;
}
.sidebar2 div {
padding: 10px;
text-align: center;
background-color: #fff;
}
/* sidebar 2 placeholder */
.sb2ph {
float: right;
width: 260px;
height: 300px;
padding: 10px 10px 10px 30px;
}
/* @end */
/* @group gp4- misc for page body or elsewhere */
.pgsugg {
display: inline-block;
}
/* @end */
/* @group gp8- 4 fer promo - tone down */
/* tone down orange on the special, make it match the trim */
/* otherwise these pages are just too busy */
/* also see rainpubv4-guides gp2 (roughly line 110 right now), these redefine those */
.pocketGuidePromo1 {
width: 250px;
border: 10px solid #ff9900;
}
.pocketGuidePromo1 h3 {
background-color:#F90;
color: #fff;
text-shadow: 1px 2px 3px rgba(0,0,0,.3);
}
.pocketGuidePromo1 .promoOpt1, .pocketGuidePromo1 .promoOpt2, .pocketGuidePromo1 .promoOpt3, .pocketGuidePromo1 .promoOpt4 {
border-top: 3px solid #f90;
border-bottom: 1px solid #f90;
}
.pocketGuidePromoB {
width: 250px;
border: 10px solid #3399cc;
}
.pocketGuidePromoB h3 {
background-color:#3399cc;
color: #fff;
text-shadow: 1px 2px 3px rgba(0,0,0,.3);
}
.pocketGuidePromoB .promoOpt1, .pocketGuidePromoB .promoOpt2, .pocketGuidePromoB .promoOpt3, .pocketGuidePromoB .promoOpt4 {
border-top: 3px solid #3399cc;
border-bottom: 1px solid #3399cc;
}
.promoOpt1 option, .promoOpt2 option, .promoOpt3 option, .promoOpt4 option {
padding: 5px 2px 10px 2px;
}
.promoOpt1 {
background-color: #ffffec;
}
.promoOpt2 {
background-color: #ffeddb;
}
.promoOpt3 {
}
.promoOpt4 {
background-color: #ffffcc;
}
/* @end */
/* @group gp9 - for responsive adjustments*/
/* for Costa Rica or Belize, assumes long left column */
/* this shifts the sample illustration from upper right to below */
@media only screen and (min-width: 0px) and (max-width: 950px) {
/* assumes hide4tablet set to hide the pixel holding its place */
.sidebar2 {
position: static;
display: block;
width: 100%;
text-align: center;
}
.sidebar2 div {
display: inline-block;
margin: 20px 0;
}
}
@media only screen and (min-width: 0px) and (max-width: 620px) {
.sidebar1 {
float: none;
width: auto;
background: transparent;
margin-right: 0;
}
.pocketGuidePromo1 {
float: none;
width: auto;
}
}
/* @end */