to set margins top=10px; sides=15px; bottom 10px;*/ /* NB: Had side margins at 2%, but that causes distortions on hover in IE6. ... */ /* ... as described in http://www.positioniseverything.net/explorer/percentages.html */ /* Part of overall scheme to center the page in higher-resolution monitors... */ /* This body style is probably not needed */ body {text-align: center;} /* class=mainbox width 747px, margins auto, font 1 em, white left-centred Arial on background dkteal #007070. To bew followed my class=margins especially to set L and R as 15px, leaving central contents column as 747-30=717 for all heading and full-width boxes */ .mainbox {width: 747px; margin-right: auto; margin-left: auto; color: #ffffff; background-color: #007070; font-family: Arial, sans-serif; font-size: 1em; text-align: left;} /* class=margins */ .margins {margin-top: 10px; margin-right: 15px; margin-left: 15px; margin-bottom: 20px;} /* MAIN PAGE LAYOUT FOR USE AS class= (being superceded by mainbox and margins (above) */ /* pagelayout Width=747px allows for a full page on an 800px X 600px screen to have 2% margins without requiring horizontal scroll bar; text=Arial or sans-serif; color=#ffffff(=white) (for text); size=1em(=size 3); margin-top=0.5em; L and R margins=2%; bgcolor=#007070(=dkteal); */ /* NB: Superceded by replace margins 2% by 15px to avoid IE6 hover errors */ /* still used by pages using diaryx.css. Can delete after those have been edited - these are those accessed via gappery, using photography folder, includes photgraphy, bustour and carfire via photography, rawsonpics, grampians and fungipics */ .pagelayout {width: 747px; margin-top: 0.5em; margin-right: 2%; margin-left: 2%; color: #ffffff; background-color: #007070; font-family: Arial, sans-serif; font-size: 1em; text-align: left;} /* LINK STYLE standards */ /* 220909 being superceded by currently embedded links code going as follows */ /* Newer link styles modified 23/9/09 */ /* a:link color=#a1ffe0(=lgreenblue) background-color=#006060(=dgreen)*/ a:link {color: #a1ffe0; background-color: #006060; text-decoration: underline;} /* Changed 22/10/09 so no change between visited and non-visited. Originally-used settings :visited color=#9fdae0=(bluegray) background-color=#006060(=dgreen)*/ /* a:link color=#a1ffe0(=lgreenblue) background-color=#006060(=dgreen)*/ a:visited {color: #a1ffe0; background-color: #006060; text-decoration: underline;} /* a:hover color=#ffff80(=midyellow) background-color=ff3366#(=crimson)*/ a:hover {color: #ffff80; background-color: #ff3366; text-decoration: underline;} /* Old links styles remmed out 23/9/09 these had the chocolate background a:link color=#a1ffe0(=lgreenblue) background-color=#705050(=chocolate) a:link {color: #a1ffe0; background-color: #705050; text-decoration: underline;} a:visited color=#9fdae0=(bluegray) background-color=#705050(=chocolate) a:visited {color: #9fdae0; background-color: #705050; text-decoration: underline;} a:hover color=#ffff80(=midyellow) background-color=ff3366#(=crimson) a:hover {color: #ffff80; background-color: #ff3366; text-decoration: underline;} */ /* LINK STYLES FOR creampanel for 'a' class=creampanel */ /* a.creampanel:link color=#ff3366(=crimson) background-color=#f5f5dc(=cream)*/ a.creampanel:link {color: #ff3366; background-color: #f5f5dc; text-decoration: underline;} /* a.creampanel:visited color=#a52a2a=(mahogany) background-color=#f5f5dc(=cream)*/ a.creampanel:visited {color: #a52a2a; background-color: #f5f5dc; text-decoration: underline;} /* a.creampanel:hover color=#ffff80(=midyellow) background-color=ff3366#(=crimson)*/ a.creampanel:hover {color: #ffff80; background-color: #ff3366; text-decoration: underline;} /* LINK STYLES FOR lightlink for 'a' class=lightlink with background-color=#f5f5dc(cream) [but for hover which is bgd=#ff3366(=crimson)], text-colors unused= crimson, visited= mahogany, hover= midyellow, all underline turned off, all margin=0.5em, all padding= 0px 3px 0px 3px, ie tops and bottom padding nil, right and left padding= 3px */ /* a.lightlink:link standard unused link, color=#ff3366(=crimson), background-color= #f5f5dc(=cream), underlining turned off */ a.lightlink:link {color: #ff3366; background-color: #f5f5dc; text-decoration: none; margin: 0.5em; padding: 0px 3px 0px 3px;} /* a.lightlink:visited, color=#a52a2a=(mahogany), background-color=#f5f5dc (=cream), underlining turned off, */ a.lightlink:visited {color: #a52a2a; background-color: #f5f5dc; text-decoration: none; margin: 0.5em; padding: 0px 3px 0px 3px;} /* a.lightlink:hover, color=#ffff80(=midyellow) background-color=ff3366#(=crimson)*/ a.lightlink:hover {color: #ffff80; background-color: #ff3366; text-decoration: none; margin: 0.5em; padding: 0px 3px 0px 3px;} /* CONTAINER box 'lightlinkbox' in which to place the above lightlinks using div class=lightlinkbox text-align=centre, font-size=75%, line-height=180% (separates lines of links), font-weight=bold */ .lightlinkbox {text-align: center; font-size: 75%; line-height: 180%; font-weight: bold;} /* LINK STYLES FOR olink (=orange links) for 'a' class=orlink */ /* a.orlink:link color=#ffcc00(= my orange) background-color=#007070(=dgreen)*/ a.orlink:link {color: #ffcc00; background-color: #007070; text-decoration: none; font-weight: bold;} /* No change between visited and non-visited.*/ /* a.orlink:link color=#ffcc00(= my orange) background-color=#007070(=dgreen)*/ a.orlink:visited {color: #ffcc00; background-color: #007070; text-decoration: none; font-weight: bold;} /* a.orlink:hover color=#ffff00(= yellow) background-color=ff3366#(=crimson)*/ a.orlink:hover {color: #ffff00; background-color: #ff3366; text-decoration: none; font-weight: bold;} /* 25/6/06 Copied into here from lightlink.css for gradual change to all in main.css */ /* LINK STYLES FOR poplightlink for 'a' class=poplightlink with background-color=#f5f5dc(cream) [but for hover which is bgd=#ff3366(=crimson)], text-colors unused= crimson, visited= crimson, hover= midyellow, all underline turned off, all margin=0.5em, all padding= 0px 3px 0px 3px, ie tops and bottom padding nil, right and left padding= 3px SAME AS lightlink but visited shows same as unused . For use in the popup images in the WAflowers, so always shows crimson on cream. */ /* a.poplightlink:link standard unused link, color=#ff3366(=crimson), background-color= #f5f5dc(=cream), underlining turned off */ a.poplightlink:link {color: #ff3366; background-color: #f5f5dc; text-decoration: none; margin: 0.5em; padding: 0px 3px 0px 3px;} /* a.lightlink:visited, color=#ff3366=(crimson), background-color=#f5f5dc (=cream), underlining turned off, */ a.poplightlink:visited {color: #ff3366; background-color: #f5f5dc; text-decoration: none; margin: 0.5em; padding: 0px 3px 0px 3px;} /* a.lightlink:hover, color=#ffff80(=midyellow) background-color=ff3366#(=crimson)*/ a.poplightlink:hover {color: #ffff80; background-color: #ff3366; text-decoration: none; margin: 0.5em; padding: 0px 3px 0px 3px;} /* 150506 copied following from bannerframe to endbcbox from bannerlinks.css etc to set up older top banner and top links and bottom links. Used mainly in diaryWA, WAflowers and WA flowersx, and mf_molecules* To be phased out as revisions happen to use graphics bag heading banner. */ /* div frame class=bannerframe for whole banner heading -use 100%->747-(2x15)=717 */ .bannerframe {width: 717px; padding: 4px; background-color: #f5f5dc; text-align: center; border: ridge #ffcc00 5px;} /* div box class=blpanel for Bill Leithhead name panel */ .blpanel {float: left; padding: 3px; background-color: #008080; color: #ffdd77; text-align: center; border: ridge #ffff00 5px; font-size: 90%; font-weight: bold;} /* div box class=elfpanel for Elfram domain panel */ .elfpanel {float: right; padding: 3px; background-color: #000000; color: #ff0000; font-size:75%; font-family: papyrus, arial; font-weight: bold; font-style: italic; border: ridge #ff00ff 3px;} /* span class=topichead for topic main heading */ .topichead {color: #007070; font-size: 150%; font-weight: bold;} /* span id=topicsub for topic sub-heading NB: requires class=clearfix for name panel to clear-float following links, hence use id= */ #topicsub {color: #00a090; font-size: 120%; font-style: italic;} /* div box class=topbcbox for top-page breadcrumb links */ .topbcbox {font-size: 75%; color: #ff3366; margin: 0px 0px 4px 0px; font-weight: bold} /* div class=endbcframe frame for end-page breadcrumb links -use 100%->747-(2x15)=717*/ .endbcframe {width: 717px; padding: 4px; background-color: #f5f5dc; text-align: center; border: ridge #ffcc00 5px;} /* div class=endbcbox box for end-page breadcrumb links - used by mf_molecules */ .endbcbox {font-size: 75%; color: #ff3366; vertical-align: middle; font-weight: bold} /* FONT SIZES set for use with class= */ /* text=60%(=1) */ .font60pc {font-size: 60%;} /* text=75% */ .font75pc {font-size: 75%;} /* text=90%(=2) */ .font90pc {font-size: 90%;} /* text=110%(=4) */ .font110pc {font-size: 110%;} /* text=150%(=5) */ .font150pc {font-size: 150%;} /* HEADING STYLES as class= used in earler web pages rawsonpics, autiobiogr_erot.., bustour and carfire via photog i.e. gallery, ineedyou, Retain until editing done on them all. */ /* top-heading 200%; color=#efffff(=pale-ice); italic */ .top-heading {font-size: 200%; color: #efffff; font-style: italic;} /* orange-subheading 150%; color=#ffcc00(orange); italic */ .orange-subheading {font-size:150%; color: #ffcc00; font-style: italic;} /* TEXT COLORS for use as class= */ /* white #ffffff(=white) */ .white {color: #ffffff;} /* paleice #efffff(=paleice) (my name) */ .paleice {color: #efffff;} /* cream #f5f5dc(=cream) (my name) */ .cream {color: #f5f5dc;} /* fawn #ebeadb(=fawn) (my name) */ .fawn {color: #ebeadb;} /* lgreen #90ffd0(=lgreen) (my name) */ .lgreen {color: #90ffd0;} /* citron #ccff77(=citron) (my name) */ .citron {color: #ccff77;} /* paleblue #ddfcff(=paleblue) (my name) */ .paleblue {color: #ddfcff;} /* cyan #00ffff(=cyan) (std name) */ .cyan {color: #00ffff;} /* skyblue #80eeff(=skyblue) (my name) */ .skyblue {color: #80eeff;} /* bluegray #9fdae0(=bluegray) (my name) */ .bluegray {color: #9fdae0;} /* paleyellow #fffebb(=paleyellow) (my name) */ .paleyellow {color: #fffebb;} /* midyellow #ffff80(=midyellow) (my name) */ .midyellow {color: #ffff80;} /* goldyellow #ffdd77(=goldyellow) (my name) */ .goldyellow {color: #ffdd77;} /* orange #ffcc00(=orange) (my name) */ .orange {color: #ffcc00;} /* lorange #ffe9c9(=lorange) (my name) */ .lorange {color: #ffe9c9;} /* pink #ffc0cb(=pink) (my name) */ .pink {color: #ffc0cb;} /* palegreen #e1ffe1(=palegreen) (my name) */ .palegreen {color: #e1ffe1;} /* deep coral #ff8080 (=deep coral) */ .deepcoral {color: #ff8080;} /* peppermint #a1ffe0 (=peppermint) */ .peppermint {color: #a1ffe0;} /* lime #00ff00(=lime) */ .lime {color: #00ff00;} /* mgreen #00a090(=mgreen) (my name) */ .mgreen {color: #00a090;} /* ochrebrown #c99d42(=ochrebrown) (my name) */ .ochrebrown {color: #c99d42;} /* crimson #ff3366(=crimson) (my name) */ .crimson {color: #ff3366;} /* teal #008080(=teal) */ .teal {color: #008080;} /* dkteal #007070(=dkteal) (my name)*/ .dkteal {color: #007070;} /* mahogany #a52a2a(=mahogany) (my name) */ .mahogany {color: #a52a2a;} /* chocolate #705050(=chocolate) (my name) */ .chocolate {color: #705050;} /* black #000000(=black) */ .black {color: #000000;} /* PANELS FOR DAY-DATE-PLACES IN TRIP DIARY */ /* daypanel text=centered; width=60%; padding=5px; border=7px #c0c0c0=(gray) double; */ .daypanel {margin-left: auto; margin-right: auto; width: 60%; padding: 5px; border: 7px #c0c0c0 double; background-color: #f5f5dc; text-align: center;} /* day text = #a5a52a(=mahogany), 110%, bold italic */ .daytext {color: #a52a2a; font-size: 110%; font-style: italic; font-weight: bold;} /* date text #ff3366(=crimson), 110%, italic */ .datetext {color: #ff3366; font-size: 110%; font-style: italic;} /* place text #00a090(=mgreen) , 110%, italic */ .placetext {color: #00a090; font-size: 150%; font-style: italic;} /* IMAGE BORDER */ /* For use as class=creamborder .creamborder border= 1px #f5f5dc(=cream) solid */ .creamborder {border: 1px #f5f5dc solid;} /* TABLE LEFT FLOATING AND PADDING */ /* lfloat */ .lfloat {float: left; margin: 0em 0.3em 0em 0em;} /* lfloatvertpad Pads 1em above and below box, 0.3em right, flush on left (0em) */ .lfloatvertpad {float: left; margin: 1em 0.3em 1em 0em;} /* lfloatpadup Pads 1em only above box, 0.3em right, flush on left (0em) */ .lfloatpadup {float: left; margin: 1em 0.3em 0em 0em;} /* lfloatpaddown Pads 1em only below box, 0.3em right, flush on left (0em) */ .lfloatpaddown {float: left; margin: 0em 0.3em 1em 0em;} /* TABLE RIGHT FLOATING AND PADDING */ /* rfloat */ .rfloat {float: right; margin: 0em 0em 0em 0.3em;} /* rfloatvertpad Pads 1em above and below box, 0.3em left, flush on right (0em) */ .rfloatvertpad {float: right; margin: 1em 0em 1em 0.3em;} /* rfloatpaddown Pads 1em only below box, 0.3em left, flush on right (0em) */ .rfloatpaddown {float: right; margin: 0em 0em 1em 0.3em;} /* rfloatpadup Pads 1em only above box, 0.3em left, flush on right (0em) */ .rfloatpadup {float: right; margin: 1em 0em 0em 0.3em;} /* TABLE RIGHT FLOAT AND PADDING FOR USE AS AN IDENTITY, id=, so can use together with class= */ /* ------EXPERIMENTAL ----------------------------------------------------------------------- */ /* #idrfloatpaddown Use as id= Pads 1em only below box, 0.3em left, flush on right (0em) */ #idrfloatpaddown {float: right; margin: 0em 0em 1em 0.3em;} /* #idrfloatpadup Use as id= Pads 1em only above box, 0.3em left, flush on right (0em) */ #idrfloatpadup {float: right; margin: 1em 0em 0em 0.3em;} /* CLEAR COMMANDS FOR DODGING ANY BOXES ABOVE */ /* clearboth */ .clearboth {clear: both;} /* clearall */ .clearall {clear: both;} /* clearall as an id= */ #clearall {clear: both;} /* #dodge Use as id= to dodge clear of any prior box */ #dodge {clear: both;} /* dodge Use as class= to dodge clear of any prior box */ .dodge {clear: both;} /* CAPTION COLORS */ /* skyblue75 */ .skyblue75 {color: #80eeff; font-size: 75%; text-align: left;} /* yellow75 */ .yellow75 {color: #ffff00; font-size: 75%; text-align: left;} /* lime75 */ .lime75 {color: #00ff00; font-size: 75%; text-align: left;} /* cream75 */ .cream75 {color: #f5f5dc; font-size: 75%; text-align: left;} /* Fix from http://www.positioniseverything.net/easyclearing.html */ /* Use as class= */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* Styles for popups from thumbnails. From other CSS File: popstyle.css */ /* For body class=poplook overall appearance - bgd=dkteal font= 12px white arial,sans-serif left-align */ .poplook {color: #ffffff; background-color: #007070; font-family: Arial, sans-serif; font-size: 12px; text-align: left;} /* For div class=popcaption as left-aligned, margin top & bottom 10px, both sides margin 0px */ /* NB: Caption width is left out as an extra inline style to be tweaked as required - standard setting is at 450px for normal 300x450px photo size */ .popcaption {text-align: left; margin:10px 0px 10px 0px;} /* Stylesheet thumbs2col.css to set up 2-column displays of flowers, fungi, etc. */ /* div class=thumbsadvice top-page thumbs advice */ .thumbsadvice {font-size: 90%; color: #ffdd77; text-align: center; padding-top: 10px; padding-bottom: 20px;} /* class=lbox sets left-floated lh box for thumb and text - use 48% => 345px; */ .lbox {float: left; width: 345px;} /* class=lthumb sets left-floated thumb in a floated box*/ .lthumb {float: left; margin: 0px 7px 1px 0px;} /* class=rbox sets right-floated rh box for thumb and text - use 48% => 345px */ .rbox {float: right; width: 345px;} /* span class=imgsize for each image text file size embedded at end of text */ .imgsize {color: #ffff00; background-color: #00a090;}