/** CATS CAREER PORTAL DEFAULT STYLES **/

/*** RESET, GENERAL ***/
html,
body {
	margin: 0;			/* resets the margin of all contents; sticks to edge of browser */
	padding: 0;
	text-align: left;
	}

body {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 62.5%;
	color: #404040;
	}
	
a:link, 
a:visited {
	color: #007eb2;
	text-decoration: none;
	}
	
a:hover {
	color: #007eb2;
	text-decoration: underline;
	}	

img {
	border: 0;
	}		/* eliminates border on all images */

.clear {
	clear: both;
	}

img#ccpBackImage {
	vertical-align: middle;
	margin-bottom: 10px;
	}

a#ccpBackLink {
	position: relative;
	top: -5px;
	}

/*** TEXT, HEADER ***/
	
h1 {
	font-size: 2.4em;
	font-weight: normal;
	margin: 0;
	padding: 0 0 15px 0;
	line-height: 1.1;
	color: #00529b;
	}
	
h2 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 0 0;
	padding: 0 0 8px 0;
	line-height: 1;
	color: #d96400;
	border-top: none;
	}	
	
h3 {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0;
	padding: 12px 0 8px 0;
	line-height: 1;
	color: #404040;
	}
	
h4 {
	font-size: 1.0em;
	font-weight: bold;
	margin: 0;
	padding: 12px 0 8px 0;
	line-height: 1;
	color: #d96400;
	text-transform: uppercase;
	}	
	
p {
	font-size: 1.1em;
	font-weight: normal;
	margin: 0;
	padding: 0 0 10px 0;
	line-height: 1.3;
	width: 674px;
	}	
	
p.intro {
	font-size: 1.2em;
	font-weight: normal;
	margin: 0;
	padding: 0 0 10px 0;
	line-height: 1.4;
	color: #00529b;
	width: 674px;
	}	
		
#headerNav {
	font-size: 13px;
	}

.txtc {
	text-align: center;
	}

.txtj {
	text-align: justify;
	}

.txtl {
	text-align: left;
	}

.txtr {
	text-align: right;
	}

/*** FORM ELEMENTS ***/
form {
	clear: both;
	}

input.formInput:focus,
textarea.formInput:focus {
	border: 2px solid #335bc1;
	margin: 0;
	}

input.formInput,
select.formInput,
textarea.formInput {
	padding: 1px;
	}

input.formInput,
select.formInput {
	}

input.formInput,
textarea.formInput,
select.formInput {
	border: 1px solid #b0b0b0;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
	font: normal 14px Tahoma, Arial, Verdana, Helvetica, sans-serif;
	margin: 1px;
	}

input.formInputDatePicker {
	background: #fff url(http://www.catsone.com/images/datePicker.jpg) no-repeat;
	padding-left: 12px;
	background-position: 2px 0;
	font-size: 12px;
	}

textarea.formInput {
	height: 35px;
	}

input.small,
textarea.small,
select.small {
	width: 100px;
	}

input.medium,
textarea.medium,
select.medium {
	width: 175px;
	}

input.large,
textarea.large,
select.large {
	width: 300px;
	}

input.tall,
textarea.tall,
select.tall {
	height: 140px;
	}

div.checkBoxAnswer {
	}

div.checkBoxAnswer input {
	position: relative;
	top: 2px;
	}

/*** TABLES ***/
table {
	font-size: 1.0em;
	padding: 0;
	vertical-align: top;
	width: 691px;
	}
	
tbody,
tr {
	font-size: 1.0em;
	padding: 0;
	vertical-align: top;
	}	
	
th,
td {
	border-collapse: collapse;
	font-size: 1.1em;
	padding: 0;
	vertical-align: top;
	}	

/*** STRUCTURE ***/
#outer {
	background: #fff;
	border: none;
	border-bottom: 0;
	border-top: 0;
	height: 100%;
	height: auto !important;
	min-height: 100%;
	margin: 0 auto; 	/* 0pixels from the top and bottom, automatically centered */
	padding: 0 5px;
	position: relative;
	width: 575px;
	}

/* STEPS, PAGES */
#headerNav,
#content,
#stepListings,
#stepJobDetails,
#stepSendToFriend,
#stepApplication,
#stepConfirmation,
#stepRegister,
#stepLogin,
#stepProfile,
#stepUpdate,
#stepForgot,
#stepEmail,
#applicationOuter {
	padding: 0 0 20px 0;
	padding: 0;
	width: 99%;
	}

#stepListings,
#stepJobDetails,
#stepSendToFriend,
#stepApplication,
#stepConfirmation,
#stepRegister,
#stepLogin,
#stepProfile,
#stepUpdate,
#stepForgot,
#stepEmail {
	margin: 0 0 20px 0;
	margin: 0;
	}

#content {
	clear: both; /* clears floating items above content area */
	margin: 0;
	}

#poweredBy {
	clear: both;
	color: #666;
	font-size: 11px;
	height: auto;
	text-align: center;
	}

#returnTop {
	clear: both;
	float: right;
	font-size: 11px;
	margin: 10px 0;
	}

/*** CONTENT ***/
#headerNav #logo {
	float: left;
	height: auto;
	margin: 0 0 20px 0;
	width: auto;
	}

span.logoAltText {
	font-size: 24px;
	font-weight: bold;
	}

/*** NAVIGATION ***/
.listLinks {
	margin: 0;
	padding: 0;
	}

.listLinks li {
	display: inline;
	float: left;
	margin: 0 25px 0 0;
	width: auto;
	}

.listLinks li a {
	color: #335bc1;
	}

.listLinks li.clear {
	margin: 0 25px 10px 0;
	}

.button {
	float: left;
	line-height: normal;
	background-color: #00529b;
	margin: 0 0 0 0;
	padding: 3px 6px;
	color: #fff;
	text-transform: uppercase;
	font-size: 10px;
	}
	
input.submitButton {
	float: left;
	line-height: normal;
	background-color: #00529b;
	margin: 0 0 0 188px;
	padding: 3px 6px;
	color: #fff;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: bold;
	border: none;
	cursor: pointer;
	}	
	
.button:first-child {
	float: left;
	line-height: normal;
	}

.button a {
	color: #fff;
	float: left;
	font-weight: bold;
	height: auto;
	margin: 0;
	text-decoration: none;
	width: auto;
	}

#foo #hover {
	display: none;
	}

#foo:hover #hover {
	display: block;
	}

#foo:hover #not {
	display: none;
	}

.button a:link, 
.button a:visited, 
.button a:hover {
	color: #fff !important;
	}

.button a span {
	display: block;
	float: left;
	height: auto;
	white-space: nowrap;
	}

/* MESSAGES */
.message {
	clear: both;
	height: auto;		/* auto fits to height of content */
	min-height: 18px;
	margin: 0 auto;
	padding: 5px;
	width: 691px;
	}

.messagePlain {
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
	border-left: 0;
	border-right: 0;
	margin: 3px 0;
	}

.messageNormal {
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
	border-left: 0;
	border-right: 0;
	margin: 0 0 10px 0;
	}
	
.messageNormal h2 {	
	color: #000;
	padding: 0;
	}

.messageWarning {
	background: #fdf8e9;
	border: 1px solid #ffd966;
	border-left: 0;
	border-right: 0;
	}

.messageSuccess {
	background: #ecfce4;
	border: 1px solid #9fd982;
	border-left: 0;
	border-right: 0;
	}

.messageError {
	background: #f6e9e9;
	border: 1px solid #660c0c;
	border-left: 0;
	border-right: 0;
	}

div.errorNotifier {
	background-color: #f6e9e9;
	border: 1px solid #660c0c;
	border-left: 0;
	border-right: 0;
	clear: both;
	color: #270101;
	font-size: 12px;
	height: auto;
	margin: 10px 0;
	max-height: 500px;
	padding: 10px;
	}

div.errorNotifier ul {
	margin: 0;
	border: 0;
	padding: 0;
	}

div.errorNotifier ul li {
	margin-left: 15px;
	}

div.errorNotifier br.break {
	clear: both;
	}

div.errorNotifier div.title {
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 5px;
	}

div.messageNotifier {
	background-color: #eef1fe;
	border: 1px solid #1738b5;
	border-left: 0;
	border-right: 0;
	color: #05204d;
	font-size: 12px;
	margin: 5px 0 0 0;
	padding: 10px;
	}

/* JOB LISTINGS TABLE (first iFrame screen) */
div.noData {
	width: 100%;
	border-top: 1px solid #ccddff;
	margin: 15px 0 0 0;
	}

div.noData img {
	float: left;
	width: 256px;
	height: 256px;
	}

div.noData div.right {
	float: left;
	width: 320px;
	margin: 35px 0 0 0;
	}

table#jobListings {
	width: 674px;
	border-top: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	margin: 0 0 10px 0;
	}
	
#jobListings th.cellHeader {
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	padding: 7px 12px;
	text-align: left;
	vertical-align: top;
	font-size: 1.6em;
	font-weight: normal;
	color: #00529b;
	}		

#jobListings th.sortingHeader span.sortingColumn {
	display: none;
	}

#jobListings .grayCell {
	background: #ccc;
	color: #666;
	max-width: 75px;
	min-width: 75px;
	width: 75px;
	}

#jobListings .grayCell a {
	color: #666;
	padding: 0;
	}
	
#jobListings tr.rowEven td {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	padding: 9px 12px;
	text-align: left;
	vertical-align: middle;
	font-weight: normal;
	background-color: #f2f2f2;
	}	
	
#jobListings tr.rowOdd td {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	padding: 9px 12px;
	text-align: left;
	vertical-align: middle;
	font-weight: normal;
	background-color: #f2f2f2;
	}		

#jobListings tr.rowEven td.topRowNoBorder, 
#jobListings tr.rowOdd td.topRowNoBorder {
	border-bottom: 0;
	}

#jobListings tr.rowEven td.bottomRowNoBorder, 
#jobListings tr.rowOdd td.bottomRowNoBorder {
	border-top: 0;
	}

#jobListings .excerpt {
	color: #666;
	padding: 0 0 4px 8px;
	}

#jobListings .exceprt span {
	font-size: 12px;
	}

#searchFilter {
	margin: 10px 0;
	}

div.topSearchKeywords {
	clear: both;
	float: left;
	margin: 0 0 7px 0;
	width: 240px;
	}

div.topSearchKeywords span {
	font-weight: bold;
	}

div.topSearchKeywords input#keywords {
	width: 220px;
	}

div.topSearchLocation {
	float: left;
	width: 170px;
	}

div.topSearchLocation span {
	font-weight: bold;
	}

div.topSearchLocation input#location {
	width: 150px;
	}

div.topSearchLocationExtended {
	float: left;
	width: 148px;
	padding-top: 14px;
	}

div.topSearchAction {
	float: left;
	width: 190px;
	padding-top: 14px;
	}

div.topSearchAction input#searchButton {
	margin: 3px 0 0 0;
	}

div.categories {
	margin: 15px 0 0 0;
	font-size: 12px;
	color: #666;
	}

div.categories div.section {
	float: left;
	width: 243px;
	margin: 0 5px 0 5px;
	}

div.categories div.section div.title {
	font-size: 16px;
	color: #333;
	background-color: #f0f0f0;
	padding-left: 3px;
	font-weight: bold;
	}

div.categories div.section div.item {
	border: 1px solid #f0f0f0;
	margin: 2px 0;
	padding-left: 2px;
	}

div.categories div.section div.item #keywords {
	width: 97.5%;
	}

div.categories div.section div.item a {
	padding: 2px 0;
	}

div.categories input#searchButton {
	margin: 10px 0 0 8px;
	}

div.categories div.section div.item input.categoryFilter {
	margin: 0;
	padding: 0;
	position: relative;
	top: 2px;
	}

img.previewJob,
.middle {
	vertical-align: middle;
	}

#previewHint {
	font-weight: bold;
	margin: 5px 0;
	}

div#previewJobContainer {
	background-color: #fafafa;
	border: 1px solid #c0c0c0;
	font-size: 14px;
	height: 200px;
	margin-bottom: 20px;
	max-height: 200px;
	max-width: 400px;
	min-height: 200px;
	min-width: 400px;
	overflow: auto;
	padding: 15px;
	position: absolute;
	width: 400px;
	z-index: 99998;
	}

img#previewJobContainerPointer {
	height: 18px;
	left: 0;
	position: absolute;
	top: 0;
	width: 32px;
	z-index: 99999;
	}

.recentJobs {
	font-size: 12px;
	height: 20px;
	max-height: 20px;
	max-width: 100%;
	min-height: 20px;
	min-width: 100%;
	overflow: none;
	white-space: nowrap;
	width: 100%;
	}

.recentJobs #recentHeader,
.recentJobs a,
.recentJobs span {
	float: left;
	}

.recentJobs #recentHeader {
	color: #666;
	margin: 4px 10px 0 4px;
	}

.recentJobs a,
.recentJobs span {
	margin: 0 5px 0 0;
	}

.recentJobs span {
	color: #c0c0c0;
	}

/* PAGINATION */
.pagination {
	margin: 0 auto;
	text-align: center;
	width: auto;
	}

.pagination ul.pager {
	display: inline-block;		/* centers entire list; should not be removed */
	font-size: 12px;
	list-style: none;
	text-align: center;
	width: auto;
	}

.pagination ul.pager li {
	border: 1px solid #98bbfb;	/* same color as messageNormal border */
	display: block;				/* turns list into clickable blocks */
	float: left;				/* makes page numbers sit side-by-side on page  */
	margin: 0 3px;
	padding: 2px 5px;
	width: auto;
	}

.pagination ul.pager li.pagerDisable {
	border: 1px solid #ccc;
	color: #666;
	}

.pagination ul.pager li.elipse {
	border: 0;
	margin: 0 5px;
	}

.pagination ul.pager li a {
	text-decoration:  none;
	}

.pagination ul.pager li:hover,
.pagination ul.pager li.active {
	/* links hover effect, current page indicator */
	background-color: #ecf3ff;	/* same color as messageNormal background */
	display: block;
	text-decoration:  none;
	}

.pagination ul.pager li.elipse:hover,
.pagination ul.pager li.pagerDisable {
	/* no background effect when pager is hovered */
	background: none;
	}

/* JOB DETAILS */
#jobDetails {
	clear: left;
	width: 100%;
	}

#jobDetails p {
	margin: 4px 0;
	}

.jobNumber {
	color: #999;
	font-size: 13px;
	font-weight: normal;
	margin: 0 5px;
	}

.jobSubData {
	float: left;
	font-size: 1.1em;
	margin: 1px 0;
	width: 33%;
	}

.detailsJobDescription td p {
	clear: both;
	padding: 0 0 0 0;
	font-size: 100%;
	}
	
.detailsJobDescription td p b {
	font-weight: normal;
	}	

.actionButtons {
	clear: both;
	margin: 10px 0;
	}

#recruiterDetails {
	clear: both;
	margin: 0 0 0 40px;
	}

#recruiterSignature {
	clear: both;
	margin: 10px 0;
	}

#showDescription {
	margin: 14px 0;
	}

#showDescriptionText {
	border: 1px solid #f3f3f3;
	border-left: 0;
	border-right: 0;
	color: #666;
	height: 100px;
	margin: 4px 0;
	max-height: 100px;
	min-height: 100px;
	overflow: auto;
	padding: 4px 0;
	}

/* APPLICATION FORM */
form#jobApplication {
	margin: 0 0 20px 0;
	}

div.headerContainer {
	color: #666;
	margin: 0 0 10px 0;
	}

#applicationOuter {
	margin: 20px 0;
	}

div#application {
	margin: 0 0 10px 0;
	padding: 5px 0;
	}

div#application div.row {
	width: 674px;
	}

div#application div.row div.full {
	float: left;
	padding: 5px 0 0 5px;
	width: 100%;
	}

div#application div.row div.field {
	/* structure and size of form text container */
	float: left;
	padding: 5px 0 0 5px;
	width: 160px;
	}

div#application div.row div.required {
	font-size: 1.1em;
	}

div#application div.row div.required span {
	color: #D96400;
	}

div#application div.row div.icon {
	float: left;
	padding: 5px 3px 0 0;
	text-align: right;
	width: 20px;
	}

div#application div.row div.input {
	/* structure and size of input field container */
	float: left;
	padding: 2px 0;
	width: 370px;
	}
	
div#application div.row div input, 
div#application div.row div textarea {
	/* structure and size of input field container */
	float: left;
	width: 362px;
	border: 1px solid #e5e5e5;
	margin: 0 0 4px 0;
	padding: 4px;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 11px;
	background-color: #fafafa;
	}
	
div#application div.row div input.short {
	width: 50px;
	margin: 0 4px 4px 0;
	}
	
div#application div.row div input.standard {
	width: 308px;
	}		

div#application br.break {
	clear: both;
	}

div#sig {
	font-size: 12px;
	margin: 15px 0;
	}

/*** MISC ***/
span.jobID {
	display: none;
	}

a.jobTitle {
	font-weight: bold;
	}

a.jobTitleHot {
	font-weight: bold;
	color: red;
	}

.icons16 {
	height: 16px;
	width: 16px;
	}

.textMedLight {
	color: #666;
	}

.textLight {
	color: #666;
	font-size: 12px;
	}

.textLighter {
	color: #c0c0c0;
	}

.textSmall {
	font-size: 11px;
	}

.emphasizeYellow {
	background-color: #ffff99;
	font-weight: bold;
	padding: 2px;
	}

.instructive {
	font-weight: bold;
	margin: 5px;
	}