/*

This is the style sheet for scratchpad.
It's free to use, just like the site template.
Mod it, copy it, build on it.
You're the man now, dog.

*/


body {
    background: url(bg.png);
    background-repeat: repeat-x;
    background-attachment: fixed;
  }

/*

The site's main mojo.
This is the big box everything goes in.

*/


#bigbox {
    width: 800px;
    background: #BABABA;
    border: 1px solid black;
    margin: 20px auto auto auto;
  }

/*

This is the blue box at the top of the page that
you see the words "scratchpad" in.

*/


#head {
    height:100px;
    background:url(topgrad.png);
  }

/*

I put the words "scratchpad" in a <p> tag so I
could give them styles without messing with other
things I (or you) may decide to put up there.

*/


#head  p {
    font-family: Trebuchet MS, Verdana, helvetica, arial, sans-serif;
    font-size: 150%;
    color: #fff;
    text-align: left;
    margin-left: 20px;
    margin-top: 0px;
    padding-top: 1em;
  }

/*

The second word is bigger than the first because
of this code.  Look at the XHTML source and you'll
understand.

*/


#head strong {
    font-size:150%;
  }

/*

This is the box that the headlines, their sub-headlines
and the paragraphs go in.

*/ 


#contentbox {
    width: 700px;
    padding: 35px 50px 35px 50px;
    line-height: 1.1em;
  }

/*

The paragraph text.

*/



#contentbox p {
    text-align: justify;
    font-size: 90%;
    font-family:Verdana, times new roman, helvetica, arial, sans-serif;
  }

/*

These are the big and small headlines.

*/



#contentbox h1 {
    font-family: helvetica, Verdana, sans-serif;
    font-size: 180%;
  }


#contentbox h2 {
    font-family:Trebuchet MS, helvetica, helvetica, arial, sans-serif;
    font-size:125%;
    color:#0F66C0;
  }

/*

This makes links change color and become
underlined when moused over.

*/



#contentbox a {
    color:#3879ff;
    text-decoration:none;
  }


#contentbox a:hover {
    color:#33cc33;
    text-decoration:underline;
  }

/*

This is stuff for the fine print
at the bottom of the page.

*/


#fineprint {
    width:400px;
    margin: 20px auto 40px auto;
    text-align:center;
    font-family: sans-serif;
    color:#383838;
    padding-top:5px;
    text-decoration:none;
    font-size:70%;
    border-top:1px dotted #383838;
  }

/*

I had this in place so that my "Made on a Mac"
button would be centered next to the footer
text, but OSWD doesn't allow buttons.  I left
this code here in case you decide to add buttons
of your own.

*/


#fineprint img {
    margin: 0px 0px -10px 0px;
  }


#fineprint a {
    text-decoration:none;
    color:#383838;
  }


#fineprint a:hover {
    text-decoration:underline;
  }

/*

Stuff for the top navbar

This makes the unordered list appear like a
menu bar, and not as a real list.

*/

/* original */
/*
#nav ul
{
list-style: none;
margin: 40px auto auto 40px;
padding-bottom: 40px;
}
*/

/* testing */
#nav ul {

    text-transform : uppercase;
    letter-spacing : 2px;
    margin-bottom : auto;
    margin-left : 20px;
    margin-right : auto;
    margin-top : 40px;
    list-style: none;
    margin: 40px auto auto 40px;
    padding-bottom : 40px;
}


#nav li {
    font-family: arial, sans-serif;
    float: left;
    padding-top: 10px;
    text-align: center;
}

/*

If you don't like the "tab effect" I have on the
navbar buttons, then remove all the "border" atribs.
from the all the nav elements bellow.

*/
#nav li a
{
    font-family: Trebuchet MS, Verdana, helvetica, arial, sans-serif;
    font-size: 100%;
    height: 25px;
    line-height: 1.5em;
    border-bottom: 1px solid #3879ff;
    border-left: 1px solid #bababa;
    border-right: 1px solid #bababa;
    border-top: 1px solid #bababa;
    width: 7em;
    display: block;
    color: #383838;
    text-decoration: none;
    text-align: center;
}


#nav li a:hover {
    color: #3879ff;
    text-transform : lowercase;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #3879ff;
    /* outline-style: groove; */
}


#nav li a:active {
    background:#395EA8;
    color:#fff;
  }

a.thispage {
    background: #395ea8;
    cursor: pointer;
}

/* 

This makes the navbar work correctly on old
versions of IE on the MacOS 9.  I only put this
here because there are people still using OS9
that can't get FireFox, Camino, or any other
modern browser.

 */

#nav li a {
    float: none;
  }