/*---------------------------------------------
=============== positioning.css ===============

version:      1.0
author:       Doug Ward
email:        doug_ward@mac.com

comments:     Positioning rules for all layouts.

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

/*   ================================
 *   ====== Global positioning ======
 *   ================================
 *   The 'masthead', 'globalNav', 'container', and 'footer' divs
 *   are part of all layouts, and their positioning is defined first
 */
div#masthead {
	/* Set positioning to relative so that contained elements are positined relative to this div, rather than to the vieport. */
		 position: relative;
		 padding: 0 3px 0 3px;
		 border: 1px solid gray;
		 border-bottom: none;
	/* Declare the minimum and maximum widths of the container. */
		 max-width: 994px;
		 min-width: 744px;
	/* Center the div within the viewport. */
		 margin: auto;
}

div#globalNav {
	/* Set positioning to relative so that contained elements are positined relative to this div, rather than to the vieport. */
		 position: relative;
		 padding: 0 3px 0 3px;
		 border: 1px solid  gray;
		 border-bottom: none;
	/* Declare the minimum and maximum widths of the container. */
		 max-width: 994px;
		 min-width: 744px;
	/* Center the div within the viewport. */
		 margin: auto;
}

div#container {
	/* Give the container div a relative position, so that absolutely positioned columns can positioned relative to this div. */
		 position: relative;
		 border: 1px solid gray;
		 border-top: 1px solid white;
	/* Declare the minimum and maximum widths of the container. */
		 max-width: 1000px;
		 min-width: 750px;
	/* Adjust the min-height of this div to always be longer than the length of the secondary columns. This will prevent
	 * those columns from extending beyond this div. */
		 min-height: 460px;
	/* Center the div within the viewport. */
		 margin: auto;
}

div#footer {
		 padding: 3px;
		 border: 1px solid gray;
		 border-top: none;
		 text-align: center;
		 max-width: 994px;
		 min-width: 744px;
		 margin: auto;
}

/*   ================================
 *   ======== 1 column layout =======
 *   ================================
 */
#oneColLayout div#mainContent {
	/* Set the rigth and left margins equal, respectively, to widhts of the 'leftColumn' and 'rightColumn' divs.*/
		 margin: 3px 3px 3px 3px;
		 border: 1px solid gray;
		 min-height: 452px;
}

#oneColLayout div#leftColumn {
	/* Remove the third column from the page flow. */
		 display: none;
}

#oneColLayout div#rightColumn {
	/* Remove the third column from the page flow. */
		 display: none;
}

/*   ================================
 *   ======== 2 column layout =======
 *   ================================
 */
#twoColLayout div#mainContent {
	/* Set the rigth and left margins equal, respectively, to widhts of the 'leftColumn' and 'rightColumn' divs.*/
		 margin: 3px 3px 3px 208px;
		 border: 1px solid gray;
		 min-height: 452px;
}

#twoColLayout div#leftColumn {
	/* Set the position to 'absolute'. This pulls the div from the normal page flow and positions it relative
	 * to the 'container' div. */
		 position: absolute;
	/* 'top' and 'bottom' declarations strectch the div to the height of the containing div. */
		 top: 0;
		 bottom: 0;
	/* Position the div to the far left of the 'container' div. The 'mainContent' div is given a left margin equal to
	 * to the width of this column (plus margins).  */
		 left: 0;
	/* Width plus border plus margin equals 208px. */
		 width: 200px;
		 margin: 3px;
		 border: 1px solid #BDA63F;
}

#twoColLayout div#rightColumn {
	/* Remove the third column from the page flow. */
		 display: none;
}

/*   ================================
 *   ======== 3 column layout =======
 *   ================================
 */
#threeColLayout div#mainContent {
	/* Set the rigth and left margins equal, respectively, to widhts of the 'leftColumn' and 'rightColumn' divs.*/
		 margin: 3px 40% 3px 21%;
		 border: none;
		 min-height: 452px;
}

#threeColLayout div#leftColumn {
	/* Set the position to 'absolute'. This pulls the div from the normal page flow and positions it relative
	 * to the 'container' div. */
		 position: absolute;
	/* 'top' and 'bottom' declarations strectch the div to the height of the containing div. */
		 top: 0;
		 bottom: 0;
	/* Position the div to the far left of the 'container' div. The 'mainContent' div is given a left margin equal to
	 * to the width of this column (plus margins).  */
		 left: 0;
	/* Width plus border plus margin equals 208px. */
		 width: 20%;
		 margin: 3px;
		 border: 1px solid #B4B4B4;
}

#threeColLayout div#rightColumn {
	/* Set the position to 'absolute'. This enables us to pull this div from the normal page flow and position it relative
	 * to the 'container' div. */
		 position: absolute;
	/* 'top' and 'bottom' declarations strectch the div to the height of the containing div. */
		 top: 0;
		 bottom: 0;
	/* Position the div to the far right of the 'container' div. The 'mainContent' div is given a right margin equal to
	 * to the width of this column (plus margins).  */
		 right: 0;
	/* Width plus border plus margin equals 208px. */
		 width: 40%;
		 margin: 3px;
		 border: none;
		 border-left: 1px solid #B4B4B4;
}