100度享乐电商网 CSS

/*reset begin*/
body,div,dl,dt,p,h1,h2,h3,h4,h5,input,form,span,ul{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
img{
border: none;
vertical-align: middle;
}
input,button{
outline: none;
}
ul li{
list-style: none;
}
em,i{
font-style: normal;
}
body{
font-family: "微软雅黑";
font-size: 12px;
}


.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
.gradient{
background: -webkit-linear-gradient(top,#f9f9f9,#ffffff);
}


/*reset end*/


/*header begin*/
#header{
width: 960px;
height: 30px;
margin: 0 auto;
line-height: 30px;
/*background: red;*/
}
#header .city{
padding-left: 20px;
color: #666666;
}
#header .city a{
display: inline-block;
height: 18px;
line-height: 18px;
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 0 7px;
color: #999999;
box-shadow: 1px 1px 2px #ededed;
margin-right: 5px;
}
#header .city a:nth-child(1){
margin-left: 14px;
}
#header .city a.active{
color: #d60d03;
}
#header .city a:hover{
color: #d60d03;
}
#header .link{
padding-right: 20px;
word-spacing: 4px;
/*letter-spacing:4px;*/
color: #d5d5d5;
}
#header .link a{
background: url(../img/header1.png) no-repeat 0 3px;
padding-left: 20px;
color: #666666;

}
#header .link a:hover{
text-decoration: underline;
}
#header .link a.icon2{
background-position: 0 -22px;
}
/*header end*/


/*nav begin*/
#nav{
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
}
#nav ul{
position: absolute;
top: 10px;
}
#nav .nav1{
left: 11px;
}
#nav .nav2{
right: 11px;
}
#nav ul li{
float: left;

}
#nav ul li a{
display: inline-block;
width: 66px;
text-align: center;
padding-top: 50px;
background: url(../img/nav_bg.png) no-repeat;
color: #333333;
}
#nav ul li a.bg1{
background-position: 0 0;
}
#nav ul li a.bg2{
background-position: -66px 0;
}
#nav ul li a.bg3{
background-position: -132px 0;
}
#nav ul li a.bg4{
background-position: -198px 0;
}
#nav ul li a.bg5{
background-position: -264px 0;
}
#nav ul li a.bg6{
background-position: -330px 0;
}
#nav ul li a.bg7{
background-position: -396px 0;
}
#nav ul li a.bg8{
background-position: -462px 0;
}
#nav ul li a.bg9{
background-position: -528px 0;
}
#nav ul li a.bg10{
background-position: -594px 0;
}


#nav ul li a:hover.bg1{
background-position: 0 -70px;
}
#nav ul li a:hover.bg2{
background-position: -66px -70px;
}
#nav ul li a:hover.bg3{
background-position: -132px -70px;
}
#nav ul li a:hover.bg4{
background-position: -198px -70px;
}
#nav ul li a:hover.bg5{
background-position: -264px -70px;
}
#nav ul li a:hover.bg6{
background-position: -330px -70px;
}
#nav ul li a:hover.bg7{
background-position: -396px -70px;
}
#nav ul li a:hover.bg8{
background-position: -462px -70px;
}
#nav ul li a:hover.bg9{
background-position: -528px -70px;
}
#nav ul li a:hover.bg10{
background-position: -594px -70px;
}




#nav h1{
width: 223px;
height: 62px;
margin: 0 auto;
position: relative;
top: 10px;
}
/*nav end*/


/*search begin*/
#search{
width: 958px;
height: 114px;
border: 1px solid #dbdbdb;
margin: 0 auto;
border-radius: 4px;
position: relative;
}
#search .bar{
position: absolute;
width:958px;
height: 64px;
border: 1px solid #c40d0e;
top: 16px;
box-shadow: 1px 1px 2px #dcdcdc;
border-radius: 4px;
background: #e21c01;
left: -1px;

}
#search .bar .menu{
position: absolute;
left: 226px;
top: -27px;

}
#search .bar .menu li{
float: left;
width: 78px;
height: 25px;
text-align: center;
line-height: 25px;
font-size: 14px;
border: 1px solid #eec8b8;
border-bottom: none;
margin-right: 1px;
border-radius: 4px 4px 0 0;
cursor: pointer;
}
#search .bar .menu li.active{
width: 79px;
height: 26px;
background: #e21c01;
border: 1px solid #c40d0e;
border-bottom: none;
color: #fbfbfb;
font-weight: bold;
text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
}
#search .img{
width: 158px;
height: 114px;
background: url(../img/search.png) no-repeat;
position: absolute;
z-index: 5;
left:32px;
top: -3px;
}
#search .form{
position: absolute;
left: 226px;
top: 36px;
}
#search .form .text{
width: 381px;
height: 20px;
padding: 0 12px;
border: none;
color: #ea7a7a;
box-shadow: inset 2px 2px 2px #f2d7d4;
border-radius: 4px;
float: left;
margin-right: 10px;
}
#search .form .btn{
width: 61px;
height: 23px;
background: url(../img/search.png) -158px 0;
border: none;
cursor: pointer;
float: left;
}


#search .key_text{
position: absolute;
width: 201px;
right: 36px;
top: 32px;
color: #fbfbfb;

}
#search .key_text a{
color:#fbfbfb;
}
#search .key_text a:hover{
color:#999;
}
#search .update{
position: absolute;
width: 406px;
height: 30px;
left: 226px;
bottom: 0;
background: url(../img/search.png) no-repeat -220px 9px;
line-height: 30px;
overflow: hidden;
}
#search .update .wrap{
width: 346px;
height: 30px;
position: absolute;
left: 60px;
}
#search .update .wrap ul{
position: absolute;
}
#search .update .wrap ul li{
height: 30px;
}
#search .update .wrap ul li a{
color: #000;
}
#search .update .wrap ul li a strong{
font-weight: normal;
color: #d30703;
}
#search .update .wrap ul li a span{
color: #999999;
}
.up{
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid trans