html, body
{
/*padding:0;
margin:0;
*/
font-size: large;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-attachment: fixed;
display:block;
}
header
{
/* box-shadow: 4px 4px 8px rgba(0,0,0,.75); */
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: hsla(0, 0%, 50%, .95);
z-index:100;
overflow:hidden;
@media (min-height: 768px) { height:10%; } /* So the bottoms of icons are not chopped off on horizontal ipods*/
}
header img
{ margin: 0; padding:1%; opacity:.5; width:8%;
}
header img:hover
{ opacity: 1;
}
footer
{ position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: hsl(0, 0%, 50%, .95);
z-index:100;
box-shadow: 8px 8px 8px rgba(0,0,0,.75);
max-height:5%;
height:5%;
@media (min-height: 1000px) {height: 3%}
text-align:center;
}
light_dark_form
{ float:right; PADDING:8PX;
}
searchform
{ float: right;
width: 30%;
background-color: hsl(200, 100%, 3%);
}
y, mark /* y stood For highlighting deity's words in scripture verses; the y tag is still present in writings and songs. For scriptures, it is being programmatically converted to 'mark' in used-functions*/
{ display:block; /* this line added a trailing blank line; removing it disabled centering */
text-align:center;
color:hsl(345, 100%, 24%);
text-shadow: 2px 2px 4px white, -2px -2px 4px white, ;
background-color: hsla(60, 100%, 50%, 0); /* nullifying the typical yellow highlight */
}
h1, h2
{ font-family: impact;
text-transform: uppercase;
}
h1
{ font-size: 290%;
font-weight: bold;
text-align: center;
color: #efece8;
text-shadow: 2px 2px 5px black;
}
h1:hover { color: #e9e9e9; text-shadow: 0px 1px 3px #393300; }
h2 { color: black;
/* text-shadow: 0px 1px 3px #FFFFE0; */
font-size: 150%;
font-weight: bold;
text-align: center;
/* margin: 10%; */
background: hsla(0, 0%, 100%, .5);
/* border:15px white; */
border-radius:15px;
}
h2:hover
{ color: #010101; text-shadow: 0px 5px 6px orange; }
h3
{ text-align:center;
}
hl
{ font-size: 110%;
font-variant: small-caps;
font-weight: 900; line-height: 113%;
padding: 8px; margin: 0.67em;
border-radius:7px;
color: black;
text-shadow: 0px 5px 6px #b99d85;
}
hl:hover
{ text-shadow: 0px 3px 4px gold;
}
hl2
{ font-variant: small-caps;
font-weight: bolder;
background-color: hsla(55, 100%, 50%, .2);
border-radius:7px;
color: black;
text-shadow: 0px 5px 6px #b99d85;
}
hl2:hover
{ background-color: hsla(55, 100%, 50%, 1);
text-shadow: 0px 3px 4px gold;
}
#centercontent, #leftcontent, #rightcontent
{
padding-top: 12%; /* to clear the header */
z-index:90;
padding-bottom: 12%; /* to clear the footer */
}
#centercontent {
position: static; /* positition choices: static | relative | absolute | fixed | inherit */
margin-right: auto;
margin-left: auto;
margin-top:0%;
width: 100%; /* was 85 */
max-width: 100%; /* was 90 */
}
#leftcontent /* deprecated */
{ float: left;
width:6%;
padding: 0px;
top: 0px;
left: 10px;
opacity: 0.7;
font-size:small;
overflow: ellipsis;
background-color: hsla(210, 100%, 10%, 100);
}
#rightcontent
{ float: right;
text-align: right;
position: fixed;
width: 13%;
max-width: 15%;
top: 9%;
right: 0;
border: 1px black;
border-radius:11px;
background-color: hsla(210, 100%, 10%, 100);
overflow: ellipsis;
}
illum
{ /* used to make the first letter of each chapter appear large, just for a fun literary look ;*/
width: .7em;
font-size:300%;
line-height:80%;
text-shadow: 0px 5px 16px gold;
}
img
{ //box-shadow: 0px 4px 16px black;
/* margin: 15px 15px 15px 20px; caused right side cutoff in pitch sheet*/
border-radius:7px;
max-width:1920px;
}
img:hover
{ size: 105%;
}
[src*=".gif"]
{ box-shadow: 0px 0px 0px white;
margin: 0px 0px 0px 0px;
}
/* make icons (ending in .gif not have the drop shadow applied to normal large images, because the box-shadow was not allowing the gif to enjoy its transparency */
[src^="products"]
{ box-shadow: 0px 2px 6px black;
margin: 2px 2px 2px 2px;
} /* for product images */
[src*=".svg"] /* styles image container boxes, not the svg content inside */
{ box-shadow: 0px 0px 0px white;
}
wrap
{ float:left; /* wrap (where called on an image) makes text flow around images; */
border:3px black;
margin: 15px 15px 15px 20px;
}
/* don't put the following in the navheader */
#centercontent ul
{ box-shadow: 0px 2px 3px grey;
border-radius:7px;
padding-left: 13px;
}
#centercontent ul li
{ border-radius:7px;
list-style-position: inside;
list-style-type: disc;
text-align: left;
}
/* list-style-image: url(images/check.gif); */
ol li
{ list-style-type: decimal;
}
#centercontent li:hover
{ color: hsla(38, 100%, 30%, 1);
background-color: hsl(45, 25%, 98%);
border: ridge white;
}
faded
{ opacity:0.5;
color: grey;
}
faded:hover
{ opacity:0.7;
text-shadow: 2px 2px 2px white;
}
table
{
border-radius: 7px;
width: 96%;
/*max-width:96%;*/
overflow: auto; /* was resize */
}
ins /* e stood for edit, referring to [bracketed insertions] inside of scripture texts */
{ opacity: 0.7;
color:grey;
font-weight:normal;
font-size:78%;
text-decoration: none; /* nullifying browser's underline of */
font-style:italic;
}
.personalizer
{ text-decoration: underline;
color:red;
}
del
{ opacity: .6;
color: grey;
}
sub
{ vertical-align: sub; /* subscript */
}
dfn /* na stood for name, referring to {curly-braced} transliterated names inside of scripture texts */
{ opacity: 0.7;
color:hsla(40, 85%, 50%, 1);
font-weight:normal;
font-size:88%;
}
th {
border-radius:7px;
color: hsl(45, 0%, 50%);
background-color: hsla(45, 0%, 70%, .2);
cursor: crosshair;
text-shadow: 0px 2px 3px white;
font-size: 106%
}
td
{ border-radius:7px;
padding:6px;
}
textarea
{ overflow: scroll;
resize:both; /* resize:both; for allowing users to drag text areas larger */
max-width:100%;
font-size: large;
text-align:center;
}
input
{
box-shadow:rgba(0,0,0,.6) 0px 3px 4px;
border-radius:7px;
line-height: 110%;
}
input:hover, input:focus
{ background-color:white;
opacity:1;
}
a
{
}
a:link /* unvisited links */
{ color: hsl(0, 100%, 40%);;
}
a:visited
{ color: maroon;
}
a:hover
{ color: white;
background-color: red;
border-radius:3px;
}
a: active
{ background-color: yellow;
font-style: italic;
color: #FF8200;
} /* when link is clicked */
/* [href*=".mp3"] { background-image:url("../images/music-notes.gif"); } an attempt to start to put the mp3 logo in programatically via css, if successful, do likewise for pdf, doc, mp4, aac etc. */
q { /* font-weight: bold; causes bold elements in quotations to appear the same as the non-bold text */
font-style:italic; /* this will cause italic elements in the quoted text to appear the same as non-italics */
font-size:110%;
font-family: courier, fixed;
text-align: center;
color: hsl(0, 100%, 0%);
text-shadow: 0px 1px 3px white; /* b99d85 is a flesh tone with a bit of black */
background-color: hsl(45, 25%, 98%);
box-shadow:rgba(0,0,0,.2) 0px 3px 4px;
border-radius:7px;
text-indent: 40px; /* doesn't seem to do anything */
margin: 2% 3% 0 3% ;
padding: 16px 44px 16px 44px;
display:block;
}
dl { background-color: hsl(45, 5%, 98%); /* dictionary list */
display:block;
border: 1px solid hsl(45, 5%, 88%);
margin: 2% 3% 0 3% ;
padding: 16px 44px 16px 44px;
border-radius:2px;
}
dl:nth-child(even), tr:nth-child(even) , li:nth-child(even) /* zebra stribes table rows for readability, but should not be in the navbar*/
{
background-color: hsla(45, 50%, 80%,.2);
}
dt { text-decoration: overline; /* dictionary term */
text-shadow: 0px 5px 11px gold;
}
dd { /* dictionary definition */
}
tr { border-radius:7px;
/* transition:background-color .3s ease-in; */
}
tr:hover
{ background: white;
text-shadow: 1px 1px 3px white;
color:black;
}
th:hover
{ background-color: hsl(45, 30%, 93%);
color:black;
}
hr
{ border: 1px solid hsl(45, 5%, 88%);
}
#alt_translations td, #alt_translations tr
{ opacity:.6;
}
#alt_translations tr:hover, #alt_translations td:hover
{ opacity:1;
font-size:105%;
}
select
{ /* background-color: hsla(0, 10%, 50%,.1);
color: black;
font-size: 1em; */
}
select:hover
{ color: orange;
}
select:active
{ color: red;
}
/* S V G */
.themelink:hover
{ transform: scale(1.2);
transform-origin: center;
}
svg:hover
{
/* stroke: gold; */
stroke-width: 3px;
}
/* ***************CSS SCREENPLAY FORMATTING ***********/
/* wrap all lines to a max of 60 characters (FINAL DRAFT ALLOWS 61) (outer margins of your script are 15 and 75 for description, action, and directions.) */
#screenplay /* the screenplay div contains other custom elements: character_name, camera, lyric, dialog_instruction, dialog */
{ display: block;
font-size: 12pt;
font-family: courier, fixed;
/* border:none; inserted to prevent chrome and opera from styling dialog as dialog boxes */
margin:none; /* inserted to prevent a gap between character names and dialog instruction */
margin-right: auto;
margin-left: auto;
max-width: 440pt; /* 444 pt width @ 12 pt courier text = 61 characters */
}
.slugline
{ /* font-family: impact; */
font-weight: bold;
font-size:130%;
}
/*
.dialog_instruction // dialog instruction centered at 40
{ display: block;
text-align: center; //left
}
*/
.character_name /* character name centered at 45 margin */
{ /*display: block;
text-align: center; // was left */
font-family: impact;
}
.camera
{ display: block;
text-align: right;
}
lyric, samp /* the "lyric" tag is changed to the strict xml tag "samp" in writings.inc to avoid epub checker errors */
{
font-style: italic;
text-transform: uppercase;
/* display: inline; */
font-family:cursive; /*or fantasy */
}
/*
.dialogue
{ display: block;
}
*/
lyric, samp, .dialogue, .dialog_instruction, .character_name
{ display:block;
text-align: center;
margin: 0 25% 0 25%; //top, right, bottom, left -
}
/* dialogue centered at 35 to 65 */
/* dialogue is spelled british-style because chrome&opera style