body
{
    font-family:                        Helvetica\ Neue, Helvetica, Arial, sans-serif;
    font-size:                          14px;
    color:                              #555;
    background-color:                   #fff;
    background-image:                   url(/images/topgradient.png);
    background-position:                0px 0px;
    background-repeat:                  repeat-x;
    background-attachment:              fixed;
    text-shadow:                        0px 0px 4px rgba(100, 100, 100, 0.4);
    text-rendering:                     optimizeLegibility;
    -webkit-text-size-adjust:           none;    
    -webkit-transition-property:        background-color, text-shadow;
    -webkit-transition-duration:        0.7s;
    -webkit-transition-timing-function: ease-in-out;
}

body.dimmed
{
    background-color:                   #eee;
    text-shadow:                        0px 0px 5px rgba(100, 100, 100, 0.8);
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    body
    {
        background-image:               url(/images/topgradient.png), -webkit-gradient(linear, left bottom, right top, color-stop(0, rgba(190, 190, 190, 0.2)), color-stop(0.2, transparent)), -webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(190, 190, 190, 0.2)), color-stop(0.1, transparent)), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(190, 190, 190, 0.1)), color-stop(0.1, transparent));
        background-position:            0px 0px, left bottom, right bottom, left top;
        background-repeat:              repeat-x, no-repeat, no-repeat, no-repeat;
        background-attachment:          fixed, fixed, fixed, fixed;
    }
}

#modal-overlay
{
    position:                           fixed;
    top:                                0px;
    left:                               0px;
    background-color:                   rgba(100, 100, 100, 0.3);
    background-image:                   url(/images/topgradient.png), -webkit-gradient(linear, left top, center bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.4, transparent)), -webkit-gradient(linear, right bottom, left bottom, color-stop(0, rgba(255, 255, 255, 0.6)), color-stop(0.4, transparent));
    background-repeat:                  repeat-x, no-repeat, no-repeat;
    background-attachment:              fixed, fixed, fixed;
    z-index:                            9998;
    opacity:                            0.0;
}

#sidebar
{
    z-index:                            -9999;
    width:                              270px;
    min-height:                         470px;
    background-image:                   url(/images/Sidebar.png);
    background-position:                0px -2px;
    background-repeat:                  no-repeat;
    position:                           fixed;
    margin-left:                        4px;
}

#content
{
    overflow:                           hidden;
}

div.onscreen
{
    opacity:                            1.0;
}

div.offscreen
{
    opacity:                            0.0;
}

h1
{
    color:                              #222;
    font-size:                          29px;
    font-style:                         italic;
    line-height:                        40px;
    min-height:                         40px;
    max-height:                         40px;
    letter-spacing:                     -2px;
    padding:                            0px;
    margin-top:                         0px;
    margin-bottom:                      20px;
    text-shadow:                        0px 0px 4px rgba(100, 100, 100, 0.5);
    -webkit-transition-property:        text-shadow;
    -webkit-transition-duration:        0.7s;
    -webkit-transition-timing-function: ease-in-out;
}

h1:first-letter
{
    font-size:                          36px;
    font-style:                         italic;
    letter-spacing:                     -6px;
    color:                              #ec1c24;
    text-shadow:                        0px 0px 4px #eeadad;
    -webkit-transition-property:        color, text-shadow;
    -webkit-transition-duration:        0.7s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay:           0.5s;
}

body.dimmed h1
{
    text-shadow:                        0px 0px 8px rgba(100, 100, 100, 0.9);
}

body.dimmed h1:first-letter
{
    color:                              #cc1c24;
    text-shadow:                        0px 0px 8px #ddadad;
}

h1 em
{
    color:                              #ec1c24;
    text-shadow:                        0px 0px 4px #eeadad;
}

h2
{
    font-size:                          18px;
    color:                              #333;
    line-height:                        20px;
    padding-bottom:                     6px;
    margin-bottom:                      13px;
    letter-spacing:                     -1px;
    white-space:                        nowrap;
    border-bottom:                      1px solid #ddd;
}

h2:first-letter
{   
}

h3
{
    line-height:                        20px;
    margin-bottom:                      20px;
}

h4
{
    color:                              #333;
    line-height:                        20px;
    margin-bottom:                      20px;
    text-align:                         center;
}

tt
{
    font-family:                        Monaco, monospace;
    font-size:                          12px;
    color:                              black;
    text-shadow:                        none;
    letter-spacing:                     normal;
}

ruby
{
    
}

rt
{
    text-align:                         left;
}

img.center
{
    display:                            block;
    margin-left:                        auto;
    margin-right:                       auto;
}

p
{
    line-height:                        20px;
    min-height:                         20px;
    margin-left:                        0px;
    margin-top:                         0px;
    margin-bottom:                      20px;
    letter-spacing:                     normal;
    text-align:                         left;
}

p:last-child, p.final
{
    margin-bottom:                      0px !important;
}

p strong
{
    font-weight:                        bold;
    color:                              #444;
}

p em
{
    font-style:                         italic;
    text-shadow:                        0px 0px 4px rgba(100, 100, 100, 0.1);
    color:                              #888;
}

p em[p] em
{
    font-weight:                        bold;
}

p em[p]:before
{
    content:                            "(";
}

p em[p]:after
{
    content:                            ")";
}

q
{
    font-style:                         italic;
    text-shadow:                        0px 0px 4px rgba(100, 100, 100, 0.1);
}

q:before
{
    content:                            "\201C";
}

q:after
{
    content:                            "\201D";
}

blockquote, code
{
    display:                            block;
    margin-left:                        30px;
    margin-right:                       30px;
    margin-top:                         40px;
    margin-bottom:                      40px;
    padding:                            60px;
    line-height:                        20px;
    color:                              #000;
    font-family:                        Courier, monospace;
    font-size:                          12px;
    font-style:                         italic;
    text-align:                         left;
    -webkit-border-radius:              40px;
    -moz-border-radius:                 40px;
    background-color:                   rgba(25, 25, 25, 0.1);
    -webkit-box-shadow:                 inset 0px 0px 10px 5px rgba(255, 255, 255, 0.9);
    -moz-box-shadow:                    inset 0px 0px 10px 5px rgba(255, 255, 255, 0.9);
    opacity:                            0.5;
}

code
{
    font-size:                          10px;
    font-family:                        Monaco, monospace;
    font-style:                         normal;
    white-space:                        pre-wrap;
    padding:                            40px 40px;
    margin-left:                        0px;
    margin-right:                       0px;
    color:                              white;
    text-shadow:                        0px 0px 1px rgba(255, 255, 255, 0.9);
    -webkit-box-shadow:                 0px 0px 10px rgba(0, 0, 0, 1.0), inset 5px -5px 30px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:                    0px 0px 10px rgba(0, 0, 0, 1.0), inset 5px -5px 30px rgba(0, 0, 0, 0.3);
    background-color:                   rgba(0, 0, 0, 0.8);
    background-image:                   -webkit-gradient(linear, left bottom, 5% 10%, color-stop(0, rgba(0,0,0,1.0)), color-stop(1, transparent));
    opacity:                            1.0;
}

code:after
{
    display:                            block;
    float:                              right;
    font-size:                          64px;
    width:                              30px;
    height:                             64px;
    content:                            ";";
    text-shadow:                        0px 0px 5px rgba(255, 255, 255, 1.0);
    position:                           relative;
    bottom:                             15px;
    left:                               20px;
    opacity:                            0.1;
}

code strong
{
    color:                              rgba(200, 200, 255, 1.0);
    text-shadow:                        0px 0px 2px rgba(200, 200, 255, 0.5);
    font-weight:                        normal;
}

code em
{
    color:                              rgba(255, 200, 200, 1.0);
    text-shadow:                        0px 0px 2px rgba(255, 210, 210, 0.5);
    font-style:                         normal;
}

blockquote:before, blockquote:after
{
    display:                            block;
    position:                           relative;
    font-family:                        Monaco, monospace;
    font-style:                         normal;
    font-weight:                        bold;
    font-size:                          54px;
    width:                              55px;
    height:                             55px;
    margin-top:                         -55px;
    margin-right:                       -55px;
    color:                              rgba(150, 150, 150, 0.5);
    text-shadow:                        none;
}

blockquote:before
{
    content:                            "\201C";
    float:                              left;
    top:                                30px;
    left:                               -40px;
}                                       
                                        
blockquote:after                        
{                                       
    content:                            "\201D";
    float:                              right;
    top:                                85px;
    left:                               5px;
}


article section > p:nth-of-type(1):first-letter, .dropcap:first-letter
{
    font-size:                          45px; 
    color:                              #222;
    font-weight:                        bold;
    font-style:                         italic;
    padding-right:                      4px;
    padding-bottom:                     0px;
    line-height:                        38px;
    float:                              left;
}

article section > p:nth-of-type(1):first-line, .dropcap:first-line
{
    font-weight:            bold;
    font-style:             italic;
    color:                  #222;
}

.tightkern
{
    letter-spacing:         -1px;
}

.keep-together
{
    white-space:            nowrap;
}

.rag-right
{
    text-align:                 left;
}

.rag-left
{
    text-align:                 right;
}

.justify
{
    text-align:                 justify;
}

.center
{
    text-align:                 center;
}

.warichu-high
{
    font-size:              9px; 
    line-height:            9px;
    font-weight:            normal; 
    vertical-align:         super;
    letter-spacing:         normal;
}
 
.warichu-low
{
    font-size:              9px; 
    line-height:            9px;
    font-weight:            normal; 
    vertical-align:         baseline;
    letter-spacing:         normal;
}

label
{
    font-size:                  14px;
    font-weight:                bold;
    letter-spacing:             -0.1em;
    text-align:                 right;
}


a
{
    color:                              #ec1c24;
    text-shadow:                        0px 0px 4px #eeadad;
    font-weight:                        bold;
    text-decoration:                    none;
    white-space:                        nowrap;
    
    /* This gets rid of those dashed borders when you click things in Firefox */
    outline:                            none;
    -webkit-transition-property:        color;
    -webkit-transition-duration:        0.7s;
    -webkit-transition-timing-function: ease-in-out;
}

body.dimmed a
{
    color:                              #cc1c24;
    text-shadow:                        0px 0px 8px #ddadad;
}

p > a
{
    text-decoration:                    underline;
}

a:hover
{
    color:                              #A00;
    -webkit-animation-name:             linkpulse;
    -webkit-animation-duration:         0.2s;
    -webkit-animation-direction:        alternate;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-in-out;
}


@-webkit-keyframes linkpulse
{
    from    {   color: #ec1c24; }
    to      {   color: #A00; }
}

#downloads
{
    margin-top:                         -20px;
}                                       
                                        
.download                               
{                                       
    height:                             40px;
    max-height:                         40px;
    min-height:                         40px;
}                                       
                                        
.download a                             
{                                       
    line-height:                        20px;
    text-decoration:                    none;
    letter-spacing:                     -1px;
    margin-right:                       5px;
}

.download a:before
{
    display:                            block;
    float:                              right;
    content:                            "";
    background-image:                   url("/images/DownloadArrow.png");
    background-repeat:                  no-repeat;
    position:                           relative;
    top:                                2px;
    left:                               0px;
    height:                             16px;
    width:                              16px;
    line-height:                        20px;
    opacity:                            0.8;
    -webkit-transform:                  none;
    /* Transitions still don't work in generated content */
    -webkit-transition-property:        -webkit-transform;
    -webkit-transition-duration:        0.7s;
    -webkit-transition-timing-function: ease-in-out;
}

body.dimmed .download a:before
{
    -webkit-transform:                  rotate(90deg);
    -moz-transform:                     rotate(90deg);
}                                       
                                        
ul li                                   
{                                       
    margin-left:                        10px;
    margin-bottom:                      20px;
    line-height:                        20px;
}

/* Curly brace submenus */

dl.submenu
{
    -webkit-perspective:                500px;
    -webkit-perspective-origin:         50% 50%;
    -webkit-transition-property:        -webkit-perspective-origin;
    -webkit-transition-delay:           0.0s;
    -webkit-transition-duration:        0.5s;
    -webkit-transition-timing-function: linear;
}

dl.submenu lh
{
    display:                            block;
    color:                              #333;
    font-size:                          18px;
    font-weight:                        bold;
    font-style:                         italic;
    letter-spacing:                     -1px;
    line-height:                        20px;
    padding-bottom:                     20px;
}                                       
                                        
dl.submenu dt, dl.submenu lh + dt
{                                       
    padding-left:                       25px;
    padding-top:                        9px;
    margin-top:                         -9px;
    margin-left:                        -6px;
    padding-bottom:                     30px;
    margin-bottom:                      -30px;
    line-height:                        20px;    
    background-image:                   url("/images/CurlyBrace.png");
    background-position:                top left;
    background-repeat:                  no-repeat;
}                                       
                                        
dl.submenu dd, dl.submenu lh + dt + dd
{                                       
    margin-left:                        22px;
    margin-bottom:                      20px;
    font-size:                          11px;
    line-height:                        20px;
}

dl.submenu dt:nth-of-type(2n)
{
    margin-left:                        4px;
}

dl.submenu dt:nth-of-type(2n) + dd
{
    margin-left:                        32px;
}

dl.submenu dt:nth-of-type(4n)
{
    margin-left:                        14px;
}

dl.submenu dt:nth-of-type(4n) + dd
{
    margin-left:                        42px;
}

/* 3D Stuff */

dl.submenu dd, dl.submenu dt, dl.submenu.dt a
{
    -webkit-transition-property:        color, text-shadow, -webkit-transform;
    -webkit-transition-duration:        0.5s;
    -webkit-transition-timing-function: linear;
    -webkit-transform-style:            preserve-3d;
    //-webkit-transform:                rotateX(90deg) translateZ(100px);
}


.fineprint
{
    color:                              #888 !important;
	font-family:			            sans-serif !important;
	font-size:				            9px !important;
	font-weight:                        normal !important;
	line-height:			            12px !important;
	-webkit-text-size-adjust:           none !important;
}                                       
                                        
.fineprint-right                        
{                                       
	text-align:				            right !important;
	font-family:			            sans-serif !important;
	font-size:				            9px !important;
	font-weight:                        normal !important;
	line-height:			            12px !important;
	-webkit-text-size-adjust:           none !important;
}                                       
                                        
.fineprint-center                       
{                                       
	text-align:				            center !important;
	font-family:			            sans-serif !important;
	font-size:				            9px !important;
	font-weight:                        normal !important;
	line-height:			            12px !important;
	-webkit-text-size-adjust:           none !important;
}

div#flash
{
    height:                             20px;
    min-height:                         20px;
    max-height:                         20px;
    padding-top:                        10px;
    padding-bottom:                     10px;
    -webkit-transition-property:        opacity;
    -webkit-transition-duration:        0.7s;
    -webkit-transition-timing-function: ease-in-out;
}

div#flash > p:before
{
    display:                            block;
    float:                              left;
    content:                            "x";
    color:                              black;
    position:                           relative;
    font-size:                          9px;
    left:                               4px;
    top:                                2px;
    line-height:                        7px;
    text-align:                         center;
    font-weight:                        bold;
    width:                              9px;
    height:                             9px;
    -webkit-border-radius:              9px;
    -moz-border-radius:                 9px;
    -webkit-box-shadow:                 inset 0px 0px 1px rgba(0, 0, 0, 1);
    background-color:                   white;
    
}

#flash #notice, #flash #error, #flash #info
{
    padding-top:                        2px;
    padding-bottom:                     2px;
    font-weight:                        bold;
    text-align:                         center;
    color:                              white;
    white-space:                        nowrap;
    overflow:                           hidden;
    opacity:                            0.5;
    cursor:                             pointer;
    -webkit-border-radius:              8px;
    -moz-border-radius:                 8px;
    
    -webkit-animation-name:             flash-fade;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function:  ease;
}

#flash #info
{
    background-color:                   #aaa;
}

#flash #notice
{
    background-color:                   black;
}

#flash #error
{
    background-color:                   red;
}

@-webkit-keyframes flash-fade
{
    0%      { opacity:          0.0; }
    2%      { opacity:          1.0; }
    4%      { opacity:          0.5; }
    6%      { opacity:          1.0; }
    8%      { opacity:          0.5; }
    10%     { opacity:          1.0; }
    12%     { opacity:          0.5; }
    14%     { opacity:          1.0; }
    100%    { opacity:          0.5; }
}

div#footer
{
    background-image:                   url(/images/bottomgradient.png);
    background-repeat:                  repeat-x;
    background-position:                0px 0px;
}

div#copyright
{
    margin-left:                        10px;
    margin-right:                       10px;
    text-align:                         right;
    color:                              rgba(255, 255, 255, 0.6);
    font-size:                          9px;
    line-height:                        30px;
    overflow:                           hidden;
    position:                           relative;
    top:                                16px;
    height:                             30px;
    -webkit-text-size-adjust:           none !important;
}

input[type="submit"]
{
    width:                              100px;
    min-width:                          100px;
    display:                            block;
    margin:                             1em auto;
}

input[type="checkbox"]
{
    margin-right:                       2px;
}

article
{
    display:                            block;
}

article > section
{
    display:                            block;
    border-bottom:                      1px solid rgba(120, 120, 120, 0.1);
    margin-top:                         0px;
    margin-bottom:                      79px;
    padding-bottom:                     80px;
}

article > section:last-child
{
    padding-bottom:                     100px;
    border:                             none;
    background-image:                   url(/images/mediumstars.png);
    background-repeat:		            no-repeat;
    background-position:	            center bottom;
}                                       
                                        
article > section:after                 
{                                       
    content:                            "\00a7";
    display:                            block;
    position:                           relative;
    color:                              rgba(190, 190, 190, 0.5);
    text-shadow:                        none;
    top:                                103px;
    text-align:                         center;
    font-size:                          36px;
    line-height:                        33px;
    width:                              40px;
    height:                             40px;
    margin-left:                        auto;
    margin-right:                       auto;
    margin-top:                         -50px;
    -webkit-border-radius:              40px;
    -moz-border-radius:                 40px;
    border:                             5px solid rgba(200, 200, 200, 0.2);
    -webkit-box-shadow:                 0px 0px 15px rgba(150, 150, 150, 0.2);
    -moz-box-shadow:                    0px 0px 15px rgba(150, 150, 150, 0.2);
    background-color:                   rgba(255, 255, 255, 1.0);
}

article > section:last-child:after
{
    display:                            none;
}


article aside
{
    font-size:                          10px;
    display:                            block;
    float:                              right;
    margin-left:                        20px;
    margin-top:                         -5px;
    margin-bottom:                      15px;
    margin-right:                       -100px;
    max-width:                          200px;
    padding:                            20px;
    background-color:                   #eee;
    -webkit-border-radius:              10px;
    -moz-border-radius:                 10px;
    -webkit-box-shadow:                 -5px 5px 5px rgba(120, 120, 120, 0.3);
    -moz-box-shadow:                    -5px 5px 5px rgba(120, 120, 120, 0.3);
    z-index:                            9999;
}

article aside:nth-of-type(odd)
{
    -webkit-transform:                  rotateZ(-2deg);
    -webkit-transform-origin:           100% 0%;
    /*-webkit-perspective:              5000;*/
}

article aside:nth-of-type(even)
{
    -webkit-transform:                  rotateZ(2deg);
    -webkit-transform-origin:           0% 100%;
    /*-webkit-perspective:              5000;*/
}

article aside h1
{
    color:                              #555;
    font-family:                        Courier;
    font-size:                          15px;
    line-height:                        16px;
    letter-spacing:                     -1px;
    border-bottom:                      1px solid #ddd;
    padding-bottom:                     4px;
    margin-bottom:                      9px;
    min-height:                         16px;
    max-height:                         16px;
}                                       
                                        
article aside h1:first-letter           
{                                       
    font-size:                          inherit;
    line-height:                        inherit;
    color:                              inherit;
    letter-spacing:                     inherit;
    text-shadow:                        inherit;
}

article aside p
{
    line-height:                        12px;
    margin-bottom:                      11px;
}

article figure
{
    display:                            block;
    margin-top:                         0px;
}

article figure:nth-of-type(odd)
{
    float:                              left;
    margin-right:                       20px;
}

article figure:nth-of-type(even)
{
    float:                              right;
    margin-left:                        20px;
}

article figure img
{
    display:                            block;
}

article p a
{
    white-space:                        normal;
}

/* Fancy Enumerated Subheadings */
article section > dl
{
    counter-reset:                      enumerated_subhead;
    string-set:                         enumerated_subhead attr(prefix);
}

article section > dl dt
{
    font-size:                          18px;
    font-weight:                        bold;
    font-style:                         italic;
    counter-increment:                  enumerated_subhead;
    color:                              #333;
    line-height:                        20px;
    padding-bottom:                     6px;
    margin-bottom:                      13px;
    letter-spacing:                     -1px;
    white-space:                        nowrap;
    border-bottom:                      1px solid #ddd;
}

article section > dl dt strong
{
    color:                              #777;
}

article section > dl dt em
{
    color:                              #ec1c24;
    text-shadow:                        0px 0px 4px #eeadad;
}

article section > dl dt[prefix]:before
{
    /* Change if string-set ever gets supported for screen media */
    content:                            attr(prefix) ": \00a0\201C\2009";
    font-style:                         italic;
    font-weight:                        normal;
    color:                              #bbb;
    text-shadow:                        none;
}

article section > dl dt[prefix]:after
{
    content:                            "\2009\201D";
    font-style:                         italic;
    font-weight:                        normal;
    color:                              #bbb;
    text-shadow:                        none;
}

article section > dl dd
{
    margin-left:                        65px;
    margin-right:                       40px;
    margin-bottom:                      20px;
}

article section > dl dd:before
{
    content:                            counter(enumerated_subhead);
    display:                            block;
    float:                              left;
    margin-top:                         -14px;
    margin-left:                        -65px;
    background-color:                   rgba(0, 0, 0, 0.8);
    padding:                            5px;
    color:                              white;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright:     10px;
    font-size:                          18px;
    font-weight:                        bold;
    text-align:                         center;
    text-shadow:                        none;
    width:                              20px;
    height:                             20px;
}

article section > dl dd code
{
    margin-left:                        -65px;
    margin-right:                       -40px;
}

/* End of Fancy Enumerated Subheadings */

/* Allow overrides when necessary */
figure.left
{
    float:                              left !important;
    margin-right:                       20px !important;
    margin-left:                        0px !important;
}

figure.right
{
    float:                              right !important;
    margin-left:                        20px !important;
    margin-right:                       0px !important;
}

figure figcaption
{
    display:                            block;
    clear:                              both;
    font-size:                          9px;
    line-height:                        11px;
    margin-top:                         10px;
    margin-bottom:                      10px;
    text-align:                         center;
    width:                              100%;
}

figure figcaption a
{
    font-weight:                        normal;
}

figure figcaption.overline
{
    border-top:                         1px solid #aaa;
    padding-top:                        5px;
}

div.logout
{
    position:                           fixed;
    overflow:                           hidden;
    top:                                0px;
    right:                              0px;
    height:                             40px;
    width:                              80px;
    font-size:                          10px;
    line-height:                        35px;
    text-align:                         center;
    -webkit-border-bottom-left-radius:  20px;
    background-color:                   black;
    -webkit-box-shadow:                 0px 0px 3px black;
    -webkit-box-sizing:                 border-box;
}

div.logout a
{
    color:                              white;
}

div.logout a:hover
{
    text-shadow:                        0px 0px 8px white;
    -webkit-animation-name:             none;
}