/* * The global-display-label class is used for labels on read-only
 * fields.  An example of a read-only field label where this would be used 
 * is the label text in a "Confirm Information" table.*/
.global-display-label {
	background-color: White;
	font-weight: bold;
	vertical-align: top;
}

/* * The global-display-text class is used for read-only field text.
 * An example of read-only field text is the data column of a "Confirm 
 * Information" table.*/
.global-display-text {
	background-color: White;
}

.global-display-text li {
	margin: 0 0 10px 0;
}

/* * The global-data-entry-form class is used to format large sections 
 * form data.  It is useful for formatting multiple form labels.*/
.global-data-entry-form {
	font-size: small;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* * The global-field-note class is used for putting a comment on a form
 * field.  An example is the (optional) flag at the end of text entry fields.*/
.global-field-note {
	font-size: x-small;
	font-weight: bold;
}

/* * The global-form-button class is for the buttons at the bottom
 * of transaction forms.*/
.global-form-button {
	text-align: center;
	padding-top: 1em;
}

/* * The global-login-entry class is for the main logon pages for Driver
 * and Vehicle Services and PIN Requests*/
.global-login-entry {
	background-color: White;
}

/* * The global-text-bold class can be used with the <span> tag to replace 
 * the deprecated <b> tag.  It should be used sparingly and only to signify 
 * bolded text that does not have a meaningful structure.  If the element
 * to be bolded does signify a meaningful structure, such as a
 * heading or special type of text, define a separate class that is more 
 * descriptive.*/
.global-text-bold {
	font-weight: bold;
}

/* * The global-text-bold italic can be used with the <span> tag to replace 
 * the deprecated <i> tag.  It should be used sparingly and only to signify
 * italic text that does not have a meaningful structure.  If the element
 * to be italicized does signify a meaningful structure, such as a
 * heading or special type of text, define a separate class that is more 
 * descriptive.  This should not be used for emphasized text.  Instead, use
 * the <em> tag.*/
.global-text-italic {
	font-style: italic;
}

/* * The global-text-bold-italic class can be used with the <span> tag to 
 * represent bolded, italicized text.  It should be used sparingly and only to 
 * mark up text does not have a meaningful structure.  If the element
 * has a meaningful structure, such as a heading or special type of text, 
 * define a separate class that is more descriptive.*/
.global-text-bold-italic {
	font-weight: bold;
	font-style: italic;
}

/* * The global-text-bold-sub1 is a smaller font of global-text-bold */
.global-text-bold-sub1 {
	font-size: smaller;
	font-weight: bold
}

/* * This text can be used for alert messages.*/
.global-text-alert {
	color: #FF0000;
}

/* * This text can be used for alert messages.*/
.global-bold-text-alert {
	color: #FF0000;
	font-weight: bold;
}

/* * TODO global-text should be the same as P*/
.global-text {
	font-size: inherit;
}

/* * global-text-small is a smaller font for standard text.*/
.global-text-small {
	font-size: smaller;
}

/* * global-text-toplink is used on some Return to Top links by the
   * up arrows.
   */
.global-text-toplink {
	font-size: small;
	font-weight: bold;
}

/* * The global-table-header-1 can be used to format rows in tables such that they
 * will be shaded grey with bold,  black text.  -left contains aligns text to the 
 * left of the cell, -center to the center of the cell.*/
.global-table-header-1-left {
	background-color: #F0F0F0;
	color: #000000;
	padding-left: 1mm;
	font-weight: bold;
	text-align: left;
}

/* * See the comment for global-table-header-1-left, above.*/
.global-table-header-1-center {
	background-color: #F0F0F0;
	color: #000000;
	padding-left: 1mm;
	font-weight: bold;
	text-align: center;
}

/* * See the comment for global-table-header-1-left, above.*/
.global-table-header-1-right {
	background-color: #F0F0F0;
	color: #000000;
	padding-left: 1mm;
	font-weight: bold;
	text-align: right;
}

/* * The global-table-header-2 can be used to format rows in tables such that they
 * will be shaded yellow with bold, black text.  -left contains aligns text to the 
 * left of the cell, -center to the center of the cell.*/
.global-table-header-2-left {
	background-color: #D0D0D0;
	font-weight: bold;
	text-align: left;
}

/* * See the comment for global-table-header-2-left, above.*/
.global-table-header-2-center {
	background-color: #D0D0D0;
	font-weight: bold;
	text-align: center;
}

/* * See the comment for global-table-header-2-left, above.*/
.global-table-header-2-right {
	background-color: #D0D0D0;
	font-weight: bold;
	text-align: right;
}

/* * The global-fee-item class can be used to format fee line items that are
 * presented in a list so that the fees are properly aligned.*/
.global-fee-item {
	text-align: right;
}

/* * The global-fee-total class can be used to format the total of a column 
 * of fee line items so that the total stands apart from the rest of 
 * the list.*/
.global-fee-total {
	text-align: right;
	font-weight: bold;
}

/* * The global-table-total class can be used to format summary or total
 * lines at the end of tables.*/
.global-table-total {
	font-weight: bold;
}

/* * The global-navigation-radio-buttons class can be used to format a 
 * list of radio buttons that provide navigation options.  If this is
 * used to format a table containing the buttons, the style should be 
 * applied to a <div> tag enclosing the table.*/
.global-navigation-radio-buttons {
	padding-top: 1em;
	text-align: center;
}

/* * Style used to format the "Step N" labels used on the transaction
 * pages.*/
.global-step-text {
	color: #336699;
	font-size: large;
	padding-left: 2mm;
}

/* * This style can be applied to a <table> to color the background.*/
.global-table-body-1 {
	background-color: #F0F0F0;
}

/* * This style can be applied to a nested <table> to color the background.*/
.global-table-body-2 {
	background-color: #D0D0D0;
}

/* * See the comment for global-table-header-2-left, above.*/
.global-table-header-1 {
	font-weight: bold;
	background-color: #F0F0F0;
}

/* * See the comment for global-table-header-2-left, above.*/
.global-table-header-2 {
	font-weight: bold;
	background-color: #D0D0D0;
}

.global-text-comic-big {
	font-family: "Comic Sans MS", "Comic", "Arial Rounded MT Bold", Arial,
		sans-serif;
	font-size: large;
	color: #FF0000;
	font-weight: bold
}

/* * The global-login-card-alignment class is for the main login pages to 
 * layout the credit card images.*/
.global-login-card-alignment {
	text-align: center;
}

/* * The global-login-example-text class is for the main login pages to 
 * format the text containing example text.*/
.global-login-example-text {
	font-size: small;
}

/* * global-table-middle is used to vertical middle align a TD
 * */
.global-table-middle {
	vertical-align: middle;
}

/* * global-table-middle is used to vertical bottom align a TD
 * */
.global-table-bottom {
	vertical-align: bottom;
}

/* * Used to accent spotlight topics
   */
.global-text-spotlight {
	font-size: smaller;
	font-weight: bold;
}

/* * Used to center a heading
   */
.global-center-header {
	text-align: center;
}

/* * global-table-text-small is based on global-text-small but includes a background 
color for use in table cells where smaller text is needed.*/
.global-table-text-small {
	font-size: smaller;
	background-color: #F0F0F0;
}

/* * these are the tags that is used by the Organ Donor confirmation page*/
.p-plus {
	height: 5px;
}

#cardcontainer {
	width: 100%;
}

.card {
	width: 350px;
	height: 250px;
	border: 1px dashed Black;
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
}

.card img {
	margin: 5px;
}

.card .cardnumber {
	font-size: 11px;
	position: absolute;
	right: 20px;
	top: 10px;
}

.card .cardinfo {
	position: absolute;
	left: 10px;
	top: 125px;
	font-size: 11px;
}

.card .card_donor_text {
	position: absolute;
	text-align: center;
	bottom: 10px;
	left: 0px;
	font-size: 20px;
	font-weight: bold;
	color: Green;
	width: 100%;
}

.donate_logo {
	position: absolute;
	left: 400px;
}

.card .card_donor_cut_text {
	position: absolute;
	text-align: center;
	bottom: -14px;
	left: 0px;
	font-size: 12px;
	color: black;
	width: 100%;
}

.od_confirm {
	text-align: center;
}

.od_p {
	color: black;
}

.vanityText {
	position: relative;
	top: -620px;
	right: -291px;;
}

.vanityImage {
	background: url(../graphics/VanityPlate.jpg) no-repeat;
	width: 235px;
	height: 107px;
}

.vanityData {
	vertical-align: middle;
	text-align: center;
	color: #004080;
	font-family: Arial Narrow, Arial, sans-serif;
	font-stretch: condensed;
	font-weight: bold;
	font-size: 40px;
	text-transform: uppercase;
	white-space: nowrap;
}

td#plateLinks {
	padding-left: 24px;
	line-height: 28px;
}

#vanityInfo li {
	margin: 0 0 10px 0;
}