body {
font-family: Roboto, Arial, Helvetica, sans-serif;
color: #000;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.0;
background-color: #ffffff;
margin: 0;
padding: 0;
}
p, ul, ol, dl, table, img, input {
font-size: 16px; 
}
.clearfix {
min-height: 1%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
a {
color: #000;
text-decoration: none;
border-bottom: 1px solid #000;
}
a:focus,
a:active,
a:hover {
border-bottom: none;
}
.fright {
float: right;
}
.fleft {
float: left;
}


/* Generic content styles */
#content h1 {
font-family: Roboto, Georgia, serif;
font-size: 30px;
font-weight: 700;
font-style: normal;
line-height: 1.2;
margin-bottom: 0;
}
#content h2 {
font-family: Roboto, Georgia, serif;
font-size: 22px;
font-weight: 700;
font-style: normal;
color: #333;
line-height: 1.2;
margin-top: 28px;
margin-bottom: 0;
}
#content h3 {
font-size: 18px;
font-weight: 700;
font-style: normal;
line-height: 1.2;
margin: 16px 0;
}
#content p, #content ul, #content ol {
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.5;
margin: 16px 0;
}
#content li {
margin: 0 0 16px;
}
#content ul, #content ol {
list-style-type: square;
list-style-position: outside;
margin-left: 16px;
padding-left: 4px;
}
#content ol {
list-style-type: decimal;
}
#content .imageset ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
#content .imageset ul p {
margin-top: 4px;
margin-bottom: 24px;
font-size: 14px;
}
#content p.note {
font-size: 14px;	
}
#content h3 + p, #content h3 + ul {
margin-top: 4px;
}
#content img {
display: block;
max-width: 100%;
height: auto;
}
#content img.float-right {
float: right;
max-width: 30%;
margin-left: 12px;
}
#content p.tagline {
font-size: 20px;
color: #333333;
line-height: 1.4;
margin: 16px 0;
}
#content p.date {
margin-top: 4px;
margin-bottom: 16px;
font-size: 14px;
}
#content ul.toggle-sections {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
#content ul.toggle-sections li.ts {
background: #fff;
border: 1px solid #666;
}
#content ul.toggle-sections li.ts>h3 {
font-size: 16px;
font-weight: 400;
margin: 0 0;
}
#content ul.toggle-sections li.ts a.toggle {
display: block;
padding: 8px;
border-bottom: none;
}
#content ul.toggle-sections li.ts a.toggle span {
border-bottom: 1px solid #000;
}
#content ul.toggle-sections li.ts a.toggle:hover, #content ul.toggle-sections li a.toggle:focus, #content ul.toggle-sections li a.toggle:active {
background: #eee;
}
div.expanded-copy {
padding: 0 16px;
}
#content ul.toggle-sections h4 {
font-size: 16px;
font-weight: 700;
font-style: normal;
line-height: 1.2;
margin: 24px 0 8px;
}
#content ul.toggle-sections h5 {
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.2;
margin: 16px 0 8px;
}
#content ul.toggle-sections h5+ul {
margin: 0px 0 30px 16px;
padding-left: 4px;
}
#content ul.toggle-sections h5+ul li {
margin-bottom: 4px;
}
#content .videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
#content .videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

a.button {
font-family: Roboto, Georgia, serif;
font-size: 15px;
display: inline-block;
background: #333;
color: #fff;
padding: 12px 20px;
border-radius: 3px;
border-bottom: none;
}
a.button:focus,
a.button:active,
a.button:hover {
background: #535362;
color: #fff;
border-bottom: none;
}
/* Top left picture and links */
.h-label {
display: block;
border-bottom: none;
padding-top: 6px;
padding-bottom: 1px;
}
body.home .h-label {
padding-bottom: 10px; 
}
.h-label span {
position: absolute;
top: 12px;
left: 12px;
display: block;
background: transparent url(dolphins4.png);
background-size: 80px 40px;
background-position: 0px 0px;
width: 40px;
height: 40px;
border-radius: 20px;
}
.h-label:hover span {
background-position: 40px 0px;	
}
.h-label p.sitename {
color: #eee;
font-size: 14px;
font-weight: 700;
margin: 0 0 16px 64px;
padding-top: 16px;	
}
body.earthy .h-label p.sitename {
color: #1a1a1a;	
}
#navigation {
background: #2b2b2b;	
}
body.earthy #navigation {
background: #f5cfa8;	
}
#navigation ul {
list-style-type: none;
padding: 0;
border-top: 1px solid #666;
}
#navigation li {
/*border-bottom: 1px solid #666;*/
display: inline-block;
font-size: 14px;
}
#navigation li a {
color: #eee;
text-decoration: underline;
border-bottom: none;
}
body.earthy #navigation li a {
color: #1a1a1a;
}
#navigation li a:hover, #navigation li a:active, #navigation li a:focus, #navigation li.current a {
/*border-bottom: 1px solid #eee;*/
}
#navigation li span {
display: block;
padding: 12px 12px 12px 12px;
}
#navigation li.linkedin, #navigation li.linkedin a:hover {
border-bottom: none;
}
#navigation li.linkedin img {
width: 20px;
height: 20px;
position: relative;
margin: 8px 0 -6px 20px;
}

/* Content block */
body.home #content {
background-image: url(art-bg-portrait.jpeg);
background-size: cover;
padding-top: 0;
}
body.home #gutter {
padding: 16px 24px 24px 24px;
}
#gutter {
padding: 16px 12px 24px 12px;
}
h1 {
margin-top: 0;
}
/* Footer styles */
footer {
padding: 8px 12px 36px 12px;	
background: #6bb4e4;	
}
body.earthy footer {	
background: #82a562;	
}
footer p {
font-size: 13px;
line-height: 1.5;
}
footer p.key-links {
margin-bottom: 24px;
}
footer p.key-links a {
font-weight: bold;
}

/* Forms */
form {
max-width: 500px;
}
input[type=text], input[type=email], input[type=tel], textarea {
width: 90%;
padding: 4px;
border: 1px solid #CCC;
-webkit-appearance: none;
-webkit-border-radius:0;
font-family: Calibri, "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
}
input[type=checkbox] {
display: inline;
}
button {
font-family: Roboto, Georgia, serif;
font-size: 15px;
display: inline-block;
background: #333;
color: #fff;
padding: 12px 20px;
border: 1px solid #333;
border-radius: 3px;
-webkit-appearance: none;
-webkit-border-radius:3px;
}

/* Tablet up */
@media screen and (orientation: portrait) and (min-width: 46em),
screen and (orientation: landscape) and (min-width: 62em) {
body {
background: #6bb4e4 url(darkgrey.png) left top repeat-y;
}
body.home {
background-color: #eeeeee;
}
body.earthy {
background: #82a562 url(earth.png) left top repeat-y;
}
h1 {
margin: 0;
padding: 0;	
}
#navigation {
position: fixed;
width: 200px;	
}
.h-label span {
left: 80px;
}
.h-label p.sitename {
margin: 64px 0 40px 0;
padding-top: 0px;
text-align: center;	
}
#navigation {	
background: transparent;
}
#navigation li {
display: block;
font-size: 16px;
border-bottom: 1px solid #666;
}
#navigation li a {
text-decoration: none;
}
#navigation li a:hover {
background: #6bb4e4;
color: #1a1a1a;
}
body.earthy #navigation li a:hover {
background: #a99789;
}
#navigation li span {
padding: 0;
}
#navigation li span a {
padding: 12px 12px 12px 20px;
display: block;
}
#navigation li span a:hover {
border-bottom: none;
}
#navigation li.linkedin img {
margin-top: 16px;
}
#navigation li.linkedin a:hover, body.earthy #navigation li.linkedin a:hover {
background: transparent;
}
#content {
position: relative;
margin: 0 0 0 200px;		
background-color: #fff;
background-image: url(bg-dolphins-1372x123.jpeg);
background-position: left top;
background-repeat: no-repeat;
background-size: 100% 123px;
padding-top: 123px;
}
body.work #content {
background-image: url(bg-work-1372x123.png);
}
body.gallery #content {
background-image: url(bg-grey-400x123px.png);
}
body.home #content {
background-image: url(art-bg-landscape.jpeg);
background-size: cover;
padding-top: 32px;
}
body.earthy #content {
background-image: url(bg-work-1372x123.png);
}

#gutter {
max-width: 760px;
padding: 30px 24px 40px 45px;
}
#content ul, #content ol {
margin-left: 25px;
padding-left: 40px;
}
#content img.float-right.smallpic {
max-width: 180px;
}
#content img.gallery-page {
max-width: 500px;
}
/* Image set */
#content .imageset ul li {
display: inline-block;
width: 30%;
padding-right: 8px;
}
footer {
background: transparent;
padding: 24px 0 36px 245px;		
}
body.earthy footer {
background: transparent;
}
}

@media print { 
#navigation {display: none;}
#gutter {
max-width: auto;
padding: 0;
}	
}