/* The body and #main settings are establsihed to make a PC browser look a bit like a phone.
  The media query at the end of the file then removes these settings for actual phones.
*/
body, html {
  height: 100%;
  line-height: 1.2;
  background-color:white;
}

.bgimg {
    background-position: center;
    background-size: cover;
    background-image: url("kbdMouse2.jpg");
    min-height: 100%;
}

.topLogo {
    float:right;
    max-width:100px;
}

h2 {
    text-align: center;
}

#main, #myNavbar, #contact, #promo
{
    max-width:1200px;
    margin-left: auto;
    margin-right: auto;
}

.promo {
	font-size:0.9em;
	color: Gray;
	text-align: center;
    background-color:#eee;
    border-top:1px darkgray solid;
    width:100%;
    position: fixed;
    bottom:0;
}
.promo p
{
    padding:0;
    margin:0
}

.appPanel {
    width: 80%;
    background-color: #ffffffdd;
    box-shadow: 5px 5px 9px 0px #4f4f4f;
    margin-left: auto;
    margin-right: auto;
    border: 1px gray solid;
    padding-left: 0;
}

.appPanel h2 {
    margin: 0;
    color:blue;
}

.appPanel p {
    margin: 0;
}
.appPanel a {
    text-decoration:none;
}
.appImg {
    float: left;
    margin-right: 1em;
}
.appLogo {
    height:2em;
}
#hdrText {display:inline-block; padding:1em; background-color:#aaaaaa;}

@media (max-width: 599px) {
.appImg { max-width:45% }
.appLogo {max-width:45% }
.appPanel p {clear:both; padding:0.5em;}
.appPanel {width:90%;}
}