/* === Temporary template when switching website over === */
section#webpage-section{
    padding: 8vw 5vw 4vw 5vw;
    width: 90vw;
}

section#webpage-section h1{
    color: #0F1425;
    font-size: 4vw;
    font-weight: 350;
    padding: 0 0 3vw 7vw;
}

section#webpage-section h2{
    color: #0F1425;
    font-size: 3vw;
    font-weight: 350;
    padding: 2.5vw 0 2.5vw 0;
}

section#webpage-section h3{
    color: #0F1425;
    font-size: 2vw;
    font-weight: 350;
    padding: 2vw 0 2vw 0;
}

section#webpage_section p{
    color: #0F1425;
    font-size: 1.2vw;
    font-weight: 350;
    line-height: 2.5vw;
}

section#webpage-section a, section#webpage-section a:visited{
    color: #039BE5;
    cursor: pointer;
    text-decoration: none;
}

@media only screen and (max-device-width: 480px){
    section#webpage-section{
        padding: 7vw 2vw 7vw 2vw;
        width: 96vw;
    }

    section#webpage-section h1{
        font-size: 9vw;
        padding: 0 0 5vw 7vw;
    }

    section#webpage-section h2{
        font-size: 6.5vw;
        padding: 4vw 0 4vw 0;
    }

    section#webpage-section h3{
        font-size: 4.5vw;
        padding: 3vw 0 3vw 0;
    }

    section#webpage-section p{
        font-size: 3.5vw;
        line-height: 6vw;
    }
}


/* === Everything below is copied from other stylesheets to make things work while switching over the site === */
/*------------- Styling for application homepage ------------------*/
ul#application_buttons{
	list-style: none;
	margin: 40px 0 40px 50px;
	padding: 0;
}

ul#application_buttons li{
	display: inline-block;
	margin: 0 150px 0 70px;
}

fieldset#upload_doc{
	border: none;
	margin: 0 0 30px 0;
	padding: 0;
	vertical-align: middle;
}

fieldset#upload_doc input, fieldset#upload_doc div{
	display: inline-block;
	margin-right: 10px;
}


/*------------- Styling for application status bar ------------------*/
ul#tutor_application_progress_bar{
	list-style: none;
	margin: 0 0 50px 0;
	padding: 0;
	border-top: 1px #888888 solid;
	border-left: 1px #888888 solid;
	width: 894px;
	height: 50px;
}

ul#tutor_application_progress_bar li{
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 148px;
	height: 50px;
	line-height: 50px;
	border-right: 1px #888888 solid;
	border-bottom: 1px #888888 solid;
	vertical-align: middle;
	text-align: center;
}

/*------------- Styling for tutor application personal details ------------------*/
fieldset#tutor_application_personal_details{
	border: none;
	padding: 0;
	margin: 0;
	width: 896px;
}

fieldset#tutor_application_personal_details ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

fieldset#tutor_application_personal_details ul span{
	display: block;
	margin: 10px 0 20px 0;
	clear: both;
}

fieldset#tutor_application_personal_details ul span:nth-child(1), fieldset#tutor_application_personal_details ul span:nth-child(2){
	float: left;
}

fieldset#tutor_application_personal_details ul li{
	display: inline-block;
	line-height: 30px;
	vertical-align: middle;
	margin: 0 15px 0 0;
}

fieldset#tutor_application_personal_details ul li#space{
	width: 70px;
}

fieldset#tutor_application_personal_details ul span:nth-child(3) li{
	display: block;
	float: right;
}

/*------------- Styling for tutor application profile photo ------------------*/
ul#left_and_right_floated_buttons{
	list-style: none;
	padding: 10px 15px 30px 0;
}

ul#left_and_right_floated_buttons li:nth-child(1){
	float: left;
}

ul#left_and_right_floated_buttons li:nth-child(2){
	float: right;
}

/*------------- Styling for tutor application contact details ------------------*/
fieldset#tutor_application_contact_details{
	border: none;
	padding: 0;
	margin: 0;
	width: 896px;
}

fieldset#tutor_application_contact_details span:nth-child(1), fieldset#tutor_application_contact_details span:nth-child(2){
	display: inline-block;
	vertical-align: top;
	margin: 0 100px 0 0;
}

fieldset#tutor_application_contact_details span:nth-child(3){
	margin: 10px 0 40px 0;
	float: left;
}

fieldset#tutor_application_contact_details span ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

fieldset#tutor_application_contact_details span ul li{
	display: block;
}

fieldset#tutor_application_contact_details span ul li ul li{
	display: inline-block;
	margin: 3px 0 3px 0;
}

fieldset#tutor_application_contact_details span:nth-child(1) ul li ul li:nth-child(1){
	width: 300px;
}

fieldset#tutor_application_contact_details span:nth-child(2) ul li ul li:nth-child(1){
	width: 180px;
}

fieldset#tutor_application_contact_details span:nth-child(3) ul li ul li.cur_address{
	width: 600px;
}

/*------------- Styling for tutor application qualifications ------------------*/
fieldset#tutor_application_qualifications{
	border: none;
	padding: 0;
	margin: 0;
	width: 896px;
}

fieldset#tutor_application_qualifications ul{
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
}

fieldset#tutor_application_qualifications ul li{
	display: block;
}

fieldset#tutor_application_qualifications ul li ul{
	display: block;
	padding: 0;
	margin: 0;
}

fieldset#tutor_application_qualifications ul li ul li{
	display: inline-block;
	vertical-align: middle;
}

fieldset#tutor_application_qualifications ul:nth-child(1) li ul li:nth-child(1), fieldset#tutor_application_qualifications ul:nth-child(1) li ul li:nth-child(2){
	width: 161px;
}

fieldset#tutor_application_qualifications ul:nth-child(1) li ul li:nth-child(3), fieldset#tutor_application_qualifications ul:nth-child(1) li ul li:nth-child(4){
	width: 91px;
}

fieldset#tutor_application_qualifications ul:nth-child(1) li ul li:nth-child(5){
	width: 250px;
}

/*------------- Styling for tutor application subjects to tutor ------------------*/
fieldset#tutor_application_subjects_to_tutor{
	border: none;
	padding: 0;
	margin: 0;
	width: 896px;
}

fieldset#tutor_application_subjects_to_tutor ul{
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
}

fieldset#tutor_application_subjects_to_tutor ul li{
	display: block;
	margin: 2px 0 2px 0;
}

fieldset#tutor_application_subjects_to_tutor ul li ul{
	display: block;
	padding: 0;
	margin: 0;
}

fieldset#tutor_application_subjects_to_tutor ul li ul li{
	display: inline-block;
}

fieldset#tutor_application_subjects_to_tutor ul li ul li:nth-child(1){
	width: 350px;
}

fieldset#tutor_application_subjects_to_tutor ul li ul li:nth-child(2), fieldset#tutor_application_subjects_to_tutor ul li ul li:nth-child(3), fieldset#tutor_application_subjects_to_tutor ul li ul li:nth-child(4), fieldset#tutor_application_subjects_to_tutor ul li ul li:nth-child(5), fieldset#tutor_application_subjects_to_tutor ul li ul li:nth-child(6), fieldset#tutor_application_subjects_to_tutor ul li ul li:nth-child(7), fieldset#tutor_application_subjects_to_tutor ul li ul li:nth-child(8){
	width: 60px;
	text-align: center;
}

/*------------- Styling for tutor application experience ------------------*/
fieldset#application_experience{
	border: none;
	padding: 0;
	margin: 0;
	width: 900px;
}

fieldset#application_experience ul{
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
}

fieldset#application_experience ul li{
	display: block;
}

fieldset#application_experience ul li ul{
	display: block;
	padding: 0;
	margin: 0;
}

fieldset#application_experience ul li ul li{
	display: inline-block;
	vertical-align: middle;
}

fieldset#application_experience ul:nth-child(1) li ul li:nth-child(1){
	width: 180px;
}

fieldset#application_experience ul:nth-child(1) li ul li:nth-child(2){
	width: 390px;
	padding: 0 10px 0 0;
}

fieldset#application_experience ul:nth-child(1) li ul li:nth-child(3){
	width: 120px;
	padding: 0 10px 0 0;
}

fieldset#application_experience ul:nth-child(1) li ul li:nth-child(4){
	width: 80px;
	padding: 0 10px 0 0;
}

fieldset#application_experience textarea{
	height: 40px;
	width: 700px;
	padding: 5px 10px 5px 10px;
	margin: 5px 0 15px 0;
	resize: none;
	text-align: left;
}

/*------------- Styling for tutor application further info ------------------*/
fieldset#application_further_info{
	border: none;
	padding: 0;
	margin: 0;
	width: 896px;
}

fieldset#application_further_info textarea{
	height: 200px;
	width: 700px;
	margin: 10px 0 0 80px;
	padding: 10px 20px 5px 20px;
	resize: none;
	text-align: left;
}

/*------------- Styling for declare over 18 page ------------------*/
ul#declare_18{
	list-style: none;
	padding: 0;
	margin: 0;
}

ul#declare_18 li{
	display: inline-block;
	padding: 0;
	margin: 0 20px 0 20px;
}

/*------------- Styling for submit application page ------------------*/
ul#application_possible_errors{
	padding: 0;
	margin: 0;
}

ul#application_possible_errors li{
	display: block;
	padding: 0;
	margin: 20px 20px 20px 20px;
}

ul#confirm_submit_application{
	list-style: none;
	padding: 0;
	margin: 0;
}

ul#confirm_submit_application li{
	display: inline-block;
	padding: 0;
	margin: 0 100px 0 100px;
}

/*------------- Styling for application route page ------------------*/
ul#application_routes{
	list-style: none;
	padding: 0;
	margin: 0;
}

ul#application_routes li{
	display: block;
	margin: 0 0 20px 0;
}

div#ts_options span{
	display: inline-block;
	margin: 0 30px 0 0;
}

table#application_routes_summary tr{
	height: 30px;
}

table#application_routes_summary td:nth-child(1){
	width: 430px;
}

table#application_routes_summary td:nth-child(2), table#application_routes_summary td:nth-child(3){
	width: 225px;
	text-align: center;
}

/*------------- Styling for booked interview page ------------------*/
ul#interview_info{
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#interview_info li{
	display: block;
	margin: 15px 0 15px 0;
}

/*------------- Styling for applicant feedback form ------------------*/
fieldset#interview_feedback{
	border: none;
	padding: 0;
	margin: 0 100px 0 100px;
	width: 700px;
}

fieldset#interview_feedback ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

fieldset#interview_feedback ul li{
	display: block
}

fieldset#interview_feedback ul li textarea{
	height: 100px;
	width: 672px;
}

fieldset#interview_feedback ul li:nth-child(3){
	float: right;
}

ul#tutor_application_progress_bar li.current_application_selection{
	background-color: #009900;
}

ul#tutor_application_progress_bar li.other_application_selection{
	background: linear-gradient(to bottom, #FFFFFF, #DDDDDD);
}

ul#tutor_application_progress_bar li.other_application_selection{
	color: #333333;
}

ul#tutor_application_progress_bar li.current_application_selection{
	color: #FFFFFF;
}

ul#tutor_application_progress_bar li{
	font-size: 9pt;
}

@media only screen and (max-device-width: 480px){
    ul#tutor_application_progress_bar li{
        font-size: 3.25vw;
    }
}

/* ============= Person photo styling ============= */
ol.person_photo_list{
	list-style: none;
	padding: 0;
	margin: 30px 0 0 0;
}

ol.person_photo_list li{
	display: inline-block;
	border: none;
	padding: 10px;
	margin: 0;
	width: 205px;
	vertical-align: top;
	border-collapse: collapse;
	white-space:nowrap;
}

ol.person_photo_list li.preferred{
	background-color: #92D050;
}

ol.person_photo_list li.not_accepted div#person_photo img{
	opacity: 0.3;
	filter: alpha(opacity=30);
}

ul#photo_info{
	list-style: none;
	border: none;
	padding: 0;
	margin: 0;
}

ul#photo_info li{
	display: inline-block;
	border: none;
	width: 425px;
	padding: 0;
	vertical-align: top;
}

ul#photo_info li:nth-child(1){
	padding: 0 20px 0 0;
}

ul#photo_info li:nth-child(2){
	padding: 0 0 0 20px;
}

fieldset#upload_photo{
	border: none;
	padding: 0;
	margin: 0;
}

fieldset#upload_photo input, fieldset#upload_photo div{
	display: inline-block;
}

fieldset#upload_photo div#small_green_clip1{
	margin: 5px 0 0 0;
}

aside#cropped_photo{
	float: right;
	margin: 0 0 0 20px;
}

/* ============= Crop Photo styling ============= */
div.left_crop, div#secondary_area, div.bottom_crop, div.final_photo{
	float: left;
}

div.top_crop, div.right_crop{
	float: right;
}

div.left_crop, div.top_crop, div.right_crop, div.bottom_crop{
	background-color: #000000;
	opacity: .7;
	filter: alpha(opacity=70);
}

div#photo_area, div#crop_photo_instructions{
	display: inline-block;
}

div#crop_photo_instructions{
	vertical-align: top;
	width: 430px;
	margin: 0 0 0 20px;
}

div#crop_photo_buttons{
	width: 200px;
	margin: 20px 80px 20px 110px;
}

div#person_photo{
	overflow: hidden;
	display: inline-block;
}

fieldset#tutor_application_subjects_to_tutor ul li:hover{
	background-color: #DDDDDD;
}

/* ============= Lists of Horizontal Lists ============= */
ol.list_of_horiz_lists, ol.chunky_list_of_horiz_lists, ul.list_of_horiz_lists{
	list-style: none;
	border: none;
	padding: 0;
	margin: 0;
}

ol.list_of_horiz_lists li, ol.chunky_list_of_horiz_lists li, ul.list_of_horiz_lists li{
	display: block;
}

ol.list_of_horiz_lists li ul, ol.chunky_list_of_horiz_lists li ul, ul.list_of_horiz_lists li ul{
	list-style: none;
	border: none;
	padding: 0;
	margin: 0;
}

ol.list_of_horiz_lists li ul li, ol.chunky_list_of_horiz_lists li ul li, ul.list_of_horiz_lists li ul li{
	display: inline-block;
}

ol.chunky_list_of_horiz_lists li{
	height: 100px;
	line-height: 100px;
	vertical-align: middle;
}

/*------------- Styling for the chunky list of lists ------------------*/
ol.chunky_list_of_horiz_lists{
	width: 900px;
	margin: 0 0 20px 0;
}

ol.chunky_list_of_horiz_lists li ul li{
	padding: 0 0 0 30px;
}

ol.chunky_list_of_horiz_lists li ul li:nth-child(1){
	width: 300px;
}

ol.chunky_list_of_horiz_lists li ul li:nth-child(2){
	width: 540px;
}

ol.chunky_list_of_horiz_lists li{
	background: linear-gradient(to bottom, #FFFFFF, #DDDDDD);
}

ol.chunky_list_of_horiz_lists a:link li ul li, ol.chunky_list_of_horiz_lists a:visited li ul li{
	color: #333333;
}

ol.chunky_list_of_horiz_lists a:hover{
	cursor: pointer;
}

ol.chunky_list_of_horiz_lists a:link, ol.chunky_list_of_horiz_lists a:visited{
	text-decoration: none;
}

/*------------- Styling for admin individual interview page ------------------*/
ol#interviews_key{
	list-style: none;
	padding: 0;
	margin: 0 0 10px 50px;
	border: none;
	display: inline-block;
	vertical-align: middle;
}

ol#interviews_key li{
	display: inline-block;
	height: 12px;
	width: 12px;
	margin: 0 5px 0 0;
}

ol#interviews_key li#available_key{
	border: 1px #888888 solid;
	height: 10px;
	width: 10px;
}

ol#interviews_key li#key_category{
	margin: 0 30px 0 0;
	width: 75px;
}

ol#interviews_key li#key_category_chosen{
	margin: 0 30px 0 0;
	width: 140px;
}

ol#interviews_key li#booked_key, table#admin_interview_times td.booked_time, table#admin_interview_times td.booked, table#admin_interview_times td.booked_end, ol#interviews_key li#chosen_key{
	background-color: #00063F;
}

ol#interviews_key li#unavailable_key, table#admin_interview_times td.unavailable_time, table#admin_interview_times td.unavailable, table#admin_interview_times td.unavailable_end, table#choose_interview_time td.unavailable_time{
	background-color: #CCCCCC;
}

ol#interviews_key li#available_key, table#admin_interview_times td.available_time, table#admin_interview_times td.available, table#admin_interview_times td.available_end, table#choose_interview_time td.available_time{
	background-color: #FFFFFF;
}

/*------------- Styling for admin individual interview page ------------------*/
table#choose_interview_time{
	padding: 0;
	margin: 0 0 20px 0;
	border-collapse: collapse;
}

table#choose_interview_time td.available_time, table#choose_interview_time td.unavailable_time{
	width: 100px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	vertical-align: middle;
	border: 1px #888888 solid;
}

table#choose_interview_time td.available_time{
	cursor: pointer;
}