/* CSS for special uses: */
.desktop{display:block;}
span.desktop{display:inline;}
.mobile{display:none;}
span.mobile{display:none;}
.extrawide{display:none;}
.narrow{display:none;}
/* DESKTOP-SPECIFIC CSS: */
/* ELEMENT-SPECIFIC ATTRIBUTES (LISTED ALPHABETICALLY): */
/* "plain */
a{
font-weight:bold;
color:#ff0000;
}
a:visited{
color:#cc4444;
}
/* put grey background behind moused anchor: */
a:hover{
background-color:#cccccc;
}
/* Stop link from coloring-up in link color (for */
body{
background-color:#ffffff;
font-family:Georgia,"Times New Roman",serif;
}
br.clear{
clear:both;
}
/* page-top quotations: */
div.quote{
text-align:center;
font-size:x-small;
font-weight:bold;
margin:auto;
padding:5px;
margin-left:auto;
margin-right:auto;
width:50%;
}
/* author "stubs": */
div.stub{
width:66%;
padding:20px;
border:1px solid black;
margin-left: 10%;
margin-right: 24%;
font-size:x-small;
}
/* "quick jump" menus: */
div.quick{
background-color:#dddddd;
padding:0px 10px;
display:inline-block;
float:left;
font-size:x-small;
}
/* one and only */
h1 {
font-family:Chancery;
font-size:400%;
color:#555588;
margin-top:0;
margin-bottom:10px;
}
/* one and only */
h2{
margin:0;
padding:0;
font-size:3.5vw;
line-height:150%;
}
h3{
color:#007700; /* dark green */
font-size:x-large;
}
h4{
color:#665522; /* dark brown */
font-size:large;
}
h5{
color:#666666; /* grey */
font-size:medium;
}
h6{
color:#663399; /* dark purple */
font-size:small;
margin:5px;
}
/* "plain"
*/
hr{
height:1px;
}
/* text-divider
*/
hr.divider{
height:1px;
width:75%
}
/* list-entry divider
*/
hr.list{
width:20%;
border:none;
background-color:#000000;
color: #000000;
height:1px;
margin-left:0px;
}
/* auto-resizing image */
img.topbar{
max-width:100%;
height:auto;
margin:0;
}
img.penline{
width:540px;
height:46px;
}
/* For books lists--linked books: */
li.book{
font-style:italic;
}
/* For books lists--unlinked "junk" books: */
li.book1{
font-style:italic;
font-weight:bold;
}
/* For books lists--unlinked omnibused books: */
li.book2{
font-style:italic;
font-weight:bold; /* needless: links are always boldfaced */
}
li.list{
margin-bottom:6px;
}
li.series{
margin-top:5px;
font-weight:bold;
}
li.omnibus{
margin-top:5px;
font-style:italic;
}
li.omnibus2{
margin-top:5px;
font-style:italic;
font-weight:bold;
}
/* are these still needed? */
li.uline{
font-size:small;
font-style:italic;
margin-top:10px;
}
li.level1{
font-size:small;
font-style:italic;
}
li.level1a{
font-size:small;
font-style:italic;
font-weight:bold;
}
li.level2{
font-size:x-small;
font-style:italic;
}
li.level2a{
font-size:x-small;
font-style:italic;
font-weight:bold;
}
p.bold{
font-weight:bold;
}
p.bottom{
max-width:80%;
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:small;
}
p.quick{
text-align:left;
font-size:x-small;
font-weight:bold;
}
p.quick2{
text-align:left;
font-weight:bold;
}
p.returnto{
font-family:Arial, sans-serif;
font-size:xx-small;
}
p.returnto2{
font-family:Arial, sans-serif;
font-size:xx-small;
margin-bottom:40px;
margin-top:15px;
}
ul.quick{
text-align:left;
margin-top:0px;
font-size:x-small;
}
ul.quick2{
text-align:left;
margin-top:0px;
}
/* NON-ELEMENT-SPECIFIC CLASSES: */
/* for "aka" in book listings: */
.aka{
font-style:normal;
font-size:small;
font-weight:bold;
}
/* of general use: */
.center{
text-align:center;
}
/* The next two are for the black-to-white (& vice-versa) fade lines: */
.fadein{
background:-webkit-linear-gradient(#ffffff,#000000); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(#ffffff,#000000); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(#ffffff,#000000); /* For Firefox 3.6 to 15 */
background:linear-gradient(#ffffff,#000000); /* Standard syntax */
}
.fadeout{
background:-webkit-linear-gradient(#000000, #ffffff); /* For Safari 5.1 to 6.0 */
background:-o-linear-gradient(#000000, #ffffff); /* For Opera 11.1 to 12.0 */
background:-moz-linear-gradient(#000000, #ffffff); /* For Firefox 3.6 to 15 */
background:linear-gradient(#000000, #ffffff); /* Standard syntax */
}
/* These are "fakes" to make Google's code validate:
.gcse-searchbox
.gcse-searchresults
*/
/* for site-navigation notice: */
.nav{
color:#00ff00;
font-size: 1.4vw;
}
/* For use in li blocks: */
.normal{
font-style:normal;
font-weight:normal;
}
/* For use in li blocks: */
.comment{
font-style:italic;
font-weight:normal;
font-size:small;
}
/* For the Candidate-Authors list: */
.hipriority{
color:#009900;
}
.nopriority{
color:#000000;
}
.lopriority{
color:#666666;
}
/* for skip link: */
.skipnav {
text-align: left;
}
.skipnav a {
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden;
}
.skipnav a:focus, .skipnav a:active {
position:static;
left:0;
/* width:100%; */
height:auto;
overflow:visible;
font-size:x-small;
background-color:#6969c8; /* 6969c8 */
color:#ffffcc;
}
/* For use in italicized blocks: */
.roman{
font-style:normal;
font-weight:normal;
}
/* For use as post-book-link comments: */
.tag{
font-style:normal;
font-weight:normal;
font-size:small;
}
/* for off-white background-color rows */
.sandy{
background-color:#ebe0be;
}
/* general-purpose: */
.small{
font-size:small;
}
/* general-purpose: */
.xsmall{
font-size:x-small;
}
/*====Start Drop-Down Menu block========================*/
/* DROP-DOWN MENUS: */
/*
To change top-menu heights, three factors are involved:
.top-level-menu > li => height
.second-level-menu => top [must match the above]
-- OR --
.varietal-level-menu => top [must match the above]
.top-level-menu a => line-height [must match the above]
*/
/* Topmost Menu (always visible): */
.top-level-menu
{
list-style:none; /* no bullets or other marks */
padding:0;
margin:0;
}
.top-level-menu > li
{
position:relative;
float:left;
height:60px; /* "top" for 2nd-level menus depends on this */
width:20%;
z-index:9;
}
/* contains the "down" triangle in main menu blocks */
.top-level-menu span
{
font-size:60%;
display:none;
}
.top-level-menu li:hover > ul
{display:inline;} /* On hover, display the next level's menu */
.top-level-menu li:hover span
{display:inline;} /* On hover, display the content */
/* Second Level (drops from main): */
.second-level-menu
{
position:absolute;
top:60px; /* must match height of first-level displays */
left:0;
width:100%; /* of parent header space */
list-style:none; /* no bullets or whatever */
padding:0;
margin:0;
display:none; /* initially invisible */
width:200%; /* makes it double the width of the block above it */
}
.second-level-menu > li
{
position:relative;
}
.second-level-menu > li:hover {background:#cccccc;}
/* Varietals Level (drops from main): */
.varietal-level-menu
{
position:absolute;
top:60px; /* must match height of first-level displays */
left:0;
width:100%; /* of parent header space */
list-style:none; /* no bullets or whatever */
padding:0;
margin:0;
display:none; /* initially invisible */
}
.varietal-level-menu > li
{
position:relative;
}
.varietal-level-menu > li:hover {background:#cccccc;}
/* Third Level (drops from a secondary): */
.third-level-menu
{
position:absolute;
top:0;
right:-100%;
width:100%;
list-style:none;
padding:0;
margin:0;
display:none;
}
.third-level-menu > li
{
line-height:15px;
background:#999999;
}
.third-level-menu > li:hover {background:#cccccc;}
/* Menu Link Styles */
.top-level-menu a /* Also applies to all links inside the multi-level menu */
{
text-align:center;
font:bold large Arial, Helvetica, sans-serif;
font-size:22px; /* fallback in case "vw" not recognized by browser */
font-size:2.2vw;
color:#ffffff;
text-decoration:none;
padding:0; /* top/bottom right/left*/
line-height:60px;
/* Make the link cover the entire list item-container */
display:block;
}
.top-level-menu a:hover {color:#000000;}
.second-level-menu a /* Apply to all links inside the multi-level menu */
{
text-align:left;
font:bold x-small Arial, Helvetica, sans-serif;
font-size:11px; /* fallback in case "vw" not recognized by browser */
font-size:1.7vw;
color:#ffffff;
text-decoration:none;
padding:0 10px; /* top/bottom right/left*/
line-height:15px;
/* Make the link cover the entire list item-container */
display:block;
}
.second-level-menu a:hover {color:#000000;}
.varietal-level-menu a /* Apply to all links inside the multi-level menu */
{
text-align:left;
font:bold x-small Arial, Helvetica, sans-serif;
font-size:11px; /* fallback in case "vw" not recognized by browser */
font-size:1.7vw;
color:#ffffff;
text-decoration:none;
padding:0 10px; /* top/bottom right/left*/
line-height:15px;
/* Make the link cover the entire list item-container */
display:block;
}
.varietal-level-menu a:hover {color:#000000;}
/*====End Drop-Down Menu block==========================*/
/* end standard CSS */
/* "A good practice would be to start with three breakpoints :
smaller than tablet (max 768), tablet (min 768 max 1024) and desktop (min 1024)." */
/* We just use mobile (max 800) and desktop (min 801), though with a wide-screen extra
(min 1000) for the drop-down menus. */
/* MOBILE-SPECIFIC CSS: */
@media only screen and (max-width:768px) /* tablets max out at 800 wide */
{
/* This has to come here lest it be over-written below: */
.mobile{display:block;}
.desktop{display:none;}
/* Element-specific changes: */
/* "quick jump" menus: */
div.quick{font-size:medium;}
h2
{
font-size:3.6vw;
line-height:50px;
}
p.bottom{font-size:2.4vw;}
span.desktop{display:none;}
span.mobile{display:inline;} /* over-writes the generic .mobile class for */
/* class changes: */
.nav{font-size: 2.3vw;}
.second-level-menu a /* Apply to all links inside the multi-level menu */
{
font-size:11px; /* fallback in case "vw" not recognized by browser */
font-size:2.3vw;
}
.second-level-menu-rightmost a /* Apply to all links inside the multi-level menu */
{
font-size:11px; /* fallback in case "vw" not recognized by browser */
font-size:2.3vw;
}
} /* end mobile-phone CSS */
/* NARROW-PHONE CSS: */
/* Anything with a screen width of 480 pixels or more can satisfactorily display all our
site pages; for screens smaller than that in portrait mode, this class allows display
of a "rotate your phone" message to alert them to use landscape view for better
viewing. (Virtually all smartphones--I believe only the Blackberry Q10 is excepted--
display at least 480 px width in landscape mode.)
Note: landscape = the display is wider than it is tall
portrait = the display is taller than it is wide
*/
@media only screen and (max-width:479px) and (orientation:portrait)
{
/* for the narrow-phone message */
.narrow
{
display:block; /* makes visible */
background-color:#ff3333;
color:#ffffff;
font-size:smaller;
font-weight:bold;
padding:5px;
border:solid 1px;
min-width:288px; /* 288+10+2 = 300 total */
}
/* "quick jump" menus: */
div.quick{font-size:x-large;}
p.bottom{font-size:3.0vw;} /* the W3C paragraph */
.nav{font-size: 2.8vw;}
} /* end narrow-phone CSS */
/* EXTRA-WIDE CSS: */
@media only screen and (min-width:1000px)
{
.extrawide{display:inline-block;}
.second-level-menu a /* Apply to all links inside the multi-level menu */
{
font-size:11px; /* fallback in case "vw" not recognized by browser */
font-size:1.2vw; /* to keep over-large lines from overlaying one another */
}
.second-level-menu-rightmost a /* Apply to all links inside the multi-level menu */
{
font-size:11px; /* fallback in case "vw" not recognized by browser */
font-size:1.2vw; /* to keep over-large lines from overlaying one another */
}
.varietal-level-menu a /* Apply to all links inside the multi-level menu */
{
font-size:11px; /* fallback in case "vw" not recognized by browser */
font-size:1.2vw; /* to keep over-large lines from overlaying one another */
}
.varietal-level-menu-rightmost a /* Apply to all links inside the multi-level menu */
{
font-size:11px; /* fallback in case "vw" not recognized by browser */
font-size:1.2vw; /* to keep over-large lines from overlaying one another */
}
.nav{font-size:1.1vw;}
} /* end extra-wide CSS */
/* end all CSS */