diff --git a/rowers/templates/redesign.html b/rowers/templates/redesign.html
index 8b39513b..26944ae8 100644
--- a/rowers/templates/redesign.html
+++ b/rowers/templates/redesign.html
@@ -6,3 +6,11 @@
 <h1>Main</h1>
 <p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh fermentum in.</p>
 {% endblock %}
+
+{% block sidebar %}
+<ul>
+  <li><a href="">Link 1</a></li>
+  <li><a href="">Link 2</a></li>
+  <li><a href="">Link 3</a></li>
+</ul>
+{% endblock %}
diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css
new file mode 100644
index 00000000..9efef471
--- /dev/null
+++ b/static/css/rowsandall2.css
@@ -0,0 +1,846 @@
+#main {
+    background-color: transparent;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    min-height: 759px;
+    min-width: 1024px;
+    width: 100%;
+    height: auto;
+}
+
+.one {
+    background-image: url("/static/img/landing1.jpg");
+}
+
+.two {
+    background-image: url("/static/img/landing1.jpg");
+}
+
+.three {
+    background-image: url("/static/img/landing2.jpg");
+}
+
+.four {
+    background-image: url("/static/img/landing8b.jpg");
+}
+
+.watermark {
+    position: absolute;
+    float: center;
+    opacity: 0.25;
+    font-size: 3em;
+    width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-25%) translateY(-50%);
+    text-align: center;
+    vertical-align: middle;
+    z-index: 1000;
+}
+
+.invisible {
+    display: none
+}
+
+html { 
+  font-size: 62.5%;
+}
+
+body {
+/*  background: #edc; */
+  color: #333;
+  font-size: 1.2em;
+  height: auto;
+  padding-bottom: 20px;
+}
+
+.notyellow {
+    font-size: 1.2em;
+    height: auto;
+    padding: 0px;
+}
+
+.yellow {
+    color: #cccc00;
+    font-size: 1.2em;
+    height: auto;
+    padding: 0px;
+}
+
+
+
+
+cox {
+/*  font-family: Georgia, serif; */
+  font-weight: normal;
+/* padding-top: 20px; */
+  text-align: center;
+  font-size: 2em;
+}
+
+/* `Tables
+-------------------------------------------------------------------------------
+*/
+
+th { 
+  font-weight: bold;
+ }
+
+.listtable tbody tr:nth-of-type(even) {  background-color: #DDD; }
+.listtable thead th { 
+    font-weight: bold;
+}
+
+
+.shortpadded td { padding: 3px 3px }
+
+.paddedtable td { padding: 1px 20px }
+
+.cortable {
+    border-collapse: collapse;
+}
+
+.cortable td {
+    border: 1px solid #999;
+    text-align: center;
+}
+
+th.rotate {
+  /* Something you can count on */
+  height: 78px;
+  white-space: nowrap;
+}
+
+th.rotate > div {
+  transform: 
+    /* Magic Numbers */
+    translate(18px, 51px)
+    /* 45 is really 360 - 45 */
+    rotate(315deg);
+  width: 30px;
+}
+th.rotate > div > span {
+  border-bottom: 1px solid #ccc;
+  padding: 5px 5px;
+}
+
+.fixtable table { 
+  table-layout: fixed;
+  width: 60%;
+ }
+
+.message { 
+  border: 1px solid #000;
+  background-color: #f88;
+  font-weight: bold;
+  color: #000;
+  text-align: center;
+ }
+
+.midden { text-align: center }
+
+.poscor {
+    background-color: #8f8;
+}
+
+.weakposcor {
+    background-color: #efe;
+}
+
+.negcor {
+    background-color:#f88;
+}
+
+.weaknegcor {
+    background-color: #fee;
+}
+
+.successmessage { 
+  border: 1px solid #000;
+  background-color: #8f8;
+  color: #000;
+  text-align: center;
+  font-weight: bold;
+ }
+
+.deletelink { 
+  border: 1px solid #000;
+  background-color: #f88;
+  color: #000;
+  text-align: center;
+  font-weight: bold;
+ }
+
+.navbar {
+  border: 1px solid #666; 
+  color: #000;
+
+
+  overflow: hidden;
+  background-color: #ddd;
+/*  padding: 10px 0; */
+  text-align: center;
+}
+
+.navbutton { 
+  background-color: #ddd;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border: 2px solid #666;
+  padding: 5px;
+  text-align: center;
+ }
+
+.transparentbutton {
+    padding: 1px;
+    text-align: center;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: #ffff66;
+    color: black;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 5px;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 999;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+  transition-delay:1s;
+}
+
+.caption { 
+  text-align: center;
+ }
+
+.site-announcement-box {
+    padding: .2em .5em .2em 0em;
+}
+
+.site-announcement {
+    font: 1.1em/1.5em sans-serif;
+    text-decoration: none;
+    display: block;
+    padding: .2em .5em .2em .5em; 
+    zoom: 1;
+/*    border-radius: .5em; */
+/*    -moz-border-radius: .5em; */
+/*    -webkit-border-radius: .5em; */
+    text-align: left;
+    border: solid 1px #333;
+}
+
+.dot {
+    border-radius: 50%;
+    display: block;
+    text-align: center;
+    width: 25px;
+    height: 25px;
+    border: solid 1px #333;
+}
+
+.dot:hover {
+    text-decoration: none; 
+}    
+
+.button {
+  font: 1.1em/1.5em sans-serif;
+  text-decoration: none;
+  display: block;
+  /* width: 100%; */
+  color: white;
+  padding: 0.2em 0.0em 0.2em 0.0em;
+  zoom: 1;
+/*  border-radius: .5em; */
+/*  -moz-border-radius: .5em; */
+/*  -webkit-border-radius: .5em; */
+/*  -box-shadow: 0 1px 3px  rgba(0,0,0,0.5); */
+/*  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
+/*  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); /*
+/*  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  */
+  text-align: center;
+}
+
+.input {
+  font: 1.1em/1.5em sans-serif;
+  text-decoration: none;
+  display: block;
+  /* width: 100%; */
+  color: white;
+  padding: 0.2em 0.0em 0.2em 0.0em;
+  zoom: 1;
+  border-radius: .5em;
+  -moz-border-radius: .5em;
+  -webkit-border-radius: .5em;
+/*  -box-shadow: 0 1px 3px  rgba(0,0,0,0.5); */
+/*  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
+/*  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); */
+/*  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  */
+  text-align: center;
+}
+
+a.button { 
+  color: white;
+ }
+
+.button:hover {
+  background: #d8e6ff; /* old browsers */
+  text-decoration: none; 
+}
+
+.button:active {
+	position: relative;
+	top: 1px;
+}
+
+.bigrounded {
+	-webkit-border-radius: 2em;
+	-moz-border-radius: 2em;
+	border-radius: 2em;
+}
+.medium {
+	font-size: 1.2em;
+}
+.small {
+	font-size: 1.0em;
+}
+
+/* black */
+.black {
+	color: #d7d7d7;
+	border: solid 1px #333;
+	background: #333;
+}
+.black:hover {
+	background: #000;
+}
+.black:active {
+	color: #666;
+}
+
+/* gray */
+.blue {
+	color: #e9e9e9;
+	border: solid 1px #555;
+	background: #6e6e6e;
+}
+.blue:hover {
+	background: #616161;
+}
+.blue:active {
+	color: #afafaf;
+}
+
+/* white */
+.white {
+	color: #606060;
+	border: solid 1px #b7b7b7;
+	background: #fff;
+}
+.white:hover {
+	background: #ededed;
+}
+.white:active {
+	color: #999;
+}
+
+/* orange */
+.orange {
+	color: #fef4e9;
+	border: solid 1px #da7c0c;
+	background: #f78d1d;
+}
+.orange:hover {
+	background: #f47c20;
+}
+.orange:active {
+	color: #fcd3a5;
+}
+
+/* red */
+.red {
+	color: #faddde;
+	border: solid 1px #980c10;
+	background: #d81b21;
+}
+.red:hover {
+	background: #b61318;
+}
+.red:active {
+	color: #de898c;
+}
+
+/* blue */
+.graytext {
+    color: #27aae2;
+}
+
+.gray {
+	color: #fae7e9;
+	border: solid 1px #27aae2;
+	background: #27aae2;
+}
+.gray:hover {
+    background: #1c74bb;
+    border: solid 1px #27aae2;
+}
+.gray:active {
+	color: #ffffff;
+}
+
+/* rosy */
+.rosy {
+	color: #fae7e9;
+	border: solid 1px #b73948;
+	background: #da5867;
+}
+.rosy:hover {
+	background: #ba4b58;
+}
+.rosy:active {
+	color: #dca4ab;
+}
+
+/* green */
+.green {
+	color: #e8f0de;
+	border: solid 1px #538312;
+	background: #64991e;
+}
+.green:hover {
+	background: #538018;
+}
+.green:active {
+	color: #a9c08c;
+}
+
+/* palegreen */
+.palegreen {
+    background: palegreen;
+    box-shadow:inset 0px 0px 0px 6px #fff;
+    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
+    box-shadow:inset 0px 0px 0px 6px #fff;
+}
+
+/* paleblue */
+.paleblue {
+#    padding: 8px; 
+    background: aliceblue;
+    box-shadow:inset 0px 0px 0px 6px #fff;
+    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
+    box-shadow:inset 0px 0px 0px 6px #fff;
+}
+
+/* lightsalmon */
+.lightsalmon {
+#    padding: 4px;
+    background: lightsalmon;
+    box-shadow:inset 0px 0px 0px 6px #fff;
+    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
+    box-shadow:inset 0px 0px 0px 6px #fff;
+}
+
+/* filler */
+.filler {
+    background: darkgray;
+    box-shadow:inset 0px 0px 0px 6px #fff;
+    -moz-box-shadow:inset 0px 0px 0px 6px #fff;
+    box-shadow:inset 0px 0px 0px 6px #fff;
+}
+
+.padded {
+    padding: 10px;
+}
+
+/* pink */
+.pink {
+	color: #feeef5;
+	border: solid 1px #d2729e;
+	background: #f895c2;
+}
+.pink:hover {
+	background: #d57ea5;
+}
+.pink:active {
+	color: #f3c3d9;
+}
+
+
+.greenbar {
+  border: 1px solid #666; 
+  color: #000;
+
+
+  overflow: hidden;
+  background-color: #8f8;
+/*  padding: 10px 0; */
+  text-align: center;
+}
+
+
+#footer { 
+  text-align:center;
+ }
+
+.container_12,
+.container_16,
+.container_24 {
+  background-color: #fff;
+  background-repeat: repeat-y;
+/*  margin-bottom: 20px; */
+}
+
+.container_12 {
+/*    background-image: url(../img/12_col.gif);  */
+}
+
+
+/* Style The Dropdown Button */
+.dropbtn {
+  color: white;
+}
+
+/* The container <div> - 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;
+
+}
diff --git a/static/css/styles2.css b/static/css/styles2.css
index 8baf3fd4..a9ea15c7 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -1,49 +1,95 @@
-@media (min-width: 768px) {
-  .container {
-    display: grid;
-    grid-template-columns: 200px 1fr 200px;
-    grid-template-rows: auto 1fr auto;
+* {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;
+    }
+    
+.main-head {
+  grid-area: header;
+}
+.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: 20px;
+  grid-template-areas: 
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: 
+      "header  header"
+      "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: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas: 
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+   header ul {
+     flex-direction: row;
+   }
 
-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/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..2ed88a3c
--- /dev/null
+++ b/static/css/text2.css
@@ -0,0 +1,149 @@
+/*
+  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;
+}
diff --git a/templates/newbase.html b/templates/newbase.html
index 0c907d5d..f6e27d06 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -38,6 +38,8 @@
     <link rel="icon" sizes="192x192" href="/static/img/favicon-192x192.png" type="image/png"/>
     <link rel="icon" sizes="16x16" href="/static/img/favicon-16x16.png" type="image/png"/>
     <meta charset="utf-8" />
+    {% block image_src %}<link rel="image_src" href="static/img/logo7.png" />{% endblock %}
+    <meta property="og:type" content="website">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -55,7 +57,8 @@
 
     <link rel="stylesheet" href="/static/css/resetnew.css" />
     <link rel="stylesheet" href="/static/css/styles2.css">
-    <link rel="stylesheet" href="/static/css/text.css" />
+    <link rel="stylesheet" href="/static/css/text2.css" />
+    <link rel="stylesheet" href="/static/css/rowsandall2.css" />
     {% block meta %} {% endblock %}
     {% leaflet_js %}
     {% leaflet_css %}
@@ -90,20 +93,63 @@
     {% analytical_head_bottom %}
   </head>
   
-  <body class="container">
-   <header>Header</header>
-   <nav>
-     <div>Navigation 1</div>
-     <div>Navigation 2</div>
-     <div>Navigation 3</div>
+  <body data-root="https://webapiv2.navionics.com/dist/webapi/images">
+    <div class="wrapper">
+      <header class="main-head">
+        <ul>
+          <li>
+            <a href="/"><img src="/static/img/logo7.png"
+                           alt="Rowsandall logo" width="300px"></a>
+          </li>
+          <li>
+            <p>Free Data and Analysis. For Rowers. By Rowers.</p>
+          </li>
+          <li>
+            <a href="">Help</a>
+          </li>
+	    {% if user.is_authenticated %}
+          <li>
+	    <p>
+              {% if user.first_name %}
+	      <a href="/rowers/me/edit">{{ user.first_name }}</a>
+              {% else %}
+              <a href="/rowers/me/edit">{{ user }}</a>
+              {% endif %}
+	    </p>
+          </li>
+          <li>
+            <a href="">Logout</a>
+	  {% else %}
+          <li>
+	    <p><a href="{% url 'login' %}">login</a> </p>
+          </li>
+	    {% endif %}
+          </li>
+        </ul>
+      </header>
+      <nav class="main-nav">
+        <ul>
+          <li><a href="">Nav 1</a></li>
+          <li><a href="">Nav 2</a></li>
+          <li><a href="">Nav 3</a></li>
+          <li><a href="">Nav 4</a></li>
+          <li><a href="">Nav 5</a></li>
+        </ul>
    </nav>
-   <main>
+   <main class="content">
      {% block main %}
      {% endblock %}
-     </main>
-     <aside>Related links</aside>
-     <footer>Footer</footer>
-    {% analytical_body_bottom %}
-    {% block body_bottom %}{% endblock %}
+   </main>
+   <aside class="side">
+     {% block sidebar %}
+     Related links
+   {% endblock %}</aside>
+   <div class="ad">
+     {% block ad %}
+     Advertising
+     {% endblock %}</div>
+   <footer class="main-footer">Footer</footer>
+   {% analytical_body_bottom %}
+   {% block body_bottom %}{% endblock %}
   </body>
 </html>