@charset "utf-8";
/* CSS Document */

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

 .clear{clear:both;display:block;overflow: hidden;visibility: hidden;width:0;height:0;}.clearfix:after{clear:both;content: ' ';display:block;font-size:0;line-height:0;visibility: hidden;width:0;height:0;}.clearfix{display: inline-block;}* html .clearfix{height:1%;}.clearfix{display:block;}

html {
	background: #3fa9d9 url(../images/wave.jpg)  0 0 repeat-x;	
}
body {
	font-family: 'Helvetica Neue', Helvetica, Arial;
}
strong {
	font-weight: bold;	
}
em {
	font-style: italic;	
}
p {
	font-size: 14px;	
	line-height: 18px;
	margin: 1em 0;	
}
a {
	color: #3FA9D9;	
}
a:hover {
	color: #06347A;	
}
#wrapper {
	background: url(../images/wrapper.png) 0 0 repeat-y;
	margin: 0 auto;
	padding: 0 18px;
	position: relative;
	width: 960px;
}
#header {
	padding: 0 10px 0 90px;	
}
#logo a {
	background: url(../images/logo.png) 0 30px no-repeat;
	display: block;
	height: 27px;
	padding: 30px 0 0 0;
	text-indent: -9999px;	
	width: 346px;
}
#fish {
	left: 610px;
	position: absolute;
	top: 10px;
}
#intro p {
	width:460px;	
}
#intro {
	padding: 0 80px 0 90px;
}
/************* UI */
#intro label, #intro #pregnant {
	color: #06347a;
	font-size: 15px;
	font-weight: bold;
}
#yourWeight {
	background: url(../images/weight-field.png) 0 0 no-repeat;
	border: 0;
	color: #3fa9d9;
	font-size: 15px;
	font-weight: bold;
	height: 27px;
	line-height: 22px;
	padding: 3px 8px 0 8px;
	text-align: right;
	vertical-align: middle;
	width: 62px;
}
#portion {
	padding-left: 55px;	
}
#fishSize {
	background: url(../images/dropdown.png) 0 0 no-repeat;
	border: 0;
	color: #3fa9d9;
	font-size: 15px;
	font-weight: bold;
	height: 27px;
	line-height: 22px;
	padding: 5px 0px 3px 6px;
	text-align: right;
	vertical-align: middle;
	width: 228px;
	-webkit-appearance: none;
}
#lbs {
	color: #06347a;
	font-size: 14px;
	font-weight: bold;	

}
option {
	background: #fff;
	color: #3fa9d9;
	font-size: 15px;	
	line-height: 17px;
	-webkit-appearance: none;
}
#pregnant {
	float: right;	
	margin: 20px 0 0;
	position: relative;
	z-index: 50;
}
#pregnant .note {
	background: url(../images/box.png) 0 0 no-repeat;
	height: 212px;
	padding: 5px 45px 0;
	position: absolute;
	right: -23px;
	width: 443px;
	z-index: 100;
}
#pregnant .note-shadow {
	background: url(../images/dshadow.png) 0 0 no-repeat;
	height: 31px;
	margin: 0;
	padding: 0px 45px;
	position: absolute;
	right: -23px;
	top: 230px;
	width: 443px;
	z-index: 100;
}

#pregnant p {
	color: #000;
	font-weight: normal;
	margin: 40px 0px 0 0;
	width: 440px;
}
#cholesterol-note p {
	color: #000;
	font-weight: normal;
	margin: 40px 0px -20px;
	width: 440px;
}
.close {
	background: url(../images/x.png) 0 0 no-repeat;
	display: block;
	float: right;
	height: 20px;
	left: 475px;
	position: absolute;
	text-indent: -9999px;
	top: 20px;
	width: 23px;
}
#row-two {
	margin: 10px 0 0 0;
	width: 154px;
}
#pick-a-fish {
	background: url(../images/pick-a-fish.png) 0 0 no-repeat;
	display: block;
	float: left;
	height: 27px;
	margin: 10px 0 0 0;
	text-indent: -9999px;
	width: 154px;
}
#reset {
	background: url(../images/reset.png) 0 0 no-repeat;
	cursor: pointer;
	display: block;
	float: right;
	height: 40px;
	padding: 0 3px 0 0;
	text-indent: -9999px;
	width: 93px;	
}
#reset:hover {
	background: url(../images/reset.png) 0 -40px no-repeat;
}
#mat-wrapper {
	background: url(../images/mat-border.png) 0 0 no-repeat;	
	height: 698px;
	left: -48px;
	padding: 32px 0 0 35px;
	position: relative;
	top: -10px;
	width: 1022px;
}
#mat {
	background: url(../images/mat-inner.jpg) 0 0 no-repeat;	
	height: 653px;
	width: 983px;
}
#fish-thumb-wrap {
	margin: 0 auto;
	padding: 10px 0 0 0;
	width: 980px;
}	
.fish-thumb {
	float: left;
	height: 145px;
	margin: 5px 2px 5px;
	padding: 5px 0 0 0;
	position: relative;
	text-align: center;
	width: 134px;
}
.fish-thumb:hover  {
	background: url(../images/white.png) repeat;
}
.fish-22, .fish-23, .fish-24, .fish-25 {
}
.fish-thumb a {
	color: #333;
	display: block;
	font-size: 18px;
	font-weight: bold;
	line-height: 16px;
	text-decoration: none;
	text-transform: lowercase;
	width: 134px;
}
.fish-thumb a:hover {
	color: #3FA9D9;
}
.fish-thumb a:active {
	color: #06347A;
	outline: none;
}
img.omega {
	position: absolute;
	top: 11px;
	left: 91px;
}
.fish-thumb span {
	position: relative;
	top: -4px;	
}
#omega-3-note {
	background: url(../images/omega-3-note.png) 0 4px no-repeat;
	color: #333;
	font-weight: bold;
	float: left;
	height: 61px;
	margin: 28px 0 0 22px;
	padding: 0 0 0 25px;
	width: 367px;
}
#cholesterol-note {
	background: url(../images/cholesterol-note.png) -2px 0px no-repeat;
	color: #333;
	font-weight: bold;
	float: left;Giro
	height: 61px;
	margin: 28px 0 0 22px;
	padding: 0 0 0 25px;
	position: relative;
	width: 367px;
}
#cholesterol-note a {
	color: #333;	
}
#cholesterol-note .note {
	background: url(../images/box-longer.png) 0 0 no-repeat;
	height: 448px;
	padding: 5px 45px 0;
	position: absolute;
	right: -23px;
	width: 443px;
	z-index: 100;
}
#cholesterol-note .note-shadow {
	background: url(../images/dshadow.png) 0 0 no-repeat;
	height: 31px;
	margin: 0;
	padding: 0px 45px;
	position: absolute;
	right: -23px;
	top: 473px;
	width: 443px;
	z-index: 100;
}
#full-size {
	height: 575px;
	overflow: hidden;
	padding: 25px 40px 0;	
}
#full-size img {
	float: left;
	margin-top: 50px;	
}
.nutrition {
	background: url(../images/white.png) repeat;
	float: left;
	min-height: 440px;
	margin: 10px 0 0 15px;
	overflow: auto;
	padding: 10px 15px 10px 15px;
	width: 350px;
}
.salmon-info {
	background: url(../images/white.png) repeat;
	float: left;
	min-height: 440px;
	margin: 10px 0 0 15px;
	overflow: auto;
	padding: 10px 15px 10px 15px;
	width: 350px;
}
.nutrition h2 {
	border-bottom: 2px solid #3FA9D9;
	color: 	#06347A;
	font-size: 30px;
	font-weight: bold;
	text-shadow: 0 1px 2px #BB7E16;
	text-transform: capitalize;
}
span.fishName {
	text-transform: lowercase;	
}
.nutrition li, .nutrition td {
	font-size: 14px;
	margin: 0.5em 0;
	padding: 0 0 0 20px;
}
.nutrition td:first-child {
	text-align:right;	
}
.readmore {
	color: #06347A;
	font-weight: bold;	
}
#farmed-wild {
	font-weight: bold;	
	float: right;	
}
#farmed-wild a {
	color: #06347A;	
}
.salmon-info h2 {
	border-bottom: 2px solid #3FA9D9;
	color: 	#06347A;
	font-size: 30px;
	font-weight: bold;
	text-shadow: 0 1px 2px #BB7E16;
}
/******* Text */
.bodycopy {
	overflow: auto;	
}

#start, #result {
	float: left;
	padding: 0 30px 0 90px;
	width: 540px;
}
#start h2 {
	background: url(../images/seafood-calculator.gif) 0 0 no-repeat;
	text-indent: -9999px;	
}
#result h2 {
	background: url(../images/results.gif) 0 0 no-repeat;
	text-indent: -9999px;	
}
#result .fishName {
	text-transform: capitalize;	
}
#facebook {
	clear: right;
	float: right;
	padding: 0 50px 0 0;
	width: 250px;	
}
#footer {
	clear: both;
	float: left;
	padding: 2em 0;
	width: 100%;	
}
#footer p {
	font-size: 12px;
	margin: 1em 0 0 0;
	text-align: center;	
}