/* Sweers Island Resort */
@font-face {
  font-family: 'LatinModernSans10Regular';
  src: url('fonts/lmsans10-regular-webfont.eot');
  src: local('☺'), url('fonts/lmsans10-regular-webfont.woff') format('woff'), url('fonts/lmsans10-regular-webfont.ttf')
  format('truetype'), url('fonts/lmsans10-regular-webfont.svg#webfontN8lwBY19') format('svg');
  font-weight: normal;
  font-style: normal;
  }
@font-face {
  font-family: 'LatinModernSans10Bold';
  src: url('fonts/lmsans10-bold-webfont.eot');
  src: local('☺'), url('fonts/lmsans10-bold-webfont.woff') format('woff'), url('fonts/lmsans10-bold-webfont.ttf')
  format('truetype'), url('fonts/lmsans10-bold-webfont.svg#webfontNWekoGWb') format('svg');
  font-weight: normal;
  font-style: normal;
  }
  
 article, aside, dd, div, dl, dt, figcaption, figure, footer, h1, h2, h3, li, nav,  p, section, table, th, td, ul  {
  margin: 0;
  padding: 0;
  }
  
  
/* take this out til I get first figure working right
  figureright {
  display: block;
  float: right;
  margin: 0 0.5em 0.5em 1em;
  padding: 0;
  }*/

/* take this out til I get first figure working right
  center figure {
  display: block;
  float: none;
  margin: 1em 1em 1em 1em;
  padding: 0;
  } */

figcaption {
  display: block;
  font-style: italic;
  text-align: center;
  }
  

figure {
  float: right;
  margin: 1em 1em 1em 1em;
  text-align: center;
  position: relative;
  }

a {
  text-decoration: none;
  }
  
object {
  display: block;
  position: absolute;
  margin: 0 0.5em 0.5em 0.5em;
  padding: 0;
}
  
  
  /*deleted
  article.opener 
  position: absolute;
  width: 564px;
  display: block;
  left: 280px;
*/

/*deleted
  article li 
  margin: 0 0 1em 2em;
  list-style-type: disc;
*/

/*deleted
  article li:first-line 
  font-weight: bold;
*/

/*deleted
  aside 
  display: block;
  width: 250px;
  padding: 10px;
  position: relative;
  border-right: 10px solid #F15A24;
*/

body {
  font-family: verdana, arial, helvetica, sans-serif; 
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background: #d7d7d7;
  background: url("images/bgimg_large.jpg");
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  padding: 20px;
  }
  
  
  
  /* old polaroid but can't line them up they stack
.polaroid {
  width: 250px;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  background-color: white;
  box-shadow: 5px 5px 3px #aaaaaa;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft:  10px;
  -moz-border-radius-topright:  10px;
  -moz-border-radius-bottomright:  10px;
  -moz-border-radius-bottomleft:  10px;
  
}

/*


/*new polaroid maybe*/

img.polaroid {
  border: white;
  border-width:  6px 6px 20px 6px;
  box-shadow: 5px 5px 5px #aaaaaa;
  -webkit-box-shadow: 1px 1px 5px #3333;
  -moz-box-shadow: 1px 1px 5px #3333;
  height: 150px;
  width: 200px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft:  3px;
  -moz-border-radius-topright:  3px;
  -moz-border-radius-bottomright:  3px;
  -moz-border-radius-bottomleft:  3px;
}

.snapshot {
  position: relative;
  width: 300px;
}
img.snapshot {
  border: 10px solid #E4E4E4;
  border-width: 10px 10px 10px 10px solid #E4E4E4;
  box-shadow: 5px 5px 5px #aaaaaa;
  -webkit-box-shadow: 5px 5px 5px #5C5C5C;
  -moz-box-shadow: 5px 5px 5px #5C5C5C;
  box-shadow: 5px 5px 5px #5C5C5C;
}
  
/*deleted
  dd 
  font-style: italic;
  margin-left: 1em;
*/


/*deleted
  figure img 
  margin: 0;
  padding: 0;
  display: block;
*/  
 
 /* header {
  background: #2B59BE;
  text-align: center;
  line-height: 50px;
  margin: 0;
  padding: 2px;
  clear: both;
} */

footer, nav {
  display: block;
  }
  
footer {
  background: #FFB870;
  font-size: 0.75em;
  text-align: center;
  -webkit-border-bottom-right-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  -moz-border-radius-bottomleft: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  }
  
  /* this footericon  rule below will make the favicon appear as content within the footer*/
  
.footericon:before {
  content: url("images/logonav.png");
  }
footer p { 
  padding: 0.5em;
  }
form {
  background: #F0D799;
  padding-top: 20px;
  }
h1, h2, h3, {
  font-family: LatinModernSans10Bold, arial, helvetica, sans-serif;
  }
  
  /*deleted
  h1 img 
  display: block;
*/

h1 {
  font-size: 2em;
  text-align: center;
  }
  
h2 {
  margin-left: 12px;
  font-size: 1.5em;
  }
h3 {
  margin-left: 12px;
  font-size: 1.25em;
  }
  
h3:target {
  color: #3385FF;
  } 
  
h4 {
  margin-left: 12px;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #E6A665;
  font-weight: bold;
  font-style: normal;
  text-align: left;
  }
h4:target {
 text-decoration: none;
 color: #E6A665;
}
h4:target::before {
 content: url("images/icons/sphere_question_35.png"); 
}


nav {
  font-size: 1.25em; 
  }

p {
  margin: 0 12px 12px 12px;
  }
  
table {
  margin: 1em 0;
  border-collapse: collapse;
  }
td {
  padding: 0.25em;
  }
th {
  padding: 0.25em;
  background: #e0e0e0;
  }

ul {
  list-style-type: none;
  margin-left: 2em;
  border: 5em;
  padding: 1em;
}
  
#aircraftsize {
  font-style: italic;
  color: #FF7519
  }
#noteblue {
  color: #3385FF;
}
#box {
  width: 864px;
  margin: 0 auto;
  border: 3px solid #E6A665;
  background: white;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  }

/* not sure this one below works. See further down for class .centeredImage which works well.Hmm just noticed it was missing the {} but not sure if
I removed them - check this out later on.*/
#centerimage {
  display: block;
  align: center;
}

#centertext {
  text-align: center;
  }

/*contact form stuff
#contactinfo label {
  display: block;
  positon: relative;
  margin: 12px 0;
}
#contactinfo input {
  position: absolute;
  left: 100px;
}
#nameinput, #emailinput {
  /* 1. Change to 100 
  width: 30em;
}
input:focus, textarea:focus {
  background: #e3d5ba;
}
fieldset {  /*this is the background blue
  margin-bottom: 10px;
  position: relative;
  padding: 2.5em 1em 0.5em 1em;
  background: #D3DEEF;
}
fieldset fieldset {
  padding-top: 5px;
}
form {
  background: #6a91ca;  /*this is the 'border'
  padding: 4px;
  margin: 0 50px 10px 50px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
input, textarea {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-size: 1em;
}
legend span {
  position: absolute;
  left: 0;
  font-size: 1.25em;
  margin-top: 0.5em;
  margin-left: 0.5em;
}
#contactinfo, #reserveinfo, #additionalinfo, #submitbutton {
  border: none;
}
#submit {
  background: #e3d5ba;
  font-size: 1.25em;
}
#submitbutton {
    border: none;
    background: #6a91ca;
    padding: 0.5em 0 0 0;
    text-align: center;
}
end contact form stuff*/


/*deleted
  #jobtype label 
  display: block;
*/

  
#info {
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  background-color: yellow;
  }

/* delete this for now in favour of the INFO style rule above, as the below rule is more content than design,
  however same CONTENT type rule below could be used to add an icon later for example Ph, Fax, Email. For now, I need a hyperlink
  on the whole line of text so will stick with the INFO id selector.
  
.info:before {
  content: "IMPORTANT INFORMATION! PLEASE ENSURE YOU READ THIS BEFORE YOU TRAVEL!";
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  background-color: yellow;
}
*/

#logo img {
  display: block;
  position: relative;
  z-index: 5;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  }
#logobg img {
  position: absolute;
  right: 0;
  z-index: 4;
  }


/*deleted
 #note 
  text-align: center;
  font-style: italic;
  color: #006600
*/

/*deleted
  #notes {
  display: block;
*/

#skipnav {
  padding: 0.5em;
  position: absolute;
  right: 0;
  z-index: 6;
  }
  
#slideshow { 
  width: 416px; 
  height: 157px;
  position: absolute;
  right: 0;
  z-index: 4;
  }
#slideshow > div { 
  position: absolute; 
  top: 0px; 
  left: 0px; 
  right: 0px; 
  bottom: 0px;
  }
  
#submitbutton {
  border: none;
  text-align: center;
  margin-bottom: 0;
  }
  
  /*not sure what this next one does but looks important so will leave in for now*/
#tagline {
  font-family: LatinModernSans10Regular, arial, helvetica, sans-serif;
  font-size: 1.5em;
  text-align: center;
  }
  
#video {
  align: center;
}
#zipinput, #phoneinput {
  width: 12em;
  }
  
.airlines {
  font-weight: bold
  }
  
.centeredImage {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  }

.centertext {
  text-align: center;
}

/*deleted
  .day 
  font-weight: bold;
*/
  

/* leave out for now didnt work on fish id but might for gallery
.fish {
 float: left;
 width: 173px;
 height: 89px;
 margin: 0px;
}  */



.table {
  display: table;
  margin: 0 auto;
  }

.row {
  display: table-row;
  }
  
.row div {
  display: table-cell;
  padding: 2em 2em;
  }
  

  
/*no idea what this next one does but looks important will leave in for now*/
.taglinesub {
  font-family: LatinModernSans10Regular, arial, helvetica, sans-serif;
  font-size: 1.25em;
  text-align: center;
  padding: 10px;
  }
  
  
a:link {
  color: #0066FF;
  text-decoration: underline;
  }
a:visited {
  color: #3385FF;
  text-decoration: none;
  }
a:hover {
  text-decoration: none;
  color: #003399;
  }
a:active {
  color: #000066;
  text-decoration: underline;
  }
 
#mapnav {
  color: white;
  text-align: center;
  background: white;
  padding: 0.25em;
  }
#mapnav li {
  display: inline;
  list-style-type: none;
  padding: 0.4em;
  }
#mapnav a:link {
  color: #3385FF;
  }
#mapnav a:visited {
  color: #3385FF;
  }
#mapnav a:hover {
  text-decoration: underline;
  color: #3385FF;
  text-shadow: 1px 1px 2px #7B7B7B;  
  }
#mapnav a:active {
  color: #3385FF;
  }
  
/*  The FAQ faqnav Link Colours below mean that there is no 'activity' shown on hover or visit, thus it remains a heading only and visitors will
 *  hopefully only be guided to click on the Arrow up or back buttons, not on the Visited Anchor link*/

#faqnav a:visited {
  text-decoration: none;
  color: #E6A665;
}
#faqnav a:hover {
  text-decoration: none;
  color: #E6A665;
  }
#faqnav a:active {
  text-decoration: none;
  color: #E6A665;
}


#mainnav {
  color: #E6A665;
  text-align: center;
  background: white;
  padding: 0.25em;
  }
#mainnav li {
  display: inline;
  list-style-type: none;
  padding: 0.4em;
  }
#mainnav a:link {
  color: #3385FF;
  }
#mainnav a:visited {
  color: #3385FF;
  }
#mainnav a:hover {
  text-decoration: none;
  color: white;
  text-shadow: 1px 1px 2px #7B7B7B;
  }
#mainnav a:active {
  color: #3385FF;
  }