.main-section{
    background: url('../img/magic.jpg') 0em 0em / cover no-repeat;
}
.designer #main-panel {
    border: solid 1px #ccc;
}
/*** DEMO SKIN ***/
.designer .sf-menu {
  float:      left;
  margin-bottom:  1em;
  padding-left: 25px;
  padding-right: 25px;
  width: 750px;
  background-color: #ececec;
}
.designer .sf-menu a {
  border-left:  1px solid #fff;
  padding:     .55em 1em;
  text-decoration:none;
}
.designer .sf-menu li.last a {
  border-right:  1px solid #fff;
}
.designer .sf-menu li li a {
  border-top:    1px solid #fff;
  padding:     .3em 2em .3em 1em;
}
.designer .sf-menu a, .designer .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
  color:      #302314;
}
.designer .sf-menu li {
  background:    #ececec;
}
.designer .sf-menu li li {
  background:    #ececec;
  opacity: 0.95;       /* modern browser */  
  -moz-opacity: 0.95;  /* older Mozilla browser */  
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; /* IE8 in Standard Compliant Mode */  
  filter:alpha(opacity=95); /* IE5.x -7.0 */ 
}
.designer .sf-menu li li li {
  background:    #ececec;
}
.designer .sf-menu li:hover, .designer .sf-menu li.sfHover,
.designer .sf-menu a:focus, .designer .sf-menu a:hover, .designer .sf-menu a:active {
  color: #333;
  background: #f3f3f3;
  outline:    0;
}

ul.nav-tabs > li.active > a, ul.nav-tabs > li.active > a:hover, ul.nav-tabs > li.active > a:focus {
    background-color: #dddddd;
}

.btn, .btn span{
    color: #FFF;
}

.preview img {
    max-height: 50px;
}
.image-placeholder {
    display: inline-block;
    margin: 20px 0px;
    text-align: center;
}
.text-placeholder {
    display: inline-block;
    margin: 20px 0px;
    text-align: left;
}
ul.item-list {
    height: 300px;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
ul.item-list li {
    float: left;
    display:block;
    list-style-type: none;
    width: 200px;
    height: 350px;
}
.selectable li.ui-selectee { 
    background: #fff;
    border: solid 1px #ccc;
}
.selectable li.ui-selected { 
    background: #fde8b6; color: white;
    border: solid 1px #fdc33d;
}
.selectable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
.selectable li { 
    margin: 3px; 
    padding: 10px; 
    float: left;
    width: 75px;
    font-size: 4em; 
    text-align: center; 
}
.errorlist { 
    list-style-type: none; 
    margin: 5px 0px; 
    padding: 0px; 
}
.errorlist li {
    color: red;
    background-color: #FFF3F3;
    padding: 3px;
}

.helptext {
    display: block;
    color: red;
}

.error {
    color: #f00;
    border-color: #d47e7e;
}

fieldset label {
    font-weight: normal;
    color: #aaa;
    width: 200px;
}

#talisman-headline .label {
    font-size: 120%;
    line-height: 1.5;
    background-color: #ccc;
}

.talisman-label {
    text-align: right;
    margin-right: 1em;
}

.talisman-input {
    width: 9em;
    padding: .4em .3em .2em .6em;
    background-color: #eee;
    color: #777;
    border: none;
}

#agreement-field label {
    width: auto;
}

#result-panel {
    margin-top: 1em;
}

#preview-box {
    min-height: 150px;
    padding: 2em 0em;
    text-align: center;
}

#preview-img {
    width: 100%;
    max-width: 100%;
}

.preview-marker {
    color: #ccc;
    padding: 0.3em;
    font-size: 1em;
}

.model-item {
    height: 15em;
}

.preview-marker .glyphicon {
    color: #ccc;
}

.symbol-selected {
    background-color: #fff;
    opacity: 0.3;
    text-decoration: none;
}

#selected-theme-text {
    padding: 0.5em;
    margin-top: 1em;
}

#selected-symbol-img {
    margin-top: 1em;
}

#design-change-form ul li label {
    width: 100%;
}

.carousel-inner {
  overflow: visible;
}
.carousel-inner > .item {
    color: #777;
    height: auto;
    overflow: visible;
}

.tab-content {
    padding-top: 1em;
}

.carousel-caption {
  position: static;
}

.new, .inprogress {
    color: #593101; background-color: #ffefdb;
}

.change_request {
    color: #593101; background-color: #ffefdb;
}
.decision_needed {
    color: #593101; background-color: #ffefdb;
}
.rejected {
    color: #740e08; background-color: #ffeceb; 
}
.clarification {
    color: #744408; background-color: #fff6eb; 
}
.accepted {
    color: #234f00; background-color: #e8ffd5; 
}
.production {
    color: #eee7f3; background-color: #4b0082; 
}
.complete {
    color: #eaf5ff; background-color: #1e90ff; 
}
.user_edit {
    color: #bd6529; background-color: #f8dac7;
}

.label-primary-zodiac {
    position: fixed;
    top: 30%;
    left: 77%;
}

.label-primary-indian {
    position: fixed;
    top: 7%;
    left: 77%;
}

.label-primary-personal {
    position: fixed;
    top: 5%;
    left: 33%;
}

.label-primary-chinese {
    position: fixed;
    top: 31%;
    left: 33%;
}

.label-secondary-trigramm {
    position: fixed;
    top: 36%;
    left: 58%;
}

.label-secondary-ascendent {
    position: fixed;
    top: 18%;
    left: 83%;
}

.label-secondary-planet {
    position: fixed;
    top: 0%;
    left: 60%;
}

.label-secondary-kua {
    position: fixed;
    top: 18%;
    left: 34%;
}

.label-hidden-name {
    position: fixed;
    top: 36%;
    left: 58%;
}

.label-hidden-solarsystem {
    position: fixed;
    top: 18%;
    left: 83%;
}

.label-hidden-birthplace {
    position: fixed;
    top: 0%;
    left: 60%;
}

.label-hidden-element {
    position: fixed;
    top: 18%;
    left: 24%;
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;

  position: relative;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ccc;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.spinner-square {
  width: 40px;
  height: 40px;
  background-color: #eee;

  -webkit-animation: sk-rotateplane 2s infinite ease-in-out;
  animation: sk-rotateplane 2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}