/* ============================= */
/* == CSS MODULES FOR SCREENS == */
/* ============================= */

/* PSEUDO-SELECT MENU version 2 GML */
div.pseudo-select {
	width: 300px;
	height: auto;
	overflow: hidden;		
	margin-bottom: 20px;
	color: #000;	
	background-color: #fff;	
	border: 1px solid #7f9db9;		
	}
	div.pseudo-select h6 {
		min-height: 17px;
		padding-top: 2px;
		padding-left: 3px;
		overflow: visible;
		color: #000;
		font-weight: normal;
		background: #fff url(../../images/pseudoselect-arrow.gif) right top no-repeat;														
		}
	div.pseudo-select ul {	
		display: block;	
		list-style-type: none;
		width: 300px;
		height: 100px;
		margin: 0;				
		overflow: auto;	
		overflow-x: hidden;
		overflow-y: auto;									
		}
		div.pseudo-select ul a {
			display: block;
			width: 280px;					
			padding-left: 3px;
			color: #000;
			text-decoration: none;
			}
			div.pseudo-select ul a:hover {
				background-color: #b2b4bf;
				}
				
/* DYNAMIC IMAGE HEADERS */
/* Use class of "image-header" to indicate in HTML */	
.image-header-dynamic {
	width: 100%;
	height: 27px;
	text-indent: -10000px;	
	background-repeat: no-repeat;
	}
h1.image-header {
	height: 27px;
	}
h2.image-header {
	height: 24px;
	}
h3.image-header {
	height: 18px;
	}
				
/* SPECIAL LINKS */
/* Links that have an arrow after them */
a.special {
	padding-right: 13px;
	background: transparent url(../../images/icons/[imagename]) right center no-repeat;
	}	
	/* IE bug fix for special links - appended via JavaScript function on load */
	span.special {
		display: inline-block;
		width: 8px;
		height: 9px;
		overflow: hidden;
		margin-top: 3px;
		margin-left: 5px;
		vertical-align: top;
		background-repeat: no-repeat;
		}
				
/* TWO-COLUMN LISTS */
/* Use with JavaScript */
ul.columnar {	
	margin-top: 40px;
	}	
	ul.columnar li {	
		position: relative;
		top: -20px;
		left: -13px;
		margin: 0;
		padding: 0;
		list-style-type: none;	
		background: transparent url(../../images/list-items/box_solid_black.gif) 0px 7px no-repeat;
		}
		ul.columnar li * {
			position: relative;
			left: 13px;		
			}
			ul.columnar li * * {
				left: 0px;
				}
	li.column1 {	
		float: left;
		clear: left;
		width: 47% !important;	
		}
	li.column2 {	
		float: right;	
		width: 47% !important;	
		}
	li.none {	
		height: 1em;		
		background: none !important;
		}	
		
/* BUTTONS */
/* Works for text-based buttons as well as form buttons */
div.button {		
	display: inline-block;
	margin-top: 5px;
	padding-left: 8px;
	line-height: 1em;
	background: transparent url(../../images/buttons/cap-left.png) no-repeat;			
	}
	div.button a, div.button input {	
		position: relative;	
		display: -moz-inline-box; /* Firefox bug fix - not quite right yet */		
		display: inline-block;
		width: auto;			
		height: 17px;
		line-height: 17px;
		padding-right: 8px;			
		font-size: 11px;			
		font-weight: bold;
		text-decoration: none;
		color: #000 !important;
		background: transparent url(../../images/buttons/cap-right.png) right top no-repeat;
		border: none;
		}
	div.button input[type=submit] {			
		margin-top: 0;		
		}
		
/* DYNAMIC IMAGE HEADERS */
/* Use with JavaScript */
h1.replace-header {
	position: relative;
	width: auto;
	height: auto;	
	font-size: 16px; /* Fixed size to match image header */
	text-transform: uppercase;	
	overflow: hidden;
	}
	span.image-header {
		display: none;		
		position: absolute;
		width: 100%; /* Edited for specific container below (due to IE 6 issue) */			
		height: 100%;
		top: 0px;
		left: 0px;		
		background-position: left bottom;
		background-repeat: no-repeat;			
		background-color: #fff;	
		}