/* 
Setting your section to flex-direction: column will make your section boxes
vertically stacked, making it flex-direction: row, will allow them to be side by
side horizontally stacked.

Content Box Vertical: The key aspect of this section style is that the boxes are
stacked vertically. This section configuration creates one content box and then
one flex box,stacked vertically. This "vertical" display is done by making the
section a flex display, then setting flex-direction to "column".

More boxes can easily be added. If you want to add a flex box, just set display:
flex. If you want to add a content box in the section, just create another div
within the section. 

NOTE: The @media tag work on a small screen only if the HTML page has in its header
a metadata field declaring the viewport width and initial scaling, like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

When the small-screen formatting works correctly, the frames of the page arrange
themselves vertically rather than horizontally.
*/

.cbfb_section {
	display: flex;
	flex-direction: column;
	min-height: 95vh;
	margin-left: auto;
	margin-right: auto;
	max-width: 2500px;
}

.cbfb_1 {
	overflow: visible;
	margin: 2em 2em 1em 2em;
}

.cbfb_2 {
	display: flex;
	overflow: visible;
	justify-content: center;
	align-items: center;
	margin: 1em 2em 1em 2em;
}

@media (max-width:700px) { 
	.cbfb_section {
		height: auto;
	}

	.cbfb_2 {
		display:flex;
		flex-direction: column;
	}
}

/* 
Content Box Content Box: This section configuration creates two content boxes,
in a horiontal/row formation, side by side. These content boxes are not flex
boxes, which means they will behave like normal html divs. If you would like
more boxes, you can add them with divs
*/

.cbcb_section {
	display: flex;
	flex-direction: row;
	min-height: 95vh;
	margin: 1em;
	max-width: 2000px;
	align-items: center;
}

.cbcb_left {
	overflow: visible;
	flex:3;
	margin: 1em;
}

.cbcb_right {
	overflow: visible;
	flex: 3;
	justify-content: center;
	align-items: center;
	margin: 1em;
}

@media (max-width:700px) {
	.cbcb_section {
		display: flex;
		flex-direction: column;
		height: auto;
	}
}

/* 
Side Bar Content Box : This creates a sidebar on the left, for lists and links,
and then a flex box on the right.  If you want to add more boxes to sbcb_right,
add another div within sbcb right. You can add content boxes OR flex boxes to
sbcb_right. If you do add more boxes, set the style and sisplay in the css file
unique to that php file, not section.css.

Note: In order for the side bar to not change width and grow within the secton
as the page gets resized, we need to fix the width. This is done with
"flex-grow" (specifies how much the item will grow relative to the rest of the
flexible items inside the same container.) and "flex-basis" (specifies the
initial length of a flexible item.). Setting flex-grow to "0" means it will
change size at the same rate as other elements on the page,  and flex-basis
315px allows it to start at the same width as the OSI logo above it.
*/ 

.sbcb_section {
	display: flex;
	flex-direction: row;
	min-height: 95vh;
}

.sbcb_left {
	background: #e6eeff;
	text-align: left;
	flex-grow: 0; 
	flex-shrink: 0;	
	flex-basis: 315px; 
	height: auto;
	font-size: 11pt;
}

.sbcb_left h5 {
	text-indent: 0px;
	margin-bottom: 0em;
	margin-top: 0.5em;
}
.sbcb_left h4 {
	text-indent: 0px;
	margin-bottom: 0em;
	margin-top: 0.5em;
}

.sbcb_left h3 {
	text-indent: 0px;
	margin-bottom: 0em;
	margin-top: 0em;
}
.sbcb_left ul {
	margin: 1em 0.6em 1em 0.6em;
	text-indent: 0px;
	list-style: none;
}

.sbcb_left li {
	padding: 0.2em;
	text-indent: 0px;
	list-style: none;
}

.sbcb_left a {
	color: #1A2865;
	text-decoration: none;
}

.sbcb_left a:hover {
	color:  #00cc00;
}

.sbcb_left li.selected a {
	color: #00cc00;
}

.sbcb_right {
	justify-content: center;
	height: auto;
	padding: 1em 1em 1em 1em;
	margin-left: auto;
	margin-right: auto;
	max-width: 1500px;
	overflow: hidden;
}

.sbcb_right ul {
	margin-bottom: 1em;
}

.sbcb_right ul a {
	color: #1A2865;
}

.sbcb_right ul a:hover {
	color:  #00cc00;
}

.sbcb_right ul li.selected a {
	color: #00cc00;
}

/* 
Side Bar Flex Box: This creates a sidebar on the left, for lists and links , and
then a flex box on the right, which can contain more felx boxes or content, if
you please.  If you want to add more boxes to sbfb_right, add another div within
sbfb right, and set display: flex, in the css file unique to that php file. (see
products.php as an example.)
*/ 

.sbfb_section {
	display: flex;
	flex-direction: row;
	min-height: 95vh;
}

.sbfb_left {
	background: #e6eeff;
	text-align: left;
	flex-grow: 0; 
	flex-shrink: 0;	
	flex-basis: 315px; 
	height: auto;
	font-size: 11pt;
}

.sbfb_left h5 {
	text-indent: 0px;
	margin-bottom: 0em;
	margin-top: 0.5em;
}

.sbfb_left h4 {
	text-indent: 0px;
	margin-bottom: 0em;
	margin-top: 0.5em;
}

.sbfb_left h3 {
	text-indent: 0px;
	margin-bottom: 0em;
	margin-top: 0em;
}

.sbfb_left ul {
	margin: 0.6em;
	text-indent: 0px;
	list-style: none;
	margin: 1em 0.6em 1em 0.6em;

}

.sbfb_left li {
	padding: 0.2em;
	text-indent: 0px;
	list-style: none;
}

.sbfb_left a {
	color: #1A2865;
	text-decoration: none;
}

.sbfb_left a:hover {
	color: #00cc00;
}

.sbfb_left li.selected a {
	color: #00cc00;
}

.sbfb_right {
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: auto;
	margin: auto;
	max-width: 1500px;
}

.sbfb_right ul {
	margin-bottom: 1em;
}

.sbfb_right ul a:hover {
	color:  #00cc00;
}

.sbfb_right ul li.selected a {
	color: #00cc00;
}

.sbfb_column1 {
}

.sbfb_column2 {
}

/* 
Re-format the page for small screens. We have a maximum width for this
formatting, which identifies a small screen. In the HTML page that calls this
style sheet, we must have a metadata field in the header that declares the
viewport width and initial scaling.
*/
@media (max-width:700px) {
	.sbcb_section {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.sbfb_section {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.sbfb_right {
		display: flex;
		flex-direction: column;
	}
}