html, body {
    background-color:       #fff;
    font-family:            Helvetica, Arial, sans-serif;
    font-size:              10pt;
    color:                  #666;
    line-height:            1.5em;
    /*width:700px;*/
    /*margin: 1em auto;*/
    background:             url("/img/bck.jpg") repeat scroll 0 0 transparent;
    margin:                 0;
    padding:                0;
}

.inline-block {
    display:                inline-block;
    zoom:                   1;        
    *display:               block;    
}

.clearfix:after {
    content:                ".";
    display:                block;
    clear:                  both;
    visibility:             hidden;
    line-height:            0;
    height:                 0;
}
 
.clearfix {
    display:                inline-block;
}
 
html[xmlns] .clearfix {
    display:                block;
}
 
* html .clearfix {
    height:                 1%;
}

.wrapper {
    margin:                 0px auto;
    width:                  990px;    
    display:                block;
    clear:                  both;
    padding:                0 5px;    
}

.main {
    margin:                 15px auto;
    width:                  1000px;        
    background-color:       #FFF;
    -moz-box-shadow:        0px 0px 8px rgba(0,0,0,0.3);
    -khtml-box-shadow:      0px 0px 8px rgba(0,0,0,0.3);
    -webkit-box-shadow:     0px 0px 8px rgba(0,0,0,0.3);
    box-shadow:             0px 0px 8px rgba(0,0,0,0.3);
    display:                block;
}

.header {
    vertical-align:         top;
    height:                 90px;    
}

.footer {
    vertical-align:         middle;
    font-size:              25px;
    font-weight:            bold;
    padding-top:            35px;
    text-align:             center;
    color:                  #FFF;
    height:                 65px;
}

.header h1 {
    text-indent:            -10000px;
    /* default auf _de */
    background:             url('/img/timeyo_de.png') no-repeat;
    border-bottom:          0;  
    margin-left:            25px;
    width:                  780px;
}               

.header h1 a {
    vertical-align:         top;
    width:                  790px;
    display:                block;
    height:                 60px;
}

.lang-en h1 {
    background-image:       url('/img/timeyo_de.png');       
}


.header ul {
    
}

.header ul li {
    -webkit-transform:      rotate(-45deg); /* rotate the list item */
    -moz-transform:         rotate(-45deg); /* rotate the list item */
    transform:              rotate(-45deg); /* rotate the list item */
    width:                  80px;
    overflow:               hidden;	
    margin:                 10px -30px;
    padding:                5px 5px 5px 18px;
    background:             #7f9db9;
    text-align:             left;
    color:                  #fff;        
    white-space:            nowrap;    
}

.header ul li a {
    text-decoration:        none;
    display:                block;
    color:                  #fff;
}

.header ul li.l1 {
    background:             rgba(131,178,51,0.65);
}

.header ul li.l1:hover {
    background:             rgb(131,178,51);
}

.header ul li.l2 {
    background:             rgba(196,89,30,0.65);
}

.header ul li.l2:hover {
    background:             rgb(196,89,30);
}

.header ul li.l3 {
    background:             rgba(65,117,160,0.65);
}

.header ul li.l3:hover {
    background:             rgb(65,117,160);
}

span.todoyo {
    font-weight:            bold;
}

h1, h2 {
    border-bottom:          1px #369 solid;
    line-height:            1em;
    margin:                 5px 0px;
}

h1 {
    border-bottom:          2px #369 solid;
}

h3 {
    margin:                 2px 0px;
}

img {
    vertical-align:         text-bottom;
    border:                 0;
}

img {
    /*behavior: url(/css/iepngfix.htc);*/
}

h1 img, h2 img, h3 img {
    vertical-align:         middle;
}

/* Left Column
-----------------------------------------------------------------------------*/
#col-left {
    width:                  170px;
    float:                  left;
    margin-top:             10px;
    padding-right:          30px;
}

#col-middle {
    width:                  540px;
    float:                  left;
}

#col-right {
    width:                  230px;
    float:                  left;
    margin-top:             10px;
    padding-left:           20px;
}

/* List Navigation */
.list-item {
    clear:                  both;
}

.list-item .num-items {
    float:                  right;
    font-weight:            bold;
}

.list-item .item-title {
    font-weight:            bold;
}

.list-item .item-title.active {
    color:                  #999;
}

.droppable-active {
    background-color:       #dfd;
}

.droppable-hover {
    background-color:       green;
}

.droppable-hover-light {
    background-color:       #cfc;
}


.list-sort {
    display:                none;
    font-size:              8pt;
    font-weight:            normal;
}

label {
    font-weight:            normal;
    width:                  100px;    
    display:                inline-block;
    zoom:                   1;        
    *display:               block;        
}

#closed-times h3 {
    color:                  #369;
}

#closed-times h4 {
    color:                  #369;
    margin:                 5px 0;
    margin-left:            15px;
    font-style:             italic;
}

#closed-times div.day {
    margin-left:            30px;
}

#heading-time-add {
/*    text-align: center;*/
}

.time {
    /*padding: 2px;*/
    clear:                  both;
    cursor:                 pointer;
    margin-left:            30px;
}

.new {
    background-color:       #FFF9DF;
}

.pause {
    clear:                  both;
    margin-left:            30px;
    color:                  #aaa;
    font-style:             italic;
}

.time .options {
    display:                none;
}

.time .expire {
    line-height:            16px;
    font-size:              10px;
}

.time .expired {
    color:                  red;
}

.time .title {
    font-weight:            normal;
}

.time .description {
    display:                none;
    background-color:       #eee;
    padding:                3px;
    margin-left:            16px;
    margin-right:           60px;
    cursor:                 default;
}

.time .edit {
    display:                none;
    padding:                3px;
    margin-left:            16px;
    margin-right:           60px;
}

.time:hover {
    /*background-color: #eee;*/
}

.flash {
    background-color:       #EFF7FF;
    font-weight:            bold;
    border:                 1px #369 dashed;
    padding:                5px;
}

form,
#form-edit,
#form-print,
#form-share,
#form-publish,
#form-delete {
    padding:                3px;
    margin:                 0;
    background-color:       #eee;
}

form.form-time-edit {
    margin-left:            30px;
    padding:                5px 5px 5px 10px;
    margin-bottom:          5px;
}

.highlight {
    background-color:       #f3f3f3;
    margin:                 0;
    padding:                3px;
}

a {
    text-decoration:        none;
    color:                  #369;
    font-weight:            normal;
}

ul {
    list-style-image:       url(/img/icons/bullet_add.png);
    margin-top:             0;
    margin-bottom:          0;
}

li {
    font-weight:            normal;
    font-size:              10pt;
}

input, textarea {
    border:                 1px #999 solid;
    font-size:              10pt;
    color:                  #333;
    font-family:            Helvetica, Arial, sans-serif;
}

select {
    font-size:              10pt;
    color:                  #333;
    font-family:            Helvetica, Arial, sans-serif;
}

input.date {
    background:             #FFF url('/img/icons/date.png') no-repeat right top;
    width:                  70px;
    padding-right:          20px;
}

input.timepicker {
    width:                  40px;
    background:             #FFF url('/img/icons/time.png') no-repeat right top;
    padding-right:          20px;    
}

/* Calendar */
#calendar .fc-event,
#calendar .fc-agenda .fc-event-time,
#calendar .fc-event a {
    border-style:           solid;
    border-color:           #eee;
    background-color:       #eee;
    color:                  #369;
}

#calendar .summary,
#calendar .fc-agenda .summary .fc-event-time,
#calendar .summary a {
    background-color:       #ffffff;
    border-color:           #ffffff; 
    font-weight:            bold;
    text-align:             center;
    font-size:              12px;
    color:                  #369;
}

#calendar .summary-positive,
#calendar .fc-agenda .summary-positive .fc-event-time,
#calendar .summary-positive a {
    color:                  green;
}

#calendar .summary-negative,
#calendar .fc-agenda .summary-negative .fc-event-time,
#calendar .summary-negative a {
    color:                  red;
}

.fc-event-time {
    white-space:            nowrap;
}

.text-grey {
    color:                  #666666;
}

.background-grey {
    background:             #f2f5f6; /* Old browsers */
    background:             -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
    background:             -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
    background:             -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
    background:             -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera11.10+ */
    background:             -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
    filter:                 progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
    background:             linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
}

.lastClosedTime {
    margin-top:             15px; 
    margin-bottom:          15px;    
    padding:                5px;
    border:                 5px solid #c4c8cc;
}

.border-radius {
    -moz-border-radius:     10px;
    -webkit-border-radius:  10px;    
    border-radius:          10px;
    padding:                15px;
}
.box-shadow {
    -moz-box-shadow:        5px 5px 5px #CCC;
    -webkit-box-shadow:     5px 5px 5px #CCC;
    box-shadow:             5px 5px 5px #CCC;    
}

.lastClosedTime {
    position:               relative;
}

.lastClosedTime form {
    background:             none;
}

.action-button {
    -moz-border-radius:     75px;
    -webkit-border-radius:  75px;    
    border-radius:          75px;    
    text-align:             center;
    vertical-align:         middle;
    margin:                 auto; 
    width:                  150px;
    height:                 150px;
    font-size:              20pt;
    line-height:            150px;
    color:                  #FFF;    
    -moz-box-shadow:        -3px -3px 10px 2px rgba(0, 0, 0, 0.3) inset, 0 0 0 15px rgba(255, 255, 255, 0.6) inset, 0 0 0 1px rgba(0, 0, 0, 0.5), 2px 2px 10px rgba(0, 0, 0, 0.6);    
    -webkit-box-shadow:     -3px -3px 10px 2px rgba(0, 0, 0, 0.3) inset, 0 0 0 15px rgba(255, 255, 255, 0.6) inset, 0 0 0 1px rgba(0, 0, 0, 0.5), 2px 2px 10px rgba(0, 0, 0, 0.6);    
    -o-box-shadow:          -3px -3px 10px 2px rgba(0, 0, 0, 0.3) inset, 0 0 0 15px rgba(255, 255, 255, 0.6) inset, 0 0 0 1px rgba(0, 0, 0, 0.5), 2px 2px 10px rgba(0, 0, 0, 0.6);        
    box-shadow:             -3px -3px 10px 2px rgba(0, 0, 0, 0.3) inset, 0 0 0 15px rgba(255, 255, 255, 0.6) inset, 0 0 0 1px rgba(0, 0, 0, 0.5), 2px 2px 10px rgba(0, 0, 0, 0.6);        
}

.action-button a {
    color:                  #FFF;    
}

.action-button.start {
    border:                 1px green solid;
    background:             #9dd53a; /* Old browsers */
    background:             -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
    background:             -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
    background:             -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
    background:             -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera11.10+ */
    background:             -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
    filter:                 progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
    background:             linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */

}

.action-button.stop {
    border:                 1px red solid;
    background:             #f3c5bd; /* Old browsers */
    background:             -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6+ */
    background:             -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200)); /* Chrome,Safari4+ */
    background:             -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10+,Safari5.1+ */
    background:             -o-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Opera11.10+ */
    background:             -ms-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* IE10+ */
    filter:                 progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */
    background:             linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C */    
}

.close-button {
    /* border:                 3px #C4C8CC solid; */
    border:                 3px #000000 solid;
    -moz-border-radius:     20px;
    -webkit-border-radius:  20px;
    border-radius:          20px;
    text-align:             center;
    vertical-align:         middle;
    margin:                 auto;
    position:               absolute;
    background-color:       #fff;
    right:                  -15px;
    top:                    -15px;
    width:                  20px;
    height:                 20px;
    color:                  #000000;
    font-size:              16px;
    font-weight:            bold;
    display:                block;
}

.countdown-wrapper {
    width:                  300px;
    height:                 120px;
    vertical-align:         middle;
    margin-top:             25px;
}

.hasCountdown {
    margin-left:            0;
    margin-bottom:          10px;
}

.webkit-notification {
    display:                none;
    cursor:                 pointer;
    font-weight:            bold;
}

/* Chart */
#chartHolder, #chart {
    width: 540px;
    height: 400px;
}