/*
	last modified: Sunday January 25th 2009 (19:18PM)
	
	design.css (extends core.css)
	contains all design specific colors, images and text formatting
	
	All style rule attributes in alpha-numeric order starting from 0-9 A-Z
	x = horizontal, y = vertical
	property: trbl, tb rl, t rl b, t r b l;
	
	-- START ALL STYLES --
	full width 		432px
	half width 		212px
	quarter width 	102px
*/

/* COLORS
-----------------------------------------------------------------------------
	
	#E1D0EB lavendar 			(body bg)
	#D4BDE2 med-lavendar 		(body border)
	#E4DFE9 pale-purple			(main-nav border)
	#8654A5 purple 				(sidebar header txt color)
	#976AB3 med-purple 			(content header text-color alt, blockquote txt-color)
	#3F3346 dark-purple 		(content header text-color alt, body (base) txt-color, sidebar header txt-color alt) 
	#34991C green 				(content header text-color, links external)
	#F419F1 pink 				(content header text-color alt, links internal)
	#F8F2FB off-white 			(content bg)
	#EFE4F4 off-white purple	(label bg)
	#C0B8C4 purple-grey			(main-nav link color)
	#20202B black				(filmstrip bg)
	#EEEFCB yellow				(highlight/em bg)
	#CE5267 red					(error border, txt-color)
	#FFDBE1 pink				(error bg)
	
*/

/* TABLE OF CONTENTS
-----------------------------------------------------------------------------
	
	WRAP
	HEADER
	CONTENT-WRAP
		COLUMN
			MAIN-NAV
			ARTICLE-META
			ARTICLE
			SOCIAL-LINKS
			PAGINATE
			ARCHIVE-CONTENT
			COMMENT-WRAP
		FILMSTRIP
		SIDEBAR
			AUTHOR-MINI-WRAP
			FLICKR-STREAM
	FOOTER
	
*/

body{
	background: #E1D0EB;
	border-top: 5px solid #D4BDE2;
	color: #3F3346;
}

a:link, 
a:visited{ color: #F419F1; }

	a:link.external, 
	a:visited.external{ color: #34991C; }

#wrap a:hover, 
#wrap a:active{ color: #3F3346; }

em{ background-color: #EEEFCB; }

h2,
h2 a:link,
h2 a:visited/*,*/
/*.comments-count a:link,
.comments-count a:visited*/{ 
	color: #34991C;
	text-decoration: none; 
}

.comments-count a:link,
.comments-count a:visited{
	color: #D5BFE2;
	text-decoration: none; 
}

h2.alt,
h2.alt a:link,
h2.alt a:visited/*,
.comments-count.alt a:link,
.comments-count.alt a:visited*/{ color: #F419F1; }

h2.alt2,
h2.alt2 a:link,
h2.alt2 a:visited/*,
.comments-count.alt2 a:link,
.comments-count.alt2 a:visited*/{ color: #976AB3; }

h2.alt3,
h2.alt3 a:link,
h2.alt3 a:visited/*,
.comments-count.alt3 a:link,
.comments-count.alt3 a:visited*/{ color: #3F3346; }

h2.archive-title{
	color: #E4DFE9;
	font-family: "Arial", Sans-Serif;
	font-weight: normal;
	margin-top: 20px;
	text-transform: uppercase;
}

ul, ol, p{ margin: 15px 0; }

ol{ list-style-position: inside; }

p, li{ line-height: 1.5; }

	blockquote#frog-quotes p{
		font-size: 15px;
		font-style: italic;
		font-weight: bold;
		margin: 21px 5px 10px 40px;
		text-align: center;
	}
	
/* WRAP
----------------------------------------------------------------------------- */

#wrap{
	margin: 0 auto;
	padding: 25px 0 0;
	position: relative;
	width: 945px;
}

	#design{
		background: transparent url(img/bg/side-design.gif) no-repeat 0 0;
		height: 517px;
		left: -135px;
		position: absolute;
		top: 25px;
		width: 135px;
	}
	
/* HEADER
----------------------------------------------------------------------------- */

#header{ position: relative; }

	#header h1{
		background: transparent url(img/bg/logo.jpg) no-repeat 0 0;
		height: 81px;
		text-indent: -13000em;
		width: 447px;
	}
	
		 #header h1 a:link,
		 #header h1 a:visited{
			display: block;
			height: 81px;
		}
		
		#header h1 a:hover,
		#header h1 a:active{ background: transparent url(img/bg/logo-hover.jpg) no-repeat 0 0; }
		
	#header blockquote{
		background: transparent url(img/bg/frog-bubble.gif) no-repeat 0 0;
		height: 81px;
		position: absolute;
		right: -4px;
		top: 0;
		width: 502px;
	}

/* CONTENT-WRAP
----------------------------------------------------------------------------- */

#content-wrap{ background: transparent url(img/bg/content-wrap.gif) repeat-y 0 10px; }

	#column,
	#filmstrip,
	#sidebar{ float: left; }

	/* COLUMN
	----------------------------------------------------------------------------- */

	#column{
		background: transparent url(img/bg/column-top.gif) no-repeat 0 0;
		padding: 0 40px;
		width: 445px;
	}
	
		#column blockquote{
			background: transparent url(img/bg/quote-top.gif) no-repeat 0 0;
			padding-left: 60px;
		}

		#column blockquote p{
			color: #976AB3;
			line-height: 1.2;
			font-size: 27px;
			text-indent: 0;
		}
		
			#column blockquote p.last{ 
				background: transparent url(img/bg/quote-bottom.gif) no-repeat 100% 100%;
				padding-bottom: 15px; 
			}
			
			#column blockquote cite{
				color: #C0B8C4;
				display: block;
				font-size: 11px;
				margin: -15px 0 0;
			}

		#column ul li{ 
			background: transparent url(img/ico/li-marker.gif) no-repeat 0 7px;
			margin-left: -15px;
			padding-left: 15px; 
		}
		
		.plugin-list-wrap ul{ width: 200px; }
			
			/* MAIN-NAV
			----------------------------------------------------------------------------- */
		
			#main-nav{ 
				border-bottom: 1px solid #E4DFE9; 
				margin: 0 -40px 0 0;
				padding: 15px 0;
				position: relative;
			}
		
				#column #main-nav li{ 
					background-image: none;
					float: left; 
					font-style: italic;
					font-weight: bold;
					margin: 0 20px 0 0;
					padding: 0;
				}
				
					#main-nav li.rss{
						position: absolute;
						right: 0;
					}
		
					#main-nav li a:link,
					#main-nav li a:visited{ 
						color: #C0B8C4;
						text-decoration: none; 
					}
		
						#main-nav li.rss a:link,
						#main-nav li.rss a:visited{ 
							background: transparent url(img/ico/rss.gif) no-repeat 100% 0;
							color: #34991C;
							padding: 0 25px 0 0;
						}
			
					#main-nav li a:hover,
					#main-nav li a:active{ color: #3F3346; }
			
						#main-nav li.rss a:hover,
						#main-nav li.rss a:active{
							background-position: 100% -17px; 
							color: #3F3346; 
						}
		
						#main-nav li a:link.act,
						#main-nav li a:visited.act{ 
							border-bottom: 4px solid #34991C;
							color: #34991C; 
							padding-bottom: 18px;
						}
			
			/* ARTICLE-META
			----------------------------------------------------------------------------- */
		
			.article-meta{ 
				background: transparent url(img/bg/article-meta.gif) repeat-x 0 1px;
				margin: 50px 0 20px; 
				position: relative;
			}
		
				.article-meta p{
					font-family: "Arial", Sans-Serif;
					font-weight: bold;
					line-height: 1;
					margin: 0;
					text-transform: uppercase;
				}
			
					.article-meta p.date{
						background-color: #F8F2FB;
						float: left; 
						font-size: 10px;
						padding-right: 5px; 
					}
					
						.article-meta p.date span{ color: #d9d4dd; }
				
					.article-meta p.comments-count{
						background: transparent url(img/ico/comments-bubble.gif) no-repeat 0 0;
						height: 23px;
						padding: 15px 0; 
						position: absolute;
						right: 0;
						text-align: center;
						top: -20px;
						width: 49px;
					}
				
			/* ARTICLE
			----------------------------------------------------------------------------- */
		
			/*.article p{ text-indent: 40px; }
	
				.article p.first-child{ text-indent: 0; }
	
				.article p.first-child:first-line{ font-weight: bold; }*/
			
			/* SOCIAL-LINKS
			----------------------------------------------------------------------------- */
		
			.social-links{ margin: 20px 0; }
		
				#column .social-links li{
					background-image: none; 
					display: inline; 
					font-weight: bold;
					margin: 0 10px 0 0; 
					padding: 0;
				}
			
					#column .social-links li a:link,
					#column .social-links li a:visited{
						background: #EFE4F4 url(img/ico/facebook.png) no-repeat 8px 8px;
						-moz-border-radius: 8px;
						-webkit-border-radius: 8px;
						border-radius: 8px;
						color: #34991C;
						opacity: .5;
						padding: 8px 8px 8px 33px;
						text-decoration: none;
					}
				
						#column .social-links li.twitter a:link,
						#column .social-links li.twitter a:visited{ background-image: url(img/ico/twitter.png); }
				
						#column .social-links li.flickr a:link,
						#column .social-links li.flickr a:visited{ background-image: url(img/ico/flickr.png); }

					#column .social-links li a:hover,
					#column .social-links li a:active{
						background-color: #34991C;
						color: #FFFFFF;
						opacity: 100;
					}
				
				/* PAGINATE
				----------------------------------------------------------------------------- */
			
				#column .paginate li{
					background-image: none;
					margin: 0;
					padding: 0;
				}
			
					.paginate li a:link,
					.paginate li a:visited{
						background-color: #EFE4F4;
						color: #F419F1;
						padding: 5px 8px;
						text-decoration: none;
					}

					#wrap .paginate li a:hover,
					#wrap .paginate li a:active{
						background-color: #F419F1;
						color: #FFFFFF;
					}
					
				p.paginate{
					border: solid #E4DFE9;
					border-width: 1px 0;
					color: #8654A5;
					font-family: "Arial", Sans-Serif;
					font-size: 11px;
					padding: 5px 0;
				}
				
					p.paginate a{ text-decoration: none; }
				
				/* ARCHIVE-CONTENT
				----------------------------------------------------------------------------- */
			
				#archive-loader.loading{
					background: transparent url(img/ico/search-loader.gif) no-repeat center center;
					height: 200px;
				}
				
				/* COMMENT-WRAP
				----------------------------------------------------------------------------- */
				
				#comments{ margin-bottom: 40px; }
				
				.comment{ 
					border-bottom: 1px solid #E4DFE9;
					margin-bottom: 30px; 
					position: relative;
				}
				
					.comment.last{ border: 0; margin-bottom: 0; }
					
					.comment-none{
						background: #EEEFCB;
						border: 0;
						margin: 30px 0;
						padding: 10px;
						text-align: center;
					}
					
						.comment-none p{
							color: #CE5267;
							font-weight: bold;
							margin: 0;
						}
					
					.comment .number-count{
						background-color: #8654A5;
						border-right: 5px solid #976AB3;
						color: #E1D0EB;
						font-family: "Arial", Sans-Serif;
						left: -60px;
						padding: 3px 0;
						position: absolute;
						text-align: center;
						top: 0;
						width: 20px;
					}
						
						.comment.author-comment .number-count{
							background-color: #F419F1;
							border-color: #D20DCF;
						}
				
					.comment p{ color: #976AB3; margin: 10px 0; }
					
						.comment.author-comment p{ color: #3F3346; }
					
						.comment p.meta{
							color: #C0B8C4;
							font-family: "Arial", Sans-Serif;
							font-size: 11px;
						}
				
	/* FILMSTRIP
	----------------------------------------------------------------------------- */
	
	#filmstrip{
		background: transparent url(img/bg/filmstrip-top.gif) no-repeat 0 0;
		margin-right: 20px;
		width: 180px;
	}
		#filmstrip ul{ 
			background: transparent url(img/bg/filmstrip-fill.gif) repeat-y 0 0;
			margin-top: 30px; 
		}
		
			#filmstrip li{ margin-bottom: 20px; }
			
				#filmstrip li.fade{
					background: transparent url(img/bg/filmstrip-ul-bottom.jpg) no-repeat 0 100%;
					height: 299px;
				}

	/* SIDEBAR
	----------------------------------------------------------------------------- */

	#sidebar{
		background-color: transparent;
		width: 220px;
	}
	
		#sidebar h3{
			background: transparent url(img/headers/call-me-dee.gif) no-repeat 0 0;
			height: 29px;
			margin-bottom: 10px;
			text-indent: -13000em;
			width: 220px;
		}
		
			#sidebar h3.flickr{ background-image: url(img/headers/me-on-flickr.gif); }
			#sidebar h3.topics{ background-image: url(img/headers/topics-i-cover.gif); }
			#sidebar h3.blogs{ background-image: url(img/headers/blogs-i-heart.gif); }
			
		#sidebar ul,
		#sidebar p{ margin: 5px 0 20px; }
	
		#sidebar p,
		#sidebar li{
			font-size: 12px;
			font-style: italic;
			font-weight: bold;
		}
		
			#sidebar li{
				background: transparent url(img/ico/heart-pink.gif) no-repeat 0 5px;
				padding-left: 25px;
				position: relative;
			}
			
				#sidebar li span{
					font-weight: normal;
					position: absolute;
					right: 0;
				}
			
				#sidebar #blogs li{ background-image: url(img/ico/heart-green.gif); }
				
				#sidebar li a:link,
				#sidebar li a:visited{
					color: #3F3346;
					text-decoration: none;
				}
				
				#sidebar li a:hover,
				#sidebar li a:active{ color: #F419F1; }
				
					#sidebar #blogs li a:hover,
					#sidebar #blogs li a:active{ color: #34991C; }
			
		/* AUTHOR-MINI-WRAP
		----------------------------------------------------------------------------- */
		
		#author-mini-wrap{ 
			background: transparent url(img/bg/author-mini-wrap.gif) no-repeat 69px 0;
			padding: 13px 0 0; 
		}
	
			#author-mini-wrap img.float-left{
				border: 2px solid #3F3346;
				margin: -13px 10px 0 0;
				padding: 0;
			}
		
			#author-mini-wrap h4{ 
				font-size: 12px; 
				font-style: italic;
			}
		
			#author-mini-wrap p{ 
				color: #976AB3; 
				font-size: 11px;
				line-height: 1.2;
				margin: 0; 
			}
			
		/* FLICKR-STREAM
		----------------------------------------------------------------------------- */
		
		#flickr-stream li{
			background-image: none;
			float: left;
			margin: 0 5px 5px 0;
			padding: 0;
		}
		
			#flickr-stream li.alt{ margin-right: 0; }
		
			#flickr-stream li img{ 
				border: 2px solid #3F3346;
				width: 66px; 
			}

/* FOOTER
----------------------------------------------------------------------------- */

#footer{
	background: transparent url(img/bg/footer.jpg) no-repeat 0 0;
	margin-top: -105px;
	padding: 120px 0 25px 200px;
}

	#footer a:link.top-link,
	#footer a:visited.top-link{
		display: block;
		height: 66px;
		left: -170px;
		position: absolute;
		text-indent: -13000em;
		top: 22px;
		width: 154px;
		z-index: 1;
	}
	
	#footer a:hover.top-link,
	#footer a:active.top-link{ background: transparent url(img/bg/arrow-up.gif) no-repeat 0 0; }

	#footer h3{
		background: transparent url(img/bg/logo-footer.gif) no-repeat 0 0;
		height: 29px;
		margin: 20px 0 0 -5px;
		text-indent: -13000em;
	}
	
		 #footer h3 a:link,
		 #footer h3 a:visited{
			display: block;
			height: 29px;
		}

	#footer p{
		font-style: italic;
		font-weight: bold;
		margin: 15px 0 0 -15px;
		position: relative;
	}
	
		#footer p.credits{
			background: transparent url(img/bg/ampersand.gif) no-repeat 100% 0;
			color: #908198;
			line-height: 1.3;
			margin: 0 0 20px 0;
			width: 225px;
		}
		
			 #footer p.credits a:link,
			 #footer p.credits a:visited{ 
				color: #908198;
				text-decoration: none;
			}

			 #footer p.credits a:hover,
			 #footer p.credits a:active{ color: #34991C; }
			
	#footer ul{ margin: 5px 0; }
	
		#footer li{ 
			float: left; 
			font-size: 12px;
			font-style: italic;
			font-weight: bold;
			margin-right: 15px; 
		}
		
			#footer li a:link,
			#footer li a:visited{
				color: #3F3346;
				text-decoration: none;
			}

			#footer li a:hover,
			#footer li a:active{ color: #F419F1; }