@charset "UTF-8";

/* CSS Document */

/*FIXES & HACKS */

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

* {
  outline:none
}

img {
  border:none
}

sup {
  font-size: 9px;
  line-height: 0;
}

body {
  margin: 0px;
  padding: 0px;
  background: #EAEB85 url(../images/bkgrd.png) repeat-x center top;
  color: #2E2C2B;
  font-size:18px;
  line-height:24px;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:normal;
}

.wrapper {
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.header {
  height: 130px;
  position: relative;
}

a#logo {
  background: url(../images/logo-gotmilk.png) no-repeat 0px 0px;
  height: 87px;
  width: 179px;
  position: absolute;
  left: 30px;
  top: 28px;
  text-indent: -9999em;
  display: block;
}

ul#mainnav {
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 68px;
  right: 0px;
}

ul#mainnav li {
  margin: 0px 0px 0px 30px;
  padding: 0px;
  list-style: none;
  float: left;
  font-size: 20px;
  color: #000000;
  text-decoration: none;
}

ul#mainnav li a {
  color: #000000;
  text-decoration: none;
}

ul#mainnav li a:hover {
  text-decoration: underline;
}

#bannershell {
  background: url(../images/banner-shell.png) no-repeat 0px 20px;
  height: 420px;
  width: 960px;
}

#footer {
  background: url(../images/fence.png) repeat-x;
  height: 520px;
  margin-top: 30px;
  position: relative;
  z-index: 10;
}

.sign {
  height: 260px;
  width: 330px;
  position: absolute;
  top: -8px;
  z-index: 5;
}

.sign.sign1 {
  background: url(../images/tell-us-your-story.png) no-repeat 0px 0px;
  left: -25px;
}

.sign.sign2 {
  background: url(../images/free-straws.png) no-repeat 0px 0px;
  left: 315px;
}

.sign.sign3 {
  background: url(../images/twitter-box.png) no-repeat 0px 0px;
  right: -25px;
}


.sign3_padding {
 padding: 46px 50px 20px 59px;
 font-size:13px;
 line-height:17px; 
}

.tweet_divider {
 font-size:1px;
 line-height:1px;
 height:7px;
 border-bottom: 1px solid #aaa;
 margin-bottom:6px; 
}

#twitterbirds {
  background: url(../images/twitter-birds.png) no-repeat 0px 0px;
  height: 48px;
  width: 85px;
  position: absolute;
  z-index: 10;
  right: 215px;
  top: -30px;
}

#overheard {
  background: url(../images/overheard.png) no-repeat 0px 0px;
  height: 64px;
  width: 198px;
  position: absolute;
  z-index: 10;
  right: 25px;
  top: -20px;
}

.cowlarge {
  background: url(../images/cow.png);
  height: 388px;
  width: 285px;
  z-index: 20;
  float: left;
}

span.namethatcowtext {
  background: url(../images/namethecow.png) no-repeat 0px 0px;
  height: 98px;
  width: 416px;
  position: absolute;
  top: 60px;
  left: 350px;
  display: block;
  text-indent: -9999em;
}

.bannertext {
  font-size: 22px;
  line-height: 27px;
  width: 510px;
  float: left;
  margin-left: 30px;
  margin-top: 70px;
}

span.bannertext img {
  padding-bottom: 15px;
}

.submitname {
  background: url(../images/submitname-btn.png) no-repeat 0px 0px;
  height: 63px;
  width: 257px;
  text-indent: -9999em;
  display: block;
  clear: left;
  float: left;
  margin-top: 15px;
}

#footer_links_container {
 padding-top:380px;
}

#footer_links_container a {
 color:#E0CEBA; 
}

#footer_facebook_icons {
 float:right;
 text-align:right;
 width:200px; 
}

#footer p {
  font-size: 16px;
  line-height: 20px;
  color: #E0CEBA;
  float: left;
  padding: 0px;
  margin-bottom: 0px;
}

#footer p.smallprint {
 font-size:13px;
 line-height:20px;
 width:650px; 
 padding-top:10px;
}

#footer p.smallprint a {
 color:#E0CEBA;
 text-decoration:underline; 
}

#footer p.smallprint a:hover {
 color:#f6f0ea; 
}

#footerCredits {
  display:none;  
}

ul#footernav {
  font-size: 16px;
  line-height: 20px;
  padding: 0px;
  float: right;
  margin: 0px 0px 0px;
  height: 17px;
}

ul#footernav li {
  font-size: 17px;
  color: #E0CEBA;
  list-style: none;
  float: left;
  margin: 0px;
  padding: 0px;
  line-height: 17px;
  height: 17px;
}

ul#footernav li a {
  color: #E0CEBA;
  text-decoration: none;
  font-size: 17px;
  line-height: 17px;
  border-right: 1px solid #E0CEBA;
  height: 17px;
  padding-right: 15px;
  padding-left: 15px;
}

ul#footernav li a.last {
  border-right-style: none;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

.full-top {
  background: url(../images/full-banner-top.png) no-repeat 0px 0px;
  height: 30px;
  margin-top: 20px;
}

.full-bottom {
  background: url(../images/full-banner-bottom.png) no-repeat 0px 0px;
  height: 30px;
  clear: both;
}

.container {
  position: relative;
  background: url(../images/container.png) repeat 0px 0px;
  padding: 10px 40px;
}

p {
  margin: 0px;
  padding: 20px 0px 0px;
}

a:link,
a:visited {
  color: #DB1E7A;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #000000;
}

h1#about-h1 {
  background: url(../images/headers/about-h1.png) no-repeat;
  width: 425px;
}

h1.headings {
  background: no-repeat 0px 0px;
  text-indent: -9999em;
  display: block;
  height: 34px;
  margin: 0px;
  padding: 0px;
}

#cow-fence {
  background: url(../images/cow-fence.png) no-repeat 0px 0px;
  height: 340px;
  width: 266px;
  position: absolute;
  z-index: 12;
  left: 200px;
  top: -30px;
}

a#fence-bubble {
  background: url(../images/fence-bubbles.png) no-repeat 0px 0px;
  text-indent: -9999em;
  display: block;
  height: 219px;
  width: 257px;
  position: absolute;
  left: 440px;
  z-index: 20;
}

a#fence-bubble:hover {
  background-image: url(../images/fence-bubbles.png);
  background-position: -257px 0;
}

.rightcol-top {
  background: url(../images/rightcol-top.png) no-repeat 0px 0px;
  height: 30px;
}

.rightcol-bottom {
  background: url(../images/rightcol-btm.png) no-repeat 0px 0px;
  height: 30px;
  position: relative;
}

.rightcol {
  float: right;
  width: 735px;
}

.leftcol {
  background: url(../images/subnav-sign.png) no-repeat 0px 0px;
  height: 390px;
  width: 200px;
  float: left;
}

ul#subnav {
  margin: 55px 0px 0px;
  padding: 0px 0px 0px 20px;
}

ul#subnav li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul#subnav li a {
  background-image: url(../images/subnav.png);
  background-repeat:no-repeat;
  background-position:0 0;
  text-indent: -9999em;
  display: block;
  height: 63px;
  width: 177px;
}

ul#subnav li#chart a:hover,
#ChartPage ul#subnav li#chart a {
  background-position: -177px 0
}

ul#subnav li#nutrition a {
  background-position: 0 -69px
}

ul#subnav li#nutrition a:hover,
#NutritionPage ul#subnav li#nutrition a {
  background-position: -177px -69px
}

ul#subnav li#resources a {
  background-position: 0 -138px
}

ul#subnav li#resources a:hover,
#ResourcesPage ul#subnav li#resources a {
  background-position: -177px -138px
}

span#strawberry-sm {
  background: url(../images/strawberry-sm.png) no-repeat 0px 0px;
  height: 184px;
  width: 223px;
  position: absolute;
  left: -157px;
  top: -70px;
}

span#strawberry-lrg {
  background: url(../images/strawberry-lrg.png) no-repeat 0px 0px;
  height: 214px;
  width: 244px;
  position: absolute;
  top: -80px;
  right: -110px;
}

h1#nutrition-h1 {
  background: url(../images/headers/nutrition-h1.png) no-repeat;
  width: 425px;
}

h1#chart-h1 {
  background: url(../images/headers/chart-h1.png) no-repeat;
  width: 425px;
}

h1#products-h1 {
  background: url(../images/headers/products-h1.png) no-repeat;
  width: 425px;
}

h1#your-story-h1 {
  background: url(../images/headers/your-story-h1.png) no-repeat;
  width: 425px;
}

h1#where-to-buy-h1 {
  background: url(../images/headers/where-to-buy-h1.png) no-repeat;
  width: 425px;
}

h1#whats-new-h1 {
  background: url(../images/headers/announcements-h1.png) no-repeat;
  width: 400px;
  height: 55px;
}

h1#media-h1 {
  background: url(../images/headers/media-h1.png) no-repeat;
  width: 523px;
  height: 55px;
}
h1#video-h1 {
  background: url(../images/headers/video-h1.png) no-repeat;
  width: 523px;
  height: 55px;
}
h1#facebook-h1 {
  background: url(../images/headers/facebook-h1.png) no-repeat;
  width: 398px;
  height: 60px;
  margin-bottom: 30px;
}

.products-img, .seasonal-img {
  background: url(../images/products.png);
  height: 770px;
  width: 880px;
  margin-top: 20px;
  position: relative;
}

.seasonal-img {
	background: url(../images/seasonal.png);
}

ul#productlist, ul#seasonal {
  margin: 0px;
  padding: 0px;
}

ul#productlist li, ul#seasonal li {
  width: 160px;
  float: left;
  list-style: none;
  margin: 0px;
  padding: 20px 30px 0px;
}

ul#seasonal li {
	width: 136px;
	padding: 20px 6px 0px 4px;
}

ul#productlist li p, ul#seasonal li p {
  margin: 0px;
  padding: 5px 0px 0px;
  font-size: 16px;
  line-height: 16px;
  color: #161616;
}

ul#seasonal li p {
	font-size: 13px;
	line-height: 14px;
}

ul#productlist li span, ul#seasonal li span {
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  color: #000000;
  line-height: 18px;
  font-weight: bold;
}

ul#seasonal li span {
	font-size: 17px;
	line-height: 17px;
}

#family-pack, #single-serve  {
  height: 120px;
  width: 420px;
  position: absolute;
  right: 20px;
  bottom: 10px;
}

#single-serve {
	width: 425px;
	bottom: 30px;
}

h3,
h3 a:link,
h3 a:visited {
  color: #000000;
  margin: 0px;
  padding: 0px;
  font-size: 19px;
  font-weight: bold;
}

#single-serve h3, #single-serve h3 a:link, #single-serve h3 a:visited {
	font-size: 18px;
}

#single-serve h2 {
	margin: 5px 0px;
	padding: 0px;
	color: #fff;
	font-size: 19px;
	font-weight: bold;
}

#family-pack p, #single-serve p {
  font-size: 18px;
  margin: 0px;
  padding: 5px 0px 0px;
}

h1#resources-h1 {
  background: url(../images/headers/resources-h1.png) no-repeat;
  width: 425px;
}

.divider {
  height: 40px;
  width: 880px;
  clear: both;
  position: relative;
}

span.bar {
  height: 1px;
  width: 735px;
  position: absolute;
  left: -40px;
  top: 20px;
  z-index: 20;
  border-top: 1px solid #999999;
}

.padding {
  height: 20px;
}

span.date {
  font-size: 16px;
  font-style: oblique;
  display: block;
}

a.article-btn {
  background: url(../images/article-btn.png) no-repeat 0px 0px;
  display: block;
  height: 47px;
  width: 149px;
  margin-top: 8px;
  text-indent: -9999em;
}

a.article-btn:hover {
  background: url(../images/article-btn.png) no-repeat -149px 0px;
}

a.home-click-here-btn {
  background: url(../images/click-here-btn.png) no-repeat 0px 0px;
  display: block;
  height: 46px;
  width: 140px;
  margin: 170px 0 0 48px;
  text-indent: -9999em;
  overflow:hidden;
}

a.home-click-here-btn:hover {
  background: url(../images/click-here-btn.png) no-repeat -146px 0px;
}

h4 {
  color: #000000;
  margin: 0px;
  padding: 20px 0px 0px;
  font-size: 19px;
  font-weight: bold;
}

.nutrition-banner {
  background: url(../images/nutrition-banner.png) no-repeat 0px 0px;
}

.nutritiontext {
  font-size: 22px;
  line-height: 27px;
  width: 410px;
  float: left;
  margin-left: 360px;
  margin-top: 70px;
}

.products-banner {
  background: url(../images/products-banner.png) no-repeat 0px 0px;
}

.productbanner-text {
  font-size: 22px;
  line-height: 27px;
  width: 410px;
  float: left;
  margin-left: 500px;
  margin-top: 70px;
}

.gotmilk-banner {
  background: url(../images/got-milk.png) no-repeat 0px 0px;
}

.gotmilk-button {
  background: url(../images/learn-more-lrg.png) no-repeat 0px 0px;
  height: 62px;
  width: 199px;
  margin-top: 210px;
  margin-left: 50px;
  text-indent: -9999em;
  display: block;
}

h1#gotmilk-h1 {
  background: url(../images/headers/got-milk-h1.png) no-repeat;
  width: 600px;
}

#gotmilk-splash {
  background: url(../images/gotmilk-splash.png);
  height: 646px;
  width: 960px;
  position: absolute;
  z-index: 20;
  top: -40px;
}

.holder {
  position: relative;
  height: 550px;
}

h1#name-that-cow-h1 {
  background: url(../images/headers/name-the-cow-h1.png) no-repeat;
  width: 435px;
}

h1#create-a-flavor-h1 {
  background: url(../images/headers/create-a-flavor-h1.png) no-repeat;
  width: 435px;
}

.cow-overlay {
  position: absolute;
  z-index: 4;
  left: 0px;
  top: -40px;
}

.holder.cowholder {
  height: 370px;
}

.large-bubble {
  background: url(../images/bubble-large.png) no-repeat;
  height: 411px;
  width: 489px;
  position: absolute;
  top: -40px;
  right: 70px;
  z-index: 30;
}

h1#my-name-is-h1 {
  background: url(../images/headers/my-name-is-h1.png) no-repeat;
  width: 310px;
  height: 50px;
}


.bubble-holder {
  padding-top: 110px;
  padding-left: 100px;
}

/* ============================= FORM styles ============================= */

form {
  margin: 0px;
  padding: 0px;
}

#bubbleform input.name {
  background: #F2F2F2;
  border: 1px solid #CCCCCC;
  font: normal 24px/24px Helvetica;
  color: #000000;
  height: 25px;
  width: 315px;
  margin-top: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
}

.submitform {
  clear: both;
  padding-top: 15px;
}


.redstar {
  font-weight:bold;
  color:#db1e7a;  
}

table.contactform {
}

table.contactform td {
  padding: 5px 5px 5px 5px;
  font-size:18px;
  line-height:24px;
  font-family:Arial, Helvetica, sans-serif;
  color: #2E2C2B;
}

table.contactform td.errors {
 font-weight:bold;
 color:#db1e7a; 
}

.contactform .textfield,
.contactform select {
  background: #f9f9f9;
  border: 1px solid #CCCCCC;
  font-size:20px;
  line-height:20px;
  font-weight:normal;
  font-family:Arial, Helvetica, sans-serif;
  color: #000000;
  height: 21px;
  width: 315px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.contactform select {
  height:auto;
  width: 326px; 
}

.contactform .textarea {
  background: #f9f9f9;
  border: 1px solid #CCCCCC;
  font-size:16px;
  line-height:20px;
  font-weight:normal;
  font-family:Arial, Helvetica, sans-serif;
  color: #000000;
  width: 500px;
  padding: 10px;
}


/* ============================= store locator page ============================= */


.top_form {
  float:right;
  width:400px;
  text-align:right;
  padding-top:15px; 
  font-size:17px;
  line-height:31px;
  color:#08435E; 
  display:relative;
  vertical-align:top;
}

.top_form label {
 display:block;
 width:190px;
 float:left;
}


.searchfield {
  vertical-align:top;
  margin:2px 0 0 0;
  padding: 0 6px;
  border: solid 1px #bbb;
  font-size:15px;
  line-height:26px;
  color:#666;
  height:26px;
  width:135px;
  font-family:Arial, Helvetica, sans-serif;
  
}

.searchbutton {
  margin:0;
  padding:0;
  vertical-align:top;
}

.locator_divider {
 font-size:1px;
 line-height:1px;
 height:20px;
 border-bottom: 1px solid #bb9;
 margin-bottom:20px; 
}

.additional_form {
 width:300px;
 float:left;
}

.pagination {
 text-align:right;
 font-size:14px;
 line-height:16px;
 font-weight:bold;
 width:550px;
 float:right;
 padding: 4px 0; 
}

.pagination a,
.pagination span {
 padding: 3px 4px; 
}

.pagination .current {
 background-color:#fff;
 border: solid 1px #bbb; 
}

/* ============================= a few things for naming the cow ============================= */

p.cows_name_in_bubble, p.flavors_name_in_bubble {
  text-align:center; 
  margin-right:50px; 
  font-size:32px;
  line-height:38px;
  padding: 25px 0 0 0;
}

.nametag {
 text-align:center;
 width:235px;
 font-size:22px;
 line-height:30px;
 position:relative;
 margin-top:-175px;
 margin-left:120px; 
}



/* ============================= misc text styles ============================= */


.size14 {
 font-size:14px !important;
 line-height:20px !important; 
}

.footnotes {
 font-size:14px;
 line-height:20px; 
}

.clear {
 font-size:1px;
 line-height:1px;
 height:1px;
 clear:both; 
}

a.blue {
 color:#00a7dd; 
}




/* ============================= zzz ============================= */
/*.arrow {
	position: absolute;
	top: 200px;
	display: block;
	width: 101px;
	height: 92px;
	margin: 0px;
	text-indent: -9999px;
	cursor: pointer;
}
.arrow.left {
	left: 369px;
	background: url(../images/arrows.png) no-repeat 0px 0px;
	top: 201px;
}
.arrow.right {
	right: 369px;
	background: url(../images/arrows.png) no-repeat -101px 0px;
}
.arrow.left:hover {
	background-position: 0px -92px;
}
.arrow.right:hover {
	background-position: -101px -92px;
}*/
.arrow {
	position: absolute;
	top: 253px;
	display: block;
	width: 55px;
	height: 50px;
	margin: 0px;
	text-indent: -9999px;
	cursor: pointer;
}
.arrow.left {
	left: 415px;
	background: url(../images/arrows-small.png) no-repeat 0px 0px;
	top: 254px;
}
.arrow.right {
	right: 415px;
	background: url(../images/arrows-small.png) no-repeat -55px 0px;
}
.arrow.left:hover {
	background-position: 0px -50px;
}
.arrow.right:hover {
	background-position: -55px -50px;
}
#video_prev.arrow, #video_next.arrow {
	top: 247px;
}
.cycle {
	margin-top: 15px;
}
.cycle > div {
	width: 100%;
}
.cycle a {
	display: block;
	color: #000;
	float: left;
	width: 25%;
	height: 160px;
	margin: 0;
	padding: 0 4%;
	border-left: 1px dashed #aaa;
}
.cycle div a:first-child {
	border-left: none;
}
.cycle a:hover {
	color: #db1e7a;
	background: url(../images/hover-glow.png) no-repeat center;
}
.cycle a h3 {
	color: #000;
}
.cycle a:hover h3 {
	color: #db1e7a;
}
#video_cycle a {
	height: 200px;
}
#video_cycle img {
	width: 120px;
	margin: 0 0 15px 50px;
}
.cycle h3 {
	margin-top: 45px;
	margin-bottom: 5px;
}
.cycle p {
	font-size: 15px;
	line-height: 18px;
	padding: 0;
}
.cycle a:hover {
	text-decoration: none;
}

.small-width {
	float: left;
	width: 680px;
	margin-right: 20px;
}
.small-width .full-top {
  background: url(../images/full-banner-top-small.png) no-repeat 0px 0px;
}
.small-width .full-bottom {
  background: url(../images/full-banner-bottom-small.png) no-repeat 0px 0px;
}
.small-width .container {
	padding: 8px 40px;
}
.small-width a {
	display: block;
	padding: 9px 0;
}
.small-width p {
	font-size: 15px;
	padding: 3px 0 0;
}
.small-width a:hover {
	text-decoration: none;
}
.small-width hr {
	color: #e6e6e6;
	background: #e6e6e6;
	border: none;
	border-top: 1px solid #e6e6e6;
}
#ad-box {
	float: left;
	width: 260px;
	margin-top: 22px;
}