/* cemsearch.18.12.08.css */ /* ================================================================================= */ /* ******** 'initialize.css' ******** */ /* ================================================================================= */ /* of each page must contain: */ /* font stack for project; inherited everywhere unless overridden -----------------------------------------------------------------------------*/ html { font-family: Calibri, Helvetica, Candara, Arial, sans-serif; /* Verdana NG; Helvetica better than Arial; Arial is a bit narrower than Verdana but more difficult to read /* */ /* font-family: "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /* */ /* The monospace stack: */ /* font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; /* */ /* The Trebuchet-based sans serif stack: */ /* font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; /* */ /* The Verdana-based sans serif stack: */ /* font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; /* */ /* The Helvetica/Arial-based sans serif stack: */ /* font-family: Calibri, Frutiger, "Frutiger Linotype", Univers, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /* */ /* A more traditional Garamond-based serif stack: */ /* font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; /* */ font-size:75%; white-space:normal; /* nowrap|pre|pre-line|pre-wrap|initial|inherit */ color:#804000; } body { margin: 0; padding: 0; border: 0; /* -webkit-print-color-adjust:exact; */ } /* required after html5shiv to override default inline -----------------------------------------------------------------------------*/ article, aside, figure, footer, header, hgroup, nav, section { display:block; } /* Tables -----------------------------------------------------------------------------*/ table { border-spacing: 0; border-collapse: collapse; } td { text-align: left; font-weight: normal; } /* ================================================================================= */ /* "W3c CSS Validation Service" /* ================================================================================= */ http://www.css-validator.org/ www.cemsearch.ca/styles/cemsearch.18.12.08.css */ /* ================================================================================= */ /* --- common settings for all layout styles --------------------------------------------*/ /* ================================================================================= */ /* include padding & border in width/height for ALL elements * "content-box": Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included * "border-box": The width and height properties (and min/max properties) includes content, padding and border, but not the margin */ *{ box-sizing: border-box;} #container, #column_full, #content, #column_l, #column_r, #footer, #dataBox, #notesBox, #notesJS, #quSelect, #masthead, #mastheadFull, #mastheadCompact, #masthead404, #mastheadNone { /* border: none; /* comment out to show colored borders for debugging */ } #clickToEnter:hover { cursor:pointer; border:1px blue solid; border-radius: .8em; box-shadow: 0 0 15px #666 inset; /* that nice plaque effect; h-shadow v-shadow blur spread color inset */ } /* sections are used for turning blocks on and off vis php doDisplay() */ section { margin:0; padding:0; } /* apply lesser halo effect to selected boxes */ #nav li { box-shadow: 0 0 10px #ccc; /* that nice halo effect; h-shadow v-shadow blur spread color inset; */ } /* provide over riding color when transparency not supported */ #container, #column_full, #content, #column_l, #column_r { background:#f0f0f5; /* bkg color when transparency not supported (IE8) */ background:transparent; /* comment this out to simulate transparency not supported (IE8) */ } /* --- END common settings for all layout styles --------------------------------------------*/ #container { border: 1px solid #777; /* box-shadow: 0 0 50px #ffffaa; /* that nice external halo effect */ /* box-shadow: 0 0 25px #999944; /* dark yellow halo effect; works good with sunset bkg images */ /* box-shadow: 0 0 25px #dd9; /* light blue halo effect; works good with blue sky bkg images */ /* box-shadow: 0 0 20px #00007f; /* dark blue halo effect; works good with blue sky bkg images */ box-shadow: 0 0 25px #ddf; } .brdr { border: 6px double #E09641; } #column_full { height:auto; width:100%; padding-bottom:20px; /* push down the footer */ } #column_l { /* padding: 15px 10px; /*top/bot right/left */ /* overflow-x: hidden; */ } #column_r { /* padding: 15px 10px; /* top/bot right/left */ overflow-x: visible; } #content { color: #800000; } .link_box { padding-left: 3px; padding-right: 3px; padding-top: 15px; padding-bottom: 15px; border: 1px solid rgb(250,0,255); text-align: center; } .center { text-align: center; } /* Right Column */ #column_r img { /* border: 1px solid #808080; */ overflow-x: visible; } /* Site typography */ /* Headings */ h1 { font-size: x-large; color: #804000; border-bottom: solid 1px #4C9494; text-align: left; } h2 { font-size: large; color: #804000; /* color: #c77; */ border-bottom: solid 1px #4C9494; } h3 { font-size: medium; color: #804000; } h4 { font-size: small; color: #303000; } h5 { font-size: x-small; color: #c77; } h6 { font-size: xx-small; color: #c77; } /* all text in general */ p, blockquote, ol, ul, select, .content-brown, .small-brown, .med-brown, .small-grey, .med-grey, .xsmall-brown { font-size:small; /* font-size:100%; */ color: #804000; } .bold { font-weight:bold; } .blue { color:blue; } .brown{ color:#804000; } .grey { color:#ccc; } .small{ font-size:small; } .medium{ font-size:medium; } .large{ font-size:large; } .faint { color: #F08080; font-style:normal; font-variant:normal; font-weight: normal; font-size: 8pt; /*font-family:Verdana, Arial, Helvetica; */ xbackground-position: 0% } /* deprecated */ .bold-blue{ font-size:medium; font-weight:bold; color:blue; } .bold-blue-small{ font-size:small; font-weight:bold; color:blue; } .blue-small{ font-size:small; color:blue; } .content-brown{ color: #804000; font-size:medium; text-decoration: none;} .small-brown { color: #804000; font-size: small; text-decoration: none; } .med-brown { color: #804000; font-size: medium; text-decoration: none; } .small-grey { color: #ccc; font-size: small; text-decoration: none; } .xsmall-brown { color: #804000; font-size: x-small; text-decoration: none;} .med-grey { color: #ccc; font-size: medium; text-decoration: none; } .med-gray { color: #ccc; font-size: medium; text-decoration: none; } .faint-grey { color:darkgray; font-size:small; font-weight:normal; } .faint-gray { color:darkgray; font-size:small; font-weight:normal; } /* end deprecated */ /* Links */ a { color: #55f; text-decoration: none; } a:hover { color: #00f; text-decoration: underline; } .style_bold { font-weight: bold; } .style_italic { font-style: italic; } .search { margin: 0px; padding: 18px 36px 12px 36px; font-size: 1.2em; } .indented { margin-right: 50px; margin-left: 25px; } .dataDisplay, .dataDisplay2, .dataDisplay2Right { font-size: 1.8em; /* for IE8 */ font-size: 1.8rem; font-weight: bold; } .dataDisplay { color:blue; } .dataDisplay.medium { font-size:medium; } .dataDisplay.small { font-size:small; } .dataDisplay2 { text-align:right; color:red; } /* .dataDisplay2Right { float:right; color:red; text-align:right; font-size:medium; } */ .memoHTML { overflow:auto; /* so box will expand vertically when "more" button pushed */ } .memoHTML p { color: #404000; font-size: medium; font-weight:normal; } #CemeteryList { font-size: 1.0em; text-align: left; } .lastwords, .lastwordstext { /* float:left; */ display:inline-block; /* MUCH better! https://www.w3schools.com/css/css_inline-block.asp */ background-color:white; margin:1em; padding:0px; border:black 3px solid; border-radius: .5em; box-shadow: 0 0 15px #666 inset; /* that nice plaque effect; h-shadow v-shadow blur spread color inset */ } .lastwordstext { background-color:white; max-width:17em; min-width:12em; padding:2.0em; } .lastwordstext p:first-child { font-weight:bold; font-size:1.em; } #tableCtrs tr, #tableCtrs td { border-collapse:collapse; border:thin blue solid; width:25%; } .LatLong, .LatLongDigits { font-family:"Courier New", Consolas, Courier, monospace; font-variant-numeric:tabular-nums; font-weight:bold; font-size:medium; color:blue; margin:0; padding:0; } .LatLongDigits { color:crimson; } /* ================================================================================= */ /* ******** 'boxes.css' ******** */ /* ================================================================================= */ /* a selection of rounded corner boxes using HTML5 Note rounded corners and shadows are not implemented before IE9 but are available in other browsers (Crome,FIrefox, Safari, Opera) All boxes contain a width specification but this can be overriddden with a local style="width:nnnpx" */ /* * "content-box": Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included * "border-box": The width and height properties (and min/max properties) includes content, padding and border, but not the margin */ *{ box-sizing: border-box;} /* include padding & border in width/height for ALL elements */ .roundedBox, .roundedBox-transparent, #nav, .masthead-container, .masthead-image, #footer, #dataBox, #notesBox, #notesJS, #quSelect, #masthead, #mastheadSmall,#mastheadFull, #mastheadCompact, #masthead404, #mastheadNone, .innerRaisedBox, .innerBox, .inputBox { width: auto; padding:10px 20px 10px 20px; /* top. right, bottom, left */ border:1px solid #BFBFBF; border-radius:10px; margin:10px; /*overflow: auto; /* forces box to expand with contents but adds right scrollbar */ /* box-shadow:2px 2px 3px #aaaaaa; */ /* display:block; /* for IE6-7-8 html5shiv support */ } /* apply plaque effect to base boxes */ .roundedBox, .roundedBox-transparent, #nav, .masthead-container, .masthead-image, #dataBox, #notesBox, #notesJS, #quSelect, #mastheadCompact, #footer { -webkit-box-shadow: 0 0 5px #666 inset; /* that nice plaque effect; h-shadow v-shadow blur spread color inset */ box-shadow: 0 0 5px #666 inset; /* that nice plaque effect; h-shadow v-shadow blur spread color inset */ } /* adjust all background colors here except main container and columns */ .roundedBox, .roundedBox-transparent, #nav, #footer, #dataBox, #notesBox, #notesJS, #quSelect, #masthead, #mastheadSmall,#mastheadFull, #mastheadCompact, #masthead404, #mastheadNone,.innerBox ,#dataBox, .searchKeyBox, .roundedBoxfadedbottom ,#nav a, #nav li, .masthead-container, .masthead-image { /* background-color:#FFFAE7; /* original beige */ /* background-color:#FFFAF0; /* lighter beige */ background-color:#fff; } /* make a transparent frame with just the border and shadows */ .roundedBox-transparent { background:transparent; background-color:transparent; } /* inner boxes have raised halo effect */ .roundedBoxSpec, .innerBox, .innerRaisedBox { -webkit-box-shadow: 0 0 25px #bbb; /* that nice external halo effect; h-shadow v-shadow blur spread color inset */ box-shadow: 0 0 25px #bbb; /* that nice external halo effect; h-shadow v-shadow blur spread color inset */ } .noTopBotPadding { padding-top:0px; padding-bottom:0; } .innerRaisedBox { /* border:1px dashed blue; /* debug */ margin: 20px 0px 15px 0px; /* top right bot left */ border-radius:10px; } #dataBox, #notesBox, #notesJS { margin-top:1px; min-height:50px; /* adjust to suit normal ht of box beside it */ } #quSelect { padding-bottom:1em; } #quSelect > h1 { margin-bottom:0; } .boxSimple /* faint 1px border; no shadow; general use */ { background-color:white; opacity:0.7; border:1px solid #fefefe; border:1px solid #000000; border-radius:7px; width:90%; padding:20px; margin:5px; overflow: auto; /* forces box to expand with contents */ } .boxSimple p { color:black; font-weight:bold; } .boxshadow8 /* use for most pictures (med size) */ { padding:0px; margin:15px; margin-left:0px; border-radius:7px; border:2px black solid; -webkit-border-radius:7px; -moz-border-radius:7px; -o-border-radius:7px; box-shadow: 8px 8px 12px #888888; /* offset-x, offset-y, blur-radius, spread-radius, color, inset */ -webkit-box-shadow: 8px 8px 12px #888888; -moz-box-shadow: 8px 8px 12px #888888; -o-box-shadow: 8px 8px 12px #888888; } img /* anything else screws up google maps */ { border-style:none; box-shadow:0; margin:0; padding:0; } /* trying to solve rotation problems. https://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation https://github.com/exif-js/exif-js More notes here: C:\Longstreet\Webs\CemSearch\cemPix\Image Rotating */ img { image-orientation:from-image; /* experimental */ } .img-frame /* this similar to boxshadow8 but used in php function cemImage() */ { display:inline-flex; padding:10px; padding-bottom:20px; margin:10px; background-color:white; margin-left:15px; xborder:2px black solid; -webkit-border:2px black solid; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; box-shadow: 8px 8px 12px #000; /* offset-x, offset-y, blur-radius, spread-radius, color, inset */ -webkit-box-shadow: 8px 8px 12px #000; -moz-box-shadow: 8px 8px 12px #000; -o-box-shadow: 8px 8px 12px #000; } .img_center { text-align: center; } /* float left using display:inline-block; often much better than float left */ #Searchform .floating-box { display: inline-block; width: auto; height: auto; margin: 0px; padding:0; /* border:thin yellow solid; /* debug */ } .silent /* positionning boxes, not meant to be seen in any way; border allows for debug. */ { background-color:transparent; border-style:none; box-shadow:none; margin:0; padding:0; } /* ================================================================================= */ /* ******** 'layout.css' ******** */ /* ================================================================================= */ #container { width:85%; /* sets the margin around the background for desktops (other sizes via media.css below) */ max-width: 1000px; /* just the content area; add borders, padding, margins (i.e. will be greater than this) */ min-width: 200px; /* just the content area; add borders, padding, margins (i.e. will be greater than this) */ /* WAS 800px */ margin: 2px auto; /* centers it horizontally */ margin-top:5px; padding: 0px; padding-top:3px; padding-bottom:2px; border-radius:15px; border: 1px solid yellow; /* debug */ } @media (max-width:993px) /* tablets */ { #container { width:94%; /* sets the margin around the background */ } } @media (max-width:601px) /* phones */ { #container, #column_full { width:100%; /* sets the margin around the background */ border-bottom-style:none; padding-left:0; padding-right:0; margin-left:0; margin-right:0; /* border: 3px solid blue; /* debug */ } } #mastheadFull, #mastheadCompact, #masthead404, #mastheadNone /* based on roundedBox */ { position:relative; width:auto; margin-top:10px; margin-bottom:0px; margin-left:10px; margin-right:10px; padding: 0px; background-repeat: no-repeat; background-position:left; text-align: center; overflow: hidden; /* border: 1px solid white; /* debug */ } #mastheadNone { } #mastheadFull { background-image: url('/images/banner/banner2_1055wx341h.jpg'); height: 350px; } #mastheadCompact { background-image: url('/images/banner/banner2sub_1056wx98h.jpg'); height: 78px; } #masthead404 { background-image: url('/images/banner/banner2sub_1056wx98h.jpg'); height: 98px; } #masthead h1 { color: #000; margin-bottom: 0; } #masthead h3 { color: #9a9; margin-top: 0.5em; } #column_full { width: 100%; /* WAS auto */ border: 0; border-radius:15px; /* position: relative; float: left; */ margin: 4px auto; margin-top:0; overflow:hidden; background:white; /* where transparent not supported */ background:transparent; /* border: 1px solid blue; /* debug */ } #content { width: auto; margin: 0; padding: 0px; /* border: 1px solid orange; /* debug */ } #column_l, #column_r { margin: 0px; padding:0px; background:white; /* where transparent not supported */ background:transparent; /* border: 1px solid lime; /* debug */ } #column_l { float: left; width:65%; } #column_r { /* position: relative; /* /* float: right;*/ margin-left: 65%; } /* Footer */ #footer /* based on rounded box */ { text-align: center; clear: both; background: transparent; margin-top:0; padding:0; border: 1px white solid; /* debug */ } #footer p, #footer a { font-size: small; color:white; } #preamble { margin-top:1px; } /* uncomment parts for debugging */ #navigation, /* #masthead,*/ /* #container, */ #footer, #column_full, #content, #column_l, #column_r { /* border: none; /* enable to cancel debug */ /* background:white; /* where transparent not supported */ } .clear_both { clear:both; } /* ================================================================================= */ /* ******** 'masthead.css' ******** */ /* ================================================================================= */ .banner-image { background-image:url('/images/banner/banner2sub_1056wx98h.jpg'); width:100%; height:96px; float:left; padding:0; margin:0; margin-bottom:.2em; } .banner { padding-top:0; height:400px; width:100%; height:auto; background-color:transparent; } /* ================================================================================= */ /* ******** 'nav.css' ******** */ /* ================================================================================= */ /* following cascades from roundedBox in boxes.css */ #nav /* based on roundedbox */ { position:relative; margin-top:4px; margin-bottom:0px; margin-left:10px; margin-right:10px; padding:.7em .3em .5em .5em; /* top. right, bottom, left */ background-color:transparent; font-size:small; } #nav ul { list-style-type: none; width: 100%; margin: 0; padding: 0; } #nav li { float: left; height: auto; margin-left:.1em; margin-right:0px; margin-bottom: .1em; /* for dbl line spacing; #nav pad reduced to compensate */ border-radius:0.3em; /* box-shadow:2px 2px 3px #eee; /* none|h-shadow v-shadow blur spread color |inset|initial|inherit */ } #nav a { /* color: #804000; */ text-decoration: none; display: block; padding: .15em .3em; /* top/bot left/right */ border-top: 1px solid transparent; /* stop motion when hovering */ border-left: 1px solid transparent; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-radius:0.3em; /* box-shadow:2px 2px 3px #eee; /* */ } #nav a:hover { color: #0000FF; text-decoration: none; border-left-color:blue; border-top-color:blue; border-left-style:solid; border-top-style:solid; background-color: #FCF7E3; } #nav a:active { color: #FFF; text-decoration: none; border: 1px solid #ed9; background-color: #0000ff; } html>body #nav { overflow: hidden; } /* ================================================================================= */ /* ******** 'forms.css' ******** */ /* ================================================================================= */ label { cursor:pointer; } label:hover { /* text-decoration:underline; */ } form.formSearch /* the whole form */ { margin:0; padding:0; width:100%; /* background-color:wheat; /* debug */ /* overflow: hidden; /* forces box to expand with contents */ /* border:thin blue solid; /* debug */ } /* base settings for all user-interface devices */ button, .divButton, .divButtonY, form input[type=submit], form input[type=button], form button[type=submit], form button[type=button], form .optionsRadioBox { /* display: inline-block; /* inline element does not start on a new line and only takes up as much width as necessary */ white-space:normal; /* keep text inside box */ outline-style:none; /* or ugly in Chrome when pressed */ background-color:white; /* set borders for all devices */ border:1px gray solid; /* border-top: 1px solid transparent; /* stop motion when hovering */ /* border-left: 1px solid transparent; /* border-bottom: 1px solid #ccc; */ /* border-right: 1px solid #ccc; */ border-radius:5px; /* set shadows for all devices */ /* box-shadow: 3px 3px 5px #fff; /* none|h-shadow v-shadow blur spread color |inset|initial|inherit */ /* -webkit-box-shadow:3px 3px 5px #fff; /* set padding for all devices */ padding:5px; padding-left: 10px; padding-right: 10px; /* set margins for all devices */ margin-top:3px; /* usually want it spaced close to legend */ margin-left:auto; /* centers it; align deprecated */ margin-right:5px; margin-bottom:3px; /* MUST adjust bottom margin on bornBox if this is adjusted */ /* set font params for all devices (usually using inherited typeface) */ color:maroon; font-size:1.0rem; font-weight:bold; text-decoration: none; } /* special for buttons hovering over bkg image */ /* button, .divButton, .divButtonY, form input[type=submit], form button[type=button] { padding-top:5px; padding-bottom:5px; box-shadow: 3px 3px 3px #555; none|h-shadow v-shadow blur spread color |inset|initial|inherit -webkit-box-shadow: 3px 3px 3px #555; } */ form .inputSearchKey, #bornBox .inputBorn, #bornBox .inputDied { background-color:#fefef0; background-color:#eee; /*The monospace stack: */ /* font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; /* */ font-size:16px; color:black; white-space:normal; /* keep text inside box */ outline-style:none; /* or ugly in Chrome when pressed */ border-radius:3px; overflow:hidden; margin-top:10px; /* box-shadow: 2px 2px 7px #666; /* none|h-shadow v-shadow blur spread color |inset|initial|inherit */ /* -webkit-box-shadow: 2px 2px 7px #666; /* */ width: 90%; margin-left:5px; padding-left:5px; } /* style the placeholder text in input elements https://css-tricks.com/almanac/selectors/p/placeholder/ These are subject to change when spec finalized (sep 6, 2017) */ input::placeholder { font-size:small; font-weight:normal; color:gray; opacity:1; } input::-webkit-input-placeholder /* Chrome/Opera/Safari */ { font-size:small; font-weight:normal; color:gray; opacity:0.8; } input::-moz-placeholder /* Firefox 19+ */ { font-size:small; font-weight:normal; color:gray; opacity:0.8; } input:-ms-input-placeholder /* IE 10+ */ { font-size:small; font-weight:normal; color:gray; opacity:0.8; } input:-moz-placeholder /* old Firefox 18- */ { font-size:small; font-weight:normal; color:gray; opacity:0.8; } input::-moz-placeholder /* new Firefox Quantum 59- */ { font-size:small; font-weight:normal; color:gray; opacity:0.8; } .divButtonY { box-shadow:3px 3px 3px yellow; -webkit-box-shadow: 3px 3px 3px yellow; } #bornBox .inputBorn, #bornBox .inputDied { float:left; display:inline; width: 45%; padding-left:5px; padding-right:5px; margin-left:5px; margin-right:0; font-size:1.1em; } form .inputDied { /* float:right; */ } form .inputSearchKey:hover, #bornBox .inputBorn:hover, #bornBox .inputDied:hover { /* color:blue; */ /* font-size:1.15em; */ background-color:#f8f8f0; border-left-color:blue; border-top-color:blue; border-left-style:solid; border-top-style:solid; } form .inputSearchKey:focus, #bornBox .inputBorn:focus, #bornBox .inputDied:focus { /* color:blue; */ /* font-size:1.15em; */ background-color:#fcfcf0; border-left-color:blue; border-top-color:blue; cursor:text; } form input[attr=placeholder] { /* font-size:small; /* also changes input text si*/ } button:hover, .divButton:hover, div4.divButtonY:hover, form button:hover, form input[type=submit]:hover, form input[type=button]:hover { cursor:pointer; border-top: 1px solid blue; border-left: 1px solid blue; color:blue; /* text-decoration:underline; */ /* background-image: linear-gradient(top, #fafafa, #ddd); */ } form input[type=submit].invisible { position:absolute; left:-9999px; } form input[type=submit]:active, form input[type=button]:active { cursor:pointer; background-color: #e8e8e8; position:relative; top:2px; left:2px; box-shadow: 3px 3px 4px 2px rgba(0,0,0,.2) inset; -webkit-box-shadow: 3px 3px 4px 2px rgba(0,0,0,.2) inset; } form input[type=text]:disabled, form input[type=submit]:disabled, form input[type=button]:disabled, form button:disabled { cursor:text; background: #eee; color:aaa; } form input[type=text]:disabled:hover, form input[type=submit]:disabled:hover, form input[type=button]:disabled:hover, form button:disabled:hover { border-color:inherit; } form .optionsRadioBox { xxfloat:left; width:100%; /* font-family: Calibri, Frutiger, "Frutiger Linotype", Univers, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /* */ font-weight:normal; font-size:small; border-style:none; border-top: 1px solid transparent; /* avoid movement on hover */ border-left: 1px solid transparent; padding:0px; padding-top:15px; padding-left:15px; padding-bottom:0; padding-right:0; background-color:inherit; /* word-wrap: break-word; */ } form .optionsRadioBox input[type=radio] { } form .optionsRadioBox:hover { border-top: 1px solid blue; border-left: 1px solid blue; } .inputOptions { /* position:relative; padding-top:5px; */ } .showSQLselect { /* font-family:Calibri; */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter","Courier New", Courier, monospace; /* */ font-size:small; /* line-height:95%; /* */ color:black; } /* SELECTOR LISTS */ select.QuerySelectionList select:hover /* wtf? */ { border-top:1px blue solid; border-left:1px blue solid; } /* controls the first line of the options list (the heading) */ .QuerySelectionList:first-line { font-weight:bold; /* font-size:large; /* this screws up the size */ color:blue; } .QuerySelectionList:first-child { /*background-color:red; /* line down left edge */ } /* controls the select box when collapsed (the selected item) Use 'ql1' or 'cli' to control the options list dropdown */ .QuerySelectionList, .cemdatOthersSelectionList, cemQuerySelectionList { /* The monospace stack: */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; font-size: 1.3rem; text-align: left; width: 100%; font-weight: bold; border-radius:5px; padding:1em; padding-left:1.5em; margin-bottom:0.8em; -webkit-appearance: window; } /* controls the select box when collapsed (the selected item) Use 'ql1' to control the options list dropdown */ .oneCemSelectionList { /* The monospace stack: */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; xxfont-size: 14px; font-size:1.3rem; text-align: left; width: 100%; font-weight: bold; color: blue; border-radius:5px; /* padding:1em; */ padding-left:1.5em; /* margin-bottom:0.8em; */ -webkit-appearance: window; } .cemQuerySelectionList { font-size: .9em; } /* usage: 20 \e802"; } select:hover { /* color:blue; */ font-weight:bold; } input.mybutton-xx-small, input[type=button].xx-small { font-size: xx-small; color:blue; margin:1px; margin-bottom:5px; padding:3px 1px 3px 1px; /* top. right, bottom, left */ box-shadow:none; box-shadow: 1px 1px 4px #888; -webkit-box-shadow: 1px 1px 4px #888; } /* remove yellow halo for same-stone list (temp) */ .fixButtons { box-shadow:none; box-shadow:1px 1px 4px #888; -webkit-box-shadow: 1px 1px 4px #888; color:black; } /* box around input and option radios */ #bornBox { } .floatSearchKeyPairs { display: inline-block; width: auto; /* */ max-width:318px; /* double total width of .boxSearchKey */ height: auto; /*vertical-align:top; /* fails on chrome, safari; OK on FireFox */ margin: 0; padding:0; /* border:1px red dashed; /* debug */ } /* float left using display:inline-block; often much better than float left */ .boxSearchKey, .boxSearchKeyLeft, .boxSearchKeyRight { display:inline-grid; text-align:left; /* title on box, e.g. "Last Name" */ font-weight:bold; color:black; width: 150px; height:180px; /* height: auto; /* */ /* background-color:cornsilk; /* */ /* background-color:blanchedalmond; /* */ background-color:wheat; /* Keith prefers this colour */ /* vertical-align:top; /* */ margin-left:0; margin-right:0; margin-top:0; border-radius: 5px; padding:5px; padding-left:7px; border:1px solid blue; } .boxSearchKeyLeft { margin-left:0; margin-right:5px; } .boxSearchKeyRight { margin-left:0; margin-right:0; } .boxSearchNotes { /* clear:both; display:block; */ width:99%; height:auto; /* margin:10px; */ border:none; /* padding-bottom:15px; */ background-color:wheat; /* border:2px solid blue; /* debug */ } form .shadowOnWhite { border:1px darkgray solid; box-shadow: 3px 3px 3px #555; /* none|h-shadow v-shadow blur spread color |inset|initial|inherit*/ -webkit-box-shadow: 3px 3px 3px #555; } /* highlight "found" strings in memos search with FULLTEXT */ .memoHTML .src-highlight { font-weight:bold; color:blue; background-color:yellow; } /* my iPhone 6 and other phones; use smaller image */ @media screen and (max-device-width: 767px) { .xfloatSearchKeyPairs { max-width:100%; width:100%; margin-right:0; padding-right:0; /* border:2px black dashed; /* debug */ } .xroundedBox-transparent { margin-right:0; padding-right:0; width:100%; /*border:2px black dashed; /* debug */ } form.xroundedBox { margin-right:0; padding-right:0; width:100%; /*border:2px black dashed; /* debug */ } #container, #column_full, #enterSearchKeys /* OK 2020_05_10 */ { width:100%; padding-left:0; padding-right:0; margin-left:0; margin-right:0; /* border: 3px solid blue; /* debug */ } #nav, #oneCem.roundedBox, #boxSearchMemos, #ourVolunteers, #cemSynopsis /* OK 2020_05_10 */ { /* padding-left:0; padding-right:0; */ margin-left:0; margin-right:0; width:100%; /* border:thin black dashed; /* debug */ } } @media screen and (min-device-width: 768px) and (max-device-width: 1024px) { #BScontainer, #column_full { /* max-width:100%; */ width:100%; padding-left:0; padding-right:0; } } /* media sizes from bootstrap */ @media screen (min-device-width:768px) { .BScontainer { width: 750px; } } @media screen (min-device-width:992px) { .BScontainer { width: 970px; } } @media screen (min-device-width:1200px) { .BScontainer { width: 1170px; } } @media screen and (max-width:767px) { } @media (max-device-width:480px) and (orientation:landscape) { } @media screen and (min-width:768px) { } /* ================================================================================= */ /* ******** 'background.css' ******** */ /* ================================================================================= */ body { /* background-repeat:repeat-x; /* */ background-attachment:fixed; /* will not scroll with container */ /* http://www.w3schools.com/colors/colors_names.asp */ background-color:plum; /* when no image */ background-size: cover; /* fill the space */ /* background: -webkit-linear-gradient(LightSkyBlue, SpringGreen); /* For Safari 5.1 to 6.0 */ /* background: -o-linear-gradient(blue, green); /* For Opera 11.1 to 12.0 */ /* background: -moz-linear-gradient(blue, green); /* For Firefox 3.6 to 15 */ /* background: linear-gradient(LightSkyBlue, SpringGreen ); /* Standard syntax (must be last) */ /* show something for IE8 */ /* 1920w.070.jpg is the compression ratio. 70-75% seems to be optimum for filesize vs. quality */ /*background-image: url('/images/background/1920w.070b.jpg'); */ /* background-image: url('/images/background/1024w.070.jpg'); */ } @media only screen and (min-device-width: 1601px) { body { background-image: url("/images/background/SP/1920w.jpg"); } } @media only screen and (min-device-width: 1281px) and (max-device-width: 1600px) { body { background-image: url("/images/background/SP/1600w.jpg"); } } /* Tablets (my iPad uses this, also iPad mini) */ @media only screen and (min-device-width: 668px) and (max-device-width: 1280px) { body { /* not useful for image on small devices */ background-image: url("/images/background/SP/640w.jpg"); /* */ /* background-image:none; /* for test */ } } /* iPhone 6 and other phones (mine too)*/ @media only screen and (max-device-width: 667px) and (orientation: portrait) { body { /* not useful for image on small devices */ background-image:none; } #container { min-width: 98%; /* fill it out; just the content area; add borders, padding, margins (i.e. will be greater than this) */ border-style:none; padding:0; } } @media only screen and (max-device-width: 667px) and (orientation: landscape) { body { /* not useful for image on small devices */ /* background-image: url('/images/background/0800w.070.jpg'); /* */ /* background-image: url("/images/background/SP/800w.jpg"); /* */ /* background-attachment:fixed; /* will not scroll with container */ background-image:none; } #container { min-width: 96%; /* fill it out; just the content area; add borders, padding, margins (i.e. will be greater than this) */ } } /* ================================================================================= */ /* ******** 'help.css' ******** */ /* ================================================================================= */ .helptip { position:static; width:auto; display: inline-block; } /* Pointers on box border */ /* Pointer at the left of the helptip */ .helptip .helptiptext.pointerleft::after { content: " "; position: absolute; top: 6%; right: 100%; /* To the left of the helptip */ margin-top: -6px; border-width: 6px; border-style: solid; border-color: transparent #804000 transparent transparent; } .helptip-float-right { float:right; /* */ } .helptip-float-left { float:left; /* */ } /* Pointer at the right of the helptip */ .helptip .helptiptext.pointerright::after { content: " "; position: absolute; top: 50%; left: 100%; /* To the right of the helptip */ margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent #804000; } .helptip .helptiptext { font-size:small; visibility: hidden; opacity: 0; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; background-color: #fdf1d7; color: #804000; text-align: left; border: 6px solid #804000; border-radius: 6px; padding:.5em; padding-left: 18px; /* min-width:60%; */ margin-right:0.5em; margin:auto; overflow:auto; /* Position the helptip*/ position: absolute; z-index: 1; } /* different font for first line (title) */ .helptip .helptiptext:first-line { font-size:medium; font-weight:bold; /* color: #804000; */ } /* font size for all text */ .helptip span { font-size:0.95em; font-weight:normal; /* color: #804000; */ } .helptip:hover { cursor:help; } .helptip:hover .helptiptext { visibility:visible; opacity: 1.0; } /* put a box around some text in the help message to simulate a data entry box */ /* [shortcut: ] */ .helptip .hlpBoxUL { /*font-style:italic; /* Lee */ text-decoration:underline; /* color: #804000; */ } .helptip .hlpBox { display:inline; font-style:normal; /* font-weight:bold; */ color: #222; /* width:4em; does nothing */ padding:0; padding-left:0.1em; padding-right:0.1em; margin-left:0.1em; margin-right:0.1em; border:1px solid #f0f0f0; border:1px solid #d09040; border:1px solid #000; border:1px solid #b85c2e;1 background-color:transparent; } /* Underline the Help bullet and help text to simulate the radio button */ /* [shortcut: ] */ .helptip .hlpBullet { font-weight:bold; color: #804000; } /* Lee's version */ /* [shortcut: ] */ .helptip .hlpBullet2 { font-size: 1.1em; font-weight: bold; } /* help example [shortcut: ] */ .helptip .hlpEgi { font-style:italic; /* Lee */ text-decoration:none; } /* underlines the examples [shortcut */ .helptip .hlpEgul { font-style: normal; /* Lee */ border-bottom:thin gray dotted; } /* adds single quotes around examples [shortcut */ .helptip .hlpEgq { font-style: normal; /* Lee */ text-decoration:none; /* color: #804000; */ } /* special handling for certain help messages. * note the array index $ref is automatically added to the class spec */ .helptip .hlpSearchOptions, .helptip .hlpLeeSearchOptionsSurname, .helptip .hlpLeeSearchOptionsGiven, .helptip .hlpLeeSearchOptionsMaiden { /* max-width:30%; */ } .helptip .hlpBornDied { min-width:18%; max-width:50%; } .helptip hlp_queryCount { } .helptip hlp_noResult { } .helptip hlp_noKeys { } .helptip hlp_newSearch { } .helptip hlpSelectCemetery { } /* === https://www.w3schools.com/css/css_tooltip.asp ============== */ .tooltip { position: relative; display: inline-block; /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } .tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } /* ================= */ .yellowmsg-query { width:100%; width:auto; font-family: Calibri, Candara, Arial, sans-serif; font-size:medium; font-weight:bold; color:blue; background-color:wheat; /* xxxxxxxx this seems to be dominant xxxxxxxxxxxxxxxxxxx */ box-shadow: 2px 2px 10px #888; min-height:1.5em; margin-bottom:5px; margin-right:10px; border-radius:5px; padding:10px; } /* ================================================================================= */ /* ******** 'table.css' ******** */ /* ================================================================================= */ #table1 { border-collapse: collapse; border: 1px solid #808080; /* just border around table */ width: 100%; } #table1 td { /* border-collapse: collapse; */ border: 1px solid #808080; /* borders all sides of all cells */ padding: 1px 10px; } #tablePhp { border-collapse: collapse; border: 1px solid #808080; /* just border around table */ width: 100%; } #tablePhp td { /* border-collapse: collapse; */ border: 1px solid #808080; /* borders all sides of all cells */ padding: 1px 10px; width:150px; } #tableImageFileCount { border-collapse: collapse; border: 1px solid #808080; /* just border around table */ /* width: 90%; */ } #tableImageFileCount table, #tableImageFileCount td, #tableImageFileCount tr { color:blue; font-size:small; } #tableImageFileCount td { /* border-collapse: collapse; */ border: 1px solid #808080; /* borders all sides of all cells */ padding: 1px 10px; width:350px; } #tableEntry { border-collapse: collapse; border-style: none; /* border: 1px solid #808080; /* borders all sides of all cells */ width: 100%; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; text-align: left; margin-left:auto; /* centers it; align deprecated */ margin-right:auto; margin-top:20px; margin-bottom:20px; vertical-align:text-top; } #tableEntry td { /* border: 1px solid #808080; /* borders all sides of all cells */ /* border-collapse: collapse; */ /* border-width: 1px; */ /* border-color: #0000ff; */ border-style: none; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px; text-align: left; margin-left:auto; /* centers it; align deprecated */ margin-right:auto; vertical-align:text-top; } #tableBurial { border-collapse:collapse; /* border: 1px black; */ width: 100%; padding: 5px; } #tableBurial tr, #tableBurial td { /* border-bottom: 1px solid black; */ vertical-align:middle; } #tableCem tr, td { border-collapse: collapse; border: none; width: 100%; padding: 5px; } /* ================================================================================= */ /* ******** 'spinner.css' ******** */ /* ================================================================================= */ div#spinner1, div#spinner2 { position: absolute; margin: -75px 0 0 -75px; left: 50%; top: 60%; z-index: 2; width: 6em; height: 6em; border: 0.9em solid black; border-top: 0.9em solid yellow; /* #3498db; */ border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Add animation to "page content" */ .animate-bottom { position: relative; animation-name: animatebottom; animation-duration: 1s; } @keyframes animatebottom { from{ bottom:-100px; opacity:0; } to{ bottom:0; opacity:1; } } /* ================================================================================= */ /* ******** 'media2.css' ******** */ /* ================================================================================= */ /* @media changes for Responsive Design */ /* simplified; see media_general.css as well */ /* long instruction msgs normally on; turned off for iPhone usage: see volunteer.html.php */ .phoneNoShow { display:inherit; } /* allows a msg, normally off, to appear where iOS "selects" don't open up, eg iPad. e.g.:
Touch here to see list:
usage: see volunteer.html.php */ .touchHere { display:none; /* default is no-show; shows on iPad etc but not iPhone picker */ margin:0; margin-left:1em; margin-bottom:-.8em; padding:0; padding-left:.4em; font-weight:bold; /* border:black 1px solid; /* for testing; normally no border */ } /* Desktops */ /* iPhone 6 and other phones*/ @media only screen and (max-device-width: 667px) and (orientation: portrait) { #masthead /* based on roundedBox */ { /* background-image: url('xxx.jpg'); width:94%; */ } /* expand left column to full screen width and * place right column below it. */ .commentBubble { width:98%; } /* long instruction msgs turned off for iPhone */ .phoneNoShow { display:none; } /* allows a msg to appear where iOS selects don't open up like on iPad */ .touchHere{ display:block; } } /* iPhone 6 and other phones*/ @media only screen and (max-device-width: 667px) and (orientation: landscape ) { #masthead /* based on roundedBox */ { /* background-image: url('xxx.jpg'); width:95%; */ } /* long instruction msgs turned off for iPhone */ .phoneNoShow { display:none; } /* allows a msg to appear where iOS selects don't open up like on iPad */ .touchHere{ display:block; } } /* iPad mini Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { /* allows a msg to appear where iOS selects don't open up like on iPad */ .touchHere{ display:block; } } /* iPad mini Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { #masthead /* based on roundedBox */ { /* background-image: url('xxx.jpg'); width:97%; */ } /* expand left column to full screen width and * place right column below it. */ .commentBubble { width:98%; } /* allows a msg to appear where iOS selects don't open up like on iPad */ .touchHere{ display:block; } } /* iPad mini Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { #masthead /* based on roundedBox */ { /*background-image: url('xxx.jpg'); width:98%; */ } /* expand left column to full screen width and * place right column below it. */ .commentBubble { width:98%; } /* allows a msg to appear where iOS selects don't open up like on iPad */ .touchHere{ display:block; } } /* end - iPad mini ----------- */ /* iPad 1 and 2 Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { /* allows a msg to appear where iOS selects don't open up like on iPad */ .touchHere{ display:block; } } /* iPad 1 and 2 Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { /* allows a msg to appear where iOS selects don't open up like on iPad */ .touchHere{ display:block; } } /* iPad 1 and 2 Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { /* allows a msg to appear where iOS selects don't open up like on iPad */ .touchHere{ display:block; } } /* -end iPad 1 and 2 ----------- */ /* ----------- ----------- */ /* iPad 3 and 4 Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { } /* iPad 3 and 4 Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { } /* iPad 3 and 4 Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) /* and (-webkit-min-device-pixel-ratio: 1) invalid */ { } /* -end- iPad 3 and 4 ----------- */ /* ----------- ----------- */ /* Galaxy Tab 10.1 Portrait and Landscape */ @media (min-device-width: 800px) and (max-device-width: 1280px) { } /* Galaxy Tab 10.1 Portrait */ @media (max-device-width: 800px) and (orientation: portrait) { } /* Galaxy Tab 10.1 Landscape */ @media (max-device-width: 1280px) and (orientation: landscape) { } /* -end - Galaxy Tab 10.1 ----------- */ /* ================================================================================= */ /* ******** 'noscript.css' ******** */ /* ================================================================================= */ /* USAGE: */ .modal-message { position: fixed; z-index: 7050; width: 600px; min-width: 380px; left: 50%; top: 250px; margin-left: -300px; padding: 20px; border-radius: 20px; background: black; } .modal-message p { color: #999; font-size: 13px; margin: 0 0 25px 0; } .modal-message .modal-buttons { margin: 0; } .modal-message .button, .modal-message .button-fullwidth { float: none; } .modal-message.modal-warning { border: 10px solid red; box-shadow: 0 0 50px red; } .modal-title { font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; font-size: 32px; font-weight: bold; margin: 0 0 10px 0; line-height: 1.2; color:orange; text-align:center; } .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } #overlay, .noscript-overlay { position: fixed; display: none; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); /* RGB + opacity */ z-index: 6500; } /* ================================================================================= */ /* ******** 'debugBoxes.css' ******** */ /* ================================================================================= */ /* uncomment rows to highlight divs * note margins and padding separate the borders but may compromise desired behaviour */ /* body{ border:3px black dotted; } /* for debug */ /* #container{ border:3px blue dotted; } /* for debug */ /* #column_full{ border:3px red dashed; } /* for debug */ /* .silent { margin: 2px; padding:2px; } .floating-box { margin: 2px; padding:2px; } .roundedBox-transparent { margin: 1px; padding:1px; } */ /* div { border:1px blue dotted; } /* */ /* .silent { border:2px red dashed; } /* */ /* .floating-box { border: 2px blue dotted; } /* */ /* .roundedBox { border:1px black dashed; } /* */ /* .roundedBox-transparent { border:thin black dotted; } /* */ /* form{ border: 2px black solid; } /* */ /* .floating-box{ border:thin yellow solid; } /* debug */ /* .floatSearchKeyPairs{ border:2px red dashed; } /* debug */ /* ================================================================================= */ /* /styles/fontello-1dc09538/css/my-icons.css */ /* ================================================================================= */ @font-face { font-family: 'my-icons'; src: url('fontello-1dc09538/font/my-icons.eot?77664163'); src: /*url('fontello-1dc09538/font/my-icons.eot') format('embedded-opentype'), url('fontello-1dc09538/font/my-icons.woff2') format('woff2'), url('fontello-1dc09538/font/my-icons.woff') format('woff'),*/ url('fontello-1dc09538/font/my-icons.ttf') format('truetype'), url('fontello-1dc09538/font/my-icons.svg') format('svg'); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windows. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'my-icons'; src: url('fontello-1dc09538/font/my-icons.svg?77664163#my-icons') format('svg'); } } */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "my-icons"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .icon-search:before { content: '\e800'; } /* '' */ .icon-camera:before { content: '\e801'; } /* '' */ .icon-camera-alt:before { content: '\e802'; } /* '' */ .icon-thumbs-up:before { content: '\e803'; } /* '' */ .icon-thumbs-down:before { content: '\e804'; } /* '' */ .icon-down:before { content: '\e805'; } /* '' */ .icon-left:before { content: '\e806'; } /* '' */ .icon-right:before { content: '\e807'; } /* '' */ .icon-up:before { content: '\e808'; } /* '' */ .icon-down-outline:before { content: '\e809'; } /* '' */ .icon-left-outline:before { content: '\e80a'; } /* '' */ .icon-right-outline:before { content: '\e80b'; } /* '' */ .icon-up-outline:before { content: '\e80c'; } /* '' */ .icon-down-small:before { content: '\e80d'; } /* '' */ .icon-left-small:before { content: '\e80e'; } /* '' */ .icon-right-small:before { content: '\e80f'; } /* '' */ .icon-up-small:before { content: '\e810'; } /* '' */ .icon-camera-1:before { content: '\e811'; } /* '' */ .icon-cancel-circle:before { content: '\e812'; } /* '' */ .icon-camera-3:before { content: '\e813'; } /* '' */ .icon-thumbs-up-1:before { content: '\e814'; } /* '' */ .icon-cancel:before { content: '\e815'; } /* '' */ .icon-cancel-circle-1:before { content: '\e816'; } /* '' */ .icon-thumbs-up-alt:before { content: '\f164'; } /* '' */ .icon-thumbs-down-alt:before { content: '\f165'; } /* '' */ .icon-question-circle-o:before { content: '\f29c'; } /* '' */ .icon-camera-2:before { content: '\f4f7'; } /* '' */ /* obfuscated emails */ .mail-link { /* text-decoration:underline; */ border:thin black solid; padding-left:5px; padding-right:5px; color:blue; white-space: nowrap; /* prevent wrapping in middle of "email Ron" */ } .mail-link:hover { cursor:pointer; }