/*

   thekidbelo
			 - main stylesheet
   Created by Aaron Glenn on 2008-07-11.

*/


/* ============================================== */
/* = HTML ELEMENTS                              = */
/* ============================================== */

body{font: 75% "Helvetica Neue", "Helvetica", Arial, sans-serif; font-weight: normal; color:#9A9A9A;}
body{margin: 0; padding: 0; }


h1{display: none;}
h2{font-size: 28px; color: #888;display: block; clear: both; font-weight: normal; letter-spacing: -1px; border-bottom: 1px solid;  font-style: italic; margin-top: 8px;}
h3{font-size: 14px; color: #888; margin: 0; margin-bottom: 0px;margin-top: 5px; padding: 5px;  font-weight: normal; border-bottom: 1px solid #666;}

h2{-webkit-text-shadow: 1px 1px 1px #666; text-shadow: #DDD 1px 1px 2px;}
h2 strong{font-style: normal;}


a{color:#ccc; text-decoration: none;}
a:hover{color: #333;}
a img{border: 1px solid #333;margin: 0 3px 3px 0;}

body{}

body.splash{text-align: center; padding-top: 0;}
.splash a img{border: 0;}
#splash #site{padding: 0;}
#splash_holder a{display:block;}
#splash_holder a img{visibility: hidden;}
#splash_holder a:hover img{visibility: visible;}

p, .text_block{font-family: 'Geneva', 'Tahoma', 'Lucida Grande','Lucida Sans Unicode','Trebuchet MS',Trebuchet,Verdana,sans-serif;line-height: 2;}
.text_block{font-weight: light; background: #000 url(/images/layout/text_block_bg.jpg) bottom left repeat-x;padding: 5px;border: 1px solid #111;}

ul{margin: 0; padding: 0; list-style: none;}
ul li{margin: 0; padding: 0; list-style: none;}




/* ================================================== */
/* = SITE LAYOUT RULES                              = */
/* ================================================== */
#site{position: relative; width: 960px; margin: 0 auto; background: url(/images/layout/footer.gif) bottom left no-repeat;  padding-top: 200px; }
#site{background: url(/images/layout/footer.gif) top left no-repeat;  padding-top: 200px;}
#content{float: left; width: 670px; position: relative; display: inline; min-height: 600px; _height: 600px; }
	.content_block p{padding-left: 10px;}

#header{position: relative;}
	a#home_link{display: block;position: absolute;top: -200px; left: 0;height: 200px; width: 960px; background:  url(/images/layout/transparent.gif) top left repeat;z-index: 10;}
	
#footer{ width: 100%; height: 34px; clear: both; background: #efefef;}
  #footer a{color: #ccc;}
	#copyright{ padding-left: 10px; height: 34px; line-height: 34px; }
	#credits{ margin: 0; height: 34px; line-height: 34px; position: absolute; top: 0px; right: 10px;}
	
	
/* ==================== */
/* = NAVIGATION RULES = */
/* ==================== */
.nav{float: right; margin: 40px 0 0 0px; padding: 0; position: relative;  width: 210px; border-top: 1px solid #ccc; padding-top: 10px;}
	.nav ul, .nav li{list-style: none;margin: 0; padding: 0;}
	.nav li{display: block; clear: both; margin: 0px 0px; font-weight: normal;color: #888;}
	.nav a{ text-decoration: none; display: block; float: left; font-style: italic;}
	.nav a:hover, .active a{color: #B5B68B;}
	.active{text-align: right;}

	
	#site_nav{}
	#site_nav li{font-size: 24px;}
	#site_nav a{height: 40px;}

#piece_list{display: none; position: absolute; top: 80px; left: -200px;}


/* ================== */
/* = HOMEPAGE RULES = */
/* ================== */
#welcome{margin-bottom: 0;}
#intro{float: left; padding-top: 20px; margin-bottom: 10px; border-top: 3px #efefef solid; background: url(/images/splash_hover.jpg) -800px 200px no-repeat;}
	#intro p{margin-left: 110px;}



/* ============= */
/* = POSTS ETC = */
/* ============= */	
.post{padding: 0;  position: relative;}
  .post:hover{color: #555;}
	.post h4{margin: 0; text-transform: uppercase; background: #efefef; color: #333; padding: 2px 5px; border-top: 1px solid #666; margin-bottom: 20px;}
	.post h4 a{color: #777; display: block; padding: 3px 0;}
	.post h4 a:hover{ color: #555; }
	.post_content{line-height: 1.3;color: #999;}
	.post_date{position: absolute; top: 0px; left: -110px;/* font-weight: bold; */font-style: italic; border-top: 1px solid; padding-top: 4px; width: 100px; color: #888; font-size: 15px; }
#archive{padding: 0px; text-align: right; padding-right: 10px; font-size: 30px; font-style: italic; color: #777; border-top: 1px solid #ccc; font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; font-weight: bold; letter-spacing: -3px; background: #efefef;}
.post_detail{position: relative; float: left;margin-bottom: 10px;margin-left: 110px;}
.post_detail .post_date{top: 42px;}
/*.post_detail .post_date{position: absolute; top: 7px; right: 0; width:582px;text-align: right;padding-bottom: 4px;border: 0;border-bottom: 1px solid;}*/
#home_posts{margin-left: 110px;}
.page_image{position: absolute; bottom: -70px; left: 0; z-index: 1;width: 700px; height: 500px; overflow: hidden;}
.page_image img{position: absolute; bottom: 0; left: 0;}

.section_nav{position: absolute; top: 130px; left: 20px; padding: 0; margin: 0; width: 150px;}
	.section_nav li{list-style: none; padding: 0; margin: 0; background: #222;}
	.section_nav li a{display: block; line-height: 20px; color: #000; text-decoration: none;padding-left: 5px;}
	.section_nav li a:hover{color: #CCC;background: #555;}


.archive_link{ display: block; text-align: right; margin: 5px;}


/* ================================= */
/* = PORTFOLIO IMAGES & SLIDESHOW	 = */
/* ================================= */
#featured{float: left; text-align: center; position: relative; width: 600px;}
#featured #img_wrapper{position: relative; display: block; margin: 0 auto; width: 10px; padding: 5px; background: #ccc; border: 1px solid #333;}
.featured{position: relative;text-align: center;overflow: hidden;}
.featured .sold_badge{position: absolute; top: 0; right: 0; height: 93px; width: 93px; background: url(/images/layout/sold.png) top right no-repeat; z-index: 0;}
.featured .img_wrapper{position: relative; display: inline-block; margin: 0 auto; padding: 5px; background: #333; border: 1px solid #000;}

#caption{ display: block; clear: both; width: 100%;}
#caption .piece_title{}
.caption{}
.caption h3{font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 5px;}
.caption p{float: left; padding-left: 0; margin-right: 5px; margin-bottom: 5px;}
.caption p b{float: left; display: block; width: 60px; }
.caption p span{float: left; display: block;  font-size: 20px; line-height: 18px; font-weight: bold; letter-spacing: -2px;}
.caption p.piece_media span{width: 200px;}
.caption .sold strong{text-decoration: line-through;}
#next_link, #prev_link{display: none; position: absolute; top: 0; width: 40%; height: 100%; z-index: 100;}
#next_link{right: 0; }
#prev_link{left: 0;  }
#next_link:hover{ left: 100%; background: url(/images/layout/arrow_next.gif) 50% 50% no-repeat;}
#prev_link:hover{ background: url(/images/layout/arrow_prev.gif) 50% 50% no-repeat;}

.piece_title{}
#listing img{max-width: 300px; max-height: 300px;}
#pagination{text-align: right; padding: 10px 0; clear: both;}
#pagination #total{float:left;}
#pagination #pagination_links{float:right;}
#thumbnails{width: 630px; float:left;}

	#thumbnails_container{position: relative;width: 100%;float: left;margin-top: 5px;background: #fff url(/images/layout/thumb_stripe_light.gif); margin-bottom: 30px;  clear: both;}
	#thumbnail_list{padding-left: 5px; margin-top: -10px;}
	#thumbnail_list a{float:left;}
	#thumbnail_list a img{margin: 4px; opacity: 0.6;}
	#thumbnail_list a:hover img{opacity: 1;}

	#thumbnails ul{margin: 0;padding: 0; width: 100%;}
	#thumbnails ul li{list-style: none; float: left; margin: 3px 3px 5px 2px;}
	#thumbnails ul li a{float: left;padding: 0;}
	#thumbnails ul li a img{margin: 0;padding: 0; float:left;}
	.current_thumb{border: 2px solid #888;padding; 0; display: inline;}

	.scroll_link{float: left;display: block;height: 60px; width: 15px; color: #fff;line-height: 60px;padding-left: 5px;background: #ccc;}
	.scroll_link:hover{background: #666; color: #efefef;}
	#left_scroll_link{}
	#right_scroll_link{float:right;}

.caption{position: relative;}
.caption .actions{float: right;}

#mask_for_bad_guys, .mask{ position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: url(/images/nice_try.gif);}

/* =============== */
/* = CLIENT PAGE = */
/* =============== */
.client{margin-bottom: 20px;}
	.client .text_block{}
	.client_image{position: relative;margin-bottom: 20px;}
	.client_image img{border: 5px solid #222;}
	#client_list{clear: both;}
	#client_list li{float: left; padding-right: 80px;}
	#client_list a{color: #888; width: 250px; ;display: block;float: left;padding: 10px 0 2px 2px;}
	#client_list a:hover{}




/* ================== */
/* = BIOGRAPHY PAGE = */
/* ================== */
#bio{float: right;width: 400px;padding: 0;margin: 0;}
	#bio dt, #bio dd{padding-top: 5px;}
	#bio dt{float: left; clear: left;width: 100px;margin: 0;}
	#bio dd{float: left; width: 280px;margin-left: 0;color: #666;}

#contact{float:left;}
#contact a{font-size: 20px;}

.event_title{color: #990000;}

/* ADMIN SECTION														 */
/* ====================================================================== */
.admin_section{float: left; width: 32%;margin-right: 1%;}
	.admin_section h3{border-bottom: 1px solid;width: 95%;cursor: pointer;}
	.admin_section ul, .admin_section li{list-style: none; margin: 0; padding: 0; padding: 2px;}
	.admin_section a{}
	
#admin_links{float: left; clear: both; margin-top: 50px;}
	#admin_links a{}
	
	#admin_link{position: absolute; top: 0px; left: 50%;}
	#admin_link a{color: #ccc;}
	
	.errorExplanation{}
	.errorExplanation p{float: left;margin-top: 0; margin-right: 10px;}
	.errorExplanation ul{float: left;}
	.fieldWithErrors{border: 1px dashed red;}
	.notice{border: 1px dashed; color: red;font-size: 20px; padding: 5px;}
	
* {
	margin: 0;
}
html, body {
	height: 100%;
}
#site {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
  position: relative;
	height: 34px; /* .push must be the same height as .footer */
}
#tm_footnotes_debug{display:none;}