/* --------------------------------------------------- STARTED AS: gravimotion2009.css created Feb 17 Ubud Bali by Henri Salles last modified Feb 6 2014 20210816 increased font size from .9 to 1em RENAMED gravimotionINFOa.css on 20210819 and used as is, even though most of it is no longer in use*/ /* --------------------------------------------------- block element rules */ body {margin: 0; padding: 0; text-align:center; /* IE6 hack; needed to center the layout in the browser window */ font-size: 1em; font-family: arial, helvetica, sans-serif; } #onstage /* think about an #inneronstage */ {max-width: 960px; /* constrained / liquid layout */ min-width: 720px; padding: 0; text-align:left; /* cancels I6-body-tag-hack' side effects */ /* ************************************************** start "opacity" addition Started (in time) 20101130 Stopped 20101207*/ /* special for microsoft IE filter:alpha(opacity=95);*/ /* CSS3 standard opacity:0.95; */ /* ************************************************** end "opacity" addition */ } #innerheader /* neither header nor footer are declared; div's do the job! */ {margin: 0; padding:1em; } /* creates space between the box and the colB */ #innerheader h2 {line-height: 1.2em; margin: 1em 0 0 0; } table /* I definitely gave up floated column technic! A table is much simpler and caoculates everything automatically! */ {width: 100%; border-width: 0; padding: 0; margin: 0;} tr {border-width: 0; padding: 0; margin: 0;} td {margin: 0; padding: 10px; border-width: 0; } /* tr {margin: 0; padding: 0; } useless */ #innerfooter {margin: 0; padding: 1em; /* creates space between the box (innerfooter) and the content (footer) */ text-align:center;} .inner1 { padding: 0 100px; } /* both inner1 and bgc1 are used in gravimotion-core.html left column */ #footNote1 { margin: 2em 0;} /* used in toxic-assets.html and what_is_motion.htm PROBLEM IS I have footnote2 (in gravimotion.info/motion-reality.html) and even footnote3 i what-is-mass.info/index.html */ a#footNote1 { font-weight: normal; } #innerheader, .inner1, #innerfooter, .bx1 {overflow:hidden;} /* clips oversize elements that would otherwise expand divs and break the layout */ .bx1 {padding: 1em; margin-bottom: 1em;} /* box 1:used for book advertising in gravimotion.info/index.html and other pages. */ /* added margin-bottom: 1em; Jul 28 2009: needed when next line is not title h3 : in principle of motion */ p.bx1 {padding: 1em; } /* introduced May 5 2009; used in Henri Salles.htm */ /* --------------------------------------------------- CSS box rules */ .m0a {margin: 0 auto;} /* margin 0 auto : centers element's layout in element's context */ .m1 {margin: 20px auto 0 auto;} /* margin 1 : that works in the combo:
the syntax is rigorous! */ .m2 {margin: .5em 0 .5em .5em;} /* used in advertising right floated bx1; that is why left margin is 0 */ .m3 {margin: .5em 0; } /* added Apr 19 2009 used in "catch the eye boxes" */ .m4 {margin: .5em .5em .5em 0;} /* used in advertising left floated bx1; that is why right margin is 0 added May 3 2009 */ .m5 {margin: 0; } .mr1 { margin-right: 1em;} /* margin right */ .ml1 { margin-left: 1em; } .mt1 { margin-top: 1em; } .bg2 { background: transparent url(images/bkgd2.jpg) repeat;} /* special to what-is-mass.info added May 24 2009 (getting rid of what-is-mass.css) */ /*.o9 {opacity: 0.9;} added for what-is-mass.info May 24 2009 (getting rid of what-is-mass.css) but that triggers an error in the validator */ .bgc0 {background-color: rgb(0,0,102); } /* back ground color 0 NIGHT BLUE I REPLACED bgc0 on 20101130 up to 20101207 .bgc0 {background-image: url(images/winter/flake.gif);}*/ .bgc1 {background-color: rgb(240, 240, 220); } /* back ground color 1 YELLOW bgc1 is used in gravimotion.info/index.html for book advertising */ .bgc2 {background-color: rgb(255, 255, 255); } /* WHITE bgc2 is used in what-is-mass.info */ .bgc3 {background-color: rgb(230, 230, 195); } /* YELLOW in header */ .bgc4 {background-color: rgb(255, 255, 235); } /* light YELLOW used in table That is maily for content column */ .bgc5 {background-color: rgb(204, 204, 153); } /* YELLOW in footer */ .bgc6 {background-color: rgb(247, 247, 227); } .bgc7 {background-color: rgb(235, 235, 208); } /* order of decreasing yellows: bgc5 3 7 1 6 4 2(white) */ .bgc8 {background-color: rgb(51,51,0); } /* added May 10 for what-is-inertia.info */ /* other background colors (used below): background-color: rgb(240,240,255); background-color: rgb(240,240,215); make sure none of the .bgc coincide to a color: rgb(...) */ .p1 {padding: .5em;} .p2 {padding: 1em;} .c0 { color: rgb(0,0,0);} /* color 0 : BLACK called in body tag, make sure not one color is the same as any background colors */ .c0 a { color: rgb(0,0,0); } /* changes from blue to black all links that are not re-styled further down; note that matches .c0 color used in body */ .cb {color: rgb(0, 0, 255); } /* cb Color Blue */ .cg {color: rgb(0,153,0); } /* color green added for what-is-mass.css then used in "nutshell" */ .cg1 {color: rgb(0,102,0); } /* color darker green added for what-is-mass.css then used in "nutshell" */ /* .c1 use for next rgb color */ .c2 {color: rgb(204,51,51);} /* color red both cb and c2 used in motion.htm */ .text_cg_s8 { color: rgb(0,102,0); font-size: 1em } /* text color green font size .8em; used for author's poor language notice AND for footnotes */ /* .c254 {color: rgb(254,254,254);} aug 28 2009 keep in reserve : used in does-time-exist????.css */ .u {text-decoration: underline; } /* added dec 26 2011 */ .b0 {border-width: 0; } /* added May 23 2009 for Henri Salles.htm picture */ .b1 {border: 1px solid rgb(0,0,0); } /* border 1 : used in box .b1 for book advertising */ .b2 {border: 1px solid rgb(0,130,0); } /* used in what-is-mass.info box at bottom */ .b3 {border: 2px solid rgb(0,130,0); } /* added 20 May 2009 */ .bb1 {border-bottom: 1px solid rgb(0,0,0); } /* border bottom used in div (header) */ .bt1 {border-top: 1px solid rgb(0,0,0);} /* used in div (footer) */ .vertbar { border-right: 1px solid rgb(0,0,0);} /* draws a vertical line on right border of a table's cell if used in tag td */ .tac { text-align: center; } .fr { float: right;} /* stands for "float right"; used for boxes such as b1; see m0a about syntax*/ .fl { float: left; } .cf {clear: both;} /* clear floats */ .f1 { margin: 0 auto; width: 700px;} /* this is to be used with top logo or picture. to allow picts as wide as the contents .f1 { background-color: rgb(0,0,102); text-align: center; padding-top: 20px; margin: -20px -20px 0px -20px; } */ .w1 { width: 250px; } /* used in four columns "wave-particle-history.htm" (dropped 2011) maybe used elsewhere */ .w2 { width: 200px; } .w3 { width: 700px; } /* the width of the sky picture (dropped 2011) maybe used elsewhere */ .pos1 {position: relative;} /* used in related-sites.htm added may 3 2009 */ .pos2 {position:relative; top:10px; left:30px; } /* --------------------------------------------------- blocks created for and used in gravimotion-core.html BUT using "hidden" text might not be appreciated by search engines! (don't know?) */ div.hovered { color: rgb(0,153,0); margin: 10px 40px;} .hovered a{ color: rgb(0,153,0); } div.hovered div.popup {text-align: left;} div.popup{ position:absolute;top:150px; left:100px; display:none; width: 400px; border:1px solid rgb(0,153,0); padding:.5em; background-color: rgb(240,240,255); font-size: 100%; font-weight: bold; } /* text-align: justify ain't working */ div.hovered:hover div.popup {display:block;} div.hovered div.popwide {text-align: left;} div.popwide {position:absolute;top:150px; left:100px; display:none; width: 600px; border:1px solid rgb(0,153,0); padding:.5em; background-color: rgb(240,240,255); font-size: 100%; font-weight: bold; } div.hovered:hover div.popwide {display:block;} a.hovered {text-align: center; color: rgb(0,153,0); margin: 10px 40px;} .hovered a{ color: rgb(0,153,0); } a.hovered div.popup {text-align: left;} a span.popup{ position:absolute;top:150px; left:100px; display:none; width: 400px; border:1px solid gray; padding:.3em; background-color: rgb(240,240,215); font-size: 100%;} a.hovered:hover div.popup {display:block;} a.hovered div.popwide {text-align: left;} a.popwide {position:absolute;top:150px; left:100px; display:none; width: 600px; border:1px solid gray; padding:.3em; background-color: rgb(240,240,215); font-size: 100%;} a.hovered:hover div.popwide {display:block;} a.ltdn { text-decoration: none; } /* first used in "nutshell" May 11 2009 */ div.popup1 { position:absolute;top:300px; right:10px; /* first used in "what_is_motion" Aug 31 2009 */ display:none; width: 500px; border:1px solid rgb(0,0,0); padding:.5em; background-color: rgb(240,240,255); color: rgb(51,51,102); text-align: center;} div.hovered1:hover div.popup1 {display:block;} /* --------------------------------------------------- Hyperlink button 150px wide; */ .buttonLink {width: 151px; height: 26px; /* just a pix wider and taller than the button image */ background-image: url(images/button.jpg); line-height: 25px; /* centers the link vertically in the button */ } .buttonLink a {display: block; /* force the entire button to be the hot spot: */ color: black; /* somehow black is blacker than rgb(0,0,0) ! */ text-align: center; text-decoration: none;} .buttonLink a:hover {text-decoration: underline; color: black;} /* inherits font-weight: bold; from body a:hover */ .buttonLink a:active {background-image: url(images/buttonHovered.jpg); font-weight: bold; } /* --------------------------------------------------- Hyperlink button 225px wide; */ .buttonLgLink {width: 226px; height: 26px; /* just a pix wider and taller than the button image */ background-image: url(images/buttonLg.jpg); line-height: 25px; /* centers the link vertically in the button */ } .buttonLgLink a {display: block; /* force the entire button to be the hot spot: */ color: black; /* somehow black is blacker than rgb(0,0,0) ! */ text-align: center; text-decoration: none;} .buttonLgLink a:hover {text-decoration: underline; color: black; background-image: url(images/buttonLgHovered.jpg); /* inherits font-weight: bold; from body a:hover */ font-size: 100%; } /* on the other hand the inherited OLD 90% font size (changed to 100% 2021) BUTTON REMOVEd, forces in some conditions to split the button in 2 vertical buttons: this additional shrink fixes the problem Note: The button could have been designed a few pixels wider (instead), but then it might look too wide! */ .buttonLgLink a:active { font-weight: bold; } /* --------------------------------------------------- Hyperlink button 225px wide; */ .buttonLg4HdrLink {width: 226px; height: 26px; /* just a pix wider and taller than the button image */ background-image: url(images/buttonLg4Hdr.jpg); line-height: 25px; /* centers the link vertically in the button */ } .buttonLg4HdrLink a {display: block; /* force the entire button to be the hot spot: */ color: black; /* somehow black is blacker than rgb(0,0,0) ! */ text-align: center; text-decoration: none;} .buttonLg4HdrLink a:hover {text-decoration: underline; color: black; background-image: url(images/buttonLgHovered4Hdr.jpg); /* inherits font-weight: bold; from body a:hover */ font-size: 100%; } /* on the other hand the inherited 90% font size, forces in some conditions to split the button in 2 vertical buttons: this additional shrink fixes the problem Note: The button could have been designed a few pixels wider (instead), but then it might look too wide! */ .buttonLg4HdrLink a:active { font-weight: bold; } /* --------------------------------------------------- Hyperlink button 300px wide; */ .button300px {width: 300px; height: 26px; /* just a pix wider and taller than the button image */ background-image: url(images/button300px.gif); line-height: 25px; /* centers the link vertically in the button */ } .button300px a {display: block; /* force the entire button to be the hot spot: */ color: black; /* somehow black is blacker than rgb(0,0,0) ! */ text-align: center; text-decoration: none;} .button300px a:hover {text-decoration: underline; color: black; background-image: url(images/buttonHovered300px.gif); /* inherits font-weight: bold; from body a:hover */ font-size: 100%; } /* on the other hand the inherited 90% font size, forces in some conditions to split the button in 2 vertical buttons: this additional shrink fixes the problem Note: The button could have been designed a few pixels wider (instead), but then it might look too wide! */ .button300px a:active { font-weight: bold; } /* --------------------------------------------------- Hyperlink button 300px wide; */ .button400px {width: 400px; height: 26px; /* just a pix wider and taller than the button image */ background-image: url(images/button400px.jpg); line-height: 25px; /* centers the link vertically in the button */ } .button400px a {display: block; /* force the entire button to be the hot spot: */ color: black; /* somehow black is blacker than rgb(0,0,0) ! */ text-align: center; text-decoration: none;} .button400px a:hover {text-decoration: underline; color: black; background-image: url(images/buttonHovered300px.gif); /* inherits font-weight: bold; from body a:hover */ font-size: 100%; } /* on the other hand the inherited 90% font size, forces in some conditions to split the button in 2 vertical buttons: this additional shrink fixes the problem Note: The button could have been designed a few pixels wider (instead), but then it might look too wide! */ .button400px a:active { font-weight: bold; }