@charset "UTF-8";
/* CSS Document */

body {
	color: #000;
	margin: 5em 1em 2em;
	padding: 0;
	margin-right: 5px;
	margin-left: 7px;
}

/*We set a min-width on the body element. This ensures that if the window is made narrower your layout will
remain flexible until it reaches a total width of 970px, after which the window will spawn a horizontal scrollbar. This prevents the center flexible column from getting so narrow that its contents become hard to read. You can change this value to suit your own needs.*/

#wrapper {
	width: 95%;
	display:table;
	border-spacing: 0;
	border-collapse: collapse;
}

/*This is your main layout container. Since this is a flexible layout, we set width to 100%. The display: table declaration makes the wrapper act like a table so that elements inside of it can be made to act like table rows or columns.

The border-spacing: 0 declaration works like the cellspacing attribute on a table tag. Since it's 0 (zero) we really don't need to declare it but it's nice to have in case you ever want to add spacing at a later date.

The border-collapse: collapse declaration instructs the browser to draw any borders you set on table columns or rows with no space between them and to collapse adjacent borders so that they appear as a single border.

If you wanted space between the borders of your columns and separate borders for each, you would set the border-collapse value to separate and you would set border-spacing to a value greater than zero.*/

#firefox-bug-fix {
display:table-row;
}

/*When you declare an element to display:table and then set a child (nested) element inside it to display: table-cell, the specificiation calls for browsers to imply that there is a table-row element surrounding the table-cell elements. All modern browsers get this correct—except for Firefox. While Firefox will behave on simple pages, more complex pages will be problematic. This rule, assigned to an inner wrapper will ensure that your page always displays correctly in Firefox.*/

.columns {
display: table-cell;
border: 1px solid #000;
vertical-align: top;
}

/* The .columns class is assigned to the center DIV and sidebar DIVs in our layout. The display: table-cell declaration instructs browsers to display the .columns DIVs as table cells—or <td> elements.

We set a 1px border around each column and set vertical-align: top (same as we would in a structural table) to ensure that each column's content begins at its column's top.

Note: The table-row property (similar to the <tr> element in a structural table) is implied by the browser. You can use the table-row property to create more complex layouts, but that's beyond the scope of this tutorial. */

#c1 {
	color: #666666;
	padding: 20px;
	width: 180px;
	min-width: 180px;
}

/*#c1 is assigned as an ID to the first column, allowing us to set special properties for the first column only. We set a background-color, a text color, padding, a width and a min-width. The min-width value should match the width and is necessary to ensure that if any of your columns contain content that is too wide, this element will maintain its set width and not grow any smaller. You can change the width to any value you want, so long as it's in pixels.*/

#c2 {
width: auto;
padding: 20px;
}

/*This ID is assigned to the center column. This is our flexible column so width is set to auto. We also assign padding.*/

#c3 {
	width: 180px;
	min-width: 180px;
	padding: 20px;
	background-color: #FFFFCC;
}

/*#c3 is assigned as an ID to the third column, allowing us to set special properties for this column only. We set a background-color, a text color, padding, a width and a min-width. The min-width value should match the width and is necessary to ensure that if any of your columns contain content that is too wide, this element will maintain its set width and not grow any smaller. You can change the width to any value you want, so long as it's in pixels.*/