/*

available width: 990px
- 20px outer spacing
- 208 shopping cart
- 10px internal spacing: ofm (+ navbar) to cart)
= 762

container width:
+ 440 flash width (including pan bars: 30px total)
+ 230 output
+ 40 viewing options
+ 10 internal spacing
= 720

total height:
+ 440 flash height (including pan bars: 30px total)
+ 25 map buttons
= 465

*/

/*ofm container*/

#ofm_container {
    position: relative;
    width: 720px;
	height: 465px;
}

/*viewing options*/

#ofm_viewing_options {
   
    position: relative;
	top: 0px;
    height: 435px;
}

/*mode buttons*/

#ofm_mode_buttons  {
    padding: 0px 10px 0px 0px;
    position: relative;
    height: 110px;
}

#ofm_mode_buttons div {
    position: absolute;
    width: 30px;
    height: 25px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
	cursor: pointer;
}

#ofm_mode_zoomin {
    top: 10px;
	background-image: url('../images/ofm/mode/zoomin_sprite.gif');
}

#ofm_mode_zoomout {
    top: 40px;
    background-image: url('../images/ofm/mode/zoomout_sprite.gif');
}

#ofm_mode_pan {
    top: 70px;
    background-image: url('../images/ofm/mode/pan_sprite.gif');
}

#ofm_mode_buttons .active {background-position: 0px -25px;}
#ofm_mode_buttons .default {background-position: 0px 0px;}

#ofm_mode_seperator {
    font-size: 1px;
	width: 30px;
	height: 1px;
	background-color: #CCCCCC;
}

/*zoombar*/

#ofm_zoom_bar {
    position: absolute;
    bottom: 20px;
    padding: 0px 0px 0px 5px;
}

#ofm_zoom_bar .button {
	width: 25px;
	height: 25px;
	cursor: pointer;
}

/*zoom slider height = 12 buttons * (15 height + 5 padding) = 240*/

#ofm_zoom_slider {
    position: relative;
	width: 30px;
	height: 240px;
}

#ofm_zoom_slider .slider {
    position: absolute;
	width: 25px;
	height: 15px;
	background-image: url('../images/ofm/zoom/slider_sprite.gif');
	background-repeat: no-repeat;
	cursor: pointer;
}

#ofm_zoom_slider .active {background-position: 0px -15px;}
#ofm_zoom_slider .default {background-position: 0px 0px;}

/*ofm tabs*/

#ofm_tabs {
    position: absolute;
	top: 0px;
	right: 255px;
    height: 25px;
    display: none;
	z-index: 2;
}

#ofm_tabs div {
    float: left;
    height: 25px;
}

#ofm_tabs .tab_default, #ofm_tabs .tab_active {
    cursor: pointer;
}

#ofm_tabs .tab_default .left,
#ofm_tabs .tab_active .left,
#ofm_tabs .tab_default .right,
#ofm_tabs .tab_active .right
{
    width: 10px;
	font-size: 1px;
}

#ofm_tabs .tab_default .left,
#ofm_tabs .tab_active .left {
    background-image: url('../images/ofm/tabs/sprite_left.gif');
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#ofm_tabs .tab_default .right,
#ofm_tabs .tab_active .right {
    background-image: url('../images/ofm/tabs/sprite_right.gif');
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#ofm_tabs .tab_default .bg,
#ofm_tabs .tab_active .bg {
    background-image: url('../images/ofm/tabs/sprite_bg.gif');
	background-repeat: repeat-x;
	background-position: 0px 0px;
}

#ofm_tabs .tab_default .left,
#ofm_tabs .tab_default .right,
#ofm_tabs .tab_default .bg {
    background-position: 0px -25px;
}

#ofm_tabs .tab_default .bg, #ofm_tabs .tab_active .bg {
    color: #19236b;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    vertical-align: middle;
}

/*ofm container / pan buttons*/

#ofm_flash_container {
    position: absolute;
	top: 20px;
	left: 40px;
    height: 440px;
    width: 440px;
}

#ofm_pan {
    position: absolute;
}

#ofm_pan a {
    display: none;
    position: absolute;
	z-index: 1;
    text-decoration: none;
}

#ofm_pan a.hor {
    background-image: url(/images/ofm/pan/hor.gif);
    background-repeat: repeat-x;
}

#ofm_pan a.ver {
    background-image: url(/images/ofm/pan/ver.gif);
    background-repeat: repeat-y;
}

#ofm_pan .panButton {
    position: absolute;
}

#ofm_pan img {display: block;}

#ofm_flash {
	width:100%; 
	margin: 0 0 0 0; 
	overflow:hidden; 
	z-index:0; 
	position:relative; 
	top:0; 
	left:0; 
	z-index:0; 
	text-align:center;
}
#ofm_flash embed { 
	margin:0 0 0 0; 
	z-index:0
}

/*output box*/

#ofm_output_container {
    display: none;
    position: absolute;
	top: 20px;
	left: 490px;
	width: 230px;
}

#ofm_output {
    padding: 10px;
    border: 1px solid #4773a1;
    background-color: #e2e7f1;
}

#ofm_output p {color: #333333;}

#ofm_output .intro {color: #333333;}

#ofm_output .comment {
    color: #333333;
	font-size: 9px;
}

/*resolution*/

/*shape buttons*/

#ofm_shape_buttons {margin-bottom: 10px;}

#ofm_shape_landscape,  #ofm_shape_portrait, #ofm_shape_square {
    cursor: pointer;
}

.ofm_shape_landscape_active .icon,
.ofm_shape_landscape_default .icon,
.ofm_shape_portrait_active .icon,
.ofm_shape_portrait_default .icon,
.ofm_shape_square_active .icon,
.ofm_shape_square_default .icon
{
    background-repeat: no-repeat;
    width: 35px;
    height: 30px;
	margin: 0 auto;
}

.ofm_shape_landscape_active .icon, .ofm_shape_landscape_default .icon {
    background-image: url('../images/ofm/shape/lnds_sprite.png');
}

.ofm_shape_landscape_active .icon {
    background-position: 0px -30px;
}

.ofm_shape_landscape_default .icon {
    background-position: 0px 0px;
}

.ofm_shape_portrait_active .icon, .ofm_shape_portrait_default .icon {
    background-image: url('../images/ofm/shape/prtr_sprite.png');
}

.ofm_shape_portrait_active .icon {
    background-position: 0px -30px;
}

.ofm_shape_portrait_default .icon {
    background-position: 0px 0px;
}

.ofm_shape_square_active .icon, .ofm_shape_square_default .icon {
    background-image: url('../images/ofm/shape/sqr_sprite.png');
}

.ofm_shape_square_active .icon {
    background-position: 0px -30px;
}

.ofm_shape_square_default .icon {
    background-position: 0px 0px;
}

#ofm_shape_buttons .text {
    color: #333333;
	font-size: 9px;
	text-align: center;
}

#ofm_output .price {
	font-size: 14px;
}

/*add button*/

#shopping_cart_add .icon  {
    background-image: url('../images/button/add.gif');
	background-repeat: no-repeat;
	background-position: top left;
	width: 17px;
	height: 23px;
}