/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* jj-style.css - default style sheet for my CSS website */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~This allows an invisible skip link for users~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.skiplink
    {
        display: none;
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~These set the default link colours~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body a:link
    {
        color: #0000FF;
    }

body a:visited
    {
        color: #800080;
    }

body a:active
    {
        color: #FF0000;
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~This establishes a header and sidebar region that don't rely on 'position:fixed'~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body
    {
        margin: 0;
        border: 0;
        padding: 0;
        height: 100%; 
        max-height: 100%; 
        color: #000000;
        background-color: #FFFFFF;
        background-image: url("Images/sidebar_squiggle.jpg");
        background-repeat: repeat-y;
        background-attachment: fixed; 
        z-index: -2;
    }

#header 
    {
        border-style: solid;
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 1px;
        position: absolute;
        top: 0;
        left: 83px;
        width: 100%;
        height: 145px;
        overflow: auto;
        background: #FFFFFF;
        z-index: -4;
    }

#subheader 
    {
        border-style: solid;
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 1px;
        position: fixed;
        top: 146px;
        left: 83px;
        width: 100%;
        height: 25px;
        overflow: auto;
        background: #FFFFFF;
        z-index: -4;
    }

#sidebar
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 83px;
        height: 100%; 
        overflow: auto; 
        background: #FFFFFF;
        z-index: -4;
    }

#contents
    {
        margin-left: -5px;
        padding-left: 5px;
        padding-right: 5px;
        border-style: solid;
        border-left-width: 0px;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        position: fixed;
/*top was originally 177*/
        top: 177px;
        left: 88px;
        bottom: 0px;
        right: 0px; 
        overflow: auto;
        background: #FFFFFF;
    }




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~This allows a non-visible link within a span element~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body span.no-show
    {
        display: none;
        z-index: -5;
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~This sets the button frame to float along the left-hand edge of the page~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


div.button-frames
    {
        background-image: url("Images/b&w-sidebar-button-frames.jpg");
        position: fixed;
        top: 0px;
        left: 0px;
        width: 83px;
        height: 540px;
        z-index: 1;
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~This class sets where the tops of the buttons start~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.buttontop1 {top: 16px;}
.buttontop2 {top: 97px;}
.buttontop3 {top: 178px;}
.buttontop4 {top: 259px;}
.buttontop5 {top: 340px;}
.buttontop6 {top: 421px;}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~This sets the buttons to float on the sidebar~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* ~~~Note: the textlinks are hidden so that the button-flashing works properly in Internet Explorer. The text has been made part of the buttons. This is less elegant, but it also means I don't have to worry about font sizes that don't fit on the buttons.~~~ */


#button1, #button2, #button3, #button4, #button5, #button6
    {
        display: block;
        position: fixed;
        left: 4px;
        width: 74px;
        height: 38px;
        border-style: none;
        background-repeat: no-repeat;
        z-index: 1;
    }


#button1 { background-image: url("Images/buttons_red_home.gif"); }
#button2 { background-image: url("Images/buttons_orange_aboutme.gif"); }
#button3 { background-image: url("Images/buttons_yellow_news.gif"); }
#button4 { background-image: url("Images/buttons_green_writing.gif"); }
#button5 { background-image: url("Images/buttons_blue_links.gif"); }
#button6 { background-image: url("Images/buttons_purple_contact.gif"); }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* ~~~this sets the horizontal button positions~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#hbutton1, #hbutton2, #hbutton3, #hbutton4, #hbutton5, #hbutton6
    {
        display: block;
        position: fixed;
        width: 140px;
        height: 25px;
        left: 50%;
        top: 146px;
        background-repeat: no-repeat;
        z-index: 1;
    }

/* ~~~Note: To align the buttons properly, the left edge of all of them is set to 50%, then the margin-left option is offset by half the width of the sidebar (83px/2) to centre the buttons' left edge in the middle of the CONTENT area (i.e. centred under the signature in the header.) Negative offsets on 'margin-left' move the button to the left, so all buttons initially get a (-83px/2) offset. 

Buttons to the left of centre are offset by increasingly negative values. Buttons to the right have offsets added to the initial negative offset that centred them.

All buttons are given additional offsets equal to:

(button width/2 + button gap/2) + n (button width + button gap) 

where n is the number of spaces over. The centre-most buttons would have n = 1.

The buttons are 140px wide and the gaps between buttons are 10 px wide. Thus, the additional offset is:

(+/-)[ (140+10)/2 + n(140+10) ] = (+/-)[(75)+n(150)]~~~ */


#hbutton1 
    { 
        background-color: #FF0000; 
        margin-left: -416px;
    }
#hbutton2 
    { 
        background-color: #FF8000; 
        margin-left: -266px;
    }
#hbutton3 
    { 
        background-color: #FFFF00; 
        margin-left: -116px;
    }
#hbutton4 
    { 
        background-color: #80FF00; 
        margin-left: 34px;
    }
#hbutton5 
    { 
        background-color: #0000FF; 
        margin-left: 184px;
    }
#hbutton6 
    { 
        background-color: #B404AE; 
        margin-left: 334px;
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* ~~~this changes the colour of the buttons when hovered over or clicked~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


a.buttonswitch
    {
        background-position: 0 0;
    }

a.buttonswitch:link
    {

        background-position: 0 0;
    }

a.buttonswitch:visited
    {
        background-position: 0 0;
        outline: 0;
    }

a.buttonswitch:hover
    {
        background-position: 0 -38px;
        outline: 0;
    }

a.buttonswitch:active
    {
        background-position: 0 -76px;
        outline: 0;
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~This sets the placement of the 3 elements of the header~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


#medallion1, #medallion2, span.signature
    {
        margin-left: 88px;
        display: block;
        position: fixed;
        top: 5px;
        height: 140px;
        background-repeat: no-repeat;
        border-style: none;
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~info for just the medallions~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#medallion1, #medallion2
    {
        width: 205px;
        background-image: url("Images/medallions.jpg");
        z-index: 2;
    }

#medallion1
    { 
        left: 5px;
    }

#medallion2 
    { 
        right: 5px;
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~this changes the medallion when it's hovered over or clicked~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

a.medallionswitch
    {
        background-position: 0 0;
 
    }

a.medallionswitch:link
    {
        background-position: 0 0;
    }

a.medallionswitch:visited
    {
        background-position: 0 0;
        outline: 0;
    }

a.medallionswitch:hover
    {
        background-position: 0 -140px;
        outline: 0;
    }

a.medallionswitch:active
    {
        background-position: 0 -280px;
        outline: 0;
    }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~info and behaviour for just the signature~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~Note: The LEFT position is set to 50%, and then the margin-left is offset to take into account the size of the sidebar and padding between the medallion and sidebar. The offset is negative half the size of the signature (-320/2 = -160px) plus half the size of the sidebar (83/2 = 41.5px) plus half the size of the padding between the medallion and the sidebar (5/2 = 2.5px). These add to -160 + 41.5 + 2.5 = -116px = margin-left setting. ~~~ */

span.signature
    {
        background-image: url("Images/signature.jpg");
        left: 50%;
        margin-left: -116px; 
        width: 320px; 
        background-position: 0px center;
        z-index: 3;
    }

span.signature:active
    {
        outline: 0;
    }





/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~Blogger-like settings~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


h1.blog-title
{
    font: normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    color: #3759c7;
    font-size: 200%;
}

h2.description
{
    font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    color: #3759c7;
    font-size: 130%;
}

h3.post-title 
{
    margin: 0;
    font-size: 130%
    font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}

.post-body 
{
    font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    line-height: 1.4;
    font-size: 100%;
    position: relative;
}

.post-date 
{
    font: normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    font-size: 100%;
    position: relative;
}