/* Basic text and pseudo classes */
a { text-decoration: none; }
a:link { color:#0A0A5D; }
a:visited {color:#0A0A5D; }
#address > a:hover { color: #161dd9; }
em { text-decoration: underline; }
.dark {  font-weight: bold;  font-size: 2em;  }
.def { text-decoration: underline; text-shadow: 0px 0px 13px gold; }

#header {
/* 	display: flex;
	flex-direction:column;
	justify-content: center; */
	background-repeat: no-repeat;
	background-image: url(../art/flag_logo.PNG);
	height:238px;
	margin:10px;
	top:0px;
	left:0px;
	padding-left: 20px;
}
#welcome {
	left: 120px;
	position: relative;
	width: 46em;
	height: 78px;
	/* background-image: url(../art/banner1.gif); */
	background-repeat: no-repeat;
	content: "Welcome to Island Marine Fuel";
	font-family: fantasy;
	font-size: 3em;
	font-weight: normal;
}
#msite {
	padding: 2px;
	text-shadow: 1px 1px #c2cfea;
	border-style: dotted;
	border-width: 1px;
	font-size: 12px;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	position: absolute;
	top: 170px;
	left: 25px;
}
body {
background-repeat: repeat-y;
background-image:url('../art/bgpic.png');
margin: 1em;
}
#codes {
	border-width: 1px;
	border-style: solid;
	border-color: black;
}
#main {
margin: 0px 0px 10px 250px;
max-width:929px;
}
#sidebar_l {
margin:10px;
padding:10px;
top: 210px;
left: 1px;
width:275px;
position: absolute;
}
#links {
	margin-left: -15px;
	margin-right: 2px;
	border-style: inset;
	border-width: 1px;
	max-width: 212px;
	background-image: url(../art/white_71.png);
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 12px;
	top: 10px;
	left: 0px;
}
.link {
	padding-left: 10px;
}
.link:hover {
    background-color: #ccccff;
    position:relative; 
    z-index:100;
}
.link li:hover > a {
    background-color:#655;
    color: #01f4ff;
}
.block {
	background-color:white;
	color:#030455;
	font-family:sans-serif;
	/* font-size:14px; */
	font-weight:bold;
	text-align:left;
	text-decoration:none;
}
.blockCtr {
	color:#030455;
	font-family:sans-serif;
	font-weight:bold;
	text-align:center;
	margin: 10px 0px 10px 0px;
}
.block_lg {
	color:#030455;
	font-family:sans-serif;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	margin-top: 14px;
}

.sans { font-family: sans-serif; font-size: smaller; }

#fb { font-family: sans-serif; color: blue; font-weight: bold; }

#hours_div {
	margin-left:76px;
}
#hours_data {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-left: 50px;
}
.break {
	flex-basis: 100%;
	height: 0;
  }
#flexhourshdr {
	font-family:sans-serif;
	font-size:2em;
	text-decoration:underline;
	font-weight: bold;
}
#hoursfbox {
	display: flex;
	border:gray solid thin;
	padding:1px;
	max-width: 1001px;
}
.flexhours {
	border: #040245 solid 1px;
	text-align: center;
	padding-inline-start: 5px;
	padding-inline-end: 5px;
	padding-top: 3px;
	margin-right: 2px;
	background-color: #d5e1f1;
	flex-grow: 1;
	font-family: sans-serif;
}
#hours_table {
	font-size: medium;
	border-width: thin;
	border-style: solid;
	width: 1000px;
}
#hours_table caption {
	font-family:sans-serif;
	font-size:2em;
	font-variant:small-caps;
	font-weight:bold;
	text-align: center;
	text-decoration:underline;
}
.hour_data {
	background-color: #d5e1f1;
	border-style: solid;
	border-width: thin;
	font-family:sans-serif;
	padding-top: 5px;
	text-align:center;
	vertical-align: top;
}
.current {
	border-width: medium;
	font-size: larger;
	font-weight: bolder;
	margin-right: .5px;
}
.dates {
	font-size: small;
}
.big {
	color:#040245;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size:1.5em;
	line-height:18pt;
	padding:2px 4px 2px 8px;
	text-align:left;
}
.medium {
	color:#040245;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size:0.9em;
	line-height:18pt;
	padding:2px 4px 2px 8px;
	text-align:left;
}
.small {
	color:#040245;
	font-family:Georgia,"Times New Roman",Times,serif;
	font-size:0.9em;
}
.season {
	font-weight:bold;
}
#bulletPoints {
	padding-right: 5px;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-style: italic;
	font-size: large;
	margin-bottom: 5px;
	margin-left: -25px;
	border-width: thin;
	border-color: #5277ff;
	border-style: inset;
	border-radius: 10px;
	color: #042f5d;
	background: url(../art/white_71.png);
	line-height:1em;
	max-width: 609px;
}
#bulletPoints li {
	margin-bottom:0.5em;
}
#bulletPoints li:nth-child(even) {
	background-color: #e6eaf3;
}
#search {
	margin-top: -60px;
}
#award {
	text-align: left;
	left: 862px;
	top: 264px;
	position: absolute;
	border: navy groove thin;
	border-radius: 6px;
	width: 400px;
	background: white;
}
#awardpic {
	width: 400px;
}
.awardText {
	text-align: center;
	color: navy;
	font-family: sans-serif;
	font-size: 20px;
	font-weight: bold;
	height: 27px;
	margin-top: 0;
}
#blurb {
	padding: 0 1.2em 0em 1em;
	text-align: left;
	left: 950px;
	top: 626px;
	position: absolute;
	border: navy groove thin;
	border-radius: 6px;
	width: fit-content;
	/* width: 337px; */
	background: white;
}
.blrb {
	text-align: left;
	color: #00003f;
	font-size: larger;
	font-family: sans-serif, helvetica;
	font-weight:bold;
}
.blrb_head {
	text-decoration: underline;
	font-size: larger;
	text-align: center;
}
#ads{
	position: absolute;
	left: 885px;
	top: 720px;
	border: navy groove thin;
}
#vtlogo {
	margin-bottom:20px;
	margin-left:16px;
	margin-top:20px;
	display: flow-root;
}
#vtlogo img {
	width:100px;
}
#vtlogo_table {
	background-color: white;
	border: groove silver;
	width: 150px;
}
#tides {
	border: 2px ridge silver;
	margin: 20px 40px;
	width: 500px;
	background-color: white;
}
#weather {
	border:2px ridge silver;
	height:290px;
	margin: 20px 40px;
	width:500px;
}
#wx_module_9208 {
	border-style:ridge;
	border-width:2px;
	margin-left:20px;
}
#biocide {
	margin-bottom:20px;
	margin-left:15px;
}
.bio {
	border: gray ridge;
	height: 180px;
	width: 144px;
}
#address {
	background-color:#FFF5F5;
	border:2px ridge;
	color:#0E0C3D;
	font-family:Georgia,"Times New Roman",Times,serif;
	margin-left:200px;
	text-align:inherit;
	width: 550px;
}
#maphead {
	margin-bottom:0px;
	margin-left:42px;
	width:603px;
	background-color: white;
}
#imf_canvas {  /*  This is for the Google map div */
	border:medium ridge #AFA6A8;
	font-family:Helvetica,Verdana,Arial,sans-serif;
	height:400px;
	margin-left:40px;
	margin-top:0;
	padding-top:0;
	width:600px;
}
#moon_weather_table {
	margin-bottom:20px;
	margin-left:40px;
	margin-top:20px;
}
#moon_inner {
	border:1px solid #B5B5B5;
	padding:6px 16px;
}
.moon_style {
	width:223px;
}
#recycle_logo {
	background-color:white;
	width:9em;
	height:13em;
	border: thin silver ridge;
}
#recycle_table {
	background-color:white;
	border-style:groove;
	margin-left: 15px;
	width: 180px;
}
.recl_sm {
	color:#030455;
	font-family:sans-serif;
	font-size:14px;
	font-weight:bold;
	text-align:left;
	text-decoration:none;
}
#footer {
	margin:30px 0px 10px 10px;
	text-align:center;
}
#legal {
	margin:2em 0em 0.5em 0em;
	text-align:center;
	width:100%;
}
#copyright {
	background-color: white;
	font-style:italic;
	width: auto;
	text-align: left;
	overflow-wrap: normal;
	margin-top: 2em;
	z-index: 1000;
}
#badges {
	clear: both;
	margin: 10px;
}
#qr_code {
	margin: 50px 0 0 41px;
	font-size: 12px;
	background-color: white;
	width: 200px;
}
.qr_code {
	width: 200px;
}
#google_translate_element {
	display: flex;
	flex-direction: row-reverse;
}
#gsearch {
	margin-top: 10px;
	margin-left: 20px;
}
/* --- Media Queries --- */

 /* Large Desktops (max-width: 1200px) - Minor adjustments if needed */
 @media (max-width: 1200px) {
    #award, #blurb, #ads {
        position: static; /* Stack them in the main flow */
        width: fit-content;
        margin: 15px auto;
        left: auto;
        top: auto;
    }
    #main {
        margin-left: 285px; /* Adjust if sidebar width changes */
    }
 }

 /* Smaller Desktops / Large Tablets (max-width: 1024px) */
 @media (max-width: 1024px) {
    body {
        font-size: 15px;
    }
    #header {
        padding-left: 10px;
        /* height: auto; Allow height to adjust */
        background-size: contain; /* Ensure logo fits if it's a background image */
    }
    #welcome {
        position: static; /* Remove absolute positioning */
        width: 100vw;
        font-size: 45px;
        text-align: center;
        height: auto;
        margin-bottom: 10px;
    }
    #msite {
        position: static;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    #sidebar_l {
        position: static;
        width: 100%;
        margin: 10px 0;
        padding: 10px;
        top: auto; left: auto; /* Reset absolute positioning */
    }
    #main {
        margin: 0;
        width: 100%;
        padding: 10px;
    }
    #links { /* Sidebar navigation */
        max-width: 100%;
        margin: 0 0 15px 0;
    }
    #vtlogo, #biocide, #recycle_table {
        /* margin-left: 0; Center or align left as needed */
        margin-right: 0;
        /* text-align: center; Center contents */
    }
    #vtlogo img, .bio, #recycle_logo {
        margin-left: auto;
        margin-right: auto;
    }
    #hours_data {
        padding-left: 0; /* Remove padding */
        justify-content: space-around;
    }
    #hours_table, #tides, #weather, #imf_canvas, #address, #maphead {
        width: 100% !important; /* Force full width */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #award, #blurb, #ads { /* Already static from 1200px, ensure full width */
        width: fit-content;
    }
    #bulletPoints {
        margin-left: 0;
        max-width: 100%;
    }
 }

 /* Tablets Portrait & Phones Landscape (max-width: 768px) */
 /* This replaces and integrates the previous (max-width: 768px) query */
 @media (max-width: 768px) {
    body {
        font-size: 14px;
        margin: 0.5em;
    }
    #header, #main, #sidebar_l, #footer { /* Ensure full width and reset margins/padding */
        width: 100% !important; /* Important to override inline styles if any */
        margin: 0;
        padding: 10px;
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
    #header {
        height: auto;
        padding: 10px; /* Uniform padding */
        background-image: none; /* Optionally hide background for very small screens or provide smaller one */
    }
    #welcome {
        font-size: 35px; /* Further reduce font size */
    }
    #msite {
        font-size: 11px;
    }
    #bulletPoints, #award, #blurb {
        width: fit-content; /* Ensure full width */
        margin-bottom: 15px;
        position: static; /* Ensure they are not absolutely positioned */
        left: auto; top: auto;
    }
    #awardpic { /* Ensure award picture scales */
        max-width: 100%;
    }
    #hours_data {
        flex-direction: column; /* Stack flex items */
        align-items: center;
    }
    .flexhours {
        width: 90%; /* Make hour boxes wider */
        margin-bottom: 5px;
    }
    #hours_table {
        font-size: 0.9em; /* Adjust table font size */
    }
    #tides, #weather, #wx_module_9208, #imf_canvas, #address, #maphead {
        margin: 10px 0; /* Adjust margins for stacked items */
    }
    #google_translate_element {
        justify-content: center; /* Center translate element */
    }
    #gsearch {
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 80%;
    }
    #footer {
        padding: 15px;
    }
	#copyright {
		z-index: 1000;
		margin-top: 2em;
	}
	#legal {
		font-size: 0.8em; /* Smaller legal text */
	}
	#qr_code {
		width: 100%; /* Make QR code full width */
		text-align: center;
	}
	.qr_code {
		width: 100px; /* Adjust QR code size for smaller screens */
	}
 }

 /* Phones Landscape (max-width: 576px) */
 @media (max-width: 576px) {
    #welcome {
        font-size: 30px;
    }
    .block_lg { /* Adjust large block text */
        font-size: 18px;
    }
    #hours_table caption {
        font-size: 1.5em;
    }
    .big { /* Adjust .big text */
        font-size: 1.2em;
    }
    #bulletPoints {
        font-size: medium; /* Adjust bullet point font size */
    }
    .blrb { /* Blurb text */
        font-size: medium;
    }
    .awardText {
        font-size: 18px;
    }
 }

 /* Phones Portrait (max-width: 480px) */
 @media (max-width: 480px) {
    body {
        font-size: 13px; /* Reduce base font for very small screens */
    }
    #welcome {
        font-size: 25px; /* Smallest welcome text */
    }
    #msite {
        font-size: 10px;
    }
    #header {
        padding: 5px;
    }
    #main, #sidebar_l, #footer {
        padding: 5px;
    }
    #hours_table caption {
        font-size: 1.3em;
    }
    .current { /* Current hour data */
        font-size: medium; /* Make it less overpowering */
    }
    .dark { /* .dark class text */
        font-size: 1.5em;
    }
    #flexhourshdr {
        font-size: 1.5em;
    }
 }

/*
+--------------------------------------+
|  __,  __   __        (c) 2025        |
| /  ` /__` /__`       by: Thomas Beek |
| \__, .__/ .__/                       |
+--------------------------------------+
*/