﻿/* *************************************************************** */
/* STYLE SHEET FOR PAGE WITH 2 COLUMNS
	#SIDEBAR1 is left 1/4 of #CONTENT [230px (width + padding)] - see SIDEBAR.CSS for styles
	#MAINCONTENT is right 3/4 of #CONTENT (730px) 
/* *************************************************************** */
/* --------------------------------------------------------------- */
/* #MAINCONTENT
/* --------------------------------------------------------------- */
#maincontent {	
	float: left;
	padding-left: 20px;
	width: 730px;
	}
	
/* --------------------------------------------------------------- */
/*	#MAINCONTENT UL margin fixes
	can be applied to DIV surrounding the UL or to each UL LI
/* --------------------------------------------------------------- */
.margin-left-536 {
	margin-left: 536px;/*fixes bullet indents on text with float left image on beijing otr-research.htm*/
}

/* --------------------------------------------------------------- */
/* .ROW
	div to contain individual column divs for #MAINCONTENT
	in the case of this style sheet .ROW fills 730px
	used for organization purpose
	generic styles located in INSTITUTE.CSS, including .ROW and .ROW.TOPRULE
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/* INDIVIDUAL COLUMN CLASSES SPECIFIC TO PAGE WITH TWO COLUMNS
	in each case, margin-right: 0px; allows last column to fit flush with right of page
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/* .ROW WITH 2 COLUMNS
/* --------------------------------------------------------------- */
/* 2 equal columns */
/* see also .WIDTH-PARTIAL styles in COL-01.CSS */
.two-col-1, 
.two-col-2 {
	width: 350px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.two-col-2 {
	margin-right: 0px;
	}
/* 2 unequal columns (narrow left, wide right, or wide right with form) */
.two-col-1narrow, 
.two-col-2wide, 
.two-col-2wide-formbox {/*used in contact-info-w-form page*/
	width: 224px;
	display: inline;
	float: left;
	margin-right: 29px;
	}
.two-col-2wide {
	width: 477px;
	margin-right: 0px;
	}
.two-col-2wide-formbox {
	width: 457px;/*this allows for padding in formbox*//*457 plus padding left and right*/
	margin-right: 0px;
	background-color: #f7f8f9;
	padding: 10px;
	text-align: center;
	margin-top: 8px;
	}
	
/*Begin for new contact function*/
.two-col-2wide-formbox h1.response {
	font-size: 180%;
	font-style:italic; 
	}
.two-col-2wide-formbox p.response {
	text-align: left;
	font-weight:bolder;/*101613 adding here instead of using STRONG TAG in page code*//*bold did not work*/
	}
/*End for new contact function*/
.two-col-2wide-formbox table {
	}
.two-col-2wide-formbox th {
	font-weight: normal;
	text-align: right;
	vertical-align: top;
	padding-right: 10px;
	padding-top: 2px;
	}	
.two-col-2wide-formbox td {
	vertical-align: top;
	text-align: left;
	padding-bottom: 4px;
	}

/* --------------------------------------------------------------- */
/* .ROW WITH 3 COLUMNS
/* --------------------------------------------------------------- */	
/* 3 equal columns */
/* see also .WIDTH-PARTIAL styles in COL-01.CSS */
.three-col-1, 
.three-col-2, 
.three-col-3 {
	width: 224px;
	display: inline;
	float: left;
	margin-right: 29px;
	}
.three-col-3 {
	margin-right: 0px;
	}
	
/* 3 combination of equal/unequal columns (first two narrow and equal width, third column is wide) */
/* initially created for otr-research.htm but not using on this page */
.three-col-1narrow, 
.three-col-2narrow, 
.three-col-3wide {
	width: 160px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.three-col-3wide {
	width: 350px;
	margin-right: 0px;
	}

/* --------------------------------------------------------------- */
/* .ROW WITH FOUR COLUMNS
/* --------------------------------------------------------------- */
/* 4 equal colums */
.four-col-1, 
.four-col-2, 
.four-col-3, 
.four-col-4 {
	width: 160px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.four-col-4 {
	margin-right: 0px;
	}

/* --------------------------------------------------------------- */
/* .ROW WITH FIVE COLUMNS
/* --------------------------------------------------------------- */
/* 5 equal columns */
.five-col-1, 
.five-col-2, 
.five-col-3, 
.five-col-4, 
.five-col-5  {
	width: 122px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.five-col-5 {
	margin-right: 0px;
	}

/* --------------------------------------------------------------- */
/* .ROW WITH SIX COLUMNS
/* --------------------------------------------------------------- */
/* 6 equal columns */
.six-col-1, 
.six-col-2, 
.six-col-3, 
.six-col-4, 
.six-col-5,
.six-col-6 {
	width: 100px;
	display: inline;
	float: left;
	margin-right: 26px;
	}
.six-col-6 {
	margin-right: 0px;
	}
	
/* --------------------------------------------------------------- */
/* .ROW WITH .IMAGE-RT
	column configuration dependent on width of .ROW due to .IMAGE-RT
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/* .ROW with # equal columns to wrap left of .IMAGE-RT WIDTH-300
	/4org/d15/spacsci/SpacSupt/pims/default.htm
	/templates/2011/reviewed/c2/row-col-image-rt-300.htm
/* --------------------------------------------------------------- */
/* 2 equal columns */
/* 300+15+1+20=336 (.IMAGE-RT total width), 730-336=394 (.ROW width), 394-30=364/2=182 (column width) */
.width-394 .two-col-1, 
.width-394 .two-col-2 {
	width: 182px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.width-394 .two-col-2 {
	margin-right: 0px;
	}
	
/* --------------------------------------------------------------- */
/* .ROW of # equal columns to wrap left of .IMAGE-RT WIDTH-250
	/templates/2011/reviewed/c2/row-col-image-rt-250.htm
/* --------------------------------------------------------------- */
/* 2 equal columns */
/* 250+15+1+20=286 (.IMAGE-RT total width), 730-286=444 (.ROW width), 444-30=414/2=207 (column width) */
.width-444 .two-col-1, 
.width-444 .two-col-2 {
	width: 207px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.width-444 .two-col-2 {
	margin-right: 0px;
	}
	
/* 3 equal columns */	
/* 250+15+1+20=286 (.IMAGE-RT total width), 730-286=444 (.ROW width), 444-60=384/3=128 (column width) */
.width-444 .three-col-1, 
.width-444 .three-col-2, 
.width-444 .three-col-3 {
	width: 128px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.width-444 .three-col-3 {
	margin-right: 0px;
	}
	
/* --------------------------------------------------------------- */
/* .ROW of # equal columns to wrap left of .IMAGE-RT WIDTH-200
	/templates/2011/reviewed/c2/row-col-image-rt-200.htm
/* --------------------------------------------------------------- */
/* 2 equal columns */	
/*200+15+1+20=236 (.IMAGE-RT total width), 730-236=494 (.ROW width), 494-30=464/2=232 (column width)*/
.width-494 .two-col-1, 
.width-494 .two-col-2 {
	width: 232px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.width-494 .two-col-2 {
	margin-right: 0px;
	}
	
/* 3 equal columns */	
/*200+15+1+20=236 (.IMAGE-RT total width), 730-236=494 (.ROW width), 494-56=438/3=146 (column width)*/
.width-494 .three-col-1, 
.width-494 .three-col-2, 
.width-494 .three-col-3 {
	width: 146px;
	display: inline;
	float: left;
	margin-right: 28px;
	}
.width-494 .three-col-3 {
	margin-right: 0px;
	}
	
/* 4 equal columns */	
/*200+15+1+20=236 (.IMAGE-RT total width), 730-236=494 (.ROW width), 494-90=404/4=101 (column width)*/
.width-494 .four-col-1, 
.width-494 .four-col-2, 
.width-494 .four-col-3,
.width-494 .four-col-4 {
	width: 101px;
	display: inline;
	float: left;
	margin-right: 30px;
	}
.width-494 .four-col-4 {
	margin-right: 0px;
	}

/* --------------------------------------------------------------- */
/* .FRAME and .TILE specific styles
	.FRAME to fill #MAINCONTENT's 730px width for .TILE widths to work
	generic styles located in INSTITUTE.CSS
	a height measurement specific to content needs creation of CLASS, confer with jfox
/* --------------------------------------------------------------- */
.tile-row-of-2 {/*two .TILEs across in a .FRAME*/
	width: 365px;
}
.tile-row-of-3 {/*three .TILEs across in a .FRAME*/
	width: 243px; /*243.333333333333*/
}
.tile-row-of-4 {/*four .TILEs across in a .FRAME*/
	width: 182px;/*182.5*/
}
.tile-row-of-5 {/*five .TILEs across in a .FRAME*/
	width: 146px;
}
.tile-row-of-6 {/*six .TILEs across in a .FRAME*/
	width: 121px;/*121.666666666667*/
}

/* --------------------------------------------------------------- */
/* .NEW-ITEM specific styles used with .FRAME and .TILE
	utilizes NEW-ITEM-60X60.PNG
	vertical position located in INSTITUTE.CSS
	see also .RIBBON-ITEM in INSTITUTE.CSS
/* --------------------------------------------------------------- */
/*horizontal position of .NEW-ITEM in .TILE that is 1 of # across for VIEW-BROCHURE.HTM and VIDCLIP-NEW.HTM*/
.tile-row-of-4 .new-item.brochure {/*.BROCHURE in .TILE 1 of 4 across for VIEW-BROCHURE.HTM*/
	left:22px;
}
.tile-row-of-4 .new-item.trifold {/*.TRIFOLD in .TILE 1 of 4 across for VIEW-BROCHURE.HTM*/
	left:48px;
}
.tile-row-of-5 .new-item.brochure {/*.BROCHURE in .TILE 1 of 5 across for VIEW-BROCHURE.HTM*/
	/*left:30px;ADJUST PER NEEDS OF 2 COL*/
}
.tile-row-of-5 .new-item.trifold {/*.TRIFOLD in .TILE 1 of 5 across for VIEW-BROCHURE.HTM*/
	/*left:55px;ADJUST PER NEEDS OF 2 COL*/
}
.tile-row-of-6 .new-item.vidclip {/*.VIDCLIP in .TILE 1 of 6 across for VIDCLIP-NEW.HTM*//*possibly too many*/
	/*left:26px;ADJUST PER NEEDS OF 2 COL*/
}
