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;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

    font-family: Verdana, 'PT Sans', sans-serif;

}

body {

    background: url(./body-bg.png) repeat-x #FFFFFF;

    text-align:center;

    font-size: 16px;

}

a, a:hover, a:active, a:focus, div:focus, span:focus, li:focus {

    outline: none;

}

#okeanos-image {

    position: absolute;

    bottom: -0px;

    right: 0;

    z-index:0;

}

#container {

    position: relative;

        margin:0 auto;

        width: 100%;

        background: transparent;

}

#header {

    height: 93px;

    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;

    margin: 0 auto;

    width: 700px;

    text-align: left;

    position: relative;

}

#content {

    padding-bottom: 10px;

    width: 100%;

}

div#wrapper {

    width: 700px;

    margin: 0em auto;

    text-align: left;

}

#footer {

    height: 80px;

    background-color: #4085A5;

    width:100%;

}

#footer-container {

    height: 80px;

    width: 100%;

    left:0;

    z-index:10;

}

#footer div.grnet-sign {

    margin-top:10px;

}

#footer div.grnet-sign a{

    color: #72ADC8;

}

#footer div.grnet-sign a:hover {

    color: #FFFFFF;

}

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

}

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

}

h5 {

    font-weight: normal;

    margin-bottom:3px;

}

.tab-name, 

.machine-container .name,

h5.namecontainer span,

.single .machine-detail.title {

    font-family: 'Ubuntu';

}

.create-container a {

    font-family: 'Open Sans', sans-serif;

}

/* root element for tabs  */

.tab-name {

    background-color: #5CA1C0;

    color: #FFFFFF;

    float: right;

    font-size: 150%;

    height: 31px;

    text-align: right;

    padding-right: 15px;

    width: 170px;

}

.tab-separator {

    background-color: white;

    float: left;

    width: 2px;

    height: 23px;

    margin-top: 4px;

}

ul.css-tabs {

    padding: 0;

    height:31px;

    background-color: #5CA1C0;

}

ul.css-tabs .secondary {

    position:relative;

}

/* single tab */

ul.css-tabs li {

    float:left;

    padding:0;

    list-style-type:none;

}

ul.css-tabs .current {

    background: #4085A5;

}

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

    height: 27px;

}

ul.css-tabs a:hover {

    background: #74AEC9;

}

/* selected tab */

ul.css-tabs a.current,

ul.css-tabs a.active {

    cursor:default;

    background: #4085A5;

}

/* tab pane */

div.css-panes {

/*    border-top: 10px solid #87aade;

    border-bottom: 10px solid #87aade;  */

    background: transparent;

}

.css-panes > div.pane {

    display:none;

}

.panes-menu {

    height: 30px;

    margin-bottom: 10px;

}

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

/*}*/

.error {

    color: #f00 !important;

}

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

}

#beforecreate {

    background-color: #FF9955;

    height: 32px;

    width: 13px;

}

.pane-top {

    height: 70px;

    position: relative;

    background: #EFF7FA 0px 0px;

    /*margin-bottom: -2px;*/

}

#machines-pane-top.empty {

    background: transparent;

}

#beforecreate {

    border-left: 16px solid #efefef;

    margin-left: -16px;

}

.create-container {

    line-height: 4em;

}

#createcontainer a {

}

#create {

    background-color: #FF7F2A;

    color: #000;

    cursor: pointer;

    text-decoration: none;

    font-size:100%;

}

#create:hover {

    background-color: #FF9955;

}

#console-header {

    height: 67px;

    margin-bottom:15px;

    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;

}

.header-logo {

    padding-top: 28px;

}

div#footer-text a {

    color: #FFFFFF;

    text-decoration: none;

}

div#footer-text{

    color: #FFFFFF;

    font-size: 75%;

    padding-top: 10px;

}

#footer-bg {

    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;

    background-position:right;

}

.modal {

    background-color:#fff;

    display:none;

    width:30em;

    padding:1em;

    text-align:left;

}

/* server wizard scrollable root element and network wizard */

#wizard, #networks-wizard {

    font-size:75%;

    height:425px;

    width:453px;

    overflow:hidden;

    position:absolute !important;

}

/* scrollable items */

#wizard .items {

    width:20000em;

    clear:both;

    position:absolute;

    display:block;

    padding: 0;

    margin: 0;

    border:none;

    background:none;

}

/* single item */

#wizard .page, #networks-wizard div.container {

    padding: 0px 40px 20px 15px;

    width:447px;

    float:left;

    display:block;

    border:none;

    background-color: transparent;

}

#networks-wizard div.container {

    background-color: #ECF4F8;

    width:400px;

    height: 180px;

    margin-bottom:50px;

}

/* title */

#wizard h2, #networks-wizard h2 {

    color: #FF7B24;

    font-size: 100%;

    font-style: italic;

    font-weight: bold;

    margin-left: 37px;

    margin-top: 17px;

}

#networks-wizard h2 {

    margin-top: 15px;

}

#wizard li {

    margin-bottom:1.2em;

}

#wizard .pane li {

    margin: 0;

}

#wizard label {

    font-size:120%;

    display:block;

    clear: both;

}

#wizard label strong {

    position:relative;

    top:-1px;

    font-size: 80%;

    font-weight: normal;

}

#wizard label em {

    font-size:75%;

    color:#666;

    font-style:normal;

}

#wizard .text {

    width: 270px;

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

}

.selecteddiv {

    background-color: #C5DEE9 !important;

}

#wizard label a:hover strong {

    color: black;

}

#wizard div.image span.size {

    font-size: 75%;

    color: #666;

}

#wizard div.image .radio {

    float: left;

    margin-top: 10px;

}

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

    font-size: 75%;

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

}

#wizard .cost {

    color: #79A4C1;

    margin-top: 40px;

    clear:both;

    margin-left: 15px;

    font-size: 95%;

}

#wizard #status {

    height: 50px;

    background-color: #4085A5;

}

#wizard .headernumber {

    font-size: 410%;

}

#wizard .headerbody {

    font-size: 120%;

    font-weight: normal;

    display: inline;

    top: -15px;

    position: relative;

}

#wizard .first {

    left: -10px;

}

#wizard .checked {

    color: #64a6c4 !important;

}

#wizard .li-2 {

    margin-top: -1px !important;

}

#wizard .img-check {

    margin-bottom: 8px;

    margin-left: -8px;

}

#wizard .li-1 .img-check {

    margin-left: 2px;

}

#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {

    background-color: #CDE2EC;

    color: #CDE2EC;

    border: 0 none;

    height: 4px;

    margin-left: -1px;

    width: 447px;

    margin-bottom: 6px;

    margin-top: 4px;

}

#wizard .bottomruler, #networks-wizard .bottomruler {

    margin-top:6px;

}

#networks-wizard .topruler, #networks-wizard .bottomruler {

    width: 455px;

    float: left;

}

#wizard #cancel, #networks-wizard .cancel {

    background-color: #4085A5;

    border-color: #4085A5;

    text-align: center !important;

}

#wizard #cancel:hover, #networks-wizard .cancel:hover {

    background-color: #7DB4CD;

    border-color: #7DB4CD;

}

#wizard #start, #networks-wizard .create {

    text-align: center;

    background-color: #FF7F2A;

    border-color: #FF7F2A;

}

:focus {

    outline: none;

    -moz-outline-style: none;

}

#wizard .img-next {

    margin: 0 -4px -1px 8px;

}

#wizard .img-prev {

    margin: 0 8px -1px -4px;

}

#networks-wizard .create {

    float:right;

    width: 140px;

}

.overlay-networks-create .form-actions {

    float: right;

    margin-top: -26px !important;

}

#wizard #start:hover, #networks-wizard .create:hover {

    background-color: #FF9651;

    border-color: #FF9651;

}

#wizard .separator-end {

    position: absolute;

    background-color: #387693;

    height: 5px;

    margin-left: -14px;

    margin-top: 382px;

    width: 550px;

}

.page ul {

    height: 270px;

    overflow: auto;

}

.panes ul.pane {

    height: 220px;

}

#wizard #tabscontainer {

    background-color: #CDE2EC;

    height: 20px;

    width: 448px;

}

.page ul.tabs {

    overflow: hidden;

    height: auto;

    margin-bottom: -1px;

    margin-top: -1px;

}

.page ul.tabs li {

    float: right;

    margin: 0 0.2em;

}

#status li {

    float: left;

    color: #387693;

    padding: 0 1px 0 37px;

    bottom: 0px;

}

#status li.active .headernumber {

    color: #FFFFFF;

}

#status li.active .headerbody {

    color: #FFFFFF;

}

div.image-container {

    border-bottom: 1px solid #CCCCCC;

    margin-left: 10px;

    margin-right: 10px;

}

#page2-container {

    background-color: #ECF4F8;

    height: 193px;

    margin-top: 3px;

    padding-top: 25px;

}

#page3-container {

    background-color: #ECF4F8;

    height: 245px;

    margin-bottom: 32px;

    padding-left: 50px;

}

/* slider root element */

.slider {

    border: 1px solid #666;

    cursor: pointer;

    display: inline !important;

    float: left;

    margin: 5px 0 20px 10px;

    position: relative;

    width: 250px;

}

.sliders {

    float:left;

    width: 40px;

    margin-left: 10px;

    margin-top: 3px;

}

.units {

    padding-left:10px;

}

.slider-container {

    padding-bottom: 15px;

    margin-left: 5px;

}

/* drag handle */

.handle {

    -moz-box-shadow: 0 0 2px #000000;

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

    border: 1px solid #000000;

    cursor: move;

    display: block;

    height: 10px;

    margin-top: -8px;

    position: absolute;

    width: 8px;

}

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

.progress {

    height: 3px;

    background-color: #387693;

}

/* the input field */

.range {

    border: 1px solid #387693;

    float: left;

    font-size: 100%;

    margin: -3px 0 0 15px;

    padding: 2px 5px 2px 0;

    text-align: right;

    width: 50px;

}

.selectedrange {

    border-color: #5599FF;

}

#credits-indicator {

    background-color: #ECF4F8;

    float: none;

    margin: 0 0 0 10px;

    border: 1px solid #387693;

    color: #387693;

}

/* machines */

.machine-container {

    position:relative;

}

.icon .machine-container.last .machine-data-cont, .machine-container:last-child .machine-data-cont {

    margin-bottom:0;

    padding-bottom: 0;

    border-bottom: none;

}

.icon .machine-container.last .machine-data, .machine-container:last-child .machine-data {

    border-bottom: none;

}

.icon .machine-container .subtitle {

    font-size: 0.70em;

    color: #222;

    line-height: 23px;

    height: 23px;

    margin-top: -5px;

}

.icon .machine-container .subtitle {

}

.icon .machine-container .info {

    margin-top: 2px;

    height: 17px;

}

.icon .machine-container .building-progress {

    vertical-align: top;

}

.ip-version-label {

    font-size: 0.8em;

    padding: 0.3em;

    background-color: #C4DDE9;

    color: #000;

}

.icon .machine-data {

    width: 520px;

    float: left;

    background-color: transparent;

}

.icon .machine-info {

    padding: 10px 0;

}

.icon .machine-details .name {

    height: 28px;

}

.icon .machine-connect {

    width: 80px;

    float: left;

}

.icon .machine-details {

    width: 310px;

    float: left;

    margin-top: -6px;