@import url('reset.css');


/************************************************************************* 
INDEX

1. Layout
2. Styles
3. Navigation
4. HOME Page
5. FAQ Page
6. Studio Page
7. Gallery Page
8. Profiles Page
9. News Page

**************************************************************************/


/************************************************************************* 
1. Layout
**************************************************************************/
body {
padding:0px;
margin: 0px;
background: #AA0101 url(../imgs/UI/bcks/main-flames.png) center top no-repeat;
color:white;
font-family: Cambria, serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em; }

#wrap{
	margin: 0 auto;
	padding: 0px;
	width:952px;
	}
	

#header{height:140px;}


#content{
   background-color: black;
   width: 952px;
   margin:0px;}

 #nav-wrap{width:520px;}

  #subnav{float:left; width:950px;}

#footer{   
     height:105px;
     width:952px;
     margin-top: 20px;
     background: url(../imgs/UI/bcks/copyright.png) no-repeat; position: bottom; }	
     
     #left-swallow{width:139px; position: relative; top:-118px; right:99px}
     #right-swallow{width:139px; position: relative; top:-118px; left:99px}
     #easypeasy{position: relative; left:-85px; top:2px;}

/************************************************************************* 
2. Styles
**************************************************************************/	
/* Global Styles */

.left{float:left;}
.right{float:right;}
.center{text-align: center;}
.clear{clear: both;}
	
a{ outline: none;
    -moz-outline-style: none;
    text-decoration: none;
 }
a:visited{color:#FF0000;} 
 
p{margin: 5px 5px 12px 5px; font-size: 15px;}


h1{}
h2{
  color:#FF0000;
  font-size: 30px;
  margin: 10px 5px 5px 5px;
  line-height: 40px;
  font-weight: normal;
}

h3{color:white; text-transform: uppercase; font-size:16px;}

h4{ 
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: -0.3;
    line-height: 1.4em;
    font-size:35px;
    text-transform: uppercase;}
    
h5{
  color:#D7D7D7;
  font-size: 13px;
  margin: 0px 5px 10px 5px;
  line-height: 11px;
  letter-spacing: 1px;
  font-weight: normal;
  text-transform: uppercase;}
  
h6{
  text-transform: uppercase;
  color:#CCCCCC;
  text-align: center;}


.red{color:#FF0000}

h2:active {text-decoration: none;}
h2 a{color:#FF0000;}
h2 a:hover{color:#CCCCCC;}


.button{
   min-width:105px;
   background-color: #AA0101; 
   padding:8px;
   margin:15px; 
   border:none; 
   color:white; 
   text-transform:uppercase;}
   
   .button:hover{background-color: #7E0101; color:#CF0202; cursor: pointer;}
   .button:focus{background-color: #171717; color:#AA0101; cursor: pointer;}

 
 
#select-txt{
    padding:20px;
    margin: 25px 60px 25px 60px;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: -0.3;
    line-height: 1.4em;
    font-size:34px;
    text-transform: uppercase;
    border-bottom: 1px solid #141414}
    
    
   

/* Single Styles */
.breadcmb{height:20px; margin:20px 0px 40px 0px; padding:0px 0px 0px 20px; float:left; background:url(../imgs/UI/icons/brd-arrow.png) no-repeat;}
.breadcmb a{color:#FF0000;}
.breadcmb a:visited{color:#FF0000;}
.breadcmb a:hover{color:#CCCCCC;}

.redupper{
  color:#FF0000;
  font-size: 18px;
  margin: 10px 5px 5px 5px;
  line-height: 40px;
  font-weight: normal;
  text-transform: uppercase;}
  
    .redupper a{color:#AA0101;}
    .redupper a:hover{color:white}
    .redupper a:visited{color:#FF0000;}

.boldupper{
   text-transform: uppercase;
   font-weight: bold;}




/* Global Navigation */

#navigation {
  list-style: none;
  display: inline;
  position: relative;
  top:-60px;
  width: 550px;
  padding: 0px;
  margin:10px 30px 0px 0px;

}

#navigation li{float:left; padding:0px 2px 0px 2px;}

#navigation a * {
  display: none;
}

#navigation a,
#navigation a .hover {
    height: 99px;
	position: relative;
	display: block;
	background: url(../imgs/UI/icons/sprite.png) 0 0 no-repeat;
	cursor: pointer;
}

/************************************************************************* 
3. Navigation
**************************************************************************/	

/* Home */
#navigation a.home {
  background-position: 0 0px;
  width: 100px;
}

#navigation .highlight a.home:hover,
#navigation a.home .hover {
  background-position: 0 -99px;
  width: 100px;
}

body#pageHome #navigation a.home{
background-position: 0px -198px;
}

/* Profiles */
#navigation a.Profiles {
  background-position: -100px 0px;
  width: 100px;
}

#navigation .highlight a.Profiles:hover,
#navigation a.Profiles .hover {
  background-position: -100px -99px;
}

body#pageProfiles #navigation a.Profiles{
background-position: -100px -198px;
}

/* Gallery */
#navigation a.Gallery {
  background-position: -200px 0px;
  width: 100px;
}

#navigation .highlight a.Gallery:hover,
#navigation a.Gallery .hover {
  background-position: -200px -99px;
}

body#pageGallery #navigation a.Gallery{
background-position: -200px -198px;
}

/* FAQ */
#navigation a.FAQ {
  background-position: -300px 0px;
  width: 100px;
}

#navigation .highlight a.FAQ:hover,
#navigation a.FAQ .hover {
  background-position: -300px -99px;
}

body#pageFAQ #navigation a.FAQ{
background-position: -300px -198px;
}

/* Studios */
#navigation a.Studios {
  background-position: -400px 0px;
  width: 100px;
}

#navigation .highlight a.Studios:hover,
#navigation a.Studios .hover {
  background-position: -400px -99px;
}

body#pageStudios #navigation a.Studios{
background-position: -400px -198px;
}


/* Global Navigation END */


/************************************************************************* 
4. HOME Page
**************************************************************************/


/**** HOMEPAGE ****/
.homepage{height:823px;}
#homepage-content{clear:both}

#homepage-content strong{color:#FF0000}

#feat-gallery, #news-bx, #tattoodle-bx{background:#A40101; padding:6px; border: 2px solid #8B0101;}
#feat-gallery img, #news-bx img, #tattoodle-bx img{padding:0px 10px 0px 5px;}
	
#welcome-bx{width:448px; position:relative; top:-45px; height:368px; margin:15px 15px 15px 20px; padding:6px;}
#feat-gallery{width:395px; height:368px; margin:10px 10px 10px 25px;}
    #feat-gallery h3{margin-bottom:10px;}
    
    
#news-bx{width:464px; margin: 15px 15px 15px 20px; height:230px;}
#tattoodle-bx{width:395px; margin: 15px 0px 0px 5px; height:230px;}




/************************************************************************* 
5. FAQ Page
**************************************************************************/

#faq-content{clear:both; margin:15px; position:relative; top:-45px;}


.accordion { list-style-type: none; padding: 0; margin: 0 0 30px; background:#000;	border: 1px solid #000; border-top: none; border-left: none  }
		
	.accordion ul { padding: 0; margin: 0; float: left; display: block; width: 100%; border-color:#000;  }
	
	.accordion li { background: #1D1D1D; cursor: pointer; list-style-type: none; padding: 0px; margin: 0; float: left; border-bottom:2px solid #000; display: block; width: 100%;
		outline:none;
	}
	
	.accordion li.active>a { background: url('../imgs/UI/icons/close.png') no-repeat center right; outline:none; }
	
	.accordion li div { padding: 20px; margin:20px; background: #760101; display: block; clear: both; float: left; width: 91%;}
	
	.accordion a { text-decoration: none; font: bold 1.1em/2em Arial, sans-serif; color: #fff; padding: 10px 10px; display: block; cursor: pointer; background: url('../imgs/UI/icons/open.png') no-repeat center right;}
	
	/* Level 2 */
	.accordion li ul li { background: #AA0101; font-size: 0.9em; color:white; outline:none; }
	
	

/************************************************************************* 
6. Studio Page
**************************************************************************/

#studio-content{clear:both; margin:15px; position:relative; top:-45px;}
.studios-pg {height:1093px;}

#studio-select{position: relative;}
   #studio-select img{border:9px solid #A40101; margin: 15px 0px 0px 35px;}

   #studio-select .studio{float:left; position: relative;}
   #mullingar-banr{height:58px; width:203px; background:url(../imgs/studios/mullingar-banr.png) no-repeat; position: absolute; top:40px; left:20px;}
   #sligo-banr{height:58px; width:203px; background:url(../imgs/studios/sligo-banr.png) no-repeat; position: absolute; top:40px; left:20px;}
   #letterkenny-banr{height:58px; width:221px; background:url(../imgs/studios/letterkenny-banr.png) no-repeat; position: absolute; top:40px; left:20px;}


#studio-selected{clear:both} 

#studio-selected p{font-size:15px; padding-left:10px; margin: 0px 0px 0px 0px;}

    #studio-selected .col-left{float:left; width:420px; padding: 5px;}
    #studio-selected .col-right{float:right; width:455px; padding: 10px; border-left:1px solid #171717}

    #studiopics{border:9px solid #A40101; margin:0px 10px 0px 10px; background-color: #A40101; width:388px; height:318px; text-align: center; position:relative;} 
    #studiopics #mullingar-banr{height:58px; width:203px; background:url(../imgs/studios/mullingar-banr.png) no-repeat; position: absolute; top:20px; left:-24px;} 
    #studiopics #sligo-banr{height:58px; width:203px; background:url(../imgs/studios/sligo-banr.png) no-repeat; position: absolute; top:20px; left:-24px;}
    #studiopics #letterkenny-banr{height:58px; width:221px; background:url(../imgs/studios/letterkenny-banr.png) no-repeat; position: absolute; top:20px; left:-24px;}
    
    #googlemap {height:318px; width:405px; margin:0px 0px 0px 10px;background-color: #A40101; border:9px solid #A40101; text-align: center;}
    #map_canvas {width:404px; height:292px; margin-bottom: 7px;} 

    
    #contactform{padding: 10px;}
    #openinghours .days{font-size: 15px; padding: 0px 0px 0px 10px; line-height: 26px; width:190px; text-align: right;}
    #openinghours .redupper{margin: 30px 0px 0px 15px;}

/* Level 2 */
    .input {
      margin: 8px 0;
      background: #171717;
      border-color: #171717;
      float: left;
      clear: both;
      width: 422px;
    }
    .input span {
      position: absolute;
      padding: 5px 5px 5px 8px;
      margin-left: 3px;
      color: #999;
      text-transform: uppercase;
      font-size: 12px;
      width: 409px;
    }
    .input input, .input textarea, .input select {
      position: relative;
      margin: 0px;
      border-width: 0px;
      padding: 6px;
      background: transparent;
      font: inherit;
      color:white;
      border-color: #171717;
      width: 412px;
    }
    /* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        .input input, .input textarea, .input select { padding: 4px; }
    }
    
  /* Center Studio. */   
    
#studiomid{margin: 0px 0px 0px 210px;}





/* STUDIO FORMS */   

#contact fieldset{border:none;}
#message { margin: 10px 0; padding: 0; }

.error_message { display: block; height: 22px; line-height: 11px; background: #FF0000 url('../imgs/UI/icons/contact/error.png') no-repeat 10px center; padding: 10px 10px 3px 80px; color:#FFFF00; }

.loader { padding: 0 10px; }

#contact #success_page h1 { background: url('../imgs/UI/icons/contact/success.png') left no-repeat; padding-left:82px; }

acronym { border-bottom:1px dotted #ccc; }





/************************************************************************* 
7. Gallery Page
**************************************************************************/

#gallery-content{clear:both; margin:15px; position:relative; top:-45px;}


#gallery-content .box{
     width:340px;
     background-color: #AA0101;
     border: 1px solid #950101;
     padding: 5px;
     margin:30px 10px 80px 70px;
     text-align: center;
     float:left;}
     
    #gallery-content .box:hover{
     background-color: #950101;
     border: 1px solid #BD0202;}
     
     

/* Tattoo Section */  

#tattooist-wrap {
    width:890px;
    padding-bottom: 60px;
    margin-left: 60px;
    text-align:center;}
     
 
    #gallery-content .tattooist{
         float:left;
         width:200px;
               
       }
       
    #gallery-content .tattooist img{
          border:5px solid #950101;
          margin:15px ;      
       }
     
    #gallery-content .tattooist img:hover{
          border:5px solid #CD0202;
          margin:15px;      
       }

/* Tattoo Profile */  

  #gallery-content #details{
          float:left;}

           #gallery-content #details h4{
                   font-size:25px;}
         
           #gallery-content #details img{
                   border:5px solid #950101;
                   margin:34px 15px 15px 15px;
            }
            
           #gallery-content .bio a{
             color:#FF0000;
             padding: 0px 30px 0px 0px;             
             float:right;
           }
           
           #gallery-content .bio a:hover{
             color:#FF0000;
             text-decoration: underline;
           }

  #gallery-content #gallery{
          width:720px;
  
  }
  

/************************************************************************* 
8. Profiles Page
**************************************************************************/
.profiles {height:900px;}
#profiles-content{clear:both; margin:15px; position:relative; top:-45px;}
   
     #profiles-content #list{margin-bottom: 20px; float: left;}
     
     #profiles-content #details{
         float:left;
         text-align:center;
         
           }
           
     #profiles-content #details img{
          margin:5px;
          border:5px solid #AA0101;
           }
       
     #profiles-content #bio{
            width:530px;
            margin:5px;
            padding:10px;
            text-align: right;
          }
         
 
      #profiles-content #bio h4{         
            text-align: center;
            font-family: Helvetica, Arial, sans-serif;
            font-size:33px;
            padding: 0;
            margin: 0;
            text-align: right;
            text-transform: uppercase;}

      #profiles-content #bio h3{color:#CCCCCC}
      #profiles-content #bio p{text-align: left;}
      .biolink a{color:#FF0000; text-transform: uppercase;}
      .biolink a:hover{color:#AA0101; text-transform: uppercase;}
      
         #profiles-content #bio #bio-head{height: 110px; margin-bottom: 20px; border-bottom: 1px solid #141414;}

.group {margin: 15px 0px 15px 15px; border:5px solid #AA0101;}         
     
     
/* Profile SLIDING boxes*/
   #none{background:none;} 
           .crewnme{ margin: 5px 10px 0 10px; color:#FFF; font-size:16px; 
           	font-weight: bold; float:right; 
           	text-transform:uppercase;  }
           	
           	.boxgrid a{color:white;}
           	.boxgrid a:hover{color:white;}
			
			.boxgrid{ 
				width: 147px; 
				height: 205px; 
				margin:12px; 
				float:left; 
				background:#AA0101;
				border: solid 6px #AA0101; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
					z-index:1;
				}
				
				.crewnme img{
					position: absolute; 
					z-index:0;
					top: 30px; 
				  }	
				
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 100px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 260px;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 220;
 					left: 0;
 
 				}


/************************************************************************* 
9. News Page
**************************************************************************/
.news-pg {height:853px;}