Difference between revisions of "Team:Tianjin/Resources/CSS:maincss"

Revision as of 14:10, 28 August 2017

/*-------------------------------------------------------------- >>> TABLE OF CONTENTS:

1.0 Reset 2.0 Typography 3.0 Elements 4.0 Forms 5.0 Navigation 5.1 Links 5.2 Menus 6.0 Accessibility 7.0 Alignments 8.0 Clearings 9.0 Widgets 10.0 Content 10.1 Posts and pages 10.2 Asides 10.3 Comments 11.0 Infinite scroll 12.0 Media 12.1 Captions 12.2 Galleries

*/

/*-------------------------------------------------------------- 1.0 Reset

*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a{

   border: 0;
   font-family: inherit;
   font-size: 100%;
   font-style: inherit;
   font-weight: inherit;
   margin: 0;
   outline: 0;
   padding: 0;
   vertical-align: baseline;

}

html {

   font-size: 62.5%;
   overflow-y: scroll;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;

}

,
before,

after {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

article{

   display: block;

}

a img {

   border: 0;

}

{

   margin: 0;

}

html, body {

   height: 100%;

}

page {

   min-height: 100%;
   height: auto !important;
   /* This line and the next line are not necessary unless you need IE6 support */
   height: 100%;
   margin: 0px auto -87px;
   /* the bottom margin is the negative value of the footer's height */

}

/*-------------------------------------------------------------- 2.0 Typography

*/

body {

   font-family: "futura pt", "futura-pt", arial, sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.3;
   color: #2f353c;

}

body {

   background-color:#e8f1f5;

}

h1, h2, h3, h4, h5, h6 {

   clear: both;
   margin-bottom: 1.500em;
   line-height: 1.3;

text-align:center;

}

h1 {

   font-size: 2 em;
   font-weight: 700;

text-align:center; }

h2 {

   font-size: 1.500em;
   font-weight: 700;

}

h3 {

   font-size: 1.250em;
   font-weight: 700;

}

h4 {

   font-size: 1em;
   font-weight: 700;

}

h5 {

   font-size: 0.750em;
   font-weight: 400;
   letter-spacing: 0.6px;
   text-transform: uppercase;

}

p {

   font-size: 1.125em;
   margin-bottom: 1.500em;
   line-height: 1.3;
   font-weight: 400;

text-align:justify;

} /************************字体*******************************/ small {

   font-size: 1rem

}

@media screen and (min-width: 600px) {

   h1 {
       font-size: 2.200em;
   }

}

@media screen and (min-width: 1200px) {

   h1 {
       font-size: 2.825em;
   }
   h5 {
       font-size: 0.875em;
   }
   p {
       font-size: 1.250em;
   }

}

small {

   font-size: 75%;

}

big {

   font-size: 125%;

}

/*-------------------------------------------------------------- 3.0 Elements

*/

hr {

   background-color: #ccc;
   border: 0;
   height: 1px;
   margin-bottom: 1.5em;

}

ul, ol {

   margin: 0;

}

ul {

   list-style: none;

}

ol {

   list-style: decimal;

}

li>ul, li>ol {

   margin-bottom: 0;
   margin-left: 1.5em;

}

figure {

   margin: 0;

}

/*-------------------------------------------------------------- 4.0 Forms

*/

textarea {

   overflow: auto;
   /* Removes default vertical scrollbar in IE6/7/8/9 */
   padding-left: 3px;
   vertical-align: top;
   /* Improves readability and alignment in all browsers */
   width: 100%;

}

pdfviewer{

margin:auto } /*-------------------------------------------------------------- 10.1 Posts and pages

*/

primary {

   background-color: #e8f1f5;
   float: left;
   width: 100%;
   height: 100%;
   padding: 50px 10px 0;

}

.site-main {

   padding: 0px 20px 0;

}

article {

   width: 100%;
   max-width: 1160px;
   height: 100%;
   margin: 10px auto 0 auto;
   padding: 0;

}

article img {

   max-width: 100%;

}

.entry-header {

   text-align: center;
   ;

}

.entry-title {

   font-size: 2.625em;
   font-weight: 700;
   line-height: 1;
   margin: 20px 0 40px;
   color: #004a7c;

} .entry-header p {

   font-size: 1.5em;
   line-height: 1.3;
   margin: 0 auto 0.833em;
   width: 100%;
   max-width: 580px;

}

.entry-header hr {

   background-color: #2f353c;
   border: 0 none;
   width: 64px;
   height: 12px;
   margin: 0 auto 40px;

}

hr.short {

   display: inline-block;
   background-color: #2f353c;
   border: 0 none;
   width: 31px;
   height: 7px;
   margin-bottom: 1.500em;

}

.form-content {

   width: 50%;
   margin: 1.5em auto 0;

}

article .entry-content img {

   margin-bottom: 1em;

}

.text-center {

   margin: 0 auto;
   width: 100%;
   max-width: 580px;

}

.about-main {

   width: 80%;
   max-width: 1200px;
   height: 100%;
   margin: 0 auto 100px;
   padding: 0 20px;

}

.about-main article hr, .contact .contact-header hr {

   background-color: #2f353c;
   border: 0 none;
   height: 12px;
   margin: 1.3em auto;
   width: 64px;

}

.hello {

   text-align: center;

}

.services, .approach {

   text-align: center;
   margin-bottom: 180px;

}

.process {

   text-align: center;
   margin-bottom: 90px;

}

hello h1,

.services h1, .approach h1, .process h1, .contact h1 {

   font-size: 2.625em;
   font-weight: 700;
   line-height: 1;
   margin-top: 20px;
   text-align: center;
   color: #004a7c;

}

hello p{

font-size: 1.325em;

   margin-bottom: 1.500em;
   line-height: 1.5;
   font-weight: 400;

text-align:justify; }

.services p, .approach p, .process p {

   font-size: 1.5em;
   line-height: 1.3;
   letter-spacing: 0.2px;
   max-width: 550px;
   margin: 0 auto 1.3em;

}

.services .content-column p, .approach .content-column p, .process .content-column p {

   font-size: 1em;

}

.services .content-column, .approach .content-column, .process .content-column {

   text-align: left;

}

hello h2{

clear: both;

   margin-bottom: 1.500em;
   line-height: 1.5;

text-align:left; color: #004a7c; }

.process h2 {

   font-size: 4.250em;
   font-weight: 700;

}

.services h2, .approach h2, .process h3 {

   font-size: 1.500em;
   font-weight: 700;
   border-top: 1px solid #c8c4bb;
   border-bottom: 1px solid #c8c4bb;
   padding: 10px 0;
   margin-bottom: 10px;

}

/*-------------------------------------------------------------- 12.2 Galleries

*/

.gallery {

   margin-bottom: 1.5em;

}

.gallery-item {

   display: inline-block;
   text-align: center;
   vertical-align: top;
   width: 100%;

}

.gallery-columns-2 .gallery-item {

   max-width: 50%;

}

.gallery-columns-3 .gallery-item {

   max-width: 33.33%;

}

.gallery-columns-4 .gallery-item {

   max-width: 25%;

}

.gallery-columns-5 .gallery-item {

   max-width: 20%;

}

.gallery-columns-6 .gallery-item {

   max-width: 16.66%;

}

.gallery-columns-7 .gallery-item {

   max-width: 14.28%;

}

.gallery-columns-8 .gallery-item {

   max-width: 12.5%;

}

.gallery-columns-9 .gallery-item {

   max-width: 11.11%;

}

.gallery-caption {

   display: block;

}

@media screen and (max-width: 768px) {

   .process .one_fourth {
       height: 300px;
   }
   .layer2,
   .layer3 {
       display: none;
   }
   .layer4 {
       display: block;
       position: absolute;
       top: 50px;
       right: 0;
       bottom: 0px;
       left: 0;
       z-index: 902;
       text-align: center;
   }
   #content {
       margin: 70px auto 0;
   }
   .form-content {
       width: 100%;
   }
   .menu-categories-container ul {
       margin: 80px 0 30px;
   }

}

@media screen and (max-width: 640px) {

   .layer4 {
       display: none;
   }
   .layer6 {
       display: block;
       position: absolute;
       top: 50px;
       right: 0;
       bottom: 0px;
       left: 0;
       z-index: 902;
   }
   .intro-text {
       max-width: 640px;
       padding: 20px;
   }
   .overview-testimonial,
   .overview-credits {
       width: 100%;
   }
   .overview-overview h2,
   .overview-overview p,
   .overview-testimonial h2,
   .overview-testimonial p,
   .overview-credits h2 {
       margin: 0 0 20px 0;
   }
   .entry-header p {
       width: 100%;
   }
   .full_width,
   .one_half,
   .one_third,
   .two_third,
   .one_fourth,
   .three_fourth,
   .one_fifth,
   .two_fifth,
   .three_fifth,
   .four_fifth,
   .one_sixth,
   .five_sixth {
       clear: both;
       margin-bottom: 1em;
       margin-left: 0;
       margin-right: 0;
       width: 100% !important;
       height: 100% !important;
   }
   .one_half>div {
       padding: 20px 0 !important;
   }
   .one_third>div {
       padding: 0 20px 30px !important;
   }
   .contact-details,
   .contact-text {
       padding: 0;
       width: 100%;
   }
   #pod-content {
       padding: 10px 0;
   }
   .site-main {
       padding: 50px 0 0;
   }
   .overview-credits p {
       margin-left: 0;
   }

}

@media screen and (max-width: 480px) {

   .overview-header {
       height: auto;
   }
   .work-pod,
   .news-pod,
   .tweet-pod {
       width: 100%
   }
   .news-summary-image,
   .news-summary-text {
       width: 260px;
   }
   .news-pod .news-inner,
   .tweet-pod .tweet-inner {
       float: none;
       margin: 0 auto;
       width: 260px;
   }
   .hello {
       margin: 60px 0 100px;
   }
   .services,
   .approach {
       margin-bottom: 100px;
   }
   .news-summary-text .date {
       display: none;
   }
   .news-summary-text h2 {
       margin-top: 1em;
   }
   .contact-details,
   .contact-text,
   .contact-map {
       padding: 0;
   }
   .overlay {
       display: none;
   }
   .contact-details p,
   .contact-text h2 {
       font-size: 1.250em;
   }
   .phone:before,
   email:before,
   .address:before {
       background: none;
   }
   .phone,
   .email,
   .address {
       padding-left: 0;
   }
   .footer-content {
       display: none;
   }
   .footer-mobile {
       display: block;
   }

}

@@ Line 91: / Line 91: @@
      margin: 0px auto -87px;
      /* the bottom margin is the negative value of the footer's height */
-}
-#divide img{
-	margin:0px 48% 80px 48%;
-	width:4.8rem;
 }
@@ Line 103: / Line 97: @@
 --------------------------------------------------------------*/
-body,
+body {
-button,
-input,
-select,
-textarea {
      font-family: "futura pt", "futura-pt", arial, sans-serif;
      font-style: normal;
@@ Line 118: / Line 108: @@
 body {
-     background-color:#e8f1f5; ;
+     background-color:#e8f1f5;
 }
@@ Line 130: / Line 120: @@
      margin-bottom: 1.500em;
      line-height: 1.3;
+	text-align:center;
 }
 h1 {
-     font-size: 1.750em;
+     font-size: 2 em;
      font-weight: 700;
+	text-align:center;
 }
@@ Line 164: / Line 157: @@
      line-height: 1.3;
      font-weight: 400;
+	text-align:justify;
 }
+/************************字体*******************************/
 small {
      font-size: 1rem
@@ Line 172: / Line 167: @@
 @media screen and (min-width: 600px) {
      h1 {
-         font-size: 2.000em;
+         font-size: 2.200em;
      }
 }
@@ Line 178: / Line 173: @@
 @media screen and (min-width: 1200px) {
      h1 {
-         font-size: 2.625em;
+         font-size: 2.825em;
      }
      h5 {
@@ Line 255: / Line 250: @@
      background-color: #e8f1f5;<!--背景颜色-->
      float: left;
-    overflow: hidden;
      width: 100%;
      height: 100%;
@@ Line 274: / Line 268: @@
 article img {
-    height: auto;
      max-width: 100%;
 }
@@ Line 336: / Line 329: @@
      max-width: 1200px;
      height: 100%;
-    overflow: hidden;
      margin: 0 auto 100px;
      padding: 0 20px;
@@ Line 365: / Line 357: @@
 }
-.hello h1,
+#hello h1,
 .services h1,
 .approach h1,
@@ Line 378: / Line 370: @@
 }
-.hello p,
+#hello p{
+	font-size: 1.325em;
+    margin-bottom: 1.500em;
+    line-height: 1.5;
+    font-weight: 400;
+	text-align:justify;
+}
 .services p,
 .approach p,
@@ Line 399: / Line 399: @@
 .process .content-column {
      text-align: left;
+}
+#hello h2{
+	clear: both;
+    margin-bottom: 1.500em;
+    line-height: 1.5;
+	text-align:left;
+	color: #004a7c;
 }
@@ Line 406: / Line 414: @@
 }
-.hello h2,
 .services h2,
 .approach h2,
@@ Line 417: / Line 424: @@
      margin-bottom: 10px;
 }
 /*--------------------------------------------------------------
 .2 Galleries