— 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-image: url("../graphics/background.gif"); }
  11.  
  12. body { padding:0 0 0 252px; margin:0;
  13.      font-family: Georgia, "Times New Roman", Times, serif;
  14.      font-weight: normal; font-size: 100%; color:#4B515B; }
  15.      /* alt colors: 626B77 565E69 4B515B 000000 */
  16.  
  17.  
  18. /* frame-free fixed sidebar */
  19.      #content_wrapper { max-width:960px; overflow:auto; padding:0; margin:0; position:relative; z-index:1; }
  20.      #content_wrapper:active { outline:none; } /* ffox horiz scroll */
  21.      #content { padding: 0 25px 40px 10px; }
  22.  
  23.      #fixed_sidebar_wrapper { position:fixed; top:0; left:0; width:252px; height:100%; }
  24.      #fixed_sidebar { padding: 0px; }
  25.  
  26.  
  27. /* URL styling */
  28.      a:link    { color:#336699; text-decoration:none; font-weight: bold; }
  29.      a:visited { color:#898E79; text-decoration:none; font-weight: bold; }
  30.      a:hover   { color:#CC0000; text-decoration:none; font-weight: bold; }
  31.      a:active  { color:#336699; text-decoration:none; font-weight: bold; }
  32.  
  33.  
  34. /* Typography */
  35.      p, div { font-size: 1.0em; line-height: 1.2em; }
  36.      .cr { padding-top:1.5em; } /* carriage return; easy way of adding extra space */
  37.      .clnt  { margin-top:0; } /* compact line: no top */
  38.      .clnb  { margin-bottom:0; } /* compact line: no bottom */
  39.      .cl, .clc   { margin-top:0; margin-bottom:0; }
  40.      .clc { text-align:center; } /* compact line: centered */
  41.  
  42.      .mono, .monob { font-family: 'Courier New', Courier, monospace; }
  43.      .monob { font-weight: bold; }
  44.  
  45.      .navmenu { margin: 8px 0 0 6px; font-size: 105%; font-weight: bold; }
  46.      .submenu { font-size: 80%; padding: 6px 0 0 12px; }
  47.  
  48.      .body10 { font-size: 90%; line-height: 1.05em; }
  49.  
  50.      .gloss  { font-size:90%; padding: .3em 4em 0 4em; text-indent: -4em; line-height: 125%; }
  51.      .gloss2 { font-size:90%; padding: 0 4em 0 4em; line-height: 125%; }
  52.  
  53.      .revhead { font-size:130%; font-weight:bold; color:#000000; }
  54.      .revslug { font-size:115%; font-weight:bold; color:#000000; }
  55.  
  56.      .subhead { font-size:110%; font-weight:bold; color:#000000; line-height:1.05em; }
  57.  
  58.      .listhead { text-transform: uppercase; font-size: 85%; font-weight: normal; }
  59.  
  60.      .fn-head { margin:50px 0 0 0; border-top: 1px solid #000000; width:125px;
  61.        font-variant: small-caps; font-weight:bold; color:#000000; }
  62.      .fn-body { width:65%; font-size: 90%; padding: .5em 0 0 2em; margin:0;
  63.        text-indent: -2em; line-height: 100%; }
  64.  
  65.      /* these will be uncommented when officially supported. */
  66.      /* see css-rgo-invalid_styles for working versions      */
  67.      /* .colset01 { column-width: 15em }                     */
  68.      /* .colset02 { column-count: 2 }                        */
  69.  
  70.  
  71. /* Page Headers */ /* DH1+DH2 = movie pages w. quote, SH = all else  */
  72.      .doubleheader1 { font-size:135%; font-weight:bold; color:#000000; line-height: 1.05em; padding: 40px 0 0 0; }
  73.      .doubleheader2 { font-size:100%; font-weight:bold; color:#000000; line-height: 1em; padding: 5px 0 34px 0; }
  74.      .singleheader  { font-size:135%; font-weight:bold; color:#000000; line-height: 1.05em; padding: 40px 0 54px 0; }
  75.  
  76.  
  77. /* Publishing Portfolio */
  78.      .ptabauth  { font-size: 135%; font-weight: bold; color:#000000; }
  79.      .ptabtitle { font-size: 90%; font-weight: bold; color:#000000; line-height: 1.15em; }
  80.      .ptabcat   { font-size: 90%; line-height: 1.15em; margin: 4px 0 4px 10px; }
  81.      .ptabtext  { font-size: 100%; line-height: 1.05em; }
  82.  
  83.  
  84. /* INDENT definitions */
  85.      .indent    { margin-left: 1em; }
  86.      .indenttny { margin-left: .3em; }
  87.      .indentsm  { margin-left: .5em; }
  88.      .indentmd  { margin-left: .75em; }
  89.      .indentlg  { margin-left: 1.5em; }
  90.      .indentlg2 { margin-left: 1.75em; }
  91.      .indentlg3 { margin-left: 2em; }
  92.      .indentlg4 { margin-left: 2.5em; }
  93.      .indentlg5 { margin-left: 3em; }
  94.      .indentfl  { text-indent: 1em; margin-top: 0; margin-bottom: 0; }  /* fl = first line. per Tschichold */
  95.      .indenth   { padding-left: 2em; text-indent: -2em; }
  96.  
  97.  
  98. /* vertical shims */
  99.      .shim01 { font-size: 25%; padding:1em 0 0 0; }    /* for use between pix in sidebar */
  100.      .shim02 { font-size: 25%; padding:2em 0 0 0; }    /* for use around menu separator  */
  101.  
  102.      .shim07 { font-size: 25%; padding:0em; }          /* for use before <hr> after <p>        */
  103.      .shim08 { font-size: 25%; padding:3em 0 0 0; }    /* for use after <hr> when using shim07 */
  104.  
  105.      .shim09 { font-size: 25%; padding:6em 0 0 0; }    /* for use on pub availability */
  106.  
  107.  
  108. /* List Styling */
  109.      #content ul { list-style-type: none; list-style-position: outside; padding:0; margin:0; }
  110.  
  111.      .glosslist li,
  112.      .textlist li,
  113.      .textlist2 li { background-image: url("../graphics/list_arrow.gif");
  114.        background-repeat: no-repeat; background-position: 0 .5em; }
  115.      .textlist li  { padding-left:.8em; margin-left:3em; max-width:70%; }
  116.      .textlist2 li { padding-left:.8em; margin-left:0em; }
  117.  
  118.      .fibox li:before { content: "\003A \003A \00A0"; color:#336699; }
  119.      .navlist li:before { content: "\003A \003A \00A0"; color:#336699; padding-left:.8em; margin-left:1em; }
  120.  
  121.      #fixed_sidebar ul { margin:0; padding:0; list-style: none; }
  122.      #fixed_sidebar li li:before { content: "\003A \003A \00A0"; color:#336699; padding: 0 0 0 4px; }
  123.  
  124.      .fibox { margin: 4px 0 0 2.8em; }
  125.      .fibox ul { margin:0; padding:0; text-indent:-.8em; }
  126.  
  127.      .glosslist li { padding-left:10px; margin: 0 0 0 5em; font-size: 90%;
  128.        line-height: 125%; width:70%; }
  129.      .glosslist li ul li { margin: 0 0 0 -1em; }
  130.      .gloss-inline ul, .gloss-inline li { display: inline; margin: 0; padding: 0;}
  131.  
  132.      ul.tree, ul.tree ul { list-style-type: none; background: url("../graphics/vline.png") repeat-y;
  133.        margin:0; padding:0; }
  134.      ul.tree ul { margin-left:1.5em; }
  135.      ul.tree li { margin:0; padding:0 1em; line-height:1.1em;
  136.        background: url("../graphics/node.png") no-repeat; color:#369; font-weight: bold; }
  137.      ul.tree li:last-child { background: url("../graphics/lastnode.png") no-repeat; }
  138.  
  139.  
  140. /* "hover thumbnails" message - same size as image thumbnails */
  141.      div.thumbox { border: 1px dashed #336699; background-color:#FFFFF0;
  142.        margin: 0 0 5px 0; padding: 5px; text-align: center;
  143.        font: 12px Verdana,sans-serif; font-weight: bold; color:#336699; }
  144.  
  145.      .box, .box02 { margin-left: auto; margin-right: auto; height:auto; padding:5px;
  146.        border: 2px solid #4B515B; background:#336699; color:#ffffff; }
  147.  
  148.      .box-clear { margin-left: auto; margin-right: auto; height:auto; padding:5px;
  149.        border: 2px solid; width:65%; }
  150.  
  151.      .box { width:400px; }
  152.      .box02 { width:65%; }
  153.  
  154.      .menubox { margin-left: auto; margin-right: auto; width:65%; height:auto; padding:5px; }
  155.  
  156.  
  157. /* "Table-less" Positioning */
  158.      div.container { /* border: 1px dashed #333; background-color:#ffe; */ }
  159.      div.spacer { clear: both; font-size: 69%; line-height: 1.05em; }
  160.  
  161.      /* for books */
  162.      div.pfloatb { float: left; width: 385px; text-align: right; }
  163.      div.dblockb { margin-left:400px; }
  164.  
  165.      /* for comics & individual promotionals */
  166.      div.pfloatc { float: left; width: 205px; text-align: right; }
  167.      div.dblockc { margin-left:220px; }
  168.  
  169.      /* for sketchbooks on promo page */
  170.      div.pfloatp { float: left; width: 495px; text-align: center; }
  171.      div.dblockp { margin-left:510px; }
  172.  
  173.      /* for links page */
  174.      div.pfloatl { float: left; width: 360px; text-align: center; }
  175.      div.dblockl { margin-left:375px; }
  176.  
  177.  
  178. /* badge & logo positioning */
  179.      .validate { position: absolute; bottom: 5px; left: 42px; border-style: none; }
  180.      .visit { position: absolute; top: 9000px; background: url("http://geo.digitalpoint.com/a.png") no-repeat; }
  181.  
  182.      #logo { background: url("../graphics/ronin_menu.jpg") no-repeat;
  183.        width: 240px; height: 88px; position: relative; margin-bottom: 22px; }
  184.      #logo a { position: absolute; top: 0; left: 0; width: 240px; height: 88px; }
  185.  
  186.      .invis { display: none; }
  187.  
  188.  
  189. /* hover notes */
  190.      .note { text-decoration: none; border-bottom: 2px dotted; color:#336699; }
  191.      .note a { text-decoration:none; }
  192.      .note a:hover {text-decoration: none; color:#336699;
  193.        border-top: 2px dotted #336699; background: #D8CEC6; cursor: help;}
  194.      .note a:visited { color:#336699; }
  195.      .note a span { display: none; }
  196.      .note a:hover span { display: block; position: fixed; top: 288px; left:0;
  197.        width: 224px; min-height:5em; margin: 10px; padding: 5px;
  198.        border: 2px dotted #336699; background: #D8CEC6;
  199.        font: 80% Verdana, sans-serif; text-align: center; color:#000000;
  200.        z-index:100; opacity: 0.90; }
  201.  
  202.  
  203.  
  204. /* Article Sidebars */
  205.      /* general specs */
  206.      div.sidebar-menucolumn,
  207.      div.sidebar-left-narrow, div.sidebar-left-medium, div.sidebar-left-wide,
  208.      div.sidebar-right-narrow, div.sidebar-right-medium, div.sidebar-right-wide
  209.        { border: 2px solid #E0E0B0; background: #FFFFF0; }
  210.  
  211.      /* width specs */
  212.      div.sidebar-left-narrow,
  213.      div.sidebar-right-narrow
  214.        { width:150px; }
  215.  
  216.      div.sidebar-left-medium,
  217.      div.sidebar-right-medium
  218.        { width:225px; }
  219.  
  220.      div.sidebar-left-wide,
  221.      div.sidebar-right-wide
  222.        { width:300px; }
  223.  
  224.      /* float/margin specs */
  225.      div.sidebar-left-narrow,
  226.      div.sidebar-left-medium,
  227.      div.sidebar-left-wide
  228.        { float:left; margin-right:4px; margin-bottom:4px; }
  229.  
  230.      div.sidebar-right-narrow,
  231.      div.sidebar-right-medium,
  232.      div.sidebar-right-wide
  233.        { float:right; margin-left:4px; margin-bottom:4px; padding: 5px 5px 5px 5px; }
  234.  
  235.      div.sidebar-technical
  236.        { width:300px; float:right; font-size:89%; margin-left:3px; border-style:solid;
  237.        border-width:1px; border-color:#888888; /* grey-bright */ background-color:#EEEEEE; /* grey-wisp */ }
  238.  
  239.      div.thumbnail { width:130px; float:right; margin:0 0 4px 10px; }
  240.        /* original incarnation:  { width: 134px; float: right;
  241.        margin: 0 0 4px 4px; padding: 0 0 0 5px; } */
  242.  
  243.  
  244.  
  245. /* Photo-Caption PZ3 CSS (The Good Stuff) */
  246. /*  revision date: 20080630               */
  247.      .PZ3-l { float:left; margin-right:10px; }
  248.      .PZ3-r { float:right; margin-left:0px; direction:rtl; }  /* stock 10px value conflicts w. thumb sidebar */
  249.        html>/**/body .PZ3-r { position:relative; }
  250.  
  251.      .PZ3zoom { border:1px solid #369; }
  252.      .PZ3zoom a,.PZ3zoom a:visited { display:block;
  253.        padding:0; overflow:hidden; text-decoration:none;
  254.        height:100%; width:100%; }
  255.        html>/**/body .PZ3-r a { right:0; }
  256.  
  257.      .PZ3zoom a:hover { position:absolute;
  258.        z-index:999; padding:0; background:none;
  259.        cursor:default; height:auto; width:auto;
  260.        overflow:visible; border:1px solid #369;
  261.        margin:-1px 0 0 -1px; }
  262.        html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }
  263.  
  264.      .PZ3zoom a img { border:0; height:100%; width:100%; }
  265.      .PZ3zoom a:hover img { height:auto; width:auto;
  266.        border:0; }
  267.  
  268.      a:hover .PZ3cap,
  269.      a:hover .PZ31cap { display:block;
  270.        direction:ltr; font:10pt verdana,sans-serif;
  271.        margin-top:-5px; background:#369; color:#fff;  /* stock -3px value leaves a thin empty line */
  272.        text-align:left; }
  273.      a:hover .PZ3cap { padding:3px 5px; }
  274.      .PZ3inr { display:block; padding:2px 5px; }
  275.  
  276.      .noCap a:hover .PZ3cap,
  277.      .noCap a:hover .PZ31cap { display:none; }
  278.      .noBdr,.noBdr a:hover { border:0; }
  279.      .Lnk a:hover { cursor:pointer; }
  280.  
  281.      /* End Photo-Caption Zoom CSS */
  282.  
  283.  
  284.  
  285. hr { border: 0; width: 90%; }
  286. hr.hr1 { border: 1px solid #B6BDD2; height: 4px; }
  287.  
  288. img { border-style: none; }
  289.  
  290.  
  291.  
  292. .under { text-decoration: underline; }
  293.  
  294. .numero { text-decoration: underline; }
  295. .numero22 { position: relative; top: 0.1em; vertical-align: text-top; text-decoration: underline; }
  296.  
  297.  
  298. /* http://www.cssnewbie.com/harnessing-positioning-2/ */
  299.      .frac { font-style: italic; }
  300.      .frac sup, .frac sub { font-style: normal; font-size: 65%; position: relative; }
  301.      .frac sup { top: 0.1em; left: 0.05em; vertical-align: text-top; }
  302.      .frac sub { top: 0.1em; left: -.1em; vertical-align: text-bottom; }
  303.  
  304. /*
  305. sup, sub { position: relative; vertical-align: 0; }
  306. sup { bottom: 0.35em; }
  307. sub { top: 0.35em; }
  308. */
  309.  
  310.  
  311. .numero45 { font-size: 85%; vertical-align: top; text-decoration: underline; }
  312. .numero3 { font-size: smaller; vertical-align: top; text-decoration: underline; }
  313. .numero2 { position: relative; bottom: 0.33em; font-size: smaller; vertical-align: top; text-decoration: underline; }
  314. /* keep superscript and subscript text from breaking the line-spacing */
  315. .sup1 { position: relative; bottom: 0.33em; font-size: smaller; }
  316. .sub1 { position: relative; bottom: -0.25em; font-size: smaller; }
  317.  
Parsed in 0.864 seconds