/* style.css - style sheet for minicomplexity ********************************************************************************************* CONSTANTS: --- content width of body = 960px --- content width of a card = 310px --- all nonzero skips are powers of 2 only; full skip = 8px; half skip = 4px; double skip = 16px; zero skip = 0px; DESIGN: copy this out of the comment to see colors (good for layout design) @import "../admin/color.css"; *******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* SHORT GENERAL SPECS ********************************************************************************************************************/ /******************************************************************************************************************************************/ /*********************************************************************************************************************** the global spec **/ * { /* dimensions: nobody has white space around them, unless I say otherwise */ padding:0px; margin:0px; /* colors: colors as in daddy, unless I say otherwise */ background-color:transparent; color:inherit; /* fonts: text as in daddy, unless I say otherwise */ font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; font-variant:inherit; text-decoration:inherit; letter-spacing:inherit; word-spacing:inherit; } /********************************************************************************************************************* standard elements **/ EM { font-style:italic; } BF { font-weight:bold; } EMBF { font-style:italic; font-weight:bold; } ABBR { border:none; } /* no special effects, on abbreviation */ SUP { font-size:smaller; } /* superscripts and subscripts must */ SUB { font-size:smaller; } /* ...be smaller than normal text */ SELECT { border-style:solid; border-width:1px; border-color:gray; } NOBR { white-space:nowrap; } /************************************************************************************************************************ new 'elements' **/ SPAN.mach { white-space:nowrap; font-family:Verdana,sans-serif; } /* machines: 1DFA*/ SPAN.prob { white-space:nowrap; font-family:Verdana,sans-serif; font-variant:small-caps; } /* tasks: retrocount*/ SPAN.redn { white-space:nowrap; font-family:Verdana,sans-serif; } /* classes: $\leq_{1D}$*/ SPAN.clss { white-space:nowrap; font-family:Verdana,sans-serif; } /* classes: 1D*/ SPAN.addr { white-space:nowrap; font-family:Courier; } /* email/http address: minicomplexity@gmail.com*/ SPAN.term { } /* terms: automata theory*/ DIV.amath { } /* display math --- around MathJax's \[..\], just for quick justification (Alt-Q) */ DIV.dmath { padding:1ex 0em; text-align:center; } /* display math --- replace MathJax's \[..\] (when text font must be as in HTML) */ /********************************************************************************************************************************* fonts **/ *.smaller { font-size:smaller; } /* decsease the font size */ *.larger { font-size:larger; } /* increase the font size */ /*************************************************************************************************************************** white space **/ *.vpad { padding: 6ex 0ex 10ex 0ex; } /* move something to the 'title height' of its containing box */ *.skip { margin-top:8px; } /* full skip */ *.noskip { margin-top:0px; } /* zero skip */ /******************************************************************************************************************************** floats **/ *.lfloat { margin-right:4px; float:left; } /* half skip */ /* forcing something to float ---left or right */ *.rfloat { margin-left :4px; float:right; } *.llfloat { margin-right:8px; float:left; } /* full skip */ *.rrfloat { margin-left :8px; float:right; } /****************************************************************************************************************************** messages **/ *.messg { font-family:"Times New Roman"; font-size:12pt; } /* messages in Times 12pt (size 12pt, to blend well with Verdana 10pt) */ *.messg.ital { font-style:italic; } /* messages in italics (cearly distinct from Verdana, nice personal feel) */ /******************************************************************************************************************************** errors **/ *.error { color:maroon; } /* every erroneous object must use maroon text */ /******************************************************************************************************************************* cursors **/ *[ajax] { cursor:progress; } /* attribute set for an element during every ajax-downloading of data into it */ /********************************************************************************************************************************** rule **/ DIV.rule { height:1px; background-color:black; } /********************************************************************************************************************************** icon **/ IMG.icon { border:0px; } /************************************************************************************************************************** icon gallery **/ TABLE.icongall { /* dimensions: all separation comes from TD's padding */ border:0px; border-collapse:separate; border-spacing: 0px 0px; } TABLE.icongall> TBODY>TR>TD { border:0px; } TABLE.icongall.rfloat { margin-left :0px; } /* cancel the *.float extramargin (there is already 4px from the leftmost TD) */ TABLE.icongall.rfloat> TBODY>TR>TD { padding-left :4px; } TABLE.icongall.lfloat { margin-right :0px; } /* cancel the *.float extramargin (there is already 4px from the rightmost TD) */ TABLE.icongall.lfloat> TBODY>TR>TD { padding-right:4px; } /******************************************************************************************************************************* picture **/ IMG.inpar { display:block; /* picture inside a paragraph */ margin-left:auto; margin-right:auto; padding:2ex 0px; border:0px; } /****************************************************************************************************************************** messages **/ DIV.messg { /* alignment: a centered element, with centered text */ margin-left:auto; margin-right:auto; text-align:center; /* font: determined by *.messg above */ } DIV.poster { /* dimensions */ margin-top:8px; /* decoration: a gray band on the left; two-margin wide; pad half margin away from it */ border: solid gray; border-width: 0px 0px 0px 16px; padding-left:0.5em; /* alignment: centered element, with justified text */ margin-left:auto; margin-right:auto; text-align:justify; } DIV.poster > P { padding-top:4px; } /* Every paragraph is a little after the previous one */ DIV.poster > P:first-child { padding-top:0px; } /* ...except the first one in the poster. */ /********************************************************************************************************************************** menu **/ TABLE.menu { table-layout:fixed; border-collapse:collapse; white-space:nowrap; } TABLE.menu> TBODY>TR>TD.main { padding-right:8px; text-align:left; } /* main-items on the left */ TABLE.menu> TBODY>TR>TD.fill { width:100%; } /* fill-items in the middle */ TABLE.menu> TBODY>TR>TD.info { padding-left:8px; text-align:right; } /* info-items on the right */ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* LINKS **********************************************************************************************************************************/ /******************************************************************************************************************************************/ /************************************************************************************************************************** general link **/ A:hover { text-decoration:underline; } /* on hover, toggle underline on */ A:active { text-decoration:none; } /* on press, toggle underline off */ /************************************************************************************************************************* external link **/ A.extern { color:navy; } /* external links are navy blue */ /*************************************************************************************************************************** text button **/ A.textbutt { font-style:italic; } /* every text button is in italics */ A.textbutt:before { content: '['; font-style:normal; } /* ... with a '[' preceding */ A.textbutt:after { content: ']'; font-style:normal; } /* ... plus a ']' following */ A.textbutt:hover { text-decoration:none; } /* on hover, do not underline (as general links do) */ A.textbutt:hover:before { content: '('; } /* on hover, braces become parentheses */ A.textbutt:hover:after { content: ')'; } A.textbutt:active:before { visibility:hidden; } /* on activation, parentheses go out */ A.textbutt:active:after { visibility:hidden; } /*************************************************************************************************************************** cite button **/ A.cite { font-style:normal; } /* every cite button is in normal font */ A.cite:before { content: '['; font-style:normal; } /* ... with a '[' preceding */ A.cite:after { content: ']'; font-style:normal; } /* ... plus a ']' following */ A.cite:hover { text-decoration:none; } /* on hover, do not underline (as general links do) */ A.cite:hover:before { content: '('; } /* on hover, braces become parentheses */ A.cite:hover:after { content: ')'; } A.cite:active:before { visibility:hidden; } /* on activation, parentheses go out */ A.cite:active:after { visibility:hidden; } /***************************************************************************************************************************** math link **/ A.math { white-space:nowrap; } /* every math link should be in one piece */ A.math:before { content: '('; visibility:hidden; } /* ... with invisible parentheses around it */ A.math:after { content: ')'; visibility:hidden; } /* ... (to prevent displayment on hover) */ A.math:hover { text-decoration:none; } /* on hover, do not underline (as general links do) */ A.math:hover:before { visibility:visible; } /* on hover, surround with parentheses */ A.math:hover:after { visibility:visible; } /* ... (the invisible, already present ones) */ A.math:active:before { visibility:hidden; } /* on activation, send parentheses back */ A.math:active:after { visibility:hidden; } /* ... to their hiding place */ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* BODY AND MAIN PARTS ********************************************************************************************************************/ /******************************************************************************************************************************************/ BODY { /* dimensions: fixing width --- 960 pixels */ width:960px; /* alignment: center in initial box; vertical scroll bar forced to eliminate jitter (!STANDARD VIOLATION!) */ margin-left:auto; margin-right:auto; overflow-y:scroll; /* colors: fixing foreground & background --- black on white */ background-color:white; border-color:white; color:black; /* font: fixing text --- Verdana, 10pt, completely undecorated */ font-family:Verdana,sans-serif; font-size:10pt; font-style:normal; font-weight:normal; font-variant:normal; text-decoration:none; letter-spacing:0em; word-spacing:0em; } BODY> DIV#title { font-family:"Times New Roman"; font-weight:bold; font-size:48pt; letter-spacing:4pt; text-align:center; } BODY> TABLE#headmenu { margin-top:8px; } BODY> DIV#headrule { margin-top:1px; } BODY> DIV#main { margin-top:8px; } BODY> DIV#footrule { margin-top:8px; } BODY> TABLE#footmenu { font-size :7pt; margin-bottom:8px; } BODY> DIV#statistics { visibility:hidden; } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* NEWS ***********************************************************************************************************************************/ /******************************************************************************************************************************************/ TABLE.news { table-layout:fixed; border-collapse:collapse; } TABLE.news> TBODY>TR>TH { min-width:64px; padding: 2px 0.5em; text-align:right; vertical-align:top; background-color:gray; color:white; } TABLE.news> TBODY>TR>TD { width:100%; padding: 2px 0.5em; text-align:justify; vertical-align:top; } TABLE.news> TBODY>TR>TD.scroll { width:16px; padding:0px; text-align:right; } TABLE.news> TBODY>TR>TD.scroll.up { vertical-align:top; } TABLE.news> TBODY>TR>TD.scroll.dn { vertical-align:bottom; } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* DATA-TUNE ******************************************************************************************************************************/ /* in each TR (maybe only 1): TD has the data (lists); TH has the tune (form) /******************************************************************************************************************************************/ /****************************************************************************************************************************** skeleton **/ TABLE.datatune { table-layout:fixed; border-collapse:collapse; } TABLE.datatune> TBODY>TR>TD { width:88%; vertical-align:top; } /* horizontal split (88-12) specified in both TD and TH */ TABLE.datatune> TBODY>TR>TH { width:12%; /* ...so that the browser knows early on how to render */ padding-left:8px; /* all separation comes from the TH left-padding */ vertical-align:top; } /********************************************************************************************************************************** data **/ TABLE.datatune> TBODY>TR>TD> TABLE { table-layout:auto; width:100%; margin-top:8px; border-collapse:collapse; } /*all sep from TH/TD padd*/ TABLE.datatune> TBODY>TR>TD> TABLE> CAPTION { background-color:silver; font-variant:small-caps; } TABLE.datatune> TBODY>TR>TD> TABLE> CAPTION.shrink { height:4px; } /* for groups by title */ TABLE.datatune> TBODY>TR>TD> TABLE> TBODY>TR>TH { width:11%; padding: 8px 0.5em 0px 0em; text-align:right; vertical-align:top; } TABLE.datatune> TBODY>TR>TD> TABLE> TBODY>TR>TD { padding: 8px 0em 0px 0em; text-align:justify; vertical-align:top; } TABLE.datatune> TBODY>TR>TD> TABLE.noskip { margin-top:0px; } /* enable 'noskip' inside TD */ /********************************************************************************************************************************** tune **/ TABLE.datatune> TBODY>TR>TH> FORM { border: 1px solid black; padding-bottom: 8px; } /* bottom separ by FORM, the rest by FLDSETS margins */ TABLE.datatune> TBODY>TR>TH> FORM> FIELDSET { margin: 8px 8px 0px 8px; border:0px; text-align:left; white-space:nowrap; } TABLE.datatune> TBODY>TR>TH> FORM INPUT[type="checkbox"] { margin-right: 4px; vertical-align:bottom; } TABLE.datatune> TBODY>TR>TH> FORM SELECT { width:100%; margin-top:2px; } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* CARDS **********************************************************************************************************************************/ /******************************************************************************************************************************************/ /****************************************************************************************************************************** skeleton **/ TABLE.cards { table-layout:fixed; width:100%; border-collapse:separate; border-spacing:0px; } TABLE.cards> TBODY>TR>TD { width:33%; border: 1px solid black; vertical-align:top; } TABLE.cards> TBODY>TR>TH { width :8px; border:0px; } /* all separation comes from the TH widths */ TABLE.cards> TBODY>TR.sep>TD { height:8px; border:0px; } /* ...and the TR.sep>TDs heights */ /****************************************************************************************************************************** one card **/ TABLE.cards> TBODY>TR>TD> TABLE { table-layout:fixed; width:100%; border:0px; border-collapse:collapse; } TABLE.cards> TBODY>TR>TD> TABLE> CAPTION { padding: 0px 4px 2px; border:0px; background-color:silver; } TABLE.cards> TBODY>TR>TD> TABLE> TBODY>TR>TD { padding: 0px 4px 2px; border:0px; vertical-align:top; text-align:center; } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* DEFIFACT *******************************************************************************************************************************/ /******************************************************************************************************************************************/ /***************************************************************************************************************************** the frame **/ /* The frame is a single TABLE with a single CAPTION and a single TR. The single TR contains two TDs separated by one TH. One TD is */ /* TD.defi and contains the definition, the other is TD.facts and contains the list of facts. The middle TH is for separation only. */ /******************************************************************************************************************************************/ TABLE.defifact { table-layout:fixed; width:100%; border-collapse:separate; border-spacing:0px; } TABLE.defifact> CAPTION { padding: 2px 0px 4px; border: 1px solid black; background-color:silver; } TABLE.defifact> TBODY>TR>TD { vertical-align:top; } TABLE.defifact> TBODY>TR>TD.defi { width:50%; } TABLE.defifact> TBODY>TR>TH { width :8px; border:0px; } TABLE.defifact> TBODY>TR>TD.fact { /* width: whatever is left */ } /****************************************************************************************************************************** a tablet **/ /* A tablet is a single TABLE (inside TD.defi or TD.fact). Multiple tablets are vertically stacked. */ /******************************************************************************************************************************************/ TABLE.defifact> TBODY>TR>TD> TABLE { table-layout:fixed; width:100%; /* all vertical separation inside... */ border:0px; border-collapse:collapse; /* ...TD.defi/TD.fact comes from... */ margin-top:8px; } /* ...the margin-top of each tablet. */ TABLE.defifact> TBODY>TR>TD> TABLE> CAPTION { padding:0px 4px 2px; background-color:silver; } /* ... */ TABLE.defifact> TBODY>TR>TD> TABLE> TBODY>TR>TD { vertical-align:top; text-align:left; } /* ... */ TABLE.defifact> TBODY>TR>TD> TABLE> TBODY>TR>TD>P { margin-top:8px; } /* ...and the margin-top of each P. */ TABLE.defifact> TBODY>TR>TD> TABLE> TBODY>TR>TH { width :8px; border:0px; } /* all separation within a tablet comes from... */ TABLE.defifact> TBODY>TR>TD> TABLE> TBODY>TR.sep>TD { height:8px; border:0px; } /* ...the TH widths and the TR.sep>TDs heights. */ /******************************************************************************************************************************** a cell **/ /* A cell is a single TABLE inside a TD of a tablet. */ /******************************************************************************************************************************************/ TABLE.defifact> TBODY>TR>TD> TABLE> TBODY>TR>TD> TABLE { table-layout:fixed; width:100%; height:100%; border:0px; border-collapse:collapse; } TABLE.defifact> TBODY>TR>TD> TABLE> TBODY>TR>TD> TABLE> CAPTION { padding:0px 4px 2px; background-color:silver; text-align:left; font-style:italic; } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* FREQUENTLY ASKED QUESTIONS *************************************************************************************************************/ /******************************************************************************************************************************************/ /********************************************************************************************************************************** list **/ TABLE.faqs { table-layout:fixed; margin-top:8px; border-collapse:separate; border-spacing:0px; } TABLE.faqs> TBODY>TR>TH { width:16px; background-color:gray; border: 2px solid; border-color:white; } TABLE.faqs> TBODY>TR>TD { padding-left:0.5em; font-style:italic; text-align:justify; vertical-align:top; } TABLE.faqs.noskip { margin-top:0px; } /******************************************************************************************************************************** single **/ TABLE.faq { table-layout:fixed; border-collapse:collapse; } TABLE.faq> TBODY>TR>TH { padding: 2px 0.5em; background-color:gray; color:white; text-align:center; vertical-align:top; } TABLE.faq> TBODY>TR>TD { padding: 2px 0em 2px 0.5em; text-align:justify; vertical-align:top; } TABLE.faq> TBODY>TR.faq>TD { font-style:italic; } TABLE.faq> TBODY>TR>TD > P { padding-top:4px; } /* Every paragraph is a little after the previous one */ TABLE.faq> TBODY>TR>TD > P:first-child { padding-top:0px; } /* ...except the first one in the poster. */ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* TALK ***********************************************************************************************************************************/ /******************************************************************************************************************************************/ TABLE.talk { table-layout:fixed; border-collapse:collapse; } TABLE.talk> TBODY>TR>TH { padding: 0px 0.5em; text-align:right; vertical-align:top; } TABLE.talk> TBODY>TR>TD { text-align:center; vertical-align:top; } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* PUBLICATION RECORD *********************************************************************************************************************/ /******************************************************************************************************************************************/ TABLE.pub { table-layout:fixed; border-collapse:collapse; } TABLE.pub> TBODY>TR>TH { min-width:64px; padding: 2px 0.5em; text-align:right; vertical-align:top; background-color:gray; color:white; } TABLE.pub> TBODY>TR>TD { width:100%; padding: 2px 0.5em; text-align:left; vertical-align:top; } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /** e x p e r i m e n t a l ***************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /* EXPLANATIONS ***************************************************************************************************************************/ /******************************************************************************************************************************************/ TABLE.explanations { visibility:hidden; table-layout:fixed; width:100%; margin-top:8px; border-collapse:separate; border-spacing:0px; } TABLE.explanations> CAPTION { padding: 0px 0px 2px; border:0px; background-color:silver; } TABLE.theorem { table-layout:fixed; margin-top:0px; border-collapse:separate; border-spacing:0px; } TABLE.theorem> TBODY>TR.state>TH { width:16px; border-width: 8px 0px; border-style: solid; border-color:white; background-color:silver; } TABLE.theorem> TBODY>TR.state>TD { padding: 2px 0.5em 4px; text-align:justify; vertical-align:top; } TABLE.theorem> TBODY>TR.prove>TH { width:16px; } TABLE.theorem> TBODY>TR.prove>TD { padding-left:0.5em; text-align:justify; vertical-align:top; } /******************************************************************************************************************************************/ /******************************************************************************************************************************************/ /*************************************************************************************************************************** text button **/ BUTTON.textbutt { margin:0px; border:0px; padding:0px; font-style:italic; cursor:pointer; } /* every text button is in italics */ BUTTON.textbutt:before { content: '['; font-style:normal; } /* ... with a '[' preceding */ BUTTON.textbutt:after { content: ']'; font-style:normal; } /* ... plus a ']' following */ BUTTON.textbutt:hover { text-decoration:none; } /* on hover, do not underline (as general links do) */ BUTTON.textbutt:hover:before { content: '('; } /* on hover, braces become parentheses */ BUTTON.textbutt:hover:after { content: ')'; } BUTTON.textbutt:active:before { visibility:hidden; } /* on activation, parentheses go out */ BUTTON.textbutt:active:after { visibility:hidden; } TR.hide { display:none; } TR.show { display:table-row; }