/********************************************* * BASELINE STYLES *********************************************/ html, body {height:100%; padding:0; margin:0;} body {font-size:100%; background:#2f6686 url(../_images/body_bg.jpg);} #skip-nav {display:none;} /* LINKS */ a {color:inherit;} a:visited {color:#ddd;} a:hover {text-decoration:none;} :focus {outline:none;} /* IMAGES */ img {border:1px solid #c2c2c2; padding:4px;} .h {width:15.625em;} .v {width:10.3125em;} .no-border {border:none; padding:0;} /* CAPTIONS */ .caption {font-weight:bold; font-size:.75em; text-align:center; margin:.5em;} /* FLOATS */ .l {float:left; clear:left; margin-right:1em;} .r {float:right; clear:right; margin-left:1em;} /* CLEARFIX */ .clearfix:after {content:"."; display:block; height:0; clear:both; visibility: hidden;} /* COLUMNS */ .col-33 {width:33%;} .col-40 {width:40%;} .col-45 {width:45%;} .col-50 {width:50%;} .col-60 {width:56%;} /* LISTS */ ul, ol {padding-left:0;} li {position:relative; left:2em;} .smaller {font-size:.875em;} /* DEFINITION LISTS */ dl {display:inline-block; clear:none !important;} /* QUOTES */ .attribution {display:block; text-align:right; margin-top:1em;} /* ADDRESS */ address {font-style:normal; margin-bottom:1em;} address:first-line {font-variant:small-caps;} /* TABLES */ table {width:100%; border:0; border-collapse:collapse;} td {vertical-align:middle;} /* IMAGE REPLACEMENT (don't forget to specify width/height on replaced elements) */ .replaced {background-position:top left; background-repeat:no-repeat;} .replaced span {display:block; width:0; height:0; overflow:hidden;} /* FORMS */ label {vertical-align:top;} input, textarea {font-family:sans-serif; line-height:1.6em;} input[type="text"] {width:30em;} input[type="checkbox"], input[type="radio"] {vertical-align:baseline;} form .msg {display:block; font-size:.875em;} form.labels-above label {display:block;} form.labels-inline label {display:inline-block; width:10em; text-align:right;} form.labels-inline input[type="submit"] {margin-left:15em;} form.labels-inline .msg {margin-left:12em;} .error {color:red;} .notice {color:blue;} .success {color:green;} /* FONTS */ @font-face { font-family: 'KelmscottRomanRegular'; src: url('../_fonts/KelmscottRoman/KELMSCOT.eot'); src: local('KelmscottRoman'), url('../_fonts/KelmscottRoman/KELMSCOT.woff') format('woff'), url('../_fonts/KelmscottRoman/KELMSCOT.ttf') format('truetype'), url('../_fonts/KelmscottRoman/KELMSCOT.svg#KelmscottRoman') format('svg'); } #nav li, h2, h3, .product-matrix th {font-family:'KelmscottRomanRegular', Georgia, "Times New Roman", serif; font-weight:normal;} /********************************************* * WRAPPER POSITIONING *********************************************/ /* MAKE RIGHT SCROLLBAR ALWAYS VISIBLE TO ELIMINATE JUMPS */ html {min-height:101%;} /* CENTER #page-wrapper VERTICALLY AND HORIZONTALLY IN THE VIEWPORT */ #viewport {display:table; width:99%; height:99%; position:absolute;} #page-wrapper {display:table-cell; vertical-align:top;} #home #page-wrapper {vertical-align:middle;} #content-wrapper {margin:0 auto; width:60em; position:relative;} /********************************************* * MASTHEAD AND NAVIGATION *********************************************/ /* MASTHEAD */ #home-link {display:block; margin:0 auto; position:absolute; z-index:3; width:60em; height:16.0625em;} #masthead, #masthead-home {font-size:1em; margin:0; position:relative; z-index:2;} #masthead img, #masthead-home img {width:60em; padding:0; border:none;} #masthead-home {display:none;} /* NAVIGATION */ #nav-bg {z-index:1; border-bottom:1px solid #23434b;} #nav-bg, #nav {position:absolute; top:16.1875em; margin:0; width:60em; height:3.625em; } #nav {z-index:4; line-height:3.625em;} #nav li {list-style:none; display:inline-block; position:static; font-size:1.0625em; text-align:center; line-height:1.0625em; padding:0 .8em; vertical-align:middle; background:url(../_images/nav_divider.gif) no-repeat top right;} #nav li a {text-decoration:none; display:block;} #nav #contact-link {background:none !important;} #nav #call-to-action {position:relative; float:right; left:-.6em; top:.7em; background:#fcef0e; background-image:-moz-linear-gradient(top center, #fcf696, #fcef0e) !important; background-image:-webkit-gradient(linear, left top, left bottom, from(#fcf696), to(#fcef0e)) !important; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:1px 1px 1px #444; -webkit-box-shadow:1px 1px 1px #444; box-shadow:1px 1px 1px #444; margin:0; padding:.5em;} #nav #call-to-action:hover, #product-find #call-to-action {-moz-box-shadow:inset 1px 1px 1px #bbb; -webkit-box-shadow:none; box-shadow:-1px -1px 1px #bbb; background:#fcef0e;} #products #products-link a, #about #about-link a, #how #how-link a, #contact #contact-link a, #product-find #call-to-action a {cursor:default;} /********************************************* * CONTENT *********************************************/ #content { position:relative; top:-4.22em; font-family:Georgia, "Times New Roman", serif; padding:2.25em 4.1875em; background-image:-webkit-gradient(radial, 688 445, 100, 688 445, 688, from(rgba(84, 141, 143, .3)), to(rgba(249, 249, 251, .3))), url(../_images/scratch_pattern.png); background-image:-moz-radial-gradient(688px 445px, circle cover, rgba(84, 141, 143, .3) 0%, rgba(249, 249, 251, .3) 90%), url(../_images/scratch_pattern.png); } /* HEADINGS */ #pagetitle {font-size:1.875em; padding-bottom:.5em; background:url(../_images/title_underline.png) repeat-x bottom left;} #contact #pagetitle {margin-bottom:1.4em;} h3 {clear:both; margin:1.2em 0 .5em 0; font-size:1.5625em;} #how #content {height:87em;} /********************************************* * PAGE-SPECIFIC STYLES *********************************************/ /* HOME */ #home #home-link, #home #masthead, #home #footer {display:none;} #home #masthead-home {display:block;} #home #nav {text-align:center; top:27em;} #home #nav li {background-image:none; margin:0 2.3em;} #home #nav li a {text-shadow:#3E5630 0 0 3px} #home #nav li a br {display:none;} #home #nav #products-link {margin-left:0;} #home #nav #contact-link {margin-right:0;} #home #nav #call-to-action { left:-11em; top:.4em; background-image:-moz-linear-gradient(top center, #fcf696, #fcef0e) !important; background-image:-webkit-gradient(linear, left top, left bottom, from(#fcf696), to(#fcef0e)) !important; } #home #content {top:0; height:1.625em; padding:1em;} #home #content h3 {margin:0 0 0 6.2em; line-height:1.04em; font-style:italic; font-size:1.5625em;} /* PRODUCTS */ .product-matrix {margin-top:1em; border:0;} .product-matrix td, .product-matrix th {border:2px dotted; text-align:center;} .product-matrix th {font-size:1.125em; line-height:2.61em;} .product-matrix td {padding:.5em 1em;} .product-matrix .gutter {padding:0; width:.5em; background:transparent; border:none;} .product-matrix img {border:none;} /* ABOUT */ #logo-wrapper h4, #logo-wrapper p {margin:0;} #logo-wrapper h4 {font-size:1.125em; padding-top:2em;} #logo-wrapper {margin-bottom:2em;} #mission-sidebar {width:24.8125em; margin-left:4em;} #mission {clear:both; border:2px dotted;} #mission h4 {text-align:center; border-bottom:2px dotted; margin:0; padding:.5em;} #mission p {margin:.5em 1em;} #org-logos {text-align:center;} #org-logos img {margin:2em 1em 0 1em;} /* HOW WE MAKE OUR SELECT SEAFOOD */ #step1, #step2, #step3, #step4, #arrow1, #arrow2, #arrow4 {position:absolute;} #step1 {width:20.5em; left:4.875em; top:9.25em;} #step2 {width:23em; left:34em; top:18em} #step3 {width:30.375em; left:5em; top:41em;} #step4 {width:21.625em; left:34.1875em; top:64em} #arrow1 {width:7.5625em; left:27em; top:12em;} #arrow2 {width:5.875em; left:29.3125em; top:35em;} #arrow4 {width:6.1875em; left:24.1875em; top:63em;} .steps p {padding:0 .5em;} .steps img {display:block; margin:0 auto;} /* CONTACT */ #contact-info {font-size:1em;} #contact-info p {font-weight:bold; margin-top:0;} /* FIND OUR PRODUCTS */ #retail-list dl {margin:0;} #retail-list dt {margin-top:1.2em; font-weight:bold;} #retail-list dt.column-top {margin-top:0;} #retail-list dd {font-size:.94em; margin-left:.3em; line-height:1.5em;} #retail-list dd:before {content:'\2022\0020';} #wholesale-list, #retail-list {padding:0 1em;} /********************************************* * COLORS *********************************************/ /* WHITE */ #nav li a, #content, .product-matrix td {color:#fff;} /* YELLOW */ #pagetitle, #nav li a:hover, #products #products-link a, #about #about-link a, #how #how-link a, #contact #contact-link a, #footer, #home #content h3, .organic-cert {color:#fcef0e;} /* SALMON */ .salmon, #mission h4 {color:#FA9155;} .salmon td, .salmon th, #mission, #mission h4, #retail-list {border-color:#FA9155;} /* HALIBUT */ .halibut, address:first-line {color:#D8DDC0;} .halibut td, .halibut th, #wholesale-list {border-color:#D8DDC0;} /* PURPLE */ #nav-bg, #home #content {background:#8C459A;} /* BLUE-GREEN */ #nav #call-to-action a {color:#488492;} /********************************************* * EMBOSSING *********************************************/ #pagetitle, h3, #footer p {text-shadow:#222 0 -1px 3px, #ddd 0 1px 3px;} #home #nav #call-to-action a, #product-find #nav #call-to-action a {text-shadow:none;} /********************************************* * FOOTER *********************************************/ #footer {clear:both; width:60em; position:relative; left:-4.1875em; margin-top:4.5em;} #footer hr {display:none;} #footer-logo {width:52.8125em; display:block; margin:0 auto;} #footer p {text-align:center; margin:0;} #how #footer {position:relative; top:73em;} /********************************************* * DESIGN ATTRIBUTION *********************************************/ #design-attr {position:relative; top:-5.62em; margin:0; text-align: right; font-family:Georgia, "Times New Roman", serif; font-size:.75em; color:#fff !important;} #design-attr a {font-family:Lucida Sans Unicode, Lucida Grande, sans-serif; text-transform:uppercase; text-decoration:none;} #design-attr a:hover {text-decoration:underline;} #home #design-attr {display:none;}