@import url(http://fonts.googleapis.com/css?family=Arvo:regular,italic,bold,bolditalic);

/* skin */
a, .active-trail a.active {color: #132953; text-decoration: none}
a:hover, .active-trail a.active:hover {color: #000000}

#top .wrap {background: url(/sites/all/themes/harbor/top.jpg); height: 41px; position: relative}
#top ul {margin: 0; padding: 0; position: absolute; bottom: 10px; right: 15px}
#top ul li {list-style: none; display: block; float: left}
#top ul li a {text-transform: uppercase; letter-spacing: 1px; font-size: 11px; text-decoration: none; margin: 0 5px; font-weight: bold}

#header {background: #1f4489}
#header .wrap {background: url(/sites/all/themes/harbor/header.jpg); height: 150px}

#nav {height: 40px; border-bottom: 3px solid #1f4489; font-size: 14px;
background: #132953; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#132953', endColorstr='#0d1c38'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#132953), to(#0d1c38)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #132953,  #0d1c38); /* for firefox 3.6+ */ 
}
#nav ul {margin: 0 0 0 15px; padding: 3px 0 0 0; font-weight: bold}
#nav ul li a {color: #ffffff; padding: 11px 13px 10px 13px; text-shadow: 0 0 2px #2E579B}
#nav li:hover a {color: #ffffff; background: #1f4286; text-shadow: none}
#nav li:hover ul {top: 37px; left: 0; font-size: 12px; background: #1f4286; padding-bottom: 5px}
#nav li:hover ul a {padding: 4px 15px; color: #eeeeee; width: 120px; background: transparent}
#nav li:hover ul a:hover {color: #ffffff}

#content {padding: 20px; color: #333333;}
#content h1 {color: #132953; font-size: 36px; font-weight: normal; letter-spacing: -1px; font-family: arial; letter-spacing: -1px; text-shadow: 0 0 2px #1f4489}
#content h5 {color: #132953; font-size: 24px; font-weight: normal; letter-spacing: -1px; font-family: arial; letter-spacing: 0px; text-shadow: 0 0 1px #1f4489; margin: 0 0 0 0}
#content p, #content ol, #content ul, #content li {line-height: 1.5em}

#footer {background: #1f4286}
#footer .wrap {}
#footer .copyright p {text-align: center; color: #eeeeee}
#footer .copyright p a {color: #eeeeee; text-decoration: none}
#footer .copyright img {opacity: .2}

/* wide */
.wide #main {width: 100%}
.wide #header .wrap {background: url(/sites/all/themes/harbor/header-wide.jpg)}

/* rounded */
.rounded #header, .rounded #nav, .rounded #body, .rounded #footer {-moz-border-radius: 10px; margin: 0 auto 5px auto}
.rounded #header {overflow: hidden}
.rounded #nav a {-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px}
.rounded #nav li:hover ul {-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px}
.rounded #nav li:hover ul a {-moz-border-radius: 0}
.rounded #body {background: #fafafa; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#ffffff'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ffffff)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fafafa,  #ffffff); /* for firefox 3.6+ */ }

.category {margin: 15px 0; padding: 0; list-style: none}
.category li {display: block; float: left; width: 300px; margin: 0 9px 20px 0}
.category li div {height: 190px; position: relative}
.category li div img {position: absolute; bottom: 0}
.category li h3 {margin: 10px 0 5px 0; font-size: 14px; font-weight: bold}
.category li p {margin: 5 0 15px 0; line-height: 1.3em; height: 110px; overflow-x: hidden; overflow-y: auto}

.category2 {margin: 15px 0; padding: 0; list-style: none}
.category2 li {display: block; float: left; width: 208px; margin: 0 9px 20px 0}
.category2 li div {height: 130px; position: relative}
.category2 li div img {position: absolute; bottom: 0}
.category2 li h3 {margin: 10px 0 5px 0; font-size: 16px; font-weight: bold; text-align: center;}
.category2 li p {margin: 0 0 15px 0; line-height: 1.3em; height: 50px; overflow-x: hidden; overflow-y: auto}

a.button {display: block; clear: both; border: 1px solid #cccccc; background-color: #eeeeee; padding: 3px 5px; font-size: 11px; text-align: center; margin-bottom: 1px}
a.button:hover {color: #ffffff; background-image: url(images/back_nav.gif)}

a.button1 {float: right; display: block; clear: both; width: 130px; border: 1px solid #cccccc; background-color: #e2e2e2; padding: 3px 5px; font-size: 11px; text-align: center; margin-bottom: 1px; margin-right: -10px}
a.button1:hover {color: #ffffff; background-image: url(images/back_nav.gif)}

.forsale {margin-top: 15px}
.forsale td {border-top: 1px solid #ffffff; vertical-align: top}
.forsale td.photo {padding-right: 10px; width: 158px}
.forsale td.photo img {padding: 3px; border: 1px solid #cccccc; background-color: #f6f6f6}
.forsale table td {font-size: 12px}
.forsale td.make, .forsale td.mileage, .forsale td.price {font-weight: bold; border: 1px solid #cccccc; padding: 3px 10px; background-color: #f6f6f6}
.forsale td.mileage, .forsale td.price {width: 80px}
.forsale td.description {padding: 5px 10px}

.rates table {border-collapse: collapse; margin: 5px 0 3px 0px; width: 613px}
.rates td {vertical-align: top; padding: 3px; border: 1px solid #CCCCCC; text-align: left; font-size: 11px}
.rates .days td {background-color: #eeeeee; border-right: 1px solid #DDDDDD}
.rates .price td {background-color: #FFFFFF}
.rates .odd td {background-color: #F6F6F6}
.rates .season {background-color: #CCCCCC !important; text-align: left; font-weight: bold}
.rates .trip1 {background-color: #ffffff !important; text-align: left; font-weight: bold}
.rates .trip2 {background-color: #F6F6F6 !important; text-align: left; font-weight: bold}
.rates .odd .season {background-color: #B6B6B6 !important}
.rates .blank {border-left: 0; border-top: 0; background-color: transparent !important}

/*promo box*/
h1 {margin-left: 10px; letter-spacing: -1px}
#content {margin-top: 0}
.promobox {border: 1px solid #e8e4d2; float: left; width: 460px; height: 100px; padding: 15px; margin: 0 10px 10px 0}
.promobox h3 {margin: -14px -14px 1px -14px; background-color: #9D947F; color: #ffffff !important; font-size: 14px; letter-spacing: 0px; padding: 8px 5px 8px 15px}

/*list float */
.floatlist {float: left; width: 200px;}
.floatlist ul {margin: 0; padding: 0; list-style: none}
.floatlist ul li {border-bottom: 1px solid #e8e4d2; padding: 2px 0; font-size: 12px}
.floatlist ul li.last {border-bottom: 0}
.floatlist2 {float: left; width: 260px;}
.floatlist2 ul {margin: 0; padding: 0; list-style: none}
.floatlist2 ul li {border-bottom: 1px solid #e8e4d2; padding: 2px 0; font-size: 12px}
.floatlist2 ul li.last {border-bottom: 0}

/*line separator*/
p.separator {border-top: 1px solid #E8E4D2; margin-top: 30px; padding-top: 30px}
td.right {text-align: right}
td.center {text-align: center}

/*Map*/
.address {width: 222px; float: left; margin-top: 0; padding-left: 0px}
.map {width: 425px; float: left}
.content p small {float: right; display: block; clear: right}

/* footer styling */
#footer {text-align: center; padding: 10px 0; margin: 0 0 30px 0; clear: both; color: #eeeeee}
#footer ul {margin: 0; padding-bottom: 10px; line-height: 18px; text-align: center}
#footer ul li {display: inline; list-style: none; padding: 0; margin: 0}
#footer ul li a {font-size: 12px; color: #eeeeee; font-weight: normal; padding: 0 2px 0 8px}
#footer ul li a:hover {color: #ffffff}

/* phone number top-right */
#header .wrap {position: relative}
#header {position: relative}
#phone {position: absolute; width: 300px; right: 0px; top: 186px; text-align: right; color: #333333; font-size: 34px; font-weight: normal; letter-spacing: -1px; text-shadow: 0 0 2px #6a6456}

/*image photo boader*/
img.photo {padding: 3px; border: 1px solid #cccccc; background-color: #f6f6f6}

#right {margin-top: 75px}

/* Block Padding Adjustments */
#block-block-25 {margin-bottom: 19px}
#block-advanced_blog-3 {margin-top: 15px;}

/* Webform styling */
.submitted {display: none}

/* fancify blog sidebar */
.block-blog, .block-advanced_blog {font-size: 14px; font-weight: bold; background-image: url(images/back_nav.gif); margin-bottom: 10px; padding: 5px 0 0 10px; color: #ffffff}
.item-list {font-size: 12px; font-weight: normal; border-top: 1px solid #cccccc; margin-top: 5px; background-color: #ffffff; margin-left: -10px !important; border: 1px solid #dddddd; color: #333333}
.item-list .item-list {border: 0}
.item-list ul {margin: 10px !important; padding: 0 !important; list-style: none}
.item-list ul ul {margin: 0 0 0 15px !important}
.item-list ul li {padding: 2px 0}
.more-link a {font-size: 11px; font-weight: normal; display: block; background-color: #cccccc; color: #ffffff; margin: 0 0 0 -10px; padding: 3px 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; text-align: left}
.more-link a:hover {background-color: #333333}

/* home page promos */
.homepromo {border: 0px solid #d0ccb3; float: left; width: 166px; height: 320px; padding: 15px; margin: 0 10px 10px 0}
.homepromo h3 {margin: -15px -14px 0px -14px; color: #ffffff; font-size: 14px; letter-spacing: 0px; padding-top: 15px}
.homepromo h3 a {color: #1F4489; background-color: #f7f7f7; padding: 6px 0px 6px 0px; display: block; border: 1px solid #eeeeee}
.homepromo h3 a:hover {color: #ffffff; background-color: #1F4489; border: 1px solid #469ac5}
.homepromo img {margin: 0 -14px -10px -14px; width: 192px; height: 170px}
.homepromo ul {margin: 0; padding: 0; list-style: none}
.homepromo ul li {border-bottom: 1px solid #d0ccb3; padding: 2px 0; font-size: 20px; font-weight: bold; color: #000000}
.homepromo ul li.last {border-bottom: 0}

#featurelocation { width: 300px; height: 525px; background-image: url(images/harbor-locations.jpg); margin: 0 }
#featurelocation h3 {padding: 16px 0 0 0; text-align: center; color: #ffffff; font-size: 22px !important; font-weight: bold}
#featurelocation p { margin: 10px 15px; padding: 0; font-size: 12px }
#featurelocation p { font-weight: normal; }

#footer legend {margin: 0 auto}  

.surf {margin-left: auto; margin-right: auto;}

a.reservebutton {display: block; clear: both; width: 140px; border: 1px solid #cccccc; border-radius: 5px; color: #ffffff; padding: 3px 5px; text-align: center; margin-top: -29px; margin-bottom: 10px; margin: 10px; margin-left:auto; font-size: 18px; background: rgb(30,59,127); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlM2I3ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTFlM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDllZGYyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(30,59,127,1) 0%, rgba(14,30,61,1) 100%, rgba(217,237,242,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,59,127,1)), color-stop(100%,rgba(14,30,61,1)), color-stop(100%,rgba(217,237,242,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,59,127,1) 0%,rgba(14,30,61,1) 100%,rgba(217,237,242,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,59,127,1) 0%,rgba(14,30,61,1) 100%,rgba(217,237,242,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,59,127,1) 0%,rgba(14,30,61,1) 100%,rgba(217,237,242,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,59,127,1) 0%,rgba(14,30,61,1) 100%,rgba(217,237,242,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e3b7f', endColorstr='#d9edf2',GradientType=0 ); /* IE6-8 */
}
a.reservebutton:hover {color: #ffffff; background: #42c2e7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyYzJlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZjgwYTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #42c2e7 0%, #0f80a0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#42c2e7), color-stop(100%,#0f80a0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #42c2e7 0%,#0f80a0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #42c2e7 0%,#0f80a0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #42c2e7 0%,#0f80a0 100%); /* IE10+ */
background: linear-gradient(top,  #42c2e7 0%,#0f80a0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42c2e7', endColorstr='#0f80a0',GradientType=0 ); /* IE6-8 */}

img.signup {padding-left: 20px; vertical-align: -8px;}

.used-button {display: block; clear: both; color: #ffffff; background-image: url(images/back_nav.gif); padding: 8px 10px; text-align: center; margin-bottom: 1px; float: right; font-weight: bold}

/* phone number top-right */
#header .wrap {position: relative}
#header {position: relative}
#phone {position: absolute; width: 300px; right: 0px; top: 211px; text-align: right; color: #000000; font-size: 34px; font-weight: normal; letter-spacing: -1px; text-shadow: 0 0 2px #999999}

.addthis {position: absolute; top: -32px; left: 15px}
.addthis img {width: 20px; margin: 1px}

.address2 {width: 48%; margin-left: 5px; text-align: center; padding-bottom: 5px; border: 1px solid #ccc; float:left; margin-bottom: 10px;; height: 160px}
.address2 .hdr {width: 100%; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; font-size: 18px; font-family: 'enigma', 'arial'; color: #fff; background-color: #1F4489;}