Update CSS to include the Open Dyslexic font.
This commit is contained in:
parent
ef13a66e49
commit
e72ce1bc64
499
styles.css
Normal file
499
styles.css
Normal file
@ -0,0 +1,499 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Open Dyslexic';
|
||||||
|
src: url('common/fonts/od/OpenDyslexic-Regular.woff2') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Dyslexic';
|
||||||
|
src: url('common/fonts/od/OpenDyslexic-Italic.woff2') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Dyslexic';
|
||||||
|
src: url('common/fonts/od/OpenDyslexic-Bold.woff2') format('woff');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
background-color: #000000;
|
||||||
|
color:#00cc00;
|
||||||
|
font-family: "Courier New", sans-serif;
|
||||||
|
/*dir:"ltr";
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
.text-block{
|
||||||
|
width: 100%;
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
img.center_align{
|
||||||
|
vertical-align:middle;
|
||||||
|
}
|
||||||
|
.od {
|
||||||
|
font-family: 'Open Dyslexic', serif;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.od em {
|
||||||
|
font-family: 'Open Dyslexic', serif;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.od strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.font_btns{
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.top{
|
||||||
|
max-width: 100vw;
|
||||||
|
float: left;
|
||||||
|
margin-left: 25%;
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align:center;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered_img {
|
||||||
|
max-width:100%;
|
||||||
|
height:auto;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered_img img{
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer{
|
||||||
|
background-color: #000;
|
||||||
|
clear: both;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
line-height: normal;
|
||||||
|
margin: 0;
|
||||||
|
bottom: 0px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-cont {
|
||||||
|
width: auto;
|
||||||
|
text-align:center;
|
||||||
|
position:fixed;
|
||||||
|
top:0px;
|
||||||
|
margin-left: 40%;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
height:50px;
|
||||||
|
background:black;
|
||||||
|
border:1px solid ##00cc00;
|
||||||
|
width:100%;
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.homepage {
|
||||||
|
font-size:medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a:link{
|
||||||
|
color: green;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
border-bottom-color: 00cc00;
|
||||||
|
border-bottom-style: dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
color: #00cc00;
|
||||||
|
}
|
||||||
|
a:link { background-color: #000000;
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
a:hover { background-color: #000000;
|
||||||
|
color: #00cc00;
|
||||||
|
}
|
||||||
|
a:visited{ background-color: #000000;
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
a:visited:hover{ background-color: #000000;
|
||||||
|
color: #00cc00;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0.1in;
|
||||||
|
line-height: 100%
|
||||||
|
}
|
||||||
|
blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 90%;
|
||||||
|
color: #ffba00;
|
||||||
|
border-left: yellow;
|
||||||
|
border-left-style: outset;
|
||||||
|
}
|
||||||
|
blockquote p {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*CSS for image gallery*/
|
||||||
|
div.gallery {
|
||||||
|
margin: 5px;
|
||||||
|
border: 1px solid #0c0;
|
||||||
|
float: left;
|
||||||
|
width: auto;
|
||||||
|
max-width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.gallery:hover {
|
||||||
|
border: 1px solid #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.gallery img {
|
||||||
|
padding: 5px;
|
||||||
|
height:auto;
|
||||||
|
max-width:99%;
|
||||||
|
max-height:477px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.desc {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #0c0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.silent {
|
||||||
|
padding: 10px;
|
||||||
|
text-align:center;
|
||||||
|
border:1px clear;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.gallery_center {
|
||||||
|
margin: 5px;
|
||||||
|
border: 1px solid #0c0;
|
||||||
|
position: relitive;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.gallery_cetner img {
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
max-height:600px;
|
||||||
|
position: relitive;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.gallery_center:hover {
|
||||||
|
border: 1px solid #777;
|
||||||
|
text-align:cetner;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
/*End Gallery CSS*/
|
||||||
|
|
||||||
|
.block {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*==============================================================================
|
||||||
|
|
||||||
|
GRC multi-level script-free pure-CSS menuing system stylesheet.
|
||||||
|
This code is hereby placed into the public domain by its author
|
||||||
|
Steve Gibson. It may be freely used for any purpose whatsoever.
|
||||||
|
|
||||||
|
Computed Geometries: with a default 12px font, 1.0em == 12px and
|
||||||
|
1px == 0.08333em.
|
||||||
|
Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.
|
||||||
|
|
||||||
|
PUBLIC DOMAIN CONTRIBUTION NOTICE
|
||||||
|
This work has been explicitly placed into the Public Domain for the
|
||||||
|
benefit of anyone who may find it useful for any purpose whatsoever.
|
||||||
|
|
||||||
|
==============================================================================*/
|
||||||
|
|
||||||
|
/*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/
|
||||||
|
|
||||||
|
.menuminwidth0 { /* for all browsers (non-IE) that obey min-width */
|
||||||
|
position:relative;
|
||||||
|
border:0;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
width:100%;
|
||||||
|
height:55px;/* 36px masthead height + 18px button height + 1px lower border*/
|
||||||
|
min-width:560px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* suppress our whole menu when not an interactive mode (when printing, etc.) */
|
||||||
|
@media print, projection { .menuminwidth0 { d\isplay:none; } }
|
||||||
|
|
||||||
|
* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */
|
||||||
|
position:relative; /* we can simulate a minimum width by creating a large */
|
||||||
|
float:left; /* border in this first div, then placing our content */
|
||||||
|
height: 1px; /* into a second nested div (see 2nd nested div next */
|
||||||
|
border-left:560px solid #fff; /* CSS box-model borders are a fixed size */
|
||||||
|
}
|
||||||
|
|
||||||
|
* html .menuminwidth2 { /* used to simulate min-width capability for IE5/6 */
|
||||||
|
position:relative;
|
||||||
|
margin-left:-560px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*========================= TOP OF THE MENU CASCADE =========================*/
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
position:relative; /* establish a menu-relative positioning context */
|
||||||
|
float:left; /* play nicely with others */
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
height:25px; /* the menu's overall height */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu img {
|
||||||
|
vertical-align: top; /* prevent images from being pushed down by text */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul {
|
||||||
|
margin:10px;
|
||||||
|
list-style-type:none; /* we don't want to view the list as a list */
|
||||||
|
line-height:1.5em; /* globally set the menu's item spacing. note */
|
||||||
|
} /* this must be 1.0 or 1.5 or 2.0 for Mozilla */
|
||||||
|
|
||||||
|
.menu li {
|
||||||
|
float:left; /* this creates the side-by-side array of top-level buttons */
|
||||||
|
position:relative; /* create local positioning contexts for each button */
|
||||||
|
margin:0;
|
||||||
|
border:1;
|
||||||
|
border-style:double;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li table {
|
||||||
|
margin:-1px 0; /* IE5 needs -1px top and bottom table margins */
|
||||||
|
m\argin:0; /* re-zero the table margins for everyone but IE5 */
|
||||||
|
border-collapse:collapse; /* IE5 needs this for the sub-menus to work */
|
||||||
|
font-size:12px; /* this sets the base font size for our entire menu */
|
||||||
|
border:1;
|
||||||
|
border-style:double;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li p.dropbox {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop {
|
||||||
|
display:block;
|
||||||
|
padding:0px 0.33em; /* this sets the l/r margins for our menu item */
|
||||||
|
margin:0;
|
||||||
|
text-align:right; /* this right alignment goes with the float:left below */
|
||||||
|
cursor:pointer; /* IE tries to switch back to an I-beam, don't let it */
|
||||||
|
cursor:hand; /* IE5 only knows about "hand", so set it both ways */
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop span { /* this simultaneously left and right aligns the text and */
|
||||||
|
float:left; /* the >> in the drop-down menus which link to sub-menus */
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightmenu {
|
||||||
|
position:relative; /* establish a local positioning context for YAH label */
|
||||||
|
float:right; /* and right-align it at the top of our page */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================== TOP LEVEL MENU DEFINITIONS ========================*/
|
||||||
|
|
||||||
|
.menu ul li ul {
|
||||||
|
display:none; /* initially hide the entire list hierarchy */
|
||||||
|
padding:1px; /* this is our box border width */
|
||||||
|
border:1;
|
||||||
|
border-style:double;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li a,
|
||||||
|
.menu ul li a:visited { /* unselected top-level menu items */
|
||||||
|
display:block;
|
||||||
|
float:left;
|
||||||
|
text-decoration:none;
|
||||||
|
height:18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover a,
|
||||||
|
.menu ul li a:hover { /* selected top-level menu items */
|
||||||
|
border-top:1px solid #000; /* these 2 lines create the push-in illusion */
|
||||||
|
height:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/
|
||||||
|
|
||||||
|
.menu ul li:hover ul,
|
||||||
|
.menu ul li a:hover ul { /* 2nd level drop-down box */
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
margin:0;
|
||||||
|
top:18px; /* place us just up underneath the top-level images */
|
||||||
|
left:-1px; /* left-align our drop-down to the previous button border */
|
||||||
|
height:auto; /* the drop-down height will be determiend by line count */
|
||||||
|
width:13.5em;
|
||||||
|
/* color:black; /* this sets the unselected-text color */
|
||||||
|
/* background:black; /* this sets our menu's effective "border" color */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover ul.leftbutton,
|
||||||
|
.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
|
||||||
|
left:0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover ul.skinny,
|
||||||
|
.menu ul li a:hover ul.skinny { /* 2nd level skinny drop-down box */
|
||||||
|
width:8.08333em; /* with a 12px default font, this is 97px width (97/12) */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul.rightmenu li:hover ul,
|
||||||
|
.menu ul.rightmenu li a:hover ul { /* 2nd level neighborhood drop-down box */
|
||||||
|
left:auto;
|
||||||
|
right:0; /* nudge the right menu right to line up under the border */
|
||||||
|
width:400px; /* with a 12px default font, this is 228px width (228/12) */
|
||||||
|
}
|
||||||
|
|
||||||
|
* html .menu ul.rightmenu li a:hover ul { /* IE5/6 needs a tweak here */
|
||||||
|
right:-1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover ul li a,
|
||||||
|
.menu ul li a:hover ul li a { /* 2nd level unselected items */
|
||||||
|
border:0;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
height:auto;
|
||||||
|
/* color:#000; /* this sets the unselected drop-down text color */
|
||||||
|
/* background:#d8d8d8; /* this sets the drop-down menu background color */
|
||||||
|
width:13.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover ul li:hover a,
|
||||||
|
.menu ul li a:hover ul li a:hover { /* 2nd level selected item */
|
||||||
|
/* color:black;
|
||||||
|
background:white;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover ul.skinny li a,
|
||||||
|
.menu ul li a:hover ul.skinny li a,
|
||||||
|
.menu ul li:hover ul.skinny li a:hover,
|
||||||
|
.menu ul li a:hover ul.skinny li a:hover { /* 2nd level un+selected items */
|
||||||
|
width:8.08333em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/
|
||||||
|
|
||||||
|
.menu ul li:hover ul li ul,
|
||||||
|
.menu ul li a:hover ul li a ul { /* hide inactive 3rd-level menus */
|
||||||
|
visibility:hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover ul li:hover ul,
|
||||||
|
.menu ul li a:hover ul li a:hover ul { /* 3rd level drop-down box */
|
||||||
|
visibility:visible;
|
||||||
|
position:absolute;
|
||||||
|
margin-top:-1px; /* bring the top edge of the 3rd level menu up one */
|
||||||
|
top:0;
|
||||||
|
left:8.08333em;
|
||||||
|
width:14em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover ul li:hover ul li a,
|
||||||
|
.menu ul li a:hover ul li a:hover ul li a { /* 3rd level unselected items */
|
||||||
|
width:14em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul li:hover ul li:hover ul li a:hover,
|
||||||
|
.menu ul li a:hover ul li a:hover ul li a:hover { /* level3 selected items */
|
||||||
|
width:14em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text { /* the Mac's standard Safari browser will not see this code */
|
||||||
|
height:1.215em;# /* ... but every other browser will and should */
|
||||||
|
} /* Safari barfs on the illegal pound sign (#) after the rule's property val */
|
||||||
|
|
||||||
|
|
||||||
|
/*Media queries to redo nav and whatnot for mobile*/
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px){
|
||||||
|
body {
|
||||||
|
margin-left: unset;
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
.body{
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
.top{
|
||||||
|
width: 90vw;
|
||||||
|
float: left;
|
||||||
|
margin-left: unset;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
position:relative; /* establish a menu-relative positioning context */
|
||||||
|
float:left; /* play nicely with others */
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu ul{
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
height:35px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.menu ul li a {
|
||||||
|
float:unset;
|
||||||
|
}
|
||||||
|
.menu ul li p.dropbox {
|
||||||
|
display: block;
|
||||||
|
border: double;
|
||||||
|
width:10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.gallery img {
|
||||||
|
max-width:97%;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width:100vw;
|
||||||
|
}
|
||||||
|
video{
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
padding: 5%;
|
||||||
|
}
|
||||||
|
.header-cont {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user