/* include the reset.css package. */
	
	@import url('reset.css');
	@import url('lassos.css');
	
/* get to it. */

	html {
		background:#dfb500;
	}

	body {
		width:100%;
		background:#fbf65e url('/images/beer.background.jpg') center bottom repeat-x;
		font-family:"Arial","Verdana",sans-serif;
		font-size:12pt;
	}

		#bubble-band {
			width:100%;
			height:21px;
			background:#fbf65e url('/images/beer.bubbles.jpg') center top repeat-x;
		}
		
			#faux-band {
				width:900px;
				height:21px;
				margin:0 auto;
				background:#1b4422;
				border-left:2px solid #dfb500;
				border-right:2px solid #dfb500;
			}
			
		#site-wrapper {
			width:900px;
			margin:0 auto;
			border-left:2px solid #dfb500;
			border-right:2px solid #dfb500;
		}
		
			#site-header {
				background:#1b4422;
				text-align:center;
				padding-bottom:21px;
				border-bottom:2px solid #dfb500;
			}
			
			#main-container {
				width:880px;
				overflow:hidden;
				background:#fff url('/images/container.background.jpg') top center repeat-x;
				padding:0 10px;
			}
			
				#top-navigation {
					width:880px;
					margin-top:5px;
					height:34px;
					background:transparent url('/images/top.nav.border.png') bottom center repeat-x;
				}
				
					#top-navigation li {
						margin-right:4px;
						float:left;
						height:29px;
					}
					
					#top-navigation li.last {
						margin-right:0;
					}
					
						#top-navigation li a {
							text-decoration:none;
							font-weight:bold;
							color:#505050;
							padding:6px 10px 7px 10px;  /* this line needs to be adjusted via javascript. you've got to be kidding me */
							display:block;
							background:transparent;
							border-bottom:2px solid #dfb500;
						}
						
						#top-navigation li a:hover {
							background:#fff;
						}
						
						#top-navigation li a.current-page {
							background:#fff;
							border-bottom:2px solid #fff;
							color:#1B4422;
						}
						
				#main-content {
					width:860px;
					padding:10px 10px 0 10px;
					overflow:hidden;
					background:#fff;
					font-size:10pt;
					color:#5c5c5c;
				}
						
					#homepage-slideshow {
						width:860px;
						height:200px;
						overflow:hidden;
						border-bottom:2px solid #dfb500;
						margin-bottom:30px;
					}	
					
					#main-content a {
						color:#1165ac;
						text-decoration:none;
						font-weight:bold;
					}
					
					
					#main-content a:hover {
						color:#0000ff;
						text-decoration:underline;
					}
					
					#main-content #lasso {
						width:100%;
						overflow:hidden;
					}
					
					/*
						Pretend that @import url('lassos.css') happens here.
					*/					
					
				#page-bottom {
					width:100%;
					overflow:hidden;
					padding-top:30px;
				}
						
					#yellow-band {
						width:840px;
						overflow:hidden;
						padding:16px 10px 10px 10px;
						margin-top:5px;
						background:#fdf9bb url('/images/yellow.band.top.jpg') top center no-repeat;
					}
					
						#yellow-band h3 {
							margin:0;
						}
						
						#featured-beer, 
						#calendar-events {
							width:420px;
							float:left;
							overflow:hidden;
						}
						
						#yellow-band img,
						#yellow-band .featured-beer-thumb {
							float:left;
							margin-right:10px;
							width:100px;
							height:100px;
						}
						
							#featured-beer p,
							#calendar-events ul {
								margin:10px 0;
								height:48px; /* thats three lines, folks */
								overflow:hidden;
								width:310px;
								float:right;
							}
							
							/* get specific. classes reused elsewhere. */
								#page-bottom #calendar-events li .event-date {
									font-weight:bold;
								}
								
								#page-bottom #calendar-events li .event-time {
									font-style:italic;
								}
							
		#site-footer {
			width:100%;
			background:#1b4422;
			color:#ddd;
			font-size:8pt;
			padding:10px 0;
			line-height:12pt;
			text-align:center;
		}
		
			#site-footer a {
				color:#ddd;
				font-weight:bold;
				text-decoration:none;
			}
			
			#site-footer a:hover {
				text-decoration:underline;
				color:#fff;
			}
		
			#bottom-navigation li {
				padding:0 13px 0 10px;
				display:inline;
				border-right:1px solid #888;
			}
			
			#bottom-navigation li.last {
				border-right:0;
			}