- needed to position the dropdown content */
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+ position: absolute;
+ min-width: 160px;
+/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
+ z-index: 999;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+ text-decoration: none;
+ display: block;
+ z-index: 999;
+}
+
+/* Change color of dropdown links on hover */
+/* .dropdown-content a:hover {background-color: #f1f1f1} */
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+ background-color: #3e8e41;
+}
+
+.flexplot {
+ position: relative;
+ z-index: 10;
+}
+
+a.wh:link {
+ color: #e9e9e9;
+}
+
+a.wh:visited {
+ color: #e9e9e9;
+}
+
+a.wh:hover {
+ color: #e9e9e9;
+}
+
+
+.bk-canvas-map {
+ overflow: hidden;
+ }
+
+
+/* container */
+.container {
+ padding: 5% 5%;
+}
+
+/* CSS talk bubble */
+.talk-bubble {
+ margin: 40px;
+ display: inline-block;
+ position: relative;
+ width: 200px;
+ height: auto;
+ background-color: lightyellow;
+}
+.border{
+ border: 8px solid #666;
+}
+.round{
+ border-radius: 30px;
+ -webkit-border-radius: 30px;
+ -moz-border-radius: 30px;
+
+}
+
+/* Right triangle placed top left flush. */
+.tri-right.border.left-top:before {
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -40px;
+ right: auto;
+ top: -8px;
+ bottom: auto;
+ border: 32px solid;
+ border-color: #666 transparent transparent transparent;
+}
+.tri-right.left-top:after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -20px;
+ right: auto;
+ top: 0px;
+ bottom: auto;
+ border: 22px solid;
+ border-color: lightyellow transparent transparent transparent;
+}
+
+/* Right triangle, left side slightly down */
+.tri-right.border.left-in:before {
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -40px;
+ right: auto;
+ top: 30px;
+ bottom: auto;
+ border: 20px solid;
+ border-color: #666 #666 transparent transparent;
+}
+.tri-right.left-in:after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -20px;
+ right: auto;
+ top: 38px;
+ bottom: auto;
+ border: 12px solid;
+ border-color: lightyellow lightyellow transparent transparent;
+}
+
+/*Right triangle, placed bottom left side slightly in*/
+.tri-right.border.btm-left:before {
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -8px;
+ right: auto;
+ top: auto;
+ bottom: -40px;
+ border: 32px solid;
+ border-color: transparent transparent transparent #666;
+}
+.tri-right.btm-left:after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: 0px;
+ right: auto;
+ top: auto;
+ bottom: -20px;
+ border: 22px solid;
+ border-color: transparent transparent transparent lightyellow;
+}
+
+/*Right triangle, placed bottom left side slightly in*/
+.tri-right.border.btm-left-in:before {
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: 30px;
+ right: auto;
+ top: auto;
+ bottom: -40px;
+ border: 20px solid;
+ border-color: #666 transparent transparent #666;
+}
+.tri-right.btm-left-in:after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: 38px;
+ right: auto;
+ top: auto;
+ bottom: -20px;
+ border: 12px solid;
+ border-color: lightyellow transparent transparent lightyellow;
+}
+
+/*Right triangle, placed bottom right side slightly in*/
+.tri-right.border.btm-right-in:before {
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: auto;
+ right: 30px;
+ bottom: -40px;
+ border: 20px solid;
+ border-color: #666 #666 transparent transparent;
+}
+.tri-right.btm-right-in:after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: auto;
+ right: 38px;
+ bottom: -20px;
+ border: 12px solid;
+ border-color: lightyellow lightyellow transparent transparent;
+}
+/*
+ left: -8px;
+ right: auto;
+ top: auto;
+ bottom: -40px;
+ border: 32px solid;
+ border-color: transparent transparent transparent #666;
+ left: 0px;
+ right: auto;
+ top: auto;
+ bottom: -20px;
+ border: 22px solid;
+ border-color: transparent transparent transparent lightyellow;
+
+/*Right triangle, placed bottom right side slightly in*/
+.tri-right.border.btm-right:before {
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: auto;
+ right: -8px;
+ bottom: -40px;
+ border: 20px solid;
+ border-color: #666 #666 transparent transparent;
+}
+.tri-right.btm-right:after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: auto;
+ right: 0px;
+ bottom: -20px;
+ border: 12px solid;
+ border-color: lightyellow lightyellow transparent transparent;
+}
+
+/* Right triangle, right side slightly down*/
+.tri-right.border.right-in:before {
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: auto;
+ right: -40px;
+ top: 30px;
+ bottom: auto;
+ border: 20px solid;
+ border-color: #666 transparent transparent #666;
+}
+.tri-right.right-in:after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: auto;
+ right: -20px;
+ top: 38px;
+ bottom: auto;
+ border: 12px solid;
+ border-color: lightyellow transparent transparent lightyellow;
+}
+
+/* Right triangle placed top right flush. */
+.tri-right.border.right-top:before {
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: auto;
+ right: -40px;
+ top: -8px;
+ bottom: auto;
+ border: 32px solid;
+ border-color: #666 transparent transparent transparent;
+}
+.tri-right.right-top:after{
+ content: ' ';
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: auto;
+ right: -20px;
+ top: 0px;
+ bottom: auto;
+ border: 20px solid;
+ border-color: lightyellow transparent transparent transparent;
+}
+
+/* talk bubble contents */
+.talktext{
+ padding: 1em;
+ text-align: left;
+ line-height: 1.5em;
+ word-wrap: break-word;
+}
+.talktext p{
+ /* remove webkit p margins */
+ -webkit-margin-before: 0em;
+ -webkit-margin-after: 0em;
+}
+
+.drop-files {
+ border: 1px solid #000;
+ color: #000;
+
+}
+
+.wrapwords{
+ -ms-word-break: break-all;
+ word-break: break-all;
+
+ /* Non standard for webkit */
+ word-break: break-word;
+
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+
+}
+
+.icon-link a:hover, a:visited, a:link, a:active {
+ text-decoration: none;
+}
diff --git a/static/css/styles.css b/static/css/styles.css
new file mode 100644
index 00000000..8baf3fd4
--- /dev/null
+++ b/static/css/styles.css
@@ -0,0 +1,49 @@
+@media (min-width: 768px) {
+ .container {
+ display: grid;
+ grid-template-columns: 200px 1fr 200px;
+ grid-template-rows: auto 1fr auto;
+
+ }
+}
+
+header {
+ grid-column: span 3;
+ padding: 30px;
+ text-align: center;
+ font-size: 1.4em;
+ background-color: #369;
+ color: white;
+}
+
+main {
+ flex: 1;
+ padding: 20px;
+}
+
+nav {
+ background-color: #f90;
+ padding: 20px;
+ grid-template-columns: 2fr;
+ grid-template-rows: auto 1ft auto;
+}
+
+aside {
+ padding: 20px;
+ background-color: #936;
+}
+
+footer {
+ grid-column: span 3;
+ padding: 30px;
+ text-align: center;
+ font-size: 1.4em;
+ background-color: #690;
+ color: white;
+}
+
+h1 {
+ margin-bottom: 1em;
+ font-size: 1.3em;
+ font-weight: bold;
+}
diff --git a/static/css/styles2.css b/static/css/styles2.css
new file mode 100644
index 00000000..b40f6c95
--- /dev/null
+++ b/static/css/styles2.css
@@ -0,0 +1,111 @@
+* {box-sizing: border-box;}
+
+ .wrapper {
+ max-width: 1024px;
+ margin: 0 auto;
+ font: 1.2em Helvetica, arial, sans-serif;
+ }
+
+ .wrapper > * {
+ border: 2px solid #f08c00;
+ padding: 5px;
+ }
+
+ nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ header ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ aside ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ user ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+.main-head {
+ grid-area: header;
+}
+.main-user {
+ grid-area: user;
+}
+
+.content {
+ grid-area: content;
+}
+.main-nav {
+ grid-area: nav;
+}
+.side {
+ grid-area: sidebar;
+}
+.ad {
+ grid-area: ad;
+}
+.main-footer {
+ grid-area: footer;
+}
+.wrapper {
+ display: grid;
+ grid-gap: 2px;
+ grid-template-areas:
+ "header"
+ "user"
+ "nav"
+ "content"
+ "sidebar"
+ "ad"
+ "footer";
+}
+
+
+@media (min-width: 750px) {
+ .wrapper {
+ grid-template-columns: 1fr 3fr;
+ grid-template-areas:
+ "header header"
+ "user user"
+ "nav nav"
+ "sidebar content"
+ "ad footer";
+ }
+ nav ul {
+ display: flex;
+ justify-content: space-between;
+ }
+ header ul {
+ display: flex;
+ justify-content: space-between;
+ }
+
+
+}
+@media (min-width: 800px) {
+ .wrapper {
+ grid-template-columns: 1fr 4fr 1fr;
+ grid-template-areas:
+ "header header user"
+ "nav content sidebar"
+ "nav content ad"
+ "footer footer footer"
+ }
+ nav ul {
+ flex-direction: column;
+ }
+ header ul {
+ flex-direction: row;
+ }
+
+}
diff --git a/static/css/text.css b/static/css/text.css
index eee176d9..6c0a5713 100644
--- a/static/css/text.css
+++ b/static/css/text.css
@@ -83,4 +83,4 @@ address,
fieldset,
figure {
margin-bottom: 20px;
-}
\ No newline at end of file
+}
diff --git a/static/css/text2.css b/static/css/text2.css
new file mode 100644
index 00000000..f0cda6b7
--- /dev/null
+++ b/static/css/text2.css
@@ -0,0 +1,153 @@
+/*
+ 960 Grid System ~ Text CSS.
+ Learn more ~ http://960.gs/
+
+ Licensed under GPL and MIT.
+*/
+
+/* `Basic HTML
+----------------------------------------------------------------------------------------------------*/
+
+body {
+ font: 1.3em/1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
+}
+
+pre,
+code {
+ font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;
+}
+
+hr {
+ border: 0 solid #ccc;
+ border-top-width: 0.1em;
+ clear: both;
+ height: 0;
+}
+
+/* `Headings
+----------------------------------------------------------------------------------------------------*/
+
+@media print {
+ h1 {
+ page-break-before: always;
+ page-break-after: avoid;
+ }
+
+ h3, h4 {
+ page-break-after: avoid;
+ }
+
+ pre, blockquote, table {
+ page-break-inside: avoid;
+ }
+
+}
+
+
+h1 {
+/* font-family: Georgia, serif; */
+ font-weight: normal;
+/* padding-top: 20px; */
+ text-align: left;
+ font-size: 2em;
+}
+
+h2 {
+ /* padding-top: 20px; */
+ font-weight: normal;
+ text-align: left;
+
+ font-size: 1.5em;
+}
+
+h3 {
+ /* padding-top: 20px; */
+ font-weight: normal;
+ text-align: left;
+ font-size: 1em;
+}
+
+h3 {
+ /* padding-top: 20px; */
+ font-weight: normal;
+ text-align: left;
+ font-size: 1em;
+}
+
+
+h4 {
+ font-size: 1em;
+}
+
+h5 {
+ font-size: 1em;
+}
+
+h6 {
+ font-size: 1em;
+}
+
+
+/* `Spacing
+----------------------------------------------------------------------------------------------------*/
+
+ol {
+ list-style: decimal;
+}
+
+ul {
+ list-style: disc;
+}
+
+li {
+ margin-left: 30px;
+}
+
+p,
+dl,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ol,
+ul,
+pre,
+table,
+address,
+fieldset,
+figure {
+ margin-bottom: 20px;
+}
+
+/* Links
+----------------------------------------------
+*/
+
+a {
+/* color: #fff; */
+ text-decoration: none;
+}
+
+
+a:visited { color:#000; }
+
+a:link { color: #000; }
+
+
+a:hover {
+ text-decoration: underline;
+}
+
+p {
+/* border: 1px solid #666; */
+ overflow: hidden;
+/* padding: 10px 0; */
+ text-align: left;
+}
+
+i {
+ font-size: 2em;
+}
diff --git a/templates/newbase.html b/templates/newbase.html
new file mode 100644
index 00000000..83533660
--- /dev/null
+++ b/templates/newbase.html
@@ -0,0 +1,156 @@
+{% load leaflet_tags %}
+{% load cookielaw_tags %}
+{% load rowerfilters %}
+{% load tz_detect %}
+{% tz_detect %}
+{% load analytical %}
+{% block filters %}
+{% endblock %}
+
+
+
+
{% block title %}Rowsandall Rowing Data Analytics{% endblock %}
+ {% block scripts %} {% endblock %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% analytical_head_top %}
+
+
+
+
+
+
+
+
+
+
+ {% block image_src %}
{% endblock %}
+
+
+
+
+
+ {% block og_image %}
+
+
+ {% endblock %}
+
+
+
+
+
+
+
+
+
+
+
+
+ {% block meta %} {% endblock %}
+ {% leaflet_js %}
+ {% leaflet_css %}
+
+
+
+
+
+ {% analytical_head_bottom %}
+
+
+
+
+
+
+
+
+
+
+
+ {% if user.is_authenticated %}
+
+
+
+
+
+ {% else %}
+
+
+ {% endif %}
+
+
+
+
+
+
+
+ {% block main %}
+ {% endblock %}
+
+
+ {% block sidebar %}
+ Related links
+ {% endblock %}
+
+ {% block ad %}
+ Advertising
+ {% endblock %}
+
+ {% analytical_body_bottom %}
+ {% block body_bottom %}{% endblock %}
+
+