/* CSS Reset
------------------------------------------------------------*/
* {
	margin:0;
	padding:0;
	border: 0;
	outline:0;
	font-size:1em;
	text-decoration:none;
	font-weight: normal;
	font-size: 100%;
}
*:focus {
	outline: none;
}
strong {
	font-weight: bold;
}

/* General styles
------------------------------------------------------------*/
body {
	font-family: Helvetica,"Helvetica Neue",Arial,sans-serif;
	font-size: 14px;
	color: #777777;
	background-color:#2276cc;
	text-align: center;
}
a {
	color: #0077CC;
}
a:hover {
	text-decoration: underline;
}
#center {
	width: 550px;
	height: 280px;
	position: absolute;
	left: 50%;
	top: 30%;
	margin-left: -275px;
	margin-top: -140px;
}

/* Layout
------------------------------------------------------------*/

/* centered */

#container {
	width: 552px;
	height: 287px;
	margin: 50px auto;
	position: relative;
}

#logo {
	font-size: 32px;
	font-weight: bold;
	color: #333333;
	text-transform: lowercase;
	display: block;
	float: left;
	margin: 0 0 7px 0;
}
	#logo span {
		color: #0077CC;
		font-weight: inherit;
	}
	#logo span.beta {
		text-shadow: #AFAFAF;
		color: #E4E4E4;
	}
	a#logo:hover {
		text-decoration: none;
	}

#teaser {
	font-size: 16px;
	color: #777777;
	float: left;
	margin: 0 0 15px 0;
	clear: left;
}

.box {
	width: 478px;
	height: 528px;

	text-align: left;

	background: #F5F5F5;
	background: -moz-linear-gradient(
		top,
		#F5F5F5 0%,
		#F5F5F5 50%,
		#DFDFDF);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#F5F5F5),
		color-stop(0.50, #F5F5F5),
		to(#DFDFDF));

	padding: 25px 35px;
	position: relative;
	border: 1px solid #FFFFFF;
	text-shadow: 0 1px 0 #FFFFFF;
	position: absolute;
	left: 0;
	top: 0;

	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 0 2px 10px #303030;
	-moz-box-shadow: 0 2px 10px #303030;
	-o-box-shadow: 0 2px 10px #303030;
	box-shadow: 0 2px 10px #303030;
}
	.box.about {
		background: #636363;
		background: -moz-radial-gradient(center 45deg,circle cover, #848484, #505050);
		background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#848484), to(#000000));
		color: #ffffff;
		text-shadow: 0 1px 0 #000000;
		border: 1px solid #59595e;
	}


	.page {
		width: 478px;
		margin: 30px auto;
		overflow: auto;

		text-align: left;
	
		background: #F5F5F5;
		background: -moz-linear-gradient(
			top,
			#F5F5F5 0%,
			#F5F5F5 50%,
			#DFDFDF);
		background: -webkit-gradient(
			linear, left top, left bottom, 
			from(#F5F5F5),
			color-stop(0.50, #F5F5F5),
			to(#DFDFDF));
	
		padding: 25px 35px;
		border: 1px solid #FFFFFF;
		text-shadow: 0 1px 0 #FFFFFF;
	
		-webkit-transition-duration: 1s;
		-moz-transition-duration: 1s;
		-o-transition-duration: 1s;
		transition-duration: 1s;
	
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-o-border-radius: 10px;
		border-radius: 10px;
	
		-webkit-box-shadow: 0 2px 10px #303030;
		-moz-box-shadow: 0 2px 10px #303030;
		-o-box-shadow: 0 2px 10px #303030;
		box-shadow: 0 2px 10px #303030;		
	}


/* general */




#back {	
	visibility: hidden;
	opacity: 0;
	
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.flipped #back {
	visibility: visible;
	opacity: 1;

	-webkit-transform: rotateY(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}			
.flipped #front {
	visibility: hidden;
	opacity: 0;
	
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotateY(180deg);
}

#content {
	float: none;
	clear: both;
}

#inputs {
	clear: both;
	overflow: hidden;
	height: 90px;
	padding: 100px 0 0 0;
}

label {
	font-size: 16px;
	color: #333333;
	float: left;
	margin: 0 24px 0 0;
	display: block;
}
	label span {
		font-size: 12px;
		color: #777777;
	}
	label.from_timezone {
		margin: 0 7px 0 0;
	}
	label.to_timezone {
		margin: 0;
	}

#swap {
	display: block;
	height: 60px;
	width: 18px;
	overflow: hidden;
	float: left;
	margin: 0 7px 0 0;
	position: relative;
}
	#swap a {
		color: #E4E4E4;
		display: block;
		overflow: hidden;
		height: 18px;
		width: 18px;
		position: absolute;
		left: 0;
		top: 26px;
		font-family: Arial;
	}
		#swap span {
			font-weight: bold;
			font-size: 24px;
			display: block;
		}
			#swap span.right {
				position: absolute;
				right: 0;
				top: -11px;
			}
			#swap span.left {
				position: absolute;
				left: 0;
				top: -3px;
			}
		#swap a:hover {
			text-decoration: none;
		}
			#swap a:hover span.right,
			#swap a:hover span.left {
				color: #0077CC;
			}

#time {
	padding: 4px 5px;
	font-size: 16px;
	border: 1px solid #BBBBBB;
	height: 20px;
	background: #FFFFFF;
	width: 70px;
	display: block;
	clear: left;
	margin: 3px 0;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 1px 1px 2px #AFAFAF inset;
	-moz-box-shadow: 1px 1px 2px #AFAFAF inset;
	-o-box-shadow: 1px 1px 2px #AFAFAF inset;
	box-shadow: 1px 1px 2px #AFAFAF inset;
}
	.inactive {
		color: #BBBBBB;
	}

.timezone {
	padding: 2px 2px 2px 5px;
	font-size: 16px;
	border: 1px solid #BBBBBB;
	background: #FFFFFF;
	height: 20px;
	height: 30px;
	width: 170px;
	display: block;
	clear: left;
	margin: 3px 0;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 1px 1px 2px #AFAFAF inset;
	-moz-box-shadow: 1px 1px 2px #AFAFAF inset;
	-o-box-shadow: 1px 1px 2px #AFAFAF inset;
	box-shadow: 1px 1px 2px #AFAFAF inset;
}

.convert {
	font-size: 14px;
	color: #ffffff;
	padding: 7px 20px;
	font-weight: bold;
	background: #378ce0;
	background: -moz-linear-gradient(
		top,
		#489cf0 0%,
		#2277cc);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#489cf0),
		to(#2277cc));
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 1px solid #2277cc;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-o-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
	margin: 5px 0 0 188px;
	display: block;
	clear: both;

	-webkit-background-clip: border-box;
}
	.convert:hover,
	.convert.over {
		background: #1263b4;
		background: -moz-linear-gradient(
			top,
			#2277cc 0%,
			#004d99);
		background: -webkit-gradient(
			linear, left top, left bottom, 
			from(#2277cc),
			to(#004d99));
		border: 1px solid #004d99;
		-moz-box-shadow:
			0px 1px 3px rgba(000,000,000,0.5),
			inset 0px 0px 1px rgba(255,255,255,0.5);
		-webkit-box-shadow:
			0px 1px 3px rgba(000,000,000,0.5),
			inset 0px 0px 1px rgba(255,255,255,0.5);
		text-shadow:
			0px -1px 0px rgba(000,000,000,0.7),
			0px 1px 0px rgba(255,255,255,0.3);
	}

#error {
	color: #CC3333;
	padding: 6px 0 4px 0;
	text-align: center;
	clear: both;
}

#info {
	height: 25px;
	width: 24px;
	padding: 0 1px 0 0;
	display: block;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	font-style: italic;
	color: #FFFFFF;
	background: #e4e4e4;
	font-family: Times, "Times New Roman", serif;
	text-shadow: 0 1px 1px #AFAFAF;
	border: 1px solid #f5f5f5;
	position: absolute;
	right: 25px;
	top: 20px;

	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	-o-border-radius: 13px;
	border-radius: 13px;

	-webkit-box-shadow: 0 0 1px #AFAFAF inset;
	-moz-box-shadow: 0 0 1px #AFAFAF inset;
	-o-box-shadow: 0 0 1px #AFAFAF inset;
	box-shadow: 0 0 1px #AFAFAF inset;

	-webkit-background-clip: padding-box;
}
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		#info {
			width: 25px;
			padding: 0;
			font-size: 22px;
		}
	}
	a#info:hover {
		text-decoration: none;
		background: #0077CC;
		background: -moz-linear-gradient(
			top,
			#489cf0 0%,
			#2277cc);
		background: -webkit-gradient(
			linear, left top, left bottom, 
			from(#489cf0),
			to(#2277cc));
			-moz-box-shadow: none;
			text-shadow: none;
		border: 1px solid #2277cc;
		text-shadow:
			0px -1px 0px rgba(000,000,000,0.7),
			0px 1px 0px rgba(255,255,255,0.3);
	}


#converted {
	padding: 60px 0 10px 0;
	display: block;
	text-align: center;
	font-size: 16px;
}

#converted span {
	display: block;
	clear: both;
	margin: 5px 0 10px 0;
	font-size: 30px;
	font-weight: bold;
	color: #000000;
}

#offset {
	display: block;
	text-align: center;
	margin: 15px 0 40px 0;
}

#all li {
	list-style-type: none;
	display: block;
	width: 235px;
	float: left;
}
	#all a {
		font-size: 9px;
	}

.about p {
	margin: 0 0 12px 0;
}
	.about p.title {
		font-weight: bold;
		margin: 5px 0 10px 0;
	}
	.about a {
		color: #7FBFFF;
	}
	.about #copyright {
		color: #BFBFBF;
		float: left;
		margin: 5px 0 0 0;
	}
	.about .flip {
		float: right;
		margin: 5px 0 0 0;
	}



/*
	pagination
*/
.pagination {
	display: block;
	clear: both;
	padding: 10px 0;
	height: 15px;
}
.pagination li {
	display: block;
	list-style-type: none;
	float: left;
	margin: 0 3px;
}

/*
	social
*/
#social {
	height: 22px;
	position: absolute;
	bottom: 20px;
	right: 25px;
}
	#social .item {
		height: 22px;
		float: right;
	}