URL: http://www.weather.gov/source/mdl/CSS_MDL.css
--------------------- */ /* ------------------- ALERTS AND MESSAGES ----------------------------- */ /* --------------------------------------------------------------------- */ /* FOR ALERT BOX (RED) */ .alertbox { position: relative; display: block; margin: 0.5em 0.25em; padding: 0.25em; background-color: #ffcccc !important; border: 1px solid #ff0000 !important; border-radius: 0.25em !important; font-weight: bold !important; color: #000000 !important; } .alertbox p { margin:0; padding: 0.25em 0; } .alertbox a:link { color: #003399; } .alertbox a:visited { color: #330099; } .alertbox h2, .alertbox h2 a:link, .alertbox h2 a:visited { display: inline-block !important; color: #990000 !important; text-decoration: none; } .alertbox h1, .alertbox h1 a:link, .alertbox h1 a:visited { color: #990000; } .alertbox h3, .alertbox h3 a:link, .alertbox h3 a:visited { color: #1919fa; text-decoration: none; } .alertbox a:hover, .alertbox h2 a:hover, .alertbox h3 a:hover, .alertbox h1 a:hover, .alertbox a:focus, .alertbox h2 a:focus, .alertbox h3 a:focus, .alertbox h1 a:focus { color: #ff6633 !important; text-decoration: underline; } /* FOR SMALL-FONT YELLOW ATTENTION BOX (like alert box) */ .yellowbox { position: relative; display: block; margin: 0.5em 0.25em; padding: 0.25em; background-color: #ffffcc !important; border: 1px solid #ff9900 !important; border-radius: 0.25em !important; font-weight: bold !important; color: #000000 !important; } .yellowbox p { margin:0; padding: 0.25em 0; } .yellowbox a:link { color: #0066ff; font-weight: bold; } .yellowbox a:visited { color: #440077; } .yellowbox h2, .yellowbox h2 a:link, .yellowbox h2 a:visited { display: inline-block !important; color: #CC360F; !important; text-decoration: none; } .yellowbox h3, .yellowbox h3 a:link, .yellowbox h3 a:visited { color: #0f2d87 !important; font-weight: bold; text-decoration: none; } .yellowbox h1, .yellowbox h1 a:link, .yellowbox h1 a:visited { color: #135897 !important; text-decoration: none; } .yellowbox a:hover, .yellowbox a:focus, .yellowbox h1 a:hover, .yellowbox h1 a:focus { color: #ff6633; text-decoration: underline; } .yellowbox h2 a:hover, .yellowbox h3 a:hover, .yellowbox h2 a:focus, .yellowbox h3 a:focus { color: #990000 !important; text-decoration: underline; } /* YELLOW ATTENTION BOX - NOT MADE FOR HEADER TEXT */ .yalert { position: relative; display: inline-block; padding: 0.5em; margin: 1em auto; text-align: center; border: 1px solid #000000; background-color: #ffff99 !important; } .yalert p { color: black !important; font-weight: bold !important; font-size: 1.25em !important; margin: 0 !important; } .yalert a:link { color: #0066ff !important; text-decoration: underline !important; font-weight: bold !important; } .yalert a:link:hover, .yalert a:visited:hover, .yalert a:link:focus, .yalert a:visited:focus { color: #ff6633 !important; } .yalert a:visited { color: #440077 !important; } .redtext { position: relative; display: block; border: 2px solid #cc0000; padding: 0.25em !important; margin: 0.5em 0.25em !important; border-radius: 0.25em !important; background: #fcfcfc; } .redtext p { margin:0; padding: 0.25em 0; } .redtext, .redtext p { color: #990000 !important; font-size: 120%; } .redtext h1, .redtext h2 { color: #990000 !important; font-size: 125%; font-weight: bold; } /* ------------------------------------------------------ */ /* --------------- SHARED CSS FOR MULTIPLE -------------- */ /* ------------------------------------------------------ */ /* BLUE BACKGROUND COLOR - background, link and header colors*/ .bluebubble, .bannertextblue, .databox, .productsbox, .topbanner, .projectsoverbox { background-color: #99ccff; border: 1px solid #0099ff; } .bluebubble a:link, .bannertextblue a:link, .databox a:link, .productsbox a:link, .topbanner a:link, .projectsoverbox a:link { color: #000066; } .bluebubble a:visited, .bannertextblue a:visited, .databox a:visited, .productsbox a:visited, .topbanner a:visited, .projectsoverbox a:visited { color: #660066; } .bluebubble h1, .bannertextblue h1, .databox h1, .productsbox h1, .topbanner h1, .projectsoverbox h1, .bluebubble h1 a:link, .bannertextblue h1 a:link, .databox h1 a:link, .productsbox h1 a:link, .topbanner h1 a:link, .projectsoverbox h1 a:link, .bluebubble h1 a:visited, .bannertextblue h1 a:visited, .databox h1 a:visited, .productsbox h1 a:visited, .topbanner h1 a:visited, .projectsoverbox h1 a:visited { color: #003366; text-decoration: none; } .bluebubble h2, .bluebubble h2 a:link, .bluebubble h2 a:visited, .bannertextblue h2, .bannertextblue h2 a:link, .bannertextblue h2 a:visited, .databox h2, .databox h2 a:link, .databox h2 a:visited, .productsbox h2,.productsbox h2 a:link, .productsbox h2 a:visited, .topbanner h2, .topbanner h2 a:link, .topbanner h2 a:visited, .projectsoverbox h2, .projectsoverbox h2 a:link, .projectsoverbox h2 a:visited { color: #992F00; text-decoration: none; } .bluebubble h3, .bluebubble h3 a:link, .bluebubble h3 a:visited, .bannertextblue h3, .bannertextblue h3 a:link, .bannertextblue h3 a:visited, .databox h3, .databox h3 a:link, .databox h3 a:visited, .productsbox h3, .productsbox h3 a:link, .productsbox h3 a:visited, .topbanner h3, .topbanner h3 a:link, .topbanner h3 a:visited, .projectsoverbox h3, .projectsoverbox h3 a:link, .projectsoverbox h3 a:visited { color: #0000C9;//#0C3366;//#1111AA;//#1919fa; text-decoration: none; } .bluebubble a:hover, .bannertextblue a:hover, .databox a:hover, .productsbox a:hover, .topbanner a:hover, .projectsoverbox a:hover, .bluebubble h3 a:hover, .bannertextblue h3 a:hover, .databox h3 a:hover, .productsbox h3 a:hover, .topbanner h3 a:hover, .projectsoverbox h3 a:hover, .bluebubble a:focus, .bannertextblue a:focus, .databox a:focus, .productsbox a:focus, .topbanner a:focus, .projectsoverbox a:focus, .bluebubble h3 a:focus, .bannertextblue h3 a:focus, .databox h3 a:focus, .productsbox h3 a:focus, .topbanner h3 a:focus, .projectsoverbox h3 a:focus { color: #cc6633; text-decoration: underline; } .bluebubble h2 a:hover, .bannertextblue h2 a:hover, .databox h2 a:hover, .productsbox h2 a:hover, .topbanner h2 a:hover, .bluebubble h2 a:focus, .bannertextblue h2 a:focus, .databox h2 a:focus, .productsbox h2 a:focus, .topbanner h2 a:focus { color: #cc6633; text-decoration: underline; } .projectsoverbox h2 a:hover, .projectsoverbox h2 a:focus { color: #ff9900; text-decoration: none; } .bluebubble h1 a:hover, .bannertextblue h1 a:hover, .databox h1 a:hover, .productsbox h1 a:hover, .topbanner h1 a:hover, .projectsoverbox h1 a:hover, .bluebubble h1 a:focus, .bannertextblue h1 a:focus, .databox h1 a:focus, .productsbox h1 a:focus, .topbanner h1 a:focus, .projectsoverbox h1 a:focus { color: #cc6633; text-decoration: underline; } /* GRAY BACKGROUND - background, link and header colors (Except .viewerbox headers) */ .defblockquote , .bannertextboxtext , .greybubble { background-color: #dfdfdf;//#cccccc; } .defblockquote a:link, .bannertextboxtext a:link, .greybubble a:link, .viewerbox a:link { color: #000099; } .defblockquote a:visited, .bannertextboxtext a:visited , .greybubble a:visited , .viewerbox a:visited { color: #660066; } .defblockquote h1, .bannertextboxtext h1, .greybubble h1, .defblockquote h1 a:link, .bannertextboxtext h1 a:link, .greybubble h1 a:link, .defblockquote h1 a:visited, .bannertextboxtext h1 a:visited, .greybubble h1 a:visited { color: #135897; text-decoration: none; } .defblockquote h2, .bannertextboxtext h2, .greybubble h2, .defblockquote h2 a:link, .bannertextboxtext h2 a:link, .greybubble h2 a:link, .defblockquote h2 a:visited, .bannertextboxtext h2 a:visited, .greybubble h2 a:visited { color: #aa1100; text-decoration: none; } .defblockquote h3, .bannertextboxtext h3, .greybubble h3, .defblockquote h3 a:link, .bannertextboxtext h3 a:link, .greybubble h3 a:link, .defblockquote h3 a:visited, .bannertextboxtext h3 a:visited, .greybubble h3 a:visited { color: #1919fa;// #0C3366; text-decoration: none; } .defblockquote a:hover, .bannertextboxtext a:hover, .greybubble a:hover, .viewerbox a:hover, .defblockquote h3 a:hover, .bannertextboxtext h3 a:hover, .greybubble h3 a:hover, .defblockquote a:focus, .bannertextboxtext a:focus, .greybubble a:focus, .viewerbox a:focus, .defblockquote h3 a:focus, .bannertextboxtext h3 a:focus, .greybubble h3 a:focus, .defblockquote h1 a:focus, .bannertextboxtext h1 a:focus, .greybubble h1 a:focus, .defblockquote h1 a:hover, .bannertextboxtext h1 a:hover, .greybubble h1 a:hover { color: #cc6600; text-decoration: underline; } .defblockquote h2 a:hover, .bannertextboxtext h2 a:hover, .greybubble h2 a:hover, .defblockquote h2 a:focus, .bannertextboxtext h2 a:focus, .greybubble h2 a:focus { color: #cc6633; text-decoration: underline; } /* -------------------------------------------------------------- */ /* -------- FORMATTED TEXT OR DATA AREAS ------------------------ */ /* -------------------------------------------------------------- */ /* BLOCK QUOTE BOX */ .defblockquote { position: relative; display: block; margin: 1em 0.5em; padding: 0.75em; border: 1px solid #000000; border-radius: 0.5em; font-style: italic; font-weight: bold; text-align: justify; } .defblockquote p { postion: relative; display: inline-block; width:100%; margin:0; } /*CREATE A ROUNDED TEXT BUBBLE (White border default)*/ .textbubble { position: relative; display: block; margin: 0 auto; padding: 0.25em 0.5em 0.5em 0.5em; text-align: justify; border-radius: 0.5em; border: 1px solid #ffffff; } .textbubble li { padding: 0.5em 0; } /*ROUNDED TEXT BUBBLE AREA W/ COLORED (DEFAULT Lt. BLUE) BORDER */ .borderedbubble { position: relative; margin: 0.5em; padding: 0.5em; border-radius: 0.5em; border: 1px solid #0099ff; } .borderedbubble li { padding: 0.5em 0; } .borderedbubble p { margin: 0; } /*CREATE GRAY TEXT BUBBLE FOR EMPHASIS*/ .bannertextboxtext { padding: 0.5em; border: 1px solid #cccccc; border-radius: 0.5em; margin: 0.5em; text-align: justify; font-weight: bold; } .bannertextboxtext p { margin:0; padding: 0.25em 0; } /*CREATE BLUE BANNER TEXT BUBBLE FOR EMPHASIS*/ .bannertextblue { padding: 0.5em; border-radius: 0.5em; margin: 0.25em 0.25em 1em 0.25em; text-align: justify; font-weight: bold; } .bannertextblue p { font-weight: bold; padding: 0.25em; margin: 0; } /*FOR DATA DOWNLOAD SECTION*/ .databox { position: relative; display: block; margin: 0.5em 0.25em; padding: 0.5em; border-radius: 0.25em; } .databox p { margin: 0; padding: 0.25em 0; } .databox table{ width:98%; margin: 0.5em auto; padding: 0.25em; text-align: left; border: 2px solid #000000; } .databox td, .databox tr, .databox th{ border: 1px solid #000000; } .databox th { background-color: #3399cc; } /*CREATE A COLORED TEXT BUBBLE - AREA (BLUE, GREY, WHITE) */ .bluebubble, .whitebubble, .greybubble { position: relative; margin: 0.5em 0.25em; padding: 0.5em; border-radius: 0.25em; } .bluebubble p, .whitebubble p, .greybubble p { margin: 0; padding: 0.25em 0; } .bluebubble img, .whitebubble img, .greybubble img { max-width: 100%; max-height: 100%; } .greybubble { border: 1px solid #000000; } .greybubble h2, .greybubble h2 a:link, .greybubble h2 a:visited { color:#000000 !important; } .greybubble h3, .greybubble h3 a:link, .greybubble h3 a:visited { color:#6C192C !important; font-weight:bold; } .whitebubble { border: 1px solid #000000; background-color: #ffffff; } .whitebubble a:link { font-weight: bold; color: #0000ff; } .whitebubble a:hover, .whitebubble a:focus { color: #ff9900; } .whitebubble h1, .whitebubble h1 a:link, .whitebubble h1 a:visited { color: #135897; text-decoration: none; } .whitebubble h2, .whitebubble h2 a:link, .whitebubble h2 a:visited { color: #cc4400; text-decoration: none; } .whitebubble h3, .whitebubble h3 a:link, .whitebubble h3 a:visited { color:#000066; text-decoration: none; } .whitebubble h3 a:hover, .whitebubble h3 a:focus { color: #ff9900; text-decoration: underline; } .whitebubble h2 a:hover, .whitebubble h2 a:focus { color: #ff9900; text-decoration: underline; } .whitebubble h1 a:hover, .whitebubble h1 a:focus { color: #cc6600; text-decoration: underline; } /* LIST BOX(LINKBOX) - USE INSIDE OTHER FORMATS OR ALONE */ .linkbox { position: relative; margin:0; padding:0.25em; font-size:1.25em; } .linkbox a:link { text-decoration: none; } .linkbox ul { margin-top:0; margin-bottom:0; padding: 0; } .linkbox li { list-style-type: disc; margin: 0.25em; padding: 0; } /* THE FOLLOWING ARE FOR THE TOP BANNER FOR BRANCH HOME PAGES */ .topbanner { position: relative; display: inline-block; top: 0px; width: 99.8%; margin: 0 0 0.75em 0; background-color: #99ccff; border: 1px solid #0099ff; border-radius: 0%; padding: 0em; } .topbanner img { position: relative; display: inline-block; top: 0 !important; float: left; width: 25%; background-color: #ffffcc; border: 1px solid #000000; margin: 0.5em 0.25em 0.5em 0.5em; vertical-align: middle; } .bannertextbox { position: relative; display: inline-block; width: 72%; float: right; text-align: justify; padding: 0.5em 0.75em 0.5em 0.5em; border: 0px solid #000000; } .bannertextbox h2 { color: #003366 !important; margin: 0 0 0.5em 0; } /* THE FOLLOWING ARE FOR THE INFO BOX FOR BRANCH HOME PAGES */ .infooverbox { position: relative; display: inline-block; //width: 28%;//24%; //float: right; margin: 0 auto; padding: 0.25em; border: 1px solid #0099ff;//#ff0000; background-color: #99ccff;//#ffcccc; } .infooverbox h1 { display: inline-block !important; color: #003366;//#990000; } .infooverbox h2 { display: inline-block !important; font-size: 1.25em; color: #660000; } .infooverbox a:link { color: #000099; } .infooverbox a:visited { color: #330066; } .infooverbox a:hover, .infooverbox a:visited:hover { color: #ffff00; } .infoinnerbox { position: relative; display: inline-block; width:96%; padding: 0.25em; background-color: #ff9999; border: 1px solid #ff0000; border-radius: 0.25em; margin: 0.10em; } .leaderbox { position: relative; display: inline-block; clear: both; margin: 0 0.5em 0.5em 0.5em; background-color: #ff9999;//#ffffcc; border: 1px solid #000000; padding: 0.25em !important; } .leaderbox img { position: relative; display: block; width: 86%; margin: 0.5em auto; border 1px dotted #ff9900; } .leaderbox h2 { color: #000000;//#333333; } .leaderboxtext { position: relative; display: inline-block; buffer: 0.25em; text-align: justify; font-weight: bold; } /* ------------------------------------------------------ */ /* -------- PRODUCT AREAS OR GRAPHIC OPTION MENUS ------ */ /* ------------------------------------------------------ */ /*BLUE BOX WITH PRODUCT LINKS AND LINKS TO DOWNLOADABLE DATA*/ .productsbox { position: relative; display: block; margin: 0.5em 0.25em; padding: 0.5em; border-radius: 0.25em; } .productsbox p { margin:0; padding: 0.25em 0; } .productsbox img { max-width: 100%; max-height: 100%; } .productstext { position: relative; display: block; margin: 0; padding: 0.25em; } /* GRAY BOX FOR PUTTING IN A VIEWER OR GROUPING PRODUCTS */ .viewerbox { position: relative; display:block; float:none; margin: 0.5em 0.25em; padding: 0.25em; background-color:#cccccc; border: 1px solid #000000; border-radius: 0.25em; } .viewerbox p { margin:0; padding: 0.25em 0; } .viewerbox img { max-width:100%; max-height:100%; } .viewerbox a { font-weight: bold; } .viewerbox > a { font-weight: normal; } .viewerbox h1, .viwerbox h1 a:link, .viewerbox h1 a:visited { color: #003366;//#135897; text-decoration: none; } .viewerbox h2, .viewerbox h2 a:link, .viewerbox h2 a:visited { color: #000000; text-decoration: none; } .viewerbox h3, .viewerbox h3 a:link, .viewerbox h3 a:visited { color: #6C192C;//#3C0C10;//#383838; font-weight: bold; text-decoration: none; } .viewerbox h3 a:hover, .viewerbox h3 a:focus { color: #ff9900; text-decoration: underline; } .viewerbox h2 a:hover, .viewerbox h2 a:focus { color: #cc6633;//#666666; text-decoration: underline; } .viewerbox h1 a:hover, .viewerbox h1 a:focus { color: #cc6600; text-decoration: underline; } /*group data outputs by model*/ .modelgrouped { position: relative; display: block; margin: 0.25em auto; padding: 0.25em; } /*FOR MENU OPTIONS INSIDE THE PRODUCT DISPLAY - MENU BOXES*/ .dataopts { position: relative; display: inline-block; width: 46%; margin: 0.5em; padding: 0.25em; border: 2px solid #000000; border-radius: 0.25em; text-align: center; text-decoration: none; color:#000000; } .dataopts a:link, .dataopts a:visited, .dataopts a:hover, .dataopts a:focus { color: #000000; font-weight: normal; text-decoration: none; } /* -------- SINGLE MENU BOX, OR MULTIPLE (DIFFERENT SIZES) ----- */ /* SINGLE ITEM */ /* NOTE: you'll want to manually set image size for this*/ /* if you want multiple images same size */ .dataoptssingle { position: relative; display: inline-block; margin: 0.25em; padding: 0.25em; border: 2px solid #000000; border-radius: 0.25em; text-align: center; text-decoration: none; color: #000000; } .dataoptssingle img { max-height: 100% !important; max-width: 100% !important; margin: 0 0 0.25em 0; } /* DIFFERENT SIZE OPTIONS (INTENDED FOR MULTIPLE) */ /* FOR 3 ACROSS */ .dataoptsmed { position: relative; display: inline-block; width: 30%; margin: 0.25em; padding: 0.25em; border: 2px solid #000000; border-radius: 0.25em; text-align: center; text-decoration: none; color:#000000; } .dataoptsmed img { max-width: 98% !important; height: 12em; margin: 0 0 0.25em 0; } /* FOR 2 ACROSS */ .dataoptslarge { position: relative; display: inline-block; width: 46%; margin: 0.5em; padding: 0.25em; border: 2px solid #000000; border-radius: 0.25em; text-align: center; text-decoration: none; color:#000000; } .dataoptslarge img { max-width: 98% !important; height: 18em; margin: 0 0 0.25em 0; } /* FOR 5 ACROSS */ .dataoptssmall { position: relative; display: inline-block; width: 18%; margin: 0.15em; padding: 0.1em; border: 2px solid #000000; border-radius: 0.25em; text-align: center; text-decoration: none; color:#000000; } .dataoptssmall img { max-width: 98% !important; height: 8em; margin: 0 0 0.1em 0; } /* ADDITIONAL FORMATTING FOR DATAOPTS MENU BOXES */ .dataoptslarge h2, .dataoptsmed h2, .dataoptssmall h2, .dataopts h2, .dataoptssingle h2{ display: inline-block; color: #000000; } .dataoptslarge a:link, .dataoptslarge a:visited, .dataoptsmed a:link, .dataoptsmed a:visited, .dataoptssmall a:link, .dataoptssmall a:visited, .dataoptssingle a:link, .dataoptssingle a:visited { font-weight: bold; color: #000000; text-decoration: none; } /* LINK FOR DATAOPTS BOXES */ .dataoptslink { position: relative; display: inline-block; width: 100%; margin:0 0.25em 0 0; text-align: center; text-decoration: none; font-weight: bold; color:#000000 !important; } .dataoptslink:hover , .dataoptslink:focus { background-color: #ffcc66; color: #000000 !important; text-decoration: none !important; } .dataoptslink:link { color: #000000 !important; text-decoration: none !important; } /* THE FOLLOWING IS FOR PROJECTS IN BRANCH HOME PAGE */ .projectsoverbox { position: relative; display: inline-block; margin: 0 auto; padding: 0.25em; } .projectsoverbox h2 { display: inline-block !important; color: #003366; } .projectbox { position: relative; display: inline-block; width:98%; padding: 0.25em; background-color: #ffffff; border: 1px solid #0099ff; border-radius: 0.25em; margin: 0.10em; } .projectbox h2 { margin-left: 0.4em; } .projectbox h2 a:link, .projectbox h2 a:visited { color: #cc3300; } .projectbox h2 a:hover, .projectbox h2 a:focus { color: #ff9900; } .projectboximg { position: relative; display: inline-block; width: 29.5%; height: 11em;//9.25em; float: left; padding: 2px; vertical-align: middle; border: 1px solid #000000; } .projectboximg img { position: relative; display: block; margin: auto; clear: both; width: 100%; max-height: 100% !important; max-width: 100% !important; } .projectboxtext { position: relative; display: inline-block; width: 68%; height: 9.25em;//7.5em; float: right; padding: 0.25em; } .projtextoverlay { position:absolute; left: 0; top: 0; width: 100%; padding: 0px; background-color: #cccccc; display:none; z-index: 9; } .projectboxtext:hover .projtextoverlay { display:block; opacity: 1; } /* ----------------------------------------------------------------------------------------- */ /* ----------------------------------- LINKS AND MENUS ------------------------------------- */ /* ----------------------------------------------------------------------------------------- */ /* FOR "PREVIOUS PAGE" SINGULAR LINK BUTTONS */ .buttonblock { position: relative; display: inline-block; width: 100%; } *.backbutton { display: inline-block; padding: 0.25em; margin: 0.10em; background-color: #99ccff; border: 1px solid #3399ff; border-radius: 0.25em; text-align: center; text-decoration: none; font-weight: bold !important; color:#000000 !important; } *.backbutton:hover, *.backbutton:focus { background-color: #ffcc66; border: 1px solid #3399ff; color: #000000 !important; font-weight: bold; text-decoration: none !important; } *.backbutton:link, *.backbutton:visited, *.backbutton:a:visited, *.backbutton:a:link { color: #000000 !important; font-weight: bold; text-decoration: none !important; } /* --- CSS FOR THE COLOR / BLUE BOXES FOR SIDE MENU LINK BARS -- */ .linkbarvbox { position: relative; display: block; width:96%; margin: 0.5em auto; padding: 0.25em; background-color: #99ccff; border: 1px solid #0099ff; border-radius: 0.25em; } .linkbarvbox ul { display: block; margin: 0.25em auto; } .linkbarvbox li { list-style-type: none; list-style-position: outside; margin: 0 auto; } .linkbarvbox h2 { display: inline-block !important; color: #003366; } .linkbarvbox h3 { display: inline-block !important; color: #003399; padding: 0.25em 0 0 0; } .linkbarvbox a:link, .linkbarvbox a:visited { color: #000099; } /* CSS for Blue link buttons */ .linkbutton { position: relative; display: block; width: 80%; padding: 0.25em; margin: 0.5em auto; background-color: #ccffff; border: 1px solid #0066cc; border-radius: 0.25em; text-align: center; font-weight: bold !important; text-decoration: none; color:#000000; overflow-x: hidden; } .linkbutton:hover, .linkbutton:focus { background-color: #ffcc66; border: 1px solid #0099ff; color: #000000; text-decoration: none !important; } .linkbutton:link { color: #000000 !important; text-decoration: none !important; } .linkbutton:visited { color: #000000 !important; text-decoration: none !important; } .lboverlay { position:absolute; top: 100%; left: -100%; width:100%; padding: 10px; background-color:inherit; display:none; z-index: 9; } .linkbutton:hover, .linkbutton:focus, .lboverlay { display:block; opacity: 1; } /* HORIZONTAL MENU */ .navbarh { position: relative; display: inline-block; background-color: #99ccff; padding: 0.25em; text-align: center; padding: 0.5em; border-radius: 0.5em; border: 1px solid #0099ff; } .navbarh p { padding: 0.5em; display: inline-block; margin: 0; font-weight: bold; } *.navbarh p a { color: #000000; text-decoration: none; } *.navbarh p a:hover, *.navbarh p a:focus { color: #0000ff; } *.navbarhbutton, *.navbarhbutton:link, *.navbarhbutton:visited, *.navbarhbutton:hover, *.navbarhbutton:focus { background-color: #ccffff; position: relative; display: inline-block; border: 1px solid #66ccff; border-radius: 0.25em; padding: 0.25em; color: #000000 !important; text-decoration: none !important; margin:0; font-weight: bold; } *.navbarhbutton { margin: 0.25em !important; } *.navbarhbutton:hover, *.navbarhbutton:focus { background-color: #ffcc66; } /* ----------------------------------------------------------------------------------------- */ /* -------------------------------------- TABLES ------------------------------------------- */ /* ----------------------------------------------------------------------------------------- */ /* Text-based table - put table inside a div w/ class="arctexttable" */ .arctexttable { display: block; margin: 0 auto; padding: 1em; } .arctexttable table { width: 90%; margin: 1em auto; border: 2px solid #000000; padding: 1em; background-color: #ffffff; } .arctexttable tr, .arctexttable td{ padding: 0.5em; border: 1px dashed #000000; } .arctexttable th { background-color: #99ccff; border: 1px solid #000000; } .arctexttable p { width: 90%; margin: 1em auto; } /* Table of Links - Highlighted */ .linktable { display: block; margin: 0 auto; padding: 1em; } .linktable a:link { font-weight: bold; } .linktable table { width: 90%; margin: 0.5em auto; border: 2px solid #000000; padding: 1em; background-color: #ffffcc; } .linktable tr, .linktable td{ padding: 0.5em; border: 1px dotted #000000; } .linktable th { background-color: #99ccff; border: 1px solid #000000; } /* FOR WHEN .linktable OR .arctexttable ARE INSIDE BLUE-COLORED DIV */ .bluebubble .arctexttable th, .bannertextblue .arctexttable th, .databox .arctexttable th, .productsbox .arctexttable th, .topbanner .arctexttable th, .projectsoverbox .arctexttable th, .bluebubble .linktable th, .bannertextblue .linktable th, .databox .linktable th, .productsbox .linktable th, .topbanner .linktable th, .projectsoverbox .linktable th { background-color: #3399cc; } /*TABLE FOR VERIFICATION RESULTS LINKS TABLE*/ /*(DESIGNED FOR DUAL SEASON W/ RED/BLUE BACKGROUNDS IN HTML)*/ .veriftable table{ width: 80%; border: 1px double #000000; margin: 1em auto; } .veriftable tr, .veriftable td, .veriftable th { border: 1px solid #000000; } .veriftable th { color:#ffffff; } .veriftable a:link { //color: #000000; color: #000066; font-weight: bold; text-decoration: none; } .veriftable a:hover, .veriftable a:visited:hover, .veriftable a:focus, .veriftable a:visited:focus { //color: #660099; color: #ff6600; font-weight: bold; text-decoration: underline; } .veriftable a:visited { color: #660066; font-weight: bold; text-decoration: none; } .veriftableelembc { background-color: #cccccc !important; } .veriftablewarmbc { background-color: #ffcccc !important; } .veriftablecoolbc { background-color: #aaccff !important; } th.veriftableelembc { background-color: #696969 !important; } th.veriftablewarmbc { background-color: #800000 !important; } th.veriftablecoolbc { background-color: #0000ff !important; } /* FOR THE MOS TEXT-PRODUCT (BULLETIN) BOXES */ .mostexttable { display: block; margin: 0 auto; padding: 1em; border: 1px solid #000000; } .mostexttable table{ margin: 1em auto; border: 5px solid #000000; padding: 1em; cellpadding: 15px; cellspacing: 0; } .mosdeftable { display: block; margin: 1em auto; } /* TABLE OF DEFINITIONS */ .deftable td:first-child { font-weight: bold; } /* ------------------------------------------------------------------------------------------------ */ /* ----------------------------------------- VIDEOS ----------------------------------------------- */ /* ------------------------------------------------------------------------------------------------ */ /* THIS SUITE OF CSS IS USED FOR VIDEOS */ .videobed { border: 2px solid #000000; max-width: 100% !important; max-height: 100% !important; padding: 0 !important; background-color: #ffffff !important; } /* ------------------------------------------------------------------------------------------------ */ /* ----------------------------------------- FIGURE BOXES ----------------------------------------- */ /* ------------------------------------------------------------------------------------------------ */ /* THIS SUITE OF CSS IS USED FOR FRAMED FIGURES W/ TITLE AND/OR CAPTIONS */ center { background-color: inherit; /*this is very important for having correct background for hover text*/ } /* USE THIS TO SET OUTER CONTAINER, OR MAKE YOUR OWN (OR USE NO OUTER CONTAINER, NOT RECOMMENDED) */ .defaultouterfigcapbox { display: inline-block; position: relative; } /* FIGURE W/ TITLE, CAPTION, AND OVERLAY OPTIONS. */ /*USE OUTER CONTAINER DIV FOR BEST RESULTS. SET COLOR USING STYLE TAGS */ .figcapbox { position: relative; display: block; padding: 0.25em 0.5em; border: 1px solid #000000; background-color: #99ccff; } .figcapbox h2 { display: block; text-align: center; color: #000000; } .figcapbox p { display: block; margin: 0; padding: 0.25em 0.25em 0 0.25em; max-height:100% !important; max-width:100% !important; font-weight: bold; text-align: justify; } .figcapbox img, .figcapbox video { display: block; max-width: 100% !important; max-height: 100% !important; margin: 0.25em auto 0 auto; text-align: center; border: 1px solid #000000; } /* THIS ALLOWS TEXT BESIDE A FIGURE BOX */ .figsidetext { display: inline-block; position: absolute; padding: 0 0.5em; } /* --------------- FIGURE HOVER-TEXT CSS ------------- */ /* GENERAL OVER AREA TO TRIGGER - CANNOT BE USED WITH ANCHORS(LINKS) */ /* NOTE: HOVER TEXT TO TRIGGER MUST BE INSIDE THIS TAG */ .overlaybox { position: relative; } /* CAPTION THAT TRIGGERS HOVERTEXT */ /* NOTE: HOVER TEXT TO TRIGGER MUST BE INSIDE THIS TAG */ .fighovercaption { display: inline-block; margin: 0 auto; padding: 0.25em 0.25em 0 0.25em; max-height:100%; max-width:100%; font-weight: bold; background-color: inherit; } /* TRIGGERED HOVER-TEXT (4 POSITION OPTIONS) */ /* MAKE SURE THERE IS ENOUGH ROOM ON PAGE!! THESE WILL NOT OVERFLOW! */ .overlaybox { position: relative; } .overlaybottom { position:absolute; top: 100%; left: 0; padding: 0.5em; text-align: justify; background-color:inherit; font-weight: initial; z-index:901; display:none; } .overlaytop { position:absolute; bottom: 100%; left: 0; padding: 0.5em; text-align: justify; background-color:inherit; z-index:901; display:none; } .overlayleft { position:absolute; top: 0; right: 100%; width: 60%; padding: 0.5em; text-align: justify; background-color:inherit; z-index:901; display:none; } .overlayright { position:absolute; top: 0; left: 100%; width: 60%; padding: 0.5em; text-align: justify; background-color: inherit; z-index:901; display:none; } /* HOVER-TEXT THAT TRIGGERS ON MOUSE-OVER FIGURE */ /* MAKE SURE THERE IS ENOUGH ROOM ON PAGE!! THESE WILL NOT OVERFLOW! */ .overlayallbottom { position:absolute; top: 100%; left: 0; padding: 0.5em; text-align: justify; background-color:inherit; z-index: 900; display:none; } .overlayalltop { position:absolute; bottom: 100%; left: 0; padding: 0.5em; text-align: justify; background-color:inherit; z-index:900; display:none; } .overlayallleft { position:absolute; top: 0; right: 100%; width: 60%; padding: 0.5em; text-align: justify; background-color:inherit; z-index:900; display:none; } .overlayallright { position:absolute; top: 0; left: 100%; width: 60%; padding: 0.5em; text-align: justify; background-color:inherit; z-index:900; display:none; } /* ACTUAL CODE TO TRIGGER VISIBILITY */ .figcapbox:hover .overlayallright , .figcapbox:focus .overlayallright , .overlaybox:hover .overlayallright , .overlaybox:focus .overlayallright , .overlaybox:focus .overlayallright , .figcapbox:hover .overlayallleft , .figcapbox:focus .overlayallleft , .overlaybox:hover .overlayallleft , .overlaybox:focus .overlayallleft , .figcapbox:hover .overlayalltop , .figcapbox:focus .overlayalltop , .overlaybox:hover .overlayalltop , .overlaybox:focus .overlayalltop , .figcapbox:hover .overlayallbottom, .figcapbox:focus .overlayallbottom , .overlaybox:hover .overlayallbottom , .overlaybox:focus .overlayallbottom, .fighovercaption:hover .overlaybottom , .fighovercaption:focus .overlaybottom , .overlaybox:hover .overlaybottom , .overlaybox:focus .overlaybottom, .fighovercaption:hover .overlaytop, .fighovercaption:focus .overlaytop, .overlaybox:hover .overlaytop , .overlaybox:focus .overlaytop, .fighovercaption:hover .overlayleft , .fighovercaption:focus .overlayleft , .overlaybox:hover .overlayleft , .overlaybox:focus .overlayleft, .fighovercaption:hover .overlayright , .fighovercaption:focus .overlayright , .overlaybox:hover .overlayright , .overlaybox:focus .overlayright { display:block; opacity: 1; } /* ------------------------------------------------------------------------------------------ */ /* ---------------------------------------------- MISC -------------------------------------- */ /* ------------------------------------------------------------------------------------------ */ /* MAKE IN-LINE */ .setinline { display: inline-block; } /* SUPERSCRIPT */ .superscript { vertical-align: super; font-size: smaller; } /* SUBSCRIPT */ .subscript { vertical-align: sub; font-size: smaller; } /* MAKE A LIST WITH NO VERTICAL SPACING */ .nospacelist ul, ul.nospacelist, .nospacelist ol, ol.nospacelist { margin-top: 0; margin-bottom: 0; } .nospacelist li{ padding: 0; } /*FORMAT FOR LONG LISTS OF LINKS*/ .aq_bullets a:link { text-decoration: none; } .aq_bullets li { padding: 0.25em !important; list-style: disc !important; } .aq_bullets li ul{ padding: 0 !important; margin-top: 0.25em !important; margin-bottom: 0 !important; } .aq_bullets li ul li { list-style: circle !important; } /* PUT A LIST BACK TO ORIGINAL LIST-PROPERTIES */ ul.origlistform, ul.origlistform li { list-style-type: initial !important; list-style-position: initial !important; } /* Create multiple (h2) headers on one line - aligns with dataoptsmed and dataoptslarge*/ .threetitle{ position: relative; display: inline-block; width: 30%; margin: auto 0.25em auto 0.25em; padding: 0 0.25em 0 0.25em; left: 0%; } .twotitle { position: relative; display: inline-block; width: 46%; margin: auto 0.5em auto 0.5em; padding: 0 0.25em 0 0.25em; left:0%; } /* ALERT - LINK TEXT */ a.alert { color: #cc0000; font-weight: bold; } /* USE TO PUT IN TEXT THAT SHOWS UP IN CODE, BUT NOT VISIBLE ON PAGE */ .invisitrick { position: absolute; opacity: 0; font-size: 1em; z-index:-1; //left: -1000em; } /*FOR MAKING COLLAPSIBLE MENUS*/ .collapsey { position: relative; display: block; left:0px; } .collapsey li { list-style-type:none; list-style-position: outside; } .collapsey li > input + * { display: none; } .collapsey li > input:checked + * { display: block; } //.collapsey li > input { // display: none; //} .collapsey label { cursor: pointer; } .collapsey input[type="radio"], .collapsey input[type="checkbox"] { opacity: 0; height:1px; margin:0; padding:0; } .collapsey input[type="radio"]:focus, .collapsey input[type="checkbox"]:focus { opacity: 1 !important; height:1px; margin:0; padding:0; } .collapsey input[type="radio"]:checked, .collapsey input[type="checkbox"]:checked { opacity: 0; height:1px; margin:0; padding:0; } .hider { display: none; } #maintable img{ height: 100px; width: 160px; }Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: