﻿/* Group X on the Net 
------------------------------------------------------*/

@import "reset.css";

/* Layout 
------------------------------------------------------*/

body {
  background: #ffffff;
}

.wrapper {
  width: 100%;
  height: auto;
  background: transparent;
}

.wrapper.header {
  background: url("../images/header_bg.gif") repeat-x top !important;
  
}

.wrapper.content {
  background: url("../images/paint.jpg") no-repeat top center !important;   
}

.wrapper.footer {
  background: url("../images/footer_bg.gif") repeat-x top !important;
  
}

.bgFix {
  width: 960px;
  height: auto;
  margin: 0 auto;
  
}

.wrapper.header  .bgFix { background: url("../images/header_bg.gif") repeat-x top; }
.wrapper.content .bgFix { background: url("../images/paint.jpg") no-repeat top center; }
.wrapper.footer  .bgFix { background: url("../images/footer_bg.gif") repeat-x top; }

.body {
  width: 960px;
  height: auto;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 16px;
  color: #333333;
}

.default {
  float: left;
  display: inline;
  width: 100%;
  height: auto; 
  
   
}

/* Header 
------------------------------------------------------*/

#header {
  overflow: visible;
  position: relative;
  height: 162px;
  background: url("../images/header_line.gif") no-repeat 0px 34px;
}

#header #tabs {
  float: left;
  display: inline;
  width: auto;
  height: 28px;
  margin: 11px 0px 0px 0px;
}

#header #tabs a:link,
#header #tabs a:visited {
  float: left;
  display: inline;
  width: auto;
  height: 28px;
  background-position: top;
  background-repeat: no-repeat;
}

#header #tabs a:hover,
#header #tabs a:active {
  background-position: center;
}

#header #tabs a.here:link,
#header #tabs a.here:visited,
#header #tabs a.here:hover,
#header #tabs a.here:active {
  background-position: bottom;
}

#header #tabs a#tabGroupX {
  width: 77px;
  background-image: url("../images/tab_groupx.gif");
}

#header #tabs a#tabPT {
  width: 85px;
  background-image: url("../images/tab_pt.gif");
}

#header #tabs a#tabVipr {
  width: 57px;
  background-image: url("../images/tab_vipr.gif");
}


#header #tabs a span {
  display: none;
}

#header #poweredBy {
  float: right;
  display: inline;
  width: 191px;
  height: 56px;
  padding: 15px 23px 0px 0px;
  position: relative;
  left: 6px;
  background: url("../images/powered_by.gif") no-repeat top; 
}

#header #poweredBy img {
  float: right;
  margin: 0px 0px 12px 0px;
}

#header #poweredBy p {
  font-size: 11px;
  color: #cccccc;
  margin: 0px;
  text-align: right;
}

#header #poweredBy a:link,
#header #poweredBy a:visited {
  margin: 0px 2px;
}

#header #logo {
  float: left;
  clear: left;
  margin-top: 25px;
}

#choiceTabs {    
  display: block;
  position: relative;
  float: left;
  height: auto;     
}

/* Flex Tabs
------------------------------------------------------*/

div.whiteTabs {
  width: 470px;
  padding: 0px 5px;
  position: relative;
  top: 1px;
}

a.flextab,
a.flextab:link,
a.flextab:visited {
  float: left;
  width: auto;
  height: 30px;
  line-height: 30px;
  padding: 0px 10px 0px 0px;
  margin: 0px 2px 0px 0px;
  text-decoration: none;
  cursor: pointer;
  border: 0px;
  overflow: hidden;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-image: url("../images/whitetab-right.gif");
}

a.flextab span {
  display: block;
  height: 30px;
  padding: 0px 0px 0px 10px;
  margin: 0px;
  font-size: 13px;
  line-height: 30px;
  letter-spacing: -1px;
  color: #212121 !important;
  font-weight: normal;    
  white-space: nowrap;   
  text-align: center; 
  background-position: bottom left;
  background-repeat: no-repeat;
  background-image: url("../images/whitetab-left.gif");
}

a.flextab:hover,
a.flextab:active,
a.flextab.here,
a.flextab.here:link,
a.flextab.here:visited {
  text-decoration: none !important;
  background-position: top right !important;
}

a.flextab:hover span,
a.flextab:active span
a.flextab.here span,
a.flextab.here:link span,
a.flextab.here:visited span {
  background-position: top left !important;
}

/* Flex Buttons
------------------------------------------------------*/

a.flexbutton,
a.flexbutton:link,
a.flexbutton:visited,
a.flexbuttonSmall,
a.flexbuttonSmall:link,
a.flexbuttonSmall:visited {
  float: left;
  width: auto;
  height: 30px;
  line-height: 30px;
  padding: 0px 10px 0px 0px;
  margin: 0px;
  text-decoration: none;
  cursor: pointer;
  border: 0px;
  overflow: hidden;
  background-position: top right;
  background-repeat: no-repeat;
  background-image: url("../images/flexbutton_right.gif");
}

a.flexbutton span,
a.flexbuttonSmall span {
  display: block;
  height: 30px;
  padding: 0px 0px 0px 10px;
  margin: 0px;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -1px;
  color: #212121 !important;
  font-weight: normal;    
  white-space: nowrap;   
  text-align: center; 
  text-transform: uppercase;
  background-position: top left;
  background-repeat: no-repeat;
  background-image: url("../images/flexbutton_left.gif");
}

a.flexbutton span.big { font-size: 14px !important; }

a.flexbutton:hover,
a.flexbutton:active,
a.flexbutton.here,
a.flexbutton.here:link,
a.flexbutton.here:visited,
a.flexbuttonSmall:hover,
a.flexbuttonSmall:active,
a.flexbuttonSmall.here,
a.flexbuttonSmall.here:link,
a.flexbuttonSmall.here:visited {
  text-decoration: none !important;
  background-position: bottom right !important;
}

a.flexbutton:hover span,
a.flexbutton:active span
a.flexbutton.here span,
a.flexbutton.here:link span,
a.flexbutton.here:visited span,
a.flexbuttonSmall:hover span,
a.flexbuttonSmall:active span
a.flexbuttonSmall.here span,
a.flexbuttonSmall.here:link span,
a.flexbuttonSmall.here:visited span {
  background-position: bottom left !important;
}

a.flexbutton span img,
a.flexbuttonSmall span img {
  display: inline;
  position: relative;
  top: 5px;
  margin-left: 2px;
}

a.flexbutton span img.mr,
a.flexbuttonSmall span img.mr {
  margin: 0px 2px 0px 0px !important;
}

a.flexbutton.block { display: block !important; }
a.flexbuttonSmall.block { display: block !important; }

.column .middle a.flexbutton.block { width: 218px !important; }
.main .middle .td a.flexbutton.block { width: 240px !important; }
    

/* Small Flex Buttons
------------------------------------------------------*/

a.flexbuttonSmall {
  padding: 0px 5px 0px 0px !important;
  height: 20px !important;
  line-height: 20px !important;
  background-image: url("../images/flexbutton_right_small.gif") !important;
}

a.flexbuttonSmall span {
  padding: 0px 0px 0px 5px !important;
  height: 20px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  background-image: url("../images/flexbutton_left_small.gif") !important;
}

a.flexbuttonSmall span img {
  top: 2px !important;
  margin-left: 1px !important;
}
    
/* Inner Tabs (My Account) 
------------------------------------------------------*/  

.qtip-content {
  font-family: Arial, Helvetica, sans-serif;  
  font-size: 12px;
}

/* Inner Tabs (My Account) 
------------------------------------------------------*/  

.mid #smallTabs {    
  display: block;
  position: absolute;     
  top: -34px;
  left: 300px;
  width: 200px;
  height: 28px;
  margin: 11px 0px 0px 0px;
  z-index: 50;
}

.mid #smallTabs a:link,
.mid #smallTabs a:visited {
  float: left;
  display: inline;
  width: auto;
  height: 24px;
  background-position: top;
  background-repeat: no-repeat;
}

.mid #smallTabs a:hover,
.mid #smallTabs a:active {
  background-position: center;
}

.mid #smallTabs a.here:link,
.mid #smallTabs a.here:visited,
.mid #smallTabs a.here:hover,
.mid #smallTabs a.here:active {
  background-position: bottom;
}

.mid #smallTabs a#tabSmallGroupX {
  width: 77px;
  background-image: url("../images/tab_groupx_small.gif");
}

.mid #smallTabs a#tabSmallPT {
  width: 85px;
  background-image: url("../images/tab_pt_small.gif");
}

.mid #smallTabs a span {
  display: none;
}

/* Search 
------------------------------------------------------*/

#header div#search {
  float: right;
  clear: right;
  position: relative;
  width: 603px;
  height: 36px;
  margin: 0px 8px 0px 0px;
  padding: 0px 0px 0px 14px;
  font-size: 11px;
  line-height: 36px;
  background: url("../images/search_bg.gif") no-repeat top; 
}

#header div#search a:link,
#header div#search a:visited {
  color: #555555;
  margin-right: 10px;
}

#header div#search a:hover,
#header div#search a:active {
  color: #999999;
}

#header div#search input.text {
  position: absolute;
  top: 12px;
  left: 333px;
  border: 0px;
  padding: 0px;
  width: 250px;
  background: transparent;
}

#header div#search img.image {
  position: absolute;
  top: 11px;
  left: 590px;
  border: 0px;
  padding: 0px;
}

div#search .share{
    position: absolute;
    top:5px;
    left:530px;
    padding:0px;    
}

div#search .cart {
  margin-bottom: -2px;
  margin-right: 5px;
  border: 0px;
  padding: 0px;
}

/* Nav 
------------------------------------------------------*/

#header #nav {
  position: absolute;
  top: 111px;
  left: 225px;
  width: 784px;
  height: 50px;
  text-align: right;
  margin: 0px;
  padding: 0px;
  z-index: 9300; /* IE fix: Higher z-index than children elements */
}

#nav a:link,
#nav a:visited {
  float: right;
  display: inline;
  position: relative;
  width: auto;
  height: 50px;
  background-position: top;
  background-repeat: no-repeat;
}

#nav a.here:link,
#nav a.here:visited,
/*#nav a:hover, */
#nav a:active,
#nav a.active:link,
/*#nav a.active:visited,*/
/* #nav a.active:hover,*/
#nav a.active:active {
  background-position: bottom;
}

#nav a#navHome {
  left: 0px;
  z-index: 101;
  width: 80px;
  background-image: url("../images/nav_home.png");
}

#nav a#navMusic {
  left: -9px;
  z-index: 102;
  width: 81px;
  background-image: url("../images/nav_shop_music.png");
}

#nav a#navVideos {
  left: -18px;
  z-index: 103;
  width: 87px;
  background-image: url("../images/nav_videos.png");
}

#nav a#navClips {
  left: -27px;
  z-index: 104;
  width: 120px;
  background-image: url("../images/nav_clips.png");
}

#nav a#navEducation {
  left: -36px;
  z-index: 105;
  width: 115px;
  background-image: url("../images/nav_education.png");
}

#nav a#navClassTypes {
  left: -45px;
  z-index: 106;
  width: 122px;
  background-image: url("../images/nav_class.png");
}

#nav a#navForum {
  left: -54px;
  z-index: 107;
  width: 85px;
  background-image: url("../images/nav_forum.png");
}

#nav a#navShop {
  left: -63px;
  z-index: 108;
  width: 72px;
  background-image: url("../images/nav_shop.png");
}

#nav a span {
  display: none;
} 

/* Mega Menu
------------------------------------------------------*/

.megaMenu {
  display: none;
  position: absolute;
  top: 50px;
  height:auto;
  padding: 0px;
  z-index: 200;
  
}

.megaMenu.fiveCol { width: 760px; }
.megaMenu.fourCol { width: 620px; }
.megaMenu.threeCol { width: 480px; }
.megaMenu.twoCol { width: 360px; }
.megaMenu.oneCol { width: 220px; }

.megaMenu .menuTop {
  float: left;
  display: inline;
  height: auto;
  padding: 0px 10px 0px 10px;
}

.megaMenu.fiveCol .menuTop { width: 740px; background: url("../images/megamenu_bg_5col.png") repeat-y; }
.megaMenu.fourCol .menuTop { width: 740px; background: url("../images/megamenu_bg_4col.png") repeat-y; }
.megaMenu.threeCol .menuTop { width: 460px; background: url("../images/megamenu_bg_3col.png") repeat-y; }
.megaMenu.twoCol .menuTop { width: 360px; background: url("../images/megamenu_bg_2col.png") repeat-y; }
.megaMenu.oneCol .menuTop { width: 200px; background: url("../images/megamenu_bg_1col.png") repeat-y; }

.megaMenu div.inner {
  padding: 21px 21px 0px 21px;
  background: url("../images/megamenu_shadow.png") repeat-x top;
}

.megaMenu.fiveCol div.inner { width: 698px; }
.megaMenu.fourCol div.inner { width: 578px; }
.megaMenu.threeCol div.inner { width: 418px; }
.megaMenu.twoCol div.inner { width: 298px; }
.megaMenu.oneCol div.inner { width: 158px; }

.megaMenu .menuBottom {
  float: left;
  display: inline;
  width: 100%;
  height: 20px;
  padding: 0px;
}

.megaMenu.fiveCol .menuBottom { background: url("../images/megamenu_bottom_5col.png"); }
.megaMenu.fourCol .menuBottom { background: url("../images/megamenu_bottom_4col.png"); }
.megaMenu.threeCol .menuBottom { background: url("../images/megamenu_bottom_3col.png"); }
.megaMenu.twoCol .menuBottom { background: url("../images/megamenu_bottom_2col.png"); }
.megaMenu.oneCol .menuBottom { background: url("../images/megamenu_bottom_1col.png"); }

#musicMenu { right: 52px; }
#videoMenu { right: 276px; }
#clipsMenu { right: 220px; }
#educationMenu { right: 130px; }
#classMenu { right: 152px; }
#forumMenu { right: 52px; }
#shopMenu { right: 52px; }

.megaMenu div.col {
  float: left;
  display: inline;
  width: 130px;
  margin: 0px 9px 0px 0px;
  padding: 0px;
  height: auto;   
}

#nav .megaMenu h4 {
  text-align: left;
  padding-bottom: 4px;
  border-bottom: dotted 1px #cccccc;
}

#nav .megaMenu p {
  text-align: left;
}

#nav .megaMenu a:link,
#nav .megaMenu a:visited {
  float: none;
  background: transparent;
  text-align: left;  
  width: auto;
  height: auto;
  color: #555555;
  text-decoration: none;
}

#nav .megaMenu a:hover,
#nav .megaMenu a:active {
  color: #4488cc;
  background: transparent;
  text-decoration: underline;
} 

.megaMenu div.cta {
  float: right;
  display: inline;
  position: relative;
  top: 10px;
  margin: 0px; 
  width: 274px;
  height: 140px;
  background: #cccccc;
}

/* Content 
------------------------------------------------------*/

#content {
  padding: 10px 0px;
}

#content div.main {
  display: inline;
  width: 680px;
  height: auto;
  
}

#content div.column {
  display: inline;
  width: 260px;
  height: auto;
}

#content div.left {
  display: inline;
  width: 180px;
  height: auto;
}

#content div.mid {
  display: inline;
  width: 480px;
  height: auto;
  margin-left: 20px;
  position: relative;
}


/* Home 
------------------------------------------------------*/

div.home {
  /* padding-bottom: 25px; */
  overflow: visible;
}

#content div.home div.left {
  float: left;
  display: inline;
  width: 300px;
  height: auto;
}

#content div.home div.left h1 {
  position: relative;
  z-index: 0;
}

div.home div.morph {
  float: left;
  display: inline;
  width: 310px;
  height: 310px;
  position: relative;
  top: 10px;
  z-index: 0;
}

div.home div.pricing {
  float: left;
  display: inline;
  width: 260px;
  height: auto;
}

div.home div.pricing div.top {
  float: left;
  display: inline;
  width: 240px;
  height: auto;
  padding: 10px 10px 6px 10px;
  background: #e02828 url("../images/red_top.gif") no-repeat top; 
}

div.home div.pricing div.bottom {
  float: left;
  display: inline;
  width: 260px;
  height: 4px;
  font-size: 0px;
  line-height: 0px;
  background: #e02828 url("../images/red_bottom.gif") no-repeat top; 
}

div.home div.video {
  float: right;
  display: inline;
  width: 328px;
  height: auto;
  -moz-box-shadow: 0px 0px 8px #cccccc;
  -webkit-box-shadow: 0px 0px 8px #cccccc;
  box-shadow: 0px 0px 8px #cccccc;
}

div.home div.video div.top {
  float: left;
  display: inline;
  width: 320px;
  height: auto;
  padding: 4px 4px 0px 4px;
  background: #000000 url("../images/video_top.gif") no-repeat top; 
}

div.home div.video div.bottom {
  float: left;
  display: inline;
  width: 328px;
  height: 4px;
  font-size: 0px;
  line-height: 0px;
  background: #000000 url("../images/video_bottom.gif") no-repeat top; 
}

div.home div.video div.player {
  height: 240px;
  margin: 0px 0px 4px 0px;
  color: #777777;
  text-align: center;
  background: #222222;
}

div.home div.video div.thumb {
  float: left;
  display: inline;
  width: 77px;
  height: 57px;
  color: #777777;
  text-align: center;
  margin: 0px 4px 0px 0px;
  background: #222222;
}

/* Title Bars 
------------------------------------------------------*/

p.title {
  float: left;
  display: inline;
  width: 100%;
  height: 32px;
  font-size: 16px;
  line-height: 32px;
  font-weight: bold;
  margin: 0px 0px 5px 0px;
  color: #ffffff;
  text-transform: uppercase;
  background-repeat: no-repeat;
  background-position: top;
  background-color: #eeeeee;
  -moz-box-shadow: 0px 0px 8px #cccccc;
  -webkit-box-shadow: 0px 0px 8px #cccccc;
  box-shadow: 0px 0px 8px #cccccc;
}

p.title span {
  float: left;
}

.column p.title {
  width: 240px;
  padding: 0px 10px;
}

.main p.title {
  width: 666px;
  padding: 0px 4px 0px 10px;
}

.middle p.title {
  width: 458px;
  padding: 0px 2px 0px 0px;
}

.left p.title {
  width: 160px;
  padding: 0px 10px;
}

.column p.title.blue { background: #eeeeee url("../images/bar_short_blue.gif"); }
.column p.title.green { background: #eeeeee url("../images/bar_short_green.gif"); }
.column p.title.purple { background: #eeeeee url("../images/bar_short_purple.gif"); }
.column p.title.orange { background: #eeeeee url("../images/bar_short_orange.gif"); }
.column p.title.magenta { background: #eeeeee url("../images/bar_short_magenta.gif"); }

.main p.title.blue { background: #eeeeee url("../images/bar_long_blue.gif"); }
.main p.title.green { background: #eeeeee url("../images/bar_long_green.gif"); }
.main p.title.purple { background: #eeeeee url("../images/bar_long_purple.gif"); }
.main p.title.orange { background: #eeeeee url("../images/bar_long_orange.gif"); }
.main p.title.magenta { background: #eeeeee url("../images/bar_long_magenta.gif"); }

.left p.title.blue { background: #eeeeee url("../images/bar_shorter_blue.gif"); }
.left p.title.green { background: #eeeeee url("../images/bar_shorter_green.gif"); }
.left p.title.purple { background: #eeeeee url("../images/bar_shorter_purple.gif"); }
.left p.title.orange { background: #eeeeee url("../images/bar_shorter_orange.gif"); }
.left p.title.magenta { background: #eeeeee url("../images/bar_shorter_magenta.gif"); }

.middle p.title.blue { background: #eeeeee url("../images/bar_mid_blue.gif"); }
.middle p.title.green { background: #eeeeee url("../images/bar_mid_green.gif"); }
.middle p.title.purple { background: #eeeeee url("../images/bar_mid_purple.gif"); }
.middle p.title.orange { background: #eeeeee url("../images/bar_mid_orange.gif"); }
.middle p.title.magenta { background: #eeeeee url("../images/bar_mid_magenta.gif"); }

p.title a.whiteBox:link,
p.title a.whiteBox:visited {
  float: right;
  display: inline;
  width: 120px;
  height: 24px;
  text-align: center;
  font-size: 11px;
  line-height: 24px;
  font-weight: bold;
  text-decoration: none;
  background: url("../images/bar_white_box.gif") no-repeat top;
  margin: 4px 4px 0px 0px;
}

p.title.blue a.whiteBox:link, p.title.blue a.whiteBox:visited { color: #458dcb; }
p.title.blue a.whiteBox:hover, p.title.blue a.whiteBox:active { color: #66aadd; }

p.title.green a.whiteBox:link, p.title.green a.whiteBox:visited { color: #7ead18; }
p.title.green a.whiteBox:hover, p.title.green a.whiteBox:active { color: #99cc33; }

p.title.purple a.whiteBox:link, p.title.purple a.whiteBox:visited { color: #5d50a1; }
p.title.purple a.whiteBox:hover, p.title.purple a.whiteBox:active { color: #7766dd; }

p.title.orange a.whiteBox:link, p.title.orange a.whiteBox:visited { color: #ee6223; }
p.title.orange a.whiteBox:hover, p.title.orange a.whiteBox:active { color: #dd8855; }

p.title.magenta a.whiteBox:link, p.title.magenta a.whiteBox:visited { color: #ad1862; }
p.title.magenta a.whiteBox:hover, p.title.magenta a.whiteBox:active { color: #cc3388; }


/* Bukkits 
------------------------------------------------------*/

div.bucket {
  margin-bottom: 10px;
  -moz-box-shadow: 0px 0px 8px #cccccc;
  -webkit-box-shadow: 0px 0px 8px #cccccc;
  box-shadow: 0px 0px 8px #cccccc;
}

div.bucket div.top,
div.bucket div.bottom {
  font-size: 0px;
  line-height: 0px;
  height: 4px;
}

div.bucket div.middle {
  border-left: solid 1px #c5cdd3;
  border-right: solid 1px #c5cdd3;
}

/* Main Bukkits 
------------------------------------------------------*/

.main div.bucket div.top { background: #eeeeee url("../images/bucket_main_top.gif") no-repeat top; }
.main div.bucket div.bottom { background: #eeeeee url("../images/bucket_main_bottom.gif") no-repeat top; }

.main div.bucket div.middle {
  padding: 6px 10px;
  width: 658px;    
  background: #ffffff;  
}

/* Column Bukkits 
------------------------------------------------------*/

.column div.bucket div.top { background: #eeeeee url("../images/bucket_column_top.gif") no-repeat top; }
.column div.bucket div.bottom { background: #eeeeee url("../images/bucket_column_bottom.gif") no-repeat top; }

.column div.bucket div.middle {
  padding: 11px 15px;
  width: 228px;
  background: #ffffff;
}

.column div.bucket div.middle.padTop {
  padding-top: 20px !important;
  padding-bottom: 0px !important;
}

.column div.bucket div.middle.listWrapper {
  width: 258px;
  padding: 2px 0px !important;
}

.column div.bucket div.middle.listWrapper.padTop {
  padding-top: 6px !important;
}

.column div.bucket div.middle.listWrapper div.li {
  float: left;
  display: inline;
  width: 228px;
  height: auto;
  padding: 5px 15px;
}

.column div.bucket div.middle.listWrapper div.li.alt {
  background: #eeeeee;
}

.column div.bucket div.middle.listWrapper div.li p.label {
  width: 30px;
  font-size: 30px;
  line-height: 30px;
  margin: 0px;
  color: #aaaaaa;
}

.column div.bucket div.middle.listWrapper div.li p.text {
  float: right;
  width: 190px;
  margin: 0px;
}

.column div.bucket div.top.tabs {
  float: left;
  display: inline;
  width: 100%;
  height: 30px !important;
  background: transparent !important;
  overflow: hidden;
}

.column div.bucket div.top.tabs a:link,
.column div.bucket div.top.tabs a:visited {
  float: left;
  display: inline;
  width: auto;
  height: 30px;
  line-height: 30px;
  background-position: top;
  background-repeat: no-repeat;
  border: 0px;/* added this to cancel any borders, any borders distort the layout of the tab buttons*/
}

.column div.bucket div.top.tabs a:hover,
.column div.bucket div.top.tabs a:active {
  background-position: center;
}

.column div.bucket div.top.tabs a.here:link,
.column div.bucket div.top.tabs a.here:visited,
.column div.bucket div.top.tabs a.here:hover,
.column div.bucket div.top.tabs a.here:active {
  background-position: bottom;
}


.column div.bucket div.top.tabs a.columnMusic {
  width: 90px !important;
  background-image: url("../images/bucket_tab_music.gif") !important; 
}


.column div.bucket div.top.tabs a.columnVideos {
  width: 90px !important;
  background-image: url("../images/bucket_tab_video.gif") !important;
}


.column div.bucket div.top.tabs a.columnClips {
  width: 80px !important;
  background-image: url("../images/bucket_tab_clips.gif") !important; 
}

.column div.bucket div.top.tabs a span {
  display: none;
}

.column div.bucket select {
  width: 228px;
}

.column div.bucket input.text {
  width: 218px;
}

/* Article Header
------------------------------------------------------*/

div.icon {
  float: left;
  display: inline;
  width: 22px;
  height: auto;
}              

div.author {
  float: left;
  display: inline;
  width: 250px;
  height: auto;
}              

div.actions {
  float: right;
  display: inline;
  width: 170px;
  height: auto;
}

/* Left Nav Bukkits 
------------------------------------------------------*/

.left div.bucket div.top { background: #eeeeee url("../images/bucket_left_top.gif") no-repeat top; }
.left div.bucket div.bottom { background: #eeeeee url("../images/bucket_left_bottom.gif") no-repeat top; }

.left div.bucket div.middle {
  padding: 6px 10px;
  width: 158px;
  background: #ffffff;
}

.left div.bucket div.middle.leftNav {
  padding: 6px 0px !important;
  width: 178px;
}

.left div.bucket div.middle.leftNav p {
  margin: 0px;
}

.left div.bucket div.middle.leftNav a:link,
.left div.bucket div.middle.leftNav a:visited {
  display: block;
  text-decoration: none;
  color: #333333;
  padding: 4px 10px;
  font-size: 13px;
  line-height: 14px;
}

.left div.bucket div.middle.leftNav a:hover,
.left div.bucket div.middle.leftNav p a:active {
  color: #111111;
  background: #eeeeee;
}

.left div.bucket div.middle.leftNav a.here:link,
.left div.bucket div.middle.leftNav a.here:visited,
.left div.bucket div.middle.leftNav a.here:hover,
.left div.bucket div.middle.leftNav a.here:active {
  background: #eeeeee;
  color: #111111;
  font-weight: bold;
}


.left div.bucket div.middle.leftNav ul li ul li a.here:link,
.left div.bucket div.middle.leftNav ul li ul li a.here:visited,
.left div.bucket div.middle.leftNav ul li ul li a.here:hover,
.left div.bucket div.middle.leftNav ul li ul li a.here:active {
  background: #fff;
  color: #0079bc;
  font-weight: normal;
} 

.left div.bucket div.middle.leftNav div.list {
  margin: 0px;
} 

.left div.bucket div.middle.leftNav div.list ul {
  list-style: none;
  padding: 0px;
}

.left div.bucket div.middle.leftNav div.list li {    
  padding: 0px;
  display: inline;
}                                            

.left div.bucket div.middle.leftNav div.list ul ul {
  list-style: none;
  padding: 0px;
}     

.left div.bucket div.middle.leftNav div.list li li a {    
  font-size: 12px;
  padding: 2px 10px 2px 25px;
} 

.left div.bucket div.middle.leftNav div.list li li li a {    
  font-size: 11px;
  padding: 1px 10px 1px 40px;
} 

/* Left Nav Accordion
------------------------------------------------------*/
/*
.left div.bucket div.middle.leftNav .accordion h3 {
  position: relative;
}

.left div.bucket div.middle.leftNav .accordion h3 span.ui-icon {
  position: absolute;
  top: 0px;
  left: 4px;
  width: 24px;
  height: 24px;
  margin: 0px;
}
*/

/*
.left div.bucket div.middle.leftNav .accordion h3 span.ui-icon.accordion-plus { background: url("../images/accordion_right.gif") no-repeat center center; }
.left div.bucket div.middle.leftNav .accordion h3 span.ui-icon.accordion-minus { background: url("../images/accordion_down.gif") no-repeat center center; }
*/

.accordion h3 span.ui-icon.accordion-plus { background: url("../images/accordion_right.gif") no-repeat center center; }
.accordion h3 span.ui-icon.accordion-minus { background: url("../images/accordion_down.gif") no-repeat center center; }

.left div.bucket div.middle.leftNav .accordion h3 a:link,
.left div.bucket div.middle.leftNav .accordion h3 a:visited {
  text-decoration: none !important;
  font-size: 18px !important;
  padding-left: 28px !important;
}

.left div.bucket div.middle.leftNav .accordion h3 a:hover,
.left div.bucket div.middle.leftNav .accordion h3 a:active {
  text-decoration: none !important;
  font-size: 18px !important;
}

.left div.bucket div.middle.leftNav .accordion li a {
  padding-left: 30px !important;
}

/* Detail Page
------------------------------------------------------*/

div.image {
  float: left;
  display: inline;
  width: 260px;
  height: auto;
  position: relative;
  margin: 0px 0px 10px 0px;
}

div.image img.large,
img.whiteBorder {
  border: solid 3px #ffffff;
}

div.image img.play {
  position: absolute;
  z-index: 10;
  top: 95px;
  left: 95px;
  cursor: pointer;
}

div.image img.playVideo {
  position: absolute;
  z-index: 10;
  top: 70px;
  left: 95px;
  cursor: pointer;
}

.videoInterviews div.image {
  float: left;
  display: inline;
  width: 92px;
  height: auto;
  position: relative;
  margin: 0px 0px 10px 0px;
}

.videoInterviews div.image img.play {
  position: absolute;
  z-index: 10;
  top: 25px;
  left: 35px;
  cursor: pointer;
}

div.videoWs img.play {
  position: absolute;
  z-index: 10;
  top: 40px;
  left: 95px;
  cursor: pointer;
}

div.detail {
  float: right;
  display: inline;
  width: 185px;
  height: auto;
  margin: 0px 0px 10px 0px;
}

/* Grey Bukkit (Search)
------------------------------------------------------*/

.column div.bucket.grey div.top { background: #eeeeee url("../images/bucket_grey_top.gif"); }
.column div.bucket.grey div.middle { color: #333333; font-weight: bold; background: #dedede; border-color: #cccccc; }
.column div.bucket.grey div.bottom { background: #eeeeee url("../images/bucket_grey_bottom.gif"); }

.column div.bucket p.search { 
  height: 21px;
  margin: 0px;
  overflow: hidden;
  position: relative;
  background: url("../images/column_search_bg.gif") no-repeat;
}

.column div.bucket p.search input.image {
  position: absolute;
  top: 3px;
  left: 209px;
}
.column div.bucket p.search input.text {
  position: absolute;
  top: 4px;
  left: 22px;
  width: 180px;
  padding: 0px;
  border: 0px;
  background: transparent;
}

/* Red Bukkit
------------------------------------------------------*/

.column div.bucket.red div.top { background: #eeeeee url("../images/bucket_red_top.gif"); }
.column div.bucket.red div.middle { color: #ffffff; font-weight: bold; background: #e02828; border-color: #e02828; }
.column div.bucket.red div.bottom { background: #eeeeee url("../images/bucket_red_bottom.gif"); }


/* Purple Bukkit (Subscribe Button)
------------------------------------------------------*/

.column div.bucket.purple div.top { background: #eeeeee url("../images/bucket_purple_top.gif"); }
.column div.bucket.purple div.middle { color: #ffffff; font-weight: bold; background: #5d50a1; border-color: #5d50a1; }
.column div.bucket.purple div.bottom { background: #eeeeee url("../images/bucket_purple_bottom.gif"); } 

/* Green Bukkit (Subscribe Button)
------------------------------------------------------*/

.column div.bucket.green div.top { background: #eeeeee url("../images/bucket_green_top.gif"); }
.column div.bucket.green div.middle { color: #ffffff; font-weight: bold; background: #7fae18; border-color: #7fae18; }
.column div.bucket.green div.bottom { background: #eeeeee url("../images/bucket_green_bottom.gif"); } 

/* Blue Bukkit (PTontheNet Button)
------------------------------------------------------*/

.column div.bucket.blue div.top { background: #eeeeee url("../images/bucket_blue_top.gif"); }
.column div.bucket.blue div.middle { color: #ffffff; font-weight: bold; background: #0183cf; border-color: #0183cf; }
.column div.bucket.blue div.bottom { background: #eeeeee url("../images/bucket_blue_bottom.gif"); }

/* Buttons
------------------------------------------------------*/

a.button:link,
a.button:visited {
  float: left;
  display: inline;
  width: 228px;
  height: 30px;
  color: #000000;
  text-decoration: none;
  background-position: top;
  background-repeat: no-repeat;
}

a.button.fr {
  float: right !important;
}

a.button:hover,
a.button:active {
  color: #000000;
  background-position: bottom;
}

a.button.subscribe:link,
a.button.subscribe:visited {
  background-image: url("../images/button_subscribe.gif");
}

a.button.subscribeGreen:link,
a.button.subscribeGreen:visited {
  background-image: url("../images/button_subscribe_green.gif");
}

a.button.community:link,
a.button.community:visited {
  height: 50px;
  background-image: url("../images/button_community.gif");
}

a.button.addTopic:link,
a.button.addTopic:visited {
  background-image: url("../images/button_add_topic.gif");
}

a.button.search:link,
a.button.search:visited {
  background-image: url("../images/button_search.gif");
}

a.button.continueShopping:link,
a.button.continueShopping:visited {
  background-image: url("../images/button_continue.gif");
}

a.button.checkout:link,
a.button.checkout:visited {
  float: right !important;
  width: 248px !important;
  background-image: url("../images/button_checkout.gif");
}

a.button.createAccount:link,
a.button.createAccount:visited {
  width: 198px !important;
  background-image: url("../images/button_create_account.gif");
}

a.button.logIn:link,
a.button.logIn:visited {
  float: right;
  width: 108px !important;
  background-image: url("../images/button_log_in.gif");
}

a.button.saveCard:link,
a.button.saveCard:visited {
  width: 90px !important;
  height: 20px !important;
  background-image: url("../images/button_save_card.gif");
}

a.button.goBack:link,
a.button.goBack:visited {
  width: 98px !important;
  background-image: url("../images/button_back.gif");
}

a.button.reviewPurchase:link,
a.button.reviewPurchase:visited {
  float: right !important;
  width: 208px !important;
  background-image: url("../images/button_review_purchase.gif");
}

a.button.completePurchase:link,
a.button.completePurchase:visited {
  width: 230px !important;
  background-image: url("../images/button_complete_purchase.gif");
}

a.button.joinToSave:link,
a.button.joinToSave:visited {
  height: 50px !important;
  background-image: url("../images/button_join_to_save.gif");
}

a.button.joinNow:link,
a.button.joinNow:visited {
  height: 40px !important;
  background-image: url("../images/button_join_now.gif");
}

.main p.centered a.flexbutton {
  margin-left: 215px;
}

a.button.renewMembership:link,
a.button.renewMembership:visited {
  width: 176px !important;
  height: 20px !important;
  background-image: url("../images/button_renew_membership.gif");
}

a.button.renewMembershipBig:link,
a.button.renewMembershipBig:visited {
  width: 250px !important;
  height: 30px !important;
  background-image: url("../images/button_renew_membership_big.gif");
}

a.button.checkAvailability:link,
a.button.checkAvailability:visited {
  width: 250px !important;
  height: 30px !important;
  background-image: url("../images/button_check_availability.gif");
}

a.button.returnToHomepage:link,
a.button.returnToHomepage:visited {
  width: 263px !important;
  height: 30px !important;
  background-image: url("../images/button_return_to_homepage.gif");
}

a.button.yesContinue:link,
a.button.yesContinue:visited {
  width: 258px !important;
  height: 30px !important;
  background-image: url("../images/button_yes_continue.gif");
}
a.button.takeCecExam:link,
a.button.takeCecExam:visited {
  width: 224px !important;
  height: 34px !important;
  background-image: url("../images/button_take_cec_exam.gif");
}

a.button.favorite:link,
a.button.favorite:visited {
  width: 105px !important;
  height: 20px !important;
  background-image: url("../images/button_favorite.gif");
}

a.button.print:link,
a.button.print:visited {
  width: 45px !important;
  height: 20px !important;
  background-image: url("../images/button_print.gif");
}

a.button.go:link,
a.button.go:visited {
  width: 45px !important;
  height: 20px !important;
  background-image: url("../images/button_go.gif");
}

a.button.calendar:link,
a.button.calendar:visited {
  width: 27px !important;
  height: 20px !important;
  background-image: url("../images/button_calendar.gif");
}

a.button.view:link,
a.button.view:visited {
  width: 45px !important;
  height: 20px !important;
  background-image: url("../images/button_view.gif");
}

a.button.enter:link,
a.button.enter:visited {
  width: 45px !important;
  height: 20px !important;
  background-image: url("../images/button_enter.gif");
}

a.button.download:link,
a.button.download:visited {
  width: 71px !important;
  height: 20px !important;
  background-image: url("../images/button_download.gif");
}

a.button.next:link,
a.button.next:visited {
  width: 111px !important;
  height: 30px !important;
  background-image: url("../images/button_next.gif");
}

a.button.addWorkshop:link,
a.button.addWorkshop:visited {
  width: 131px !important;
  height: 20px !important;
  background-image: url("../images/button_add_workshop.gif");
}

a.button.addCertification:link,
a.button.addCertification:visited {
  width: 131px !important;
  height: 20px !important;
  background-image: url("../images/button_add_certification.gif");
}

a.button.addCECs:link,
a.button.addCECs:visited {
  width: 131px !important;
  height: 20px !important;
  background-image: url("../images/button_add_cecs.gif");
}

a.button.cancel:link,
a.button.cancel:visited {
  width: 106px !important;
  height: 30px !important;
  background-image: url("../images/button_cancel.gif");
}

a.button.save:link,
a.button.save:visited { 
  width: 106px !important;
  height: 30px !important; 
  background-image: url("../images/button_save.gif");
}

a.button.buy:link,
a.button.buy:visited { 
  width: 76px !important;
  height: 30px !important; 
  background-image: url("../images/button_buy.gif");
}

a.button.preview:link,
a.button.preview:visited { 
  width: 96px !important;
  height: 30px !important; 
  background-image: url("../images/button_preview.gif");
}

a.button.remove:link,
a.button.remove:visited {
  width: 50px !important;
  height: 20px !important;
  background-image: url("../images/button_remove.gif");
}

a.button.update:link,
a.button.update:visited {
  width: 50px !important;
  height: 20px !important;
  background-image: url("../images/button_update.gif");
}

a.button.streamSmall:link,
a.button.streamSmall:visited {
  width: 77px !important;
  height: 20px !important;
  background-image: url("../images/button_stream_small.gif");
}

a.button.downloadSmall:link,
a.button.downloadSmall:visited {
  width: 99px !important;
  height: 20px !important;
  background-image: url("../images/button_download_small.gif");
}

a.button.content:link,
a.button.content:visited {
  width: 74px !important;
  height: 24px !important;
  background-image: url("../images/button_content.gif") !important;
}

a.button.courses:link,
a.button.courses:visited {
  width: 74px !important;
  height: 24px !important;
  background-image: url("../images/button_courses.gif");
}

a.button.website:link,
a.button.website:visited {
  width: 74px !important;
  height: 24px !important;
  background-image: url("../images/button_website.gif");
}

a.button.generic:link,
a.button.generic:visited {
  text-align: center;
  font-size: 18px;
  line-height: 19px;
  font-weight: normal;
  letter-spacing: -1px;
  padding: 5px 0px 0px 0px !important;
  height: 45px !important;
  background-image: url("../images/button_generic.png");
}

.mid div.bucket p.centered a.button {
  margin-left: 115px;
}

a.button span { display: none; }

/* Mid Column Bukkit
------------------------------------------------------*/

.mid div.bucket div.top { background: #eeeeee url("../images/bucket_mid_top.gif") no-repeat top; }
.mid div.bucket div.bottom { background: #eeeeee url("../images/bucket_mid_bottom.gif") no-repeat top; }

.mid div.bucket div.middle {
  padding: 6px 10px;
  width: 458px;
  background: #ffffff;
}

.mid div.bucket div.middle.noPadding { width: 478px; padding: 6px 0px; }

.mid div.bucket.featured div.middle { background: #ffffff url("../images/bucket_mid_bg_featured.gif") no-repeat bottom !important;}
.mid div.bucket.featured div.bottom { background-image: url("../images/bucket_mid_bottom_featured.gif") !important;}

/* Mid Column Bukkit Filters
------------------------------------------------------*/

.mid div.bucket div.middle.padded { padding-top: 10px !important; } 
.mid div.bucket div.filter { padding: 10px; width: 460px; background: #eeeeee url("../images/bucket_mid_filter_bg.gif") no-repeat top; }
.mid div.bucket div.pagination { padding: 10px; width: 460px; background: #eeeeee url("../images/bucket_mid_pagination_bg.gif") no-repeat bottom; }

div.bucket div.filter select.short { width: 64px; }


/* Albums on Internal Pages
------------------------------------------------------*/

div.albumRow div.album {
  width: 210px;
  height: auto;
}

div.albumRow div.album p.description {
  width: 105px;
  height: auto;
}

.main div.bucket div.middle.padded { padding-top: 10px !important; } 
.main div.bucket div.filter { padding: 10px 5px; width: 670px; background: #eeeeee url("../images/bucket_filter_bg.gif") no-repeat top; }
.main div.bucket div.pagination { padding: 10px 5px; width: 670px; background: #eeeeee url("../images/bucket_pagination_bg.gif") no-repeat bottom; }

a.addToCart:link,
a.addToCart:visited {
  float: left;
  display: inline;
  width: 72px;
  height: 20px;
  background: url("../images/button_cart.gif") top no-repeat;
}

a.addToCart:hover,
a.addToCart:active {
  background-position: bottom;
}

div.album a span { display: none; }

div.bucket div.pagination a,
div.bucket div.pagination span,
div.bucket div.pagination strong {
  margin: 0px 1px;
}

div.bucket div.filter select {
  width: 84px;
  margin: 0px 1px;
}

div.bucket div.filter select.sort {
  width: 90px;
  margin: 0px 1px;
}

div.bucket div.pagination select {
  width: 45px;
  margin: 0px 3px;
}

/* Full Video / Quick Clip Toggle Switch 
------------------------------------------------------*/

div.toggle {
  float: left;
  display: inline;
  width: 220px;
  height: 20px;
  padding: 5px 0px;
  background: url("../images/toggle_bg.gif") no-repeat center center;
}

div.listWrapper div.toggle { margin-left: 19px; }

div.toggle p {
  line-height: 20px;
  background-repeat: no-repeat;
  background-image: url("../images/toggle_dot.gif");
}

div.toggle p.left { background-position: 95px 4px; }
div.toggle p.right { background-position: 112px 4px; }

div.toggle a:link,
div.toggle a:visited {
  color: #888888;
}

div.toggle a.fl {
  margin-left: 15px;
}

div.toggle a.fr {
  margin-right: 15px;
}

div.toggle a.active:link,
div.toggle a.active:visited,
div.toggle a:hover,
div.toggle a:active {
  color: #ffffff;
}

div.toggle a.active:link,
div.toggle a.active:visited,
div.toggle a.active:hover,
div.toggle a.active:active {
  font-weight: bold;
}


/* Horizontal Albums 
------------------------------------------------------*/

div.cecArticle {
  float: left;
  display: inline;
  width: 145px;
  height: auto;
  padding-right: 4px;
}

div.cecArticle p.icon {
  float: left;
  display: inline;
  width: 14px;
  height: 16px;
  margin: 0px 5px 0px 0px;
  padding: 0px 0px 0px 6px;
}

div.cecArticle p.description {
  float: left;
  display: inline;
  width: 115px;
  height: auto;
  margin: 0px;
}

div.album {
  float: left;
  display: inline;
  width: 200px;
  height: auto;
  padding-right: 4px;
}

div.album p.image {
  float: left;
  display: inline;
  width: 92px;
  height: 92px;
  margin: 0px 7px 0px 0px;
  padding: 6px 0px 0px 6px;
  background: url("../images/album_shadow.gif") no-repeat top;
}

div.album p.description {
  float: left;
  display: inline;
  width: 95px;
  height: 98px;
  margin: 0px;
}


div.musicBpm  div.album p.description {
  float: left;
  display: inline;
  width: 150px;
  height: 75px;
  margin: 0px;
}

/* ShareThis Widget
------------------------------------------------------*/

.sharethis {
  position: relative;
  bottom: 3px;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0px;
  color: #117711;
  border: 0px !important;
}

.sharethis:hover {
  color: #005500;
}

/* Arrow Buttons 
------------------------------------------------------*/

a.arrow:link,
a.arrow:visited {
  display: inline;
  width: 19px !important;
  height: 34px !important;
  background-repeat: no-repeat;
  background-position: top;
}

a.arrow.active:link,
a.arrow.active:visited,
a.arrow.inactive:hover,
a.arrow.inactive:active {
  background-position: center;
}

a.arrow.inactive:hover,
a.arrow.inactive:active {
  background-position: top;
  cursor: default;
}

a.arrow.active:hover,
a.arrow.active:active {
  background-position: bottom;
}

a.arrow.back {
  float: left !important;
  margin: 32px 8px 0px 0px;
  background-image: url("../images/arrow_left.gif") !important;
}

a.arrow.next {
  float: right !important;
  margin: 32px 0px 0px 0px;
  background-image: url("../images/arrow_right.gif") !important;
}


/* Center Column -> Horizontal Albums 
------------------------------------------------------*/

.mid div.album {
  float: left;
  display: inline;
  width: 130px;
  height: auto;
  padding-right: 4px;
}

.mid div.album p.image {
  float: left;
  display: inline;
  width: 46px;
  height: 46px;
  padding: 0px;
  margin: 0px 4px 0px 0px;
  background: transparent;                                               
}

.mid div.album p.image img {  
  width: 40px;
  height: 40px;
  border: solid 3px #ffffff;
}

.mid div.album p.description {
  float: left;
  display: inline;
  width: 75px;
  height: auto;
  margin: 0px;
}   

.mid a.arrow.back,
.mid a.arrow.next {
  margin-top: 10px;
}

/* Narrow Layout Album Row
------------------------------------------------------*/

.mid div.albumRow div.album {
  width: 148px;
}

.mid div.albumRow div.album p.description {
  float: right;
  width: 90px;
  height: auto;
}


/* Icon
------------------------------------------------------*/

img.icon {
  float: left;
  display: inline;
  margin: 0px 4px 0px 0px;
  position: relative;
  top: 0px;
  left: 0px;
}

img.inline {
  display: inline;
}

/* Shopping Cart
------------------------------------------------------*/


div.cart {
  float: left;
  display: inline;
  min-height: 15px; 
  height: auto !important; 
  height: 15px;
}

div.cart.description { width: 300px;  margin-right: 10px; }
div.cart.quantity { width: 100px; margin-right: 10px; }
div.cart.unitprice {width:60px; margin-right:10px;}
div.cart.price { width: 60px; margin-right: 10px; }
div.cart.total { width: 80px;  }
div.cart.address { width: 130px; margin-right: 10px; }
div.cart.action { float: right !important; width: 50px; margin-right: 10px; }

div.filter div.cart.description { width: 295px; margin-left: 10px; }

div.cart p.image {
  float: left;
  display: inline;
  width: 54px;
  height: 54px;
  margin: 0px;
  padding: 6px 0px 0px 6px;
  background: url("../images/album_shadow_small.gif") no-repeat top;
}

div.cart p.image.noShadow {
  background: transparent !important;
}

div.cart p.description {
  width: 230px !important;
  height: auto;
  margin: 0px 0px 0px 7px;
}

/* Checkout
------------------------------------------------------*/

div.checkout a:link,
div.checkout a:visited {
  float: left;
  display: inline;
  height: 38px;
  background-repeat: no-repeat;
}

div.checkout a.inactive:link,
div.checkout a.inactive:visited,
div.checkout a.inactive:hover,
div.checkout a.inactive:active { 
  background-position: top; 
}

div.checkout a.active:link,
div.checkout a.active:visited { 
  background-position: 0px -38px; 
}

div.checkout a.active:hover,
div.checkout a.active:active { 
  background-position: 0px -76px; 
}

div.checkout a.here:link,
div.checkout a.here:visited { 
  background-position: bottom; 
}

div.checkout div#checkoutLogin a   { width: 226px; background-image: url("../images/checkout_login.gif"); }
div.checkout div#checkoutPayment a { width: 227px; background-image: url("../images/checkout_payment.gif"); }
div.checkout div#checkoutReview  a { width: 227px; background-image: url("../images/checkout_review.gif"); }

div.checkout a span { display: none; }


/* Checkout Column Layout
------------------------------------------------------*/

.main div.bucket div.half { width: 300px; padding: 10px; }

.main div.bucket div.half div.th { width: 120px; }
.main div.bucket div.half div.td { width: 170px; }

.main div.bucket div.half div.td input.text { width: 160px; }
.main div.bucket div.half div.td select { width: 170px; }

.main div.bucket div.twoThirds { width: 400px; padding: 10px; }
.main div.bucket div.third { width: 200px; padding: 9px; }

.main div.bucket div.twoThirds div.th { width: 130px; }
.main div.bucket div.twoThirds div.td { width: 250px; }

.main div.bucket div.twoThirds div.td input.text { width: 240px; }
.main div.bucket div.twoThirds div.td select { width: 250px; }


/* Mid Column Third-Width Bukkit
------------------------------------------------------*/

.main div.bucket div.third div.top { background: url("../images/bucket_third_top.gif") no-repeat top; }
.main div.bucket div.third div.bottom { background: url("../images/bucket_third_bottom.gif") no-repeat top; }

.main div.bucket div.third div.middle {
  padding: 6px 10px;
  width: 178px;
  background: #e8e8e8;
  border-color: #c5cdd3;
}

.main div.bucket div.third div.middle input.text {
  width: 168px;
}

/* Rewards Accordion
------------------------------------------------------*/

h3.rewards {
  width: 208px;
  padding: 0px 10px;
  color: #ffffff;
  height: 32px;
  line-height: 32px;
  margin: 0px 0px 10px 0px;
  cursor: pointer;
}

h3.rewards.platinum { background: url("../images/rewards_platinum.gif") no-repeat top; }
h3.rewards.gold     { background: url("../images/rewards_gold.gif") no-repeat top; }
h3.rewards.silver   { background: url("../images/rewards_silver.gif") no-repeat top; }
h3.rewards.bronze   { background: url("../images/rewards_bronze.gif") no-repeat top; }
h3.rewards.pricing  { background: url("../images/rewards_pricing.gif") no-repeat top; }
h3.rewards.clear  { color: #444444; }

h3.rewards span.ui-icon {
  float: left;
  display: inline;
  width: 18px;
  height: 18px;
  margin: 7px 4px 0px 0px;
  background-repeat: no-repeat;
}

h3.rewards span.ui-icon.accordion-plus { background-position: left; }
h3.rewards span.ui-icon.accordion-minus { background-position: right; }

h3.rewards.platinum span.ui-icon { background-image: url("../images/accordion_platinum.gif"); }
h3.rewards.gold span.ui-icon     { background-image: url("../images/accordion_gold.gif"); }
h3.rewards.silver span.ui-icon   { background-image: url("../images/accordion_silver.gif"); }
h3.rewards.bronze span.ui-icon   { background-image: url("../images/accordion_bronze.gif"); }
h3.rewards.pricing span.ui-icon  { background-image: url("../images/accordion_pricing.gif"); }

div.rewardsDetail {
  margin-bottom: 15px;
  overflow: hidden;
}

/* My Account Icons
------------------------------------------------------*/

.account { 
  float: left;
  display: inline;
  width: 105px;
  height: 110px;
  margin: 0px 20px 20px 0px;
}                         

.account.last {  
  margin: 0px !important;
} 

/* My Account >> Build Rewards Links
------------------------------------------------------*/

h3.shop {
  width: 208px;
  padding: 0px 10px;
  color: #ffffff;
  height: 32px;
  line-height: 32px;
  margin: 0px 0px 10px 0px;
  cursor: pointer;
}

h3.shop.orange { background: url("../images/shop_orange.gif") no-repeat top; }
h3.shop.green  { background: url("../images/shop_green.gif") no-repeat top; }
h3.shop.purple { background: url("../images/shop_purple.gif") no-repeat top; }         
     
h3.shop a:link,
h3.shop a:visited {
  color: #ffffff;
  text-decoration: none;
  display: block;
}                

h3.shop a:hover,
h3.shop a:active {
  text-decoration: none;
}

/* Presenters
------------------------------------------------------*/

div.featuredPresenter {
  float: right;
  display: inline;
  width: 380px;
  height: auto;
}

div.presenter {
  float: right;
  display: inline;
  width: 360px;
  height: 30px;
}

img.presenter {
  position: relative;
  bottom: 40px;
}

/* Forum Comments
------------------------------------------------------*/

div.comment {
  padding: 0px 0px 3px 0px;
  background: #d7d7d7 url("../images/comment_bottom.gif") no-repeat bottom;
}

div.comment p.meta {
  width: 435px;
  height: 25px;
  padding: 5px 5px 5px 18px;
  background: url("../images/comment_top.gif") no-repeat top;
}

div.comment div.message {
  width: 422px;
  margin: 0px 3px;
  padding: 7px 15px 10px 15px;
  background: #f1f1f1 url("../images/comment_text_bottom.gif") no-repeat bottom;
}

div.comment div.reply {
  width: 428px;
  padding: 15px;
}

div.comment div.reply textarea {
  width: 418px;
  height: 150px;
}

/* Courses
------------------------------------------------------*/

div.featuredCourse {
  float: right;
  display: inline;
  width: 390px;
  height: auto;
}

/* Faux Tables
------------------------------------------------------*/

div.th {
  float: left;
  display: inline;
  width: 30%;
  height: auto;
  padding: 4px 0px 0px 0px;
  font-weight: bold;
}

div.td {
  float: right;
  display: inline;
  width: 68%;
  height: auto;
}

div.td.data {
  padding: 4px 0px 0px 0px !important;
}

/* Tables
------------------------------------------------------*/

table {
  float: left;
  display: inline;
  width: 100%;
  min-width: 100%;
  height: auto;
  border-collapse: collapse;
}

th {
  padding: 4px 5px;
  font-weight: bold;
  border-bottom: solid 1px #cccccc;
  vertical-align: top;
}

td {
  padding: 4px 5px;
  border-bottom: dotted 1px #cccccc;
  vertical-align: top;
}

table.pricing {
  background: url("../images/pricing_table_bottom.gif") no-repeat bottom;
}

table.pricing th {
  padding: 4px 3px;
  background: #9fcade;
}

table.pricing th.top {
  border: 0px;
  background: url("../images/pricing_table_top.gif") no-repeat top;
}

table.pricing th.left {
  background: url("../images/pricing_table_top.gif") no-repeat bottom left;
}

table.pricing th.right {
  background: url("../images/pricing_table_top.gif") no-repeat bottom right;
}

table.pricing td {
  padding: 4px 3px;
  border: 0px;
}

table.closed {
  border: solid 1px #cccccc;       
  margin: 0px 0px 10px 0px;
}                              

table.closed tr.last td { border: 0px; }
table.closed tr.summary td { border: 0px; border-top: solid 1px #cccccc; }  
                  
tr.bronze th {
  color: #ffffff;
  background-color: #72540b;
}   

tr.silver th {
  color: #ffffff;
  background-color: #949494;
}   

tr.gold th {
  color: #ffffff;
  background-color: #d9ae17;
}  

tr.platinum th {
  color: #ffffff;
  background-color: #33333e;
}  

tr.purple th {
  color: #ffffff;
  background-color: #60589b;
}    

/* jQuery.dataTables Sorting
------------------------------------------------------*/ 
         
table.sort th {          
  cursor: pointer;
	background-repeat: no-repeat;
	background-position: center right;
}
                          
.sorting_asc {
  padding-right: 20px !important;
	background-image: url('../images/sort_asc.png');
}

.sorting_desc {  
  padding-right: 20px !important;
	background-image: url('../images/sort_desc.png'); 
}

.sorting {   
  padding-right: 20px !important;
	background-image: url('../images/sort_both.png'); 
}

.sorting_asc_disabled {  
  padding-right: 20px !important;
	background-image: url('../images/sort_asc_disabled.png');    
}

.sorting_desc_disabled { 
  padding-right: 20px !important;
	background-image: url('../images/sort_desc_disabled.png');   
}


/* Receipt Popup
------------------------------------------------------*/                           

#receipt {
  width: 500px;  
  padding: 50px;
  height: auto;
  margin: 0 auto;
}                


/* Footer 
------------------------------------------------------*/

#footer {
  z-index: 2;
  padding: 20px 0px 110px 0px;
}

#footer p a:link,
#footer p a:visited,
#footer p span {
  display: inline !important;
  width: auto !important;
  color: #777777;
  margin: 0px 5px;
  text-decoration: none;
}

#footer p a:hover,
#footer p a:active {
  color: #333333;
}

/* HR 
------------------------------------------------------*/

div.hr {
  float: left;
  display: inline;
  width: 100%;
  height: 1px;
  font-size: 0px;
  line-height: 0px;
  margin: 0px 0px 10px 0px;
  border-top: solid 1px #bbbabe;
}

div.hr.dotted {
  border-top: dotted 1px #bbbabe !important;
}

div.hr.double {
  border-top-width: 2px !important;
}

/* Header Tags 
------------------------------------------------------*/

h1, h2, h3, h4, div.list, blockquote {
  /*float:left; */
  display:inline-block; 
  width: 100%;
  height: auto;
  margin: 0px 0px 5px 0px;
}


h1 {
  font-size: 24px;
  line-height: 20px;
  font-weight: normal;
  letter-spacing: -1px;
  margin-bottom: 10px;
  color: #111111;
}

h1 .st_sharethis { text-transform: capitalize; }

h2 {
  font-size: 21px;
  line-height: 21px;
  font-weight: normal;
  letter-spacing: -2px;
}

h3 {
  font-size: 18px;
  line-height: 18px;
  font-weight: normal;
  letter-spacing: -1px;
}

h3.justify {          
  font-size: 18px;
  line-height: 16px;
}

h4 {
  font-size: 15px;
  line-height: 15px;
  color: #999999;
  font-weight: normal;
  letter-spacing: -1px;
}

h4.breadcrumb {
  font-size: 12px;
  line-height: 12px;
}

h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, .replace a:link, .replace a:visited {
  text-decoration: none;
  border-bottom: solid 1px;
}

.leftNav a:link, .leftNav a:visited, .breadcrumb a:link, .breadcrumb a:visited {
  border-bottom: 0px !important;
}


/* Tags 
------------------------------------------------------*/

p, div.list, blockquote {
  margin-bottom: 10px;
}

a:link,
a:visited {
  color: #0077bb;
}

a:hover,
a:active {
  color: #3399dd;
}

a.white:link,
a.white:visited {
  color: #ffffff;
}

a.white:hover,
a.white:active {
  color: #eeeeee;
}

a.black:link,
a.black:visited {
  color: #111111;
}

a.black:hover,
a.black:active {
  color: #333333;
}

a.blueBlack:link,
a.blueBlack:visited {
  color: #111111;
}

a.blueBlack:hover,
a.blueBlack:active {
  color: #3399dd;
}

a.grey:link,
a.grey:visited {
  color: #999999;
}

a.grey:hover,
a.grey:active {
  color: #666666;
}

a.noline:link,
a.noline:visited {
  text-decoration: none;
}

a.noline:hover,
a.noline:active {
  text-decoration: underline;
}

a.disabled:link,
a.disabled:visited,
a.disabled:hover,
a.disabled:active {
  color: #6699aa;
  cursor: default;
  text-decoration: none;
}

strong, .strong { font-weight: bold; }
em, .em { font-style: italic; }

img { display: block; }

/* Columns 
------------------------------------------------------*/

.half { width: 50%; }
.third { width: 30%; }
.twoThirds { width: 65%; }
.full { width: 100%;}

/* Forms 
------------------------------------------------------*/

input, select, textarea {
  font-family: Arial, Helvetica, sans-serif;
}

input.text,
textarea {
  font-size: 11px;
  line-height: 12px;
  margin: 0px;
  padding: 4px;
  color: #444444;
  border: solid 1px #89b6cb;
  background: #ffffff;
}

input.text.number {
  width: 30px !important;
  padding: 2px !important;
  margin-right: 4px;
}

input.text.wide,
textarea.wide {
  width: 290px !important;
}

textarea.wide {
  height: 290px;
}

textarea.full {
  width: 448px;
  height: 150px;
}

input.text.tryAgain {
  border-color: #ff0033 !important;
}

select {
  font-size: 11px;
  line-height: 12px;
  margin: 0px;
  padding: 2px;
  color: #444444;
  border: solid 1px #89b6cb;
  background: #ffffff;
}

select.wide {
  width: 300px;
  height: 100px;
}

input.submit, a.submit {
  width: 200px;
  height: 30px;
  border: 0px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: -1px;
  font-weight: bold;
  color: #111111;
  cursor: pointer;
  background: url("../images/submit_bg.gif") no-repeat top;
}

input.submit:hover {
  background-position: bottom;
}

input.text.disabled,
select.disabled {
  color: #999999 !important;
  background: #dddddd !important;
  border-color: #999999;
}


/* Tableless Table 
------------------------------------------------------*/

div.tr {
  float: left;
  display: inline;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}

div.th {
  float: left;
  display: inline;
  width: 30%;
  height: auto;
  margin: 5px 0px 0px 5px;
  padding: 0px;
}

div.td {
  float: right;
  display: inline;
  width: 65%;
  height: auto;
  margin: 5px 5px 0px 0px;
  padding: 0px;
  
}

.eventSummary div.th {
  float: left;
  display: inline;
  width: 15%;
  height: auto;
  margin: 0px;
  padding: 0px;
}

.eventSummary div.td {
  float: right;
  display: inline;
  width: 80%;
  height: auto;
  margin: 0px 5px 0px 0px;
  padding: 0px;
  
}


.downloadsSupport div.td {
  float: left;
  display: inline;
  width: 48%;
  height: auto;
  margin: 0px 5px 0px 0px;
  padding: 0px;
  
}




/* Lists 
------------------------------------------------------*/

ul, ol {
  margin: 0px;
}

ul {
  list-style-type: square;
  padding: 0px 0px 0px 18px; 
  clear:both;   
}

ol {
  list-style: decimal;
  font-weight: bold;
  color: #999999;
  padding: 0px 0px 0px 28px; 
  clear:both;    
}

ul li {
  padding: 0px 0px 4px 0px;
  margin: 0px;
  font-weight: normal;
  color: #333333;  
}

ol li {
  padding: 0px 0px 4px 0px;
  margin: 0px;
  
}

ul li ul {
  margin: 4px 0px;
  padding: 0px 0px 0px 18px;  
  
}

ol li ol {
  list-style:lower-alpha;
  margin: 4px 0px;
  padding: 0px 0px 0px 18px;   
}

ul li ul li, ol li ol li {
  font-size: 11px;
  line-height: 16px;
  padding: 0px;
  margin: 0px;
  margin-left:20px; 
}

/* update style in all the pages */
ol, ul{    
    font-weight: normal;
    color: #333333; 
    margin-left:20px;
}



/****** accordion ******/

div.accordion{
  float: left;
  display: inline;
  width: 100%;
  height: auto;
}
  
div.list {
  font-family: Arial, Helvetica, sans-serif;
  float: left;
}

div.list h3 {
  font-family: Arial, Helvetica, sans-serif;
  float: left;
  cursor: pointer;
  padding-left: 20px;
  position: relative;
  width: 430px;
  font-size: 14px;
}

div.list h3 span.ui-icon {
  float: left;
  display: inline;
  height: 15px;
  margin-left: -20px;
  width: 11px;
}

.ui-icon-plus {
  background: url("../images/plus.gif") 0px 4px no-repeat !important;
}

.ui-icon-minus { 
  background: url("../images/minus.gif") 0px 4px no-repeat !important;
}

.list_body {
  float: left;  
  width: 410px;
  padding: 0 0 5px 20px;
  font-size: 11px;
}


/* Clearfix 
------------------------------------------------------*/

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
 
.clearfix {
  display: inline-block; /* "inline-block" is an invalid CSS display property; necessary for IE clearfix support */
}
 
html[xmlns] .clearfix {
  display: block;
}
 
* html .clearfix {
  height: 1%;
}

/* Misc.
------------------------------------------------------*/

.shadow {
  -moz-box-shadow: 0px 0px 8px #cccccc;
  -webkit-box-shadow: 0px 0px 8px #cccccc;
  box-shadow: 0px 0px 8px #cccccc;
  /* For IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}

.border{ border: solid thin #000;}

.alphabet {
  color: #a3a3a3;
  letter-spacing: 2px !important;
  text-decoration: none;
  text-transform: uppercase; 
}

.alphabet a:link,
.alphabet a:visited {
  line-height: 20px;
  color: #737373;
  text-decoration: none; 
  text-align: center;
}

.alphabet a:hover,
.alphabet a:active {
  color: #0079bc;
}

.alphabet a.here:link,
.alphabet a.here:visited,
.alphabet a.here:hover,
.alphabet a.here:active {
  color: #0079bc;
  padding: 1px 2px 1px 4px;
  background-image: url('../images/alphabet-bg.png');
  border: solid 1px #0079bc;
}

.cke_wrapper table {
  float: none !important;
}

/* Common Classes 
------------------------------------------------------*/

.fl { float: left !important; }
.fr { float: right !important; }
.fm { margin: 0 auto;}

.cb {clear:both;}
.cl {clear:left;}
.cr {clear:right;}

.upc { text-transform: uppercase;}

.inline { display: inline !important; }
.block {display:inline-block !important;}

.centered { text-align: center; }
.ar { text-align: right; }
.nobold { font-weight: normal; }
.justify { text-align: justify; }

.mb { margin-bottom: 10px !important; }
.dmb { margin-bottom: 20px !important; }
.bmb { margin-bottom: 30px !important; }
.bmt { margin-top: 30px !important; }
.mt { margin-top: 10px !important; }
.ml { margin-left: 10px !important; }
.bml { margin-left: 20px !important; }
.hml { margin-left: 40px !important; }
.mr { margin-right: 10px !important; }
.nm { margin: 0px !important; }
.sm { margin-bottom: 2px !important; }
.hm { margin-bottom: 5px !important; }
.smr { margin-right: 2px; }
.sml { margin-left: 2px; }
.smt { margin-top: 2px; }  
.smb { margin-bottom: 2px; } 
 
.addLeft, .padLeft { padding-left: 15px;}
.padRight { padding-right: 15px;}

.small { font-size: 10px; line-height: 14px; font-family: Tahoma, Geneva, sans-serif; }
.normal { font-size: 11px; line-height: 16px; }
.medium { font-size: 12px; line-height: 17px; }
.imedium { font-size: 13px; line-height: 17px; }
.big { font-size: 14px; line-height: 20px; }
.huge { font-size: 17px; line-height: 20px; }
.huger { font-size: 22px; line-height: 24px; }

.hugerLineHeight { line-height: 24px; }

.red { color: #ff0033; }
.lightred { color: #ee9999;}
.orange { color: #ee6622; }
.green { color: #99cc33; }
.blue { color: #4488cc; }
.purple { color: #5d5099; }
.magenta { color: #bb3399; }
.grey { color: #777777; }
.black { color: #222222; }
.white { color: #ffffff; }
.dkblue { color: #4f656f; }

.bglblue { background-color: #f1f7fa;}
.bgblue { background-color: #dff1fa;}
td.lBlue {background-color: #e2eff5;}

.bronze   { color: #72540b; }
.silver   { color: #949494; }
.gold     { color: #d9ae17; }
.platinum { color: #33333e; }

.borderBottom { border-bottom: dotted 1px #aaaaaa; padding-bottom: 8px; }

#fbmvc_debug { background: transparent !important; color: #ffffff !important; }