.firstParagraph {
	padding-top: 2em;
}
#homeIcon {
	z-index: 3;
	width: 5.7em;
	position: relative;
	display: inline-block;
	float: left;
	padding-left: 3em;
	bottom: 0.5em;
}


#welcome {
    padding-bottom: 15pt;
    font-family: Roboto;
    font-weight: 400;
    font-size: 24pt;
	display: none;
}


#banner {
	padding-top:100px;
	padding-bottom: 10px; 
	width:200px;
}

#navigatorHandler {
	top: 0px;
	display: none;
	position: relative;
	top:-70pt;
	left: 70pt;
	cursor: pointer;
}

#navigatorHandler img {
	right: 0pt;
	bottom: 0pt;
	top:0pt;
	left: 0pt;
	margin: 0pt;
	width: 58pt;
}

#navigator {
	z-index: 3;
	right:0px;
	top:0px;
	position: fixed;
	height: 480px;
	width:300px;
	color: white;
	
	
}

#navigator div {
	margin-left: 138pt;
	height: 100pt;
	width: 300px;
	background-color: rgb(230, 40, 0);

}


#navigator img {
	
	padding-top: 20px;
	width: 70pt;
	height: 70pt;
	margin-left: 11pt;
}

#navigator p {
	font-weight: 500; 
	text-align: left;
	margin-left: 60px;
	margin-top: -67px;
}


#navigator #a {
	padding-top: 55pt;
			
}

#navigator #c {
	border-bottom-left-radius: 10px;
}

#tableContent {
	border-bottom-right-radius: 20px;
	z-index: 3;
	left:0px;
	top:0px;
	display: block; /*important for images*/
	background-color: rgba(255,255,255,1);
	position: fixed;
	height: 400px;
	width:200px;
	color: white;
}

#tableContent ol {
	padding-top: 75pt;
	padding-left: 30pt; 
}

#tableContent a{
	color: rgba(145,123,233,1);
	background-color: transparent;
}

#tableContent ol li {
	font-family: Roboto;
	font-weight: 400;
	font-size: 13pt;
	position: relative;
	text-align: left;
	padding-left: 0pt;
	padding-top: 0px;
	margin-bottom: 10px;
	direction: ltr;
	left:0px;
	color: rgba(145,123,233,1);
	background-color: transparent;

}

#tableContent ol li ol {
	padding-bottom: 4px;
	font-weight: 100;
	padding-top: 5px;
	font-size: 15px;
}

.table {
	border-top: 2px dotted #ffffff;
	border-bottom: 2px dotted white;
	width: 700px;
	margin: 60px; /* MARGIN NOT MARGIN-TOP!!! this makes sure they are under the paragraph ;) by chance got it */
}

table {
	color: white;
	font-family: Roboto;
	font-weight: 300;
	border:2px solid #fcfcfc;
	text-align: center; 
	width:700px;
	margin: auto;
	border-collapse: collapse;
	margin-bottom: 50px;
	margin-top: 10px;
}

table caption {
	padding-bottom: 10px;
	caption-side: top;
	text-align: left;
	font-size: 16pt;
	padding-top: 20px;
}

td {
	border: 2px solid white;
	height: 50px;	
}

th {
	font-weight: 400;
	font-size: 13pt;
	border: 2px solid white;
}

table span {
	color: rgb(255,224,0);
	font-style: italic;
	font-weight: 500;
}

/* ----------- iPad ----------- */

@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px)  {
	  
	 #tableContent {
	 	display: none;
	}
	
	#menu {
		width: 800pt;	
	}
	
	#menu li {
		left: 5pt;		
	}

	.header {
		height: 65pt;
		overflow-x: scroll;
		overflow-y:  hidden;
		/* makes sure everything is smooth on iphone if 'touch' */
		-webkit-overflow-scrolling: auto;
	}
	
	/* Begin Scrollbar customisation */
	::-webkit-scrollbar {
	    height: 5pt;
	} 
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	    -webkit-border-radius: 0px;
	    border-radius: 1pt;
	    background: rgba(255,0,0,0.8); 
	    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
	}
	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(255,0,0,0.4); 
	}	
	
	/* End scrollbar customisation */
	
	
	#homeIcon {
		width: 5em;
		padding-left: 0.5em;
		bottom: 0px;
	}
	
 	#navigator {
 	  	right: -90pt;	
 	}
 	#navigatorHandler {
	 	display: inline-block;
	 	margin-top: 12pt;
 	}
	
	#theory {

	}
	
	#instrumentation{

	}
	
	#interpretation {

	}
	
	.images {
		margin: 2.8em;
	}
}

/* ----------- Mobile ----------- */

@media only screen  
  and (max-width: 736px) {
	  
	  .header {
	  	height:70pt; 
	  }
	  #menu {
	    width: 700pt;
	    left:50pt
	    	
	  }
	  
 	  #homeIcon {
	  	width: 60pt;
	  	bottom: 0pt;
	    padding-left: 0pt;
 	  }
 	  
 	  #navigatorHandler {
	 	  display: inline-block;
 	  }
 	  #content {
 	  	width: 100%;
 	  }
 	  
 	  #tableContent {
	  	display: none;
 	  }
 	  #navigator {
 	  	right: -90pt;	
 	  }
 	  
 	  h3 {
	  	text-align: center;
 	  }
 	  
 	  h5 {
	 	  text-align: center;
 	  }
 	  
 	  #content p {
	  	margin: 0pt;
	  	padding-left: 20pt;
	  	padding-right: 20pt;
 	  }
 	  
 	  /*---The exact imgs are  optimised in each sections css file ---*/
 	  #content img {
 	  	margin: auto;
 	  	display: block;
 	  }
 	  
 	  #content .images {
 	  	margin: 0pt;
 	  	margin-top: 30pt;
 	  	width: 100%;
 	  }
 	  
 	  .table {
	 	  margin: 0pt;
	 	  margin-left: 20pt;
	 	  margin-top: 20pt;
	 	  width: 400pt;
 	  }
 	  table {
	 	  margin-bottom:  50pt;
	 	  width: 400pt;
 	  }
 	  
}