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;

}

body {

        line-height: 1;

    background: url(../static/degrade-background.png) repeat-x scroll 0 0 #C3C3C3;

    margin: 0;

}

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;

    font-size: 9pt;

    margin-bottom:3px;

}

/* root element for tabs  */

ul.css-tabs {

        margin: 0 0 0 10px; 

    padding: 0;

        height:31px;

    font-size:32px;        

    overflow: hidden;         

}

ul.css-tabs .secondary {

    position:relative;

}

/* single tab */

ul.css-tabs li {  

        float:left;         

        padding:0; 

        margin: 0 10px 0 0;  

        list-style-type:none;        

}

/* 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: 0 9px 0 13px;

    top: 9px;

}

ul.css-tabs a#machines {

    color: #a3bbc5;

}

ul.css-tabs a#machines.current {

  color: #87aade;

}

ul.css-tabs a#disks {

    color: #deb358;

}

ul.css-tabs a#disks.current {

    color: #dea842;

}

ul.css-tabs a#images {

    color: #9ba97b;

}

ul.css-tabs a#images.current {

    color: #87a06d;

}

ul.css-tabs a#networks {

    color: #bc9399;

}

ul.css-tabs a#networks.current {

  color: #9d6d6a;

}

ul.css-tabs a#files {

    color: #a3bbc5;

}

ul.css-tabs a#files.current {

  color: #87aade;

}

ul.css-tabs a#desktops {

    color: #deb358;

}

ul.css-tabs a#desktops.current {

    color: #dea842;

}

ul.css-tabs a#apps {

    color: #9ba97b;

}

ul.css-tabs a#apps.current {

    color: #87a06d;

}

.more-tabs {

    float: right;

    margin: -15px 50px 0px 0px;

}

.more-tabs:hover {

    cursor: pointer;

}

/* selected tab */

ul.css-tabs a.current {

        cursor:default;   

    top: 2px !important; 

}

/* tab pane */

div.css-panes {

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

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

    background: white;

}

.css-panes > div.pane {

        display:none;

        padding:0px 20px;

    margin: 0 1em;

}

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

}

#create {

    background-color: #87aade;

    color: #000;

    cursor: pointer;

    display: none;

    padding: 6px 24px;

    margin: -8px 0 20px -36px;

    width: 125px;

    text-decoration: none;

}

#create:hover {

    background-color: #a8c5f1;

}

#header .fatborder{

    height: 60px;

    background: #999;

}

div#wrapper {

    width: 700px;

    margin: 0em auto;

}

.modal {

    background-color:#fff;

    display:none;

    width:30em;

    height:20em;

    padding:1em;

    text-align:left;

}

/* scrollable root element */

#wizard {        

        font-size:9pt;

        height:405px;

        width:453px;

        margin:0px auto;        

        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 {        

    padding: 15px 40px 20px 15px;

        width:447px;

        float:left;        

    display:block;

    border:none;

    background-color: transparent;

}

/* title */

#wizard h2 {

    color: black;

    font-size: 100%;

    font-weight: normal;

    padding-left: 20px;

}

#wizard li {

        margin-bottom:1.2em;

}

#wizard .pane li {

    margin: 0;

}

#wizard label {

        font-size:16px;        

        display:block;

    clear: both;

}

#wizard label strong {

        position:relative;

        top:-1px;

    font-size: 80%;

    font-weight: normal;

}

#wizard label em {

        font-size:9pt;

        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 div.image {

}

#wizard a:hover div.image {

    background-color: #999;

}

.selecteddiv {

    background-color: #999 !important;

}

#wizard label a:hover strong {

    color: white;

}

#wizard div.image span.size {

    font-size: 9pt;

    color: #666;

}

#wizard div.image .radio {

    float: left;

    margin-top: 10px;

}

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

    font-size: 9pt;

    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: white;

}

#wizard .cost {

    color: #666;

    margin-top: 40px;

    clear:both;

    padding-left: 15px;

    font-size: 95%;

}

#wizard #status {

        height: 50px;

        background: #666;

    width: 450px;

}

#wizard .headernumber {

    font-size: 470%;

    font-weight: normal;

}

#wizard .headerbody {

    font-size: 110%;

    font-weight: normal;

    display: inline;

    margin-top: 20px;

    position: absolute;

}

#wizard .first {

    margin-left: -7px;

}

#wizard .third {

    margin-top: -2px !important;

}

#wizard .topruler {

    background-color: #CCCCCC;

    border: 0 none;

    height: 4px;

    margin-left: -1px;

    width: 447px;

    margin-bottom: 6px;

    margin-top: 6px;

}

#wizard .bottomruler {

    background-color: #CCCCCC;

    border: 0 none;

    height: 4px;

    margin-left: -1px;

    width: 447px;

    margin-bottom:6px;

    margin-top:6px;

}

#wizard #cancel {

    text-align: center;

}

#wizard #start {

    text-align: center;

    background-color: #FF6600;

    border-color: #FF6600;

}

#wizard #start:hover {

    background-color: #FF9651;

    border-color: #FF9651;

}

.page ul {

    height: 270px;

    overflow: auto;

}

.panes ul.pane {

    height: 220px;

}

.page ul.tabs {

    overflow: hidden;

    height: auto;

    margin-bottom: 2px;

    margin-top: -5px;

}

.page ul.tabs li {

    float: right;

    margin: 0 0.2em;

}

#status li {

        float: left;

        color: #7D7D7D;

    padding: 0px 72px 0 40px;

    margin-top: -1px;

}

#status li.active .headernumber {

    color: #FFFFFF;

}

#status li.active .headerbody {

    color: #5599FF;

}

div.image-container {

    border-bottom: 1px solid #CCCCCC;

    margin-left: 10px;

    margin-right: 10px;

}

#page2-container {

    background-color: #ECECEC;

    padding-top: 25px;

    height: 180px;

}

#page3-container {

    background-color: #ECECEC;

    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("../static/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: #676767;

}

/* 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 #111111;

}

.selectedrange {

    border-color: #5599FF;

}

#credits-indicator {

    background-color: #ECECEC;

    float: none;

    margin: 0 0 0 10px;

    border: 1px solid #999;

    color: #222222;

}

.machine-container {

    min-height: 65px;

    margin: 2px 0 0 -32px;

    padding: 0 4px 0;

    clear: both;

    width: 523px;

}

.machine-container:hover {

}

div.machine {

    color: #666;

    min-height: 65px;

    padding-right: 15px;

    padding-top: 2px;

}

.machine a {

    color: #3d3d3d;

    font-weight: normal;

    text-decoration: none;

    font-size: 9pt;

}

.machine a:hover {

    color: #000;

    text-decoration: underline;

}

.machine .name, .machine .ip {

    text-decoration: none !important;

    padding-top: 4px;

}

.oldValue {

    display:none;

}

.state {

    float: right;

}

.state div {

    text-align: right;

    margin-right: 3px;

}

div.machine div.actions {

    float: right;

    width: 70px;

    margin: 0 -80px 0 0;

    font-weight: normal;

}

div.machine div.actions a {

    color: transparent;

    margin: 0 0 5px 8px;

    display: block;

}

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

    margin-bottom: 5px;

    display: block;

}

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

    margin-bottom: 22px;

}

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

    margin-top: 52px;

}

div.actions a.enabled:hover{

    color: black !important;

    text-decoration: underline;

    display: block;

}

.machine:hover .actions a {

    color: #3d3d3d;

    display: block;

}

div.machine div.display a{

    color: #3d3d3d;

    display: block;

}

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

    color: orange;

}

div.running div.machine a.action-start {

    display: none;

}

div.terminated div.machine a.action-reboot, div.terminated div.machine a.action-shutdown{

    display: none;

}

div.terminated div.machine div.actions a.action-destroy {

    margin-top: 38px;

}

.machine:hover {

    background-color:#dcdcdc;

}

.standard .machine img {

    float: left;

    margin: 7px 14px 0;

}

.list .machine img {

    margin: 0;

}

div.ip, div.state {

    font-size: 9pt;

    color: #3d3d3d;

}

div.indicator {

    width:10px;

    height:11px;

    margin: 3px -1px;

    clear: none;

    float:right;

}

.view-separator {

    color:#5F8DD3;    

}

.running .indicator {

    border-top: 2px solid white;

    border-bottom: 2px solid white;

    border-left: 2px solid white;

    border-right: 3px solid white;

    background-color: #87AADE;

}

.terminated {

    margin-bottom: 17px;

}

.terminated .machine .state .status {

    color: #666;

}

.machine:hover div.uptime, .machine:hover a.rename, .machine:hover a.configure {

    color: #3d3d3d;

}

div.uptime {

    clear: both;

    color: transparent;

    margin-left: 1px;

}

div.machine-tabs {

    margin-top: 1em;

}

span.rename, span.configure {

    background-repeat: no-repeat;

    color: transparent;

    font-size: 9pt;

    font-weight: normal;

    margin-left: 10px;

    padding-left: 10px;

    text-align: left;

}

span.rename {

    cursor: pointer;

}

div.name:hover span.rename {

    color: #3D3D3D;

    margin-top: 0.4em;

    background-image: url(/static/pencil.png);

    background-position: 0 3px;

}

a.settings:hover span.configure {

    color: #3D3D3D;

}

button {

    background-color: #87AADE;

    border: 1px solid #87AADE;

    color: #FFFFFF;

    cursor: pointer;

    height: 23px;

    width: 120px;

}

button.next:hover {

    background-color: #68A4FF;