/*

Stylesheet containing specific class definitions for the Figure Out Your Life referral system

*/

/*--------------------*
	PARAGRAPH STYLES
 *--------------------*/
.req_asterisk
{
	color: #CC0000;
	margin-left: 2px;	
}
 

/*---------------------*
	LINES AND BORDERS
 *---------------------*/
div.divider
{
	border: 0px;
	height: 1px;
	width: 100%;
	background: #ecddbe;
	margin: 15px 0px 15px 0px;
	line-height: 1px;
	font-size: 0px;
}


/*------------------------------------*
	FOYL - FEATURE (Accessible) PAGE
 *------------------------------------*/
div.feature_accessbile_layout
{
	float: left;
	background-color: #f0d7ab;
	padding: 16px;
}

p.foyl_question
{
	font-size: 14px;
	color: #CC0000;
	padding: 0px;
	margin: 0px 0px 12px 0px;
	font-weight: bold;
}

p.foyl_question select
{
	vertical-align: middle;
}

p.foyl_answer input
{
	margin-right: 10px;
	vertical-align: baseline;
}


/*----------------------*
	FOYL - SIGNUP PAGE
 *----------------------*/
div.signup_layout				/* defines overall layout of signup section */
{
	width: 791px;
	padding: 0px;
	background-color: #f0d7ab;
}

div.signup_layout div.bird		/* bird image container */
{
	 width: 112px;
	 float: left;
	 clear: right;
}

div.signup_layout div.footer	/* footer images container */
{
	clear: both;
}

/*
 -- 'Your Customised Results' module --
This module appears on the top left side of the page and contains dynamically inserted text
so the module is expandable in height.
*/
div.signup_layout div.results_bgImgLady		/* background image of lady - positioned beneath module to the left */
{
	width: 791px; /* <-- must be present as it fixes a bug in Internet Explorer 6 rendering whereby if the width is not defined, IE6 incorrectly calculates	where the bottom of the Div is. */
	background: url('/_image/foyl_referral/signup/lady.gif') no-repeat bottom left;
	float: left;
	clear: both;
}

div.signup_layout div.results_bgImgMan		/* background image of cartoon man - positioned beneath module to the right */
{
	width: 791px; /* <-- must be present as it fixes a bug in Internet Explorer 6 rendering whereby if the width is not defined, IE6 incorrectly calculates	where the bottom of the Div is. */
	background: url('/_image/foyl_referral/signup/man_arrow.gif') no-repeat 249px bottom;
	float: left;
	clear: both;
}

div.signup_layout div.results				/* main container for module */
{
	width: 491px;
	float: left;
	position: relative;
	padding-bottom: 276px; 	/* <-- leaves room for the background image of the lady and cartoon man to show through beneath the content of the module */
}

div.signup_layout div.results-c				/* center of module - contains vertically tiled background for when module expands in height */
{
	width: 379px;
	float: left;
	background: url('/_image/foyl_referral/signup/results-c_tile.gif') repeat-y top left;
}

div.signup_layout div.results-b				/* bottom of module - it also encapsulates main content of the module */
{
	width: 249px; /* 379px minus left and right padding */
	padding: 0px 80px 20px 50px;
	background: url('/_image/foyl_referral/signup/results-b.gif') no-repeat bottom left;
	margin-top: 5px;
}

/*
 -- 'Signup Form' module --
This module appears on the top right side of the page and contains a signup registration form
which, when submitted, can require error messages to be shown beneath the form fields. For this
reason the module is expandable in height.
*/
div.signup_layout div.form		/* main module container */
{
	width: 300px;
	float: left;
	position: relative;
}

div.signup_layout div.form-c	/* center of module - contains vertically tiled background for when module expands in height */
{
	width: 300px;
	background: url('/_image/foyl_referral/signup/form-c_tile.gif') repeat-y top left;
}

div.signup_layout div.form-t	/* top of module */
{
	background: url('/_image/foyl_referral/signup/form-t.gif') no-repeat top left;
}

div.signup_layout div.form-b	/* bottom of module - it also encapsulates main content of the module */
{
	width: 266px; /* 300px minus left and right padding (width must be specified because of IE6 bug) */
	padding: 35px 17px 30px 17px;
	background: url('/_image/foyl_referral/signup/form-b.gif') no-repeat bottom left;
}

.type_select select
{
	width: 147px;	
}


/*---------------------*
	FOYL - REFER PAGE
 *---------------------*/
div.refer_layout			/* defines overall layout of refer section */
{
	width: 791px;
	padding: 0px;
	background-color: #f0d7ab;
}

div.refer_layout div.footer	/* footer images container */
{
	clear: both;
}

.verify_email, .email		/* form fields for email and verify email */
{
	width: 355px;
}

/*
 -- 'Refer a friend and win!' Module --
This module appears on the top left side of the page and contains dynamically inserted text
so the module is expandable in height.
*/
div.refer_layout div.refer_bgMan	/* background image of man - positioned beneath module to the left */
{
	background: url('/_image/foyl_referral/refer/man.gif') no-repeat bottom left;
	float: left;
}

div.refer_layout div.refer			/* main container for module */
{
	width: 270px;
	float: left;
	padding-bottom: 270px;	/* <-- leaves room for the background image of the man to show through beneath the content of the module */
}

div.refer_layout div.refer-c		/* center of module - contains vertically tiled background for when module expands in height */
{
	background: url('/_image/foyl_referral/refer/refer-c_tile.gif') repeat-y top left;
	float: left;
}

div.refer_layout div.refer-b		/* bottom of module - it also encapsulates main content of the module */
{
	background: url('/_image/foyl_referral/refer/refer-b.gif') no-repeat bottom left;
	float: left;
	padding: 0px 25px 20px 25px;
}

/*
 -- 'Referral Form' Module --
This module appears on the top right side of the page and contains a referral registration form
which, when submitted, can require error messages to be shown beneath the form fields. For this
reason the module is expandable in height.
*/
div.refer_layout div.form		/* main module container */
{
	width: 521px;
	float: left;
}

div.refer_layout div.form-c		/* center of module - contains vertically tiled background for when module expands in height */
{
	background: url('/_image/foyl_referral/refer/form-c_tile.gif') repeat-y top left;
	float: left;
}

div.refer_layout div.form-t		/* top of module */
{
	background: url('/_image/foyl_referral/refer/form-t.gif') no-repeat top left;
	float: left;
}

div.refer_layout div.form-b		/* bottom of module - it also encapsulates main content of the module */
{
	background: url('/_image/foyl_referral/refer/form-b.gif') no-repeat bottom left;
	float: left;
	padding: 30px 20px 30px 48px;
}


/*----------------------*
	FOYL - RESULT PAGE
 *----------------------*/
div.result_layout				/* encapsulates content of results page */
{
	width: 793px;
	padding: 0px;
	float: left;
}

.btn_redo	/* button is absolutely positioned within an area that expands in height */
{
	position: absolute;
	right: 151px;
	bottom: 0px;
}

/* -#- Top section -#- */
div.result_layout-top_container	/* top container - encapsulates top part of the result page */
{
	float: left;
	background: #f0d7ab url('/_image/foyl_referral/result/man.gif') no-repeat bottom right; width: 793px; position: relative;
}

/* -- Top section: 'Results Summary' Module --
This module appears on the top left side of the page and contains dynamically inserted text
so the module is expandable in height.
*/
div.result_layout-top_container div.summary-c	/* center of module - contains vertically tiled background for when module expands in height */
{
	width: 559px;
	float: left;
	background: url('/_image/foyl_referral/result/summary-c_tile.gif') repeat-y top left;
}

div.result_layout-top_container div.summary-t	/* top of module */
{
	width: 559px;
	background: url('/_image/foyl_referral/result/summary-t.gif') no-repeat top left;
	float: left;
}

div.result_layout-top_container div.summary-b	/* bottom of module - it also encapsulates main content of the module */
{
	background: url('/_image/foyl_referral/result/summary-b.gif') no-repeat bottom left;
	float: left;
	padding: 65px 25px 10px 30px;
	width: 504px;	/* 559px minus left and right padding */
}

/* -- Top section: 'Your Choices' Module --
This module appears at the top center of the page and contains dynamically inserted text
so the module is expandable in height.
*/
div.result_layout-top_container div.yourchoices-c	/* center of module - contains vertically tiled background for when module expands in height */
{
	width: 180px;
	float: left;
	background: url('/_image/foyl_referral/result/yourchoices-c_tile.gif') repeat-y top left;
}

div.result_layout-top_container div.yourchoices-t	/* top of module */
{
	float: left;
	background: url('/_image/foyl_referral/result/yourchoices-t.gif') no-repeat top left;
}

div.result_layout-top_container div.yourchoices-b	/* bottom of module - it also encapsulates main content of the module */
{
	float: left;
	padding: 50px 15px 10px 15px;
	margin-top: 8px;	/* <-- this ensures the red title text on the top background image is still visible */
	background: url('/_image/foyl_referral/result/yourchoices-b.gif') no-repeat bottom left;
}

/* -#- tabbed panels section -#- */
.result_layout-tabbedpane	/* encapsulates the entire tabbed pane on the results page */
{
	position: relative;	/* <-- must be defined as relative so all absolutely floated elements within module will use this container as a reference point */
	width: 100%;	/* 	A width of 100% is defined for a Div even though it is inheritently 100% by default. It was found that this width specification
						must be present as it fixes a bug in Internet Explorer 6 rendering whereby if the width is not defined, IE6 incorrectly calculates
						where the bottom of the Div is.
					*/
	background: url('/_image/foyl_referral/result/result-b.gif') no-repeat 24px bottom;
	float: left;
}

.result_layout-tabbedpane div.lc	/* left edge - central vertical section */
{
	background: url('/_image/foyl_referral/result/result-lc_tile.gif') repeat-y top left;	/* left edge image at the top of the edge */
}

.result_layout-tabbedpane div.rc	/* right edge - central vertical section */
{
	background: url('/_image/foyl_referral/result/result-rc_tile.gif') repeat-y top right;	/* right edge image at the top of the edge */
}

.result_layout-tabbedpane div.l		/* left edge */
{
	background: url('/_image/foyl_referral/result/result-l.gif') no-repeat top left;			/* repeating left edge image */
}

.result_layout-tabbedpane div.r		/* right edge */
{
	background: url('/_image/foyl_referral/result/result-r.gif') no-repeat top right;		/* repeating right edge image */
}

div.tabset-course,			/* encapsulates set of tabs for courses and careers */
div.tabset-career
{
	/*display: none;*/
	padding: 0px 24px 0px 24px;		/* <-- top corner images float to the left and right side of the set of tabs and those images are each 24px wide */
}

div.tabset-course img,		/* ensure the tabs have a pointer cursor cause the tabs have an onclick attribute */
div.tabset-career img
{
	cursor: pointer;
}

div.panelset-course,		/* encapsulates set of panels for courses and careers */
div.panelset-career
{
	/*display: none;*/
	padding: 20px 40px 30px 40px;	/* <-- this padding also accounts for not having the panel accidently overlay the background images used for the left, right and bottom of the module */
}


/*----------------------------*
	'Feature Content' Module
 *----------------------------*
	Type: Div Module

 	Layout:
	<module_featureContent>
		<edge-top>(left & right images of top edge) />
		<edge-left>(top & bottom images of left edge)
			<edge-right>(top and bottom images of right edge)
				<content>(main content) />
			/>
		/>
		<edge-bottom>(left & right images of bottom edge) />
	/>

	Description:
		This square shaped module is utilised to encapsulate the main content of the accessible version of the feature page.

	Special Notes:
		- In some of the classes below, a width of 100% is defined for a Div (even though it is inheritently 100% by default). However, it was
		  found that this width specification must be present as it fixes a bug in Internet Explorer 6 rendering whereby if the width is not
		  defined, IE6 incorrectly calculates where the bottom of the Div is and this positions floated images incorrectly.
		- All divs must be floated left to fix cross-browser positioning issues of absolutely floating images within those divs.

	Example of Use:	Feature accessible version
*/

div.module_featureContent				/* module container */
{
	width: 768px;
	position: relative;		/* <-- must be defined as relative so all absolutely floated elements within will use this container as a reference point */
	float: left;
	background-color: #FFFFFF;
}

div.module_featureContent div.content
{
	padding: 40px 30px 10px 30px;
	font-size: 11px;
	color: #292526;
	vertical-align: middle;
	background: #FFFFFF;
}

div.module_featureContent div.edge-top		/*	top edge */
	background: #ffffff;
{
	float: left;
	/*background: url('/_image/foyl_referral/feature_accessible/top_repeat.jpg') repeat-x top left;*/
	background: #F0D8AA;
	width: 100%;
	height: 14px;
}

div.module_featureContent div.edge-left		/* left edge */
{
	float: left;
	/*background: url('/_image/foyl_referral/feature_accessible/left_repeat.gif') repeat-y left 14px;*/
	background: #F0D8AA;
	width: 100%;
	height: 100%;
}

div.module_featureContent div.edge-right	/* right edge */
{
	float: left;
	/*background: url('/_image/foyl_referral/feature_accessible/right_repeat.jpg') repeat-y right 14px;*/
	background: #F0D8AA;
	width: 100%;
	height: 100%;
}

div.module_featureContent div.edge-bottom	/* bottom edge */
{
	float: left;
	/*background: url('/_image/foyl_referral/feature_accessible/bottom_repeat.jpg') repeat-x bottom left;*/
	background: #F0D8AA;
	width: 100%;
	height: 14px;
}

/* 
	Images in the left and right edge 
	Each edge contains two absolutely floated images, one for the top part of the edge and one for the bottom part
	of the edge. Since their is a top and bottom edge div which are both 14 pixels in height, it needs to ensured
	that the images in the left and right edge don't overlay these. So the images in the left and right edge are 
	raised 14 pixels from the top and the bottom.
*/
div.module_featureContent div.edge-left img,
div.module_featureContent div.edge-right img
{
	margin-top: 14px;
	margin-bottom: 14px;
}


/*---------*
	FORMS
 *---------*/
/* ### Table to layout a form appearing in the content section of a page ### */
table.form_layout
{
	border-style: none;
	border-spacing: 0px;
	border-collapse: collapse;
}

table.form_layout td
{
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
}

table.form_layout td.fl_title
{
	padding: 0px 8px 4px 0px;
	margin: 0px;
	vertical-align: middle;
	white-space: nowrap;
	text-align: right;

	font-family: 'Trebuchet MS',Geneva,sans-serif;
	font-size: 13px;
    color: #010101;
}

table.form_layout td.fl_title-col2
{
	padding: 0px 8px 4px 9px;
	margin: 0px;
	vertical-align: middle;
	white-space: nowrap;
	text-align: right;

	font-family: 'Trebuchet MS',Geneva,sans-serif;
	font-size: 13px;
    color: #010101;
}

table.form_layout td.fl_header
{
	padding: 0px 8px 4px 0px;
	margin: 0px;
	vertical-align: middle;
	white-space: nowrap;
	text-align: left;
	font-weight: bold;

	font-family: 'Trebuchet MS',Geneva,sans-serif;
	font-size: 13px;
    color: #CC0000;
}

table.form_layout td.fl_field
{
	padding: 0px 0px 4px 8px;
	margin: 0px;
	vertical-align: middle;

	font-family: 'Trebuchet MS',Geneva,sans-serif;
	font-size: 13px;
    color: #010101;
}

table.form_layout td.fl_combined
{
	padding: 0px 8px 4px 8px;
	margin: 0px;
	vertical-align: middle;

	font-family: 'Trebuchet MS',Geneva,sans-serif;
	font-size: 13px;
    color: #010101;
}

table.form_layout td.fl_error
{
	padding: 0px 0px 4px 0px;
	margin: 0px;
	vertical-align: middle;
}

table.form_layout td.fl_spacer
{
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
	line-height: 12px;
	font-size: 12px;
}

/*---------*
	IMAGES
 *---------*/
a img
{
	border: none;
}

/*----------------------------------------------------------------------*
						MISCELLANEOUS STYLES

	These should always appear last in the style sheet as they should
	be used to override any values defined in existing classes
 *----------------------------------------------------------------------*/
/* ### Margin Settings ### */
.nomargin, P.nomargin
{
	margin: 0px;
}

/* ### Alignment Settings ### */
.left
{
	text-align: left;
}

.right
{
	text-align: right;
}

/* ### Floated Alignment Settings ### */
.fleft
{
	float: left;
}

.fright
{
	float: right;
}

.ftop-left		/* float top and left (parent element must have position:relative) */
{
	position: absolute;
	left: 0px;
	top: 0px;
}

.ftop-right		/* float top and right (parent element must have position:relative) */
{
	position: absolute;
	right: 0px;
	top: 0px;
}

.fbottom-left	/* float bottom and left (parent element must have position:relative) */
{
	position: absolute;
	left: 0px;
	bottom: 0px;
}

.fbottom-right	/* float bottom and right (parent element must have position:relative) */
{
	position: absolute;
	right: 0px;
	bottom: 0px;