/* == STYLESHEET FUNCTIONS
------------------------------------------------------------------------------------------------------------------------
- Defines the site-wide layout for core structure
- Defines reusable widget code
- Defines page specific layout
- Overrides base HTML elements where required
----------------------------------------------------------------------------------------------------------------------*/

/* == CONTENTS
------------------------------------------------------------------------------------------------------------------------
- Main Layout
- Head Content
- Primary Navigation
- Foot Content
- Text, Links, Images Etc

[Widget Styles:]

----------------------------------------------------------------------------------------------------------------------*/


/* == Main Layout
----------------------------------------------------------------------------------------------------------------------*/

#wrap{width: 995px; min-height: 820px; _height: 820px; margin: 0 auto; text-align: left; background: url("http://us.totallyfit.com/_img/bg-wrap.gif" ) no-repeat top center;}
#wrap #head{position: relative; height: 178px;}
#wrap #priNav{position: absolute; bottom: 20px; right: 0;}
#wrap .mainContent{float: left; background: url("../_img/bg-maincontent.gif") no-repeat 106px 26px;}
#wrap .home{background: url("../_img/bg-maincontent-home.gif") no-repeat 106px 6px;}
#wrap #foot{float: left;}

/** content divisions **/
#wrap .mainContent #templateOne .zoneOne{float: left; width: 645px;}
#wrap .mainContent #templateOne .zoneTwo{float: left; width: 350px;}
#wrap .mainContent #templateOne .mainText{float: right; display: inline; width: 461px; min-height: 436px; _height: 436px; margin: 35px 38px 0 0; padding: 10px 20px; background: url("../_img/bg-maintext.gif") #fff repeat-y top left;}
#wrap .mainContent #templateOne .mainText-ftr{margin: 0 0 0 106px; background: url("../_img/bg-maintext-ftr.gif") no-repeat top left;}

#wrap .home #templateOne .introText{float: right; display: inline; width: 452px; margin: 0 46px 0 0; padding: 12px 20px; font-size: 140%; font-weight: bold; line-height: 25px; color: #737475;}
#wrap .home #templateOne .mainText{width: 385px; min-height: 189px; _height: 189px; margin: 7px 44px 0 0; padding: 10px 20px; background: #fff; border: 2px #99CCFF solid; border-top: 0;}

/* == Head Content
----------------------------------------------------------------------------------------------------------------------*/


/* == Primary Navigation
----------------------------------------------------------------------------------------------------------------------*/

#wrap #priNav ul{list-style: none; margin: 10px 0; padding: 0;}
#wrap #priNav ul li{display: inline; margin: 0; padding: 0;}
#wrap #priNav ul li a{display: block; float: left; height: 28px; /* Height of bg */ padding-left: 8px; /* Width of left image */ line-height: 21px; /* This + 4px + 4px must equal height of bg */ color: #333; font-weight: bold; text-decoration: none; text-transform: uppercase;}
#wrap #priNav ul li a:hover, 
#wrap #priNav ul li a.on{background: url("../_img/bg-nav-a.gif") transparent no-repeat top left;}
#wrap #priNav ul li a span{display: block; padding: 0 16px 7px 0;}
#wrap #priNav ul li a:hover span, #wrap #priNav ul li a.on span{background: url("../_img/bg-nav-span.gif") transparent no-repeat top right;}


/* == Foot Content
----------------------------------------------------------------------------------------------------------------------*/

#wrap #foot ul{}
#wrap #foot ul li{}
#wrap #foot ul li a{}
#wrap #foot ul li a:hover{}


/* == Text, Images, Links Etc
----------------------------------------------------------------------------------------------------------------------*/

#wrap span.pink .pink, a.pink, a.pink:hover {color: #ec008c;}

#wrap #head .signup{float: right; width: 203px; height: 40px; background: url("../_img/bg-signup.gif") no-repeat top left; margin-top: 30px; padding: 5px 15px; text-decoration: none;}
#wrap #head .signup span{font-size: 150%; font-weight: bold; margin-left: 10px;}
#wrap #head .storeSelect{float: right; padding: 5px 15px;}
#wrap #head .storeSelect a.active{text-decoration: none; color: #ec008c; font-weight: bold}

#wrap .mainContent div.boxheading{display: block; float: left; position: absolute; height: 36px; /* Height of bg */ padding-left: 9px; /* Width of left image */ line-height: 29px; /* This + 4px + 4px must equal height of bg */ color: #333; font-size: 120%; font-weight: bold; text-transform: uppercase; background: url("../_img/bg-boxheading-div.gif") transparent no-repeat top left; margin: -35px 0 0 25px;}
#wrap .mainContent div.boxheading span{display: block; padding: 0 16px 7px 0; background: url("../_img/bg-boxheading-span.gif") transparent no-repeat top right;}

#wrap .mainContent .store-productshot{position: relative; float: left; width: 30%; height: 200px;}
#wrap .mainContent .store-productshot img{position: absolute; top: 40px; left: -150px;}
#wrap .mainContent .store-products{float: left; width: 70%;}

#wrap .mainContent #templateOne .zoneOne div.melpic{float: left; width: 170px;}

#wrap .mainContent #templateOne .zoneTwo .player{float: right; display: inline; width: 335px; height: 290px; background: url("../_img/bg-player.gif") no-repeat top left; padding: 4px 0 0 4px; margin-right: 11px; margin-top: 26px;}
#wrap .mainContent #templateOne .zoneTwo .homePlayer{margin-top: 6px;}

.qtplayer{float: right; display: inline; width: 335px; height: 290px; background: url("../_img/bg-player.gif") no-repeat top left; padding: 4px 0 0 4px; margin-right: 11px; margin-top: 5px;}
.qthomePlayer{margin-top: 6px;}

#wrap .mainContent #templateOne .zoneOne .imgCarousel{float: left; width: 429px; height: 120px; background: url("../_img/bg-carousel.gif" ) no-repeat top left; margin-top: 30px;}
#wrap .mainContent #templateOne .zoneOne .imgCarousel a.btn{float: left; width: 25px; height: 25px; margin: 27px 6px 0 6px; text-decoration: none;display: none;}
#wrap .mainContent #templateOne .zoneOne .imgCarousel a.prev{background: url("../_img/carousel/btn-prev.gif" ) no-repeat top left;}
#wrap .mainContent #templateOne .zoneOne .imgCarousel a.next{background: url("../_img/carousel/btn-next.gif" ) no-repeat top left;}

#wrap .mainContent #templateOne .zoneOne .imgCarousel .viewall{display: block; float: right; margin: 0 5px 0 0; text-decoration: none;}
#wrap .mainContent #templateOne .zoneOne .imgCarousel .viewall:hover{text-decoration: underline;}
#wrap .mainContent #templateOne .zoneOne .imgCarousel ul{float: left; list-style: none; margin: 10px 0 0 4px; padding: 0;display: inline;}
#wrap .mainContent #templateOne .zoneOne .imgCarousel ul li{display: inline; margin: 0 2px; padding: 0;}
#wrap .mainContent #templateOne .zoneOne .imgCarousel ul li a img{border: solid 3px #b0daff;height: 60px; width: 60px;}
#wrap .mainContent #templateOne .zoneOne .imgCarousel ul li a:hover img{border: solid 3px #f56cb2;}


#wrap .mainContent #templateOne .zoneTwo .productshot{position: relative; right: 45px; width: 187px; height: 215px;}
#wrap .mainContent #templateOne .zoneTwo .productshot .details{float: left; display: inline; width: 190px !important; width: 150px; height: 190px; margin: 10px 0 0 187px; background: #fff; color: #454545; font-size: 110%; padding-left: 10px;}



#wrap .mainContent div.store-price{float: left; width: 60%; font-size: 150%; font-weight: bold; padding-top: 6px;}
#wrap .mainContent a.addtobasket{float: left; width: 95px; height: 29px; background: url("../_img/btn-addtobasket.gif" ) no-repeat top left; text-decoration: none; margin: 3px 0;}
#wrap .mainContent .mel-side{width: 306px; height: 306px; background: url("../_img/bg-store-melside.gif" ) no-repeat top left; font-size: 160%; padding: 45px 0 0 43px;}
#wrap .mainContent .mel-side a{font-size: 80%; padding-left: 5px;}

.store .prodListing{float: left; width: 100%;margin: 10px 0; list-style: none;}
.store .prodListing li{float: left; width: 100%;margin: 0 0 5px 0;}
.store .prodListing li p{margin: 0;}
.store .prodListing li a img{float: left;border: 3px #b2d5ff solid;margin: 0 10px 10px 0;}
.store .prodListing li a.description{font-size: 150%; color: #f86cb2;text-decoration: none;font-weight: bold;display: block;}
.store .prodListing li div.summary{margin: 10px 0;line-height: 1.7em;}
.store .prodListing li div.productInfo{clear: left;border-top: solid 1px #99ccff;border-bottom: solid 1px #99ccff;background: #e0f5fd;padding: 5px 10px;}
.store .prodListing li div.stockTitle{padding-bottom: 5px;}
.store .prodListing li div.stockTitle em{font-style: normal;font-weight: bold;color: #f86cb2;font-size: 120%;}
.store .prodListing li .infoLink a{float: right;padding: 4px 8px;text-decoration: none;border: solid 1px #f47ba6; font-size: 95%;background: #f47ba6 top left repeat-x;margin: 0 0 0 3px;color: #262626;font-weight: bold;}

body#store .images{float: left;}
body#store .images img{float: left;border: 3px #b2d5ff solid;margin: 0 5px 5px 0;}
body#store .info{float: right;width: 200px;line-height: 1.7em;}
body#store .info .actionBuyNow{float: left;padding: 4px 8px;text-decoration: none;border: solid 1px #fb4787;font-size: 95%;background: #f47ba6; color: #262626;font-weight: bold;}
body#store .info .stock{color: #f86cb2; font-weight: bold;}

.store .images img{float: left;}
.store h2{}
#store .left50percent, div.fifty{float: left; width: 45%;margin: 0 3px 0 3px;}
#store .left50percent h3, div.fifty h3{color: #f86cb2; font-weight: bold; font-size: 120%;border-bottom: solid 1px #ccc;padding: 0 0 5px 0;}
div.fifty fieldset{border: 0;}
div.fifty label{float: left; width: 35%;}
div.fifty .input{width: 55%;}
body#shop h2{color: #726d65;}


/* == Gallery styles
----------------------------------------------------------------------------------------------------------------------*/

.gallery{width:450px; padding: 5px 0 5px 5px; text-align: center;margin:10px 0;}
.gallery .window, 
.gallery .controls{float:left;width: 430px; border: solid 1px #99ccff;background: #e0f5fd; margin: 5px auto; padding: 10px 0 10px 10px;}
.gallery .window img{border: 1px #fff solid;}
.gallery .window .title, 
.gallery .window .fantitle{float: left; display: inline; width: 75%; height: 25px; text-align: left; margin: 0 0 0 32px; font-weight: bold; font-size: 130%; color: #10b3f0;}
.gallery .window .num{float: right; display: inline; width: 10%; height: 25px; text-align: right; margin: 0 32px 0 0; color: #9a0000; padding-top: 3px;font-weight: bold;}
.gallery .window{background: url("http://us.totallyfit.com/_img/bg-wrap.gif" ) bottom right no-repeat;}

#photos .gallery .main {float:left;width:380px;height:344px;overflow:hidden;display: inline;margin: 4px 0 0 20px;border:solid 2px #ec008c;}
#photos .gallery .main .int{float:left;width:1080px;height:10000px;background-color:#fff;}
#photos .gallery .main .int ul{float:left;width:100%;margin:0;padding:0;list-style:none;}
#photos .gallery .main .int ul li{float:left;width:400px; height:344px;text-align:center;overflow:hidden;padding:0;margin:0;list-style:none;background: transparent url("../_img/ico/loading.gif") no-repeat center;}
#photos .gallery .main .int ul li img{float:left;}
#photos .gallery .main img.portrait{border:solid 1px #fff;}
#photos .gallery .main img.landscape{border:solid 1px #fff;}

.gallery .controls{}
.gallery .controls .prev, 
.gallery .controls .next{float: left; display: inline; width: 26px; margin: 20px 0 0 0px;}
.gallery .controls .next{margin: 20px 0 0 0;}
.gallery .controls .thumbs{float:left;width:355px;padding: 0 0 10px 0;margin: 0 5px;display: inline;overflow:hidden;}
.gallery .controls .thumbs a{margin: 0 2px;}
.gallery .controls .info{text-align:left; padding: 5px 20px 0 30px;}
.gallery .thumbs .fullthumbs {float:left;width:90000px;margin: 5px 0 0 0;}
.gallery .thumbs .scrollInd{display: none;float:left;width:448px;background-color:#00b6f1;border-bottom:solid 1px #00b6f1;border-top:solid 1px #00b6f1;}
.gallery .thumbs .scrollInd .current{float:left;width:80px;height:5px;line-height:5px;background-color:#b5d8fe;font-size:1px;}
.gallery .thumbs ul,
.gallery .thumbs ul li {float:left;margin:0;padding:0;}
.gallery .thumbs ul li {display:inline;}
.gallery .thumbs ul{padding: 0 10px 4px 0;}
.gallery .thumbs ul li a,
.gallery .thumbs ul li img{float:left;}
.gallery .thumbs ul li a{margin:2px 0 0 2px;border:solid 3px #b1dcff;}
.gallery .thumbs ul li a:hover{border:solid 3px #f666ae;}


#wrap .mainContent #templateOne .zoneOne ul.gallery-list{padding: 0px;margin: 0; list-style: none;}
#wrap .mainContent #templateOne .zoneOne ul.gallery-list li{clear: left;border: solid 1px #99ccff;background: #e0f5fd;padding-bottom: 10px;}
#wrap .mainContent #templateOne .zoneOne ul.gallery-list li div.img{float: left;margin:10px;}
#wrap .mainContent #templateOne .zoneOne ul.gallery-list li div.img img{border: solid 3px #bedbfb;}
#wrap .mainContent #templateOne .zoneOne ul.gallery-list li h3 a{color: #f86cb2;text-decoration: none;font-weight: bold;}
#wrap .mainContent #templateOne .zoneOne ul.gallery-list li h3 a:hover{text-decoration: underline;}


#wrap .mainContent .videos .main {height:344px;}
#wrap .mainContent .videos .window{padding: 5px 5px;}
#wrap .mainContent .videos .window .title{margin: 0;}

#wrap .divLoading{display:none;}

#signup label{width: 100px;} 
/*#signup .btn{background: url("../_img/bg-btn.gif" ) top right no-repeat;width: 79px; height: 25px; font-weight: bold; color: #fff; border: 0px;}*/

/* == News Styles
----------------------------------------------------------------------------------------------------------------------*/

.newsList ul{list-style: none; margin: 10px 0;}
.newsList ul li h3 a{color: #f86cb2;text-decoration: none;font-weight: bold;}
.newsList ul li h3 a:hover{text-decoration: underline;}
p.info{border-top: dotted 1px #b2d8fe;border-bottom: dotted 1px #b2d8fe;font-size: 90%;padding: 5px 0;font-weight: bold;}

/* == Paging
----------------------------------------------------------------------------------------------------------------------*/

.paging .text{float: left;margin: 5px 0 10px 0;}
.paging .pg{float: right;}
.paging .pg ul{margin: 5px 0 10px 0;list-style: none;}
.paging .pg ul li{float: left;}
.paging .pg ul li.det{font-weight: bold;padding: 4px 8px 0 0;}
.paging .pg ul li a{float: left;padding: 4px 8px;text-decoration: none;border: solid 1px #fb4787;font-size: 95%;/*background: #f47ba6 url("../_img/btn-bg.gif" ) top left repeat-x;*/margin: 0 0 0 3px;color: #262626;font-weight: bold;}
.paging .pg ul li a:hover, #wrap #mainContent .paging .pg ul li a.on{background: #f47ba6;font-weight: bold;color: #262626;}

/* == Screen Messages
----------------------------------------------------------------------------------------------------------------------*/

ul.error{color: #fe0000;font-weight:bold;}

a.tooltip {color:#f47ba6;text-decoration: none; font-weight:bold; cursor:help;}
a.tooltip b {display:none;}
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover b {display:block; position:absolute; top:8px; left:20px; padding:5px; font-weight:normal; color:#333; border:5px solid #f47ba6; background:#eee; width:170px;text-decoration: none;font-size: 85%;}

.compForm label{width: 60px;}