@charset "utf-8"; /* telephone character and quotes */
/* normalize css - min @ git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button, html input[type=button], input[type=reset], input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox], input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/* fix line spacing for superscripts (footnotes) - this is already in Normalize.css */
html { /* margin:0; padding:0; height:100% */
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* STANDARD CSS FOR MOST SITES */
body { padding:0; margin:0; max-width:100%;} /* don't think the max is doing anything? */
/* for a page that may be short apply stickyfooter class to the body to expand page so that footer sticks to bottom */
/* http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ won't work <=IE9 */
body.stickyfooter {
display: -ms-flexbox;
-ms-flex-direction: column;
/* display: -webkit-flex;-webkit-flex-direction: column; iOS */
display: flex;
min-height: 100vh;
height: 100vh;
flex-direction: column;
}
body.stickyfooter .page {
/* IE10, ugh explicitly setting each optional variable is key to making work on all */
-ms-flex: 1 0 auto;
/* Unprefixed */
flex: 1 0 auto;
}
/* LINKS */
a { text-decoration:none; }
.normal-link a, a.normal-link, .plain-link a, a.plain-link { color:inherit; font-size:inherit; } /* no color or size change from surrounding text */
.normal-link a, a.normal-link { text-decoration:underline; }
/* don't let a click or touch show a rectangle around links (however - this method still allows FOCUS for keyboard nav */
a:active {
outline:none;
}
/* CLEAR FIX make sure divs where this is applied don't need their own use of AFTER */
.box:after, .clearfix:after, .group:after { /* only needed to clear an IMG which has been floated..
OR make a parent div expand to enclose floated children */
content: "";
display: table;
clear: both;
}
ul {list-style-type:none;} /* make no bullets the default */
img,object {border:0;
max-width: 100%; /* scale large image down to parent width rather than blowing up the parent */
height: auto; /* might need to add !important ... adjust height proportionally ...fails in ie8*/
}
img.scaled { width: 100%; }
video, .youtube-player { max-width:100%; border-width: 0; } /* my test showed auto height doesn't resize vid while playing... definitely bad on iframe */
/* video, .youtube-player { width:100%; border-width: 0;} */
iframe { max-width:100%; border:none; }
/* http://designshack.net/articles/css/how-to-center-anything-with-css */
.centertext, .caption { text-align:center; }
.centerfixedblock { margin-left: auto; margin-right: auto; } /* width: must be declared somewhere */
.centervaribleblock { display: inline-block; } /* parent must have centered text-align */
.center-vh-fixed { display:inline-block ;position :fixed; margin:auto; left: 0; right: 0; top:0; bottom:0; } /* non-scrolling; parent irrelevant vert and horz, no prob in small windows */
.textright{ text-align:right; }
.textleft{ text-align:left; }
.divright { margin-left:auto; margin-right:0; }
.divleft { margin-left:0; margin-right:auto; }
.alignleft { float: left; }
.alignright { float: right; }
.spanleft { float: left; }
.spanright { float: right; }
.clearboth { clear:both; }
.clearright { clear:right; }
.clearleft { clear:left; }
.unindent {margin-left:0;padding-left:0;}
q { display: inline; quotes: "“" "”" "‘" "’"; } /* chrome needs the quotes */
q:before { content: open-quote; } /* should be able to use this on other elements as well? */
q:after { content: close-quote; }
/* unfortunately ANDROID botches this -- they replace some high character special characters with more common substitute characters
but they don't replace the escape codes in the content properties and print nothing -- NOW IT SEEMS TO BE WORKING??? */
/* span.ldquo:before { content: "“"; } */ /* in case you need to do your own,,q over two divs... not closed... */
/* span.rdquo:after { content: "”"; } */
span.mdash:before,span.mdash-phrase:before { content: "\200A\2014\200A"; } /* mdash with proper slight spacing around it - no content span allowed */
span.mdash-phrase:after { content: "\200A\2014\200A"; } /* use mdash-phrase for mdash before and after a phrase within the span */
.framed { border:3px solid; } /* uses current text color for most browsers? */
.round {
border-radius: 50%; /* oversizing makes it round too */
/* Prevent background color leak outs
-webkit-background-clip: padding-box;
-ms-background-clip: padding-box;
background-clip: padding-box; */
}
.phone-icon-before:before {
content:"☎"; /* \0260E */
}
/* CHEVRON usage: or add tag.class to the definition below */
/* uses border to make an upward pointing chevron then rotates it depending on second class (right bottom left) */
/* if you have a nav element with a class of next you could either give it the chevron class on all your pages or alternatively
just add it to the (all) chevron code and to the chevron.right code... */
.chevron::before {
border-style: solid;
border-width: 0.22em 0.22em 0 0;
content: '';
display: inline-block;
position: relative;
-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); /*-o-transform: rotate(-45deg); -moz-transform: rotate(-45deg);*/
transform: rotate(-45deg);
vertical-align: middle;
height: .6em;
width: .6em;
left: 0;
top: 0;
margin: 0 .5em;
}
.chevron.right:before { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.chevron.bottom:before { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg) ; }
.chevron.left:before { -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
/* original borrowed code
.chevron::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0.15em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
}
.chevron.right:before { left: 0; transform: rotate(45deg); }
.chevron.bottom:before { top: 0; transform: rotate(135deg); }
.chevron.left:before { left: 0.25em; transform: rotate(-135deg); }
*/
/* code to take a NAV section with a paragraph containing two links with IDs prev and next
it spaces them out 50/50 side by side in their parent and adds arrows to right and left
I probably should add a prev-next class to NAV and forget about parent class...
ADD your background color to P and hover color to A ...
*/
.links nav p { display:table; width:100%}
.links nav a { padding:3px;
display: table-cell;
vertical-align: middle; width:50%}
.links nav #next { text-align:right; }
/* the triangles are problematic. I had the perfect pair and mobile started substituting colored emoji, the current pair works but need to spec arial, helvetica */
/* .links nav p:before, .links nav p:after {
font-family: sans-serif-light, Arial, Helvetica, 'Noto Sans', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size:1.5em;
line-height: 1;
} */
/* 25ba 25c4 not similar on Android. 25c0 25b6 replace by emoji; 2bc8 not available in most fonts */
/* \FE0E tells not to use emoji, but since Android doesn't have the standard characters it still uses emoji */
.links nav p:after { display: table-cell; content:"\25b6\FE00"; vertical-align: middle; padding:3px; text-align:right;}
.links nav p:before { display: table-cell; content:"\25c0\FE01"; vertical-align: middle; padding:3px; } /* 25c0 \2bc7 \FE0E */
/* CODE TO SHOW-TOGGLE TEXT INLINE (works on just about everthing except ie8 which doesn't support the :checked selector)
- unhiding a SPAN is my own adaptation
- and adapted to use class rather than id so applies to any of the class allowing multiple uses on a page
- can still use id for special casing
- must be flow elements (not block) to be valid html
*/
.inline-link {
cursor: pointer;
/* color:white; moved to color section, should be color of link text */
}
.inline-link span.toggle {
display: none;
}
.inline-link:hover {
cursor: pointer;
/* color:white; moved to color section, could be color of normal link hover or no color change */
}
.inline-link-checkbox {
display: none; /* hide the actual checkbox square */
}
/* these show the extra text and set the color back to the text around it */
.inline-link-checkbox:checked + .inline-link span.toggle {
display: inline;
}
.inline-link-checkbox:checked + .inline-link {
color:inherit;
}
/* toggled definitions - code to pop-in a box into a paragraph upon clicking the word */
/* this formats the definition -- actual hide and reveal done using toggle-link code */
span.definition {
display: block; margin:30px; padding:10px 20px; font-size:larger; font-style:normal; }
.def-entry, .def-partofspeach, .def-meaning { display: block; }
.def-entry { font-size:larger; font-weight:bold; }
.def-partofspeach { font-size:smaller; font-style:italic; margin-bottom:10px; }
.def-meaning { margin-left:30px; }
/* to show the url of a link next to the link text - you can set the class of the tag
but more commonly will want to add the class once to the parent of a list of links */
a.show-href:link:after,
a.show-href:visited:after,
.show-href a:link:after,
.show-href a:visited:after {
content:" [" attr(href) "] ";
opacity:.3;
}
.hr-ellipses {
text-align:center;
letter-spacing:2em;
text-indent: 2em; /* fixes centering since centering includes the extra character space to the right of the last letter */
}
.hr-ellipses:before {
content:'\00B7\00B7\00B7'; /* \00B7=middot \2022=bullet(fatter) */
}
.links { padding-top:1em; padding-bottom:1em; }
/* SOME SPECIFIC TEXT FORMATING */
body, .sans { font-family:"Trebuchet MS",Arial,sans-serif; }
.whiteback p, .serif p { font-family:Perpetua, "Times New Roman", Garamond, serif; }
.verse, p.verse { font-family:Papyrus, Perpetua, "Times New Roman", Garamond, serif; line-height:200%; font-weight:bold; }
.verse { font-size:150%;}
p.verse { font-size:120%;}
.small {font-variant:small-caps;}
p {font-size:1.1em; }
/* a {font-weight:bold; } */
h1 {font-size:1.3em; margin-top:0;}
h2, h3 {font-size:1.2em;}
.note{font-size:.9em;}
.caption, .ittynote {font-size:.8em; font-style:italic;}
.tinycitation {font-size:.5em; }
.no-top {margin-top:0; padding-top:0;}
.no-bottom {margin-bottom:0; padding-bottom:0;}
ul { margin-left:1em; } /* use em for larger at larger font, pixels for consistent alignment even w diff font-sizes */
li, .text-like-li { font-size:75%; }
li a, li .a { font-size:medium;}
/* SPECIFIC CSS */
.page { padding:0; margin:50px; }
.section { padding:30px; max-width:660px; } /* no margin (to edge of page) spaced with padding which can be back-colored */
/* need to consider making PAGE the defined width instead of section... */
.section>.section { margin-left:-30px; margin-right:-30px; } /* margin:initial -30px; }
nested sections shouldn't be indented but should still be able to color differently
initial top/bottom so we can change on individual pages if necessary without specifying the double */
.section-number {font-size:.7em; margin-bottom:0;}
.footnotes{ /* music, thefall,... */
margin-top: 30px;
font-size:0.8em;
line-height: normal;
}
.footnotes:first-child, .footnotes.section { margin-top: 0;} /* bit of a hack to take care of cases where footnotes a div on it's own within page vs within a section to contain them */
div.indent {padding-left:32px;}
/* inline block (used in: sketchbooks, sitemap... */
.box {
display:inline-block;
margin:30px 30px 30px 0;
width:320px;
vertical-align:top; /* otherwise text in a bigger box is centered vertically */
clear:both; /* */
}
.toolbaricons img { vertical-align:middle;}
.toolbaricons a { margin-left:8px; }
#main-toolbar-icons {padding:0; margin:0; max-width:100%; font-size: 0;
/* switched to an 80px png even tho full size png is small and scales well,
due to ie8 (and some phone browsers) not sizing it down */
background:#222 url(../images/aam-logo-transparent-letters-black-80px.png) left top no-repeat;
background-size:80px 80px;
background-attachment:fixed;
position:relative; /* for hover */ z-index:10;
text-align:right;
}
#main-toolbar-icons a { position:relative;
margin-left:80px; width:80px; height:80px; display:inline-block; vertical-align:bottom;}
/* these images shouldn't go in data URIs within this file. This exact file could be used in another website with diff images in those filenames.
classnames should be made generic too, really IDs should be used unless you'd want to use them in another toolbar on same page. */
#tb-home { background:url('tb-images/tb-home.gif') no-repeat center top;}
#tb-home:hover { background-image:url('tb-images/tb-home_hover.gif');}
#tb-icon2 { background:url('tb-images/tb-img-2.gif') no-repeat center top;}
#tb-icon2:hover { background-image:url('tb-images/tb-img-2_hover.gif');}
#tb-icon3 { background:url('tb-images/tb-img-3.gif') no-repeat center top;}
#tb-icon3:hover { background-image:url('tb-images/tb-img-3_hover.gif');}
#tb-icon4 { background:url('tb-images/tb-img-4.gif') no-repeat center top;}
#tb-icon4:hover { background-image:url('tb-images/tb-img-4_hover.gif');}
/*.toolbaricons2 a.tb-home,.toolbaricons2 a.tb-home:hover,.toolbaricons2 a.tb-prose,.toolbaricons2 a.tb-prose:hover,.toolbaricons2 a.tb-sketches,.toolbaricons2 a.tb-sketches:hover,.toolbaricons2 a.tb-music,.toolbaricons2 a.tb-music:hover */
#main-toolbar-icons a,#main-toolbar-icons a:hover {
/* -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; */
background-size: contain;
}
/* hover Name of menu item under the image w a transition animation of font-size, position, char-spacing */
#main-toolbar-icons a:last-child:after {
overflow:hidden; /* for stopping long words from causing horz scrollbar */
}
/* hover: slide in name of page */
/* line-height: 14px; to position it regardless of size of toolbar image */
/* top:100%; specifying top rather than bottom allows for multiple/long lines (tho that should be avoided) */
/* my version of Chrome 34 is not doing transform - needs prefix */
#main-toolbar-icons a:before, #main-toolbar-icons a:after {
transition: all 0.3s;
display:inline-block;
position: absolute;
left:0;
z-index:-1; /* slides out from underneath pseudo-parent */
/*
-webkit-transform: translateY(0);transform:translateY(0);
letter-spacing:0;
*/
}
#main-toolbar-icons a:after { /* color set below w rest of colors */
content:attr(data-aam-tooltip); /* displays short data-aam-tooltip attribute in the toolbar icon link code */
text-align: center;
opacity:0;
text-transform: uppercase;
top:100%;
font-size: 10px;
width: 100%;
/* color:#ccc; uses color of parent... */
/*
position: absolute;
top:100%;
display: block;
font-size: 0;
line-height: 14px;
-webkit-transform: translateY(100%);transform: translateY(100%);
letter-spacing: 25px;
left:-100%;
width:100%;
text-shadow:0 1px 2px rgba(0,0,0,.3);
*/
}
#main-toolbar-icons a:hover:after {
opacity:1;
/*
-webkit-transform: translateY(0);transform:translateY(0);
letter-spacing:0;
left:0;
font-size: 14px;
*/
}
/* triangle below icon */
#main-toolbar-icons a:before {
content: "";
border: 40px solid transparent;
border-top: 40px solid #222;
top:50%;
/* relative placement of both before and after relies on before being full height of parent... */
}
#main-toolbar-icons a:hover:before {
top:100%;
}
/* hover: slide in box-tag with name */
/*
#main-toolbar-icons a:after {
line-height: 20px;
width: 90%;
border: 2px solid black;
height: 24px;
background-color: white;
box-shadow: 0px 0px 0px 2px white;
top: 100%;
margin: -12px 5%;
top:0;
letter-spacing: 0;
left:0;
}
#main-toolbar-icons a:hover:after {
font-size: 10px;
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
-webkit-transform: translateY(0);transform:translateY(0);
letter-spacing:0;
left:0;
}
*/
/* hover: simple name on top of before */
/*
*/
/* end hover code */
/* FOOTER MENU BAR code */
footer nav { width: 100%;
margin: 0;
padding: 0 11px 0 0;
/* I have screwy padding on the ul and first-child li to allow for site icon and have elements stack
neatly at small screen. From the second element onward they stack 55px to right indented past icon.
11px on right for Prose sub-index above bottom footer bar, but also so items don't jam right on small screen */
}
footer ul {
margin: 0;
padding: 0;
padding-left: 55px ; /* image:24 padding-left:11 padding:17 =55 - keeps wordwrapped lines spaced too for small screen */
position:relative;
}
footer ul:after {
position: relative;
top: 1px;
content:"Created and coded by Arthur A Marks 2014";
line-height:44px;
}
footer li {
display: inline-block; /* (don't have to float...place start LI tags on same line as previous) */
margin:10px 0;
letter-spacing:3px;
padding: 0 20px 0 23px; /* letter-spacing:3px at right */
border-left:thin solid black;
vertical-align:middle;
}
footer li:first-child {
border-left:0;
padding-left: 11px;
margin-left: -55px ;
}
footer li a {
transition-property:color,text-shadow;
transition-duration:1s;
}
footer img { vertical-align:middle; }
/*
nav.beta { width: 100%;
margin: 0;
padding: 0;
}
nav.beta ul {
margin: 0;
padding: 0;
padding-left: 55px ;
line-height:44px;
display: block;
margin:0 0 -3px 0;
}
nav.beta ul:after {
content:"Hand coded and crafted by Arthur A Marks 2014";
}
nav.beta li {
display: inline-block;
letter-spacing:3px;
padding: 0 20px 0 23px;
border-left:thin solid black;
vertical-align:middle;
height:44px;
line-height:44px;
margin:-3px 0 0 0;
}
nav.beta li:first-child {
border-left:0;
padding-left: 10px;
margin-left: -55px ;
}
nav.beta li a {
transition-property:color,text-shadow;
transition-duration:1s;
height:44px;
line-height:44px;
display: inline-block;
}
nav.beta img { height:24px; vertical-align:middle; }
*/
div.figureleft { text-align: center; float: left; margin: 0.5em 0.5em 0.5em 0; }
div.figureright { text-align: center; float: right; margin: 0.5em 0 0.5em 0.5em; }
div.figurecenter { text-align: center; margin: 0.5em auto; max-width:50%; } /* can't make div limited to size of pic */
div.figureright, div.figureleft, div.figurecenter { /* width: 25%; */
padding: 0;
/* border: thin silver solid; */ /* also add padding for border */ }
div.figureleft p, div.figureright p, div.figurecenter p { padding-bottom: 0; margin-bottom: .25em;}
div.figureleft p+p, div.figureright p+p, div.figurecenter p+p {
font-style: italic;
font-size: 70%;
text-indent: 0;
padding-top: 0; margin-top: 0;
padding-bottom: inherit; margin-bottom: 1em;
}
/* colors */
/* white on black scheme */
/* WHITE elements (dark page) */
a,
a.footnotelink,
#main-toolbar-icons a:after, /* hover name underneath toolbar icon on mouseover */
b,
.inline-link, /* toggle inline link class */
li a,
.text-like-li a,
body { color:#fff; }
p, td, th, .caption { color:#ddd; }
.section-number { color:#999; }
body { background-color:#000; }
/*blue-darkteal - can use this almost unchanged from dark scheme maybe tightening the range between full white/links and dull footnotes*/
body { background-color:#335566; }
/* top and bottom toolbars */ /* sitemap and sketchbooks index use .gray-on-white */
#main-toolbar-icons, nav.gray-on-black {background-color:#222;}
nav.gray-on-white { background-color: #eee; background-color: rgba(232,232,232,.75);}
.gray-on-black a, .gray-on-white a { text-transform:uppercase; }
nav.gray-on-black img { background-color:#000; }
nav.gray-on-white img { background-color:#fff; }
/* both light and dark footers have black text (could do white on dark) */
.gray-on-black li>a, .gray-on-white li>a {color:black;}
.gray-on-black li>a:hover, .gray-on-white li>a:hover { color:#ccc; text-shadow:0 0 7px white;}
.gray-on-black, .gray-on-white {color:gray; color:rgba(100,100,100,.3);} /* any general text on footer */
a:hover,.inline-link:hover, .a:hover { color:#fc0; }
/* a:active, a:focus {} */
.tinycitation, .tinycitation a { color:#999; }
li, .text-like-li { color:#999; } /* livemusic and thegroan use text-like-li, needs cleanup? */
.footnotes, .footnotes p {color:#999;}
/* color of Prev-Next nav bar */
.links nav p { background-color:#111; background-color:rgba(128,128,128,.18); }
/* options: all these give the same value on a black background
background-color:rgba(128,128,128, 0.18); equal weight (appears dark on white page)
background-color:rgba(192,192,192, 0.12); same impression on white or black
background-color:rgba(255,255,255, 0.09); transparent on white page
*/
.links nav a:hover { background-color:#333; }
span.definition { background-color:#111; background-color:rgba(30,30,30,.7); box-shadow: 3px 3px 7px #333; box-shadow: 3px 3px 7px rgba(30,30,30,.7);}
.invert-colors { background-color:white; color:#555; }
.invert-colors a { color:black; }
.whiteback { background-color:white; color:#fc0; }
.whiteback .section { color:black; }
.whiteback p, .whiteback td, .whiteback b, p.verse, .verse p { color:#444; }
.whiteback a { color:black; text-decoration:none; }
.whiteback p a { color:#47a; text-decoration:none; }
.whiteback a:hover, .whiteback a:active, .whiteback p a:hover, .whiteback p a:active { color:#fc0; }
.omit { display:none; }
/* LIKE BUTTON ---------------------------------------------------------------------
Note on all of these I have a hover box-shadow...
SIMPLE VERSION...transparent back for light or dark back - THUMB UP WITH CIRCLE BOTH COLORED LIKE TEXT
BLACK PAGE
border: 3px solid #ccc;
background-color: transparent;
WHITE PAGE same as above just add:
-webkit-filter: invert(1);
filter: invert(1);
OR MORE BUTTONY...silver background color (currently using this one on black page)
BLACK PAGE
box-shadow: 0 0 1px silver; to make edge look better when using a background-color
background-color: silver; silver is just dark enough for white thumb
border: 3px solid #ccc; ccc or ddd for black page, eee for white page
WHITE PAGE use above just changing border lighter:
border: 3px solid #eee;
-------------------------------------------------------------------------------------
*/form.like-button { text-align:center; }
.like-button input[type=submit] {
/* browser compatability problem: background:silver url(../images/thumbsup-a.png) center/18px 18px no-repeat; line-by-line works better in some older browsers */
/* moved below: background-image:url(../images/thumbsup-a.png) ; using data URI for this file now (at bottom of this file) */
/* background-color:silver; */
background-repeat:no-repeat;
background-position: center center;
background-attachment:scroll;
background-size:18px 18px;
cursor:pointer;
/* also had .like-button input[type=text] on these, but couldn't get a text field to show without resorting to JS */
font-size:10px;
line-height:32px; /* relies on border-box sizing and radius 3 --> 42-3-3=36 */
padding:0;
color:transparent; /* hide value */
display:inline-block;
height:38px; width:38px;
border-radius: 19px;
transition: all .3s;
box-shadow: 0 0 1px silver;
background-color:silver;
border:3px solid #ddd; /* set to #eee for white page */
}
.like-button input[type=submit]:not(.liked):hover {
border:3px solid white;
box-shadow: 0 0 3px #aaa;
}
.like-button input[type=submit].liked { /* remove image to show 'thanks' value and other style changes to show button no longer clickable */
background-color:#9b9;
color:white;
cursor: default;
background-image: none;
}
::-moz-focus-inner {border:0;}
/* screen formatting */
@media screen {
.noscreen { display:none; }
}
/* print formatting */
@media print {
.noprint { display:none; }
body.print { background-color: transparent; font-size: 12pt; color:black; }
.print * { background-color: transparent; color:black; font-size: 12pt; }
}
/* MEDIA QUERIES - RESPONSIVE DESIGN */
@media all and (max-width: 660px) {
#main-toolbar-icons a { margin-left:4px; }
.omit-smallscreen { display:none;} /* gets rid of AAMARKS in footer or anything else not needed at smallscreen */
/* .page { padding:0; margin: 7%; } ....can't set padding because it overrides the top/bottom padding of Section when a div class "page section" combined */
.page { margin: 7%; }
.section { padding-left:20px; padding-right:20px; }
.section>.section { margin-left: -20px; margin-right: -20px; }
.box {display:block; width:auto; margin-right:0; margin-left:0; }
.toolbaricons span {display:none;} /* collapse link text next to image */
.links li a { line-height:150% }
#togglemorelinks { padding:1em 0; display:inline-block;}
}
@media all and (max-width: 360px) {
/* at this size could put padding on text and not section so that images and video go full width... */
#main-toolbar-icons a { width:60px; height:60px; }
#main-toolbar-icons a:before { border-width: 30px }
#main-toolbar-icons a:after { font-size: 9px; }
#main-toolbar-icons { text-align:left; }
/* .page { margin:0; padding-top:7%; padding-bottom:10px; } */
.page { margin:0; }
.section { padding-left:10px; padding-right:10px; }
.section>.section { margin-left: -10px; margin-right: -10px; }
.box { margin-right:0; margin-left:0;
/* need !important to override a small fullscreen max-width set in the page - could avoid by making special class box-es here even if only 1 page needs it */
/* might actually want a less than 100% box on a small screen but then we should prob make a new fractional box... box-half... */
width:100% !important;
max-width:none !important;
}
nav li a {font-size:150%;}
body { background-size:contain; } /* scale image to fit in screen - good for large images, THOUGH not necessarily desirable for small images */
}
/* *** IMAGES *** */
/* data URIs*/
/* thumbs up icon for like-button */
.like-button input[type=submit] {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAS5JREFUOI2dlLFKQ0EQRc/EYAq7RBvTaiM2AcEfsBMbxV6s9A/8HbEOiJUfYCcptJI0CgkoFoqCKEQ9Fi8vPEPyXpJb7c4OZ3bvzm6QI3UOOAKqwFlEPOTl54HW1F8TddXauNxSAesJ6PXHdWB3VtBrH5aqPhMoIgS6mdD8TCC1BCxlQsvjcst5IGAPWMnM99Ub4Br4BH6BdkR8pJVD/QdVt9V3i9VWF1AX1Tv1Wb1U19Vz9XsCiP32WEVtZIJv6uGEgFSn48y2wLdh7ahLo0BFFzCsClAeBfqZAiJwEBGPRZ1dpAAaMP0xhnfTAZow2ux74Ar4KgD1gK2IaCXYpG/Sr+JlUE5r6onayaxn9aNuDM5o8nkdk7yp24ho/tu/VoBNEi+qJL4ItCLiIs37A3MtMouXWspAAAAAAElFTkSuQmCC)
}
/* external link icon (to open externally use-- onclick="window.open(this.href,'newtab'); return false;" --in the link or add external javascript)*/
li a[href^="http://"]:not([href*="aamarks.com"]):after,
li a[href^="https://"]:not([href*="aamarks.com"]):after{
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNqEkIEJwCAMBGPpEs7hHK6hY+gauoZr6Bo6RtqEWkxb6EMQnuM/USEirIoxSmOKwDkhBEwp4VPkb4801Xun9xW4e+9FldYarLUvkBPPOp4JGWOgtSaSt6VWQKUU9nPOEiSIgAmNMdadFTjn7utqrXwh6fLvH9nXhamW5ksMnpfDnw4BBgBfunO056MmqAAAAABJRU5ErkJggg==);
}
/* pdf link icon... could add li to keep it out of paragraphs, but so rare to have a pdf that showing there is unobtrusive */
a[href$=".pdf"]:after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAYAAADNo/U5AAAAB3RJTUUH3gobASQk5WFwgAAAAAlwSFlzAAAXEQAAFxEByibzPwAAAARnQU1BAACxjwv8YQUAAAEqSURBVHjaY2AgAzCCiKKiosvq6uo6+BSePn06YNq0aS/Z2NhOsIAE/v//r/P27VuGjx8/ghWwsrIyNDc3o2hiYmLa0NvbWwFknmACCfz69Yvh/PnzDNeuXWN48+YNmEYHKSkpIKoDRIBtkpKSQjH58ePHDOfOnWMwMjLC6lQmqNUMgoKCcPzixQsGdnZ2nP5jwiaopqbGsH//ftI0cXNzM9y4cYM0TZs2bWIIDg7GaRsLugDIPywsLGB/Hjx4kOH48eMM4uLiDNra2tg1ff78mWHevHkMDg4ODLq6ugz29vZgcVBIguIOQ9Pt27cZduzYweDt7c2gr6+PYjss6Ldu3YrQBEwRYOeATNbT02MgBJgIqsAVEIcOHfIG2gS2e/v27fjUnyXHEjAAAIltYEVNHcK2AAAAAElFTkSuQmCC);
}
a[href$=".jpg"],a[href$=".gif"],a[href$=".png"] {
cursor:-webkit-zoom-in;
cursor:zoom-in;
}
/*
LIGHT TRANSPARENT PDF ICON
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH3gobAQEazPO9zAAAAAlwSFlzAAAXEQAAFxEByibzPwAAAARnQU1BAACxjwv8YQUAAAD7SURBVHjaY2TAAv7//y/IQBh8Y2Rk/MmCRXMpkPpIhAEmQJzGAtXkAaT0gfgJEEsCMUicH6rwN9CmWiwWCTFAFYKAAVBRB1TCEkgZAjEHEL8CYrzeYcEi9gyIkW2UBRpqBLTgHDYDmLCI/QMqfg/DQL4EEP/E5QImBsLgFhA7UmLAVyDWoMQAPyBeCwwHrK5gwacTqAnk/z+gcAFie2gMvQTiqwQNACrmBVJJQHwAiC8DA/QgVNwISP3GawBQkSqQAiWurUCNF5HlYNEJVOONywBGqJMPAhVfIhRA2AzYA8QhUFs88eh9gWwAH1BxOSHbgEAQ6KoKItQRDwD951JU4aF+DQAAAABJRU5ErkJggg==);
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAYAAADNo/U5AAAAB3RJTUUH3gobAQwPFIAnagAAAAlwSFlzAAAXEQAAFxEByibzPwAAAARnQU1BAACxjwv8YQUAAADcSURBVHjaY2AgAzCCiP///5cCqY9EqDdhZGRMY4FyJIEYxOaH8n8DJWvRdQANF2KAKgQBNiA2BGIOIH4FxIL4rINpegbEyCbLAk01Atp2DpsmJij9D6jgPQwD+RJA/BOXTUw4xG8BsSOpmr4CsQapmvyAeC3QX1htY0EXACoE+ecPyJ9AbA/kWwLpl0B8FasmoAJeIJUExAeA+DIwUA5CxY2A1G8MTUAJVSDlAcRbgYovIhsGC3qgGm9kTYxQ5xwEKrjEQAAwEVKADcASrCmQciJC/UugSxaQYxEDAGG0QL99R3Q6AAAAAElFTkSuQmCC);
DARK TRANSPARENT PDF ICON
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAA6UlEQVQ4jaXSsUpDMRTG8d+VO7io1KkOjoKbtXRxEjdFcPIJHHwD0cW9L+Po5mBfoFDFxVlEXcRBoSjikAiXS3J7oR8EknOS//mSnEJanUy8qi9Mi0TiDB8tAAOclnGxjy08YQ0lVmLuG5cJwKq4EXoYxvkOtrGINzOuUyZiz7WK6+hjnAIsJGK/eK+MLqY5BylAXY/Ymwfwic15AEe4yrlIPWJVXfwI77Ir/NArHtoAlnCCW9xjFON9oTcaARtCc11jUsv9f+dhDlBEyyPcNTjMOrjBcZwfNJx9qQKWcT6rmtDWFy32tdcfPPwlWqkoN6YAAAAASUVORK5CYII=);
GRAY ON WHITE PDF ICON
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAYAAADNo/U5AAAAB3RJTUUH3gobASQk5WFwgAAAAAlwSFlzAAAXEQAAFxEByibzPwAAAARnQU1BAACxjwv8YQUAAAEqSURBVHjaY2AgAzCCiKKiosvq6uo6+BSePn06YNq0aS/Z2NhOsIAE/v//r/P27VuGjx8/ghWwsrIyNDc3o2hiYmLa0NvbWwFknmACCfz69Yvh/PnzDNeuXWN48+YNmEYHKSkpIKoDRIBtkpKSQjH58ePHDOfOnWMwMjLC6lQmqNUMgoKCcPzixQsGdnZ2nP5jwiaopqbGsH//ftI0cXNzM9y4cYM0TZs2bWIIDg7GaRsLugDIPywsLGB/Hjx4kOH48eMM4uLiDNra2tg1ff78mWHevHkMDg4ODLq6ugz29vZgcVBIguIOQ9Pt27cZduzYweDt7c2gr6+PYjss6Ldu3YrQBEwRYOeATNbT02MgBJgIqsAVEIcOHfIG2gS2e/v27fjUnyXHEjAAAIltYEVNHcK2AAAAAElFTkSuQmCC
BLUE WIKIPEDIA EXTERNAL LINK ICON
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
*/
/*
arrows/triangles that seem fairly available on devices depending on the font...
content:"\27b2"; content:"\27b2"; L/R arrows in filled circles
content:"\25c0"; content:"\25b6"; L/R large filled triangles
content:"\3008"; content:"\3009"; L/R large chevrons (gt lt)
̂ up chevron diacritic
̌ down chevron diacritic
̬ ̭ down up low chevron diacritic
&#x 21ba; &#x 21bb; recycle / round arrows
&#x 2261; 3 bar equals / app button use? Identical To Sign
… Elipsis
• Small Bullet
– – En Dash
— — Em Dash
― Horizontal Bar
‣ Triangle Bullet (right)
© © Copyright
€ € Euro Symbol
① to ⑳ #s 1 to 20 inside circle
➀ to ➉ #s 1 to 10 inside circle
❶ to ❿ #s 1 to 10 inside filled circle
➊ to ➓ #s 1 to 10 inside filled circle
*/