/*Style sheet for Compass Programming*/
/*used for the FTP tutorial page*/
img.tutorial{width: 50%; max-width: 450px; min-width: 250px;}
.tutorial{width: 50%; max-width: 450px; min-width: 250px;}
/*Used throughout pages*/
#wrapper{ width:100%; }
#tagLine{text-align:center; background: #666666; padding:10px 0px;}
.imageContainer{margin: auto; position: relative; text-align:left; background-color: #666666; color:#fff;}
.imageCss{width:100%; margin:0 auto; text-align:center;}
.imageCss img{width:100%; max-height: 400px;}
.bottom-left{padding: 5px;border-radius: 15px;background-color: #666666; position:absolute; bottom: 30px; left: 53px;}
#pageContent{ width:90%; margin:0 auto; min-height:400px; padding-bottom:10px;}
#pageContent p{padding: 0px 10px;}
#joshPic{display:inline-block; width:230px; height:270px; vertical-align:top; color:#ffffff; position: relative;}
.meInfo{display:inline-block; width:70%; min-width:200px; }
figure{float:right; max-width:450px; height: auto; overflow:hidden; padding:5px; text-align:center; color: #000000;}
#mobile{float:right; max-width:450px; height: auto; overflow:hidden; padding:5px;}
#mobileFriend{margin:auto; height:auto; text-align:center; width:100%;}
.mobileImage{width:45%; display:inline; margin:10px;}
h1, h2, h3{color: #000000; text-align:center;}
p{color: #000000;}
.fontBlack{color: #000000; padding:10px;}
p a{color:#000000;}
li {color: #000000; padding-bottom:5px;}
li > * {
    vertical-align: text-top;
}
dt {color: #000000;}
/*end */
.logo{border-radius: 125px;vertical-align:middle; margin:5px;display:inline;}
}
/*.logoWords{display:inline; }*/
/*to top icon */
.topBtn {padding: 5px; text-decoration: none; position: fixed; bottom: 50px; right: 20px; }
.topBtn2{ width: 50px;
    height: 80px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    display: none;
    text-indent: -9999px;
    background: url('/images/toTop.png') no-repeat;
    background-color: #000;
	border-radius: 15%;
}
.topBtn img{border-radius: 10%;}
/*menu css*/
#menuLocation{width: 100%; min-height: 40px; height: auto; margin: 0 auto; text-align:center;}
.topnav ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;}
ul.topnav li.icon {display: none;}
ul.topnav li {display:inline-block; list-style-type: none;	}
ul.topnav  li a {font-weight: 700; display: block; color: #000000; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 18px;  }
ul.topnav li a:hover {color: #228B22;}
.icon li {display: none;}
.hamburger{	font-size:15px;	}
.fullLine{	height: 1px;	background: #000000;	border-bottom: 1px solid #C0C0C0;}
/*end of menu css*/

li a, .dropbtn {display: inline; text-align: center; padding: 14px 16px; text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn { color:  #FFA500;}
li.dropdown {display: inline-block;}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;  color: #FFA500;}
.dropdown:hover .dropdown-content {  display: block; }

/*end of menu*/
.linkIt{text-decoration:none; color:#000000;}
#footer{text-align:center; margin: 0 auto; padding: 10px 0px; background: #666666;}
#footer p {color:#ffffff;}
#footer a {color:#ffffff;}
.iconImage{text-decoration:none; vertical-align: middle;}
.iconText{line-height:60px; font-size:18px; padding: 0 0 30px 5px;}
/*used for the contact page*/
.formSpace{padding: 0px 10px;}
.contact_inv{width:22%; display:inline-block; vertical-align:top; height: 60px;}
/*used for QR code*/
 .qrCode {max-width: 200px; margin: 10px;}
 #createQr {margin:15px;}
@media screen and (max-width:1006px) {
	.contact_inv{width:48%; display:inline-block; vertical-align:top; height: 80px;}
}
@media screen and (max-width:800px) {
/*	body{background-image: none; background-color: #000000;}*/
	.makingMobile{width:90%; height:auto;}
	#menuLocation{width: 80%; }
	#pageContent{width:90%; padding:0px;}
	#footer{width:100%; }
	p{padding:10px; }
	ul.topnav li:not(:first-child) {display: none;}
	ul.topnav li.icon {display: block;background-image: url('/images/menuPlus.png');background-repeat: no-repeat; background-position:center;}
	ul.topnav.responsive {position: relative; padding:0px;}
	ul.topnav.responsive li.icon {display: block;background-image: url('/images/menuMinus.png');background-repeat: no-repeat; background-position:center;}
	ul.topnav.responsive li {float: none; display: inline;  }
	ul.topnav.responsive li a {display: block; border-bottom:solid 2px; }
	.dropdown-content{ position: relative; }
	.hamburger{  width: 170px; height: 35px;  border-bottom: none !important; margin:auto;}
	#joshPic{margin:auto; width:100%; height:270px; text-align:center;}
	.meInfo{width:100%;}
}
@media screen and (max-width:730px) {
	figure{margin:auto; width:90%; height:auto; text-align:center; float:none; }
	#mobile{margin:auto; width:90%; height:auto; text-align:center; float:none;}
	.mobileImage{width:90%; }
	.bottom-left{padding: 5px;border-radius: 15px;background-color: #666666; position:inherit;}
}
@media screen and (max-width:500px) {
    h1{font-size:100%; }
   /* ul.topnav li a{padding: 15px 10px 10px 10px; } */
	.contact_inv{width:100%; height:60px;}	
}