/* -----------------------------------*/
/* ---------->>> GLOBAL <<<-----------*/
/* -----------------------------------*/
body, html {background: #fff url('../img/colorBar.gif') repeat-x 1014px 258px; height: 100%;width: 100%;}
#container {height: 100%; width: 100%; position: relative;}
#wrapper {height: 820px; width: 1018px; position: absolute; top: 0; left: 0; background: url(../img/contentBG.gif) no-repeat top right;}
#header {height: 377px; width: 1018px; position: relative; background: url(../img/colorBar.gif) no-repeat bottom left;}
#logo {height: 232px; width: 409px; background: url(../img/logo.png) no-repeat; position: absolute; margin-top: 148px; right: 1px; z-index: 300;}
a.logoLink {height: 232px; width: 409px; display: block; text-indent: -9999px;}
#bottom {height: 430px; width: 1018px; position: relative; margin: 0 0 20px 0; background: #fff; }
.itemWrapper {height: 409px; width: 550px; position: absolute; margin: 20px 0 20px 20px;}
div.sidebar {height: 409px; width: 332px; position: absolute; margin: 20px 0 0 640px;}
div.contactSidebar {height: 409px; width: 352px; position:absolute; margin: 20px 0 0 636px;}
#contactInfo {position: absolute; top: 150px; left: 10px;}
.clear {clear: both;}
a {text-decoration: none;}
a:hover {text-decoration: underline}
/* -----------------------------------*/
/* -------->>> NAVIGATION <<<---------*/
/* -----------------------------------*/
#navigation {height: 28px; width: 591px; position: absolute; bottom: 15px; left: 17px;}
ul#mainNav {list-style: none;}
ul#mainNav li {float: left; height: 28px; overflow: hidden;}
ul#mainNav li a {height: 28px; display: block; text-indent: -9999px; background-image: url('../img/navigationBG.png'); background-repeat: no-repeat; overflow: hidden;}
li#navPortfolio a {width: 154px; background-position: 0 0;}
li#navPortfolio a:hover {background-position: 0 -28px;}
li#navExperience a {width: 154px; background-position: -158px 0}
li#navExperience a:hover {background-position: -158px -28px;}
li#navContact a {width: 124px; background-position: -315px 0;}
li#navContact a:hover {background-position: -315px -28px;}
li#navBlog a {width: 85px; background-position: -440px 0;}
li#navBlog a:hover {background-position: -440px -28px;}
li#navDeal a {width: 55px; background-position: -534px 0;}
li#navDeal a:hover {background-position: -534px -28px;}
/* -----------------------------------*/
/* -------->>> PORTFOLIO <<<----------*/
/* -----------------------------------*/
.portfolioItem {width: 560px; height: 400px;}
.portfolioItem a {text-decoration: none;}
.portfolioItem a:hover {text-decoration: underline;}
a.portfolioLink {font-family: "Arial", "Helvetica", sans-serif; color: #999; margin-bottom: 3px; display: block}
a.resumeLink {font-family: "Arial", "Helvetica", sans-serif; color: #70B5C0; margin-bottom: 3px; display: block}
div.portfolioImage {margin-top: 10px; width: 560px; height: 400px;}
ul#thumbs {list-style: none; position: relative; margin: 0 auto;}
ul#thumbs li {width: 70px; height: 70px; float: left; margin: 6px; overflow: hidden; }
ul#thumbs li a {width: 68px; height: 68px; display: block; border: 1px solid #70b5c0; background-image: url('../img/thumbsprite.jpg'); text-indent: -9999px; overflow: hidden;}
ul#thumbs li a:hover {border: 1px solid #F1C722;}
#load {display: none; position: absolute; top: 200px; left: 250px; background: url('../img/ajax-loader.gif') no-repeat; width: 100px; height: 100px; text-indent: -9999em;}

#intetechLoad a {background-position: -68px 0;}
#theHavenLoad a {background-position: 0 0;}
#wacofootLoad {background-position: -136px 0;}
#wholetreeLoad {background-position: -204px 0;}
#georgeLoad {background-position: 0 -68px;}
#clothedLoad {background-position: -68px -68px;}
#capturedLoad {background-position: -136px -68px;}
#petersLoad {background-position: -204px -68px;}
#antiochLoad {background-position: 0 -136px;}
#lloydLoad {background-position: -68px -136px;}
#joblinkLoad {background-position: -136px -136px;}
#blueshoesLoad {background-position: -204px -136px;}
#legacyLoad {background-position: 0 -204px;}
#hootLoad {background-position: -68px -204px;}
#centralLoad {background-position: -136px -204px;}
#ameliaLoad {background-position: -204px -204px;}
#valerieLoad {background-position: 0 -272px;}
#winkLoad {background-position: -68px -272px;}
#anniesLoad {background-position: -136px -272px;}
#bassLoad {background-position: -204px -272px;}


#theHavenImg {background: url(../img/thehaven.png) no-repeat;}
#intetechImg {background: url(../img/intetech.png) no-repeat;}
#wacofootImg {background: url(../img/wacofoot.png) no-repeat;}
#wholetreeImg {background: url(../img/wholetree.png) no-repeat;}
#georgeImg {background: url(../img/george.png) no-repeat; margin-top: 10px}
#clothedImg {background: url(../img/clothed.png) no-repeat;}
#capturedImg {background: url(../img/captured.png) no-repeat; margin-top: 40px;}
#petersImg {background: url(../img/peters.png) no-repeat; margin-top: 60px}
#antiochImg {background: url(../img/antioch.png) top right no-repeat;}
#lloydImg {background: url(../img/lloyd.png) no-repeat; margin-top: 40px}
#joblinkImg {background: url(../img/joblink.png) no-repeat;}
#blueshoesImg {background: url(../img/blueshoes.png) no-repeat; margin-top: 50px}
#legacyImg {background: url(../img/legacy.png) no-repeat;}
#hootImg {background: url(../img/hoot.png) no-repeat; margin-top: 40px}
#centralImg {background: url(../img/central.png) no-repeat; margin-top: 40px;}
#ameliaImg {background: url(../img/amelia.png) no-repeat; margin-top: 40px}
#valerieImg {background: url(../img/valerie.png) no-repeat; margin-top: 20px}
#winkImg {background: url(../img/wink.png) no-repeat;}
#anniesImg {background: url(../img/annies.png) no-repeat; margin-top: 20px}
#bassImg {background: url(../img/bass.png) no-repeat; margin-top: 40px}

/* -----------------------------------*/
/* -------->>> TEXT STYLES <<<--------*/
/* -----------------------------------*/
h1 {margin-bottom: 20px;}
h4 {font-family: "Arial", "Helvetica", sans-serif; font-size: 18px; font-style: italic; font-weight: bold; margin-bottom: 20px; color:#70B5C0;}
h5 {font-family: "Arial", "Helvetica", sans-serif; font-size: 20px; color: #228C8A; margin-bottom: 10px; letter-spacing: .2px;}
h5 span {color: #F1C722;}
p {font-family:  geneva, arial, helvetica, sans-serif; line-height: 1.4; margin-bottom: 10px; font-size: 14px;}
p.sub {color: #666;}
p.experience {color: #666; font-size: 16px; margin-top: 10px;}
strong {font-weight: bold;}
p.contactMe {font-size: 16px; color: #007e7e; margin-bottom: 1px;}
p.contactMe span {color: #eebe1d;}
p.contactMe span span {color: #007e7e;}
p.winkText {color: #EEBE1D}


/* -----------------------------------*/
/* -------->>> NAVIGATION <<<---------*/
/* -----------------------------------*/
#tabs {margin: 30px auto 10px auto; position: relative;}
/*#tabs ul {margin: 0 auto; position: relative;}*/
 


 
 
/* -----------------------------------*/
/* ---------->>> FOOTER <<<-----------*/
/* -----------------------------------*/



/* -----------------------------------*/
/* ------->>> CONTACT FORM <<<--------*/
/* -----------------------------------*/
.message {color:#228C8A; display:none; width: 282px; float: right; clear: right; padding:5px; text-align: left; font-size: 16px;}
.contact {text-align:left; color: #8C720A;}
.contact ul {float: left; list-style-type:none; width:400px; margin-top: 10px}
.contact li {list-style-type:none; height: 20px; margin-bottom: 15px; line-height: 20px;}
.contact li.special {display:none;}
.contact input {width:282px; height: 20px; float: right; background: #ccc; border: none; font-size: 16px; color: #228C8A; font-family: Arial, Helvetica, sans-serif; padding: 3px;}
.contact textarea {width:282px; float: right; background: #ccc; border: none; font-size: 16px; color: #fff; font-family: Arial, Helvetica, sans-serif; padding: 3px;}
.contact label {font-family:  geneva, arial, helvetica, sans-serif; float: left;display: block; font-size: 18px; letter-spacing: .1px;}
li.submitbutton {padding-top: 8px; clear: both;}
li.submitbutton input {width: 60px; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif;}
#formWrapper {width: 400px; position: relative; font-size: 12px; color: #ccc; line-height: 20px; }
#contactForm {width: 400px; position: relative; margin: 1px auto;}
#contactForm span {color: #228C8A}