/*
Team 7
Web Project
CIS 3900: Business Web Design
Fall 2016
*************************************
This site represents Dr. Landeros' consulting business and provides a way
for his visitors to easily access his blog along with current tech news
relevant for his target audience.  This site uses HTML5 and CSS along with
JavaScript for the embedded Twitter feed, an automatic RSS feed from FeedWind,
and a PHP contact form that emails Dr. Landeros when a user makes a submission.
*/
/*Here is the code for the body elements.*/
body {background-image: none;  /*Specifying NO background image*/
		background-color: #c9a66b;  /*Specifying color for body background.*/
		color: #FFF;  /*Specifying black color for body text.*/
		font-family: Verdana, Arial, sans-serif;  /*Specifying a sans-serif font type here (if Verdana and Arial can not be found.*/
		 }
/*Here is the code for the header element.*/
header {
		height: 150px;
		text-align: center;
		background-color: #AD7F30;
		border-radius: 10px;
		box-shadow: 1px 1px 3px #666;
		}
/*Code for the Header1 element in the header tag*/
header h1{
		vertical-align: center;  /*Center within the header*/
		text-align: center;  /*Center the text*/
		line-height: 275%;  /*Increase the line height*/
		font-size: 400%;  /*Make font 4x larger than normal*/
		text-indent: 0px;
		font-family: 'Reem Kufi', sans-serif;  /*Setting to GOOGLE font used as referenced in HTML pages, or sans-serif if not found.*/
		}
/*Specifying style for the navigation elements (unordered list)*/
#nav ul{ 
		float: left;  /*Specifying a left float*/
		width: 10%;  /*Scale width according to screen size*/
		padding: 10px;  /*10 pixel padding*/
		font-weight: bold;  /*Make the font bold.*/
		font-size: 0.9em;  /*Make the font size a little smaller than standard.*/
		word-spacing: 0.025em;  /*Make word spacing smaller standard.*/
		text-align: center;  /*Center the text.*/
		list-style-type: none; /*Remove the bullets from the list*/
		}
/*Nav Link style*/
#nav a  {text-decoration: none;  /*Remove the underline*/
			color: #000;  /*Black text color*/
			}
/*When hovering over list items in nav, show lighter color*/
#nav li:hover {
			background-color: #EEB111;  /*Change the background color.*/
			}
/*For nav list items, define general style settings*/
#nav li {display: block;  /*Show elements in a block style*/
			margin: 1em 0;  /*Give some spacing between list items*/
			border-radius: 15px;  /*Round the corners*/
	    	background-color: #ffdf71;  /*Defining the color*/
			padding-top: 10px;  /*10 px padding on top and bottom*/
			padding-bottom: 10px;
			box-shadow: 1px 1px 3px #666;
			}
/*Defining the style for all Header1 elements.*/
 h1 { 
		color: #000;  /*Full black text color.*/
		line-height: 200%;  /*Make the line take up 2x the space.*/
		font-family: Georgia, "Times New Roman", serif;  /*Use serif fonts here (if Georgia or TNR can not be found.*/
		text-indent: 2em;  /*Indent the text by 2 em.*/
		text-shadow: 3px 3px 5px #666;  /*Apply shadow to the H1 text and make it grey.*/
		} 
/*Defining the style for all Header2 elements.*/
h2 { 	
		background-color: none;  /*NO specified background color.*/
	  	color: #000;  /*Black text color.*/
	  	font-family: 'PT Sans', sans-serif;
	  	text-align: left;  /*Center the text.*/
	  	
		}
/*Defining the style for the Header3 elements.*/
h3 { 
		background-color: none;  /*Defferent green color*/
		color: #000;  /*Black text color.*/
		text-align: left;  /*Left-align the text.*/		
		font-family: 'Reem Kufi', sans-serif;  /*Use sans-serif fonts for the H3 elements if Reem Kufi from Google is not available.*/
		border-radius: 10px ;  /*10 px border radius*/
		border: 3px;  /*3px thick border*/
		}
/*Defining the style for the paragraph elements.*/
p { 
		font-size: .95em;    /*Make font size slightly smaller than normal.*/
	 	text-indent: 2.5em;  /*Indent the text a bit.*/
		}
/*Define style for generic unordered list elements.*/
ul { 	
		font-weight: bold;  /*Make the text bold.*/
		}
/*Defining style for the "wrapper"*/
#wrapper{
		width: auto;    /*Set the width according to current page size*/
		padding: 10px;  /*10 px padding*/
		overflow: auto;
		}
/*Defining style for the RSS content provided by feedwind*/		
#rsscontent{
		margin-right: auto;  /*Center the element in the page*/
		margin-left: auto;
		width: 75%;  		   /*Take up 75% of the space*/
		}
/*Define style for the Twitter feed*/
#twitterfeed{
		text-align: center;	/*Center the feed*/
		}
/*Style for the MAIN part of the HTML pages*/		
main { 
		margin-left: auto;  	/*Set margin according to current page size*/
		margin-right: auto;
		border-width: 5px;  	/*5px border*/
		width: 95%;  	/*85% dynamic width for responsive design*/
      padding: 15px; 	/*15 px padding*/
      background-color: #ebdcb2;  /*Separating main color from body*/
      color: #000;  	/*Black font color*/
      border-radius: 5px;
      box-shadow: 3px 3px 5px #666;
		}
/*Display the contact form area in an inline-block style*/
#contact-area{
		display: inline-block;
		}
/*Give the form element some padding*/
form{
		padding: 5px;			
		}
/*Define style for the list items on Consulting page*/		
#consulting li{
		padding: 10px;  		 /*10 px padding*/
		font-weight: normal;  /*Un-bold the font*/
		font-size: .95em;  	 /*Match font size to the <p> element*/
		}	
/*Define style for the list items on About page (Education area)*/		
#experience li{
		padding: 3px;  		 /*Little bit of padding*/
		font-weight: normal;  /*Un-bold the font*/
		font-size: .95em;		 /*Match font size to the <p> element*/
		}
/*Define style for the list items on About page (faculty positions)*/
#facultypostions li{
		padding: 3px;  		/*Little bit of padding*/
		font-weight: normal;	/*Un-bold the font*/
		font-size: .95em;		/*Match font size to the <p> element*/
		}
/*Style for third column*/		
aside {
		padding-top: 10px;  /*10px padding on top and left of 3rd column*/
		padding-left: 10px;;
		float:right;  /*Float to the right*/
		width: 14%;	/*Width set to 14% of the page*/
		background-color: none;	/*Don't set specific aside background color*/
		}
/*Formatting for the image in the third column*/		
aside img{
		vertical-align: middle;  /*Set image in the middle of the aside*/
		width: 90%;  /*Scale to 90%*/
		height: 90%; /*Scale to 90%*/
		}
/*Footer text color should be black*/		
footer{
		color: #000;	/*Black color*/	
		}
/*Adjusting size of WMU logo in aside element*/		
#wmulogo{
		
		height: 50%;
		margin-left: auto;
		margin-right: auto;
		
		}
#landeros{
		margin-left: auto;
		margin-right: auto;
		}
		
/*BEGIN MOBILE CSS CODE */
		/*At 768 pixel width, change the following elements...*/
@media screen and (max-width: 768px){
/*Changing the header*/
header{
	height: auto;
	background-image: none;
	border-radius: 10px;  /*Maintain radius*/
	text-align: center;  /*Keep the text centered*/
	width: 95%;  /*Take up almost all of the area*/
	font-size: 1em;  /*Standard font size*/
	padding: 10px;  /*10px padding in the header*/
	vertical-align: center;
	}
/*Remove third column*/
aside{
	display: none;  /*DO NOT SHOW*/
   }
/*Change the nav element to display at the top below the header*/
#nav {
	position: relative;  /*Relative positioning*/
	overflow: hidden;  /*Overflow any float*/
	padding: 0;  /*No padding needed*/
	margin: 0;  /*No margin needed*/
	display: inline-block;  /*Display in inline-block style*/
	width: 100%;  /*Span across entire display*/
	float: none;  /*Remove float*/
	vertical-align: middle; 
	}
#nav ul{
	float:none;  /*Remove float from unordered list in Nav*/
	overflow: auto;  /*Overflow any existing floats*/
	width: 100%;  /*Take up full screen width*/
	text-align: center;  /*Center the text*/
	}
#nav li{
	width: 98%;  /*Set the list items to take up 98% width.*/
	}