1 files changed, 193 insertions, 0 deletions
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 0000000..a21fc52
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,193 @@
+html, body {
+    font-family: sans-serif;
+    font-size: 90%;
+    margin: 0;
+    height: 100%;
+}
+
+body.videopage {
+    background: #181818;
+}
+
+#notfooter {
+    min-height: 100%;
+    height: auto !important;
+    height: 100%;
+    margin: 0 auto -5em;
+}
+
+#push {
+    height: 5em;
+    background: #3C3C3C;
+}
+
+header {
+    background: white;
+    margin: 0 auto 0 auto;
+    padding: 0.5em 10% 0em 10%;
+}
+
+header h1 {
+    display: inline;
+    font-size: 14pt;
+    color: #7bc043;
+}
+
+header h1 img {
+    vertical-align: middle;
+}
+
+header nav {
+    display: inline;
+    float: right;
+    margin-top: 2em;
+}
+
+nav ul {
+    list-style: none;
+	display: inline;
+	padding-left: 0;
+}
+
+nav ul li {
+	display: inline;
+	padding-right: 1em;
+}
+
+nav.primary a {
+    padding: 0.25em 0.5em 0.25em 0.5em;
+    text-decoration: none;
+    color: #BDBDBD;
+    font-weight: bold;
+}
+
+nav.primary a:hover {
+    color: #9ace00;
+}
+
+nav.primary a.current {
+    background: #A9A9A9;
+    color: white;
+    border: solid thin #A9A9A9;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+}
+
+#hero {
+    background: url('images/hero.png') #262626 no-repeat top center;
+    width: 100%;
+    color: white;
+    text-align: center;
+    padding: 250px 0 50px 0;
+}
+
+#hero p {
+    width: 75%;
+    margin: 0 auto 0 auto;
+}
+
+#middlebar {
+    background: #262626;
+    color: white;
+}
+
+#noticebox {
+    font-size: 90%;
+    padding: 1.5em 20% 1.5em 20%;
+    max-width: 700px;
+    margin: 0 auto 0 auto;
+}
+
+#noticebox img.icon {
+    float: left;
+    margin-right: 2em;
+}
+
+#noticebox .close {
+    float: right;
+}
+
+#content {
+    text-align: center;
+    color: #b0b0b0;
+    padding-bottom: 5em;
+    margin: 1em auto 1em auto;
+    max-width: 900px;
+}
+
+#content article {
+    max-width: 700px;
+    margin: 1em auto 1em auto;
+}
+
+#content h1 {
+    color: #696969;
+}
+
+#getstarted {
+    background: #F5F5F5;
+    padding: 3em;
+    text-align: center;
+    font-size: 150%;
+}
+
+a.greenbutton {
+    background: #bcea2f;
+    border: solid 2px #afdc29; 
+    color: white;
+    padding: 0.5em 1.5em 0.5em 1.5em;
+    text-decoration: none;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+}
+
+a.greenbutton:hover {
+    background: #b8e62e;
+}
+
+a img {
+    vertical-align: middle;
+}
+
+footer {
+    background: #3C3C3C;
+    color: #737373;
+    font-weight: bold;
+    font-size: 80%;
+    padding: 2em 20% 0 20%;
+    height: 3em;
+}
+
+footer .left {
+    float: left;
+}
+
+footer .right {
+    float: right;
+}
+
+footer a {
+    color: #ACACAC;
+    text-decoration: none;
+    margin: 0 0.25em 0 0.25em;
+}
+
+footer a:hover {
+    color: white;
+}
+
+#previous, #next {
+    margin-top: 25%;
+}
+
+#previous {
+    float: left;
+}
+
+#next {
+    float: right;
+}
+
+.imageQuestion img {
+    padding: 1em;
+}