tjshop/shop/static/style/common.css

/**{ margin:0; padding:0; text-decoration:none; list-style:none; font-family:Tahoma,'Microsoft Yahei','Simsun'; vertical-align:baseline; }*/

body{ background-color:#F4F4F4; }
table { border-spacing:0; border-collapse:collapse; }
img { border:0; }
.l{ float:left; }
.y{ float:right; }
.ov-h{ overflow:hidden; }

.wp{width:1000px; margin:auto; }
.main{ padding:30px 20px 40px; overflow:hidden; }
@media screen and (min-width:1200px) { 
	.wp{width:1200px; margin:auto; }
	.main{ padding:30px 40px 40px; overflow:hidden; }
}
@media screen and (max-width: 1200px) { 
	.wp{width:1000px; margin:auto; }
	.main{ padding:30px 20px 40px; overflow:hidden; }
}

/*宽高*/
.w60{ width:60px; }
.w100{ width:100px; }
.w140{ width:140px; }
.w200{ width:200px; }
.w350{ width:350px; }
.w740{ width:740px; }
.ww100{ width:100%; }
.h32{ height:32px; }
.h50{ height:50px; }
.h60{ height:60px; }
.h280{ height:280px; }
.h350{ height:350px; }
/*元素属性*/
.dis-blk{ display:block; }
.dis-ile-blk{ display:inline-block; }
.dis-ile{ display:inline; }
/*外间距*/
.mt5{ margin-top:5px; }
.mt10{ margin-top:10px; }
.mt15{ margin-top:15px; }
.mt20{ margin-top:20px; }
.mt30{ margin-top:30px; }
.mt50{ margin-top:50px; }
.mr5{ margin-right:5px; }
.mr5{ margin-right:5px; }
.mr10{ margin-right:10px; }
.mr15{ margin-right:15px; }
.mr20{ margin-right:20px; }
.mr30{ margin-right:30px; }
.mr40{ margin-right:40px; }
.mr300{ margin-right:300px; }
.mb5{ margin-bottom:5px; }
.ml5{ margin-left:5px; }
.ml10{ margin-left:10px; }
.ml20{ margin-left:20px; }
/*内间距*/
.pt25{ padding-top:25px; }
.pr20{ padding-right:20px; }
.pr40{ padding-right:40px; }
.pl20{ padding-left:20px; }
.pb40{ padding-bottom:40px; }
.pb50{ padding-bottom:50px; }
/*行间距*/
.lh32{ line-height:32px; }
.lh40{ line-height:40px; }
.lh50{ line-height:50px; }
/*字号*/
.fb{ font-weight:bold; }
.f12{ font-size:12px; }
.f13{ font-size:13px; }
.f14{ font-size:14px; }
.f16{ font-size:16px; }
.f17{ font-size:17px; }
.f24{ font-size:24px; }
.f32{ font-size:32px; }
/*颜色*/
.c333{ color:#333; } .c666{ color:#666; } .c999{ color:#999; } .cCCC{ color:#CCC; } .cOrange{ color:#FF771F; } .cBlue{color:#1BBCD5; } .c00D0FA{ color:#00D0FA; } .cred{ color:#F00; }
/*背景*/
.bgFF{ background-color:#FFF; }
.bgFC{ background-color:#FCFCFC; }
.bgF4{ background-color:#F4F4F4; }
.bgF6{ background-color:#F6F6F6; }
.bgFFF3EE{ background-color:#FFF3EE; }
.bgFFF3ED{ background-color:#FFF3ED; }/*浅橙*/
.bgF1FBFD{ background-color:#F1FBFD; }/*浅绿*/
/*分割线*/
.lineDDD{ width:100%; height:1px; font-size:0; background-color:#DDD; }
/*边框*/
.bsDDD{ box-shadow:0px 0px 5px #CCC; }
/*圆角*/
.br3-tl{ border-top-left-radius:3px; }
.br3-tr{ border-top-right-radius:3px; }
/*位置*/
.positionR{ position:relative; }
/*字对齐*/
.text-c{ text-align:center; }
.text-r{ text-align:right; }
/*清除浮动*/
.clearfix{ clear:both; }
/*表格*/
.tab-1-EEE{ width:100%; }
.tab-1-EEE thead{ background-color:#FCFCFC; color:#999; }
.tab-1-EEE td{ border:1px solid #EEE; padding:15px 20px; padding:15px 20px; vertical-align:middle; border:1px solid #EEE; font-size:12px; }
.tab-1-EEE .t{ background-color:#EBF8FF; color:#1BBCD5; }
/*按钮*/
a.btn-blue, a.btn-gray, a.btn-orange{ display:inline-block; padding:5px 10px; font-size:12px; border-radius:3px; background-color:#FFF; }
a.btn-blue{ border:1px solid #0ACAFE; color:#0ACAFE; }
a.btn-gray{ border:1px solid #DDD; color:#AAA; }
a.btn-orange{ border:1px solid #FF6400; color:#FF6400; }
a.btn-blue:hover{ background-color:#0ACAFE; color:#FFF; }
a.btn-gray:hover{ background-color:#DDD; color:#FFF; }
a.btn-orange{ background-color:#FF6400; color:#FFF; }
/*图片*/
.bor-img{ padding:3px; border:1px solid #EEE; background-color:#FFF; }
/*页码*/
.pages{ height:32px; font-size:12px; }
.pages a{ width:30px; height:30px; display:inline-block; line-height:30px; text-align:center; color:#999; float:left; margin-left:10px; border-radius:2px; border:1px solid #DDD; }
.pages strong{ width:30px; height:32px; margin-left:10px; line-height:32px; text-align:center; float:left; color:#FF6400; }
/*单选美化*/
.o-rdo{ margin-right:10px; float:left; position:relative; text-align:center; }
.o-rdo input[type="radio"] + label::before { content: "\a0"; display: inline-block; vertical-align: middle; font-size: 12px; border: 1px solid #DDD; position:absolute; left:0; top:0; right:0; bottom:0; color:#FF0; cursor:pointer; }
.o-rdo input[type="radio"]:checked + label::before { border: 2px solid #FF6400; background-clip: content-box; background:url(o-rdo-icon.png) no-repeat right bottom; }
.o-rdo input[type="radio"] { position: absolute; clip: rect(0, 0, 0, 0); }
.o-rdo label{ font-size:12px; padding:0 10px; }

/*顶部*/
.top_z{ height:32px; padding-left:0px; background:url(top_z_icon.png) no-repeat center left; line-height:32px; font-size:13px; color:#AAA; }

/*顶部快捷*/
.loginIn{ font-size:13px; }
.topLogin{ font-size:13px; height:16px; line-height:16px; color:#CCC; margin-top:8px; padding-right:20px; border-right:1px solid #DDD; }
.topLogin a{ color:#59CFE5; }
.topLogin a.reg{ background:url(topUser.png) no-repeat center left; padding-left:20px; }
.topYy, .topBg, .topWx{ height:32px; line-height:32px; font-size:13px; padding-left:20px; color:#59CFE5; }
.topYy{ background:url(user_top_yy.png) no-repeat center left; }
.topBg{ background:url(user_top_bg.png) no-repeat center left; }
.topWx{ background:url(user_top_wx.png) no-repeat center left; cursor:pointer; }
/*头部购物车*/
.Cart_none, .Cart{ height:22px; border-left:1px solid #EDEDED; padding:16px 0 22px 40px; }
.Cart_none strong, .Cart strong{ width:24px; height:20px; padding:8px 0 2px 0; display:inline-block; line-height:20px; text-align:center; color:#FFF; font-size:12px; }
.Cart_none strong{ background:url(Cart.png) no-repeat; }
.Cart strong{ background:url(Cart.png) no-repeat; background-position:0 -30px; }
.Cart_none span, .Cart span{ font-size:12px; line-height:30px; margin:0 10px; color:#999; }
/*主导航*/
.nav{ height:52px; padding:0; position:absolute; left:0; bottom:-72px; background:url(nav_bg.png) no-repeat right; border-radius:2px 2px 0px 0px; }
.nav ul{ float:left; margin-left:40px; _margin-left:20px; }
.nav ul li{ height:52px; float:left; margin-right:45px; text-align:center; }
.nav ul li a{ color:#57899C; font-size:18px; line-height:52px; display:inline-block; text-shadow:1px 1px 2px rgba(255,255,255,.9) }
.nav .cli a{ color:#DC3E3E; }
.search-box{ width:360px; float:right; margin:12px 30px 0 0; }
.search{ width:0%; height:28px; min-width:28px; float:right; transition:width 0.3s; -webkit-transition:width 0.3s; -moz-transition:width 0.3s; -webkit-backface-visibility:hidden; overflow:hidden; position:relative; }
.search-input { width:226px; height:28px; margin:0; padding:0px 30px 0px 6px; position:absolute; top:0; right:0; border:none; outline:none; z-index:10; color:#333; box-shadow:1px 1px 2px #F9F9F9 inset; background-color:rgba(255,255,255,1); font-size:15px; border-radius:14px; margin-right:35px; }
.search-input::-webkit-input-placeholder { color:#999; }
.search-input:-moz-placeholder { color: #999; }
.search-input::-moz-placeholder { color: #999; }
.search-input:-ms-input-placeholder { color: #999; }
.icon-search, .search-submit { width:32px; height:28px; display:block; position:absolute; right:0; top:0; padding:0; margin:0; cursor:pointer; }
.search-submit { background:#FFF; /* IE needs this */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter:alpha(opacity=0); /* IE 5-7 */ opacity:0; color:transparent; border:none; outline:none; z-index:-1; background:url(search_icon.png) no-repeat #FF6400; }
.icon-search { font-size:14px; color:#FFF; z-index:90; speak: none; background:url(search_icon.png) no-repeat; }
.search.search-open, .no-js .search { width:100%; }
.search.search-open .icon-search, .no-js .search .icon-search { background:url(search_icon.png) no-repeat; color: #fff; z-index: 11; }
.search.search-open .search-submit, .no-js .search .search-submit { z-index:90; }
/*面包屑导航*/
.bread-nav{ overflow:hidden; padding:10px 0; border-bottom:1px solid #EEE; }
.bread-nav .index{ display:inline-block; float:left; }
.bread-nav a{ color:#86CAD9; font-size:12px; float:left; }
.bread-nav em{ float:left; margin:0 5px; font-size:12px; color:#EEE; font-style:normal; }
.bread-nav span{ float:left; font-size:12px; color:#CCC; }
/*友情链接*/
.links{ padding:10px 30px; background-color:rgba(255,255,255,.5); border-top:1px solid #EEE; box-shadow:0 1px 1px #EEE; }
.links p{ line-height:24px; font-size:12px; }
.links p strong{ color:#666; }
.links p a{ color:#666; margin:0 15px; }
/*底部*/
.footer{ width:100%; margin-top:40px; overflow:hidden; }
.footer td{ vertical-align:top; }
.footer dl{ margin:0 30px; float:left; }
.footer dt{ font-size:14px; line-height:36px; color:#666; }
.footer dd{ line-height:30px; font-size:14px; color:#CCC; }
.footer dd a{ font-size:12px; color:#999; }
.footer .news{ padding:0 50px; border-left:1px solid #DDD; border-right:1px solid #DDD; }
.footer .news li{ margin-top:10px; background:url(CCCx3_dot.png) no-repeat top left; background-position:0 9px; padding-left:15px; }
.footer .news li a{ font-size:14px; color:#666; }
.footer .news li a:hover{ color:#59CFE5; }
.footer .wx{ width:120px; height:150px; float:right; }
.footer .wx img{ width:120px; height:120px; }
.footer .wx p{ width:120px; height:30px; line-height:30px; font-size:14px; text-align:center; }
/*页脚*/
.bottom{ width:100%; margin:20px 0 30px; }
.bottom p{ width:100%; font-size:12px; line-height:24px; text-align:center; color:#999; }
.bottom p a{ color:#999; text-decoration:underline; }

/*微信弹窗*/
.wxPopup{ width:100%; height:100%; background-color:rgba(0,0,0,.3); position:fixed; left:0; top:0; z-index:9999; display:none; }