/* There are some layout features included in this document.  Each line applying to each one
  is marked as follows (in case you need to remove them).  When changing the value of properties marked 
  with these tags you should leave the original value in a comment so changes can be easily scanned.
  
  	[cfw] Centred fixed width page
	
*/




/*****************************************************************************************
 *			Imports
 ****************************************************************************************/

@import url("standard.css");
@import url("primary-navigation.css");
@import url("forms/short-forms.css");



/*****************************************************************************************
 *			Main document sections layout
 ****************************************************************************************/

body {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 75%;
	background: url(../images/backgrounds/bg_waves.gif) #005482 left top repeat-x;
	color: #231f20;
	text-align: center; /* center the #page element in IE5/win [cfw] */
}

#page {
	width: 760px; /* max page width to not scroll at 800x600 [cfw] */
	text-align: left; /* reset the text alignment after IE5/win hack above [cfw] */
	margin: 0 auto; /* ceneter the #page element in all but IE5/win [cfw] */
	position: relative; zoom: 1;
}

#page #header {
	position: relative;
}

#page #section-title {

}

#page #content {
	float: right;
	width: 100%;
	margin: 0 0 0 -200px; /* leave room for primary nav */
	padding: 55px 0 0 0;
}

body.chat-page #page #content {
	margin: 0 0 100px 0;
}

#page #content-inner {
	margin-left: 160px; /* leave room for primary nav */
}

body.chat-page #page #content-inner {
	margin: 0 0 0 86px;
}

#page #primary-navigation {
	float: left;
	width: 160px; /* < ie 6 does width as inclusive of borders and margins */
	w\idth: 120px; /* all others do the right thing */
	padding: 0 20px;
	margin: 55px 0 0 0;
}
body.chat-page #page #primary-navigation {
	display: none;
}

#page #secondary-navigation {

}

#page #breadcrumb {
	width: 0;
	height: 0;
	float: left;
}

#page #footer {
	clear: both;
	position: relative;
	padding: 0 0 15px 0;
}




/*****************************************************************************************
 *			Page layout / styles
 ****************************************************************************************/

#page {
	background: #fff;
}

#page-inner {

}




/*****************************************************************************************
 *			Header internal layout / styles
 ****************************************************************************************/

#header {
}

#header #logo img {
	float: left;
	margin: 0 -3px;
	marg\in: 0;
	position: relative;
}


/************************
 * Header links
 ************************/

#header ul#header-links {
	margin:  0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	right: 20px;
}

#header #header-links li {

}




/*****************************************************************************************
 *			Footer internal layout / styles
 ****************************************************************************************/

#footer {
	background: #005482;
	color: #fff;
	font-size: 0.92em;
	text-align: center;
}

#footer a {
	color: #FFF;
	line-height: 17px;
	vertical-align: middle;
}


/************************
 * footer text
 ************************/

#footer p#footer-text {
	background: #E4681E;
	font-weight: bold;
	margin: 0 0 15px 0;
	padding: 0;
	text-align: center;
	width: 760px;
	height: 86px;
	font-size: 1.5em;
}

#footer p#footer-text span {
	background-image: url(../images/backgrounds/bg_footer.gif);
}


/************************
 * Copyright statement
 ************************/
 
#footer #copyright {
	display: inline;
	line-height: 17px;
	vertical-align: middle;
}


/************************
 * Footer Links
 ************************/
 
#footer ul#footer-links {
	display: inline;
	margin: 0 0 0 3px;
	padding: 0;
}

#footer #footer-links li {
	display: inline;
	margin: 0;
	padding: 0 4px 0 7px;
	vertical-align: middle;
	background-image: none;
	backgro\und: url(../images/bullets/bul_footer-links.gif) transparent left 5px no-repeat;
}


#footer #footer-links li#turning-point-footer-link {
	position: absolute;
	background-image: none;
	top: -70px;
	right: 15px;
}


/************************
 * Site by Areeba Link
 ************************/
 
#footer #site-by-areeba-link {
	display: inline;
	line-height: 17px;
	padding-left: 7px;
	background-image: none;
	backgro\und: url(../images/bullets/bul_footer-links.gif) transparent left 6px no-repeat;
}

#footer #site-by-areeba-link a,
#footer #site-by-areeba-link a:hover span {
	text-decoration: none;
}

#footer #site-by-areeba-link span {
	vertical-align: middle;
	text-decoration: underline;
}

#footer #site-by-areeba-link img {
	vertical-align: middle;
}




/*****************************************************************************************
 *		 	Breadcrumb internal layout / styles
 ****************************************************************************************/

#breadcrumb ol {
	position: absolute;
	height: 1em;
	line-height: 1em;
}

#breadcrumb ol li {
	background-image: url(../images/bullets/bul_breadcrumb.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
	border: none;
	padding: 0 7px 0 9px;
	margin: 0 7px 0 -9px;
}

#breadcrumb ol li:first-child {
	background-image: none;
}

#breadcrumb a {

}




/*****************************************************************************************
 *		 	Page Title internal layout / styles
 ****************************************************************************************/
#page-title {

}

#page-title h1 {

}




/*****************************************************************************************
 *		 	Content area internal layout
 ****************************************************************************************/

#content {
	background: url(../images/backgrounds/bg_content-internal.gif) #fff left top no-repeat;
}

body.home-page #content {
	background-image: url(../images/backgrounds/bg_content.gif);
}

/************************
 * No sub content
 ************************/

#content #main {

}


/************************
 * With sub content
 ************************/

/* prep the main content, leaving room beside it for sub content */
body.has-sub-content #content #main {
	float: left; display: inline;
	width: 100%;
	padding: 0;
	margin: 0 -215px 0 0; /* sub content width + margin each side of sub content */
}

/* leave room for side content to sit, it get's shifted into this space */
body.has-sub-content #content #main-inner {
	margin-right: 215px; /* sub content width + margin each side of sub content */
}

body.chat-page #page #content #main-inner 
{
	width: 585px;	
}

/* shift the sub content into the space left by #main-inner */
body.has-sub-content #content #sub {
	float: right; display: inline;
	width: 195px;
	margin: -55px 0 0 0;
	padding: 0 0 85px 0;
}
body.chat-page #content #sub {
	display: none;
}



/************************
 * With sub content (home page overrides)
 ************************/

body.home-page #content #main {
	margin: 0 -235px 0 0; /* sub content width + margin each side of sub content */
}

body.home-page #content #main-inner {
	margin-right: 235px; /* sub content width + margin each side of sub content */
}

body.home-page #content #sub {
	width: 215px;
}


/************************
 * Top of page Link
 ************************/
 
#top-page-link {
	margin-top: 3em;
}

#top-page-link a {

}




/*****************************************************************************************
 *			Content styles for custom classes and id's
 ****************************************************************************************/

/************************
 * More Link
 ************************/
 
.more-link {

} 

.more-link a {

}
 

/************************
 * USER NOTES (message box type stuff)
 ************************/
.important, .success, .error, .cancelled {
	padding: 20px 20px 20px 88px;
	margin: 1em 0;
	background-position: 20px 20px;
	background-repeat: no-repeat;
}

.important {
	color:#725A00;
	background-image: url(../images/icons/ico_note.gif);
	background-color: #FFFAE6;
	border: 1px solid #FAC71E;
}

.success {
	color:#2d8228; 
	background-image: url(../images/icons/ico_success.gif);
	background-color: #f4fcf4;
	border: 1px solid #51cd49;
}

.error {
	color: #FF0000;
	background-image: url(../images/icons/ico_error.gif);
	background-color: #fff1f1;
	border: 1px solid #f9221d;
}

.cancelled {
	color: #FF0000;
	background-image: url(../images/icons/ico_cancelled.gif);
	background-color: #fff1f1;
	border: 1px solid #f9221d;
}


/************************
 * Form prompt text
 ************************/
 
input.displayingPromptValue {
	color: #666;
}



/*****************************************************************************************
 *			Sub content styles
 ****************************************************************************************/
 
/************************
 * login form
 ************************/
 
#sub fieldset#login-form {
	background: #005482;
	font-weight: bold;
	font-style: italic;
	color: #fff;
	padding: 0 0 5px 0;
	margin: 0;
	position: relative;
}

#sub fieldset#login-form h2 {
	background: #005482;
	color: #FFC402;
	font-size: 1em;
	margin: 0;
	padding: 0;
	height: 56px;
	width: 100%;
}

#sub fieldset#login-form h2 span {
	background-image: url(../images/txt_login_internal.gif);
}

body.home-page #sub fieldset#login-form h2 {
	height: 50px;
}

body.home-page #sub fieldset#login-form h2 span {
	background-image: url(../images/txt_login_home.gif);
}

#sub fieldset#login-form .form-item {
	padding: 0 20px 0 16px;
	_height: 0;
}

#sub fieldset#login-form label {
	display: block;
	font-weight: bold;
	margin: 0 0 2px 0;
	width: 100%;
	height: 12px;
	_float: left;
}

#sub fieldset#login-form #username label span {
	background-image: url(../images/buttons/btn_loginName.gif);
}

#sub fieldset#login-form #password {
	margin-top: 7px;
}

#sub fieldset#login-form #password label {
	height: 10px;
	margin: 0 0 3px 0;
}

#sub fieldset#login-form #password label span {
	background-image: url(../images/buttons/btn_Pwd.gif);
}

#sub fieldset#login-form input.text {
	background: #92C1DB;
	border: 1px solid #92C1DB;
	font-weight: bold;
}


#sub fieldset#login-form .buttons-form-item  {
	padding-left: 0;
	margin-top: -33px;
	width: auto;
}

#sub fieldset#login-form .buttons-form-item input {
	padding: 0;
	border: none;
}

#sub fieldset#login-form .links-form-item {
	padding-right: 5px;
	width: 74px; /* < ie 6 does width as inclusive of borders and margins */
	w\idth: 69px; /* all others do the right thing */
	background: url(../images/divider.gif) transparent right top repeat-y;
	float: none;
}

body.home-page #sub fieldset#login-form .links-form-item {
	padding-right: 15px;
	width: 84px; /* < ie 6 does width as inclusive of borders and margins */
	w\idth: 69px; /* all others do the right thing */
}

#sub fieldset#login-form a {
	color: white;
	display: block;
}


/************************
 * emergency help box
 ************************/
 
#sub #emergency-help-box {
	background: url(../images/backgrounds/bg_emergencyHelp.gif) #ffc300 left bottom no-repeat;
	padding: 10px 15px 35px 15px;
	font-weight: bold;
	font-style: italic;
	color: #005385;
	border-top: 1px solid white;
}

#sub #emergency-help-box h2 {
	font-size: 1.5em;
	margin: 0;
}

#sub #emergency-help-box a {
	color: #005385;
}
#sub #emergency-help-box p {
	_width: 99%;
}

/************************
 * user content
 ************************/

#sub #user-sub-content {
	margin-top: 20px;
}




/*****************************************************************************************
 *			start counselling page styles
 ****************************************************************************************/

/************************
 * anonymous box
 ************************/
 
#anonymous-box {
	background-image: url(../images/rounderCorners/yellow_topL.gif);
}
#anonymous-box .box-inner-one {
	background-image: url(../images/rounderCorners/yellow_topR.gif);
}
#anonymous-box .box-inner-two {
	background-image: url(../images/rounderCorners/yellow_bottomL.gif);
}
#anonymous-box .box-inner-three {
	background-image: url(../images/rounderCorners/yellow_bottomR.gif);
}

#anonymous-box .more-link a {
	width: 109px;
	background: #FEF8E5;
}

#anonymous-box .more-link a span {
	background-image: url(../images/buttons/btn_anonymous.gif);
}
#anonymous-box h3 {
	color: #ff9000;
}


/************************
 * register box
 ************************/
 
#register-box,
#in-queue-box,
#vietnamese-version-link-box {
	background-image: url(../images/rounderCorners/orange_topL.gif);
}
#register-box .box-inner-one,
#in-queue-box .box-inner-one,
#vietnamese-version-link-box .box-inner-one {
	background-image: url(../images/rounderCorners/orange_topR.gif);
}
#register-box .box-inner-two,
#in-queue-box .box-inner-two,
#vietnamese-version-link-box .box-inner-two {
	background-image: url(../images/rounderCorners/orange_bottomL.gif);
}
#register-box .box-inner-three,
#in-queue-box .box-inner-three,
#vietnamese-version-link-box .box-inner-three {
	background-image: url(../images/rounderCorners/orange_bottomR.gif);
}

#register-box .more-link a {
	width: 109px;
	background: #FCEDE3;
}

#register-box .more-link a span {
	background-image: url(../images/buttons/btn_register.gif);
}
#register-box h3 {
	color: #e5691e;
}

#in-queue-box #in-queue-msg 
{
	padding-bottom:1em;
}


/************************
 * login box
 ************************/
 
#login-box,
#web-on-hold-box {
	background-image: url(../images/rounderCorners/blue_topL.gif);
}
#login-box .box-inner-one,
#web-on-hold-box .box-inner-one {
	background-image: url(../images/rounderCorners/blue_topR.gif);
}
#login-box .box-inner-two,
#web-on-hold-box .box-inner-two {
	background-image: url(../images/rounderCorners/blue_bottomL.gif);
}
#login-box .box-inner-three,
#web-on-hold-box .box-inner-three {
	background-image: url(../images/rounderCorners/blue_bottomR.gif);
	padding-bottom: 10px;
}
#login-box .more-link a 
{
	top:10px;
	width: 110px;
	background: #FCEDE3;
}

#login-box .more-link a span {
	background-image: url(../images/buttons/but_login.jpg);
}

#login-box h3,
#web-on-hold-box h3 {
	color: #005481;
}

#web-on-hold-box p 
{
	font-size:110%;
}


/************************
 * "or" separators
 ************************/

.or-prompt {
	color: #e5691e;
	font-weight: bold;
	font-style: italic;
	font-size: 1.5em;
	margin: 0 0 0 15px;
}




/*****************************************************************************************
 *			Home page styles
 ****************************************************************************************/

body.home-page #main .box {
	background-image: url(../images/rounderCorners/home_topL.gif);
	font-style: italic;
	font-weight: bold;
	margin: 1em 0 2em 0;
	color: #005481;
}
body.home-page .box-inner-one {
	background-image: url(../images/rounderCorners/home_topR.gif);
}
body.home-page .box-inner-two {
	background-image: url(../images/rounderCorners/home_bottomL.gif);
}
body.home-page .box-inner-three {
	background-image: url(../images/rounderCorners/home_bottomR.gif);
}

body.home-page .box h2 {
	color: #005481;
}

body.home-page .box .more-link {
	right: -13px;
	bottom: -13px;
}

body.home-page .box .more-link a {
	width: 221px;
	height: 31px;
	background: #F89947;
}

body.home-page .box .more-link a span {
	background-image: url(../images/buttons/btn_startCounselling.gif);
}

body.home-page .box ul {
	list-style: none;
	padding: 0;
	margin: 0.5em;
}

body.home-page .box li {
	padding: 0 0 0 30px;
	background: url(../images/bullets/bul_list-home.gif) transparent 0 4px no-repeat;
}



/*****************************************************************************************
 *			Utility styles
 ****************************************************************************************/

/************************
 * PIPELIST: a list which is displayed inline with ' | ' as a seperator
 ************************/

.pipe-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pipe-list li {
	float:  left; display: inline;
	background-image: none;
	border-left: 1px solid black;
	padding: 0 5px 0 5px;
	margin: 0 5px 0 -5px;
}

.pipe-list li:first-child { 
	border-left: 0;
}


/************************
 *  BOX: a generic resizable (any direction) round cornered box
 ************************/

.box {
	background-position: left top;
	background-repeat: no-repeat;
	background-image: url(../images/backgrounds/box_topLeft.gif);
}

.box-inner-one {
	background-position: right top;
	background-repeat: no-repeat;
	background-image: url(../images/backgrounds/box_topRight.gif);
	padding: 13px 0 0 0;
}

.box-inner-two {
	background-position: left bottom;
	background-repeat: no-repeat;
	background-image: url(../images/backgrounds/box_bottomLeft.gif);
	padding: 0 0 0 13px;
}

.box-inner-three {
	background-position: right bottom;
	background-repeat: no-repeat;
	background-image: url(../images/backgrounds/box_bottomRight.gif);
	padding: 0 13px 0 0;
	zoom: 1;
}

/* style the box content */
.box h2, .box h3 {
	margin: 0;
	font-weight: bold;
}

.box p {
	margin: 0.3em 0 0.3em 0;
	_position: relative;
}

.box .more-link {
	height: 31px;
	position: relative;
	bottom: -14px;
	right: -9px;
	margin-top: -16px;
}

.box .more-link a {
	height: 27px;
	float: right;
	text-align: right;
	color: #fff;
	font-weight: bold;
	font-style: italic;
}

#main .box {
	margin: 0.5em 0 0.75em 0;
}

/************************
 *  IMAGE-REPLACED: accessible text image replacement
 ************************/
/*
  Usage: <tag class="image-replaced">the text to replace<span></span></tag>
*/

.image-replaced {
	position: relative;
	overflow: hidden;
}


.image-replaced span{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
}


/************************
 * accessibility styles
 ************************/

/* hide items in a way still accessibly to screen readers (and unstyled browsers of course) */
.accessibility, hr {
	position: absolute !important;
	top: -1000em !important;
	left: -1000em !important;
}


/************************
 * collapsible regions
 ************************/
 
html.js #content .collapsible-body {
	overflow: hidden;
	margin-left: 10px;
}
html.js #content .collapsed .collapsible-body {
	display: none;
}
html.js #content .collapsible-heading {
  padding-left: 10px;
  background: url(../images/bullets/bul_collapsible-open.png) #FFF 0 50% no-repeat;
}
html.js #content .collapsed .collapsible-heading {
	background: url(../images/bullets/bul_collapsible-closed.png) #FFF 0 50% no-repeat;
}


/************************
 * clearfix, a class to clear floated elements
 ************************/
 
/* clearfix for good browsers */
html > body .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* clearfix for IE/mac */
.clearfix {
	display: inline-block;
}

/* Hides from IE-mac, clearfix for IE/win and reset for not IE/mac */
@media all {
	* html .clearfix {
		_height: 0;
	}
	
	.clearfix {
		display: block;
	}
}




/************************
 * sIFR
 ************************/

/* These are standard sIFR styles... do not modify */
@media screen {
	.sIFR-flash {
		visibility: visible !important;
		margin: 0;
	}
	
	.sIFR-replaced {
		visibility: visible !important;
	}
	
	span.sIFR-alternate {
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		display: block;
		overflow: hidden;
	}
}

.sIFR-hasFlash #page-title h1 {
	visibility: hidden;
	letter-spacing: -0.1em;
	_letter-spacing: -1px;
}

.sIFR-hasFlash body.home-page .box h2,
.sIFR-hasFlash body.home-page .box p,
.sIFR-hasFlash body.home-page .box li,
.sIFR-hasFlash #anonymous-box h3,
.sIFR-hasFlash #register-box h3,
.sIFR-hasFlash #login-box h3,
.sIFR-hasFlash p.or-prompt/*,
.sIFR-hasFlash #login-box p*/ {
	visibility: hidden;
	letter-spacing: 0.1em;
}

#page #content #main fieldset 
{
	padding-top: 10px;
}

/*
some chat classes to style the messages in the chat
*/
#page #content #main p.red-box
{
	width:360px;
	border: 1px solid #e6681e;
	background-color: #fedecf;
	padding: 5px 5px 5px 5px;
}
#page #content #main p.red-box
{
	margin-bottom: 10px;
}

#page #content #main #refresh-msg
{
	/*color: #999;*/
}

#page #content #small-login-form #forgotten-pwd-link
{
	width:63px;
	margin: 0 10px 0 15px;
}

#page #content #small-login-form div#login-button
{
	padding-top:15px;
	position:relative;
}

#page #content #small-logout-form div#logout-button
{
	margin-top:0;
}

#page #content #main #box-spacer
{
	padding-top: 10px;
}