Difference between revisions of "Template:Oxford"

Revision as of 16:11, 10 July 2017

<script>

   // allow button on the black menu bar to show/hide the side menu
   function hide_show_menu() {
 
     // in case you preview mode is selected, the menu is hidden for better visibility 
     if (window.location.href.indexOf("submit") >= 0) {
       $(".igem_2017_menu_wrapper").hide();
     }

     // if the black menu bar has been loaded
       if (document.getElementById('bars_item')) {

       // when the "bars_item" has been clicked
       $("#bars_item").click(function() {
         $("#sideMenu").hide();

         // show/hide the menu wrapper
         $(".igem_2017_menu_wrapper").fadeToggle("100");
       });   
       } 

     // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
     else {
           setTimeout(hide_show_menu, 15);
     }
   }

</script>

<style>

/* Add a dark background color with a little bit see-through */ .navbar {

   padding-top: 15px;
   padding-bottom: 15px;
   background-color: #002147;
   border-color: transparent;
   right: 0;
   left: 0;
   top: 45 
   margin-bottom: 0;
   border: 0;
   font-size: 12px !important;
   letter-spacing: 4px;
   opacity:0.9;

}

/* Add a gray color to all navbar links */ .navbar li a, .navbar .navbar-brand {

   color: #fff !important;

}

/* the color of the single Link ('safety') on hover */ .navbar-nav li a:hover {

   color: #1abc9c !important;

}

/* The active link this seems to be useless at the moment*/ .navbar-nav li.active a {

   color: #fff !important;
   background-color:#29292c !important;

}

/* Remove border color from the collapsible button */ .navbar-default .navbar-toggle {

   border-color: transparent;

}

.navbar-default {

   border-color:transparent;

}

/* the color of the Dropdown on click */ .open .dropdown-toggle {

   color: #000 ;
   background-color: #fff !important;

}

/* the color of the Dropdown links */ .dropdown-menu li a {

   color: #000 !important;

}

/* the color of the dropdown links on hover */ .dropdown-menu li a:hover {

   background-color: #fff !important;

}

/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/

 body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
       body, html {
       height: 100%;
       line-height: 1.8;
       }
       Clear the default wiki settings 
 
 #home_logo, #sideMenu { display:none; }
 #sideMenu, #top_title, .patrollink  {display:none;}
 #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 body {background-color:white; }
 #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
 
 

/**************************************************************** MENU ***************************************************************/

 /* Wrapper for the menu */
 .igem_2017_menu_wrapper { 
   width: 15%; 
   height:100vh; 
   position:fixed;
   right:0%;
   padding:0px;
   float:right; 
   border-left: 1px solid #d3d3d3; 
   background-color:#dddddd; 
   text-align:left;
   font-family:Tahoma, Geneva, sans-serif; 
   overflow-y: auto;
   overflow-x: hidden;
 }

 /* this hides the scrollbar to keep view consistency */
 .igem_2017_menu_wrappe::-webkit-scrollbar { 
   display: none; 
 }
 
   
 /* styling for links in the menu, removes the line under text */
 .igem_2017_menu_wrapper a {  
   text-decoration: none; 
 }

 /* styling for the images in the menu */
 .igem_2017_menu_wrapper img { 
   width: 100%;
 }

 /* styling for the menu buttons */
 .igem_2017_menu_wrapper .menu_button { 
   width: 100%; 
   padding: 10px 0px 10px 15px; 
   float:left; 
   border-bottom: 1px solid #d3d3d3; 
   font-size: 12px; 
   font-weight: bold; 
   color: #5e5f5f; 
   cursor: pointer;
 }

 .igem_2017_menu_wrapper .menu_bottom_padding { 
   width: 100%; 
   height: 30px;
   float:left;
 }

 .menu_button.direct_to_page { 
   padding-left: 36px;
 }

 .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
   width:10%;
   float:left;
 }

 .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
   content: "+";  
 }

 
 
 
 /* styling for the menu buttons on hover */
 .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover { 
   background-color: #3399ff;   
   text-decoration: none;
   color:#ffffff; 
 }

 /* styling for the menu button when it is the current page */
  .current_page { 
   background-color:#7fc1f7  !important;
   color:#5e5f5f !important;
 }

 /* styling for the submenu buttons */
 .igem_2017_menu_wrapper .submenu_button { 
   width: 100%; 
   padding: 10px 0px 10px 34px; 
   float:left;
   background-color:#f2f2f2; 
   border-bottom: 1px solid #d3d3d3; 
   font-size: 12px; 
   color: #5e5f5f; 
   cursor: pointer;
 }

 /* wrapper for the submenu items, they are hidden by default*/
 .igem_2017_menu_wrapper .submenu_wrapper { 
   display:none;
 }

 /* when the page size is bigger than 800px, this show/hide control is hidden by default */
 .igem_2017_menu_wrapper #display_menu_control {
   display:none;
   text-align:center;
 }
 

/***************************************************** CONTENT OF THE PAGE ****************************************************/

 /* Wrapper for the content */
 .igem_2017_content_wrapper {
   margin: 2%;
   display:block;
   float:left; 
   background-color:white; 
   font-family:Tahoma, Geneva, sans-serif; 
 }

/********************************* HTML STYLING *********************************/

 /* styling for the titles h1 h2 */
 .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
   padding:5px 15px; 
   border-bottom: 0px; 
   color: #3399ff;
 }

 /* styling for the titles  h3 h4 h5 h6*/
 .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 { 
   padding:5px 15px; 
   border-bottom:0px; 
   color: #000000;  
 }

 /* font and text */
 .igem_2017_content_wrapper p { 
   padding: 0px 15px; 
   font-size: 13px;
 }

 /* Links */
 .igem_2017_content_wrapper a { 
   font-weight: bold; 
   text-decoration: underline;
   text-decoration-color: #3399ff;
   color:  #3399ff;
   -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease; 
   -ms-transition: all 0.4s ease; 
   -o-transition: all 0.4s ease; 
   transition: all 0.4s ease;
 }

 /* hover for the links */
 .igem_2017_content_wrapper a:hover { 
   text-decoration:none;
   color:#000000;
 }

 /* non numbered lists */
 .igem_2017_content_wrapper ul {
   padding:0px 20px;
   font-size: 13px;
   font-family:Tahoma, Geneva, sans-serif; 
 }

 /* numbered lists */
 .igem_2017_content_wrapper ol {
   padding:0px; 
   font-size: 13px;
   font-family:Tahoma, Geneva, sans-serif; 
 }

 /* Table */
 .igem_2017_content_wrapper table { 
   width: 97%; 
   margin:15px 10px; 
   border: 1px solid #d3d3d3; 
   border-collapse: collapse; 
 }

 /* table cells */
 .igem_2017_content_wrapper  td { 
   padding: 10px;
   vertical-align: text-top; 
   border: 1px solid #d3d3d3; 
   border-collapse: collapse; 
 }

 /* table headers */
 .igem_2017_content_wrapper th { 
   padding: 10px; 
   vertical-align: text-top; 
   border: 1px solid #d3d3d3; 
   border-collapse: collapse; 
   background-color:#f2f2f2; 
 }

/**********************************LAYOUT CLASSES **********************************/

 /* general class for column divs */
 .igem_2017_content_wrapper .column  { 
   padding: 10px 0px;
   float:left; 
 }

 /* class for a full width column */
 .column .full_size {
   width:100%; 
 }

 /* styling for images in a full width column*/
 .column.full_size img { 
   width:97%; 
   padding: 10px 15px;
 }

 /* class for a half width column */
 .column.half_size {
   width: 50%; 
 }
 /* styling for images in a half width column*/
 .column.half_size img { 
   width: 94.5%;
   padding: 10px 15px;
 }

/********************************* SUPPORT CLASSES ********************************/

 /* class that clears content below*/
 .igem_2017_content_wrapper .clear {
   clear:both;
 }
 
 
 /* adds extra spacing when clearing content */
 .igem_2017_content_wrapper  .clear.extra_space {
   height: 30px;
 }

 /* highlight class, makes content slightly smaller */
 .igem_2017_content_wrapper .highlight { 
   margin: 0px 15px;
   padding: 15px 0px;
 }

 /* highlight class, adds a gray background */
 .igem_2017_content_wrapper .highlight.gray {
   background-color: #f2f2f2; 
 }

 /* highlight with decoration blue line on top */
 .igem_2017_content_wrapper .highlight.blue_top {
     border-top: 4px solid #3399ff;
 }

 /* highlight with a full blue border decoration */
 .igem_2017_content_wrapper .highlight.blue_border {
     border: 4px solid  #3399ff;
 }

 /* button class */
 .igem_2017_content_wrapper .button{
   max-width: 35%;
   margin: 30px auto;
   padding: 12px 10px;
     background-color: #3399ff;  
     text-align: center;
     color: #ffffff;
   -webkit-transition: all 0.4s ease; 
   -moz-transition: all 0.4s ease; 
   -ms-transition: all 0.4s ease; 
   -o-transition: all 0.4s ease; transition: all 0.4s ease;  
 }

 /* styling for button on hover */
 .igem_2017_content_wrapper .button:hover{
   background-color: #3399ff;  
     color: #000000;
 }

/***************************************************** RESPONSIVE STYLING ****************************************************/

 /* IF THE SCREEN IS LESS THAN 1200PX */
 @media only screen and (max-width: 1200px) {

   #content {width:100%; }
   .igem_2017_menu_wrapper {width:15%; right:0;}
   .highlight {padding:10px 0px;}
   .igem_2017_menu_wrapper #display_menu_control { display:none; }
   #menu_content { display:block;}
   .menu_button.direct_to_page {padding-left: 17px;}
   
 }

 /* IF THE SCREEN IS LESS THAN 800PX */
 @media only screen and (max-width: 800px) {

   .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
   .igem_2017_content_wrapper {width:100%; margin-left:0px;}
   .column.half_size  {width:100%; }
   .column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;} 
   .highlight {padding:15px 5px;}
   .igem_2017_menu_wrapper #display_menu_control { display:block; }
   #menu_content { display:none;}
   .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
   .menu_bottom_padding {display:none;}
   .menu_button.direct_to_page { padding-left: 36px; }
 }

 /* special class that the system uses to make sure the team wants a page to be evaluated */
 .judges-will-not-evaluate {
     width: 96.6%;
     margin: 5px 15px;
     display: block;
   border: 4px solid #3399ff;
     font-weight: bold;
 }
 

</style>

<head>

 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class= "navbar-fixed-top navbar" style="margin-top:17px;">

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       
       
        
     </button>

    <a href="#" class="navbar-left"><img src="" width="60" height="60"></a>

</nav>