/* 
	Between Biscuits Photoblog design
	AUTHOR: Katrin Kerber
		
	Valid xHTML & CSS

*/

/*===============DESIGN FOR THREE MAIN PAGES=============*/

/* setting defaults*/

*
{
	margin: 0;
	padding: 0;
	border:0;
	outline:0;
}

/* Background */
body {
	background-image:url(../images/background.jpg);
	background-repeat:repeat-x;
	margin:0 auto;
	border-collapse:collapse;
	width:750px;
	background-color:#c6cca5;
	font-family: Arial, Helvetica, sans-serif;
} 


#logo a img{
	border:none;
}


/* Tabs */

.top_nav{
	width:710px;
}

.top_nav li{ 	/* default for all tabs */
	float:left;
	font-size:17px;
	letter-spacing:0.5px;
	width:120px;
	height:25px;
	list-style: none;
}

.top_nav .active{		/* tab image for active tab */
	background:url(../images/active_tab.jpg) no-repeat;
}

.top_nav .active a{
	position:absolute;
	margin:2px 15px;
	color:#54787d;
	text-decoration:none;
}

.top_nav .inactive{		/* tab image inactive tabs */
	background:url(../images/inactive_tab.jpg) no-repeat;
}

.top_nav .inactive a{
	margin:2px 15px;
	color:#f8f9f2;
	position:absolute;
	text-decoration:none;
}

.top_nav .inactive a:hover{
	text-decoration:underline;
}
	

/* Main Content */

.container{		
	clear:both;
	height:440px; 	/* 425px of image size plus 15px padding on top */
	width:710px;	/* 680 px of image size plus 30px padding left and right */
	background-color:#f8f9f2;
	position:relative;
}

.container_inside{ 	/* where image/content of page is displayed  */
	height:425px;
	width:680px;
	position:absolute;
	top:15px;
	left:15px;
	background-color:#f8f9f2;
}

.container_inside #photo{	
	border:none;
	width:680px;
	height:425px;
	position:absolute;
}

.container #image_info{ /* this is hidden unless "info & comments" link is clicked */
	position:absolute;
	visibility:hidden;
	width:680px;
	height: 425px;
	background-color:#f8f9f2;
}

.container #thumb a img{	/* thumbnail image of current photo */
	padding-left:10px;
	padding-top:10px;
}

.container #image_details{
	clear:left;
	width:50%;
	float:left;
	padding-top:20px;
	padding-left:10px;
	padding-right:20px;
}

.container #image_details h2{	/* = image title */
	font-size:18px;
	letter-spacing:0.5px;
	color:#54787d;
	font-weight:bold;
}

.container #image_details h2 span{	/* = date */
	padding-left:10px;
	font-size:13px;
	letter-spacing:0.5px;
	color:#54787d;
	font-style:italic;
}

.container #image_details p{	/* = image description */
	padding-top:10px;
	font-size:13px;
	letter-spacing:0.3px;
	color:#615145;
	line-height:18px;
}

.container #image_comments {	/* comments column and 'add comment' link */
	width:40%;
	float:left;
	padding-top:25px;
	padding-left:20px;
	padding-right:10px;
	padding-bottom:10px;
	border-left:#615145 dashed thin; 
	font-size:13px;
	letter-spacing:0.5px;
	color:#54787c;
	font-weight:bold;
}


.container #image_comments span ul{	/* actual comments */
	padding-top:10px;	
	font-size:12px;
	letter-spacing:0.3px;
	color:#615145;
	font-style:italic;
	font-weight:normal;
	line-height:18px;
	max-height:280px;	
	overflow:auto;		/* if lots of comments a scrollbar will appear */
}

.container #image_comments span li{
	margin-bottom:10px;
}

/* content for archive page */

.container #categories{	/* scroll will appear once too many thumbnails for one page exist */
	padding-top:10px;
	padding-left:10px;
}

.container #thumbnails {
	max-height:350px;
	overflow:auto;
	}

.container #thumbnails img {
	padding-top:10px;
	padding-right:10px;
	padding-left:10px;
}
	
	
/* content for about page */

.container #mike{	/* = picture */
	float:left;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
}

.container .about h2{	/* = page main header */
	padding-top:10px;
	font-size:18px;
	letter-spacing:0.5px;
	color:#54787c;
	font-weight:bold;
}

.container #general{	/* = main description */
	padding-top:10px;
	padding-right:10px;
	font-size:13px;
	letter-spacing:0.3px;
	color:#615145;
	line-height:20px;
}

.container .three_columns{
	clear:both;
	padding-top:30px;
	padding-left:10px;
	padding-right:10px;
}

.container #col1{
	width:30%;
	float:left;
	padding-right:10px;
}

.container #col2{
	width:35%;
	float:left;
	padding-right:10px;
}

.container #col3{
	width:30%;
	float:left;
	padding-right:10px;
}

.container h3{		/*  = sub-headings */
	font-size:14px;
	letter-spacing:0.5px;
	color:#54787c;
	font-weight:bold;
	padding-bottom:10px;
}

.container ul{
	list-style:none;
}

.container li{		/* = sub-desciptions */
	font-size:12px;
	color:#615145;
	font-style:italic;
	line-height:20px;
}

.container a{
	color:#6b9997;
	text-decoration:none;
}

.container a:hover{
	text-decoration:underline;
}


/* bottom navigation */

.bottom_nav{
	position:absolute;
	top:560px;
	height:80px;
	width:710px;
	background:url(../images/bottom_nav_forIE.gif) no-repeat;	/* this image is used by IE6 or below */
}

html>body .bottom_nav{		/* this image is used by IE7+, Firefox, Safari...*/
	background:url(../images/bottom_nav.png) no-repeat;
}

.bottom_nav ul{
	list-style:none;
	padding-top:10px;
	padding-left:15px;
}

.bottom_nav ul li{
	float:left;
	font-size:17px;
	letter-spacing:0.5px;
}

.bottom_nav a{
	color:#54787d;
	text-decoration:none;
}

.bottom_nav a:hover{
	text-decoration:underline;
}

.bottom_nav #previous a{	/* 'previous' link in gallery */
	padding-left:20px;	/* needed so it doesn't overlap with arrow */
	padding-right:15px;
	background:url(../images/arrow_left.gif) no-repeat;
	background-position:left;
	text-transform:lowercase;
}

.bottom_nav #next a{	/* 'next' link in gallery */
	padding-right:22px; /* needed so it doesn't overlap with arrow */
	background:url(../images/arrow_right.gif) no-repeat;
	background-position:right;
	text-transform:lowercase;
}

.bottom_nav #back a{	/* 'back' links in archive and about */
	padding-left:20px;	/* needed so it doesn't overlap with arrow */
	background:url(../images/arrow_left.gif) no-repeat;
	background-position:left;
	text-transform:lowercase;
}


.bottom_nav #info{		/* = 'wallpaper | comments' link in gallery */
	position:absolute;
	left:440px;
	cursor:pointer;
}

/* footer*/

#footer { 
	float:left;
	position:absolute;
	top:595px;
	width:750px;
	height:150px;
}

html>body #footer{	/* reflection of window for gallery only displayed in IE7+, Firefox, Safari... */
	background-image:url(../images/reflection.png);
	background-repeat:no-repeat;
}

#footer p{		/* = copyright */
	padding-top:40px;
	padding-left:40px;
	font-size:12px;
	letter-spacing:0.3px;
	color:#c6cca5;
}

#footer a{
	color:#6b9997;
	text-decoration:none;
}

#footer a:hover{
	text-decoration:underline;
}



/* hide twitter batch */
#tfbAbout { display:none }