/* ©2025 dotguide.co.uk v31.003 Huddersfield.guide custom stylesheet  */

/* STYLES+huddersfield buttonpics+pictures>midtall (portrait up to 830px wide)>wide (all landscape)>small (all under 480px wide)>smallwide (landscape under 720px high)>tablet (portrait over 680 wide)*/


flyer {background-color: rgba(210, 230, 190, 0.7); color: black; border: 1px solid #334477;}
flyer#features { }  /* SITE SPECIFIC COLOUR */


/* BUTTON LINKS */

a#home, a#homepage, a#blank, a#cam, a#festive, a#prelaunch, a#webcam, a#intro, a#villages, a#maps, a#travel, a#visit, a#links, a#pictures, a#look, a#aboutus, a#rail, a#bus, a#road, a#air, a#castlehill, a#peakdistrict, a#marsdenmoor, a#mining, a#sculpture, a#oakwellhall, a#klr, a#standedge, a#sport {display: table-cell; color: white; background-color: rgba(0, 0, 0, 0.2); background-repeat: no-repeat; background-position: center 50px; left: 10px; height: 400px; border-width: 1px; border-color: #334477; border-style: solid; font-family: arial, helvetica, sans-serif; font-weight: bold; text-decoration: none; padding: 3px 10px 0px 10px; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; float: left;}

a#cam {width: 720px; border-radius: 20px 20px; padding: 0px 30px 0px 30px; }

/* Home button ------- new - site specific > background - display none at this res ---------------- */
a#home {display: none; position: fixed; z-index: 5; height: 120px; top: 10px; left: 62%; width: 100px; background-image: url('buttonpics/home.jpg'); background-position: center 30px;  background-size: cover; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;}
a#home:before {position : static; top: 10px; text-align: left; font-size: 1.6em; content:"Home";}
a#home:hover {background: chartreuse url('buttonpics/home.jpg') no-repeat center 30px; background-size: cover;  }

a#homepage {position: relative; height: 400px; top: 0px; left: 0px; background-image: url('buttonpics/home.jpg'); background-position: center 50px; background-size: auto; width: 156px; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;} 
a#homepage:before {display: block; position: static; top: 10px; text-align: left; font-size: 1.6em; content:"Home";}
a#homepage:after {display: block; position: relative; top: 260px; text-align: left; font-size: 1.2em; content: "Click here for the main menu";}
a#homepage:hover {background-image: url('buttonpics/home.jpg'); no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7); } 

/* blank button */
a#blank {;}
a#blank:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.5em; content:" ";}
a#blank:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: " ";}
a#blank:hover {;}
 
/* festive button */
a#festive {background-image: url('buttonpics/festive.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#festive:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.5em; content:"Season's Greetings";}
a#festive:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "from your new guide to Huddersfield";}
a#festive:hover {background-image: url('buttonpics/festive.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}


/* Intro button */
a#intro {background-image: url('320pics/castlehill4.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#intro:before {display: block; position: static; left: 6px; width: 156px; text-align: left; font-size: 1.5em; content:"Introduction";}
a#intro:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "An introduction to Huddersfield and its area";}
a#intro:hover {background-image: url('320pics/castlehill4.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* villages button */
a#villages {background-image: url('320pics/highburton2.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#villages:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.5em; content:"Villages";}
a#villages:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 110%; content: "100+ small towns, villages and hamlets in the Huddersfield area";}
a#villages:hover {background-image: url('320pics/highburton2.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}



a#visit:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Places of interest to visit in the area";}

a#webcam:after {content: "Our webcam on the Huddersfield weather";}

a#maps:after {content: "Our map of Huddersfield and local villages";}

a#rail:after {content: "Train services in and around Huddersfield";}

a#air:after {content: "Five airports within 90 minutes of Huddersfield";}

a#pictures:after {content: "Pictures of the Huddersfield area";}


/* look button */
a#look {background-image: url('buttonpics/look.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#look:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.5em; content:"Look back";}
a#look:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Remember bygone Huddersfield?";}
a#look:hover { background-image:url('buttonpics/look.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* About us button */
a#aboutus {background-image: url('buttonpics/aboutus.jpg'); background-color: rgba(0, 0, 0, 0.4); border-radius: 20px 20%; border-radius: 20px 20%; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black;}
a#aboutus:before {display: block; position: static; top: 10px; left: 10px; width: 156px; text-align: left; font-size: 1.5em; content:"About us";}
a#aboutus:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Details about Huddersfield. guide";}
a#aboutus:hover {background-image: url('buttonpics/aboutus.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}



/* castlehill button */
a#castlehill {background-image: url('320pics/castlehill9.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#castlehill:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Castle Hill";}
a#castlehill:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Magnificent views from the site of an iron age hill fort";}
a#castlehill:hover {background-image: url('320pics/castlehill9.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* peakdistrict button */
a#peakdistrict {background-image: url('320pics/peakdistrict19.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#peakdistrict:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Peak District";}
a#peakdistrict:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "The National Park on Huddersfield's doorstep";}
a#peakdistrict:hover {background-image: url('320pics/peakdistrict19.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* marsdenmoor button */
a#marsdenmoor {background-image: url('320pics/marsdenmoor3.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#marsdenmoor:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Marsden Moor";}
a#marsdenmoor:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "A beautiful moorland estate at the head of the Colne Valley";}
a#marsdenmoor:hover {background-image: url('320pics/marsdenmoor3.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* mining button */
a#mining {background-image: url('320pics/ncm2.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#mining:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Mining Museum";}
a#mining:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Explore below ground at the National Coal Mining Museum";}
a#mining:hover {background-image: url('320pics/ncm2.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* sculpture button */
a#sculpture {background-image: url('320pics/sculpture.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#sculpture:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Sculpture Park";}
a#sculpture:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Works of art in the vast Yorkshire Sculpture Park";}
a#sculpture:hover {background-image: url('320pics/sculpture.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* oakwellhall button */
a#oakwellhall {background-image: url('320pics/oakwellhall.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#oakwellhall:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Oakwell Hall";}
a#oakwellhall:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Historic house near a Civil War battlefield";}
a#oakwellhall:hover {background-image: url('320pics/oakwellhall.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* klr button */
a#klr {background-image: url('320pics/kirkleeslightrailway6.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#klr:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Light Railway";}
a#klr:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Whistlestop Valley operates from Clayton West";}
a#klr:hover {background-image: url('320pics/kirkleeslightrailway6.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* standedge button */
a#standedge {background-image: url('650pics/tunnelend14.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#standedge:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content:"Tunnel End";}
a#standedge:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Canal history alongside the Standedge Tunnels";}
a#standedge:hover {background-image: url('650pics/tunnelend14.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* sport button */
a#sport {background-image: url('320pics/stadium22.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#sport:before {display: block; position: static; left: 10px; width: 156px; text-align: left; font-size: 1.5em; content:"Sport";}
a#sport:after {display: block; position: relative; top: 260px; left: 10px; width: 156px; text-align: left; font-size: 1.2em; content: "Connect with Huddersfield's leading sports teams";}
a#sport:hover {background-image: url('320pics/stadium22.jpg') no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}

/* prelaunch button */
a#prelaunch {background-image: url('320pics/castlehill.jpg'); background-color: rgba(0, 0, 0, 0.4);}
a#prelaunch:before {display: block; position: static; top: 10px; left: 6px; width: 156px; text-align: left; font-size: 1.6em; content:"Welcome";}
a#prelaunch:after {display: block; position: relative; top: 260px; left: 6px; width: 156px; text-align: left; font-size: 1.2em; content: "Latest updates in your guide to Huddersfield, West Yorkshire";}
a#prelaunch:hover {background-image: url('320pics/castlehill.jpg'); no-repeat center 50px; background-color: rgba(127, 255, 0, 0.7);}


/* CUSTOM SECTIONS */

town, railtpe, giants, festive {position:relative; display:inline-block; width: 96%; height: auto; margin: 0px 0px 20px 0px;  padding: 8px 20px 12px 10px; border-radius: 12px; }

town {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid blue; }

railtpe {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid steelblue; }

giants {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid darkorange; }

festive {background-color: rgba(255, 255, 255, 0.6); color: black; border: 1px solid red;}

town h2, railtpe h2, giants h2, festive h2 {display: block; width: 98%; display: block; position: relative; top: -16px; background-image: none; background: rgba(50, 50, 90, .5);  color: white; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em;  vertical-align: baseline; padding: 0px 6px 6px 8px; border-radius: 6px; z-index: 1;}

town h2 {color: white; background: blue; background-image: url('graphics/town-head.png'); background-size: cover; width: 98%;}
railtpe h2 {color: white; background: steelblue; background-image: url(graphics/tpe-head.png); background-size: cover; background-position: 0% center; width: 98%;}
giants h2 {color: white; background: maroon; background-image: url('graphics/giants-head.png'); background-size: cover; background-position: bottom; width: 98%;}
festive h2 {background-image: url('graphics/holly-head.png'); background-size: cover;  color: white; width: 98%; }

town h3, railtpe h3, giants h3, festive h3 {display: block; width: 98%; background-image: none; background: white;  color: darkgray; position: relative; top: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; vertical-align: baseline; padding: 0px 6px 6px 8px; border-radius: 6px; z-index: 1;}

town h4, railtpe h3, giants h3, festive h3 {display: block; background: steelblue;  color: white; font-family: Arial, Helvetica, sans-serif; font-size: 20pt; width: 98%; padding: 1px 0px 1px 8px; vertical-align: middle; z-index: 2;}

town em, railtpe em, giants em, festive em {opacity: 0.7; color: black; font-style: normal}

town a, railtpe a, giants a, festive a {color: darkblue; background-color: rgba(230, 230, 255, 0.6);}

town a.button, railtpe a.button, giants a.button, festive a.button {display: inline-table; background-image: none; color: darkblue; background-color: rgba(210, 210, 255, 0.7); font-size: 1.6em; padding: 8px 10px 8px 6px; margin: 0px 4px 15px 0px; border: solid 1px darkblue; text-decoration: none; height: 30px; min-width: 360px; border-radius: 4px; box-shadow: 5px 5px 5px black; -webkit-box-shadow: 5px 5px 5px black; }