Template:CSS/style2
From 2014.igem.org
(Difference between revisions)
(343 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<style rel='stylesheet' type='text/css'> | <style rel='stylesheet' type='text/css'> | ||
- | . | + | .container3636{ |
- | width: | + | width:100%; |
- | height: | + | height:2620px; |
- | + | position:relative; | |
- | position: | + | |
top:-10px; | top:-10px; | ||
left:0px; | left:0px; | ||
padding:0px; | padding:0px; | ||
margin:0px; | margin:0px; | ||
+ | } | ||
+ | |||
+ | .namastegif{ | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | margin:auto auto; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2014/e/ee/Namaste.gif"); | ||
+ | z-index:100; | ||
} | } | ||
.topblack{ | .topblack{ | ||
- | width: | + | width:100%; |
height:28px; | height:28px; | ||
position:fixed; | position:fixed; | ||
Line 20: | Line 27: | ||
left:0px; | left:0px; | ||
background-color:#373737; | background-color:#373737; | ||
+ | z-index:99; | ||
} | } | ||
.topwhite{ | .topwhite{ | ||
- | width: | + | width:100%; |
height:68px; | height:68px; | ||
position:fixed; | position:fixed; | ||
Line 29: | Line 37: | ||
left:0px; | left:0px; | ||
background-color:white; | background-color:white; | ||
+ | z-index:100; | ||
+ | } | ||
+ | |||
+ | |||
+ | .logo{ | ||
+ | width:65px; | ||
+ | height:61px; | ||
+ | position:absolute; | ||
+ | top:3px; | ||
+ | left:10px; | ||
+ | -webkit-transition: all .2s ease; | ||
+ | -moz-transition: all .2s ease; | ||
+ | -o-transition: all .2s ease; | ||
+ | -ms-transition: all .2s ease; | ||
+ | transition: all .2s ease; | ||
+ | z-index:10; | ||
+ | } | ||
+ | |||
+ | .logo:hover{ | ||
+ | width:128px; | ||
+ | } | ||
+ | |||
+ | .logotext{ | ||
+ | width:50px | ||
+ | height:61px; | ||
+ | position:absolute; | ||
+ | top:20px; | ||
+ | left:85px; | ||
+ | } | ||
+ | |||
+ | .logotext img{ | ||
+ | width:80px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .links{ | ||
+ | width:123px; | ||
+ | height:69px; | ||
+ | position:absolute; | ||
+ | top:-5px; | ||
+ | left:168px; | ||
+ | } | ||
+ | |||
+ | .followus{ | ||
+ | font-family:Arial,Helvetica,Sans serif; | ||
+ | size:10px; | ||
+ | color:#0158aa; | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | right:0px; | ||
+ | } | ||
+ | |||
+ | .link_bg{ | ||
+ | width:123px; | ||
+ | height:61px; | ||
+ | position:absolute; | ||
+ | top:29px; | ||
+ | left:2px; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .menu{ | ||
+ | width:550px; | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:300px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #topmenu{ | ||
+ | color:#7b7a7a; | ||
+ | font-family:Arial, Helvetica, sans-serif; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | #topmenu:hover{ | ||
+ | color:#0066FF; | ||
+ | } | ||
+ | |||
+ | .menuelt{ | ||
+ | padding:20px 15px 16px 15px; | ||
+ | } | ||
+ | |||
+ | .menuelt:hover{ | ||
+ | background-color:#fcf7f5; | ||
+ | padding:20px 15px 16px 15px; | ||
+ | border-bottom:solid thick #f53e06; | ||
+ | } | ||
+ | |||
+ | |||
+ | #nav { | ||
+ | width:1000px; | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:320px; | ||
+ | } | ||
+ | #nav_wrapper{ | ||
+ | width:1000px; | ||
+ | margin:0, auto; | ||
+ | text-align:left; | ||
+ | } | ||
+ | #nav ul{ | ||
+ | list-style-type:none; | ||
+ | padding:0; | ||
+ | margin:1px; | ||
+ | position:relative; | ||
+ | } | ||
+ | #nav ul li{ | ||
+ | display:inline-block; | ||
+ | border:5px, solid, #4daf7a; | ||
+ | color:#46dd11; | ||
+ | text-decoration:none; | ||
+ | padding:6px 3px 0px 3px; | ||
+ | } | ||
+ | |||
+ | #nav ul li a,visited{ | ||
+ | color:#3b3a3a; | ||
+ | padding:15px; | ||
+ | display:block; | ||
+ | font-family: Open sans, Helvetica, Arial; | ||
+ | text-decoration:none; | ||
+ | font-weight:300; | ||
+ | } | ||
+ | |||
+ | #nav ul li:hover{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | /*border-bottom:solid thick #f02b05;*/ | ||
+ | } | ||
+ | #nav ul li a:hover{ | ||
+ | color:black; | ||
+ | font-weight:300; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .nav_item_achievements,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #000000; | ||
+ | } | ||
+ | .nav_item_home,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #00b1ff; | ||
+ | } | ||
+ | .nav_item_project,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #b80028; | ||
+ | } | ||
+ | .nav_item_modeling,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #757116; | ||
+ | } | ||
+ | .nav_item_team,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #f4a204; | ||
+ | } | ||
+ | .nav_item_parts,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #a95613; | ||
+ | } | ||
+ | .nav_item_attributions,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #b904f4; | ||
+ | } | ||
+ | .nav_item_safety,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #03b224; | ||
+ | } | ||
+ | .nav_item_notebook,visited{ | ||
+ | background-color:#fbf7f5; | ||
+ | padding:6px 2px 0px 2px; | ||
+ | border-bottom:solid thick #24e4fb; | ||
+ | } | ||
+ | .achievements a:hover{ | ||
+ | border-bottom:solid thick #000000; | ||
+ | } | ||
+ | .home a:hover{ | ||
+ | border-bottom:solid thick #00b1ff; | ||
+ | } | ||
+ | .project a:hover{ | ||
+ | border-bottom:solid thick #b80028; | ||
+ | } | ||
+ | .modeling a:hover{ | ||
+ | border-bottom:solid thick #757116; | ||
+ | } | ||
+ | .team a:hover{ | ||
+ | border-bottom:solid thick #f4a204; | ||
+ | } | ||
+ | .notebook a:hover{ | ||
+ | border-bottom:solid thick #24e4fb; | ||
+ | } | ||
+ | .attributions a:hover{ | ||
+ | border-bottom:solid thick #b904f4; | ||
+ | } | ||
+ | .safety a:hover{ | ||
+ | border-bottom:solid thick #03b224; | ||
+ | } | ||
+ | .parts a:hover{ | ||
+ | border-bottom:solid thick #a95613; | ||
+ | } | ||
+ | |||
+ | .igemlogo{ | ||
+ | width:75px; | ||
+ | height:62px; | ||
+ | position:absolute; | ||
+ | top:3px; | ||
+ | right:20px; | ||
+ | z-index:15; | ||
+ | } | ||
+ | |||
+ | .fb{ | ||
+ | width:39px; | ||
+ | height:39px; | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png"); | ||
} | } | ||
.footer{ | .footer{ | ||
width:1349px; | width:1349px; | ||
- | height: | + | height:192px; |
position:absolute; | position:absolute; | ||
bottom:0px; | bottom:0px; | ||
left:0px; | left:0px; | ||
background-color:#373737; | background-color:#373737; | ||
+ | } | ||
+ | |||
+ | .footermap { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | height: 190px; | ||
+ | width: 190px; | ||
+ | border: thin solid #666666; | ||
+ | position: absolute; | ||
+ | top: 1px; | ||
+ | left: 600px; | ||
+ | z-index: 40; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
} | } | ||
.mascotbottomlayer{ | .mascotbottomlayer{ | ||
width:293px; | width:293px; | ||
- | height: | + | height:372px; |
position:fixed; | position:fixed; | ||
top:96px; | top:96px; | ||
left:0px; | left:0px; | ||
- | background-image: url(https://static.igem.org/mediawiki/2014/ | + | background-image: url(https://static.igem.org/mediawiki/2014/2/2a/Industry3.png); |
} | } | ||
Line 66: | Line 314: | ||
} | } | ||
- | . | + | .iitd{ |
- | width: | + | width:293px; |
- | height: | + | height:192px; |
- | position: | + | position:fixed; |
- | + | top:480px; | |
- | + | left:0px; | |
- | background-image: url(https://static.igem.org/mediawiki/2014/ | + | background-image:url("https://static.igem.org/mediawiki/2014/e/ed/Iitd2.png"); |
+ | background-color:#373737; | ||
+ | z-index:10; | ||
+ | |||
} | } | ||
+ | |||
+ | |||
#container2 { | #container2 { | ||
display: block; | display: block; | ||
margin: 0 auto; | margin: 0 auto; | ||
- | width: | + | width: 1049px; |
height:170px; | height:170px; | ||
position:absolute; | position:absolute; | ||
- | top: | + | top:477px; |
- | left: | + | left:300px; |
- | + | ||
- | + | ||
} | } | ||
Line 94: | Line 345: | ||
vertical-align: top; | vertical-align: top; | ||
- | margin-top: | + | margin-top:5px; |
- | margin-bottom: | + | margin-bottom:5px; |
padding:0px; | padding:0px; | ||
cursor: pointer; | cursor: pointer; | ||
Line 132: | Line 383: | ||
.item:hover .information { | .item:hover .information { | ||
- | + | ||
border-radius: 3px; | border-radius: 3px; | ||
} | } | ||
Line 141: | Line 392: | ||
top: 0; | top: 0; | ||
border-radius: 3px; | border-radius: 3px; | ||
- | + | ||
+ | |||
-webkit-transform: translateZ(40px); | -webkit-transform: translateZ(40px); | ||
-moz-transform: translateZ(40px); | -moz-transform: translateZ(40px); | ||
Line 190: | Line 442: | ||
} | } | ||
- | + | .information strong { | |
display: block; | display: block; | ||
font-size: 17px; | font-size: 17px; | ||
font-family: "Open Sans"; | font-family: "Open Sans"; | ||
- | + | } | |
+ | .video1{ | ||
+ | position:absolute; | ||
+ | top:670px; | ||
+ | left:300px; | ||
+ | width:770px; | ||
+ | height:560px; | ||
+ | background-color:#ded4cd; | ||
+ | } | ||
+ | .sponsors{ | ||
+ | width:261px; | ||
+ | height:538px; | ||
+ | position:absolute; | ||
+ | top:675px; | ||
+ | left:1086px; | ||
+ | background-image:url(https://static.igem.org/mediawiki/2014/f/fd/Sponsors-iit.png); | ||
+ | } | ||
+ | |||
+ | .crowdfunding{ | ||
+ | width:770px; | ||
+ | height:560px; | ||
+ | position:absolute; | ||
+ | left:300px; | ||
+ | top:1250px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | .fbapi{ | ||
+ | width:251px; | ||
+ | height:560px; | ||
+ | position:absolute; | ||
+ | top:1250px; | ||
+ | left:1086px; | ||
+ | background-color:white; | ||
+ | } | ||
+ | |||
+ | .tweeterapi{ | ||
+ | width:251px; | ||
+ | height:600px; | ||
+ | position:absolute; | ||
+ | top:1830px; | ||
+ | left:1086px; | ||
+ | background-color:white; | ||
+ | } | ||
+ | |||
+ | .flagview{ | ||
+ | position:absolute; | ||
+ | top:1500px; | ||
+ | right:30px; | ||
+ | width:275px; | ||
+ | height:73px; | ||
+ | z-index:12; | ||
+ | } | ||
+ | |||
+ | .nav2{ | ||
+ | position:absolute; | ||
+ | top:10px; | ||
+ | left:400px; | ||
+ | |||
+ | } | ||
+ | .nav2table{ | ||
+ | background-color:#373737; | ||
+ | color:#807f7f; | ||
+ | } | ||
+ | .nav2 a,visited{ | ||
+ | color:#d6d5d5; | ||
+ | font-size:12px; | ||
+ | text-decoration:none; | ||
+ | padding:10px; | ||
+ | } | ||
+ | |||
+ | .nav2 a:hover{ | ||
+ | color:#ffffff; | ||
+ | font-size:12px; | ||
+ | font-weight:500; | ||
+ | text-decoration:none; | ||
+ | padding:10px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .maplink{ | ||
+ | position:absolute; | ||
+ | bottom:70px; | ||
+ | left:500px; | ||
+ | } | ||
+ | .maptable{ | ||
+ | background-color:#373737; | ||
+ | color:#d6d5d5; | ||
+ | } | ||
+ | .maplink a,visited{ | ||
+ | font-size:14px; | ||
+ | color:#d6d5d5; | ||
+ | font-family:Open sans, Helvetica, Arial; | ||
+ | font-weight:300; | ||
+ | padding:10px; | ||
+ | text-decoration:none; | ||
+ | background-color:#373737; | ||
+ | } | ||
+ | .maplink a:hover{ | ||
+ | font-size:14px; | ||
+ | color:white; | ||
+ | font-family:Open sans, Helvetica, Arial; | ||
+ | font-weight:300; | ||
+ | padding:10px; | ||
+ | background-color:#373737; | ||
+ | } | ||
+ | |||
+ | .copyright{ | ||
+ | position:absolute; | ||
+ | bottom:5px; | ||
+ | left:600px; | ||
+ | |||
+ | } | ||
+ | .copyright a,visited{ | ||
+ | color:#a2a1a1; | ||
+ | } | ||
+ | |||
+ | .copyright a:hover{ | ||
+ | color:#c7c6c6; | ||
+ | } | ||
+ | |||
+ | .copyright p{ | ||
+ | font-size:12px; | ||
+ | color:#807f7f; | ||
+ | font-family:Open sans, Helvetica, Arial; | ||
+ | font-weight:400; | ||
+ | } | ||
Latest revision as of 13:35, 24 May 2015