/*

My Custom CSS
==============

Author:		Andreas Scheck, Daniel Bruness
Changed by:     Jan Niclas Wolf
Updated:	June 2020
Notes: 		Hand coded for www.ptgl.uni-frankfurt.de

*/


/*	-------------------------------------------------------------
	Layout
	-----------------------------------------------------------*/
	html, body {
		height: 100%;
		color: rgba(62, 62, 62, 1);
	}
	
	a {
		color: #1E0FBE;
	}
	
	a:visited {
			/*color: purple;*/
			color: #1E0FBE;
		}
	
	a:active a:focus a:hover { 
		color: #2A6496;
	}

	.btn {
		padding: 8px 12px;
		}
	#loadButton {
		position: absolute;
		margin-left: 1px;
	}
	
	#customBackground {
	/* Old color setup
	background-color: #A2A2A2;
	
  		background: -moz-radial-gradient(center, circle, #EDEDED 40%, #ADADAD 100%);
		background: -webkit-radial-gradient(center, circle, #A2A2A2 50%, #696567 100%);
		background: -ms-radial-gradient(center, circle, #A2A2A2 50%, #696567 100%);
		background: -o-radial-gradient(center, circle, #A2A2A2 50%, #696567 100%);
			*/
	
	background-color: #ADADAD;
	
  		background: -moz-radial-gradient(center, circle, #EDEDED 40%, #ADADAD 100%);
		background: -webkit-radial-gradient(center, circle, #EDEDED 40%, #ADADAD 100%);
		background: -ms-radial-gradient(center, circle, #EDEDED 40%, #ADADAD 100%);
		background: -o-radial-gradient(center, circle, #EDEDED 40%, #ADADAD 100%);
	}
	
	
	
	
	a.topLink:link, a.topLink:visited {
			color: #343434;
			}
		
	a.topLink:hover, a.topLink:active {
			color: black;
	}
		
	.topLink {
		text-align: right;
	}
	
	
	/* General */
        .first-li-tab { margin-left: 40px; }
	
	
	
	
	/* Wraps the whole file so the footer can be put into the correct position */
	.wrapper {
              position:relative;
              width:100%;
              min-height:100%;
              height:auto;
              margin: 0 auto;
			  
		}
	 
	/* Effects things that are inside the footer */
	footer {
		 background-color: #6E6E6E;
		 color: #D4D4D4;
		 font-size: 12px;
		 padding-top: 10px;
		 padding-bottom: 5px; 
		 /*margin-top: 60px;*/
		 }
		 
	
	/* Works together with the wrapper so the footer can be put into the correct position */	 
	
	#footer {
        position:relative;
        width:100%;
        height: auto;
		line-height: auto;
        margin: auto auto 0;
		}
	
	a.footerLink:link, a.footerLink:visited {
			color: #D4D4D4;
			}
		
	a.footerLink:hover, a.footerLink:active {
			color: #fff;
	}
		
	.flush-right {
		text-align: right;
	}
		
	
	/* Horizontal line separating the different topics */
	.line {
		border :none;
		background-color:#FFFFFF;
		height: 4px;
		}

	/* All the different line colors for the different topics */
	#About {
		padding-top: 50px;
		}
	
	#UserGuide {
		padding-top: 50px;
	}
	
	#DatabaseFormat {
		padding-top: 50px;
	}
	
	
	#lineAbout {
		background-color: #0DA0AB;
		}	
	
	#lineUserGuide {
		background-color: #2AA876;
		}	
		
	#lineDatabaseFormat {
		background-color: #FFD265;
		}	
	
	
	/* Positioning of the circle/icon */
	.iconPos {
		left: 47%;
		position: absolute;
		}

	#iconAbout {
		margin-top: -50px;
		}
	
	#iconUserGuide {
		margin-top: -50px;
		}
		
	#iconDatabaseFormat {
		margin-top: -50px;
		}
	
	
	
	.textWrapper {
	margin-top: 10%;
		}
	
	/* Make space for the text in the topics */
	#text {
		margin-top: 20px;
		margin-bottom: 80px;
		}
		
	
	#intro {
		margin-top: 8%;
		margin-bottom: -8%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
	
	#pageintro {
		margin-top: 30px;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
	
	
	
	
	/* User Guide */
	
	.ugCentering {
		padding-top: 3px;
		padding-bottom: 3px;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 10px;
		margin-left: auto;
		margin-right: auto;
		border-collapse: separate;
		}
		
	.ugBorder {
		border-right-style: dotted;
		border-left-style: dotted;
		border-right-width: thin;
		border-left-width: thin;
		border-color: black;
		}
	
	
	#ugStandardSearch {
		width: 80%;
		margin-top: 2%;
		background-color: #0DA0AB;
		cursor: pointer;
		cursor: hand;
		border-radius: 10px;
		}
	
	
	#ugAdvancedSearch {
		width: 80%;
		background-color: #3DF4AC;
		cursor: pointer;
		cursor: hand;
		border-radius: 10px;
		}
		
	.ugCenterHeadings {
		text-align: center;
		}
		
	#ugSearchkms {
                overflow: hidden;
		
		}
		
	#ugSearchkms1 {
		background-color: #FFD27B;
		border-radius: 4px;
		}
		
	#ugSearchk {
		background-color: #FFD27B;
		cursor: pointer;
		cursor: hand;
		border-radius: 4px;
                margin-bottom: -99999px;
                padding-bottom: 99999px;
		}
	
	#ugSearchkms2 {
		background-color: #FEA87A;
		border-radius: 4px;
		}
	
	#ugSearchm {
		background-color: #FEA87A;
		cursor: pointer;
		cursor: hand;
		border-radius: 4px;
                margin-bottom: -99999px;
                padding-bottom: 99999px;
		}
	
	#ugSearchkms3 {
		background-color: #FF5F55;
		border-radius: 4px;
		}
	
	#ugSearchs {
		background-color: #FF5F55;
		cursor: pointer;
		cursor: hand;
		border-radius: 4px;
		}
		
		
		.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: rgb(212, 212, 212);
	}
	
	.whiteBack > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: rgb(255, 255, 255);
	}
	
		
/*	------------------------------------------------------------
	Contact Us
	------------------------------------------------------------*/
	
	
	#contactUs {
		margin-top: 5%;
	}
	
	#contact {
		background: rgba(255, 255, 255, 0.4);
		padding: 10px 10px;
		
	}
	
	#member1 {
		padding-top: 1%;
	}
	
	#member2 {
		padding-top: 2%;
	}
	
	#member3 {
		padding-top: 2%;
	}
	
	
	
/*	-------------------------------------------------------------
	Typography
	-----------------------------------------------------------*/
	
/*	-------------------------------------------------------------
	Linear Notations
	-----------------------------------------------------------*/	

	#linnot_table {
		
	}
	
	.string_row {
		background-color: #f3f3f3;
		opacity: 0.8;
	}
	.string_row:nth-child(odd){
		background-color: #eee;
		opacity: 0.8;
	}
	
	.string_row:nth-child(odd):hover{
		opacity: 1.0;
	}	

	.string_row:nth-child(even):hover{
		opacity: 1.0;
	}
	
	.string_row > a {
		opacity: 1.0 !important;
		color: #000;
	}
	
	#linnot_info {
		width: 540px;
		height: 100%;
		min-height: 200px;
	}
	
	#linnot_info > div {
		padding-top: 20px;
	}

/*	-------------------------------------------------------------
	Navbar
	-----------------------------------------------------------*/
	
	#navColor {
	/* old color setup
		background-color: #343434;
		*/
		background-color: #6E6E6E;
		}
	
	
	.navbar-nav > .open > a, .navbar-nav > .open > a:hover, .navbar-nav > .open > a:focus {
		background-color: #4F4F4F;
		color: #ffffff;
	
	}
	
	
	.active {
		background-color: #4F4F4F;
		}
	
	.navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
		background-color: #4F4F4F;
		color: #ffffff;
		}
		
	.nav > li > a:hover, .nav > li > a:focus {
		background-color: #4F4F4F;
		color: #ffffff;
		}
		
	.navbar-nav > li > a {
		/* old color setup
		color: #636262;
		*/
		color: #D4D4D4;
  		}
		
	
	.navbar-brand {
		padding: 13px 15px;	
		}
	
	.navbarFont {
		font-size: larger;
		}

	
	.navbar-nav > .dropdown > a .caret {
    border-bottom-color: #D4D4D4;
    border-top-color: #D4D4D4;
	}
	
	
	.navbar-nav > .dropdown > a:hover .caret, .navbar-nav > .dropdown > a:focus .caret {
    border-bottom-color: #ffffff;
    border-top-color: #ffffff;
	}
	
	
/*	-------------------------------------------------------------
	Search
	-----------------------------------------------------------*/
	.motifimagecontainer {
		display: inline-block;
		height: 250px;
		margin-bottom: 25px;
	}

	.motifimage {
		height: 100%
	}

	.motiftext {
		width: 100%;
	}



	#searchInput {
		width: 301px;
		}
		
	#searchGraphlets {
		width: 301px;
		}
		
	#searchLinnots {
		width: 301px;
		}
	
	#searchInputMain {
		width: 301px;
	}
	
	#searchComplex {
                width: 301px;
        }
		
	
	.col-centered {
		margin: auto;
		float: none;
	}
	
	#search {
		padding-top: 11%; /*180px; */
		padding-right: auto;
		padding-left: auto;
		}
		
	#pager {
		margin: auto auto 22px;
		text-align: center;
	}
	
	
	.checkboxFont {
		font-weight: normal;
	}
	
	.input-group {
		margin-left: auto;
		margin-right: auto;
	}
		
	.col-lg-3-centering {
		width: auto;
		}

	
	.additional-search {
		margin-left: auto;
		margin-right: auto;
		}

	#liveSearchResults {
		margin-bottom: 0px;
		top: -23px;
		position:relative;
		width: 100%;
		background: #d9d9d9;
		border: 1px solid #A2A2A2;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
		outline: 0px none;
		display: none;
		max-height: 150px;
		overflow-y: scroll;
		width: 301px;
		line-height: 25px;
		}
	.liveSearchResultsPage {
		top: inherit !important;
		z-index: 5;
		position: absolute !important;
		}
	
	.result {
		display: block;	
		}
	
	.result:hover {
		background: #e9e9e9;	
		}
	.resultHover{
		background: #e9e9e9 !important;
		}
	
	
	/* Index Advanced Search Area */
	
	#advancedButton {
		display: block;
		text-align: right;
		color:teal;
		margin-top:3px;
		}
	
	#advancedSearch {
		display: none;	
		}
	#arrow {
		float:right;
		margin-left: 3px;
		transform:rotate(-90deg);
		}
	.rotateArrow {
		transform:rotate(0deg)!important;
		}
	
	.advancedInput {
		float:right;
		}
	.advancedLabel {
		display: inline-block;
		width: 300px;
		margin-left: auto;
		margin-right: auto;
		font-weight: normal;
		}
	
	
	#addSearchMotif {
		text-align: center;
	}
	
	#addSearchSequence {
		text-align: center;
	}
	
	#addSearchGraphletSimilarity {
		text-align: center;
	}
	
	#addSearchCustomLinnots {
		text-align: center;
	}
	
	
	#flipArrow {
		margin-left: 3px;
		transform: rotate(-90deg);
	}

	#flipArrow2 {
		margin-left: 3px;
		transform: rotate(-90deg);
	}
	
	#flipArrow3 {
		margin-left: 3px;
		transform: rotate(-90deg);
	}
	
	#flipArrow4 {
		margin-left: 3px;
		transform: rotate(-90deg);
	}
	
	#flipArrow5 {
		margin-left: 3px;
		transform: rotate(-90deg);
	}
	
	#flipArrow6 {
		margin-left: 3px;
		transform: rotate(-90deg);
	}
	
	#flipArrowComplex {
		margin-left: 3px;
		transform: rotate(-90deg);
	}
	
	
	/* Search results page */
	
	#searchResults {
		margin-bottom: 50px;
		}
		
	.bx-wrapper > .container {
		padding-right: 10px;
	}		

	.results {
		width: 100%;
		overflow: hidden;
		border-top: 1px solid grey;
		}
	
	.resultsOrange {
		background: #BEDBE6;
		}
	
	.resultsWhite {
		background: rgba(214, 214, 214, .6);
		}

	
	.resultsHeader {
		width: auto;
		height: 2.1em;
	}

	.resultsHeaderOrange {
		background: #7DC0C5;
		
	}
	
	.resultsHeaderWhite {
		background: rgba(214, 214, 214, .8);
		
	}
	
			
	.resultsId {
		width: 100px;
		float: left;
		font-size: 1.5em;
		font-weight: normal;
		}

	.resultsRes {
		margin-top: .7em;
		width: auto;
		float: left;
	}
	
	.resultsLink {
		padding-top: .6em;
		text-align: right;
		padding-right: 1px;
	}
	
	
	.resultsBody1 {
		clear:left;
	}
	
	
	.resultsTitle {
		width: 100px;
		float: left;
	}
	
	
	.resultsTitlePDB {
		overflow: hidden;
	}
	
	
	.resultsBody2 {
		clear: left;
	}
	
	
	.resultsClass {
		width: 100px;
		float: left;
	}
	
	
	.resultsClassPDB {
		overflow: hidden;  /* Dat passt scho :) */
	}
	
	.resultsBody3 {
		clear: left;
	}
	
	.resultsEC {
		width: 100px;
		float: left;
	}
	
	.resultsECNum {
		
	}
	
	.resultsFooter {
		clear: left;
	}
	
	
	.resultsChain {
		width: 100px;
		float: left;
	}
	
	.resultsChainNum {
		float: left;
	}
	
	.resultsSCOP {
		padding-left: 1%;
		float: left;
	}
	
	.resultsCATH {
		padding-left: 5%;
		float: left;
	}
	
	.resultsComment {
		padding-left: 5%;
		float: left;
	}
	
	.chainCheckBox {
		margin-right: 3px !important;				
	}
	
	
	
	
	
	/* Load Proteins */
	
	#load {
		margin-top: 15%;
	}
	
	
	#loadInput {
		width: 273px;
	}
	
	
	.additionalProteinButtons {
		margin-top: 15%;
		width: 391px;
	}
	
	.protButton {
		margin-left: 4%;
	}
	
	
	.btnSize {
			padding: 4px 6px;
	}
	
	
	svg{
		 top:0; left:0; height:100%; width:100% 
	}
	
	
	
	
	
	
	/* -----------------------------------
	 content.php
	------------------------------------*/
	
	#contentText {
		margin-top: 5%;
	}
	
	#contentTable {
		margin-top: 5%;
		background: rgba(255, 255, 255, 0.4);
		}
	
	.borderless>thead>tr>th, 
	.borderless>tbody>tr>th, 
	.borderless>tfoot>tr>th, 
	.borderless>thead>tr>td, 
	.borderless>tbody>tr>td, 
	.borderless>tfoot>tr>td {
		border-top: none; 
		}
	
	.tablecenter {
		text-align: center;
	}
	
	
	
	/*-------------------------------------
	 publications.php
	 ------------------------------------*/
	
	#publications {
		margin-top: 5%;
	}
	
	#publicationsList {
		background: rgba(255, 255, 255, 0.4);
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	
	
	/*-------------------------------------
	 citing.php
	 ------------------------------------*/
	#citing {
		margin-top: 5%;
	}


	#bibtex {
		background: rgba(255, 255, 255, 0.4);
		padding: 10px;
		font-size: smaller;
		font-family: monospace, sans-serif;
	}

	/*-------------------------------------
	 imprint.php
	 ------------------------------------*/
	#imprint {
		margin-top: 5%;
	}


	#imprinttext {
		background: rgba(255, 255, 255, 0.4);
		padding: 10px;
	}


	/*-------------------------------------
	 3Dview.php
	 ------------------------------------*/
	
	#myJmol_appletinfotablediv {
		z-index: 0;
	}
	
	#appdiv {
		margin-bottom: 10%;
	}
	
	#D3view {
		margin-top: 5%;
	}


	#D3viewcontainer {
		background: rgba(255, 255, 255, 0.4);
		padding: 10px;
	}	
	
	
	/*----------------------------------------
	 about.php
	 ---------------------------------------*/
	
	#about {
		margin-top: 5%;
	}
	
	.noBullets {
		list-style-type: none;
	}
	

	.imgFormAboutphp {
		/* width: 650px; */
                width: 100%;
                min-width: 450px;
                max-width: 1000px;
		border: solid;
		border-width: 1px;
		margin: 10px;
		}
                
        .imgFormAboutphp2 {
		width: 500px;
		border: solid;
		border-width: 1px;
		margin: 10px;
		}    
		
        .imgScreenshot {
		width: 100%;
                min-width: 450px;
                max-width: 850px;
		border: solid;
		border-width: 1px;
		margin: 10px;
		}
	
	.imgCenter {
		text-align: center;
		}
		
        .sectionPointerBox {
            text-align: center;
            border: solid;
            border-width: 2px;
            }
	
	#aboutTable {
		background: rgba(255, 255, 255, 0.4);
		}
	
	

	
	
	/* --------------------------------------
		help.php
	---------------------------------------*/
	
	#help {
		margin-top: 5%;
		}
	
	.anchor {
		display: block;
		position: relative;
		top: -55px;
		visibilty: hidden;
		}

	.imgFormHelp {
		height: 300px;
		border: solid;
		border-width: 1px;
		margin: 10px;
	
	}
	
	
	/*-----------------------------------------
		results.php
	-----------------------------------------*/
	
	#proteinDisplay {
		margin-top: 5%;
		}
	
	.proteingraph {
		margin-right: 5%;
		width: 60%;
		float: left;
		}
	
	#sse {
		width: 35%;
		height: 360px;
		overflow: auto;
		margin-bottom: 5%;
		}
	
	.bx-pager-own {
		text-align: center;
	}

	#selectNot {
		margin-left: 5%;
	}

	
	/* --------------------------------------
   Carousel
   -------------------------------------- */

	#myCarousel {
		margin-top: 1px;
	}

	#multipleDownload {
		display: block;
    	margin-left: 10px;
    	margin-top: 66px !important;
    	position: relative;
	}

	.carousel-caption {
		font-size: 24px;
	}

	.carousel-caption h4 {
		font-size: 32px;
	}

	#myCarousel .item { height: 400px; }

	#slide1 {
		background: url(http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) top center no-repeat;
	}

	#slide2 {
		background: url('../../images/carousel_medium_02.jpg') top center no-repeat;
	}

	#slide3 {
		background: url('../../images/carousel_medium_03.jpg') top center no-repeat;
	}

	.bxslider {
		list-style: none;
	}

	.bxslider p {
		text-align: right;
	}

	.bx-pager-own a {
		color: #0D0D0D;
	}

	.bx-pager-own .active {
		color: #fff;
	}

	.tada li img {
		border: 1px solid grey;
	}

	.tada li a {
		color: #0D0D0D;
	}

	.download-options {
		float: right;
	}
	
	table#tblfgresults {
    width: 100%;
    background-color: #f1f1c1;
	} 
	 table#tblfgresults tr:nth-child(even) {
    background-color: #eee;
}
table#tblfgresults tr:nth-child(odd) {
    background-color: #fff;
}
table#tblfgresults th {
    color: white;
    background-color: black;
}

	table#tblgraphletresults {
    width: 100%;
    background-color: #f1f1c1;
	} 
	 table#tblgraphletresults tr:nth-child(even) {
    background-color: #eee;
}
table#tblgraphletresults tr:nth-child(odd) {
    background-color: #fff;
}
table#tblgraphletresults th {
    color: white;
    background-color: black;
}

	table#tblgraphletresultsdetails {
    width: 100%;
    background-color: #f1f1c1;
	} 
	 table#tblgraphletresultsdetails tr:nth-child(even) {
    background-color: #eee;
}
table#tblgraphletresultsdetails tr:nth-child(odd) {
    background-color: #fff;
}
table#tblgraphletresultsdetails th {
    color: white;
    background-color: black;
}


	.results table {
    width: 100%;
    background-color: #f1f1c1;
	} 
	 .results table tr:nth-child(even) {
    background-color: #eee;
}
.results table tr:nth-child(odd) {
    background-color: #fff;
}
.results table th {
    color: white;
    background-color: black;
}


	table#tblmotifoverview {
    width: 100%;
    background-color: #f1f1c1;
	} 
	 table#tblmotifoverview tr:nth-child(even) {
    background-color: #eee;
}
table#tblmotifoverview tr:nth-child(odd) {
    background-color: #fff;
}
table#tblmotifoverview th {
    color: white;
    background-color: black;
}


.boxedgray {
  border: 1px solid gray;
  color: gray;
}

.boxedred {
  border: 1px solid red;
  color: red;
}

.bottom-bar {
    border: 1px solid black;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
	color: black;
	background-color: red;
	z-index: 1000;
}

table#bktable {
   border: 1px solid black;
}
table#bktable th {
   border: 1px solid black;
}
table#bktable td  {
   border: 1px solid black;
   padding: 10px;
}
table#bktable th  {
   border: 1px solid black;
   padding: 10px;
} 
	
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin-left: 0.5cm !important; 
		  margin-right: 0.5cm !important;
		  margin-top: 1.5cm !important;
		  margin-bottom: 2cm !important; }
  p, h1, h2, h3, h4 { orphans: 3; widows: 3; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  
  html, body { height: 90% !important; }
  #footer { display: none !important; }
  #iconAbout, #iconUserGuide, #iconDatabaseFormat { display: none !important; }
  .topLink { display: none !important; }
  #advancedSearch, #addSearchMotif, #addSearchSequence, #addSearchKey { display: block !important; }
  #arrow, #flipArrow, #flipArrow2, #flipArrow3 { transform: rotate(0deg) !important; }
  #ugStandardSearch, #ugAdvancedSearch, #ugSearchkms { display: block !important; page-break-inside: avoid; }
  #ugSearchkms1, #ugSearchkms2, #ugSearchkms3 { display: none !important; page-break-inside: avoid; }
  br { display: none !important; }
  #lineAbout, #lineUserGuide, #lineDatabaseFormat { display: none !important; }
  #iconAbout, #iconUserGuide, #iconDatabaseFormat, #text { margin: 0px !important; }
  .line { display: none !important; }
}