Difference between revisions of "Template:Team:Penn/CSS"

Line 1: Line 1:
 
<html>
 
<html>
<style type="text/css">
+
<head>
 +
<style>
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
  
@font-face {  
+
#content { /*-- changes default wiki settings --*/
  font-family: News Cycle;  
+
width: 100%;  
    src: url('../fonts/NewsCycle-Regular.eot');  
+
height: 100%;
    src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');  
+
border: none;
}  
+
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
  
html
+
#menubar {
{ height: 100%;}
+
    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;
 +
}
  
*
 
{ margin: 0;
 
  padding: 0;}
 
  
body
+
a:link {
{ font: normal 80% Arial, Helvetica, sans-serif;
+
color: #FFF;
  color: #FFF;
+
text-decoration: none;
  background: #323232 url(../images/pattern.png) repeat;
+
 
}
 
}
  
/* tell the browser to render HTML 5 elements as block */
+
a:visited {
article, aside, figure, footer, header, hgroup, nav, section {  
+
color: #FFF;
  display:block;
+
text-decoration: none;
 
}
 
}
  
p
+
p {
{ padding: 0 0 10px 0;
+
text-indent: 3em;
  line-height: 1.7em;
+
font-size:15px;
  font-size: 100% }
+
color:#000;
 +
}
 +
h3,ol, h3 a {
 +
    color:#000;
 +
}
  
img
 
{ border: 0;}
 
  
h1, h2, h3, h4, h5, h6
 
{ font: bold 175% 'News Cycle', Arial, sans-serif;
 
  color: #fff;
 
  text-shadow: 0px 1px 0px #000;
 
  margin: 0 0 10px 0;}
 
  
h2
 
{ font: bold 165% 'News Cycle', Arial, sans-serif;}
 
  
h3
+
body {
{ font: bold 130% 'News Cycle', Arial, sans-serif;
+
background-image: url("https://static.igem.org/mediawiki/2014/4/43/Penn_2014_wiki_background.jpg");
  color: #FFF;}
+
background-size: 100%;
 +
background-repeat: repeat;
 +
font-family: "Open Sans";
 +
color: white;
 +
margin-left: auto;
 +
margin-right: auto;
 +
min-width:1200px;
 +
}
  
h4, h5, h6
+
td {
{ margin: 0;
+
}
  padding: 0 0 0px 0;
+
  font: normal 150% 'News Cycle', Arial, sans-serif;
+
  color: #FFF;
+
  line-height: 1.5em;}
+
  
h5, h6
+
#figureBox {
{ font: normal 95% 'News Cycle', Arial, sans-serif;
+
background: #585d8a; /* Old browsers */
  color: #888;
+
background: -moz-linear-gradient(top, #585d8a 0%, #2e335f 100%); /* FF3.6+ */
  padding-bottom: 15px;}
+
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+ */
span
+
background: -o-linear-gradient(top, #585d8a 0%,#2e335f 100%); /* Opera 11.10+ */
{ color: #FFF;}
+
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;
  
a, a:hover
+
padding: 20px;
{ color: #FFF;
+
margin: 50px;
  background: transparent;
+
}
  outline: none;
+
  text-decoration: underline;}
+
  
a:hover
+
#redbox {
{ text-decoration: none;}
+
  
ul
+
font-family:"Open Sans";
{ margin: 2px 0 22px 30px;
+
  line-height: 1.7em;
+
  font-style: normal;
+
  font-size: 100%;}
+
  
ol
 
{ margin: 8px 0 22px 20px;}
 
  
ol li
+
background: #c15d62; /* Old browsers */
{ margin: 0 0 11px 0;}
+
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 */
  
#main, header, #banner, #menubar, #site_content, footer, #content_grey, nav
+
/*text-align:center;*/
{ margin-left: auto;
+
content-align:center;
  margin-right: auto;}
+
 
+
header
+
{ width: 940px;
+
  position: relative;
+
  background: transparent;}
+
+
nav
+
{ width: 940px;
+
  height: 50px;} 
+
 
+
#menubar
+
{ width: 940px;
+
  height: 50px;
+
  float: left;
+
  text-align: center;  
+
  background: #1D1D1D;
+
  background: -moz-linear-gradient(#676767, #000);
+
  background: -o-linear-gradient(#676767, #000);
+
  background: -webkit-linear-gradient(#676767, #000);
+
  border-radius: 7px 7px 0px 0px;
+
  -moz-border-radius: 7px 7px 0px 0px;
+
  -webkit-border: 7px 7px 0px 0px;}
+
 
+
#welcome
+
{ width: 920px;
+
  float: left;
+
  margin: 0 auto;
+
  text-align: center;
+
  padding: 0 0 10px 20px;
+
  background: transparent;}
+
 
+
#welcome h2
+
{ font: normal 400% 'News Cycle', Arial, sans-serif;
+
  text-shadow: 1px 1px #000;
+
  color: #FFF;}
+
 
+
ul#nav
+
{ margin:0;}
+
  
ul#nav li
+
width:80%;
{ padding: 0 0 0 0px;
+
margin-right: auto;
  list-style: none;
+
margin-left:auto;
  margin: 2px 0 0 0;
+
padding:35px;
  display: inline;
+
  background: transparent;}
+
  
ul#nav li a
+
box-shadow: 0px 0px 50px #000000;
{ float: left;
+
  font: bold 120% Arial, Helvetica, sans-serif;
+
  height: 24px;
+
  margin: 10px 0 0 20px;
+
  text-shadow: 1px 1px #000;
+
  padding: 6px 20px 0 20px;
+
  background: transparent;
+
  border-radius: 7px 7px 7px 7px;
+
  -moz-border-radius: 7px 7px 7px 7px;
+
  -webkit-border: 7px 7px 7px 7px;
+
  text-align: center;
+
  color: #FFF;
+
  text-decoration: none;}
+
 
+
ul#nav li.current a, ul#nav li:hover a
+
{ color: #000;
+
  text-shadow: 0px 1px 0px #535353;}
+
  
#site_content
+
}
{ width: 940px;
+
  overflow: hidden;
+
  margin-bottom: 30px;}  
+
  
.sidebar_container
+
#redbox #textbox {
{ float: right;
+
width: 800px;
  width: 240px;
+
margin: 0 auto;
  padding-left: 20px;
+
  background: transparent url(../images/transparent.png) repeat;}
+
}
  
.sidebar
+
#PhotoBox {
{ float: left;
+
  width: 240px;
+
background: #585d8a; /* Old browsers */
  margin-top: 20px;
+
background: -moz-linear-gradient(top, #585d8a 0%, #2e335f 100%); /* FF3.6+ */
  margin-bottom: 10px;}
+
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;
  
.sidebar_item
+
padding:25px;
{ width: 240px;}
+
width: 600px;
 +
text-align: center;
  
.sidebar h2
+
margin-left: auto;
{ padding: 5px 0 0 0;
+
margin-right:auto;
  font: bold 150% 'News Cycle', Arial, sans-serif;
+
}
  height: 30px;}
+
  
.sidebar h3
+
#MenuBox {
{ color: #FFF;
+
 +
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;
  
#content
+
text-align:center;  
{ width: 680px;
+
vertical-align:center;
  margin-bottom: 20px;
+
  float: left;}
+
  
.content_item
+
padding-top:10px;
{ width: 660px;
+
  margin-top: 5px;
+
  margin-bottom: 20px;}
+
+
.content_imagetext
+
{ width: 660px;
+
  padding: 5px;
+
  margin: 20px 0 0 0;
+
  float: left;}
+
+
.content_image
+
{ float: left;
+
  width: 150px;
+
  height: 150px;
+
  margin: 0 20px 10px 0;}
+
 
+
.content_container
+
{ width: 320px;
+
  margin: 20px 10px 0 0;
+
  float: left;} 
+
 
+
footer
+
{ height: 50px;
+
  padding-bottom: 30px;
+
  font-weight: bold;
+
  text-align: center;
+
  color: #fff;
+
  text-shadow: 0px 1px 0px #000;}
+
  
footer a
+
width: 200px;
{ color: #FFF;
+
height: 35px;
  text-decoration: none;
+
  padding-bottom: 20px;}
+
  
footer a:hover
+
}
{ text-decoration: underline;
+
  color: #FFF;}
+
+
.button_small
+
{ font: normal 110% Arial, Helvetica, sans-serif;
+
  height: 15px;
+
  width: 80px;
+
  padding: 5px 2px 7px 2px;
+
  border: 1px solid #FFF;
+
  background: #1D1D1D;
+
  background: -moz-linear-gradient(#676767, #000);
+
  background: -o-linear-gradient(#676767, #000);
+
  background: -webkit-linear-gradient(#676767, #000);
+
  border-radius: 7px 7px 7px 7px;
+
  -moz-border-radius: 7px 7px 7px 7px;
+
  -webkit-border: 7px 7px 7px 7px;
+
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
+
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
+
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}
+
 
+
.button_small a
+
{ color: #FFF;
+
  padding-left: 5px;
+
  text-shadow: 1px 1px #000;}
+
  
.form_settings
+
img {
{ margin: 15px 0 0 0;}
+
text-align:center;
 +
}
  
.form_settings p
+
iframe {
{ padding: 0 0 4px 0;}
+
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;
 +
}
  
.form_settings span
+
#menuicon {
{ float: left;
+
width: 250px;
  width: 280px;  
+
height: 250px;
  text-align: left;
+
margin-left: auto;
  text-shadow: none;}
+
margin-right: auto;
 
+
vertical-align: center;
.form_settings input, .form_settings textarea
+
margin: 25px;
{ padding: 2px;  
+
box-shadow: 0px 0px 10px #000000;
  width: 299px;  
+
}
  font: 100% arial;  
+
  border: 1px solid #E5E5DB;  
+
  background: #FFF;
+
  color: #47433F;}
+
 
+
.form_settings input[type="checkbox"]
+
{ padding: 2px 0;
+
  width: 15px;
+
  font: 100% arial;
+
  border: 0;
+
  background: #FFF;
+
  color: #47433F;
+
  margin: 28px 0;}
+
  
.form_settings .submit
+
#menuicon:hover {
{ font: 100% arial;
+
  border: 1px solid;
+
}
  width: 99px;
+
  margin: 0 0 0 206px;
+
  height: 26px;
+
  padding: 2px 0 3px 0;
+
  cursor: pointer;
+
  background: #1D1D1D;
+
  background: -moz-linear-gradient(#676767, #000);
+
  background: -o-linear-gradient(#676767, #000);
+
  background: -webkit-linear-gradient(#676767, #000);
+
  border-radius: 7px 7px 7px 7px;
+
  -moz-border-radius: 7px 7px 7px 7px;
+
  -webkit-border: 7px 7px 7px 7px;
+
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
+
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
+
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
+
  color: #FFF;}
+
  
.slideshow
+
#menuicon2 {
{ width: 680px;
+
width: 200px;
  height: 300px;
+
height: 200px;
  float: left;}
+
margin-left: auto;
 
+
margin-right: auto;
/* styling for the slideshow on the homepage */
+
vertical-align: center;
ul.slideshow {
+
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;
   width: 680px;
+
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
   height: 300px;
+
   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
   overflow: hidden;
+
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 +
}
 +
#nav li {
 +
  color:#FFF;
 +
  display: inline-block;
 
   position: relative;
 
   position: relative;
   margin: 0;}
+
   padding: 10px 20px;
 
    
 
    
ul.slideshow li {
+
  background: #585d8a; /* Old browsers */
   position: absolute;
+
background: -moz-linear-gradient(top, #585d8a 0%, #2e335f 100%); /* FF3.6+ */
   margin: 0;
+
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;
  left: 0;
 
  right: 0;}
 
 
ul.slideshow li.show {
 
  z-index: 500;}
 
 
ul img {
 
  border: none;}
 
 
#slideshow-caption {
 
  width: 680px;
 
  height: 38px;
 
 
   position: absolute;
 
   position: absolute;
   bottom: 0;
+
   top: 36px;
   left: 0;  
+
   left: -30px;
   z-index: 500;}
+
  width: 180px;
+
   -webkit-box-shadow: none;
#slideshow-caption .slideshow-caption-container {
+
  -moz-box-shadow: none;
   padding: 10px 25px 10px 25px;  
+
   box-shadow: none;
   background: transparent url(../images/transparent.png) repeat;
+
   display: none;
   z-index: 1000;}
+
  opacity: 0;
+
  visibility: hidden;
#slideshow-caption p {
+
  -webkit-transiton: opacity 0.2s;
   padding: 0;
+
  -moz-transition: opacity 0.2s;
   font: normal 130% arial, sans-serif;
+
  -ms-transition: opacity 0.2s;
   color: #FFF;
+
   -o-transition: opacity 0.2s;
  text-shadow: 1px 1px #000;}
+
  -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