/* ============ Main styling =========== */

body 
{
    margin:2px;
    background:url(images/graphics/jungle-background.jpg) #000000 top center no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFFFFF;
}

h1 
{
    background:url(images/graphics/ul-paw.png) no-repeat left;
    padding-left:25px;
    font-size:18px;
    font-family:"Arial Narrow", Arial, Helvetica, sans-serif;
    color:#336600;
    display:inline;
}

h2 {
    font-size:12px;
    font-family:"Arial Narrow", Arial, Helvetica, sans-serif;
    display:inline;
    color:#606060;
}

textarea 
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    width:97%;
}

a:link, a:active 
{
    color:#CCFF99;
}
a:hover, a:visited 
{
    color:#99CC00;
}


/* ============ General page styling =========== */

#outer 
{
    position:relative;
    width:850px;
    margin:auto;
}

#header 
{
    position:absolute;
    top:0;
    left:0;
    width:850px;
    height:470px;
}

#mainbg 
{
    position:relative;
    top:470px;
    left:0;
    width:841px;
    background:url(images/graphics/main-bg.gif) #333333 repeat-x top;
}

#maincontent 
{
    float:right;
    width:540px;
    padding: 30px 20px 40px 20px;
}

#leftcontent
{
    text-align:center;
    margin-left:9px;
    float:left;
    
}

#qcbox
{
    text-align:left;
    padding:10px;
    width:230px;
    background:#000000;
}

#mainfooter
{
    clear:both;
    height:40px;
    width:850px;
    padding-top:17px;
    text-align:center;
    background: url(images/graphics/footer.jpg) #000000 no-repeat top;
}

#footer 
{
    color:#CCCCCC;
    font-size:10px;
    width:750px;
    height:125px;
    padding:15px 50px 5px 50px;
    text-align:center;
    background:url(images/graphics/bottom.jpg) #000000 no-repeat top center;
}

/* ============ Individual page styling =========== */

.portfolio
{
    text-align:center;
}

.portfolio img {
    padding:3px;
    border:thick;
    border-color:#444444;
    border-style:solid;
}

.portfolio img:hover {
    padding:3px;
    border:thick;
    border-color:#666666;
    border-style:solid;
}

#contact {
    border:#333333 solid 1px;
    width:auto;
    padding:20px;
    text-align:right;
    background:url(images/contact-a-web-designer.jpg) #FFFFFF no-repeat left bottom;
    color:#000000;
}

/* ============ General styling =========== */

.small 
{
    color:#999999;
    font-size:10px;
}

.center 
{
    text-align:center;
}

.leftarticle 
{
    clear:both;
    font-size:10px;
    color:#DEDEDE;
    width:200px;
    float:left;
    background-color:#666666;
    padding:5px;
    margin: 0 10px 10px 0;
}

.rightarticle 
{
    float:right;
    background-color:#666666;
    padding:5px;
    margin:5px;
}

.lfloat 
{
    border:none 0px;
    float:left;
    padding:3px;
}

.img
{
    border:0px;
    float:left;
    padding:5px;
    margin:0 10px 10px 0;
    background-color:#666666;
}

.center {
    margin:0 auto 0 auto;
    text-align:center;
}

/* ============ Misc styling =========== */

.lbltick
{
    background: url(images/graphics/green-tick.png) no-repeat left top;
    background-color:#FFFFCC;
    padding: 7px 7px 7px 30px;
    margin:2px;
    border: dotted #999999 2px;
    color:#333333;
    width:100%;
}

.lblwarn
{
    background: url(images/graphics/yellow-warning.png) no-repeat left top;
    background-color:#FFFFCC;
    padding: 7px 7px 7px 30px;
    margin:2px;
    border: dotted #999999 2px;
    color:#333333;
    width:100%;
}

.lblred 
{
    color:Red;
}

#addthis, #addthisbackground {
position:fixed;
position: absolute;
right:10px;
top:10px;
width:155px;
height:16px;
display:block;
padding:5px;
z-index:3;
}