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: 31px;

    margin-left: -13px;

    margin-top: -6px;

    width: 13px;

}

#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;

    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: 22%;

    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: 0px 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: 17px;

}

#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;

}

#wizard .headernumber {

    font-size: 410%;

}

#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;

    margin-bottom: -1px;

}

#wizard .img-prev {

    margin-left: -4px;

    padding-right: 8px;

    margin-bottom: -1px;

}

#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;

    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: 0 1px 0 37px;

    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;

    height: 193px;

    margin-top: 3px;

    padding-top: 25px;

}

#page3-container {

    background-color: #ECF4F8;

    height: 245px;

    margin-bottom: 32px;

    padding-left: 50px;

}

/* 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 {

    border: 1px solid #387693;

    float: left;

    font-size: 100%;

    margin: -3px 0 0 15px;

    padding: 2px 5px 2px 0;

    text-align: right;

    width: 50px;

}

.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 !important;

    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;

}