/* CSS Document */

/* Font Face
--------------------------------------------------------------- */

@font-face {
    font-family: 'AppleChancery';
    src: url('apple_chancery-webfont.eot');
    src: url('apple_chancery-webfont.eot?#iefix') format('embedded-opentype'),
         url('apple_chancery-webfont.woff') format('woff'),
         url('apple_chancery-webfont.ttf') format('truetype'),
         url('apple_chancery-webfont.svgz#AppleChancery') format('svg'),
         url('apple_chancery-webfont.svg#AppleChancery') format('svg');
    font-weight: normal;
    font-style: normal;	
}
	
	.appleChancery {
		font-family: "AppleChancery", "Times New Roman";
	}

/* Global Styles
--------------------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
}

body, html {
	min-height: 101%;
}

body {
	text-align: left;
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color: #555;
	background: url(../../images/layout/bodyBg.jpg) top repeat-x #e7e7e7;
	margin: 0px;
}

a:link, a:visited, a:focus {
	color: #5E5B48;
	text-decoration: underline;
	outline: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

a img {
	border: none;
}

/* H1/H2/H3 Styles
--------------------------------------------------------------- */

h1 {
	font-size: 2.8em;
	font-weight: normal;
	color: #3c3c3c;
	text-transform: uppercase;
	letter-spacing: -2px;
}

	h1 span {
		display: block;
		text-transform: none;
		color: #b6b6b6;
	}

h2 {
	font-size: 1.6em;
	font-weight: normal;
	color: #333;
}

	h2.spec {
		background: #eee;
		border: 1px solid #ccc;
		padding: 5px;
		cursor: pointer;
		margin: 4px 0;
	}
	
		h2.spec:hover {
			background: #ddd;
		}

h3 {
	font-size: 1.6em;
	margin: 20px 0 0 0;
}

/* Container Styles
--------------------------------------------------------------- */

#outerContainer {
	width: 100%;
	float: left;
}

#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	font-size: 1.2em;
}

	#contentContainer {
		width: 960px;
		border-top: 330px solid #e7e7e7;
	}
	
/* Main Styles
--------------------------------------------------------------- */

		#main {
			float: left;
			width: 560px;
			padding: 0px 10px 0px 0px;
		}
		
			#tattoo-gallery #main {
				width: 600px;
			}
			
			#tattoo-studio #main {
				width: 500px;
			}
		
			#main p {
				margin: 0px 0px 20px 0px;
				font-size: 1.3em;
				line-height: 24px;
			}
			
			#main ul {
				font-size: 1.3em;
				padding: 3px 0px 3px 30px;
			}
			
				#main ul li {
					padding: 4px 0px 4px 10px;
				}
				
			#main ol {
				font-size: 1.3em;
				padding: 0px 0px 10px 30px;
			}
			
				#main ol li {
					margin: 10px 0px;
				}
				
			#main .cta-gallery {
				float: right;
			}
				
		#main p.boldPara {
			background: #333;
			padding: 15px;
			font-size: 1.4em;
			color: #ccc;
			font-family: Georgia, "Times New Roman", Times, serif;
			-webkit-border-top-left-radius: 10px;
			-moz-border-radius-topleft: 10px;
			border-top-left-radius: 10px;
		}
		
			#main p.boldPara a {
				color: #888;
			}
			
				#main p.boldPara a:hover {
					color: #FF0;
				}
				
		#main p.small {
			font-size: 1em;
			line-height: 15px;
		}
			
	#tattoo-gallery-container img {
		border: 1px solid #ccc;
		padding: 4px;
		margin: 3px 5px;
	}
	
		#tattoo-gallery-container img:hover {
			border-color: #555;
		}

	#map {
		width: 400px;
		height: 240px;
		background: #eee;
		margin: 10px 0 20px 0;
	}


/* Sidebar/CTA Styles
--------------------------------------------------------------- */
		
		#sidebar {
			float: right;
			width: 390px;
		}
			
			#tattoo-gallery #sidebar {
				width: 350px;
			}
			
				#tattoo-studio #sidebar {
					width: 450px;
				}
			
				#sidebar ul#gallery-sidebar-nav {
					list-style: none;
				}
				
				#sidebar ul#gallery-sidebar-nav li {
					float: left;
					width: 350px;
					margin: 0 0 1px 0;
				}
				
					#sidebar ul#gallery-sidebar-nav li a {
						float: left;
						width: 330px;
						padding: 10px 10px;
						background: #111 url(../../images/layout/headerBg.jpg) bottom center;
						color: #ccc;
						text-decoration: none;
					}
					
					#sidebar ul#gallery-sidebar-nav li a:hover {
						background: #333;
						color: #ccc;
						-webkit-transition:all 0.5s ease-in;  
						-moz-transition:all 0.5s ease-in;  
						-o-transition:all 0.5s ease-in;  
						transition:all 0.5s ease-in; 
					}
		
		#sidebar h2 {
			margin: 0px 0 10px 0;
			padding: 20px 0 0 0;
			text-transform: uppercase;
			letter-spacing: -1px;
		}
		
			#sidebar p {
				font-size: 1.2em;
				margin: 10px 0;
			}
		
		#sidebar-gallery {
			text-align: center;
		}
			
			#sidebar-gallery img {
				padding: 2px;
				border: 1px solid #ccc;
				margin: 0 2px 0 0;
			}
			
			
		#cta-sidebar-gift-vouchers {
			margin: 20px 0 0 0;
		}
		
			#index #cta-sidebar-gift-vouchers {
				display: none;
			}
					
		
/* Header Styles
--------------------------------------------------------------- */

#header {
	clear: both;
	width: 960px;
	height: 232px;
	background: url(../../images/layout/headerBg.jpg) right;
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
}

	#logo {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 10;
	}
	
	#cta-top-right {
		width: 400px;
		float: right;
		padding: 80px 0px 0px 0px;
		text-align: right;
		height: 132px;
		color: #555;
		font-size: 1.2em;
	}
	
		#cta-top-right a {
			color: #888;
		}
		
			#cta-top-right a:hover {
				color: #ccc;
			}
		
		#cta-top-right p {
			margin-bottom: 15px;
		}

/* Main Image Styles
--------------------------------------------------------------- */

#imgmain,
#slideshow {
	position: relative;
	width: 390px;
	height: 533px;
	margin: 0 0 20px 0;
}

	#imgmain {
		z-index: 100;
	}
    
     #slideshow img {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 8;
     }
    
     #slideshow img.active {
          z-index: 10;
     }
    
     #slideshow img.last-active {
          z-index: 9;
     }
	 
#main-runner {
	position: absolute;
	z-index: 10;
	left: 0px;
	top: 293px;
	width: 520px;
	height: 255px;
	padding: 60px 30px 0px 0px;
	text-align: left;
	background: url(../../images/layout/main-runner-bg.jpg);
}

	#index #main-runner {
	}

	#main-runner h2 {
		font-size: 4em;
		letter-spacing: -3px;
		color: #8b8b8b;
		font-family: 'AppleChancery';
	}
	
		#main-runner h3 {
			font-size: 5.3em;
			line-height: 45px;
			color: #3c3b3b;
			letter-spacing: -3px;
		}
	
		#main-runner p {
			letter-spacing: -2px;
			font-size: 3.1em;
			color: #6e6e6e;
			line-height: 54px;
			margin-top: 5px;
		}
		
			#main-runner p a {
				color: #ccc;
			}

/* Horizontal Navigation Styles
--------------------------------------------------------------- */

#navigation {
	width: 960px;
	height: 61px;
	background:url(../../images/layout/bodyBg.jpg) 0px -232px;
	z-index: 1;
	position: absolute;
	left: 0px;
	top: 232px;
}

	#navigation ul {
		margin: 0px;
		padding: 0px;
	}
	
		#navigation ul li {
			display: inline;
			list-style: none;
		}
			  
			#navigation ul li a {
				float: left;
				text-align: center;
				color: #ccc;
				text-decoration: none;
				padding: 17px 23px 12px 23px;
				font-size: 1.1em;
			}
			
				#navigation ul li a.singleline {
					padding-top: 25px;
					padding-bottom: 20px;
				}
			
				#navigation ul li a span {
					display: block;
					color: #999;
				}

				#navigation ul li a:hover {
					color: #eee;
					background: url(../../images/layout/navBg-a-hover.jpg) top center no-repeat;
				}
				



/* Footer Styles
--------------------------------------------------------------- */

#outerFooter {
	float: left;
	width: 100%;
	background: #eee;
	margin: 30px 0px 0px 0px;
	border-top: 1px dotted #ccc;
}

#footer {
	clear: both;
	width: 960px;
	color: #333;
	margin: 0px auto;
	padding: 30px 0px 60px 0px;
	font-size: 1.2em;
}

	#footer h2 {
		font-weight: bold;
		color: #111;
		padding: 3px 5px;
		font-size: 1.2em;
		font-style: italic;
	}
		
	#footer li {
		list-style: none;
	}
	
	#footer a {
		white-space: nowrap;
		color: #777;
		text-decoration: none;
	}
		
		#footer a:hover {
			color: #111;
			text-decoration: underline;
		}


ul#footerNav {
	float: right;
	margin: 0px;
	padding: 0px;
	list-style: none;
	width: 960px;
	text-align: right;
}
	ul#footerNav li {
		display: inline;
		margin: 0px 3px 0px 0px;
	}
	
	#footerSocial {
		margin: 10px 0px 0px 0px;
		padding: 0px;
		text-align: right;
		width: 960px;
		float: right;
	}
	
		#footerSocial li {
			float: right;
			list-style: none;
		}
		
			#footerSocial li a {
				color: #333333;
				padding: 0px 4px 0px 0px;
			}

ul#footerDetails  {
	clear:left;
	float: right;
	text-align: right;
	margin: 5px 0px 5px 0px;
	width: 960px;
}
	ul#footerDetails li {
		display:block;
		list-style: none;
	}
	
ul#footerW3C {
	margin: 0px;
	text-align: right;
	padding: 0px 0px;
}
	ul#footerW3C li {
		display: inline;
	}

#adtrakDesign {
	text-align: right;
	width: 850px;
	float: right;
}


/* Float Styles
--------------------------------------------------------------- */

.left, .img-left {
	float: left;
}

	.img-left {
		margin: 10px 10px 10px 0px;
	}

.right, .img-right {
	float: right;
} 

	.img-right {
		margin: 10px 0px 10px 10px;
	}

	
/* Generic Styles
--------------------------------------------------------------- */

.clearfix {
	clear: both;
}