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;

        outline: 0;

        font-size: 100%;

        vertical-align: baseline;

        background: transparent;

    font-family: Verdana, Bitstream Charter, sans-serif;

}

body {

        line-height: 1;

}

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

}

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

}

body {

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

    margin: 0;

}

h1, h2, h3, h4, h5 {

    margin-top: 0em;

    margin-bottom: .6em;

}

h5 {

    font-weight: normal;

    margin-bottom: 1em;

}

#footer {

    text-align:center;

    color: #666;

    font-size: .5em;

    padding:2em;

}

/* get rid of those system borders being generated for A tags */

a:active {

  outline:none;

}

*:focus {

    outline:0 !important;

}

/* root element for tabs  */

ul.css-tabs {

        margin: 0 0 0 10px; 

    padding: 0;

        height:31px;

    font-size:34px;        

    overflow: hidden;         

}

/* 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 7px 0 10px;

    margin-top: 7px;

}

ul.css-tabs a:hover {

    margin-top:0em

}

/* selected tab */

ul.css-tabs a.current {

    color: #87aade;

        cursor:default;

    margin-top: 2px;

}

/* tab pane */

div.css-panes {

    border-top: 10px solid #87aade;  

    background: white;

}

.css-panes > div.pane {

        display:none;

        padding:0px 20px;

    margin: 0 1em;

    -moz-border-radius: 0 1em 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 12px;

        -moz-box-shadow: #000 0 0 12px;

}

/* 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: #162d50;

    cursor: pointer;

    display: block;

    padding: 0.7em .4em 0.7em 2.2em;

    margin-top: 9px;

    width: 7.9em;

    text-decoration: none;

    margin-left: -2.3em;

}

#create:hover {

    color: white;

}

div#header {

    height: 60px;

    background: #999;

}

div#wrapper {

    width: 700px;

    margin: 0em auto;

}

a.logo {

    width: 250px; 

}

a.logo h1 {

    display: none;

}

a.logo:hover h1 {

    color: #3baddb;

}

a img {

    border: none;

}

div#about {

    display:none;

}    

#nefo {

    margin: 33px 0 0 17px;

}

/* tooltip styling. by default the element to be styled is .tooltip  */

.tooltip {

        display:none;

    color: transparent; 

}

.modal {

    background-color:#fff;

    display:none;

    width:30em;

    height:20em;

    padding:1em;

    text-align:left;

    opacity:0.9;

}

/* scrollable root element */

#wizard {        

        border:5px solid #87AADE;

        font-size:12px;

        height:480px;

        margin:0px auto;        

        width:500px;

        overflow:hidden;

        position:relative;

        /* rounded corners for modern browsers */

        -moz-border-radius:5px;

        -webkit-border-radius:5px;

}  

/* scrollable items */

#wizard .items {

        width:20000em;

        clear:both;

        position:absolute;

}

/* single scrollable item called ".page" in this setup */

#wizard .page {

        padding:20px 30px;

        float:left;

}

/* validation error message bar. positioned on the top edge */

#drawer {

        overflow:visible;

        position:fixed;

        left:0;

        top:0;

}

/* 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:20px 30px;

        width:440px;

        float:left;        

    display:block;

    border:none;

    background-color: transparent;

}

/* title */

#wizard h2 {

        font-size:22px;

        font-weight:normal;

        margin:10px 0 0 0;

}

#wizard h2 em {

        display:block;

        font-size:14px;

        color:#666;

        font-style:normal;

        margin-top:5px;

}

/* input fields */

#wizard ul {

        padding:0px !important;

}

#wizard li {

        list-style-type:none;

        list-style-image:none;

        margin-bottom:1.2em;

}

#wizard label {

        font-size:16px;        

        display:block;

    clear: both;

}

#wizard label strong {

        color:#789;        

        position:relative;

        top:-1px;

}

#wizard label em {

        font-size:11px;

        color:#666;        

        font-style:normal;

}

#wizard .text {

        width:94%;

        padding:5px;

        border:1px solid #ccc;

        color:#456;

        letter-spacing:1px;

}

#wizard select {

        border:1px solid #ccc;

        width:94%;        

        padding:4px;

    display: none;

}

#wizard label span {

        color:#b8128f;

        font-weight:bold;

        position:relative;

        top:4px;

        font-size:20px;

}

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

}

#wizard a:hover div.image img {

    background-color: #999;

}

#wizard label a:hover strong {

    color: white;

}

#wizard div.image strong {

    font-size: 1em;

}

#wizard div.image span.size {

    font-size: 0.8em;

    color: #666;

}

#wizard div.image .radio {

    float: right;

}

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

    font-size: 0.8em;

    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: 5em;

    font-size: .8em;

}

#wizard #status {

        margin: 0px !important;

        height: 35px;

        background: #999;

        padding-left: 25px !important;

}

.page ul {

    height: 280px;

    overflow: auto;

    margin-bottom: 2em;

}

.page ul.tabs {

    overflow: hidden;

}

.panes ul.pane {

    height: 268px;

}

.page ul.tabs {

    height: auto;

    margin-bottom: 0em;

    margin-top: -1.37em;

}

.page ul.tabs li {

    float: right;

    margin: 0 1em;

}

#status li {

        list-style-type:none;

        list-style-image:none;

        float:left;

        color:#666;

        padding:10px 30px;

}

#status li.active {

        background-color: #87AADE;

    font-weight: bold;

    color: white;

}

/* slider root element */

.slider {

    -moz-border-radius: 5px 5px 5px 5px;

    background-color: #87AADE;

    border: 1px solid #666;

    clear: right;

    cursor: pointer;

    display: block !important;

    float: left;

    height: 3px;

    margin-top: 10px;

    margin-bottom: 2em;

    padding: 0.1em !important;

    position: relative;

    width: 330px;

}

/* drag handle */

.handle {

    -moz-border-radius: 14px 14px 14px 14px;

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

    margin-top: -11px;

    position: absolute;

    width: 10px;

}

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

.progress {

        height:9px; 

        background-color:#C5FF00; 

        display:none;

        opacity:0.6;

}

/* the input field */

.range {

        border:1px inset #ddd;

        float:left;

        font-size:16px;

        margin:0 0 0 15px;

        padding:3px 0;

        text-align:center;

        width:50px;

        -moz-border-radius:5px; 

        -webkit-border-radius:5px;                 

}

.instance {

    clear: both;

    margin: 1em 0 0 -2em;

    padding: 1em 2em 1em 1em;

    width: 70%;

    border: 1px dashed transparent;

    color: #666;

    height: 70px;

}

.instance a {

    color: #6892d2;

    font-weight: normal;

    text-decoration: none;

    font-size: .8em;

}

.instance a:hover {

    color: #162d50;

}

.state {

    float: right;

    width: 15%;

    margin-top: .4em;

}

.actions {

    float: right;

    width: 20%;

    margin: -1.5em -10em 0 0;

    font-weight: normal;

    padding-left: 2em;

    height: 70px;

}

.actions a {

    color: transparent;

}

a.action{

    margin: .5em;

    display: block;

}

a.more {

    margin: 4.1em 0.5em 0.5em;

    display: block;

}

a.action:hover, a.more:hover {

    color: black !important;

}

.actions:hover a,.instance:hover .actions a {

    color: #666;

}

.instance:hover {

    border: 1px dotted transparent;

    background-color:#dcdcdc;

    color: black;

}

.instance img {

    float: left;

    margin: 0em 2em 0 1em;

}

div.ip, div.state {

    font-size:.7em;

    color: #6892D2;

}

div.indicator {

    width:1em;

    height:.6em;

    margin: .3em -.1em .5em;

    clear: none;

    float:left;

}

.running .indicator {

    border:2px solid white;

    background-color: #86a9dd;

}    

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

    color: #6892D2;

}

div.uptime {

    clear: both;

    color: transparent;

    margin-left: 1px;

}

div.instance-tabs {

    margin-top: 1em;

}

div.instance-tabs a{

}

span.rename, span.configure {

    background-repeat: no-repeat;

    color: transparent;

    font-size: 11px;

    font-weight: normal;

    margin-left: 2em;

    padding-left: 2em;

    text-align: left;

}

a.name:hover span.rename {

    color: #213D55;

    margin-top: 0.4em;

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

}

a.ip:hover span.configure {

    color: #213D55;

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

}

a.storage:hover span.configure {

    color: #213D55;

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

}

#ubuntu {

    height:50px;

    background: url(../static/ubuntu-logo.png) no-repeat 0 0;

    padding-left: 50px;

}

button {

    -moz-border-radius: 10.2em 10.2em 10.2em 10.2em;

    background-color: #87AADE;

    border-bottom: 0.2em solid #999;

    border-width: 1px 1px 0.2em;

    color: #FFFFFF;

    cursor: pointer;

    font-size: 1em;

    line-height: 1;

    padding: 0.7em 2em;

}

button.next {

    background-color: #f49000;

    font-weight: bold;

}

button.prev {

}

.image-logo {

    float: left;

    margin-right: 1em;

}

div.image {

    padding: 1em;

    clear: both;

    display: block;

}

a#list, a#standard {

    float: right;

    clear: both;

    color: #666;

    text-decoration: none;

    margin-top: -2em;

    margin-right: 5em;

    font-size: 0.8em

}

div.instance-type {

    float: left;

    margin-bottom: 2em;

    margin-right: 1.8em;

    margin-top: 1em;

}

div.active {

    border-bottom: 1em solid #87AADE;

    height: 200px;

}

div.active, div.stopped {

    margin-left: -2.2em;

    width: 70%;

    padding: 1em;

    margin-top: 1em;

}

div.list label img {

    margin-right: .5em;

    margin-bottom: -0.25em;

}

div.list label {

    color: #87AADE;

    font-size:.8em;

}

div.list div.running {

    margin: .5em 0;

}

/* root element for tabs  */

#wizard ul.tabs { 

    margin-top: -2em;

    margin-left: 21em;                          

}

/* single tab */

#wizard ul.tabs li {  

    margin-bottom: 0; 

        list-style-type:none;

    float: left;        

}

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

#wizard ul.tabs a { 

        display:block;

        padding: 0.5em;        

        text-decoration:none;

        color: #999;

        position:relative;

        top:1px;

        outline:0;

}

#wizard ul.tabs a:hover {

        color: black;

    background-color:#F7F7F7;

}

/* selected tab */

#wizard ul.tabs a.current {

        color: white;

    background-color: #87AADE;        

        cursor: default;

}

div.inactive div.state {

    margin-right: 2.5em;

}

div.inactive {

    opacity: .6;

}

div.list div.actions {

    clear: left;

    float: right;

    margin-right: 4em;

    margin-top: 1em;

    text-align: right;

}