/* @override http://www.thebiggchill.com/css/bigchill.css */

/*
*
* The Bigg Chill
* Developed By Spiegel Design Group, Inc
* 12/22/2009
*
*/

/* @group Universal */

body { overflow-y: scroll; font: 14px Arial, Verdana, Sans-Serif; color: #777c7e; }
div#wrapper { width: 999px; margin: 25px auto 15px; padding-left: 25px; }
a { text-decoration: none; color: #777c7e; }
a:hover { color: #a1a1a1; }
p {  line-height: 20px; }

h2 { position: absolute; left: 260px; top: -140px; }

/* @end */

/* @group Body BGs */

body#landing div#wrapper { background: url(../images/backgrounds/bg-landing.jpg) no-repeat 245px 10px; position: relative;
z-index: 1000; }
body#about-us div#wrapper { background: url(../images/backgrounds/bg-about-us.jpg) no-repeat 325px 100px; }
body#flavors div#wrapper { background: url(../images/backgrounds/bg-flavors.jpg) no-repeat 350px 150px; }
body#pies div#wrapper { background: url(../images/backgrounds/bg-pies.jpg) no-repeat right 200px; }
body#location div#wrapper { background: url(../images/backgrounds/bg-location.jpg) no-repeat right 65px; }

/* @end */

/* @group Header */

div#hd { overflow: hidden; }
div#hd h1 { float: left; }
ul#main-nav { float: right; margin-top: 30px; background-color: #ecf0f1; padding: 5px 18px; }
ul#main-nav li { float: left; display: inline; margin-left: 50px; }
/* :first-child is alright for development but should use JavaScript to ensure first-child in IE6 for production */
ul#main-nav li:first-child { margin-left: 0; }

/* @end */

/* @group Body */

div#bd { margin-bottom: 25px; }
div#fun-facts { margin-top: 25px; position: relative; z-index: 2 !important; }
div#interior-cycle { width: 250px; height: 360px; padding-top: 25px; float: left; }

/* @end */

/* @group About */

body#about-us div#bd { min-height: 385px; position: relative; }
p#about { position: absolute; left: 260px; top: -50px; width: 360px; }
p#about span { font-size: 24px; font-family: Georgia, Serif; font-style: italic; }

/* @end */

/* @group Flavors */

body#flavors div#bd { min-height: 385px; position: relative; }
div#flavor-list { position: absolute; left: 265px; top: -50px; }
body#flavors div#bd p#flavors-alert { position: absolute; left: 260px; top: -80px; font-size: 12px; }
body#flavors div#bd ul { font-size: 12px; list-style-position: inside; margin-bottom: 20px; }
body#flavors div#bd ul li { margin: 5px 0 5px 15px; }
body#flavors div#bd ul li.odd { list-style-image: url(../images/backgrounds/bg-list-dot.jpg); }
body#flavors div#bd ul li.even { list-style-image: url(../images/backgrounds/bg-list-tri.jpg); }
div#flavor-list p { font-style: italic; font-size: 12px; margin-top: 35px; }

/* @end */

/* @group Pies */

body#pies div#bd { min-height: 385px; position: relative; }
div#subheading { position: absolute; left: 265px; top: -55px; }
body#pies div#order { position: absolute; left: 0; bottom: 0; }
body#pies div#order img { margin-bottom: 10px; }
body#pies div#order p { margin-left: 10px; }
body#pies div#order p span { color: #f490af; }
body#pies div#order p em { font-size: 12px; font-style: italic; }

/* @end */

/* @group Photos */

body#photos div#bd { min-height: 385px; position: relative; }
div#photo-wrapper { position: absolute; left: 265px; top: -40px; width: 730px; height: 425px; }
div#scrollbar { overflow: auto; height: 405px; width: 90px; padding: 10px 10px 10px 10px; margin-left: 20px; background-color: #ebeff0; }
div#scrollbar li a { display: block; width: 70px; height: 77px; margin-bottom: 5px; }
div#photo-wrapper img#image { position: absolute; right: 20px; top: 10px; }


/* @end */

/* @group Custom Scrollbar */

.jScrollPaneContainer{position:relative; overflow:hidden; z-index:1}

.jScrollPaneTrack { position:absolute; cursor:pointer; left:4px; top:0; height:100%; background:#dfdfdf; width: 5px !important; }
.jScrollPaneDrag { position:absolute; background: url(../../images/scrollbar.png) no-repeat; cursor:pointer; overflow:hidden; width: 11px !important; left: -3px; height: 64px !important; }
.jScrollPaneDragTop { position:absolute; top:0; left:0; overflow:hidden}
.jScrollPaneDragBottom { position:absolute; bottom:0; left:0; overflow:hidden}
a.jScrollArrowUp { display:block; position:absolute; z-index:1; top:0; right:0; text-indent:-2000px; overflow:hidden; /*background-color:#666; */height:9px}
a.jScrollArrowUp:hover { /*background-color:#f60; */}
a.jScrollArrowDown { display:block; position:absolute; z-index:1; bottom:0; right:0; text-indent:-2000px; overflow:hidden; /*background-color:#666; */height:9px}
a.jScrollArrowDown:hover { /*background-color:#f60; */}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color:#f00; */}


/* @end */

/* @group Location */

body#location div#bd { min-height: 385px; position: relative; }
div#located { position: absolute; left: 0; bottom: 10px; text-align: center; }
div#located h3 { margin: 15px 0 0 }
div#located strong { font-weight: bold; font-size: 12px; }
div#located a { color: #f490af; }

/* @end */

/* @group Utilities */

div#utilities { clear: both; overflow: hidden; margin-bottom: 6px; }
div#utilities div {  height: 70px; background-color: #ecf0f1; float: left; width: 259px; padding: 18px;  }
div#utilities div p {  font-size: 12px; line-height: 15px; width: 250px; }
div#utilities div form p { width: 100%; }
div#utilities form { margin-top: 15px; }
div#utilities input { padding: 4px; color: #d4d7d2; border: 1px solid #d2d5d8; }
div#utilities input:focus { border: 1px solid #666; color: #000; }
div#utilities div input.submit { border: none; background: #ecf0f1 url(../images/backgrounds/bg-arrow.png) no-repeat right 6px; color: #777c7e; font-size: 14px; cursor: pointer; padding-right: 12px; width: 65px;}
div#utilities div#mailing { margin: 0 15px; width: 343px; }
div#mailing input { width: 230px; }
div#social p { margin-bottom: 25px; }
div#social a {  display: block; float: left; }
div#social a#facebook-link { margin-left: 33px; }
div#social a#twitter-link { margin: 8px 0 0 10px; }

/* @end */

/* @group Footer */

div#ft p { color: #b3b6bb; font-size: 11px; float: left; }
div#ft p a:link, div#ft p a:visited { color: #b3b6bb; }
div#ft p a:hover { color: #000; }
div#ft p#copy { float: right;}

/* @end */