/*-------------------------------------------*/
/* page layout                               */
/*-------------------------------------------*/

body {
    background: #222 url(img/background.png) repeat-y top center;
    color: #ddd;
    font-family: sans-serif;
    letter-spacing: 1px;
    line-height: 1.20; /* muliplier works better than percentage */
    margin: 0;
}

#content {
    width: 800px;
    margin: auto;
    padding: 0 0 20px 0;
}

/*-------------------------------------------*/
/* html styling                              */
/*-------------------------------------------*/

a:link    { color: #cc9; text-decoration: none; }
a:visited { color: #cc9; text-decoration: none; }
a:hover   { color: #ff9; text-decoration: underline; }

hr {
    height: 0px;
    border: 0px;
    border-top: 1px solid #555;
    clear: both;
}

/*-------------------------------------------*/
/* custom elements                           */
/*-------------------------------------------*/

/* tilted images, front page                 */
/*-------------------------------------------*/

.tilt-left, .tilt-left-link {
    position: relative;
    width: 280px; height: 300px;
    float: left;
}
.tilt-left-link:hover { background: url(img/tilt-left-glow.png) -60px -9px; }
.tilt-left-link a {
    position: absolute;
    width: inherit; height: inherit; 
    display: block;
    /* hide text */
    text-indent: -100em;
    overflow: hidden;
}

.tilt-right, .tilt-right-link {
    position: relative;
    width: 280px; height: 300px;
    float: right;
}
.tilt-right-link:hover { background: url(img/tilt-right-glow.png) 12px -9px; }
.tilt-right-link a {
    position: absolute;
    width: inherit; height: inherit; 
    display: block;
    /* hide text */
    text-indent: -100em;
    overflow: hidden;
}

.tilt-left-img {
    position: absolute;
    top: -10px; left: -60px;
    width: 328px; height: 351px;
    z-index: -1;
}
.tilt-right-img {
    position: absolute;
    top: -10px; right: -60px;
    width: 328px; height: 351px;
    z-index: -1;
}

/* thumbnails                                */
/*-------------------------------------------*/

.thumb-set {
    padding: 10px;
    zoom: 1; /* clear children hack For IE 6/7 (trigger hasLayout) */
}
/*clear children hack */
.thumb-set:before, .thumb-set:after {
    content: "";
    display: table;
}
.thumb-set:after {
    clear: both;
}

.thumb-wrap {
    width: 128px; height: 128px;
    float: left;
    margin-right: 10px;
    position: relative;
}
.thumb-wrap a {
    display: block;
    width: 128px; height: 128px;
    background: url(img/img128-frame-sprite.png) -128px 0;
    position: absolute;
    top: 0; left: 0;
}
.thumb-wrap a:hover { background-position: 0 0; }

.thumb-blurb a {
    display: block;
    width: 188px; height: 70px;
    background: url(img/rarrow-small.png) 0 0;
    /* hide text */
    text-indent: -100em;
    overflow: hidden;
}
.thumb-blurb a:hover { background-position: 0 -70px; }

/* misc                                      */
/*-------------------------------------------*/

.fp-blurb { padding-top: 20px; }

.fp-blurb h1 {
    font-size: 190%; /* for mobile safari, "reupholstery" */
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    position: relative;
    left: -5px;
    z-index: -1;
}
.fp-blurb p {
    margin: auto; padding: 0;
    width: 240px; /* guessed this number */
}
.fp-blurb a {
    display: block;
    background: url(img/rarrow.png) 0 0;
    width: 213px; height: 84px;
    margin: 10px 0 0 296px;
    /* hide text */
    text-indent: -100em;
    overflow: hidden;
}
.fp-blurb a:hover { background-position: 0 -84px; }

.big-bullet { margin: 0 0 20px 0; }
.big-bullet h2 { color: #99c; margin: 20px 0 5px 0; }

#logo {
    width: 789px; height: 65px;
    margin: 10px auto 10px auto;
    display: block;
    border: 0;
}

#tagline {
    font-style: italic;
    margin: 10px auto 15px auto;
}

.contact {
    background: url(img/contact-box.png) 0 0;
    text-align: center;
    width: 420px; height: 60px;
    line-height: 140%;
    padding-top: 12px;
    margin: 25px auto; /* default to the bottom of page usage */
}

.contact table {
    border-collapse: collapse;
    margin: auto;
}

.quote {
    color: #99c;
    font-style: italic;
    text-align: center;
    height: 50px;
}

.navbar {
    background: url(img/nav-box.png) 0 0;
    width: 780px; height: 24px;
    padding: 6px 0 0 0;
    margin: 0 auto 20px auto;
    list-style: none;
} 
.navbar li {
    float: left;
    text-align: center;
    width: 154px; /* when there were five items */
    /* width: 192px; /* when there were four items */
    border-left: 1px solid #444
}

.green {
    background-color: #222;
    padding-top: 1px;
    border-radius: 5px;
}
.green a:link    { color: #6c6; text-decoration: none; }
.green a:visited { color: #6c6; text-decoration: none; }
.green a:hover   { color: #6f6; text-decoration: underline; }

.page-header {
    margin: 25px 10px 15px 10px;
}
.page-header h1 {
    font-size: 320%;
    margin: -10px 0 0 0;
}
.page-header h2  {
    font-size: 160%;
    margin: -10px 0 0 0;
}

.bigpic-wrap {
    position: relative;
    border: 2px solid black;
    margin: 5px auto 30px;
}
.bigpic-tl, .bigpic-tr, .bigpic-bl, .bigpic-br {
    position: absolute;
    background: url(img/corners.png) 0 0;
    width: 10px; height: 10px;
}
.bigpic-tl {
    top: -2px; left: -2px;
}
.bigpic-tr {
    top: -2px; right: -2px;
    background-position: -10px 0;
}
.bigpic-bl {
    bottom: -2px; left: -2px;
    background-position: 0 -10px;
}
.bigpic-br {
    bottom: -2px; right: -2px;
    background-position: -10px -10px;
}

#scrolldown {
    background: url(img/scrolldown-2.png) 0 0;
    width: 455px; height: 90px;
    position: fixed;
    bottom: -90px;
    left: 50%;
    margin-left: -240px;
    z-index: 2;
}

.newbigpic {
    border: 2px solid black;
    border-radius: 10px;
}
.newthumb {
    border: 1px solid black;
    margin: 1px;
    border-radius: 5px;
}
.newthumb:hover {
    border: 2px solid #cc9;
    margin: 0;
}
a:link    { color: #cc9; text-decoration: none; }
a:visited { color: #cc9; text-decoration: none; }
a:hover   { color: #ff9; text-decoration: underline; }

/*-------------------------------------------*/
/* structural tools                          */
/*-------------------------------------------*/
.floatl { float: left;  }
.floatr { float: right; }
.clearl { clear: left;  }
.clearr { clear: right; }
.clearb { clear: both;  }