www.gusucode.com > 200套html5精品模板51_75 > 068/css/style.css
@import "reset.css"; @import "jquery.fancybox-1.3.4.css"; @import "layout.css"; /* Getting the new tags to behave */ article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display:block; } mark, rp, rt, ruby, summary, time { display:inline; } /*************************Global*****************************/ body { position:absolute; font:13px/20px 'Arial', sans-serif; color:#868686; min-width: 1000px; min-height:860px; width:100%; height:100%; overflow:hidden; z-index:1; } body p a { text-decoration:none; color: #FFF; } h1 { margin: 35px 0 0 0; display: inline-block; } h1>a { position:relative; display:inline-block; text-indent: 100%; white-space: nowrap; overflow: hidden; width: 280px; height: 90px; background: url(../images/logo.png) center no-repeat; } h2 { margin-left: -9px; font: 300 89px/70px 'Open Sans', sans-serif; color: #FFF; padding-bottom: 36px; text-transform: none; } h3 { margin-left: -3px; font: 300 56px/46px 'Open Sans', sans-serif; color: #FFF; margin-bottom: 30px; text-transform: none; } p { margin-bottom: 25px; } #glob { position:absolute; width:100%; height:100%; overflow:hidden; z-index:2; } .spinner { position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:9999; background:url( "../images/loading.gif") 50% 50% no-repeat #ececec; } header, footer { position:absolute; width:100%; z-index:100; } .color1 { color: #fff; } /**************header*************/ header { overflow: hidden; top:0px; height:154px; background: url(../images/bgpattern1.jpg) repeat-x; } /**********end header**************/ /**************menu****************/ .menu { position: relative; display: inline-block; float: right; top: 91px; height: 25px; } #menu > li { display: inline-block; position: relative; text-align: center; float: left; } #menu > li { display: inline-block; position: relative; text-align: center; float: left; } #menu > li > a { display: inline-block; font: 12px/20px 'Droid Sans', sans-serif; color: black; text-transform: uppercase; padding: 0 11px 0 12px; text-decoration: none; background: url(../images/dots1.png) 0 5px no-repeat; } #menu > li > a.first { display: inline-block; font: 12px/20px 'Droid Sans', sans-serif; color: black; text-transform: uppercase; padding: 0 11px 0 12px; text-decoration: none; background: none; } #menu > li > strong { margin-left: 2px; display: inline-block; position: absolute; height: 100%; width: 95%; top: -91px; left: 0; z-index: -1; background: url(../images/menu_bg.jpg) repeat; float: left; } .submenu_1 { position:absolute; z-index:9100; left: 1px; top: 25px; width: 200px; } .submenu_1 li { position:relative; display: inline-block; text-align: center; margin-right: -2px; } .submenu_1 a { text-decoration: none; position:relative; display: block; font: 10px/28px 'Trebuchet MS', sans-serif; color: #000; padding: 0 10px; border-radius: 4px; box-shadow: none; } .submenu_1 li>a:hover, .submenu_1 li.sfHover>a { color: #d11d1b; } /*************end menu***********/ ._over{} /***************Pages Content******************/ #content { position:relative; width:620px; margin: 0 auto; z-index: 50; margin-top: 300px; } #content>ul { width:100%; height: 100%; } #content>ul>li.no_disp { display: none; width: 0; height: 0; } #content>ul>li { position:absolute; width:100%; background: url(../images/content_bg.png); overflow: hidden; margin-top: -8px; } .line1 { display: block; background: #403f3f; height: 1px; width: 100%; margin-bottom: 23px; border: none; } .readMore { font: 300 35px/28px 'Open Sans', sans-serif; color: #FFF; text-decoration: none; margin: 2px 0 0 -4px; } .closebutton { right: 0; margin: 30px 28px 0 0; position: absolute; width: 16px; height: 16px; overflow: hidden; } /*----------Uscroll-------------*/ .scroll { float:left; margin-right:30px; } #outside { width:453px; height:310px; position: relative; } #outside .scroll { width:453px; height:310px; position: relative; } #outside .scroll.ex-1 { padding-right:40px; } #outside ._track { width:3px; height:290px; left:480px; top:0; padding: 10px 0; background: #403f3f; position: absolute; } ._shuttle { left: -2px !important; width: 9px !important; background:#d1261c; cursor: pointer !important; } ._shuttle:hover { left: -2px !important; width: 9px !important; background:#FFF; cursor: pointer !important; } /*--------endscroll----------*/ .sitem_over { position:absolute; z-index:2; width: 210px; height: 140px; display:none; overflow: hidden; background: url(../images/bgimages.png); } .sitem_over>strong { position:relative; background:url( '../images/icon_zoom.png') center no-repeat; width: 100%; height: 100%; display: block; } .list1 { } .list1>li { position: relative; width: 210px; height: 140px; float: left; display: inline-block; margin: 0 25px 30px 0; } .list1>li.right { margin-right: 0; } .list1>li.last { margin-bottom: 0; } .list1>li.last2 { margin: 0; } .list1>li a { position: relative; display: block; width: 210px; height: 140px; } /*google map*/ .google_map { position: relative; overflow: hidden; border-radius: 0px; margin-bottom: 27px; width: 482px; height: 210px; border: none; box-shadow: none; background-color: #111; background-image: url(../images/maploader.gif); background-repeat: no-repeat; background-position: 50%; } /*end google map*/ .address { position: relative; display: inline-block; width: 180px; height: 100%; overflow: hidden; } .contactText_1 { text-transform: none; display: inline-block; cursor: pointer; color: #fff; text-decoration: none; margin: 0 0 0 5px; } /*********************Footer**********************/ footer { bottom:0px; } .mainFooter { margin: 0 auto; text-align: center; position: relative; width: 620px; height: 100%; padding: 13px 0 15px 0; } .bgfooter { background: #080808; } footer p { font: 11px/20px 'Droid Sans', sans-serif; text-align: center; position: relative; display: inline-block; color: #646464; margin-bottom: 7px; } footer p a { color: #646464; text-transform: uppercase; } footer p a:hover { color: #fff; text-decoration: none; } #follow-icon { margin: 0 auto; position: relative; width: 79px; height: 100%; overflow: hidden; } #follow-icon a { position: relative; display: inline-block; } #follow-icon>li { position: relative; display: inline-block; float: left; margin-right: 8px; } #follow-icon>li.last { position: relative; display: inline-block; float: left; margin-right: 0; } #follow-icon .img_act { position:absolute; top:0; left:0; } /******pagin******/ #bgStretch { z-index:1; } #bgStretch>img { background: #111; } .paginwraper { position: relative; margin: 0 auto; width: 620px; height: 59px; padding-top: 17px; background: url('../images/bgpagin.png'); } .pagin { margin-left: 46px; } .pagin li { display: inline-block; margin: 0 17px 20px 0; position: relative; height: 45px; width: 74px; } .pagin li>a { display: block; width: 100%; height: 100%; } .pagin li>span { display: block; width: 100%; height: 100%; background: #FFF; z-index: -1; position: absolute; top: 0; left: 0; } .pagin li.active>span { width: 100%; height: 100%; } .navBtns { position: absolute; width: 620px; bottom: 23px; } .next, .prev { display:inline-block; position: relative; width: 20px; height: 25px; } .next { right: 12px; float: right; background: url('../images/arrowR.png') center no-repeat; } .prev { left: 12px; float: left; background: url('../images/arrowL.png') center no-repeat; } .next>span, .prev>span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; } .next>span { background: url('../images/arrowR_over.png') center no-repeat; } .prev>span { background: url('../images/arrowL_over.png') center no-repeat; } /*********************end footer********************/ /**************************Margin Padding*************************/ .mp_clear { margin:0; padding:0; } .fleft { float:left; } .fright { float:right; } .m_bot1 { margin-bottom: 25px; } .m_bot2 { margin-bottom: 20px; } .pad1 { padding: 56px 0 64px 58px; } .pad2 { padding: 140px 0 38px 0; } .pad3 { padding: 56px 150px 66px 59px; } .pad4 { padding: 56px 75px 59px 59px; } .pad5 { padding: 56px 92px 40px 59px; } .m_right1 { margin-right: 20px; } .m_right2 { margin-right: 54px; }