/*   - - - - - - - - - - - - - - - - - - - - - - - - -
			name         : primary.css
			version      : 130607  
			for          : Division 6, Mid-Central Region
						 : 2016 MCR Convention
						 : National Model Railroad Assication
			author       : Donald Wilke
			copyright    : (c) 2013 
			validated	 : 7 June 2013
		 - - - - - - - - - - - - - - - - - - - - - - - - - - */
		 
		 /* 2016 Mid-Cental Region Convention  */
		 
/* TAGS  */	 

/* ===================           Navagation   =============      */

/* Style the top navigation bar */
.navbar {
  display: flex;
}

/* Style the navigation bar links */
.navbar a,
.navbarN a{
  background: #2E74C0;   /* light Blue  */
	color: #EBF717;    /* yellow. */
    border: 2px solid #00E;
	font-weight: bold;
	text-decoration: none;
	border-radius: 8px;
	padding: 2px 4px;
	text-align: center;
    margin: 5px 0px;	
	line-height:1.5em;
	box-shadow: 4px 6px 8px #999999;  
}

.navbarN a 
{color: darkgrey}

.navbarN a:hover  {  }

/* Change color on hover */
.navbar a:hover {
  background:#0CF;
    color: red;
	border: 2px solid #00E;
	padding: 2px 4px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 8px;
	text-align:center;   
    box-shadow: 4px -6px 8px #999999; 
}


 
* {
  box-sizing: border-box;
}

/* =================.  Container for flexboxes     ==========*/
.row {
  display: flex;
  flex-wrap: wrap;
}

.col-5 {width: 5%;}
.col-10 {width: 10%;}
.col-15 {width: 15%;}
.col-20 {width: 20%;}
.col-24 {width: 24%;}
.col-30 {width: 30%;}
.col-32 {width: 33%;}
.col-33 {width: 32%;}
.col-35 {width: 35%;}
.col-40 {width: 40%;}
.col-45 {width: 45%;}
.col-50 {width: 50%;}
.col-60 {width: 60%;}
.col-65 {width: 65%;}
.col-70 {width: 70%;}
.col-75 {width: 75%;}
.col-80 {width: 80%;}
.col-90 {width: 90%;}


/* Create four equal columns *
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 800px) {
   .row, .navbar{
    flex-direction: column;
  }
}


/*. ===============.  Main Title ===================. */

.flex-container {
  display: flex;
  flex-wrap: wrap;
  
}

.flex-item-left {
  flex: 10%;
    text-align: left
}

.flex-item-center {
  flex: 80%;
    text-align: center
}

.flex-item-right {
  flex: 10%;
    text-align: right
}



.flex-container > article {
  
}


.MainTitle {}


/*.   ===================.  My Styles.  ==================. */

.BottomBoarder {
  border-bottom:3px solid;
  border-bottom-color: darkblue;  
}

.indent_25 {margin-left: 25px;}

.indent_15 {margin-left: 13px;}


/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other *
@media screen and (max-width: 860px) {
  .row {
    flex-direction: column;
  }
}