@charset "utf-8";
/* CSS Document */
body{ padding:0px; margin:0px; background-color:#ccc;}


#login{ width:auto; display:none; border-radius:10px; font-family:Verdana, Geneva, sans-serif; height:auto; top:10px; margin:10px auto; background:linear-gradient(#999, #CCC); padding:20px; box-shadow:2px 4px 15px #666;}
#login label{ padding:5px; margin:10px 0; width:100%; display:block;}
#login{ background:linear-gradient(45deg, #ccc 50%, #fff 50%, #999); border:0px; border-radius:5px; padding:20px; font-size:1em;}

.my_logo{ flex-direction: column; display:flex; background:#CCC;}
#navigation, #displayImages, #footer, .workbody{
	background: rgba(0,102,153,.08);
	border-radius:8px;
	padding:10px;
	margin:10px;
	display:flex;
	justify-content: center;
	}
#footer{
	

	display:flex;
	flex-direction: row;
	justify-content: space-around;
	align-items:center;
	
}

#footer > * {
	color: #333;
	font-size: 14px;
	font-weight:bold;
	font-family: Verdana, Geneva, sans-serif
	}

#navigation{
	
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	
#navigation ul{
	display:flex;
	flex-direction: row;
	justify-content:space-around;
	}
	
#navigation li{
	margin:10px;
	border:1px solid #CCC;
	border-radius:8px;
	background-color: #FFF;
	padding:10px 25px;
	color: #03F;
	font-family:Arial, Helvetica, sans-serif;
	font-stretch:expanded;
	font-size:12px;
	font-weight:bold;
	list-style:none;
	}
	
#navigation li:hover{
	background-color:#06C;
	color: #fff;
	}



.mysamples{ display:flex }
.mysamples ul{ flex-direction: column; flex:1; display:flex;}
.mysamples li{ }
.accountCreated{ font-size:1em; font-family:Verdana,ay Geneva, sans-serif; background:green; padding:20px; color:white; text-decoration:none; text-align:center;}
/* Mobile Layout: 480px and below. */
.appTesterApp{ display:none; width:auto; height:auto; padding:10px; position:absolute; top:50px; right:0px; }
.appTesterApp span{ color:#FFF; width:97px; font-family:Verdana, Geneva, sans-serif; font-size:.8em; border-radius:2px; padding:10px; display:block; background-color:#0CF; line-height:20px; margin:10px 0;}
.appTesterApp strong{ color:#000;}

/*link to display none at startup*/
#settings, #logoUpload, #companyInfo{ display:none;}

.wrap{ width:80%; height:auto; margin:auto;  background-color:#CCC; border-radius:5px; box-shadow:2px 2px 3px #111;}
.wrap ul, .wrap li{ margin:0px; padding:0px;}
.wrap li{ width:200px; height:auto;}
.wrap img{
	width:240px;
	height:300px;
	}
#screenSize{
	background: black none repeat scroll 0 0;
    border-radius: 0 0 5px 5px;
    color: #ff0;
    float: left;
    font-family: Verdana;
    font-size: 0.6em;
    height: auto;
    margin: 0;
    padding: 5px;
    position: absolute;
    top: 0;
    width: auto;
}

#displayImages{ height:auto;  min-height:400px;}
#displayImages ul, #displayImages li{ margin:0px; padding:0px;}
#displayImages ul{}
#displayImages li{
	border-radius:5px; text-align:center;
	height:auto;
	margin:10px;
	padding:10px;
	background-color:#fff;
	list-style:none;
	overflow:hidden;	
	display:flex;
	justify-content:space-between;
}

.startNow h1{
	border: 1px solid #ccc;
	font-size:16px;
	font-family:Verdana, Geneva, sans-serif;
	text-align: center;
	padding: 10px;
}

#myLinks{
	
	
    margin: 3px 5px;
    
	}
	
#myLinks ul, #myLinks li{ padding:0px; margin:0px;}

#myLinks > li{
	padding:10px 20px;
	margin: 5px;
	}
	
#myLinks > li:hover{}
#myLinks a{
	}
#allImagesUploaded{ display:none;}

.workbody{
	min-height: 200px;
	flex: 1;
	display: flex;
	justify-content: space-between;
	}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */



@media only screen and (min-width: 360px) {
	
	#noshow{ display:none;}
	.startNow h1{
		font-size:16px;
		}
	
	#navigation{}
	#navigation ul{
		flex-direction:column;
		padding: 0px;
		flex:1;
		}
	#navigation li{
		
		}
	#myLinks ul{}
	#myLinks li{}
	
	#displayImages li{ align-self: stretch;}
	#login{ margin:-200px auto; top:0px; z-index:50;}
	#login{ width:300px; display:none; border-radius:10px; font-family:Verdana, Geneva, sans-serif; height:auto; top:10px; margin:10px auto; background:linear-gradient(#999, #CCC); padding:20px; box-shadow:2px 4px 15px #666;}
	#login label{ padding:5px; margin:10px 0; width:100%; display:block;}
	#login{ background:-webkit-linear-gradient(45deg, #ccc 50%, #fff 50%, #999); border:0px; border-radius:5px; padding:20px; font-size:1em;}	
	#displayImages li{}
	h1{
		font-size:16px;
		}
	
	#screenSize{ display:none;}
}


@media only screen and (min-width: 640px) {
body{ background-repeat:no-repeat; background-position:top;}
#myLinks > li{
		padding:10px 6px;
		margin: 5px 0px;	
	}

#navigation ul{
	
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	}
#navigation li{
	
	margin: 0px 8px;
	
	}
.appTesterApp{ display:block;}

#displayImages li{
	}

#myLinks ul{ background-color:red;}
#myLinks ul{}
	#myLinks li{}

}

@media only screen and (min-width: 768px) {
	body{ background-repeat:no-repeat; background-position:top;}
	#login{ margin:50px auto !important; top:50px !important;}
}
@media only screen and (min-width: 1024px) {
	body{ background-repeat:no-repeat; background-position:top;}
	li h1{ font-size:12px;}
	#displayImages li{}
	#noshow{ display:block;}
		#navigation{}
		#myLinks ul{}
}
@media only screen and (min-width: 1280px) {
	
	body{  background-repeat:no-repeat; background-position:top;}
	#myLinks > li{
		padding:10px 20px;
		
	}	
}


@media only screen and (min-width: 1680px) {
	body{ background-repeat:no-repeat; background-position:top;}
	h1{ font-size:12px;}
}
@media only screen and (min-width: 1920px) {
	h1{ font-size:12px;}
	#login{ margin:100px auto !important; top:100px !important;}
	body{ background-repeat:no-repeat; background-position:top;}
#displayImages li{}
details ul > li{ border:none !important; box-shadow:none; color:#F00; width:100%; display:block; height:50px !important; float:left; line-height:50px; margin:0px;}
}