/* ------------------------------------------------------------------------------------
-- Bin Bags microsite
------------------------------------------------------------------------------------ */
#content { position: relative; width: 994px; margin: 0 auto; }
#content { background: url(/images/binbag/contentHomeBackgroundBB.gif) top left repeat-y; }
#contentTop { background: url(/images/binbag/contentHomeTopBackgroundBB.png) top left no-repeat; width: 994px; height: 10px; margin: 0 auto; overflow:hidden; }
#contentBottom { background: url(/images/binbag/contentHomeBottomBackgroundBB.png) top left no-repeat; width: 994px; height: 10px; margin: 0 auto; font-size: 1px; }

#binBagWrapper { margin:0 4px; background: url(/images/binbag/bg-gradient.png) repeat-x; }

#content h2 { color: #ff3366; font-size: 2.4em; padding: 0 0 10px; margin:0; }
#content h3 { color: #666666; font-size: 1.8em; margin: 0 0 10px; clear: left; }

#content h2 span { font-size:.5em;  }

#content a, #content a:hover, #content a:active, #content a:focus { color:#0066CC; }

p#back { position:absolute; top:15px; right:26px;  font-size: 1.4em; font-weight: bold; }

/* ------------------------------------------------------------------------------------
-- Right column
------------------------------------------------------------------------------------ */
#introCol { margin:  40px 14px 0 0px; padding: 0; float:right; width: 212px; display:inline; }

#introCol h2 { color: #009933; font-size: 2em; margin: 40px 0 28px; padding:0; }
#introCol p { font-size: 1.2em; margin: 2em 0 0 0; }
#introCol .btn { margin: 1.5em 0 0 0; cursor:hand; }

#introCol #binBagLogo { background: url(/images/binbag/bin-bag-days-to-nominations.png) bottom center no-repeat; padding:0; margin:0 0 20px -2px; }
#introCol #binBagLogo.noMsg { background:transparent; }
#introCol #binBagLogo p { font-size:1em; text-align:center; color: #fff; padding: 2px 10px 6px; margin:0; text-transform:uppercase; }
#introCol #binBagLogo p strong { font-size:1.1em; padding-bottom:1px; display:block; font-weight:normal; }
#introCol a { cursor: pointer; }

/* ------------------------------------------------------------------------------------
-- Main column
------------------------------------------------------------------------------------ */
#mainCol { float: left; margin: 20px 0 20px 16px; width: 733px; display:inline; }
#mainCol.designer { margin-left:10px; width: 740px; }
#mainCol h2 { text-transform:uppercase; padding-bottom:1em;}
#mainCol h3 { text-transform:uppercase; padding:1em 0 1em 0; }


/* main col boxed content */
#mainCol #contentTopBinbag {background: url(/images/content-bin-bag-bg-top.png) top left no-repeat; height: 14px; margin-left:16px; }
#mainCol #contentBinbag { position:relative; background: url(/images/content-bin-bag-bg.png) top left repeat-y;  padding:10px 26px; width: 623px; margin-left:16px; min-height:520px;  }
#mainCol #contentBottomBinbag { background: url(/images/content-bin-bag-bg-btm.png) top left no-repeat; height: 10px; margin-left:16px; }

/* rounded box (rounded corners added with javascript) */
.roundedBox { border:3px solid #ccc; padding:20px; clear:both; }
.roundedBox h3 { padding-top:0 !important; padding-bottom:.5em !important; }
.roundedBox p { font-size:1.4em; margin-bottom:.5em; }

/* flash designer */
#flashDesigner { margin-top:-10px;}

/* detail page */
#binBag { height: 520px; width: 393px; float: left; margin: 0; padding: 0 0 10px 0; }
#binBag img { margin: 0; }

#binBagDetail { float: right; font-size: 1.8em; width: 200px; margin: 76px 0 0 0; }
#binBagDetail img { padding: 0 0 0 1.5em; }
#binBagDetail p#binBagTitle { color: #666666; }
#binBagDetail p#name { border-top: 2px solid #ccc; color: #ff3366; padding: 10px 0 0 0; border:1px width: 100%; }
#binBagDetail p#name span { text-transform: uppercase; }
#binBagDetail p#locationAge { color: #999999; padding: 0 0 1em 0; }

#binBagDetail ul { border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; margin: 1em 0 0 0; }
#binBagDetail li a { display:inline-block; display:block; }
#binBagDetail li#sendToFriendLink a { background: url(/images/vote-send-to-friend.png) 0% 50% no-repeat; color: #ff3366; padding: .5em 0 .5em 30px; }
#binBagDetail li#facebook a { background: url(/images/vote-facebook.png) 0% 50% no-repeat; color: #6666cc; padding: .5em 0 .5em 30px; }
#binBagDetail li#twitter a { background: url(/images/vote-twitter.png) 0% 50% no-repeat; color: #0066cc; padding: .5em 0 .5em 30px; }

#binBagWinner { float: right; width: 200px; margin: 20px 0 0 0; }

/* Thankyou page */
#thankyou p, #thankyou li { font-size:1.4em; line-height:1.4; margin-bottom:1em;  }
#thankyou li { margin-bottom:.5em; margin-left:2em; list-style-type:square; }
#thankyou ol li { list-style-type:decimal; }

/* listing */
ul.listing { list-style-position:outside; list-style:none; /*float:left;*/ padding: 0 0 10px 0; margin-right:-26px; }
ul.listing li { display:inline; float: left; padding: 0 21px 2.5em 0; }
ul.listing li div { background: url(/images/popular-bin-bag-bg.png) 40% 10% no-repeat; width: 88px; padding: 0 10px 4px; text-align:center; }
ul.listing li a { padding-left: 10px; cursor: pointer; }
ul.listing li div a { padding-left: 0; }
ul.listing li div img { padding: 0/*30px 0 20px 18px*/; }
ul.listing li div img.vote { margin: 10px 0 0 0; padding: 0; }

ul.listing li div p { font-size:1.2em; }
ul.listing li div p.number { color: #0066cc; font-size:1.4em; font-weight: bold; text-align: right;}
ul.topHighlighted li div p.number { color: #ff3366; }
ul.listing li div p a { color: #333; text-decoration: underline; }

ul#listingNav { background: url(/images/popular-nav-bg.png) top left no-repeat; width: 289px; height: 151px; float: right; margin:0; }
ul#listingNav li { display:inline; float: left; padding: 50px 0 0 20px; }

/* ------------------------------------------------------------------------------------
-- In page popups
------------------------------------------------------------------------------------ */
.popup { position:relative; width:628px/*520px*/; margin:0 auto; padding:18px; background:#333; }
.popup h2 { color:#fff; text-transform:uppercase; padding-bottom:.5em; }
.popup p { color:#fff;  font-size:1.4em; }

.popup .wrapper { background:#fff; margin-top:1em; padding:20px; min-height:130px; }
.popup fieldset { width:477px; position:relative; color:#000; }
.popup fieldset div { clear:both; padding-bottom:.8em; font-size:1.8em; }
.popup fieldset div.text label { width:182px; float:left; padding-top:.3em; text-align:right; }
.popup fieldset div.text input, .popup fieldset div.text textarea { width:275px; float:right; border:2px solid #999; padding:4px; }
.popup fieldset div.text textarea { height:5em; }
.popup fieldset div.checkbox { padding-left:164px;font-size:1.1em; }
.popup fieldset div.checkbox label { width:287px; float:right; }
.popup fieldset div.checkbox input { float:left; }
.popup fieldset div.info { padding-left:190px; font-size:1.1em; }

.popup .listing { width:108px; float:left; margin-right:0; }
.popup .listing li { padding:0; }

.popupJs { position:absolute; top:114px; left:190px; }
#vote.popupJs { top:85px; }
#sendToFriend.popupJs { top:35px; }
.popupJs fieldset p.btn input { float:left; margin-left:190px; }
.popupJs fieldset p.btn a { float:right; color:#666; padding-top:19px; }

/* ------------------------------------------------------------------------------------
-- Carousel
------------------------------------------------------------------------------------ */

.infiniteCarousel { width: 986px; position: relative; clear: both; margin: 0 auto; }
.phase3carousel { padding-top:28px; }
.infiniteCarousel .wrapper { width: 900px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ overflow: hidden; min-height: 10em; margin: 0 40px; position: relative; }
.infiniteCarousel .wrapper ul { width: 9999px; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; top: 0; }
.infiniteCarousel ul li { display:block; float:left; padding: 0px 10px 30px; width: 210px; text-align:center; }
.infiniteCarousel ul li a img { margin: 0 0 0 15px; position:relative; }
.infiniteCarousel .arrow { border:none; outline:none; display: block; height: 36px; width: 37px; background: url(/images/carousel-arrow.png) no-repeat 0 0; text-indent: -1999px; position: absolute; top: 75px; cursor: pointer; }
.phase3carousel .arrow { top:100px; }
.infiniteCarousel .forward { background-position: 0 0; right: 10px; }
.infiniteCarousel .back { background-position: 0 -38px; left: 10px; }


/* ------------------------------------------------------------------------------------
-- Clearfixes
------------------------------------------------------------------------------------ */
.clearfix:after, #contentBinbag:after, .popup fieldset div:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }