diff --git a/css/bg.css b/css/bg.css
new file mode 100644
index 0000000..e2fd42a
--- /dev/null
+++ b/css/bg.css
@@ -0,0 +1,95 @@
+/* Portrait */
+@media screen and (orientation:portrait) {
+ #landscape {
+ display: none;
+ }
+ #portrait {
+ display: block;
+ }
+}
+/* Landscape */
+@media screen and (orientation:landscape) {
+ #landscape {
+ display: block;
+ }
+ #portrait {
+ display: none;
+ }
+}
+
+.uiButtonsContainer {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 1024px;
+ min-height: 500px;
+ max-height: 768px;
+ height: 100%;
+ /* height: 768px;*/
+}
+.uiButtonsContainer:before {
+ content:' ';
+ display:block;
+ position:absolute;
+ left:0;
+ top:0;
+ right:0;
+ bottom:0;
+ border: 2px solid #333;
+}
+
+#d3dlogo {
+ position: absolute;
+ top: 15px;
+ left: 31%;
+ width: 399px;
+ height: 139px;
+ background-image: url('../img/logo_full.png');
+ cursor: pointer;
+}
+
+.bgTop {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ z-index: -5;
+}
+.bgMiddle {
+ display: block;
+ position: absolute;
+ top: 30%;
+ left: 0px;
+ z-index: -5;
+}
+.bgBottom {
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ z-index: -5;
+}
+
+/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
+
+@media screen and (max-height: 675px) {
+ .bgMiddle {
+ display: none;
+ }
+ #d3dlogo {
+ width: 399px;
+ height: 74px;
+ background-image: url('../img/logo_small.png');
+ margin-top: 9px;
+ }
+}
+
+@media screen and (max-height: 560px) {
+ #d3dlogo {
+ width: 399px;
+ height: 57px;
+ background-image: url('../img/logo_smaller_wide.png');
+ margin-top: 14px;
+ }
+}
+
+
+
diff --git a/css/main.css b/css/main.css
index 569ca6a..f8dc4b9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,7 +1,44 @@
+a {
+ color: #5491D2;
+ text-decoration: none;
+}
#preloader {
position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ top: 50%;
+ left: 50%;
+ width: 50px;
+ height: 50px;
+ margin: -25px 0 0 -25px;
+}
+#list {
+ padding: 0;
+}
+#list li {
+ list-style-type: none;
+ float: left;
+}
+#list a {
+ margin: 0 15px 15px 0;
+ padding: 25px 0 0 0;
+ display: block;
+
+ width: 200px;
+ height: 175px;
+
+ border: 2px solid #333;
+ border-radius: 25px;
+
+ -moz-box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60);
+ -webkit-box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60);
+ box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60);
+
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+
+ transition:background-color 0.1s, color 0.1s;
+}
+#list a:hover {
+ background-color: #5491D2;
+ color: #fff;
}
\ No newline at end of file
diff --git a/css/popups.css b/css/popups.css
new file mode 100644
index 0000000..3421112
--- /dev/null
+++ b/css/popups.css
@@ -0,0 +1,34 @@
+#contentOverlay {
+ background-color: rgba(255, 255, 255, 0.65);
+ z-index: 10;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 1024px;
+ height: 100%;
+}
+
+.popup {
+ background-color: #fff;
+ z-index: 15;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 835px;
+ height: 500px;
+ margin: -250px 0 0 -417.5px;
+
+ -moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+ -webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+ box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
+ border: 2px solid #222;
+ border-radius: 15px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+ overflow: hidden;
+}
+
+.popup .content {
+ margin: 0 1em;
+}
\ No newline at end of file
diff --git a/img/bg_bottom.png b/img/bg_bottom.png
new file mode 100644
index 0000000..17c1fd3
Binary files /dev/null and b/img/bg_bottom.png differ
diff --git a/img/bg_middle.png b/img/bg_middle.png
new file mode 100644
index 0000000..0fb448c
Binary files /dev/null and b/img/bg_middle.png differ
diff --git a/img/bg_top.png b/img/bg_top.png
new file mode 100644
index 0000000..5ab0088
Binary files /dev/null and b/img/bg_top.png differ
diff --git a/img/bg_vertical2.png b/img/bg_vertical2.png
new file mode 100644
index 0000000..3b0b4e0
Binary files /dev/null and b/img/bg_vertical2.png differ
diff --git a/img/logo_full.png b/img/logo_full.png
new file mode 100755
index 0000000..47415d8
Binary files /dev/null and b/img/logo_full.png differ
diff --git a/img/logo_small.png b/img/logo_small.png
new file mode 100644
index 0000000..1ea8163
Binary files /dev/null and b/img/logo_small.png differ
diff --git a/img/logo_smaller_wide.png b/img/logo_smaller_wide.png
new file mode 100644
index 0000000..25ae4c8
Binary files /dev/null and b/img/logo_smaller_wide.png differ
diff --git a/index.html b/index.html
index 589f095..ece242d 100644
--- a/index.html
+++ b/index.html
@@ -12,15 +12,42 @@
+
+
-
+
-
-
-
+
+
+
+
+
+ 
+ 
+
+