— About Index —

View Source

css-rgo-main.css
  1. /*  This style sheet validates as CSS3.                  */
  2. /*  See <http://www.ronin-group.org/TRG_colophon.html>   */
  3. /*  for more information.                                */
  4. /*                                                       */
  5. /*  LOADS BY: @import.                                   */
  6. /*  FUNCTION: contains all main styles for the website   */
  7. /*  */
  8.  
  9.  
  10. html { padding:0; margin:0; background-attachment: fixed;
  11.      background-image: url("../graphics/background.gif"); }
  12.  
  13. body { padding:0 0 0 252px; margin:0;
  14.      font-family: Georgia, "Times New Roman", Times, serif;
  15.      font-weight: normal; font-size: 100%; color:#4B515B; }
  16.      /* alt colors: 626B77 565E69 4B515B 000000 */
  17.  
  18.  
  19. /* frame-free fixed sidebar */
  20.      #content_wrapper { max-width:760px; overflow:auto; padding:0; margin:0; position:relative; z-index:1; }
  21.      #content_wrapper:active { outline:none; } /* ffox horiz scroll */
  22.      #content { padding: 0 25px 40px 10px; }
  23.  
  24.      #fixed_sidebar_wrapper { position:fixed; top:0; left:0; width:252px; height:100%; }
  25.      #fixed_sidebar { padding: 0px; }
  26.  
  27.  
  28. /* URL styling */
  29.      a:link, a:visited, a:hover, a:active
  30.           { text-decoration:none; font-weight: bold; }
  31.      a:link    { color:#336699; }
  32.      a:visited { color:#898E79; }
  33.      a:hover   { color:#CC0000; }
  34.      a:active  { color:#336699; }
  35.  
  36.  
  37. /* Typography */
  38.      p, div { font-size: 1.0em; line-height: 1.2em; }
  39.      .cr { padding-top:1.5em; }  /* carriage return; easy way of adding extra space */
  40.      .clnt  { margin-top:0; }    /* compact line: no top */
  41.      .clnb  { margin-bottom:0; } /* compact line: no bottom */
  42.      .cl, .clc   { margin-top:0; margin-bottom:0; }
  43.      .clc { text-align:center; } /* compact line: centered */
  44.  
  45.      .mono { font-family: 'Courier New', Courier, monospace; }
  46.  
  47.      .norm   { font-weight:normal; }
  48.      .bold   { font-weight:bold; }
  49.      .under  { text-decoration:underline; }
  50.      .upper  { text-transform: uppercase; }
  51.      .center { text-align:center; }
  52.      .smcaps { font-variant: small-caps; }
  53.      .strike { text-decoration: line-through; }
  54.  
  55.      .body10 { font-size: 90%; line-height: 1.05em; }
  56.  
  57.  
  58.      hr { border: 0; width: 90%; }
  59.      hr.hr1 { border: 1px solid #B6BDD2; height: 4px; }
  60.  
  61.      img { border-style: none; }
  62.  
  63.      /* .numero { font-size:80%; text-decoration:underline; vertical-align:text-top; bottom:.2em; position:relative; } */
  64.      /* .numero { font-size:80%; text-decoration:underline; top:-.3em; position:relative; } */
  65.  
  66.      .fracn  { font-size:72%; vertical-align:text-top; bottom:.4em; position:relative; }
  67.      .fracd  { font-size:72%; vertical-align:text-bottom; top:.35em; position:relative; }
  68.  
  69.      .numero-line  { font-size:100%; text-decoration:underline; top:-.2em; position:relative; }
  70.      .numero-plain { font-size:100%; top:-.2em; position:relative; }
  71.      .numero-dot   { margin-left:-.35em; }
  72.  
  73.      /* these will be uncommented when officially supported. */
  74.      /* see css-rgo-invalid_styles.css for working versions. */
  75.      /* .colset01 { column-width: 15em }                     */
  76.      /* .colset02 { column-count: 2 }                        */
  77.  
  78.  
  79. /* printer-friendly formatting elements */
  80. /* see also printer style sheet         */
  81.      .printercontent { display:none; }
  82.      .pagebreak { page-break-before:always; }     /* force large images to their own page when printing */
  83.  
  84.  
  85. /* menu elements */
  86.      .navmenu { margin: .5em 0 0 .375em; font-size: 100%; font-weight: bold; }
  87.      .submenu { font-size: 80%; padding: .375em 0 0 .75em; }
  88.  
  89.  
  90. /* glossary formatting */
  91.      /* see also: glosshead, glosslist */
  92.      .glosshex { font-size:80%; font-weight:normal; margin-left: 1em; }                   /* head extension */
  93.      .glossex  { font-size:100%; margin-left: 2.5em; }                                    /* example line   */
  94.      .gdent    { font-family: 'Courier New', Courier, monospace; margin-left: 1.5em; }    /* indent         */
  95.      .glossent { font-size:90%; width:85%; line-height:115%; margin-left:2em; }           /* body of entry  */
  96.  
  97.  
  98. /* various headers */
  99.      .subhead, .sb-head, .glosshead { font-weight:bold; color:#000000; }
  100.  
  101.      .subhead { font-size:110%; line-height:1.05em; }
  102.      .sb-head { font-size:100%; line-height:1.05em; padding: 0 0 .25em 0; }          /* sidebar header */
  103.  
  104.  
  105. /* footnote and figure formatting */
  106.      .fn-head { margin:3em 0 0 0; border-top: 1px solid #000000; width:8em;
  107.        font-variant: small-caps; font-weight:bold; color:#000000; }
  108.  
  109.      .fn-body, .fn-body-3d { width:65%; font-size:90%; line-height:100%; }
  110.      .fn-body { margin-left:2em; text-indent:-2em; }
  111.      .fn-body-3d, .bodyhang { margin-left:2.5em; text-indent:-2.5em; }          /* 3d = 3 digit note number */
  112.  
  113.      .fn-marker { font-family: 'Courier New', Courier, monospace; font-size: 70%;
  114.           font-weight:bold; vertical-align:text-top; bottom:.2em; position:relative; }
  115.  
  116.      .fig { font-size:70%; font-weight:bold; position:relative; top:-.2em; }
  117.  
  118.  
  119. /* Page Headers */ /* DH1+DH2 = movie pages w. quote, SH = all else  */
  120.      .doubleheader1, .doubleheader2, .singleheader { font-weight:bold; color:#000000; line-height:1em; }
  121.      .doubleheader1, .singleheader { font-size:135%; }
  122.      .doubleheader1 { margin:2em 0 0 0; }
  123.      .doubleheader2 { margin: .2em 0 1.30em 0; font-size:100%; }
  124.      .singleheader  { margin:2em 0 1.85em 0; }
  125.  
  126.  
  127. /* Publishing Portfolio */
  128.      .ptabauth  { font-size:135%; font-weight: bold; color:#000000; }
  129.      .ptabtitle { font-size: 90%; font-weight: bold; color:#000000; line-height: 1.15em; }
  130.  
  131.      .ptabcat-u, .ptabcat-l { font-size: 90%; line-height: 1.15em; margin-left:1em; }
  132.      .ptabcat-u { font-size: 90%; line-height: 1.15em; margin-top:.25em; }      /* u = upper line */
  133.      .ptabcat-l { font-size: 90%; line-height: 1.15em; margin-bottom:.25em; }   /* l = lower line */
  134.  
  135.      .ptabtext  { font-size: 100%; line-height: 1.05em; }
  136.  
  137.  
  138. /* INDENT definitions */
  139.      .enquad { margin-left:.5em; }
  140.      .emquad { margin-left: 1em; }
  141.  
  142.      .quad-15em { margin-left: 1.5em; }
  143.      .quad-2em  { margin-left: 2em; }
  144.      .quad-25em { margin-left: 2.5em; }
  145.      .quad-3em  { margin-left: 3em; }
  146.  
  147.      .indentfl  { text-indent: 1em; margin-top: 0; margin-bottom: 0; }  /* fl = first line */
  148.  
  149.      .indentfn-sd { margin-left:1.25em; }    /* single digit footnote # */
  150.      .indentfn-dd { margin-left: .7em;  }    /* double digit footnote # */
  151.  
  152.      .indent-bodyhang1  { margin-left:1.65em; }   /* spacer if hanging leader has 1 character  */
  153.      .indent-bodyhang2  { margin-left:1em; }      /* spacer if hanging leader has 2 characters */
  154.      .indent-bodyhang3  { margin-left: .45em; }   /* spacer if hanging leader has 3 characters */
  155.      .indent-bodyhang0  { margin-left:2.5em; }    /* spacer for hanging paragraph w. no leader */
  156.  
  157.  
  158. /* width settings */
  159.      .w40  { width: 40%; }
  160.      .w50  { width: 50%; }
  161.      .w60  { width: 60%; }
  162.      .w70  { width: 70%; }
  163.      .w80  { width: 80%; }
  164.      .w90  { width: 90%; }
  165.      .w100 { width:100%; }
  166.  
  167.      .bodyhang  { width:85%; }
  168.  
  169.  
  170. /* on the fly font scaling */
  171.      .fs50  { font-size: 50%; }
  172.      .fs60  { font-size: 60%; }
  173.      .fs70  { font-size: 70%; }
  174.      .fs80  { font-size: 80%; }
  175.      .fs90  { font-size: 90%; }
  176.      .fs100 { font-size:100%; }
  177.  
  178.  
  179. /* vertical shims */
  180.      .shim01 { font-size: 25%; padding:1em 0 0 0; }    /* for use between pix in sidebar */
  181.      .shim02 { font-size: 25%; padding:2em 0 0 0; }    /* for use around menu separator  */
  182.  
  183.      .shim07 { font-size: 25%; padding:0em; }          /* for use before <hr> after <p>        */
  184.      .shim08 { font-size: 25%; padding:3em 0 0 0; }    /* for use after <hr> when using shim07 */
  185.  
  186.      .shim09 { font-size: 25%; padding:6em 0 0 0; }    /* for use on pub availability */
  187.  
  188.  
  189. /* List Styling */
  190.      #content ul { list-style-type: none; list-style-position: outside; padding:0; margin:0; }
  191.  
  192.      /* navigation menu */
  193.      .navlist li:before { content: "\003A \003A \00A0"; color:#336699; padding-left:.8em; margin-left:1em; }
  194.      #fixed_sidebar ul { margin:0; padding:0; list-style: none; }
  195.      #fixed_sidebar li li:before { content: "\003A \003A \00A0"; color:#336699; padding: 0 0 0 .2em; }
  196.  
  197.  
  198.      /* glossary, sidebar, body text */
  199.      .glosslist li, .sidebarlist li, .textlist li
  200.           { background-image: url("../graphics/list_arrow.gif");
  201.           background-repeat: no-repeat; background-position: 0 .5em; padding-left:.8em; }
  202.      .glosslist li, .textlist li  { max-width:70%; }
  203.      .sidebarlist li  { margin-left:.2em; }
  204.      .textlist li  { margin-left:2em; }
  205.  
  206.      .glosslist li { font-size: 90%; line-height: 115%; margin-left: 2.1em; }
  207.      .glosslist li ul li { margin: 0 0 0 -1em; }
  208.      .gloss-inline ul, .gloss-inline li { display:inline; margin:0; padding:0;}
  209.  
  210.      .fibox li:before { content: "\003A \003A \00A0"; color:#336699; }
  211.      .fibox { margin: .2em 0 0 2.8em; }
  212.      .fibox ul { margin:0; padding:0; text-indent:-.8em; }
  213.  
  214.  
  215.      /* site map */
  216.      ul.tree, ul.tree ul { list-style-type: none; background: url("../graphics/vline.png") repeat-y;
  217.        margin:0; padding:0; }
  218.      ul.tree ul { margin-left:1.5em; }
  219.      ul.tree li { margin:0; padding:0 1em; line-height:1.1em;
  220.        background: url("../graphics/node.png") no-repeat; color:#336699; font-weight: bold; }
  221.      ul.tree li:last-child { background: /* #FFFFFF */ url("../graphics/lastnode.png") no-repeat; }
  222.  
  223.  
  224. /* "hover thumbnails" message - same size as image thumbnails */
  225.      div.thumbox { border: 1px dashed #336699; background-color:#FFFFF0;
  226.        margin: 0 0 .4em 0; padding: .4em; text-align: center;
  227.        font-size: 75%; font-family: Verdana, sans-serif; font-weight: bold; color:#336699; }
  228.  
  229.  
  230. /* boxes  */
  231.      /* nwbox = no-width box. have to add width class and boxborder */
  232.      div.menubox, div.box02, div.box-clear, div.nwbox
  233.        { height:auto; margin-left:auto; margin-right:auto; }
  234.  
  235.      div.menubox, div.box02, div.box-clear
  236.        { width:65%; }
  237.      div.nwbox, div.box02, div.box-clear { padding:.5em; }
  238.      div.menubox { padding:.2em; }
  239.  
  240.      div.box02 { background:#336699; border: 2px solid #4B515B; color:#FFFFFF; }
  241.      div.box-clear, div.boxborder { border: 2px solid; }
  242.  
  243.  
  244. /* "Table-less" Positioning */
  245.      div.container { /* border: 1px dashed #333; background-color:#FFFFEE; */ }
  246.      div.spacer { clear: both; font-size: 69%; line-height: 1.05em; }
  247.  
  248.      /* for books */
  249.      div.pfloatb { float: left; width: 385px; text-align: right; }
  250.      div.dblockb { margin-left:400px; }
  251.  
  252.      /* for comics & individual promotionals */
  253.      div.pfloatc { float: left; width: 205px; text-align: right; }
  254.      div.dblockc { margin-left:220px; }
  255.  
  256.      /* for sketchbooks on promo page */
  257.      div.pfloatp { float: left; width: 495px; text-align: center; }
  258.      div.dblockp { margin-left:510px; }
  259.  
  260.      /* for links page */
  261.      div.pfloatl { float: left; width: 360px; text-align: center; }
  262.      div.dblockl { margin-left:375px; }
  263.  
  264.  
  265. /* badge & logo positioning */
  266.      .validate { position: absolute; bottom: 5px; left: 42px; border-style: none; }
  267.      .visit { position: absolute; top: 9000px; background: url("http://geo.digitalpoint.com/a.png") no-repeat; }
  268.  
  269.      #logo { background: url("../graphics/ronin_menu.jpg") no-repeat;
  270.        width: 15em; height: 5.5em; position: relative; margin-bottom: 0.5em; }
  271.      #logo a { position: absolute; top: 0; left: 0; width: 15em; height: 5.5em; }
  272.  
  273.      .invis { display: none; }
  274.  
  275.  
  276. /* hover notes */
  277.      .note { text-decoration: none; border-bottom: 2px dotted; color:#336699; }
  278.      .note a { text-decoration:none; }
  279.      .note a:hover {text-decoration: none; color:#336699;
  280.        border-top: 2px dotted #336699; background: #D8CEC6; cursor: help;}
  281.      .note a:visited { color:#336699; }
  282.      .note a span { display: none; }
  283.      .note a:hover span { display: block; position: fixed; top: 268px; left:0;
  284.        width: 224px; min-height:5em; margin: 10px; padding: 5px;
  285.        border: 2px dotted #336699; background: #D8CEC6;
  286.        font: 80% Verdana, sans-serif; text-align: left; color:#000000;
  287.        z-index:100; opacity: 0.90; }
  288.  
  289.  
  290. /* Article Sidebars */
  291.      /* general specs */
  292.      div.sidebar-menucolumn,
  293.      div.sidebar-left-narrow, div.sidebar-left-medium, div.sidebar-left-wide,
  294.      div.sidebar-right-narrow, div.sidebar-right-medium, div.sidebar-right-wide
  295.        { border: 2px solid #E0E0B0; background: #FFFFF0; }
  296.  
  297.      /* width specs */
  298.      div.sidebar-left-narrow,
  299.      div.sidebar-right-narrow
  300.        { width:150px; }
  301.  
  302.      div.sidebar-left-medium,
  303.      div.sidebar-right-medium
  304.        { width:225px; }
  305.  
  306.      div.sidebar-left-wide,
  307.      div.sidebar-right-wide
  308.        { width:300px; }
  309.  
  310.      /* float/margin specs */
  311.      div.sidebar-left-narrow,
  312.      div.sidebar-left-medium,
  313.      div.sidebar-left-wide
  314.        { float:left; margin-right:4px; margin-bottom:4px; }
  315.  
  316.      div.sidebar-right-narrow,
  317.      div.sidebar-right-medium,
  318.      div.sidebar-right-wide
  319.        { float:right; margin-left:4px; margin-bottom:4px; padding: 5px 5px 5px 5px; }
  320.  
  321.      div.sidebar-technical
  322.        { width:300px; float:right; font-size:89%; margin-left:3px; border-style:solid;
  323.        border-width:1px; border-color:#888888; /* grey-bright */ background-color:#EEEEEE; /* grey-wisp */ }
  324.  
  325.      div.thumbnail { width:130px; float:right; margin:0 0 4px 10px; }
  326.        /* original incarnation:  { width: 134px; float: right;
  327.        margin: 0 0 4px 4px; padding: 0 0 0 5px; } */
  328.  
  329.  
  330. /* Photo-Caption PZ3 CSS (The Good Stuff) */
  331. /*  revision date: 20080630               */
  332.      .PZ3-l { float:left; margin-right:10px; }
  333.      .PZ3-r { float:right; margin-left:0px; direction:rtl; }  /* stock 10px value conflicts w. thumb sidebar */
  334.        html>/**/body .PZ3-r { position:relative; }
  335.  
  336.      .PZ3zoom { border:1px solid #336699; }
  337.      .PZ3zoom a,.PZ3zoom a:visited { display:block;
  338.        padding:0; overflow:hidden; text-decoration:none;
  339.        height:100%; width:100%; }
  340.        html>/**/body .PZ3-r a { right:0; }
  341.  
  342.      .PZ3zoom a:hover { position:absolute;
  343.        z-index:999; padding:0; background:none;
  344.        cursor:default; height:auto; width:auto;
  345.        overflow:visible; border:1px solid #336699;
  346.        margin:-1px 0 0 -1px; }
  347.        html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }
  348.  
  349.      .PZ3zoom a img { border:0; height:100%; width:100%; }
  350.      .PZ3zoom a:hover img { height:auto; width:auto;
  351.        border:0; }
  352.  
  353.      a:hover .PZ3cap,
  354.      a:hover .PZ31cap { display:block;
  355.        direction:ltr; font:10pt verdana,sans-serif;
  356.        margin-top:-5px; background:#336699; color:#FFFFFF;  /* stock -3px value leaves a thin empty line */
  357.        text-align:left; }
  358.      a:hover .PZ3cap { padding:3px 5px; }
  359.      .PZ3inr { display:block; padding:2px 5px; }
  360.  
  361.      .noCap a:hover .PZ3cap,
  362.      .noCap a:hover .PZ31cap { display:none; }
  363.      .noBdr,.noBdr a:hover { border:0; }
  364.      .Lnk a:hover { cursor:pointer; }
  365.  
  366.      /* End Photo-Caption Zoom CSS */
  367.  
  368.  
  369. /* positioning & presentation elements for Space and Quad box */
  370.      .sqpos { width:7.5em; float:left; }
  371.      .sqlist { height:1em; background:#000000; margin-left:auto; margin-right:auto;
  372.        margin-top:.35em; margin-bottom:.35em; }
  373.  
  374.  
  375.  
  376.  
  377.  
  378. /* misc scrap-ish stuff from here down */
  379.  
  380. /* http://www.cssnewbie.com/harnessing-positioning-2/ */
  381.      .frac { font-style: italic; }
  382.      .frac sup, .frac sub { font-style: normal; font-size: 65%; position: relative; }
  383.      .frac sup { top: 0.1em; left: 0.05em; vertical-align: text-top; }
  384.      .frac sub { top: 0.1em; left: -.1em; vertical-align: text-bottom; }
  385.  
  386. /* has positioning issues in IE6 (due to "relative, I think)
  387. sup, sub { position: relative; vertical-align: 0; }
  388. sup { bottom: 0.35em; }
  389. sub { top: 0.35em; }
  390. */
  391.  
Parsed in 0.296 seconds