head, body {
margin: 0;
border: 0;
padding: 0;
max-height: 100vh;
font-family: 'Open Sans', sans-serif;
color: #101010;
background-color:white;
text-align:justify;
font-size: 14px;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
color: #101010;
text-align: center;
}
a { background: inherit; color: #2200CC; text-decoration: underline;}
a:focus {
color: #008000;
}
a:link { background: inherit; color: #2200CC; }
a:visited { background: inherit; color: #2200CC; }
a:hover, a:active {
/* background-color:#eeeeee; */
color: #18c247;
}
a.logo:link { background:inherit; }
a.logo:visited { background:inherit; }
a.logo:hover, a.logo:active {}
*{-webkit-box-sizing:border-box;box-sizing:border-box}body{padding:0;margin:0}#notfound{position:relative;height:100vh}#notfound .notfound{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.notfound{max-width:410px;width:100%;text-align:center}.notfound .notfound-404{height:280px;position:relative;z-index:-1}.notfound .notfound-404 h1{font-family:montserrat,sans-serif;font-size:250px;margin:0;font-weight:900;position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background:url(/resources/img/universe_bg.jpg) no-repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:cover;background-position:center}.notfound h2{font-family:montserrat,sans-serif;color:#F36267;font-size:24px;font-weight:700;text-transform:uppercase;margin-top:0}.notfound p{font-family:montserrat,sans-serif;color:#000;font-size:14px;font-weight:400;margin-bottom:20px;margin-top:0}.notfound a{font-family:montserrat,sans-serif;font-size:14px;text-decoration:none;text-transform:uppercase;background:#5fcf80;display:inline-block;padding:15px 30px;border-radius:40px;color:#fff;font-weight:700;-webkit-box-shadow:0 4px 15px -5px #0046d5;box-shadow:0 4px 15px -5px #0046d5}@media only screen and (max-width:767px){.notfound .notfound-404{height:142px}.notfound .notfound-404 h1{font-size:112px}}
/***********************************
Navigation bar and login
************************************/
.navbar-default .navbar-brand {
color: #5FCF80;
}
.navbar-default {
background-color: #ffffff;
/* border-color: #b8b5b5; */ border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
color: #0d0d0d;
font-size: 14px;
font-weight: 700;
}
.navbar-nav>li>a {
padding: 0px;
margin: 10px 5px;
padding: 10px 15px;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover
{
color: #5FCF80;
}
.navbar-nav .active a {
background: none !important;
color: #5FCF80 !important;
outline: none;
}
.navbar-default .navbar-brand {
font-family: 'Dosis', sans-serif !important;
font-weight: 700;
/* text-transform: uppercase; */
padding: 0px;
height: inherit;
font-size: 36px;
margin: 10px 0px;
}
.navbar-default .navbar-brand span {
font-weight: 100 !important;
color:#656565;
}
.navbar {
margin-bottom: 0px;
z-index: 9005;
}
.padding-zero {
padding: 0px;
}
.mart20 {
margin-top: 20px;
}
.modal-dialog {
width: 600px;
margin: 150px auto;
}
.mouse {
width: 25px;
height: 45px;
border: 2px solid #fff;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -12.5px;
border-radius: 12px;
}
.mouse::after {
content: "";
position: absolute;
height: 5px;
width: 5px;
background-color: #fff;
border-radius: 100%;
left: 50%;
top: 10px;
margin-left: -2.5px;
transition: all 0.3s ease-in;
-webkit-animation-name: rotateplane; Chrome , Safari, Opera
-webkit-animation-duration : 2s; Chrome , Safari, Opera animation-name
: rotateplane;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.modal-content h4 {
font-size: 1.5em;
font-weight: 700;
}
.login-box-body {
padding: 15px 30px;
}
.login-box-msg, .register-box-msg {
margin: 0px;
text-align: center;
padding: 0px 20px 20px;
}
.modal-sm {
width: 400px;
}
.padleft-right {
padding-left: 5px;
padding-right: 0px;
}
.big-text {
font-size: 35px;
}
.small-text {
font-size: 16px;
}
/* Styling for the logo */
.EzMol_logo {
float:left;
background: url("../EzMol_Data/images/EzMol_logo.png") no-repeat center;
margin-top:5px;
position:relative;
display: inline-block;
height: 45px;
width: 163px;
background-size: contain;
}
/* Styling for the help icon */
.helpIcon {
height: 24px;
width: 24px;
background: url("../EzMol_Data/images/Help1.png") no-repeat center;
padding: 3px;
border: 0px;
}
.helpIcon:hover {
background: url("../EzMol_Data/images/helpHover.png") no-repeat center;
}
/* Deprecated tab styling */
.tab-container {
position: relative;
top: 0px;
left: 10px;
width: auto;
background-color: white;
}
/* The main tabs for each step */
.main-tab {
border-width: 0 0 0 0 !important;
}
/* The tab content style */
.tab-content {
float:left;
margin-left:30px;
margin-right:30px;
}
/* Styling for the movement buttons */
.movement {
width:50px;
height:42px;
}
/* The number picker */
.numberPicker {
background: url("../EzMol_Data/images/check2.gif") repeat;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Layout for text in the footer */
.footerLayout{
display: inline-block;
vertical-align: top;
padding: 20px 25px 20px 25px;
}
/* The palette tables to hold the colour selection object and the eraser button */
table.paletteTable {
border: 0px;
border-collapse: collapse;
text-align: center;
}
table.paletteTable td {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
}
/* Used in the PDB info metadata to distinguish data for separate molecules with blue or orange backgrounds */
td.b1 { background: rgba(255,128,0,0.33); }
td.b2 { background: rgba(0,128,255,0.31); }
/* Controlling the borders around the normal and "hide" palettes */
.palettePick1 {
border: 5px solid red;
display: inline-block;
text-align: center;
}
.palettePick2 {
border: 0px;
display: inline-block;
text-align: center;
}
/* The cells in the residue selection tables */
.cc {
width: 30px;
border: 1px solid gray;
font-family: Arial, Calibri, Tahoma, Verdana, sans-serif;
border-collapse: collapse;
margin: -1px 0 0 -1px;
padding: 2px;
float: left;
text-align: center;
cursor: url(../EzMol_Data/images/paintbrush-icon-24.png), auto;
}
/* The one-letter codes and secondary structure types are in a bold font weight */
.res {
font-weight: bold;
}
.sec {
font-weight: bold;
}
/* This allows
to be used for a line break in the JQuery UI tooltips */
.ui-tooltip {
white-space: pre-line;
}
/* A class that prevents highlighting.*/
.noHighlight {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The dotmatrix listing paper style infobox DEPRECATED */
.listingPaperCentre {
margin: 0 0 0 27px;
padding: 14px 7px 14px 5px;
background: url("../EzMol_Data/images/dotmatrixpaperstock2.png") no-repeat;
background-position: right;
background-size: 100% 100%;
float:left;
border:0px;
}
.listingPaperLeft {
background: url("../EzMol_Data/images/dotmatrixpaperstock1.png") repeat-y;
float:left;
margin-right:24px;
border: 0;
}
.listingPaperRight {
background: url("../EzMol_Data/images/dotmatrixpaperstock3.png") repeat-y right top;
float:left;
border: 0;
}
.listingPaperTopLeft {
background-color:lime;
width: 100px;
height: 5px;
float:left;
}
.listingPaperTop{
background: url("../EzMol_Data/images/dotmatrixpaperstock_top2.png");
width: 20%;
height: 5px;
float:left;
display: inline-block;
}
.listingPaperBottom{
background: url("../EzMol_Data/images/dotmatrixpaperstock_bottom2.png");
width: 100%;
height: 5px;
float:left;
display: inline-block;
}
/* Polaroid styles for the imitation photograph */
.polaroid img {
min-height: 100px;
min-width: 100px;
max-height: 290px;
max-width: 290px;
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px #666;
-moz-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;
}
.polaroid p {
position: relative;
text-align: right;
width: 100%;
top: -3.2em;
right:30px;
color: #888;
}
/* The CopyLeft symbol */
.copy-left {
display: inline-block;
text-align: right;
margin: 0px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
/* Holygrail liquid column layout
This is the Ultimate 'Holy Grail' 3 column Liquid Layout by Matthew James Taylor. View more website layouts and web design articles.
Used for the dotmatrix listing paper style infobox */
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:90%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
background: url("../EzMol_Data/images/dotmatrixpaperstock3.png") repeat-y right top; /* Right column background colour */
}
.holygrail .colmid {
float:left;
width:200%;
margin-left:-24px; /* negative width of right column */
position:relative;
right:100%;
}
.holygrail .colleft {
float:left;
width:100%;
margin-left:-50%;
position:relative;
left:51px; /* Left column width + right column width */
background: url("../EzMol_Data/images/dotmatrixpaperstock1.png") repeat-y right top; /* Left column background colour */
}
.holygrail .col1wrap {
float:left;
width:50%;
position:relative;
right:27px; /* Width of left column */
padding-bottom:0px;
}
.holygrail .col1 {
margin:0 24px 0 27px; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:200%;
overflow:hidden;
background: url("../EzMol_Data/images/dotmatrixpaperstock2.png"); /* Centre column background colour */
background-size: 100% 285px;
}
.holygrail .col1content {
padding: 5px 10px 6px 10px; /* Centre column padding */
}
.holygrail .col2 {
float:left;
float:right; /* This overrides the float:left above */
width:27px; /* Width of left column content (left column width minus left and right padding) */
position:relative;
right:0px; /* Width of the left-hand side padding on the left column */
height:100%;
}
.holygrail .col3 {
float:left;
float:right; /* This overrides the float:left above */
width:24px; /* Width of right column content (right column width minus left and right padding) */
margin-right:0px; /* Width of right column right-hand padding + left column left and right padding */
position:relative;
left:50%;
}
/* Holygrail for Header */
.holygrailHeader {
background: url("../EzMol_Data/images/dotmatrixpaperstock_top3.png") no-repeat right top; /* Right column background colour */
height:5px;
}
.holygrailHeader .colmid {
float:left;
width:200%;
margin-left:-24px; /* negative width of right column */
position:relative;
right:100%;
background: url("../EzMol_Data/images/dotmatrixpaperstock_top2.png"); /* Centre column background colour */
background-size: 100% 100%;
height:5px;
}
.holygrailHeader .colleft {
float:left;
width:100%;
margin-left:-50%;
position:relative;
left:51px; /* Left column width + right column width */
background: url("../EzMol_Data/images/dotmatrixpaperstock_top1.png") no-repeat left top; /* Left column background colour */
height:5px;
}
/* Holygrail for Footer */
.holygrailFooter {
background: url("../EzMol_Data/images/dotmatrixpaperstock_bottom3.png") no-repeat right top; /* Right column background colour */
height:5px;
}
.holygrailFooter .colmid {
float:left;
width:200%;
margin-left:-24px; /* negative width of right column */
position:relative;
right:100%;
background: url("../EzMol_Data/images/dotmatrixpaperstock_bottom2.png"); /* Centre column background colour */
background-size: 100% 100%;
height:5px;
}
.holygrailFooter .colleft {
float:left;
width:100%;
margin-left:-50%;
position:relative;
left:51px; /* Left column width + right column width */
background: url("../EzMol_Data/images/dotmatrixpaperstock_bottom1.png") no-repeat left top; /* Left column background colour */
height:5px;
}
/* The button to show secondary structure on the sequence */
.show-secondary {
white-space: normal;
width: 198px;
float: right;
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 900px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 999;
bottom: 125%;
left: 50%;
margin-left: 0px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 12%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.bigAccordion{
font-size:1.5em !important;
}
/*
* ******************************************************************************
* jquery.mb.components
* file: mbExtruder.css
*
* Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);
* Open lab srl, Firenze - Italy
* email: matbicoc@gmail.com
* site: http://pupunzi.com
* blog: http://pupunzi.open-lab.com
* http://open-lab.com
*
* Licences: MIT, GPL
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* last modified: 07/01/14 22.50
* *****************************************************************************
*/
.extruder {
position: fixed;
cursor: default;
}
.extruder *{
box-sizing: content-box;
}
.extruder .header {
height: 27px
}
.extruder .extruder-content {
display: none;
background: white;
}
.extruder.right {
height: 100%;
}
.extruder.right .extruder-content {
border-left: 1px solid #c5c5c5;
border-right: 3px solid white;
border-top: 3px solid white;
border-bottom: 3px solid white;
/* -moz-box-shadow: -2px 0 5px #7aafda;
-webkit-box-shadow: -2px 0 5px #7aafda;
box-shadow: -2px 0 5px #7aafda; */
}
.extruder.right .ext_wrapper {
height: 100%;
right: 0;
}
.extruder.right .flap {
font-size: 18px;
top: 0;
border-left: 1px solid #c5c5c5;
border-right: 3px solid white;
border-top: 1px solid #c5c5c5;
border-bottom: 1px solid #c5c5c5;
padding: 10px 4px 10px 5px;
background: white;
width: 30px;
position: absolute;
left: -40px;
-moz-border-radius: 8px 0 8px 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 0;
border-top-left-radius: 8px;
border-top-right-radius: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 0;
/* -moz-box-shadow: -4px 0 5px 0 #7aafda;
-webkit-box-shadow: -4px 0 5px 0 #7aafda;
box-shadow: -4px 0 5px 0 #7aafda; */
}
.extruder.right .flap:hover {
background: #d2defa;
}
.extruder.right .flap .flapLabel {
background: transparent;
left: -9px;
}
.extruder .text {
background: white;
margin-top: 100px;
padding: 10px;
border-bottom: 1px solid #333;
}