﻿/*--------------------------------------------------------------------------

Way:ahead Prospectus - CAP Modal Style Sheet

Version:	1.0
Author:		Danny
Website:	http://prospectus.wayahead.dev 

*** Last Modify Date: 7/8/2009 ( Danny ) ***

--------------------------------------------------------------------------*/

/* Structure 

	=General
	=JS Disabled
	=JS Enabled



/* =General 
--------------------------------------------------------------------------*/

body.modal { background: #fff; }
body.cap .errorBlock { float: left; clear: both; width: 858px; }
body.cap .submitted-application  
{
	width: 858px; 
	float: left; 
	clear: both; 
	border: 1px solid #af0a0a; 
	color: #af0a0a !important; 
	background-color: #ffafaf; 
	padding: 8px 10px 7px 10px;
	margin: 0 0 12px 0; 
}

body.cap .p-content fieldset ol li { }

body.cap li.last { border: 0; }


body.cap .p-content fieldset ol li a.help  
{
	position: absolute; 
	padding: 0 0 0 22px; 
	text-decoration: none; 
	background: url(/resources/img/cap/help.gif) 0 0 no-repeat;
	color: #414142;
	right: 0px;
	top: 13px;
	display: block;
	width: 40px;
	height: 20px;
	overflow: hidden;
}
body.cap .p-content fieldset ol li.alt a.help { background: url(/resources/img/cap/help_alt.gif) 0 0 no-repeat; }
body.cap .p-content fieldset ol li a.help:hover { text-decoration: none; color: #000; overflow: visible; }

body.cap .p-content fieldset ol li a.help span.popup  
{
	visibility: hidden; 
	width: 0;
	z-index: 9998 !important;
	width: 273px;
}

body.cap .p-content fieldset ol li a.help:hover span.popup  
{
	visibility: visible; 
	width: 253px; 
	position: absolute; 
	top: -6px;
	left: -258px;
}
body.cap .p-content fieldset ol li a.help:hover span.popup span.popup-content  
{
	display: block; 
	min-height: 50px; 
	width: 223px; 
	padding: 10px 20px 10px 10px;
	background: url(/resources/img/cap/bubble_top.png) top left no-repeat;
}
body.cap .p-content fieldset ol li a.help:hover span.popup span.popup-footer  
{
	display: block; 
	width: 253px; 
	height: 10px;
	background: url(/resources/img/cap/bubble_bottom.png) top left no-repeat;
}


body.cap .application-container { padding: 0 7px; width: 880px; overflow: hidden; background: #fff; }

body.cap .application-container h2 { padding-left: 0px; }

body.cap .application-container div.actions { margin-bottom: 20px; width: 881px; float: left; position: relative; }

body.cap .application-container div.actions h3 { text-transform: uppercase; font-size: 1.17em; margin-bottom: 20px; width: 300px; }

body.cap .application-container div.actions input { position: absolute; top: 6px; }
body.cap .application-container div.actions input.save { right: 82px; }
body.cap .application-container div.actions input.cancel { right: 0; }


body.cap .application-progress { float: left; clear: both; width: 880px; height: 145px; position: relative; }
body.cap .application-progress h3 { text-transform: uppercase; font-size: 1.17em; margin-bottom: 12px; }

body.cap .application-progress ol  
{
	float: left; 
	clear: both; 
	width: 880px; 
	position: relative;
	height: 69px;
}
body.cap .application-progress ol li { list-style: none; float: left; cursor: pointer; }

body.cap .application-progress input#save-as-draft-first-page,
body.cap .application-progress input#save-as-draft-other-pages { position: absolute; top: 10px; right: 0; }


/* P-Content 
------------------------------------------------------------*/

body.cap .p-content { width: 880px; float: left; clear: both; padding: 0 0 90px 0; }

body.cap .p-content div.buttons  
{
	position: absolute; 
	z-index: 2;
	bottom: -60px; 
	left: 0;
	width: 613px; float: left; clear: both; padding: 10px 0 0 0; overflow: hidden; }
	
body.cap .p-content div.buttons a  
{
	margin: 0; 
	padding: 0;
	width: 117px; 
	height: 37px; 
	text-indent: -9999em; 
	text-align: left; 
}

body.cap .p-content div.buttons a.next { float: right; background: url(/resources/img/cap/next.gif) 0 0 no-repeat;  }
body.cap .p-content div.buttons a.next:hover { float: right; background: url(/resources/img/cap/next_on.gif) 0 0 no-repeat; }

body.cap .p-content div.buttons a.back { float: left; background: url(/resources/img/cap/back.gif) 0 0 no-repeat; }
body.cap .p-content div.buttons a.back:hover { float: left; background: url(/resources/img/cap/back_on.gif) 0 0 no-repeat; }

body.cap .p-content .application-forms  
{
	width: 613px; 
	float: left; 
	clear: both; 
	background: url(/resources/img/cap/pod_bottom.gif) bottom left no-repeat; 
	padding: 0 0 9px 0;
	margin: 0;
	position: relative;
	display: block;
 }

body.cap .p-content fieldset  
{
	width: 611px; 
	float: left; 
	clear: both; 
}

body.cap .p-content fieldset div.application-form-content  
{
	width: 587px; 
	float: left; 
	clear: both; 
	padding: 9px 12px;
}

body.cap .p-content fieldset.top h3 { background: url(/resources/img/cap/pod_top.gif) 0 0 no-repeat; border: 0; width: 592px; }
body.cap .p-content fieldset h3  
{
	width: 590px; 
	float: left; 
	clear: both; 
	padding: 7px 9px 6px 12px;
	border-left: 1px solid #ccc; 
	border-right: 1px solid #ccc; 
	margin: 0; 
	text-transform: uppercase; 
	font-size: 1.17em;
	color: #5e3907;
	background: url(/resources/img/cap/1px_pod_top.gif) 0 0 repeat-x;
}
body.cap .p-content fieldset p { padding: 0 0 6px 0; }
body.cap .p-content fieldset p.large-textarea-help  
{
	clear: both; 
	float: left; 
	color: #6F6F6F; 
	padding: 4px 0 0 0; 
	width: 240px;
}



/* Form Template inside P-Content 
-----------------------------------------------------------------*/

body.cap .p-content fieldset div.application-form-content ol { width: 582px; float: left; clear: both; padding: 0 1px; }
body.cap .p-content fieldset div.application-form-content ol li  
{
	width: 583px; 
	float: left; 
	clear: both; 
	margin: 0; 
	padding: 6px 0; 
	list-style: none;
	vertical-align: top;
	position: relative;
}
body.cap .p-content fieldset div.application-form-content ol li.alt { background-color: #fefefe; }
body.cap .p-content fieldset div.application-form-content ol li label  
{
	width: 130px; 
	margin: 0; 
	padding: 7px 0 0 0; 
	display: block; 
	float: left;
}
body.cap .p-content fieldset div.application-form-content ol li input { position: relative; }
body.cap .p-content fieldset div.application-form-content ol li input.update { margin-top: 5px; }
body.cap .p-content fieldset div.application-form-content ol li input.add-this-course { margin-top: 1px; }

body.cap .p-content fieldset div.application-form-content ol li input.formFieldText  
{
	width: 274px; 
	margin: 3px 8px 0 0; 
	padding: 3px; 
	display: block; 
	float: left;
	position: relative;
}
body.cap .p-content fieldset div.application-form-content ol li select.formFieldDropDown  
{
	width: 282px; 
	padding: 3px;
	margin: 3px 8px 0 0; 
	position: relative; 
	float: left;
} 



/* =What I'm Applying For (Stage 1) 
-----------------------------------*/

body.cap .p-content fieldset div.application-form-content ol li select#academic-year { width: 103px; } 

body.cap .p-content fieldset div.application-form-content ol li input.add-this-course  
{
	display: block; 
	float: left;
}

body.cap .p-content fieldset div.application-form-content ol li a.add-this-course:hover  
{
	background: url(/resources/img/cap/add_this_course_on.png) 0 0 no-repeat;
	cursor: pointer;
}

/* Provider */


/* Applying For (Order of Preference) */

body.cap .p-content fieldset.applying-for div.application-form-content { padding: 12px 0 9px 0; border: 0; width: 612px; }
body.cap .p-content fieldset.applying-for div.application-form-content ol { width: 610px; }
body.cap .p-content fieldset.applying-for div.application-form-content ol li { width: 612px; }
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol { padding-top: 2px; width: 610px; }

body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li  
{
	border-top: 1px dotted #ccc;
	padding: 13px 10px 10px 40px;
	width: 559px;
	position: relative;
	background-position: 10px 50%;
	background-repeat: no-repeat;
}
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li.item-1 
{
	border-top: 1px dotted #ccc; 
	background-image: url(/resources/img/cap/first.gif);
}

body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li.item-2 { background-image: url(/resources/img/cap/second.gif); }
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li.item-3 { background-image: url(/resources/img/cap/third.gif); }
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li.item-4 { background-image: url(/resources/img/cap/fourth.gif); }
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li.item-5 { background-image: url(/resources/img/cap/fifth.gif); }
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li.item-6 { background-image: url(/resources/img/cap/sixth.gif); }

body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li.first { border-top: 0; }

body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li label { width: 430px; display: inline; padding: 0; }
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li input.formFieldCheckbox { float: left; margin: 1px 8px 0 0; }
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li input { margin: 0 0 0 8px; }

body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li input.up { position: absolute; right: 45px; top: 14px; }
body.cap .p-content fieldset.applying-for div.application-form-content ol li ol li input.down { position: absolute; right: 20px; top: 14px; }

body.cap .p-content fieldset.applying-for div.application-form-content p { padding: 0 10px 6px 10px; margin-top: -7px; }


/* Find another Course */

body.cap .p-content fieldset.course-type div.application-form-content ol li { }
body.cap .p-content fieldset.course-type div.application-form-content ol li div  
{
	float: left; 
	clear: both;
	padding: 12px 0 6px 0;
	position: relative; 
	vertical-align: top; 
	width: 560px;
}
body.cap .p-content fieldset.course-type div.application-form-content ol li div.formFieldDiv { height: 130px; }
body.cap .p-content fieldset.course-type div.application-form-content ol li p { padding: 0 10px 10px 0; margin-top: -5px; }

body.cap .p-content fieldset.course-type div.application-form-content ol li label { clear: both; }
body.cap .p-content fieldset.course-type div.application-form-content ol li input { }

/* =Basic Information (Stage 2) 
-----------------------------------*/

/* Personal Details & My Address */

body.cap .p-content fieldset.personal-details div.application-form-content, 
body.cap .p-content fieldset.my-address div.application-form-content,
body.cap .p-content fieldset.my-contact-details div.application-form-content,
body.cap .p-content fieldset.my-next-of-kin div.application-form-content { width: 612px; padding: 0; }

body.cap .p-content fieldset.personal-details div.application-form-content ol,
body.cap .p-content fieldset.my-address div.application-form-content ol,
body.cap .p-content fieldset.my-contact-details div.application-form-content ol,
body.cap .p-content fieldset.my-next-of-kin div.application-form-content ol { width: 610px; }

body.cap .p-content fieldset.personal-details div.application-form-content ol li,
body.cap .p-content fieldset.my-address div.application-form-content ol li,
body.cap .p-content fieldset.my-contact-details div.application-form-content ol li,
body.cap .p-content fieldset.my-next-of-kin div.application-form-content ol li 
{
	border-top: 1px dotted #ccc; 
	padding: 6px 10px 10px 10px;
	width: 591px;
	position: relative;
}

body.cap .p-content fieldset.personal-details div.application-form-content ol li label,
body.cap .p-content fieldset.my-address div.application-form-content ol li label,
body.cap .p-content fieldset.my-contact-details div.application-form-content ol li label,
body.cap .p-content fieldset.my-next-of-kin div.application-form-content ol li label { padding: 6px 40px 0 0; width: 130px; text-align: right; }

body.cap .p-content fieldset.personal-details div.application-form-content ol li p,
body.cap .p-content fieldset.my-address div.application-form-content ol li p,
body.cap .p-content fieldset.my-contact-details div.application-form-content ol li p,
body.cap .p-content fieldset.my-next-of-kin div.application-form-content ol li p, 
body.cap p#provider-display,
body.cap p#academic-year-display { padding: 6px 0 0 0; display: inline-block; }


/* =Additional Information (Stage 3) 
-----------------------------------*/

body.cap .p-content fieldset.exam-results div.application-form-content ol,
body.cap .p-content fieldset.work-experience div.application-form-content ol { padding: 0 !important; width: 587px !important; }

body.cap .p-content fieldset.exam-results div.application-form-content ol li,
body.cap .p-content fieldset.work-experience div.application-form-content ol li { width: 587px !important; overflow: hidden; }

body.cap .p-content fieldset table { border-collapse: collapse; width: 587px; }
body.cap .p-content fieldset table caption { display: none; height: 0; line-height: 0; }

body.cap .p-content fieldset table thead { height: 24px; vertical-align: top; padding: 0 0 6px 0; }
body.cap .p-content fieldset table th { text-transform: capitalize; vertical-align: bottom; }

body.cap .p-content fieldset table th.grade,
body.cap .p-content fieldset table th.estimated-grade { text-align: center !important; }

body.cap .p-content fieldset table th,
body.cap .p-content fieldset table td { margin: 0; padding: 0; font-weight: normal; text-align: left; }

body.cap .p-content fieldset table td { padding: 0 0 5px 0; }
body.cap .p-content fieldset table td input.formFieldText { margin: 0 0 0 0 !important; padding: 3px; }

body.cap .p-content fieldset table th.delete { width: 22px; }

body.cap .p-content table td input.remove-row { border: 0 !important; margin: 0; }

body.cap .p-content fieldset div.application-form-content ol li input.add-row { position: relative; float: right; right: 6px }

body.cap .p-content fieldset.exam-results table td.delete { width: 16px }

body.cap .p-content .add-row-placeholder { display: block; height: 22px }

/* My Exam Results */

body.cap .p-content fieldset.exam-results ol li, body.cap .p-content fieldset.work-experience ol li {  }

body.cap .p-content fieldset.exam-results table td { padding: 0 5px 5px 0; }
body.cap .p-content fieldset.exam-results table td input.course { width: 200px !important; }

body.cap .p-content fieldset.exam-results table td input.qualification-type { width: 60px !important; }
body.cap .p-content fieldset.exam-results table td input.level { width: 60px !important; text-align: center; }
body.cap .p-content fieldset.exam-results table td input.exam-date { width: 65px !important; text-align: center; }
body.cap .p-content fieldset.exam-results table td input.grade { width: 40px !important; text-align: center; }
body.cap .p-content fieldset.exam-results table td input.estimated-grade { width: 60px !important; text-align: center; }



/* My Employment History */

body.cap .p-content fieldset.work-experience ol { padding: 0 !important; width: 587px !important; }
body.cap .p-content fieldset.work-experience table td { padding: 0 5px 5px 0; }

body.cap .p-content fieldset.work-experience table td input.name-of-employer { width: 230px !important; }
body.cap .p-content fieldset.work-experience table td input.post-held { width: 210px !important; }
body.cap .p-content fieldset.work-experience table td input.dates { width: 80px !important; }


/* My Additional Information */

body.cap .p-content fieldset.additional-information div.application-form-content { }
body.cap .p-content fieldset.additional-information div.application-form-content ol li label { width: 240px; padding: 7px 10px 0 0;  }
body.cap .p-content fieldset.additional-information div.application-form-content ol li input.formFieldCheckBox { margin: 8px 0 0 0; }
body.cap .p-content fieldset.additional-information div.application-form-content ol li h4 { margin: 0 0 -8px 0; }
body.cap .p-content fieldset.additional-information div.application-form-content ol li textarea  
{
	width: 300px;
	padding: 3px; 
	height: 150px; 
	font-family: Arial, sans-serif;
	font-size: 1em;
}



/* =Small Print (Stage 4)
-----------------------------------*/

body.cap .p-content fieldset.small-print div.application-form-content ol li label { width: 210px; padding: 0px 10px 0 0; }
body.cap .p-content fieldset.small-print div.application-form-content ol li input.formFieldCheckBox { margin: 1px 0 0 0; }
body.cap .p-content fieldset.small-print div.application-form-content ol li div.freeform  
{
	width: 340px; 
	float: none; 
	clear: both !important;
	padding: 10px 10px 15px 220px !important;
	height: 150px;
	overflow: auto;
}


/* This Application
------------------------------------------------------------*/

body.cap .p-content div.this-application  
{
	width: 240px; 
	padding: 0; 
	margin: 0; 
	float: right; 
	clear: none; 
	overflow: hidden;
	position: relative;
}

body.cap .p-content div.this-application div.pod-header h3  
{
	background: url(/resources/img/pods/elastic/right_grey.gif) top right no-repeat; 
	color: #414142;
	padding: 9px 0 5px 4px;
	font-size: 1.17em;
	text-transform: uppercase;
	position: relative;
}
body.cap .p-content div.this-application div.pod-header { background: url(/resources/img/pods/elastic/left_grey.gif) top left no-repeat; }


body.cap .p-content div.this-application div.pod-content  
{
	background: #f6f6f6 url(/resources/img/cap/this_application_bottom.gif) bottom left no-repeat; 
	padding: 14px 10px 12px 10px; 
	width: 220px; 
	border: 0;
}
body.cap .p-content div.this-application div.pod-content ol li { list-style: none; margin: 0; padding: 0 0 10px 0; position: relative; }
body.cap .p-content div.this-application div.pod-content ol li.last { padding: 0; }


body.cap .p-content div.this-application div.pod-content ol li p { padding: 0 0 0 27px; color: #707070; }


body.cap .p-content div.this-application div.pod-content ol li h4  
{
	background-position: 0 0; 
	background-repeat: no-repeat;
	font-size: 1.17em; 
	padding: 0 0 2px 27px; 
	margin: 0 0 6px 0; 
	color: #414142;
	position: relative;
	height: 18px;
}

body.cap .p-content div.this-application div.pod-content ol li h4 a:hover { text-decoration: underline; }



/* Complete */

body.cap .p-content div.this-application div.pod-content ol li.complete h4  
{
	color: #77c347; 
	background-image: url(/resources/img/cap/completed_small.gif);
}

body.cap .p-content div.this-application div.pod-content ol li.complete ul li { color: #77c347; font-weight: bold; }



/* Current */

body.cap .p-content div.this-application div.pod-content ol li.current h4  { background-image: url(/resources/img/cap/current_small.gif); }



/* Incomplete */

body.cap .p-content div.this-application div.pod-content ol li.incomplete h4  
{
	color: #999; 
	background-image: url(/resources/img/cap/incomplete_small.gif);
}
body.cap .p-content div.this-application div.pod-content ol li.incomplete p { color: #999; }



/* Nested UL */

body.cap .p-content div.this-application div.pod-content ol li ul { }
body.cap .p-content div.this-application div.pod-content ol li ul li  
{
	padding: 0 0 0 27px; 
	margin: 0 0 5px 0; 
	background-position: 9px 6px; 
	background-repeat: no-repeat;
}
body.cap .p-content div.this-application div.pod-content ol li.complete ul li { background-image: url(/resources/img/cap/bullet_complete.gif); }
body.cap .p-content div.this-application div.pod-content ol li.current ul li { background-image: url(/resources/img/cap/bullet_active.gif); }
body.cap .p-content div.this-application div.pod-content ol li.incomplete ul li { background-image: url(/resources/img/cap/bullet_inactive.gif); }



/* =JS Enabled 
--------------------------------------------------------------------------*/

/* Modal Window */

div#nyroModalFull { position: absolute !important; }

div.cap-modal /* Parent of Iframe: Contains border styles, width and position of window */
{
	top: 50px !important; 
	margin-top: 0 !important; 
	margin-left: -469px !important; 
	width: 920px !important;
	height: 725px !important; 
} 


div.cap-modal div.wrapperIframe { width: 920px !important; height: 725px !important; overflow: hidden !important; }
div.cap-modal #nyroModalContent { width: 920px !important; height: 725px !important; }


div.cap-modal #nyroModalContent #nyroModalIframe  
{
	width: 920px !important; 
	overflow: visible !important; 
	display: inline;
	height: 725px !important; 
}



/* Inside IFrame */

body.cap-iframe  
{
	overflow: hidden !important; 
	background: none; 
	position: relative;
	padding: 0; 
	margin: 0;
	height: 725px;
}

body.cap-iframe .application-container { padding: 0 !important; width: 920px !important; }

body.cap-iframe .p-content { padding: 0 !important; width: 920px !important; }

body.cap-iframe .application-container div.cap-modal-header  
{
	padding: 9px 10px 6px 10px; 
	margin: 0; 
	background: #0b9fb2 url(/resources/img/cap/header_background.gif) 0 0 repeat-x;
	float: left;
	clear: both;
	width: 900px;
}

body.cap-iframe .application-container div.cap-modal-header h2 { width: 400px; float: left; font-size: 15px; color: #fff; margin: 0; padding: 0; }

body.cap-iframe .application-container div.cap-modal-header span { margin-left: 7px; display: inline-block; float: right; clear: none;  }
body.cap-iframe .application-container div.cap-modal-header span:hover { cursor: pointer; }


body.cap-iframe .application-container div.cap-modal-content  
{
	height: 690px !important;
	width: 900px !important;
	overflow: auto !important;
	position: relative;
	margin: 0;
	padding: 0 10px;
	float: left;
	clear: both;
}

body.cap-iframe .application-container div.cap-modal-content div.buttons { padding-bottom: 20px !important; bottom: -80px; float: left; }
body.cap-iframe .application-container div.cap-modal-content div.buttons input.back { float: left; }
body.cap-iframe .application-container div.cap-modal-content div.buttons input.next { float: right; }
body.cap-iframe .application-container div.cap-modal-content div.buttons input.submit { float: right; }

body.cap-iframe .application-container div.cap-modal-content div.disabled-buttons 
{ 
	float: left; 
	width: 613px;
	position: absolute;
	top: 10px;
	left: 0px;	
}
body.cap-iframe .application-container div.cap-modal-content div.buttons img.back { float: left; }
body.cap-iframe .application-container div.cap-modal-content div.buttons img.submit { float: right; }

/*
body.cap-iframe div.ac_results { left: 153px; top: 603px !important; width: 282px !important; margin: 0 !important; }
*/

#autocomplete-container { position: relative; padding: 0; }

#autocomplete-container div.ac_results { left: 130px !important; top: -2px !important; width: 298px !important; margin: 0 !important; }

#autocomplete-container div.ac_results
{
	font-size: 1.17em;
	clear: both;
	display: inline;
	width: 100%;
	font-size: 12px;
	z-index: 9999;
	padding: 0;
}

#autocomplete-container div.ac_results ul { width: 300px; font-weight: normal; border-bottom: 0; /*border-bottom: 1px solid #ddd;*/ overflow: auto !important; }

#autocomplete-container div.ac_results ul li
{
	padding: 4px !important;
	width: 274px !important;
	overflow: hidden;
	list-style: none;
	clear: both;
	display: block;
	vertical-align: middle;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	border-top: 0;
}

#autocomplete-container div.ac_results ul li:hover { cursor: pointer; }

#autocomplete-container div.ac_results ul li.ac_over { background: #1c93ce !important; color: #fff; }

#autocomplete-container div.ac_results ul li div.course-title { margin: 0 !important; padding: 0 !important; width: 260px !important; }

#autocomplete-container div.ac_results ul li div.type-title { width: 40%; float: right; text-align: right; clear: none; }

#autocomplete-container div.ac_results ul li.ac_even { background-color: #f1faff; }

.application-forms .fieldset-help { margin: 10px 5px 0 5px; float: left; clear: both; width: 585px; }