/* DEPRECATED */ .tinyblock { max-width: 100px; height: auto; display: inline-block; vertical-align: top; } .table-hlines { border-bottom: 1px; border-top: 0; border-right: 0; border-left: 0; border-color: lightgray; border-style: dashed; } /* table-hlines to be replaced with cellbottomborder */ .img-floating { margin: 0 auto; min-width: 420px; max-width: 100%; text-align: center; } /* img-floating to be replaced with floating */ .topdeco { margin-bottom: 10px; width: 100%; height: 10px; } /* topdeco to be replaced with css styling */ /* also to deprecate: sidebar1 sidebar2 sidebar3 */ /* PAGE BASICS */ body { color: black; text-align: left; background-color: royalblue; background-attachment: fixed; } @media only screen and (max-width: 620px) { body { background-attachment: scroll; } } /* adjusment for mobile since mobile browsers do not recognize background-attachment: fixed and it looks broken otherwise */ .title, .container, .sidebar, .sidebar1, .sidebar2, .sidebar3, .updates, .modalbox, .notebox { background-color: white; border-color: cornflowerblue; border-width: 1px; border-style: solid; margin: 10px auto; } /* basic block styling */ img { max-width: 100%; max-height: 100%; margin: 10px; } /* TEXT STYLING */ em, h1, h2, h3, p, blockquote { font-family: Arial; margin: 10px; } h1, h2, h3, .li-h3, .li-h2 { font-weight: bold; } li, p, blockquote { font-size: 14px; } em { color: gray; margin: 0; } h1 { font-size: 36px; } h2, .li-h2 { font-size: 24px; } h3, .li-h3 { font-size: 18px; } li { font-family: Arial; } .li-spaced li { margin-bottom: 8px; } /* */ a { color: blue; text-decoration: none; font-weight: bold; } a:active, a:hover { text-decoration: underline; } /* styles links */ blockquote { border-left: #444444 dotted 1px; padding: 10px; } /* styles blockquotes */ .highlight1 { background-color: yellow; } .highlight2 { background-color: cyan; } .highlight3 { background-color: magenta; } /* highlighted sections */ sup { font-size: 12px; } /* superscript, such as help icons and footnotes */ .cattags { font-size: 13px; } /* category tags for library sort */ .headsup { color: red; font-weight: bold; } /* marker text for important notes within page */ .side ul, .sitemap ul { list-style: none outside; margin-left: -30px; } .side li::before, .sitemap li::before { content: "‣"; padding-right:3px; } .side li, .sitemap li {padding-left: 20px; text-indent: -20px; } .side .sideheader { margin-bottom: -10px; } /* styling for directory-style lists */ /* VARIETY STYLING */ .lined { border: 1px; border-color: royalblue; border-style: solid; } /* outlines images, boxes or tables */ .censor { filter: blur(6px); -webkit-filter: blur(6px); } /* blurs sensitive images */ .centeroverride { text-align: center; } .rightoverride { text-align: right; } .leftoverride { text-align: left; } /* overrides for alignment */ .floating { min-width: 400px; max-width: 100%; margin: 10px; text-align: center; } /* for floating horizontally-centered blocks */ .vertical-center { margin: 10px auto; } /* for floating vertically-centered blocks */ .decoblock { display: inline-block; } /* keeps things grouped a little more properly with screen size adjustments */ hr { margin: 0 10px; } /* divider lines */ @media only screen and (min-width: 620px) { .widehide { display: none; } } @media only screen and (max-width: 620px) { .mobilehide { display: none; } } /* testing mobile/widescreen hide */ /* SIDEBAR STYLING */ .side { position: fixed; display: inline-block; vertical-align: top; padding: 5px; height: 75vh; z-index: 1; } @media only screen and (max-width: 620px) { .side { position: relative; display: block; height: auto; width: 400px; } } /* mobile responsiveness adjustments */ .sidebar1, .sidebar2, .sidebar3, .sidebar { width: 200px; position: relative; min-height: 12px; max-height: 70vh; overflow-y: auto; } @media only screen and (max-width: 620px) { .sidebar2, .sidebar3, .sidebar { max-height: 300px; margin: 10px 0; width: 75%; } } /* mobile responsiveness adjustments */ /* MAIN SECTION STYLING */ .main { display: inline-block; min-width: 420px; max-width: 830px; padding: 5px; margin-left: 220px; z-index: 1; } @media only screen and (max-width: 620px) { .main { display: block; margin-left: 0; } } /* mobile responsiveness adjustments */ .container { min-width: 420px; max-width: 830px; } .container img { max-width: 90%; } @media only screen and (max-width: 1100px) { .container { width: 400px; } } /* smaller and mobile responsiveness adjustments */ .title { margin: 10px auto; width: 400px; display: inline-block; text-align: center; vertical-align: bottom; } .mediumblock { width: 400px; display: inline-block; vertical-align: top; } /* fits 2 in container at full width */ .smallblock { display: inline-block; vertical-align: top; max-width: 200px; } .smallblock img { max-width: 175px; } /* fits 4 in container at full width, 2 at half width */ .mediumsmallblock { display: inline-block; vertical-align: top; width: 300px; } .mediumlargeblock { display: inline-block; vertical-align: top; width: 520px; } /* mediumsmallblock and mediumlargeblock compliment each other on full width container but break in wrong order */ @media only screen and (max-width: 1100px) { .mediumblock, .mediumsmallblock, .mediumlargeblock { width: 100%; } } /* smaller non-mobile responsiveness adjustments */ .gallerybox, .galleryboxsmall { margin: 10px; display: inline-block; vertical-align: top; text-align: center; } .gallerybox { width: 170px; } .galleryboxsmall { width: 100px; } .galleryboximg { width: 170px; height: 130px; } .galleryboximgsmall { width: 100px; height: 100px; } .galleryboximg img, .galleryboximg2 img { max-width: 100%; max-height: 100%; margin: 0 auto; } .gallerybox p { text-align: center; margin: 10px 0 0 0; } /* allows for galleries on pages */ /* smaller non-mobile responsiveness adjustments */ .pinbox { position: relative; top: 0; left: 0; display: inline-block; } .pinnedphoto { position: relative; box-shadow: 3px 3px 3px #00000099; } .pinnedphoto:hover { transform: rotate(-4deg); transform-origin: top left; } .pin { position: absolute; top: -10px; left: -10px; } /* for simulating pinned photo boards */ .updates { overflow-y: auto; margin: 0; width: 410px; height: 200px; display: inline-block; text-align: left; vertical-align: top; } /* updates box */ .modalbox, .notebox { min-width: 370px; max-width: 780px; } /* warning and note sizes */ .notebox { background-color: lightblue; background-image: url('/images/note.gif'); background-repeat: repeat-y; border-color: #0160f0; padding: 10px 0 10px 50px; } .notebox p, .notebox em, .notebox h1, .notebox h2, .notebox h3, .notebox blockquote, .notebox li { color: black; text-shadow: none; } .notebox a { color: blue; text-shadow: none; } /* note styling */ .modal { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: royalblue; z-index: 2; } .modalbox { background-color: white; background-image: url('/images/warning.gif'); border-color: #990000; background-repeat: repeat-y; padding: 10px 0 10px 50px; } .modalbox body { color: black; } .modalbox p, .modalbox em, .modalbox h1, .modalbox h2, .modalbox h3, .modalbox blockquote, .modalbox li { color: black; text-shadow: none; } .modelbox a { color: blue; text-shadow: none; } /* warning styling */ .img-nomargin, .img-text { margin: 0; } /* removes margin from images for closer look or use in text */ table { padding-right: 10px; width: 100%; vertical-align: top; display: inline-table; border-collapse: collapse; } th, td { padding-right: 10px; height: auto; vertical-align: top; text-align: left; border: 0;} /* table styling */ .cellbottomborder { border-bottom: 1px; border-top: 0; border-right: 0; border-left: 0; border-color: lightgray; border-style: dashed; } /* line separating rows in tables */ .cellindent p { margin-left: 30px; font-style: italic; } /* cells that are secondary to boxes above */ /* .cellrow1 { background-color: #FFFFFFBF; } .cellrow2 { background-color: #9CC4F6BF; } */ .td-50px { width: 50px; } .td-75px { width: 75px; } .td-100px { width: 100px; } .td-120px { width: 120px; } .td-150px { width: 150px; } .td-230px { width: 230px; } .td-50per { width: 50%; } /* cell widths; these seem unnecessary but are here to comply with modern HTML standards that suggest td widths should be done with classes, not as