@import "https://fonts.googleapis.com/css?family=Asap:400,700";



@import "https://fonts.googleapis.com/css?family=Inconsolata:400,700";



#full-clndr {



    background-color: #ebebeb;



    box-shadow: 0 4px 0 #343434;



    font-weight: 700;



    width: 100%;



}



#full-clndr .clndr-controls {



    background-color: #414141;



    color: white;



    padding: 14px;



    text-align: center;



}



#full-clndr .clndr-controls .clndr-previous-button {



    float: left;



    text-align: left;



}



#full-clndr .clndr-controls .clndr-next-button {



    float: right;



    text-align: right;



}



#full-clndr .clndr-controls .clndr-previous-button, #full-clndr .clndr-controls .clndr-next-button {



    -moz-user-select: none;



    cursor: pointer;



    width: 30px;



}



#full-clndr .clndr-controls .clndr-previous-button:hover, #full-clndr .clndr-controls .clndr-next-button:hover {



    opacity: 0.5;



}



#full-clndr .clndr-grid {



    border-right: 2px solid white;



    float: left;



    width: 65%;



}



#full-clndr .clndr-grid .days-of-the-week {



    background-color: #3883a3;



    width: 100%;



}



#full-clndr .clndr-grid .days-of-the-week .header-day {



    color: white;



    float: left;



    padding: 14px;



    text-align: center;



    width: 14.2857%;



}



#full-clndr .clndr-grid .days {



    width: 100%;



}



#full-clndr .clndr-grid .days .day, #full-clndr .clndr-grid .days .empty {



    background-color: #ebebeb;



    background-image: url("http://kylestetz.github.io/CLNDR/css/./triangle.svg");



    background-position: center center;



    background-size: cover;



    border-bottom: 2px solid white;



    color: #4f4f4f;



    float: left;



    height: 66px;



    padding: 24px 0;



    text-align: center;



    width: 14.2857%;



}



#full-clndr .clndr-grid .days .day.event .day-number, #full-clndr .clndr-grid .days .empty.event .day-number {



    border-bottom: 2px solid #3883a3;



    padding-bottom: 4px;



}



#full-clndr .clndr-grid .days .day.adjacent-month .day-number, #full-clndr .clndr-grid .days .empty.adjacent-month .day-number {



    opacity: 0.3;



}



#full-clndr .clndr-grid .days .today {



    background-color: white;



    background-image: none;



}



#full-clndr .event-listing {



    float: left;



    width: 35%;



}



#full-clndr .event-listing .event-listing-title {



    background-color: #71bbd2;



    color: white;



    letter-spacing: 1px;



    padding: 14px;



    text-align: center;



}



#full-clndr .event-listing .event-item {



    color: #4f4f4f;



    padding: 14px;



}



#full-clndr .event-listing .event-item-location {



    font-weight: 400;



}



.noselect {



    -moz-user-select: none;



}



#mini-clndr {



    font-family: Asap,Helvetica,Arial;



    margin: 0 auto;



    width:100%;



}



#mini-clndr .clndr {



    /*border-bottom: 7px solid #A39259;*/



    overflow: hidden;



}



#mini-clndr .clndr .controls {



    background-color: #A39259;



    color: white;



}



#mini-clndr .clndr .controls .clndr-previous-button, #mini-clndr .clndr .controls .clndr-next-button {



    -moz-user-select: none;



    cursor: pointer;



    display: inline-block;



    padding-bottom: 5px;



    padding-top: 5px;



    text-align: center;



    transition: background-color 0.5s ease 0s;



    width: 13%;



}



#mini-clndr .clndr .controls .clndr-previous-button:hover, #mini-clndr .clndr .controls .clndr-next-button:hover {



    background-color: #528b5e;



}



#mini-clndr .clndr .controls .month {



    display: inline-block;



    font-weight: 700;



    letter-spacing: 1px;



    padding-bottom: 5px;



    padding-top: 5px;



    text-align: center;



    text-transform: uppercase;



    width: 71%;



}



#mini-clndr .clndr .days-container {



    display: block;



    position: relative;



}



#mini-clndr .clndr .days-container .days {



    background-color: #FFFFFF;



    height: 100%;



    left: 0;



    transition: left 0.5s ease 0s;



    width: 100%;



}



#mini-clndr .clndr .days-container .days .day, #mini-clndr .clndr .days-container .days .empty {



    color: #212121;



    display: inline-block;



    font-size: 12px;



    padding-bottom: 8px;



    padding-top: 8px;



    text-align: center;



    width: 13.14%;



}



#mini-clndr .clndr .days-container .days .day.event, #mini-clndr .clndr .days-container .days .empty.event {



    background-color: #f79363;



    cursor: pointer;



    transition: background-color 0.5s ease 0s;



}



#mini-clndr .clndr .days-container .days .day.event:hover, #mini-clndr .clndr .days-container .days .empty.event:hover {



    background-color: #f26522;



}



#mini-clndr .clndr .days-container .days .event.selected {



	background-color: #f26522;



}



#mini-clndr .clndr .days-container .days .day.adjacent-month, #mini-clndr .clndr .days-container .days .empty.adjacent-month {



    color: rgba(0, 0, 0, 0.3);



}



#mini-clndr .clndr .days-container .days .empty {



    height: 31px;



    vertical-align: bottom;



}



#mini-clndr .clndr .days-container .days .headers {



    background-color: #CCB76F;



    padding-bottom: 5px;



    padding-top: 5px;



}



#mini-clndr .clndr .days-container .days .headers .day-header {



    color: white;



    display: inline-block;



    text-align: center;



    width: 13.14%;



}



#mini-clndr .clndr .days-container .events {



    background-color: #ebebeb;



    height: 217px;



    left: 294px;



    position: absolute;



    transition: left 0.5s ease 0s;



    width: 294px;



}



#mini-clndr .clndr .days-container .events .headers {



    position: relative;



}



#mini-clndr .clndr .days-container .events .event-header {



    background-color: #CCB76F;



    color: white;



    padding-bottom: 5px;



    padding-top: 5px;



    text-align: center;



    width: 100%;



}



#mini-clndr .clndr .days-container .events .x-button {



    cursor: pointer;



    font-size: 80%;



    left: 20px;



    position: absolute;



    top: 7px;



    transition: color 0.25s ease 0s;



}



#mini-clndr .clndr .days-container .events .x-button:hover {



    color: white;



}



#mini-clndr .clndr .days-container .events .events-list {



    height: 185px;



    overflow: scroll;



}



#mini-clndr .clndr .days-container .events .events-list .event {



    border-bottom: 1px solid rgba(255, 255, 255, 0.5);



    padding-bottom: 8px;



    padding-left: 10px;



    padding-top: 8px;



    transition: background-color 0.25s ease 0s;



}



#mini-clndr .clndr .days-container .events .events-list .event:hover {



    background-color: #f5f5f5;



}



#mini-clndr .clndr .days-container .events .events-list .event a {



    background-color: transparent;



    color: #212121;



    font-size: 12px;



    letter-spacing: 1px;



    position: relative;



    text-decoration: none;



    transition: color 0.25s ease 0s;



}



#mini-clndr .clndr .days-container .events .events-list .event a:hover {



    background-color: transparent;



    color: #A39259;



}



#mini-clndr .clndr .days-container.show-events .days {



    left: -294px;



}



#mini-clndr .clndr .days-container.show-events .events {



    left: 0;



}



#clndr-3 {



    background-color: #f4f4f4;



    box-shadow: 4px 4px 0 #343434;



    margin: 0 auto;



    max-width: 400px;



    padding-bottom: 12px;



}



#clndr-3 .month-bar {



    padding: 12px;



    text-align: center;



}



#clndr-3 .days-of-the-week {



    width: 100%;



}



#clndr-3 .days-of-the-week .header-day {



    display: inline-block;



    float: left;



    padding: 12px 0;



    text-align: center;



    width: 14.2857%;



}



#clndr-3 .days .day, #clndr-3 .days .empty {



    float: left;



    padding: 12px 0;



    text-align: center;



    width: 14.2857%;



}



#clndr-3 .days .day.today, #clndr-3 .days .empty.today {



    background-color: #ebebeb;



    box-shadow: 0 0 8px #d4d4d4 inset;



}



#clndr-3 .days .day.event, #clndr-3 .days .empty.event {



    color: #71bbd2;



}



#clndr-3 .days .day.adjacent-month .day-number, #clndr-3 .days .empty.adjacent-month .day-number {



    opacity: 0.3;



}



#clndr-4 {



    box-shadow: 4px 4px 0 #343434;



}



#clndr-4 .date-range {



    color: white;



    padding: 0.4em;



    text-align: center;



}



#clndr-4 .days-of-the-week {



    background-color: #ff9e92;



    padding: 0.4em 8%;



}



#clndr-4 .day-of-the-week {



    display: inline-block;



    text-align: center;



    width: 14.2857%;



}



#clndr-4 .clndr-previous-button, #clndr-4 .clndr-next-button {



    background-color: #ebebeb;



    display: inline-block;



    font-size: 32px;



    height: 160px;



    padding-top: 54px;



    text-align: center;



    transition: background-color 0.2s ease 0s;



    vertical-align: top;



    width: 8%;



}



#clndr-4 .clndr-previous-button:hover, #clndr-4 .clndr-next-button:hover {



    background-color: #dedede;



    cursor: pointer;



}



#clndr-4 .days-container {



    display: inline-block;



    width: 84%;



}



#clndr-4 .day {



    background-color: #f4f4f4;



    border-right: 2px solid #ebebeb;



    display: inline-block;



    height: 160px;



    overflow: scroll;



    padding: 0.5em;



    text-align: right;



    width: 14.2857%;



}



#clndr-4 .day:last-child {



    border-right: medium none;



}



#clndr-4 .day.today .day-number {



    border-bottom: 2px solid #ff5a45;



    color: #ff5a45;



    padding-bottom: 2px;



}



#clndr-4 .events {



    margin-top: 1em;



}



#clndr-4 .event-listing {



    border: 2px solid #414141;



    border-radius: 2px;



    color: #414141;



    display: inline-block;



    font-size: 10px;



    padding: 0.25em;



    text-align: left;



    width: 100%;



}











#mini-clndr  p {



    line-height: 1.5em;



    margin-bottom: 1em;



}



#mini-clndr  p + #mini-clndr  h3 {



    margin-top: 3em;



}



#mini-clndr  a {



    background-color: #ebebeb;



    border-radius: 2px;



    color: #3883a3;



    padding: 0 2px;



    text-decoration: none;



    transition: background-color 0.2s ease 0s, color 0.4s ease 0s;



}



#mini-clndr  a:hover {



    background-color: #98cede;



    color: #212121;



}



#mini-clndr  span.code {



    background-color: rgba(255, 255, 255, 0.4);



    border-radius: 2px;



    padding: 0 2px;



}



#mini-clndr  .block {



    padding: 80px 0;



    width: 100%;



}



#mini-clndr  .inner {



    margin: 0 auto;



    max-width: 960px;



    padding: 0 20px;



}



#mini-clndr  .clearfix::after {



    clear: both;



    content: ".";



    display: block;



    height: 0;



    line-height: 0;



    visibility: hidden;



}



#mini-clndr  .clearfix {



    display: inline-block;



}



#mini-clndr .clearfix {



    display: block;



}







#mini-clndr  strong {



    font-weight: 700;



}



#mini-clndr  .bg-gray {



    background-color: #414141;



}



#mini-clndr  .bg-red {



    background-color: #ff5a45;



}



#mini-clndr  .bg-red a {



    color: #ff5a45;



}



#mini-clndr  .bg-red a:hover {



    background-color: #ffb4ab;



    color: #212121;



}



#mini-clndr  .bg-blue {



    background-color: #71bbd2;



}



#mini-clndr  .bg-green {



    background-color: #CCB76F;



}



#mini-clndr .bg-yellow {



    background-color: #ddca9a;



}



#mini-clndr .center {



    text-align: center;



}



#mini-clndr .header {



    padding: 30px 0;



}



#mini-clndr .clndr-logo {



    background-image: url("http://kylestetz.github.io/CLNDR/css/./clndr-logo.svg");



    height: 113px;



    margin: 0 auto;



    width: 113px;



}



#mini-clndr .banner-text {



    color: #f4f4f4;



    font-weight: normal;



    letter-spacing: 1px;



    text-align: center;



    text-shadow: 2px 2px 2px #212121;



}



#mini-clndr .banner-text.below {



    margin-top: 30px;



}



#mini-clndr .banner-text.below a {



    background-color: transparent;



    color: #CCB76F;



}



#mini-clndr .banner-text.below a:hover {



    color: #d3eac9;



}



#mini-clndr .more-space {



    margin-top: 3em;



}



@media all and (max-width: 768px) {



#full-clndr .clndr-grid {



    border: medium none;



    width: 100%;



}



#full-clndr .event-listing {



    display: none;



}



#mini-clndr  h1.banner-text {



    font-size: 28px;



}



#mini-clndr .banner-text.below {



    font-size: 16px;



    word-wrap: break-word;



}







#clndr-4 .day, #clndr-4 .clndr-next-button, #clndr-4 .clndr-previous-button {



    height: 100px;



}



#clndr-4 .clndr-next-button, #clndr-4 .clndr-previous-button {



    padding-top: 30px;



}



#clndr-4 .events {



    margin-top: 0.1em;



}



#clndr-4 .event-listing {



    height: 1px;



    width: 1px;



}



#clndr-4 .event-listing-title {



    display: none;



}



}