@font-face {
    font-family: 'regular';
    src: url(../fonts/mydrain.ttf);
}

@font-face {
    font-family: 'heading';
    src: url(../fonts/James_Fajardo.ttf);
}




body
{
    background: url(../images/layout/woodBG.jpg) repeat fixed 535px;
    font: normal 13px regular, helvetica, arial, sans-serif;
    color: #222;
    letter-spacing: 1px;
    line-height: 25px;
    word-spacing: 2.5px;
    padding-top: 25px;
}

#pageContent
{
    text-shadow: 0px 0px 5px white;
}

#pageContent .intro {color: black;}

#pageContent p { padding-bottom: 1em;}

a, #pageContent a
{
    color: #222;
    text-decoration: none;
    text-shadow: 0px 0px 0px;
    outline: none;
}

ul, ol { list-style-position: inside; }

#pageContent a:hover, a:hover { color: white; text-shadow: 0px 0px 4px white;}
a:active { color: white; }

#mainContent
{
    background:url("../images/layout/contentBG.png") repeat scroll 0 0 transparent;
    border-left:1px double black;
    border-right:1px double black;
    clear:both;
    margin:auto 94px;
    max-width:1400px;
    min-height:500px;
    min-width:600px;
    padding:70px 2% 40px;
    position:relative;
}

aside#openSource
{
    background: url(../images/layout/topGradient.png) repeat-x;
    height: 186px;
    text-indent: 20px;
    padding: 4px 0px 10px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    color: #ddd;
    font-size: 11px;
    text-shadow: 0 0 5px #555;
}

h2, h3
{
    font-family: heading, "Arial Narrow",  helvetica, sans-serif;
    font-weight: bold;
    line-height:normal;
    text-shadow: 0px 1px 0px #eee;
    padding-bottom: 8px;
}
.contentPeice .first { text-shadow: 0px -1px 0px white; }
h1
{
    display: none;
}
h2 { font-size: 400%; }
h3 { font-size: 250%; }
h4, h5, h6 { font-size: 120%; font-weight: bold;  color: #555; }

header
{   
    background:url("../images/layout/blackNoiseTrans.png") repeat scroll 0 0 transparent;
    border-color:black black #279800;
    border-style:solid;
    border-width:1px 1px 0;
    height:97px;
    margin:auto 94px;
    max-width:1400px;
    min-width:600px;
    overflow:hidden;
    padding-left:2%;
    padding-right:2%;
    position:relative;
    z-index:1000;
    border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;
}

header section
{
    display: block;
    width: 80%;
    margin: auto;
}

header nav
{
    position:relative;
    text-align:center;
    top:31px;
    z-index:2;
    font-family: heading, "Arial Narrow", helvetica, arial, sans-serif;
    font-weight: bold;
    letter-spacing: -1px;
    padding:10px 0 6px 0;
    text-align:center;
}

header nav a
{
    text-transform: uppercase;
    font-size: 250%;
    margin: 0px 20px;
    color: #555;
    text-shadow: 0px 1px 0px #eee;
}
header nav a:hover { color: white; }
header nav a.selected,
header nav a.selected:hover { color: #999; }
header nav a.selected
{
    text-shadow: 0px 0px 5px white;
}

footer
{
    color: white;
    background: black url(../images/layout/blackNoise.gif);
    padding: 10px 0px 30px 0px;
    position:relative;
z-index:200;
}

footer ul { list-style-position:inside; list-style-type: disc; }

footer ul ul { padding-left: 20px;}

footer section section
{
    width: 250px;
    display: inline-block;
    padding: 0px 10px;
    vertical-align: top;
    font-size: 85%;
}
footer section section.middle
{
    width: 295px;
}
footer section section.last
{
    width: 200px;
    padding-left: 60px;
}
footer section#inner
{
    width: 900px;
    margin: auto;
    display: block;
    padding: 0px 0px 0px 50px;
}

footer a { color: white; text-shadow: none; text-decoration: none; }

.contentPeice
{
    min-height:300px;
    margin-bottom: 30px;
    clear: both;
    overflow:hidden;
    padding: 30px 2% 50px 2%;
    background: white;
    box-shadow: 5px 5px 5px #222;
    -webkit-box-shadow: 5px 5px 5px #222;
    -moz-box-shadow: 5px 5px 5px #222;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    position: relative;
    z-index: 2;
    background: transparent url(../images/layout/greyGradientNoise.png) repeat-x;
    border: 1px solid #888;
}

.contentPeice h3 { display: block; clear: both; }


#resume h3 { clear: none !important; }

#resume img {
    margin-right: 30px;
    float: left;
    box-shadow: 5px 5px 5px #222;
    -webkit-box-shadow: 5px 5px 5px #222;
    -moz-box-shadow: 5px 5px 5px #222;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}



/* Javascript Image Boxes */
/* ++++++++++++++++++++++ */

.contentPeice.shortened p { display: block; }

.imageBoxes
{
    list-style: none;
    padding: 10px;
    float: right;
    position: relative;
}
.imageBoxes li.selected
{
    z-index: 1;
}

.imageBoxes li img {
    border: 2px solid #555;
    box-shadow: 0px 0px 5px black;
    -webkit-box-shadow: 0px 0px 5px black;
    -moz-box-shadow: 0px 0px 5px black;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.contentPeice .imageBoxes li.selected img { border: 2px solid white; }



.imageBoxes li.big
{
    position: absolute;
    top: 10px; left: 10px;
}
/* End JS Image Boxes     */
/* ++++++++++++++++++++++ */

#overLeaves, #underLeaves
{
    background: url(../images/layout/leaves.png) no-repeat;
    height: 420px;
    width: 222px;
    position: fixed;
    top: 1px;
    left: 1px;
}

#overLeaves {
    background-position:-225px 0;
    left:94px;
    top:-24px;
    width:140px;
    z-index:100;
}

#underLeaves {
    left:4px;
    top:-23px;
    z-index:-1;
}

.pageIntro { color: black; font-weight: bold; padding-bottom: 30px; position: relative; z-index: 50; text-shadow:0 0 20px white; }