Synnefo

body {

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

        font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;

    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; 

    padding: 0;

        height:1.5em;

    font-size:2em;        

    overflow: hidden;         

}

/* single tab */

ul.css-tabs li {  

        float:left;         

        padding:0; 

        margin: 0;  

        list-style-type:none;        

}

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

ul.css-tabs a { 

        float:left;

        font-size:1em;

        display:block;

        padding:.6em 1em 0;        

        text-decoration:none;

        height:1.5em;

        color:#d2d2d2;

        position:relative;

        outline:0;

    margin-top:0.15em

}

ul.css-tabs a:hover {

    margin-top:0em

}

/* selected tab */

ul.css-tabs a.current {

    color: #87aade;

        cursor:default;

    margin-top:0em

}

/* tab pane */

div.css-panes {

    border-top: 10px solid #87aade;  

    background: white;

}

.css-panes > div.pane {

        display:none;

        padding:15px 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: 1em;

    width: 7.9em;

    text-decoration: none;

    margin-left: -2.3em;

}

#create:hover {

    color: white;

}

div#header {

    height: 60px;

    background: #999;

}

div#wrapper {

    width: 990px;

    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 {

    background: url("../static/nefo.png") no-repeat;

    margin: 3em 0 -0.2em 0;

}

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

    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;

}

div.list div.actions a {

    clear: left;

    color: #666 !important;

    display: block;

    font-size: .8em;

}

input.instance {

    width: 13px;

    height: 13px;

    padding: 0;

    margin:0;

    vertical-align: bottom;

    position: relative;

    top: -1px;

    *overflow: hidden;

}

#misc {

    height: 100px;

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

    border: 5px solid #87AADE;

    margin: 0 auto;

    overflow: hidden;

    position: relative;

}

#misc strong {

    color: #F49C1A;

}