/* MARGIN: top right bottom left */ /* Green colors: [Scheme ID: 2o11Tw0w0w0w0] #98ED00 [Box content color -1] #82B22C[Box content color -2] darker than above #639A00 darker than above #B4F63D Brighter, almost yellow #C6F66F [background] #e8fb71 Pale yellow, background to all colour. #f3fd57 */ /* ********** Container is the outer limits ********** */ #container{font-family:Verdana, Arial, Helvetica, sans-serif; font-style:normal; font-size:medium; margin:0 auto; padding:0; border:0.15em solid maroon; min-height:600px; border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; /* box-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); -o-box-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); */ } /* MARGIN: top right bottom left */ #left {float:left; margin:0 0.5em 0 0.5em; padding:0.5em; max-width:250px; max-width:25%; border:1px white solid; border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; } #right{float:right; margin:0 0.5em 0 0.5em; padding:0.5em; max-width:250px; max-width:25%; border:1px white solid; border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; } #left-map{float:left; margin:0 0.5em 0 0.5em; padding:0.5em; border:1px white solid; border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; } body{font-family:Verdana, Arial, Helvetica, sans-serif; font-style:normal; font-size:medium; background-color:#f3fd57; margin:0; padding:0; border:0; max-width:1280px; min-height:500px; min-height:100%; background:linear-gradient(green, yellow) repeat-x 0 0; -moz-background:linear-gradient(green, yellow) repeat-x 0 0; -o-background:linear-gradient(green, yellow) repeat-x 0 0; -webkit-background:linear-gradient(green, yellow) repeat-x 0 0; background-color:yellow; /* RW Testing May 2016 ************************************************************************************************************************ */ } /* ********** Styles for MASTHEAD ********** */ #masthead{font-family:Verdana, Arial, Helvetica, sans-serif; font-style:normal; background-color:green; color:white; background-attachment:scroll; overflow:auto; margin:0; padding:0; border:0; text-align:center; width:auto; border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; display:block; /* box-shadow:0.25em 0.25em 0.25em 0 #888888; -moz-box-shadow:0.25em 0.25em 0.25em 0 #888888; -o-box-shadow:0.25em 0.25em 0.25em 0 #888888; -webkit-box-shadow:0.25em 0.25em 0.25em 0 #888888; */ } /* MARGIN: top right bottom left */ /* ********** Styles for NAVIGATION ********** */ #navigation {width:auto; overflow:hidden; background-color:green; clear:both; margin:0; padding:0; border:0; /* margin:0.25em 0.15em 0.25em 0.15em; */ border-radius:0.9em; -moz-border-radius:0.9em; -o-border-radius:0.9em; -webkit-border-radius:0.9em; border:0.15em solid maroon; background-color:green; /* background-color:#639A00; */ /* box-shadow: 0.25em 0.25em 0.25em 0 #888888; -moz-box-shadow:0.25em 0.25em 0.25em 0 #888888; -o-box-shadow:0.25em 0.25em 0.25em 0 #888888; -webkit-box-shadow:0.25em 0.25em 0.25em 0 #888888; */ } #navigation ul {list-style-type:none; width:100%; padding:0;margin:0; border:0;} #navigation li{float:left; } #navigation a {text-decoration:none; display:block; border:0.1em solid #d3d3d3; /* color:#fff; */ border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; } #navigation a:hover{border:1px solid #f2f2f2; color:black; background-color:#f2f2f2; font-weight:bold; box-shadow:0.1em 0.1em 0.2em 0 black; -moz-box-shadow:0.1em 0.1em 0.3em 0 black; -o-box-shadow:0.1em 0.1em 0.3em 0 black; -webkit-box-shadow:0.1em 0.1em 0.3em 0 black; } #smaller-font {font-size:0.8em; } /* ********** Styles for PAGE_CONTENT Top Right Bottom Left ********** */ #page_content {min-height:500px; padding:0; margin:0.25em 0.1em 0.25em 0.1em; /* color:white; color:maroon; */ color:black; text-decoration:none; } #page_content h1, h2, h3, h4, h5 {color:maroon; } /* This is the 'Normal' text column. Top Right Bottom Left */ #column_single {display:inline-block; float:left; clear:both; } #column_single ul li {margin:0; border:0; padding:0; } #inset, #inset0, #inset1, #inset2, #inset3, #inset4, #inset5, #inset6 {display:inline-block; margin:0em 0.25em 0.25em 1.5em; } #inset p{line-height:1.75em; } /* This is to ensure that the next part starts in the correct place */ #clearing_left {position:relative; float:left; clear:both; width:100%; margin:0; padding:0; } #clearing_right {position:relative; float:right; clear:both; width:100%; } /* ********** Styles for LINKS ********** */ a {color:maroon; text-decoration:underline; } a:hover {color:white; text-decoration:underline; background-color:black; } /* ********** Styles for TABLES ********** */ table{margin:0.5em 1em 0.5em 0; border:0.1em solid white; max-width:99%; border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; box-shadow:0.25em 0.25em 0.25em 0 #888888; -moz-box-shadow:0.25em 0.25em 0.25em 0 #888888; -o-box-shadow:0.25em 0.25em 0.25em 0 #888888; -webkit-box-shadow:0.25em 0.25em 0.25em 0 #888888; margin-left:1em; margin-top:1em; margin-bottom:2em; } #question p, #question0 p, #question1 p, #question2 p, #question3 p, #question4 p, #question5 p, #question6 p{font-weight:bold; padding-top:1em; } /* For the FAQs page */ .parag-ref{color:red; font-size:1em; font-style:oblique; font-weight:normal; } /* For comments from Tim */ /* .table-border{border: 1px solid #808080; } */ /* For the Table */ .fraction {font-family: Verdana; } /* For the fraction */ #click-anywhere {/* align-self:auto; -moz-align-self:auto; -o-align-self:auto; -webkit-align-self:auto; */ display:flex; display:-moz-webkit-flex; display:-o-webkit-flex; display:-webkit-flex; /* <<<<<<<<<<<<<<< ARE THESE CORRECT ?????? */ align-items:center; -moz-align-items:center; -o-align-items:center; -webkit-align-items:center; width:100%; height:300px; } #click-anywhere p{font-size:2.0em; padding:0; margin:0em 0 0 0; color:fuchsia; } /* Top Right Bottom Left */ /* ********** CSS code to detect the display device (PC, Tablet, Phone, etc) *********** */ @media only screen and (min-width:651px){ /* ********** Laptops, Tablets and PCs ********** */ /* p { color:white; } */ #masthead {margin:0.2em; border:0.25em solid maroon; box-shadow:0.25em 0.25em 0.25em 0 #888888; -moz-box-shadow:0.25em 0.25em 0.25em 0 #888888; -o-box-shadow:0.25em 0.25em 0.25em 0 #888888; -webkit-box-shadow:0.25em 0.25em 0.25em 0 #888888; } #masthead p {margin:0.5em; /* color:white; */ font-size:1.75em; font-weight:bold; } #navigation {margin:0.25em 0.15em 0.25em 0.15em; box-shadow: 0.25em 0.25em 0.25em 0 #888888; -moz-box-shadow:0.25em 0.25em 0.25em 0 #888888; -o-box-shadow:0.25em 0.25em 0.25em 0 #888888; -webkit-box-shadow:0.25em 0.25em 0.25em 0 #888888; } #navigation a {margin:0 0.1em 0 0; padding:0.5em; border:0.1em solid #d3d3d3; color:#fff; font-weight:bold; /* border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; */ /* box-shadow:0 0.1em 0.1em 0 white; -moz-box-shadow:0 0.1em 0.1em 0 white; -o-box-shadow:0 0.1em 0.1em 0 white; -webkit-box-shadow:0 0.1em 0.1em 0 white; */ } #navigation li{padding:0.25em 0.5em 0.5em 0.25em;} #page_content p {font-size:1em; margin:0; text-decoration:none; border:0; line-height:1.5em; } #page_content h1 {font-size:1.75em; margin:0.25em 0 0 0; text-decoration:none; } #page_content h2 {font-size:1.75em; margin:0.25em 0 0 0; text-decoration:none; } #page_content h3 {font-size:1.5em; margin:0.25em 0 0 0; text-decoration:none;} #page_content h4 {font-size:1.25em; margin:0.5em 0 0 0; text-decoration:none; } #page_content h5 {font-size:1em; margin:0.75em 0 0.2em 0; text-decoration:none;} #page_content h6 {font-size:1em; margin:0 0 -1em 0; border:0; font-weight:normal; } } @media only screen and (max-width:650px){ /* ********** Mobile Landscape, BLACK ********** */ /* p { color:black; } */ #masthead {margin:0.1em; border:0.15em solid maroon;} #masthead p {margin:0; font-size:1.75em; font-weight:bold; } #navigation {margin:0.25em 0.15em 0.25em 0.15em; } #navigation a {margin:0 0.1em 0 0; padding:0.35em 0.35em 0.35em 0.35em; border:0.1em solid #d3d3d3; color:white; font-weight:bold; /* border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; */ } #navigation li {padding:0.125em;} #page_content p {font-size:1em; padding:0; margin:0; border:0; line-height:1.25em; } #page_content h1 {font-size:1.75em; padding:0; margin:0.25em 0 0 0; } #page_content h2 {font-size:1.5em; padding:0; margin:0.25em 0 0 0; } #page_content h3 {font-size:1.25em; padding:0; margin:0.25em 0 0 0; } #page_content h4 {font-size:1.25em; padding:0; margin:0.5em 0 0 0; } #page_content h5 {font-size:1em; padding:0; margin:0.75em 0 0.2em 0; text-decoration:none;} #page_content h6 {font-size:1em; padding:0; margin:0 0 -1em 0; border:0; font-weight:normal; } } @media only screen and (max-width:500px) { /* ********* Mobile Portrait, RED ********** */ /* p { color:RED; } */ #masthead {margin:0.1em; border:0.15em solid maroon;} #masthead p {margin:0; font-size:1.5em; font-weight:normal; } #navigation {margin:0.25em 0.15em 0.25em 0.15em; } #navigation a {margin:0; padding:0.25em 0.25em 0.25em 0.25em; border:0.1em solid #d3d3d3; color:white; font-weight:bold; /* border-radius:0.5em; -moz-border-radius:0.5em; -o-border-radius:0.5em; -webkit-border-radius:0.5em; */ } #navigation li {padding:0.125em;} #page_content p {font-size:0.9em; padding:0; margin:0; border:0; line-height:1.25em; text-decoration:none; } #page_content h1 {font-size:1.5em; padding:0; margin:0.25em 0 0 0; text-decoration:none; } #page_content h2 {font-size:1.25em; padding:0; margin:0.25em 0 0 0; text-decoration:none; } #page_content h3 {font-size:1.25em; padding:0; margin:0.25em 0 0 0; text-decoration:none;} #page_content h4 {font-size:1em; padding:0; margin:0.5em 0 0 0; text-decoration:none; } #page_content h5 {font-size:1em; padding:0; margin:0.75em 0 0.2em 0; text-decoration:none;} #page_content h6 {font-size:1em; padding:0; margin:0 0 -1em 0; border:0; font-weight:normal; } } /* @media only screen and (max-width:700px) { p { color:navy; } } @media only screen and (max-width:600px) { p { color:black; } } @media only screen and (max-width:550px) { p { color:gray; } } */ /* #page_content p {font-size:1em; padding:0; margin:0; border:0; line-height:1.5em; } */ /* #page_content li ul {font-size:1em; display:list-item; margin:2em; border:2em; padding:2em; } */