/*UNIVERSAL CSS................................ */

* {
    margin:0;
    padding:0;
    border:0;
    
} /* This makes no margin or padding for page outside container */

body {
    text-align:center;
    margin:0 auto 0 auto;
    
} /* centers page for IE and takes away small border around page for IE*/

.content {
    width:100%;
    background-color: #EEEEEE;
    
}/* So the entire page is 100%  */

.container {
    margin:0 auto 0 auto;
    max-width:1000px;
    
}

.header {
    width:100%;
    background-color:black;
    
}

.nav {
    max-width:1000px;
    background-color:black;
    margin:0 auto 0 auto;
    font-family:candara light;
    color:#cccccc;
    height:3.25em;
    font-style:italic;
}

@media screen and (min-width: 600px) {
  div.nav {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 600px) {
  div.nav {
    font-size: 1em;
  }
}

.menu {
    text-align:left;
    
}

#logo {
    margin:auto auto auto 1em;
    max-width:4em;
    height:auto;
    
}

ul {
    list-style-type:none;
    padding:0;
    
}

li {
    float:left;
    margin-left:1.5em;

}

#navList {
    margin-top:1em;
}

.main {
    width:100%;
    background-color:#EEEEEE;
    
}

.footer {
    width:100%;
    background-color:black;
    height:3.25em;
    
}

.foottxt {
    max-width:960px;
    margin:0 auto 0 auto;
    font-family:candara;
    font-size:1em;
    color:#FFFFFF;
    text-align:left;
    
}

a:link {text-decoration:none;color:#CCCCCC;}    /* unvisited link */
a:visited {text-decoration:none;color:#CCCCCC;} /* visited link */
a:hover {text-decoration:none;color:#FFFFFF;}   /* mouse over link */
a:active {text-decoration:none;color:#CCCCCC;}  /* selected link */

a.textlinks:link {text-decoration:none;color:red;}    /* unvisited link */
a.textlinks:visited {text-decoration:none;color:red;} /* visited link */
a.textlinks:hover {text-decoration:none;color:#FFFFFF;}   /* mouse over link */
a.textlinks:active {text-decoration:none;color:red;}  /* selected link */


/*MAIN PAGE CSS................................... */

.billboard {
    max-width:1000px;
    width:100%;
    margin:0 auto 0 auto;

}

#bb {
    max-width:100%;
    height:auto;
}

#btn {
    margin:340px 0 0 400px;
    
}

.textHome {
    text-align:left;
    font-size:18px;
    border-right-style: solid;
    border-left-style: solid;
    border-color:white;
    border-width: .25em;
    
}

.textHome h1 {
    font-size:1.75em;
    font-family: candara;
}

.textHome p {
    margin:1em 1em 0 1em;
    font-family: 'Cardo', Georgia, Times, serif;
}

/*TRIPS CSS.................................. */

.textTrips {
    max-width:1000px;
    margin:0 auto 0 auto;
    font-family:calibri;
    font-size:1em;
    background-color:#FFFFFF;
    text-align:left;
    box-shadow: .2em .2em .4em #000;
    
}

.head1 {
    padding:1em 0 1em 0;
    font-family:candara;
    text-align:left;
    font-size:2em;
}

@media screen and (min-width: 600px) {
  .head1 {
    font-size: 2em;
  }
}

@media screen and (max-width: 600px) {
  .head1 {
    font-size: 1.5em;
  }
}

.totals {
    font-size:1.75em;
    margin:0;
    padding-top:1em;
}

.story {
    margin:0 10% 0 10%;
    
}

.aStory img {
    width:240px;
    height:180px;
    margin:0 0 2em 1em;
    
}

#vertPic {
    width:180px;
    height:240px;
    margin:0 0 2em 1em;
    
}

.sideTrip {
    font-size:1em;
}



details > summary {
  
  cursor:pointer;
  font-size:1.5em;
  
}

/*PICS CSS................................ */

.textPics {
    max-width:1000px;
    margin:0 auto 0 auto;
    font-family:calibri;
    font-size:1em;
    background-color:#FFFFFF;
    text-align:left;
    box-shadow: .2em .2em .4em #000;
    
}

.storyPics {
    margin:0 10% 0 10%;
    
}

.storyPics img {
    
    width:6em;
    height:6em;
    object-fit:cover;
    margin:auto 0 auto 0;
    
}


/*MAIN PAGE AND TRIPS CSS ......................*/

h1 {
    text-align:center;
    
}



/*TRIPS AND PICS CSS....................... */

.head2 {
    padding:1.5em 0 .75em 1.5em;
    
}

@media screen and (min-width: 600px) {
  .head2 {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 600px) {
  .head2 {
    font-size: 1em;
  }
}

.storyPics details a {
    text-align:center;
}