/*	
	======================================================================

	stylesheets/public/responsive-design.css

	======================================================================
	Linda Werner & Associates PHP Library Component
	Copyright 2017 Linda Werner & Associates
	======================================================================
*/


/* ************************************************************************
   ************************************************************************

   NAVIGATION & BASIC BODY
   
   ************************************************************************
   ************************************************************************ */

	/* ----------------------------------------------------------------------------------
	   901 - 1100
	   ---------------------------------------------------------------------------------- */

	@media screen and (max-width: 1100px) {

		.body_text {

		    margin: 15px 10% 15px 10%;
		}

		.top_nav_item {

			margin-left: 10px;
		}

			
		.top_nav_item a {

			font-size: 16px !important;
		}
			
		#top_nav_vertical {  
		
			display: none;
			opacity: 0;
		}
	}

	/* ----------------------------------------------------------------------------------
	   651 - 900
	   ---------------------------------------------------------------------------------- */

	@media screen and (max-width: 900px) {
	
		/* body */

		body {  padding-bottom: 30px;  }
		
		.body_text {

		    margin: 12px 8% 12px 8%;
		    padding-left: 20px;
		}
		
		/* header */

		.header {  padding-left: 0;  }

		#top_nav {  display: none;  }
		
		#hamburger {  display: block;  }
		
		#top_nav_vertical {  
		
			display: none;
			opacity: 1.0;
		}

		.top_nav_item {
		
			margin-left: 0;
			font-size: 90%;
			float: none;
			height: 35px;
			margin: 0 0 0 0;
		}

		/* footer */

		#footer {  display: none;  }

		/* jobs */
		
		.job_title {  
		
			float: none;
			margin-bottom: 20px;
		}
		
		.job_info {
		
			float: none;
			width: 100%;
			margin-left: 0;
		}
	}
	
	/* ----------------------------------------------------------------------------------
	   551 - 650
	   ---------------------------------------------------------------------------------- */

	@media screen and (max-width: 650px) {

		.body_text {

		    margin: 10px 7% 10px 7%;
		    padding-left: 15px;
		}
		
		.header {  padding-left: 15px;  }

		.indented_body {
	
			margin-left: 0;
		}

		body {  padding-bottom: 30px;  }
		
		#footer {  display: none;  }
	}
	
	/* ----------------------------------------------------------------------------------
	   <= 550
	   ---------------------------------------------------------------------------------- */
   
	@media screen and (max-width: 550px) {

		.body_text {

		    margin: 10px 5% 10px 5%;
		    padding-left: 12px;
		}
		
		.header {  padding-left: 12px;  }
		
		#socialMediaIconFacebook {
		
			top: 25px;
			right: 112px;
		}
		
		#socialMediaIconLinkedIn {
		
			top: 25px;
			right: 76px;
		}

		body {  padding-bottom: 30px;  }
		
		#footer {  display: none;  }
	}


/* ************************************************************************
   ************************************************************************

   TIMESHEETS
   
   ************************************************************************
   ************************************************************************ */

	/* ----------------------------------------------------------------------------------
	   721 - 1125 : stack task info and data divs
	   ---------------------------------------------------------------------------------- */

	@media screen and (min-width: 721px) and (max-width: 1125px) {

		.timesheet_assignment {

			position: relative;
			height: auto;
		}

		.timesheet_task {

			position: relative;
			text-align: left;
			height: auto;
			top: 0;
			margin-bottom: 10px;
		}

		.timesheet_data {
	
			position: relative;
			float: none;
			height: auto;
			left: 0;
			top: 0;
		}
	}

	/* ----------------------------------------------------------------------------------
	   <= 720 : vertical weeks
	   ---------------------------------------------------------------------------------- */

	@media screen and (max-width: 720px) {

		.timesheet_assignment {

			position: relative;
			height: auto;
			margin: 0 auto;
			width: 300px;
		}

		.timesheet_task {

			position: relative;
			text-align: center;
			height: auto;
			top: 0;
			margin-bottom: 10px;
		}

		.timesheet_data {
	
			position: relative;
			margin: 0 auto;
			float: none;
			height: 550px;
			width: 250px;
			left: 0;
			top: 0;
		}

		/* days of the week */
		
		.timesheet_days_div {

			position: absolute;
			top: 20px;
			left: 0;
			width: 60px;
			height: 492px;
		}

		.timesheet_day {

			float: none;
			margin-right: none;
			height: 67px;
		}

		/* hours */
		
		.timesheet_hours_div {

			position: absolute;
			top: 0;
			left: 60px;
			width: 60px;
			height: 492px;
		}
		
		.timesheet_hours_div_lower {
		
			left: 132px;
		}

		.timesheet_hours {

			margin-right: 0;
		}
		
		/* hours */
		
		.timesheet_hours_total {
		
			top: 0;
		}
		
		/* text box widths */

		.text_width_10 {  width: 50%;  }
		.text_width_20 {  width: 55%;  }
		.text_width_30 {  width: 60%;  }
		.text_width_40 {  width: 65%;  }
		.text_width_50 {  width: 70%;  }
		.text_width_60 {  width: 75%;  }
		.text_width_70 {  width: 80%;  }
		.text_width_80 {  width: 85%;  }
		.text_width_90 {  width: 90%;  }

	}