body {padding: 0; color: #888;}
.page-wrapper {margin-top: 0px; overflow: hidden;}
.page-content, .footer-content {padding:0px 0; padding-bottom: 30px;}
.head-content {padding-top: 80px;}
.container {padding: 0;}


.navbar-fixed-top {padding: 20px 0; height: auto; background-color: rgba(255, 255, 255, 0.5); border: none; margin: 0;}
.navbar-fixed-top .btn{font-size: 16px; font-weight: bold; padding: 0 15px;}
.navbar-default .navbar-brand {padding: 0; margin: 0;}
.navbar-fixed-top .navbar-collapse {width: 100%;}

.logo {}
.logo .path { fill: #fff;}
.logo {width: 130px;height: 140px;}

.footer-content {margin-top: 60px; background-color: #555; padding: 30px;}
.footer-content .download{padding: 30px;text-align: center;border-bottom: 1px solid #666;width: 100%;margin-bottom: 30px;}
.footer-content .download .glyphicon{font-size: 40px;color: #FFF;}
.footer-content .download .btn {border: 0;}



.jumbotron {padding:20px 15px;border: none; background: none; margin-bottom: 0;} 
.jumbotron .btn-group .btn {background-color: transparent;border: 1px solid transparent; font-size: 22px; font-weight: bold; padding: 15px 30px; border: 0; }
.jumbotron .btn-group .btn .glyphicon {color: rgba(0,0,0,0.2); margin-right: 10px;font-size: 20px;}
.jumbotron .btn-group .btn:hover .glyphicon {color: #fff;}





.calendar-view .sample-calendar { margin: 30px 0;}


.range-cal-trigger{ border: 0;  height: 100%; background-color: transparent;}
.range-cal-trigger .glyphicon {} 

.themes-group .btn {  border: 0; margin: 0 0px;  padding: 10px 15px; height: 10px; position: relative;}
.themes-group .btn .glyphicon {font-size: 14px; line-height: 16px; opacity: .0; display: none; color: rgba(255,255,255,.8); margin: 0; padding: 0;margin-right: 10px; display: none; }
.themes-group  .btn .title {font-weight: 100;font-size: 14px; float: left;}
.themes-group .btn .half-color { right: 0; top: 0; width: 50%;height: 100%; position: absolute; background-color: #f9f9f9;}
.themes-group .btn.selected  {border:  1px solid rgba(255,255,255,0.5);}
.themes-group .btn.selected .glyphicon {color: #fff; opacity: 1.0; margin: 0; display: none;float: left; margin-right: 5px; margin-top: -10px; height: 20px;}
.themes-group .btn.selected .title {display: block;}
.themes-group .btn.selected .half-color { opacity: 0.5;}
.themes-group .colors-info .title{ font-weight: bold; font-size: 16px; display: block; clear: both; margin-bottom: 5px; opacity: 0.5; }
.themes-group .colors-info .subtitle{ font-weight: 100; font-size: 16px; width: 100px;display: block; clear: both;}
.themes-group .colors-info .title .glyphicon {margin-right: 5px; opacity: 0.5;}


.page-content .calendar-values { display: none;}



.calendar-values {margin-top: 30px;margin-bottom: 30px;}
.calendar-values .col { text-align: center; color: #888;}
.calendar-values > .col-md-3,.calendar-values >.col-md-4 { border-right: 1px solid #eee;}
.calendar-values .col.last { border: 0;}
.calendar-values .col .glyphicon {font-size: 40px;padding: 5px 0;margin-bottom: 5px;}
.calendar-values .col .glyphicon-comment {margin-top: 0;font-size: 63px;padding-top: 0;}
.calendar-values .col .title {width: 100%;text-align: center;font-size: 20px;font-weight: bold;display: block;clear: both;text-transform: uppercase;}
.calendar-values .col .subtitle {width: 100%;text-align: center;font-size: 12px;font-weight: bold;display: block;clear: both;text-transform: uppercase;}
.calendar-values .col .value {width: 100%; text-align: center; font-size: 40px; font-weight: bold; display: block; clear: both}
.calendar-values .col .label {width: 100%;text-align: center; font-size: 14px;font-weight: bold; display: block; clear: both; text-transform: uppercase; color: #666  }
.calendar-values .col .label small { margin-left: 5px;color: #888; font-weight: 100}


#how .pre {border: 1px solid #eee; background-color: transparent;}





.modal {}
.modal .modal-content {box-shadow: none; border: 0; margin: 0; background-color: #f9f9f9;}
.modal .modal-footer {box-shadow: none; border: 0; margin: 0;}
.modal .btn-close {position: absolute;top: 0;right: 0;border: 0;margin: 15px;}
.modal .calendar-values { padding: 20px 0; margin: 0px;} 
.modal .range-calendar {padding: 10px 0;}
.modal .calendar-values .col .glyphicon {font-size: 22px;}
.modal .calendar-values .col .glyphicon-comment {font-size: 22px;}
.modal .calendar-values .col .title {font-size: 12px;}
.modal .calendar-values .col .subtitle {font-size: 12px;}
.modal .calendar-values .col .value {font-size: 30px;}
.modal .calendar-values .col .label {font-size: 14px;}


#langs {margin-left: 10px;}
#langs .dropdown-toggle {color: #666;}

.colorization-group { margin-top: 15px;}
.colorization-group .btn {padding: 15px; border: 0; border-radius: 1px;}
.colorization-group .btn .glyphicon {font-size: 14px; line-height: 16px; opacity: .0; display: none; color: rgba(255,255,255,.8); margin: 0; padding: 0;margin-right: 10px; display: none; }
.colorization-group .btn .title {font-weight: 100;font-size: 14px; float: left;}
.colorization-group .btn .half-color { right: 0; top: 0; width: 50%;height: 100%; position: absolute; background-color: #f9f9f9;}
.colorization-group .btn.selected  {border:  1px solid rgba(255,255,255,0.5);}
.colorization-group .btn.selected .glyphicon {color: #fff; opacity: 1.0; margin: 0; display: none;float: left; margin-right: 5px; margin-top: -10px; height: 20px;}
.colorization-group .btn.selected .title {display: block;}
.colorization-group .btn.selected .half-color { opacity: 0.5;}
.colorization-group .colors-info .title{ font-weight: bold; font-size: 16px; display: block; clear: both; margin-bottom: 5px; opacity: 0.5; }
.colorization-group .colors-info .subtitle{ font-weight: 100; font-size: 16px; width: 100px;display: block; clear: both;}
.colorization-group .colors-info .title .glyphicon {margin-right: 5px; opacity: 0.5;}




.section {padding-bottom: 15px; margin-bottom: 15px;clear: both; display: block;}
.section .section-title {color: #666; margin-bottom: 15px;}
.section .content {margin-bottom: 15px;}
.section .code {padding: 30px 15px;background-color: #333; color: #f9f9f9; width: 100%;display: block;border-radius: 0; line-height: 25px;  display: block;clear: both; margin-bottom: 10px;}
.section .code .sample-title {clear: both;margin-bottom: 15px;width: 100%;display: block;line-height: 60px;font-size: 25px;font-weight: bold;}
.section .range-calendar {margin-top: 15px;}


p {font-size: 22px;}