/*BOX MODEL STRUCTURE*/

* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: block;
}

/* Mobile */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* Tablets */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* Desktop */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

/*DROPDOWN MENU STUFF*/

nav{
	float: left;
	width: 100%;
	border: 1px solid black;
	margin: 0 auto 0;
	position: relative;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 5px 5px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}


li.dropdown {
    display: inline-block;
}

.dropdown-content {
	z-index: 2;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 8px 14px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.center {
    margin: auto;
    width: 60%;
    padding: 10px;
}

/*HEADER*/

header {
	border: 1px solid black;
	padding: 5px;
	background-color: #f9f9f9;
	font-family: "Lucida Sans", sans-serif;
}

.header-title-wide {display: none;}
.header-title-thin { display: block;}
@media only screen and (min-width: 648px) {
    .header-title-wide {display: block;}
	.header-title-thin {display: none;}
}

/*FRAMES*/
#frames{
	position: relative;
	float: left;
	height: auto;
	min-height: 100%;
}

#editor{
	position: relative;
	float: left;
	height: 300px;
}

#viewer{
	position: relative;
	float: left;
	height: 300px;
}

#spectrum{
	position: relative;
	float: left;
	height: 195px;
	margin-bottom: 5px;
}

/*TABLES*/
.tables_desktop{
	margin-top: 5px;
	padding-left: 5px;
	position: relative;
	float: left;
	height: 490px;
}

.tables_mobile{
	margin-top: 5px;
	padding-left: 5px;
	position: relative;
	float: right;
	height: 287px;
	margin-bottom: 5px;
}

.chemshiftsT{
	position: relative;
	width: 100%;
	border: 1px solid black;
	height: 60%;
}

.couplingT{
	position: relative;
	width: 100%;
	border: 1px solid black;
	height: 40%;
}

.fixed_header_table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
.fixed_header_table th {
}
.fixed_header_table th,
.fixed_header_table td {
	padding: 5px;
	text-align: center;
	
}
.fixed_header_table td:nth-child(1),
.fixed_header_table th:nth-child(1) {
	min-width: 150px;
}
.fixed_header_table td:nth-child(2),
.fixed_header_table th:nth-child(2) {
	width: 155px;
}
.fixed_header_table thead {
	border: 1px solid black;
	background-color: #333333;
	color: #fdfdfd;
}
.fixed_header_table thead tr {
	display: block;
	position: relative;
}
.fixed_header_table tbody {
	display: block;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	height: 165px;
}
.fixed_header_table tbody tr{
	height: 30px;
}

.fixed_header_table tbody tr:nth-child(even) {
	background-color: #dddddd;
}
.fixed_header_table tbody tr:nth-child(odd) {
	background-color: #ffffff;
}

.old_ie_wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

.old_ie_wrapper tbody tr{
  height: 30px;
}

/*FOOTER*/
footer{	
	position: relative;
    clear: both;
	float: left;
	border: 1px solid black;
	padding: 5px;
	background-color: #f9f9f9;
    text-align: center;
}

/*HELP MENU*/
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0, 0.8);
    z-index: 50;
}

.menu-content-wrapper{
	position: relative;
	width: 100%;
	height: 370px;
	z-index: 52;
}
  
#menuFrame{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


  
.menu{
    width: 260px; 
    height: 400px;
	background-color: white;
	z-index: 51;
	
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

@media only screen and (min-width: 600px) {
 .menu{
	width: 400px; 
    height: 400px;
 }
}



/*RESPONSIVE VISIBILITY*/

/*MOBILE*/
.visible-mobile{
	display: block;
}
.visible-desktop{
	display: none;
}
.mobileCheck {float:none;}
@media only screen and (min-width: 600px) {
    /* Tablets */
	.visible-mobile{
		display: block;
	}
	.visible-desktop{
		display: none;
	}
	.mobileCheck {float:left;}
}
@media only screen and (min-width: 768px) {
    /* Desktop */
	.visible-mobile{
		display: none;
	}
	.visible-desktop{
		display: block;
	}
	.mobileCheck {float:left;}
}