/* style.css -- CSS style file for Hulubei.Net.  */

/*
 * Copyright (C) 2005-2009 Tudor Hulubei <tudor@hulubei.net>.
 * Distributed under the GNU General Public License.
 */

/*
 * Notes:
 *
 * 1. When an element uses both width and horizontal borders or
 * padding (left/right) or height and vertical borders or padding
 * (top/bottom), the element needs to implement Tantek Celik's box
 * model workaround so that the element is properly rendered in
 * IE5x PC.
 *
 * The problem is that IE5x PC assumes that the padding/border value
 * is included in the width/height value.
 *
 * See the following links for details:
 * http://tantek.com/CSS/Examples/boxmodelhack.html
 * http://www.anti-ivy.com/help/celikhack.html
 *
 * 2. Normally, a container box does not encapsulate its floating
 * children.  That can be achived however, using either a cleared
 * last element in the box, or a CSS hack.
 *
 * See this link for details:
 * http://www.positioniseverything.net/easyclearing.html
 *
 * More recently, a simpler solution was found.  You simply need to
 * add "overflow: auto;" or "overflow: hidden;" to the outer div.
 * Details here:
 * http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
 *
 * However, that solution doesn't really work if you want things that
 * have negative coordinates to be properly displayed, so we use
 * "overflow: auto" when possible, because it's shorter, but still
 * need to use the other hack on occasion.
 *
 * 3. Vertical alignment is hard to implement in CSS without tables,
 * so we don't even try.  See here for an attempt at that though:
 * http://www.jakpsatweb.cz/css/css-vertical-center-solution.html#structural
 *
 * 4. "postion: absolute" doesn't work in MobileSafari, so avoid it,
 * for now, if possible.
 */

html, body, input, textarea, button, span
{
    /*
      font-family: "Trebuchet MS", "Luxi Sans", "Bitstream Vera Sans", "Verdana", "Tahoma", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Lucida", sans-serif;
      letter-spacing: 0.07em;
      */
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    letter-spacing: 0em;
    font-size: 14px;
}

p, li, ul, ol, i, b, em, strike, cite, blockquote, img, dl, dt, dd, select, option
{
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    letter-spacing: 0em;
    font-size: 14px;
}

em
{
    font-weight: bold;
}

pre, tt, kbd, plaintext, samp
{
    font-family: "Andale Mono", Courier, "Courier New", monospace;
    font-size: 14px;
}

h1 { font-size: 20px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }

html
{
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url('../graphics/background.jpg');
    background-color: transparent;
    z-index: -3;
}

body
{
    margin: 0;
    border: 0;
    padding: 0;
    width: auto;
    background-color: transparent;
    z-index: -2;
}

body#CornerArt
{
    background-image: url('../graphics/corner-with-extension.jpg');
    background-repeat: no-repeat;
    /* This is the height of the image so that the body is at least as
       tall as the image and the image is shown complete even when the
       menu is small (the menu is the only div that is inside the
       body, the other divs have an absolute position), the entire
       corner art image is visible.  */
    height: 567px;
}

form
{
    margin: 0;
    padding: 0;
    border: 0;
    display: inline;
}

p
{
    text-align: left;
}

p.LeftJustified
{
    text-align: left;
}

p.Centered
{
    text-align: center;
}

p.Introduction:first-letter
{
    font-size: 300%;
    float: left;
    margin: 0;
    padding: 0;
    margin-right: 10px;
    clear: left;
}

hr
{
    text-align: left;
    width: 150px;
    height: 1px;
    border: 0;
    padding: 0;
    margin: 10px;
    background-color: gray;
}

span.Strike
{
    text-decoration: line-through;
}

div.SearchBox
{
    margin: 2px 2px 3px 2px;
    border: 0;
    padding: 0;
}

input.SearchBox
{
    float: right;
    font-size: 12px;
    width: 25%;
    margin: 0;
    border: 0;
    padding: 2px;
    color: black;
    background-color: #eeeeee;
}

pre
{
    margin: 0.5em 0.5em 0.5em 3em;
    padding: 5px 5px 1px 1em;
    line-height: 110%;
    border-left: solid 1px white;
}

a:link
{
    color: #80c8ff;
    background-color: transparent;
    text-decoration: none;
}

a:visited
{
    color: #6096c0;
    background-color: transparent;
    text-decoration: none;
}

a:hover,
a:active,
a:focus
{
    color: #ff3333;
    background-color: transparent;
    text-decoration: none;
}

/* For use inside '<noscript></noscript>'.  */
div.Inline
{
    display: inline;
}

div#Menu
{
    display: block;
    margin: 3px 0 0 3px;
    border: dashed 1px gray;
    padding: 0;
    /* Not worth implementing Tantek Celik's workaround for 2px,
       plus I'm not sure substracting 3px from 13em works.  */
    width: 13em;
    color: white;
    background-color: transparent;
    font-size: 100%;
    font-weight: normal;
    font-variant: small-caps;
    text-decoration: none;
}

div.MenuSection
{
    display: block;
    margin: 0;
    border: 0;
    border-bottom: dashed 1px gray;
    padding: 0.5em 0 0.5em 0;
    text-indent: 0.5em;
}

div.MenuSectionHeading
{
    font-weight: bold;
    font-style: italic;
    color: red;
    margin: 0 0 4px 0;
    letter-spacing: 0em;
}

.MenuLink,
.MenuLink:link,
.MenuLink:visited,
.MenuLink:hover,
.MenuLink:active,
.MenuLink:focus
{
    display: block;
    margin: 0;
    border: 0;
    padding: 0;
    text-indent: 1.25em;
    overflow: visible;
}

.MenuLink { color: white; }
.MenuLink:link { color: white; }
.MenuLink:visited { color: white; }
.MenuLink:hover { color: #ff3333; }
.MenuLink:active { color: #ff3333; }
.MenuLink:focus { color: #ff3333; }

.MenuLinkYear,
.MenuLinkYear:link,
.MenuLinkYear:visited,
.MenuLinkYear:hover,
.MenuLinkYear:active,
.MenuLinkYear:focus
{
    font-size: 90%;
}

.MenuLinkYear { color: white; }
.MenuLinkYear:link { color: white; }
.MenuLinkYear:visited { color: white; }
.MenuLinkYear:hover { color: #ff3333; }
.MenuLinkYear:active { color: #ff3333; }
.MenuLinkYear:focus { color: #ff3333; }

div.MenuLinkYearGroup
{
    margin: 0 0 0 1em;
    border: 0;
    padding: 0;
}

a.MenuBackLink
{
    font-style: italic;
    font-variant: small-caps;
    margin: 2px 0 0 0;
    padding: 0.5em 0 0.5em 0;
    display: block;
    text-indent: 0.5em;
    text-decoration: none;
    overflow: visible;
}

div#Header
{
    clear: both;
    border: 0;
    padding: 0;
    margin: 0 4px 0 0;
    overflow: auto;
}

div#Motto
{
    font-size: 75%;
    font-style: italic;
    float: left;
    border: 0;
    padding: 0;
    margin: 3px 0 3px 0;
    text-align: left;
    width: 60%;
    color: white;
    background-color: transparent;
}

div#MainImage
{
    margin: 4px 4px 8px 0;
    border: 0;
    padding: 75px 0 0 0; /* Height of the above image. */
    clear: both;
    /* This is still necessary for IE, otherwise the title is pushed down
       quite a bit.  No clue why.  And still, the background image
       doesn't show up in Windows.  Luckily, we're not using it
       anymore.  */ 
    width: 99.5%;
    /*
      background-image: url('../graphics/heading.jpg');
      background-repeat: repeat-x;
    */
    background-color: transparent;
}

div#Content
{
    display: block;
    margin: 3px 182px 3px 1em;
    border: 0;
    padding: 0;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 13em;
    /* Encapsulate all floating children.  */
    overflow: auto;
}

div#Title
{
    border: 0;
    padding: 0;
    margin: 4px;
    text-align: right;
}

div.TitleText
{
    color: white;
    border: 0;
    padding: 0;
    margin: 0 0.5em 0.5em 0;
    text-align: right;
}

div.Signature
{
    border: 0;
    padding: 0;
    margin: 0 0.25em 0.25em 0;
    text-align: right;
    font-style: italic;
}

div.TextBackground
{
    margin: 0 6px 0 0;
    border: 0;
    padding: 0;
    background-image: url('../graphics/background-strip.jpg');
    background-color: transparent;
    /* Unfortunately, we can't repeat on the X axis if we
       want to keep the transparent margin of "Text".  */
    background-repeat: repeat-y;
    background-position: 3em;
    /* Encapsulate all floating children.  */
    overflow: hidden;
}

/* We use the old hack, rather than the "overflow: ...;" trick here because
   auto seems to add a scrollbar and hidden clips the text heading.  */
/* Make sure this properly encapsulates all its floating children.
   See http://www.positioniseverything.net/easyclearing.html.  */
div.Text:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
div.Text { display: inline-table; }
/* Hides from IE-mac \*/
* html div.Text { height: 1%; }
div.Text { display: block; }
/* End hide from IE-mac */

div.Text
{
    margin: 0 0 0 3em;
    border: dashed 1px #888888;
    padding: 1em;
    clear: both;
    color: #d6d6d6;
    background-image: url('../graphics/spotlight.jpg');
    background-repeat: no-repeat;
    background-color: transparent;
}

div.TextHeading
{
    font-size: 120%;
    font-style: italic;
    font-weight: bold;
    font-variant: small-caps;
    margin: 1em 4px 4px 0;
    border: dashed 1px red;
    padding: 2px 8px 2px 4px;
    position: relative;
    top: 0;
    left: -3em;
    width: 16em;
    clear: both;
    color: white;
    background-color: transparent;
}

div.Copyright
{
    display: block;
    color: #cccccc;
    background-color: transparent;
    font-size: 12px;
    margin: 2em auto 0 auto;
    border: 0;
    padding: 0;
    text-align: center;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    clear: both;
    /* Encapsulate all floating children.  */
    /* If we need to encapsulate floating children, do it with hidden, not auto.  */
    /*overflow: hidden;*/
}

/* This contains the ads, the statistics and maybe some more extras.  */
div#Extras
{
    /* In most browsers, except IE, we can set this to "fixed". We do
       it in main(), to degrade nicely in case JavaScript is disabled.  */
    position: absolute;
    top: 3px;
    right: 3px;
    margin: 0;
    border: 0;
    padding: 0;
    width: 162px;
    background-color: transparent;
}

div#TallAds
{
    margin: 0;
    border: solid 1px gray;
    padding: 0;
    /* Tantek Celik's box model workaround required for the width.  */
    width: 162px; /* Incorrect value (1+160+1), for IE5x PC.  */
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 160px; /* Correct value, for conformant browsers.  */
    /* Keep this in sync with ../javascript/ads.js.  */
    background-color: transparent;
}

/* Tantek Celik's "Be nice to Opera 5" rule.  */
html>body div#TallAds
{
    width: 160px; /* Correct value, again.  */
}

div.WideAds
{
    /* Keep this in sync with ../javascript/ads.js.  */
    display: block;
    background-color: transparent;
    border-color: gray;
    margin: 0 auto 0 auto;
    text-align: center;
    clear: both;
    overflow: hidden;
}

div.CauseWideAds
{
    display: block;
    margin: 10px auto 10px auto;
    color: white;
    width: 240px;
    padding: 10px 0px 10px 0px;
    border: solid 1px gray;
}

div.CauseTallAds
{
    text-align: center;
    color: white;
    padding: 10px 0px 10px 0px;
}

div#Counter,
div#CounterNoScriptDiv,
a#CounterNoScriptA,
img#CounterNoScriptImg
{
   float: right;
   margin: 0;
   border: 0;
   padding: 0;
}

img.Image
{
    border: 0;
    margin: 10px;
    padding: 0;
}

a.Thumbnail:link img,
a.Thumbnail:visited img,
a.Thumbnail:hover img,
a.Thumbnail:active img,
a.Thumbnail:focus img
{
    border: 5px;
    margin: 20px;
    float: right;
    text-decoration: none;
    background-color: transparent;
    border-style: solid;
}

a.Thumbnail:link img,
a.Thumbnail:visited img
{
    border-color: black;
}

a.Thumbnail:hover img,
a.Thumbnail:active img,
a.Thumbnail:focus img
{
    border-color: #ff3333;
}

img.Inline
{
    border: 0;
    padding: 0;
    margin: 20px;
    display: inline;
}

div.Disabled
{
    display: none;
}

img#MainPagePicture
{
    border: 0;
    margin: 1px 20px 5px 20px;
    padding: 0;
    float: right;
}

img#ResumePicture
{
    margin: -5.5em 0 0 0;
    float: right;
}