Team:TU Darmstadt/Template/CSS
From 2014.igem.org
(Difference between revisions)
(309 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | |||
/* | /* | ||
Line 8: | Line 11: | ||
*/ | */ | ||
- | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/ | + | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} |
+ | |||
+ | /*-- hides default wiki settings --*/ | ||
.firstHeading { | .firstHeading { | ||
Line 14: | Line 19: | ||
margin: 0px auto; | margin: 0px auto; | ||
padding-top: 0px; | padding-top: 0px; | ||
- | margin-top: | + | margin-top: 100px; |
margin-bottom: 0px; | margin-bottom: 0px; | ||
font-family: Georgia, Times, "Times New Roman", serif; | font-family: Georgia, Times, "Times New Roman", serif; | ||
display:none; | display:none; | ||
} | } | ||
- | |||
- | |||
Line 29: | Line 32: | ||
z-index: 100; | z-index: 100; | ||
top: 10px; | top: 10px; | ||
- | position: fixed; | + | /*position: fixed;*/ |
width: 975px; | width: 975px; | ||
left: 50%; | left: 50%; | ||
Line 53: | Line 56: | ||
body { | body { | ||
background-color: #727272; | background-color: #727272; | ||
+ | |||
} | } | ||
Line 541: | Line 545: | ||
border: 2px solid black; | border: 2px solid black; | ||
padding: 0px 0px; | padding: 0px 0px; | ||
+ | |||
} | } | ||
- | div.csc-textpic .csc-textpic-imagewrap img { border: none; display: block; } | + | .csc-textpic-imagewrap img { |
+ | border-radius: 20px; border 2px solid black; | ||
+ | } | ||
+ | |||
+ | |||
+ | div.csc-textpic .csc-textpic-imagewrap img { border: none; display: block; border: 1px solid black;} | ||
/* Space below each image (also in-between rows) */ | /* Space below each image (also in-between rows) */ | ||
Line 1,118: | Line 1,128: | ||
#c19 .csc-textpic {margin-top:0px;} | #c19 .csc-textpic {margin-top:0px;} | ||
- | #allWrap {height:100%;margin-bottom:0px !important;} | + | #allWrap {height:100%;margin-bottom:0px !important; position: relative;} |
- | #headerBG{width:auto;height:auto;background-color:#555;border-bottom: | + | #headerBG{width:auto;height:auto;background-color:#555;border-bottom:4px solid #fc0110;padding-top: 24px;margin-bottom: 20px;} |
#headerWrap{background-color: none;} | #headerWrap{background-color: none;} | ||
#logo{height:101px;padding-top:5px;} | #logo{height:101px;padding-top:5px;} | ||
#claim{height:70px;text-align:right;} | #claim{height:70px;text-align:right;} | ||
#claim p {/*padding:10px 5px;margin:5px 0;*/color:#fff;font-size:14px;line-height:18px;text-transform:uppercase;font-weight:bold;letter-spacing:0.2px;} | #claim p {/*padding:10px 5px;margin:5px 0;*/color:#fff;font-size:14px;line-height:18px;text-transform:uppercase;font-weight:bold;letter-spacing:0.2px;} | ||
- | #topBar{ | + | #topBar{width: 100%;} |
#topBar ul {float:right;} | #topBar ul {float:right;} | ||
- | #topBar ul li {float:left;margin-left: | + | #topBar ul li {float:left;margin-left:13px;list-style:none;} |
#topBar ul li.active a{color:#fff;} | #topBar ul li.active a{color:#fff;} | ||
- | #topBar ul li a {font-size: | + | #topBar ul li a {font-size:17px !important;color:#c3c3c3;font-weight:bold;} |
#topBar ul li a:hover {color:#fff;} | #topBar ul li a:hover {color:#fff;} | ||
#searchBar.grid_6 {height:31px;} | #searchBar.grid_6 {height:31px;} | ||
Line 1,146: | Line 1,156: | ||
#mainMenu ul.tabs > li.active {margin-top: 0px;z-index: 70;} | #mainMenu ul.tabs > li.active {margin-top: 0px;z-index: 70;} | ||
- | #mainMenu ul.tabs > li a {color: #333;font-size:16px;background-color:#fff;padding:3px | + | #mainMenu ul.tabs > li a {color: #333;font-size:16px;background-color:#fff;padding: 3px 8px 4px;display:block;} |
#mainMenu ul.tabs > li:hover a, | #mainMenu ul.tabs > li:hover a, | ||
#mainMenu ul.tabs > li.active a {color: #fff;background-color:#fc0110; } | #mainMenu ul.tabs > li.active a {color: #fff;background-color:#fc0110; } | ||
#mainMenu ul.tabs > li.last{float:right;margin-right:0px !important;} | #mainMenu ul.tabs > li.last{float:right;margin-right:0px !important;} | ||
- | #mainMenu ul.tabs > li.last a{padding:3px | + | #mainMenu ul.tabs > li.last a{padding:3px 13px 4px 17px !important;} |
.tabLeft {display:none;} | .tabLeft {display:none;} | ||
.tabRight{display:none;} | .tabRight{display:none;} | ||
Line 1,159: | Line 1,169: | ||
#space{background-color:red;} | #space{background-color:red;} | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | #promoWrap{height: | + | #promoWrap{ |
+ | background-color:#999; | ||
+ | height:305px; | ||
+ | box-shadow: 0px 0px 6px 1px rgba(119, 119, 119, 0.6); | ||
+ | -moz-box-shadow: 0px 0px 6px 1px rgba(119, 119, 119, 0.6); | ||
+ | -webkit-box-shadow: 0px 0px 6px 1px rgba(119, 119, 119, 0.6); | ||
+ | -moz-border-radius: 15px; | ||
+ | border-radius: 15px; | ||
+ | margin-left: 10px; | ||
+ | |||
+ | } | ||
+ | #promoWrap a p {text-align: center; font-weight: bold;} | ||
#promoWrap a {padding:10px 0;} | #promoWrap a {padding:10px 0;} | ||
+ | #promoWrap a:hover {text-decoration: none;} | ||
#promoWrap h1 {margin-bottom:10px;margin-top:10px;padding:0px 10px;text-align:center;} | #promoWrap h1 {margin-bottom:10px;margin-top:10px;padding:0px 10px;text-align:center;} | ||
+ | |||
/*#promoWrap a h1 {margin-bottom:10px;margin-top:10px;padding:0px 10px;text-align:center;}*/ | /*#promoWrap a h1 {margin-bottom:10px;margin-top:10px;padding:0px 10px;text-align:center;}*/ | ||
#promoWrap a h1 { | #promoWrap a h1 { | ||
Line 1,188: | Line 1,195: | ||
padding: 20px 10px 10px 10px; | padding: 20px 10px 10px 10px; | ||
text-align: center; | text-align: center; | ||
+ | color:lightblue; | ||
} | } | ||
- | + | ||
- | + | .grid_6.promo1,.grid_6.promo2,.grid_6.promo3 { | |
- | + | ||
- | + | height: 100px; | |
- | + | border: 1px solid transparent; | |
- | + | margin-left:0;margin-right:0;height:100px !important;color:#333; | |
+ | -moz-border-radius: 15px; | ||
+ | border-radius: 15px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | .grid_6.promo1:hover, .grid_6.promo2:hover, .grid_6.promo3:hover { | |
- | + | background-color:grey; opacity: 0.4; margin-left:0;margin-right:0; | |
- | + | height:100px !important;color: #FC0110; | |
- | + | box-shadow: 0px 0px 1px 1px rgba(119, 119, 119, 0.6); | |
- | + | -moz-box-shadow: 0px 0px 1px 1px rgba(119, 119, 119, 0.6); | |
- | + | -webkit-box-shadow: 0px 1px 1px 1px rgba(119, 119, 119, 0.6); | |
- | + | -moz-border-radius: 15px; | |
+ | border-radius: 15px; | ||
+ | } | ||
+ | |||
+ | .grid_6.promo1:hover a, .grid_6.promo2:hover a, .grid_6.promo3:hover a { | ||
+ | color:#fc0110; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | |||
- | #contentWrap{background-color: #fff;} | + | #contentWrap{background-color: #fff; } |
#breadcrumbs{height:30px;background-color:none;color:#333;font-size:12px;margin-bottom:15px;} | #breadcrumbs{height:30px;background-color:none;color:#333;font-size:12px;margin-bottom:15px;} | ||
#breadcrumbs p{color:#333;font-size:12px;font-weight:bold;padding:6px 5px;margin-bottom:0;} | #breadcrumbs p{color:#333;font-size:12px;font-weight:bold;padding:6px 5px;margin-bottom:0;} | ||
Line 1,249: | Line 1,269: | ||
} | } | ||
- | # | + | #wikicontent{ |
+ | height:auto; | ||
+ | background-color:none; | ||
+ | padding:0px 5px; | ||
+ | width:740px; | ||
+ | margin-bottom:30px; | ||
+ | color:#333; | ||
+ | } | ||
#content h1{color:#fc0110;} | #content h1{color:#fc0110;} | ||
#content p {text-align:justify;} | #content p {text-align:justify;} | ||
Line 1,276: | Line 1,303: | ||
#c45 .tx-sf-banners {padding: 0 5px;width: 730px;} | #c45 .tx-sf-banners {padding: 0 5px;width: 730px;} | ||
- | .csc-textpic .csc-textpic-imagewrap img {border: medium none;display: block; height: auto; max-width: 740px;} | + | .csc-textpic .csc-textpic-imagewrap img {border: medium none;display: block; height: auto; max-width: 740px; |
+ | |||
+ | |||
+ | } | ||
#news { | #news { | ||
Line 1,338: | Line 1,368: | ||
.news-text-latest a:hover{color:#333 !important;} | .news-text-latest a:hover{color:#333 !important;} | ||
- | #sponsoren{padding:10px 0 10px 0;background-color:none;border-top:2px solid #fc0110; | + | #sponsoren{padding:10px 0 10px 0;background-color:none;border-top:2px solid #fc0110; |
- | + | height: 200px; | |
- | + | width:960px; | |
- | + | position: relative; | |
- | + | margin-left: auto; | |
+ | margin-right: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | #sponsoren ul { list-style-type: none; display: inline; } | ||
+ | #sponsoren li { display: inline; margin: 0px 20px 0 20px; } | ||
+ | |||
hr {border: 0 #c3c3c3 solid;border-top-width: 1px;clear: both;height: 0;margin-bottom:10px;} | hr {border: 0 #c3c3c3 solid;border-top-width: 1px;clear: both;height: 0;margin-bottom:10px;} | ||
- | #footerBG{width: | + | #footerBG{ |
+ | position:absolute; | ||
+ | bottom: -430px; | ||
+ | left: 0px; | ||
+ | width:100%; | ||
+ | } | ||
+ | |||
+ | #footerInner{width:100%;min-height:120px;background-color:#333;border-top:4px solid #fc0110} | ||
+ | |||
#footerWrap{background-color:none;margin-bottom:0px;height:auto;color:#c3c3c3;} | #footerWrap{background-color:none;margin-bottom:0px;height:auto;color:#c3c3c3;} | ||
#footerWrap ul.menu {list-style:none;margin-top:8px;margin-bottom:15px;} | #footerWrap ul.menu {list-style:none;margin-top:8px;margin-bottom:15px;} | ||
Line 1,639: | Line 1,684: | ||
</PUBLIC:COMPONENT> | </PUBLIC:COMPONENT> | ||
- | |||
+ | body.mediawiki { | ||
+ | margin-top: -20px; | ||
+ | } | ||
+ | |||
+ | .container_24{ | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | width:960px | ||
+ | } | ||
+ | |||
+ | .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16,.grid_17,.grid_18,.grid_19,.grid_20,.grid_21,.grid_22,.grid_23,.grid_24{ | ||
+ | display:inline; | ||
+ | float:left; | ||
+ | margin-left:5px; | ||
+ | margin-right:5px | ||
+ | } | ||
+ | |||
+ | .push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12,.push_13,.pull_13,.push_14,.pull_14,.push_15,.pull_15,.push_16,.pull_16,.push_17,.pull_17,.push_18,.pull_18,.push_19,.pull_19,.push_20,.pull_20,.push_21,.pull_21,.push_22,.pull_22,.push_23,.pull_23{ | ||
+ | position:relative | ||
+ | } | ||
+ | |||
+ | .alpha{ | ||
+ | margin-left:0 | ||
+ | } | ||
+ | |||
+ | .omega{ | ||
+ | margin-right:0 | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_1{ | ||
+ | width:30px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_2{ | ||
+ | width:70px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_3{ | ||
+ | width:110px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_4{ | ||
+ | width:150px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_5{ | ||
+ | width:190px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_6{ | ||
+ | width:230px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_7{ | ||
+ | width:270px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_8{ | ||
+ | width:310px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_9{ | ||
+ | width:350px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_10{ | ||
+ | width:390px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_11{ | ||
+ | width:430px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_12{ | ||
+ | width:470px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_13{ | ||
+ | width:510px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_14{ | ||
+ | width:550px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_15{ | ||
+ | width:590px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_16{ | ||
+ | width:630px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_17{ | ||
+ | width:670px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_18{ | ||
+ | width:710px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_19{ | ||
+ | width:750px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_20{ | ||
+ | width:790px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_21{ | ||
+ | width:830px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_22{ | ||
+ | width:870px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_23{ | ||
+ | width:910px | ||
+ | } | ||
+ | |||
+ | .container_24 .grid_24{ | ||
+ | width:950px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_1{ | ||
+ | padding-left:40px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_2{ | ||
+ | padding-left:80px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_3{ | ||
+ | padding-left:120px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_4{ | ||
+ | padding-left:160px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_5{ | ||
+ | padding-left:200px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_6{ | ||
+ | padding-left:240px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_7{ | ||
+ | padding-left:280px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_8{ | ||
+ | padding-left:320px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_9{ | ||
+ | padding-left:360px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_10{ | ||
+ | padding-left:400px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_11{ | ||
+ | padding-left:440px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_12{ | ||
+ | padding-left:480px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_13{ | ||
+ | padding-left:520px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_14{ | ||
+ | padding-left:560px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_15{ | ||
+ | padding-left:600px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_16{ | ||
+ | padding-left:640px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_17{ | ||
+ | padding-left:680px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_18{ | ||
+ | padding-left:720px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_19{ | ||
+ | padding-left:760px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_20{ | ||
+ | padding-left:800px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_21{ | ||
+ | padding-left:840px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_22{ | ||
+ | padding-left:880px | ||
+ | } | ||
+ | |||
+ | .container_24 .prefix_23{ | ||
+ | padding-left:920px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_1{ | ||
+ | padding-right:40px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_2{ | ||
+ | padding-right:80px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_3{ | ||
+ | padding-right:120px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_4{ | ||
+ | padding-right:160px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_5{ | ||
+ | padding-right:200px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_6{ | ||
+ | padding-right:240px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_7{ | ||
+ | padding-right:280px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_8{ | ||
+ | padding-right:320px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_9{ | ||
+ | padding-right:360px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_10{ | ||
+ | padding-right:400px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_11{ | ||
+ | padding-right:440px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_12{ | ||
+ | padding-right:480px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_13{ | ||
+ | padding-right:520px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_14{ | ||
+ | padding-right:560px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_15{ | ||
+ | padding-right:600px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_16{ | ||
+ | padding-right:640px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_17{ | ||
+ | padding-right:680px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_18{ | ||
+ | padding-right:720px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_19{ | ||
+ | padding-right:760px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_20{ | ||
+ | padding-right:800px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_21{ | ||
+ | padding-right:840px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_22{ | ||
+ | padding-right:880px | ||
+ | } | ||
+ | |||
+ | .container_24 .suffix_23{ | ||
+ | padding-right:920px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_1{ | ||
+ | left:40px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_2{ | ||
+ | left:80px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_3{ | ||
+ | left:120px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_4{ | ||
+ | left:160px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_5{ | ||
+ | left:200px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_6{ | ||
+ | left:240px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_7{ | ||
+ | left:280px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_8{ | ||
+ | left:320px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_9{ | ||
+ | left:360px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_10{ | ||
+ | left:400px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_11{ | ||
+ | left:440px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_12{ | ||
+ | left:480px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_13{ | ||
+ | left:520px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_14{ | ||
+ | left:560px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_15{ | ||
+ | left:600px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_16{ | ||
+ | left:640px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_17{ | ||
+ | left:680px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_18{ | ||
+ | left:720px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_19{ | ||
+ | left:760px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_20{ | ||
+ | left:800px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_21{ | ||
+ | left:840px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_22{ | ||
+ | left:880px | ||
+ | } | ||
+ | |||
+ | .container_24 .push_23{ | ||
+ | left:920px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_1{ | ||
+ | left:-40px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_2{ | ||
+ | left:-80px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_3{ | ||
+ | left:-120px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_4{ | ||
+ | left:-160px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_5{ | ||
+ | left:-200px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_6{ | ||
+ | left:-240px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_7{ | ||
+ | left:-280px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_8{ | ||
+ | left:-320px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_9{ | ||
+ | left:-360px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_10{ | ||
+ | left:-400px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_11{ | ||
+ | left:-440px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_12{ | ||
+ | left:-480px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_13{ | ||
+ | left:-520px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_14{ | ||
+ | left:-560px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_15{ | ||
+ | left:-600px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_16{ | ||
+ | left:-640px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_17{ | ||
+ | left:-680px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_18{ | ||
+ | left:-720px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_19{ | ||
+ | left:-760px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_20{ | ||
+ | left:-800px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_21{ | ||
+ | left:-840px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_22{ | ||
+ | left:-880px | ||
+ | } | ||
+ | |||
+ | .container_24 .pull_23{ | ||
+ | left:-920px | ||
+ | } | ||
+ | |||
+ | .clear{ | ||
+ | clear:both; | ||
+ | display:block; | ||
+ | overflow:hidden; | ||
+ | visibility:hidden; | ||
+ | width:0; | ||
+ | height:0 | ||
+ | } | ||
+ | |||
+ | .clearfix:before,.clearfix:after,.container_24:before,.container_24:after{ | ||
+ | content:'.'; | ||
+ | display:block; | ||
+ | overflow:hidden; | ||
+ | visibility:hidden; | ||
+ | font-size:0; | ||
+ | line-height:0; | ||
+ | width:0; | ||
+ | height:0 | ||
+ | } | ||
+ | |||
+ | .clearfix:after,.container_24:after{ | ||
+ | clear:both | ||
+ | } | ||
+ | |||
+ | .clearfix,.container_24{ | ||
+ | zoom:1 | ||
+ | } | ||
+ | |||
+ | |||
+ | #mmswf543e99c71a2aa { | ||
+ | margin-left: 10%; | ||
+ | margin-right: 10%; | ||
+ | |||
+ | } | ||
+ | |||
+ | body { | ||
+ | font-family: Arial,sans-serif; | ||
+ | } | ||
+ | |||
+ | |||
+ | .small, .contentcenter { | ||
+ | |||
+ | text-align: justify; | ||
+ | width: 650px; | ||
+ | margin: 0 auto; | ||
+ | margin-left: 10%; | ||
+ | |||
+ | } | ||
+ | |||
+ | .small img, .contentcenter img { | ||
+ | display: inline; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .small p, .contentcenter p { | ||
+ | font-size: 14px; | ||
+ | color: grey; | ||
+ | text-align: right; | ||
+ | |||
+ | } | ||
+ | |||
+ | .small { | ||
+ | width: 400px; | ||
+ | } | ||
+ | |||
+ | .verysmall { | ||
+ | width: 200px; | ||
+ | margin: 0 auto; | ||
+ | margin-left: 15%; | ||
+ | } | ||
+ | |||
+ | .contentright { | ||
+ | |||
+ | float: right; | ||
+ | margin: 0 20px 0 40px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .team { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .team li { | ||
+ | |||
+ | padding-top: 25px; | ||
+ | padding-bottom: 25px; | ||
+ | border-top: 1px solid lightgrey; | ||
+ | list-style: none; | ||
+ | margin-bottom: 80px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .team li img { | ||
+ | |||
+ | float: right; | ||
+ | margin-top: 0px; | ||
+ | margin-left: 30px; | ||
+ | margin-right: -90px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .team li p, .team li b { | ||
+ | width: 650px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #gallery li { | ||
+ | list-style: none; | ||
+ | display: inline; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | #gallery li img { | ||
+ | width: 300px; | ||
+ | margin: 20px 20px 20px 20px; | ||
+ | -webkit-box-shadow: 0px 0px 4px 1px rgba(50, 50, 50, 0.72); | ||
+ | -moz-box-shadow: 0px 0px 4px 1px rgba(50, 50, 50, 0.72); | ||
+ | box-shadow: 0px 0px 4px 1px rgba(50, 50, 50, 0.72); | ||
+ | } | ||
+ | |||
+ | #gallery li img:hover { | ||
+ | opacity: 0.7; | ||
+ | } | ||
+ | |||
+ | /* Preload images */ | ||
+ | body:after { | ||
+ | content: url(https://static.igem.org/mediawiki/2014/6/65/TuDarmstadtLightboxClose.png) url(https://static.igem.org/mediawiki/2014/4/47/TuDarmstadtLightboxLoading.gif) url(https://static.igem.org/mediawiki/2014/8/8a/TuDarmstadtLightboxPrev.png) url(https://static.igem.org/mediawiki/2014/a/ad/TuDarmstadtLightboxNext.png); | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .lightboxOverlay { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: 9999; | ||
+ | background-color: black; | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); | ||
+ | opacity: 0.8; | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .lightbox { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | z-index: 10000; | ||
+ | text-align: center; | ||
+ | line-height: 0; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | .lightbox .lb-image { | ||
+ | display: block; | ||
+ | height: auto; | ||
+ | max-width: inherit; | ||
+ | -webkit-border-radius: 3px; | ||
+ | -moz-border-radius: 3px; | ||
+ | -ms-border-radius: 3px; | ||
+ | -o-border-radius: 3px; | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | |||
+ | .lightbox a img { | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | .lb-outerContainer { | ||
+ | position: relative; | ||
+ | background-color: white; | ||
+ | *zoom: 1; | ||
+ | width: 250px; | ||
+ | height: 250px; | ||
+ | margin: 0 auto; | ||
+ | -webkit-border-radius: 4px; | ||
+ | -moz-border-radius: 4px; | ||
+ | -ms-border-radius: 4px; | ||
+ | -o-border-radius: 4px; | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | |||
+ | .lb-outerContainer:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .lb-container { | ||
+ | padding: 4px; | ||
+ | } | ||
+ | |||
+ | .lb-loader { | ||
+ | position: absolute; | ||
+ | top: 43%; | ||
+ | left: 0; | ||
+ | height: 25%; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | line-height: 0; | ||
+ | } | ||
+ | |||
+ | .lb-cancel { | ||
+ | display: block; | ||
+ | width: 32px; | ||
+ | height: 32px; | ||
+ | margin: 0 auto; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/4/47/TuDarmstadtLightboxLoading.gif) no-repeat; | ||
+ | } | ||
+ | |||
+ | .lb-nav { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | .lb-container > .nav { | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | .lb-nav a { | ||
+ | outline: none; | ||
+ | background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); | ||
+ | } | ||
+ | |||
+ | .lb-prev, .lb-next { | ||
+ | height: 100%; | ||
+ | cursor: pointer; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .lb-nav a.lb-prev { | ||
+ | width: 34%; | ||
+ | left: 0; | ||
+ | float: left; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/8/8a/TuDarmstadtLightboxPrev.png) left 48% no-repeat; | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.6s; | ||
+ | -moz-transition: opacity 0.6s; | ||
+ | -o-transition: opacity 0.6s; | ||
+ | transition: opacity 0.6s; | ||
+ | } | ||
+ | |||
+ | .lb-nav a.lb-prev:hover { | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .lb-nav a.lb-next { | ||
+ | width: 64%; | ||
+ | right: 0; | ||
+ | float: right; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/a/ad/TuDarmstadtLightboxNext.png) right 48% no-repeat; | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity 0.6s; | ||
+ | -moz-transition: opacity 0.6s; | ||
+ | -o-transition: opacity 0.6s; | ||
+ | transition: opacity 0.6s; | ||
+ | } | ||
+ | |||
+ | .lb-nav a.lb-next:hover { | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .lb-dataContainer { | ||
+ | margin: 0 auto; | ||
+ | padding-top: 5px; | ||
+ | *zoom: 1; | ||
+ | width: 100%; | ||
+ | -moz-border-radius-bottomleft: 4px; | ||
+ | -webkit-border-bottom-left-radius: 4px; | ||
+ | border-bottom-left-radius: 4px; | ||
+ | -moz-border-radius-bottomright: 4px; | ||
+ | -webkit-border-bottom-right-radius: 4px; | ||
+ | border-bottom-right-radius: 4px; | ||
+ | } | ||
+ | |||
+ | .lb-dataContainer:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .lb-data { | ||
+ | padding: 0 4px; | ||
+ | color: #ccc; | ||
+ | } | ||
+ | |||
+ | .lb-data .lb-details { | ||
+ | width: 85%; | ||
+ | float: left; | ||
+ | text-align: left; | ||
+ | line-height: 1.1em; | ||
+ | } | ||
+ | |||
+ | .lb-data .lb-caption { | ||
+ | font-size: 13px; | ||
+ | font-weight: bold; | ||
+ | line-height: 1em; | ||
+ | } | ||
+ | |||
+ | .lb-data .lb-number { | ||
+ | display: block; | ||
+ | clear: left; | ||
+ | padding-bottom: 1em; | ||
+ | font-size: 12px; | ||
+ | color: #999999; | ||
+ | } | ||
+ | |||
+ | .lb-data .lb-close { | ||
+ | display: block; | ||
+ | float: right; | ||
+ | width: 30px; | ||
+ | height: 30px; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/6/65/TuDarmstadtLightboxClose.png) top right no-repeat; | ||
+ | text-align: right; | ||
+ | outline: none; | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); | ||
+ | opacity: 0.7; | ||
+ | -webkit-transition: opacity 0.2s; | ||
+ | -moz-transition: opacity 0.2s; | ||
+ | -o-transition: opacity 0.2s; | ||
+ | transition: opacity 0.2s; | ||
+ | } | ||
+ | |||
+ | .lb-data .lb-close:hover { | ||
+ | cursor: pointer; | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | |||
+ | @import url(http://fonts.googleapis.com/css?family=Varela+Round); | ||
+ | |||
+ | .slides { | ||
+ | padding: 0; | ||
+ | width: 609px; | ||
+ | height: 420px; | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .slides * { | ||
+ | user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | -webkit-user-select: none; | ||
+ | -webkit-touch-callout: none; | ||
+ | } | ||
+ | |||
+ | .slides input { display: none; } | ||
+ | |||
+ | .slide-container { display: block; } | ||
+ | |||
+ | .slide { | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | opacity: 0; | ||
+ | |||
+ | display: block; | ||
+ | position: absolute; | ||
+ | |||
+ | transform: scale(0); | ||
+ | |||
+ | transition: all .7s ease-in-out; | ||
+ | } | ||
+ | |||
+ | |||
+ | .nav label { | ||
+ | |||
+ | height: 100%; | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | |||
+ | opacity: 0; | ||
+ | z-index: 9; | ||
+ | cursor: pointer; | ||
+ | |||
+ | transition: opacity .2s; | ||
+ | |||
+ | color: #FFF; | ||
+ | font-size: 156pt; | ||
+ | text-align: center; | ||
+ | line-height: 380px; | ||
+ | font-family: "Varela Round", sans-serif; | ||
+ | background-color: rgba(255, 255, 255, .3); | ||
+ | text-shadow: 0px 0px 15px rgb(119, 119, 119); | ||
+ | } | ||
+ | |||
+ | .slide:hover + .nav label { opacity: 0.5; } | ||
+ | |||
+ | .nav label:hover { opacity: 1; } | ||
+ | |||
+ | .nav .next { right: 0; } | ||
+ | .nav .prev { left: 0; } | ||
+ | |||
+ | input:checked + .slide-container .slide { | ||
+ | opacity: 1; | ||
+ | |||
+ | transform: scale(1); | ||
+ | |||
+ | transition: opacity 1s ease-in-out; | ||
+ | } | ||
+ | |||
+ | input:checked + .slide-container .nav label { display: block; } | ||
+ | |||
+ | .nav-dots { | ||
+ | width: 100%; | ||
+ | bottom: 9px; | ||
+ | height: 11px; | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .nav-dots .nav-dot { | ||
+ | top: -5px; | ||
+ | width: 11px; | ||
+ | height: 11px; | ||
+ | margin: 0 4px; | ||
+ | position: relative; | ||
+ | border-radius: 100%; | ||
+ | display: inline-block; | ||
+ | background-color: rgba(0, 0, 0, 0.6); | ||
+ | } | ||
+ | |||
+ | .nav-dots .nav-dot:hover { | ||
+ | cursor: pointer; | ||
+ | background-color: rgba(0, 0, 0, 0.8); | ||
+ | } | ||
+ | |||
+ | input#img-1:checked ~ .nav-dots label#img-dot-1, | ||
+ | input#img-2:checked ~ .nav-dots label#img-dot-2, | ||
+ | input#img-3:checked ~ .nav-dots label#img-dot-3, | ||
+ | input#img-4:checked ~ .nav-dots label#img-dot-4, | ||
+ | input#img-5:checked ~ .nav-dots label#img-dot-5, | ||
+ | input#img-6:checked ~ .nav-dots label#img-dot-6 { | ||
+ | background: rgba(0, 0, 0, 0.8); | ||
+ | } | ||
+ | |||
+ | .slides{ | ||
+ | width: 100%; | ||
+ | height:300px;background-color:#333;overflow: hidden;position: relative;margin-left: 5px;border:none;border-radius: 0; | ||
+ | box-shadow: 0px 0px 6px 1px rgba(119, 119, 119, 0.6); | ||
+ | -moz-box-shadow: 0px 0px 6px 1px rgba(119, 119, 119, 0.6); | ||
+ | -webkit-box-shadow: 0px 0px 6px 1px rgba(119, 119, 119, 0.6); | ||
+ | -moz-border-radius: 15px; | ||
+ | border-radius: 15px; | ||
+ | margin-top: 3px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .specialsmall { | ||
+ | margin-left: 35%; | ||
+ | margin-right: 35%; | ||
+ | } | ||
+ | |||
+ | div.code { | ||
+ | border-top: 1px solid #22272c; | ||
+ | border-left: 1px solid #22272c; | ||
+ | width: 100%; | ||
+ | background: rgba(20,23,26,0.6); | ||
+ | |||
+ | -webkit-box-shadow: 10px 10px 13px 1px rgba(0,0,0,0.75); | ||
+ | -moz-box-shadow: 10px 10px 13px 1px rgba(0,0,0,0.75); | ||
+ | box-shadow: 10px 10px 13px 1px rgba(0,0,0,0.75); | ||
+ | |||
+ | margin: 0 auto; | ||
+ | margin-top: 30px; | ||
+ | margin-bottom: 30px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .code blockquote { | ||
+ | |||
+ | font-family: "Lucida Console,Monaco,monospace"; | ||
+ | |||
+ | width: 100%; | ||
+ | color: #a9bacb; | ||
+ | |||
+ | margin: 0 70px 0 70px; | ||
+ | opacity: 1; | ||
+ | padding: 20px 0 20px 0 ; | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .code blockquote p { | ||
+ | width: 100%; | ||
+ | font-size: 18px; | ||
+ | margin-left: -40px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
</html> | </html> |
Latest revision as of 02:50, 18 October 2014