www.gusucode.com > 221_西餐厅美食 html46精品模板 > 221_西餐厅美食/css/style.css
/* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} ol,ul{list-style:none;margin:0px;padding:0px;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;} /* start editing from here */ a{text-decoration:none;} .txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */ .txt-center{text-align:center;}/* text align center */ .float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* vertical align baseline */ .vertical-top{ vertical-align:top;}/* vertical align top */ nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ body{ background:#F1EDE4; } /*----start-wrap-----*/ .wrap{ width:80%; margin:0 auto; } /*----start-header-----*/ .header{ background:#352f2f; border-bottom:2px solid #bd7f1c; } .logo{ float:left; } .social-icons{ float:right; margin-top: 1.1%; } .social-icons ul li{ display:inline-block; } .social-icons ul li a{ color:#363638; font-family: 'Open Sans', sans-serif; font-size:0.875em; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .social-icons ul li a:hover{ color:#026660; } .social-icons ul li a img{ vertical-align:middle; padding-right: 5px; } /*------start-top-nav------*/ .top-nav { background:#4a4444; } .top-nav-left{ float:left; } .top-nav-right{ float:right; padding: 7px 10px; } .top-nav-left ul li{ display:inline-block; float:left; border-left:1px solid #3D3D3D; } .top-nav-left ul li:nth-child(1){ border:none; } .top-nav-left ul li a{ padding:20px; display:block; color:#FFFFFF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; font-size: 0.875em; } .top-nav-left li.active a, .top-nav-left li a:hover { background:#bd7f1c; } .top-header { padding: 20px 0; } .top-nav-right input[type="submit"]{ background: url(../images/search-icon.png) no-repeat 42% 50% #bd7f1c; padding:14px 20px; border: none; display: block; float: left; margin:0; outline:none; cursor:pointer; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .top-nav-right input[type="submit"]:hover{ background: url(../images/search-icon.png) no-repeat 42% 50% #996004; } .top-nav-right input[type="text"]{ border:none; float:left; padding:14px 5px; outline:none; display: block; margin:0; -webkit-apperance:none; } /*---start-content-----*/ .top-grid{ width: 31.33%; float: left; text-align: center; margin-right: 3%; font-family: 'Open Sans', sans-serif; background:#EAE4D8; padding: 1.5em 0; border-top:5px solid #BD7F1C; margin-top: -4em; -webkit-box-shadow: 0px 56px 36px -60px #121D12; -moz-box-shadow: 0px 56px 36px -60px #121D12; -o-box-shadow: 0px 56px 36px -60px #121D12; } .top-grid h3{ color: #363638; font-size:1.5em; text-transform:uppercase; } .top-grid p{ font-family: Arial, Helvetica, sans-serif; font-size: 0.875em; color:#816943; line-height: 1.5em; margin: 0.5em auto 0.8em auto; width: 90%; } .top-grid img{ display: inline-block; } .button{ color: #FFF; font-size: 0.875em; text-transform: uppercase; padding:10px 15px; border:none; display: inline-block; background:#BD7F1C; margin-top:10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .button:hover{ background:#363638; color:#FFF; } .top-grids { margin: 0 0 3em 0; } .last-topgrid{ margin:0; margin-top: -4em; } /*----start---mid-grid-----*/ .mid-grid h1{ font-size:2em; font-family: 'Open Sans', sans-serif; color:#363638; text-transform:uppercase; } .mid-grid h2{ font-size:1em; font-family: 'Open Sans', sans-serif; color:#BD7F1C; margin: 0.5em 0; } .mid-grid p{ font-size: 0.875em; font-family: 'Open Sans', sans-serif; color:#816943; width: 73%; margin: 0 auto; line-height: 1.8em; margin-bottom: 1em; } .mid-grid { text-align: center; font-family: 'Open Sans', sans-serif; margin: 4em 0 0em 0; background:#EAE4D8; padding: 3em 0; } .mid-grid.button{ display:block; } .button1{ color: #FFF; font-size: 0.875em; text-transform: uppercase; padding:10px 15px; border: 1px solid #EEE; margin-top:10px; display: inline-block; background:#BD7F1C; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .button1:hover{ background:#363638; color:#FFF; } /*-----bottom-grids----*/ .bottom-grid1 { width: 30%; float:left; margin-right: 3%; } .bottom-last { margin-right:0; } .bottom-grids{ font-family: 'Open Sans', sans-serif; padding: 2em 0 3em 0; } .bottom-grid1 h3,.bottom-grid2 h3{ color:#aa8036; font-family: 'Open Sans', sans-serif; font-size:1.5em; padding: 15px 0px 15px 0px; border-bottom: 1px solid #E9E9E9; margin-bottom: 13px; text-transform: uppercase; } .bottom-grid1 span,.bottom-grid2 span{ color: #BD7F1C; font-family: 'Open Sans', sans-serif; font-size: 16px; } .bottom-grid1 p,.bottom-grid2 p{ font-size: 0.875em; color:#816943; line-height: 1.6em; font-family: Arial, Helvetica, sans-serif; padding: 8px 0px 10px 0px; } .bottom-grid1 ul li a{ display:block; color: #816943; font-family: Arial, Helvetica, sans-serif; font-size:0.875em; padding:8px 0px 8px 10px;; background:url(../images/marker.png) no-repeat 0; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; } .bottom-grid1 ul li a:hover{ color:#BD7F1C; } .bottom-grid-fristlink{ background: #026660; padding: 10px; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: bold; transition: all 0.3s; } .bottom-grid-fristlink img{ vertical-align:middle; } .bottom-grid-fristlink:hover{ color:#000; } .bottom-grid2 ul li{ display: inline-block; width:46%; padding:0px 5px; } .bottom-grid2 { float: left; width: 33%; margin-right: 3%; } .bottom-mid span{ color:#BD7F1C; } .bottom-mid a{ background:#BD7F1C; } .bottom-last a{ background:#BD7F1C; } .bottom-last span{ color:#BD7F1C; } .gallery li a img{ display:block; } /*---footer----*/ .footer{ background:#574d41; padding:20px 0px; margin-top: 30px; } .footer-grid{ float:left; width: 24%; margin-right: 2%; } .footer-grid h3{ font-family: 'Open Sans', sans-serif; color: #FFF; font-size:1.2em; text-transform: uppercase; padding: 10px 0 3px 0px; } .footer-grid p{ font-size: 0.85em; padding:5px 0; color:#A3A3A3; line-height: 1.8em; font-family: Arial, Helvetica, sans-serif; } .footer-grid a{ font-family: 'Open Sans', sans-serif; color: #BD7F1C; font-size: 0.875em; text-transform: uppercase; background:#FFF; padding: 10px 15px; display: inline-block; margin: 9px 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .footer-grid a:hover{ background:#BD7F1C; color:#FFF; } .footer-grid ul li{ display:block; } .center-grid a{ background: none; padding: 0px; color:#C2C2C2; margin: 5px; border-bottom: 1px ridge rgba(192, 192, 192, 0.13); padding: 0px 0px 9px 0px; } .center-grid{ width:20%; } .center-grid a:hover{ background:none; } .center-grid ul{ margin-top:5px; } .twitts p label{ font-weight:bold; font-size:1em; cursor:pointer; padding-right:5px; } .twitts span{ display:block; color:#BD7F1C; font-family: 'Open Sans', sans-serif; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; font-size:0.85em; } .twitts span:hover{ color:#fff; cursor:pointer; } /*----copy-right-----*/ .copy-right{ text-align:center; padding:10px 0px; background:#352F2F; position:relative; } .copy-right p{ font-family: 'Open Sans', sans-serif; color: #FFF; font-size: 0.875em; text-transform: uppercase; } .copy-right p a{ color:#BD7F1C; font-family: 'Open Sans', sans-serif; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .copy-right p a:hover{ color:#fff; } /*---about-us----*/ .about-us { padding: 30px 0 50px 0; } .about-header h3{ font-family: 'Open Sans', sans-serif; font-size: 1.5em; color: #363638; text-transform: uppercase; } .about-info a{ text-transform: uppercase; font-size:1em; font-family: 'Open Sans', sans-serif; color:#BD7F1C; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; padding: 1em 0 0.5em 0; display: block; } .about-info p{ font-size: 0.85em; color: #816943; font-family: Arial, Helvetica, sans-serif; line-height: 1.8em; } /*-----specials-heading----*/ .specials-heading h5{ float: left; width: 33%; height: 1px; background: #D1D1D1; margin: 24px 0px 0px 0px; } /*----special-grid------*/ .special-grid { float: left; width: 32%; margin-right: 2%; text-align: center; } .specials { margin-top: 2em; } .special-grid img{ width:100%; } .special-grid a{ text-transform: uppercase; font-size: 1.2em; font-family: 'Open Sans', sans-serif; color:#BD7F1C; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; padding: 0.3em 0; display: block; } .special-grid p{ font-size: 0.85em; color: #816943; font-family: Arial, Helvetica, sans-serif; padding: 0em 1em 1em 1em; line-height: 1.5em; } .spe-grid{ margin: 0px; } .specials-grids { padding: 25px 0 60px 0; } /*-----specials-heading----*/ .specials-heading h3{ font-family: 'Open Sans', sans-serif; font-size: 1.5em; color:#363638; text-transform: uppercase; } /*----start-testmonial-grid----*/ .testmonial-grid{ text-align:center; } .testmonial-grid h3{ font-family: 'Open Sans', sans-serif; font-size:1.8em; color: #363638; text-align: center; text-transform: uppercase; padding: 0em 0 0.5em 0; } .testmonial-grid p{ font-size: 0.875em; color:#816943; font-family: Arial, Helvetica, sans-serif; padding: 0em 1em 1em 1em; line-height: 1.8em; } .testmonial-grid a{ font-size: 1.2em; font-family: 'Open Sans', sans-serif; color:#BD7F1C; } .testmonials{ background:#EAE4D8; padding: 30px 0; } /*---start-services----*/ .services { padding: 30px 0 0px 0; } .services-header h3{ font-family: 'Open Sans', sans-serif; font-size: 1.5em; color: #363638; text-transform: uppercase; } .services-grid{ width:25%; float:left; } .services-grid a{ text-transform: uppercase; font-size: 1em; font-family: 'Open Sans', sans-serif; color:#BD7F1C; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease; padding: 1em 0 0.5em 0; display: block; } .services-grid p{ font-size: 0.875em; color:#816943; font-family: Arial, Helvetica, sans-serif; line-height: 1.8em; } /*---start-gallery---*/ .gallerys { font-family: 'Open Sans', sans-serif; } .gallerys h3{ font-family: 'Open Sans', sans-serif; font-size: 1.5em; color: #363638; text-transform: uppercase; padding:1em 0; } .gallery-grid{ width: 31.44%; float:left; } .gallery-grid p { font-size: 0.875em; padding: 0.2em 0em 1.2em 0em; color: #6a6a6a; line-height: 1.8em; font-family: Arial, Helvetica, sans-serif; } .gallery-button a { color: #FFF; font-size: 0.85em; text-transform: uppercase; padding:8px 10px; border: 1px solid #EEE; display: inline-block; background:#BD7F1C; } .gallery-button a:hover { background: #363638; color: #FFF; } .grid2{ margin: 0px 35px; } .gallery-grids { margin-bottom: 30px; } .gallery-grid a{ display:inline-block; position:relative; } .gallery-grid a img{ display:block; max-width:100%; } .gallery-grid a span { position:absolute; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; line-height:4em; color:#fff; font-family: 'Open Sans', sans-serif; text-shadow: 0px 1px 1px #000; font-size:3em; opacity: 0; filter: alpha(opacity=0); /* internet explorer */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/ background: rgba(64, 72, 109, 0.61); -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .gallery-grid a:hover span { opacity: 1; filter: alpha(opacity=99); /* internet explorer */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/ } .projects-bottom-paination ul li{ display:inline-block; } .projects-bottom-paination{ text-align: center; padding: 55px 0; font-family: 'Open Sans', sans-serif; } .projects-bottom-paination li a{ font: 400 12px/1.2em Arial; color: #5a5a5a; padding: 11px 18px; background: #fff; text-decoration: none; text-shadow: none; border: 1px solid #e9e9e9; margin-top: 16px; } .projects-bottom-paination li.active a, .projects-bottom-paination li a:hover { background:#BD7F1C; color:#fff; } .gallery-grid h4{ font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 22px; text-transform: uppercase; color: #363638; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; cursor: pointer; padding: 13px 0px 2px 0px; } .gallery-grid h4:hover{ color:#BD7F1C; } /*---contect----*/ /* Contact Form ============================================================================= */ .section { clear: both; padding: 0px; margin: 0px; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; } .col{ display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child{ margin-left:0; } .span_2_of_3 { width: 63.1%; padding:1.5%; } .span_1_of_3 { width: 29.2%; padding:1.5%; } .span_2_of_3 h3, .span_1_of_3 h3 { font-family: 'Open Sans', sans-serif; font-size: 1.5em; color: #363638; text-transform: uppercase; padding:5px 0; margin-bottom:10px; } .contact-form{ position:relative; padding-bottom:30px; } .contact-form div{ padding:5px 0; } .contact-form span{ display:block; font-size: 0.875em; color: #363638; padding-bottom:5px; font-family: 'Open Sans', sans-serif; } .contact-form input[type="text"],.contact-form textarea{ padding:8px; display:block; width:98%; border: none; outline:none; color:#363638; font-size:1.2em; font-family:Arial, Helvetica, sans-serif; border: 1px solid rgba(192, 192, 192, 0.41); -webkit-appearance:none; } .contact-form input[type="text"]:focus,.contact-form textarea:focus{ border:1px solid #F1DDBD; } .contact-form textarea{ resize:none; height:120px; } .mybutton{ color: #FFF; font-size: 0.875em; text-transform: uppercase; padding:8px 15px; border: 1px solid #EEE; display: inline-block; background:#BD7F1C; border:none; outline: none; cursor:pointer; font-family: 'Open Sans', sans-serif; -webkit-appearance:none; } .mybutton:hover{ background:#222; color: #FFF; } .company_address{ } .company_address p{ font-size: 0.875em; color:#816943; line-height: 1.8em; font-family: Arial, Helvetica, sans-serif; } .company_address p span a{ text-decoration:underline; color:#947037; cursor:pointer; } .company_address p span a:hover{ text-decoration:none; } .map{ margin-bottom:15px; } /***** Media Quries *****/ @media only screen and (max-width: 1024px) { .wrap{ width:95%; } } /* GO FULL WIDTH AT LESS THAN 800 PIXELS */ @media only screen and (max-width: 800px) { .wrap{ width:95%; } .span_2_of_3 { width:94%; padding:3%; } .col{ margin: 1% 0 1% 0%; } .span_1_of_3 { width:94%; padding:3%; } } /* GO FULL WIDTH AT LESS THAN 640 PIXELS */ @media only screen and (max-width: 640px) and (min-width: 480px) { .wrap{ width:95%; } .span_2_of_3 { width:94%; padding:3%; } .col{ margin: 1% 0 1% 0%; } .span_1_of_3 { width:94%; padding:3%; } .contact-form input[type="text"],.contact-form textarea{ width:97%; } } /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ @media only screen and (max-width: 480px) { .wrap{ width:95%; } .span_2_of_3 { width:90%; padding:5%; } .col { margin:0%; } .span_1_of_3 { width:90%; padding:5%; } .contact-form input[type="text"],.contact-form textarea{ width:92%; } } .contact-footer{ border-top: 1px solid rgba(69, 69, 69, 0.13); padding: 25px 0px 0px 0px; } /*----responsive-design-----*/ @media only screen and (max-width: 1366px) and (min-width: 1280px) { .wrap{ width:90%; } } @media only screen and (max-width: 1280px) and (min-width: 1024px) { .wrap{ width:90%; } } @media only screen and (max-width: 1024px){ .wrap{ width:90%; } .bottom-grid2 ul li { width: 45.5%; } .bottom-grid2 ul li{ padding:8px 5px; } .gallery-grid a span{ line-height:3em; } .grid2 { margin: 0px 34px; } .gallery-grid { width: 30.7%; } } @media only screen and (max-width: 800px) { .wrap{ width:95%; } .bottom-grid2 ul li{ width:44.5%; } .gallery-grid { width: 30%; } } @media only screen and (max-width: 640px) { .wrap{ width:95%; } .top-nav-left ul li a{ padding:20px 8px; font-size:0.8em; } .top-grid h3{ font-size:1.2em; } .mid-grid p{ width:100%; } .mid-grid{ padding:1em 0; } .bottom-grid1,.bottom-grid2{ width:94%; padding:3%; margin-right:0; } .bottom-grids{ padding:0; } .bottom-grid1 h3, .bottom-grid2 h3{ padding:0; } .footer{ margin-top:0; padding:0; } .footer-grid{ width:94%; padding:3%; margin-right:0; } .services-grid{ float:none; width:100%; } .gallery-grid{ width:29%; } } @media only screen and (max-width: 480px) { .wrap{ width:95%; } .top-nav-left ul li a{ padding:15px 18px; } .top-grid{ float:none; width:94%; padding:3%; margin-right:0; margin-top:15px; } .top-grids{ margin:0; } .mid-grid{ margin:1em 0 0 0; } .specials-grids{ padding:5px 0; } .special-grid{ float:none; width:94%; padding:3%; margin-right:0; } .gallery-grid{ float:none; width:94%; padding:3%; } .grid2{ margin:0; } .gallerys h3{ padding:5px 0; } .gallery-grid a span{ line-height:4em; } .gallery-grids{ margin-bottom:0; } .projects-bottom-paination{ padding:10px 0 20px 0; } } @media only screen and (max-width: 320px) { .wrap{ width:95%; } .logo{ width:60%; } .social-icons ul li a img{ padding-right:0; } .top-header{ padding:10px 0; } .top-nav-left ul li a { padding: 15px 6.5px; font-size:0.7em; } .gallery-grid h4{ padding:5px 0; font-size:1em; } .gallery-grid a span{ line-height:3em; } }