@charset "utf-8";
/* CSS Document */

body {
background-image:url(images/content_bkgd.jpg);
background-repeat:repeat-y;
background-position: center;
background-color: #000000;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
}
h1{
color: #FFFFFF;
font-size: 24px;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
h3{
color: #FFFFFF;
font-size: 24px;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
p{
text-align: justify;
}
a:link {
color: #512119;
}
a:visited {
color: #310100;
}
a:hover {
color: #714139;
}
a:active{
color: #c15d36;
}
.clear{
clear: both;
}

/************* Site Structure ***************/

#header_wrapper{
background-image:url(images/background.jpg);
background-position:top center;
background-repeat:no-repeat;
height: 452px;
}
#header{
position:relative;
width: 980px;
margin: 0 auto;
}
#header a img{
border: none;
}
#header_left{
position:absolute;
top: 0px;
left: 0px;
height: 419px;
width: 389px;
background-image: url(images/joe_back.jpg);
background-repeat:no-repeat;
z-index: 3;
}
#header_logo{
position:absolute;
top: 0px;
left: 389px;
height: 284px;
width: 591px;
z-index: 3;
}
#webdesign{
position:absolute;
top: 284px;
left: 389px;
height: 135px;
width: 190px;
z-index: 4;
}
#graphicdesign{
position:absolute;
top: 284px;
left: 586px;
height: 135px;
width: 190px;
z-index: 4;
}
#photography{
position:absolute;
top: 284px;
left: 783px;
height: 135px;
width: 190px;
z-index: 4;
}
#tagline{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 14px;
position:absolute;
top: 22px;
left: 295px;
width: 535px;
height: 52px;
z-index: 5;
color: #50261d;
}
#content{
width: 980px;
margin: 0 auto;
color: #DDDDDD;
}

#footer_wrapper{
background-image:url(images/footer_bkgd.jpg);
background-position: center;
background-repeat:no-repeat;
height: 116px;
}
#footer{
width: 980px;
margin: 0 auto;
text-align:center;
padding-top: 50px;
line-height: 1.5em;
color: #FFFFFF;
font-size: 10px;
}
#footer a{
color: #d2bdae;
font-size: 12px;
}
#footer a:hover{
color: #c17640;
}

/************* INDEX PAGE ***************/

#content_column1{
float: left;
width: 550px;
margin-right: 20px;
}

#content_column2{
float: left;
width: 190px;
padding-top: 10px;
padding-left: 9px;
margin-right: 20px;
border-left: solid 1px #393837;
}
.service_title{
position:relative;
height: 17px;
font-size: 15px;
padding-left: 28px;
padding-bottom: 2px;
border-bottom: 3px double #b15425;
color: #EaA064;
font-weight: bold;
}
.earth_bullet{
position:absolute;
top:0px;
left: 0px;
z-index: 3;
}
.servicelist{
background-color: #171717;
padding: 10px;
border: 3px double #673027;
color: #D5D5D5;
width: 140px;
margin: 5px 0px 5px 20px;
}
#content_column2 ul{
margin: 0px;
padding-left: 20px;
}
#content_column2 ul li{
line-height: 1.5em;
}
#content_column2 ul li ul{
margin: 0px;
padding: 0px 0px 3px 15px;
list-style:circle;
font-size: 11px;
}
#content_column2 ul li ul li{
line-height: 1.2em;
}
#content_column3{
float: right;
width: 190px;
}
#content_column3 a{
display:block;
height: 23px;
padding: 9px 0px 2px 38px;
font-weight:bold;
font-size: 14px;
text-decoration:none;
color: #FFFFFF;
border-bottom: solid 1px #393837;
margin-bottom: 2px;
}
#content_column3 a:hover{
background-color: #FFFFFF;
color: #222222;
background-position: left -34px;
}
#bio a{
background-image:url(images/bio.png);
background-repeat:no-repeat;
background-position: left top;
}
#bio a:hover{
color: #066d9d;
}
#blog{
display:block;
background-image:url(images/blog.png);
background-repeat:no-repeat;
background-position: left top;
height: 23px;
padding: 9px 0px 2px 38px;
font-weight:bold;
font-size: 14px;
color: #BBBBBB;
border-bottom: solid 1px #393837;
margin-bottom: 2px;
}
#blog a:hover{
color: #066d9d;
}
#linkedin a{
background-image:url(images/linkedin.png);
background-repeat:no-repeat;
background-position: left top;
}
#linkedin a:hover{
color: #066d9d;
}
#facebook a{
background-image:url(images/facebook.png);
background-repeat:no-repeat;
background-position: left top;
}
#facebook a:hover{
color: #254272;
}
#myspace a{
background-image:url(images/myspace.png);
background-repeat:no-repeat;
background-position: left top;
}
#myspace a:hover{
color: #0c48a7;
}
#gdgt a{
background-image:url(images/gdgt.png);
background-repeat:no-repeat;
background-position: left top;
}
#gdgt a:hover{
color: #cc0000;
}
#aim {
display:block;
background-image:url(images/aim.png);
background-repeat:no-repeat;
background-position: left top;
height: 23px;
padding: 9px 0px 2px 38px;
font-weight:bold;
font-size: 14px;
color: #BBBBBB;
border-bottom: solid 1px #393837;
margin-bottom: 2px;
}
#contact_form{
background-image:url(images/form_bkgd.jpg);
background-repeat:repeat-y;
color: #000000;
padding: 0px 10px 0px 10px;
}
#contactpage_form{
padding: 5px 10px 10px 10px;
font-size: 16px;
background-color: #171717;
border: 3px double #673027;
}
#contactpage_form td{
vertical-align:top;
padding: 5px;
}
#commentform input, #commentform textarea{
font-family: Calibri, Arial, Helvetica, sans-serif;
background-color: #484745;
border: solid 1px #000000;
color: #FFFFFF;
font-size: 12px;
}

/**** Biography ****/

#misc_column1{
float: left;
width: 770px;
padding-top: 10px;
margin-right: 20px;
}
#favorites li{
margin-bottom: 3px;
}
#favorites li strong{
color: #EaA064;
}
#friend1 a, #friend1 a:hover{
background-image:url(images/friend1.png);
background-repeat:no-repeat;
background-position: left top;
}
#friend2 a, #friend2 a:hover{
background-image:url(images/friend2.png);
background-repeat:no-repeat;
background-position: left top;
}
#friend3 a, #friend3 a:hover{
background-image:url(images/friend3.png);
background-repeat:no-repeat;
background-position: left top;
}
#friend4 a, #friend4 a:hover{
background-image:url(images/friend4.png);
background-repeat:no-repeat;
background-position: left top;
}
#friend5 a, #friend5 a:hover{
background-image:url(images/friend5.png);
background-repeat:no-repeat;
background-position: left top;
}
#friend6 a, #friend6 a:hover{
background-image:url(images/friend6.png);
background-repeat:no-repeat;
background-position: left top;
}
#friend7 a, #friend7 a:hover{
background-image:url(images/friend7.png);
background-repeat:no-repeat;
background-position: left top;
}

/**** Web Design ****/

#web_column1{
float: left;
width: 770px;
padding-top: 10px;
margin-right: 20px;
}

#web_link1 a{
background-image:url(images/web_link1.png);
background-repeat:no-repeat;
background-position: left top;
}
#web_link1 a:hover{
color: #084564;
}
#web_link2 a{
background-image:url(images/web_link2.png);
background-repeat:no-repeat;
background-position: left top;
}
#web_link2 a:hover{
color: #0f3d19;
}
.web_piece_info{
width: 230px;
float: left;
color: #555555;
}
.web_piece_info strong{
display: block;
border-bottom: solid 1px #DDDDDD;
padding-top: 8px;
font-size: 14px;
color: #333333;
}
.web_piece_info ul{
padding: 0px 0px 0px 15px;
margin: 0px;
}
.web_piece_image{
float: right;
width: 500px;
}
.web_concept_info{
width: 300px;
padding-right: 20px;
float: left;
color: #555555;
}
.web_concept_info p{
padding: 0px;
margin: 0px;
}
.web_concept_info ul{
padding: 0px 0px 0px 15px;
margin: 0px;
}
.web_concept_info strong{
display: block;
border-bottom: solid 1px #DDDDDD;
padding-top: 8px;
font-size: 14px;
color: #333333;
}
.web_concept_image{
float: right;
width: 400px;
}

/** NoobSlide **/

#cont{
width:770px;
margin:0 auto;
}
.sample{
height: 435px;
padding:20px;
background-color: #FFFFFF;
background-image: url(images/portfolio_bkgd.jpg);
background-repeat:no-repeat;
color: #333333;
}
.sample h1{
margin: 0px;
padding: 0px;
color: #333333;
text-align: center;
}
.sample h3{
margin: 0px;
padding: 0px;
color: #38130d;
}
.mask3{
position:relative;
width:730px;
height:320px;
overflow:hidden;
}
#box4{
position:absolute;
}
#box4 div{
width:730px;
height:355px;
float:left;
}
#box4 img{

}
#info4{
background: none !important;
color: #000000 !important;
cursor:default
}
.buttons{
padding:5px;
}
.buttons img{
height: 50px;
width: 50px;
padding: 2px;
border: solid 1px #666666;
}
.buttons img:hover{
background:#EaA064;
}
.buttons span.active img{
background:#673027;
}

/**** Graphic Design ****/

#graphic_column1{
float: left;
width: 770px;
padding-top: 10px;
margin-right: 20px;
}
#graphic_column1 h4{
color: #FFFFFF;
font-size: 20px;
margin: 0px 0px 10px 0px;
padding-top: 10px;
padding-bottom: 4px;
color: #EaA064;
border-bottom: 3px double #b15425;
}
#graphic_column1 a img{
padding: 10px;
background-color: #222222;
border: solid 1px #000000;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
#graphic_column1 a:hover img{
background-color:#EEEEEE;
}
.DA_piece{
margin-bottom: 10px;
clear: both;
}
.DA_piece strong{
font-size: 14px;
color: #FFFFFF;
}


#graphic_link1 a{
background-image:url(images/graphic_link1.png);
background-repeat:no-repeat;
background-position: left top;
}
#graphic_link1 a:hover{
color: #12255a;
}
#graphic_link2 a{
background-image:url(images/graphic_link2.png);
background-repeat:no-repeat;
background-position: left top;
}
#graphic_link2 a:hover{
color: #973535;
}
#graphic_link3 a{
background-image:url(images/graphic_link3.png);
background-repeat:no-repeat;
background-position: left top;
}
#graphic_link3 a:hover{
color: #925800;
}
#graphic_link4 a{
background-image:url(images/graphic_link4.png);
background-repeat:no-repeat;
background-position: left top;
}
#graphic_link4 a:hover{
color: #009292;
}
#graphic_link5 a{
background-image:url(images/graphic_link5.png);
background-repeat:no-repeat;
background-position: left top;
}
#graphic_link5 a:hover{
color: #973535;
}
#graphic_link6 a{
background-image:url(images/graphic_link6.png);
background-repeat:no-repeat;
background-position: left top;
}
#graphic_link6 a:hover{
color: #973535;
}

/**** Photography Design ****/

#photography_link1 a{
background-image:url(images/photography_link1.png);
background-repeat:no-repeat;
background-position: left top;
}
#photography_link1 a:hover{
color: #003c7f;
}
#photography_link2 a{
background-image:url(images/photography_link2.png);
background-repeat:no-repeat;
background-position: left top;
}
#photography_link2 a:hover{
color: #6d0006;
}
#photography_link3 a{
background-image:url(images/photography_link3.png);
background-repeat:no-repeat;
background-position: left top;
}
#photography_link3 a:hover{
color: #055300;
}