/*   
Theme Name: Tattoo Grunge
Theme URI: http://www.paulberkey.com/
Description: The Artwork of Paul Berkey
Version: 1.0
Author: Jason R. Walker
Author URI: http://www.two24studios.com/
*/

/* Reset Styles */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { 
margin: 0;
padding: 0;
}

fieldset, img { 
border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}

ol, ul {
list-style:none;
}

caption ,th {
text-align:left;
}

h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}

abbr, acronym { 
border:0;
}

a {
outline: none;
}

/* End Reset */

body {
background: #000 url(images/bodyBg.jpg) no-repeat top center;
}

.clear {
clear: both;
}

#layout {
width: 960px;
margin: 0 auto;
}

#header {
width: 960px;
height: 195px;
}

#header h1 {
float: left;
width: 330px;
height: 195px;
margin: 0 75px 0 0;
background: url(images/logo.jpg) no-repeat top;
text-indent: -999em;
}

#header h1 a {
display: block;
width: 300px;
height: 160px;
padding: 0 0 0 30px;
}

#header li {
float: left;
height: 70px;
text-indent: -999em;
}

#header ul {
float: left;
width: 475px;
height: 145px;
padding: 50px 0 0 0;
background: url(images/navBg.jpg);
background-position:  0 0;
}

#navHome a {
display: block;
width: 105px;
height: 70px;
background: url(images/navBg.jpg);
background-position: 0 -50px;
}

#navHome a:hover {
background-position: 0 -245px;
}

#navHomeActive a {
display: block;
width: 105px;
height: 70px;
background: url(images/navBg.jpg);
background-position:  0 -440px;
}

#navAbout a {
display: block;
width: 115px;
height: 70px;
background: url(images/navBg.jpg);
background-position: -105px -50px;
}

#navAbout a:hover {
background-position: -105px -245px;
}

#navAboutActive a {
display: block;
width: 115px;
height: 70px;
background: url(images/navBg.jpg);
background-position:  -105px -440px;
}

#navWork a {
display: block;
width: 130px;
height: 70px;
background: url(images/navBg.jpg);
background-position: -220px -50px;
}

#navWork a:hover {
background-position: -220px -245px;
}

#navWorkActive a {
display: block;
width: 130px;
height: 70px;
background: url(images/navBg.jpg);
background-position:  -220px -440px;
}

#navContact a {
display: block;
width: 125px;
height: 70px;
background: url(images/navBg.jpg);
background-position: -350px -50px;
}

#navContact a:hover {
background-position: -350px -245px;
}

#navContactActive a {
display: block;
width: 125px;
height: 70px;
background: url(images/navBg.jpg);
background-position:  -350px -440px;
}

#homeContent {
position: relative;
width: 920px;
height: 360px;
margin: 0 0 20px 0;
padding: 0 20px 0 20px;
background: url(images/homeStock.jpg) no-repeat top;
}

#homeContentTxt {
position: absolute;
bottom: 10px;
right: 20px;
width: 450px;
height: 40px;
padding: 90px 10px 0 0;
background: url(images/latestWorkBg.png) no-repeat top;

font: normal normal 12px Georgia, "Times New Roman", Times, serif;
text-align: right;
}

#homeContentTxt h2 {
display: none;
}

#homeContentTxt a {
color: #0066ff;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}

#homeContentTxt a:hover {
background: #0066ff;
color: #fff;
}

#homeContentTxt span {
color: #666;
font-size: 13px;
}

#homeContentTxt p {
margin: 0;
padding: 0 10px 0 0;
}

#subContent {
width: 920px;
margin: 0 0 20px 0;
padding: 0 20px 0 20px;
}

#sidebar {
float: left;
width: 220px;
margin: 0 40px 0 0;
}

#sidebarTop {
width: 220px;
height: 55px;
background: url(images/sidebarTop.jpg) no-repeat top;
}

#sidebarTxt {
width: 200px;
padding: 0 10px 20px 10px;
background: #000;

color: #ccc;
font: normal normal 11px/16px Georgia, "Times New Roman", Times, serif;
text-align: justify;
}

#sidebarTxt li a {
display: block;
width: 160px;
height: 26px;
margin: 0 0 2px 0;
padding: 9px 0 0 40px;
background: url(images/sidebarListBg.png);

color: #ccc;
text-decoration: none;
}

#sidebarTxt li a:hover {
color: #fff;
background-position: 0 -37px;
}

#sidebarTxt p {
margin: 0;
padding: 0 0 10px 0;
}

#sidebarTxt ul {
margin: 0;
padding: 0;
list-style: none;
}

#twitter_update_list li {
padding: 5px 0 5px 0;
}

#twitter_update_list li a {
display: inline;
width: auto;
height: auto;
margin: 0;
padding: 0;
background: none;
color: #666;
}

#twitter_update_list li span a {
color: #3cc;
}

#twitterIcon {
background: url(images/icons/twitter.png) no-repeat left 7px;
}

#facebookIcon {
background: url(images/icons/facebook.png) no-repeat left center;
}

#myspaceIcon {
background: url(images/icons/myspace.png) no-repeat left center;
}

#flickrIcon {
background: url(images/icons/flickr.png) no-repeat left center;
}

#youtubeIcon {
background: url(images/icons/youtube.png) no-repeat left center;
}

.linkIcon {
background: url(images/icons/dice.png) no-repeat left center;
}

#sidebarFavLinksTitle {
width: 200px;
height: 55px;
background: url(images/sidebarFavSites.png) no-repeat top;
text-indent: -999em;
}

#content {
position: relative;
float: left;
width: 660px;

color: #ccc;
font: normal normal 14px/22px Georgia, "Times New Roman", Times, serif;
text-align: justify;
}

#content h2 {
width: 660px;
height: 80px;
text-indent: -999em;
}

#content h3 {
clear: both;
width: 660px;
height: 50px;
padding: 10px 0 0 0;
text-indent: -999em;
}

#content a {
text-decoration: none;
}

#content em {
font-style: italic;
}

#content label {
padding: 0 0 5px 5px;
color: #fff;
font-size: 12px;
font-weight: bold;
}

#content p {
margin: 0 0 20px 0;
}

#content small {
position: absolute;
top: 95px;
right: 0;
font-size: 12px;
}

#content strong {
font-weight: bold;
}

.aboutContent a {
color: #00cc00;
border-bottom: 1px dashed #888;
}

.aboutContent a:hover {
border-color: #00cc00;
}

.workContent a {
color: #ff9900;
border-bottom: 1px dashed #888;
}

.workContent a:hover {
border-color: #ff9900;
}

.contactContent a {
color: #ff0033;
border-bottom: 1px dashed #888;
}

.contactContent a:hover {
border-color: #ff0033;
}

#aboutTitle {
background: url(images/aboutTitle.jpg) no-repeat left;
}

.aboutHeadline {
border-top: 1px solid #00cc00;
}

.introduction {
background: url(images/headlines/intro.png) no-repeat left;
}

.workExperience {
background: url(images/headlines/workExperience.png) no-repeat left;
}

.requests {
background: url(images/headlines/requests.png) no-repeat left;
}

#workTitle {
background: url(images/workTitle.jpg) no-repeat left;
}

.workHeadline {
border-top: 1px solid #ff9900;
}

.tattoos {
background: url(images/headlines/tattoos.png) no-repeat left;
}

.apparel {
background: url(images/headlines/apparel.png) no-repeat left;
}

.fineArt {
background: url(images/headlines/fineArt.png) no-repeat left;
}

.graphicDesign {
background: url(images/headlines/graphicDesign.png) no-repeat left;
}

#contactTitle {
background: url(images/contactTitle.jpg) no-repeat left;
}

.contactHeadline {
border-top: 1px solid #ff0033;
}

.info {
background: url(images/headlines/info.png) no-repeat left;
}

.thankYou {
background: url(images/headlines/thankYou.png) no-repeat left;
}

.imgLeft {
float: left;
margin: 0;
padding: 0 20px 20px 0;
}

.imgRight {
float: right;
margin: 0;
padding: 0 0 20px 20px;
}

.workHomeImg {
display: block;
width: 220px;
height: 220px;
margin: 0 20px 20px 0;
padding: 10px;
border: 1px solid #1a1a1a;
}

.workHomeImg:hover {
border-color: #ff9900;
}

.workItemLarge {
width: 650px;
margin: 0 0 20px 0;
background: #333;
border: 5px solid #1a1a1a;
}

.workItemLarge:hover {
border-color: #ccc;
}

.workColumn {
width: 660px;
}

.twoColLeft {
float: left;
width: 310px;
margin: 0 20px 20px 0;
background: #333;
border: 5px solid #1a1a1a;
}

.twoColLeft:hover {
border-color: #ccc;
}

.twoColRight {
float: left;
width: 310px;
margin: 0 0 20px 0;
background: #333;
border: 5px solid #1a1a1a;
}

.twoColRight:hover {
border-color: #ccc;
}

.threeColLeft {
float: left;
width: 200px;
margin: 0 15px 20px 0;
background: #333;
border: 5px solid #1a1a1a;
}

.threeColLeft:hover {
border-color: #ccc;
}

.threeColMid {
float: left;
width: 200px;
margin: 0 15px 20px 0;
background: #333;
border: 5px solid #1a1a1a;
}

.threeColMid:hover {
border-color: #ccc;
}

.threeColRight {
float: left;
width: 200px;
margin: 0 0 20px 0;
background: #333;
border: 5px solid #1a1a1a;
}

.threeColRight:hover {
border-color: #ccc;
}

.inputTxt {
width: 233px;
height: 23px;
padding: 7px 0 0 7px;
background: #1a1a1a;
border: 1px solid #333;

color: #ccc;
font: normal normal 14px Georgia, "Times New Roman", Times, serif;
text-align: left;
}

.inputTxt:focus, .inputTxt:hover {
border-color: #ccc;
}

.txtAreaTxt {
width: 651px;
height: 193px;
background: #1a1a1a;
border: 1px solid #333;
padding: 7px 0 0 7px;

color: #ccc;
font: normal normal 14px Georgia, "Times New Roman", Times, serif;
text-align: left;
}

.txtAreaTxt:focus, .txtAreaTxt:hover {
border-color: #ccc;
}

.inputSubmit {
float: right;
width: 100px;
height: 30px;
background: #1a1a1a;
border: 1px solid #333;

color: #ff0033;
font: normal bold 12px Georgia, "Times New Roman", Times, serif;
}

.inputSubmit:hover {
border-color: #ccc;
}

#workCallouts {
width: 900px;
height: 190px;
margin: 0 20px 20px 20px;
padding: 10px;
background: url(images/homeCalloutsBg.jpg) no-repeat top;
}

#workCallouts h2 a {
display: block;
width: 225px;
height: 60px;
}

#tattoosCallout {
position: relative;
float: left;
width: 225px;
height: 180px;
background: url(images/home/tattoosBg.jpg) no-repeat top;
}

#tattoosCallout h2 {
position: absolute;
top: -10px;
width: 225px;
height: 60px;
background: url(images/home/tattoosTitle.png) no-repeat top;
text-indent: -999em;
}

#apparelCallout {
position: relative;
float: left;
width: 225px;
height: 180px;
background: url(images/home/apparelBg.jpg) no-repeat top;
}

#apparelCallout h2 {
position: absolute;
top: -10px;
width: 225px;
height: 60px;
background: url(images/home/apparelTitle.png) no-repeat top;
text-indent: -999em;
}

#fineArtCallout {
position: relative;
float: left;
width: 225px;
height: 180px;
background: url(images/home/fineArtBg.jpg) no-repeat top;
}

#fineArtCallout h2 {
position: absolute;
top: -10px;
width: 225px;
height: 60px;
background: url(images/home/fineArtTitle.png) no-repeat top;
text-indent: -999em;
}

#graphicDesignCallout {
position: relative;
float: left;
width: 225px;
height: 180px;
background: url(images/home/graphicDesignBg.jpg) no-repeat top;
}

#graphicDesignCallout h2 {
position: absolute;
top: -10px;
width: 225px;
height: 60px;
background: url(images/home/graphicDesignTitle.png) no-repeat top;
text-indent: -999em;
}

.calloutTxtBox {
position: absolute;
bottom: 10px;
width: 225px;
height: 50px;

font: normal normal 12px Georgia, "Times New Roman", Times, serif;
}

.calloutTxtBox a {
text-decoration: none;
}

.calloutTxtBox a:hover {
text-decoration: underline;
}

.calloutTxtBox p {
padding: 9px 6px 0 6px;
color: #fff;
}

.calloutTattooLink {
color: #0066ff;
}

.calloutApparelLink {
color: #00cc00;
}

.calloutFineArtLink {
color: #ff9900;
}

.calloutGraphicLink {
color: #ff0033;
}

#footer {
width: 960px;
height: 100px;
margin: 20px 0 0 0;

color: #666;
font: normal normal 12px Georgia, "Times New Roman", Times, serif;
}

#footerInfo {
float: left;
width: 480px;
height: 60px;
text-align: left;
}

#footerInfo a {
color: #0099ff;
text-decoration: none;
}

#footerInfo a:hover {
color: #fff;
}

#footerInfo a span {
color: #333;
}

#footerInfo p {
margin: 0;
padding: 0 0 0 30px;
}

#footerNav {
float: left;
width: 480px;
height: 60px;
text-align: right;
}

#footerNav a {
padding: 0 5px 0 5px;
text-decoration: none;
}

#footerNav a:hover {
text-decoration: underline;
}

.footerHomeLink {
color: #0066ff;
}

.footerAboutLink {
color: #00cc00;
}

.footerWorkLink {
color: #ff9900;
}

.footerContactLink {
color: #ff0033;
}

#footerNav p {
margin: 0;
padding: 0 30px 0 0;
}