/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	body {
		background-color: #333;
		font-family: Arial;
	}
	
	h1 {
		font-size: 32pt;
		color: #A4C045;
		text-align: center;
		padding: 5px;
		margin: 5px;
	}
	
	#main {
		border: 3px solid #A4C045;
		background-color: #FFF;
		color: #222;
		padding: 20px;
		margin: 20px;
		border-radius: 15px;
	}
	
	#main table tr {
		margin: 0;
		padding: 0;
	}
	
	#main table td {
		padding: 5px;
	}
	
	#main table td:first-child {
		width: 100%;
		padding-left: 0;
	}
	#main table td:last-child {
		padding-right: 0;
	}
	
	#longurl {
		width: 100%;
		font-size: 16pt;
		height: 30px;
		
		border: 3px solid #A4C045;
		background-color: #ddd;
		color: #333;
		
		padding-left: 2px;
		
		border-radius: 7px;
	}
	
	#longurl:focus {
		outline: none;
		background-color: #fff;
	}
	
	#shortit {
		width: 80px;
		height: 36px;
		
		font-weight: bold;
		
		border: 3px solid #A4C045;
		background-color: #ddd;
		color: #333;
		
		text-align:center;
		
		cursor: pointer;
		
		border-radius: 7px;
	}
	
	#shortit:hover, #shortit:focus {
		outline: none;
		background-color: #fff;
	}
	
	#result_container {
		display: none;
		text-align: center;
		width: 100%;
	}
	
	#result_container table {
		width: 100%;
	}
	
	#result {
		width: 99%;
		background-color: #DDD;
		border: 3px solid #A4C045;
		font-size: 12pt;
		padding-left: 2px;
		
		cursor: pointer;
		
		border-radius: 7px;
	}
	
	#result:focus {
		outline: none;
	}
	
	.footer {
		font-size: 8pt;
		color: #ddd;
		text-align: center;
	}
	
	input::-webkit-input-placeholder {color:#bbb; font-style:italic;} /* chrome/safari */
	input::-moz-placeholder {color:#bbb; font-style:italic;} /* firefox >= 19 */
	input:-ms-input-placeholder {color:#bbb; font-style:italic;} /* ie */
	input:-moz-placeholder {color:#bbb; font-style:italic;} /* firefox <= 18 */
	
	*::selection {background: #A4C045;}
	*::-moz-selection {background: #A4C045;}
	

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
		line-height: 2.5em;
	}

}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}