/* colorscheme
blue= #00A8E8
green= #3DCCC7
lighter green = #68D8D6
lighter blue = #9CEAEF
pale bluegeen= #C4FFF9
dark blue = #26789b
darkest blue = #0B4F6C
*/

/* STYLING FOR MOST PAGES */

a {
    color: #9CEAEF;
}

a:hover {
    color: #0B4F6C;
}

.pWithSentences {
    white-space: pre-wrap;
}

.Sentences {
    white-space: pre-wrap;
}

.modal-header {
    background-color: #00A8E8;
    border-bottom: 1px solid #00A8E8;
}
    
.modal-body {
    background-color: #00A8E8;
} 

.modal-title {
    color: #C4FFF9;
}

.modal-footer {
    background-color: #00A8E8;
    border-top: 1px solid #00A8E8;
}

@media only screen and (max-width: 425px) {
    .AAA{
        font-size: 75%;
    }
}

.btn-prev, .btn-next{
    background-color: #00A8E8;
    color: #C4FFF9;
    font-family: 'Yellowtail', cursive;
}

.close {
   color: #C4FFF9;
}

/* rotate certain photos 90/270 degrees when they are displayed in modal format and change the size of the modal in such instances */
.gallery-rotate img {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    height: 400px;
    position: absolute;
    top: 60px;
    left: 4px;   
}

.gallery-rotate2 img {
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
    height: 400px;
    position: absolute;
    top: 60px;
    left: 4px;  
}

/* change the size of the modals for images which are rotated when displayed in modal format 
.gallery-rotate, .gallery-rotate2 {
        height: 520px;
} */

/* rotate certain images 180 degrees 
.image-rotate{ 
    -ms-transform: rotate(180deg); /* IE 9 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera 
    transform: rotate(180deg);
}*/

/* STYLING FOR THE NAV BAR */

.navbar-light .navbar-nav .active > .nav-link {
    color: #00A8E8;
}

.navbar-light .navbar-nav .nav-link {
    color: #3DCCC7;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #26789b;
}

.navbar {
    margin-bottom: 0px;
    background-color: #C4FFF9;
    border-style: solid;
    border-width: 2px 2px 1px 2px;
    border-color: #00A8E8;
}

/* STYLING FOR THE HOME PAGE */

.jumbotron {
    background-color: #9CEAEF;
    margin-bottom: 0px;
    
}

.jumbotron h2, h4 {
    color: #00A8E8;
    text-align: center;
    font-family: 'Yellowtail', cursive;
}

.jumboOne {
    padding-top: 30px;
    padding-bottom: 20px;
    border-style: solid;
    border-width: 1px 2px;
    border-color: #00A8E8;
}

@media only screen and (max-width: 767px) {
    .jumboOne {
        padding-top: 20px;
        padding-bottom: 10px;
    }
}
    
/* give the jumbrotron square corners, instead of the default rounded corners */

.jumbotron {
    border-radius: 0px;
}

.coverphoto {
    border-style: solid;
    border-width: 1px 2px 2px 2px;
    border-color: #00A8E8;
    
}

/* resize image */
.coverphoto img {
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 767px) {
    .jumbotron h2{
        font-size: 140%;
    }
    
    .jumbotron h4{
        font-size: 120%;
    }
    
}

/* STYLING FOR THE AIDAN AND HARRISON PAGES */

.left-aidan{
    background-color:#00A8E8;
}

.photodiv{
    width: 300px;
    height: 200px;
    display: inline-block;
}

/* resize images */
.photodiv img {
    width: 100%;
    height: 100%;
    margin-left: 5px;
}

.dates{
   display: inline-block;
   width: 300px;
   text-align: center;
   font-size: 12px;
}

.myBtn {
    border: 6px solid #68D8D6; 
    background-color: #C4FFF9;
    color: #3DCCC7;
    cursor: pointer; 
    padding: 15px; 
    border-radius: 50px; 
}

.myBtn:hover {
    background-color: #26789b; 
}

.specialDiv span {
   position: absolute;
   bottom: 20px;
}

/* STYLING FOR THE MISCELLANEOUS PAGE */

.color1 {
    background-color: #00A8E8;
    height: 100px;
    padding-top: 10px;
}

.color2 {
    background-color: #C4FFF9;
    height: 100px;
    padding-top: 10px;
}

/* STYLING FOR THE FAMILY TREE */

.BBB {
     background-color: #3DCCC7;
}

.space-filler {
    height: 15px;
}

.familyTreePhotoDiv img {
    width: 100%;
    border: solid 5px #00A8E8;
}

.familyTreeDates {
   font-size: 12px;
}

.extraPadding {
    padding: 0px 5px;
}

.withText {
    text-align: center;
    border: 2px solid black;
    background-color: #68D8D6;
    color: #26789b;   
}

.withSpecialText {
    text-align: center;
    border: solid 2px black;
    background-color: #00A8E8; 
    color: #9CEAEF;    
}

.withsymbol { 
    text-align: center;
}

/* STYLING FOR QUESTIONNAIRE AND QUESTIONNAIRE2*/

.jumboTwo {
    padding-top: 30px;
    padding-bottom: 20px;
    border-style: solid;
    border-width: 5px 4px;
    border-color: #00A8E8;
}

@media only screen and (max-width: 767px) {
    .jumboTwo {
        padding-top: 20px;
        padding-bottom: 10px;
    }
}

table { 
    width: 100%;
    height: 100%;
}

#answer0 {
    background-color:  #00A8E8;
    border-width: 1px 1px 1px 4px;
    border-style: solid;
    border-color: #9CEAEF;
}

#answerAC-0 {
    background-color:  #00A8E8;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #9CEAEF;
    text-align: center;
}

#answerHW-0 {
    background-color:  #00A8E8;
    border-width: 1px 4px 1px 1px;
    border-style: solid;
    border-color: #9CEAEF;
    text-align: center;
}

.question {
    background-color: #00A8E8;
    border-width: 1px 1px 1px 4px;
    border-style: solid;
    border-color: #9CEAEF;
}

.answerAC {
    background-color:  #00A8E8;
    border-width: 1px;
    border-style: solid;
    border-color: #9CEAEF;
}

.answerHW {
    background-color:  #00A8E8;
    border-width: 1px 4px 1px 1px;
    border-style: solid;
    border-color: #9CEAEF;
}


.answer0 {
    text-align: center;
}

.answer{background-color: yellow}

/* STYLING FOR CARDFROMHW */

.AA {
    width: 100%;
    height: 100%;
}

.cardBackground{
    border-width: 10px 10px 10px 10px;
    border-style: solid;
    border-color: #00A8E8; 
    background-color: #9CEAEF;
    padding: 0px 20px 0px 20px;
}

.pic-front{
    box-shadow: 5px 5px 5px #3DCCC7;
    margin-bottom: 20px;
}

.pic-back{
    display:none;
    box-shadow: 5px 5px 5px #3DCCC7;
    margin-bottom: 20px;
}

.pic-front:hover, .pic-back:hover{
  cursor: grab;
}

.cardText{
  color: #26789b;
}

.smallFont{
    font-size: 90%;
    line-height: 99%;
    color: #0B4F6C;
    
}

/*STYLING FOR ancestors.html*/

.ancesTree {width: 5400px;}

.ances1 {
	background: #00A8E8;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-family: 'Itim', arial, verdana;
	font-size: 18px;
	height: 50px;
	margin: 5px 0px 5px 185px;
	padding-top: 10px;
	text-align: center;
	width: 4982px;
}

.ances2 {
	background: white;
	border: 1px solid white;
	color: blue;
	display: inline-block;
	font-family: arial, verdana, tahoma;
	font-size: 13px;
	height: 50px;
	padding: 15px;
	text-align: center;
	vertical-align: bottom;
	width: 180px;
}

.ances3 {
	background: #00FFFF;
	border: 1px solid #ccc;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: #666;
	display: inline-block;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	vertical-align: bottom;
	width: 180px;
}

.ances4 {
	background: white;
	display: inline-block;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	height: 50px;
	text-align: center;
	vertical-align: bottom;
	width: 180px;
}

.ances4 svg {overflow: visible;}

.sticky {
	position: sticky;
	left:0;
	z-index:10;
}

.marriageSign {
	font-size: 225%;
	letter-spacing: -6px;
	line-height: 110%;
}

/*STYLING FOR anecdotes.html*/

#anecedotesHeader{
    font-family: 'Permanent Marker', arial;
}

.anecdotesBackground1{
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #C4FFF9; 
    background-color: #00A8E8;
    padding: 20px 20px 0px 20px
}

.anecdotesBackground2{
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #C4FFF9; 
    background-color: #00A8E8;
    padding: 20px 20px 20px 20px
}

.anecdotesText1{
    color: black;
    font-family: 'Permanent Marker', arial;
    padding: 0px 50px;
    text-align: center;
}

.anecdotesText2{
    color: black;
    font-family: 'Permanent Marker', arial;
    padding: 0px 60px;
    text-align: center;
}