a:link {
    color: #CC6600;
    text-decoration:none;
}
a:visited {
    color: #FF3300;
    text-decoration: none;
}
a:hover {
    color: #333333;
    }  /* these properties set how the links will look - color and hover and visited */



   
body {
    font-family: 'PT Sans', sans-serif;
    font-size: 16px;
    }  /* this sets the font properties for the whole site */


img {
     width: 100%;
     height: auto;
}  /* this says to make all images conform to the size of their container and be responsive to size of broswer or device */

#thumbnail {
    width: 30%;
    height: auto;
}

#thumbnail2 {
    width: 60%;
    height: auto;
}


#container {
    width: 90%;
    height: 90%;
    background: #FFFFFF;
    margin: 0 auto;
    overflow: hidden;  
} /* this sets the container in which everything else is nested to fill 90% of screen, have a white background, the border style and color and to hide anything that overflows the exterior and the margin auto tells it to horizontally center this container */


#banner {
    height: auto;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}  /* this tells the banner to fill the space in width and adjust height to size of screen and that the space should contain the image and not repeat it if it's too small for the space */


#menubar
 {     margin: 0px;
    float: left;
    height: 5%;
    width: 90%;    
} /* this sets the position of the menubar div */

ul#menu
{ float: right;
  margin: 0;} /* this sets the position of the menu div */
  

ul#menu li
{ float: left;
  margin: 5px 0 0 0;
  padding: 0 0 0 0px;
  list-style: none;} /* this sets the list items to float left, the margin around them, and the padding for the list items */
  

ul#menu li a
{
    letter-spacing: 0.1em;
    font-family: 'PT Sans', sans-serif;
    font-size:24px;
    display: block;
    float: left;
    height: 45px;
    width: auto;
    text-decoration: none;
    padding: 8px 10px 5px 12px;
    text-align: center;
    color: #FF6600;
    border: none;
} /* this formats the list item link properties so that they are in a block display, centered text in each block, color, border, etc. */


ul#menu li.tab_selected a
{ height: 45px;
  padding: 8px 26px 5px 12px;}

ul#menu li.tab_selected
{
    margin: 10px 0 0 0;
    background: transparent;
}

ul#menu li.tab_selected a
{
    background: transparent;
    color: #333333;
}

ul#menu li.tab_selected a:hover, ul#menu li a:hover
{
    color: #333333;
    background-color: #FFFFFF;
}  /*  these ul#menu properties just tell the menu items what to do when you select or hover over an item */


.container-fluid {
     padding: 30px 10px 10px 10px;
     
    } /*this sets the padding in the responsive container div class nested within the larger container */
    

.column1 {
     width: 50%;
     height: auto;
     float: left;
     padding: 10px 50px 30px 10px;
} /* this sets size and position and padding within the column1 div class */


.column2 {
     width: 40%;
     height: auto
     background-size: contain;
     border: medium solid #000000;
     float: left;
     padding: 20px 10px 10px 10px;
} /* this sets the size and position and formatting within the column2 div class */


#footer {
    background-color: #FFCCFF;
    padding: 20px 10px 10px 10px;
    width: 20%;
    height: 10%;
    font-size:14px;
}  /* this sets the position and formatting for the footer div */