
/*  ****************************************************************************
    Base styles for entire rciApp 
    ************************************************************************* */

body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue","Bitstream Vera Sans",Arial,Helvetica,sans-serif;
	/* font-size: 62.5%; */  /*  16px × 62.5% = 10px */
	font-size: 16px;  
	color: #000;
	background-color: #0a1a1c;
	background: #0a1a1c url(../images/rciGroundStripVert.png) repeat top center;
	text-align: center; /* for IE 5 - keep content centered */
	}

a         { text-decoration: none; }
a:link    { color:#000099 }
a:visited { color:#333385 }
a:hover   { color:#990000; text-decoration: underline; }
a:active  { color:#990000 }



/*  ****************************************************************************
    Container wraps all content & divs including #header, #content, and #footer
    ************************************************************************* */

div#container {
	/* margin: 0px auto;*/
	margin: 0px auto; 
	width: 950px;
	padding: 0px; 
	text-align: left;
	background-color: #fff;
	/* font-size: 62.5%;    16px × 62.5% = 10px */
    } 

/* pages from topNav */
#container div#indexWrap         { margin: 36px 24px; }
#container div#consentWrap       { margin: 36px 24px; }
#container div#questionnaireWrap { margin: 36px 24px; } 
#container div#thankYouWrap      { margin: 36px 24px; } 
#container div#no-thankYouWrap   { margin: 36px 24px; } 
#container div#howToEnableJSWrap { margin: 36px 24px; }
#container div#demographic-infoWrap { margin: 36px 24px; } 
#container div#info-introductionWrap { margin: 36px 24px; } 
#container div#work-forceWrap    { margin: 36px 24px; } 
#container div#alcoholismWrap    { margin: 36px 24px; } 
#container div#immigrationWrap   { margin: 36px 24px; } 
#container div#adminRCIWrap      { margin: 36px 24px; } 
#container div#adminSurveysWrap  { margin: 36px 24px; }
#container div#adminCSVsurveyWrap{ margin: 36px 24px; }
#container div#resetWrap         { margin: 36px 24px; }
#container div#aboutWrap         { margin: 36px 24px; }
#container div#usingWrap         { margin: 36px 24px; }
#container div#researchWrap      { margin: 36px 24px; }
#container div#inquireWrap       { margin: 36px 24px; }
#container div#aboutWrap         { margin: 36px 24px; }
#container div#sendInquiryWrap   { margin: 36px 24px; }











 







/* pages from bottomNav 
#container div#adminWrap  { margin: 24px; }
#container div#accountWrap{ margin: 24px; }
#container div#aboutWrap  { margin: 24px; }
*/

/* other pages  
#container div#inviteWrap { margin: 24px; }
#container div#registerWrap{margin: 24px; }
#container div#regSubmitWrap{margin: 24px; }
*/

/* pop-up help windows, have no wrappers or container divs 
#container div#help_searchingNamesWrap { margin: 0px 24px 0px 24px; }
#container div#help_passwordWrap       { margin: 0px 24px 0px 24px; }
#container div#help_loginWrap          { margin: 0px 24px 0px 24px; }
*/




/*  ****************************************************************************
    Header 
    ************************************************************************* */

#header {
	clear: both;
	height: 100px;
	background: #003535 url(../images/rciGroundHeader.png) repeat-x top left;
	}
	
#headerBanner {
	clear: both;
	height: 82px;
	background: url(../images/rciPageBanner.png) no-repeat 0 0;
}	
	
/* Dan Cederholm inspired mini tabs */
/* http://www.simplebits.com/archives/2003/06/07/mini_tabs_the_untab_tab.html */
/* relative font-size version */

/* Header tabs -- see variation in the footer tabs */ 
                                                           
.tabsHeadContainer {
	clear: both;
	width: 100%;
	height: 22px;
	border-top: 1px solid #cca150;
	border-bottom: 1px solid #7f6432;
	background: #917b48 url(../images/rciGroundTabs.png) no-repeat left top;
}
#tabs {
	margin: 5px 0 0 0;
	padding: 0px;
	margin-left: 4px;
	}
#tabs li {
	float: left;
	margin: 0; 
	padding: 0;
	display: inline;
	list-style: none;
	color: #D6B66C;
	border-right: 1px solid #6e4700;
}
#tabs a:link, #tabs a:visited {
	float: left;
	font-size: .8em;
	text-transform: uppercase;
	font-weight:bold;
	line-height: 12px;
	margin: 0 20px 0 20px;
	color: #2e1f13;
	text-decoration: none;
	letter-spacing: 1px;
}
#tabs a.active:link, #tabs a.active:visited, #tabs a:hover {
	/*border-bottom:  2px solid #E1DAA6;*/
	padding-bottom: 4px;
	color: #E1DAA6;
	}

body#index    #tabIndex a, 
body#about    #tabAbout a, 
body#using    #tabUsing a, 
body#research #tabResearch a, 
body#inquire  #tabInquire a {
	border-bottom:  4px solid #fff;
	padding-bottom: 3px;
	color:#fff;
	margin-top:0px;
	margin-bottom:-2px;
   }
		
/*  ****************************************************************************
    Main content area -- this is the white part of the page 
    ************************************************************************* */
/**/
#content {
	clear: both;
	margin: 0px;
	padding: 0px;
	background-color: #fff;
	min-height: 400px;
	font-family: "Helvetica Neue","Bitstream Vera Sans",Arial,Helvetica,sans-serif;
    color: #444;
    text-decoration: none;
    word-spacing: -0.05em;
    text-align: left;
    letter-spacing: 0;
    line-height: 1.4em;
	}
	
#content h1 { 
    font-size: 1.6em; /* 10px × 1.6em = 16px */ 
    margin: 0px 0px 16px 0px; 
    color: #000; 
    } 
#content h2 { 
    font-size: 1.4em; /* 10px × 1.4em = 14px */ 
    margin: 0px 0px 14px 0px; 
    color: #000; 
    }     
#content h3 { 
    font-size: 1.2em; /* 10px × 1.2em = 12px */ 
    margin: 12px 0px 2px 0px; 
    color: #000; 
    }    
#content p  { 
    font-size: 1.0em; /* 10px × 1.0em = 10px */ 
    margin: 0px 0px 8px 0px; 
    } 
#content p.smaller,div.smaller,span.smaller { 
    margin: 0px 0px 6px 0px; 
    font-size: .9em; /* 10px × .9em = 9px */ 
    } 

#content hr {
    border: none 0; 
	border-top: 1px dotted #aaa;
	width: 100%;
	height: 2px;
	margin: 10px auto 4px 0;
	text-align: left;
	}	 


/* table styles */
#content table  {
	margin-bottom: 16px;
	}
#content table td  {
	padding: 1px 6px;
	}	

#content table.tdBorderBottom td  {
	border-bottom: 1px solid #ccc;
	vertical-align: top;
	}


#content .subhead	{
    font-weight:bold;
    font-size: 1.1em; /* 10px × 1.1em = 11px */ 	 
    margin: 11px 0px 2px 0px; 
    color: #000; 
   }
	
#content .example	{
    font-size: 1.0em; /* 10px × 1.0em = 10px */ 	 
    margin: 11px 0px 2px 24px; 
    /* color: #000; */
   }	
	


/* local additions to jquery ui styles */
ul#icons              { margin: 0; padding: 0; }
ul#icons li           { margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon { margin: 0 4px; float: left; }


#uitabs { font-size:95%;  }

#uitabs dl    { margin: 20px 0px;   }/*border:#CC3366 solid 1px;*/
#uitabs dt    { margin:0; padding:3px 10px; background-color:#dbd3ba; font-weight:bold;   }
#uitabs dd    { margin:0 0 10px 0; padding:3px 10px; background-color:#e6e2d7; } 


/* .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a */
.ui-tabs .ui-tabs-nav li a {
	margin-left: 7px ;
	background: url(../images/form_blue.png) no-repeat 0px 9px;
	padding-left: 21px;
   }


 

/* used in forms */

div.questionWrap { margin:20px 0; }


        
#content p.similarityQuestion { margin-bottom: 0px; margin-top:18px; }
#content p.similarityRadios   { margin-top: 0px;  }
		  
#content p.pOverLittleRadios  { margin-bottom:0px; font-size:65%; text-transform:uppercase; letter-spacing: 1px; }      
#content p.littleRadios       { margin-top:0px;    }




#content p.labelp        { margin: 12px 6px  3px 0px; font-size: 90%; font-weight: bold; color:#000000; }    
#content p.submit        { margin: 12px 6px 12px 0px; font-size: 90%; font-weight: bold; }  
#content div.labelp      { font-size: 90%; }    


#inviteWrap #requestInviteForm input    { width: 300px; }
#inviteWrap #requestInviteForm textarea { width: 300px; } 


#content div.itemTitle   { font-weight: bold; margin-bottom: 2px; }
#content div.itemContent {   }
  
  
#content .warning {
	color: #7b0000;
	padding-left: 40px;
	padding-bottom: 12px;
	background: no-repeat url(../images/warning_lrg.png);
	font-weight: bold;
	vertical-align:middle;
	line-height: 150%;
	}	
#content div.rcBarBoxWarning {
   float:right;
   width:294px;
	}
#content .warningSM {
	color: #000000;
	padding-left: 20px;
	padding-bottom: 6px;
	background: no-repeat url(../images/warning_sm.png);
	font-weight: bold;
	vertical-align:middle;
	line-height: 120%;
	margin-top: 6px;
	}	
		
#content .check {
	color: #006600;
	padding-left: 40px;
	padding-bottom: 12px;
	background: no-repeat url(../images/check_lrg.png);
	font-weight: bold;
	vertical-align:middle;
	line-height: 150%;
	}	
#content .checkSM {
	color: #000000;
	padding-left: 20px;
	padding-bottom: 6px;
	background: no-repeat url(../images/check_sm.png);
	font-weight: bold;
	vertical-align:middle;
	line-height: 120%;
	margin-top: 6px;
	}				 
	
#content .clock {
	color: #003399;
	padding-left: 40px;
	padding-bottom: 12px;
	background: no-repeat url(../images/clock_lrg.png);
	font-weight: bold;
	vertical-align:middle;
	line-height: 150%;
	}	
	
#content .continueRightSM {
	color: #000000;
	padding-left: 20px;
	padding-bottom: 6px;
	background: no-repeat url(../images/arrow_right_blue_sm.png);
	font-weight: bold;
	vertical-align:middle;
	line-height: 120%;
	}			
	
#content .redText   { color: #990000; }	
#content .greenText { color: #006600; }	
#content .greyText  { color: #595959; }	




	
	
	
/* rcBarBox = rounded corner Bar Box */ 
/* Modified from Dan Cederholm's Netflix box from BPWD book */
 
#content div.rcBarBox {
  float: right;
  width: 294px;
  background: url(../images/boxDivBottom294.png) no-repeat bottom left;
  margin-bottom: 12px;
  }
#content div.rcBarBox h3 {
  margin: 0;
  padding: 6px 8px 4px 10px;
  border-bottom: 1px solid #E0CFAB;
  background: url(../images/boxH3ground294.png) no-repeat top left;
  } 
#content div.rcBarBox ul {
  margin: 0;
  padding: 12px 8px 12px 8px;
  list-style: none;
  }
#content div.rcBarBox li {
  margin: 0 0 6px; 
  padding: 0;
  }   
#content div.rcBarBox p               { margin: 0px 6px 0px 12px; }  
#content div.rcBarBox p.labelp        { margin: 12px 6px 3px 12px; }    
#content div.rcBarBox p.submit        { margin: 12px 6px 12px 12px;  }    
#content div.rcBarBox input#Login	  { width: 200px; }
#content div.rcBarBox input#Password  { width: 200px; }   
#content div.rcBarBox input#SearchBox { width: 200px; margin-top: 12px; }
   
#content div.rcBarBox input#Submit	  { width: 80px; }   
#content div.rcBarBox label           { font-size: .9em; }  /* 10px × .9em = 9px */



/* left-hand two column div */      
#content div.topBox3col               { margin-bottom: 24px; width: 902px; } 
/* left-hand two column div */      
#content div.topBoxLeft2col           { float: left; margin-bottom: 24px; width: 584px; }
                                      /* background: url(../images/boxTopLeft.gif) no-repeat top left; */	
                                  
                                   		
/*				   				 
#content div.topBoxLiner          { padding: 12px; }

#content div.topColumnRight       { float: right; margin: 0px 0px 12px 0px; padding: 0px; width: 232px; display: inline;}
						   
#content div.squareBoxYellow      { float: left; margin-bottom: 24px; 
                                    border-bottom: 1px dotted #FFD616; 
                                    background: #FFDD90 url(../images/squareBoxYellow.gif) repeat-x top left; }		
#content div.squareBoxYellowLiner { padding: 6px; }							   
							   
#content div.tips                 { margin: 6px; padding: 6px; background-color: #FFFF99; }

#content div.topColumnRightSkinny   { float: right; margin: 0px 0px 12px 0px; padding: 0px; width: 20px;
										border: 1px dotted #000; display: inline; }

*/

 
/* gallery flash movie on the photos page. ssp flash movie is 500x398 
#content div.sspContainer { float:left; margin: 0px; padding: 0px; width: 500px; } 
#content div.flashcontent { margin: 0px; padding: 0px; width: 500px;  }
*/
  

/* Big bulleted lists of related choices 

#related {
	float: left;
	display: inline;
	width: 232px;
	margin: 0px 0px 0px 22px;
	}
#related dl {
	margin: 0px;
	padding: 0px;
	}	
#related dt {
	padding-left: 18px;
	background: no-repeat url(../images/ding13x14.gif);
	margin: 6px 0px 0px 0px;
	font-weight: bold;
	} 	
#related dd {
	padding-left: 18px;
	margin: 3px 0px 3px 0px;
	font-style: oblique;
	}			
*/	

/* *****************************************************************************
   Footer 
   *************************************************************************** */

#footer {
	clear: both;
	height: 50px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	background: #2E1F13 url(../images/rciGroundFooter.png) no-repeat left;
	}
p.copyright {
	padding: 4px 12px 0px 12px;
	font-size: .8em; /* 10px × .8em = 8px */
	line-height: 1.5em;	
    }
/*
p.copyright a:link {
	 color:#000; 
	}
*/
	
	
	
/* Footer tabs -- see variation and addnl notes in the headter tabs 

.navTabsFootContainer {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	}
#navTabsB {
	float: right;
	margin: 0px;
	padding: 0px;
	}
#navTabsB li {
	float: left;
	margin: 0; 
	padding: 0px;
	display: inline;
	list-style: none;
	}
#navTabsB a:link, #navTabsB a:visited {
	float: left;
	font-size: 85%;
	line-height: 12px;
	margin: 0 12px 0 12px;
	padding-top: 8px;
	text-decoration: none;
	color: #000;
	}
#navTabsB a.active:link, #navTabsB a.active:visited, #navTabsB a:hover {
	border-top: 4px solid #D6B66C;
	padding-top: 4px;
	color: #000;	
	}	
body#admin #tabAdmin a, body#account #tabAccount a, body#about #tabAbout a {
	border-top: 4px solid #fff;
	padding-top: 4px;
	color: #582C00;	
	font-weight: bold;
    }
*/	
	
	
	
/* For Alex (CF Apps course) */	 	

#showSource {
	clear: both;
	margin: 24px auto;
	max-width: 950px;
	padding: 0px;
	text-align: left;
	background-color: #FFCC66;
    } 

 	
	