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, 'PT Sans', 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;

}

h5 {

    font-weight: normal;

    font-size: 9pt;

    margin-bottom:3px;

}

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

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

    margin-top: 7px;

}

ul.css-tabs a#instances {

    color: #87aade;

}

ul.css-tabs a#disks {

    color: #deb358;

}

ul.css-tabs a#networks {

    color: #bc9399;

}

ul.css-tabs a#images {

    color: #9ba97b;

}

ul.css-tabs a:hover {

    margin-top:0em

}

/* selected tab */

ul.css-tabs a.current {

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

    padding: 6px 24px;

    margin-top: 9px;

    width: 125px;

    text-decoration: none;

    margin-left: -2.3em;

    border:1px solid #bfd2ed;

    margin-bottom: 17px;

}

#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 -2px 25px;

}

/* 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:9pt;

        height:420px;

        margin:0px auto;        

        width:460px;

        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;

}

/* 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-weight: bold;

    font-size: 11pt;

    color: #666;

}

/* 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:9pt;

        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: 9pt;

}

#wizard div.image span.size {

    font-size: 9pt;

    color: #666;

}

#wizard div.image .radio {

    float: right;

}

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

    font-size: 9pt;

}

#wizard #status {

        height: 32px;

        background: #999;

}

.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: -9pt;

    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;                 

}

div.instance {

    clear: both;

    margin: 5px 0 0 -32px;

    padding: 3px 5px 0;

    width: 523px;

    border: 1px dashed transparent;

    color: #666;

    height: 67px;

}

.instance a {

    color: #3d3d3d;

    font-weight: normal;

    text-decoration: none;

    font-size: 9pt;

}

.instance a:hover {

    color: #000;

}

.state {

    float: right;

    width: 90px;

    margin-top: 5px;

    padding-right: 18px;

}

.state div {

    text-align: right;

    margin-right: 3px;

}

.actions {

    float: right;

    width: 70px;

    margin: 0 -75px 0 0;

    font-weight: normal;

    height: 67px;

}

.actions a {

    color: transparent;

}

a.action{

    margin: 3px 0 5px 5px;

    display: block;

}

a.more {

    margin: 13px 0 5px 5px;

    display: block;

}

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

    color: black !important;

}

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

    color: #1b1b1b;

}

.instance:hover {

    border: 1px dotted transparent;

    background-color:#dcdcdc;

    color: #3d3d3d;

}

.instance img {

    float: left;

    margin: 0em 14px 0 14px;

}

div.ip, div.state {

    font-size:9pt;

    color: #3d3d3d;

}

div.indicator {

    width:10px;

    height:11px;

    margin: 3px -1px;

    clear: none;

    float:right;

}

.running .indicator {

    border-top: 2px solid white;

    border-bottom: 2px solid white;

    border-left: 2px solid white;

    border-right: 3px solid white;

    background-color: #86a9dd;

}    

.terminated {

    opacity: .6;

}

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

    color: #3d3d3d;

}

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: 9pt;

    font-weight: normal;

    margin-left: 10px;

    padding-left: 10px;

    text-align: left;

}

a.name:hover span.rename {

    color: #3D3D3D;

    margin-top: 0.4em;

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

}

a.storage:hover span.configure {

    color: #3D3D3D;

}

#ubuntu {

    height:50px;

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

    padding-left: 50px;

}

button {

    background-color: #87AADE;

    border: 1px solid #87AADE;

    color: #FFFFFF;

    cursor: pointer;

    padding: 7px 12px;

}

button.next {

    background-color: #F49000;

    border-color: #F49000;

    font-weight: bold;

}

button.prev {

    margin-left: -19px;

}

.image-logo {

    float: left;

    margin-right: 1em;

}

div.image {

    padding: 1em;

    clear: both;

    display: block;

}

a#list, a#standard {

    float: right;

    clear: both;

    color: white;

    text-decoration: none;

    margin-top: -65px;

    margin-right: -36px;

    font-size: 9pt;

    background-color: #87aade;

    padding: 5px 10px;

}

div.instance-type {

    float: left;

    margin-bottom: 10px;

    margin-right: 10px;

    margin-top: 4px;

}

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:9pt;

}

div.list div.running {

    margin: .5em 0;

}

/* root element for tabs  */

#wizard ul.tabs { 

    margin-left: 260px;                          

}

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

}

div.list div.actions a {

    clear: left;

    color: #666 !important;

    display: block;