.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

.hidden {
	display: none;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!! color palettes !!!!!!!!!!!!!!!!!!!!!*/
@pal-1 : #9999cc;

@pal-2 : #6699cc;

@pal-3 : #99cc99; 



/*!!!!!!!!!!!!!!!!!!!!!!!!! this is where the css actually starts. remember, it's nested. !!!!!!!!!!!!!!!!!!!!!*/


* {
	margin: 0 auto;
}

body {
	background-color: #ccc;
	background-image: url('img/bg.png');
	font-family: helvetica, arial;
	
	#wrap {
		width: 830px;
		min-height: 1000px;
		background-color: #fff;
		a:link {color:@pal-1; text-decoration:none;}
		a:hover {background-color:#e3efd8;}
		
		#nav {
			.clearfix;
			border-bottom: 1px dotted #ccc;
			margin: 15px 15px 10px 15px;
			width: 800px;
		
			#logo {
				float: left;
				width: 190px;
				height: 50px;
				margin-bottom: 10px;
				background: url('img/name.png') no-repeat;
			}
			
			#linkage {
				ul.nav {
					float:left;
					list-style-type: none;
					
					li {
						font-size: 12px;
					}
					li:hover {
						opacity: 0.8;
					}
				}
				
				ul.layer-1 {
					li {
						padding-right: 10px;
						padding: 0 5px;
					}
					.active {
						color: #fff;
					}
					.active:hover{
						opacity: 1;
					}
					.op-1.active {
						background: @pal-1;
					}
					
					.op-2.active {
						background: @pal-2;
					}
					
					.op-3.active {
						background: @pal-3;
					}
				}
				
				ul.layer-2 {
					color: #fff;
					padding: 0 10px 0 10px;
				}
				
				ul.layer-2.op-1 {
					background: @pal-1;
				}
				
				ul.layer-2.op-2 {
					background: @pal-2;
				}
				
				ul.layer-2.op-3 {
					background: @pal-3;
				}
				
			}
			
		} // ends nav
		
		#content {
			position: relative;
			margin: 0 15px;
		
			.content_node {
				clear: both;
				border-bottom: 1px dotted #ccc;
				margin-bottom: 10px;
				
				.node_header {
					font-size: 20px;
				}
				
				.node_imgs {
					position: relative;
					margin: 10px 0;
					width: 800px;
					overflow: hidden;
					
					.right {
						width: 40px;
						height: 40px;
						position: absolute;
						top: 170px;
						left: 760px;
						background: transparent url('img/arrow_right.png');
						opacity: 0.5;
						z-index: 5000;
						cursor: pointer;
					}
					
					.right:hover{
						opacity: 0.25;
					}
					
					.left {
						width: 40px;
						height: 40px;
						position: absolute;
						top: 170px;
						left: 0px;
						background: transparent url('img/arrow_left.png');
						opacity: 0.5;
						z-index: 5000;
						cursor: pointer;
					}
					
					.left:hover{
						opacity: 0.25;
					}
				
					.slideshow {
						.clearfix;
						position: relative;
						left: 0px;
						width: 1700px;
						height: 390px;
						
						.slide {
							float: left;
							margin-left: 20px;
							width: 390px;
							height: 390px;
							background: transparent;//#ccc;
						}
						
						.slide:first-child {
							margin-left: 0px;
						}
					}
				}
				
				.node_desc {
					p {
						margin: 10px 0;
						font-size: 11px;
					}
				}
			}
			
			
			.content_node.cat-1 {
				.node_header {
					color: @pal-1;
				}
			}
			
			.content_node.cat-2 {
				.node_header {
					color: @pal-2;
				}
			}
			
			.content_node.cat-3 {
				.node_header {
					color: @pal-3;
				}
			}
			
			
			
		} // ends content
		
	} // ends wrap
	
/*	#flasher {
		position: absolute;
		top: 0px;
		left: 0%;
		width:100%;
		height: 1000px;
		background: #fff;
		//background-image: url('img/bg.png');
		z-index: 10;
	}*/
	
	#flasher {
			position: absolute;
			top: 0px;
			left: 0%;
			width:100%;
			height: 1000px;
			background: #fff;
			//background-image: url('img/bg.png');
			z-index: 5001;
		}
	
} // ends body