www.gusucode.com > 200套html5精品模板101_150 > 200套html5精品模板101_150/138/css/style.css
@font-face { font-family: 'Droid Sans'; font-style: normal; font-weight: 400; src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff'); } @font-face { font-family: 'Glegoo'; font-style: normal; font-weight: 400; src: local('Glegoo'), local('Glegoo-Regular'), url(http://themes.googleusercontent.com/static/fonts/glegoo/v1/8x8S7gQMbbduiGv8gbUJ0Q.woff) format('woff'); } /* Left & Right alignment */ .left { float:left; } .right { float:right; } .wrapper { width:100%; overflow:hidden; position:relative; } .box { overflow:hidden; } .clear { clear:both; width: 100%; } .relativePos{ position:relative; } .last{ background:none !important; border:none !important; } /* Global properties ======================================================== */ body, html, .extra{ height:100%; min-width:960px; min-height:720px; } body { overflow:hidden; border:0; font:12px/20px 'Droid Sans', sans-serif; color:#878787; background-color:#000 } /* Global Structure ============================================================= */ .extra{ overflow:hidden; position:relative; margin-bottom:-40px; } .main { position:relative; float:left; top:240px; z-index:5; } .page_spinner { position:fixed; background: url(../images/main_spinner.gif) 50% 50% no-repeat #000; z-index:99; width:100%; height:100%; top:0; left:0 } /* ============================= main layout ====================== */ a { color:#878787; text-decoration: underline; outline:none; } a:hover { color:#fff; } h1 { padding:0 0 0 0; } h2 { font: 30px/25px 'Glegoo', serif; color: #ec145b; text-transform:uppercase; padding-bottom:23px; } h3{ font: 18px/18px 'Glegoo', serif; color: #fff; text-transform:uppercase; padding-bottom:18px; } h4{ font:14px/20px 'Droid Sans', sans-serif; color:#fff; text-transform:uppercase; padding-bottom:10px; } h5{ font:12px/20px 'Droid Sans', sans-serif; color:#fff; } p { padding-bottom:20px; } .color1 { color:#fff; } .color2{ color: #ec145b; } /* ============================= bg ====================== */ #container{ position:absolute !important; top:0; left:0; } #container > div{ float: left; } #container > div > a{ position:relative; display:block; } #container > div > a span{ position:absolute; top:0; left:0; background-color:#000; } #description{ position:absolute; overflow:hidden; width:240px; height:240px; top:0; left:0; background-color:#000; } #description ul{ position:relative; } #description li{ padding:45px 20px 0 20px; height:195px; top:0; } #description h4{ font-size:16px; color:#ec145b; } /* ============================= header ====================== */ header{ padding: 0px 0 0 21px; width:219px; height:240px; float:left; background:url(../images/menu_plane.jpg) 0 0 no-repeat; } #logo { position:relative; display:block; text-indent: 100%; white-space: nowrap; overflow: hidden; width:208px; height:43px; background:url(../images/logo.png) 0 0 no-repeat; z-index:111111; top:30px; left:-5px; margin-bottom:30px; } /* ============================= menu ====================== */ #menu{ padding-top:20px; } #menu > li { position:relative; height:26px; width:100%; } #menu > li a{ display:inline-block; font:14px/14px 'Droid Sans', sans-serif; color:#000; text-indent:14px; text-decoration:none; text-transform:uppercase; background:url(../images/menu_marker.png) 0 4px no-repeat; } .submenu { position:absolute; padding-left:27px; display:inline-block; width:90px; left:84px; top:0; z-index: 5; background:url(../images/submenu_line.jpg) 0 6px no-repeat; } .submenu li{ height:26px; display:block; } /* ============================= content ====================== */ #content{ position:relative; float:left; } #content > ul { } #content > ul > li { position:absolute; width:720px; height:480px; background-color:#000; opacity:0.95; } .contPad{ padding:40px 0 0 30px } .link{ font:14px/14px 'Droid Sans', sans-serif; color:#fff; text-transform:uppercase; text-decoration:none; } .link:hover{ color:#878787; text-decoration:underline; } .list1{ padding:15px 0 25px; overflow:hidden; } .list1 li{ float:left; padding-right:14px; } .padBot1{ padding-bottom:25px; } .list1 li.pad_0{ padding-right:0px; } .list1 li a > span{ position:absolute; width:108px; height:154px; background:url(../images/page1_hover.png) 0 0 no-repeat; } .list2 li{ overflow:hidden; padding-bottom:50px; } .list2 li > img{ float:left; padding-right:15px; } .list2 li > div{ margin-top:-4px; float:left; overflow:hidden; width:120px; } .list2 li a, .list3 li a, .list4 li > div a .list5 li > div a{ color:#fff; text-decoration:none; } .list2 li a:hover, .list3 li a:hover, .list4 li > div a:hover .list5 li > div a:hover{ text-decoration:underline; } .sn{list-style-type:none; margin:-10px 0 0px 0; height:16px; padding:0; float:left} .sn li{list-style-type:none; margin:0; padding:0 5px 0 0; display:inline; background:transparent; border:0px!important;} .sn span{height:16px; width:16px; display:inline; display:inline-block} .icon-img{background-position:0 0;} .icon-img:hover{background-position:0 -16px !important;} .list3{ overflow:hidden; } .list3 li{ float:left; padding-right:17px; width:198px; height:177px; } .list3 li img{ padding-bottom:12px; } .list4 li{ float:left; width:333px; padding-bottom:10px; } .list4{ overflow:hidden; padding-top:6px; } .list4 li > img{ float:left; padding-right:14px; } .list4 li > div{ float:left; overflow:hidden; width:240px; } .list5 li{ float:left; width:310px !important; display:inline-table !important; } .list5{ overflow:hidden; padding-top:6px; width:630px; } .list5 li > img{ float:left; padding-right:14px; } .list5 li > div{ float:left; overflow:hidden; width:230px !important; } .list5 li a{ text-decoration:none; color:#666666; } .list5 li a:hover{ color:#ffffff; } .newsList{ overflow:hidden; } .newsList dt{ width:40px; float:left; font: 16px/24px 'Droid Sans', sans-serif; color: #fff; background-color:#efefef; padding-bottom:5px; color:#ec145b; text-align:center; } .newsList dt > span{ display:block; font-size:24px; background-color:#ec145b; color:#fff; } .newsList dd{ float:left; width:160px; padding-left:10px; } .newsList dd a{ text-decoration:none; color:#ec145b; text-align:left; } .newsList dd a:hover{ color:#666666; } .google_map{ width: 343px; height: 204px; margin-bottom:23px; background: #FFF; } .address { width:230px; } .address > p{ width:160px; } .mailLink{ color:#ec145b; text-decoration:none; } .mailLink:hover{ color:#ec145b; text-decoration:underline; } /* ============================= footer ============================= */ footer{ padding:10px 0 0 30px; position:relative; font-size:13px; color:#858484; z-index:5; } footer a{ color:#858484; text-decoration:none; } /* ============================= forms ============================= */ #form1 { } #form1 input { margin:0; background-color:#333333; padding:7px 0 7px 10px; width:244px; box-shadow:none; } #form1 textarea { resize: none; margin:0; background-color:#333333; padding:7px 0 5px 10px; width:244px; height:189px; overflow:auto; line-height:18px; } #form1 label { position:relative; display:inline-block; min-height:40px; } #form1 .error, #form1 .empty { position:relative; top: -3px; display:none; font-size:11px; color:#ec145b; } .btns{ margin-right:45px; } .btns a{ display:inline-block; margin:26px 0 0 21px; } /* Form defaults */ input, select, textarea { font:12px/12px 'Droid Sans', sans-serif; color:#fff; } /* ============================= Blog ====================== */ .post{margin-bottom:30px; padding-bottom:10px; clear:both;} .postimg{margin-bottom:10px;} .posttitle{margin:0 0 0px 0} .posttitle, .posttitle a{font-size:18px; line-height:20px; font-family: 'Glegoo';} .posttitle a:hover{text-decoration:none;} .entry-text{overflow:hidden; } .entry-content {margin:0; padding:10px 0 5px 0;} .entry-date{float:left; overflow:hidden; text-align:center; margin:5px 20px 0 0 } .posttime{ padding:3px 6px; line-height:20px; font-size:13px; font-family: 'Droid Sans'; Arial; text-transform:uppercase } .postdate{font-size:20px; font-family: 'Droid Sans'; padding:6px 0} .entry-utility{padding:0; margin-top:-10px; font-size:11px;} .post{border-bottom:1px solid #202020} .posttitle a, .posttitle a:visited{color:#666666; text-decoration:none;} .posttitle a:hover{color:#ec145b} .entry-date{background:#efefef; color:#ec145b;} .posttime{background:#ec145b; color:#fff;} .postdate{color:#ec145b;} .pagenavi a, .pagenavi a:visited{color:#666666;} .pagenavi a:hover{color:#ec145b} /* Page Navi*/ .pagenavi {padding:0; font-size:12px; margin:0 0 0 0; clear:both} .pagenavi a, .pagenavi a:visited{ font-family: 'Glegoo'; font-size:12px; } .pagenavi a.next{float:right;} .pagenavi a:hover{} .pagenavi .current{} .button, .button:visited, input[type="submit"], button{ border:0px; padding:5px 15px 5px 15px; cursor:pointer; font-family: 'Droid Sans'; font-size:12px; line-height:16px; text-decoration:none; text-transform:uppercase; } .button:hover, input[type="submit"]:hover, button:hover{ text-decoration:none; } .button, .button:visited, input[type="submit"]{ color:#fff; background:#666666;} .button:hover, input[type="submit"]:hover{color:#fff; background:#ec145b;} /*============================================ SIDEBAR =================================================*/ #sidebar ul{ list-style-type:none; list-style-position:outside; margin:0; padding:0; } #sidebar ul li{ list-style-type:none; margin:0; padding:0; } #sidebar .widget-container{margin-bottom:40px; padding:0 0 0 20px;} #sidebar li li{ list-style-type:none; margin:0 0 6px 0; padding:0 0 5px 0; } #sidebar li li a{} #sidebar li li a:hover, #sidebar li li a.active{text-decoration:none;} #sidebar .greybox{ padding:20px 20px;} #sidebar .textwidget p{ margin-bottom:0px;} /* Recent post widget */ .rp-widget li{padding-bottom:10px !important; margin-bottom:30px !important; width:200px; } .rp-widget li h4{font-size:13px; font-family:arial; } .rp-widget li h4 a{ color:#666666; text-decoration:none; } .rp-widget li h4 a:hover{color:#ec145b; } .rp-widget li .smalldate{font-size:11px; display:block;} /* search widget */ #searchform{position:relative;} #searchform .bgsearch{} #searchform #s{width:100%; padding:8px 5px !important; border:0; color:#666666;} .searchbutton{background:#fff url(../images/icon_search.png) no-repeat right center !important; border:10 !important; width:20px; height:17px; position:absolute; z-index:11111111111; left:165px; top:6px; cursor:pointer;} /* Ads 125 x 125 */ .ads{float:left; margin:0 20px 15px 0} .alignleft { float:left; margin-right:15px; } /* ============================= padding ====================== */ .pad1 { padding: 46px 0 20px 0; } .pad2 { padding: 0 51px 0 45px; } .pad3 { padding-bottom:28px; } .pad4 { padding: 0 22px 25px 45px; } .pad5 { padding-bottom: 17px; } .pad6 { padding-bottom: 20px; } .pad7 { padding-bottom: 23px; } .pad8{ padding: 0 27px 0 45px; } .pad9{ padding: 0 45px; } .pad10{ padding: 0 22px 28px 45px; } .mar1{ margin-bottom: 21px; } .mar2{ margin: 0px 15px 0px 0px; } .w1{ display: inline-block; width: 70px; } /* ============================= intro ====================== */ .intro_text {padding:10px 0 50px 0;} .intro_text .bwWrapper {border:5px solid #333333;float:left;font-size:0;line-height:0; width:280px;} .intro_text div.desc {float:right;width:315px;} .intro_text div.desc h4 {padding-bottom:15px;} .intro_text .intro_slider {margin:0;} .intro_text .intro_slider li {float:left;width:100%;} .intro_text .bx-pager {margin:10px 0 0 115px;} .intro_text .bx-pager a.pager-link {text-indent:-9999em;float:left;height:16px;width:16px;display:block;background:url(../images/sprite.png) -16px 0px no-repeat;margin-right:4px;} .intro_text .bx-pager a.pager-active, .intro_text .bx-pager a.pager-link:hover {background-position:0px 0px;} .why_choose {float:left;} .why_choose ul {width:350px;} .why_choose li { float:left; padding:0 0 10px 20px; margin-bottom:0px; background:url(../images/bullet.png) 0px 5px no-repeat; } /* ============================= feature lists ====================== */ .featured_list {width:100%;overflow:hidden;clear:both;} .featured_list h3 {font-size:18px;color:#fff;padding:0 0 12px 0;margin:20px 0 24px 0;} .featured_list ul {padding:0 0 50px 0;float:left;} .featured_list ul li {float:left;position:relative;width:221px;padding:0;margin:0 25px 28px 0;} .featured_list ul.features_slider li {width:160px;margin-right:0;} .featured_list ul li div {position:relative; width:130px; margin:0 30px 0 0;} .featured_list ul li .bwWrapper {width:auto;padding:0;margin:0;border-bottom:none;} .features_slider_wrap .bx-prev, .features_slider_wrap .bx-next {display:block;float:left;width:20px;height:20px;position:absolute;left:580px;top:-54px;font-size:0;line-height:0;background:url(../images/direction_nav.png) 0 0 no-repeat;cursor:pointer;} .features_slider_wrap .bx-next {background-position:100% 0;left:600px;} .features_slider_wrap .bx-next:hover {background-position: 100% -20px;} .features_slider_wrap .bx-prev:hover {background-position:0 -20px;} /* ============================= scrollbar pane ====================== */ .scroll-pane { width: 650px; overflow: auto; float: left; padding-right:30px; } #pane1, #pane2, #pane3, #pane4 { height: 350px; padding-bottom:20px; }