@import url('mobileStyles.css');
/* single column mobile device CSS */

/*  NOTE: This style sheet creates a three-column layout with sticky footer that is included as a sample layout in the Boilerplate master pages. Not required if the template is not being used.
Copyright 2011 SharePoint Experts, Inc. and Heather Solomon. Distributed to class students for reference and educational purposes. Code may be used as long as this copyright message stays intact.  */



/* LAYOUT  
 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

	/* Required to force footer to bottom of page */
		html {
			height: 100%;
		}	
		body {
			height:100%;
			width:100%;
			overflow: inherit;
		}
		form {zoom:1;
		}
	/* Wrapper around most page elements */
		#AboveFooter {
			min-height: 100%; /* Required to force footer to bottom of page */
			height: auto !important; /* Required to force footer to bottom of page */
			height: 100%; /* Required to force footer to bottom of page */
			margin: 0 auto; /* The bottom margin is a negative value equal to the footer's height */
			z-index: 2; /* Sets content above side column extensions and Footer */
			position: relative; /* Required for stack order (z-index) */
		}
		
	/* Stack Areas above 'needmeforfooter' DIV element in stacking order */
		#Area1, #Area2, #Area3, #Area4, #Area5 {
			z-index: 1;
			position: relative; /* Required for stack order (z-index) */
		}
		#Area1 {
			min-height:80px;zoom:1;z-index:2;margin-left:0px !important;
		}
	/* Setup Area 3 as a center column */
		#Area3 {
			width: 100%;
			display:block;
			float: none;
			overflow: auto;
			min-height:200px;
			height:auto;
			zoom:1;
			z-index:3;
			background-color:white;
			margin-left:0px !important;
			/*margin-bottom:3em;  Height of sticky footer */
		}
	
	/* Create space in the center column for the sidebars 
	UPDATE ME!
	Use of the universal selector (*) is not ideal. Replace the * with the first child element in Area3 */
		#Area3 > #s4-workspace {
			padding: 0; margin:0 0 0 0;/* Adjust according to left and right sidebar widths and add padding as needed */
		}
	
		 
	 	#Area4 {
	 /*	display:none; */
	 		clear:both;
			width: 100%;
			float: left;
		/*	overflow: auto; */
			padding-bottom: 0px;
			z-index:5;
			margin-left:0px !important;
	 	}
	 		

	 	#Area5 {
	  	display:none; /*area 5 is where the ribbon control is. Activate if page edits are necessary */
	 	/*	clear:both;
			width: 100%;
			float: left;
			margin-left:0px;
			overflow: visible;
			z-index:5;
			padding-bottom: 30px; /* Height of sticky footer */
	 	} 
	
	/* Footer */
		#Footer  {
			/*height: 60px;  Height of footer */
			position: relative;  /* Required for stack order (z-index) */
			z-index: 2;  /* Sets footer same as content. To set it above content (Area 3) and side column extensions, set z-index to 2 */
			 /*margin: -60px auto 0; The top margin is a negative value equal to the footer's height */
			margin: 0px auto;
			clear: both; /* Required to push footer to bottom of screen when scrolling content is present */
			padding:0em;
			text-align:center;
		}

	
	/* -- Faux equal height sidebar columns -- NOT USED IN MOBILE SITE */
		/* Two DIVs are included in the master page that are set at the bottom of the file. When used they create the look of full height columns. 
		This is only needed if you 1) need full height columns; and 2) one or both of your sidebars have background properties such as an image or color. */
	
		/* Sidebar extensions */
		.leftextension,
		.rightextension {
			position:absolute;
			bottom:0;
			width: 0px;/*250px;  Set this value to the same as sidebar width */
			height:100%;
			z-index:0; /* Sets extensions under other page components */
		}
		
		/* Left sidebar specific placement and background formatting */
		.leftextension {
			background:#FB8335; /* Set background properties to match the left sidebar */
			left: 0;
		}
		
		/* Right sidebar specific placement and background formatting */
		.rightextension {
			background:#F47E7D; /* Set background properties to match the right sidebar */
			right: 0;
		}
		

	/* -- Convert to fixed width layout -- */
		/* In the master page: add the 'fixedWidth' class to the BODY element to convert to a fixed width design. Also must add the 's4-nosetwidth' class to the '#s4-workspace' DIV element. */
		
		/* Set width for page */
		.fixedWidth #AboveFooter,
		.fixedWidth #Footer  {
			 width:100%; /*Fixed width value 480px */
		}
				
		/* Reset min-width for SharePoint content area */
		body.fixedWidth #s4-bodyContainer {
			min-width: 300px; /* Fixed width value (330px) minus gutter width value (5px each side) */
		}
		
		/* Reset width for SharePoint Ribbon - updating properties that are set in "ribbon_docked_showWhenNeeded.css" CSS file */
		body #s4-ribbonrow {
			width: 100%;display:none; /* Fixed width value */
		}
		body #s4-bodyContainer {
			margin-bottom: 0px;
		}
		/* Reset placement of equal height sidebar columns. This is only needed if you are using the faux equal height sidebar columns. */
	/* not used for mobile 
	/* .fixedWidth .leftextension {
	/* 		left: 50%;
	/* 		margin-left: -480px; /* Half of fixed width value */
	/* 	} 
	/* 	.fixedWidth .rightextension {
	/* 		right: 50%;
	/* 		margin-right: -480px; /* Half of fixed width value */
	/* 	} */

		

/* DIALOG BOX  
 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
 
	/* Hide page components in dialog box */
		.ms-dialog #Area1,
		.ms-dialog #Area2,
		.ms-dialog #Area4,
		.ms-dialog #Area5,
		.ms-dialog #Footer,
		.ms-dialog .needmeforfooter,
		.ms-dialog .leftextension,
		.ms-dialog .rightextension
		{display:none;}
		
		
		
		
/* TEMPORARY - Adds visual properties to containers for testing and initial viewing.  Delete classes from BODY and these styles during or when development is complete. 
 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */
 
 	/* Sets heights for areas while nothing is there - Depends on presence of 'setMyHeights' class on the BODY tag.  
 	Remove once SharePoint components have been put in place. */
 		body.setMyHeights #Area1,
 		body.setMyHeights #Area5{
			height: 70px;
		}
		body.setMyHeights #Area2 {
		height:45px;
		}
		
		body.setMyHeights #Area3,
		body.setMyHeights #Area4
		 {
			height: 300px;
		}

 	/* Colors areas - Depends on presence of 'colorMyArea' class on the BODY tag. */
		body.colorMyAreas #Area1 {
			/*background: #81C0C5; */
			background: #B5D045;  
		/*	background-color: transparent;*/
		}		
		body.colorMyAreas #Area2 {
			background: #B5D045; 
		/*	background-color:transparent;*/
		}		
		body.colorMyAreas #Area3 {
		/*	background: #E0C7A8;*/
			background:white; 
		}		
		body.colorMyAreas #Area4 {
		/*	background: #FB8335; */
			background:#ccc;
		}		
		body.colorMyAreas #Area5 {
			background: #F47E7D;
		}		
		body.colorMyAreas #Footer {
		/*	background: #BFF08E; */
			background:#ccc;
		}

	
/*Ribbon positioning*/
body #s4-ribbonrow{ position: relative;top:0px;z-index:1;width: 100%;}

/* Set the ribbon popups */
#s4-ribbonrow .ms-MenuUIPopupBody, #s4-ribbonrow .ms-popoutMenu, .ms-cui-menu[id ^= "Ribbon."], .ms-cui-tooltip {
position: relative !important;}


/* 
SharePoint Experts, Inc. 
sharepointexperience.com
*/