Team:NAWI-Graz/css/design.css

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face { font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); font-weight: normal; font-style: normal; }

html {

 box-sizing: border-box; 

}

• , ::before, ::after {

 box-sizing: inherit; 

}

• , *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body, html { font-size: 100%; padding: 0; margin: 0;}

1. vgemcollaboration {

background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png');

position:absolute;

top:0;

left:0;

background-size:180px 220px; /*Adjust background-size and the width and height properties here if you wish to resize the icon*/

width:180px;

height:220px;

z-index:100;

}

1. vgemcollaboration:hover {

background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png');

}

1. vgemcollaboration a {

display:inline-block;

width:100%;

height:100%;

}

a { color: #aaa; text-decoration: none; outline: none; }

a img {

   border: none;

}

a:hover, a:active { color: #333; }

body{ margin: 0; padding: 0; height:100%; color: #6b7381; background: #f2f2f2;

   text-align: left;
   font-size: 150%;

font-family: 'Lato', Calibri, Arial, sans-serif; }

1. ueberschrift

{ color: white; padding-right: 20px; margin-top:5px; padding-top: 5px; text-align: right;

   font-size: 150%;

}

1. header{

/*margin:20px;*/ padding:0; font-size:230%; text-align:center;

background-color:#6599FF; height:176px; }

1. teamlogo{

background-color:#6599FF; height:156px; width:100%; background: url(../images/bg1.jpg); background-repeat: repeat-x;

   background-position: center;
   background-size:13%;

}

1. content{

-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; margin-top:10px; margin-bottom: 2%; margin-left: 20%; padding: 10px 10px 10px 10px; background: white;

   width:68%;

height:100%; }

1. main{

padding-left:10%; padding-right:10%; padding-top:5%; padding-bottom:5%; }

1. footer{

   background: #333;

padding-bottom: 1rem; color:white; text-align:center;

   clear:left;

} .floatLeft{ background: url(../images/bg.jpg);

   float:left; 

} .sidebar-left{

   background: url(../images/bg.jpg);
   width: 20%;
}

.copyright {font-size : 9px; font-family : courier new;} p {font-size : 20px}

img {

   max-width: 100%;
   height: auto;

}

1. global-nav{

background-color:black; width:100%; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; margin:0 auto; }

nav {

margin: 0 auto; width: 100%; /* 1000 */ font-family: 'Open Sans', sans-serif; font-weight: 100;

}

nav > a { display: none; }

nav li {

position: relative; } nav li a { color: white; display: block; } nav li a:active { background-color: yellow !important; }

nav span:after { width: 0; height: 0; border: 0.313em solid transparent; /* 5 */ border-bottom: none; border-top-color: white; content: ; vertical-align: middle; display: inline-block; position: relative; right: -0.313em; /* 5 */ }

/* first level */

nav > ul {

margin:0 auto; padding:0px; height: 2.65em; /* 60 */ background-color: transparent; } nav > ul > li { width: 11%; height: 100%; float: left; list-style:none;

} nav > ul > li > a { text-decoration: none; display:block; height: 100%;

font-size: 0.8em; /* 24 */ line-height: 1.8em; /* 60 (24) */ text-align: center; } nav > ul > li:not( :last-child ) > a { /*border-right: 1px solid white;*/ } nav > ul > li:hover > a, nav > ul:not( :hover ) > li.active > a { background-color: transparent; color:yellow; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }

/* second level */

nav li ul { width:200%; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background-color: white; opacity:0.8; display: none; font-size:40%; color: black; list-style: none; position: absolute; top: 100%; } nav li:hover ul { display: block; left: 0; right: 0; } nav li:not( :first-child ):hover ul { left: -1px; } nav li ul a { height:80%; font-size: 1.25em; /* 20 */ border-top: 1px solid white; color:black; padding: 0.3em; /* 15 (20) */ } nav li ul li a:hover, nav li ul:not( :hover ) li.active a { background-color: yellow; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }

nav > ul > li > a > img { height: auto; width: auto; max-height:500px; max-width:200px; padding: 0 0.633em; /* 20 (24) */ } /* Team */

.teamfoto {

}

.teamtext {

}

1. membercontent{

width:100%; }

1. member{

width:47%; float: left; margin-left: 10px; margin-bottom: 20px; background-color: white; min-height:250px; }

1. member1{

width:47%; float: right; margin-left: 10px; margin-bottom: 20px; background-color: #123; min-height:250px; }

1. member2{

width:47%; float: left; margin-left: 10px; margin-bottom: 20px; background-color: #123; min-height:250px; }

1. member3{

width:47%; float: right; margin-left: 10px; margin-bottom: 20px; background-color: white; min-height:250px; }

1. wrapper {

width: 100%; margin: 0 auto; }

1. memberfoto {

float: left; padding: 2px 2px 2px 2px; max-width: 200px; margin-left: 10px; margin-top:10px; margin-bottom: 10px; }

1. memberfoto1 {

float: left; padding: 2px 2px 2px 2px; max-width: 200px; margin-left: 10px; margin-top:10px; margin-bottom: 10px;

}

1. membertextfieldgraz {

width: 50%; margin-left: 210px; margin-top:10px; padding-left:10px; padding-top:10px; margin-bottom: 10px; }

@media only screen and (max-width: 70rem), only screen and (max-device-width: 40rem) { #footer{ display:none; }

#global-nav{ background-color:black; width:100%; position: fixed;

}

1. header{

/*font-size:200%; text-align:center;

   padding-top: 5px;
   background-size: 60% 100%;

height:140px; background-repeat: no-repeat;*/ display:none; }

#content{ margin:2px 2px 2px 2px; width:100%; padding:0em; }

#member{ background-color: white; width:95%; float:none; padding-bottom:10px; } #member1{ background-color: #123; float:none; width:95%; padding-bottom:10px; } #member2{ background-color: white; width:95%; float:none; padding-bottom:10px; } #member3{ float:none; background-color: #123; width:95%; padding-bottom:10px; }

1. wrapper {

width: 100%; margin: 0 auto; background-color: #D2D2EF;

}

#memberfoto { float:left; width:90%;

margin-left: 10px; margin-top:10px; margin-bottom: 10px; padding-right:10px; padding-top:10px;

} #memberfoto img { width: 100%;

}

1. memberfoto1 {

float: right; padding: 2px 2px 2px 2px; max-width: 200px; margin-left: 10px; margin-top:10px; margin-bottom: 10px;

}

#membertextfieldgraz { width:80%; margin-left: 10px; margin-top:10px; padding-left:10px; padding-top:10px; margin-bottom: 10px; }

#teamlogo{ display:none; }

   html

{ font-size: 55%; /* 12 */ }

nav { position: relative; top: 0; left: 0px; } nav > a { width: 1.125em; /* 50 */ height: 1.125em; /* 50 */ text-align: left; text-indent: -9999px; background-color: black;

} nav > a:before, nav > a:after { position: absolute; border: 2px solid #fff; top: 35%; left: 25%; right: 25%; content: ;

} nav > a:after { top: 60%; }

nav:not( :target ) > a:first-of-type, nav:target > a:last-of-type { display: block; }

/* first level */

nav > ul {

height: auto; display: none; position: absolute; left: 0; right: 0; background-color:#6599FF;

} nav:target > ul {

width: 100%; display: block; } nav > ul > li { text-align:center; /*background: url("../images/8.jpg");*/ background-size:100% 100%; width: 100%; float: none; } nav > ul > li > a { font-size:20px; height: left; padding-left: 30%; text-align: left; } nav > ul > li:not( :last-child ) > a {

border-right: none; width:100%; border-bottom: 1px solid white; }

nav > ul > li > a > img { height: 20%; max-width:30px; width: 20%; max-height:30px; text-align: left; padding: 0 0.633em; /* 20 (24) */ }

/* second level */

nav li ul { position: static; padding: 0.25em; padding-top: 0; height:100%; width:98%; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; background-color: #124; opacity:0.70; display: none; font-size:80%;

list-style: none; top: 100%; } nav li:hover ul { display: none; left: 0; right: 0; } nav li:not( :first-child ):hover ul { left: -1px; } nav li ul a { font-size: 1.15em; border-top: 1px solid white; padding: 0.3em; } nav li ul li a:hover, nav li ul:not( :hover ) li.active a { background-color: #eee; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; }

}