@import url("reset.css");
@import url("typography.css");
@import url("forms.css");


/* Overide Styles */

body {
	color: #333;
}

#container {
	width: 710px;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
}

#accessibility-links {
	display: none;
}

a, a:visited, a:focus { 
	color: #57A1CD; 
	text-decoration: none;
}

a:hover { 
	color: #612048;
	text-decoration: underline;
}

a.selected {
	color: #000;
	text-decoration: underline;
}

h1 {
	margin: 0;
	padding: 0;
}

h2 {
	font-size: 2em;
	color: #333;
}

	h2 a.headlink {
		color: #333;
	}

h3 {
	font-size: 1.4em;
	color: #666;
}


/* header */

#header {
	overflow: hidden;
	margin: 20px 0;
}
	#header h1 {
		text-indent: -99999px;
		float: left;
	}
	
	#header h1 a {
		display: block;
		background: url(../imgs/logo.gif) no-repeat 0 0;
		width: 319px;
		height: 57px;
	}
	
	#header #email {
		float: right;
		padding: 31px 0 0 0;
		font-size: 1em;
	}
	
		#header #email a {
			color: #612048;
		}



/* navigation */

#navigation {
	clear: both;
	float: left;
	width: 98px;
}

	#navigation p {
		padding: 0 0 0 5px;
		margin: 0;
	}
	
	#navigation ul {
		list-style: none;
		overflow: hidden;
		margin: 0;
		padding: 0 0 0 5px;
	}
	
	#navigation ul li {
		margin: 0;
		padding: 0;
	}
	
	#navigation a, #navigation a:visited, #navigation a:focus { 
		color: #818285; 
		text-decoration: none;
	}
	
	#navigation a:hover { 
		color: #612048;
		text-decoration: underline;
	}
	
	#navigation a.selected {
		color: #000;
		text-decoration: underline;
	}


/* content */

#content {
	overflow: visible;
	float: right;
	width: 600px;
}

#blog {
	float: left;
	width: 360px;
	padding-right: 30px;
	margin-bottom: 20px;
	border-right: 1px solid #DDD;
}
	
	#blog div.category-header {
		color: #CCC;
		border-left: 1px solid #DDD;
		padding: 2px 6px;
	}

	#blog div.posted {
		margin-bottom: 0;
		padding-bottom: 10px;
		clear: both;
		color: #999;
	}
	
	#blog div.entry p {
		margin-top: 6px;
		clear: both;
		overflow: hidden;
	}
	
		#blog div.entry p.link {
			margin-bottom: 40px;
		}
	
	#blog h2, #sidebar h2 {
		margin: 0 0 10px 0;
		padding-bottom: 6px;
		border-bottom: 3px solid #DDD;
		line-height: 1em;
	}
	
	#blog #sidebar #entries-container {
		border-bottom: none;
	}
	
#blog-page #blog div.entry img {
	margin-top: 0;
	margin-bottom: 0;
}

#blog-view-page #blog div.entry img {
	margin-right: 30px;
	margin-top: 6px;
}	

#sidebar {
	float: right;
	width: 180px;
}

	#sidebar h3 {
		margin: 0 0 10px 0;
	}
	
	#sidebar div {
		overflow: hidden;
		border-bottom: 1px dotted #DDD;
		margin-bottom: 20px;
	}


#about-page #blog div.entry img {
	float: left;
	padding: 0 20px 10px 0;
}

#image-holder {
	overflow: hidden;
	background: #FFF;
	height: 400px;
	width: 600px;
}
	
	#image-holder #slideshow {
		overflow: hidden;
		background-color: #FFF;
	    background-image: url(../imgs/ajax-loader.gif);
	    background-repeat: no-repeat;
	    background-position: center center;
	}

		#image-holder #slideshow img {
			width: 600px;
			/*height: 400px;*/
			display: block;
			margin: 0 auto;
			text-align: center;
			position: relative;
		}

#slideshow-nav {
	overflow: visible;
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
	float: left;
	width: 540px;
}

	#slideshow-nav li {
		float: left;
		padding: 1px 1px 0 0;
		background-color: #FFF;
	    background-image: url(../imgs/ajax-loader.gif);
	    background-repeat: no-repeat;
	    background-position: center top;
	}
	
	#slideshow-nav li a {
		display: block;
		float: left;
		height: 30px;
	}
	
	#slideshow-nav li a:hover {
		background: url(../imgs/pointer-grey.gif) no-repeat center 22px;
	}
	
	#slideshow-nav a.activeSlide {
		background: url(../imgs/pointer.gif) no-repeat center 22px;
	}
	
	#slideshow-nav a.activeSlide:hover {
		background: url(../imgs/pointer.gif) no-repeat center 22px;
	}
	
	#slideshow-nav img.thumb {
		height: 30px;
		margin-left: -12px;
	}
	
	#slideshow-nav div.thumb-mask {
		height: 21px;
		width: 21px;
		overflow: hidden;
		text-align: center;
	}


#next-prev-buttons {
	float: right;
	text-indent: -99999px;
	overflow: hidden;
	width: 30px;
	margin-top: 8px;
	height: 13px;
}

	#next-prev-buttons ul {
		list-style: none;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	
	#next-prev-buttons ul li {
		float: left;
	}
	
	#next-prev-buttons a {
		display: block;
		width: 13px;
		height: 13px;
	}

	#next-prev-buttons #prev {
		background: url(../imgs/next-prev-bg.gif) no-repeat top left;
	}
	
	#next-prev-buttons #prev:hover {
		background: url(../imgs/next-prev-bg.gif) no-repeat bottom left;
	}
	
	#next-prev-buttons #next {
		background: url(../imgs/next-prev-bg.gif) no-repeat top right;
		margin-left: 4px;
	}
	
	#next-prev-buttons #next:hover {
		background: url(../imgs/next-prev-bg.gif) no-repeat bottom right;
	}
	
#photo-info {
	clear: both;
	padding: 0 0 0 6px;
}
	
	#photo-info p {
		margin: 0 0 14px 0;
	}
	
	#photo-info #cat-info {
		color: #666;
		margin-bottom: 10px;
	}
	
		#photo-info #cat-info em {
			padding: 0 10px;
		}


/* tooltip styling */
.tooltip {
	display: none;
	position: absolute;
	top: -75px;
	margin-left: -42px;
	z-index: 1000;
	height: 67px;
	width: 100px;
	border: 2px solid #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
}


/* Forms */

.contactfield {
	margin-bottom: 1.5em;
}

.validation-advice {
	color: red;
	background: #fff url(../imgs/alert.gif) no-repeat left center;
	padding-left: 22px;
	padding-top: 6px;
} 

input, textarea {
	border: 1px solid #CCC;
	padding: 5px;
	font-family: Courier, Arial, sans-serif; 
	font-size: 1.2em;
	margin: 0;
	width: 330px;
}

	input:hover, textarea:hover {
		border: 1px solid #666;
	}

	input:focus, textarea:focus {
		border: 1px solid #333;
	}

input.submit {
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #444;
	font-size: 1.2em;
	width: 90px;
}

	input.submit:hover {
		background: #000;
		color: #FFF;
	}

#captcha {
	width: 130px;
	font-family: Times, serif;
	font-size: 2em;
}


/* comments */

.comment-container {
	overflow: hidden;
}

	.comment-container h4 {
		height: 25px;
		background-color: #A2D7E7;
		color: #FFF;
		line-height: 1.6;
		padding-left: 6px;
	}
	
	.comment-container .number {
		width: 25px;
		height: 25px;
		float: left;
		text-align: center;
		border: 1px solid #A2D7E7;
		line-height: 1.9;
	}
	
	.comment-container .comment {
		float: left;
		width: 440px;
		padding-left: 10px;
	}


/* footer */
					
#footer {
	clear: both;
	margin: 10px 0 0 0;
	padding: 8px 0 20px 0;
	font-size: 0.8em;
	border-top: 1px solid #DDD;
}

	#footer .credit {
		width: 300px;
		float: left;
	}
	
	#footer .social {
		width: 250px;
		float: right;
	}
	
		#footer .social ul {
			list-style: none;
			padding: 0;
			margin: 0;
			overflow: hidden;
		}
		
			#footer .social ul li {
				float: right;
				text-align: right;
				width: 60px;
			}