Project Claire: CSS Code

From PikaDocs

 Valid CSS!  ~ All CSS is valid except for star html (http://www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html) IE hacks, as indicated.

Last modified: September 8, 2005

/* ~~~~~~~~ Project Claire: beta danio.css ~~~~~~~~ */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                GLOBAL elements                    */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body {
    margin: 0;
    padding: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 75%;
    color: black;
    background-color: #F5F9F5;
    }
html,
body {
    /* required in Firefox where #page-content < viewport height */ 
    min-height: 100%;
    margin-bottom: 1px; 
    }     
img {
    border: 0;
    }
a:link,
a:visited {
    padding: 1px 0 2px 0;
    color: blue;
    text-decoration: none;
    }
a:hover,
a:active {
    color: black;
    background-color: #F7F2EA;
    }
ul {
    list-style-type: square;
    color: #00A585;
    }
input,
select {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 90%;
    font-weight: normal;
    }
input {
    padding: 2px;
    border: 1px solid;
    border-color: #666666 #CCCCCC #CCCCCC #666666;
    }
select {
    background-color: #F5F9F5;
    }

/* button images */    
    
#add,
#browse-contacts,
#calculate,
#continue,
#grid,
#save,
#save-edits,
#search-records {
    border: 0;
    }
   
/* Global "content" components */
   
.content-container {
    clear: both;
    font-size: 100%;
    }
.content-container h2 {
    margin: 0;
    padding-bottom: 2px;
    border: 1px solid #B5C6A5;
    background-color: white;
    color: #7F7C6A;
    font-size: 110%;
    text-align: center;
    }
.side-content {
    float: left;
    width: 160px;
    padding: 10px 0 10px 10px;
    }
.side-content p {
    margin-top: 10px;
    }    
.side-content ul {
    margin: 10px 0 10px 20px;
    padding: 0;
    list-style-type: square;
    color: #00A585;
    }
.side-content p,
.side-content ul a {
    font-size: 90%;
    }
.side-content span {
    font-weight: bold;
    }
.main-content {
    float: left;
    width: 566px;
    margin-left: 10px;
    padding: 10px 10px 20px 0;
    }
    
/* help Firefox clear nested floats */

div.clear-fix {
    clear: both;
    }    
    
/* pop-up Help windows */

#help {
    padding: 10px;
    background-color: white;
    font-family: verdana, arial, sans-serif;
    }
.close-window {
    float: right;
    font-size: 95%;
    margin-top: 0;
    }
.close-window a:link,
.close-window a:visited,
a:link.context-help,
a:visited.context-help {
    color: blue;
    font-weight: bold; 
    } 
.close-window a:hover,
.close-window a:active,
a:hover.context-help,
a:active.context-help {
    color: gray;
    background-color: transparent;
    }    
#help h1 {
    font-size: 120%;
    margin-top: 0;
    }
#help h1 span {
    color: #7F7C6A;
    }    
dl, dt, dd {
    margin: 0;
    font-size: 95%;
    }
dt {
    font-weight: bold;
    }
dd {
    margin-bottom: 10px;
    }        
   
   
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*              DEFAULT.HTML template                */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */   
   
#page-container {
    width: 760px;
    margin: 0 auto;
    border: 1px solid #B5C6A5;
    border-top: 4px solid #B5C6A5;
    border-bottom: 6px solid #7F7C6A;
    background-color: white;
    padding-bottom: 20px;
    }

/* Banner elements  */
	
#banner {
    padding: 6px 10px;
    margin-bottom: 10px;
    }
#title-box {
    float: left;
    margin-bottom: 8px;
    }
* html #title-box	{
    margin-bottom: 0;
    }

/* h1 = page title */

#title-box h1 {
    margin: 0;
    margin-bottom: 4px;
    font-family: georgia, serif;
    font-size: 140%;	
    font-weight: normal;
    letter-spacing: 0.05em;
    }

/* h5 = breadcrumb */

#title-box h5 {
    margin: 0;
    margin-left: 1px;
    padding-bottom: 2px;
    font-size: 90%;
    }
div#global-search {
    float: right;
    margin-top: 8px;
    }
* html div#global-search {
    margin-top: -12px;
    }
* html #global-search-button {
    margin-bottom: 1px;
    }
#global-search #global-search-button {
    border: 0;
    vertical-align: middle;
    margin-bottom: 1px;
    }     
input.search-text {
    width: 140px;
    border: 3px double silver;
    font-family: verdana, arial, helvetica, sans-serif;
    vertical-align: middle;
    }

/* remove after substituting images for all input buttons */

input.button {
    font-size: 80%;
    margin-bottom: 1px;
    padding: 2px;
    border: 2px solid;
    background-color: #CFB1AC;
    border-color: #FFE4DF #FF917F #FF917F #FFE4DF;
    color: white;
    font-weight: bold;	
    }
input.button-hover {
    background-color: #FFA17F;
    border-color: #FFE7DF #FF723F #FF723F #FFE7DF;
    }	
	
/* Horizontal | Icon navigation elements */ 	
	
#horizontal-navigation { 
    clear: both;
    padding: 4px 0 20px 0;
    background-color: #F7F2EA;
    color: white;
    text-align: left;	
    }
* html #horizontal-navigation { 
    margin-top: -2px;
    padding: 2px 0 20px 0;
    }	
#horizontal-navigation a {
    display: block;
    float: left;
    width: 10.40%;
    margin: -2px 0 0 0;
    padding: 2px 0 3px 0;
    font-size: 90%;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    border: 1px solid;
    }
#horizontal-navigation a:link,
#horizontal-navigation a:visited {
    color: #777777;	
    background-color: #F7F2EA;
    border-color: #FFFFEE #AAAB9C #CCCCCC #FFFFFF;		
    }
#horizontal-navigation a:hover,
#horizontal-navigation a:active {
    color: #800000;
    background-color: #F0E7D7;
    border-color: #AAAB9C #FFFFFF #FFFFFF #CCCCCC;
    }
div#icon-navigation {
    float: right;
    width: 100px;
    margin-top: -20px;
    padding-right: 10px;
    background-color: transparent;
    text-align: right;
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                HOME.HTML template                 */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */	

/* WordPress Feed */

.feedDescription h2 a:link,
.feedDescription h2 a:visited,
.feedDescription h2 a:hover,
.feedDescription h2 a:active {
    color: #7F7C6A;
    }
.feedItemTitle	{
    margin-bottom: -4px;
    }
.feedItemTitle a	{
    font-weight: bold;
    }
.feedItemTitle a:link,
.feedItemTitle a:visited {
    color: #333333;
    }
.feedItemTitle a:hover,
.feedItemTitle a:active {
    color: gray;
    }	
li.feedItem {
    margin: 0;
    margin: -1px 6px 16px -34px;
    padding: 10px;
    list-style: none;
    line-height: 140%;
    border: 1px solid #B5C6A5;
    background-color: #FDFDFD;
    color: #333333;
    }
* html li.feedItem {
    margin-top: -8px;
    } 	
li.feedItem p {
    margin: 10px 0;
    }

/* prevent posting date from displaying */	

li.feedItem .meta {
    display: none;
    }
	
	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*        INTAKE_CONTACT_LIST.HTML template          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */	
	
#side-form {
    margin-top: 10px;
    padding-left: 4px;
    font-weight: bold;
    font-size: 85%;
    color: gray;
    }
* html #side-form {
    margin-top: -10px;
    }
#side-form input {
    width: 140px;
    margin-bottom: 4px;
    font-size: 110%;
    font-weight: normal;
    }
#side-form select {
    margin-bottom: 4px;
    font-size: 110%;
    font-weight: normal;    
    }
input    
input#suffix,
input#dob,
input#ssn {
    width: 91px;
    }
input#area-code {
    display: inline;
    width: 24px;
    }
input#phone {
    display: inline;
    width: 58px;
    margin-left: 2px;
    }
#side-form-submit {
    margin-top: 10px;
    }
#side-form-submit input.initial-intake,
#side-form-submit input.button-hover {
    display: block;
    margin-left: 4px;
    margin-bottom: 6px;
    }
   
/* Intake Search Results TABLE */

p.following {
    margin: 8px 10px 0 0;
    font-size: 85%;
    }

/* Heading for "Phonetic" and "Contact" matches */

h3 {
    margin: 10px 0;
    font-size: 130%;
    font-family: georgia, serif;
    }        
.intake-search-results {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 85%;
    }
.intake-search-results th {
    padding: 1px 0 3px 0;
    color: white;
    background-color: #B5C6A5;
    border: 1px solid #CAA8B6;
    border-right: 1px solid #B5C6A5;
    border-bottom: 1px solid #7C806A;
    text-align: left;
    }
th.last {
    border-right: 1px solid #7C806A;
    }
.intake-search-results td {
    padding: 4px 0 6px 0;
    }
img.marker {
    margin: 3px 0 0 3px;
    }   
.row1 {
    background-color: transparent;
    }
.row2 {
    background-color: #F7F2EA;
    }
.row2 td {
    border: 1px solid silver; black;
    border-right: 1px solid #F7F2EA;
    border-bottom: 1px solid #F7F2EA;
    }
.row2 td.last {
    border-right: 1px solid #848982; #7B767D; black;
    }
.row2 td.row-bottom {
    border-bottom: 1px solid #848982; #7B767D; black;
    } 
.row1 a:link.options,
.row1 a:visited.options {
    border: 1px solid silver;
    background-color: white;
    color: black;
    padding: 1px 3px 2px 3px;
    text-decoration: none;
    font-size: 75%;
    font-weight: bold;
    }
.row1 a:hover.options,
.row1 a:active.options {
    background-color: #F7F7F7;
    color: blue;
    }   
.row2 a:link.options,
.row2 a:visited.options {
    border: 1px solid silver;
    background-color: #F0E7D7;
    color: black;
    padding: 1px 3px 2px 3px;
    text-decoration: none;
    font-size: 75%;
    font-weight: bold;
    }
.row2 a:hover.options,
.row2 a:active.options {
    background-color: #F7F7F7;
    color: blue;
    }
.first-option {
    margin-left: 12em;
    }   
h2#create {
    margin-top: 20px;
    }
input#continue {
    float: left;
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*          INTAKE_STEP1.HTML template               */
/*          INTAKE_STEP1b.HTML template              */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

h3 {
    margin-top: 20px;
    }
.radio-buttons {
    float: left;
    margin-top: 10px;
    margin-bottom: 14px;
    font-size: 90%;
    }
* html .radio-buttons {
    margin-bottom: -6px;
    }
.citizen-screen {
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 90%;
    background-color: white;
    padding: 3px 10px 8px 3px;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    }
* html .citizen-screen {
    margin-top: -10px;
    }        
#verify {
    float: left;
    margin-top: 10px;    
    margin-left: 20px;
    font-size: 90%;
    }
* html .radio-buttons,
* html #verify {
    margin-top: -10px;
    }
#verify ul {
    margin-left: -20px;
    }
* html #verify ul {
    margin-top: -4px;
    margin-left: 20px;
    }        
#verify a {
    display: block;
    margin-top: 10px;
    margin-left: 4px;
    }    
#verify input {
    border: 0;
    }
.input-submit-step {
    margin-top: 14px;
    }
.radio-buttons input {
    border: 0;
    }		
.alien-status01 {
    float: left;
    margin-top: -10px;
    margin-right: 10px;
    width: 277px;
    font-size: 90%;
    }
.alien-status02 {
    float: right;
    margin-top: -10px;   
    width: 277px;
    font-size: 90%;
    }    
.alien-status01 div,
.alien-status02 div {
    padding: 3px 0 8px 3px;
    background-color: #F7F2EA;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    }
.alien-status01 h3,
.alien-status02 h3 {
    padding-left: 4px;
    }
* html .alien-status01 h3,
* html .alien-status02 h3 {
    margin-top: 0;
    }
.alien-document {
    float: right;
    clear: both;
    width: 220px;
    text-align: right;
    margin-top: 0px;
    margin-right: 86px;
    font-size: 90%;
    }
* html .alien-document {
    margin-right: 42px;
    }
.step1b-help {
    float: left;
    }
.step1b-help ul {
    margin: 0;
    margin-left: -20px;
    }    
* html .step1b-help {
    margin-top: 20px;
    }
* html .step1b-help ul {
    margin-left: 20px;
    }        
.step1b-help a {
    font-size: 90%;
    }    
.notes {
    clear: both;
    font-size: 85%;
    font-weight: bold;
    }
textarea {
    border: 3px double #B5C6A5;
    background-color: white;
    width: 400px;
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*              INTAKE_STEP2.HTML                    */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Household size ~ wage calculator */

.intake-calculators {
    margin-top: 0;
    }
.household,
.wage-calculator {
    float: left;
    margin-top: 10px;
    margin-right: 5px;
    }
* html .household,
* html .wage-calculator {
    margin-top: -10px;
    }
.household input,
.wage-calculator input {
    width: 50px;
    margin-top: 1px;
    }         
.household span.label,
.wage-calculator span.label {
    padding-left: 2px;
    font-size: 80%;
    font-weight: bold; 
    }
.wage-calculator span.label {
    padding-left: 10px; 
    }    
.wage-calculator {
    margin-left: 10px;
    }
#wage-button .button {
    margin-top: 22px;
    margin-left: 4px;
    font-size: 90%;
    }
* html #wage-button .button {
    margin-top: 4px;
    }        
    
/* income/assets input/select TABLE grid */

#eligibility-grid {
    clear: both;
    margin-top: 10px;
    border-collapse: collapse;
    }
#eligibility-grid input {
    width: 70px;
    }
#eligibility-grid input,
#eligibility-grid select {
    margin-bottom: 3px;
    }    
#eligibility-grid th {
    font-size: 80%;
    padding: 1px 0 3px 0;
    color: white;
    background-color: #B5C6A5;
    border: 1px solid #CAA8B6;
    border-right: 1px solid #B5C6A5;
    border-bottom: 1px solid #7C806A;
    }
#eligibility-grid th.last {
    border-right: 1px solid #7C806A;
    }
#first-row input,
#first-row select {
    margin-top: 4px;
    }    
#eligibility-grid td.asset {
    padding-left: 12px;
    }
#total-row td {
    text-align: right;
    }
#total-row b {
    margin-right: 2px;
    }    

/*  poverty wrapper */
/*  calculate poverty percentage */
/*  income justification */

#poverty-wrapper {
    float: left;
    margin-top: 16px;
    margin-bottom: 14px;
    background-color: #F7F2EA;
    padding: 0 12px 12px 12px;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    }
* html #poverty-wrapper {
    padding: 12px 12px;
    }    
h4 {
    clear: both;
    margin-bottom: 4px;
    padding: 4px 0 4px 4px;
    border: 1px solid #B5C6A5;
    background-color: white;
    color: #7F7C6A;
    font-size: 80%;
    }
.poverty01,
.poverty02 {
    float: left;
    line-height: 40%;
    }
.poverty01 {
    clear: both;
    margin-right: 10px;
    }
.poverty01 input#percentage {
    width: 50px;
    }
.poverty01 h4 {
    width: 122px;
    }
.poverty02 h4 {
    width: 165px;
    }
* html .poverty02 h4 {
    width: 160px;
    }    
.poverty02 select {
    background-color: white;
    }    
.step2-help {
    float: left;
    margin-top: 20px;
    }
.step2-help a {
    font-size: 90%;
    }
.step2-help ul {
    margin: 0;
    margin-left: -10px;
    }    
* html .step2-help {
    margin-top: 20px;
    }
* html .step2-help ul {
    margin-left: 30px;
    }    
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*        CONTACT_FULL.HTML ~ initial intake         */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */    
    
#contact-container {
    margin-top: -19px;
    }
#contact-container input,
#contact-container select {
    font-size: 110%;
    }    
p.no-aliases {
    font-size: 85%;
    font-weight: bold;
    text-align: center;
    margin-bottom: -4px;
    }
.contact01,
.contact02 {
    float: left;
    margin-top: 10px;
    margin-right: 14px;
    padding: 8px 10px 8px 12px;
    background-color: #F7F2EA;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    font-weight: bold;
    font-size: 85%;
    color: gray;
    }
* html .contact01,
* html .contact02 {
    padding-right: 0;
    }

/* "contact01" input fields */

.contact01 input {
    width: 104px;
    margin-bottom: 4px;
    }
.contact01 input#suffix {
    width: 104px;
    }
.contact01 input#dob {
    width: 70px;
    }
.contact01 input#age {
    width: 22px;
    margin-left: 2px;
    }    
.contact01 input#ssn {
    width: 104px;
    }
.contact01 input#area-code {
    width: 26px;
    }
.contact01 input#phone {
    width: 67px;
    margin-left: 2px;    
    }

/* "contact02" input fields */    

.contact02 input {
    margin-bottom: 4px;    
    }
.contact02 input#zip {
    width: 80px;
    }
.contact02 input#county {
    width: 79px;
    margin-left: 4px;
    }
.contact02 input#address {
    width: 172px;
    }    
.contact02 input#city {
    width: 138px;
    }
.contact02 input#state {
    width: 22px;
    margin-left: 2px;    
    }
.contact02 input#email {
    width: 138px;
    }	

/* "contact03" select fields */ 

.contact03 {
    float: left;
    margin-top: 10px;
    font-weight: bold;
    font-size: 85%;
    color: gray;
    }
.contact03 select {
    margin-bottom: 4px;
    font-size: 110%;
    }

/* "contact04" contact notes */ 
        
.contact04 {
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 364px;
    font-weight: bold;
    font-size: 85%;
    }		
textarea#contact-notes {
    width: 400px;
    }
div#save-contact {
    clear: both;
    float: left;
    margin-top: -50px;
    margin-bottom: 10px;
    font-size: 80%;
    }
* html div#save-contact {
    clear: both;
    float: left;
    margin-top: -35px;
    margin-bottom: 10px;
    font-size: 100%;
    }    
div#save-contact input {
    width: 40px;
    font-weight: bold;
    font-size: 90%;
    }
* html div#save-contact input {
    font-weight: normal;
    }    
    
/* "Contact List" cases and intake tables */

.table-container {
    clear: both;
    padding: 0 10px;
    text-align: center;
    font-size: 100%;
    }
h2.list-results {
    border: 1px solid #B5C6A5;
    background-color: white;
    text-align: left;
    font-size: 110%;
    color: #7F7C6A;
    padding-left: 6px;
    padding-bottom: 2px;
    margin: 0px 0px 0px 0px;
    }
.list-results {
    width: 730px;
    border-collapse: collapse;
    margin: 10px auto 20px auto; /* "auto" = centers table */
    font-size: 85%;
    text-align: left;
    }
.list-results th {
    padding: 1px 0 3px 0;
    color: white;
    background-color: #B5C6A5;
    border: 1px solid #CAA8B6;
    border-right: 1px solid #B5C6A5;
    border-bottom: 1px solid #7C806A;
    }
.list-results th.first {
    padding-left: 4px;
    }    
.list-results th.last {
    border-right: 1px solid #7C806A;
    }
.list-results td {
    padding: 4px 0 2px 4px;
    }
.list-results td.row-bottom {
    padding-bottom: 6px;
    }        
.list-results .first-option {
    margin-left: 8em;
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*            CASE_SCREEN.HTML template	    	     */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */    
    
/*  warning flags
    (pikaMsc.php, pika_cms.php and case_screen.html) */

span.warning {
    color: red;
    font-size: 80%;
    font-weight: bold;
    margin-right: -6px;
    }
div.warning-flags {
    text-align: center;
    background-color: #F0E7D7;
    height: 20px;
    padding-top: 3px;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    }
div.warning-flags p {
    vertical-align: middle;
    margin: 0;
    }    
img.warning-icon {
    vertical-align: top;
    margin-left: 16px; /* creates space between warnings */
    }
    
/* case summary */    

li.list-item-special {
    margin: 10px 0 0px 0;
    color: #7F7C6A;
    font-size: 90%;
    font-weight: bold;
    }
* html li.list-item-special {
    margin-bottom: -10px;
    }    
p.side-case-input {
    font-size: 80%;
    font-weight: bold;
    color: gray;
    }
.side-case-screen input,
.side-case-screen select {
    font-size: 120%;
    margin-bottom: 4px;
    }
* html .side-case-screen input,
* html .side-case-screen select {
    font-size: 110%;
    }    
p#add-button input {
    width: 40px;
    margin-top: 0;
    font-size: 90%;
    }
* html p#add-button input {
    margin-top: -10px;
    font-size: 100%;
    }    
    
/* case page tabs */

div#case-tabs {
    background-color: #F7F2EA;
    padding: 5px 0 6px 1px;
    margin-bottom: -6px;
    border-right: 3px solid #BFBCB5;
    }
div#case-tabs a,
div#case-tabs span {
    font-size: 90%;
    background-color: #F7F2EA;
    padding: 3px 7px 5px 7px;
    margin-right: -4px;
    border: 1px solid #B5C6A5;
	}
div#case-tabs a:hover {
    background-color: #F0E7D7;
    }    
div#case-tabs span {
    background-color: white;
    font-weight: bold;
    font-size: 100%;
    border-bottom: 1px solid white;
    }
div#case-tabs a:link,
div#case-tabs a:visited {
    color: #777777;	
    background-color: #F7F2EA;
    border-top: 1px solid #FFFFEE;
    border-right: 1px solid #AAAB9C;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #FFFFFF;
    }
div#case-tabs a:hover,
div#case-tabs a:active {
    color: #800000;
    background-color: #F0E7D7;
    border-color: #AAAB9C #FFFFFF #FFFFFF #CCCCCC;
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*              Notes Tab (case record)              */
/*              ACTIVITYN.HTML template              */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.case-notes {
    margin-top: 20px;
    padding-left: 1px;
    font-size: 85%;
    font-weight: bold;
    color: gray;
    }
* html .case-notes {
    margin-top: 0;
    }    
.case-notes input {
    width: 552px;
    font-size: 130%;
    font-family: 'courier new', monospace;
    padding: 1px;
    margin-top: 0;
    margin-bottom: 6px;
    }
.case-notes textarea {
    width: 550px;
    }    
.case-notes-side {
    float: left;
    width: auto;
    margin: 14px 10px 20px 1px;
    padding: 8px 10px 12px 10px;
    background-color: #F7F2EA;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    font-size: 85%;
    font-weight: bold;
    color: gray;	
    }
* html .case-notes-side {
    margin-bottom: 0; 
    }     
* html #case-notes-side02 {
    padding-bottom: 18px;
    }    
.case-notes-side input,
.case-notes-side select {
    margin-bottom: 2px;
    font-size: 110%;
    }
.case-notes-side select {
    background-color: white;
    }
div#save-note {
    float: right;
    font-size: 100%;
    margin-right: 12px;
    margin-top: 14px;
    }
* html div#save-note {
    margin-right: 3px;
    }    
.notes-container {
    font-size: 90%;
    font-weight: normal;
    }
.notes-container hr {
    height: 1px;
    margin: 20px 0;
    border: 0px solid transparent;
    border-bottom: 1px solid #B5C6A5;
    }
* html .notes-container hr {
    margin: 0;
    }     
#notes-order {
    margin: 16px 0 0 -20px;
    }
* html #notes-order {
    margin-left: 20px;
    }    
p.user-id {
    color: gray;
    }    	
p.case-notes-entry {
    line-height: 130%;
    }
span.notes-summary {
    font-weight: bold;
    }
p#total-hours {
    margin: -21px 0 20px 0;
    font-size: 130%;
    border: 1px solid #B5C6A5;
    padding: 10px;
    text-align: center;
    background-color: #F7F2EA;    
    }
* html p#total-hours {
    margin-top: -8px
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*             Conflicts Tab (case record)           */
/*             CASE_CONFLICT.HTML template           */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */    
    
h2#primary,
h2#name,
h2#ssn {
    margin-top: 16px;
    margin-bottom: 0;
    }
p.none {
    margin: 10px 16%;
    padding: 4px 0 6px 0;
    text-align: center;
    font-weight: bold;
    color: red;
    background-color: #F7F2EA;
    border: 1px dotted silver;
    }    

/* based on CSS for ".intake-search-results" */

.conflict-results {
    width: 563px;
    border-collapse: collapse;
    margin: 4px 0 0 2px;
    font-size: 85%;
    }
.conflict-results td {
    padding: 4px 0 6px 0;
    }    
.conflict-results th {
    padding: 1px 0 3px 0;
    color: white; #7F736A;
    background-color: #B5C6A5;
    border: 1px solid #CAA8B6;
    border-right: 1px solid #B5C6A5;
    border-bottom: 1px solid #7C806A;
    text-align: left;
    }
.conflict-results th.first,
.conflict-results td.first {
    padding-left: 6px;
    }     
th.last {
    border-right: 1px solid #7C806A;
    }
.row1 {
    background-color: transparent;
    }
.row2 {
    background-color: #F7F2EA;
    }
.row2 td {
    border: 1px solid silver;
    border-right: 1px solid #F7F2EA;
    border-bottom: 1px solid #F7F2EA;
    }
.row2 td.last {
    border-right: 1px solid #848982;
    }
.row2 td.row-bottom {
    border-bottom: 1px solid #848982;
    }     

/* elements below conflict tables */

.conflicts {
    font-size: 90%;
    font-weight: normal;
    line-height: 3em;
    }
ul#conflict-list {
    font-size: 90%;
    margin-top: 10px;
    margin-left: -28px;
    margin-bottom: -10px;
    }
* html ul#conflict-list {
    margin-left: 16px;
    }        
.conflicts select {
    font-size: 100%;
    }    

    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*            Eligibility Tab (case record)          */
/*              CASE_ELIG.HTML template              */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */        
    
/* see CSS code for INTAKE_STEP2.HTML template for most elements  */

/* additional styling elements */

#wage-button input {
    margin-top: 20px;
    }
* html #wage-button input {
    margin-top: 1px;
    }    
#calculate {
    padding: 0;
    }
#percentage {
    vertical-align: top;
    margin-top: 1px;
    }
#status-wrapper {
    float: left;
    margin-top: 0;
    margin-bottom: 14px;
    background-color: #F7F2EA;
    padding: 0 12px 12px 12px;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    }
* html #status-wrapper {
    padding: 12px 12px;
    }    
.status01,
.status02 {
    float: left;
    line-height: 40%;
    }
.status01 select,
.status02 select {
    background-color: white;
    }    
.status01 {
    clear: both;
    margin-right: 10px;
    }
.status01 h4 {
    width: 136px;
    }
.status01 input {
    width: 50px;
    border: 0;
    margin-top: 6px;
    }
.status01 #citizen_check {
    width: 14px;
    margin-top: 10px;
    margin-left: 10px;
    }
* html .status01 #citizen_check {
    width: 40px;
    margin-left: -6px;
    margin-right: -10px;
    }    
.status01 span {
    font-size: 90%;
    vertical-align: 80%;
    }
.status02 h4 {
    width: 165px;
    }
.status02 h4#document {
    margin-top: 10px;
    }    
* html .status02 h4 {
    width: 232px;
    }
.status-help {
    float: left;
    width: 120px;
    margin-top: 10px;
    }
.status-help ul {
    margin-left: -10px;
    }
* html .status-help ul {
    margin-left: 30px;
    }        
.status-help a {
    font-size: 90%;
    }
p.save-update {
    margin-top: 10px;
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*            Case Info Tab (case record)            */
/*              CASE_ELIG.HTML template              */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */    
    
.case-info01 {
    float: left;
    width: auto;
    margin: 20px 10px 20px 1px;
    padding: 8px 10px 12px 10px;
    background-color: #F7F2EA;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    font-size: 85%;
    font-weight: bold;
    color: gray;
    }
.case-info02 {
    float: left;
    width: auto;
    margin: 20px 0 0 10px;
    font-size: 85%;
    font-weight: bold;
    }
* html .case-info01,
* html .case-info02 {
    margin-top: 0;
    }
.case-info01 input,
.case-info02 input,
.case-info03 input,
.case-info01 select,
.case-info02 select,
.case-info03 select {
    margin-bottom: 4px;
    font-size: 110%;
    background-color: white;
    }
.case-info02 select {
    background-color: #F5F9F5;
    }        
h2#case-close {
    clear: both;
    margin: 0 0 0 0;
    }
* html h2#case-close {
    margin: -20px 0 16px 0;
    }        
.case-info03 {
    float: left;
    width: auto;
    margin: 16px 10px 20px 1px;
    padding: 8px 10px 12px 10px;
    background-color: #F7F2EA;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    font-size: 85%;
    font-weight: bold;
    color: gray;
    }
* html .case-info03, 
* html .case-info04 {
    margin-top: 0;
    }    
.case-info03 select {
    background-color: white;
    }
.case-info04 {
    float: left;
    margin-top: 16px;
    font-size: 90%;
    }
.case-info04 input {
    border: 0;
    }
p#case-info-save {
    float: left;
    clear: both;
    margin-top: -6px;
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*          Site Map ~ three column list		     */
/*          CONTENTS_FORM.HTML template             */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

h2.full-width {
    margin: 10px 14px -4px 10px;
    padding-bottom: 2px;
    border: 1px solid #B5C6A5;
    background-color: white;
    color: #7F7C6A;
    font-size: 110%;
    text-align: center;
    }
.listcolumn {
    float: left;
    width: 240px;
    font-size: 90%;
    }
* html .listcolumn {
    margin-top: 15px;
    }
.listcolumn ul {
    list-style: square;
    }
.listcolumn ul ul {
    list-style: circle;
    margin-left: -10px;
    }
* html .listcolumn ul ul {
    margin-left: 30px;
    }
.listcolumn li {
    line-height: 1.70em;
    }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*             Case List Search Results              */
/*             CASE_LIST.HTML template               */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */    
    
h2#custom-search {
    margin-top: 14px;
    }
.case-list-checkbox {
    margin: 6px 0 20px 0;
    font-size: 85%;
    font-weight: bold;
    color: gray;
	}
.case-list-checkbox input {
    border: 0;
    }
input#opened_before,
input#closed_before,
input#opened_on_after,
input#closed_on_after {
    width: 110px;
    }

/* case list ~ search results TABLE */

#case-list {
    width: 100%;
    font-size: 85%;
    }
#case-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 20px;
	}
#case-list-table th {
    padding: 1px 0 3px 0;
    color: white;
    background-color: #B5C6A5;
    border: 1px solid #CAA8B6;
    border-right: 1px solid #B5C6A5;
    border-bottom: 1px solid #7C806A;
    text-align: left;
    }
#case-list-table th.first {
    padding-left: 4px;
    }
#case-list-table th.last {
    border-right: 1px solid #7C806A;
    }    
#case-list-table th a:link,
#case-list-table th a:visited {
    color: white;
    }
#case-list-table th a:hover,
#case-list-table th a:active {
    color: black;
    background-color: #B5C6A5;    
    }			
#case-list-table td {
    padding: 4px 0 4px 4px;
    }
img.time-icon {
    margin-left: 6px;
    }
#page-links {
    font-size: 110%;
    }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                  Time Slip Screen                 */
/*              ACTIVITYT.HTML template              */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */    
    
.time-notes {
    float: left;
    font-size: 85%;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 14px;
    color: gray;
    display: inline;
    }
* html .time-notes{
    margin-top: -7px;
    }        
.time-notes input,
.time-notes select,
.time-notes textarea,
.time-slip01 input,
.time-slip01 select,
.time-slip02 input,
.time-slip02 select {
    margin-bottom: 4px;
    }
.time-notes input,
.time-notes textarea {
    width: 380px;
    }
.time-notes textarea {
    height: 254px;
    }        
.time-notes input {
    padding: 1px;
    font-family: "courier new", monospace;
    font-size: 130%;
    }
.time-notes select {
    font-size: 110%;
    }    
.time-slip01,
.time-slip02 {
    float: left;
    width: auto;
    margin-left: 20px;
    padding: 8px 10px 12px 10px;
    background-color: #F7F2EA;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    font-size: 85%;
    font-weight: bold;
    color: gray;
    display: inline;
    }
.time-slip01 {
    margin-top: 16px;
    }
* html .time-slip01 {
    margin-top: -2px;
    }        
.time-slip01 input,
.time-slip01 select,
.time-slip02 input,
.time-slip02 select {
    font-size: 110%;
    background-color: white;
    }
.time-slip02 {
    margin-top: 11px;
    }    
#submit-buttons {
    clear: both;
    margin-left: 14px;
    }
#submit-buttons input {
    border: 0;
    margin-top: 10px;
    }
    
    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*               MSR Data Entry Screen               */
/*              ACTIVITYT.HTML template              */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */    

.msr-data01 {
    float: left;
    width: auto;
    margin-top: 10px;
    margin-left: 14px;
    padding: 8px 10px 12px 10px;
    background-color: #F7F2EA;
    border-top: 1px solid #F4E1CC;
    border-right: 1px solid #C6B6A5;
    border-bottom: 1px solid #C6B6A5;
    border-left: 1px solid #F4E1CC;
    font-size: 85%;
    font-weight: bold;
    color: gray;
    display: inline;
    }
* html .msr-data01 {
    margin-top: -4px;
    }
.msr-data01 input,
.msr-data01 select {
    font-size: 110%;
    margin-bottom: 4px;
    background-color: white;
    }
#msr-data02 {
    margin-top: 10px;
    margin-left: 10px;
    }
#msr-narrative {
    height: 50px;
    }
.msr-checkbox input {
    border: 0;
    margin-top: 4px;
    vertical-align: middle;
    background-color: transparent;
    }
.msr-hr {
    margin: 19px 2px 12px 0;
    border-bottom: 1px solid #BFBCB5;
    }
* html .msr-hr {
    margin: 12px 2px 12px 0;
    }        
.msr-notes {
    float: left;
    font-size: 85%;
    font-weight: bold;
    margin-top: 10px;
    margin-left: 14px;
    color: gray;
    display: inline;    
    }
* html .msr-notes {
    margin-top: -4px;
    }        
.msr-notes input,
.msr-notes select,
.msr-notes textarea {
    margin-bottom: 4px;
    }
.msr-notes input,
.msr-notes textarea {
    width: 380px;
    }
.msr-notes textarea {
    height: 50px;
    }        
.msr-notes input {
    padding: 1px;
    font-family: "courier new", monospace;
    font-size: 130%;
    }
.msr-notes select {
    font-size: 110%;
    }
#msr-funding {
    margin-left: 14px;
    }
    

Return to Table of Contents