/* basics

green - #66cc00
purple - #87587a
orange - #ff662c

*/



body { background: #000; color: #fafafa; }
h1 { font-weight: bold; border-bottom: 1px solid #66cc00; padding: 0px; margin: 2px; color:#87587a;  }
h2 { font-weight: bold; border-bottom: 1px solid #66cc00; padding: 0px; margin: 2px; color:#87587a;  }
h3 { font-weight: bold; border-bottom: 1px solid #66cc00; padding: 0px; margin: 2px; color:#87587a;  }


a:link, a:visited { font-weight: bold; color: #ff662c; text-decoration: underline; }
a:hover { color: #87587a; }


label { width: 200px; display: block; color: #87587a; }

input { border:1px solid #66cc00; background:#000; padding:5px; color: #ff662c; }
input:focus { border:1px solid #66cc00; background:#000; color: #66cc00; }
#captchaImage { background: #000; padding: 5px; vertical-align: middle; text-align: center; }
textarea { border:1px solid #66cc00; background:#000; padding:5px; color: #ff662c; }
textarea:focus { border:1px solid #999; background:#000; color: #66cc00; }
textarea#comment { width: 300px; }







#topcontainer { position: relative; left:0px; top:0px; width:750px;	height:auto; margin: 0 auto; margin-top: -20px; }
#toplogo { position:absolute; left:0px;	top:0px; width:748px; height:250px; background: url('../images/toplogo.jpg') no-repeat; text-indent: -9999px; }

a#home { position: absolute; display: block; top: 60px; left: 190px; width: 387px; height: 85px; text-indent: -9999px; }

#toplogo h1 { border: 0px; }
#toplogo h2 { border: 0px; }
#toplogo h3 { border: 0px; }

#topcontainer ul { list-style: none; }

#tattoos {	position:absolute; left:128px; top:250px;  }
#artists { position:absolute; left:293px; top:250px; }
#piercings { position:absolute; left:443px; top:250px; }
#news {	position:absolute; left:249px; top:314px; }
#contactbutton { position:absolute; left:364px; top:314px; }


#tattoos a:link, #tattoos a:visited { display: block; background: url('../images/tattoos.jpg') no-repeat; width:165px; height:64px; text-indent: -9999px; border: 0px; }
#artists a:link, #artists a:visited { width:150px; height:64px; display: block; background: url('../images/artists.jpg') no-repeat; text-indent: -9999px; border: 0px; }
#piercings a:link, #piercings a:visited { display: block;  width:187px; height:64px; background: url('../images/piercings.jpg') no-repeat; text-indent: -9999px; border: 0px; }
#news a:link, #news a:visited { display: block; width:115px; height:52px; background: url('../images/news.jpg') no-repeat; text-indent: -9999px; border: 0px; } 
#contactbutton a:link, #contactbutton a:visited { display: block; width:156px; height:52px; background: url('../images/contact.jpg') no-repeat; text-indent: -9999px; border: 0px; }


#tattoos a:hover { background-position: -165px; }
#artists a:hover { background-position: -150px; }
#piercings a:hover { background-position: -187px; }
#news a:hover { background-position: -115px; }
#contactbutton a:hover { background-position: -156px; }


#leftoftattoos { position:absolute; left:0px; top:250px; width:128px; height:64px; background: url('../images/leftoftattoos.jpg') no-repeat; }
#rightofpiercings {	position:absolute; left:630px; top:250px; width:118px; height:64px;	background: url('../images/rightofpiercings.jpg') no-repeat; }



#middlecontainer { position: relative; top: 378px; width: 748px; height: auto; min-height: 400px; margin-bottom: 60px; clear: both; }
#contents { width:748px; height: auto; min-height: 400px; background: url('../images/contents.jpg') no-repeat; }

#location { color: #ff662c; font-size: 1.4em; font-weight: bold; margin: 0 auto; width: 748px; text-align: center;}

#bottomcontainer { position: relative; top: 300px; width: 750px; height: auto; margin: 0 auto; margin-top: 60px; }
#bottom { width:748px; height:169px; background: url('../images/bottom.jpg') no-repeat; }




#bottomnav { list-style: none; margin: 0 auto; width: auto; text-align: center; padding-top: 100px; }
#bottomnav li { display: inline; margin-left: 3px; margin-right: 3px;  }
#bottomnav li a:link, #bottomnav li a:visited { color: #fafafa; font-size: 1.2em; font-weight: bold; letter-spacing: .05em; text-decoration: none; }
#bottomnav li a:hover { color: #66cc00; text-decoration: underline; }


#disclaimer { position: relative; top 300px; width: 748px; margin: 0-auto; margin-top: 300px; }
#copyright { text-align: right; padding-left: 35px; }

form#contact { width: 300px; margin: 0 auto; height: auto; min-height: 300px; clear: both;}
input { border:1px solid #bbb; background:#000; padding:5px; color: #f6f6f6; }
input:focus { border:1px solid #999; background:#fff; color: #000; }
label { width: 200px; display: block; }
#captchaImage { background: #000; padding: 5px; vertical-align: middle; text-align: center; }
textarea { border:1px solid #bbb; background:#000; padding:5px; color: #f6f6f6; }
textarea:focus { border:1px solid #999; background:#fff; color: #000; }
textarea#comment { width: 300px; }





/* @group Gallery */


#gallerybreadcrumbs { font-size: 1.2em; font-weight: bold; }
#gallerynowViewingTop { height: auto; text-align: right; }
#galleryArtistName { visibility: hidden; position: relative; top: 20px; left: 400px; height: auto;}
#gallerytravelDates { left: 15px; height: auto; border: 1px solid #000; text-align:center;  padding: 4px; width: 300px; }

#galleryimageColumns {  }
#galleryimageInfo { margin-top: 40px;height: auto; min-height: 200px; padding-left: 5px; }
#galleryimage { text-align: center; margin-bottom: 40px; height: auto; min-height: 400px;}
#galleryimage a { border: 0px; }
#galleryimage img { border: 2px solid #66cc00;}
#galleryimage img:hover { border: 2px solid #ff662c;}
* html #galleryimage { top: 100px; }

#gallerykeywords { margin-top: 40px; }


#galleryimageInfo em { color: #fafafa; background: #000; font-weight: bold; text-decoration: underline; }


#galleryTravelDates a.name:link, #galleryTravelDates a.name:visited { color: #fafafa; font-weight: bold; border-bottom: 1px solid #c61001; text-decoration: none;}
#galleryTravelDates a.name:hover { color: #c61001; border-bottom: 1px solid #fafafa; }
#galleryTravelDates { margin-top: 10px; text-align: left; border: 1px solid #000; height: auto; padding: 4px; width: 300px; }
#galleryTravelDates h3 { border-bottom: 1px solid #fafafa;  text-decoration: underline;  padding: 0px; margin: 2px; font-weight: bold; margin-bottom: 5px;}


/* @group Thumbs */

.thumbsThumbnail { margin-top: 30px; float: left; text-align:center; width: 110px; margin-left: 10px; }
.thumbsThumbnail img { border: 2px solid #66cc00; }
.thumbsThumbnail img:hover { border: 2px solid #87587c; }
.thumbsThumbnail a { text-decoration: none; }

#thumbsgallery { height: auto; min-height: 450px; width: 700px; margin: 0 auto; }
* html #thumbsgallery { height: 500px; }
#thumbsbreadcrumbs { font-size: 1.2em; font-weight: bold; }
#thumbsNavTop { margin-top: 10px; color: #fafafa; }
#thumbsNavTop form { float: left; }
#thumbsArea { position: relative; top: 40px; height: auto; min-height: 350px; margin: 0 auto; width: 600px;}
#thumbsNavBottom { position: relative; top: 40px; width: 300px; height: auto; left: 15px; margin-bottom: 120px; }
#thumbsNavBottom form { float: left; }
/* @end */


/* @group breadcrumbs stuff */
#bread { color: #66cc00; padding: 3px; }
#bread ul {	margin-left: 0; padding-left: 0; display: inline; border: none;	} 
#bread ul li { margin-left: 0;	padding-left: 2px; border: none; list-style: none; display: inline;	}
#bread ul li:before { content: "\0020 \0020 \0020 \00BB \0020";	color: #fafafa;	}
#bread ul li#first:before {	content: " "; }
/* @end breadcrum stuff */


/* @group image comments */

#galleryimageComments { position: relative; padding-left: 5px; height: auto; min-height: 100px; }
#galleryimageCommentBox { margin-top: 100px; width: auto; height: auto; min-height: 200px; }
#galleryimageCommentBox fieldset { border: 1px solid #87587a; }

div.imageComment { margin-top: 20px; }
.imageComment p.author em { font-size: 1.3em; font-weight: bold; color: #66cc00; background: #000; text-decoration: underline; padding: 2px; padding-bottom: 0px; margin-bottom: 0px; }
.imageComment p.date { font-size: .9em; font-weight: normal; color: #cccccc; margin-top: -10px; margin-bottom: 0px; } 
.imageComment p.message { font-size: 1.2em; text-indent: 15px; color: #cccccc; margin-top: -20px; }
.imageComment {border-bottom: 1px solid #66cc00; margin-bottom: -20px;}


#newImageComment { height: auto; min-height: 300px; width: 300px; margin-bottom: 300px;}
/* @end image comments */



/* @group newsarticle */
#newsarticle span#title { font-size: 1.5em; }
#newsarticle span#date { font-style: italic; color: #fafafa; margin-left: 5px; }
#newsarticle img { padding: 5px; float: left; }
/* @end newsarticle */

/* @group artistlist */
.tattooArtist img { float: left; padding: 5px; }
/*
.tattooArtist #description { background: #000; }

*/




/* @group front page */
#latestNews { height: auto; min-height: 200px; clear: both; position: relative;top: 20px; }
#latestNews img { padding: 3px; height: 200px; clear: both; }
#latestNews .newsTitle { font-size: 1.5em; color: #87587c; border-bottom: #66cc00;}
#latestNews .newsText { height: auto; clear: both; }
#latestNews .newsDate { color: #cccccc; font-size: .9em; font-style: italic;}

#latestTattoos { position: relative; height: auto; margin-top: 0px; }
#latestTattoos img { border: 2px solid #66cc00;}
#latestTattoos img:hover { border: 2px solid #ff662c;}



/* @group etc */
.counter { color: #000;}

fieldset#contact { width: 300px; margin: 0 auto; margin-bottom: 40px; background: #000; border:1px solid #87587a;}
fieldset#contact textarea { width: 300px; }

#linktousbanner textarea { width: 500px; height: 80px; }
ul.linklist { list-style: none; }

table { border: 0px; }
td { border: 0px; }
/* end etc */