/* Basics:  960px width page with a 5 column grid and a gutter between columns */
/* The following is for enlightened web browsers. There is separate sheet just for Stupid IE6(tm) */
/* When IE7 goes away, this should allow for an easy transition to CSS tables */

/* There are 5 column types:  
      1) sidebar-left
         - almost always present and used for navigation
         - can have gray or white background depending upon a body tag
         - semantic ordering always puts it at the end because we are using floats
      2) main-content
         - if possible, where the primary content of the page is placed
      2) sidebar-right
	     - also used for primary content, often news or other dynamic content
	     - because it is farthest right and we are using floats, this content will be first in semantic ordering
    4-5) inner-column-left and inner-column-right
         - so far, these are only used for link lists on the home page, but other home pages or uses may follow
*/


body #page-wrapper { background: url(../images/page-wrapper-bg.jpg) top left repeat-y; }
body.columns-5 #page-wrapper,body.columns-32 #page-wrapper  { background: url(../images/columns-5-bg.jpg) top left repeat-y; }

#sidebar-left { margin: 0; padding: 8px; }
#main-content { margin: 0; padding: 8px 12px; }
#sidebar-right { margin: 0; padding: 8px; }

/***** 4-column layout (1-1-1-2) (Example: ITS home page) */
.columns-1112 #sidebar-left { width: 176px; }
.columns-1112 #inner-wrapper-1 { float: right; width: 768px; }
	.columns-1112 #inner-wrapper-2 { width: 384px; }
		.columns-1112 #inner-column-left { margin: 12px 0 0 0; padding: 0 8px; width: 176px; }
		.columns-1112 #inner-column-right { float:right; margin: 12px 0 0 0; padding: 0 8px; width: 176px; }
	.columns-1112 #sidebar-right { float: right; width: 368px; }
		
/***** 3-column layout (1-2-2) (Example: ICON login page) */
.columns-122 #sidebar-left { width: 176px; }
.columns-122 #inner-wrapper-1 { float: right; width: 768px; }
	.columns-122 #main-content { float: left; width: 360px; }
	.columns-122 #sidebar-right { float: right; width: 368px; }
	
/***** 3-column layout (1-3-1) */
.columns-131 #sidebar-left { width: 176px; }
.columns-131 #inner-wrapper-1 { float: right; width: 768px; }
	.columns-131 #main-content { width: 552px; }
	.columns-131 #sidebar-right { float: right; width: 176px; }

/***** 2-column layout (1-4) (Example: ITS service pages) */
.columns-14 #sidebar-left { width: 176px; }
.columns-14 #main-content { float: right; width: 744px; }

/***** 2-column layout (3-2) (internally fluid) (Example: Standard ITS login page) 
.columns-32 #main-content { width: 552px; }
.columns-32 #sidebar-right { float: right; width: 368px; }  */

/***** 2-column, internally fluid layout (3-2 to 4-1) (Example: Standard ITS login page) */
.columns-32 #main-content,.columns-41 #main-content { overflow: hidden; }
.columns-32 #sidebar-right,.columns-41 #sidebar-right { float: right; min-width: 176px; max-width: 368px; }


/***** 1-column layout (5) (Example: print layouts) */
.columns-5 #main-content { width: 936px; }