@charset "utf-8";
/* CSS Document */

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;
}