/* This is used for form properties within the site */



/* ================================ General form element properties =========================== */



form input.textfield,

	form select,

	form textarea

{

	border: 1px solid rgb(153,153,153); /* A light gray */

}





/* ================================= Form Tables ========================================= */



/* A table element within a form element has special properties */



form table

{

	margin: 0em;

	margin-bottom: 1.0em; /* This matches regular paragraphs */



}



/* Headers within a form table */

form table thead th h1

{

	margin-bottom: 0.1em !important;

}



/* General table spacing */

form table tbody th,

	form table tbody td

{

	padding-bottom: 0.9em;

	padding-right: 0.8em;

}



form table tbody td

{

	width: 30.0em;

}



/* Input fields within a form table */

form table tbody td input.textfield,

	form table tbody td select,

	form table tbody td textarea

{

	width: 98%;

	display: block;

}



/* Only IE sees this */

* html form table tbody td select

{

	width: 99.5%;

}





/* General submit buttons within a form table */

form table tbody input.submit-button

{

	display: inline;

	margin-right: 1.5em;

}



/* Label elements within forms (these properties are very similar to those on

	secondary-nav and tertiary-nav list itmes) */

form label

{

	display: block;



	color: rgb(9,53,122); /* A medium blue, the same color as links */



	background-image: url(../images/common/bullet.png);

	background-position: 0em 0.5em;

	background-repeat: no-repeat;

	padding-left: 7px; /* This leaves room for the bullet */

}



/* ===================================== Specific Form Elements ============================ */



/* The "Send" button */

form table input#send

{

	display: block;



	background-image: url(../images/buttons/send-background.png);

	background-repeat: no-repeat;

	width: 39px;

	height: 18px;

}



/* These are the rollover properties for submit buttons. It assumes that

	they're 18px tall (well, really 36px internally, but 18px on the screen)



	See main.js for details on how to use these. */



form table input.hover-off

{

	background-position: 0px -0px; /* The image is 36px tall, so this shows the top half (the "off" state) */

}



form table input.hover-on

{

	background-position: 0px -18px;  /* The image is 36px tall, so this shows the bottom half (the "on" state) */

}