/* Style for the Teaching Portal and the Tutorial */

/* Figures in general */
.image{
	display: block;
	margin: auto;
}

figcaption{
	text-align: center;
	font-size: 12pt;
}

/* The table of 20 standard amino acids (Table 1 of proteins in Teaching Portal) */
.aminoacids{
	border-collapse: collapse;
}

.aminoacids caption{
	text-align: left;
}


.tdaa{	/* All amino acid structures are aligned to the top to highlight the length of related side chains */
	vertical-align: top;
}

/* Alternating borders in table */
.trbtm{
	border-bottom: 1px solid black;
	border-top: none;
}

.trbtm td{
	border-bottom: none;
}

.tdlbl{
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 12pt;
	border-bottom: none;
}

.aatype{
	text-align: center;
	padding: 15px;
	border-top: none;
}

.tdlblend{
	text-align: center;
	padding: 15px;
	font-size: 12pt;
}

/* Code for the accordions */
.studenttab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
}

input {	/* Hides the tick box */
  display:none;
}


.galleryPicture {
	height:250px;
	width:250px;
	position: relative;
	display:block;
}

label {
  position: relative;
  display: block;
  padding: 1px 15px 1px 15px;
  background: url("../EzMol_Data/images/ui-bg_gloss-wave_60_fece2f_500x100.png");
  cursor: pointer;
  border-radius: 15px 15px 15px 15px;
 }


input:checked ~ .tab-content {	/* Opens up the accordion upon clicking */
  max-height: 100%;
}

input:checked ~ label {	/* Styling for the header when it has been clicked on */
  background: url("../EzMol_Data/images/gloss-wave-green.png");
  color: rgb(0,116,199);
}


/* Style for the resolution table (Table 2 of proteins in Teaching Portal) */
.resol{
	border-collapse: collapse;
}

.resol td{
	padding: 3px 10px 3px 10px;
	border-bottom: solid black 1px;
}

.resol caption{
	padding-bottom: 18px;
}


/* Style for the DNA and RNA bases table (Table 1 of DNA in teaching portal) */
.bases{
	border-collapse: collapse;
	text-align: center;
	table-layout: fixed;
}

.bases caption{
	text-align: left;
}

.bases td{
	padding-left: 5px;
	padding-right: 5px;
	width: 20%;
}

/* Vertical borders */
.tdmidlle{
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.tdleft{
	border-left: none;
}

.tdright{
	border-right: none;
}


.pdbID {
  padding: 1px 10px 1px 10px;
  font-weight: bold;
  border: 1px solid black;
  border-radius: 5px 5px 5px 5px;
  background: gray;
  color: white;
  width: auto;
  background: url("../EzMol_Data/images/ui-bg_gloss-wave_45_817865_500x100.png");
  display: inline-block;
 }

/* Bonus question in O2 binding worksheet */
.bonusquestion {
	border: 3px dashed black;
	padding: 7px;
}

/* Style for tutorial page*/
.tutorial{
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
}

.tutorial figcaption{
	padding-top: 10px;
}

.eximage{
	display: block;
	margin: auto;
	max-width: 40%;
    max-height: 40%;
}

.eximagecomp{
	display: block;
	margin: auto;
	max-width: 60%;
    max-height: 60%;
}