/* \*/
* html .gainlayout { height: 1%; }
/* */
 
body#periodic
{
    color:                  #5c5c5c;
    background-color:       black;
    margin:                 0px;
    font-family:            Helvetica, Arial, sans-serif;
    font-size:              12px;
    /*
        I have no idea why, but Leopard's WebKit will not reliably paint the
        entire background for us unless we tile an image as well. It's already
        been fixed in the nightly builds, but not too many people have those, so
        here's a 1px black GIF. 
    */
    background-image:       url(/images/black.gif);
    background-position:    left top;
    background-repeat:      repeat;
    
    width:                  100%;
    height:                 100%;
}
 
html > body#periodic
{
    /* If you can't read 24pt text then I don't know what to tell ya. */
    -webkit-text-size-adjust: none;
}

@media screen and (max-device-width: 480px) 
{
    body#periodic
    {
        -webkit-text-size-adjust:   140% !important;
    }
}
 
.warichu-high
{
    font-size:              9px; 
    font-weight:            normal; 
    vertical-align:         super;
}
 
.warichu-low
{
    font-size:              9px; 
    font-weight:            normal; 
    vertical-align:         baseline;
}
 
img
{
    border:                 none;
}
 
a
{
    color:                              #ccc;
    -webkit-transition-property:        color;
    -webkit-transition-duration:        0.3s;
    -webkit-transition-timing-function: ease-in-out;
    outline:                            none;
    overflow:                           hidden;
}
 
a:hover
{
    color:                  white;           
}

 
div#spotlight
{
    position:               fixed;
    top:                    0px;
    left:                   0px;
    width:                  592px;
    height:                 754px;
    /*
        My preference was to make this a transparent PNG attached to the
        body element's background, but there are five problems with that:
        
        1)  I need to tile a black GIF in order for all versions of WebKit
            to reliably paint the entire background black. I could do multiple
            background images for that, but validators choke on it, and...
            
        2)  Different browsers interpret the PNG gamma tag differently, 
            resulting in widely varying appearances (usually way too bright).
            
        3)  IE7 will not render the PNG at all. IE7 can't render any other 
            part of this site correctly, either, so I don't generally give a rip, 
            but it'd be nice if the splash page at least looked presentable
            for the tiny handful of Windows users that end up here after 
            searching for ferret porn or whatever. 
        
        4)  LCD monitors are prone to banding gradients such as these, so
            I needed to add a little gaussian noise to the image in order
            to mitigate the perception of said banding. Noise adding algorithms
            tend to work better when there's more than one color there to
            play around with, so the all-white version looked about ass. 
            
        5)  The JPEG is smaller by over 100KB, even after adding gaussian noise. 
    */
    background-image:       url(/images/crossingspotsleft.jpg);
    background-position:    0px 0px;
    background-repeat:      no-repeat;
    z-index:                -9999;
    overflow:               hidden;
    opacity:                0.0;
    
    -webkit-mask-image:     -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.throbbing-spotlight
{
    -webkit-animation-name:             spotlight-pulse;
    -webkit-animation-duration:         3s;
    -webkit-animation-direction:        alternate;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-in-out;
}
 
@-webkit-keyframes spotlight-pulse
{
    0% { opacity:   1.0; }
    100% { opacity: 0.8; }
}

div#blurb
{
    position:               absolute;
    top:                    65px;
    left:                   510px;
    width:                  300px;
    text-align:             right;
    font-size:              36px;
    font-weight:            bold;
    letter-spacing:         -0.1em;
    opacity:                0.0;
    
    -webkit-mask-image:     -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
    -webkit-transform:      rotateZ(-5deg) skew(-10deg);
    -moz-transform:         rotate(-5deg) skew(-10deg);
    text-shadow:            0px 0px 4px rgba(50, 50, 50, 0.8);
}

@media screen and (max-device-width: 480px) 
{
    div#blurb
    {
        display:            none;
    }
}
 
div#blurb p
{
    margin:                 -5px 0px 2em 0px;
    line-height:            24px;
}
 
div#blurb p#heading
{
    color:                  #ccc; 
    font-size:              56px; 
    margin:                 0px 0.7em 1px 0px;
    line-height:            45px;
    letter-spacing:         -3px;
    
    -webkit-mask-image:     -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.9)));
}

div#blurb p#ohmy
{
    text-shadow:            0px 0px 5px rgba(100, 100, 100, 0.9);
}
 
div#blurb em
{
    font-style:             normal;
    color:                  #999;
    text-shadow:            0px 0px 3px rgba(50, 50, 50, 0.9);
}

div#chat
{
    position:               absolute;
    top:                    53px;
    left:                   790px;
    height:                 29px;
    width:                  31px;
    z-index:                10;
    /* 
        Preload trickery; second definition overrides the first, 
        but not before the browser loads the image. Doesn't work
        in Firefox, but fuck those Linux nerds. 
    */
    background-image:       url(/images/chatballoonspriteshover.png);
    background-image:       url(/images/chatballoonsprites.png);
    background-position:    left -58px;
    background-repeat:      no-repeat;
    
    -webkit-mask-image:     -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.5)));
}

@media screen and (max-device-width: 480px) 
{
    div#chat
    {
        display:            none;
    }
}
 
div#chat:hover
{
    background-image:       url(/images/chatballoonspriteshover.png);
}
 
div#tag
{
    position:               absolute;
    top:                    315px;
    left:                   550px;
    width:                  270px;
    text-align:             right;
    opacity:                0.0;
}

@media screen and (max-device-width: 480px) 
{
    div#tag
    {
        display:            none;
    }
}

div#tag p
{
    opacity:                0.0;
}
 
div#tag p#rarely
{
    color:                  #888;
    font-size:              16px;
    font-weight:            bold;
    margin-top:             5px;
    margin-right:           -0.4em;
    margin-bottom:          0px;
}

div#tag em
{
    color:                  #eee;
    font-style:             italic;
}
 
div#tag p#phone
{
    color:                  #bbb;
    font-size:              18px;
    font-weight:            bold;
    font-style:             italic;
    margin-top:             2px;
}

div#tag img
{
    margin-left:            10px;
    -webkit-mask-image:     -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.6)), to(rgba(0,0,0,1)));
    -webkit-transform:      none;
    webkit-transition-property:        -webkit-transform, -webkit-mask-image;
    -webkit-transition-duration:        0.9s;
    -webkit-transition-timing-function: ease-in-out;
}

div#tag img.flattened
{
    -webkit-transform:      rotateX(125deg) rotateZ(180deg) translateZ(-20px);
    -webkit-mask-image:     -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.2)), to(rgba(0,0,0,1)));
    opacity:                0.2;
}

div#tag img:first-child
{
    margin-left:            0px;
}
 
div#welder
{
    position:               absolute;
    top:                    70px;
    left:                   60px;
    width:                  427px;
    height:                 296px;
    background-image:       url(/images/PeriodicTableLogo_03.png);
    background-position:    left top;
    background-repeat:      no-repeat;  
    opacity:                0.0;    
    z-index:                1;   
}

.throbbing-welder
{
    -webkit-animation-name:             welder-pulse;
    -webkit-animation-duration:         4s;
    -webkit-animation-direction:        alternate;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-in-out;
}

@-webkit-keyframes welder-pulse
{
    0% { opacity:   0.8; }
    100% { opacity: 0.6; }
}

@media screen and (max-device-width: 480px) 
{
    div#welder
    {
        position:           static;
        margin-top:         -410px;
        margin-left:        auto;
        margin-right:       auto;
        opacity:            1.0;
    }
}
 
 
/*Navigation Header*/   
nav
{
    position:               absolute ;
    top:                    405px ;
    left:                   15px ;
    text-align:             left;
    opacity:                0.0;
}

@media screen and (max-device-width: 480px) 
{
    nav
    {
        position:           static;
        z-index:            9999;
        width:              520px;
        margin-top:         480px;
        margin-left:        auto;
        margin-right:       auto;
        padding-bottom:     1em;
    }
}

nav:after
{
    content:                "";
}
 
nav ul li
{
    font-size:              14px ;
    font-weight:            bold ;
    display:                inline ;
    margin:                 0 0 0 1em ;
    padding:                0 0 0 1em ;
    border-left:            .1em solid rgb(50, 50, 50) ;
}
 
nav ul li:first-child
{
    padding:                0;
    border-left:            none;
}

nav ul li:before
{
    content:                "";
}
 
nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active
{
    color:                  #999;
    margin:                 0;
    padding:                0 0 0 0;
    letter-spacing:         normal;
    text-decoration:        none;  
    text-shadow:            0px 0px 1px rgba(200, 200, 200, 0.5);
    -webkit-mask-image:     -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.5))) ;
    opacity:                1.0;
}
 
nav ul li a[href]:hover
{
    color:                  white ;
    text-decoration:        none ;
    text-shadow:            0px 0px 3px white ;
    border-bottom:          0;
    -webkit-mask-image:     -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.7)), to(rgba(0,0,0,1))) ;
}
 
nav ul li a.current
{
    color:                  white ;
    border-bottom:          0;
    text-shadow:            0px 0px 2px #fff ;
    -webkit-mask-image:     -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.7)), to(rgba(0,0,0,1))) ;
}
 
div#copyright
{
    font-size:              9px;
    line-height:            14px;
    color:                  #eee;
    position:               absolute;
    bottom:                 0px;
    right:                  10px;
    text-shadow:            1px 0px 2px black;
    opacity:                0.4;
    vertical-align:         bottom;
    -webkit-text-size-adjust:    none !important;
}
 
footer
{
    position:               fixed; 
    top:                    0px; 
    left:                   0px; 
    height:                 100%; 
    width:                  100%; 
    min-height:             600px;
    min-width:              920px; 
    z-index:                -1; 
    background-position:    bottom right; 
    background-repeat:      no-repeat;
    opacity:                0.0;
}

div#twats
{
    margin-top:             40px;
    min-width:              190px;
    position:               fixed;
    right:                  50px;
}

div#twats > p
{
    font-size:              18px;
    letter-spacing:         -1px;
    text-align:             left;
    margin-left:            -10px;
    margin-bottom:          20px;
    font-weight:            bold;
    color:                  rgba(200, 200, 200, 0.5);
}

div#twats > p em
{
    font-style:             normal;
    color:                  rgba(255, 255, 255, 0.6);
}

div.twat
{
    width:                  150px;
    min-height:             50px;
    padding:                20px;
    background-color:       rgba(140, 140, 140, 0.2);
    margin-bottom:          20px;
    -webkit-border-radius:  20px;
    -moz-border-radius:     20px;
    -webkit-box-shadow:     0px 0px 20px rgba(20, 20, 20, 0.9), 0px 0px 20px rgba(20, 20, 20, 0.9);
    -moz-box-shadow:        0px 0px 20px rgba(20, 20, 20, 0.9), 0px 0px 20px rgba(20, 20, 20, 0.9), inset 0px 0px 20px black;
}

div.twat p
{
    color:                  rgba(255, 255, 255, 0.7);
    font-size:              10px;
    line-height:            14px;
    margin:                 0px;
}

div.twat p.date
{
    font-size:              9px;
    margin-bottom:          5px;
    color:                  rgba(255, 255, 255, 1.0);
    font-weight:            bold;
}

div.twat p.link
{
    font-weight:            bold;
    text-align:             right;
    margin-top:             20px;
}

div.kurobuta
{
    position:                   relative;
    display:                    inline;
    color:                      #777;
    font-size:                  38px;
    font-weight:                bold;
    opacity:                    0.5;
    white-space:                nowrap;
    overflow:                   hidden;
    -webkit-mask-image:         -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.7)), to(rgba(0,0,0,0.2))); 
}

div#kbw
{
    display:                    none; /* overridden for Safari below */
    position:                   absolute;
    bottom:                     10px;
    right:                      10px;
    opacity:                    0.2;
    white-space:                nowrap;
    overflow:                   hidden;
    max-width:                  270px;
    
    -webkit-animation-name:             flicker, rock;
    -webkit-animation-duration:         2s;
    -webkit-animation-direction:        alternate;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
    
    -webkit-transform-origin:   20% 10%;
    -webkit-transform:          rotateZ(-2deg);
}

/* Only Safari can handle this. */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    div#kbw
    {
        display:                block;
    }
}

div#kb1
{
    top:                        0px;
    left:                       0px;
    opacity:                    0.4;
}

div#kb2
{
    top:                        0px;
    left:                       -7.1em;
    
    -webkit-animation-name:             wobble-down;
    -webkit-animation-duration:         0.5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}

div#kb3
{
    top:                        0px;
    left:                       -14.1em;
    
    -webkit-animation-name:             wobble-up;
    -webkit-animation-duration:         2.0s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease;
}

@-webkit-keyframes flicker
{
    0% { opacity:   0.2; }
    5% { opacity:   0.3; }
    10% { opacity:  0.2; }
    60% { opacity:  0.3; }
    100% { opacity: 0.2; }
}

@-webkit-keyframes wobble-up
{
    0%      { top:          -0.1%; }
    50%     { top:           0.1%; }
    75%     { top:          -0.1%; }
    100%    { top:           0.1%; }
}

@-webkit-keyframes wobble-down
{
    0%      { top:           2%; }
    50%     { top:          -2%; }
    75%     { top:           2%; }
    100%    { top:          -2%; }
}

@-webkit-keyframes rock
{
    0%      { -webkit-transform:    rotateZ(-1.5deg); }
    5%      { -webkit-transform:    rotateZ(-1deg); }
    50%     { -webkit-transform:    rotateZ(-1.5deg); }
    55%     { -webkit-transform:    rotateZ(0deg); }
    100%    { -webkit-transform:    rotateZ(-1.5deg); }
}