/* 1001.css (c) Petena AB 1994-2013, http://www.petena.se, http://www.praktit.se

  SvalovsMontessori.Se
  
  Style changes when screen width is less than 800px
  -three column layout is changed to one column, with left and right columns after middle, as two columns

DEVELOPMENT HISTORY: ******************************************************************************

*/

/** BASIC LAYOUT ADJUSTMENTS *************************************************************************************/
#page-container {min-width: inherit; max-width: inherit;}
#footer {clear: both; font-size: 0.9em;}

#outer-column-container
{
	border-right: solid 0px #fff;	/* right column's width and background
					   color */
}
#inner-column-container
{
	width: 100%;		/* force this element to take the full width
				   between the left and right columns. this is
				   especially important as children of this
				   element will have width:100%; set, and how
				   that 100% value is interpreted depends on
				   the width of it's parent (this element). */
}
#source-order-container
{
	float: left;		/* float left so the right column, which is
				   outside this element, has a place to go. */
	width: 100%;		/* force this to go as wide as possible */
	margin-right: -1px;	/* make room for the right-column's overlap. */
}
#middle-column
{
	float: right;		/* middle column goes right of the left column
				   since the two share the same parent 
				   element */
	width: 100%;		/* make the middle column as wide as possible
				   for a fluid layout. this is not possible
				   if it's parent element, 
				   #source-order-container, wasn't also at
				   100% width */
	margin-left: -1px;	/* make room for the left-column's overflap */
	overflow: hidden; /* hides right overflow if widthmin-max is used */
}
#right-column
{
	float: right;		/* float on the right side of the layout */
	margin-right: 0px;	/* move it further right. the value here should
				   be the same value as the right border width
				   on #outer-column-container, but negative */
	width: 100%;		/* need to set a definite width, should be the
				   same width as the right border width on
				   #outer-column-container */
	margin-left: 1px;	/* overlap the middle column */
}

.clear-columns
{
	clear: both;
}