@import "normalize.css";

html { font-size: 100%; }
body { text-align : center; font : 1em/1.4 Arial, Helvetica, sans-serif; background: url(images/sky-0993.jpg) repeat-y; }

header { background-color: #FAEFD1; background: url(images/moreton-island-lighthouse.jpg) center; height: 225px; position : relative; }
nav  { font-weight: bold; }
nav ul { margin: 0 auto; padding: 170px 0 0; text-align: center; }
nav li { margin: 0.2em 0; padding: 0.2em 0; display:inline; }
nav a { margin: 0.2em 0; padding: 0.1em 0.1em; text-decoration: none; background-color: #80888E; color: #FAEFD1; }
nav a:hover { background: #FAEFD1; color: black; }
footer { margin: 0.5em 0 0; padding: 1em; background-color: #86A5C0; }
aside { background-color: Silver; }

a { text-decoration: none; font-weight: bold; }
a:link, a:visited { }
a:hover, a:active { color: #990000; }

button { margin: 0.5em; padding: 0.2em; background-color: #D0E3FF; color: Blue; font: bold 16px Sans-Serif; white-space: nowrap; cursor: pointer; text-align: center; }
button:hover  { background-color: White; }
button:active { background-color: #E6E6E6; }

h1, h2, h3, h4, h5, h6 { margin: 0.5em 0 0; color: Blue; line-height: 1.2em; }
h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; }

p { margin: 0.5em; padding: 0.5em; text-align: left; }
ul { margin: 0.5em 0.5em; padding: 0.5em 0.5em; text-align: left; list-style: disc outside; }
li { margin: 0.5em 1em; }
lh { font-weight: bold; font-size: larger; }
ul ul { padding: 0; }
ul ul li { list-style: none; }
img { margin: 0; padding: 0; border: 0; max-width: 100%; height: auto; }
figure { margin: 0.5em auto; padding: 0; text-align: center; }
figcaption { margin: 0; padding: 0; text-align: center; font: italic bold 0.9em/1.3 Arial, Helvetica, sans-serif; }
img { max-width: 98%; height: auto; }

table,td,th { border:1px solid #000; border-collapse:collapse; margin:0; padding:0; }
td,th { padding: .2em; vertical-align:top;  }
caption { text-align:left; font-size:140%;  letter-spacing:-1px; }
table { min-width : 500px; margin : 1em auto; padding : 0.5em; }
table th a:link {  }
table p {padding : 3px;	margin : 2px;}
table td a:link {  }
table th a:visited {  }
table td a:visited {  }
table a:hover { text-decoration: underline; }
table a:active {  }
thead th { background: #FAEFCC; color: black; }
thead td { text-align : center;  background : #FFFFF0; }
tbody td { background: #ecede7; color: Black;  }
tbody th { background: #d2d2d2; color: Black; text-align: right; font-weight: bold; }
tbody tr.odd td { background:#eee; }
tbody tr.odd th { background:#ccc; }
tfoot td { background: #FFFFF0; text-align: center; }
td { padding: 0.5em; text-align: left; }
td ul, td li { padding: 0; margin: 0; list-style: none; }

.container { margin: 0 auto; max-width: 60em; clear: both; }

.bold { font-weight : bold; }
.clear, .clearfix { clear:both; }
.centre { margin : 0.5em auto; }
.floatright { float:right; margin: 0 0 1em 1em; }
.floatleft { float:left; margin: 0 1em 1em 0; }
.nav-bar { font-weight: bold; bottom: 20px; position : absolute; }
.nav-bar a { text-decoration: none; color: #FAEFD1; padding: 0.5em;  background-color : #80888E;  }
.nav-bar a:hover { color: black; background: #FAEFD1; }
.nav-bar ul { margin: 0; padding : 0; }
.nav-bar li { display:inline; margin : 0; padding : 0; }
.price { color : Red; font-weight : bold; }
.right { float:right; margin: 0 0 1em 1em; }
.left { float:left; margin: 0 1em 1em 0; }
.spacer { height : 1em; }
.special { text-align:center; border: 2px outset #003333; background: #FFFFCC; color : #2F4F4F; padding : 0.5em; }
.txtleft { text-align:left; }
.txtcent { text-align:center; }
.txtjust { text-align: justify; }
.txtright { text-align:right; }

.box { border: thin solid #999999; background-color: White; }
.frame  { margin: 0.5em; padding: 0.25em 0.5em; border: 1px solid Black; }

.w10, .w20, .w30, .w40, .w50, .w60, .w70, .w80, .w90 { margin: 0.5em 0; padding: 0; }
.w10 { width: 10%; }
.w20 { width: 20%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }

.w08, .w17, .w25, .w33, .w42, .w50, .w58, .w67, .w75, .w83, .w92 { margin: 0.5em 0; padding: 0; }
.w08 { width: 8.33%; }
.w17 { width: 16.66%; }
.w25 { width: 25%; }
.w33 { width: 33%; }
.w42 { width: 41.66%; }
.w50 { width: 50%; }
.w58 { width: 58.33%; }
.w67 { width: 67%; }
.w75 { width: 75%; }
.w83 { width: 83.33%; }
.w92 { width: 91.66%; }

@media (max-width: 640px) { 
.w10, .w20, .w30, .w40, .w50, .w60, .w70, .w80, .w90 { margin: 0.5em 5%; padding: 0; width: 95%; float: none; }
.w08, .w17, .w25, .w33, .w42, .w50, .w58, .w67, .w75, .w83, .w92 { margin: 0.5em 0; padding: 0; width: 95%; float: none; }
nav ul { margin: 0 auto; padding: 150px 0 0; text-align: center; }
}