/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
	#header, #upload, #content, #footer {
		float: none;
		width: auto;
		height: auto;
		border: 2px solid #ccc;
		border-radius: 6px;
		background-color: #393939;
		color: white;
	
		margin-top: 1em;
	}
	#header, #footer, h1 {
		text-align:center;
	}
}
@media only screen 
and (min-width : 1224px) {
	#header {
		width: 75%;
		height: 1.5em;
		border: 3px solid #ccc;
		margin: auto;
		border-radius: 6px;
		background-color: #393939;
		color: white;
		padding-top: 2px;
		padding-left: 8px;
	}

	#upload {
		width: 18.75%;
		border: 2px solid #ccc;
		border-radius: 6px;
		background-color: #393939;
		color: white;
		margin: 10px 12.5% 10px 0px;
		float: right;
		display: inline;
	}

	#content {
		width: 54%;
		border: 2px solid #ccc;
		border-radius: 6px;
		background-color: #393939;
		color: white;
		margin: 10px 0px 10px 12.5%;
		/*padding: 10px 10px 10px 10px;*/
		float: left;
		display: inline;
	}

	#footer {
		width: 18.75%;
		height: 20px;
		border: 3px solid #ccc;
		float: right;
		margin: 10px 12.5% 10px 0px;
		border-radius: 6px;
		background-color: #393939;
		color: white;
		text-align: center;
		clear: right;
	}

}

#image {
    width:100%;
    height:100%;
    margin-top:1em;
    text-align: center;
}

body {
	background-color: black;
}

input[type=file] {
	width:80%;
	border:2px solid #ccc; 
	-webkit-border-radius: 6px;
    margin: 5px 10% 5px 10%;
}

input[type=submit] {
	width:80%;
	border: 2px solid #ccc;
	-webkit-border-radius:6px;
	margin: 5px 10% 5px 10%;
}

a {
	text-decoration: none;
	color:white;
}

a:hover {
	text-decoration: underline;
	color:white;
}

a.nav {
	text-decoration: none;
	color:white;
	background-color: #393939;
	border-radius:6px;
}

a.nav:hover {
	background-color: #ccc;
	color: black;
	border-radius:6px;
}

.thumb {
	width: 200px;
	height: 200px;
	display: inline;
	margin: 4px;
	overflow: hidden;
}

img.thumb {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 4px;
}

img.thumb:hover {
	border: 1px solid yellow;
}

img.new {
	max-width:95%;
	height:auto;
	border: 1px solid #ccc;
	border-radius: 6px;
    vertical-align: middle;
    margin-bottom: 8px;
}

ul
{
    list-style-type: none;
}
