Orbit/app/assets/stylesheets/desktop/desktop-main.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

#container input, #container textarea, #container select, #container input:focus, #container textarea:focus {
  border-radius: 0;
  box-shadow: none;
  font-family: inherit; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* basic setting */
body {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  background-color: #000; }

a, a:hover {
  text-decoration: none;
  color: #666; }

a:focus {
  outline: none; }

.clear {
  clear: both; }

.clear:after {
  display: table;
  width: 100%;
  content: '';
  clear: both; }

.valign:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle; }

.o-loading {
  font-size: 13px; }
  .fullsize .o-loading {
    padding: 12px; }
  .o-loading i {
    font-size: 20px; }

#thmbackground {
  min-height: 100%;
  min-width: 980px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; }

#bgover {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 100%; }

/* box-sizing element */
.w1, .w2, .w4, .wh1, .wh2, .wh3, .w100, .pw,
.h1, .h2, .h4, .hh1, .hh2, .hh3, .ph,
.appholder,
.appname,
.tinycanvas {
  -webkit-box-sizing: border-box;
  /* webkit */
  -khtml-box-sizing: border-box;
  /* konqueror */
  -moz-box-sizing: border-box;
  /* firefox */
  -ms-box-sizing: border-box;
  /* ie */
  box-sizing: border-box;
  /* css3 */ }

/* Desktop Global Style */
.admbg {
  background-color: #fff; }

.admbg2 {
  background-color: #dddddd; }

.admtxt {
  color: #666; }

a.admtxt.admbg2:hover {
  color: #fff;
  background-color: #aaaaaa; }

.hfn {
  font-size: 15px;
  line-height: 36px;
  float: left;
  margin: 12px 12px 0 0;
  position: relative; }

.thmtxt {
  position: relative; }

.ini_input {
  margin: 0;
  padding: 0;
  border: 0; }

.ini_input:focus {
  outline: none; }

/* - Opacity */
.op00 {
  opacity: 0; }

.op01 {
  opacity: 0.1; }

.op02 {
  opacity: 0.2; }

.op03 {
  opacity: 0.3; }

.op04 {
  opacity: 0.4; }

.op05 {
  opacity: 0.5; }

.op06 {
  opacity: 0.6; }

.op07 {
  opacity: 0.7; }

.op08 {
  opacity: 0.8; }

.op09 {
  opacity: 0.9; }

.op10 {
  opacity: 1; }

/* - box set */
.w1 {
  width: 120px; }

.w2 {
  width: 252px; }

.w4 {
  width: 512px; }

.wh1 {
  width: 36px; }

.wh2 {
  width: 60px; }

.wh3 {
  width: 84px; }

.w100 {
  width: 100%; }

.pw {
  width: 540px; }

.h1 {
  height: 120px; }

.h2 {
  height: 252px; }

.h4 {
  height: 512px; }

.hh1 {
  height: 36px; }

.hh2 {
  height: 60px; }

.hh3 {
  height: 84px; }

.ph {
  height: 516px; }

.hp {
  padding-left: 12px;
  padding-right: 12px; }

.vp {
  padding-top: 12px;
  padding-bottom: 12px; }

.element {
  margin: 0 12px 12px 0;
  float: left;
  position: relative; }

.group {
  float: left;
  margin-right: 24px; }

/* desktop layout */
#container {
  padding: 48px 0 0 156px; }

#header {
  padding: 0 0 12px 0;
  min-width: 800px;
  height: 72px;
  position: relative;
  z-index: 2; }

#side {
  width: 60px;
  height: 516px;
  position: absolute;
  margin-right: 96px;
  top: 120px;
  left: 0;
  z-index: 11; }

#holder {
  height: 516px;
  width: auto;
  position: relative;
  z-index: 1; }

#rwidget {
  height: 516px; }

.widget_fn {
  display: block;
  overflow: hidden; }

.widget_icon {
  display: block;
  width: 30px;
  height: 30px;
  margin: 15px 0 0 15px; }

.docklist .d_cate {
  position: relative; }
  .docklist .d_cate .dock_child {
    display: none;
    overflow: hidden;
    position: absolute;
    left: 60px;
    top: 0; }
    .docklist .d_cate .dock_child .dock_item {
      float: left; }
.docklist .d_cate:hover .dock_child {
  display: block; }

.fn_des.admtxt {
  line-height: 60px;
  padding: 0 12px;
  font-size: 15px;
  position: absolute;
  z-index: 9;
  min-width: 48px;
  text-align: center;
  white-space: nowrap;
  display: none; }

#search_app {
  position: relative;
  background-color: #fff; }
  #search_app .form {
    position: absolute;
    left: 0;
    top: 2px;
    padding: 2px 12px;
    width: 192px;
    height: 28px;
    line-height: 28px;
    background: none;
    border: 0; }
  #search_app .submit {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    text-indent: -999px;
    cursor: pointer; }

.section_label {
  float: left;
  width: 132px;
  height: 516px; }
  .section_label li {
    font-size: 15px; }
  .section_label li:first-child {
    font-size: 18px; }

/* panel */
#panel_l {
  background-color: #f7f7f7;
  float: left; }

#panel_r {
  background-color: #fff;
  margin-left: 252px;
  position: relative;
  width: auto; }

/* Desktop Notification */
#orbitnote {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -200px;
  z-index: 99999;
  width: 400px;
  -webkit-transition: height 2s ease;
  -moz-transition: height 2s ease;
  transition: height 2s ease; }
  #orbitnote .note_holder {
    overflow: hidden;
    padding: 36px;
    border: solid 2px #dddddd;
    border-top: 0;
    display: none; }
    #orbitnote .note_holder .note_type {
      display: inline-block;
      vertical-align: middle;
      width: 60px;
      height: 60px;
      color: #fff; }
      #orbitnote .note_holder .note_type .sign {
        display: block;
        font-size: 40px;
        width: 40px;
        height: 40px;
        padding: 10px;
        border-radius: 30px;
        text-align: center; }
        #orbitnote .note_holder .note_type .sign.icon-ok {
          background-color: #5BB75B; }
        #orbitnote .note_holder .note_type .sign.icon-exclamation-sign {
          background-color: #DA4F49; }
        #orbitnote .note_holder .note_type .sign.icon-warning-sign {
          background-color: #FAA732; }
    #orbitnote .note_holder .note_message {
      color: #333;
      display: inline-block;
      vertical-align: middle;
      word-wrap: break-word;
      width: 240px;
      margin: 0 0 0 20px;
      font-size: 15px; }

/* Desktop Dialogue */
#orbitdiag {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 12;
  display: none; }
  #orbitdiag .tile {
    background-color: #000; }
  #orbitdiag .diag_holder {
    background-color: #000; }
    #orbitdiag .diag_holder .diag_holder_inner {
      width: 600px;
      margin: 200px auto 0 auto;
      position: relative;
      padding: 30px 0; }
      #orbitdiag .diag_holder .diag_holder_inner .diag_message {
        color: #fff;
        font-size: 18px;
        padding: 30px 0; }
      #orbitdiag .diag_holder .diag_holder_inner .diag_action {
        clear: both;
        text-align: right; }
      #orbitdiag .diag_holder .diag_holder_inner .diag_btn {
        display: inline-block;
        margin: 0 6px;
        text-align: center;
        font-size: 15px;
        line-height: 36px; }
        #orbitdiag .diag_holder .diag_holder_inner .diag_btn:hover {
          outline: solid 2px white; }

/* Tile */
.appname {
  font-size: 13px;
  line-height: 30px;
  width: 100%;
  height: 30px;
  padding: 0 12px;
  overflow: hidden;
  cursor: default;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  white-space: nowrap; }
  [data-sizex="1"] .appname, .w1.h1 .appname {
    text-align: center; }
  [data-sizey="2"] .appname {
    font-size: 21px; }
  .hh2 .appname {
    position: relative;
    width: auto;
    padding: 0; }
  .fullsize .appname {
    display: none; }

.appicon {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  position: relative; }
  [data-sizex="1"] .appicon, .w1.h1 .appicon {
    margin-top: 24px; }
  #sections .appicon {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 6px; }

.appholder {
  position: relative;
  z-index: 2;
  padding: 12px;
  padding-bottom: 30px;
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .fullsize .appholder {
    position: absolute;
    padding: 0;
    left: 0;
    top: 0; }

.dtitle {
  font-size: 30px;
  line-height: 60px;
  float: left;
  margin: 0 12px 0 0;
  position: relative;
  z-index: 9; }

.tile {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; }

.gridster ul {
  margin: -6px 0 0 -6px; }

.widget.gs_w {
  cursor: move;
  overflow: hidden; }

.gs_w.dragging {
  -webkit-transform: scale(0.92);
  -moz-transform: scale(0.92);
  transform: scale(0.92); }

/* header drop menu */
.sdm_mdr .sdm_o {
  top: 36px; }

/* Setting Page */
.theme_list .ssl_item, .stock_wallpaper .ssl_item {
  display: inline-block;
  vertical-align: top;
  margin: 0 0 12px 0;
  padding: 6px 0px;
  width: 132px;
  text-align: center;
  cursor: pointer; }

.theme_thumb, .stock_wallpaper img {
  border: solid 1px white;
  width: 120px;
  margin: 0 auto; }

.theme_thumb img, .stock_wallpaper img {
  display: block; }

.theme_name {
  font-size: 15px;
  padding: 8px 6px;
  display: block; }

.theme_preview {
  width: 528px;
  line-height: 36px;
  font-size: 15px; }

.theme_plate {
  overflow: hidden; }
  .theme_plate > div {
    float: left;
    margin-right: 12px; }
  .theme_plate > div:first-child {
    margin-right: 48px; }
  .theme_plate .g_sep {
    margin-right: 0; }

#color_input th {
  vertical-align: bottom; }

.stock_wallpaper .ssl_item {
  margin-bottom: 6px; }

.s_title {
  font-size: 21px;
  line-height: 60px;
  text-align: left; }
  .s_title.size_large {
    font-size: 36px; }
  .s_title.size_small {
    font-size: 15px;
    line-height: 2em; }

.s_subtitle {
  font-size: 15px;
  line-height: 1.5em;
  color: #ccc;
  padding: 12px 0 24px 0; }

.s_action {
  padding: 24px 0;
  margin-top: 12px;
  overflow: hidden;
  border-top: solid 1px #eeeeee; }
  .s_action .setting_btn {
    margin-left: 12px; }

.setting_btn {
  display: block;
  float: right;
  font-size: 15px;
  line-height: 36px;
  text-align: center;
  border: 0; }

/* Apps Manager */
#app_info {
  float: left;
  width: 420px;
  height: 516px;
  margin-right: 36px; }

  #app_info .app_info_header {
    height: 120px;
    margin: -12px -12px 12px -12px;
    position: relative;
    background-color: #f7f7f7;
    -webkit-box-sizing: border-box;
    /* webkit */
    -khtml-box-sizing: border-box;
    /* konqueror */
    -moz-box-sizing: border-box;
    /* firefox */
    -ms-box-sizing: border-box;
    /* ie */
    box-sizing: border-box;
    /* css3 */ }
    #app_info .app_info_header > * {
      height: 100%; }
    #app_info .app_info_header .app_info_icon {
      display: block;
      margin: 0 auto;
      margin-top: 30px;
      -webkit-box-sizing: border-box;
      /* webkit */
      -khtml-box-sizing: border-box;
      /* konqueror */
      -moz-box-sizing: border-box;
      /* firefox */
      -ms-box-sizing: border-box;
      /* ie */
      box-sizing: border-box;
      /* css3 */ }
    #app_info .app_info_header .app_info_name {
      display: inline-block;
      vertical-align: middle;
      font-size: 2em;
      width: 300px;
      word-wrap: break-word; }
    #app_info .app_info_header .panel_close {
      position: absolute;
      right: 12px;
      top: 12px;
      font-size: 20px; }
  #app_info .app_info_list {
    line-height: 1.5em;
    overflow: hidden; }
    #app_info .app_info_list label {
      color: #aaaaaa; }

.search_result {
  overflow: hidden; }

.grp {
  height: 528px;
  float: left; }

.appgroup {
  float: left; }

.g_col {
  height: 516px;
  float: left; }

.g_col_w1 {
  width: 132px; }

.g_col_w2 {
  width: 264px; }

.ui-sortable-placeholder {
  background-color: rgba(0, 0, 0, 0.2);
  visibility: visible !important; }

/* list item */
.list_t_item {
  overflow: hidden; }

.list_t_title {
  padding-bottom: 6px;
  color: #000;
  font-size: 15px;
  line-height: 1.3em; }

.list_t_des {
  line-height: 1.5em;
  color: #999;
  margin-bottom: 4px;
  font-size: 13px; }

.list_item_function {
  position: absolute;
  right: 0;
  bottom: -30px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: right;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .list_item_function a {
    display: inline-block;
    vertical-align: top;
    margin-left: 4px;
    padding: 0 6px;
    font-size: 11px;
    -webkit-text-size-adjust: none; }
    .list_item_function a :first-child {
      margin-left: 0; }
  .datalist_item:hover .list_item_function {
    bottom: 0; }

/* App */
.app_frame {
  margin: 48px 96px 48px 156px;
  min-width: 800px;
  min-height: 588px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12; }
  .app_frame .app_holder {
    background-color: #fff;
    position: absolute;
    width: 100%; }
  .app_frame #header .icon-remove {
    display: block;
    float: right;
    line-height: 60px;
    font-size: 20px;
    cursor: pointer; }

/*Tooltip popup */
.desktop_toolpopup {
  position: absolute;
  z-index: 10px;
  display: none;
  padding: 12px;
  cursor: default;
  background-color: #fff; }
  .desktop_toolpopup span {
    margin: 3px 0 3px 0; }