@charset "utf-8";
/* 代码整理：易站站长网 */

body {
	position:absolute;
	background:url(../images/rack.jpg);
}
.clear {
	clear:both;
}
.icon {
	background:rgba(64, 67, 76, 0.4);
	display:block;
	height:auto;
	font-family:"微软雅黑";
	font-size:24px;
	color:#FFF;
	text-shadow:2px 1px 1px #000;
	border:1px solid #999;
	border-radius:15px;
	padding:5px 10px;
	cursor:pointer;
	position:absolute;
}
.icon:hover {
	box-shadow:0 0 2px 2px #FFC;
}
#icon_reminder {
	top:30px;
	left:20px;
}
#icon_clock {
	top:90px;
	left:20px;
}
#icon_alarm {
	top:150px;
	left:20px;
}
#icon_blue {
	top:210px;
	left:20px;
}
#icon_contact {
	top:30px;
	left:850px;
}
#icon_mail {
	top:90px;
	left:850px;
}
#icon_cut {
	top:150px;
	left:850px;
}
#icon_hole {
	top:210px;
	left:850px;
}
.container {
	background:url(../images/rack.jpg);
	position:absolute;
	left:200px;
	top:10px;
	width:580px;
	height:auto;
	min-height:570px;
	padding:10px 0;
	border:1px solid #999;
	overflow:hidden;
}
#siri {
	position:absolute;
	bottom:0px;
	width:100%;
	z-index:2;
}
#siri.slice {
	background:url(../images/rack1.jpg);
	box-shadow:0px -4px 20px rgba(0, 0, 0, 0.8);
}
#siri img {
	display:block;
	margin:5px auto;
	width:110px;
	height:110px;
	cursor:pointer;
}
.answer, .ask {
	background:rgba(64, 67, 76, 0.4);
	position:absolute;
	width:500px;
	height:auto;
	min-height:70px;
	margin:10px auto;
	border-radius:15px;
	border:1px solid #999;
}
.ask {
	left:45px;
	top:10px;
}
.answer {
	left:45px;
	top:90px;
	display:none;
}
.ask span, .answer span {
	display:block;
	font-family:"微软雅黑";
	font-size:32px;
	line-height:40px;
	color:#FFF;
	margin:10px 20px;
	text-shadow:2px 1px 1px #000;
}
.module, .module2 {
	background:#F7F7F7;
	position:absolute;
	left:45px;
	top:170px;
	display:block;
	width:500px;
	height:auto;
	margin:20px auto;
	padding:10px 0 20px;
	border-radius:15px;
	opacity:1;
	filter: alpha(opacity=100);
}
.module {
	-webkit-transition:0.6s ease-in-out;
	-moz-transition:0.6s ease-in-out;
	-o-transition:0.3s ease-in-out;
	z-index:2;
}
.module2 {
	-webkit-transition:0.4s ease-in-out;
	-moz-transition:0.4s ease-in-out;
	-o-transition:0.2s ease-in-out;
	z-index:1;
}
.module.rotate {
	opacity:0;
	filter: alpha(opacity=0);
	-webkit-transform:rotate(-10deg) translate(300px, 200px);
	-moz-transform:rotate(-10deg) translate(300px, 200px);
	-o-transform:rotate(-10deg) translate(300px, 200px);
	-ms-transform:rotate(-10deg) translate(300px, 200px);
}
.module2.rotate {
	left:45px;
	top:260px;
	opacity:0;
	filter: alpha(opacity=0);
}
.shadow {
	background:url(../images/shadow.png);
	position:relative;
	width:500px;
	height:12px;
}
#reminder {
	z-index:3;
}
#timer, #alarm {
	background:#CBCBCF;
	z-index:2;
}
#contact, #mail {
	border-radius:0px;
	box-shadow:4px 0px 2px #333;
	z-index:2;
}
#cut, #blue {
	background:none;
	width:504px;
	height:auto;
	padding:0;
	box-shadow:4px 0px 2px #333;
}
/*******************reminder*****************/
.dateInfo {
	width:450px;
	height:90px;
	float:left;
	margin:0px 20px;
}
.date {
	width:90px;
	height:90px;
	line-height:90px;
	float:left;
	font:80px "微软雅黑";
	color:#AF3447;
	text-align:center;
}
.day {
	width:150px;
	height:70px;
	color:#000;
	float:left;
	margin:20px 20px;
	font:26px "微软雅黑";
	line-height:30px;
}
.line {
	background:url(../images/reminder.jpg);
	width:430px;
	height:72px;
	float:left;
	margin:0px 30px;
	border:2px dashed #C8C9CB;
}
.line input[type="text"] {
	background:none;
	height:66px;
	width:342px;
	float:left;
	margin-left:10px;
	font:28px "微软雅黑";
	color:#3F3F3F;
	line-height:32px;
	outline:none;
}
.mark {
	float:left;
	height:72px;
	width:72px;
	cursor:pointer;
}
.marked {
	background:url(../images/remark.png);
}
/*******************clock*****************/

.city, .time {
	float:left;
	width:185px;
	height:128px;
	font:300 32px "微软雅黑";
	line-height:128px;
	color:#000;
	text-align:center;
	text-shadow:0px 2px 2px #FFF;
}
.clock {
	background:url(../images/clockface.png);
	width:128px;
	height:128px;
	float:left;
}
#min, #hour {
	display:block;
}
#hour {
	margin:-128px 0;
}
/*******************alarm*****************/
.alarmClock {
	background:url(../images/timer.PNG);
	float:left;
	width:256px;
	height:128px;
}
.alarmClock span {
	display:block;
	float:left;
	width:128px;
	height:128px;
	font:90px 'Oswald', 'Myriad Pro', arial, serif;
	color:#FFF;
	text-align:center;
	line-height:128px;
	text-shadow:-2px -2px 2px #333;
}
.slide {
	float:right;
	background: url(../images/button.png);
	background-position:0 0;
	width:156px;
	height:56px;
	margin:40px 15px;
	cursor: pointer;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	border-radius: 32px;
}
.slide.hover {
	background-position: -102px 0;
}
/*******************contact*****************/
.infoList {
	width:430px;
	height:auto;
	float:left;
	margin:10px 30px 5px;
	font:16px "Courier New", Courier, monospace;
	letter-spacing:-1px;
	color:#3F3F3F;
	padding:5px 10px;
}
.portrait {
	float:left;
}
.portrait img {
	width:80px;
	height:80px;
}
.name {
	float:left;
	font:bold 22px Georgia, "Times New Roman", Times, serif;
	letter-spacing:1px;
	margin:0 30px;
	line-height:70px;
}
span.big {
	font:bold 22px "Courier New", Courier, monospace;
	letter-spacing:-1px;
	color:#3F3F3F;
	padding:0px 20px;
}
span.small {
	font:16px "Courier New", Courier, monospace;
	letter-spacing:-1px;
	color:#3F3F3F;
	padding:0px 20px;
}
/*******************mail*****************/

span.grey {
	font:bold 22px "Courier New", Courier, monospace;
	letter-spacing:-1px;
	color:#A8A8A8;
}
#mail input[type="text"].big {
	font:bold 22px "Courier New", Courier, monospace;
	letter-spacing:-1px;
	color:#3F3F3F;
	line-height:36px;
	padding:0 5px;
	background:none;
	outline:none;
	border:none;
}
#mail .infoList {
	border-bottom:2px solid #A8A8A8;
	padding:5px 0px;
}
/*******************Cut*****************/

.cutContent {
	background:#FFF;
	width:504px;
	height:240px;
	float:left;
}
.cutTop {
	background:url(../images/cut1.png);
	width:504px;
	height:4px;
	float:left;
}
.cutDown {
	background:url(../images/cut2.png);
	width:504px;
	height:4px;
	float:left;
}
.row {
	float:left;
	width:504px;
	height:80px;
}
.blue {
	background:#E5EAEF;
}
.logo {
	float:left;
	width:80px;
	height:80px;
}
.logo img {
	width:60px;
	height:60px;
	margin:10px 20px;
}
.row span.big {
	float:left;
	width:200px;
	margin:0 20px;
	line-height:80px;
}
.row span.grey {
	float:right;
	width:120px;
	line-height:80px;
}
/*******************hole*****************/
#hole {
	background:#FFFFFF;
	padding:0;
	box-shadow:4px 0px 4px rgba(0, 0, 0, 0.7);
}
.holeside {
	background:url(../images/hole.jpg);
	float:left;
	width:20px;
	height:200px;
}
.holeContent {
	float:left;
	width:460px;
	height:auto;
	float:left;
	font:28px "微软雅黑";
	line-height:40px;
	color:#AF3447;
	text-align:center;
	padding:30px 0;
	text-shadow:2px 2px 2px #CCC;
}
/*******************blue*****************/
.bluecutTop {
	background:url(../images/cut3.png);
	width:504px;
	height:4px;
	float:left;
}
.bluecutDown {
	background:url(../images/cut4.png);
	width:504px;
	height:4px;
	float:left;
}
.bluecutContent {
	background:#3D4D6B;
	width:504px;
	height:auto;
	float:left;
}
.weekly {
	float:left;
	width:500px;
	height:50px;
	padding:4px;
	text-align:center;
	font:200 26px "微软雅黑";
	line-height:50px;
	color:#E8E5DF;
	text-shadow:1px 1px 1px #999;
}
.colume {
	float:left;
	width:72px;
	height:240px;
	box-shadow:2px 0px 1px #333;
}
.colume img {
	width:56px;
	height:40px;
	margin:15px 8px;
}
.temp, .days, .grey {
	display:block;
	float:left;
	width:72px;
	height:40px;
	text-align:center;
	color:#E8E5DF;
}
span.days {
	font:300 20px "微软雅黑";
	background:#33405A;
	line-height:40px;
	text-shadow:1px 1px 1px #999;
}
span.temp {
	font:200 26px "微软雅黑";
}
span.grey {
	font:200 22px "微软雅黑";
	color:#6C7385;
	margin-top:4px;
}
span.selected {
	color:#4EACE8;
}
/*******************button*****************/

.buttonSet {
	width:500px;
	height:auto;
	margin:20px auto;
	display:none;
}
.button {
	background:rgba(0, 0, 0, 0.3);
	float:left;
	width:230px;
	height:50px;
	border-radius:15px;
	border:1px outset #999;
	font-family:"Segoe UI Light", "Segoe WPC", "Segoe UI", Helvetica, Arial, "Arial Unicode MS", Sans-Serif;
	font-size:28px;
	color:#FFF;
	line-height:50px;
	text-align:center;
	cursor:pointer;
	margin:10px 8px;
}
.button:hover {
	border:1px inset #999;
}
.confirm {
	background:rgba(70, 71, 76, 0.6);
	cursor:pointer;
}