Template:CSS/style2
From 2014.igem.org
(Difference between revisions)
(394 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: | + | 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 52: | Line 300: | ||
width:286px; | width:286px; | ||
height:227px; | height:227px; | ||
+ | position:absolute; | ||
+ | top:2px; | ||
+ | left:5px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .mascottoplayer{ | ||
+ | width:293px; | ||
+ | height:384px; | ||
position:fixed; | position:fixed; | ||
+ | top:96px; | ||
+ | left:0px; | ||
+ | } | ||
+ | |||
+ | .iitd{ | ||
+ | width:293px; | ||
+ | height:192px; | ||
+ | position:fixed; | ||
+ | top:480px; | ||
+ | left:0px; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2014/e/ed/Iitd2.png"); | ||
+ | background-color:#373737; | ||
+ | z-index:10; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #container2 { | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | width: 1049px; | ||
+ | height:170px; | ||
+ | position:absolute; | ||
+ | top:477px; | ||
+ | left:300px; | ||
+ | } | ||
+ | |||
+ | .wrapper { | ||
+ | display: inline-block; | ||
+ | width:240px; | ||
+ | height: 81px; | ||
+ | |||
+ | vertical-align: top; | ||
+ | margin-top:5px; | ||
+ | margin-bottom:5px; | ||
+ | padding:0px; | ||
+ | cursor: pointer; | ||
+ | position: relative; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | font-family: Tahoma, Arial; | ||
+ | -webkit-perspective: 4000px; | ||
+ | -moz-perspective: 4000px; | ||
+ | -ms-perspective: 4000px; | ||
+ | -o-perspective: 4000px; | ||
+ | perspective: 4000px; | ||
+ | } | ||
+ | |||
+ | .item { | ||
+ | height: 81px; | ||
+ | -webkit-transform-style: preserve-3d; | ||
+ | -moz-transform-style: preserve-3d; | ||
+ | -ms-transform-style: preserve-3d; | ||
+ | -o-transform-style: preserve-3d; | ||
+ | transform-style: preserve-3d; | ||
+ | -webkit-transition: -webkit-transform .6s; | ||
+ | -moz-transition: -moz-transform .6s; | ||
+ | -ms-transition: -ms-transform .6s; | ||
+ | -o-transition: -o-transform .6s; | ||
+ | transition: transform .6s; | ||
+ | } | ||
+ | |||
+ | .item:hover { | ||
+ | -webkit-transform: translateZ(-50px) rotateX(95deg); | ||
+ | -moz-transform: translateZ(-50px) rotateX(95deg); | ||
+ | -ms-transform: translateZ(-50px) rotateX(95deg); | ||
+ | -o-transform: translateZ(-50px) rotateX(95deg); | ||
+ | transform: translateZ(-50px) rotateX(95deg); | ||
+ | } | ||
+ | |||
+ | .item:hover .information { | ||
+ | |||
+ | border-radius: 3px; | ||
+ | } | ||
+ | |||
+ | .item img { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | border-radius: 3px; | ||
+ | |||
+ | |||
+ | -webkit-transform: translateZ(40px); | ||
+ | -moz-transform: translateZ(40px); | ||
+ | -ms-transform: translateZ(40px); | ||
+ | -o-transform: translateZ(40px); | ||
+ | transform: translateZ(40px); | ||
+ | -webkit-transition: all .6s; | ||
+ | -moz-transition: all .6s; | ||
+ | -ms-transition: all .6s; | ||
+ | -o-transition: all .6s; | ||
+ | transition: all .6s; | ||
+ | |||
+ | } | ||
+ | |||
+ | .item .information { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | color: #000000; | ||
+ | float: left; | ||
+ | height: 81px; | ||
+ | width: 240px; | ||
+ | text-align: left; | ||
+ | border-radius: 15px; | ||
+ | padding: 10px; | ||
+ | font-size: 12px; | ||
+ | text-shadow: 1px 1px 1px rgba(255,255,255,0.5); | ||
+ | box-shadow: none; | ||
+ | background: rgb(236,241,244); | ||
+ | background: -moz-linear-gradient(top, rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%); | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1))); | ||
+ | background: -webkit-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); | ||
+ | background: -o-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); | ||
+ | background: -ms-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); | ||
+ | background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 ); | ||
+ | -webkit-transform: rotateX(-90deg) translateZ(40px); | ||
+ | -moz-transform: rotateX(-90deg) translateZ(40px); | ||
+ | -ms-transform: rotateX(-90deg) translateZ(40px); | ||
+ | -o-transform: rotateX(-90deg) translateZ(40px); | ||
+ | transform: rotateX(-90deg) translateZ(40px); | ||
+ | -webkit-transition: all .6s; | ||
+ | -moz-transition: all .6s; | ||
+ | -ms-transition: all .6s; | ||
+ | -o-transition: all .6s; | ||
+ | transition: all .6s; | ||
+ | |||
+ | } | ||
+ | |||
+ | .information strong { | ||
+ | display: block; | ||
+ | |||
+ | font-size: 17px; | ||
+ | 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; | top:10px; | ||
- | left: | + | 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