From 2014.igem.org
(Difference between revisions)
|
|
Line 102: |
Line 102: |
| img{max-width:100%;} | | img{max-width:100%;} |
| /*end reset*/ | | /*end reset*/ |
- |
| |
- | body {
| |
- | background: url('https://static.igem.org/mediawiki/2014/2/27/Background_TU_Eindhoven.jpg');
| |
- | font-family: 'Open Sans', sans-serif;
| |
- | font-size: 100%;}
| |
- |
| |
- | .wrap{
| |
- | margin:0 auto;
| |
- | width:100%;
| |
- | }
| |
| | | |
| .header_btm{ | | .header_btm{ |
Line 148: |
Line 138: |
| border-bottom:5px solid #00BAC6; | | border-bottom:5px solid #00BAC6; |
| text-decoration: none; | | text-decoration: none; |
- | }
| |
- |
| |
- | /* start slider */
| |
- | .slider{
| |
- | padding: 0 8%;
| |
- | }
| |
- |
| |
- | /* start footer */
| |
- | .footer_bg{
| |
- | background:url('https://static.igem.org/mediawiki/2014/c/c1/Bg_foot_TU_Eindhoven.png');
| |
- | }
| |
- | .footer{
| |
- | padding: 2% 2%;
| |
- | }
| |
- | .span_of_4{
| |
- | display: block;
| |
- | }
| |
- | .span1_of_4{
| |
- | float:left;
| |
- | width: 28%;
| |
- | margin-left: 5%;
| |
- | }
| |
- | #bodyContent > div.footer_bg > div > div > div > div:nth-child(3) > p.btm1.mail > a {background:none;}
| |
- | .span1_of_4:first-child{
| |
- | margin-left: 0;
| |
- | }
| |
- | .span1_of_4 h4{
| |
- | margin-bottom:8%;
| |
- | font-size: 1.5em;
| |
- | text-transform: capitalize;
| |
- | color: #ffffff;
| |
- | }
| |
- | .span1_of_4 p{
| |
- | font-size: 0.8725em;
| |
- | line-height:1.8em;
| |
- | color: #c9c9c9;
| |
- | }
| |
- | .span1_of_4 p a{
| |
- | color: #c9c9c9;
| |
- | -webkit-transition: all 0.3s ease-in-out;
| |
- | -moz-transition: all 0.3s ease-in-out;
| |
- | -o-transition: all 0.3s ease-in-out;
| |
- | transition: all 0.3s ease-in-out;
| |
- | }
| |
- | .span1_of_4 p a:hover{
| |
- | color: #00BAC6;
| |
- | text-decoration: none;
| |
- | }
| |
- | .span1_of_4 p.top{
| |
- | border-top: 1px solid rgb(99, 99, 99);
| |
- | margin-top: 20px;
| |
- | padding-top: 10px;
| |
- | }
| |
- | .span1_of_4 p.btm{
| |
- | margin-bottom: 8%;
| |
- | }
| |
- | .span1_of_4 p.btm1{
| |
- | margin-bottom: 4%;
| |
- | }
| |
- | .span1_of_4 p.call{
| |
- | margin-bottom: 4%;
| |
- | }
| |
- | .f_nav1{
| |
- | margin-top: 1%;
| |
- | }
| |
- | .f_nav1 li {
| |
- | display:inline-block
| |
- | padding-left:8%;
| |
- | font-size: 0.8725em;
| |
- | color: #00BAC6;
| |
- | }
| |
- |
| |
- | .pin{
| |
- | background: url('https://static.igem.org/mediawiki/2014/5/56/Pin_TU_Eindhoven.png') no-repeat;
| |
- | padding-left: 30px;
| |
- | }
| |
- | .mail{
| |
- | background: url('https://static.igem.org/mediawiki/2014/8/85/Mail_TU_Eindhoven.png') no-repeat;
| |
- | padding-left: 30px;
| |
- | }
| |
- | .call{
| |
- | background: url('https://static.igem.org/mediawiki/2014/9/9a/Call_TU_Eindhoven.png') no-repeat;
| |
- | padding-left: 30px;
| |
- | }
| |
- | .FB{
| |
- | background: url('https://static.igem.org/mediawiki/2014/d/d2/FB2_TU_Eindhoven.png') no-repeat;
| |
- | padding-left: 30px;
| |
- | }
| |
- | big {
| |
- | font-size: 1.5em;
| |
- | color: #ffffff;
| |
- | }
| |
- | /* start footer1 */
| |
- | .footer_bg1{
| |
- | background:url('https://static.igem.org/mediawiki/2014/9/92/Bg_headfoot_TU_Eindhoven.png');
| |
- | height:auto
| |
- | margin-bottom:-10px;
| |
- |
| |
- | }
| |
- | .footer1{
| |
- | padding: 2% 2%;
| |
- | }
| |
- | #toTop {
| |
- | display: none;
| |
- | text-decoration: none;
| |
- | position: fixed;
| |
- | bottom: 10px;
| |
- | right: 10px;
| |
- | overflow: hidden;
| |
- | width: 32px;
| |
- | height: 32px;
| |
- | border: none;
| |
- | text-indent: 100%;
| |
- | background: url('https://static.igem.org/mediawiki/2014/7/76/Top_TU_Eindhoven.jpg') no-repeat right top;
| |
- | }
| |
- | .copy{
| |
- | float:left;
| |
- | }
| |
- | .copy p{
| |
- | font-size: 0.6em;
| |
- | line-height: 1.8em;
| |
- | color: #c9c9c9;
| |
- | }
| |
- | .copy p a{
| |
- | color:#ffffff;
| |
- | -webkit-transition: all 0.3s ease-in-out;
| |
- | -moz-transition: all 0.3s ease-in-out;
| |
- | -o-transition: all 0.3s ease-in-out;
| |
- | transition: all 0.3s ease-in-out;
| |
- | }
| |
- | .copy p a:hover{
| |
- | color: #00BAC6;
| |
- | text-decoration: none;
| |
- | }
| |
- |
| |
- | .copyright{
| |
- | float:right;
| |
- | padding-right:1%
| |
- | }
| |
- | .copyright p{
| |
- | font-size: 0.6em;
| |
- | line-height: 1.8em;
| |
- | color: #c9c9c9;
| |
- | }
| |
- | .copyright p a{
| |
- | color:#ffffff;
| |
- | -webkit-transition: all 0.3s ease-in-out;
| |
- | -moz-transition: all 0.3s ease-in-out;
| |
- | -o-transition: all 0.3s ease-in-out;
| |
- | transition: all 0.3s ease-in-out;
| |
- | }
| |
- | .copyright p a:hover{
| |
- | color: #00BAC6;
| |
- | text-decoration: none;
| |
- | }
| |
- | /* start about */
| |
- | .top_bg{
| |
- | background: url('../images/slider_bg1.jpg');
| |
- | background-size: 100%;
| |
- | -webkit-background-size: cover;
| |
- | -moz-background-size: cover;
| |
- | -o-background-size: cover;
| |
- | background-size: cover;
| |
- | }
| |
- | .top{
| |
- | padding: 4% 4%;
| |
- | }
| |
- | .top h2{
| |
- | font-size: 2em;
| |
- | color: #ffffff;
| |
- | text-transform: uppercase;
| |
- | }
| |
- | .about{
| |
- | display: block;
| |
- | }
| |
- | .cont-grid {
| |
- | float: left;
| |
- | width: 60.3333%;
| |
- | }
| |
- | .cont-grid-img{
| |
- | margin-left: 3.3333%;
| |
- | width: 36.33333%;
| |
- | float:left;
| |
- | }
| |
- | .cont-grid-img img{
| |
- | margin-top: 10px;
| |
- | }
| |
- | .cont-grid span{
| |
- | font-size: 1.5em;
| |
- | text-transform: uppercase;
| |
- | color: #777777;
| |
- | text-shadow: 0 1px 0 #ffffff;
| |
- | }
| |
- | .abt-para p{
| |
- | margin-top: 2%;
| |
- | }
| |
- | .about-p{
| |
- | margin-top:20px;
| |
- | }
| |
- | .read_more {
| |
- | margin-top: 2%;
| |
- | }
| |
- | .btn{
| |
- | color: #00BAC6;
| |
- | background: #ffffff;
| |
- | border: 1px solid #22D5E0;
| |
- | display: inline-block;
| |
- | text-transform: uppercase;
| |
- | padding: 12px 38px;
| |
- | font-size: 0.875em;
| |
- | -webkit-transition: all 0.3s ease-in-out;
| |
- | -moz-transition: all 0.3s ease-in-out;
| |
- | -o-transition: all 0.3s ease-in-out;
| |
- | transition: all 0.3s ease-in-out;
| |
- | }
| |
- | .btn:hover {
| |
- | background: #00BAC6;
| |
- | color: #ffffff;
| |
- | }
| |
- | /* start services */
| |
- | .ser_btn{
| |
- | position: relative;
| |
- | margin-top: 12%;
| |
- | }
| |
- | .ser_btn1{
| |
- | position: absolute;
| |
- | bottom: 0;
| |
- | left: 0;
| |
- | }
| |
- | .button {
| |
- | color: #555555;
| |
- | border-top: 1px solid rgb(221, 221, 221);
| |
- | display: block;
| |
- | text-align:center;
| |
- | text-transform: uppercase;
| |
- | font-size: 0.875em;
| |
- | width: 100%;
| |
- | padding:12px 0;
| |
- | -webkit-transition: all 0.3s ease-in-out;
| |
- | -moz-transition: all 0.3s ease-in-out;
| |
- | -o-transition: all 0.3s ease-in-out;
| |
- | transition: all 0.3s ease-in-out;
| |
- | }
| |
- | .button:hover {
| |
- | background: #00BAC6;
| |
- | color: #ffffff;
| |
- | }
| |
- | /* start blog */
| |
- | .blog {
| |
- | display: block;
| |
- | }
| |
- | .blog_list{
| |
- | margin-top: 4%;
| |
- | }
| |
- | .blog_list:first-child{
| |
- | margin-top: 0%;
| |
- | }
| |
- | .blog_list h2{
| |
- | font-size: 1.5em;
| |
- | text-transform: uppercase;
| |
- | color: #777777;
| |
- | text-shadow: 0 1px 0 #ffffff;
| |
- | }
| |
- | .blog_list h5{
| |
- | margin-top:8px;
| |
- | font-size: 1em;
| |
- | text-transform: capitalize;
| |
- | color: #777777;
| |
- | text-shadow: 0 1px 0 #ffffff;
| |
- | }
| |
- | .blog_list h5 a{
| |
- | color: #00BAC6;
| |
- | -webkit-transition: all 0.3s ease-in-out;
| |
- | -moz-transition: all 0.3s ease-in-out;
| |
- | -o-transition: all 0.3s ease-in-out;
| |
- | transition: all 0.3s ease-in-out;
| |
- | }
| |
- | .blog_list h5 a:hover{
| |
- | color: #777777;
| |
- | }
| |
- | .blog_para{
| |
- | margin: 2% 0;
| |
- | }
| |
- | .blog_para p a{
| |
- | float: left;
| |
- | margin-right: 4%;
| |
- | }
| |
- | .blog_para p a img{
| |
- | margin-top: 10px;
| |
- | }
| |
- | /* start contact */
| |
- | .contact{
| |
- | display: block;
| |
- | }
| |
- | .contact h2{
| |
- | font-size: 1.5em;
| |
- | text-transform: uppercase;
| |
- | color: #777777;
| |
- | text-shadow: 0 1px 0 #ffffff;
| |
- | }
| |
- | .map{
| |
- | margin: 2% 0;
| |
- | }
| |
- | .col{
| |
- | display: block;
| |
- | }
| |
- | .contact-form{
| |
- | position:relative;
| |
- | }
| |
- | .contact-form div{
| |
- | padding:5px 0;
| |
- | }
| |
- | .contact-form span label{
| |
- | color: #777777;
| |
- | display: block;
| |
- | font-size: 0.8725em;
| |
- | padding-bottom: 5px;
| |
- | text-transform: capitalize;
| |
- | }
| |
- | .contact-form input[type="text"], .contact-form textarea {
| |
- | font-family: 'Open Sans', sans-serif;
| |
- | background: #FFFFFF;
| |
- | border: 1px solid #E7E7E7;
| |
- | color: rgba(85, 81, 81, 0.84);
| |
- | padding: 8px;
| |
- | display: block;
| |
- | width: 98%;
| |
- | outline: none;
| |
- | -webkit-appearance: none;
| |
- | text-transform: capitalize;
| |
- | }
| |
- | .contact-form textarea{
| |
- | resize:none;
| |
- | height:120px;
| |
- | }
| |
- | .contact-form input[type="submit"]{
| |
- | margin-top:10px;
| |
- | font-family: 'Open Sans', sans-serif;
| |
- | -webkit-appearance: none;
| |
- | cursor:pointer;
| |
- | color: #00BAC6;
| |
- | background: #ffffff;
| |
- | border: 1px solid #22D5E0;
| |
- | display: inline-block;
| |
- | text-transform: uppercase;
| |
- | padding: 12px 38px;
| |
- | font-size: 0.875em;
| |
- | -webkit-transition: all 0.3s ease-in-out;
| |
- | -moz-transition: all 0.3s ease-in-out;
| |
- | -o-transition: all 0.3s ease-in-out;
| |
- | transition: all 0.3s ease-in-out;
| |
- | }
| |
- | .contact-form input[type="submit"]:hover{
| |
- | background: #00BAC6;
| |
- | color: #ffffff;
| |
- | }
| |
- | /* start details */
| |
- | .details{
| |
- | display: block;
| |
- | }
| |
- | .details h2{
| |
- | font-size: 1.5em;
| |
- | text-transform: uppercase;
| |
- | color: #777777;
| |
- | text-shadow: 0 1px 0 #ffffff;
| |
- | }
| |
- | .det_pic{
| |
- | margin: 2% 0;
| |
- | }
| |
- | /***** Media Quries *****/
| |
- | @media only screen and (max-width: 1366px) {
| |
- | .wrap{
| |
- | width:95%;
| |
- | }
| |
- | .h_menu ul li a {
| |
- | padding: 30px 12px;
| |
- | }
| |
- | }
| |
- | @media only screen and (max-width: 1280px) {
| |
- | .wrap{
| |
- | width:95%;
| |
- | }
| |
- | .h_menu ul li a {
| |
- | padding: 30px 10px;
| |
- | font-size: 0.8125em;
| |
- | }
| |
- | }
| |
- | @media only screen and (max-width: 1024px) {
| |
- | .wrap{
| |
- | width:95%;
| |
- | }
| |
- | .h_menu ul li a {
| |
- | padding: 30px 6px;
| |
- | font-size: 0.8125em;
| |
- | }
| |
- | .h_search input[type="submit"] {
| |
- | right: 6px;
| |
- | }
| |
- | .h_search {
| |
- | width: 26.3333%;
| |
- | }
| |
- | }
| |
- | @media only screen and (max-width: 800px) {
| |
- | .wrap{
| |
- | width:95%;
| |
- | }
| |
- | .h_menu{
| |
- | display:none;
| |
- | }
| |
- | .h_search{
| |
- | display:none;
| |
- | }
| |
- | .sub-head{
| |
- | display:block;
| |
- | }
| |
- | .span1_of_4 h4 {
| |
- | font-size: 1.2em;
| |
- | }
| |
- | }
| |
- | @media only screen and (max-width: 640px){
| |
- | .wrap{
| |
- | width:95%;
| |
- | }
| |
- | .span1_of_4 {
| |
- | float: none;
| |
- | width: 99.3333%;
| |
- | margin-left: 0%;
| |
- | }
| |
- | .span1_of_4 h4 {
| |
- | margin: 2% 0;
| |
- | }
| |
- | .span1_of_4 p.btm {
| |
- | margin-bottom: 2%;
| |
- | }
| |
- | .social-icons li {
| |
- | float: none;
| |
- | display:inline-block;
| |
- | }
| |
- | .cont-grid {
| |
- | float: none;
| |
- | width: 99.3333%;
| |
- | }
| |
- | .cont-grid-img {
| |
- | margin-left: 0%;
| |
- | width: 99.33333%;
| |
- | float: none;
| |
- | }
| |
- | .main_text h2 {
| |
- | font-size: 1.5em;
| |
- | }
| |
- | }
| |
- | @media only screen and (max-width: 480px) {
| |
- | .wrap{
| |
- | width:95%;
| |
- | }
| |
- | .grids_of_3{
| |
- | margin-top: 4%;
| |
- | }
| |
- | .grid1_of_3 {
| |
- | float: none;
| |
- | width: 99.3333%;
| |
- | margin-left: 0;
| |
- | }
| |
- | .span1_of_3 {
| |
- | margin-top: 4%;
| |
- | float: none;
| |
- | width: 99.3333%;
| |
- | margin-left: 0;
| |
- | }
| |
- | .logo{
| |
- | float:none;
| |
- | text-align:center;
| |
- | }
| |
- | .copy{
| |
- | float:none;
| |
- | text-align:center;
| |
- | }
| |
- | .social-icons{
| |
- | margin-top:4%;
| |
- | float:none;
| |
- | text-align:center;
| |
- | }
| |
- | .top h2 {
| |
- | font-size: 1.5em;
| |
- | }
| |
- | .blog_list h2 {
| |
- | font-size: 1em;
| |
- | }
| |
- | .contact h2 {
| |
- | font-size: 1em;
| |
- | }
| |
- | .sub-head a {
| |
- | font-size: 0.8725em;
| |
- | }
| |
- | .cont-grid span{
| |
- | font-size: 1em;
| |
- | }
| |
- | big {
| |
- | font-size: 1em;
| |
- | }
| |
- | .details h2 {
| |
- | font-size: 1em;
| |
- | }
| |
- | .grid1_of_3{
| |
- | margin: 20px 0;
| |
- | }
| |
- | .grid1_of_3 img{
| |
- | width:20%;
| |
- | }
| |
- | }
| |
- | @media only screen and (max-width: 320px) {
| |
- | .wrap{
| |
- | width:95%;
| |
- | }
| |
- | .sub-head a {
| |
- | font-size: 0.8125em;
| |
- | }
| |
- | .grid1_of_3{
| |
- | margin: 20px 0;
| |
- | }
| |
- | .grid1_of_3 img{
| |
- | width:20%;
| |
- | }
| |
- | .content_top:after {
| |
- | border: 20px solid #eee;
| |
- | border-top: 0 solid rgba(0, 0, 0, 0)!important;
| |
- | border-right: 15px solid rgba(0, 0, 0, 0)!important;
| |
- | border-left: 15px solid rgba(0, 0, 0, 0)!important;
| |
- | left: 47%;
| |
- | top: -20px;
| |
- | }
| |
| } | | } |
Revision as of 18:08, 13 July 2014
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:0;padding:0;}
blockquote,q
{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after
{content:;content:none;}
table
{border-collapse:collapse;border-spacing:0;}
/* Removing iGEM style */
- searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display: none;
}
- content {
width: auto;
padding:0px;
border: none;
background:none;
}
- globalWrapper {
padding:0px;
}
/* Customizing standard iGEM navigation panel */
- top-section{
height:auto;
width: 100%;
border: none;
border-top: none;
}
- menubar {
display: table-cell;
width:100px;
height: 19px;
font-size: 12pt;
padding-top:5px;
background:none;
}
- menubar.left-menu {
padding-left:2%
}
- menubar.right-menu {
text-align: right;
padding-right:8%;
padding-top:5px;
}
- menubar.left-menu a {
border: none;
color: #454545;
}
- menubar.right-menu a {
border: none;
color: #454545;
}
- menubar * {
background: transparent;
}
- menubar * a:hover{
color: #00BAC6;
text-decoration: none;
}
- menubar > ul > li:last-child {
display: none;
}
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 */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
.header_btm{
background: url('https://static.igem.org/mediawiki/2014/9/92/Bg_headfoot_TU_Eindhoven.png');
height: 100px;
}
.header_sub{
padding: 0 8%;
}
/* start menu */
.h_menu{
float:left;
}
.h_menu ul li{
margin-right:20px;
float: left;
}
.h_menu ul li.active a{
color: #00BAC6;
}
.h_menu ul li a{
display:block;
padding: 30px 15px;
text-transform: uppercase;
font-size: 0.925em;
color:#c9c9c9;
font-weight: 600;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.h_menu ul li a:hover{
color: #00BAC6;
border-bottom:5px solid #00BAC6;
text-decoration: none;
}