Added logos, two of the theory pages and some images. Also renamed some samples in the database so they work with linux

three_d_viewer/css/custom.css

@@ -0,0 +1,6 @@
+.my-fluid-container {
+  padding-left: 25px;
+  padding-right: 25px;
+  margin-left: auto;
+  margin-right: auto;
+}

three_d_viewer/css/styles.css

@@ -0,0 +1,887 @@
+@charset "UTF-8";
+/* RESETS & CUSTOM FONT DECLARATIONS */
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+@font-face {
+    font-family: 'quicksandbold';
+    src: url('../fonts/qcksnd-bold-webfont.eot');
+    src: url('../fonts/qcksnd-bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-bold-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-bold-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-bold-webfont.svg#quicksandbold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'quicksandbold_italic';
+    src: url('../fonts/qcksnd-bolditalic-webfont.eot');
+    src: url('../fonts/qcksnd-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-bolditalic-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-bolditalic-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-bolditalic-webfont.svg#quicksandbold_italic') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'quicksanddash';
+    src: url('../fonts/qcksnd-dash-webfont.eot');
+    src: url('../fonts/qcksnd-dash-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-dash-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-dash-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-dash-webfont.svg#quicksanddash') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'quicksanditalic';
+    src: url('../fonts/qcksnd-italic-webfont.eot');
+    src: url('../fonts/qcksnd-italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-italic-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-italic-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-italic-webfont.svg#quicksanditalic') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'quicksandlight';
+    src: url('../fonts/qcksnd-light-webfont.eot');
+    src: url('../fonts/qcksnd-light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-light-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-light-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-light-webfont.svg#quicksandlight') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'quicksandlight_italic';
+    src: url('../fonts/qcksnd-lightitalic-webfont.eot');
+    src: url('../fonts/qcksnd-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-lightitalic-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-lightitalic-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-lightitalic-webfont.svg#quicksandlight_italic') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+
+
+
+@font-face {
+    font-family: 'quicksandregular';
+    src: url('../fonts/qcksnd-regular-webfont.eot');
+    src: url('../fonts/qcksnd-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/qcksnd-regular-webfont.woff') format('woff'),
+         url('../fonts/qcksnd-regular-webfont.ttf') format('truetype'),
+         url('../fonts/qcksnd-regular-webfont.svg#quicksandregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+/* GENERAL STRUCTURE */
+
+html, body {
+	height: 100%;
+}
+
+body {
+	background-image:url('../images/background_tile_lightest.jpg');
+	background-repeat: repeat;
+	background-attachment: scroll;
+}
+
+#wrapper {
+	min-height: 100%;
+	height: auto !important;
+	height: 100%;
+	margin: 0 auto -55px; /* the bottom margin is the negative value of the footer's height */
+}
+
+#footer, #push {
+	height: 55px; /* .push must be the same height as .footer */
+	clear: both;
+}
+
+#footer {
+	width: 100%;
+	margin-left: auto;
+	background-color: #CCCCCC;
+	z-index: 900;
+}
+
+#footer ul {
+	list-style-type: none;
+	text-align: center;
+	padding: 15px 20px;
+}
+
+#footer li {
+	display: inline;
+	text-align: center;
+	font-family: 'quicksandbold', Helvetica, sans-serif; 
+	font-size: 14px;
+	font-weight: bold;
+	color: #7a8189;
+	text-transform: uppercase;
+}
+
+
+#footer a {
+	text-decoration: none;
+	display: inline;
+	text-align: center;
+	font-family: 'quicksandbold', Helvetica, sans-serif; 
+	font-size: 14px;
+	font-weight: bold;
+	color: #7a8189;
+	text-transform: uppercase;
+}
+
+#footer a:hover {
+	text-decoration: none;
+	display: inline;
+	text-align: center;
+	font-family: 'quicksandbold', Helvetica, sans-serif; 
+	font-size: 14px;
+	font-weight: bold;
+	color: #FFFFFF;
+	text-transform: uppercase;
+  -webkit-transition: color 0.25s ease-out;
+  -moz-transition: color 0.25s ease-out;
+  -ms-transition: color 0.25s ease-out;
+  -o-transition: color 0.25s ease-out;
+  transition: color 0.25s ease-out;
+}
+
+#container {
+	width: 100%;
+	height:91.2vh;
+	background-image:url('../images/background_tile_lightest.jpg');
+	background-repeat: repeat;
+	background-attachment: scroll;
+}
+
+#header {
+	width: 100%;
+	height: auto;
+}
+
+#logo {
+	width: 10%;
+	height: 44px;
+	background-color: #FFFFFF;
+	text-align: center;
+	float: left;
+}
+
+#logo p {
+	padding-top: 5%;
+}
+
+#logoimage{
+	width: auto;
+	height: 44px;
+}
+
+#menuContainer {
+	width: 80%;
+	height: auto;
+	float: right;
+}
+
+#mainText {
+	width: 70%;
+	padding-left:7px;
+	margin-left: auto;
+	margin-right: auto;
+	background: rgb(255, 255, 255);
+	/* RGBa with 0.6 opacity */
+	background: rgba(255, 255, 255, 0.5);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+}
+
+#sidebar {
+	width: 20%;
+	height: auto;
+	float: left;
+}
+
+#virtualObject {
+	width: 80%;
+	height: 100%;
+	float: right;
+}
+
+#mineralOne,
+#mineralTwo,
+#mineralThree,
+#mineralFour,
+#mineralFive {
+	float: left;
+	width: 100%;
+	padding-left: 5px;
+	padding-top: 5px;
+}
+
+#pushDown {
+	width: 100%;
+	padding-bottom: 40vh;
+}
+
+#pushDownTwo {
+	width: 100%;
+	padding-bottom: 60px;
+}
+
+#pushDownThree {
+	width: 100%;
+	padding-bottom: 10px;
+}
+
+
+/* TEXT STYLES */
+
+#mainText p {
+	font-size: 12pt;
+	font-family: 'quicksandregular', Helvetica, sans-serif;
+	line-height: 16pt;
+	text-align: left;
+	color: #000;
+}
+
+#mineralContainer p {
+	font-size: 12pt;
+	font-family: 'quicksandregular', Helvetica, sans-serif;
+	line-height: 16pt;
+	text-align: left;
+	color: #000;
+}
+
+h1.subHeadings {
+	font-size: 22pt;
+	font-family: 'quicksandbold', Helvetica, sans-serif;
+	text-transform: uppercase;
+	letter-spacing: 3px;
+	line-height: 26pt;
+	text-align: left;
+	padding-bottom: 5px;
+	color: #000;
+
+}
+
+h2.theoryHeadings {
+	font-size: 14pt;
+	font-family: 'quicksandbold', Helvetica, sans-serif;
+	line-height: 18pt;
+	text-align: left;
+	color: #000;
+	padding-top: 5px;
+	padding-bottom: 5px;
+
+}
+
+img.example {
+	width: 100%;
+	height: auto;
+}
+
+/* MENU SPECIFIC STYLES */
+
+#cssmenu {
+  position: relative;
+  height: 44px;
+  background: #CCCCCC;
+  width: auto;
+}
+#cssmenu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1;
+}
+#cssmenu > ul {
+  position: relative;
+  display: block;
+  background: #CCCCCC;
+  height: 32px;
+  width: 100%;
+  z-index: 500;
+}
+#cssmenu > ul > li {
+  display: block;
+  position: relative;
+  float: left;
+  margin: 0;
+  padding: 0;
+}
+#cssmenu > ul > li.mainitem {             /*CUSTOM CLASS TEST*/
+  width: 25%;
+}
+#cssmenu > ul > #menu-button {
+  display: none;
+}
+#cssmenu ul li a {
+  display: block;
+  font-family: 'quicksandbold', Helvetica, sans-serif;
+  text-decoration: none;
+}
+#cssmenu > ul > li > a {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 15px 20px;
+  color: #7a8189;
+  text-transform: uppercase;
+  -webkit-transition: color 0.25s ease-out;
+  -moz-transition: color 0.25s ease-out;
+  -ms-transition: color 0.25s ease-out;
+  -o-transition: color 0.25s ease-out;
+  transition: color 0.25s ease-out;
+}
+#cssmenu > ul > li.has-sub > a {
+  padding-right: 32px;
+}
+#cssmenu > ul > li:hover > a {
+  color: #ffffff;
+}
+#cssmenu li.has-sub::after {
+  display: block;
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+#cssmenu > ul > li.has-sub::after {
+  right: 10px;
+  top: 20px;
+  border: 5px solid transparent;
+  border-top-color: #7a8189;
+}
+#cssmenu > ul > li:hover::after {
+  border-top-color: #ffffff;
+}
+#indicatorContainer {
+  position: absolute;
+  height: 12px;
+  width: 100%;
+  bottom: 0px;
+  overflow: hidden;
+  z-index: -1;
+}
+#pIndicator {
+  position: absolute;
+  height: 0;
+  width: 100%;
+  border: 12px solid transparent;
+  border-top-color: #2b2f3a;
+  z-index: -2;
+  -webkit-transition: left .25s ease;
+  -moz-transition: left .25s ease;
+  -ms-transition: left .25s ease;
+  -o-transition: left .25s ease;
+  transition: left .25s ease;
+}
+#cIndicator {
+  position: absolute;
+  height: 0;
+  width: 100%;
+  border: 12px solid transparent;
+  border-top-color: #2b2f3a;
+  top: -12px;
+  right: 100%;
+  z-index: -2;
+}
+#cssmenu ul ul {
+  position: absolute;
+  left: -9999px;
+  top: 70px;
+  opacity: 0;
+  -webkit-transition: opacity .3s ease, top .25s ease;
+  -moz-transition: opacity .3s ease, top .25s ease;
+  -ms-transition: opacity .3s ease, top .25s ease;
+  -o-transition: opacity .3s ease, top .25s ease;
+  transition: opacity .3s ease, top .25s ease;
+  z-index: 1000;
+}
+#cssmenu ul ul ul {
+  top: 37px;
+  padding-left: 5px;
+}
+#cssmenu ul ul li {
+  position: relative;
+}
+#cssmenu > ul > li:hover > ul {
+  left: auto;
+  top: 44px;
+  opacity: 1;
+}
+#cssmenu ul ul li:hover > ul {
+  left: 170px;
+  top: 0;
+  opacity: 1;
+}
+#cssmenu ul ul li a {
+  width: 130px;
+  border-bottom: 1px solid #eee;
+  padding: 10px 20px;
+  font-size: 12px;
+  color: #9ea2a5;
+  background: #fff;
+  -webkit-transition: all .35s ease;
+  -moz-transition: all .35s ease;
+  -ms-transition: all .35s ease;
+  -o-transition: all .35s ease;
+  transition: all .35s ease;
+}
+#cssmenu ul ul li:hover > a {
+  background: #f6f6f6;
+  color: #8c9195;
+}
+#cssmenu ul ul li:last-child > a,
+#cssmenu ul ul li.last > a {
+  border-bottom: 0;
+}
+.submenuArrow {
+  border: 6px solid transparent;
+  width: 0;
+  height: 0;
+  border-bottom-color: #fff;
+  position: absolute;
+  top: -12px;
+}
+#cssmenu ul ul li.has-sub::after {
+  border: 4px solid transparent;
+  border-left-color: #9ea2a5;
+  right: 10px;
+  top: 12px;
+  -moz-transition: all .2s ease;
+  -ms-transition: all .2s ease;
+  -o-transition: all .2s ease;
+  transition: all .2s ease;
+  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
+}
+#cssmenu ul ul li.has-sub:hover::after {
+  border-left-color: #fff;
+  right: -5px;
+  -webkit-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+  #cssmenu {
+    width: auto;
+  }
+  #cssmenu ul {
+    width: auto;
+  }
+  #cssmenu .submenuArrow,
+  #cssmenu #indicatorContainer {
+    display: none;
+  }
+  #cssmenu > ul {
+    height: auto;
+    display: block;
+  }
+  #cssmenu > ul > li {
+    float: none;
+  }
+  #cssmenu li,
+  #cssmenu > ul > li {
+    display: none;
+  }
+  #cssmenu ul ul,
+  #cssmenu ul ul ul,
+  #cssmenu ul > li:hover > ul,
+  #cssmenu ul ul > li:hover > ul {
+    position: relative;
+    left: auto;
+    top: auto;
+    opacity: 1;
+    padding-left: 0;
+  }
+  #cssmenu ul .has-sub::after {
+    display: none;
+  }
+  #cssmenu ul li a {
+    padding: 12px 20px;
+  }
+  #cssmenu ul ul li a {
+    border: 0;
+    background: none;
+    width: auto;
+    padding: 8px 35px;
+  }
+  #cssmenu ul ul li:hover > a {
+    background: none;
+    color: #8c9195;
+  }
+  #cssmenu ul ul ul a {
+    padding: 8px 50px;
+  }
+  #cssmenu ul ul ul ul a {
+    padding: 8px 65px;
+  }
+  #cssmenu ul ul ul ul ul a {
+    padding: 8px 80px;
+  }
+  #cssmenu ul ul ul ul ul ul a {
+    padding: 8px 95px;
+  }
+  #cssmenu > ul > #menu-button {
+    display: block;
+    cursor: pointer;
+  }
+  #cssmenu #menu-button > a {
+    padding: 14px 20px;
+  }
+  #cssmenu ul.open li,
+  #cssmenu > ul.open > li {
+    display: block;
+  }
+  #cssmenu > ul.open > li#menu-button > a {
+    color: #fff;
+    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
+  }
+  #cssmenu #menu-button::after {
+    display: block;
+    content: '';
+    position: absolute;
+    height: 3px;
+    width: 22px;
+    border-top: 2px solid #7a8189;
+    border-bottom: 2px solid #7a8189;
+    right: 20px;
+    top: 15px;
+  }
+  #cssmenu #menu-button::before {
+    display: block;
+    content: '';
+    position: absolute;
+    height: 3px;
+    width: 22px;
+    border-top: 2px solid #7a8189;
+    right: 20px;
+    top: 25px;
+  }
+  #cssmenu ul.open #menu-button::after,
+  #cssmenu ul.open #menu-button::before {
+    border-color: #fff;
+  }
+}
+
+#mineralMenu {
+  position: relative;
+  height: 44px;
+  background: #CCCCCC;
+  width: auto;
+}
+#mineralMenu ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1;
+}
+#mineralMenu > ul {
+  position: relative;
+  display: block;
+  background: #CCCCCC;
+  height: 32px;
+  width: 100%;
+  z-index: 500;
+}
+#mineralMenu > ul > li {
+  display: block;
+  position: relative;
+  float: left;
+  margin: 0;
+  padding: 0;
+}
+/*CUSTOM CLASS TEST*/
+#mineralMenu > ul > li.mainitem {
+  width: 100%;
+}
+#mineralMenu > ul > #menu-button {
+  display: none;
+}
+#mineralMenu ul li a {
+  display: block;
+  font-family: 'quicksandbold', Helvetica, sans-serif;
+  text-decoration: none;
+}
+#mineralMenu > ul > li > a {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 15px 20px;
+  color: #7a8189;
+  text-transform: uppercase;
+  -webkit-transition: color 0.25s ease-out;
+  -moz-transition: color 0.25s ease-out;
+  -ms-transition: color 0.25s ease-out;
+  -o-transition: color 0.25s ease-out;
+  transition: color 0.25s ease-out;
+}
+#mineralMenu > ul > li.has-sub > a {
+  padding-right: 32px;
+}
+#mineralMenu > ul > li:hover > a {
+  color: #ffffff;
+}
+#mineralMenu li.has-sub::after {
+  display: block;
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+#mineralMenu > ul > li.has-sub::after {
+  right: 10px;
+  top: 20px;
+  border: 5px solid transparent;
+  border-top-color: #7a8189;
+}
+#mineralMenu > ul > li:hover::after {
+  border-top-color: #ffffff;
+}
+#indicatorContainer {
+  position: absolute;
+  height: 12px;
+  width: 100%;
+  bottom: 0px;
+  overflow: hidden;
+  z-index: -1;
+}
+#pIndicator {
+  position: absolute;
+  height: 0;
+  width: 100%;
+  border: 12px solid transparent;
+  border-top-color: #2b2f3a;
+  z-index: -2;
+  -webkit-transition: left .25s ease;
+  -moz-transition: left .25s ease;
+  -ms-transition: left .25s ease;
+  -o-transition: left .25s ease;
+  transition: left .25s ease;
+}
+#cIndicator {
+  position: absolute;
+  height: 0;
+  width: 100%;
+  border: 12px solid transparent;
+  border-top-color: #2b2f3a;
+  top: -12px;
+  right: 100%;
+  z-index: -2;
+}
+#mineralMenu ul ul {
+  position: absolute;
+  left: -9999px;
+  top: 70px;
+  opacity: 0;
+  -webkit-transition: opacity .3s ease, top .25s ease;
+  -moz-transition: opacity .3s ease, top .25s ease;
+  -ms-transition: opacity .3s ease, top .25s ease;
+  -o-transition: opacity .3s ease, top .25s ease;
+  transition: opacity .3s ease, top .25s ease;
+  z-index: 1000;
+}
+#mineralMenu ul ul ul {
+  top: 37px;
+  padding-left: 5px;
+}
+#mineralMenu ul ul li {
+  position: relative;
+}
+#mineralMenu > ul > li:hover > ul {
+  left: auto;
+  top: 44px;
+  opacity: 1;
+}
+#mineralMenu ul ul li:hover > ul {
+  left: 170px;
+  top: 0;
+  opacity: 1;
+}
+#mineralMenu ul ul li a {
+  width: 130px;
+  border-bottom: 1px solid #eee;
+  padding: 10px 20px;
+  font-size: 10px;
+  color: #9ea2a5;
+  background: #fff;
+  -webkit-transition: all .35s ease;
+  -moz-transition: all .35s ease;
+  -ms-transition: all .35s ease;
+  -o-transition: all .35s ease;
+  transition: all .35s ease;
+}
+#mineralMenu ul ul li:hover > a {
+  background: #f6f6f6;
+  color: #8c9195;
+}
+#mineralMenu ul ul li:last-child > a,
+#mineralMenu ul ul li.last > a {
+  border-bottom: 0;
+}
+.submenuArrow {
+  border: 6px solid transparent;
+  width: 0;
+  height: 0;
+  border-bottom-color: #fff;
+  position: absolute;
+  top: -12px;
+}
+#mineralMenu ul ul li.has-sub::after {
+  border: 4px solid transparent;
+  border-left-color: #9ea2a5;
+  right: 10px;
+  top: 12px;
+  -moz-transition: all .2s ease;
+  -ms-transition: all .2s ease;
+  -o-transition: all .2s ease;
+  transition: all .2s ease;
+  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
+}
+#mineralMenu ul ul li.has-sub:hover::after {
+  border-left-color: #fff;
+  right: -5px;
+  -webkit-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+  #mineralMenu {
+    width: auto;
+  }
+  #mineralMenu ul {
+    width: auto;
+  }
+  #mineralMenu .submenuArrow,
+  #mineralMenu #indicatorContainer {
+    display: none;
+  }
+  #mineralMenu > ul {
+    height: auto;
+    display: block;
+  }
+  #mineralMenu > ul > li {
+    float: none;
+  }
+  #mineralMenu li,
+  #mineralMenu > ul > li {
+    display: none;
+  }
+  #mineralMenu ul ul,
+  #mineralMenu ul ul ul,
+  #mineralMenu ul > li:hover > ul,
+  #mineralMenu ul ul > li:hover > ul {
+    position: relative;
+    left: auto;
+    top: auto;
+    opacity: 1;
+    padding-left: 0;
+  }
+  #mineralMenu ul .has-sub::after {
+    display: none;
+  }
+  #mineralMenu ul li a {
+    padding: 12px 20px;
+  }
+  #mineralMenu ul ul li a {
+    border: 0;
+    background: none;
+    width: auto;
+    padding: 8px 35px;
+  }
+  #mineralMenu ul ul li:hover > a {
+    background: none;
+    color: #8c9195;
+  }
+  #mineralMenu ul ul ul a {
+    padding: 8px 50px;
+  }
+  #mineralMenu ul ul ul ul a {
+    padding: 8px 65px;
+  }
+  #mineralMenu ul ul ul ul ul a {
+    padding: 8px 80px;
+  }
+  #mineralMenu ul ul ul ul ul ul a {
+    padding: 8px 95px;
+  }
+  #mineralMenu > ul > #menu-button {
+    display: block;
+    cursor: pointer;
+  }
+  #mineralMenu #menu-button > a {
+    padding: 14px 20px;
+  }
+  #mineralMenu ul.open li,
+  #mineralMenu > ul.open > li {
+    display: block;
+  }
+  #mineralMenu > ul.open > li#menu-button > a {
+    color: #fff;
+    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
+  }
+  #mineralMenu #menu-button::after {
+    display: block;
+    content: '';
+    position: absolute;
+    height: 3px;
+    width: 22px;
+    border-top: 2px solid #7a8189;
+    border-bottom: 2px solid #7a8189;
+    right: 20px;
+    top: 15px;
+  }
+  #mineralMenu #menu-button::before {
+    display: block;
+    content: '';
+    position: absolute;
+    height: 3px;
+    width: 22px;
+    border-top: 2px solid #7a8189;
+    /*right: 20px;
+    top: 25px;*/
+  }
+  #mineralMenu ul.open #menu-button::after,
+  #mineralMenu ul.open #menu-button::before {
+    border-color: #fff;
+  }
+}
+

three_d_viewer/js/jquery.min.js

@@ -0,0 +1,6 @@
+/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
+//@ sourceMappingURL=jquery.min.map
+*/
+(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,l=e.jQuery,u=e.$,c={},p=[],f="1.10.2",d=p.concat,h=p.push,g=p.slice,m=p.indexOf,y=c.toString,v=c.hasOwnProperty,b=f.trim,x=function(e,t){return new x.fn.init(e,t,r)},w=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,T=/\S+/g,C=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,N=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,k=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,E=/^[\],:{}\s]*$/,S=/(?:^|:|,)(?:\s*\[)+/g,A=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,j=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,D=/^-ms-/,L=/-([\da-z])/gi,H=function(e,t){return t.toUpperCase()},q=function(e){(a.addEventListener||"load"===e.type||"complete"===a.readyState)&&(_(),x.ready())},_=function(){a.addEventListener?(a.removeEventListener("DOMContentLoaded",q,!1),e.removeEventListener("load",q,!1)):(a.detachEvent("onreadystatechange",q),e.detachEvent("onload",q))};x.fn=x.prototype={jquery:f,constructor:x,init:function(e,n,r){var i,o;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof x?n[0]:n,x.merge(this,x.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:a,!0)),k.test(i[1])&&x.isPlainObject(n))for(i in n)x.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(o=a.getElementById(i[2]),o&&o.parentNode){if(o.id!==i[2])return r.find(e);this.length=1,this[0]=o}return this.context=a,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):x.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),x.makeArray(e,this))},selector:"",length:0,toArray:function(){return g.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=x.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return x.each(this,e,t)},ready:function(e){return x.ready.promise().done(e),this},slice:function(){return this.pushStack(g.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(x.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:h,sort:[].sort,splice:[].splice},x.fn.init.prototype=x.fn,x.extend=x.fn.extend=function(){var e,n,r,i,o,a,s=arguments[0]||{},l=1,u=arguments.length,c=!1;for("boolean"==typeof s&&(c=s,s=arguments[1]||{},l=2),"object"==typeof s||x.isFunction(s)||(s={}),u===l&&(s=this,--l);u>l;l++)if(null!=(o=arguments[l]))for(i in o)e=s[i],r=o[i],s!==r&&(c&&r&&(x.isPlainObject(r)||(n=x.isArray(r)))?(n?(n=!1,a=e&&x.isArray(e)?e:[]):a=e&&x.isPlainObject(e)?e:{},s[i]=x.extend(c,a,r)):r!==t&&(s[i]=r));return s},x.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),noConflict:function(t){return e.$===x&&(e.$=u),t&&e.jQuery===x&&(e.jQuery=l),x},isReady:!1,readyWait:1,holdReady:function(e){e?x.readyWait++:x.ready(!0)},ready:function(e){if(e===!0?!--x.readyWait:!x.isReady){if(!a.body)return setTimeout(x.ready);x.isReady=!0,e!==!0&&--x.readyWait>0||(n.resolveWith(a,[x]),x.fn.trigger&&x(a).trigger("ready").off("ready"))}},isFunction:function(e){return"function"===x.type(e)},isArray:Array.isArray||function(e){return"array"===x.type(e)},isWindow:function(e){return null!=e&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?c[y.call(e)]||"object":typeof e},isPlainObject:function(e){var n;if(!e||"object"!==x.type(e)||e.nodeType||x.isWindow(e))return!1;try{if(e.constructor&&!v.call(e,"constructor")&&!v.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(r){return!1}if(x.support.ownLast)for(n in e)return v.call(e,n);for(n in e);return n===t||v.call(e,n)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||a;var r=k.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=x.buildFragment([e],t,i),i&&x(i).remove(),x.merge([],r.childNodes))},parseJSON:function(n){return e.JSON&&e.JSON.parse?e.JSON.parse(n):null===n?n:"string"==typeof n&&(n=x.trim(n),n&&E.test(n.replace(A,"@").replace(j,"]").replace(S,"")))?Function("return "+n)():(x.error("Invalid JSON: "+n),t)},parseXML:function(n){var r,i;if(!n||"string"!=typeof n)return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(o){r=t}return r&&r.documentElement&&!r.getElementsByTagName("parsererror").length||x.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&x.trim(t)&&(e.execScript||function(t){e.eval.call(eLine truncated
+}({});var B=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,P=/([A-Z])/g;function R(e,n,r,i){if(x.acceptData(e)){var o,a,s=x.expando,l=e.nodeType,u=l?x.cache:e,c=l?e[s]:e[s]&&s;if(c&&u[c]&&(i||u[c].data)||r!==t||"string"!=typeof n)return c||(c=l?e[s]=p.pop()||x.guid++:s),u[c]||(u[c]=l?{}:{toJSON:x.noop}),("object"==typeof n||"function"==typeof n)&&(i?u[c]=x.extend(u[c],n):u[c].data=x.extend(u[c].data,n)),a=u[c],i||(a.data||(a.data={}),a=a.data),r!==t&&(a[x.camelCase(n)]=r),"string"==typeof n?(o=a[n],null==o&&(o=a[x.camelCase(n)])):o=a,o}}function W(e,t,n){if(x.acceptData(e)){var r,i,o=e.nodeType,a=o?x.cache:e,s=o?e[x.expando]:x.expando;if(a[s]){if(t&&(r=n?a[s]:a[s].data)){x.isArray(t)?t=t.concat(x.map(t,x.camelCase)):t in r?t=[t]:(t=x.camelCase(t),t=t in r?[t]:t.split(" ")),i=t.length;while(i--)delete r[t[i]];if(n?!I(r):!x.isEmptyObject(r))return}(n||(delete a[s].data,I(a[s])))&&(o?x.cleanData([e],!0):x.support.deleteExpando||a!=a.window?delete a[s]:a[s]=null)}}}x.extend({cache:{},noData:{applet:!0,embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"},hasData:function(e){return e=e.nodeType?x.cache[e[x.expando]]:e[x.expando],!!e&&!I(e)},data:function(e,t,n){return R(e,t,n)},removeData:function(e,t){return W(e,t)},_data:function(e,t,n){return R(e,t,n,!0)},_removeData:function(e,t){return W(e,t,!0)},acceptData:function(e){if(e.nodeType&&1!==e.nodeType&&9!==e.nodeType)return!1;var t=e.nodeName&&x.noData[e.nodeName.toLowerCase()];return!t||t!==!0&&e.getAttribute("classid")===t}}),x.fn.extend({data:function(e,n){var r,i,o=null,a=0,s=this[0];if(e===t){if(this.length&&(o=x.data(s),1===s.nodeType&&!x._data(s,"parsedAttrs"))){for(r=s.attributes;r.length>a;a++)i=r[a].name,0===i.indexOf("data-")&&(i=x.camelCase(i.slice(5)),$(s,i,o[i]));x._data(s,"parsedAttrs",!0)}return o}return"object"==typeof e?this.each(function(){x.data(this,e)}):arguments.length>1?this.each(function(){x.data(this,e,n)}):s?$(s,e,x.data(s,e)):null},removeData:function(e){return this.each(function(){x.removeData(this,e)})}});function $(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(P,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:B.test(r)?x.parseJSON(r):r}catch(o){}x.data(e,n,r)}else r=t}return r}function I(e){var t;for(t in e)if(("data"!==t||!x.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}x.extend({queue:function(e,n,r){var i;return e?(n=(n||"fx")+"queue",i=x._data(e,n),r&&(!i||x.isArray(r)?i=x._data(e,n,x.makeArray(r)):i.push(r)),i||[]):t},dequeue:function(e,t){t=t||"fx";var n=x.queue(e,t),r=n.length,i=n.shift(),o=x._queueHooks(e,t),a=function(){x.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return x._data(e,n)||x._data(e,n,{empty:x.Callbacks("once memory").add(function(){x._removeData(e,t+"queue"),x._removeData(e,n)})})}}),x.fn.extend({queue:function(e,n){var r=2;return"string"!=typeof e&&(n=e,e="fx",r--),r>arguments.length?x.queue(this[0],e):n===t?this:this.each(function(){var t=x.queue(this,e,n);x._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&x.dequeue(this,e)})},dequeue:function(e){return this.each(function(){x.dequeue(this,e)})},delay:function(e,t){return e=x.fx?x.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,n){var r,i=1,o=x.Deferred(),a=this,s=this.length,l=function(){--i||o.resolveWith(a,[a])};"string"!=typeof e&&(n=e,e=t),e=e||"fx";while(s--)r=x._data(a[s],e+"queueHooks"),r&&r.empty&&(i++,r.empty.add(l));return l(),o.promise(n)}});var z,X,U=/[\t\r\n\f]/g,V=/\r/g,Y=/^(?:input|select|textarea|button|object)$/i,J=/^(?:a|area)$/i,G=/^(?:checked|selected)$/i,Q=x.support.getSetAttribute,K=x.support.input;x.fn.extend({attr:function(e,t){return x.access(this,x.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){x.removeAttr(this,e)})},prop:function(e,t){return x.access(this,x.prop,e,t,arguments.length>1)},removeProp:function(e){return e=x.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,o,a=0,s=this.length,l="string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).addClass(e.call(this,t,this.className))});if(l)for(t=(e||"").match(T)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(U," "):" ")){o=0;while(i=t[o++])0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=x.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,a=0,s=this.length,l=0===arguments.length||"string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).removeClass(e.call(this,t,this.className))});if(l)for(t=(e||"").match(T)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(U," "):"")){o=0;while(i=t[o++])whilLine truncated
+u[o]&&(delete u[o],c?delete n[l]:typeof n.removeAttribute!==i?n.removeAttribute(l):n[l]=null,p.push(o))}},_evalUrl:function(e){return x.ajax({url:e,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})}}),x.fn.extend({wrapAll:function(e){if(x.isFunction(e))return this.each(function(t){x(this).wrapAll(e.call(this,t))});if(this[0]){var t=x(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&1===e.firstChild.nodeType)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return x.isFunction(e)?this.each(function(t){x(this).wrapInner(e.call(this,t))}):this.each(function(){var t=x(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=x.isFunction(e);return this.each(function(n){x(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){x.nodeName(this,"body")||x(this).replaceWith(this.childNodes)}).end()}});var Pt,Rt,Wt,$t=/alpha\([^)]*\)/i,It=/opacity\s*=\s*([^)]*)/,zt=/^(top|right|bottom|left)$/,Xt=/^(none|table(?!-c[ea]).+)/,Ut=/^margin/,Vt=RegExp("^("+w+")(.*)$","i"),Yt=RegExp("^("+w+")(?!px)[a-z%]+$","i"),Jt=RegExp("^([+-])=("+w+")","i"),Gt={BODY:"block"},Qt={position:"absolute",visibility:"hidden",display:"block"},Kt={letterSpacing:0,fontWeight:400},Zt=["Top","Right","Bottom","Left"],en=["Webkit","O","Moz","ms"];function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--)if(t=en[i]+n,t in e)return t;return r}function nn(e,t){return e=t||e,"none"===x.css(e,"display")||!x.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,o=[],a=0,s=e.length;for(;s>a;a++)r=e[a],r.style&&(o[a]=x._data(r,"olddisplay"),n=r.style.display,t?(o[a]||"none"!==n||(r.style.display=""),""===r.style.display&&nn(r)&&(o[a]=x._data(r,"olddisplay",ln(r.nodeName)))):o[a]||(i=nn(r),(n&&"none"!==n||!i)&&x._data(r,"olddisplay",i?n:x.css(r,"display"))));for(a=0;s>a;a++)r=e[a],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[a]||"":"none"));return e}x.fn.extend({css:function(e,n){return x.access(this,function(e,n,r){var i,o,a={},s=0;if(x.isArray(n)){for(o=Rt(e),i=n.length;i>s;s++)a[n[s]]=x.css(e,n[s],!1,o);return a}return r!==t?x.style(e,n,r):x.css(e,n)},e,n,arguments.length>1)},show:function(){return rn(this,!0)},hide:function(){return rn(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){nn(this)?x(this).show():x(this).hide()})}}),x.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Wt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":x.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var o,a,s,l=x.camelCase(n),u=e.style;if(n=x.cssProps[l]||(x.cssProps[l]=tn(u,l)),s=x.cssHooks[n]||x.cssHooks[l],r===t)return s&&"get"in s&&(o=s.get(e,!1,i))!==t?o:u[n];if(a=typeof r,"string"===a&&(o=Jt.exec(r))&&(r=(o[1]+1)*o[2]+parseFloat(x.css(e,n)),a="number"),!(null==r||"number"===a&&isNaN(r)||("number"!==a||x.cssNumber[l]||(r+="px"),x.support.clearCloneStyle||""!==r||0!==n.indexOf("background")||(u[n]="inherit"),s&&"set"in s&&(r=s.set(e,r,i))===t)))try{u[n]=r}catch(c){}}},css:function(e,n,r,i){var o,a,s,l=x.camelCase(n);return n=x.cssProps[l]||(x.cssProps[l]=tn(e.style,l)),s=x.cssHooks[n]||x.cssHooks[l],s&&"get"in s&&(a=s.get(e,!0,r)),a===t&&(a=Wt(e,n,i)),"normal"===a&&n in Kt&&(a=Kt[n]),""===r||r?(o=parseFloat(a),r===!0||x.isNumeric(o)?o||0:a):a}}),e.getComputedStyle?(Rt=function(t){return e.getComputedStyle(t,null)},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),l=s?s.getPropertyValue(n)||s[n]:t,u=e.style;return s&&(""!==l||x.contains(e.ownerDocument,e)||(l=x.style(e,n)),Yt.test(l)&&Ut.test(n)&&(i=u.width,o=u.minWidth,a=u.maxWidth,u.minWidth=u.maxWidth=u.width=l,l=s.width,u.width=i,u.minWidth=o,u.maxWidth=a)),l}):a.documentElement.currentStyle&&(Rt=function(e){return e.currentStyle},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),l=s?s[n]:t,u=e.style;return null==l&&u&&u[n]&&(l=u[n]),Yt.test(l)&&!zt.test(n)&&(i=u.left,o=e.runtimeStyle,a=o&&o.left,a&&(o.left=e.currentStyle.left),u.left="fontSize"===n?"1em":l,l=u.pixelLeft+"px",u.left=i,a&&(o.left=a)),""===l?"auto":l});function on(e,t,n){var r=Vt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function an(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;for(;4>o;o+=2)"margin"===n&&(a+=x.css(e,n+Zt[o],!0,i)),r?("content"===n&&(a-=x.css(e,"padding"+Zt[o],!0,i)),"margin"!==n&&(a-=x.css(e,"border"+Zt[o]+"Width",!0,i))):(a+=x.css(e,"padding"+Zt[o],!0,i),"padding"!==n&&(a+=x.css(e,"border"+Zt[o]+"Width",!0,i)));return a}function sn(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=Rt(e),a=x.support.boxSizing&&"border-box"===x.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=Wt(e,t,o),(0>i||null==i)&&(iLine truncated

three_d_viewer/js/menu_jquery.js

@@ -0,0 +1,58 @@
+$( document ).ready(function() {
+$('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
+    var activeElement = $('#cssmenu>ul>li:first');
+
+    $('#cssmenu>ul>li').each(function() {
+        if ($(this).hasClass('active')) {
+            activeElement = $(this);
+        }
+    });
+
+
+	var posLeft = activeElement.position().left;
+	var elementWidth = activeElement.width();
+	posLeft = posLeft + elementWidth/2 -6;
+	if (activeElement.hasClass('has-sub')) {
+		posLeft -= 6;
+	}
+
+	$('#cssmenu #pIndicator').css('left', posLeft);
+	var element, leftPos, indicator = $('#cssmenu pIndicator');
+	
+	$("#cssmenu>ul>li").hover(function() {
+        element = $(this);
+        var w = element.width();
+        if ($(this).hasClass('has-sub'))
+        {
+        	leftPos = element.position().left + w/2 - 12;
+        }
+        else {
+        	leftPos = element.position().left + w/2 - 6;
+        }
+
+        $('#cssmenu #pIndicator').css('left', leftPos);
+    }
+    , function() {
+    	$('#cssmenu #pIndicator').css('left', posLeft);
+    });
+
+
+	$('#cssmenu>ul>.has-sub>ul').append('<div class="submenuArrow"></div>');
+	$('#cssmenu>ul').children('.has-sub').each(function() {
+		var posLeftArrow = $(this).width();
+		posLeftArrow /= 2;
+		posLeftArrow -= 12;
+		$(this).find('.submenuArrow').css('left', posLeftArrow);
+
+	});
+
+	$('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
+	$( "#menu-button" ).click(function(){
+    		if ($(this).parent().hasClass('open')) {
+    			$(this).parent().removeClass('open');
+    		}
+    		else {
+    			$(this).parent().addClass('open');
+    		}
+    	});
+});

three_d_viewer/static/three_d_viewer/css/styles.css

@@ -208,6 +208,11 @@ body {
 	padding-top: 5%;
 }
 
+#logoimage{
+	width: auto;
+	height: 44px;
+}
+
 #menuContainer {
 	width: 80%;
 	height: auto;

three_d_viewer/templates/three_d_viewer/base.html

@@ -18,7 +18,7 @@
 <div id="container">
 	<div id="header">
         <div id="logo">
-        <p>3D VOL</p>
+		<img src={% static "three_d_viewer/images/logo2.png" %}>
         </div><!-- CLOSE LOGO !-->
     	<div id="menuContainer">
             <div id='cssmenu'>

three_d_viewer/templates/three_d_viewer/minerals_theory.html

@@ -1,25 +1,55 @@
 {% extends "three_d_viewer/base.html" %}
+{% load static %}
 
 {% block content %}
     <div id="pushDownTwo"></div>
     	<div id="mainText">
         <h1 class="subHeadings">Theory</h1>
-        <p>Text about the theory section</p>
         <h2 class="theoryHeadings" id="structureofearth">Structure of Earth</h2>
-        <p>Line of placeholder text</p>
+        <p>
-        <p>Line of placeholder text</p>
+	The Earth's structure is differentiated in three distinct layers: the core, mantle, and crust. The layers are distinguished by a change in the velocity of seismic waves at their boundaries. 
-        <p>Line of placeholder text</p>
+	The crust is the upper most part of the earth, with depths ranging from an average of 7km in in the oceans, to an average of 38km in continental crust. 
-        <p>Line of placeholder text</p>
+	The crust thickens underneath mountain ranges, and can reach depths of 90km underneath the Himalayas. The composition of the crust also differs between oceanic and 
-        <p>Line of placeholder text</p>
+	continental environments. Ocean crust is young mafic crust dominated by basalts and gabbros that is recycled regularly(~300Ma) due to subduction processes. 
-        <p>Line of placeholder text</p>
+	Continental crust is much more varied in structure and composition than oceanic, but has an overall average composition of granodiorite. 
-        <p>Line of placeholder text</p>
+	<br /><br />
-        <p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p>
+	The boundary of the crust and mantle is defined by the Mohorovi?i? discontinuity, commonly referred to as the Moho. 
+	It is defined by a sharp increase in seismic wave velocity, due to a change in material properties between crustal rocks and mantle rocks. The mantle is dominated by 
+	silicate minerals that are rich in iron and magnesium, chiefly pyroxenes and polymorphs of olivine, forming peridotite. The mantle, while solid, behaves plastically, 
+	allowing to flow at very slow rates.
+	<br /><br />
+	The core is distinguished by the absence of S waves, leading to the inference that the core is liquid. The core is separated into the outer core and the inner core. 
+	The outer core is liquid dominated by iron and nickel. The inner core is solid, as determined by the strong refraction of P waves at the inner core-outer core boundary, 
+	and was formed by crystalizing minerals from the liquid part of the core as the Earth cools. 
+	<br /><br />
+	The crust and mantle are also further distinguished by material properties into the lithosphere, asthenosphere, and mesosphere. The chemical composition is 
+	uniform throughout the mantle though, but changes in pressure and temperature determine which polymorphs will exist at different depths. 
+	The lithosphere contains the crust, and the upper part of the mantle down to ~100km under oceanic crust, and 200-300km under continental crust (Twiss & Moores, 2007). 
+	The lithosphere-asthenosphere boundary is defined by the 1300K isotherm, which is the temperature where olivine starts to behave viscously.  
+	The rocks in the mesosphere are under more pressure than those in the asthenosphere, so no longer behave viscously.
+	<figure>
+		<img src="{% static "three_d_viewer/images/bowen.png" %}">
+		<figcaption>Image sourced from <a href="http://pubs.usgs.gov/gip/dynamic/graphics/FigS1-1.gif">USGS</a>.</figcaption>
+	<figure>
+	</p>
 	<h2 class="theoryHeadings" id="pressureandtemp">Pressure and temperature</h2>
-        <p>Line of placeholder text</p>
+        <p>
-        <p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p>
+	</p>
         <h2 class="theoryHeadings" id="bowensreactionseries">Bowen's reaction series</h2>
-        <p>Line of placeholder text</p>
+        <p>
-        <p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p><p>Line of placeholder text</p>
+	Bowen's Reaction Series arranges the silicate minerals in the order that they crystallise from a magma. The minerals at the top of the series crystallise from the melt at higher temperature than those 
+	lower down. It contains a continuous series, (right hand limb), discontinuous series (left hand limb), and the residual phases that describe the reaction pathway of different silicate minerals. 
+	The discontinuous series crystallises different minerals, with abrupt changes separating the different minerals due to a mineral reacting with the melt to form a different mineral (eg. Olivine reacting to crystallise pyroxene). 
+	The continuous series always crystallises plagioclase,  but the composition of the plagioclase varies from more calcic at higher temperatures and more sodic as the temperature decreases. 
+	with the minerals at the bottom of the series being more stable, and less susceptible to weathering. 
+	The residual phases are the minerals at the bottom and crystallise last. Bowen's reaction series also predicts the stability of minerals in the low pressure conditions at the Earth's surface, 
+	<br /><br />
+	It should be noted that all reactions do not start crystallising olivine/anorthite-rich plagioclase and continue through until they crystallise quartz. 
+	The actual reactions depend on many factors, such as the chemical composition of the melt, temperature, pressure, and amount of fractional crystallisation. 
+	For example, basalts form from the crystallisation of olivine, pyroxene and calcic plagioclase meaning that crystallisation stopped without the series progressing. 
+	If more fractional crystallisation were to occur, more intermediate and felsic minerals can crystallise.
+	<img src="{% static "three_d_viewer/images/bowen.png" %}">
+	</p>
         <div id="pushDownThree"></div>
         </div>
 {% endblock %}