Difference between revisions of "Template:Team:Penn/CSS"
Line 1: | Line 1: | ||
<html> | <html> | ||
− | <style | + | <head> |
+ | <style> | ||
+ | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/ | ||
− | + | #content { /*-- changes default wiki settings --*/ | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | border: none; | |
− | } | + | background-color: transparent; |
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
− | + | #menubar { | |
− | { height: | + | width: auto;} |
+ | |||
+ | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | ||
+ | display:none;} | ||
+ | #top-section { | ||
+ | border: none; | ||
+ | height: 0px;} | ||
+ | #top-section-bar { | ||
+ | border: none; | ||
+ | height: 0px; | ||
+ | } | ||
+ | /*Remove "teams" from the menubar*/ | ||
+ | #menubar > ul > li:last-child { | ||
+ | display: none;} | ||
+ | /*Transparent the log in/out button*/ | ||
+ | #menubar { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | #menubar li a { | ||
+ | color: transparent; | ||
+ | background-color: transparent;} | ||
+ | #menubar li{ | ||
+ | background-color: transparent;} | ||
+ | #menubar:hover li a { | ||
+ | color: #777;} | ||
+ | |||
+ | #redbox a { | ||
+ | text-decoration: none; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | + | a:link { | |
− | { | + | color: #FFF; |
− | + | text-decoration: none; | |
− | + | ||
} | } | ||
− | + | a:visited { | |
− | + | color: #FFF; | |
− | + | text-decoration: none; | |
} | } | ||
− | p | + | p { |
− | { | + | text-indent: 3em; |
− | + | font-size:15px; | |
− | + | color:#000; | |
+ | } | ||
+ | h3,ol, h3 a { | ||
+ | color:#000; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | body { | |
− | { | + | background-image: url("https://static.igem.org/mediawiki/2014/4/43/Penn_2014_wiki_background.jpg"); |
− | + | background-size: 100%; | |
+ | background-repeat: repeat; | ||
+ | font-family: "Open Sans"; | ||
+ | color: white; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | min-width:1200px; | ||
+ | } | ||
− | + | td { | |
− | { | + | } |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #figureBox { | |
− | + | background: #585d8a; /* Old browsers */ | |
− | + | background: -moz-linear-gradient(top, #585d8a 0%, #2e335f 100%); /* FF3.6+ */ | |
− | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#585d8a), color-stop(100%,#2e335f)); /* Chrome,Safari4+ */ | |
− | + | background: -webkit-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Chrome10+,Safari5.1+ */ | |
− | + | background: -o-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Opera 11.10+ */ | |
− | + | background: -ms-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* IE10+ */ | |
+ | background: linear-gradient(to bottom, #585d8a 0%,#2e335f 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#585d8a', endColorstr='#2e335f',GradientType=0 ); /* IE6-9 */ | ||
+ | box-shadow: 0px 0px 20px #222222; | ||
− | + | padding: 20px; | |
− | + | margin: 50px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | #redbox { | |
− | { | + | |
− | + | font-family:"Open Sans"; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | + | background: #c15d62; /* Old browsers */ | |
− | + | background: -moz-linear-gradient(top, #c15d62 2%, #963d42 100%); /* FF3.6+ */ | |
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#c15d62), color-stop(100%,#963d42)); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, #c15d62 2%,#963d42 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #c15d62 2%,#963d42 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #c15d62 2%,#963d42 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #c15d62 2%,#963d42 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c15d62', endColorstr='#963d42',GradientType=0 ); /* IE6-9 */ | ||
− | + | /*text-align:center;*/ | |
− | + | content-align:center; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | width:80%; | |
− | + | margin-right: auto; | |
− | + | margin-left:auto; | |
− | + | padding:35px; | |
− | + | ||
− | + | ||
− | + | box-shadow: 0px 0px 50px #000000; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | #redbox #textbox { | |
− | { | + | width: 800px; |
− | + | margin: 0 auto; | |
− | + | ||
− | + | } | |
− | . | + | #PhotoBox { |
− | + | ||
− | + | background: #585d8a; /* Old browsers */ | |
− | + | background: -moz-linear-gradient(top, #585d8a 0%, #2e335f 100%); /* FF3.6+ */ | |
− | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#585d8a), color-stop(100%,#2e335f)); /* Chrome,Safari4+ */ | |
+ | background: -webkit-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #585d8a 0%,#2e335f 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#585d8a', endColorstr='#2e335f',GradientType=0 ); /* IE6-9 */ | ||
+ | box-shadow: 0px 0px 20px #000000; | ||
− | + | padding:25px; | |
− | + | width: 600px; | |
+ | text-align: center; | ||
− | + | margin-left: auto; | |
− | + | margin-right:auto; | |
− | + | } | |
− | + | ||
− | . | + | #MenuBox { |
− | + | ||
+ | background: #585d8a; /* Old browsers */ | ||
+ | background: -moz-linear-gradient(top, #585d8a 0%, #2e335f 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#585d8a), color-stop(100%,#2e335f)); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #585d8a 0%,#2e335f 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#585d8a', endColorstr='#2e335f',GradientType=0 ); /* IE6-9 */ | ||
+ | box-shadow: 0px 0px 20px #000000; | ||
− | + | text-align:center; | |
− | + | vertical-align:center; | |
− | + | ||
− | + | ||
− | + | padding-top:10px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | width: 200px; | |
− | + | height: 35px; | |
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | img { | |
− | { | + | text-align:center; |
+ | } | ||
− | + | iframe { | |
− | { | + | display:block; |
+ | text-align:center; | ||
+ | width:600px;; | ||
+ | height:450px; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | } | ||
+ | #redbox table { | ||
+ | width:90%; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | background:inherit; | ||
+ | } | ||
− | + | #menuicon { | |
− | { | + | width: 250px; |
− | + | height: 250px; | |
− | + | margin-left: auto; | |
− | + | margin-right: auto; | |
− | + | vertical-align: center; | |
− | + | margin: 25px; | |
− | + | box-shadow: 0px 0px 10px #000000; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #menuicon:hover { | |
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #menuicon2 { | |
− | { width: | + | width: 200px; |
− | + | height: 200px; | |
− | + | margin-left: auto; | |
− | + | margin-right: auto; | |
− | /* | + | vertical-align: center; |
− | + | margin: 25px; | |
+ | box-shadow: 0px 0px 10px #000000; | ||
+ | } | ||
+ | |||
+ | /*Dropdown menu hack*/ | ||
+ | |||
+ | #nav { | ||
+ | text-align: left; | ||
+ | display: inline; | ||
+ | margin: 0; | ||
+ | padding: 15px 4px 17px 0; | ||
list-style: none; | list-style: none; | ||
− | + | -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); | |
− | + | -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); | |
− | + | box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); | |
+ | } | ||
+ | #nav li { | ||
+ | color:#FFF; | ||
+ | display: inline-block; | ||
position: relative; | position: relative; | ||
− | + | padding: 10px 20px; | |
− | + | background: #585d8a; /* Old browsers */ | |
− | + | background: -moz-linear-gradient(top, #585d8a 0%, #2e335f 100%); /* FF3.6+ */ | |
− | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#585d8a), color-stop(100%,#2e335f)); /* Chrome,Safari4+ */ | |
+ | background: -webkit-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to bottom, #585d8a 0%,#2e335f 100%); /* W3C */ | ||
+ | |||
+ | |||
+ | cursor: pointer; | ||
+ | -webkit-transition: all 0.2s; | ||
+ | -moz-transition: all 0.2s; | ||
+ | -ms-transition: all 0.2s; | ||
+ | -o-transition: all 0.2s; | ||
+ | transition: all 0.2s; | ||
+ | |||
+ | margin-left: 20px; | ||
+ | } | ||
+ | #nav li ul li:hover { | ||
+ | background: #fff; | ||
+ | color: #4e5680; | ||
+ | } | ||
+ | |||
+ | #nav li ul { | ||
padding: 0; | padding: 0; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
position: absolute; | position: absolute; | ||
− | + | top: 36px; | |
− | left: | + | left: -30px; |
− | + | width: 180px; | |
− | + | -webkit-box-shadow: none; | |
− | + | -moz-box-shadow: none; | |
− | + | box-shadow: none; | |
− | + | display: none; | |
− | + | opacity: 0; | |
− | + | visibility: hidden; | |
− | # | + | -webkit-transiton: opacity 0.2s; |
− | + | -moz-transition: opacity 0.2s; | |
− | + | -ms-transition: opacity 0.2s; | |
− | color: # | + | -o-transition: opacity 0.2s; |
− | + | -transition: opacity 0.2s; | |
+ | } | ||
+ | #nav li ul li { | ||
+ | background: #ffffff; | ||
+ | display: block; | ||
+ | color: #4e5680; | ||
+ | } | ||
+ | #nav li ul li:hover { background: #4e5680; color: #ffffff; } | ||
+ | #nav li:hover ul { | ||
+ | display: block; | ||
+ | opacity: 1; | ||
+ | visibility: visible; | ||
+ | } | ||
+ | |||
+ | .people_table{ | ||
+ | width: 900px; | ||
+ | background-color:inherit; | ||
+ | border-spacing: 0px 5px; | ||
+ | } | ||
+ | |||
+ | .people_table tr td{ | ||
+ | width: 220px; | ||
+ | min-width:220px; | ||
+ | background-color: #444; | ||
+ | vertical-align: top; | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | .people_table tr td p{ | ||
+ | padding-top: 10px; | ||
+ | text-align:center; | ||
+ | text-indent:0; | ||
+ | } | ||
+ | |||
+ | .name { | ||
+ | font-size: 16px; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | |||
+ | .major { | ||
+ | font-weight: 500; | ||
+ | font-style: normal; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .protrait { | ||
+ | width:100%; | ||
+ | height: 300px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #header_block{ | ||
+ | font-weight: 500; | ||
+ | font-style: normal; | ||
+ | font-size: 15px; | ||
+ | margin-top:10px; | ||
+ | } | ||
+ | |||
+ | .members { | ||
+ | font-weight:bold; | ||
+ | margin-top:40px; | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | .sponsor_table { | ||
+ | border-collapse: separate; | ||
+ | border-spacing:30px; | ||
+ | background-color:inherit; | ||
+ | } | ||
+ | |||
+ | .sponsor_table tr { | ||
+ | height:150px; | ||
+ | } | ||
+ | |||
+ | .sponsor_table tr td{ | ||
+ | width: 25%; | ||
+ | background-color: #fff; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | .sponsor_table tr td img{ | ||
+ | width: 100%; | ||
+ | display:block; | ||
+ | } | ||
</style> | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <ul id="nav"> | ||
+ | <a href="https://2014.igem.org/Team:Penn"><li>Home</li></a> | ||
+ | <li><a style="hover:"href="https://2014.igem.org/Team:Penn/Overview">Project</a> | ||
+ | <ul> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Overview"> <li>Overview</li> </a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Magnetism"> <li>Magnetism</li> </a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Microbio"> <li>Microbiology</li> </a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Synbio"> <li>SynBio in AMB-1</li> </a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/CdTolerance"> <li>Cadmium Tolerance</li> </a> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li><a href="https://2014.igem.org/Team:Penn/Specsheet">Human Practices</a> | ||
+ | <ul> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Specsheet"><li>Spec Sheet</li></a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Outreach"><li>Outreach</li></a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Biomeme"><li>Biomeme</li></a> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Penn/Notebook">Notebook</a> | ||
+ | <ul> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Notebook"><li>Timeline</li></a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Safety"><li>Safety</li></a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Protocol"><li>Protocols</li></a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Supplement"><li>Supplementary Materials</li></a> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2014.igem.org/Team:Penn/Team">About</a> | ||
+ | <ul> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Team"><li>Team</li></a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Achievements"><li>BioBricks</li></a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Sponsors"><li>Sponsors</li></a> | ||
+ | <a href="https://2014.igem.org/Team:Penn/Resources"><li>References</li></a> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <a href="https://2014.igem.org/Main_Page"> <img style="margin-left:30px" src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="40px"></a> | ||
+ | </ul> | ||
+ | |||
+ | |||
+ | <div style = "background: url('https://static.igem.org/mediawiki/2014/2/24/JaneText.png'); position: inherited; height:350px; background-size: 80%; background-repeat: no-repeat; background-position:center top;"> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </body> | ||
+ | |||
+ | |||
</html> | </html> |
Revision as of 00:29, 23 July 2015