/* General formatting */ html, body { margin:0; padding:0 } body { font-family: Helvetica Neue, Arial, serif; } h1 { font-family: Helvetica Neue, sans-serif; font-size: 28pt; font-weight: bold; } h2 { font-family: Helvetica Neue, sans-serif; font-size: 22pt; font-weight: bold; } /* Formatting for title and header content */ .titlethick { font-family: Century Gothic, Helvetica Neue, sans-serif; font-weight: 600; } .titlethin { font-family: Century Gothic, Helvetica Neue, sans-serif; font-weight: 200; } div#header { color:white; background:black; padding-left:20px; padding-top:0px; padding-bottom:0em; margin-top:0px; } div#headerback { margin-top:0px; background:black; } div#header h1 { font-size:32pt; margin-bottom:0px; margin-top:0px; /* prevents white bar across top in Firefox */ } div#header h2 { font-size:22pt; margin-bottom:3px; } div#toolbar { background:black; font-family: Century Gothic, Helvetica Neue, sans-serif; font-weight: 100; } div#toolbar table { /* color:yellow; */ color:#ffff66; width:100%; border-top:solid; border-color:red; padding-left:100px; table-layout:fixed; } div#toolbar td { padding:5px; } div#toolbar a:link { /* color:yellow; */ color:#ffff66; text-decoration:none; } div#toolbar a:visited { /* color:yellow; */ color:#ffff66; } div#toolbar a:hover { color:red; } /* Stuff for hierarchical menus (currently unused) */ nav { border-top:solid; border-color:red; /* // these have no visible effect -- DR padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; */ } nav ul { /* background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); border-radius: 10px; display: inline-table; */ padding: 0 20px; list-style: none; position: relative; display: table; width:100%; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; display: table-cell; width: 20%; text-align: center; } nav ul li:hover { /* background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); */ } nav ul li:hover a { /* color: #fff; */ } nav ul li a { /* color: #757575; display: block; padding: 25px 40px; */ display: block; padding: 5px 5px; text-decoration: none; } nav ul ul { /* background: #5f6975; */ background:black; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; /* border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; */ position: relative; display: block; } nav ul ul li a { /* padding: 15px 40px; */ color: #fff; } nav ul ul li a:hover { /* background: #4b545f; */ } nav ul ul { display: none; } nav ul li:hover > ul { display: block; } /* Within-page table of contents (currently unused) */ div#toc { background:lightgrey; margin-top:0px; padding-top:10px; padding-bottom:10px; padding-left:10px; } /* Display of book cover */ div#cover { float:right; width:35%; min-width:350px; padding-left:40px; /* padding-right:40px; */ padding-top:40px; padding-bottom:40px; /* background:black; */ } /* Layout of main sections of page */ div#main { margin-top:0px; padding-left:100px; padding-right:50px; padding-top:0px; padding-bottom:20px; } div#maintext { width:600px; min-height:400px; } /* Display of group of book covers */ div#covergroup { width:100%; } /* Footer formatting */ div#footer { clear:both; width:100% } div#footer p { padding-left:20px; } /* Opening and closing image popup */ .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 384px; position: relative; margin: 10% auto; padding: 15px 15px 15px 15px; border-radius: 10px; background: white; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { /* background: #00d9ff; */ background: red; } /* ############### responsive layout CSS ############ */ @media (max-width: 600px){ /* responsive layout break point */ h1 { font-family: Helvetica Neue, sans-serif; font-size: 18pt; font-weight: bold; } h2 { font-family: Helvetica Neue, sans-serif; font-size: 14pt; font-weight: bold; } div#header h1 { font-size:18pt; margin-bottom:0px; margin-top:0px; /* prevents white bar across top in Firefox */ } div#header h2 { font-size:14pt; margin-bottom:3px; } div#toolbar { font-weight: 200; } div#toolbar table { padding-left:0px; table-layout:inherit; } div#cover { width:100%; } div#cover img { width:35%; height:35%; } div#covergroup img { width:35%; height:35%; } div#main { margin-top:0px; padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:20px; } div#maintext { width:100%; } div#footer p { padding-left:10px; } .modalDialog > div { width: 80%; position: absolute; margin: 10% auto; padding: 10px 10px 10px 10px; border-radius: 5px; background: white; } }