/*
** ----------------------------------------------------------------------------
** Infogoal Tutorial Stylesheet
**   Mobile First
** ----------------------------------------------------------------------------
*/

body {
    font-family:      'Segoe UI',Arial,sans-serif;
    background-color: white;	   /* white */
}
	
img, embed, object, video {   
	max-width:        100%;   /* prevent overflow */
}
.container {
	width:            960px;
	margin:           auto;
}	

.imagebox {
	background-color: #d3d1cf;
	font-size:        10pt;
	FONT-FAMILY:      'Segoe UI',Arial,sans-serif; 
		}
.date {
	font-size:        9pt;
	FONT-FAMILY:      'Segoe UI',Arial,sans-serif;
	COLOR:            #C66B11;
	font-style:       italic; 
		}


/*
** ------------------------------------
** Begin TopLogoBar
** ------------------------------------
*/

.TopLogoBar {
	background-color: white;
	height:           48px;
	width:            98%;
	vertical-align:   top;
	display:          flex;
}

.TopLogoBarImage {
	text-align:       left;	
}

.TopLogoBarTagline {
	font-family:      'Segoe UI',Arial,sans-serif;
	font-size:        20px;	
    text-align:       right;
	float:            right:
    position:         relative;
    top:              10px;
	color:            grey;
}

/*
** ------------------------------------
** Begin SiteBottom
** ------------------------------------
*/
.SiteBottom {
	width:            100%;
	margin:           auto;
    background-color: rgb(255, 255, 255);    
    overflow:         auto;	
}	
.SiteBottom p {
	text-align:       center;
	font-size:        12px;	
}'
.BottomNav A:link {
	FONT-SIZE:        12pt; 
	COLOR:            #000033; 
    text-decoration:  none;
	FONT-FAMILY:      'Segoe UI', Arial, sans-serif;
}
.BottomNav A:visited {
	FONT-SIZE:        12pt; 
	COLOR:            #663300; 
	FONT-FAMILY:      'Segoe UI', Arial, sans-serif;
}

.BottomNav A:hover { background: #FFA }

.BottomNav A:active {
	FONT-SIZE:        12pt; 
	COLOR:            #967393; 
	FONT-FAMILY:      'Segoe UI', Arial, sans-serif;
}
/*
** ------------------------------------
** Begin SiteNavBar
** ------------------------------------
*/
/* Style the navigation bar */
.SiteNavBar {
    width:            100%;
    background-color: #555;
    overflow:         hidden;
}

/* Navbar links */
.SiteNavBar a {
    float:            left;
    text-align:       center;
    padding:          12px;
    color:            white;
    text-decoration:  none;
    font-size:        17px;
}

/* Navbar links on mouse-over */
.SiteNavBar a:hover {
    background-color: #000;
}

/* Current/active navbar link */
.active {
    background-color: rgb(51, 51, 204);
}
/*
** ------------------------------------
** Begin Humburger
**   Article shows how to build hamburger nav bar
**   https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/
** ------------------------------------
*/
/* [ON BIG SCREEN] */
/* Wrapper */
#hamnav {
  width: 100%;
  background: #000;
  /* Optional */
  position: sticky;
  top: 0;
}

/* Hide Hamburger */
#hamnav label, #hamburger { display: none; }

/* Horizontal Menu Items */
#hamitems { display: flex; }
#hamitems a {
  width: 20%; /* 100% / 5 tabs = 20% */
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}
#hamitems a:hover {
  background: #401408;
}

/* [ON SMALL SCREENS] */
@media screen and (max-width: 600px){
  /* Show Hamburger Icon */
  #hamnav label { 
    display: inline-block; 
    color: white;
    background: #a02620;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }

  /* Break down menu items into vertical */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }

  /* Toggle Show/Hide Menu */
  #hamitems { display: none; }
  #hamnav input:checked ~ #hamitems { display: block; }
}


/*
** ------------------------------------
** Begin Main Content
** ------------------------------------
*/

.box {
	width:            100%;
}
.FlexContainer {
	display:          flex;
    min-height:       300px;
    margin:           auto;
    margin-bottom:    auto;	
}
.LeftNav {
    background-color: rgb(240, 240, 240);
	width:            16%;
	padding:          5px;
	order:            1;
}
.MainContent {
    background-color: rgb(255, 255, 255);	
	width:            65%;
	padding:          5px;	
	order:             2;
}
.RightNav {
    background-color: rgb(255, 255, 255);	
	width:            20%;
	padding:          2px;
    order:            3;	
}

.MainContent clippingsbox {
	font-size:        10pt;
	FONT-FAMILY:      'Segoe UI', Arial, sans-serif; 
}

.LeftNav A:link {
	FONT-SIZE:        10pt; 
	COLOR:            #000033; 
    text-decoration:  none;
	FONT-FAMILY:      'Segoe UI', Arial, sans-serif;
}
.LeftNav A:visited {
	FONT-SIZE:        10pt; 
	COLOR:            #663300; 
	FONT-FAMILY:      'Segoe UI', Arial, sans-serif;
}

.LeftNav A:hover { background: #FFA }

.LeftNav A:active {
	FONT-SIZE:        10pt; 
	COLOR:            #967393; 
	FONT-FAMILY:      'Segoe UI', Arial, sans-serif;
}

.ExampleCode {
    font-family:      Courier, Monaco, monospace;
    border-radius:    25px;
    border:           2px solid #73AD21;	
    background-color: rgb(140 140, 140);
    padding:          10px;	
}



/*
** ------------------------------------
** Media Resize for Smaller Screen
** ------------------------------------
*/	
@media screen and (max-width: 600px) {
	.SiteNavBar a {
        float: none;
        display: block;
    }
	.FlexContainer {
		display: flex-wrap;
		flex-wrap: wrap;
	}
    .LeftNav {
	   width:100%;
	   text-align: center;	   
	   order: 2;
    }
	.MainContent {
		width: 100%;
		order: 1;
	}
	.RightNav {
		width: 100%;
		text-align: center;
	    order: 3;		
	}	
}