/* CONTENT */
.colleftLeft {
    width : 242px;
    float:left;
    margin-right: 20px;
}
.colleftRight {
    width : 402px;
    float:left;
}
.domian {
    margin : 20px 0px 0px 0px;
}
.domianStep {
    float : left;
    width: 115px;
    padding: 0px 9px;
    font-size : 11px;
}
.grey
{
	color:				#9DA4B2;
	font-size:			12px;
	font-weight:		bold;
	height:				26px;
}
.stepImg {
    float: left;
    margin-right:10px;
}
.step {
    font-weight: bold;
    font-size  : 15px;
    margin : 0px 0px 10px 0px;
}
.tdActive {
    width : 167px;
    height  : 59px;
    background  : url(/images/lsw/step_active.png) no-repeat;;
    padding : 0px 10px 10px 10px;
    color : #FF8D00;
}
.tdComplete {
    width : 167px;
    background  : url(/images/lsw/step_complete.png) no-repeat;
    padding : 0px 10px 10px 10px;
    color : #006600;
}
.tdPassive {
    width : 167px;
    padding : 0px 10px 10px 10px;
    color : #000000;
    border-right : 1px solid #C6C9D2;
}
.tdDisabled {
    width : 167px;
    padding : 0px 10px 10px 10px;
    color : #999;
    border-right : 1px solid #C6C9D2;
}

table.step table, table.step td {
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

table.step table {
    margin-bottom: 15px;
}

/* FONT COLOR */
.fontGrey {
    color : #9DA4BA;
}
.fontBlack {
    color : #000;
    font-weight: bold;min-height:32px;width:100px;
}
.fontDarkGrey {
    color : #333333;
    font-weight : bold;
}
.fontRed {
    color : #FF0000;
    font-weight : bold;
}
.fontOrange {
    color : #FF8100;
}
.fontThrough {
    text-decoration : line-through;
    color : #FF0000;
}
.fontSizeBig {
    font-size : 20px;
    font-weight : bold;
}
.fontSizeMedium {
    font-size : 15px;
    font-weight : bold;
}
.domianStepText {
    color : #000000;
    font-size : 15px;
    font-weight : bold;
    margin : 10px 0px;
}
.chooseSystem {
    width : 196px;
    height : 145px;
    background : url(/images/lsw/box-darkblue.png);
    float : left;
    margin : 20px 10px 10px 0px;
}
.chooseSystem2 {
    width : 196px;
    height : 145px;
    background : url(/images/lsw/box-darkblue.png);
    float : left;
    margin : 20px 0px 10px 0px;
}
.chooseSystemText {
    color:#FFFFFF;
    font-size:20px;
    font-weight:bold;
    line-height:110%;
    padding:15px 10px 30px 10px;
}
.buttonCenter {
    text-align : center;
}
/* TABLE */
.tab {
    margin : 10px 0px;
}
.tdHead {
    font-size : 13px;
    font-weight : bold;
    color : #5C677F;
    height : 32px;
    border-top : 1px solid #B7BCC6;
    padding-left : 80px;
}
.tdRadio {
    width : 20px;
    padding-left : 80px;
}
.tdNormal{
    height : 22px;
    padding : 0px 5px;
    border-bottom : 2px solid #FFFFFF;
}
.tdRecommended {
    height : 22px;
    background : #FFF0E0 url(/images/lsw/bg-recommended.png);
    padding : 0px 5px;
    border-bottom : 2px solid #FFFFFF;
}
.tdSpecial {
    height : 22px;
    padding : 0px 5px;
    border-bottom : 2px solid #FFFFFF;
    background : #FFF0E0 url(/images/lsw/bg-special.png);
}

/*BOX HELP */
#help {
    background : url(/images/lsw/box-grey.png);
    width : 240px;
    height : 194px;
    padding : 20px 0px 0px 10px;
}
.livechat, .email {
    margin: 10px 0px;
    padding: 0px;
}
.imgHelp {
    margin:1px;
    padding:0px;
    float: left;
}
.picHr {
    background : url(/images/lsw/bg_border_bot.gif) repeat-x;
    height: 5px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    display : block;
}
.boldCosts {
    font-weight: bold;
    text-align: right;
}
.sumCosts {
    font-size: 15px;
    font-weight : bold;
}
.normalSize {
    font-size: 12px;
}
.tabCosts {
    color : #333333;
    width: 100%;
    margin-bottom: 20px;
}
.tdCosts {
    height: 22px;
}
.tdEuro {
    padding: 0px 10px;
}
.tdTotalSumary {
    text-align: right;
    width: 50px;
    padding-right:10px;
}
.slelectionHead {
    font-size : 16px;
    color : #495266;
    font-weight : bold;
    height: 20px;
}
.slelectionFoot {
    font-weight : bold;
}

.boxYellow {
    height: 35px;
    background : #FFFFCC;
    padding : 15px 20px 0px 30px;
}
.boxYellowText {
    float: left;
    font-size: 18px;
    color:#000;
}
.boxYellowInput {
    margin-left: 20px;
    padding: 3px;
    background : url(/images/lsw/submit_label.gif) no-repeat;
    width:262px;
    height : 22px;
}
/* tab srv */
.numberSrv {
    width : 42px;
    height : 18px;
    background : url(/images/lsw/number-bg.png) no-repeat;
    text-align: center;
    margin-left: 10px;
    padding-top : 4px;
}
.quantity {
    color: #000;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
}
.tabSumary {
    font-size:12px;
    color:#000000;
}
.tabSumary.strong, .tabSumary .strong {
	font-weight: bold;	
}
.tabSrvCost {
    text-align: right;
}
.nrServer {
    height:35px;
    color: #495266;
    font-size: 18px;
    font-weight: bold;
    padding-left: 10px;
}
.domainWebhost {
    width : 170px;
    height : 18px;
    background : url(/images/lsw/domain-bg.png) no-repeat;
    text-align: center;
    margin-left: 10px;
    padding-top : 4px;
}
.domainSelect {
	border-color:#A5A8AF #D6D6D6 #D6D6D6 #A5A8AF;
	border-style:solid;
	border-width:1px;
	height:20px;
	line-height:1.8em;
	padding-bottom:1px;
}
/* CORNERS */
.cornerLeftTop {
    background : url(/images/lsw/corner-white-grey-top-left.png) #f0f0f0 no-repeat;
    background-position: 0% 0%;
}
.cornerRightTop {
    background : url(/images/lsw/corner-white-grey-top-right.png) no-repeat;
    background-position: 100% 0%;
}
.cornerLeftBottom {
    background : url(/images/lsw/corner-white-grey-bottom-left.png) no-repeat;
    background-position: 0% 100%;
}
.cornerRightBottom {
    background : url(/images/lsw/corner-white-grey-bottom-right.png) no-repeat;
    background-position: 100% 100%;
    padding-bottom: 15px;
}
.greyBigBox, .whiteBigBox, .boxYellow {
    /* position: relative; */
    margin: 0px 0 0px;
}
.greyBigBox .contentBox, .greyBigBox .contentBox {
    margin: 5px;
    /* position: relative; */
}
/* CORNERS WHITE BOX */
.cornerLeftTopWhite {
    background : url(/images/lsw/corner-top-left-white.png) #ffffff no-repeat;
    background-position: 0% 0%;
}
.cornerRightTopWhite {
    background : url(/images/lsw/corner-top-right-white.png) no-repeat;
    background-position: 100% 0%;
}
.cornerLeftBottomWhite {
    background : url(/images/lsw/corner-bottom-left-white.png) no-repeat;
    background-position: 0% 100%;
}
.cornerRightBottomWhite {
    background : url(/images/lsw/corner-bottom-right-white.png) no-repeat;
    background-position: 100% 100%;
}

.greyTable {
    width: 100%;
}
.divTableBox {
    float : left;
    border-top : 1px solid #F0F0F0;
    margin-right:10px;
    width:203px;
}
.headtext {
    color : #9DA4B2;
    font-size: 13px;
    font-weight: bold;
    margin : 10px 0px;
}
.miniBoxtext {
    font-size: 11px;
    line-height: 160%;
    margin-bottom: 10px;
}
.tdInputRadio {
    vertical-align: top;
    width : 120px;
}
.tdInputRadioOs {
    width : 120px;
}
.tdInputRadioProcessor {
    width : 210px;
}
.tdInputRadioRam {
    width : 120px;
}
.tdInputRadioStorage {
    width : 120px;
}
.listServers {
}
.listServerRows {
    float: left;
    margin-right: 3px;
}
.listServerRows2 {
    float: left;
    margin-right: 3px;
    border-top: 1px solid #fff;
    width: 165px;
}

.listServerRows2:hover td.tdListServerOdd,.listServerRows2:hover td.tdListServerEven {
    border-top: 1px solid #fff;
    background : #FFEAC9;
}
.listServerRows2:hover td.listServersPassive {
    height: 100%;
    margin: 2px;
    padding: 5px 5px 0px 5px;
    background : url(/images/lsw/thead-bg-orange.png) no-repeat;
}
.listServerRows2:hover td.tdLabel{
    vertical-align: top;
    height: 100%;
    text-align : center;
    background : url(/images/lsw/tfooter.png) no-repeat;
}
.listServersPassive {
    height: 100%;
    margin: 0px;
    padding: 5px 5px 0px 5px;
    vertical-align: top;
}

.tdListServerHeader {
    width: 100%
    height: 57px;
}
.linkDiv {
    border-top: 1px solid #B7BCC6;
    margin: 10px 0px 0px 0px;
    padding:10px 0px 0px 0px;
}
.tdLabel {
    padding: 5px 0px 5px 0px;
    text-align : center;
    vertical-align: top;
    height: 100%;
    width: 140px;
}
.tdList {
    font-weight : bold;
    height : 47px;
    color : #000000;
    padding-left : 5px;
    border: 1px solid white;
    padding-top: 0px;
    vertical-align: middle;
}

.tdListServerOdd {
    height : 47px;
    width: 121px;
    background : #eFF4F8;
    padding-left: 5px;
    color : #000000;border-top : 1px solid #D2D3D7;
}
.tdListServerEven {
    height : 47px;
    background : #FFFFFF;
    padding-left: 5px;
    color : #000000;border-top : 1px solid #D2D3D7;
}

.tdScroll {
    width:20px;
    padding : 70px 5px 0px 0px;
    text-align:right;
    height: 570px;
    vertical-align : middle;
}

.tdActive .title, .tdPassive .title, .tdComplete .title {
    display: block !important;
}

.tdActive img, .tdPassive img, .tdComplete img {
    position: relative;
    margin-left: 6px;
}


/* This is the selector for the main SlidingPanels container. This selector
 * defines the width and height of the view port for the widget. Note that
 * this selector does not set the overflow property since that is done programatically
 * by the widget. Setting the overflow property programatically ensures that
 * the contens of the widget will be fully visible should JavaScript be disabled
 * in the browser.
 *
 * If you want to constrain the width of the SlidingPanels widget, set a width on
 * the SlidingPanels container. By default, our sliding panels widget expands
 * horizontally to fill up available space.
 *
 * The SlidingPanels container is positioned relative so that content inside it
 * can be positioned relative to its upper left corner.
 *
 * Avoid placing any CSS border or padding properties on the SlidingPanels container
 * as they can affect the proper positioning and sliding animations of the contents
 * inside the container.
 *
 * The name of the class ("SlidingPanels") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * SlidingPanels container.
 */
.SlidingPanels {
  position: relative;
  width: 100%;
  height: 100px;
  padding: 0px;
  border: none;
}

/* This is the selector for the container that holds all of the content panels
 * for the widget. The SlidingPanelsContentGroup container is what gets programtically
 * positioned to create the slide animation. It is also what governs the layout of
 * the panels.
 *
 * By default, the width of the container is the same as its parent, the SlidingPanels
 * container.
 *
 * You can make the panels within the SlidingPanelsContentGroup container layout
 * horizontally by giving the SlidingPanelsContentGroup container a width that is as wide
 * or larget than the sum of the widths of all of the content panels, and then floating
 * the content panels inside the SlidingPanelsContentGroup container so they all appear
 * on the same line. You may also need to float the SlidingPanels and SlidingPanelsContentGroup
 * containers to insure that none of the content panels "leak" outside of the widget.
 *
 * Avoid placing any CSS border, margin, or padding properties on the SlidingPanels
 * container as they can affect the proper positioning and sliding animations of the
 * the container within the widget.
 *
 * The name of the class ("SlidingPanelsContentGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you want to style the
 * SlidingPanelsContentGroup container.
 */
.SlidingPanelsContentGroup {
  position: relative;
  width: 100%;
  margin: 0px;
  padding: 0px;
  border: none;
}


/* This is the selector for the container that holds content for a given panel. In our
 * default style implementation, the dimensions of each content panel exactly match the
 * dimensions of the view port (SlidingPanels) container. This ensures that only one
 * panel ever shows within the view port.
 *
 * Avoid placing any CSS border, margin, or padding properties on the SlidingPanels
 * container as they can affect the proper positioning and sliding animations of the
 * the panel within the widget. You can place border, margins and padding on any content
 * *inside* the content panel.
 *
 * The name of the class ("SlidingPanelsContent") used in this selector is not
 * necessary to make the widget function. You can use any class name you want to style the
 * SlidingPanelsContent container.
 */
.SlidingPanelsContent {
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  border: none;
}

/* The class used in this selector is programatically added to the SlidingPanels container
 * anytime we are animating between panels. This rule makes sure that *all* content inside
 * the widget is overflow:none to avoid a rendering glitch that occurs in FireFox 1.5 whenever
 * there is an element inside the widget that displays a scrollbar.
 *
 * The class is automatically removed once the animation has stopped so that the overflow
 * properties of the content inside the widget should be restored.
 */
.SlidingPanelsAnimating * {
  overflow: hidden !important;
}

/* The class used in this selector is programatically added to the SlindingPanelsContent
 * container that is currently visible in the view port. The class is automatically removed
 * when the widget switches to a different panel.
 */
.SlidingPanelsCurrentPanel {
}

/* The class used in this selector is programatically added to the SlidingPanels container
 * anytime the SlidingPanels container is given focus. The class is automatically removed
 * once the SlidingPanels container loses focus.
 */
.SlidingPanelsFocused {
}



.SlidingPanels {
  width: 526px;
  height: 100%;
}
.SlidingPanelsReadyToUse {
  width: 490px !important;
}
.SlidingPanelsContent {
  width: 165px;
  margin-right: 5px;
  height: 100%;
}
#example2.SlidingPanels {
  float: left;
}
#example2 .SlidingPanelsContentGroup {
  float: left;
  width: 10000px;
  height: 100%;
}
#example2 .SlidingPanelsContent {
  float: left;
}
.SlidingPanelsContentOnas {
  height: 400px;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  border: none;
}
.SlidingPanelsOnas {
  position: relative;
  height: 400px;
  padding: 0px;
  border: none;
}