/******************************************************************************/
/* travel.css                                                                 */
/*                                                                            */
/* Date     Description                                          Name         */
/* -------- --------------------------------------------------   ------------ */
/* 20251016 Initial coding.                                      Rodney       */
/******************************************************************************/

/******************************************************************************/
/* Global Element Settings                                                    */
/******************************************************************************/
/* #region Global Elements Settings */
a
{
  color: blue;
}

h1
{
  font-family: Arial;
  padding-top: 20px;
}

h2
{
  font-family: Arial;
  padding-top: 20px;
}

h3
{
  font-family: Arial;
  padding-top: 20px;
}

p
{
  font-family: Verdana;
  padding-top: 20px; 
}

/******************************************************************************/
/* The table, th, td selector is used here to define a universal look and     */ 
/* for all tables.  Here, the border will be a single, solid like.            */
/******************************************************************************/
table, th, td 
{
  border: 1px solid black;
  /****************************************************************************/
  /* Setting the border-collapse property to the value collapse will prevent  */
  /* a double line border.  It will be a single line border.                  */
  /****************************************************************************/
  border-collapse: collapse;
}

th, td 
{
  padding: 10px;
}

thead th 
{
  background-color: #2c3e50; /* Required: prevents content from bleeding through */
  color: white;
}

table
{
  /****************************************************************************/
  /* Define the margins for the table, centering horizontally on the page.    */
  /****************************************************************************/
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 0px;
}

ol
{
  padding-left: 20px;
  padding-top: 10px;
}

ul
{
  padding-left: 20px;
}
/* #endregion */
/******************************************************************************/
/* Classes                                                                    */
/******************************************************************************/
/* #region Classes */
.clsImageWithCaptionContainer 
{
  display: inline-block;
  position: relative;                    /* Keeps the caption inside this box */
}
.clsImageWithCaptionContainer a
{
  color: white;
}
.clsImageWithCaptionContainer img 
{
  display: block;
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  padding-bottom: 20px;
}

.clsCaption4Lines
{
  color: white;       /* Text color */
  font-family: verdana;
  font-size: 70%;
  left: 10px;           /* Distance from the left */
  position: absolute;   /* Places text over the image */
  top: 75%;             /* Distance from the top */
}

.clsImageBanner
{
  /****************************************************************************/
  /* The display CSS property sets whether an element is treated as a block   */ 
  /* or inline box and the layout used for its children, such as flow layout, */ 
  /* grid or flex.  The default value for this property is block.             */
  /*                                                                          */
  /* Setting the display property to block ensures that the image is centered */
  /* horizontally within the parent <div>.                                    */
  /****************************************************************************/
  display:block;
  
  /****************************************************************************/
  /* The CSS margin properties are used to create space around elements,      */
  /* outside of any defined borders.                                          */
  /*                                                                          */
  /* The browser selects a suitable margin to use. For example, in certain    */ 
  /* cases this value can be used to center an element.                       */
  /****************************************************************************/
  margin: 0 auto;
  max-width: 100%;
  padding-bottom: 20px;
}

.clsImageContainer200px
{
  float: left;         /* Shifts image to the left side */
  margin: 20px 20px 0px 0px;
  width: 200px;
}

.clsImageContainer400px
{
  float: left;         /* Shifts image to the left side */
  margin: 20px 20px 0px 0px;
  width: 400px;
}

.clsImageCaption
{
  font-family: Verdana;
  font-size: 10px;
  text-align: center;
  width: inherit;
}

.clsDivRolodex
{
  float: right;         /* Shifts image to the right side */
  width: 300px;
  margin-top: 20px;
}

.clsFeeReceiptContainer
{
  float: right;         /* Shifts image to the right side */
  margin: 20px 0px 0px 20px;
  width: 200px;
}

.clsCoastGuardStampContainer
{
  float: right;                             /* Shifts image to the right side */
  margin: 20px 0px 0px 20px;
  width: 150px;
}
.clsImageWithinDiv
{
  max-width: 100%;                        /* Ensures responsiveness on mobile */
  width: inherit;
}
.clsTableItinerary
{
  float: left;
}
.clsTableExpenses
{
  float: left;
}
.clsTableItinerary td
{
  text-align: left;
}
/* #endregion */
/******************************************************************************/
/* IDs                                                                        */
/******************************************************************************/
/* #region IDs */
#idDivMainPage
{
  margin-left: 100px;
  margin-right: 100px;
}
#idMapsContainer
{
  float:left; 
  margin: 20px 10px 0px 0px;
  width: 400px; 
}
#idCoastGuardStationContainer
{
  float:left; 
  margin: 20px 10px 0px 0px;
  width: 200px; 
}
#idVIPRoomContainer
{
  float: left; 
  margin: 20px 10px 0px 0px;
  width: 200px; 
}
#idOrmocPierContainer
{
  float: left; 
  margin: 20px 10px 0px 0px;
  width: 400px; 
}
/* #endregion */