/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
 
  
.scrollable {
    margin-top:-10px;
    /* required settings */
    top:0px;
    position:relative;
    overflow:hidden;
    width: 100%;
    border-top: 0px solid #7ecef1;
 

    /* custom decorations */
    display: none;
    }

.css-240 .scrollable {margin-top:0px; }
.css-320 .scrollable {margin-top:0px; }
.css-480 .scrollable {margin-top:0px; }
.css-640 .scrollable {margin-top:0px;   }
.css-1000 .scrollable {     }


 
 
.scrollable a{ text-decoration:none;}
 
/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

 
.scrollable .items div {
    float:left;
    width:auto;
 
 
	
}

.scrollable .items div a{ display:block; width:100%;   float:left;}

.scrollable .items div img{ width:100%; }

/* single scrollable item */
 

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}








 


/*---------------------------------------------------------------------------------------------------------------
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.vanguardscrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    margin-left:50px; margin-right:50px;
    height:200px;
 	font-size:13px;
 
   

}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.vanguardscrollable .vanitems {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}


.vanguardscrollable .vanitems div {
    float:left;
    width:auto; /*requires changes!!!*/
 
}
.vanguardscrollable .vanitems div a{text-decoration:none; line-height:1.5em;}
 
 .vanguardscrollable .vanitem strong{ display:block;  margin-bottom:10px;}

.vanguardscrollable .vanitem{ 
width:28%;
float:left;
    margin:5px 5px 20px 5px;
    background-color:#fff;
    padding:5px;
 
    
	height:300px; overflow:hidden;}
	
 

/* single scrollable item */
.vanguardscrollable .vanitem img {
    width:100%;
	 margin-bottom:10px;
}
 



.css-1000 #vanguard{}
.css-1000 #vanguard .vanguardscrollable .vanitem img{    }
.css-1000 #vanguard .vanguardscrollable .vanitem strong{  }

.css-1000 .vanguardscrollable .vanitem{width:26%; font-size:11px;} /*yellow*/	



.css-640 #vanguard{ position:relative;  -webkit-border-radius: 5px ; -moz-border-radius:  5px ; border-radius:  5px ; padding-top:5px; padding-bottom:5px;  } 
.css-640 .vanguardscrollable .vanitem  .vanintrotext{  display:block;margin:10px; font-size:12px   }
.css-640 .vanguardscrollable{margin:0px; overflow:visible;}

.css-640 .vanguardscrollable .vanitem{  width:100%; padding:0px; margin:5px 0px 5px 0px; background-color:white; font-size:11px  ;}
.css-640 .vanguardscrollable .vanitem img{float:left;   width:20%; margin:10px;  }
.css-640 .vanguardscrollable .vanitems div{float:none;}

.css-640 .vanguardscrollable .vanitems{width:100%;position:relative;}	
.css-640 #vanguard a.browse{display:none;}
 





.css-480 #vanguard{ position:relative;  -webkit-border-radius: 5px ; -moz-border-radius:  5px ; border-radius:  5px ; padding-top:5px; padding-bottom:5px;  } 
.css-480 .vanguardscrollable .vanitem  .vanintrotext{  display:block;margin:10px; font-size:12px   }
.css-480 .vanguardscrollable{margin:0px; overflow:visible;}

.css-480 .vanguardscrollable .vanitem{  width:100%; padding:0px; margin:5px 0px 5px 0px; background-color:white; font-size:11px;}
.css-480 .vanguardscrollable .vanitem img{float:left;   width:25%; margin:10px;  }
.css-480 .vanguardscrollable .vanitems div{float:none;}

.css-480 .vanguardscrollable .vanitems{width:100%;position:relative;}	
.css-480 #vanguard a.browse{display:none;}
 
 



.css-320 #vanguard{ position:relative;  -webkit-border-radius: 5px ; -moz-border-radius:  5px ; border-radius:  5px ; padding-top:5px; padding-bottom:5px;  } 
.css-320 .vanguardscrollable .vanitem  .vanintrotext{  display:block;margin:10px; font-size:12px   }
.css-320 .vanguardscrollable{margin:0px; overflow:visible;}

.css-320 .vanguardscrollable .vanitem{  width:100%; padding:0px; margin:5px 0px 5px 0px; background-color:white; font-size:11px;}
.css-320 .vanguardscrollable .vanitem img{float:left;   width:35%; margin:10px;  }
.css-320 .vanguardscrollable .vanitems div{float:none;}

.css-320 .vanguardscrollable .vanitems{width:100%;position:relative;}	
.css-320 #vanguard a.browse{display:none;}
 





.css-240 #vanguard{ position:relative;  -webkit-border-radius: 5px ; -moz-border-radius:  5px ; border-radius:  5px ; padding-top:5px; padding-bottom:5px;  } 
.css-240 .vanguardscrollable .vanitem  .vanintrotext{  display:block;margin:10px; font-size:12px   }
.css-240 .vanguardscrollable{margin:0px; overflow:visible;}

.css-240 .vanguardscrollable .vanitem{  width:100%; padding:0px; margin:5px 0px 5px 0px; background-color:white; font-size:11px;}
.css-240 .vanguardscrollable .vanitem img{float:left;   width:35%; margin:10px;  }
.css-240 .vanguardscrollable .vanitems div{float:none;}

.css-240 .vanguardscrollable .vanitems{width:100%;position:relative;}	
.css-240 #vanguard a.browse{display:none;}
 


/* active item */
.vanguardscrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}


.tooltip {
    display:none;
    background:transparent url(../images/popup/black_arrow.png);
    font-size:12px;
    height:72px;
    width:159px;
    padding:25px;
    color:#ffffff;
  }
.tooltip strong{color:white}
.tooltip a{color:white}