/* 2016 www.douglasbrooksboatbuilding.com */
/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/



/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;}
  
  

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; 
    margin-bottom: 30px;}
  .column,
  .columns {
    margin-left: 0%; 
    background-color: #EAF3FB; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Source Sans Pro", sans-serif;
  color: #222; 
  background-color: #003466;}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-left: 2%; 
  margin-bottom: 2rem;
  font-weight: 700;
  color: #003466; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0;
  margin-left: 2%; 
  margin-right: 2%;}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a, a:visited {
  color: #003466;
  font-weight: 700;
  text-decoration  : none;
  border-bottom: thin dotted;}
a:hover {
  color:  #ADD8E6;
  font-weight: 700;
  text-decoration  : none; 
  border-bottom: none 0;}
a.close {
	border-bottom: none 0;}
   
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: disc inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 1.5rem;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }
  .cornerimage { position: absolute; top: 5px; right: 0px; } 
  .cornerimage1 { position: absolute; top: 5px; right: 50px; } 

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

 
 .bottom {
  border-top: thin solid #003466; 
  font-size: .8em; 
  text-align: center;
  }
  
  img.big {
	border: 0 none;
	display: block;
   margin-left: auto;
   margin-right: auto;
	}

.clearit {
	clear: both;
	height: 0;
	line-height: 0.0;
	font-size: 0;
}

/*Strip the ul of padding and list styling*/
#menubar ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	margin-bottom: Orem; 
}

/*Create a horizontal list with spacing*/
#menubar li {
	display:inline-block;
	float: left;
	margin-right: 1px;
	margin-bottom: 0rem; 
}

/*Style for menu links*/
#menubar li a {
	display:block;
	min-width:110px;
	height: 40px;
	text-align: left;
	padding-left: 5px;
	line-height: 40px;
	color: #fff;
	text-decoration: none;
	border-bottom: none;
}

/*Hover state for top level links*/
#menubar li:hover a {
	background: #ADD8E6;
}

/*Style for dropdown links*/
#menubar li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
	overflow-x: hidden;
}

/*Hover state for dropdown links*/
#menubar li:hover ul a:hover {
	background: #ADD8E6;
	color: #003466;
}

/*Hide dropdown links until they are needed*/
#menubar li ul {
	display: none;
}

/*Make dropdown links vertical*/
#menubar li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
#menubar li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
#menubar li a:hover + .hidden, #menubar .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	text-decoration: none;
	color: #fff;
	background: #003466;
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menubar{
    display: block;
}


/* This is the first breakpoint and is for screen sizes between 772 and 980 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
-------------------------------------*/
@media screen and (max-width: 1004px) {
.container {
	float: none;
   width: 700px; 
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	
	/* opera does not like 'margin:20px auto' */
	background-color: #EAF3FB;
	border: 3px solid #ffffff;
	text-align: left; 
}
img.big {
	
	max-width: 100%;
	height: auto;
	}
	#menubar{
		display: none;
	}
/*Make dropdown links appear inline*/
	#menubar ul {
		position: static;
		
	}
	/*Create vertical spacing*/
	#menubar li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	#menubar li, #menubar li a {
		width: 100%;
		color: #003466;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
}
/* This is the second breakpoint and is for screen sizes between 468 and 758 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width: 758px) {
	.container {
	float: none;
   width: 468px; 
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	
	/* opera does not like 'margin:20px auto' */
	background-color: #EAF3FB;
	border: 3px solid #ffffff;
	text-align: left; 
}
.logo {
	width:100%;
	margin:0px;
	overflow-x: hidden;}
	
img.big {	
	max-width: 100%;
	height: auto;
	}
	/*menu*/

	
}
/* This is the third breakpoint and is for smartphones. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:400px) {
	.container {
	float: none;
   width: 308px; 
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto; 	
	/* opera does not like 'margin:20px auto' */
	background-color: #EAF3FB;
	border: 3px solid #ffffff;
	text-align: left; 
}
	.contentd {
	background-color: #ffffff;
	margin-bottom:3px;
	text-align:left;
	margin-right: 3px;
	width: 250px;
	margin-left: 3px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 3px;
}
.scrollable {
	display: none;
}
.logo {
	width:100%;
	margin:0px;
	overflow-x: hidden;}
	img.big {
	
	max-width: 100%;
	height: auto;
	}
	}