/* CONSIDER getting rid of the browser warning section because those browsers are really old now */ /* prevent annoying bounce effect in OSX, works in Chrome, FF, Opera, but not Safari */ /* of figure and video windows compensate with style='overflow:hidden; height:auto;' */ html { height:100%; overflow:hidden; } body { height:100%; overflow:auto; overflow-x:hidden; } div.draft { display:none; font-size:200px; font-size:clamp(100px,200px,22vw); line-height:100vh; /* centers it vertically */ text-align:center; width:inherit; font-weight:bold; font-family:Arial; z-index:1; opacity:0.1; position:fixed; pointer-events: none; /*background-color:red; /*********** for testing ***************/ } body.draft div.draft { display:block; } #accountPhone, #accountScreen { display:none!important; /* suppress these because not in use */ } /************************* everything else is for all platforms and browsers *************************/ /* Could segregate all fonts and sizes */ /* font-family:Verdana, Geneva, sans-serif; --wide font-family:Tahoma, Arial, Helvetica, sans-serif; --narrow font-family:Georgia, Utopia, Palatino, 'Palatino Linotype', serif; --wide font-family:'Times New Roman', Times, serif; --narrow font-family:'Courier New', Courier, monospace; --monospace */ body, section, aside { font-family:'Noto Serif',serif; font-size:14px; } #footnotepopup, #footnotepopup * { font-size:12px; } aside, ol.fn, ol.fn * { font-size:12px; } nav, #indexfigs, footer, #vidcontrol { font-family:Helvetica, Arial, Tahoma, sans-serif; font-size:12px; font-weight:400; } footer { font-size:11px; } nav .indexhead { font-size:12px; font-weight:bold; } /*********** changed weight from 600 to bold because of a (temporary?) Chrome Windows bug */ #accountScreen .account { margin-left:57px; position:absolute; } /* but now it moves when the figure menu opens on desktop, so removed float:right ADDED position:absolute after increasing font sizes*/ #accountPhone .account { float:right; } #accountPhone { display:none; } /* set to display:block; if iPhone */ #accountScreen { display:block; } /* set to display:none; if iPhone */ #accountScreen a { display:inline-block; padding:3px 6px; margin-left:-6px; } #accountPhone a { display:inline-block; } #accountPhone .logout { margin-left:-7px; } #accountScreen { margin-top:-17px; margin-bottom:10px; } #sectioncover { background:#00f; width:100%; height:100%; } /* is this used any more? */ select { width:150px; height:25px; margin-top:12px; } /* Color designations are found in brown.css, blue.css, et al. */ /************************** general settings for the entire document *******************************/ /* don't display any instructor material in student manual (applies to nav and section) */ .student .instructor { display:none; } body { margin:0px; border:none; padding:0px; } form { margin:0; } nav a { border-bottom:none; /*text-decoration:none;*/ background:none; } /* not needed in menu, where function is clear */ #figbody { margin:8px; margin-bottom:0px; overflow:hidden; } ul { padding-left:2em; } h1 { font-size:16px; font-weight:bold; } /*********** changed weight from 600 to bold because of a (temporary?) Chrome Windows bug */ h2 { font-size:15px; font-weight:bold; } /*********** changed weight from 600 to bold because of a (temporary?) Chrome Windows bug */ h1+h1 { font-size:14px;} h1 { text-align:center; } h2, h3 { text-align:left; margin-bottom:0px; font-weight:bold; } /*********** changed weight from 600 to bold because of a (temporary?) Chrome Windows bug */ h3 { font-style:italic; font-weight:300; } h3 { font-size:15px; } h3+p, h2+h3 { margin-top:3px; } h2+p { margin-top:6px; } h2 { margin-top:18px; } h1+h1 { margin-top:-6px; } /* for Instructor's Supplement after Title */ p.listhead { margin-bottom:0px; } p.listhead+ul { margin-top:3px; } input[type='text'] { height:22px; } input[type='radio'], input[type='checkbox'] { margin:0 3px 0 0; } /* no space char after these controls */ /************************* main document section, which contains divs for each part of the text ******************************/ section { position:relative; display:block; left:162px; width:80%; /*width:78%; /* this is worked out empirically to work with 768 wide; it makes no sense that greater widths overflow and generate a scrollbar */ max-width:758px; /*min-width:585px;*/ margin:4px; padding:0px 8px 0px 8px; line-height:23px; /* 1.5625 accommodate super- and subscripts by slightly wider spacing */ border-radius:6px; border:1px solid; } hr.sep { margin:8px 3px 4px 3px; border:none; border-top:1px dotted #ccc; } /* ideally, I'd put this div at the end of the body, just to keep it out of the way, and then use position:absolute to put it at the top if it is shown, but then it overlaps the section rather than sitting above it. */ div.warning { display:none; position:relative; top:0px; left:164px; max-width:752px; width:100%; margin:4px; padding:0px 8px 0px 8px; border-radius:6px; border:2px solid #f66; background:#fff; } #browserwarning h2 { margin-top:2px; } #browserwarning ul, #browserwarning p { margin-bottom:2px;margin-top:2px; } div.warning.shown { display:block; } /************************* footnotes and references ********************************/ a.fn:before { content: ' ['; } a.fn:after { content: ']'; } /* footnote in brackets; see below for superscript alternative */ /*a.fn:before { content:'\2009'; } a.fn { vertical-align:super; font-size:10px; } *//* superscript alternative */ a.fn:hover { text-decoration:none; } /* because hover already makes a popup */ h2.fn:before { content:'Footnotes'; } /* for the section at the end of the text */ /**** language ****/ #footnotepopup { /* popup for footnote mouseover */ display:none; position:absolute; padding:4px; z-index:2; max-width:50%; border-radius:4px; border:1px solid; line-height:16px; } #footnotepopup.shown { display:block; } ol.fn { padding-left:2em; list-style-type:decimal; line-height:17px; } /* number is 1px too low in FF (OK in Safari) */ ol.fn li { margin-bottom:4px; } /*#footnotepopup:after { font-weight:600; content:' (Click to go to the footnotes.)'; }*/ /************************* asides *****************************/ aside { display:block; position:relative; float:right; width:40%; margin:0px -2px 4px 6px; padding:0px 4px 0px 6px; border-radius:6px; border:1px solid; line-height:16px; } aside p { margin-top:3px; margin-bottom:3px; } aside.full { width:100%; float:none; margin:4px -2px 0px 0px; } aside.half { width:50%; } /************************* list styles (references, objectives, questions, answers, equipment, steps *************************/ ul.ref { margin-top:6px; text-indent:-2em; list-style:none; } ol.q, ol.obj, ol.equip, ol.steps { margin-top:0px; padding-top:0px; padding-left:1.5em; /* 1.5em is OK as long as there are no more than 9 items; may have to go to 2em for >9. */ } ul.q, ul.qa, ul.obj, ul.equip, ul.check, ul.steps, ol.q ul { margin-top:0px; padding-top:0px; padding-left:1.5em; } /* ol.q ul gets everything that ul.qa gets, but I've decided to keep using class='qa' for clarity in the html. */ /* marker-offset:2em; isn't yet supported in any browser. */ /*ol.q ul { list-style:circle; }*/ /* when this was present, lab 4i q6 had bullets next to equations, despite ul.mathequal {list-style-type:none;} at line 389 /************************* display of equations in the text *************************/ .math { /* algebraic series */ list-style-type:none; text-align:center; margin-right:350px; /* keep text centered, but closer to the left */ } .math.wide { margin-right:10px; } .var { /* list of variables */ list-style-type:none; text-align:left; margin-left:7%; } span.eq { margin-left:16%; } /* center on the = sign */ ul.mathequal { list-style-type:none; padding:0px; margin-left:-20px; } /* good in lab 4i; will the negative margin mess up other labs? */ .mathleft { float:left; text-align:right; width:33%; min-width:233px; } /* 233px */ .mathleft.narrow { width:16%; min-width:118px; } /* 118px or do I want max-width:118px?*/ .mathleft.medium { width:33%; min-width:233px; } /* 233px */ .mathleft.wide { width:50%; min-width:348px; } /* 348px */ /* Example of use: */ /* TRY DOING THIS WITH SPANS AND DISPLAY:TABLE */ /* Unfortunately, equations with fractions (like Nernst) have to be formatted as tables. Not good for text browsers, but then, the manual wouldn't really be usable with such a browser anyway. */ table.eqfrac { margin-left:16%; } table.eqfrac td.num { border-bottom:1px solid black; text-align:center; } table.eqfrac td.den { text-align:center; } table.eqfrac td.rt { text-align:right; vertical-align:middle;} /* I don't understand why these are necessary or why I need all of them. With none of them, the equations in a list item are spaced properly but those in a paragraph are not. Furthermore, I could find no descriptor that worked for both tables in the paragraph, so I had to have p+ and br+. The li designation undoes the br+ one for the list item! */ p+table.eqfrac { margin-top:-15px; margin-bottom:-3px; } br+table.eqfrac { margin-top:-3px; margin-bottom:-3px; } li table.eqfrac { margin-top:0px; margin-bottom:0px; } /************************* footer with title and contact info (not yet designed) *************************/ footer { /* commented-out stuff was to keep the footer at the bottom of the text area a la gamebug */ /*position:relative;*/ /* for footer at bottom of text area */ display:block; /*left:164px; max-width:746px;*//* for footer at bottom of text area */ left:0px; width:150px; /* for lower-left footer */ margin:8px; padding:4px; border-radius:6px; border:1px solid; /* color is set in the color.css file */ bottom:0; position:fixed; z-index:-10; /* for lower-left footer */ } /*footer { position:relative; display:block; left:164px; width:746px; margin:4px; padding:4px 8px 4px 8px; border-radius:6px; border:1px solid; }*/ /************************* table of resources for instructors ********************************/ table.resources { width:90%; margin-left:5%; border-collapse:collapse; } table.resources th, table.resources td { border:1px solid gray; padding:1px; padding-left:4px; vertical-align:top; } table.resources th { font-weight:bold; /*********** changed weight from 600 to bold because of a (temporary?) Chrome Windows bug */ text-align:left; border:none; padding:1px; padding-left:0px; padding-top:0.5em; } /************************* navigation area ********************************/ nav { /* in a box that stays at the left */ position:fixed; margin:4px; padding:2px 0px 0px 4px; border:none; top:0px; height:auto; width:160px; /* want this for list ui but for buttons it needs to be auto */ overflow:visible; /* tried overflow:auto and overflow-y:auto and neither one gave functional scroll bars */ } nav p.indexhead { margin-top:0px; margin-bottom:3px; } nav ul { list-style:none; } nav img { /* crawdad logo */ margin:2px 0px 0px 0px; z-index:-1; position:relative; } /* #Indexfigs and #indexlabs are headers for the figure and lab lists; #indexfigs is displayed as a button */ #indexfigs { position:relative; text-align:center; width:150px; height:25px; color:#333; padding-top:5px; /*text-shadow:#fff 1px 1px 0px;*/ border:1px solid #999; border-radius:4px; /*background:linear-gradient(to bottom,#fff,#ccc);*/ background:#fff; cursor:pointer; z-index:4; } /* list of lab links */ #indexlablist p.intro { line-height:20px; margin-top:0px; margin-bottom:0; padding:0; } /* was line-height:16px */ #indexlablist ol { margin-left:-18px; line-height:20px; margin-top:0px; } /* was line-height:16px */ #indexlablist li { padding-left:0em; } #indexlablist ol.num li { list-style:decimal outside; } #indexlablist ol.alpha li { list-style:upper-alpha outside; } #indexlablist .indexhead { margin-top:6px; margin-bottom:3px; } /* separator between lab list and figure list */ nav hr.listsep { margin-top:-3px; margin-bottom:10px; border:none; border-top:1px dotted #ccc; margin-right:3px; } /* down-arrow for popup lists */ .listarrow { width:0px; height:0px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #666; border-bottom:none; float:right; margin:6px 8px 0px -12px; } #indexfigs .listarrow { width:0px; height:0px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:4px solid #666; border-right:none; float:right; margin:3px 8px 0px -12px; } #indexfigs.shown .listarrow { visibility:hidden; } #indexfigs.shown { border-radius:5px 0px 0px 5px; border-right:none; } /* #indexfiglist is a hidden list that is displayed when the mouse hovers over #indexfigs */ #indexfiglist { display:block; visibility:hidden; position:fixed; /* was relative */ text-align:left; left:146px; line-height:16px; /* was line-height:16px, may be set to 20 in code */ background:#fff; padding:6px 8px 3px 8px; border:1px solid #888; box-shadow:3px 3px 4px rgba(0,0,0,0.2); z-index:2; width:200px; } #indexfiglist.shown { visibility:visible; } /* separator between student and instructor figures in #indexfiglist */ nav li.sep { border-top:1px dotted #ccc; margin-top:2px; padding-top:3px; } .indexhead { display:block; } /* for regular desktop window */ #indexbuttonbar { display:none; } /* for regular desktop window */ /********************************************** start of device section *******************************************/ /* WINDOW SIZE as window gets shorter, drop unnecessary stuff: footer, then logo, then account stuff */ /* Do this only for windows >= 768px, because less than that goes into phone/tablet mode, below */ @media screen and (min-width:768px) { /* webkit (Safari) max-width:700px is triggered at 716, so if I want 768, I must use 752*/ /* FIRST hide the footer */ @media screen and (max-height:931px) { /* was 748px with 16px spacing on index list, now 860 with 20px spacing */ .instructor footer { display:none; } } @media screen and (max-height:625px) and (max-width:768px) { .student footer { display:none; } } /* SECOND hide the crawdad logo */ @media screen and (max-height:857px) { /* was 680px with 16px spacing on index list, now 795 with 20px spacing */ .instructor #accountScreen { margin-top:0px; } .instructor nav img { display:none; } } @media screen and (max-height:561px) and (max-width:768px) { .student #accountScreen { margin-top:0px; } .student nav img { display:none; } } /* THIRD, make the nav ara wider and put Supplement beside regular (instructor only) */ /* PROBLEM: There's a range where this overlaps with phone/tablet mode Need to find that range and work around it. It's when height goes below 600 and width is greater than 782 CURRENTLY, this never seems to happen */ @media screenXXX and (max-height:755px) and (max-width:768px) { /* was 580px with 16px spacing on index list, now 690 with 20px spacing */ .instructor section { left:220px; width:77%; max-width:786px; } .instructor #indexlablist br { display:none; } .instructor #indexlablist br+a { float:right; margin-left:0px; } .instructor #indexfigs { width:208px; } .instructor #indexfiglist { left:200px; } #indexlablist, #indexlablist li { line-height:20px; } } /* FINALLY, hide the account stuff -- never happens because it goes into tablet mode first */ @media screen and (max-height:517px) and (max-width:768px) { .instructor #accountScreen { display:none; } } @media screen and (max-height:461px) and (max-width:768px) { .student #accountScreen { display:none; } } } /* COMMON DEVICE SIZES Phones: 320x480 (iPhone 4), 320x568 (iphone 5), 375x667 (iPhone 6), 360x640, 384x640, 400x640, 320x533 (various others) Phablets: 414x736 (iPhone 6+), 412x690, 432x768 Tablets: 768x1024 (most iPads, some others), 800x1280, 600x1024, 600x960, 1024x1366 */ table.saline { width:92%; margin-left:auto; margin-right:auto; border-top:2px solid gray; border-bottom:2px solid gray; } /* PHONE: put lab and figure lists in dropdown lists activated by button */ @media screen and (max-width:768px) and (orientation:portrait), (max-height:768px) and (orientation:landscape) { /* PHONE (tested with iPhone) WAS max-device-width:480px */ footer { display:none; } nav a { text-decoration:none; background:none; } /* not needed in menu, where function is clear */ section { left: 0px; width: 99%; max-width:975px; margin: 0px; padding: 6px; border: none; margin-top: 33px; /* for menu */ } section~section { margin-top:6px; } div.warning { display:none; position:relative; left:0px; top:33px; width:98%; max-width:98%; } table.resources { width:90%; margin-left:5%; } table.saline { width:80%; } /* compact things a little */ h1 { margin:0px; } h1+h1 { margin-top:3px; } /* for Instructor's Supplement after Title */ h1+h2 {margin-top:6px; } /********* most of the rest of this has to do with styling the lab and figure lists as buttons with dropdown menus */ nav { overflow:visible; /* allows dropdown lists to show */ width:auto; } nav * { -webkit-tap-highlight-color: rgba(0,0,0,0); } #indexbuttonbar { z-index:3; /* +1 over the lists */ display:block; position:fixed; top:0; left:0; background:#eee; border-bottom:1px solid #ccc; width:320px; /* will be set by js */ height:33px; margin:0px; } #indexlabsbutton, #indexfigsbutton { z-index:2; /* between button and section */ position:fixed; cursor:pointer; height:25px; padding-top:4px; margin:4px 0px; border:1px solid #999; border-radius:5px; background:#f7f7f7; text-align:center; font-size:13px; font-weight:400; color:#444; font-family:Helvetica, Arial, Tahoma, sans-serif; /*font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;*/ } #indexfiglist, #indexlablist { margin:0px; text-align:left; position:fixed; left:auto; line-height:28px; border:1px solid #999; background:#f7f7f7; padding:3px 6px; box-shadow:2px 2px 3px rgba(0,0,0,0.2); border-radius:5px; text-wrap:nowrap; /* was suppress, flagged as invalid */ display:block; visibility:hidden; } #indexfigsbutton { right:5px; left:auto; } #indexlabsbutton { left:5px; right:auto; } #indexfiglist { right:5px; left:auto; } #indexlablist { left:5px; right:auto; } #accountScreen { display:none; } #accountPhone { display:inline; margin-left:24px; } /* not clear why I have to do inline and margin to make it appear inside div */ .indexhead { display:none; } nav img { display:none; } /* the crawdad logo */ nav li.indexhead { display:none; } /* the Background heading */ #indexfiglist.shown, #indexlablist.shown { visibility:visible; } #indexfigsbutton.shown, #indexlabsbutton.shown { border-radius:5px 5px 0px 0px; border-bottom:none; height:28px; } /* hide separators between lab/background and student/instructor */ nav li.sep, nav li.indexhead+li { border-top:none; margin-top:0px; padding-top:0px; } #indexlablist .indexhead { display:none; margin:0px; } #indexlablist ol { margin-left:-24px; margin-top:0px; margin-bottom:0px; } #indexlablist ol.alpha { border-top:none; } /* make instructor's lab list go in two columns with supplements on the right */ .instructor #indexlablist br { display:none; } .instructor #indexlablist br+a { float:right; } .listcolumns2, .listcolumns3 { -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc; } .listcolumns2 { -webkit-column-count:2; -webkit-column-gap:20px; -moz-column-count:2; -moz-column-gap:20px; column-count:2; column-gap:20px; } .listcolumns3 { -webkit-column-count:3; -webkit-column-gap:16px; -moz-column-count:3; -moz-column-gap:16px; column-count:3; column-gap:16px; } .listcolumns2 li, .listcolumns3 li { -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid; text-wrap:suppress; } .listcolumns2 li:first-child, .listcolumns2 p.intro, .listcolumns3 li:first-child, .listcolumns3 p.intro { margin-top:0px; } @media screen and (orientation:landscape) { #indexfigsbutton { left:5px; right:auto; } #indexlabsbutton { right:5px; left:auto; } #indexbuttonbar { transform-origin: top left; transform:matrix(0,-1,1,0,0,320); /* last item is width of buttonbar, set in js */ } section { margin-left:33px; margin-top:0px; } #indexfiglist.shown, #indexlablist.shown { visibility:visible; left:34px; top:6px; } #indexfiglist { border-radius:5px 5px 5px 0px; } #indexlablist { border-radius:0px 5px 5px 5px; } } } /********************************************** end of device section *******************************************/