.clear { clear: both; }

img#ccpBackImage { vertical-align: middle; margin-bottom: 10px; }
a#ccpBackLink { position: relative; top: -5px; }

#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 #666; 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, tbody, th, tr, td {
    border-collapse: collapse;
    padding: 0;
    vertical-align: top;
}

/*** STRUCTURE ***/
#outer {
    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: 760px;
}


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

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

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

#poweredBy {
    clear: both;
    color: #666;
    font-size: 11px;
    height: auto;
    text-align: left;
    float: none;
    display: inline;
    background: none;
}

#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: #666; }

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

.button {
    float: left;
    line-height: normal;
    background-color: #c0c0c0;
    border: 2px solid #666;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    margin: 4px 14px 8px 0;
    padding: 4px;
}
.button:first-child {
    float: left;
    line-height: normal;
}

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

.button a:hover { color: #000; text-decoration: underline; }

.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: 99%;
}

.messagePlain {
    border-left: 0;
    border-right: 0;
    margin: 3px 0;
}

.messageNormal {
    border-left: 0;
    border-right: 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 */
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;
}

#jobListings {
    clear: both;
    margin: 10px 0;
    width: 100%;
}

#jobListings th, #jobListings td {
    margin: 0;
    padding: 0;
}

#jobListings th { font-weight: bold; }

#jobListings th.cellHeader, #jobListings th.cellHeader a {
    background: #f0f0f0;
    color: #666;
}

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

#jobListings th, #jobListings td { padding: 4px 8px; }

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

#jobListings tr.rowOdd td {  }

#jobListings tr.rowEven td {

    border-left: 0;
    border-right: 0;
}
#jobListings tr.rowEven td.topRowNoBorder { border-bottom: 0; }
#jobListings tr.rowEven td.bottomRowNoBorder { border-top: 0; }

#jobListings .listJobTitle {
    font-size: 15px;
    letter-spacing: 1px;
}
#jobListings .excerpt {
    color: #999;
    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;
    padding: 0;
}

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

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

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

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: 0px;
}

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: 500px;
    min-height: 200px;
    min-width: 500px;
    overflow: auto;
    padding: 15px;
    position: absolute;
    width: 500px;
    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: left;
    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: #d1e0f8;  /* 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: 12px;
    margin: 1px 0;
    width: 33%;
}

.detailsJobDescription {
    clear: both;
    padding: 0 0 0 10px;
}

.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: 760px; }
div#application div.row div.full {
    float: left;
    padding: 5px 0 0 5px;
    width: 100%;
}
div#application div.fieldComment { color: #666; font-size: 12px; }
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-weight: bold; }
div#application div.row div.required span { color: #800000; }
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: 560px;
}
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;
}