/***************************************
 ************** Main styling **************
 ***************************************/

body {
    background: #3f3f3f url(images/layout/bg.jpg) top left repeat-x;
    margin: 0;
    padding: 0;
    text-align: center;
    font: 8pt/11pt Arial, Helvetica, sans-serif;
    color: #C7C7C7;
}

div#thegame {
    width: 618px;
    margin: 0 auto;
}

div#cachivaches {
    width: 618px;
    margin: 0 auto;
    text-align: justify;
}

a img {
    border: 0 none;
}

h3 {
    color: #fff;
    font-size: 11pt;
    padding: 0;
    margin: 0;
}
h4 {
    color: #ddd;
    font-size: 9pt;
    padding: 0;
    margin: 0 0 10px 0;
    font-weight: normal;
    font-size: 10pt;
}

p {
    padding: 0;
    margin: 6px 0;
}

hr { display: none; }

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li {
    display: inline;
    padding: 0;
    margin: 0;
}

dl {
    margin: 0 auto;
}
dt {
    font-weight: bold;
    float: left;
    width: 303px;
    text-align: right;
    margin: 3px 0;
}

dd {
    float: left;
    width: 304px;
    padding: 0;
    margin: 3px 0 3px 10px;
}

div#cachivaches a:link {
    text-decoration: none;
    color: #7D00A8;
}

div#cachivaches a:visited {
    text-decoration: none;
    color: #64008B;
}

div#cachivaches a:hover {
    text-decoration: none;
    color: #9324BD;
}

/***************************************
 ************* Header styling *************
 ***************************************/
h1 {
    margin: 0; padding: 0;
}

div#soccer {
    width: 618px;
    height: 225px;
    background: url(images/layout/header_bg.jpg) 0 0 no-repeat;
    text-align: left;
}

div#soccer h3 {
    display: none;
}

div#soccer a {
    position: relative;
    text-decoration: none;
    display: block;
    font-size: 1pt;
}

div#soccer a i { visibility: hidden;}

a#kano {
    top: 170px;
    left: 267px;
    width: 86px;
    height: 18px;
}
a#boring {
    top: 166px;
    left: 175px;
    width: 62px;
    height: 17px;
    background: url(images/layout/about_me.jpg) 0 0 no-repeat;
}
a#goodstuff {
    top: 149px;
    left: 386px;
    width: 53px;
    height: 19px;
    background: url(images/layout/portfolio.jpg) 0 0 no-repeat;
}

a#boring:hover { background: url(images/layout/about_me.jpg) 0 -17px no-repeat; }
a#goodstuff:hover { background: url(images/layout/portfolio.jpg) 0 -19px no-repeat; }

/***************************************
 ************** Footer styling *************
 ***************************************/
p#copyright {display: none;}
div#shoes {
    width: 618px;
    height: 134px;
    background: url(images/layout/footer_bg.jpg) 0 0 no-repeat;
    text-align: left;
}

div#shoes h3 {
    display: none;
}

div#shoes a {
    position: relative;
    text-decoration: none;
    display: block;
    font-size: 1pt;
}

div#shoes a i { visibility: hidden; }

a#henrybishop {
    top: 26px;
    left: 144px;
    width: 39px;
    height: 16px;
    background: url(images/layout/home.jpg) 0 0 no-repeat;
}
a#interesting {
    top: 10px;
    left: 204px;
    width: 55px;
    height: 19px;
    background: url(images/layout/portfolio_bottom.jpg) 0 0 no-repeat;
}
a#zing {
    top: -9px;
    left: 280px;
    width: 63px;
    height: 16px;
    background: url(images/layout/about_me_bottom.jpg) 0 0 no-repeat;
}
a#felines {
    top: -25px;
    left: 362px;
    width: 28px;
    height: 16px;
    background: url(images/layout/cats.jpg) 0 0 no-repeat;
}
a#fourchan {
    top: -41px;
    left: 409px;
    width: 62px;
    height: 19px;
    background: url(images/layout/funnypics.jpg) 0 0 no-repeat;
}

/* IE hax */
* html a#interesting { top: 9px; }
* html a#zing { top: -10px; }
* html a#felines { top: -26px; }
* html a#fourchan { top: -42px; }

a#henrybishop:hover { background: url(images/layout/home.jpg) 0 -16px no-repeat; }
a#interesting:hover { background: url(images/layout/portfolio_bottom.jpg) 0 -19px no-repeat; }
a#zing:hover { background: url(images/layout/about_me_bottom.jpg) 0 -16px no-repeat; }
a#felines:hover { background: url(images/layout/cats.jpg) 0 -16px no-repeat; }
a#fourchan:hover { background: url(images/layout/funnypics.jpg) 0 -19px no-repeat; }

/***************************************
 ************* Portfolio styling ************
 ***************************************/
a#thefuture i,
a#oldschool i,
a#zomgpix i,
a#ihateie i,
a#identity i {
    visibility: hidden;
}
 
a#thefuture {
    margin-left: 198px;
    text-decoration: none;
    display: block;
    font-size: 1pt;
    width: 270px;
    height: 112px;
    background: url(images/layout/digital_art.jpg) 0 0 no-repeat;
}
a#oldschool {
    margin-left: 198px;
    text-decoration: none;
    display: block;
    font-size: 1pt;
    width: 270px;
    height: 116px;
    background: url(images/layout/traditional_art.jpg) 0 0 no-repeat;
}
a#zomgpix {
    margin-left: 198px;
    text-decoration: none;
    display: block;
    font-size: 1pt;
    width: 270px;
    height: 116px;
    background: url(images/layout/photography.jpg) 0 0 no-repeat;
}
a#ihateie {
    margin-left: 198px;
    text-decoration: none;
    display: block;
    font-size: 1pt;
    width: 270px;
    height: 112px;
    background: url(images/layout/layouts.jpg) 0 0 no-repeat;
}
a#identity {
    margin-left: 198px;
    text-decoration: none;
    display: block;
    font-size: 1pt;
    width: 270px;
    height: 112px;
    background: url(images/layout/logos.jpg) 0 0 no-repeat;
}

a#thefuture:hover { background: url(images/layout/digital_art.jpg) 0 -112px no-repeat; }
a#oldschool:hover { background: url(images/layout/traditional_art.jpg) 0 -116px no-repeat; }
a#zomgpix:hover { background: url(images/layout/photography.jpg) 0 -116px no-repeat; }
a#ihateie:hover { background: url(images/layout/layouts.jpg) 0 -112px no-repeat; }
a#identity:hover { background: url(images/layout/logos.jpg) 0 -112px no-repeat; }

/**************************************
 ************* Header styling ************
 **************************************/
div#cachivaches h2 {
    padding: 0;
    margin: 0 0 10px ;
    font-size: 1pt;
    margin: 0 auto;
}

div#cachivaches h2 i {
    visibility: hidden;
}

h2#headerhome {
    width: 88px;
    height: 38px;
    background: url(images/headers/home.jpg) 0 0 no-repeat;
}
h2#headeraboutme {
    width: 121px;
    height: 38px;
    background: url(images/headers/about_me.jpg) 0 0 no-repeat;
}
h2#headerlogos {
    width: 84px;
    height: 38px;
    background: url(images/headers/logos.jpg) 0 0 no-repeat;
}
h2#headerlayouts {
    width: 100px;
    height: 38px;
    background: url(images/headers/layouts.jpg) 0 0 no-repeat;
}
h2#headertraditional {
    width: 156px;
    height: 38px;
    background: url(images/headers/traditional_art.jpg) 0 0 no-repeat;
}
h2#headerphotography {
    width: 149px;
    height: 38px;
    background: url(images/headers/photography.jpg) 0 0 no-repeat;
}
h2#headerdigital {
    width: 120px;
    height: 38px;
    background: url(images/headers/digital_art.jpg) 0 0 no-repeat;
}
/**************************************
 ************* Subnav styling ************
 **************************************/
ul#subnav {
    width: 68px;
    height: 20px;
    margin: 0 auto;
}
ul#subnav li {
    display: block;
    float: left;
}
ul#subnav li a {
    text-decoration: none;
    display: block;
    float: left;
    font-size: 1pt;
}
ul#subnav li i {
    visibility: hidden;
}

/* keep centering junk */
li#inactive div { height: 20px; width: 23px; }

li#prev a {
    width: 24px;
    height: 20px;
    background: url(images/layout/previous_arrow.jpg) 0 0 no-repeat;
}
li#up a {
    width: 21px;
    height: 20px;
    background: url(images/layout/up_arrow.jpg) 0 0 no-repeat;
}
li#next a {
    width: 23px;
    height: 20px;
    background: url(images/layout/next_arrow.jpg) 0 0 no-repeat;
}

li#prev a:hover { background: url(images/layout/previous_arrow.jpg) 0 -20px no-repeat; }
li#up a:hover { background: url(images/layout/up_arrow.jpg) 0 -20px no-repeat; }
li#next a:hover { background: url(images/layout/next_arrow.jpg) 0 -20px no-repeat; }

img.picture { display: block; margin: 0 auto; }
p.descrip { text-align: justify; width: 350px; display: block; margin: 0 auto;}