Template:CSS/12

From 2014.igem.org

Revision as of 01:52, 28 June 2014 by Jiaming (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

html, body{ 

  font-family: 'Ubuntu', sans-serif;
   font-size: 100%;
   background-color: #FFF;

}

  1. contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/

.firstHeading { width: 975px; margin: 0px auto; padding-top: 100px; margin-bottom: 20px; font-family: Georgia, Times, "Times New Roman", serif; }

h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;}

  1. top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/

background-color: #383838; border: 0 none; height: 14px; z-index: 100; top: 0; position: fixed; width: 975px; left: 50%; margin-left: -487px; }

  1. top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/

background-color: #383838; height: 14px; display: block; z-index: 10; position: fixed; width: 100%; top: 0; }

  1. menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/

color: #727272; text-decoration: none; background-color: transparent; }

body { background-color: #fff; }

  1. globalWrapper, #content { /*-- changes default wiki settings --*/

width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px; padding: 0px; }

html, body, .wrapper { /*-- changes default wiki settings --*/ width: 100%; height: 100%; background-color: transparent; }

  1. contentcontainer { /*-- creates container for all content on page --*/

font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 14px; color: #414141; width: 960px; margin-left: auto; margin-right: auto; background-color: #transparent; margin-top: 0px; }

.sidemenu, .sidemenu li { list-style-type: none; list-style-image: none; font-family: verdana; text-decoration: none; color:#000; font-size: 14px; }

.sidemenu li {display: block;}

.sidemenu a { text-decoration:none; color: #000; display: block; width: 180px; height: 100%; padding: 3px 5px; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; }

.sidemenu a.greyout { color: #909090; }

.sidemenu a:hover { color:#666; background-color: #d9f5aa; }

.sub-sidemenu {font-size: 10px; margin-bottom: 20px; color: #666; display: none;} .sub-sidemenu a {color: #666;}

div.underconst { padding:10px; border-radius:5px; background-color:pink; text-align:center; }

a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}

.contentpara {margin-bottom: 30px;}

span.email{font-family: monospace; font-weight: normal;}

fieldset {border: 1px solid #337f53;}

.greyout {color: #A0A0A0;} .highlightme {background-color: #FFFF00;}

  1. alertContainer {border: 2px solid red; margin-bottom: 10px; width: 936px;}
  2. annContainer {margin-left: 8px;}
  3. newsContainer {border: 1px solid #ccc;}

.newsTitle { display: block; color: #414141; font-size: 25px; 

       font-family: Georgia, Times, "Times New Roman", serif;

padding: 10px 15px 5px 10px; border-bottom: 1px solid #ccc; margin-bottom: 0px; }

.newsItem { border-bottom: 1px solid #ccc; display: block; padding: 5px 15px 0px 10px; margin-bottom: 0px; }

.newsItem h3 { width: auto; display: inline; font-size: 14px; font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px; }

.newsItem img { float: right; clear: right; width: 80px; padding-left: 15px; display: inline-block; }

.newsItem .newsDate { font-style: italic; font-size: 14px; display: inline-block; color: #999; float: right; padding: 0px 0px 10px 15px; }

.newsItem p, .newsItem ul, .newsItem li { padding: 0px; margin-left: 20px; font-size: 12px; line-height: 1.2; }

.newsItem p {margin-top: 10px;}

.annItem { border: 2px solid #49b677; display: block; padding: 0px 15px 10px 10px; margin-bottom: 18px; position: relative; height: 160px; vertical-align: middle; }

.annItem .annCentered { display: table-cell; vertical-align: middle; height: 160px; }

.annCentered h3 { padding: 0px; display: block; margin-left: auto; margin-right: auto; text-align: center; }

.annItem ul, .annItem li {padding: 0px; margin: 0px;} .annItem li {list-style: none; margin: 5px}



body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } /*-----start-header----*/ .header{ position: relative; padding: 2em 0; } .bg{ background: url(../images/bg.jpg) no-repeat 0px 0px; min-height: 809px; background-size: 100% 100%; } .contact-no{ float: left; } .contact-no span{ font-size: 1.5em; color: #9DA0B2; font-weight: 500; margin-top: 1.2em; display: block; text-transform: uppercase; } .contact-order{ float:right; } .contact-order a{ font-size: 1.3em; color: #9DA0B2; font-weight: 500; margin-top: 1.5em; display: block; text-transform: uppercase; border-bottom: 2.5px dashed; } .contact-order a:hover{ text-decoration:none; color:#44C1F3; } .logo{ position:absolute; left: 45%; } /*----navbar-nav----*/ .top-nav ul li a{ color: #FFF; padding: 0.1em 2.7em; font-size: 1.1em; font-weight: 500; text-transform: uppercase; } .top-nav ul li.active a{ background: url(../images/active-ico.png) no-repeat 50% 100%; } .top-nav ul li a:hover{ color:#44C1F3; } .logo a{ display:block; } /* top-nav */ .top-nav:before, .top-nav:after { 

   content: " ";
   display: table;

} .top-nav:after { 

   clear: both;

} nav { position: relative; top: 615px; } nav ul { padding: 0; } nav li { display: inline; float: left; position:relative; } nav a { color: #fff; display: inline-block; text-align: center; text-decoration: none; line-height: 40px; } nav a:hover{ text-decoration:none; color:#00A2C1; } nav a#pull { display: none; } /*Styles for screen 600px and lower*/ @media screen and (max-width: 768px) { nav { 

 		height: auto;
 	}
 	nav ul {
 		width: 100%;
 		display: block;
 		height: auto;
 	}
 	nav li {
 		width: 100%;
 		position: relative;
 	}
 	nav li a {

border-bottom: 1px solid #eee; } 

 	nav a {

text-align: left; width: 100%; text-indent: 25px; 

 	}

} /*Styles for screen 515px and lower*/ @media only screen and (max-width : 768px) { nav { border-bottom: 0; } nav ul { display: none; height: auto; margin:0; background: #fff; } nav a#pull { display: block; position: relative; color: #F26D7D; text-align: right; position: absolute; /*--top:35px;--*/ } nav a#pull:after { content:""; background: url('nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } nav a#pull img{ margin-right:2%; padding-top: 65px; } .top-nav ul li a { color: #2C3E50; padding: 0em 0; } } /*Smartphone*/ @media only screen and (max-width : 320px) { nav li { display: block; float: none; width: 100%; } nav li a { border-bottom: 1px solid #576979; } } /*----start-about----*/ .about{ padding:5em 0; } .about-left p{ font-size: 3.5em; text-transform: uppercase; font-weight: 100; color: #000000; width: 76%; } .about-left p span{ color:#00AAEF; } .about-left p label{ font-weight:500; } .about-right h3,.about-right span{ font-weight: 400; color: #000; font-size: 1.2em; } .about-right span{ margin-top:1em; display:block; } .about-right p,.about-right li{ color: #222222; font-size: 0.9em; font-weight: 500; line-height: 1.8em; font-family: 'Open Sans', sans-serif; } /*-----start-gallery---*/ .gallery{ background:#EEEEEE; padding:3em 0; } .head h3{ color: #000000; font-size: 3em; text-transform: uppercase; font-weight: 300; width: 17.3%; margin: 0 auto; } .head span{ width: 189px; height: 13px; display: block; background: url(../images/head-border.png) no-repeat 0px 0px; margin-top: 0.15em; } /* Self Clearing Goodness */ /* Strip /*-----------------------------------------------------------------------------------*/ .b-link-stripe{ position:relative; display:inline-block; vertical-align:top; font-weight: 300; overflow:hidden; width: 100%; } .b-link-stripe .b-wrapper{ position:absolute; width:100%; height:100%; top:0; left:0; text-align:center; color:#ffffff; overflow:hidden; } .b-link-stripe .b-line{ position:absolute; top:0; bottom:0; width:20%; background:rgba(75, 202, 255, 0.85); transition:all 0.5s linear; -moz-transition:all 0.5s linear; -ms-transition:all 0.5s linear; -o-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; opacity:0; visibility:hidden; /* lt-ie9 */ } /* lt-ie9 */ .b-link-stripe:hover .b-line{ visibility:visible; } .b-link-stripe .b-line1{ left:0; } .b-link-stripe .b-line2{ left:20%; transition-delay:0.1s !important; -moz-transition-delay:0.1s !important; -ms-transition-delay:0.1s !important; -o-transition-delay:0.1s !important; -webkit-transition-delay:0.1s !important; } .b-link-stripe .b-line3{ left:40%; transition-delay:0.2s !important; -moz-transition-delay:0.2s !important; -ms-transition-delay:0.2s !important; -o-transition-delay:0.2s !important; -webkit-transition-delay:0.2s !important; } .b-link-stripe .b-line4{ left:60%; transition-delay:0.3s !important; -moz-transition-delay:0.3s !important; -ms-transition-delay:0.3s !important; -o-transition-delay:0.3s !important; -webkit-transition-delay:0.3s !important; } .b-link-stripe .b-line5{ left:80%; transition-delay:0.4s !important; -moz-transition-delay:0.4s !important; -ms-transition-delay:0.4s !important; -o-transition-delay:0.4s !important; -webkit-transition-delay:0.4s !important; } .b-link-stripe:hover .b-line{ opacity:1; } /*-----------------------------------------------------------------------------------*/ /* Animation effects /*-----------------------------------------------------------------------------------*/ .b-animate-go{ text-decoration:none; } .b-animate{ transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; visibility: hidden; font-size:1.1em; font-weight:700; } .b-animate img{ margin-top: 4%; display: -webkit-inline-box; } .b-animate span{ display:block; font-size: 2em; text-transform: uppercase; padding-top: 2.3em; display: block; font-weight: 500; } .b-animate button{ background: #000; padding: 0.9em 1.8em; color: #00AAEF; text-transform: uppercase; font-size: 0.875em; border: none; border-radius: 0.3em; margin: 0.8em auto; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; outline: none; } .b-animate button:hover{ background:#3B3B43; color:#fff; } .b-animate label{ display:block; font-size:0.875em; margin-top:0.5em; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; -o-transition:0.5s all; } .b-animate label:hover{ color:#000; cursor:pointer; } /* lt-ie9 */ .b-animate-go:hover .b-animate{ visibility:visible; } .b-from-left{ position: relative; left: -100%; background: rgba(0, 170, 239, 0.63); background-size: 100% 100%; top: 0px; margin: 0; min-height: 307px; } .b-animate-go:hover .b-from-left{ left:0; } h3.m_4{ float:left; } /*--default--*/ .default{ background:#515f67; padding:6% 0; } p.m_7{ color: #FFF; font-size:15px; line-height: 1.8em; margin:5% 0; } h3.m_21 { color: #FFF; font-size: 2em; font-family: 'Open Sans', sans-serif; text-transform: uppercase; } .m_22 { position: relative; margin-bottom: 10%; } .m_8 { position: relative; margin-bottom: 10%; } span.default_line { width: 50px; display: block; border-bottom: 2px solid #FFF; position: absolute; bottom:0px; } .button a{ color:#29353C; font-size:0.85em; text-transform: uppercase; font-weight:bold; text-decoration: none; cursor: pointer; padding: 12px 35px 9px 35px; display: inline-block; outline: none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; border:2px solid #29353C; } .button a:hover { background:#fff; border:2px solid #fff; color:#00B3FD; } .more-portfolio-grids{ text-align: center; background: #35353F; padding: 3em 0; } .more-portfolio-grids a{ color: #FFF; border: 2px solid #FFF; padding: 0.8em 2em; text-transform: uppercase; font-size: 1.1em; border-radius: 0.5em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; -o-border-radius: 0.5em; -ms-border-radius: 0.5em; } .more-portfolio-grids a:hover{ color:#000; border-color:#000; text-decoration:none; } /*----*/ /*-----start-gallery----*/ .gallery-grids{ padding:3em 0 0 0; } .port-pic{ width:100%; } .place{ color: #000; font-weight: 500; padding: 0.5em 1em; } .place a{ color:#00AAEF; } .place a:hover{ text-decoration:none; color:#222; } .view-gallery-btn{ background: #00AAEF; color: #FFF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; padding: 0.875em 0em; width: 15%; display: block; margin: 0 auto; text-align: center; } .view-gallery-btn:hover{ background:#000; color:#fff; text-decoration:none; } /*----start-consulation-----*/ .consulation{ padding:3em 0; } .c-head h3 { width: 28.3%; } .c-head span{ margin-left: 1.3em; } .consulation-left h4{ font-size: 2em; color: #000; font-weight: 400; width: 60%; line-height: 1.5em; } .consulation-left p{ color: #222; font-family: 'Open Sans', sans-serif; line-height: 1.8em; font-size: 0.9em; width: 65%; } /*-----*/ .consulation-right input[type="text"]{ background:#EEEEEE; color:#696969; text-align:center; width:100%; padding:1em; margin:10px 0; border:1px solid #EEEEEE; font-family: 'Open Sans', sans-serif; font-weight:600; -webkit-appearance: none; transition: border-color 0.3s; -o-transition: border-color 0.3s; -ms-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -webkit-transition: border-color 0.3s; text-transform:uppercase; outline:none; } .consulation-right input[type="text"]:hover,.consulation-right input[type="text"]:focus{ border-color:#00AAEF; } .consulation-right input[type="submit"]{ background: #00AAEF; color: #FFF; border: 1px solid #00AAEF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; width: 100%; padding: 1em; margin: 10px 0; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .consulation-right input[type="submit"]:hover{ background:#000000; border: 1px solid #000; } .consulation-grids{ padding:4em 0 0 0; } .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;} /*----start-Testimonials-----*/ .testmonials{ background:#EEEEEE; padding:3em 0; } .testmonial-grid h5{ margin:0.5em 0 0 0; } .t-pic{ border-radius:30em; -webkit-border-radius:30em; -moz-border-radius:30em; -o-border-radius:30em; -ms-border-radius:30em; } .testmonial-grid h5 a{ color: #222; font-size: 1.8em; } .testmonial-grid h5 a:hover{ text-decoration:none; color:#00AAEF; } .testmonial-grid span{ color:#696973; font-style:italic; font-family: 'Open Sans', sans-serif; } .testmonial-grid p{ color: #000; width: 80%; margin: 0.5em auto; font-family: 'Open Sans', sans-serif; } .testmonials-grids{ padding-top:4em; } /*----- start-contact----*/ .contact{ padding:3em 0; } .contact-left a,.contact-left p,.contact-left p label{ color:#000; font-size:1.5em; display: block; } .contact-left a:hover{ color:#00AAEF; text-decoration:none; } .contact-left p label{ display: block; font-weight: normal; font-size: 1em; } .contact-right input[type="text"],.contact-right textarea{ background:#EEEEEE; color:#696969; text-align:center; width:100%; padding:1em; margin:10px 0; border:1px solid #EEEEEE; font-family: 'Open Sans', sans-serif; font-weight:600; -webkit-appearance: none; transition: border-color 0.3s; -o-transition: border-color 0.3s; -ms-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -webkit-transition: border-color 0.3s; text-transform:uppercase; outline:none; } .contact-right input[type="text"]:hover,.contact-right input[type="text"]:focus,.contact-right textarea:hover,.contact-right textarea:focus{ border-color:#00AAEF; } .contact-right input[type="submit"]{ background: #00AAEF; color: #FFF; border: 1px solid #00AAEF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; width: 100%; padding: 1em; margin: 10px 0; transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .contact-right input[type="submit"]:hover{ background:#000000; border: 1px solid #000; } .contact-right textarea{ min-height:150px; resize:none; } .contact-grids{ padding-top:3em; } /*------start-contact----*/ .footer{ background: url(../images/footer-bg.jpg) no-repeat 0px 0px; min-height: 500px; background-size: cover; } .footer a img{ margin-top: 18%; } .copy-right{ color: #FFF; font-family: 'Open Sans', sans-serif; text-transform: uppercase; margin-top: 15%; font-weight: 600; } .copy-right a{ color:#000; } .copy-right a:hover{ color:#00AAEF; text-decoration:none; }

  1. toTop {

display: none; text-decoration: none; position: fixed; bottom: 26px; right: 3%; overflow: hidden; width: 40px; height: 40px; border: none; text-indent: 100%; background: url("../images/to-top1.png") no-repeat 0px 0px; border-radius: 30em; }

  1. toTopHover {

width: 40px; height: 40px; display: block; overflow: hidden; float: right; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); } /*--responsive design--*/ @media (max-width:1366px){ 

.top-nav ul li a {

padding: 0.1em 1.9em; 

}

} @media (max-width:1024px){ 

.top-nav ul li a {

padding: 0.1em 1.8em; font-size:1em; 

}
.bg {
   min-height: 600px;
}
nav {

top:410px; 

}
.about-left p {

font-size:3em; 

}
.head h3 {

font-size:2em; 

}
.head span {

background-size:65%; 

}
.footer {

min-height: 400px; 

}
.copy-right {

margin-top: 15%; 

}

} @media (max-width:800px){ 

.bg {
   min-height: 500px;
}
nav {

top:310px; 

}
.top-nav ul li a {

padding: 0.1em 1.5em; font-size: 0.85em; 

}
.about-left p {

font-size: 2em; 

}
.testmonials-grids {

padding-top: 2em; 

}
.contact-grids {

padding-top: 1em; 

}
.footer {

min-height: 300px; 

}
.consulation-grids {

padding: 1em 0 0 0; 

}
.head span {

background-size: 50%; 

}
.testmonial-grid {

margin-bottom: 30px; 

}
.contact-left p, .contact-left p label {

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

}
.contact-left a, .contact-left p, .contact-left p label {

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

}

} @media (max-width:768px){ 

.bg {
   min-height:400px;
}
nav {

top: -127px; 

}
.top-nav ul li a {

padding: 0.1em 1.5em; font-size: 0.85em; 

}
.about-left p {

font-size: 2em; 

}
.testmonials-grids {

padding-top: 2em; 

}
.contact-grids {

padding-top: 1em; 

}
.footer {

min-height: 300px; 

}
.consulation-grids {

padding: 1em 0 0 0; 

}
.contact-order {

display: none; 

}

} @media (max-width:480px){ 

.contact-no span {

font-size: 1em; margin-top: 0.2em; 

}
.logo {

left: 41%; top: 17px; 

}
nav {

top: -70px; 

}
.bg {
  min-height: 250px;
}
.about {

padding: 2em 0; 

}
.about-left p {

font-size:1.5em; font-weight:400; width:100%; 

}
.consulation-left h4 {

font-size: 1.4em; width:100%; 

}
.head h3 {

width: 30.3%; 

}
.gallery-grids {

padding: 1em 0 0 0; 

}
.view-gallery-btn {

padding: 0.75em; width: 32%; 

}
.head h3 {

font-size: 1.5em; font-weight: 400; 

}
.head span {

background-size: 50%; 

}
.b-animate span {

font-size: 1.5em; 

}
.footer {

min-height: 200px; 

}
.consulation-left p {

line-height: 1.5em; font-size: 0.8125em; width: 100%; 

}
.consulation-right input[type="text"], .consulation-right input[type="submit"], .contact-right input[type="text"], .contact-right textarea {
	padding: 0.7em;
	font-size:0.85em;
}
.testmonials-grids {

padding-top: 1em; 

}
nav a#pull img {

padding-top:40px; 

}
nav {

top: -98px; 

}
.contact-no {

margin-top: 10px; 

}

} @media (max-width:320px){ 

 .contact-no {

display: none; 

}
.logo {

left: 27%; top: 14px; 

}
nav {

top: -64px; 

}
.bg {

min-height: 200px; 

}
.about-left p {

font-size: 1.2em; 

}
.about-right h3, .about-right span {

font-weight: 600; font-size: 0.95em; margin: 10px 0; 

}
.head h3 {

width: 55.3%; 

}
.view-gallery-btn {

padding: 0.6em; width: 40%; font-size: 0.8125em; 

}
.consulation-left h4 {

font-size: 1em; width: 100%; font-weight: 500; 

}
.consulation-grids {

padding: 0; 

}
.b-animate span {

font-size: 1em; 

}
.b-animate button {

padding: 0.5em 1em; font-size: 0.8125em; 

}

}

Retrieved from "http://2014.igem.org/Template:CSS/12"