/* BBD */

@import "reset.css";
@import "cols.css";
@import "forms.css";

/* = structure */

html, body { height: 100%; }

body {
	background: #539bc3;
	color: #636363;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	/*line-height: 1.4em;*/
	text-align: center;
}

#hdr, #intro, #gear, #links, #sub, #ftr, #nav {
	width: 960px;
	margin: 0 auto;
	text-align: left;	
}

.documentary-teaser {
	background: rgb(143,185,214);
	color: #fff;
	margin: 0 0 2em 0;
	padding: .7em 1.2em;
}
.documentary-teaser h2 {
	color: rgb(58,108,136);
}

.snow {
	background: url(skin/snow.gif) 10px -17px no-repeat;
}


#nav {margin-top: 7px; margin-bottom: 0; /*-3px;*/ }

#nav {background-color: rgb(143,185,214); /*rgb(58,108,136);*/ border-top: solid 1px #fff; }
#nav ul {padding-left: 1em; padding-top: 0px; padding-bottom: 0px; margin: 0 0 -1px 0; }
#nav li {float: left; text-align: left; }
#nav li a {display: block; color: #fff; font-weight: bold;  padding: .5em .7em .5em .7em; text-decoration: none; border-right: 0px solid rgb(255,255,255); /*rgb(143,185,215)*/ }
#nav li a:hover { /*background-color: rgb(143,185,214);*/ color: rgb(58,108,136); }	
#nav li {background-position: 50% 50%; background-repeat: no-repeat; border-right: 1px solid #fff;}

#nav li.new {background: transparent url(skin/t_new22.gif) 0 50% no-repeat;  padding-left: 45px;  }

body.pgVote #nav li.lnkVote {background-image: url(skin/g_difference.jpg); }
body.pgProducts #nav li.lnkProducts {background-image: url(skin/g_prod.jpg); }
body.pgBuzz #nav li.lnkBuzz {background-image: url(skin/g_buzz.jpg); }
body.pgFriend #nav li.lnkFriend {background-image: url(skin/g_friend.jpg); }
body.pgRetailer #nav li.lnkRetailer {background-image: url(skin/g_retailer.jpg); }
body.pgBulk #nav li.lnkBulk {background-image: url(skin/g_bulk.jpg); }

body.pgProducts #nav li.lnkProducts a, body.pgProducts #nav li.lnkProducts a:hover,
body.pgVote #nav li.lnkVote a, body.pgVote #nav li.lnkVote a:hover,
body.pgBuzz #nav li.lnkBuzz a, body.pgBuzz #nav li.lnkBuzz a:hover,
body.pgFriend #nav li.lnkFriend a, body.pgFriend #nav li.lnkFriend a:hover,
body.pgRetailer #nav li.lnkRetailer a, body.pgRetailer #nav li.lnkRetailer a:hover
body.pgBulk #nav li.lnkBulk a, body.pgBulk #nav li.lnkBulk a:hover {color: rgb(58,108,136); cursor: text; background-color: Transparent; /*#fff;*/ }

body.pgProducts #nav li.lnkProducts a, body.pgProducts #nav li.lnkProducts a:hover {background-image: url(skin/g_prod.jpg); }

body.pgThankYou #hdr, body.pgBuzz #hdr, 
body.pgRetailer #hdr {height: 145px !important; }
body.pgVote #hdr {height: 175px		; }

body.pgtellafriend #hdr, body.pgtellafriend #intro, body.pgtellafriend #gear, body.pgtellafriend #links, body.pgtellafriend #sub, body.pgtellafriend #ftr {
	width: 400px; }
	
body.pgBuzz #intro .inner {padding: 5em 2em 2em 2em; }

#hdr:after, #intro:after, #gear:after, #links:after, #sub:after, #ftr:after, #nav ul:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
#hdr, #intro, #gear, #links, #sub, #ftr, #nav ul {zoom: 1; }

#hdr, #intro, #gear, #sub {background: #fff; }

#hdr {
	background-color: #539bc3;
	background-image: url(skin/hdr.jpg);
	background-position: 0 100%;
	background-repeat: no-repeat;
	height: 125px;
}

body.pgVote #hdr {
	background-image: url(skin/hdr-difference.jpg);
}

#gear {
	border-top: 0px solid #539bc3;
	margin-bottom: .3em;
}

#links {
	margin-bottom: 1em;
}

#sub {
	background: #fff;
	margin-bottom: 1em;
}

#ftr {
	color: #eee;
	margin-bottom: 2em; 
}



/* = basic formatting */

h1 {font-size: 2em; line-height: 1.3; color: #06a; }
body.pgVote h1 {font-size: 1.5em; }
h2 {font-size: 1.5em; line-height: 1.3; font-weight: normal; }
h3 {font-size: 1.3em; line-height: 1.3; font-weight: normal; }
h4 {font-size: 1.1em; line-height: 1.3; font-weight: bold; }
big {font-size: 1.2em; line-height: 1.5; }
h1,h2,h3{margin: 0 0 .2em 0; }
h4 {margin: 0 0 .5em 0; }
p, ul, ol {margin: 0 0 1em 0; }
li {margin: 0 0 .2em 0; }
strong {color: #06a; font-weight: bold; }
.bf {font-weight: bold; }
em {font-style: italic; }
a, a:link {color: #06a; text-decoration: underline; }
a:hover {color: #039; text-decoration: underline; }
a:active {color: #039; text-decoration: none; }
a.ext, a.ext:link {color: #999; text-decoration: none; }
a.ext:hover, a.ext:active {text-decoration: underline; }
h3 {font-size: 1.3em; line-height: 1.3; }
.clr {text-decoration: line-through; font-weight: normal; }
.saleprice {font-family: fancy; font-size: 1.1em; }
hr {width: 30px; height: 0px; margin: 1.2em auto 1.6em auto;  }


/* = header */

#hdr {margin-top: 15px; position: relative; }
#hdr h2 {display: none; }
#hdr h1 {display: none; }

/* = dotshots pols */

#dotshots {position: absolute; left: 320px;  }
#dotshots img {position: absolute;  }
.p-1 {left: 0; top: -10px; }
.p-2 {left: 110px; top: -10px; }
.p-3 {left: 250px; top: -10px; }
.p-4 {left: 365px; top: -10px; }
.p-5 {left: 480px; top: -10px; }
.pd-1 {left: 135px; top: 110px; }
.pd-2 {left: 245px; top: 20px; }
.pd-3 {left: 365px; top: 100px; }
.pd-4 {left: 476px; top: -3px; }

.p-11 {left: 0; top: -10px; }
.p-12 {left: 120px; top: -5px; }
.p-13 {left: 240px; top: 0px; }
.p-14 {left: 365px; top: -10px; }
.p-15 {left: 490px; top: -10px; }
.pd-11 {left: 120px; top: 110px; }
.pd-12 {left: 235px; top: 20px; }
.pd-13 {left: 365px; top: 100px; }
.pd-14 {left: 485px; top: -3px; }


/* May 2007 - home */
.p-1a {left: -5px; top: -10px; }
.p-2a {left: 115px; top: -10px; }
.p-3a {left: 240px; top: -10px; }
.p-4a {left: 320px; top: -57px; }

.p-1b {left: 0px; top: -10px; }
.p-2b {left: 155px; top: -10px; }
.p-3b {left: 290px; top: -10px; }
.p-4b {left: 420px; top: -0px; }
.p-5b {left: 525px; top: -10px; }

.pd-1a {left: 120px; top: 110px; }
.pd-2a {left: 245px; top: 20px; }
.pd-3a {left: 380px; top: 100px; }
.pd-4a {left: 490px; top: 20px; }

.pd-4c {left: 547px; top: 10px; }

.pd-1b {left: 165px; top: 110px; }
.pd-2b {left: 300px; top: 20px; }
.pd-3b {left: 427px; /*420px;*/ top: 95px; /*105px;*/ }
.pd-4b {left: 535px; top: 25px; }

.p-11a {left: 0; top: -10px; }
.p-12a {left: 110px; top: -10px; }
.p-13a {left: 245px; top: 0px; }
.p-14a {left: 355px; top: -10px; }
.p-15a {left: 475px; top: -30px; }
.pd-11a {left: 150px; top: 110px; }
.pd-12a {left: 235px; top: 20px; }
.pd-13a {left: 365px; top: 100px; }
.pd-14a {left: 485px; top: -3px; }

/* = buzz header images */
.pgBuzz .p-1 {left: 0; top: -10px;}
.pgBuzz .p-2 {left: 120px; top: 0px;}
.pgBuzz .p-3 {left: 232px; top: -20px;}
.pgBuzz .p-4 {left: 370px; top: -10px;}
.pgBuzz .p-5 {left: 475px; top: -30px;}
.pgBuzz .pd-1 {left: 130px; top: 70px;}
.pgBuzz .pd-2 {left: 240px; top: 50px;}
.pgBuzz .pd-3 {left: 365px; top: 100px;}
.pgBuzz .pd-4 {left: 485px; top: -3px;}

/* = votes header images */
.pgVote .p-1 {left: -35px; top: -35px; }
.pgVote .p-2 {left: 140px; top: -10px;}
.pgVote .p-3 {left: 250px; top: -10px;}
.pgVote .p-4 {left: 365px; top: -10px;}
.pgVote .p-5 {left: 480px; top: -10px;}
.pgVote .pd-1 {left: 135px; top: 110px;}
.pgVote .pd-2 {left: 245px; top: 20px;}
.pgVote .pd-3 {left: 365px; top: 100px;}
.pgVote .pd-4 {left: 486px; top: 15px;}


.pgRetailer .p-1 {left: 0; top: -20px; }
.pgRetailer .p-2 {left: 110px; top: -35px; }
.pgRetailer .p-3 {left: 250px; top: -10px; }
.pgRetailer .p-4 {left: 365px; top: -10px; }
.pgRetailer .p-5 {left: 490px; top: -5px; }
.pgRetailer .pd-1 {left: 135px; top: 110px; }
.pgRetailer .pd-2 {left: 245px; top: 20px; }
.pgRetailer .pd-3 {left: 365px; top: 100px; }
.pgRetailer .pd-4 {left: 482px; top: 5px; }


/* ------ */

ul.norm {
	color: rgb(83,155,195);
	list-style-type: disc;
	padding-left: 1.2em;
}

ul.norm li span {
	color: rgb(99,99,99);
}

/* = link buttons */

.lnkbtn {margin: 0; }
.lnkbtn  a {
	background-color: rgb(179,210,229);
	color: rgb(1,107,167);
	display: block; 
	margin: 1em;
	padding: 1em;
	text-decoration: none;
}

.lnkbtn a:hover { color: rgb(1,107,167); text-decoration: none; }

.lnkbtn .lnk-tellfriend {background: rgb(179,210,229) url(skin/i_em.png) 13px 50% no-repeat; padding-left: 50px; }
.lnkbtn .lnk-retailers {background: rgb(179,210,229) url(skin/i_arrow.png) 13px 50% no-repeat; padding-left: 50px; }

.bulk-note {margin-top:  0px; }
.lnk-tell-a-friend {margin-top: 0px; }
.lnk-tellfriend, .lnk-retailers {line-height: 40px; }

/* = vote teaser */

.vote-teaser {
	background: rgb(83,155,195) url(skin/check.gif) 0 50% no-repeat; 
	color: #fff;
	font-size: .8em; 
	left: -.9em; 
	padding: .8em 1.2em 1em 1.2em; 
	position: relative; 
	top: 2em;
	margin-bottom: 0;
	margin-top: -1.8em;
}

.bd {border-bottom: 5px solid rgb(83,155,195) }
.vtc {padding: 10px; }
.vote-teaser-2 {background: rgb(83,155,195); color: #fff; font-size: 1.1em; line-height: 1.3; padding: .8em 1.2em; }

.vote-teaser a, .vote-teaser-2 a {font-weight: bold; color: #fff; text-decoration: underline; }
.vote-teaser a:hover, .vote-teaser-2 a:hover {text-decoration: underline; }

/* = footer */
#ftr p {padding: 0 2em; }
#ftr a, #ftr a:hover {color: #eee; }


/* = intro */

.about {
	font-size: 1.2em;
	line-height: 1.4;
	padding: 1em 1em 2em 1em;
}

.buzz {padding: 3em 1em 2em 2em; }
.buzz2 {padding-top: 9em; line-height: 1.5;  padding-right: 3em; margin-bottom: -2em; }
.buzz3 {padding-top: 6.5em; }
.buzz3 big {font-size: 136%; }
.buzz small {padding-left: 6em; }

.tellafriend {margin: 5em 0 0 0; width: 400px; }
.tellafriend h3 {background-color: #539bc3; color: #fff; padding: .3em .3em .3em 5%; border-bottom: 3px solid #9fcbe3; margin: 0; }
.tellafriend form {width: 90%; background-color: #deeef7; padding: 5%; }
.tellafriend fieldset {padding-left: 0; }
.tellafriend fieldset.buttons {padding-left: 10em; }

body.pgtellafriend #intro {padding-top: 0; }
body.pgtellafriend .tellafriend {margin-top: 0em;}
body.pgtellafriend .tellafriend h3 {background-color: #fff; color: #359bc3; }

.success {background: #fff url(skin/smile_32.gif) 10px 1.2em no-repeat; border: 1px solid #359bc3; color: #359bc3; font-weight: bold; margin: 0 0 1em 0; padding: 1em 1.5em 0 50px; }

.monthcal {
	padding: 5em 2em 2em;
}

.monthcal td {border-right: 5px solid #fff; border-bottom: 5px solid #fff; }
.monthcal td {border: 1px solid #ddd; padding: 1em; }
.monthcal td {width: 16.5%; vertical-align: top; }
.monthcal .success {background-position: 10px 50%; }

/*.monthcal td div {border: 1px solid #ccc; width: 90%; height: 100%; }*/

/* = gear */

#gear .inner {padding: 1em 1em 1em 1em; }

.notevote {position: relative; top: -3px; font-weight: bold; font-size: .85em;}

#gear h1 {margin-bottom: .0em; }
.donation-note {background-image: url(skin/smile_24.gif); background-position: 0 50%; background-repeat: no-repeat; padding: 2px 0 3px 35px; }

#gear .row {margin: .3em 0 1em 0; padding: .5em 0 0 0;}

#gear .item {padding-top: 30px; }
#gear .nmarg .item {padding-top: 0px; }
#gear .new, #gear .btss, #gear .sale, #gear .original, #gear .great-gift {background-position: 0 0; background-repeat: no-repeat; }
#gear .great-gift {background-image: url(skin/t_gg2.gif); background-position: 100% -6px; padding-top: 30px; position: relative; top: -15px;} 
#gear .btss {background-image: url(skin/t_btss.gif); background-position: 100% -0px; padding-top: 50px; }
#gear .new {background-image: url(skin/t_new22.gif); background-position: 100% -3px; }
#gear .sale {background-image: url(skin/t_sale.gif); }
#gear .original{background-image: url(skin/t_original.gif); }

#gear .p-tag {padding-top: 10px; }

.prod {padding-left: 170px; }
.prod-mugs {padding-left: 140px; }
.prod img {float: left; left: -170px; margin-right: -165px; position: relative; }
.p-tag .prod {padding-left: 10px; }
.p-tag .prod img {float: none; left: 0; margin-right: 0; }
.prod-mugs img {float: left; left: -140px; margin-right: -135px; position: relative; }
.prod h4 {color: #017cc2; font-size: 1.1em; font-weight: bold; margin: 0 0 .4em 0;}
.prod p {margin: 0; }
.prod .size {margin: 0 0 .2em; }
.prod .shipping {font-size: 1.1em; }
.item big {color: #000; font-size: 1em; font-weight: bold; }

.jewelry .prod {padding-left: 0; }
.jewelry img {float: none; top: -26px; left: -7px; margin-bottom: -30px; }

.prod .price img {left: 0; margin-right: 0; }

.buy big {font-size: 1.1em; font-weight: bold; }
.buybtn {vertical-align: middle; }
.szopts {width: 100px; }
.buy {padding: .7em 0 0 0; text-align: center; }
.prod .buy {padding: 0; text-align: left; }
.buy form {margin: .5em 0 0 0; }
.prod:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.prod {zoom:1;} 

.saleprice {display: block; }
.saleprice img {left: 0; margin-right: 0; }

/* = links */
#links ul {background: #b3d2e5 url(skin/bl.gif) 0 100% no-repeat; height: 70px; }
#links li {display: inline; }
#links a {display: block; float: left; padding: 0 .3em; height: 100%; line-height: 65px; }

#links .lnk-morestuff {float: right; background: transparent url(skin/bl.gif) 0 100% no-repeat; border-left: 5px solid #539bc3; }
#links .lnk-morestuff img {vertical-align: middle; }

#links .lnk-tellfriend {background: transparent url(skin/i_em.png) 13px 50% no-repeat; padding-left: 45px; }
#links .lnk-retailers {background: transparent url(skin/i_arrow.png) 13px 50% no-repeat; padding-left: 45px; }

.lnk-dotshots {background: transparent url(skin/i_ds.gif) 13px 50% no-repeat; padding-left: 55px; height: 45px; line-height: 45px; display: block; }

/* = vote */

.vote-results { font-size: .9em; list-style-type: none; margin-left: 0; padding-left: 0;  }
.vote-results strong {background-color: #ff9; }

/* = sub */

#sub .inner {padding: 1em .7em; }
/*#dotshotimages {width: 570px; }*/
#dotshotimages img {margin: 0 5px 5px 0; }

.retailer {
	padding-top: 5em;
}


/* = dot shots */

/* = got dot (map) */
.map {padding-left: 1.5em; }



/* = overlay / enlarge image */

.enlarge {cursor: pointer; }

#lightbox{
	background-color:#fff;
	padding: 10px;
	position: fixed;
	border-bottom: 2px solid #999;
	border-right: 2px solid #999;
	text-align: left;
	margin: 30px auto;
	width: 500px;
}


#lightbox h4 {color: #017cc2; font-size: 1.1em; font-weight: bold; margin: 0 0 .4em 0;}
#lightbox p {margin: 0; }
#lightbox .size {margin: 0 0 .2em; }
#lightbox .shipping {font-size: 1.1em; }
#lightbox .buy {padding: 0; text-align: left; }
#lightbox img {float: left; margin-right: 20px; }

#overlay{ background-image: url(skin/overlay.gif); }


.special {
	margin: 0em 0 0 0;
	padding: 1.1em 1em;
	font-size: 1.1em;
	font-weight: bold;
	color: rgb(83,155,195);
	background: rgb(255,255,255) url(skin/t_special.gif) 0em 50% no-repeat;
}
.special h3 {color: rgb(58,108,136); }
.special .t {margin: 0; padding: .3em 1.2em .3em 65px;
	background: rgb(255,255,255) url(skin/t_special.gif) -1em 50% no-repeat;}
	
.col-3 .col-wide {width: 41%; }
.col-3 .col-sb {width: 15%; }
.col-3 .col-sb2 {width: 25%; }
.col-3 .col-narrow {width: 20%; }
.col-3 .col-wide-2 {width: 40%; padding-right: 2%; }
.col-3 .col-narrow-2 {width: 22%; }


.sb {
	background-color: rgb(1,107,167);
	padding: 1em .7em 1em 1em;
	position: relative;
	left: 30px; /*-40%;*/
	top: 22px;
	width: 110%;
	margin-right: -10%;
	/*height: 170px;*/
	color: rgb(255,255,255);
}
