/* ============= */
/* = Flash top = */
/* ============= */

#flash_start_wide {
    width: 944px;
    height: 200px;
    margin-bottom: 10px;
    margin-left: -6px;
}


/* ====================== */
/* = Articles and spots = */
/* ====================== */
.longbox {
    margin-bottom: 20px;
}
.longbox .content {
    width: 440px;
    float: left;
}
.longbox img {
    float: right;
}
.longbox h1 {
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 2px;
    
}

.longbox h2 {
    margin-bottom: 6px;
}
.longbox h2 a {
    font-size: 15px;
    color: #000;
}



.articles {
    float: left;
    width: 400px;
}

.article {
    margin-bottom: 30px;
    position: relative;
}    


.article.huge .price_tag {
    position: absolute;
    top: 80px;
    right: 20px;
}



.article h1 {
    color: #2a98fe;
    font-size: 18px;
    margin-bottom: 0px;
}
.article h2 {
    color: #000;
    font-size: 13px;
    margin-bottom: 8px;
}
.article .image {
    margin-bottom: 5px;
}

.article.landscape {
    width: 400px;
}

.article.landscape .price_tag {
    position: absolute;
    top: 80px;
    right: 10px;
}
.article.vertical {
    width: 400px;
}
.article.vertical .image {
    float: right;
    margin-left: 10px;
}
.spots {
    width: 198px;
    float: right;
}





/* =========================== */
/* = "Scrollable" components = */
/* =========================== */
/* =============== */
/* = Large pager = */
/* =============== */
.scrollable_container {
    background: url(/img/theatre/bg.gif) no-repeat bottom left;
    margin-left: -9px;
    padding-left: 9px;    
    width: 654px;
    margin-bottom: 20px;
    padding-bottom: 25px;    
    position: relative;
}
.scrollable {
    width: 649px;
    
    position: relative;
    height: 300px;
    overflow: hidden;
}
.scrollable h1 {
    font-size: 23px;
    color: #2a98fe;
    margin-bottom: 5px;
}
.scrollable h2 {
    color: #000;
    margin-bottom: 7px;
}
.scrollable .price_tag {
    position: absolute;
    top: 105px;
    right: 30px;
}
.scrollable .items {
    /* this cannot be too large */ 
    width:20000px; 
    position:absolute; 
}

.scrollable .item {
/*    position: absolute;*/
    float:left; 
    position: relative;
}
.scrollable .item .text {
    width: 585px;
    padding: 0 30px;
    font-size: 12px;
    
}
.scrollable_container .navi {
    position: absolute;
    width: 100%;
    bottom: 25px;
    text-align: center;
    height: 10px;
}
.scrollable_container .prevPage {
    left: -2px;
    top: 200px;
}
.scrollable_container .nextPage {
    right: -6px;
    top: 200px;
}






div.navi {
    display: inline-block;
}
/* items inside navigator */
div.navi a {
	background:url(/script/scrollable/arrow/navigator.png) 0 0 no-repeat;
    width: 8px;
    height: 8px;
    margin: 5px 0;
    margin-right: 3px;
    line-height: 1px;
	font-size: 1px;
	display: inline-block;
	outline: none;    	
}

/* mouseover state */
div.navi a:hover {
	background-position: 0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position: 0 -16px;     
}


/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
    position: absolute;
    top: 0;
    left: -8px;
	display: block;
	width: 30px;
	height: 30px;
	background: url(/script/scrollable/arrow/left2.png) no-repeat;
    cursor: pointer;
	font-size: 1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {        
	background-position:0px -30px;
}
a.prev:active, a.next:active, a.prevPage:active, a.nextPage:active {        
	border-top: 1px solid #fff;
}    

/* disabled navigational button */
/*    a.disabled {
    visibility:hidden !important;       
}*/

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(/script/scrollable/arrow/right2.png);
/*      clear:right;    */
    left: auto;
	right: 4px;
}