@import url(https://fonts.googleapis.com/css?family=Raleway:300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic);

body {
    background-color: #f3f3f3;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
}

input, textarea, select, button {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}

#body {
    margin: 30px auto;
    width: 800px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 50px #ccc;
    border: 1px solid #c7c7c7;
    position: relative;
}

#logo {
    margin: 20px 0 15px 0;
    display: block;
}

#time-header .my-btn {
    margin: 2px;
}

.timer-display, .timer-display input {
    font-size: 130px;
    line-height: 130px;
}

.timer-display input[type="text"] {
    border: none;
    /*box-shadow: none;*/
    width: 150px;
    /*height: 120px;*/
    text-align: center;
    color: #0099dc;
    text-shadow: #999 1px 1px 5px;
}

.timer-display.editing input[type="text"] {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
}

.timer-display.editing input[type="text"]:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted  \9;
    /* IE6-9 */

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

.timer .days {
    font-size: 30px;
}

.timer .days input[type="text"] {
    line-height: 30px;
    width: 70px;
    font-size: 30px;
    text-shadow: #aaa 0 0 2px;
}

.timer table .timer-controls {
    padding: 8px 0 0 10px;
    width: 35px;
    opacity: 0.5;
    line-height: 20px;
    transition: opacity 0.3s;
}

.timer table .timer-controls .my-btn {
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 24px;
    font-weight: normal;
}

.timer table .timer-controls:hover {
    width: 35px;
    opacity: 1;
    transition: opacity 0.3s;
}

/*.timer table .controls:hover {*/
/*opacity: 1;*/
/*}*/

.timer {
    padding: 20px 0;
    color: #0099dc;
}

.timer table {
    margin: 0 auto;
}

.my-btn {
    display: inline-block;
    background-color: #0099dc;
    height: 20px;
    line-height: 20px;
    padding: 8px;
    margin: 4px;
    text-align: center;
    cursor: pointer;
    color: white;
    text-decoration: none;
}

.my-btn-small {
    padding: 1px 4px;
}

.my-btn.setup-btn {
    background-color: #00bbde;
    margin: 1px 3px 0 3px;
}

.times-setup {
    margin-top: -2px;
    border-top: 2px solid #00bbde;
    padding: 10px;
    background-color: #eef7ff;
    color: #555;
}

.times-setup input {
    font-size: 16px;
}

.timer .description input {
    font-size: 20px;
    line-height: 20px;
    border: 0;
    text-align: center;
    width: 100%;
    color: #999;
}

.timer .description ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #ddd;
}

.timer .description :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #ddd;
}

.timer .description ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #ddd;
}

.timer .description :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #ddd;
}

.my-btn:hover {
    color: white;
}

.my-warning {
    background-color: #fbb450;
}

.my-error {
    background-color: #fb6450;
}

.my-error-box {
    text-align: center;
    padding: 10px;
    color: white;
    text-shadow: #999 1px 1px 2px;
}

.my-info-box {
    background-color: #9ed8f6;
    text-align: center;
    padding: 10px;
    color: #555;
    text-shadow: #fff 1px 1px 2px;
}

.my-success {
    background-color: #62c462;
}

.my-btn [class^="icon-"],
.my-btn [class*=" icon-"] {
    margin: 1px 3px 0 3px;
}

.my-btn-disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

input.num {
    text-align: right;
}

input.small {
    width: 40px;
}

.timer-progress {
    width: 100%;
    border-collapse: collapse;
}

.timer-start, .timer-end {
    font-size: 11px;
    line-height: 11px;
    color: #0099dc;
    width: 5px;
    white-space: nowrap;
}

.progress {
    margin: 0 10px;
    height: 2px;
    background-color: #f7f7f7;
}

.bar {
    background-color: #0099dc;
    height: 2px;
}

.setup-timer h2 {
    text-align: center;
}

.setup-timer {
    color: #555;
}

.setup-timer th {
    font-weight: normal;
}





[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    *margin-right: .3em;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
}

.icon-white {
    background-image: url("../img/glyphicons-halflings-white.png");
}

.icon-glass {
    background-position: 0 0;
}

.icon-music {
    background-position: -24px 0;
}

.icon-search {
    background-position: -48px 0;
}

.icon-envelope {
    background-position: -72px 0;
}

.icon-heart {
    background-position: -96px 0;
}

.icon-star {
    background-position: -120px 0;
}

.icon-star-empty {
    background-position: -144px 0;
}

.icon-user {
    background-position: -168px 0;
}

.icon-film {
    background-position: -192px 0;
}

.icon-th-large {
    background-position: -216px 0;
}

.icon-th {
    background-position: -240px 0;
}

.icon-th-list {
    background-position: -264px 0;
}

.icon-ok {
    background-position: -288px 0;
}

.icon-remove {
    background-position: -312px 0;
}

.icon-zoom-in {
    background-position: -336px 0;
}

.icon-zoom-out {
    background-position: -360px 0;
}

.icon-off {
    background-position: -384px 0;
}

.icon-signal {
    background-position: -408px 0;
}

.icon-cog {
    background-position: -432px 0;
}

.icon-trash {
    background-position: -456px 0;
}

.icon-home {
    background-position: 0 -24px;
}

.icon-file {
    background-position: -24px -24px;
}

.icon-time {
    background-position: -48px -24px;
}

.icon-road {
    background-position: -72px -24px;
}

.icon-download-alt {
    background-position: -96px -24px;
}

.icon-download {
    background-position: -120px -24px;
}

.icon-upload {
    background-position: -144px -24px;
}

.icon-inbox {
    background-position: -168px -24px;
}

.icon-play-circle {
    background-position: -192px -24px;
}

.icon-repeat {
    background-position: -216px -24px;
}

.icon-refresh {
    background-position: -240px -24px;
}

.icon-list-alt {
    background-position: -264px -24px;
}

.icon-lock {
    background-position: -287px -24px;
}

.icon-flag {
    background-position: -312px -24px;
}

.icon-headphones {
    background-position: -336px -24px;
}

.icon-volume-off {
    background-position: -360px -24px;
}

.icon-volume-down {
    background-position: -384px -24px;
}

.icon-volume-up {
    background-position: -408px -24px;
}

.icon-qrcode {
    background-position: -432px -24px;
}

.icon-barcode {
    background-position: -456px -24px;
}

.icon-tag {
    background-position: 0 -48px;
}

.icon-tags {
    background-position: -25px -48px;
}

.icon-book {
    background-position: -48px -48px;
}

.icon-bookmark {
    background-position: -72px -48px;
}

.icon-print {
    background-position: -96px -48px;
}

.icon-camera {
    background-position: -120px -48px;
}

.icon-font {
    background-position: -144px -48px;
}

.icon-bold {
    background-position: -167px -48px;
}

.icon-italic {
    background-position: -192px -48px;
}

.icon-text-height {
    background-position: -216px -48px;
}

.icon-text-width {
    background-position: -240px -48px;
}

.icon-align-left {
    background-position: -264px -48px;
}

.icon-align-center {
    background-position: -288px -48px;
}

.icon-align-right {
    background-position: -312px -48px;
}

.icon-align-justify {
    background-position: -336px -48px;
}

.icon-list {
    background-position: -360px -48px;
}

.icon-indent-left {
    background-position: -384px -48px;
}

.icon-indent-right {
    background-position: -408px -48px;
}

.icon-facetime-video {
    background-position: -432px -48px;
}

.icon-picture {
    background-position: -456px -48px;
}

.icon-pencil {
    background-position: 0 -72px;
}

.icon-map-marker {
    background-position: -24px -72px;
}

.icon-adjust {
    background-position: -48px -72px;
}

.icon-tint {
    background-position: -72px -72px;
}

.icon-edit {
    background-position: -96px -72px;
}

.icon-share {
    background-position: -120px -72px;
}

.icon-check {
    background-position: -144px -72px;
}

.icon-move {
    background-position: -168px -72px;
}

.icon-step-backward {
    background-position: -192px -72px;
}

.icon-fast-backward {
    background-position: -216px -72px;
}

.icon-backward {
    background-position: -240px -72px;
}

.icon-play {
    background-position: -264px -72px;
}

.icon-pause {
    background-position: -288px -72px;
}

.icon-stop {
    background-position: -312px -72px;
}

.icon-forward {
    background-position: -336px -72px;
}

.icon-fast-forward {
    background-position: -360px -72px;
}

.icon-step-forward {
    background-position: -384px -72px;
}

.icon-eject {
    background-position: -408px -72px;
}

.icon-chevron-left {
    background-position: -432px -72px;
}

.icon-chevron-right {
    background-position: -456px -72px;
}

.icon-plus-sign {
    background-position: 0 -96px;
}

.icon-minus-sign {
    background-position: -24px -96px;
}

.icon-remove-sign {
    background-position: -48px -96px;
}

.icon-ok-sign {
    background-position: -72px -96px;
}

.icon-question-sign {
    background-position: -96px -96px;
}

.icon-info-sign {
    background-position: -120px -96px;
}

.icon-screenshot {
    background-position: -144px -96px;
}

.icon-remove-circle {
    background-position: -168px -96px;
}

.icon-ok-circle {
    background-position: -192px -96px;
}

.icon-ban-circle {
    background-position: -216px -96px;
}

.icon-arrow-left {
    background-position: -240px -96px;
}

.icon-arrow-right {
    background-position: -264px -96px;
}

.icon-arrow-up {
    background-position: -289px -96px;
}

.icon-arrow-down {
    background-position: -312px -96px;
}

.icon-share-alt {
    background-position: -336px -96px;
}

.icon-resize-full {
    background-position: -360px -96px;
}

.icon-resize-small {
    background-position: -384px -96px;
}

.icon-plus {
    background-position: -408px -96px;
}

.icon-minus {
    background-position: -433px -96px;
}

.icon-asterisk {
    background-position: -456px -96px;
}

.icon-exclamation-sign {
    background-position: 0 -120px;
}

.icon-gift {
    background-position: -24px -120px;
}

.icon-leaf {
    background-position: -48px -120px;
}

.icon-fire {
    background-position: -72px -120px;
}

.icon-eye-open {
    background-position: -96px -120px;
}

.icon-eye-close {
    background-position: -120px -120px;
}

.icon-warning-sign {
    background-position: -144px -120px;
}

.icon-plane {
    background-position: -168px -120px;
}

.icon-calendar {
    background-position: -192px -120px;
}

.icon-random {
    width: 16px;
    background-position: -216px -120px;
}

.icon-comment {
    background-position: -240px -120px;
}

.icon-magnet {
    background-position: -264px -120px;
}

.icon-chevron-up {
    background-position: -288px -120px;
}

.icon-chevron-down {
    background-position: -313px -119px;
}

.icon-retweet {
    background-position: -336px -120px;
}

.icon-shopping-cart {
    background-position: -360px -120px;
}

.icon-folder-close {
    width: 16px;
    background-position: -384px -120px;
}

.icon-folder-open {
    width: 16px;
    background-position: -408px -120px;
}

.icon-resize-vertical {
    background-position: -432px -119px;
}

.icon-resize-horizontal {
    background-position: -456px -118px;
}

.icon-hdd {
    background-position: 0 -144px;
}

.icon-bullhorn {
    background-position: -24px -144px;
}

.icon-bell {
    background-position: -48px -144px;
}

.icon-certificate {
    background-position: -72px -144px;
}

.icon-thumbs-up {
    background-position: -96px -144px;
}

.icon-thumbs-down {
    background-position: -120px -144px;
}

.icon-hand-right {
    background-position: -144px -144px;
}

.icon-hand-left {
    background-position: -168px -144px;
}

.icon-hand-up {
    background-position: -192px -144px;
}

.icon-hand-down {
    background-position: -216px -144px;
}

.icon-circle-arrow-right {
    background-position: -240px -144px;
}

.icon-circle-arrow-left {
    background-position: -264px -144px;
}

.icon-circle-arrow-up {
    background-position: -288px -144px;
}

.icon-circle-arrow-down {
    background-position: -312px -144px;
}

.icon-globe {
    background-position: -336px -144px;
}

.icon-wrench {
    background-position: -360px -144px;
}

.icon-tasks {
    background-position: -384px -144px;
}

.icon-filter {
    background-position: -408px -144px;
}

.icon-briefcase {
    background-position: -432px -144px;
}

.icon-fullscreen {
    background-position: -456px -144px;
}

.logo-container {
    display: inline-block;
    margin: 15px 0 10px -5px;
}

.logo .online {
    color: #CC4800;
}

.logo {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 64px;
    line-height: 64px;
    margin: 5px;
}

.logo a {
    text-decoration: none;
}

.cursor-pointer {
    cursor: pointer;
}

footer {
    text-align: center;
}

a {
    color: #0099dc;
}

h1 {
    font-family: "Open Sans", Arial, sans-serif;
    color: #0099dc;
    font-weight: 300;
}

.small {
    font-size: 75%;
}

.faq dt {
    color: #0099dc;
    margin-top: 15px;
}

.setup-timer th {
    text-align: right;
}

.setup-timer th, .setup-timer td {
    padding: 5px;
}


#make-bookmark-block {
    position: absolute;
    top: -20px;
    left: 360px;
    width: 200px;
}

#make-bookmark-block .make-bookmark-info {
    position: absolute;
    top: 10px;
    left: 100px;
    width: 300px;
    background: lightyellow;
    padding: 10px;
    border: 1px solid #DDDD80;
    box-shadow: 0 0 20px #ccc;
}