/*------------------------------------------------------------------
Title: Josh Wrede Tattoos
Created by: Chris Arnold, LIMBER > limbercreative.com
-------------------------------------------------------------------

[Table of contents]

1. Reset Styles
2. Utilities
3. Aesthetics
		3.1. Headers / h1, h2, h3
		3.2. Links / a:link
		3.3. Navigation / Lists
		3.4. Footer / #footer
		3.5. Form Elements / form
		3.6. Text / p, blockquotes
4. Structure & Layout
5. Page Specific

/*---------------- 1. RESET STYLES ---------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
:focus {outline: 0;}
body {line-height: 1; color: black; background: white; font-size: 62.5%; font-family: Verdana, Geneva, sans-serif;}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {}
blockquote, q {quotes: "" "";}
/* IE 5.5+ tranparent png fix */
img, div {behavior: url(http://beta.jwredetattoos.com/ie/iepngfix.htc)}
 
/*---------------- 2. UTILITIES ---------------*/

body{
	background: #ded7c4 url(/images/bg_body.jpg) top center no-repeat;
}
	strong {font-weight: bold;}
	em {font-style: italic;}
	.clear {clear: both;}
	 
/*---------------- 3. AESTHETICS ---------------*/
	 
	/* --- 3.1 HEADERS --- */
	
	h1 {font: 1.6em/1.6em Georgia, "Times New Roman", Times, serif; color: #663333; text-transform: uppercase;}
	h2 {font: 1.4em/2.2em Georgia, "Times New Roman", Times, serif; color: #663333; text-transform: uppercase;}
	h3 {margin: .5em 0; font: 1em/1.4em Verdana, Arial, Helvetica, sans-serif; color: #000000; font-weight: bold;}

	/* --- 3.2 LINKS --- */

	a:link, a:visited {text-decoration: none; color: #663333;}
	a:hover, a:active {text-decoration: none; color: #000;}
			
	/* --- 3.3 NAVIGATION / LISTS --- */
	
	#nav { background: url(/images/nav.png); text-align: center; margin: 0; padding: 0; position: relative; width: 425px; height: 35px; top: 32px; left: 400px; }
	#nav li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0; text-indent: -999em; overflow: hidden;}
	#nav li, #nav a {text-decoration: none; display: block; height: 35px;}
	
	#nav #home {left: 0; width: 92px;}
	#nav #tattoos {left: 92px; width: 108px;}
	#nav #paintings {left: 200px; width: 125px;}
	#nav #contact {left: 325px; width: 100px;}
	
	#nav #home a:hover {background: transparent url(/images/nav.png) 0 -35px no-repeat;}
	#nav #tattoos a:hover {background: transparent url(/images/nav.png) -92px -35px no-repeat;}
	#nav #paintings a:hover {background: transparent url(/images/nav.png) -200px -35px no-repeat;}
	#nav #contact a:hover {background: transparent url(/images/nav.png) -325px -35px no-repeat;}
	
	/* --- Navigation on state --- */
	
	#homePage #home {left: 0; width: 92px;}
	#homePage #home a {background: transparent url(/images/nav.png) 0 -70px no-repeat;}
	#homePage #home a:hover {background: transparent url(/images/nav.png) 0 -70px no-repeat;}
	#homePage #home a:active {background: transparent url(/images/nav.png) 0 -70px no-repeat;}
	
	#tattoosPage #tattoos {left: 92px; width: 108px;}
	#tattoosPage #tattoos a {background: transparent url(/images/nav.png) -92px -70px no-repeat;}
	#tattoosPage #tattoos a:hover {background: transparent url(/images/nav.png) -92px -70px no-repeat;}
	#tattoosPage #tattoos a:active {background: transparent url(/images/nav.png) -92px -70px no-repeat;}
	
	#paintingsPage #paintings {left: 200px; width: 125px;}
	#paintingsPage #paintings a {background: transparent url(/images/nav.png) -200px -70px no-repeat;}
	#paintingsPage #paintings a:hover {background: transparent url(/images/nav.png) -200px -70px no-repeat;}
	#paintingsPage #paintings a:active {background: transparent url(/images/nav.png) -200px -70px no-repeat;}
	
	#contactPage #contact {left: 325px; width: 100px;}
	#contactPage #contact a {background: transparent url(/images/nav.png) -325px -70px no-repeat;}
	#contactPage #contact a:hover {background: transparent url(/images/nav.png) -325px -70px no-repeat;}
	#contactPage #contact a:active {background: transparent url(/images/nav.png) -325px -70px no-repeat;}

	/* --- 3.4 FOOTER --- */ 	
	
	#footer{
		clear: both;
		text-align: center;
		padding: 30px 0px 30px 10px;
	}

	 
	/* --- 3.5 FORM ELEMENTS --- */
	
 	/* --- 3.6 TEXT --- */
	
	p{margin: .5em 0; font: 1.2em/1.8em Verdana, Arial, Helvetica, sans-serif; color: #333333; padding-top: 5px;}
	 
/*---------------- 4. STRUCTURE & LAYOUT ---------------*/

#wrap{
	width: 830px;
	margin: 0 auto;
}

#header{
	width: 830px;
	height: 165px;
}

#logo{
	position: relative;
	top: 75px;
	width: 300px;
	height: 50px;
	overflow: hidden;
	margin: 0;
	border: 0;
	background: url(/images/logo.png) no-repeat;
}	
	
a#logo{
	width: 300px;
	height: 50px;
	display: block;
	background: url(/images/logo.png) 0 0 no-repeat;
	text-indent: -9999em;	
}

a#logo:hover{
	background: url(/images/logo.png) 0 -50px no-repeat;	
}

#col_left_home,
#col_left_tattoos,
#col_left_paintings,
#col_left_contact{
	width: 556px;
	float: left;
	margin-right:15px;
}
	
#col_left_home{
	background: url(/images/small_box.png) no-repeat;
	min-height: 472px;
}

#col_left_tattoos,
#col_left_paintings{
	background: url(/images/large_box.png) no-repeat;
	height: 600px;
}

#video_wrap{
	position: relative;
	top: 26px;
	left: 18px;
	width: 520px;
	height: 294px;
}

#hr_big{
	width: 545px;
	height: 4px;
	margin: 70px 0px 0px 10px;
	background: url(/images/hr_big.png) no-repeat;	
}

#content{
	margin-left: 10px;
	margin-top: 20px;
}

#col_right{
	width: 230px;
	border-left: 1px solid #c4beaf;
	float: left;
	padding-left: 15px;	
}

.hr_small{
	width: 240px;
	height: 4px;
	margin: 20px 0px 10px 0px;
	background: url(/images/hr_small.png) no-repeat;	
}

#news{
	width: 240px;
}
		
#news p{
	font: 1.1em/1.6em Verdana, Arial, Helvetica, sans-serif;
	padding: 0px 0px 15px 0px;
}
	
.preview_tattoos{
	width: 200px;
	padding: 10px;
	background: url(/images/bg_work.png) repeat;		
}

#slider{	
}

.slide{
	width: 200px;
	padding: 15px;
	background: url(/images/bg_work.png) repeat;	
}

.work_tattoos,
.work_paintings{
	width: 200px;
	padding: 15px;
	background: url(/images/bg_work.png) repeat;		
}
	
ul.thumbs{
	list-style: none;
}
	
.thumbs li{
	width: 52px;
	height: 52px;
	float: left;
	margin: 0px 10px 10px 4px;
	background: url(/images/photo_frame.png);	
}

.icon{
	margin: 4px 0px 0px 4px;
}

.big{
	position: relative;
	top: 28px;
	left: 24px;
}

#preloader{
	display: none;
}

/* Flickr Feed */

#flickr{
	width: 200px;
	height: 62px;
	padding: 10px;
	background: url(/images/bg_work.png) repeat;		
}

#flickr li{
	width: 52px;
	height: 52px;
	float: left;
	margin: 0px 10px 10px 4px;
	background: url(/images/photo_frame.png);	
}

#flickr li img{
	float: left;
	width: 45px;
	height: 35px;
	margin: 4px 0px 0px 4px;
}

/* Button Links */

.button{
	margin: 10px 9px 10px 0px;
	text-align: right;
}

.toggle{
	margin: 10px 9px 10px 0px;
}

a.btn {
	padding: 5px;
	font-size: 90%;
	color: #333 !important;
	background-color: #c8bfa9;
}

a.btn:hover {
	color: #333 !important;
	background-color: #b8af98;
	background-image: none;
	border-bottom: none;
}


/*---------------- 5. PAGE SPECIFIC ---------------*/

form{
	margin: 0;
}

label{
	clear: both;
	display: block;
	margin: 14px 0 -4px 0;
}

label.details_label{
}

input.text-input{
	margin-top: 8px;
	padding: 2px;
	border: 1px solid #fff;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

textarea#message{
	width: 400px;
	height: 100px;
	padding: 5px;
	border: 1px solid #fff;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

#message_label{
	margin: 20px 0 6px 0;
	font-weight: bold;
	color: #444;
}

#name_label, #email_label, #phone_label{
	font-weight: bold;
	color: #444;
}

label.error{
	display: none;
	margin: -14px 0 0 230px;
	color: #990033;
	font-style: italic;
}

#thankyou-message{
	padding: 20px 0 0 0;
	color: #333;
	font-size: 120%;
}