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 { 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 { /* 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; } /* ----------------- */ /* Table formatting. */ /* ----------------- */ table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 0px; font: 32px sans-serif; padding: 4px; text-align: center; } tr:nth-child(odd) { background-color: rgb(240,240,240); } th { background-color: rgb(192,192,192); } .comments { text-align: left; } /* ---------------- */ /* Form formatting. */ /* ---------------- */ form, input, label, textarea { font: 32px sans-serif; } /* ----------------- */ /* Other formatting. */ /* ----------------- */ .default-button { background-color: rgb(200,200,200); border: 1px solid rgb(0,0,0); border-radius: 20px; font: 48px sans-serif; margin: 20px 150px; padding: 20px 0px; } .general-text { font: 32px sans-serif; } .item-comment { font: 32px sans-serif; margin: 0px 0px; padding: 0px 0px; } .item-image { float: none; margin: 0px; width: 90%; /* 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. */ } .item-header { font: bold 48px sans-serif; margin: 0px 0px; padding: 0px 0px; } .main-score { font: 48px sans-serif; margin: 0px 0px; padding: 0px 0px; } .scores-box { border: 1px solid rgb(0,0,0); border-radius: 20px; margin: 20px 100px; padding: 20px 0px; } .not-spotted { background-color: rgb(200,200,200); } .spotted { background-color: rgb(32,128,32); } a:link, a:visited { 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. */ } /* ----------------------------------- */ /* 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 32px 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 { 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 { /* 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: 300px; -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); } /* ----------------- */ /* Table formatting. */ /* ----------------- */ td, th { font: 24px sans-serif; } /* ---------------- */ /* Form formatting. */ /* ---------------- */ form, input, label, textarea { font: 24px sans-serif; } /* ----------------- */ /* Other formatting. */ /* ----------------- */ .default-button { background-color: rgb(200,200,200); border: 1px solid rgb(0,0,0); border-radius: 20px; font: 24px sans-serif; margin: 20px 150px; padding: 20px 0px; } .general-text { font: 24px sans-serif; } .item-comment { font: 16px sans-serif; margin: 0px 0px; padding: 0px 0px; } .item-header { font: bold 20px sans-serif; margin: 0px 0px; padding: 0px 0px; } .main-score { font: 24px sans-serif; margin: 10px 0px; padding: 0px 0px; } }