/* picturesphone.css Created by Nancy Bond in June and July 2022 for Animal Pages */

body { 
  background-color: #a2afbb;
  font-family:      Tahoma, Arial, sans-serif;
  font-size:        14px;
  margin:           auto;
}

#pagerectangle {
	background-color: #c8d5e1;
	margin: auto;
	width:  480px;
}

header {
	text-align:  center;
	width:       100%;
	margin:      auto;
}

.navphone {     /* This makes the nav header inline so that span can be used. */
 display: inline;
}

.preview {      /* This hides items like the large header picture. */
  	display: none;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#opening {
	background-color: #c8d5e1;
	width: 456px;
	margin: auto;
	padding: 0px 0px 0px 0px;
	text-align: center;
}

#padded {      /* Padding around wording at top. */
	padding: 0px 2px 0px 2px;
}

.tablecontents {
	display: table;
        margin: auto;
}

.tablerow {
	display: table-row;
}

.border {
	border:1px solid #54626b;
}

#1ele {
    display: table-cell;
    background-color: #a2afbb;
    padding: 0px;
    vertical-align: top;
    text-align: center;
    width: 45%;
}

#colprevious {
    display: table-cell;
    background-color: #c8d5e1;
    padding: 1px;
    vertical-align: top;
    text-align: center;
    width:  200px;
}

#colnext {
    display: table-cell;
    background-color: #c8d5e1;
    padding: 1px;
    vertical-align: top;
    text-align: center;
    width:  200px;
}

#col0link {
    display: table-cell;
    background-color: #c8d5e1;
    padding: 0px 10px 2px 5px;
    vertical-align: top;
    text-align: center;
}

#col1link {
    display: table-cell;
    background-color: #c8d5e1;
    padding: 0px 10px 2px 5px;
    vertical-align: top;
    text-align: center;
}
#col2link {
    display: table-cell;
    background-color: #c8d5e1;
    padding: 0px 10px 2px 5px;
    vertical-align: top;
    text-align: center;
}
#col3link {
    display: table-cell;
    background-color: #c8d5e1;
    padding: 0px 10px 2px 5px;
    vertical-align: top;
    text-align: center;
}

#col4link {
    display: table-cell;
    background-color: #c8d5e1;
    padding: 0px 5px 2px 5px;
    vertical-align: top;
    text-align: center;
}

.button {
  background-color: #223a51; /* Dark Blue */
  border: none;
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 2px 2px 0 #000000, 0 2px 2px 0 #000000;
}

.button:hover {
  background-color: #54626b; /* Dark Blue */
  box-shadow: 0 1px 0px 0 #000000, 0 1px 0px 0 #000000;
}

.next {
	text-align:  center;
	width:       90%;
	margin:      auto;
}

footer {
  background-color: #223a51;
  color:            #c8d5e1;
  text-align:       center;
  padding:          5px 0px 5px 3px;
  margin:           auto;
  font-size:        90%;
  width:            450px;
  line-height:      1.5;
}

/* Bold, light blue Links for Footer */
a.blue:link, a.blue:visited, a.blue.hover, a.blue:active {
  font-size:     90%;
  color:         #c8d5e1;
  text-align:    left;
  line-height:   105%;
  font-weight:   bold;
  text-decoration: none;
  border-bottom:    thin dotted #c8d5e1;
}

h1 {
   font-size:      110%;
   color:          #223a51;
}

h2 {
   font-size:     100%; 
   color:         #4674a0;
}

a:link {
  color:            #223a51;
  text-decoration:  none;
  border-bottom:    thin dotted #223a51;
}

a:hover {
  color:            #ffffff;
  text-decoration:  none;
  border-bottom:    thin dotted #ffffff;
}
a:visited {
  color:            #223a51;
  text-decoration:  none;
  border-bottom:    thin dotted #223a51;
}