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 {

  -moz-outline-style:none;

}

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

}

/* the root element for scrollable */

#wizard {

        overflow:hidden;

        position:relative;

}

/* 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 root element */

#wizard {        

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

        border:5px solid #789;

        font-size:12px;

        height:450px;

        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;        

    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;

        padding-bottom:15px;                

}

#wizard h2 em {

        display:block;

        font-size:14px;

        color:#666;

        font-style:normal;

        margin-top:5px;

}

/* input fields */

#wizard ul {

        padding:0px !important;

        margin:0 0 2em 0 !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 #status {

        margin:0px !important;

        height:35px;

        background:#213d55 url(../static/h30.png) repeat-x;

        padding-left:25px !important;

        _background:#213d55;

}

#status li {

        list-style-type:none;

        list-style-image:none;

        float:left;

        color:#fff;

        padding:10px 30px;

}

#status li.active {

        background-color:#F49C1A;

        font-weight:normal;                

}

/* slider root element */

.slider { 

    display: block !important;

        background:#3C72E6 url(../static/h30.png) repeat-x 0 0; 

        height:9px; 

        position:relative; 

        cursor:pointer;

        border:1px solid #333;

        width:300px;

        float:left; 

        clear:right;

        margin-top:10px;

        -moz-border-radius:5px; 

        -webkit-border-radius:5px; 

        -moz-box-shadow:inset 0 0 8px #000;

    padding: .1em !important;

}

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

.progress {

        height:9px; 

        background-color:#C5FF00; 

        display:none;

        opacity:0.6;

}

/* drag handle */

.handle { 

        background:#fff url(../static/h30.png) repeat-x 0 0; 

        height:10px;

        width:10px;

        position:absolute; 

        display:block; 

        margin-top:1px;

        border:1px solid #000;

        cursor:move;

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

        -webkit-box-shadow:0 0 6px #000;

        -moz-border-radius:14px;

        -webkit-border-radius:14px; 

}

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

}

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

}

div.indicator {

    width:1em;

    height:.6em;

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

    clear: none;

    float:left;

}

.running .indicator {

    border:2px solid white;

    background-color: #05b00d;

}    

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

    color: #666;

}

div.uptime {

    font-size:.7em;

    clear: both;

    color:transparent;

    margin-left:1px;

}

div.instance-tabs {

    margin-top: 1em;

}

div.instance-tabs a{

}

span.rename, span.configure {

    font-size: 10px;

    clear: none;

    color: transparent;

    display: inline;

    font-weight: normal;

    padding-left: 2em;

}

a.name:hover span.rename {

    color: #213D55;

}

a.ip:hover span.configure {

    color: #213D55;

}

a.storage:hover span.configure {

    color: #213D55;

}

#ubuntu {

    height:50px;

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

    padding-left: 50px;

}

.slider {

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

    -moz-box-shadow: 0 0 8px #000000 inset;

    background: url("../static/h30.png") repeat-x scroll 0 0 #3C72E6;

    border: 1px solid #333333;

    clear: right;

    cursor: pointer;

    display: block !important;

    float: left;

    height: 3px;

    margin-top: 10px;

    padding: 0.1em !important;

    position: relative;

    width: 300px;

}

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

}

button {

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

    background-color: #31446f;

    border-bottom: 0.2em solid #666666;

    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 {

}