/* --- SECTION TABLE OF CONTENTS --- REMOVE GLOBAL STYLING LINK/ANCHOR TAGS PAGE BORDER MARGIN PADDING RESPONSIVE background blue -> Media = None PAGE BACKGROUND COLOR NEW-LINE -- LINE-BREAK -- DIVIDER MARGIN FORMAT TEXT FORMAT

HEADER TEXT IMAGE PHOTO FORMAT MOBILE SCREEN PREVENT IMAGE LOAD CELL PHONE (stop element from loading in cell phone view) BAR GRAPH MENU CONTROL CELL PHONE SECTION FORMATING PAGE-HEADER RADIO-BUTTON PAGE-FOOTER LINK-LIST MENU-1 (New Drop-down ) TAB TYPE MENU FORM FORMATING (error for drop down menu, button is a global style, 'float' results in problem) TABLE FORMATING TABLE of CONTENTS DOT LEADER TABLE FORMATING !!!!!!!!!! ALL CELL PHONE FORMATING Search ' @media ' !!!!!!!!!!!!!!!!! ~LINES class | WHAT 114 remove background color for cell phone 150 body tag 455 img-left | (control all objects and images) 511 cell-100-percent | 100% screen cell phone width to push text below 530 mobile class, font size 600 image-display | stop stuff from loading on cell phone 692 #head - display:none 739 #page-header - screen width 834 #nav-1-background 949 nav-1 CELL PHONE VIEW 967 CELL PHONE VIEW 1154 Do not show tables in cell phone view (google does not like them, fix one day) 1171 STOP TABLE OF CONTENTS FROM DISPLAY ON CELL PHONE 1269 no-cell-view 1320 SET CONTAINER TO FLEXBOX */ /* --------------- REMOVE GLOBAL STYLING -------------------------------------------------*/ .block-css { /*EXAMPLE */ } /* --------------- LINK/ANCHOR TAGS ------------------------------------------------- Seems this will not work on all , not sure if it is due to the being within other tags? Look below at the leaders for the table of contents, that :hover is working just on the . but the is within a , but only with the within the . a :hover { background-color: yellow; } */ .hover-yellow :hover /* span :hover - Change background to yellow with mouse hover for */ { background-color: yellow; } .hover-green :hover /* span :hover - Change background to green with mouse hover for */ { background-color: green; } /* --------------- PAGE BORDER MARGIN PADDING RESPONSIVE -------------------------------------------------*/ /* Border or Margin color */ html { /*height: 200px; background-image: repeating-radial-gradient(red, red, blue); */ /*height: 400px; background-image: repeating-linear-gradient(red , yellow 20%, blue 30%); */ background-color: blue; width: 100%; /* 1-5-2020 attempt to fix the Google error */ } @media screen and (max-width: 600px) { /* remove background color for cell phone, set body to width 100% force images into cell view */ html, body { /* no margin color */ height: 0px; background-color: transparent; /* background-color: yellow; TEST TO SEE WHERE THE HTML TAG IS*/ width: 100%; /* 1-6-2020 attempt to fix the Google error */ } /* Force all videos to be no larger than cell screen */ video { /* adj for cell phone, never more than 100% of screen width */ /* The value of the max-width property overrides the width property, width is set for video in respective pages */ max-width: 100%; } } body { /* Light gray page color */ background-color:#ffffff; margin-right: 20px; margin-left : 20px; margin-top: 0px; margin-bottom: 0px; padding-right: 15px; padding-left: 15px; padding-bottom: 0px; /*border-radius: 40px 40px 40px 40px; */ } @media only screen and (max-width: 600px) { body { margin-right: auto; margin-left: auto; margin-top: 0px; padding-right: 5px; padding-left: 5px; width: 95%; /* The body tag appears to need to be less than that HTML tag, which is 100% above for proper cell phone view */ } } /* --------------- PAGE BACKGROUND COLOR -------------------------------------------------*/ .background-color-yellow { background-color:yellow; } .background-color-teal { background-color: teal; } .background-color-orange { background-color: orange; /* Change sub-menu box to rounded corners */ border-radius: 20px 20px 20px 20px; padding-right: 15px; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; } /* --------------- NEW-LINE -- LINE-BREAK -- DIVIDER ------------------------------------*/ .divider-black { border: black solid 1px; width: 100%; /* always 100% of screen width */ } /* This is will appear as a clear divider in the page to separate text and images so the page formats correctly. */ .divider-white { border: white solid 1px; width: 100%; } /* This divider is used on the forms so that if the end-user does not have the current version of CSS the form will appear correctly. */ .divider-fieldset { border: #AAAAFF solid 1px; width: 100%; } .divider-grey { border: #dddddd solid 1px; width: 100%; } .divider-light-gray { border: #F0F0F0 solid 1px; width: 100%; } /* ----------------------------------- MARGIN FORMAT ------------------------------------*/ .zero-margin { margin: 0px; } .zero-bottom-margin { margin-bottom: 0px; } /* ------------------------------------ TEXT FORMAT ------------------------------------*/ /* Global Font */ /* Large font is easier to read than medium font */ /* Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em) */ html { font-family: "Arial", Helvetica, sans-serif; font-size: 1em; } /* NO CHANGE BY COMMENTTING OUT THIS CODE AND INSTALLING THE HTML CODE ABOVE p { font-family: "Arial", Helvetica, sans-serif; font-size: large; } a { font-family: "Arial", Helvetica, sans-serif; font-size: large; } li { font-family: "Arial", Helvetica, sans-serif; font-size: large; } */ /* rem values are relative to the root html element, above 1em */ .small-font { font-size: 0.85rem; /* Same as small */ } .medium-font { font-size: 1rem; /* Same as medium of default */ } .large-font { font-size: 1.5rem; /* Same as x-large font */ } .xx-large-font { font-size: 2rem; /* Same as xx-large font */ } .tx-center { text-align: center; margin: 0px; padding: 3px; } .italic { font-style: italic; } .bold { font-weight: bold; } .tab { margin-left: 40px; } .tab-list ul { margin-left: 80px; } .blue-font { color: blue; } .blue-x-large-bold { color: blue; font-size: 1.5rem; font-weight: bold; } .black-font { color:black } .black-bold-font { color:black; font-weight: bold } .red-font { color: red; } .brown-font { color: maroon; } .fuchsia-font { font-size: 1.5rem; color: fuchsia; } .orange-font { font-size: 1.5rem; color: #FF3300; } .orange-xx-large-font { font-size: 2rem; color: orange; } .orange-x-large-font { font-size: 1.5rem; color: orange; } .yellow-header { font-size: 1.5rem; text-align: center; color: yellow; font-weight: bold; } .green-header { font-size: 1.5rem; text-align: left; color: green; font-weight: bold; } /* ----------------------------- HEADER TEXT -------------------------------------*/ h1 { font-family: "Arial", Helvetica, sans-serif; text-align: center; } h2 { font-family: "Arial", Helvetica, sans-serif; font-size: 1.5rem; text-align: center; color: red; font-weight: bold; } h3 { font-family: "Arial", Helvetica, sans-serif; font-size: 1.5rem; text-align: center; color: blue; font-weight: bold; } h4 { font-family: "Arial", Helvetica, sans-serif; font-size: 1.5rem; text-align: center; color: green; font-weight: bold; } h5 { font-family: "Arial", Helvetica, sans-serif; color: yellow; text-align: center; font-size: 1.5rem; padding-bottom: -20px; } h6 { font-family: "Arial", Helvetica, sans-serif; text-align: center; font-size: 1.5rem; margin: 0px; } /* ----------------------------------- IMAGE PHOTO FORMAT ------------------------------------*/ .img-left { float: left; clear: both; /* top, right, bottom, left */ margin: 0px 20px 20px 0px; /* margin: 0px 0px 0px 0px; */ /* top, right, bottom, left */ padding: 0px 5px 5px 0px; /* adj for cell phone */ max-width: 100%; box-shadow: 5px 5px 5px #000000; } @media screen and (max-width: 600px) {/* all image tags */ img {/* Keep ALL images from extending off side of cell phone view */ /* width: 95%; 2-13-20 */ /* top, right, bottom, left */ margin: 0px 0px 0px 0px; /* margin: 0px 0px 0px 0px; */ /* top, right, bottom, left */ padding: 0px 0px 0px 0px; } .img-left { float: left; clear: both; /* top, right, bottom, left */ /* margin: 0px 20px 20px 0px; */ /* margin: 0px 0px 0px 0px; */ /* top, right, bottom, left */ padding: 0px 0px 0px 0px; /* Set so boarder is on edge of image */ /* adj for cell phone */ max-width: 95%; /* Keep ALL images from extending off side of cell phone view */ margin: auto; /* horizontally center the element within its container */ box-shadow: 0px 0px 0px #000000; /* Clear box-shadow formating */ /* border-style: solid; border-width: 1px; border-color: blue; */ } .cell-100-percent /* Set small image at 100% so that text is not next to image */ { width: 100%; } } /*.center { width: 33%; margin-left: auto; margin-right: auto; } */ .center { display: block; /* starts on a new line, and takes up the whole width */ margin-left: auto; margin-right: auto; max-width: 100%; /* Keep ALL images from extending off side of cell phone view */ } .img-right { float: right; /* top, right, bottom, left */ margin: 0px 20px 20px 0px; /* top, right, bottom, left */ padding: 0px 5px 5px 0px; /* adj for cell phone */ max-width: 100%; box-shadow: 5px 5px 5px #000000; } .float-left { float: left; /* top, right, bottom, left */ margin: 0px 20px 0px 20px; /* adj for cell phone */ padding: 15; width: 95%; /* attempt to fix the Google error */ /* margin: 15;*/ } .thumbnail { height: 100px; width: 100px; } .thumbnail:hover { position:relative; /* top:-25px; left:-35px; */ width:100%; /* change the size to which image enlarges by increasing or decreasing the "width" value */ height:auto; display:block; z-index:999; } /* --------------------------------- MOBILE SCREEN --------------------------------------*/ @media screen and (max-width: 600px) { /* .mobile { font-size: medium; } */ .mobile { font-size: 1.2rem; } /* Better for the small font size than the 1em */ } /* ------------------------------- PREVENT IMAGE LOAD CELL PHONE ------------------------*/ /* HEADER */ @media (max-width:600px) { /* This option will remove the element, or not take up room on the page */ .image-display { display:none; } } @media (min-width:601px) { .image-display { /*background-image: url();*/ /*height = "75px"*/ } } /* ------------------------------- BAR GRAPH -------------------------------------*/ /* Bar Graph */ dt { float: left; padding: 4px; font-weight:bold } /* Shift Graph away from text */ .dd0 { display: block; margin-left: 20px; box-shadow: 5px 5px 5px gray; } /* Shift Graph away from text */ .dd1 { display: block; margin-left: 95px; box-shadow: 5px 5px 5px gray; } .bar1 { margin-bottom: 10px; color: #ffffff; padding: 4px; text-align: center; background: -webkit-gradient(linear, left top, left bottom, from(#ff7617), to(#ba550f)); background-color: #ff7617; -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25))); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-animation-name:bar; -webkit-animation-duration:0.5s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-out; } .bar2 { margin-bottom: 10px; color: #000000; padding: 4px; text-align: center; /*background: -webkit-gradient(linear, left top, left bottom, from(#ff7617), to(#ba550f));*/ background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#00ee11)); background-color: #0099ff; /*background-color: #ff0000;*/ /*-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-animation-name:bar; -webkit-animation-duration:0.5s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-out; } /* Basic vs Fan Control Bar Graph */ .dd2 { display: block; margin-left: 155px; box-shadow: 5px 5px 5px gray; } .bar3 { margin-bottom: 10px; color: #000000; padding: 4px; text-align: center; /*background: -webkit-gradient(linear, left top, left bottom, from(#ff7617), to(#ba550f));*/ background: -webkit-gradient(linear, left top, left bottom, from(#00ee11), to(#0099ff)); background-color: #00ee11; /*background-color: #ff0000;*/ /*-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-animation-name:bar; -webkit-animation-duration:0.5s; -webkit-animation-iteration-count:1; -webkit-animation-timing-function:ease-out; } /* ------------------------------- MENU CONTROL CELL PHONE ------------------------*/ @media (max-width:600px) { .cell-display { /* Show Menu or something else */ } } @media (min-width:601px) { .cell-display { display:none; } } /* -------------------------------- SECTION FORMATING ---------------------------------*/ #head { /* Header linear-gradient */ /* background-image: linear-gradient(DodgerBlue, MediumSeaGreen, green);*/ /* Pleasant, see line 812 for boundary line, must be placed in the