@import url('//fonts.googleapis.com/css?family=Open+Sans');
/* Have to use @import for the font, as you can only specify a single stylesheet */

html {
    width: 99%;
    background-color: lightblue;
    min-height:100%;
    color:#61666c;
    font-weight:400;
    font-size:1em;
    font-family:'Open Sans', sans-serif;
    line-height:1.5em;
}

body {
    //-webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
    //animation: mymove 1s;
}

h1 {
    text-align: center;
    color: navy;
    margin-top: 0px;
}

h1 > a {
    text-decoration: none;
}

h1 > a:hover {
    color: #61666c;
}

.header {
    margin: auto;
    /*width: 99%;*/
    /*border:3px solid #8AC007;*/
    margin-top: 10px;
    margin-bottom: 10px;
}

.content {
    text-align: center;
}

#bingImage {
    width: 65%;
    margin-top: 10px;
}

.navigation {
    margin: auto;
    /*width: 90%;*/
    min-width: 485px; /* adjust when navigation bar entries change */
    padding: 0px;
    /*border:3px solid #8AC007;*/
}
.navigation ul{
/* positioning */
    position: relative;
    z-index: 1000;
    text-align: center;
/* remove the dots next to list items: */
    list-style: none; 
/* get rid of any default or inherited margins and padding: */
    margin: 0;
    padding: 0;
/* styling: */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 15px;
}

/* we're using the direct descendant selectors > to ONLY affect the main menu items */
.navigation > ul > li {
    text-align: left;
/*    border:3px solid #8AC007;*/
    display: inline-block;

/* positioning */
    position: relative;
    /*float: left;
/* styling: */
    margin-right: 10px;
}

.navigation > ul > li > a {
    /*border:3px solid #8AC007;*/
/* positioning */
    display: inline-block;
/* styling: */
    background-color: #2c2c2c; /* grey */
    padding: 8px 14px;
    text-decoration: none;
    color:#aaaaaa;
}

.navigation > ul > li > a:hover{
/* styling: */
    background-color:#666666; /* grey */
    color:#eeeeee; /* light grey */
}

.navigation ul ul{
    text-align: left;
    /*background-color:#e6056f; /* remove. this is for illustration purposes only */
    width:340px; /* you need a width to accommodate tertiary menus */
    
    position:absolute;
    z-index:100;
    
    height: 0;
    overflow: hidden;

    /* change animation speed here */
    -webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.2s ease-in;
}


/* don't display tertiary box yet */
.navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
    height:0;
    
}
/* tertiary drop-down box */
.navigation ul ul ul{
    left:170px;
    width:170px;
}

.navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
.navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
    height: 500px; /* need a height to accommodate any tertiary menus */
	/*border: 3px solid #8AC007;*/
}

/* drop-down item styles */
/* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */

.navigation ul ul li{
    background-color:#eaeaea; /* grey */
    width:170px;

    -webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
}

.navigation ul ul li:hover {
    background-color:#999; /* grey */
}

.navigation ul ul li a {
    display:block;
    text-decoration:none;
    margin:0 12px;
    padding:5px 0;
    color:#4c4c4c; /* grey */
}
.navigation ul ul li a:hover, .navigation ul ul li:hover > a {
    color:#ffffff; /* white */
}

.navigation ul ul ul li a{
            border:0 !important;
        }
        .navigation ul ul ul li + li a{
            border-top:1px dotted #999 !important;
        }
        .navigation ul ul li + li a{
            border-top:1px dotted #999;
        }
        .navigation ul ul li:hover + li a{
            border-top:1px solid #eaeaea;
        }
        .navigation ul ul ul li:hover + li a{
            border: 0 !important;
        }
        .navigation ul ul ul li:hover + li{
            border-top:1px solid #999 !important;
        }


/*
ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: orange;
}
*/

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
	from {background-color: white;}
    to {background-color: lightblue;}
}

/* Standard syntax */
@keyframes mymove {
	from {background-color: white;}
    to {background-color: lightblue;}
}