/*	Tim Andrew's Portoliio - www.TimAndrew.ca
	-----------------------------------------
	Filename:	styles.css
	Author: 	Tim Andrew
*/


/* --------------- --------------- --------------- --------------- STATIC BACKGROUNDS --------------- --------------- --------------- --------------- */
	/*used in index.php*/

		
/* --------------- --------------- --------------- --------------- BODY SETTINGS --------------- --------------- --------------- --------------- */
	/*used in all*/


body
	{

	margin:					0px;

	}

		/* BODY CLASS FOR EACH PAGE */
	.index
		{

		background:				black;
		height:					100%;
		width:					100%;

		margin:					0px;

		}

	.home
		{

		background: 				#cecece;

		}

	.skills
		{

		background: 				#272727;

		}
		
	.goals
		{

		background: 				#FFFFE0;

		}

	.resume
		{

		background: 				#002664;

		}

	.contact
		{

		background:				#ffffff;

		}

/* --------------- --------------- --------------- --------------- DEFAULT FONT SETTINGS --------------- --------------- --------------- --------------- */

	/* H1 TO FOR LARGE NAME */
h1	
	{

	color:					rgba(255,255,255,1);
	font-size:				70px;

	text-transform:				uppercase;
	text-shadow:				5px 5px 6px black;

	letter-spacing: 			0.5em;

	}

	/* H2 FOR SMALL NAME */
h2
	{

	color:					white;
	text-shadow:				4px 4px 5px black;



	}

	/* H3 FOR LARGE TAGLINE */
h3
	{

	color: 					rgba(255,255,255,0.8);
	font-size: 				20px;

	text-shadow:				3px 3px 4px black;
	letter-spacing: 			0.3em;

	}

	/* H4 FOR SMALL TAGLINE */
h4
	{

	color: 					rgba(255,255,255,0.8);
	font-size: 				10px;

	text-shadow:				2px 2px 3px black;
	letter-spacing: 			0.2em;

	}


/* --------------- --------------- --------------- --------------- HEADER PAGE OVERLAY SETTINGS --------------- --------------- --------------- --------------- */
	
	/* MENU BAR BOX */
header
	{

	background:				rgba(0, 0, 0, 0.5);

	width:					100%;
	height:					70px;

	position:				fixed;

	padding:				10px;
        
    z-index:                 +2;

	}

		/* AVATAR SETTINGS */
	header .avatar
		{

		width:					70px;
		height:					70px;

		left:					5%;
		position:				fixed;

		border-radius: 				50%;
		border-style: 				solid;
		border-width:				2px;
		border-color:				white;

		opacity:				0.9;
		transition:				all 0.3s;

		}

		/* AVATAR HOVER SETTINGS */
	header .avatar:hover
		{

		border-color:				black;

		opacity:				1;

		}
		
		/* HEADER H2 SETTINGS */
	header h2
		{

		width:					470px;

		color:					white;
		text-transform:				uppercase;
		text-shadow:				2px 2px 6px black;
		text-align:				center;
		font-size: 				3em;
		line-height: 				30px;

		margin-left:				20%;
		margin-top:				6px;

		}

			/* SPAN SETTINGS */
		header h2 span
			{
			
			color: 					rgba(255,255,255,0.8);
			font-size: 				10px;
			text-shadow:				2px 2px 6px black;
			letter-spacing: 			0.2em;

			margin:					0px;

			padding:				0px;

			}
		
		/* HEADER NAV SETTINGS */
	header nav
		{

		top:					20px;
		right:					5%;
		position:				fixed;

		text-align:				center;
		text-transform:				uppercase;
		font-size: 				12px;

		}

			/* NAV UL SETTINGS */
		header nav ul
			{

			display:				inline;

			right:					0px;

			text-shadow:				2px 2px 6px black;

			}
			
				/* NAV UL LINK SETTINGS */			
			header nav ul a
				{

				color:					white;

				transition:				all 0.3s;

				}
			
				/* NAV UL LINK HOVER SETTINGS */
			header nav ul a:hover
				{

				color:					black;

				}

					/* NAV LIST ITEM SETTINGS */
				header nav ul li
					{

					background:				rgba(0, 0, 0, 0.5);

					display:				inline-block;
					position:				relative;

					text-shadow:				2px 2px 6px white;

					border-radius:				20px 20px 20px 20px;
					border-style: 				solid;
					border-width:				2px;
					border-color:				white;

					padding:				15px 20px;

					transition:				all 0.3s;

					}

					/* NAV LIST ITEM HOVER SETTINGS */
				header nav ul li:hover
					{
					background:				rgba(255, 255, 255, 0.9);

					border-color:				black;

					text-shadow:				2px 2px 6px black;
					}

/* --------------- --------------- --------------- --------------- PAGE CONTENT SETTINGS --------------- --------------- --------------- --------------- */

	/* TITLE OF EACH PAGE ADDED TO HEADER */
.pageTitle
	{
	
	background:				rgba(0, 0, 0, 0.5);
	border-radius:				0px 0px 20px 20px;
	
	height:					30px;
	
	text-transform:				uppercase;
	left:					85%;
	top:					90px;
	position:				fixed;
	
	padding-top:				0px;
	padding-left:				20px;
	padding-right:				20px;
    z-index:                    +2;
	
	}
	
		/* SPECIFIC H2 SETTINGS FOR PAGE TITLE */
	.pageTitle h2
		{
		
		padding:0px;
		margin:0px;
		
		}

	/* PAGETEXT SETTINGS (FOR SOME PAGES) */
.pageText
	{
	
	left:					20%;
	top:					150px;
	position:				fixed;
	
	}

/* --------------- --------------- --------------- --------------- PAGE SPECIFIC SETTINGS --------------- --------------- --------------- --------------- */
	




	/* --------------- --------------- --------------- --------------- FOOTER OVERLAY SETTINGS --------------- --------------- --------------- --------------- */
	/* FOOTER SETTINGS FOR THE NON-INDEX PAGES*/
footer
	{

		/*dark grey transparent panel*/
	background:				rgba(0, 0, 0, 0.5);

		/*25px high*/
	height:					25px;

		/*with a border radius*/
	border-radius:				20px 0px 0px 0px;

		/*fixed at the bottom right*/
	right:					0px;
	bottom:					0px;
	position:				fixed;

		/*centered*/
	text-align: 				center;

		/*with internal padding*/
	padding-top:				5px;
	padding-left:				10px;
	padding-bottom:				5px;

	}


	/* SOCIAL ICONS SETTINGS */
.social a
	{
		/*opaque with a .3s transition time*/
	opacity: 				0.6;
	transition:				all 0.3s;

	}

		/* SOCIAL ICONS HOVER SETTINGS - EACH NEED TO BE TARGETED*/
	.linkedin:hover
		{
			/*sets opacity to 1 (none)*/
		opacity: 				1;

		}

	.facebook:hover
		{

		opacity: 				1;

		}

	.github:hover
		{

		opacity: 				1;

		}

	.youtube:hover
		{

		opacity: 				1;

		}

	.email:hover
		{

		opacity: 				1;

		}