/* CSS Document */

.container { width: 740px;}


body { background-color: #000; background: url('../images/background.jpg'); color: #fafafa;}

#maincontainer { background: url('../images/tattoo_background.gif') no-repeat;	background-position: top center; margin: 0 auto; width:740px; height: auto; min-height: 400px; border: 5px solid #64270e; background-color: #000;padding-bottom: 10px; }

body#tattoos #maincontainer { background: url('/images/tattoo_background.jpg') no-repeat; background-color: #000; }
body#contact #maincontainer { background: url('/images/contact_background.jpg') no-repeat; background-color: #000;  }
body#originalart #maincontainer { background: url('/images/originalart_background.jpg') no-repeat; background-color: #000; }
body#index #maincontainer { background: url('/images/index_background.jpg') no-repeat; background-color: #000; }

a:link, a:visited { color: #572e18; font-weight: bold; }
a:hover { color: #9c4617; }

h1 { color: #9c4617; }
h2 { color: #9c4617; }
h3 { color: #9c4617; }


#header { background: url('../images/header.png') no-repeat; position:relative; left:10px; top:0px; width:732px; height:157px; }

#header h1 { text-indent: -9999px; height: 0px; line-height: 0px; padding: 0px; margin: 0px;  }
#header h2 { text-indent: -9999px; height: 0px; line-height: 0px; padding: 0px; margin: 0px;  }
#header h3 { text-indent: -9999px; height: 0px; line-height: 0px; padding: 0px; margin: 0px;  }


#navcontainer { margin-top: -35px; }

ul#topnav { list-style: none; margin-left: 0px; }
ul#topnav li { float: left; margin:0px; padding:0px; }

body#index ul#topnav { margin-top: 20px; }
body#index ul#topnav li { float: none; }


#Tattoos a { display: block; width:98px; height:42px; background: url('../images/tattoos.png');text-indent: -9999px;}
#Tattoos a:hover { background-position: -97px; }

#Original-Art a { display:block; width:162px; height:55px; background: url('../images/original-art.png'); text-indent: -9999px; }
#Original-Art a:hover { background-position: -166px; }

#Photography a { display: block; width:167px; height:55px; background:url('../images/photography.png'); text-indent: -9999px; }
#Photography a:hover { background-position: -167px; }

#Contact a { display: block; width:109px; height:42px; background:url('../images/contact.png'); text-indent: -9999px; }
#Contact a:hover { background-position: -116px; }

#News a { display: block; width:86px; height:42px; background: url('../images/news.png'); text-indent: -9999px; }
#News a:hover { background-position: -92px; }

#Home a { display: block; width:86px; height:42px; background:url('../images/home.png'); text-indent: -9999px; }
#Home a:hover { background-position: -88px; }




div#contents { position: relative; top: 0px; margin-bottom: 10px; height: auto; min-height: 300px; padding: 4px; margin-left: 0; }


/* @group bottomcontainer */
div#bottomcontainer { position: relative; top: 10px; height: auto; margin-bottom: 25x;  }

ul#bottomnav { list-style: none; width:  740px; display: block; position: relative; text-align: center;}
ul#bottomnav li { display: inline; padding-left: 5px; padding-right: 5px; margin-left: 10px;  }

ul#bottomnav li a { font-size: 1.3em; font-weight: bold; text-decoration:none; letter-spacing: .1em; }

#address { padding-left: 2px; line-height: 1em; letter-spacing: .12em; color: #999999; margin-bottom: 2px; }
#poweredby { float: right; text-align: right; padding-right: 2px; line-height: 1em; letter-spacing: .12em; color: #999999; }
/* @end bottomcontainer */



/* @group gallery */
#gallerybreadcrumbs { font-size: 1.2em; font-weight: bold; }
#gallerynavigation { color: #fafafa; text-align: right; }
#galleryArtistName {  height: auto;}

#galleryimageColumns {  }
#galleryimageInfo { padding-left: 5px; border: 2px solid #64270e; margin-left: 15px; }
#galleryimageName { text-decoration: underline;  padding: 0px; margin: 2px; font-weight: bold; margin-bottom: 5px; }
#galleryimage { text-align: center; margin-bottom: 10px; height: auto; min-height: 300px; border: 2px solid #64270e; padding: 5px; margin-top: 10px;}
#galleryimage a { border: 0px; background: none; }

#gallerykeywords { margin-top: 20px; height: auto; min-height: 80px; margin-bottom: 5px; }


body#tattoo #galleryimageInfo em { color: #9c4617; background: none; font-weight: bold; text-decoration: underline; }

#galleryTravelDates { margin-top: 10px; text-align: left; height: auto; padding: 4px; width: 300px; }
#galleryTravelDates h3 { text-decoration: underline;  padding: 0px; margin: 2px; font-weight: bold; margin-bottom: 5px;}
#galleryTravelDates p.event { margin-left: 10px; } 
/* @end gallery */


/* @group tattoo gallery */



/* @end tattoo gallery */


/* @group original art gallery */


/* @end original art gallery */



/* @group Thumbs */
.thumbsThumbnail { margin-top: 30px; float: left; text-align:center; width: 110px; margin-left: 10px; }
.thumbsThumbnail img { border: 2px solid #333333; }
.thumbsThumbnail img:hover { border: 2px solid #cccccc; }
.thumbsThumbnail a { text-decoration: none; }

#thumbsArea { position: relative; top: 40px; height: auto; min-height: 350px; margin: 0 auto; width: 650px;}
#thumbsArea a { background: none; }
#thumbsArea a:hover {color: #9c4617;}  

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


/* @group breadcrumbs stuff */
#bread { color: #f3e7d9; padding: 3px; font-size: 1.4em; }
#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 contact form */
form#contact { height: auto; min-height: 500px; width:500px; margin: 0 auto;  }
fieldset#contact { border: 2px solid #666666; }
fieldset#contact label { float: left; width: 150px; text-align: right; padding-right: 5px; }
input { border: 2px solid #666666; margin-bottom: 2px; background-color: #333333; color: #fafafa; padding: 2px; }
textarea { width: 250px; height: 100px; border: 2px solid #666666; background-color: #333333; color: #fafafa; }
textarea:focus { border: 2px solid #666666; }
#captcha { text-align:right; width: 200px;}
input.submit { float:right; }






#latestTattoos { text-align: right; margin-top: 20px; }
#latestTattoos img { border: 3px solid #64270e; }
#latestTattoos img:hover { border: 3px solid #cccccc; }

#latestNews { margin-left: 5px; clear: both; }



#newsarticle { width: 98% }
#newsarticle #title { font-size: 1.6em; }
#newsarticle h2#title { padding: 0; margin: 0; font-size: 1.8em; }
#newsarticle img { float: left; padding: 5px; }
#newsarticle #text { padding: 5px; }