* {margin:0; font-family:"Cairo", "Arial";}
body {margin:0; overflow-x:hidden;}
header { margin:0; background-color:#ededed;padding-top:20px;padding-bottom:10px;}
header h1 { font-size: 40px; font-weight:700;color:black; }
header p { font-size:20px; font-weight: 500;}
main { margin-top: 20px; }
footer {
  height:auto;
  padding-top:20px;
  padding-bottom:20px;
  color: white;
  background-color: grey;
  bottom:0px;
  position: relative;
  margin:0;
  overflow: hidden;
  display:block;
  clear:both;
}
.bold { font-weight: 700; }
.pretext { margin-bottom:10px; }
.home-content {margin-top:20px;padding-bottom:20px;}
#home2, #home4 {padding-top:20px;color:white}
#home1 {color:black; background-color: white;}
#home2 {background-color:#738adb;}
#home4 {background-color:#44464d;}
#home4 p { display:inline; }
.home2-item, #account .column {   width: 33.33%; }
.details .column {width: 25%;}
.home2-item {
  padding:5px;
}


/* User agent stylesheet overrides for autofill:
When a user autofills details from their browser, the user agent stylesheet changes the background colour of the input element to a light blue colour,
which is very similar to my input:focus colour - this is undesireable so I've changed the autofill colour to a light yellow so they can be distinguished. */
/* from https://stackoverflow.com/a/13860010/11555501 */
/*  In a very unsurprising twist, testing has revealed that every browser has its own selectors for the user agent stylesheet, so rules must be applied to all of them.
It's worth noting that Apple's Safari already defaults to a yellow colour so this does not need to be changed. The iOS chrome app, unlike its desktop counterpart
does not have a default colour and just uses white, so this also doesn't need to be changed. */

/* This affects the Chrome browser */
input:-webkit-autofill {
  -webkit-box-shadow:0 0 0 50px #fffdf5 inset;
  box-shadow: 0 0 0 50px #fffdf5 inset;
  -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px rgba(121, 215, 238, 0.1) inset;
  box-shadow: 0 0 0 50px rgba(121, 215, 238, 0.1) inset;
} 

/* This affects Edge: */
input:-internal-autofill-selected {
  background-color: #fffdf5 !important;
}


.error {color: #e5424d}
#detail-btn, .paybtn, #question1, #question2, #question3, #home4 button, .offer a button, #go, input[type=submit], #togglebutton, #cancel-submit, .homescreen #book-widget #submit, .redbtn, .bluebtn, .orangebtn {
  color:white;
  border: none;
  cursor: pointer;
  outline:none;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type=submit], #cancel-submit, input[type=date],.homescreen #book-widget #submit, .redbtn, .bluebtn, .orangebtn  {
  border-radius: 5px;
}
#togglebutton {background-color: #1e832f; padding:5px;margin-bottom:20px; border-radius:3px;margin-top:20px;margin-right:20px;display:none;float:right;}
#togglebutton:hover { background-color: #165e22;}

svg {
  margin-right:2px;
  height: 1em;
  width: 1em;
}
#right, .nav-right { float:right; }

td, th {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
}
table {
  border-collapse: collapse;
}


/* form stuff: */
input[type=email], input[type=password], input[type=text] { padding:7px; outline:none; border:rgba(84, 82, 94, 0.466) 0.5px solid; border-radius: 5px;width:450px;padding-left:10px;margin-top:10px;font-size:18px;}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus {background-color:rgba(121, 215, 238, 0.1);}
#inputs-wrapper-half-size, #smallform { width:450px;padding-bottom:10px; }
#firstName, #lastName {width:222.5px;}
#lastName {float:right;margin-left:2.5px;}
#firstName{float:left;margin-right:2.5px;}
#details #forename, #details #surname, #details #passport { width:225px; margin-right:5px;}
#register, #recover, #resetPasswordSubmit {
  background-color: #1b5f1d;
  padding:20px;
  padding-left:30px;
  padding-right:30px;
}
.orangebtn, #login, .bluebtn, .redbtn {    
  padding:5px;
  padding-left:20px;
  padding-right:20px;
}
.paybtn {
  background:#22b877;
  border-radius:10px;
  width:100%;
  height:42px;
}
.paybtn:hover {
  background:#22a877;
    color:#eee;
}
#login, .bluebtn { background-color: #294092; }
.orangebtn { background-color: rgb(204, 132, 24) ; }
.orangebtn:hover {background-color: rgb(182, 109, 25);}
#register:hover, #recover:hover, #resetPasswordSubmit:hover {background-color: #0a290b;}
#resetPasswordSubmit, #register, #login {margin-top:10px;margin-bottom:5px;}
#resetPasswordSubmit {margin-bottom:20px;}
#login:hover, .bluebtn:hover {background-color: #0c1e5e;}
#errorBox, #successBox { color: black;padding:4px;margin-top: 10px;margin-bottom:15px; display:block;clear:both;}
#errorBox {  background-color: #ffa29c; border-radius:5px; }
#errorBox p { margin:2px;}
#successBox { background-color: #a5ff9e; border-radius:5px; }
.successtext { color: #18a13d; }
#main-pay { display:inline;float:left;}
.left, .right { width: 45%; }
.left { float:left; margin-right:1%; }
.right { float:right; margin-left:1%; }
#sideinfo {margin-bottom:20px;}
#detail-btn {
  background-color: #4CAF50;
  padding: 28px;
  margin: 10px 0;
  width: 300px;
  float:left;
  border-radius: 3px;
  display: inline;
}
#detail-btn:hover {background-color:#38803b}
#go {float: right; display:none; background-color:#4463d4;border-radius:5px;margin:10px;}
#go:hover {background-color: #223a92;}
#details {display:none;}
a { text-decoration:none; color:red }
a:hover { color:#992525}
header h1 a:hover, header h1 a {color:black;}
header h1 a:hover {cursor:pointer;}
/* recover.php */
#cancel-submit a {color:white;}
#recover {float:right;}
#cancel-submit{float:left;}
#recover, #cancel-submit {display:inline;}
#cancel-submit, .redbtn {
  background-color: #771111;
}
#cancel-submit:hover, .redbtn:hover {background-color: #4b0a0a;}
#cancel-submit {
  padding:20px;
  padding-left:30px;
  padding-right:30px;
}
/* end of recover.php */
nav { margin-top:0;}

@media screen and (min-width:800px) {
  main, footer, header h1, header p, #home2 h2, #home4 { padding-left:10%; padding-right:10%;}
  #home2 .row {padding-left:20%;padding-right:20%;}
  /* -20px rule is needed to counter the 20px rule defined for the <main> element. */
  .homescreen { background-image: url("https://fly.dshields.uk/media/images/background.jpg");padding-left:0%; padding-right:0%;height:650px;margin-top:-20px;padding:0px;width:100%;  }
  
        /* this rule is here to allow usage of the static command */
        .homescreen {
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-position: bottom;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            background-size: cover;
            -o-background-size: cover;
        }
      
.homescreen #book-widget {
    background-color:white;width:20%;float:left;margin-top:6%;margin-left:17%;padding:2%;border-radius: 5px;min-width: 300px;
  }
  .homescreen .offer { float:right;display:inline;color:white;padding-top:11%;padding-right:22%; }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    padding-left:10%; padding-right:10%;
  }
  
  nav ul li {
    float: left;
  }
  
  nav ul li a {
    display: block;
    color: #ededed;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  nav ul li a:hover {
    background-color: #111;
    cursor:pointer;
    color: #fff;
  }

  /* The right aligned 'Continue' button works well on smaller screens, but right aligned on wide screens might be confusing for some users. */
  #go { float:left; }
  nav ul li a:hover { border-bottom: 4px solid #e6dfe0 } /* :active doesn't work */
  #sideinfo { float:right; max-width:350px; }
  /* smaller than sideinfo, leaving 50px gap. */
  #main-pay { max-width: calc(100% - 400px); float:left; } 
  .homescreen #book-widget #submit {height:6%;}
}

.homescreen #book-widget input[type=date] { width: 66%; margin-left:1%;border: 1px solid rgb(177, 171, 171); }
.homescreen #book-widget #submit {background-color:rgb(37, 83, 182); font-weight:700; width:98%;  }
.homescreen #book-widget #submit:hover { background-color:rgb(27, 63, 143);}
.homescreen #book-widget h3 {text-align:center;}

/* On most monitors, the flight information widget will not display properly if
they are all squeezed into the same row - they are quite wide ( 4 * 310 px minimum ) 
in addition to space needed between each table for neatness is a large width.
Therefore, this style rule is applied so that wide monitors can have them inline
- the optimum setting but other monitors will have them displayed on two lines in a grid. */
@media screen and (max-width: 1800px) {
  .details .column { width: 50%; }
}


@media screen and (max-width:970px) {
  /* if screen is too small to fit in the 10% padding on the nav bar, reduce the padding */
  nav ul { padding-right:2%; padding-left:2%;}
    /* Change forms on account.php to display on top of each other. */
    #account .column, .details .column {width:100%;display:block;clear:both;margin-bottom:50px;}
  
}

@media screen and (max-width: 800px) {
  nav ul {
    list-style-type: none;
    width: 100%;
    background-color: #f1f1f1;
    display:none;
  }
  nav #togglebutton {display:block;}
  #sideinfo { float: left;margin-top:30px; }
  nav ul li a {
    display: block;
    color: #ededed;
    padding: 8px 16px;
    background-color: #333;
    text-decoration: none;
  }
  .nav-right {width:50%;}
  
  nav ul li a:hover {
    background-color: #666;
    color: white;
    cursor:pointer;
  }
  main, footer, header h1, header p, #home2 h2, #home4, #home2 .row, #book-widget{ padding-left:2%; padding-right:2%;}  
  #home4 button {
    margin-right:2%;
  }
  .homescreen {background-color:white;height:auto;}
  .homescreen .offer {display:none;} /* Don't display the offer is screen is small. */
  #book-widget { padding-bottom:20px;padding-top:10px; }
  .homescreen #book-widget #submit { height:auto; }

}


.active, .active:hover { border-bottom: 4px solid lightgrey } /* :active doesn't work so this is the workaround. */

.questions, .questionpanel{ padding:10px;border-radius: 5px;display:block;}
.questionpanel { background-color: #e8e8e8; display:none;}
.questions {
  background-color: #738adb;
  width:100%;
  text-align:left;
  margin-top:10px;
}
.questions:hover { background-color: #4463d4;}
.questions svg {float:right;display:inline;padding-top:0.5em;}

.offer a button { float:left; margin-top:10px;}
#home4 button:hover, .offer a button:hover {  background-color:#32962b }
#home4 button, .offer a button {
  float:right;
  display:inline;
  padding:4px;
  background-color:#3fa338;
  font-weight:700;
  text-align:center;
  border-radius:4px;
}



#home1 .column {
  float: left;
  width: 24%;
  padding:0.25%;
  position:relative;
}
#home1 .row .column img {
  width: 100%;
  height:auto;
  border-radius:5px;
  display:block;
}

#home1 .row::after, #home2 .row::after {
  content: "";
  clear: both;
  display: table;
}

/* show city name when hovered over */

#home1 .city-name {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width:98%;
  height:98%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 0.25%;
  padding-top:25%;
  text-align: center;
  border-radius:5px;
}

#home1 .column:hover .city-name {
  opacity: 1;
}
#home1 *, #home2 * { box-sizing: border-box}


hr { clear:both; }

/* CSS for About Shields Airlines section */

.home2-item, #account .column, .details .column {
  float: left;
  height:auto;
}

#home2 p {
  text-align: center;
}
.home2-item img {
  width:33.33%;
  justify-content: center;
  margin:auto;
  display:table-cell;
}
#account .column, .details .column {margin-bottom:50px;min-width:300px; }
.details .column table {max-width:90%;}
#loading-gif {display:none;width:300px;height:auto;margin-top:0;padding-top:0;}

.details p {clear:both;}

#home2 .row, #account, .details {padding-top:10px; display:block;}


/* Destinations: */
.destination { margin-top:20px;}
.destination .image, .destination  .text {float:left;position:relative;}
.destination .text {
	width:59%;
	background-color:white;
	
	
}
.destination .image {
	width:39%;
	padding-top:40px;
        max-width: 500px;
}

.destination .left-pad {
	padding-left:1%;
}
.destination .right-pad {
	padding-right:1%;
}
.destination .image  img{ width: 100%;
  height:auto;
  border-radius:5px;
  display:block;
  }
  
.destination::after {
  content: "";
  clear: both;
  display: table;
}

.destination-hr {margin-top:30px;margin-bottom:30px;}

/* completed.php: */
#pretext {margin-bottom:5px;}
#result { background-color:#a1f3a8;font-weight:900;padding:30px;text-align:center; }
#info {margin-bottom:50px;}
@media only print {
   nav, #info, footer, #printbutton { display: none; }
   .sideinfo { float:left; }
   body, * { background-color: white; color:black; }
   #code { display:inline;float:right; }
  .details .column {width:100%;}
}


/*  If screen size is extremely small, do not display the destination images and increase size of "About Shields Airlines" images. */
@media screen and (max-width: 500px) {
  #home1 .row {
    display:none;
  }
  .home2-item {
    width: 100%;
  }
  #showformbtn {clear:both;margin-bottom:30px;}
  input[type=text], input[type=password], input[type=email], #register, #login, .greenbtn, .bluebtn, .redbtn, #resetPasswordSubmit, .orangebtn, #detail-btn, #smallform, #details #forename, #details #surname, #details #passport { width: 100%; }
  #inputs-wrapper-half-size, #account .column, .details .column  { width:100%;padding-bottom:10px; }
  .details .column table tbody {max-width:100%;}
  #firstName, #lastName {width:49%;margin:0;}
  #details #forename, #details #surname, #details #passport { margin-right:0;}
}

@media screen and (max-width: 600px) {
  /* Remove some details from the book.php page to stop it overflowing on small screens. */
   .unnecessary { display: none; }
   .destination .image, .destination .text {width:100%;max-width:100%;}
}