/* background colors were added for easy identification - remove theses*/
* {
   /* removes all margins & padding from all elements to eliminate browser differences */
   margin: 0;
   padding: 0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
/* setting the text size to 62.5% makes 1em = 10px */
   font-size: 62.5%;
    behavior: url(/pages/images/global/csshover.htc);
background-image: url(/pages/images/pages/bg.gif);
}
#wrapper {
/* setting the wrapper width in ems allows the design to expand with the text */
   /* use to 760px for a non-expanding site */
   width: 76em;
margin: 1em auto;
/*  border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #7e6c74;
border-left-color: #7e6c74;
background-color: transparent;*/

}

#outter_wrapper {
background-image: url(/pages/images/pages/header.jpg);
background-repeat: no-repeat;
    background-position: center 0;
width:100%;
}

#innerWrapper {

}
/*======== text elements ========*/
   h2 {color: #f8ebad;
       font-size:1.8em;
   }
   
   h3 {color: #f8ebad;
       font-size:1.8em;
   }
   
   h4 {color: #f8ebad;
       font-size:1.6em;
   }
   
   p, ul {
margin: 1em 0;
color: #fff;
font-size: 1.2em;
   }
   
   a {color:#fff;
   }
   /*======== end text elements ========*/
   
   
/*======== header styles ========*/
#header {
height: 240px;
}

/*======== end header styles ========*/

/*======== navigation ========*/

#headerMenu {
    position: absolute;
    margin: 0;
    padding: 0;
  top: 215px;
    height:35px;
  background-image: url(/pages/images/pages/menu_bg.gif);
  width:760px;
   }  
* html #headerMenu {
   height:30px;
   background-color:#000000;
   }
   
   
#headerMenu ul {
padding-top:5px;
margin: 0;
width:760px;
list-style: none;
position:relative;
 height:35px;
  }
  
* html #headerMenu ul {
height:30px;
} 
  
 #headerMenu ul li {
color:#ffffff;
font-family: "Verdana", Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight:bold;
letter-spacing:1px;
float: left;
position:relative;
display:inline;
 }
 
 #headerMenu ul li a {
display:block;
padding:1px 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#FFF;/* sets the type color */
}

 #headerMenu ul li a:hover {
display:block;
padding:1px 6px; /*creates space each side of menu item's text */
text-decoration:underline; /* removes the underlining of the link */
color:#FFF;/* sets the type color */
}

 #headerMenu ul li ul {
margin:0; 
z-index:10; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
left:-1px; /*aligns the drop exactly under the menu */
top:15px;
background-color:transparent;
}

#headerMenu ul li ul li {padding:0;
width:80%; /* makes the list items fill the list container (ul) */
border-left:1px solid #FFF; /*  three sides of each drop-down item */
border-bottom:1px solid #FFF;
border-right:1px solid #FFF;
background-color:#000;
font-size:.7em;
}
#headerMenu ul li ul li a {padding:1px .5em; font-size:1.1em}
#headerMenu ul li ul li a:hover {padding:1px .5em; font-size:1.1em; color:#f8ebad; text-decoration:none;}
#headerMenu  li ul li:first-child {
border-top:1px solid #FFF; /*the top edge of the dropdown */
}
/* make the drop-down display as the menu is rolled over */
#headerMenu  li ul {display:none;} /* conceals the drop-down when menu not hovered */
#headerMenu  li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* pop-out starts here */
body #headerMenu ul li ul li ul  {
position:absolute; 
visibility:hidden; /* same effect as display:none in this situation */
top:-1px;
left:10em;
}
#headerMenu  ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html #headerMenu  {
float:left; /* makes the ul wrap the li's */
/* adds the rightmost menu vertical line to the ul */
/*margin-left:15px; *//* IE doubles the given value above - why? */

}

/* add a top line to drops and pops in IE browsers - can't read :first-child 
* html  #headerMenu  li ul {
border-top:1px solid #fff;
border-left:0px; /* stops the drop inheriting the ul border */
}
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html  #headerMenu  li ul li ul { 
  left:9.85em; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  left:10em;
  } 
/* and the "be nice to Opera" rule */
html>body #headerMenu  li ul li ul {
  left:10em;
} 
#index { margin-left:5.6em;}


#tattoos { margin-left:4.3em;}

#piercing {margin-left:4.3em;}

#contact {margin-left:4.3em;}

/*======== navigation ========*/


/*======== content styles ========*/
#innerWrap {
background-color:transparent;
width: 100%;
}

.block{
clear: both;
padding: 1em;
} 

.block img {
border: #7e6c74 1px solid;
margin: 0em 1em 1.5em 1em;
}

.block ul li {
margin-left:2em;
float:none;
}

.left {
     float:left;
}

.right {
     float:right;
}

.this_cat {
color: #f8ebad;
    font-size:1.5em;
font-weight:bold;
margin:5px auto;
text-align:center;
}

.block ul.faqs {
   margin-top: 1em;
   list-style-position: inside;
}

.block ul.faqs  li.noNumber {
   padding-bottom: 1em;
}

.block ul.faqs  li.answer a.backtotop {
   display: block;
   text-align: right;
   right: 1em;
   padding-top:1em;
}

.block ul.faqs  li.question {
 list-style-image: url(../images/pages/q.gif);
}

.block ul.faqs  li.answer {
 list-style-image: url(../images/pages/a.gif);
}

/*======== end content styles ========*/

/*======== column1 styles ========*/
#column1 {
   width: 18em;
   float: left;
   background-color: #CCFFFF;
} 
/*======== end column styles ========*/

/*======== footer styles ========*/
#footer {
clear: both;
height:70px;
background-image: url(/pages/images/pages/menu_bg.gif);
}


#footer ul {
list-style:none;
text-align:center;
width:760px;
height:5px;
padding:0px 200px;
}

*html #footer ul {
padding:0px;
margin-left:200px;
width:360px;
}

#footer ul li {
font-weight:bold;
float:left;
list-style:none;
padding-left:20px;

}


* html #footer {
background-image: url(/pages/images/pages/footer.gif);
height:60px;

}

#footer p {
text-align: center;
padding-top:10px;
}

* html #footer p {
padding-top:0px;
}
/*======== end footer styles ========*/

/*======== Tony Aslett's clearing method ========*/ 
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
   /* the period is placed on the page as the last thing before the div closes */
    content: "."; 
 /* inline elements don't respond to the clear property */            
display: block;
/* ensure the period is not visible */          
    height: 0; 
 /* make the container clear the period */                 
    clear: both; 
 /* further ensures the period is not visible */              
    visibility: hidden;     
}
.clearfix {
   display: inline-block;
}   /* a fix for IE Mac */
/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {
   height: 1%;
}
.clearfix {
   display: block;
}
/* End hide from IE-mac */
/*======== end Tony Aslett's clearing method ========*/