@charset "utf-8";
/* CSS Document */

/* Marigold #FFDD33 looks good on charcoal */

/* FOR REFERENCE ONLY */
/* IE5 box model hack */
* html #sample-div
{
	/* \width: 800px; /* IE width */
	/* w\idth: 760px; /* Standard width, with 20px padding+borders on either side */
}

/***************************************************************************************************************************/
/*---------- STANDARD STYLES BEGIN ----------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/

/********** Body ********************/
body
{
	/* Box model */
	margin:0;
	padding:0;
	border:0; /* This removes the border around the viewport in old versions of IE */

	/* Dimensions */
	width: 100%;
	min-width: 800px; /* Enforce a minimum width for the layout; the min-width property does not work in old versions of Internet Explorer */	
	
	/* Text */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;

	/* Background */
/*	background: #FFFFFF url(../images/cardlogix-bg.gif) top repeat-x; /* Light gray theme */
	background: #ECECEC url(../images/home/cardlogix-bg.png) top repeat-x; /* Light gray theme (D1D1D1-ECECEC) */
/*	background: #333333 url(../images/bg-dark-gray.jpg) top repeat-x; /* Dark gray theme */
}

/********** Link Anchors (Default) ********************/
a:link,
a:visited {
	color: #C60C30;
	font-weight: bold;
	text-decoration: none;
}
/********** Link Anchors (Active) ********************/
a:hover,
a:active,
a:focus {
	text-decoration: underline;
}

/********** Headings ********************/
h1,
h2,
h3,
h4 {
	margin: .8em 0 .2em 0;
	padding: 0;
	color: #666666;
}
h1 {
	font-size:2em;
}
h2 {
	font-size:1.4em;
}
h3 {
	font-size:1.2em;
}
h4 {
	font-size:1em;
}

/********** Paragraphs ********************/
p
{
	/* Box model */
	margin: .4em 0 .8em 0;
	padding: 0;

	/* Text */
	color: #666666;
	text-align: justify;
}

/********** Images ********************/
img
{
	margin: 0;
}


/**********************************************************************************************************************************/
/*---------- HEADER / FOOTER STYLES BEGIN ----------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/

/********** Header Container ********************/
div#header {
	/* Position */
	position: absolute;
	top: 0;
	/* Dimensions */
	width: 100%;
	height: 100px;
	/* Background */
	background: none;
}

/********** Company Heading Container (Holds the Page's Single H1 Element) ********************/
div#company-heading {
	/* Position */
	position: absolute;
	left: -9999%; /* Maintains content in HTML code, but moves it out of site in the browser viewport */
}

/********** Company Logo Container ********************/
div#company-logo {
	/* Background */
	background: none;
	/* Float */
	float: left;
	/* Dimensions */
	width: 50%;
	height: 70px;
	/* Display */
	display: inline;
	overflow: hidden;
}

/* Company Logo Image */
div#company-logo img {
	/* Box model */
	padding: 10px 20px;
	padding-left: 0;
}

/* Header Links Container */
div#header-links {
	/* Background */
	background: none;
	/* Position */
	float: right;
	/* Dimensions */
	width: 50%;
	height: 70px;
	/* Display */
	display: inline;
	overflow: hidden;
}

/* Header Link List */
div#header-links ul {
	padding-top: 10px;
}

/* Timestamp Container */
div#timestamp {
	/* Box model */
	padding: 0;
	/* Text */
	color: #999999;
	text-align: right;
	font-size: 0.8em;
	/* Dimensions */
	width: 100%;
	/* Position */
	position: relative;
	top: -12px;
	/* Float */
	float: right;
	/* Background */
	background: none;
}

/* Global Navigation Menu Container */
div#global-nav {
	/* Background */
	background: #C60C30 url(../images/menu/bg-nav-gloss-red.gif) top repeat-x;
	/* Text */
	color: #C60C30;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 30px;
	/* Dimensions */
	width: 100%;
	height: 30px;
	/* Position */
	position: absolute;
	bottom: 0;
	/* Float */
	clear: both;
	
-moz-box-shadow:  3px 3px 6px #666666;
-webkit-box-shadow:  3px 3px 6px #666666;
box-shadow:  3px 3px 6px #666666;
}

/* Footer Container */
div#footer {
	/* Position */
	position: relative;
	top: 100px;
	/* Dimensions */
	width: 100%;
	/* Box model */
	/*margin-bottom: 100px;*/
	padding-bottom: 60px; /* Create distance between the end of the footer and the bottom of the browser viewport */
	border-top: solid 1px #CCCCCC;
	/* Background */
	background: none;
	/* Float */
	clear: both;
}

/* Shared Footer Content Styles */
div#copyright, 
div#footer-links {
	/* Background */
	background: none;
	/* Dimensions */
    width: auto;
    height: 24px;
	/* Display */
	display: inline;
	overflow: hidden;
	/* Text */
	color: #666666;
    line-height: 24px;
}

/* Footer Copyright Container */
div#copyright {
	/* Float */
    float: left;
}

/* Footer Links Container */
div#footer-links {
	/* Float */
	float: right;
}

/* Shared Header / Footer Link Containers */
#header-links, 
#footer-links {
	/* Text */
	text-align: right;
}

/* Shared Header / Footer Link Lists */
#header-links ul,
#footer-links ul
{
	/* Box model */
	margin: 0;
	padding: 0;
	/* List */
	list-style: none;
}

/* Shared Header / Footer Link List Items */
#header-links ul li,
#footer-links ul li
{
	/* Display */
	display: inline;
	/* Box model */
	padding: 0 10px;
	border-left: solid 1px #666666;
	/* Text */
	line-height: 24px;
}

/* Shared Header / Footer First Link List Item */
#header-links > ul > li:first-child,
#footer-links > ul > li:first-child
{
	/* Box model */
	border-left: none;
}

/* Shared Header / Footer Last Link List Item */
#header-links > ul > li:last-child,
#footer-links > ul > li:last-child
{
	/* Box model */
	padding-right:0;
}

/* Shared Header / Footer Link Anchors (Default) */
#header-links ul li a:link, 
#header-links ul li a:visited, 
#footer-links ul li a:link, 
#footer-links ul li a:visited {
	/* Text */
	text-decoration: none;
	color: #666666;
}

/* Shared Header / Footer Link Anchors (Active) */
#header-links ul li a:hover, 
#header-links ul li a:active, 
#header-links ul li a:focus, 
#footer-links ul li a:hover, 
#footer-links ul li a:active, 
#footer-links ul li a:focus {
	/* Text */
	text-decoration: underline;
	color: #C60C30;
}


/**********************************************************************************************************************************/
/*---------- SPLASH / BLURB STYLES BEGIN -----------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------*/

/* Splash Wrapper Container */
/* 'splash-wrapper' is required to correctly display a space between 'global-nav' and 'splash' */
#splash-wrapper
{
	/* Box model */
	margin: 0;
	padding: 0; /* reset for testing */
	padding-top: 14px;
	/* Background */
	background: none;
	/* Dimensions */
	width: 100%;
}

/* Splash Container */
div#splash {
	/* Background */
	background-color: none;
	background-image: url(../images/blurb/woman-holding-cardlogix-smart-card.jpg);
	/* Dimensions */
	height: 360px;
	width: 100%;
	/* Box model */
	padding-top: 0;
	
	/* Mozilla/Firefox rounded corners */
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topleft: 0px;
	
	/* Safari/Chrome rounded corners */
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-top-left-radius: 0px;
	
	/* CSS3/Chrome/Opera/Safari rounded corners */
	border-top-right-radius: 0px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 0px;

-moz-box-shadow:  3px 3px 6px #666666;
-webkit-box-shadow:  3px 3px 6px #666666;
box-shadow:  3px 3px 6px #666666;
}

/* Blurb Container */
div#blurb {
	/* Background */
	background: none;
	/* Dimensions */
	width: auto;
	/* Box model */
	padding: 20px;
	/* Float */
	float: right;
	/* Text */
	font-size: 1.25em;
}

/* Blurb Paragraph */
div#blurb p {
	/* Text */
	color: #333333;
	color: #EFEFEF;
	/* Float */	
	float: right;
	clear: both;
	/* Box model */
	margin: 10px;
}

/* Blurb Link Anchors (Default) */
div#blurb a:link, 
div#blurb a:visited {
	/* Text */
	color: #333333;
	color: #FFFFFF;
	text-decoration: underline;
}

/* Blurb Link Anchors (Hovered) */
div#blurb a:hover, 
div#blurb a:active, 
div#blurb a:focus {
	/* Text */
	color: #C60C30;
}


/****************************************************************************************************************************/
/*---------- SPOTLIGHT STYLES BEGIN ----------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------*/

/* Spotlight Heading Container */
div.spotlight-heading {
background: #005577;
/*
background-image: url(../images/bg/bg-nav-gloss-blue.png);
background-position: top;
background-repeat: repeat-x;
*/
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
color: #FFFFFF;
float:left;
width: 556px;
height: 30px;
line-height: 30px;
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
margin-left: 0px;
margin-right: 0px;

	/* Mozilla/Firefox rounded corners */
	-moz-border-radius-topright: 0.8em;
	-moz-border-radius-bottomright: 0em;
	-moz-border-radius-bottomleft: 0em;
	-moz-border-radius-topleft: 0.8em;
	
	/* Safari/Chrome rounded corners */
	-webkit-border-top-right-radius: 0.8em;
	-webkit-border-bottom-right-radius: 0em;
	-webkit-border-bottom-left-radius: 0em;
	-webkit-border-top-left-radius: 0em;
	
	/* CSS3/Chrome/Opera/Safari rounded corners */
	border-top-right-radius: 0.8em;
	border-bottom-right-radius: 0em;
	border-bottom-left-radius: 0em;
	border-top-left-radius: 0.8em;
	
-moz-box-shadow:  3px 3px 6px #666666;
-webkit-box-shadow:  3px 3px 6px #666666;
box-shadow:  3px 3px 6px #666666;
}

/* Spotlight Container */
.spotlight
{
	/* Dimensions */
	width: 534px; /* Setting this to auto would result in varying container widths, in the event that content is lacking (and the width shrinks to accommodate); 100% would exceed the boundaries of the col1 DIV */
	min-height: 40px;
	height:40px; /* IE does not interpret min-height, so height must be used instead; allow automatic resizing by using pattern matching */
	/* Box model */
	padding: 10px 20px; /* A static padding must be used for the top in order to guarantee that image backgrounds match seamlessly with the container's gradated background */
	margin-bottom: 10px;
	/* Display */
	/*display: block;*/
	/* Float */
	float: left; /* Required to force the container to adjust its height with images taken into consideration (in addition to paragraphs) */
	/*clear: both;*/
	
	/* Mozilla/Firefox rounded corners */
	-moz-border-radius-topright: 0em;
	-moz-border-radius-bottomright: 0.8em;
	-moz-border-radius-bottomleft: 0.8em;
	-moz-border-radius-topleft: 0em;
	
	/* Safari/Chrome rounded corners */
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0.8em;
	-webkit-border-bottom-left-radius: 0.8em;
	-webkit-border-top-left-radius: 0px;
	
	/* CSS3/Chrome/Opera/Safari rounded corners */
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0.8em;
	border-bottom-left-radius: 0.8em;
	border-top-left-radius: 0px;
}

/* Spotlight Container ((Re)Set Auto Height through Pattern Matching) */
div[class~="spotlight"] {
	height: auto;
}

/* Spotlight Headings */
.spotlight h1,
.spotlight h2,
.spotlight h3,
.spotlight h4 {
	/* Box model */
	margin: 10px 0;
	/* Text */
	color: #666666;
}

/* Spotlight Paragraphs */
.spotlight p {
	/* Box model */
	margin: 10px 0px;
}

/* Spotlight Images */
.spotlight img {
	/* Float */
	float: right;
	/* Box model */
	margin: 10px;
	margin-left: 20px;
	margin-right: 0;
	padding: 0;
}

/* IE5 ONLY (Screws up IE6)*/
/*
* html div.spotlight-heading {
	/width: 576px;
	w/idth: 556px;
}

* html div.spotlight {
	/width: 576px;
	w/idth: 554px;
}
*/


/********************************************************************************************************************************/
/*---------- DIV CONTAINER STYLES BEGIN ----------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------*/
/* 'Contaniner' Container */
div#container {
	/* Background */
	background: none;
	/* Box model */
	padding: 0;
	/* Dimensions */
	width: 800px;
	margin: auto;
	margin-top: 0;
	border: none;
	/* Position */
	position: relative;
}

/* Main Container */
div#main {
	/* Position */
	position: relative;
	top: 100px;
	/* Background */
	background: none;
}

/*******************************************************************************************************************************/
/*---------- NOTE / ALERT STYLES BEGIN ----------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------*/			

/* Shared Note / Alert Heading Container */
div.note-heading, 
div.alert-heading {
/*background: #C60C30;*/
background: #005577;
/*
background-image: url(../images/bg/bg-nav-gloss-blue.png);
background-position: top;
background-repeat: repeat-x;
*/
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
color: #FFFFFF;
float:left;
width: 196px;
height: 30px;
line-height: 30px;
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0;

	/* Mozilla/Firefox rounded corners */
	-moz-border-radius-topright: 0.8em;
	-moz-border-radius-bottomright: 0em;
	-moz-border-radius-bottomleft: 0em;
	-moz-border-radius-topleft: 0.8em;
	
	/* Safari/Chrome rounded corners */
	-webkit-border-top-right-radius: 0.8em;
	-webkit-border-bottom-right-radius: 0em;
	-webkit-border-bottom-left-radius: 0em;
	-webkit-border-top-left-radius: 0em;
	
	/* CSS3/Chrome/Opera/Safari rounded corners */
	border-top-right-radius: 0.8em;
	border-bottom-right-radius: 0em;
	border-bottom-left-radius: 0em;
	border-top-left-radius: 0.8em;
	
-moz-box-shadow:  3px 3px 6px #666666;
-webkit-box-shadow:  3px 3px 6px #666666;
box-shadow:  3px 3px 6px #666666;
}

div.alert-heading {
	background: #FFCC66;
	color: #FFFFFF;
}

/* Shared Note / Alert Container */
.note, 
.alert {
	/* Dimensions */
	width: auto; /* 93% does not fill the col2 DIV; but 100% exceeds the boundaries of the col2 DIV */
	min-height: 40px;
	height: 40px; /* IE does not interpret min-height, so height must be used instead; allow automatic resizing by using pattern matching */
	/* Background */
	background: none;
	/* Box model */
	margin-bottom: 10px;
/*	padding: 2%;*/
	padding: 10px 20px;

	/* Mozilla/Firefox rounded corners */
	-moz-border-radius-topright: 0em;
	-moz-border-radius-bottomright: 0.8em;
	-moz-border-radius-bottomleft: 0.8em;
	-moz-border-radius-topleft: 0em;
	
	/* Safari/Chrome rounded corners */
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0.8em;
	-webkit-border-bottom-left-radius: 0.8em;
	-webkit-border-top-left-radius: 0px;
	
	/* CSS3/Chrome/Opera/Safari rounded corners */
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0.8em;
	border-bottom-left-radius: 0.8em;
	border-top-left-radius: 0px;
	

float:right;
}

/* Shared Note / Alert Container ((Re)Set Auto Height through Pattern Matching) */
div[class~="note"], 
div[class~="alert"] {
	height: auto;
}

/* Shared Note / Alert Horizontal Rules */
.note hr, 
.alert hr {
	/* Dimensions */
	width: 80%;
	/* Text */
	text-align: center; /* Required to center the HR element in IE5 */
	color: #CCCCCC;
}

/* Shared Note / Alert Paragraphs */
.note p, 
.alert p {
	/* Box model */
	margin: 10px 0px;
}


* html div.note-heading, 
* html div.alert-heading {
	\width:216px;
	w\idth:196px;
}

/* Shared Note / Alert Containers (IE6 Only) */
/* Required to display the right border on the Note and Alert containers */
* html .note, 
* html .alert {
	/* Dimensions */
/*	\width:93%;*/
/*	w\idth:93%;*/
	\width:216px; /* IE5 */
	w\idth:174px;
}

/****************************************************************************************************************************/
/*---------- PANEL DIV STYLES BEGIN ----------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/

/* Gray Container */
div.gray {
	/* Box model */
	border: solid 1px #CCCCCC;
	/* Background */
	/*background: #f6f6f6 url(../images/test-bg-e6-f6.jpg) top repeat-x;*/
	/*background: #ffffff url(../images/40px-lightgray-gradient.jpg) top repeat-x;*/
	background-color: #FFFFFF;
	
-moz-box-shadow:  3px 3px 6px #666666;
-webkit-box-shadow:  3px 3px 6px #666666;
box-shadow:  3px 3px 6px #666666;
}

/* Gray Container Link Anchors (Default) */
div.gray a, 
div.gray a:link, 
div.gray a:visited {
	/* Text */
	color: #666666;
	text-decoration: underline;
}

/* Gray Container Link Anchors (Hovered) */
div.gray a:hover, 
div.gray a:focus {
	/* Text */
	color: #C60C30;
}

/* Peach Container */
div.peach {
	/* Box model */
	border: solid 1px #FFCC66;
	/* Background */
	background:#FFFFDD url(../images/40px-lightpeach-gradient.jpg) repeat-x top;	
}

/* Peach Container Link Anchors (Default) */
div.peach a, 
div.peach a:link, 
div.peach a:visited {
	/* Text */
	/*color: #FF9933;*/
	color: #666666;
}

/* Peach Container Link Anchors (Hovered) */
div.peach a:hover, 
div.peach a:focus {
	/* Text */
	color: #C60C30;
}

/****************************************************************************************************************************/
/*---------- PANEL DIV STYLES BEGIN ----------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------*/

div#siteseal {
	position: absolute;
	right: 0;
	bottom: 10px;
}