Synnefo

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

    font-family: Verdana, 'PT Sans', sans-serif;

}

html {

    height: 100%;

}

body {

    background: url(./body-bg.png) repeat-x scroll 0 0 #FFFFFF;

    height: 100%;

    text-align:center;

}

#container {

    position: relative;

        margin:0 auto;

        width: 100%;

        background:#f0f0f0;

        height:auto !important;

        height:100%;

        min-height:100%;

    background: url("./body-bg2.png") no-repeat scroll right bottom transparent;

}

#header {

    height: 93px;

    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;

    margin: 0 auto;

    width: 700px;

    text-align: left;

}

#content {

    padding-bottom: 183px;

    width: 100%;

}

div#wrapper {

    width: 700px;

    margin: 0em auto;

    text-align: left;

}

#footer {

    height: 119px;

    background-color: #4085A5;

        position:absolute;

    left: 0;

    bottom: 0;

    width:100%;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

/* remember to define focus styles! */

:focus {

    outline: 1px dotted #87AADE;

}

/* remember to highlight inserts somehow! */

ins {

    text-decoration: none;

}

del {

    text-decoration: line-through;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

    border-collapse: collapse;

    border-spacing: 0;

}

h5 {

    font-weight: normal;

    margin-bottom:3px;

}

/* root element for tabs  */

.tab-name {

    background-color: #5CA1C0;

    color: #FFFFFF;

    float: left;

    font-size: 150%;

    height: 28px;

    padding-top: 3px;

    text-align: center;

    width: 170px;

}

.tab-separator {

    background-color: white;

    float: left;

    width: 2px;

    height: 23px;

    margin-top: 4px;

}

ul.css-tabs {

    padding: 0;

    height:31px;

    background-color: #5CA1C0;

}

ul.css-tabs .secondary {

    position:relative;

}

/* single tab */

ul.css-tabs li {

    float:left;

    padding:0;

    list-style-type:none;

}

ul.css-tabs .current {

    background: #4085A5;

}

/* link inside the tab. uses a background image */

ul.css-tabs a {

    float:left;

    display:block;

    text-decoration:none;

    color:#d2d2d2;

    position:relative;

    outline:0;

    padding: 4px 25px 0;

    height: 27px;

}

ul.css-tabs a:hover {

    background: #74AEC9;

}

/* selected tab */

ul.css-tabs a.current {

    cursor:default;

}

ul.css-tabs a.current:hover {

    background: #4085A5;

}

/* tab pane */

div.css-panes {

/*    border-top: 10px solid #87aade;

    border-bottom: 10px solid #87aade;  */

    background: transparent;

}

.css-panes > div.pane {

    display:none;

}

/* CSS3 border radius for various elements. yea - CSS isn't perfect */

.rounded, #sheet input, .error {

    border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -o-border-radius: 5px;

    -khtml-border-radius: 5px;

}

/* validation error message */

.error {

    background-color:#E8FF6D;

    padding:4px;

    -webkit-box-shadow: #000 0 0 9pt;

    -moz-box-shadow: #000 0 0 9pt;

}

/* nested arrow inside error message. It's 100% CSS. No images. */

.error em {

    border: 10px solid;

    border-color: #E8FF6D transparent transparent;

    bottom: -17px;

    display: block;

    height: 0;

    left: 10px;

    position: absolute;

    width: 0;

}

/* input field that caused validation error */

.invalid {

    background-color: rgba(221, 233, 255, 0.898) !important;

}

#beforecreate {

    background-color: #FF9955;

    float: left;

    height: 32px;

    margin-left: -20px;

    margin-top: -8px;

    width: 20px;

}

#ie-fix {

    z-index: 1000;

    position: relative;

}

#createcontainer {

    margin-top: 20px;

    margin-bottom: 10px;

    z-index: 1000;

}

#create {

    background-color: #FF7F2A;

    color: #000;

    cursor: pointer;

    padding: 7px 24px;

    width: 155px;

    text-decoration: none;

    font-size:100%;

}

#create:hover {

    background-color: #FF9955;

}

#console-header {

    height: 67px;

    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;

}

.header-logo {

    padding-top: 19px;

}

div#footer-text a {

    color: #FFFFFF;

    text-decoration: none;

}

div#footer-text{

    clear: both;

    color: #FFFFFF;

    font-size: 75%;

    left: 31%;

    padding-top: 10px;

    position: absolute;

    width: 700px;

}

#footer-bg {

    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;

    float:right;

    width: 700px;

    height: 119px;

    background-position:right;

}

.modal {

    background-color:#fff;

    display:none;

    width:30em;

    padding:1em;

    text-align:left;

}

/* server wizard scrollable root element and network wizard */

#wizard, #networks-wizard {

    font-size:75%;

    height:405px;

    width:453px;

    overflow:hidden;

    position:absolute !important;

}

/* scrollable items */

#wizard .items {

    width:20000em;

    clear:both;

    position:absolute;

    display:block;

    padding: 0;

    margin: 0;

    border:none;

    background:none;

}

/* single item */

#wizard .page, #networks-wizard div.container {

    padding: 15px 40px 20px 15px;

    width:447px;

    float:left;

    display:block;

    border:none;

    background-color: transparent;

}

#networks-wizard div.container {

    background-color: #ECF4F8;

    width:400px;

    height: 180px;

    margin-bottom:50px;

}

/* title */

#wizard h2, #networks-wizard h2 {

    color: #FF7B24;

    font-size: 100%;

    font-style: italic;

    font-weight: bold;

    padding-left: 37px;

    padding-top: 2px;

}

#networks-wizard h2 {

    margin-top: 15px;

}

#wizard li {

    margin-bottom:1.2em;

}

#wizard .pane li {

    margin: 0;

}

#wizard label {

    font-size:120%;

    display:block;

    clear: both;

}

#wizard label strong {

    position:relative;

    top:-1px;

    font-size: 80%;

    font-weight: normal;

}

#wizard label em {

    font-size:75%;

    color:#666;

    font-style:normal;

}

#wizard .text {

    width: 270px;

    padding: 5px;

    margin-top: 10px;

    border: 1px solid #ccc;

    color: #456;

    letter-spacing: 1px;

}

#wizard select {

    border:1px solid #ccc;

    width:94%;

    padding:4px;

    display: none;

}

#wizard .double label {

    width:50%;

    float:left;

}

#wizard .double .text {

    width:93%;

}

#wizard .clearfix {

    clear:left;

    padding-top:10px;

}

#wizard .right {

    float:right;

}

#wizard .error {

    border:1px solid red;

}

#wizard a:hover div.image {

    background-color: #C5DEE9;

}

.selecteddiv {

    background-color: #C5DEE9 !important;

}

#wizard label a:hover strong {

    color: black;

}

#wizard div.image span.size {

    font-size: 75%;

    color: #666;

}

#wizard div.image .radio {

    float: left;

    margin-top: 10px;

}

#wizard div.image span.image-id, #wizard div.image span.description {

    font-size: 75%;

    color: #666;

    font-weight: normal;

    display:inline;

}

#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {

    color: black;

}

#wizard .cost {

    color: #79A4C1;

    margin-top: 40px;

    clear:both;

    padding-left: 15px;

    font-size: 95%;

}

#wizard #status {

    height: 50px;

    background: #4085A5;

    width: 450px;

}

#wizard .headernumber {

    font-size: 470%;

}

#wizard .headerbody {

    font-size: 120%;

    font-weight: normal;

    display: inline;

    top: -15px;

    position: relative;

}

#wizard .first {

    left: -10px;

}

#wizard .checked {

    color: #64a6c4 !important;

}

#wizard .li-2 {

    margin-top: -1px !important;

}

#wizard .img-check {

    margin-bottom: 8px;

    margin-left: -8px;

}

#wizard .li-1 .img-check {

    margin-left: 2px;

}

#wizard .topruler, #networks-wizard .topruler {

    background-color: #CDE2EC;

    border: 0 none;

    height: 4px;

    margin-left: -1px;

    width: 447px;

    margin-bottom: 6px;

    margin-top: 4px;

}

#wizard .bottomruler, #networks-wizard .bottomruler {

    background-color: #CDE2EC;

    border: 0 none;

    height: 4px;

    margin-left: -1px;

    width: 447px;

    margin-bottom:6px;

    margin-top:6px;

}

#networks-wizard .topruler, #networks-wizard .bottomruler {

    width: 455px;

    float: left;

}

#wizard #cancel, #networks-wizard .cancel {

    background-color: #4085A5;

    border-color: #4085A5;

    text-align: center !important;

}

#wizard #cancel:hover, #networks-wizard .cancel:hover {

    background-color: #7DB4CD;

    border-color: #7DB4CD;

}

#wizard #start, #networks-wizard .create {

    text-align: center;

    background-color: #FF6600;

    border-color: #FF6600;

}

#wizard .img-next {

    margin-right: -4px;

    padding-left: 8px;

}

#wizard .img-prev {

    margin-left: -4px;

    padding-right: 8px;

}

#networks-wizard .create {

    float:right;

    width: 140px;

}

#wizard #start:hover, #networks-wizard .create:hover {

    background-color: #FF9651;

    border-color: #FF9651;

}

#wizard .separator-end {

    background-color: #387693;

    height: 5px;

    margin-left: -14px;

    margin-top: 362px;

    width: 550px;

}

.page ul {

    height: 270px;

    overflow: auto;

}

.panes ul.pane {

    height: 220px;

}

#wizard #tabscontainer {

    background-color: #CDE2EC;

    height: 20px;

    margin-top: -3px;

    width: 448px;

}

.page ul.tabs {

    overflow: hidden;

    height: auto;

    margin-bottom: -1px;

    margin-top: -1px;

}

.page ul.tabs li {

    float: right;

    margin: 0 0.2em;

}

#status li {

    float: left;

    color: #387693;

    padding: 0px 0px 0 33px;

    bottom: 0px;

}

#status li.active .headernumber {

    color: #FFFFFF;

}

#status li.active .headerbody {

    color: #FFFFFF;

}

div.image-container {

    border-bottom: 1px solid #CCCCCC;

    margin-left: 10px;

    margin-right: 10px;

}

#page2-container {

    background-color: #ECF4F8;

    padding-top: 25px;

    height: 180px;

}

#page3-container {

    background-color: #ECF4F8;

    padding-left: 50px;

    height: 244px;

    margin-bottom: 32px;

}

/* slider root element */

.slider {

    border: 1px solid #666;

    cursor: pointer;

    display: inline !important;

    float: left;

    margin: 5px 0 20px 10px;

    position: relative;

    width: 250px;

}

.sliders {

    float:left;

    width: 40px;

    margin-left: 10px;

    margin-top: 3px;

}

.units {

    padding-left:10px;

}

.slider-container {

    padding-bottom: 15px;

    margin-left: 5px;

}

/* drag handle */

.handle {

    -moz-box-shadow: 0 0 2px #000000;

    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;

    border: 1px solid #000000;

    cursor: move;

    display: block;

    height: 10px;

    margin-top: -8px;

    position: absolute;

    width: 8px;

}

/* progress bar (enabled with progress: true) */

.progress {

    height: 3px;

    background-color: #387693;

}

/* the input field */

.range {

    float: left;

    font-size: 100%;

    margin: -3px 0 0 15px;

    padding: 2px 10px 2px 0;

    text-align: right;

    width: 40px;

    border: 1px solid #387693;

}

.selectedrange {

    border-color: #5599FF;

}

#credits-indicator {

    background-color: #ECF4F8;

    float: none;

    margin: 0 0 0 10px;

    border: 1px solid #387693;

    color: #387693;

}

/* machines */

.machine-container {

    min-height: 65px;

    margin: 2px 0 0 3px;

    padding: 0 4px 0;

    clear: both;

    width: 523px;

    position:relative;

}

div.machine {

    margin-left: -7px;

    min-height: 65px;

    padding-left: 7px;

    padding-right: 5px;

    padding-top: 2px;

    width: 516px;

}

div.machine:hover {

    background-color:#A1C8DB !important;

}

div.machine.light-background {

    background-color:#aed2e3;

}

.machine a {

    font-weight: normal;

    text-decoration: none;

}

div.machine-details {

    width: 400px;

    float:left;

}

.machine span.name, .machine a.ip {

    font-size: 75%;

    color: black;

    margin-top: 6px;

}

.machine span.name {

    font-weight: bold;

}

.oldValue {

    display:none;

}

.state {

    float: right;

    margin-top: -40px;

}

.state div {

    text-align: right;

    margin-right: 3px;

}

/* icon view actions */

div.machine div.actions {

    float: right;

    font-size: 75%;

    font-weight: normal;

    height: 68px;

    position: absolute;

    right: -63px;

    width: 70px;

    top: 0px;

}

div.machine div.actions a {

    color: transparent;

    height: 15px;

    width: 180px;

    margin: 0 0 2px 8px;

    display: block;

}

div.machine div.actions a:hover {

    background-color:#A1C8DB;

    opacity: 0.8;

    filter: alpha(opacity = 80);

}

div.machine div.actions a.selected {

    color: #FF7F2A;

    width: 50px;

}

div.machine div.actions a.selected:hover {

    background-color:transparent;

}

div.machine div.actions a.action-shutdown {

    display: block;

}

div.machine div.actions a.shutdown-padding {

    margin-bottom: 22px;

}