Difference between revisions of "Template:NYU-AD"

(Prototype team template page)
 
Line 1: Line 1:
−
<html>
+
html,
−
 
+
body {
−
<style>
+
  height: 100%;
−
 
+
  width: 100%;
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
}
−
 
+
body {
−
#sideMenu, #top_title {display:none;}
+
  font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
}
−
body {background-color:white; }
+
hr {
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  border-color: #F05F40;
−
 
+
  border-width: 3px;
−
/********************************* MENU ********************************/
+
  max-width: 50px;
−
/* Wrapper for the menu */
+
}
−
.menu_wrapper {  
+
hr.light {
−
width:150px;  
+
  border-color: white;
−
height:100vh;  
+
}
−
position:fixed;  
+
a {
−
padding:0px;
+
  -webkit-transition: all 0.35s;
−
float:left;
+
  -moz-transition: all 0.35s;
−
background-color:#f2f2f2;  
+
  transition: all 0.35s;
−
text-align:left;
+
  color: #F05F40;
−
}
+
}
−
 
+
a:hover,
−
/* styling for the menu items */
+
a:focus {
−
.menu_item {
+
  color: #eb3812;
−
width:100%;
+
}
−
margin:-2px 0px 0px -20px;
+
h1,
−
padding: 10px 10px;
+
h2,
−
border-bottom: 1px solid #d3d3d3;  
+
h3,
−
font-weight:bold;
+
h4,
−
color:#000000;  
+
h5,
−
cursor: pointer;
+
h6 {
−
}
+
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
−
 
+
}
−
/* when hovering on a menu item */
+
p {
−
.menu_item:hover {
+
  font-size: 16px;
−
color:#000000;
+
  line-height: 1.5;
−
background-color: #72c9b6;
+
  margin-bottom: 20px;
−
}
+
}
−
 
+
.bg-primary {
−
/* decoration icon for the menu buttons*/
+
  background-color: #F05F40;
−
.icon {
+
}
−
float:right;
+
.bg-dark {
−
font-size:16px;  
+
  background-color: #222222;
−
font-weight:bold;  
+
  color: white;
−
}
+
}
−
+
.text-faded {
−
/* this is the icon for when the content is collapsed */
+
  color: rgba(255, 255, 255, 0.7);
−
.plus::before {
+
}
−
content: "+";  
+
section {
−
}
+
  padding: 100px 0;
−
/* this is the icon for when the content is expanded */
+
}
−
.less::before {
+
aside {
−
content: "–";  
+
  padding: 50px 0;
−
}
+
}
−
 
+
.no-padding {
−
/* styling for the ul that creates the buttons */
+
  padding: 0;
−
ul.menu_items {
+
}
−
width:100%;
+
.navbar-default {
−
margin-left:0px;  
+
  background-color: white;
−
padding:0px;
+
  border-color: rgba(34, 34, 34, 0.05);
−
list-style: none;  
+
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
−
}
+
  -webkit-transition: all 0.35s;
−
 
+
  -moz-transition: all 0.35s;
−
/* styling for the li that are the menu items */
+
  transition: all 0.35s;
−
.menu_items li {  
+
}
−
width:90%;  
+
.navbar-default .navbar-header .navbar-brand {
−
margin-top:-2px;
+
  color: #F05F40;
−
padding: 15px 0px 15px 15px ;  
+
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
−
display:block;
+
  font-weight: 700;
−
border-bottom: 1px solid #d3d3d3;
+
  text-transform: uppercase;
−
text-align:left;
+
}
−
font-weight:bold;
+
.navbar-default .navbar-header .navbar-brand:hover,
−
text-decoration:none;
+
.navbar-default .navbar-header .navbar-brand:focus {
−
color:#000000;  
+
  color: #eb3812;
−
list-style-type:none;  
+
}
−
cursor:pointer;
+
.navbar-default .navbar-header .navbar-toggle {
−
-webkit-transition: all 0.4s ease;  
+
  font-weight: 700;
−
-moz-transition: all 0.4s ease;  
+
  font-size: 12px;
−
-ms-transition: all 0.4s ease;  
+
  color: #222222;
−
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
+
  text-transform: uppercase;
−
}
+
}
−
 
+
.navbar-default .nav > li > a,
−
.menu_item a {
+
.navbar-default .nav > li > a:focus {
−
width: 100%;
+
  text-transform: uppercase;
−
margin-left: -20px;
+
  font-weight: 700;
−
padding: 11px 90px 12px 20px;
+
  font-size: 13px;
−
text-decoration: none;
+
  color: #222222;
−
color:black;
+
}
−
}
+
.navbar-default .nav > li > a:hover,
−
 
+
.navbar-default .nav > li > a:focus:hover {
−
/* When hovering on a menu item */
+
  color: #F05F40;
−
.menu_items li:hover {
+
}
−
background-color:#72c9b6;
+
.navbar-default .nav > li.active > a,
−
color: #000000;
+
.navbar-default .nav > li.active > a:focus {
−
}
+
  color: #F05F40 !important;
−
 
+
  background-color: transparent;
−
/* styling for the submenus */
+
}
−
.submenu {
+
.navbar-default .nav > li.active > a:hover,
−
width:100%;
+
.navbar-default .nav > li.active > a:focus:hover {
−
display: none; 
+
  background-color: transparent;
−
font-weight:bold;
+
}
−
cursor:pointer;  
+
@media (min-width: 768px) {
−
 
+
  .navbar-default {
−
}
+
    background-color: transparent;
−
 
+
    border-color: rgba(255, 255, 255, 0.3);
−
/* moving the margin for the submenu ul list */
+
  }
−
ul.submenu {
+
  .navbar-default .navbar-header .navbar-brand {
−
width: 100%;
+
    color: rgba(255, 255, 255, 0.7);
−
margin: 10px 0px -11px 0px;
+
  }
−
list-style: none;
+
  .navbar-default .navbar-header .navbar-brand:hover,
−
}
+
  .navbar-default .navbar-header .navbar-brand:focus {
−
 
+
    color: white;
−
/*styling for the submenu buttons */
+
  }
−
.submenu li {
+
  .navbar-default .nav > li > a,
−
width: 100%;
+
  .navbar-default .nav > li > a:focus {
−
margin-left: 10px;
+
    color: rgba(255, 255, 255, 0.7);
−
margin-bottom: 0px;
+
  }
−
}
+
  .navbar-default .nav > li > a:hover,
−
 
+
  .navbar-default .nav > li > a:focus:hover {
−
 
+
    color: white;
−
/* hover state for the submenu buttons */
+
  }
−
.submenu li a {
+
  .navbar-default.affix {
−
width: 100%;  
+
    background-color: white;
−
padding: 5px 10px;  
+
    border-color: rgba(34, 34, 34, 0.05);
−
display: inline-block;
+
  }
−
border-bottom: 1px solid #d3d3d3;
+
  .navbar-default.affix .navbar-header .navbar-brand {
−
background-color:white;
+
    color: #F05F40;
−
text-decoration:none;
+
    font-size: 14px;
−
color:#000000;  
+
  }
−
}
+
  .navbar-default.affix .navbar-header .navbar-brand:hover,
−
 
+
  .navbar-default.affix .navbar-header .navbar-brand:focus {
−
 
+
    color: #eb3812;
−
 
+
  }
−
.submenu li a:hover  {
+
  .navbar-default.affix .nav > li > a,
−
background-color:#000000;  
+
  .navbar-default.affix .nav > li > a:focus {
−
color: #72c9b6;
+
    color: #222222;
−
}
+
  }
−
 
+
  .navbar-default.affix .nav > li > a:hover,
−
 
+
  .navbar-default.affix .nav > li > a:focus:hover {
−
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
+
    color: #F05F40;
−
.collapsable_menu_control {
+
  }
−
width:100%;
+
}
−
padding: 15px 0px;
+
header {
−
display:none;
+
  position: relative;
−
background-color:#000000;  
+
  width: 100%;
−
text-align:center; 
+
  min-height: auto;
−
font-weight:bold;
+
  -webkit-background-size: cover;
−
color:#72c9b6;
+
  -moz-background-size: cover;
−
cursor:pointer;
+
  background-size: cover;
−
-webkit-transition: all 0.4s ease;  
+
  -o-background-size: cover;
−
-moz-transition: all 0.4s ease;
+
  background-position: center;
−
-ms-transition: all 0.4s ease;
+
  background-image: url('../img/header.jpg');
−
-o-transition: all 0.4s ease;
+
  text-align: center;
−
transition: all 0.4s ease;  
+
  color: white;
−
}
+
}
−
 
+
header .header-content {
−
/* when hovering on that button */
+
  position: relative;
−
.collapsable_menu_control:hover {
+
  text-align: center;
−
background-color: #72c9b6;
+
  padding: 100px 15px 100px;
−
color:#000000;
+
  width: 100%;
−
}
+
}
−
 
+
header .header-content .header-content-inner h1 {
−
/********************************* CONTENT OF THE PAGE ********************************/
+
  font-weight: 700;
−
 
+
  text-transform: uppercase;
−
/* Wrapper for the content */
+
  margin-top: 0;
−
.content_wrapper {
+
  margin-bottom: 0;
−
width: 85%;
+
  font-size: 30px;
−
margin-left:150px;
+
}
−
padding:10px 0px;
+
header .header-content .header-content-inner hr {
−
float:left;
+
  margin: 30px auto;
−
background-color:white;  
+
}
−
}
+
header .header-content .header-content-inner p {
−
 
+
  font-weight: 300;
−
/*LAYOUT */
+
  color: rgba(255, 255, 255, 0.7);
−
.column  {  
+
  font-size: 16px;
−
padding: 10px 0px;
+
  margin-bottom: 50px;
−
float:left;
+
}
−
background-color:white;  
+
@media (min-width: 768px) {
−
}
+
  header {
−
 
+
    min-height: 100%;
−
.full_size {
+
  }
−
width:100%;  
+
  header .header-content {
−
}
+
    position: absolute;
−
 
+
    top: 50%;
−
.full_size img {  
+
    -webkit-transform: translateY(-50%);
−
padding: 10px 15px;
+
    -ms-transform: translateY(-50%);
−
width:96.5%;  
+
    transform: translateY(-50%);
−
}
+
    padding: 0 50px;
−
 
+
  }
−
.half_size {
+
  header .header-content .header-content-inner {
−
width: 50%;  
+
    max-width: 1000px;
−
}
+
    margin-left: auto;
−
.half_size img {
+
    margin-right: auto;
−
padding: 10px 15px;
+
  }
−
width: 93%;  
+
  header .header-content .header-content-inner h1 {
−
}
+
    font-size: 50px;
−
 
+
  }
−
 
+
  header .header-content .header-content-inner p {
−
.clear {
+
    font-size: 18px;
−
clear:both;
+
    max-width: 80%;
−
}
+
    margin-left: auto;
−
 
+
    margin-right: auto;
−
.highlight {  
+
  }
−
width: 90%;  
+
}
−
margin: auto;  
+
.section-heading {
−
padding: 15px 5px;
+
  margin-top: 0;
−
background-color: #f2f2f2;  
+
}
−
}
+
.service-box {
−
 
+
  max-width: 400px;
−
.judges-will-not-evaluate {
+
  margin: 50px auto 0;
−
border: 4px solid #72c9b6;
+
}
−
display: block;
+
@media (min-width: 992px) {
−
margin: 5px 15px;
+
  .service-box {
−
width: 95%;
+
    margin: 20px auto 0;
−
font-weight:bold;
+
  }
−
}
+
}
−
 
+
.service-box p {
−
 
+
  margin-bottom: 0;
−
/*STYLING */
+
}
−
 
+
.portfolio-box {
−
/* styling for the titles */
+
  position: relative;
−
.content_wrapper h1, .content_wrapper h2 {
+
  display: block;
−
padding:5px 15px;  
+
  max-width: 650px;
−
border-bottom:0px;  
+
  margin: 0 auto;
−
color:#72c9b6;
+
}
−
 
+
.portfolio-box .portfolio-box-caption {
−
}
+
  color: white;
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
+
  opacity: 0;
−
padding:5px 15px;  
+
  display: block;
−
border-bottom:0px;  
+
  background: rgba(240, 95, 64, 0.9);
−
color: #000000;
+
  position: absolute;
−
}
+
  bottom: 0;
−
 
+
  text-align: center;
−
 
+
  width: 100%;
−
/* font and text */
+
  height: 100%;
−
.content_wrapper p {  
+
  -webkit-transition: all 0.35s;
−
padding:0px 15px;  
+
  -moz-transition: all 0.35s;
−
font-size: 13px;
+
  transition: all 0.35s;
−
font-family:Tahoma, Geneva, sans-serif;  
+
}
−
}
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
−
 
+
  width: 100%;
−
/* Links */
+
  text-align: center;
−
.content_wrapper a {  
+
  position: absolute;
−
font-weight: bold;  
+
  top: 50%;
−
text-decoration: underline;
+
  transform: translateY(-50%);
−
text-decoration-color:#72c9b6;
+
}
−
color: #72c9b6;
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
−
-webkit-transition: all 0.4s ease;
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
−
-moz-transition: all 0.4s ease;  
+
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
−
-ms-transition: all 0.4s ease;  
+
  padding: 0 15px;
−
-o-transition: all 0.4s ease;  
+
}
−
transition: all 0.4s ease;
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
−
}
+
  text-transform: uppercase;
−
 
+
  font-weight: 600;
−
/* hover for the links */
+
  font-size: 14px;
−
.content_wrapper a:hover {  
+
}
−
text-decoration:none;
+
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
−
color:#000000;
+
  font-size: 18px;
−
}
+
}
−
 
+
.portfolio-box:hover .portfolio-box-caption {
−
/* non numbered lists */
+
  opacity: 1;
−
.content_wrapper ul {
+
}
−
padding:0px 20px;
+
.portfolio-box:focus {
−
font-size: 13px;
+
  outline: none;
−
font-family:Tahoma, Geneva, sans-serif;
+
}
−
}
+
@media (min-width: 768px) {
−
 
+
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
−
/* numbered lists */
+
    font-size: 16px;
−
.content_wrapper ol {
+
  }
−
padding:0px;  
+
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
−
font-size: 13px;
+
    font-size: 22px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
  }
−
}
+
}
−
 
+
.call-to-action h2 {
−
/* Table */
+
  margin: 0 auto 20px;
−
.content_wrapper table {  
+
}
−
width: 97%;  
+
.text-primary {
−
margin:15px 10px;  
+
  color: #F05F40;
−
border: 1px solid #d3d3d3;
+
}
−
border-collapse: collapse;  
+
.no-gutter > [class*='col-'] {
−
}
+
  padding-right: 0;
−
 
+
  padding-left: 0;
−
/* table cells */
+
}
−
.content_wrapper  td {  
+
.btn-default {
−
padding: 10px;
+
  color: #222222;
−
vertical-align: text-top;  
+
  background-color: white;
−
border: 1px solid #d3d3d3;  
+
  border-color: white;
−
border-collapse: collapse;  
+
  -webkit-transition: all 0.35s;
−
}
+
  -moz-transition: all 0.35s;
−
 
+
  transition: all 0.35s;
−
/* table headers */
+
}
−
.content_wrapper th {  
+
.btn-default:hover,
−
padding: 10px;  
+
.btn-default:focus,
−
vertical-align: text-top;  
+
.btn-default.focus,
−
border: 1px solid #d3d3d3;  
+
.btn-default:active,
−
border-collapse: collapse;
+
.btn-default.active,
−
background-color:#f2f2f2;  
+
.open > .dropdown-toggle.btn-default {
−
}
+
  color: #222222;
−
 
+
  background-color: #f2f2f2;
−
/* Button class */
+
  border-color: #ededed;
−
.button_click {
+
}
−
margin: 10px auto;
+
.btn-default:active,
−
padding: 15px; width:12%; 
+
.btn-default.active,
−
text-align:center;  
+
.open > .dropdown-toggle.btn-default {
−
font-weight:bold;  
+
  background-image: none;
−
background-color: #72c9b6;
+
}
−
cursor:pointer;
+
.btn-default.disabled,
−
-webkit-transition: all 0.4s ease;
+
.btn-default[disabled],
−
-moz-transition: all 0.4s ease;  
+
fieldset[disabled] .btn-default,
−
-ms-transition: all 0.4s ease;  
+
.btn-default.disabled:hover,
−
-o-transition: all 0.4s ease;  
+
.btn-default[disabled]:hover,
−
transition: all 0.4s ease;  
+
fieldset[disabled] .btn-default:hover,
−
}
+
.btn-default.disabled:focus,
−
 
+
.btn-default[disabled]:focus,
−
/* button class on hover */
+
fieldset[disabled] .btn-default:focus,
−
.button_click:hover { 
+
.btn-default.disabled.focus,
−
background-color:#000000;  
+
.btn-default[disabled].focus,
−
color:#72c9b6;
+
fieldset[disabled] .btn-default.focus,
−
}
+
.btn-default.disabled:active,
−
 
+
.btn-default[disabled]:active,
−
/********************************* RESPONSIVE STYLING ********************************/
+
fieldset[disabled] .btn-default:active,
−
 
+
.btn-default.disabled.active,
−
/* IF THE SCREEN IS LESS THAN 1000PX */
+
.btn-default[disabled].active,
−
 
+
fieldset[disabled] .btn-default.active {
−
@media only screen and (max-width: 1000px) {
+
  background-color: white;
−
 
+
  border-color: white;
−
#content {width:100%; }
+
}
−
.menu_wrapper {width:15%;}
+
.btn-default .badge {
−
.content_wrapper {margin-left: 15%;}
+
  color: white;
−
.menu_item {display:block;}
+
  background-color: #222222;
−
.icon {display:none;}
+
}
−
.highlight {padding:10px 0px;}
+
.btn-primary {
−
}
+
  color: white;
−
 
+
  background-color: #F05F40;
−
 
+
  border-color: #F05F40;
−
/* IF THE SCREEN IS LESS THAN 680PX */
+
  -webkit-transition: all 0.35s;
−
 
+
  -moz-transition: all 0.35s;
−
@media only screen and (max-width: 680px) {
+
  transition: all 0.35s;
−
.collapsable_menu_control { display:block;}
+
}
−
.menu_item {display:none;}
+
.btn-primary:hover,
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
+
.btn-primary:focus,
−
.content_wrapper {width:100%; margin-left:0px;}
+
.btn-primary.focus,
−
.column.half_size {width:100%; }
+
.btn-primary:active,
−
.column img { width: 100%; padding: 5px 0px;}
+
.btn-primary.active,
−
.icon {display:block;}
+
.open > .dropdown-toggle.btn-primary {
−
.highlight {padding:15px 5px;}
+
  color: white;
−
}
+
  background-color: #ee4b28;
−
 
+
  border-color: #ed431f;
−
</style>
+
}
−
 
+
.btn-primary:active,
−
 
+
.btn-primary.active,
−
 
+
.open > .dropdown-toggle.btn-primary {
−
 
+
  background-image: none;
−
<!--- THIS IS WHERE THE HTML BEGINS --->
+
}
−
 
+
.btn-primary.disabled,
−
 
+
.btn-primary[disabled],
−
<!-- This tells the browser that your page is responsive -->
+
fieldset[disabled] .btn-primary,
−
 
+
.btn-primary.disabled:hover,
−
<head>
+
.btn-primary[disabled]:hover,
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
fieldset[disabled] .btn-primary:hover,
−
</head>
+
.btn-primary.disabled:focus,
−
 
+
.btn-primary[disabled]:focus,
−
 
+
fieldset[disabled] .btn-primary:focus,
−
 
+
.btn-primary.disabled.focus,
−
 
+
.btn-primary[disabled].focus,
−
<div class="menu_wrapper" >
+
fieldset[disabled] .btn-primary.focus,
−
 
+
.btn-primary.disabled:active,
−
 
+
.btn-primary[disabled]:active,
−
 
+
fieldset[disabled] .btn-primary:active,
−
 
+
.btn-primary.disabled.active,
−
<div class="collapsable_menu_control"> MENU ▤ </div>
+
.btn-primary[disabled].active,
−
 
+
fieldset[disabled] .btn-primary.active {
−
<ul id="accordion" class="accordion">
+
  background-color: #F05F40;
−
 
+
  border-color: #F05F40;
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:NYU-AD">HOME </a> </li>
+
}
−
 
+
.btn-primary .badge {
−
 
+
  color: #F05F40;
−
<li class="menu_item"> <div class="icon plus"></div> TEAM
+
  background-color: white;
−
<ul class="submenu">
+
}
−
<li> <a href=" https://2016.igem.org/Team:NYU-AD/Team"> Team  </a> </li>
+
.btn {
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Collaborations">★  Collaborations </a> </li>
+
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
−
                    </ul>
+
  border: none;
−
                </li>
+
  border-radius: 300px;
−
 
+
  font-weight: 700;
−
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
+
  text-transform: uppercase;
−
<ul class="submenu">
+
}
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Description"> ★  Description </a></li>
+
.btn-xl {
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Design"> ★ Design </a></li>
+
  padding: 15px 30px;
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Experiments"> Experiments </a></li>
+
}
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Proof"> ★ Proof of Concept </a></li>
+
::-moz-selection {
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Demonstrate"> ★ Demonstrate </a></li>
+
  color: white;
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Results"> Results </a></li>
+
  text-shadow: none;
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Notebook"> Notebook </a></li>
+
  background: #222222;
−
                    </ul>
+
}
−
                </li>
+
::selection {
−
 
+
  color: white;
−
<li class="menu_item"> <div class="icon plus"></div> PARTS 
+
  text-shadow: none;
−
<ul class="submenu">
+
  background: #222222;
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Parts">Parts </a></li>
+
}
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Basic_Part"> ★ Basic Parts </a></li>
+
img::selection {
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Composite_Part"> ★ Composite Parts </a></li>
+
  color: white;
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Part_Collection"> ★ Part Collection </a></li>
+
  background: transparent;
−
                    </ul>
+
}
−
                </li>
+
img::-moz-selection {
−
 
+
  color: white;
−
 
+
  background: transparent;
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:NYU-AD/Safety"> SAFETY </a> </li>
+
}
−
 
+
body {
−
 
+
  webkit-tap-highlight-color: #222222;
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:NYU-AD/Attributions">★  ATTRIBUTIONS </a></li>
+
}
−
 
+
−
 
+
−
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
+
−
<ul class="submenu">
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Human_Practices"> Human Practices </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/HP/Silver">★ Silver </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/HP/Gold">★ Gold </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Integrated_Practices"> ★ Integrated Practices </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Engagement">★ Engagement </a></li>
+
−
                    </ul>
+
−
                </li>
+
−
 
+
−
 
+
−
<li class="menu_item"> <div class="icon plus"></div> AWARDS
+
−
<ul class="submenu">
+
−
<li><a href="https://2016.igem.org/Team:NYU-AD/Entrepreneurship"> ★ Entrepreneurship </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Hardware"> ★ Hardware </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Software">★ Software </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Measurement">★  Measurement </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:NYU-AD/Model">★ Model </a></li>
+
−
 
+
−
                    </ul>
+
−
                </li>
+
−
</ul>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="content_wrapper">
+
−
 
+
−
 
+
−
 
+
−
<h1 id="team_name">  </h1>
+
−
<h4 id="page_name">  </h4>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<script>
+
−
 
+
−
// This is the jquery part of your template. Try not modify any of this code since it makes your menu work.
+
−
 
+
−
$(document).ready(function() {
+
−
 
+
−
$("#HQ_page").attr('id','');
+
−
+
−
 
+
−
if ( wgPageName.substring( 0, 8) == "Template")  {  // if the page is a template it displays the full name in a single line
+
−
$("#team_name").html( wgPageName );
+
−
}
+
−
 
+
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
+
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
+
−
}
+
−
 
+
−
else {
+
−
// this adds the team's name as an h1
+
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
+
−
 
+
−
// this adds the page's title as an h4
+
−
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
$('#accordion').find('.menu_item').click(function(){
+
−
 
+
−
//Expand or collapse this panel
+
−
submenu = $(this).find('.submenu');
+
−
submenu.toggle();
+
−
 
+
−
icon = $(this).find('.icon');
+
−
 
+
−
if ( !$( submenu ).is(':visible') ) {
+
−
icon.removeClass("less").addClass("plus");
+
−
}
+
−
else {
+
−
icon.removeClass("plus").addClass("less");
+
−
}
+
−
 
+
−
//Hide the other panels
+
−
$(".submenu").not(submenu).hide();
+
−
$(".icon").not(icon).removeClass("less").addClass("plus");
+
−
});
+
−
 
+
−
 
+
−
$(".collapsable_menu_control").click(function() {
+
−
$(".menu_item").toggle();
+
−
});
+
−
 
+
−
$( window ).resize(function() {
+
−
$(".menu_item").show();
+
−
});
+
−
 
+
−
 
+
−
});
+
−
 
+
−
 
+
−
 
+
−
 
+
−
</script>
+
−
 
+
−
 
+
−
</html>
+

Revision as of 17:57, 9 July 2016

html, body { 

 height: 100%;
 width: 100%;

} body { 

 font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;

} hr { 

 border-color: #F05F40;
 border-width: 3px;
 max-width: 50px;

} hr.light { 

 border-color: white;

} a { 

 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;
 color: #F05F40;

} a:hover, a:focus { 

 color: #eb3812;

} h1, h2, h3, h4, h5, h6 { 

 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

} p { 

 font-size: 16px;
 line-height: 1.5;
 margin-bottom: 20px;

} .bg-primary { 

 background-color: #F05F40;

} .bg-dark { 

 background-color: #222222;
 color: white;

} .text-faded { 

 color: rgba(255, 255, 255, 0.7);

} section { 

 padding: 100px 0;

} aside { 

 padding: 50px 0;

} .no-padding { 

 padding: 0;

} .navbar-default { 

 background-color: white;
 border-color: rgba(34, 34, 34, 0.05);
 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

} .navbar-default .navbar-header .navbar-brand { 

 color: #F05F40;
 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 font-weight: 700;
 text-transform: uppercase;

} .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { 

 color: #eb3812;

} .navbar-default .navbar-header .navbar-toggle { 

 font-weight: 700;
 font-size: 12px;
 color: #222222;
 text-transform: uppercase;

} .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { 

 text-transform: uppercase;
 font-weight: 700;
 font-size: 13px;
 color: #222222;

} .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { 

 color: #F05F40;

} .navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus { 

 color: #F05F40 !important;
 background-color: transparent;

} .navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { 

 background-color: transparent;

} @media (min-width: 768px) { 

 .navbar-default {
   background-color: transparent;
   border-color: rgba(255, 255, 255, 0.3);
 }
 .navbar-default .navbar-header .navbar-brand {
   color: rgba(255, 255, 255, 0.7);
 }
 .navbar-default .navbar-header .navbar-brand:hover,
 .navbar-default .navbar-header .navbar-brand:focus {
   color: white;
 }
 .navbar-default .nav > li > a,
 .navbar-default .nav > li > a:focus {
   color: rgba(255, 255, 255, 0.7);
 }
 .navbar-default .nav > li > a:hover,
 .navbar-default .nav > li > a:focus:hover {
   color: white;
 }
 .navbar-default.affix {
   background-color: white;
   border-color: rgba(34, 34, 34, 0.05);
 }
 .navbar-default.affix .navbar-header .navbar-brand {
   color: #F05F40;
   font-size: 14px;
 }
 .navbar-default.affix .navbar-header .navbar-brand:hover,
 .navbar-default.affix .navbar-header .navbar-brand:focus {
   color: #eb3812;
 }
 .navbar-default.affix .nav > li > a,
 .navbar-default.affix .nav > li > a:focus {
   color: #222222;
 }
 .navbar-default.affix .nav > li > a:hover,
 .navbar-default.affix .nav > li > a:focus:hover {
   color: #F05F40;
 }

} header { 

 position: relative;
 width: 100%;
 min-height: auto;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
 background-position: center;
 background-image: url('../img/header.jpg');
 text-align: center;
 color: white;

} header .header-content { 

 position: relative;
 text-align: center;
 padding: 100px 15px 100px;
 width: 100%;

} header .header-content .header-content-inner h1 { 

 font-weight: 700;
 text-transform: uppercase;
 margin-top: 0;
 margin-bottom: 0;
 font-size: 30px;

} header .header-content .header-content-inner hr { 

 margin: 30px auto;

} header .header-content .header-content-inner p { 

 font-weight: 300;
 color: rgba(255, 255, 255, 0.7);
 font-size: 16px;
 margin-bottom: 50px;

} @media (min-width: 768px) { 

 header {
   min-height: 100%;
 }
 header .header-content {
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   padding: 0 50px;
 }
 header .header-content .header-content-inner {
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
 }
 header .header-content .header-content-inner h1 {
   font-size: 50px;
 }
 header .header-content .header-content-inner p {
   font-size: 18px;
   max-width: 80%;
   margin-left: auto;
   margin-right: auto;
 }

} .section-heading { 

 margin-top: 0;

} .service-box { 

 max-width: 400px;
 margin: 50px auto 0;

} @media (min-width: 992px) { 

 .service-box {
   margin: 20px auto 0;
 }

} .service-box p { 

 margin-bottom: 0;

} .portfolio-box { 

 position: relative;
 display: block;
 max-width: 650px;
 margin: 0 auto;

} .portfolio-box .portfolio-box-caption { 

 color: white;
 opacity: 0;
 display: block;
 background: rgba(240, 95, 64, 0.9);
 position: absolute;
 bottom: 0;
 text-align: center;
 width: 100%;
 height: 100%;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

} .portfolio-box .portfolio-box-caption .portfolio-box-caption-content { 

 width: 100%;
 text-align: center;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);

} .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { 

 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 padding: 0 15px;

} .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { 

 text-transform: uppercase;
 font-weight: 600;
 font-size: 14px;

} .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { 

 font-size: 18px;

} .portfolio-box:hover .portfolio-box-caption { 

 opacity: 1;

} .portfolio-box:focus { 

 outline: none;

} @media (min-width: 768px) { 

 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
   font-size: 16px;
 }
 .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
   font-size: 22px;
 }

} .call-to-action h2 { 

 margin: 0 auto 20px;

} .text-primary { 

 color: #F05F40;

} .no-gutter > [class*='col-'] { 

 padding-right: 0;
 padding-left: 0;

} .btn-default { 

 color: #222222;
 background-color: white;
 border-color: white;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

} .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { 

 color: #222222;
 background-color: #f2f2f2;
 border-color: #ededed;

} .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { 

 background-image: none;

} .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { 

 background-color: white;
 border-color: white;

} .btn-default .badge { 

 color: white;
 background-color: #222222;

} .btn-primary { 

 color: white;
 background-color: #F05F40;
 border-color: #F05F40;
 -webkit-transition: all 0.35s;
 -moz-transition: all 0.35s;
 transition: all 0.35s;

} .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 

 color: white;
 background-color: #ee4b28;
 border-color: #ed431f;

} .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 

 background-image: none;

} .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { 

 background-color: #F05F40;
 border-color: #F05F40;

} .btn-primary .badge { 

 color: #F05F40;
 background-color: white;

} .btn { 

 font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
 border: none;
 border-radius: 300px;
 font-weight: 700;
 text-transform: uppercase;

} .btn-xl { 

 padding: 15px 30px;

}

-moz-selection {
 color: white;
 text-shadow: none;
 background: #222222;

}

selection {
 color: white;
 text-shadow: none;
 background: #222222;

} img::selection { 

 color: white;
 background: transparent;

} img::-moz-selection { 

 color: white;
 background: transparent;

} body { 

 webkit-tap-highlight-color: #222222;

}