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

}

ul.css-tabs a#instances.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:hover {

    margin-top: 2px;

}

/* selected tab */

ul.css-tabs a.current {

        cursor:default;

    margin-top: 2px;

}

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

    padding: 6px 24px;

    margin: 12px 0 12px -36px;

    width: 125px;

    text-decoration: none;

}

#create:hover {

    background-color: #a8c5f1;

}

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: 10px 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:405px;

        width:460px;

        margin:0px auto;        

        overflow:hidden;

        position:relative;

}  

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

    color: #666;

}

#wizard li {

        margin-bottom:1.2em;

}

#wizard .pane li {

    margin: 0;

}

#wizard label {

        font-size:16px;        

        display:block;

    clear: both;

}

#wizard label strong {

        color:#789;        

        position:relative;

        top:-1px;

    font-size: 12pt;

}

#wizard label em {

        font-size:9pt;

        color:#666;        

        font-style:normal;

}

#wizard .text {

        width: 94%;

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

}

#wizard a:hover div.image img {

    background-color: #999;

}

#wizard label a:hover strong {

    color: white;

}

#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: 50px;

}

#wizard #status {

        height: 32px;

        background: #999;

    padding-left: 15px;

}

.page ul {

    margin-top: 15px;

    height: 280px;

    overflow: auto;

}

.panes ul.pane {

    height: 276px;

}

.page ul.tabs {

    overflow: hidden;

    height: auto;

    margin-bottom: 0;

    margin-top: -20px;

}

.page ul.tabs li {

    float: right;

    margin: 0 1em;

}

#status li {

        float:left;

        color:#666;

        padding:10px 40px;

}

#status li.active {

        background-color: #87AADE;

    font-weight: bold;

    color: white;

}

/* slider root element */

.slider {

    background-color: #87AADE;

    border: 1px solid #666;

    clear: right;

    cursor: pointer;

    display: block !important;

    float: left;

    height: 3px;

    margin: 20px 0 20px;

    padding: 0.1em !important;

    position: relative;

    width: 330px;

}

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

        margin: 10px 0 0 15px;

        padding: 3px 0;

        text-align: center;

        width: 50px;                

}

div.instance {

    clear: both;

    margin: 5px 0 0 -32px;

    padding: 3px 4px 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;

}

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

    display: block;

}

a.more {

    margin: 18px 0 5px 5px;

    display: block;

}

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

    color: black !important;

}

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

    color: #3d3d3d;

}

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

}

.list .state {

    margin-top: 3px;

}

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: #87AADE;

}

.instance:hover .indicator {  

    border-color: #dcdcdc !important;

}

.terminated {

    margin-bottom: 25px;

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

}

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: 4px 25px;

}

button.next:hover {

    background-color: #f4b400;

    border-color: #f4b400;

}

button.prev:hover {

    background-color: #a8c5f1;

    border-color: #a8c5f1;

}

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;

}

div#view-select {

    float: right;

    clear: both;

    color: #999999;

    margin-top: -62px;

    margin-right: -36px;

    font-size: 9pt;

    background-color: #87aade;

    padding: 5px 10px;

}

a#standard, a#list {

    text-decoration: none;

}

a#standard:link, a#standard:visited {

color:#999999;

}

a#list:link, a#list:visited {

color:white;

}

a#standard:active, a#list:active {

color:white;

}

.activelink {

color:white !important;

}

div.instance-type {

    float: left;

    margin: 4px 10px 20px 0;

}

div.active {

    height: 200px;

}

div.active, div.stopped {

    margin-left: -2.2em;

    width: 500px;

    padding: 1em;

    margin-top: 1em;

}

div.list label img {

    margin-right: .5em;

    margin-bottom: -0.25em;

}

div.list label {

    color: #3D3D3D;

    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 {

    opacity: .6;

    margin-bottom: 25px;

}