body { background-color: #fff8dc; font-size: 100%; margin-left: 1%; margin-right: 1%; min-width: 180px; scrollbar-base-color: #050939; scrollbar-arrow-color: #000000; scrollbar-shadow-color: #333333;} #outerall { width: 100%; height: auto; background-color: MediumSeaGreen; margin-left: auto; margin-right: auto; } #outerinner { width: 100%; height: auto; background-color: #fff8dc; border: solid 0px black; overflow: auto; } /* JUST replaced overflow: auto; from outerinner ############ TRY TO GET RID OF PADDING IN THIS BISQUE AREA TO GET RID OF BISQUE COLOUR STRIP ON MOBILE ################# SUGGESTED BY http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/ */ #header { float: left; width: 100%; height: auto; background-color: #3f4378; } .goldbar1 { height: 0.475em; width: 100%; float: left; background-image: url(../images/goldBG3.jpg); repeat: repeat-x;} .goldbar2 { height: 0.475em; width: 100%; float: left; background-image: url(../images/goldBG3.jpg); repeat: repeat-x;} .goldbar3 { height: 0.475em; width: 100%; float: left; background-image: url(../images/goldBG3.jpg); repeat: repeat-x;} #logo { position: absolute; left: 1%; top: 15px; z-index: 3; } /* removed float: left; from logo */ #logoSmaller { display: none; } /* removed float: left; from logo */ /* .PhoneNumberMain { font-family: Arial, Helvetica, sans-serif; font-size: 110%; color: #8ac960; position: absolute; left: 2.9em; top: 9.6em; } */ .PhoneNumberMain { font-family: Arial, Helvetica, sans-serif; font-size: 110%; color: #8ac960; position: absolute; left: 1.8em; top: 7.8em; } .PhoneNumberMainBlue { font-family: Arial, Helvetica, sans-serif; font-size: 110%; color: #80789f; position: absolute; left: 1.8em; top: 7.8em; } .PhoneNumberMainBlue2 { font-family: Arial, Helvetica, sans-serif; font-size: 110%; color: #80789f; position: absolute; left: 1.8em; top: 7.8em; } a[href^=tel] { color: inherit; text-decoration: none; } #2divcontainer { height: auto; margin-left: 0%; } #title { height: 80px; width: 100%; text-align: center; background-color: #050939; margin-top: 6px; margin-bottom: 0px; padding: 0px; } /* float: left; position: relative; left: 180px; top: 6px; position: absolute; left: 180px; top: 14px; */ #h1 { height: 80px; background-color: #3f4378; margin-top: 0px; margin-bottom: 0px; padding: 0px; text-align: center; } /* Just removed position: relative; left: 180px; top: 0px; width: 75.8%; */ h1 { font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight: normal; font-size: 120%; color: #ffffff; margin-top: 0px; margin-bottom: 0px; padding-top: 1.2em; } /* removed margin-top: 1em; */ h1.sixthreefive { display: none; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight: normal; font-size: 90%; color: #ffffff; margin-top: 0px; margin-bottom: 0px; padding-top: 1.2em; } h3 { font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight: normal; font-size: 120%; color: #050939; margin-top: 0px; margin-bottom: 0px; padding-top: 1.2em; } .secondaryheadertext { font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight: normal; font-size: 100%; color: #ffffff; } .secondaryheadertext2 { display: none; } #montageright { float: right; align: top; position: absolute; right:1%; top: 15px; z-index: 2; } /* position: absolute; right: 0.52em; top: 14px; */ #montagerightSmaller { display: none; } /* position: absolute; right: 0.52em; top: 14px; */ img.logo { width: 100%; max-width: 180px; } img.montage { width: 100%; max-width: 180px; } img.title { margin-top: 0px; width: 100%; max-width: 800px; } img.title2 {display: none;} img.title3 {display: none;} .BGchange { display: inline-block; width: 14%; height: 100%; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 1em; vertical-align: top; } .BGchange:hover {background-color: #17629c; width: 14%; height: 100%; } .horizontalnav { position: relative; left: 0em; top: 0em; height: auto; width: auto; background-color: #050939; padding-top: 0em; padding-left: 2em; margin-bottom: 0em; overflow: hidden; } #topHorizontalLinks{ width: 100%; list-style:none; margin-top: 0%; margin-bottom: 0%; padding-top: 0%; padding-right:0%; padding-bottom:0%; padding-left:0%; text-align:left; line-height: 2em; } #topHorizontalLinks li{ display:inline; margin-right: 0%; } #topHorizontalLinks a{ display:inline-block; padding-top:0%; } a.hzlinks:link{ color:#ffffff; font-family: arial, verdana, sans-serif; font-size: 80%; text-decoration:none; font-weight:bold; } a.hzlinks:hover{ text-decoration:underline; } a.hzlinks:active{ color: gray; } a.hzlinks:visited{ color: #777777; } #blockdropdowntest { float: left; clear:both; margin-top: 0px; width: 100%; height: 3em; background-color: red; color: white; display: none; } /* a.blockdropdownlinks:link {color: black; text-decoration: none; font-family: arial, verdana, sans-serif; font-size: 100%; } a.blockdropdownlinks:visited {color: #333333; text-decoration: none; font-family: arial, verdana, sans-serif; font-size: 100%; } a.blockdropdownlinks:hover {color: red; cursor: hand; text-decoration: underline; font-family: arial, verdana, sans-serif; font-size: 100%; } a.blockdropdownlinks:active {color:black; text-decoration: underline; font-family: arial, verdana, sans-serif; font-size: 100%; } */ h2 { font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:600; font-size: 140%; color: #050939; } /* .topmargin { top-margin: 2em; } DOESN'T WORK SORT IT ON SUNDAY ########## */ #infoUpperandLower { float: left; width: 70%; background-color: yellow; } #upperinfodiv { float: left; width: 49%; height: auto; text-align: center; text-align: left; padding-left: 2%; padding-top: 1em; padding-right: 1%; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #444444; background-color: #fff8dc; } #infodiv { float: left; clear: left; width: 49%; height: auto; background-color: #fff8dc; text-align: center; text-align: left; padding-left: 2%; padding-top: 1em; padding-right: 1%; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #444444; } #infodivBriefFor360wide { display: none; } #imagewrapper { float: right; width: 48%; background-color: red; } #imagediv { width: 100%; background-color: #050939; text-align: center; } img.mainpix { height: auto !important; width: auto !important; max-width: 100%; padding-top: 3%; padding-bottom: 3%; } img.showpic { margin-top: 0%; width: 100%; max-width: 400px; } img.whatnextMobile {display: none;} /* FOR-LARGE-LANDSCAPE-IMAGES - this category has been created to accommodate large landscape images used on responsive enlargement pages. Portrait images use the the CSS rules that do NOT include FOR-LARGE-LANDSCAPE-IMAGES in id name. */ #outerinnerFOR-LARGE-LANDSCAPE-IMAGES { width: 100%; height: auto; background-color: #fff8dc; border: solid 0px black; overflow: auto; } /* JUST replaced overflow: auto; from outerinner */ #imagewrapperFOR-LARGE-LANDSCAPE-IMAGES { float: left; width: 100%; background-color: red; } #upperinfodivFOR-LARGE-LANDSCAPE-IMAGES { float: left; width: 100%; height: auto; text-align: center; text-align: left; padding-left: 2%; padding-top: 1em; padding-right: 1%; padding-bottom: 2em; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #444444; background-color: #fff8dc; } #Brief-Mobile-Version-Only { display: none; float: left; width: 100%; height: auto; text-align: center; text-align: left; padding-left: 2%; padding-top: 1em; padding-right: 1%; padding-bottom: 2em; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #444444; background-color: #fff8dc; } #MobileOnlyInfo { display: none; float: left; width: 100%; height: auto; text-align: center; text-align: left; padding-left: 2%; padding-top: 1em; padding-right: 1%; padding-bottom: 2em; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #444444; background-color: #fff8dc; } #imagedivFOR-LARGE-LANDSCAPE-IMAGES { float: left; width: 100%; background-color: #050939; text-align: center; } #infodivFOR-LARGE-LANDSCAPE-IMAGES { float: left; width: 100%; height: auto; background-color: #fff8dc; text-align: center; text-align: left; padding-left: 2%; padding-top: 1em; padding-right: 1%; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #444444; } .mainpix-description { position: relative; top: -3em; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #fff8dc; } /* clear: left; */ #bottomlinkscontainer { float: left; clear: right; height: auto; width: 98%; text-align: center; background-color: #050939; color: #cccccc; padding-top: 1em; padding-right: 1%; padding-bottom: 1em; padding-left: 1%; } a.bottomlinks:link {color: #ffffff; text-decoration: none; font-family: arial, verdana, sans-serif; font-size: 90%; margin-left:6px;} a.bottomlinks:visited {color: #cccccc; text-decoration: none; font-family: arial, verdana, sans-serif; font-size: 90%; margin-left:6px;} a.bottomlinks:hover {color: #fffffff; cursor: hand; text-decoration: underline; font-family: arial, verdana, sans-serif; font-size: 90%; margin-left:6px;} a.bottomlinks:active {color:#ffffff; text-decoration: underline; font-family: arial, verdana, sans-serif; font-size: 90%; margin-left:6px;} footer { clear: both; height: 3em; width: 100%; padding-top: 1em; font-family: Arial, Verdana, sans-serif; font-size: 1em; color: #ffffff; text-align: center; background-color: #dc143c; } /* COPY ANOTHER TEST 4 INTO EP GREEN TEST PAGE VERSION 4 FROM HERE */ label { position: relative; top:1em; left:0.3em;} input#show, input#hide { display:none; } span#content { display: block; -webkit-transition: opacity 2s ease-out; transition: opacity 2s ease-out; opacity: 0; height: 0; font-size: 0; overflow: hidden; } input#show:checked ~ .show:before { content: "" } input#show:checked ~ .hide:before { content: "Close Menu " url(../images/MENU_White_Red.jpg) ; font-family: Arial, Helvetica, sans-serif; font-size: 120%; font-weight: bold; color: #ffffff; } input#hide:checked ~ .hide:before { content: "" } input#hide:checked ~ .show:before { content: "Open Menu " url(../images/MENU_White_Red.jpg) ; font-family: Arial, Helvetica, sans-serif; font-size: 120%; font-weight: bold; color: #ffffff; } input#show:checked ~ span#content { opacity: 1; font-size: 100%; height: auto; } input#hide:checked ~ span#content { display: block; -webkit-transition: opacity 1s ease-out; transition: opacity 1s ease-out; opacity: 0; height: 0; font-size: 0; overflow: hidden; } #big { position: relative; top: 0.5em; left: 0em; width: 100%; height: 75.6em; background-color: #050939; } ul#dropdownmenu { list-style:none; background-color: pink; text-align: left; padding: 0%; } .blockdropdown { background:#050939; height: 2em; border-bottom: solid 1px white; padding-top: 0.5em; } /* ### EACH ITEM IN LINK LIST FOR 380px AND BELOW ### */ a.blockdropdownlinks { font-family: Arial, Helvetica, sans-serif; color: white; font-size: 100%; font-weight:bold; margin-left: 3em; } li.blockdropdown:hover{ background-color: #3f4378;} /* #divtwo { position: relative; left: 0x; top: 100px; left: 1em; width: 100%; height: 15em; background-color: red; } END COPIED STUFF FROM ANOTHER TEST 4*/ /* ########### FIRST cut off point at 1170 down to 885 ################### */ @media (min-width: 885px) and (max-width: 1170px) { img.title {display: none;} img.title2 {display: inline;} h1.sixthreefive { display: none; } .BGchange {display: inline-block; width: 12%; height: 100%; padding-top: 0.5px; padding-bottom: 0px; padding-left: 1em; vertical-align: top; } .BGchange:hover {background-color: #708744; width: 12%; height: 100%; } } /* ########### SECOND cut off point at 884 down to 578 ################### */ @media (min-width: 578px) and (max-width: 884px) { img.title {display: none;} img.title2 {display: none;} img.title3 {display: inline;} h1 { display: none; } h1.sixthreefive { display: block; padding-top: 1em; } .secondaryheadertext { display: none; } .BGchange {display: inline-block; width: 14%; height: 100%; padding-top: 0.5px; padding-bottom: 0px; padding-left: 1em; vertical-align: top; } .BGchange:hover {background-color: #708744; width: 14%; height: 100%; } img.showpic {display: none;} img.whatnextMobile { display: inline; } .mainpix-description { position: relative; top: 40em; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #fff8dc; } } /* ########### THIRD cut off point at 577 down to 421 ################### */ @media (min-width: 521px) and (max-width: 577px) { img.title {display: none;} img.title2 {display: none;} img.title3 {display: none;} #h1 { background-color: #050939; } h1 { display: none; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight: normal; font-size: 120%; color: #ffffff; margin-top: 0px; margin-bottom: 0px; padding-top: 0.2em; } h1.sixthreefive { display: none; } .secondaryheadertext { display: none; } .secondaryheadertext2 { font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight: normal; font-size: 100%; color: #ffffff; } .goldbar2 { height: 0.475em; width: 100%; float: left; background-image: url(../images/goldBG3.jpg); repeat: repeat-x;} .BGchange {display: inline-block; width: 14%; height: 100%; padding-top: 0em; padding-bottom: 0px; padding-left: 1em; padding-right: 0em; vertical-align: top; } .BGchange:hover {background-color: #708744; width: 14%; height: 100%; } img.showpic {display: none;} img.whatnextMobile { display: inline; } } /* ########### FOURTH BELOW 420 Narrowest size - intended for for mobiles and up a bit maybe ! ################### I CHANGED 420 TO 520 AND UPLOADED CSS ON 4TH OCT 2021 */ @media (max-width: 520px) { #header { float: left; width: 100%; height: 10em; background-color: #050939; } /* .goldbar { display: none; } */ .goldbar3 { display: none; } #2divcontainer {display: none; } #title { display: none; } #h1 { display: none; } h1.sixthreefive { display: none; } .secondaryheadertext2 { display: none; } #logo { display: none; } #montageright { display: none; } #logoSmaller { display: block; } #montagerightSmaller { display: inline-block; float: right; align: top; position: absolute; right:1%; top: 15px; } img.montage { width: 100%; max-height: 143px; } .horizontalnav { position: relative; left: 0em; top: 10em; height: auto; width: 100%; background-color: #050939; padding-top: 0em; padding-left: 1em; overflow: hidden; display: none; } .goldbar2 { height: 0.475em; width: 98%; position: absolute; top: 158px; left: 1%; right: 1%; background-image: url(../images/goldBG3.jpg); repeat: repeat-x;} .goldbar3 { height: 0.475em; width: 100%; position: relative; top: 160px; left: 0%; background-image: url(../images/goldBG3.jpg); repeat: repeat-x;} h2 { font-size: 110%; margin-top: -0.5em; margin-bottom: 0.2em; } #blockdropdowntest { width: 100%; height: 3em; background-color: #dc143c; color: white; display: block; } .PhoneNumber { font-family: Arial, Helvetica, sans-serif; font-size: 130%; font-weight: bold; color: #ffffff; position: absolute; right: 0.5em; top: 9.25em; } #upperinfodiv { padding-right: 3%; padding-bottom: 0.5em; background-color: #fff8dc; width: 95%; } /* ############# 95% WORKS - DON'T KNOW WHY, CHECK IT OUT !!!!!! ############### */ #infodiv { padding-right: 3%; background-color: #fff8dc; width: 95%; } /* ############# 95% WORKS - DON'T KNOW WHY, CHECK IT OUT !!!!!! ############### */ #upperinfodivFOR-LARGE-LANDSCAPE-IMAGES { display: none; } #Brief-Mobile-Version-Only { display: inline; float: left; width: 100%; height: auto; text-align: center; text-align: left; padding-left: 2%; padding-top: 1em; padding-right: 1%; padding-bottom: 1em; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #444444; background-color: #fff8dc; } #MobileOnlyInfo { display: inline; float: left; width: 100%; height: auto; text-align: center; text-align: left; padding-left: 1%; padding-top: 1em; padding-right: 1%; padding-bottom: 1em; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #444444; background-color: #fff8dc; } .mainpix-description { position: relative; top: 1em; font-family: arial, helvetica, verdana, sans-serif; font-style:normal; font-weight:300; font-size: 1em; color: #fff8dc; } #imagewrapper { width: 100%; float: left; } img.showpic {display: none;} img.whatnextMobile { display: inline; } #bottomlinkscontainer { display: none; } footer { height: 4em; } /* LEAVES THESE TWO SHOWING UNTIL WIDTH PROBLEMS SORTED 8th June Prob Sorted #bottomlinkscontainer { display: none; } footer { display: none; } */ }