/*
Title: Klondikecycleworks.com layout-css
Updated: April 8 2008
*/

/* Top of page
---------------------------------------------------------- */

	#top {
		margin: 0 0 0 30px;
		width: 900px;
		height: 75px;
		background: url("http://klondikecycleworks.com/images/layout/bg-top.jpg") no-repeat bottom right;
		}
		
	#logo {
		float: left;
		margin: 21px 0 0 30px;
		width: 253px;
		height: 25px;
		}
		
		#menu {
			float: right;
			margin: 37px 15px 0 0;
			width: 540px;
			height: 9px;
			}
		
		#menu li {
			float: left;
			margin: 0 0 0 40px;
			padding: 0;			
			}
				
			/*------------- Frames and Forks -------------*/	

			#m-frames-forks a {
				display: block;
				width: 128px;
				height: 9px;
				background: url("http://klondikecycleworks.com/images/layout/menu-frames-forks.jpg") no-repeat 0 0;
				}
			
			#m-frames-forks a:hover, body#frames-forks #m-frames-forks a {
				background-position: -128px 0;
				}
				
			/*------------- Gallery -------------*/	

			#m-gallery a {
				display: block;
				width: 55px;
				height: 9px;
				background: url("http://klondikecycleworks.com/images/layout/menu-gallery.jpg") no-repeat 0 0;
				}
			
			#m-gallery a:hover, body#gallery #m-gallery a {
				background-position: -55px 0;
				}
				
			/*------------- Company -------------*/	

			#m-company a {
				display: block;
				width: 64px;
				height: 9px;
				background: url("http://klondikecycleworks.com/images/layout/menu-company.jpg") no-repeat 0 0;
				}

			#m-company a:hover, body#company #m-company a {
				background-position: -64px 0;
				}
				
			/*------------- Blog -------------*/	

			#m-blog a {
				display: block;
				width: 33px;
				height: 9px;
				background: url("http://klondikecycleworks.com/images/layout/menu-blog.jpg") no-repeat 0 0;
				}

			#m-blog a:hover, body#blog #m-blog a {
				background-position: -33px 0;
				}
					
			/*------------- Contact -------------*/	

			#m-contact a {
				display: block;
				width: 59px;
				height: 9px;
				background: url("http://klondikecycleworks.com/images/layout/menu-contact.jpg") no-repeat 0 0;
				}

			#m-contact a:hover, body#contact #m-contact a {
				background-position: -59px 0;
				}
		
		
/* Homepage and sub-page content
---------------------------------------------------------- */

	#homepage-content {
		width: 900px;
		margin: 0 30px;
		min-height: 420px;
		background: #e8e6cf url("http://klondikecycleworks.com/images/layout/feature-homepage.jpg") no-repeat bottom right;
		}
		
		#column-left {
			margin: 0 10px 0 30px;
			padding: 40px 0 20px 0;
			width: 420px;
			}
			
			#column-left h2 {
				margin-bottom: 20px;
				font-size: 115%;
				font-weight: bold;
				color: #c66b4d;
				}
				
			#column-left p {
				margin-bottom: 10px;
				font-size: 115%;
				line-height: 24px;
				}
			
			#up-here {
				margin: 0 0 20px 0;
				width: 394px;
				height: 47px;
				background: url("http://klondikecycleworks.com/images/layout/title-hereyukon.gif") no-repeat 0 0;
				text-indent: -9000px;
				}
				
			#learn-more {
				margin: 20px 0 0 323px;
				width: 96px;
				height: 25px;
				}
				
	#page-content {
		width: 900px;
		min-height: 460px;
		margin: 0 30px;
		padding-bottom: 20px;
		background: #e8e6cf;
		}
		
		#text-body {
			margin: 0 10px 0 30px;
			padding: 40px 0 20px 0;
			width: 580px;
			}

		#text-body-wide {
			margin: 0 10px 0 30px;
			padding: 40px 0 20px 0;
			width: 840px;
			min-height: 1000px;
			}
			
			#text-body-wide ul {
				float: left;
				}
				
				#text-body-wide li {
					float: left;
					margin: 0 10px 10px 0;
					}
					
			.gallery-category {
				float: left;
				margin: 10px 0;
				width: 840px;		
				}
			
			#text-body h1 {
				margin-bottom: 20px;
				padding-bottom: 10px;
				font-size: 160%;
				border-bottom: 5px solid #e1ddc4;
				}
				
			#text-body-wide h1 {
				margin-bottom: 20px;
				padding-bottom: 10px;
				font-size: 130%;
				border-bottom: 5px solid #e1ddc4;
				}
							
			#text-body p {
				margin-bottom: 10px;
				font-size: 100%;
				line-height: 18px;
				}

			#text-body img, #text-body-wide img {
				background: #FFF;
				padding: 5px;
				margin: 0;
				}
				
				.image-left {
					float: left;
					margin: 0 20px 10px 0;
					}
					
				.image-right {
					float: right;
					margin: 0 0 10px 20px;
					}
		
		#sub-menu {
			float: right;
			background: #e1ddc4;
			width: 253px;
			margin-bottom: 30px;
			list-style: none;
			}
			
			#sub-menu li {
				font-size: 100%;
				border-bottom: 1px solid #e8e6cf;
				}
				
			#sub-menu a {
				display: block;
				margin-bottom: 1px;	
				padding: 10px 20px;
				color: #596054;
				text-decoration: none;
				}
				
			#sub-menu a:hover {
				text-decoration: none;
				background: #FFF;
				}
				
		#blog-sidebar {
			float: right;
			background: #e1ddc4;
			width: 213px;
			padding: 0 20px 20px 20px;
			margin-bottom: 30px;
			list-style: none;
			color: #596054;
			}
			
			#blog-sidebar h2 {
				font-size: 100%;
				margin: 20px 0 10px 0;
				font-style: italic;
				}
				
			#blog-sidebar p {
				margin-bottom: 10px;
				font-size: 100%;
				line-height: 18px;
				}
			
			#blog-sidebar li {
				font-size: 100%;
				margin-bottom: 4px;
				}
			
			
/* Blog homepage
---------------------------------------------------------- */
			
	#blog-homepage {
		float: right;
		clear: both;
		margin: 0 30px 0 554px;
		padding: 0 30px 30px 30px;
		width: 256px;
		background: #FFF url("http://klondikecycleworks.com/images/layout/bg-bloghomepage.gif") no-repeat top right;
		}
		
		#recent-blog-posts {
			margin: 30px 0 20px 0;
			width: 116px;
			height: 8px;
			background: url("http://klondikecycleworks.com/images/layout/title-recentblog.gif") no-repeat 0 0;
			text-indent: -9000px;
			}
			
		#blog-body {
			margin: 0 10px 0 30px;
			padding: 40px 0 20px 0;
			width: 580px;
			}
			
			#blog-body h1 {
				margin-bottom: 20px;
				padding-bottom: 10px;
				font-size: 160%;
				border-bottom: 5px solid #e1ddc4;
				}
			
		.post {
			margin-bottom: 20px;
			}
			
				#blog-body .post {
					margin-bottom: 20px;
					padding-bottom: 10px;
					border-bottom: 2px solid #e1ddc4;
					}
			
			.post h2 {
				margin-bottom: 5px;
				font-size: 100%;
				}
				
				#blog-body .post h2 {
					font-size: 120%;
					}
				
			.post h4 {
				margin-bottom: 10px;
				font-size: 90%;
				color: #66623e;
				}
				
			.post p {
				margin-bottom: 10px;
				font-size: 100%;
				line-height: 18px;
				}
				
		.inline-menu {
			margin-top: 20px;
			text-align: right;
			font-size: 100%;
			}
			
		#contact-form {
			margin: 20px 0;
			}
			
			#contact-form label {
				margin-top: 20px;
				font-size: 100%;
				line-height: 18px;
				}


/* Footer
---------------------------------------------------------- */

	#footer {
		clear: both;
		width: 960px;
		padding: 20px 0 30px 0;
		background: #66623e;
		color: #e8e6cf;
		font-size: 90%;
		display: none;
		}
	
		#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
		color: #e8e6cf;
		}