/* CSS Document */

body {
    color: hsla(260,100%,30%,1.00);
    background-color:  hsla(80,50%,80%,1.00);
    font-size: 2vw;
    padding-top: 4vw;
    width: 100vw;
    min-width: 300px;
}

h1, h2 {
	text-align: center;
}

#home-header {
    text-align: left;
    float: left;
    width: 46%;
    margin-left: 2%;
    font-size: 4vw;
	padding: 0;
}
#home-header h1 {
	margin: 0;
	font-size: 2em;
}
footer p  {
    text-align: center;
     margin-top: 10px;
}

.links .icons img {
    height: 80px;
    padding-left: auto;
    padding-right: auto;
}
#main-body {
	display: flex;
	flex-direction: column;
	width: 100%;
}






#page-title{
	position: relative;
	top:0;
	width:100vw;
	text-align: center;
	font-size: 3vw;
	background-color: hsla(260,100%,30%,1.00);
	color:  hsla(80,50%,50%,1.00);
	border-top: .2em  hsla(80,50%,50%,1.00) solid;
	border-bottom: .2em  hsla(80,50%,50%,1.00) solid;
	margin-top: 0;
}




/* Navigation Styles */

.navbar-default {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    vertical-align: middle;
    align-content: center;
    background-color: hsla(260,100%,30%,1.00);
    border-color:  hsla(260,100%,30%,1.00);
    width: 100vw;
    color: hsla(80,50%,50%,1.00);
}

.nav-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content:space-around;
}

.navbar-default .navbar-brand {
    color: hsla(80,50%,80%,1.00);
    min-width: 170px;
    font-size: 1.2vw;
    line-height: 1.2;
    height: 4vw;
    background-image: url("../images/family.png");
    background-size: 3vw;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: center left;
    margin-top: .5vw;
    padding-right: 1vw;
    padding-left: 3.5vw;
    padding-top: 1.2vw;
}

ul.nav > li {
    font-size: .65em;
    color:  hsla(80,50%,80%,1.00);
    margin-right: 0.5em;
    margin-left: 0.5em;
}

.navbar-bottom ul.nav {
	display: flex;
	flex-direction: row;
	flex-wrap:nowrap;
	padding: 0;
	margin: 0;
	width: 100vw;
	font-size: 1.5vw;
}

#topFixedNavbar1 ul.nav {
	display: flex;
	flex-direction: row;
	height: 100%;
	align-items: center;
	justify-content: center;
}


.navbar-bottom ul.nav ul {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content:flex-start;
	max-height: 25vw;
	column-gap: .5vw;
	padding: 0;
	margin: 0;
}

 .navbar-bottom ul.nav li {
	display: flex;
	flex-direction: column;
	text-align: center;
    color:  hsla(80,50%,50%,1.00);
	list-style: none;
	padding: 0;
	margin-right: 1vw;
}
.navbar-bottom ul.nav > li {
	font-size: 1em;
	border-right: thin solid;
}
.navbar-bottom ul.nav li li {
	text-align: left;
	font-size: .9vw;
}

.flex-1 {
	flex-grow: .4;
}
.flex-2 {
	flex-grow: .1;
}
.flex-3 {
	flex-grow: .1;
}
.flex-4 {
	flex-grow: 10;
}
.flex-5 {
	flex-grow: 1;
	align-items: center;
}


.navbar-bottom ul.nav li a {
	color:  hsla(80,50%,50%,1.00);
	padding: 0;
}

.flex-1 li a, .flex-2 >h2, .flex-3 >h2, .flex-4 >h2, .flex-5 >h2 {
	color:  hsla(80,50%,50%,1.00);
}

.navbar-bottom ul.nav > li > a {
	font-size: 1.1em;
	padding: 0;
	margin: 1em 0 0em 0;
}


.navbar-bottom ul.nav > li.secondary-subgroup h2 {
 text-decoration: none;
	font-size: 1.1em;
	padding: 0;
	margin: 1em 0 0em 0;
}

.navbar-bottom li.secondary-subgroup {
	margin-bottom: 1em;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color:  hsla(80,50%,50%,1.00);
}
.navbar-default .navbar-text {
  color:  hsla(80,50%,80%,1.00);
}
.navbar-default ul > li  {
	text-align: center;
}
.navbar-default .navbar-nav > li > a {
    color:  hsla(80,50%,80%,1.00);
    margin-top: 0.5vw;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color:  hsla(80,50%,50%,1.00);
}
.navbar-default .navbar-nav  li > .dropdown-menu {
    background-color:  hsla(260,100%,30%,1.00);
    font-size: 1em;
    color:  hsla(80,50%,80%,1.00);
}
.navbar-default .navbar-nav > li > .dropdown-menu  li > a {
    color:  hsla(80,50%,80%,1.00);
}
.navbar-default .navbar-nav > li > .dropdown-menu  li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu  li > a:focus {
    color:  hsla(80,50%,50%,1.00);
    background-color:  hsla(260,100%,30%,1.00);
}
.navbar-default .navbar-nav > li > .dropdown-menu  li.divider {
    background-color:  hsla(260,100%,30%,1.00);
}
.navbar-default .navbar-nav .open .dropdown-menu  .active > a,
.navbar-default .navbar-nav .open .dropdown-menu  .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu  .active > a:focus {
    color:  hsla(80,50%,50%,1.00);
    background-color:  hsla(260,100%,30%,1.00);
}



.navbar-default .navbar-nav > li > .dropdown-menu  li > .dropdown-menu {
  background-color: hsla(260,100%,30%,1.00);
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .dropdown-menu  > li > a {
  color:  hsla(80,50%,80%,1.00);
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .dropdown-menu  > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > .dropdown-menu  > li > a:focus {
    color:  hsla(80,50%,50%,1.00);
    background-color:  hsla(260,100%,30%,1.00);
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .dropdown-menu  > li.divider {
  background-color:  hsla(260,100%,30%,1.00);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > .dropdown-menu  > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > .dropdown-menu  > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu  > li > .dropdown-menu > .active > a:focus {
    color:  hsla(80,50%,50%,1.00);
    background-color:  hsla(260,100%,30%,1.00);
}




.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color:  hsla(80,50%,50%,1.00);
    background-color:  hsla(260,100%,30%,1.00);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color:  hsla(80,50%,50%,1.00);
    background-color:  hsla(260,100%,30%,1.00);
}
.navbar-default .navbar-toggle {
  border-color:  hsla(260,100%,30%,1.00);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color:  hsla(260,100%,30%,1.00);
    color:  hsla(80,50%,50%,1.00);
}
.navbar-default .navbar-toggle .icon-bar {
  background-color:  hsla(80,50%,80%,1.00);
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color:  hsla(80,50%,80%,1.00);
}
.navbar-default .navbar-link {
  color:  hsla(80,50%,80%,1.00);
}
.navbar-default .navbar-link:hover {
    color:  hsla(80,50%,50%,1.00);
}

#messages {
	width: 100%;
	padding: 0 3vw;
	text-align: left;
}

.messages {
	font-size: 1.2em;
	font-style: italic;
	margin: .1vw 0;
}


.navbar-bottom ul li a:hover, .navbar-bottom ul li a:focus   {
	text-decoration: none;
	color:  hsla(80,50%,30%,1.00);
	background-color: inherit;
}

.navbar-bottom ul li.active a {
	text-decoration: underline;
}
nav.navbar-bottom {
    border-top: medium solid  hsla(260,100%,30%,1.00);
    padding-top: 1vw;
	background-color:  hsla(260,100%,30%,1.00);
	color: hsla(80,50%,50%,1.00);
}
.navbar-bottom li ul.secondary-sub-menu >li >ul {
 	font-size: .9em;
	padding-left: 1em;
}


.navbar {
    min-height: 4vw;
}
.navbar-nav>li>a {
    padding-top: 1vw;
    padding-bottom: 1vw;
	line-height: 1vw;
}

.navbar-toggle {
	font-size: 10pt;
}









footer ul li {
	list-style-type: none;
 }

#main-body img#mim {
    width: 100%;
    margin: auto;
}
#main-body img#cousinChart {
	width: 90%;
	margin:  2em auto;
	border-radius: 2em;
}
.navbar-default .navbar-brand a {
}
nav.pagnation ul {
	display: flex;
	flex-direction:row-reverse;
	flex-wrap: nowrap;
	padding: 0 2em;
	font-size: 1em;
	width:100vw;
}

nav.pagnation ul li {
	margin-left: 2em;
	list-style-type: none;
}

div.picture-window {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100vw;
	padding: 0 1em;
}	
div.picture-window section.pic_holder {
	margin: .5em .5em;
}

p.group-header {
	font-size: 1em;
	padding: 0 1em;
}

section.picture_display {
	width: 100vw;
}

section.picture_display img {
	width: 80%;
	margin: 1em 10%;
}
form#update-form {
    padding-top: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-left: 2em;
}


@media (max-width:767px){
	
	
#topFixedNavbar1 ul.nav, #topFixedNavbar1 ul.navbar-nav {
    display: flex;
	flex-direction: column;
}

	
	
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #FFF0BE;
    font-size: 1em;
    height: 2em;
}

nav.navbar-bottom {
    display: none;
    border-top-width: thin;
    border-top-style: none;
	}
	
.navbar-brand {
	background-size: 35px;
    margin-top: 10px;
	padding: 0 0 10px 45px;
	font-size: 10pt;
	background-clip:border-box;
	height: 35px;
}

.container-flex {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
body {
    min-width: 300px;
    font-size: 2vw;
	padding-top: 0em;
	}
button.collapsed {		
}
	
#body-row {
	flex-direction: column;
}

	
.navbar-default  li > a {
	width: 100vw;
}
#banner-row {
    height: 10vw;
    min-height: 5em;
    background-color: #0000FF;
    font-size: 1vw;
}

	

#banner-row #middle-sector {
	background-size:contain;
	background-position: center;
}
	
#officers-row {
	padding: 2vw;
	font-size: 2.0vw;
}

.OfficerBlock {
    margin: 1vw;
    padding: .2vw;
}

.OfficerBlock h3 {
	font-size: 2.4vw;
}
.OfficerBlock p {
	font-size: 2vw;
}

#officers-header h2, #about-us h2 {
	font-size: 4vw;
}

#about-us {
	padding: 2vw;
	font-size: 3vw;
}
	
	
/*
#home-header {
    width: 100%;
    font-size: 2.5vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    float: none;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    min-width: 300px;
}
#author-row {
    min-width: 0px;
    width: 100%;
}
*/


.icon-name {
    font-size: 0.7em;
    width: 100%;
}
.links .icons img {
    padding-left: auto;
    padding-right: auto;
}
#attributes {
    font-size: 2.9em;

}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a {
		font-size: 2em;
		padding: 1em 0;
	}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
    color: #FFD000;
    font-size: 2em;
 	padding: 1em 0;
}
#login-page {
    width: 90vw;
    min-width: 460px;
    padding-left: 0px;
    margin-left: auto;
    margin-right: auto;
}
#edit-page {
    width: 90%;
    min-width: 460px;
}
.radio_privileges {
    text-align: center;
    font-size: 1em;
}


.radio_privileges .sm-flex {
	flex: 1 0 30%;
}

	
.name-row .md-flex {
	flex: 0 1 100%;
}

.name-row .sm-flex {
	flex: 0 1 100%;
}

.name-row input {
	font-size: 3.0vw;
}

	


.name-row label {
    font-size: 1.0em;
	width: 100%;
	text-align: left;
	padding-left: 5%;
}
.instructions {
    width: 95%;
}
footer p, footer ul li {
}
#about-us {
    width: 100%;
}
#officers-row {
    width: 100%;
}
.navbar-header {
	display: flex;
	flex-direction:row-reverse;
    width: 100%;
	flex-wrap: nowrap;
	justify-content: space-between;
}


.two-line-label {
	flex-direction: row;
	padding-right: 0;
	justify-content: center;
}

	.two-line-label span {
		margin-left: 1vw;
	}
	
	.submit-row input {
    height: 8vw;
    width: 80%;
    margin-bottom: 2vw;
    margin-left: auto;
    margin-right: auto;
	}
.login-entry input {
    width: 100%;
}
.login-entry label {
    width: 100%;
    text-align: center;
}
.login-entry {
    width: 100%;
	flex-direction: column;
	align-items: center;
}
.login-entry label#user_id-label {
    flex-grow: 0;
    width: 100%;
}
ul.nav > li  a {
    font-size: 2em;
	padding: 1em 0;
 }
#login-button a, #newuser-button a, #user-full-name a {
	width:80vw;
	align-content: center;
	text-align: center;
}
#login-button, #newuser-button, #user-full-name {
	width: 80vw;
	margin: 1em auto;
	align-content: center;
	text-align: center;
	padding: 1em 0;
}
.login-entry #classYear {
    width: 30%;
}
.login-entry #phoneNo {
    width: 40%;
}
.committee-button {
    width: 45%;
    font-size: 2vw;
}
.committee-button p {
    font-size: 1em;
}
.committee-list {
    width: 30%;
    font-size: 2vw;
}
table#Attendees {
    width: 85%;
}
table#Attendees h1 {
    font-size: 2.4em;
}
table#Attendees h2 {
    font-size: 2em;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0.2em;
    margin-right: 0.2em;
    margin-bottom: 0.2em;
    margin-left: 0.2em;
}




}