/*
filename: [102090621]
author: [102090621]
created: [19/03/2019]
last modified: [enter date]
description: [index.html,jobs.html,apply.html,about.html]
*/

/*Open Sans Google Font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400'); 

* {
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
}

body{background-color:#ededed;}

/* white space positioning */
p, form {padding-left:20%; padding-right:20%; font-size:110%;} /* grouping */

/* text */
/* font variant, size and family */
h1 {font:300 300% 'Open Sans'; text-align:center;padding-bottom:30pt;}
h2 {text-align:center;font-size:220%;}
h3 {text-align:center;font-size:140%;}
h4 {text-align:center;font-size:115%;}
/* Key Responsibilties */ .jobheading {text-align:left; margin-left:10%; font-size:100%; margin-bottom:-3%;}
/* Skills */ .jobheading2 {text-align:left; margin-left:10%; font-size:110%; margin-bottom:-3%; clear:both; padding-left:5%;}

/* vvvvvvvvvvvvvvvvvvvvvvvv NAVIGATION vvvvvvvvvvvvvvvvvvvvvvvvvvv*/

nav { padding-right:20%; padding-left:20%;}
/* dynamic pseudo class */
/* navigation background colour */
nav:hover {background-color:#fafafa;}

img {margin-left: 4%;}

.pdf {align-self:center; text-align:center;}

/* NAVIGATION LIST - LEFT */

.navleft {
	list-style:none;
	display:inline-table;
	position:relative;
    font:18px "Open Sans";
    margin-left:8%;
}

.navleft li /* List */ {
	float:left;
	margin-left:10px;
	margin-right:10px;
    margin-bottom:30px;
}

.navleft li a /* List Components */ {
	text-decoration:none;
	color:#333333;
	padding:4px 20px 4px 3px;
	display:block;
    border-bottom:solid #333333 1px;
    letter-spacing: 2px;   
}

.navleft li a:hover { color:#969696;border-bottom:solid #969696 1px; }

/* NAVIGATION LIST - RIGHT */

.navright {
	list-style:none;
	display:inline-table;
	position:relative;
	font:18px "Open Sans";
}

.navright li /* List */ {
	float:left;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:30px;
}

.navright li a /* List Components */ {
	text-decoration:none;
    color:#333333;
	padding:4px 3px 4px 20px;
	display:block;
    border-bottom:solid #333333 1px;
    letter-spacing: 2px;
}

.navright li a:hover { color:#969696;border-bottom:solid #969696 1px; }



/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ NAVIGATION ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/* body id */
#index { background-color:#ededed; height:100%;}

/* index div id */
/* index background image */

/* -------- form ------------ */

#applybuttons {text-align: center; padding-top:20px; padding-bottom:20px;}

.apply {
    background-color: #a0a0a0;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    border:none;
    padding-right:30px;
    padding-left:30px;
    margin-left:10px;
    margin-right:10px;
}
.apply:hover { border: none; background:#b7b7b7; box-shadow: 0px 0px 1px #777;}

.fb-page {
	align-self:center;
    left: 30%;
	padding-top: 10%;
	}
.g-form {align-self: center; padding-left: 20%; margin-bottom: -2%;}

/* -------- */


/* ------- jobs.html -------- */
.jobsection {width:45%; float:left; padding-left:10%;}
.jobsection p {padding-left:10%; padding-right:10%;}
/* technically a coloured border, it's blue */
aside {width:25%; float:left; border:1px solid #e1e9ea; padding-left:.5%; padding-right:1%; margin:.5%;}
#secanalyst{float:left; padding-bottom:4%;}

.container {width: 60%;
	height: 60%;
	position: relative;    
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
}


#pinkhill {
		float: right; /* Aligns the first image to the right */
		max-width: 50%; /* Ensures the image is not too large */
		display: block;
		margin-left: 10px; /* Optional: adds a small gap between the image and the container */
		margin: 0; /* Removes any default margins */
    	padding: 0; /* Removes any default padding */
}
#culturalcentre {
	float: left; /* Aligns the second image to the left */
    max-width: 50%; /* Ensures the image is not too large */
    display: block;
    margin-right: 10px; /* Optional: adds a small gap between the image and the container */
	margin: 0; /* Removes any default margins */
    padding: 0; /* Removes any default padding */
}
.clear {
    clear: both; /* Clears the float, ensuring the next element doesn't float beside the images */
}
.gallery {
	max-width: 800px;
  	max-height: 900px;
	position: relative;
	display: block;
 	margin-left: auto;
	margin-right: auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	}

.navimg {		
	position: relative;
	top:0;
	bottom:0;
	left:0;
	right:0;
				}
.textgallery { text-align:center; padding-bottom: 5%;}
#aligncenter {text-align:center; }

/* definition list */
#aboutme {float:left; width:40%; margin-top:5%;}
dl {padding-left:30%; padding-right:2%; font-size:130%;}
dt {float: left; margin-right: 10%; max-width: 30%;}
dd {margin-left: 60%; margin-bottom: .5em;}
dd::after {content: " "; display: block;clear: left;} /* pseudo element */
.ddtable {padding-left:30%; width:40%; margin-top:1%;}
.dljobs {clear:both; font-size:100%; padding-left:15%;}
.dljobs dd {margin-left:3%; padding-right:5%;} /* contextual */
#photo {border:1px solid #fafafa; float:right; margin-right:5%; margin-bottom:5%;} /* single border using the short-hand border-property */

.applytext {font-size:120%; text-align: center;}
.applytextsmall {font-size:100%; text-align: center;}

/* about hovering mail ID / enhancements.html */
.defmailto {text-decoration:none;color:black;}
.defmailto:hover {color:gray;}
.defmailto span {display:none;}
.defmailto:hover {display:inline;}

/* jobs hovering label / enhancements.html */
.reference span {display:none;}
.reference:hover span {display:inline;}
.reference {text-align:center;font-size:115%;}


/* index page achievements */
#counter {text-align:center;font-size:300%}
#countersection {position:relative; padding-bottom:10%;}
.source {text-decoration:none;color:black;}

/* --------- FOOOTER --------- */
footer a {text-decoration:none; color:white;}

#enhancementslink {text-decoration:underline}

#home p {text-align: center;}
#home {min-height: 500px;}

footer {
    width:105%;
	height:128px;
    background-color:gray;
	text-align:center;
    padding-top:20px;
	color:#ededed;
	text-align:center;
}

/* NAVIGATION LIST - LEFT FOOTER */

.navleftfooter {
	list-style:none;
	display:inline-table;
	position:relative;
    font:14px "Open Sans";
	padding-left:-20px;
}

.navleftfooter li /* List */ {
	float:left;
	margin-left:10px;
	margin-right:10px;
    margin-bottom:30px;
}

.navleftfooter li a /* List Components */ {
	text-decoration:none;
	color:#ededed;
	padding:4px 20px 4px 3px;
	display:block;
    border-bottom:solid #ededed 1px;
    letter-spacing: 2px;   
}

.navleftfooter li a:hover { color:#bfbfbf;border-bottom:solid #bfbfbf 1px; }

/* NAVIGATION LIST - RIGHT FOOTER */

.navrightfooter {
	list-style:none;
	display:inline-table;
	position:relative;
	font:14px "Open Sans";
}

.navrightfooter li /* List */ {
	float:left;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:30px;
}

.navrightfooter li a /* List Components */ {
	text-decoration:none;
    color:#ededed;
	padding:4px 3px 4px 20px;
	display:block;
    border-bottom:solid #ededed 1px;
    letter-spacing: 2px;
}

.navrightfooter li a:hover { color:#bfbfbf;border-bottom:solid #bfbfbf 1px; }

.fling-minislide {overflow:hidden; display: block; }
.fling-minislide img{ position:absolute; animation:fling-minislide 20s infinite; opacity:0; width: 15%; height: auto;}

@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(4){animation-delay:0s;}
.fling-minislide img:nth-child(3){animation-delay:5s;}
.fling-minislide img:nth-child(2){animation-delay:10s;}
.fling-minislide img:nth-child(1){animation-delay:15s;}

#logo {
	display: block; margin: 0 auto; 
	text-align: center;
	width:450px;
	height:150px;
}