/* common classes */
.left
{
  float: left;
}

.right
{
  float:right;
}


/* toolbar containers and boxes */
div#fusion-toolbar-container
{
  bottom:0;
  font-size:12px;
  height:40px;
  padding:0;
  position:fixed;
  right:0;
  width:100%;
  z-index:999;
}

div#fusion-toolbar
{
  color:#FFFFFF;
  background-color:#333333;
  position: relative;
  height: 100%;
  overflow: visible !important;
}

div#fusion-toolbar div#logo
{
  position:relative;
  width:150px;
  height: 100%;
  background: url(../../images/fusion-logo-2.png) no-repeat 20px 9px;
  border-right: 1px solid #666;
}

div#fusion-toolbar div#description
{
  position: relative;
  margin: 10px 10px;
}

div#toolbar-settings
{
  width: 100px;
  height: 100%;
  margin-left: 5px;
  margin-right: 5px;
  border-left: 1px solid #666;
}

div#toolbar-settings span
{
   display: block;
   width: 50px;
   margin: 10px auto;
   cursor: pointer;
}

/********************
 * Toolbar Carousel *
 ********************/

div.fusion-toolbar-carousel-container
{
   width: 300px;
   position: relative;
   height: 32px;
   margin-top: 2px;
}

/* the class .jcarousel-container is added by the script to the parent container (div.fusion-toolbar-carousel-container) */
div.fusion-toolbar-carousel-container .jcarousel-container {
    position: relative;
}

/* the class .jcarousel-clip is added by the script to the wrap the list container (wrap width < container < width) */
div.fusion-toolbar-carousel-container .jcarousel-clip
{
    z-index: 2;
    padding: 0;
    overflow: hidden;
    position: relative;
    width: 239px;
    margin:0 auto;
}

/* the class .jcarousel-list is added by the script to the list container */
div.fusion-toolbar-carousel-container .jcarousel-list
{
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}


ul.toolbar-carousel
{
  padding:0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

ul.toolbar-carousel li
{
  float: left;
  margin-left: 3px;
  margin-right: 2px;
  width: 32px;
  height: 32px;
  list-style: none;
  cursor: pointer;
  border:1px solid transparent;
}

ul.toolbar-carousel li a
{
  display:block;
  height:32px;
  width:32px;
  background-repeat: no-repeat;
}

ul.toolbar-carousel li a.toolbar-carousel-item-out
{
  background-position: 0 -32px;
}

ul.toolbar-carousel li a.toolbar-carousel-item-hover
{
  background-position: 0 0;
}

/* toolbar carousel buttons (prev and next) */
.jcarousel-next-horizontal {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../../images/toolbar-next-horizontal.png) no-repeat 0 -32px;
}


.jcarousel-next-horizontal:active {
    background-position: 0 -32px;
}

.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover,
.jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: 0 0;
}

.jcarousel-prev-horizontal {
    position: absolute;
    top: 0px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../../images/toolbar-prev-horizontal.png) no-repeat 0 -32px;
}


.jcarousel-prev-horizontal:active {
    background-position: 0 -32px;
}

.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: 0 0;
}


/************
 * Tooltip  *
 ************/

.tipsy
{ 
   padding: 5px;
   font-size: 11px;
   opacity: 0.8;
   filter: alpha(opacity=80);
   background-repeat: no-repeat;
}

.tipsy-inner
{ 
  padding: 5px 5px;
  background-color: black;
  color: white;
  max-width: 200px;
  text-align: center;
}
  
.tipsy-south
{
  background-image: url(../../images/tipsy-south.gif);
  background-position: bottom center;
}

.tipsy-north
{
  background-image: url(../../images/tipsy-north.gif);
  background-position: top center;
}

 .tipsy-west
 {
   background-image: url(../../images/tipsy-west.gif);
   background-position: left center;
 }

/*****************
 * Display Icon  *
 *****************/

div.toggle-display-container
{
  height: 100%;
  border-left: 1px solid #666666;
  position: relative;
  float: right;
}

div.toggle-display-container a
{
  display:block;
  margin-top: 2px;
  margin-left: 5px;
  width:32px;
  height: 32px;
}

div.toggle-display
{
  position: relative;
  height:100%;
  width: 100%;
  cursor: pointer;
}

.with-toolbox
{
  background: transparent url(../../images/with-toolbox.png) no-repeat scroll 0 0;
}

.without-toolbox
{
  background: transparent url(../../images/without-toolbox.png) no-repeat scroll 0 0;
}




/*****************************
 * Quick links floating box  *
 *****************************/

div.quick-links
{
  width:32px;
  height:128px;
  position:fixed !important;
  z-index:99;
  top: 35%;
  left: 0px;
}


div.quick-links a.floating-link
{
  height: 32px;
  width: 32px;
  display: block;
  
  cursor: pointer;
}

div.quick-links a.site-change
{
  background: transparent url(../../images/fusionslide.png) no-repeat;
  background-position:0 -32px;
}

div.quick-links a.style-change
{
  background: transparent url(../../images/fusionslide.png) no-repeat;
  background-position:-32px -32px;
}

div.quick-links a.script-change
{
  background:url("../../images/fusionslide.png") no-repeat scroll -96px -32px transparent;
}


div.quick-links a.route-change
{
  background: transparent url(../../images/fusionslide.png) no-repeat;
  background-position:-64px -32px;
}

div.quick-links a.site-change:hover
{
  background-position:0 0;
}

div.quick-links a.style-change:hover
{
  background-position:-32px 0px;
}

div.quick-links a.route-change:hover
{
  background-position:-64px 0px;
}

div.quick-links a.script-change:hover
{
  background-position:-96px 0px;
}


div#style-editor-container
{
    margin-top: 10px;
}

.style-link
{
  cursor: pointer;
  margin-left: 10px;
  display: block;
}

div#style-editor-buttons
{
  margin-top: 10px;
}