/* CONTENT
===========================================================================================================*/
#content_wp	{ clear:both; width:675px; margin:0 auto; text-align:left; 
}

#isospec {
    position: relative;
    height: 413px;
    margin-bottom: 20px;
    color: #fff;
    background: transparent url(isospec-bg-blue-mb.png) no-repeat 0px 0px;
    font-family: Verdana,Arial,sans-serif;line-height:1.8em; 
    z-index: 0;
}

#isospec .slider {
    position: absolute;
    width: 4px;
    height: 250px;
    z-index: 1;
}

#isospec .sliderbackdrop {
    width: 40px;
    height: 276px;
    margin: -18px auto auto -12px; 
    text-align: left;
    background: transparent url(isospec-slider-bg.png) no-repeat 0px 0px;
}

#isospec .slider .ui-slider-handle {
    width: 32px !important;
    height: 24px !important;
    margin-left: -7px;
    border: none !important;
    outline: none !important;
    background: transparent url(isospec-slider-handle.png) no-repeat 0px 0px !important;
    cursor: pointer;
}

#isospec #controls {
    position: absolute;
    width: 200px;
    height: 325px;
    top: 49px;
    left: 75px;
}

#isospec #controls #cpu { top: 64px; left: 39px; }
#isospec #controls #cpu .ui-slider-range { 
    background: transparent url(isospec-slider-range-cpu.png) repeat-y 0px 0px !important; 
}

#isospec #controls #ram { top: 64px; left: 91px; }
#isospec #controls #ram .ui-slider-range { 
    background: transparent url(isospec-slider-range-ram.png) repeat-y 0px 0px !important; 
} 

#isospec #controls #hdd { top: 64px; left: 144px; }
#isospec #controls #hdd .ui-slider-range  { 
    background: transparent url(isospec-slider-range-hdd.png) repeat-y 0px 0px !important; 
}

#isospec #controls #labels {
    position: relative;
    height: 22px;
}
#isospec #controls #labels div {
    position: absolute;
    top: 6px;
    font-size: 10px;
    color: #f5f5f5;
    line-height:1em;
}
#isospec #controls #labels #cpulabel { left: 31px !important; }
#isospec #controls #labels #ramlabel { left: 87px !important; }
#isospec #controls #labels #hddlabel { left: 139px !important; }


#isospec #controls #values {
    position: relative;
    height: 30px;
	
}
#isospec #controls #values div p { margin-top:5px; }
#isospec #controls #values div {
    position: absolute;
    top: 3px;
    width: 42px;
    height: 30px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #3a3a3a;
    background: transparent url(isospec-slider-value-bg-mb.png) no-repeat 0px -3px;
    
}
#isospec #controls #values div#cpuvalue { left: 23px; }
#isospec #controls #values div#ramvalue { left: 75px; }
#isospec #controls #values div#hddvalue { left: 126px; }

#isospec #title {
    position: absolute;
    top: 28px;
    right: 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}

#isospec #closingstatement {
    position: absolute;
    bottom: 22px;
    left: 254px;
    color: #f5f5f5;
    font-size: 10px;
    font-weight: normal;
    line-height:1.2em;
}

#isospec #presets {
    position: absolute;
    left: 10px;
    top: 70px;
    width: 80px;
    height: 310px;
}
#isospec #presets div.title {
    margin-bottom: 14px;
    color: #696969;
    font-size: 9px;
    text-align: center;
    line-height:1.2em;
}
#isospec #presets div.product {
    width: 100%;
    height: 30px;
    margin-bottom: 5px;
    color: #3a3a3a;
    font-size: 10px;
    line-height:1.8em;
    background: transparent url(isospec-sprite-button-preset.png) no-repeat 0px 0px;
}
#isospec #presets div.presetn1000 {
    font-size: 10px;
}
#isospec #presets div.presetpower { 
    margin-top: 10px; 
    background-position: 0px -45px;
    color: #fff;
    font-size: 10px;
}
#isospec #presets div.presetspeed { 
    background-position: 0px -75px;  
    color: #fff;
    font-size: 10px;
}
#isospec #presets div.presetstorage { 
    background-position: 0px -105px; 
    color: #fff;
    font-size: 10px;
}


#isospec #presets a {
    display: block;
    width: 100%;
    height: 100%;;
    padding: 4px 0px 0px 10px;
    font-weight: bold;
    text-decoration: none;
    outline: none;
    cursor: pointer;
	 color: #333333;
}


/* Mobo */

#isospec #mobo {
    position: absolute;
    top: 70px;
    left: 248px;
    width: 416px;
    height: 278px;
    background: transparent url(isospec-mod-mobo.png) no-repeat 0px -4px;
}



/* CPU Stack */

#isospec #cpustack {
    position: absolute;
    top: 9px;
    left: 128px;
    width: 53px;
    height: 150px;
    z-index: 2;
}

#isospec #cpustack .cpu {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 53px;
    height: 36px; 
    background: transparent url(isospec-mod-cpu.png) no-repeat 0px 0px;
}

/* RAM Rack */ 

#isospec #ramrack {
    position: absolute;
    top: 123px;
    left: 34px;
    width: 100px;
    height: 100px;
    border: none;
    z-index: 2;
}

#isospec #ramrack .ram {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 65px;
    height: 60px;
    background: transparent url(isospec-mod-ram.png) no-repeat 0px 0px;
}


/* HDD Case - a bit harder, but we'll break it down as 4 * stacks
              like the CPU                                        */

#isospec #hddcase {
    position: absolute;
    top: 55px;
    right: 16px;
    width: 141px;
    height: 105px;
    z-index: 2;
}

#isospec #hddcase #sda,
#isospec #hddcase #sdb, 
#isospec #hddcase #sdc, 
#isospec #hddcase #sdd {
    position: absolute;
    width: 71px;
    height: 71px;
}

#isospec #hddcase #sda { top: 24px;  left: 0px;   z-index: 3; }
#isospec #hddcase #sdb { top: 1px;   left: 41px;  z-index: 2; }
#isospec #hddcase #sdc { top: 18px;  left: 70px; z-index: 3; }
#isospec #hddcase #sdd { top: 42px;  left: 30px;  z-index: 4; }

#isospec #hddcase .hdd {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 71px;
    height: 52px;
    background: transparent url(isospec-mod-hdd.png) no-repeat 0px 0px;
}


/* price indicator */

#isospec #price {
    position: absolute;
    top: 290px;
    right: -10px;
    width: 190px;
    height: 120px;
    color: #fff;
    font-size: 14px;
    text-align: center;
}
#isospec #price #text {
    height: 20px;
}
#isospec #price #pricetext {
    height: 33px;
    padding: 12px 0px 0px 0px;
}
#isospec #price #pricetext span {
    font-size: 32px;
    font-weight: bold;
}
#isospec #price span#pound {
    font-size: 32px;
}
#isospec #price #buyvps {
    width: 152px;
    height: 40px;
    margin: 0px auto;
    background: transparent url(isospec-sprite-button-buy.png) no-repeat 0px 0px;
    cursor: pointer;
}
#isospec #price #buyvps:hover {
    background-position: 0px -40px;
}


/* Tooltip */

#isospec #tooltip {
    display: none;   /* revealed by event */
    position: absolute;
    top: 0px;
    left: -140px;
    width: 172px;
    height: 84px;
    color: #f5f5f5;
    background: transparent url(isospec-tooltip-bg.png) no-repeat 0px 0px;
    z-index: 10;
}


#isospec #tooltip .title {
    position: absolute;
    top: 6px;
    left: 12px;
    font-weight: bold;    
    font-size: 10px;
}

#isospec #tooltip .text {
    position: absolute;
    top: 22px;
    left: 12px;
    width: 153px;
    height: 70px;
    font-size: 10px;
    line-height: 12px;
}