elements should have padding and border included in the element's total width and height. */ cursor: pointer; /* Doesn't appear to do anything. */ } body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0px; /* Define no margin so that the will fill the available screen area. */ text-align: center; } /* ----------------------------------- */ /* Formatting for headers and footers. */ /* ----------------------------------- */ .header { background-image: url("../images/header-image-200.jpg"); /* Use a background image. */ border-bottom-style: solid; /* Define a border only at the bottom of the header. */ border-color: rgb(0,0,0); border-width: 1px; color: rgb(0,0,0); font: bold 60px sans-serif; margin: 0px 0px 50px; /* Creates some space below the bottom border. The other margins are set to zero so the header fills the defined . */ padding: 1px; /* Creates some space around the header text to show the header background image. */ text-align: center; } .footer { background-color: rgb( 240,240,240 ); border-color: rgb(0,0,0); border-bottom-style: solid; /* Define a bottom border for the footer. */ border-top-style: solid; /* Define a top border for the footer. */ border-width: 1px; color: rgb(0,0,0); font: bold 32px sans-serif; margin: 50px 0px 0px; /* Creates some space above the top border. The other margins are set to zero so the footer fills the defined . */ padding: 1px; text-align: center; } /* ------------------------------- */ /* Formatting for top-level lists. */ /* ------------------------------- */ .ul-top, .ul-cookie-top { background: rgb(255,255,255); display: list-item; /* Doesn't appear to do anything. */ list-style: none; /* No line item markers. */ margin: 0px; /* Creates some space around the entire list. */ padding: 0px; /* Creates padding around the entire list. This area would be coloured in if the list background colour was different to the body background colour. */ text-align: center; } .ul-top li, .ul-cookie-top li { background: rgb(200,200,200); color: rgb( 0,0,0); cursor: pointer; display: block; /* Doesn't appear to do anything. */ font: bold 32px sans-serif; margin: 10px; /* Creates some space around each line item. */ padding: 40px 10px; /* Creates padding around each line item (to make the line items look bigger). */ text-align: center; } /* -------------------------------------------------------------------------- */ /* Formatting for sub-lists. */ /* Needs to follow the top-level lists formatting as ".ul-top li" will apply */ /* to all

element under the .ul-top class, not just the ones immediately */ /* under it. So the defnitions below will override the ones above. */ /* -------------------------------------------------------------------------- */ .ul-sub { background: rgb(200,200,200); /* Make sure the background of the sub-list is the same colour as the background of the main list line items. */ display: none; /* Hide the sub-menu until it's clicked on. */ list-style: none; /* No line item markers. */ margin: 20px 10px 0px; /* Creates some space around the sub-menu. */ padding: 0px; /* Creates padding around the sub-menu. */ } .ul-sub li { background: rgb(70,70,70); color: rgb(255,255,255); margin: 10px 0px; /* Creates some space above and below each sub-menu line item. */ padding: 40px 0px; /* Creates padding above and below each sub-menu line item (to make the line items look bigger). */ } /* ------------------------------ */ /* Formatting for search results. */ /* ------------------------------ */ #search-input { font: bold 32px sans-serif; text-align: left; } .search-input { font: bold 32px sans-serif; margin: 50px 0px; text-align: center; } .matched-search-terms * { font: 32px sans-serif; } .g-search-input { font: bold 32px sans-serif; margin: 20px 0px; text-align: left; } .g-search-div-left { float:left; width:20%; } .g-search-div-right { float:left; width:80%; } .g-search-thumb { float: none; margin: 0px; width: 100%; /* These three properties need to be set together */ height: 100%; /* to ensure that the image fills the box whilst */ object-fit: contain; /* maintaining it's original aspect ratio. */ } .g-search-gallery { font: bold 40px sans-serif; margin: 20px 0px; text-align: center; } .g-search-title { font: bold 36px sans-serif; margin: 20px 0px; text-align: center; } .g-search-description { font: 32px sans-serif; margin: 20px 20px; text-align: center; } .ul-search-results { display: inline; /* Display the items in the list across the page rather than down it. */ list-style: none; /* No line item markers. */ margin: 0px; /* No margin around the entire list. */ padding: 0px 0px 0px 0px; /* No padding of the entire list. */ text-align: center; } .ul-search-results li { background: rgb(200,200,200); color: rgb(0,0,0); cursor: pointer; display: block; font: bold 32px sans-serif; /* margin-right: -4px; */ margin: 10px; padding: 40px 0px; /* Creates padding at the top and bottom of the menu items to make the buttons a bit bigger. */ position: relative; /* width: 100%; */ /* -webkit-transition: all 1.0s; -moz-transition: all 1.0s; -ms-transition: all 1.0s; -o-transition: all 1.0s; transition: all 1.0s; */ } /* ----------------- */ /* Other formatting. */ /* ----------------- */ .txt-big { /* Class to hide the welcome text below the menu options on a small screen. */ display: none; } .txt-small { /* Class to display the welcome text above the menu options on a small screen. */ display: inline; font: bold 32px sans-serif; text-align: center; } .txt-both { /* Class to display text appropriately on any sized screen. */ display: inline; font: bold 32px sans-serif; text-align: center; } .cookie-message-class { display: inline; font: bold 32px sans-serif; text-align: center; } /* ul li ul li a { color: rgb(255,255,255); text-decoration: none; } ul li a { color: rgb(0,0,0); text-decoration: none; } */ a { color: rgb(0,0,0); text-decoration: none; } /* -------------------------------------------------------------------------- */ /* */ /* */ /* Styles for LARGE screen devices. */ /* */ /* */ /* -------------------------------------------------------------------------- */ @media only screen and (min-device-width: 768px) { body { border: 1px solid rgb(0,0,0); /* Override the no border default. */ /* font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; */ margin: 20px 100px 100px; /* Override the no margin default. */ } /* * { box-sizing: border-box; cursor: pointer; text-align: center; } */ /* ----------------------------------- */ /* Formatting for headers and footers. */ /* ----------------------------------- */ .header { background-image: url("../images/header-image-150.jpg"); border-bottom-style: solid; border-color: rgb(0,0,0); border-width: 1px; /* color: rgb(0,0,0); */ font: bold 24px sans-serif; margin: 0px 0px 20px; padding: 20px 0px; /* Create padding around the header text to display the background image. */ text-align: center; } .footer { background-color: rgb( 240,240,240 ); border-color: rgb(0,0,0); border-bottom-style: none; /* Define a bottom border for the footer. */ border-top-style: solid; /* Define a top border for the footer. */ border-width: 1px; color: rgb(0,0,0); font: bold 13px sans-serif; margin: 50px 0px 0px; /* Creates some space above the top border. The other margins are set to zero so the footer fills the defined . */ padding: 1px; text-align: center; } /* ------------------------------- */ /* Formatting for top-level lists. */ /* ------------------------------- */ .ul-top, .ul-cookie-top { display: inline; /* Display the items in the list across the page rather than down it. */ /* list-style: none; /* No line item markers. */ /* margin: 0px; /* No margin around the entire list. */ /* padding: 0px; /* No padding of the entire list. */ } .ul-top li, .ul-cookie-top li { /* background: rgb(200,200,200); */ /* color: rgb( 0,0,0); */ /* cursor: pointer; */ display: inline-block; font: bold 12px/18px sans-serif; margin-right: -4px; padding: 15px 15px; /* Creates padding at the top and bottom of the menu items to make the buttons a bit bigger. */ position: relative; width: 400px; -webkit-transition: all 1.0s; -moz-transition: all 1.0s; -ms-transition: all 1.0s; -o-transition: all 1.0s; transition: all 1.0s; } .ul-top li:hover { /* Highlight the main menu list items when the pointer hovers over them. */ background: rgb(50,50,50); color: rgb(255,255,255); } /* -------------------------------------------------------------------------- */ /* Formatting for sub-lists. */ /* Needs to follow the top-level lists formatting as ".ul-top li" will apply */ /* to all