/* ========================================================================= */		

.blue-box {
	table-layout: fixed;
}

	.blue-box .horizontal-line {
		width: 100%;		
		height: 5px;
		background: url('blue-vertical.gif') repeat-x; 
	}	
	
	.blue-box .vertical-line {
		width: 5px;
		height: 100%;
		background:  url('blue-horizontal.gif') repeat-y; 
	}		
	
	.blue-box .corner-left-top {
		height: 16px;
		width: 16px;
		background: url('blue-left-top.gif') no-repeat;
	}		
	
	.blue-box .corner-right-top {
		height: 16px;
		width: 16px;
		background: url('blue-right-top.gif') no-repeat;
	}		
	
	.blue-box .corner-right-bottom {
		height: 16px;
		width: 16px;
		background: url('blue-right-bottom.gif') no-repeat;
	}					
	
	.blue-box .corner-left-bottom {
		height: 16px;
		width: 16px;
		background: url('blue-left-bottom.gif') no-repeat;
	}		

	.blue-box .lt {
		background-position: left top;
	}			
	
	.blue-box .lc {
		background-position: left center;
	}			

	.blue-box .rb {
		background-position: right bottom;
	}		
	
	.blue-box .header-left {
		width: 12px;
		height: 35px;
		background: url('blue-header-left.gif') no-repeat;
	}
	
	.blue-box .header-right {
		height: 35px;
		width: 12px;
		background: url('blue-header-right.gif') no-repeat;
	}
	
	.blue-box .header-content {
		height: 35px;
		background: url('blue-header-center.gif') repeat-x;
	}	
	
	.blue-box .header {
		height: 35px;
	}	
	
	.blue-box .header .lt {
		background-position: left top;
	}
	
	.blue-box .header .corner-left-top {
		height: 35px;
		background: url('blue-left-top-big.gif') no-repeat left top;
	}
	
	.blue-box .header .corner-right-top {
		height: 35px;
		background: url('blue-right-top-big.gif') no-repeat left top;
	}	
	
	.blue-box .header .horizontal-line {
		width: 10px;
	}
	
/* ========================================================================= */		

.yellow-box {
	table-layout: fixed;
}

	.yellow-box .border {
		width: 6px;
		height: 6px;
	}		

	.yellow-box .corner-left-top {
		background: url('yellow-left-top.gif') no-repeat;
	}		
	
	.yellow-box .corner-right-top {
		background: url('yellow-right-top.gif') no-repeat;
	}			
	
	.yellow-box .corner-left-bottom {
		background: url('yellow-left-bottom.gif') no-repeat;
	}				
	
	.yellow-box .corner-right-bottom {
		background: url('yellow-right-bottom.gif') no-repeat;
	}					
	
	.yellow-box .line-vertical-left {
		height: 100%;
		border-left: 1px solid yellow;
	}	
	
	.yellow-box .line-vertical-right {
		height: 100%;
		border-right: 1px solid yellow;
	}	
	
	.yellow-box .line-horizontal-top {
		width: 100%;
		border-top: 1px solid yellow;
	}	
	
	.yellow-box .line-horizontal-bottom {
		width: 100%;
		border-bottom: 1px solid yellow;
	}		
	
/* ========================================================================= */

.blue-box-new {
  position: relative;
  width: 100%;
  height: 100%;	
  table-layout: fixed;
}
	
	.blue-box-new .content-outer {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  padding: 16px 5px;
	}

	.blue-box-new .content-inner {
	  position: relative;
	  width: 100%;
	  height: 100%;
	  /*margin: 0px 5px;*/
	}	
	
	.blue-box-new .divider {
		position: absolute;
		overflow: hidden;
		left: 0px;
		width: 100%;
		height: 5px;
		background: url('blue-vertical.gif') repeat-x; 
	}	

	.blue-box-new .line {
		position: absolute;
		overflow: hidden;
		z-index: 10;
	}
	
	.blue-box-new .brace {
		width: 100%;
		height: 100%;
	}

		.blue-box-new .line.left {
			left: 0;
			top: 0;
			width: 5px;		
			height: 100%;
			padding: 16px 0px;
		}
			.blue-box-new .line.left .brace, 
			.blue-box-new .line.right .brace {
				background:  url('blue-horizontal.gif') repeat-y;
			}
		
		.blue-box-new .line.right {
			right: 0;
			top: 0;
			width: 5px;		
			height: 100%;
			padding: 16px 0px;
		}	
		
		.blue-box-new .line.top {
			left: 0;
			top: 0;
			width: 100%;
			height: 5px;
			padding: 0px 16px;
		}		
		
		.blue-box-new .line.bottom {
			left: 0px;
			bottom: 0px;
			width: 100%;
			height: 5px;
			padding: 0px 16px;
		}
		
			.blue-box-new .line.top .brace,
			.blue-box-new .line.bottom .brace {
				background: url('blue-vertical.gif') repeat-x; 
			}
	
	.blue-box-new .corner {
		position: absolute;
		overflow: hidden;
		width: 16px;
		height: 16px;
		z-index: 10;
	}	
	
		.blue-box-new .corner.left-top {
			left: 0;
			top: 0;
			background: url('blue-left-top.gif') no-repeat;
		}
		
		.blue-box-new .corner.right-top {
			right: 0;
			top: 0;
			background: url('blue-right-top.gif') no-repeat;
		}
		
		.blue-box-new .corner.left-bottom {
			left: 0;
			bottom: 0;
			background: url('blue-left-bottom.gif') no-repeat; 
		}
		
		.blue-box-new .corner.right-bottom {
			right: 0;
			bottom: 0;
			background: url('blue-right-bottom.gif') no-repeat;
		}	
		
	.blue-header {
		position: relative;
		width: 100%;
		height: 10%;
		background-color: magenta;
		z-index: 2;
	}

/* ========================================================================= */		

.blue-thin-box {
	table-layout: fixed;
}

	.blue-thin-box .border {
		width: 6px;
		height: 6px;
	}		

	.blue-thin-box .corner-left-top {
		background: url('blue-thin-left-top.gif') no-repeat;
	}		
	
	.blue-thin-box .corner-right-top {
		background: url('blue-thin-right-top.gif') no-repeat;
	}			
	
	.blue-thin-box .corner-left-bottom {
		background: url('blue-thin-left-bottom.gif') no-repeat;
	}				
	
	.blue-thin-box .corner-right-bottom {
		background: url('blue-thin-right-bottom.gif') no-repeat;
	}					
	
	.blue-thin-box .line-vertical-left {
		height: 100%;
		border-left: 1px solid #0403d4;
	}	
	
	.blue-thin-box .line-vertical-right {
		height: 100%;
		border-right: 1px solid #0403d4;
	}	
	
	.blue-thin-box .line-horizontal-top {
		width: 100%;
		border-top: 1px solid #0403d4;
	}	
	
	.blue-thin-box .line-horizontal-bottom {
		width: 100%;
		border-bottom: 1px solid #0403d4;
	}		

/* ========================================================================= */