/******** Global Variables ********/
:root {
  --bgCol: #fcf3cf;
  --standardMargin: 12px;
  
  --fontSizeXL: 36px;
  --fontSizeLarge: 24px;
  --fontSizeMedium: 18px;
  --fontSizeText: 16px;
  --fontSizeSmall: 12px;

  --textColor: #154360;
  --textFontFamily: Arial, Helvetica, sans-serif;
  --calloutFontFamily: "Times New Roman", Times, serif;

  --headlineColor: #154360;
  --headlineFontFamily: Arial, Helvetica, sans-serif;
  
  --photoBannerBgColor: #34495e; /*#5d6d7e;*/

  --travelTipHeadColor: #6e2c00;
  --travelTipTextColor: #6e2c00;
  --travelTipBgColor: #fef9e7;
  --travelTipFontFamily: "Times New Roman", Times, serif;

  --observationHeadColor: #b9770e;
  --observationTextColor: #6e2c00;
  --observationBgColor: #fef9e7;
  --observationFontFamily: "Times New Roman", Times, serif;
  
  --photoCaptionColor: #154360;
  --photoCaptionFontFamily: Arial, Helvetica, sans-serif;
  --photoCaptionFontSize: 14px;
  --photoCaptionPaddingLarge: 64px;
  --photoCaptionPaddingMedium: 36px;
  --photoCaptionPaddingSmall: 6px;
}

/******** Fonts ********/

.textFont {
    font: var(--fontSizeText) var(--textFontFamily);
    color: var(--textColor);
}

.captionFont {
    font: var(--photoCaptionFontSize) var(--photoCaptionFontFamily);
    color: var(--photoCaptionColor);  
}

.calloutHeaderFont {
    font: bold var(--fontSizeText) var(--calloutFontFamily);
}

.calloutTextFont {
    font: var(--fontSizeText) var(--calloutFontFamily);
}

/* use this like h3 but in span so can control spacing. E.g., the daily itinerary under the date inside h2 */
.h3Font {
  font: italic var(--fontSizeText) var(--textFontFamily);
  color: var(--textColor);
}

.footerCell {
  font: var(--fontSizeText) var(--textFontFamily);
  text-align: center;
  width: 25%
}

.navHeaderCell {
  font: var(--fontSizeSmall) var(--textFontFamily);
  text-align: center;
  width: 25%
}

/******** Boxes and alignment ********/

.calloutBox {
    border-style: solid;
    border-width: 0px 0px 0px 6px;
    margin-right: var(--standardMargin); 
    padding: 10px;
  }

  .center {
    margin-left: auto;
    margin-right: auto;
  }
  
  .background {
    background-color: var(--bgCol);
  }

/******** Travel Tips ********/
/* 
  Create a travel tip:
    <p class="calloutBox travelTipBgColor travelTipBorderColor">
    <span class="calloutHeaderFont travelTipHeaderColor">Travel Tip:</span> 
    <span class="calloutTextFont travelTipTextColor">Here's a tip!</span>
    </p>

    If there is left-float then you might also need to define the left-margin, depending on the 
    size of the floating element.
    <p class="calloutBox travelTipBgColor travelTipBorderColor leftMargin_medium">
*/

.travelTipBgColor {
    background-color: var(--travelTipBgColor);
}

.travelTipHeaderColor {
  color: var(--travelTipHeadColor);
}
  
.travelTipTextColor {
  color: var(--travelTipTextColor);
}

.travelTipBorderColor {
    border-color: var(--travelTipHeadColor);
}


/******** Observation ********/
/* 
    Create an observation:
    <p class="calloutBox observationBgColor observationBorderColor">
    <span class="calloutHeaderFont observationHeaderColor">Observation:</span> 
    <span class="calloutTextFont observationTextColor">Here's an observation!</span>
    </p>

    If there is left-float then you might also need to define the left-margin, depending on the 
    size of the floating element. If the floated element is wider than the nominal table width,
    you might have to explicitly set the margin using style.
    <p class="calloutBox observationBgColor observationBorderColor leftMargin_medium">
*/

.observationBgColor {
    background-color: var(--observationBgColor);
}

.observationHeaderColor {
  color: var(--observationHeadColor);
}
  
.observationTextColor {
  color: var(--observationTextColor);
}

.observationBorderColor {
    border-color: var(--observationHeadColor);
}


/******** Photo layout ********/
/*
  Example: Create a right-floating table for a photo and caption. 
  Note setting the photo alignment and height. These may vary.

    <table class="photoTableBase photoTable_floatRight width_medium">
        <tr>
            <td>
                <img src="https://..."
                    alt="..." width="100%" />
            </td>
        </tr>
        <tr>
            <td class="captionFont photoCaption_left">
                ...
            </td>
        </tr>
    </table>
*/

/* Use on table to force the table to stay within the screen bounds with a right margin .

   NOTE: if you want a centered table, you can't use this as it overrides the margin. Instead use
       class="background center" style="clear: both; padding-bottom: 12px;"
   In some cases you might omit the bottom padding. 
*/
.photoTableBase {
    margin-right: var(--standardMargin);
    background-color: var(--bgCol);
    padding-bottom: 12px;
}

.photoTable_floatLeft {
  float: left;
}

.photoTable_floatRight {
  float: right;
  padding-left: var(--standardMargin);
}

.width_extraTiny
{
  width: 10%;
}

.leftMargin_extraTiny {
  margin-left: 11%;
}

.width_tiny
{
  width: 18%;
}

.leftMargin_tiny {
  margin-left: 19%;
}

.width_small
{
  width: 28%;
}

.leftMargin_small {
  margin-left: 29%;
}

.width_medium
{
  width: 38%;
}

.leftMargin_medium {
  margin-left: 39%;
}

.width_large
{
  width: 50%;
}

.leftMargin_large {
  margin-left: 51%;
}

.width_xLarge {
  width: 70%
}

.leftMargin_xLarge {
  margin-left: 71%;
}


/* DEPRECATED. Use on td to place caption text in the bottom-left of the cell */
.photoCaptionTd_bottomLeft {
  text-align: left;
  vertical-align: bottom;
  padding-top: var(--photoCaptionPaddingMedium);
  padding-right: var(--photoCaptionPaddingLarge);
  padding-bottom: 4px; /* should be 0 but looks better with this */
  padding-left: var(--photoCaptionPaddingSmall);
}

/* DEPRECATED. Use on td to place caption text in the top-left of the cell */
.photoCaptionTd_topLeft {
  text-align: left;
  vertical-align: top;
  padding-top: 0px;
  padding-right: var(--photoCaptionPaddingLarge);
  padding-bottom: var(--photoCaptionPaddingMedium);
  padding-left: var(--photoCaptionPaddingSmall);
}

/* DEPRECATED. Use on td to place caption text in the top-right of the cell */
.photoCaptionTd_topRight {
  text-align: right;
  vertical-align: top;
  padding-top: 0px;
  padding-right: var(--photoCaptionPaddingSmall);
  padding-bottom: 4px; /* should be 0 but looks better with this */
  padding-left: var(--photoCaptionPaddingLarge);
}

/* DEPRECATED. Use on td to place caption text in the bottom-right of the cell */
.photoCaptionTd_bottomRight {
  text-align: right;
  vertical-align: bottom;
  padding-top: var(--photoCaptionPaddingMedium);
  padding-right: var(--photoCaptionPaddingSmall);
  padding-bottom: 4px; /* should be 0 but looks better with this */
  padding-left: var(--photoCaptionPaddingLarge);
}

/* DEPRECATED. Use on td to center caption text at top of cell */
.photoCaptionTd_topCenter {
    text-align: center;
    vertical-align: top;
    padding: 2px var(--photoCaptionPaddingMedium) 2px var(--photoCaptionPaddingMedium);
}

/* DEPRECATED. Use on td to center caption text at bottom of cell */
.photoCaptionTd_bottomCenter {
    text-align: center;
    vertical-align: bottom;
    padding: 2px var(--photoCaptionPaddingMedium) 2px var(--photoCaptionPaddingMedium);
}


/* TODO: normalize caption properties same way as tables. Deprecate old ones */
.photoCaption_left {
    text-align: left;
    padding-right: var(--photoCaptionPaddingLarge);
    padding-left: var(--photoCaptionPaddingSmall);
}

.photoCaption_hCenter {
  text-align: center;
  padding-right: var(--photoCaptionPaddingLarge);
  padding-left: var(--photoCaptionPaddingLarge);
}

.photoCaption_right {
  text-align: right;
  padding-right: var(--photoCaptionPaddingSmall);
  padding-left: var(--photoCaptionPaddingLarge);
}

.photoCaption_leftTight {
  text-align: left;
  padding-right: var(--photoCaptionPaddingMedium);
  padding-left: var(--photoCaptionPaddingSmall);
}

.photoCaption_hCenterTight {
text-align: center;
padding-right: var(--photoCaptionPaddingMedium);
padding-left: var(--photoCaptionPaddingMedium);
}

.photoCaption_rightTight {
text-align: right;
padding-right: var(--photoCaptionPaddingSmall);
padding-left: var(--photoCaptionPaddingMedium);
}

.photoCaption_top {
  vertical-align: top;
  padding-top: 0px;
  padding-bottom: var(--photoCaptionPaddingMedium);
}

.photoCaption_topTight {
  vertical-align: top;
  padding-top: 0px;
  padding-bottom: 0px;
}

.photoCaption_vCenter {
  vertical-align: middle;
  padding-top: 0px;
  padding-bottom: 0px;
}

.photoCaption_bottom {
  vertical-align: bottom;
  padding-top: var(--photoCaptionPaddingMedium);
  padding-bottom: 4px; /* should be 0 but looks better with this */
}

.photoCaption_bottomTight {
  vertical-align: bottom;
  padding-top: var(--photoCaptionPaddingMedium);
  padding-bottom: 0px; 
}

/******** Photo Banner layout ********
 Use a 1-row table of small images as a graphical element  
*/

/* use on table to format as a banner */
.photoBannerTable {
  width: 100%;
  padding-top: 24;
  border-style: solid;
  border-color: var(--photoBannerBgColor);
  border-bottom-width: 12px;
  border-top-width: 12px;
  border-left-width: 12px;
  border-right-width: 12px; 
  background-color: var(--photoBannerBgColor);
}

/* Use on img to force all the thumbnails to be the same height */
.photoBannerImage {
  height: 72px;
}

/* Use on td to position the images in the cells */
.photoBannerTd {
  text-align: center;
}

/* Sphere photo paragraph 
<p class="captionFont spherePhotoParagraph">
<img 
    src="images/douroVilaGale.Sphere.jpg"
    alt="A Sphere photo of ..." 
    width="100%" />
<br />
A Sphere photo of .... Click <a
    href="https://photos.app.goo.gl/Dt32rzkrAFMwUxkDA">here</a>
to see it in a Sphere viewer and move around in the space.
</p>
*/
.spherePhotoParagraph {
  clear: both;  
  text-align: center; 
  margin-left: 48px; 
  margin-right: 48px;
}


/******** Global html element settings ********/


/* 
PUT THIS ON body OF EVERY PAGE 
*/
.maxWidth {
	max-width:1400px;
}

body {
    background-color: var(--bgCol);
}

h1 {
  clear: both;
  color: var(--headlineColor);
  font: bold var(--fontSizeXL) var(--headlineFontFamily);
  padding-top: 12px;
}

h2 {
  clear: both;
  padding: 12px 0px 0px 0px;
  color: var(--headlineColor);
  font: bold italic var(--fontSizeLarge) var(--headlineFontFamily);
  border-top: solid 1px var(--photoBannerBgColor);
  border-bottom: double 4px var(--photoBannerBgColor);
}

h3 {
  clear: both;
  padding: 12px 0px 0px 0px;
  color: var(--headlineColor);
  font: bold var(--fontSizeLarge) var(--headlineFontFamily);
}

p {
  padding: 6px 0px 0px 0px;
  color: var(--textColor);
  font: var(--fontSizeText) var(--textFontFamily);
  line-height: 1.3;
}

ul {
  list-style-type: circle;
  color: var(--headlineColor);
  font: var(--fontSizeText) var(--textFontFamily);
  padding-bottom: 0px;
}

/* TODO: deprecate these and use navTableLink instead */
a.footerLink:link {
  color: var(--observationBgColor);
}

a.footerLink:visited {
  color: var(--bgCol);
}

a.navTableLink:link {
  color: var(--observationBgColor);
}

a.navTableLink:visited {
  color: var(--bgCol);
}