/* ========================================================================== Project: ´óÏóÊÓƵ Date: 01/28/16 - File created Created by: Third Wave Digital (www.thirdwavedigital.com) ========================================================================== */ /* ========================================================================== Overrides to existing site layout (likely to change) ========================================================================== */ .calendar #calendar-view-results a, .calendar #calendar-view-detail a { padding: 0px; } .calendar #calendar-view-results a:hover, .calendar #calendar-view-detail a:hover { background: none; padding: 0px; } .calendar #calendar-tools p a { background: none; } .calendar #calendar-view-results p, .calendar #calendar-view-detail p { margin: 20px 0px 20px 0px; padding: 0px; } /* ========================================================================== Calendar ========================================================================== */ #calendar {width: 100%;position: relative;} #calendar-header {background: #b4975e;width: 100%;z-index: 1;} #calendar-header ul {margin: 0px; list-style: none;font-size: 18px; z-index: 2; padding: 0px;} #calendar-header ul li {display: inline; position: relative;} #calendar-header ul li:first-child {margin: 0px 0px 0px 0px; } #calendar-header ul li a {color: #f1f1f1;} #calendar-header ul li a:hover {color: #fff;} #calendar-header ul li.calendar-active a { background: #fff;} #calendar-header ul li.calendar-active a, #calendar-header ul li.calendar-active a:hover {color: #000} #calendar-header form {margin: 0px; padding: 0px; z-index: 99; } #calendar-header form input[type="text"] {background: #d6d6d6; border: none; padding: 0px 35px 0px 5px; height: 32px; color: #333} #calendar-header form input[type="text"].search-focus {width: 174px;} #calendar-header form input[type="image"] {position: absolute; top: 3px; right: 6px;filter:alpha(opacity=20); -moz-opacity:0.20; opacity:0.20;} #calendar-header form input[type="image"]:hover {filter:alpha(opacity=100); -moz-opacity:1; opacity:1;} #calendar-sidebar {position: relative; z-index: 1; float: left;} #calendar-categories {background: #f1f1f1;} #calendar-categories p {margin: 0px;color: #333; background: #bfbfbf;} #calendar-categories ul {margin: 0px; list-style: none; font-size: 16px; line-height: 18px;} #calendar-categories ul li {margin: 0px 0px 5px 0px;} #calendar-categories ul li:first-child { margin: 0px;} #calendar-categories ul li a {color: #000; display: block; padding: 3px 4px 5px 10px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; } #calendar-categories ul li a:hover {background: #ccc;} #calendar-categories ul li.calendar-active a {color: #fff;background: #0c5b25; } #calendar-categories ul li.calendar-active a:hover {background: #999;} #calendar-tools {} #calendar-tools:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden;} #calendar-tools p:nth-child(1) {margin: 0px 0px 20px 0px; padding: 0px; width: 130px; } #calendar-tools p:nth-child(1) a {color: #fff;padding: 3px 15px 3px 35px; text-transform: uppercase; font-size: 14px;color: #fff; display: block; -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 10px -298px no-repeat #666;} #calendar-tools p:nth-child(1) a:hover {background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 10px -298px no-repeat #0c5b25} #calendar-tools p:nth-child(2) {margin: 0px; padding: 0px 0px 0px 30px; position: relative; width: 130px;} #calendar-tools p:nth-child(2) a {color: #444;display: block; height: 30px;} #calendar-tools p:nth-child(2) a:hover {color: #0c5b25} #calendar-tools p:nth-child(2) a:hover .calendar-circle {background: #0c5b25;} #calendar-tools .calendar-circle {position: absolute; top: 0px; left: 0px; display: block;text-align: center; width: 26px; height: 26px; padding:2px 0px 0px 1px; color: #fff; background: #666; -webkit-border-radius: 20px;-moz-border-radius:20px;border-radius: 20px;} #calendar-tools p:nth-child(3) { clear: both; font-size: 14px; line-height: 18px;} #calendar-content {position: relative; background: #fff;} #calendar-date-range {background: #ccc; position: relative;margin: 0px 0px 15px 0px;text-align: center; } #calendar-date-range p {color: #333;margin: 0px; padding: 0px;} #calendar-view-results { } #calendar-view-results .calendar-event {position: relative; } #calendar-view-results .calendar-event:last-child {margin: 10px 0px 10px 0px; } #calendar-view-results .calendar-event:hover .calendar-description {background: #f1f1f1} #calendar-view-results .calendar-event:hover .calendar-description p:nth-child(1) {color: #0c5b25;} #calendar-view-results .calendar-event:hover .calendar-thin-arrow-btn {right: -10px;} #calendar-view-results .calendar-event:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden;} #calendar-view-results .calendar-date { float: left; position: relative; z-index: 1;} #calendar-view-results .calendar-date-from , #calendar-view-results .calendar-date-to { top: 0px;position: absolute; text-align: center; color: #333;} #calendar-view-results .calendar-date-from p, #calendar-view-results .calendar-date-to p {margin: 0px; padding: 0px;} #calendar-view-results .calendar-date-from { left: 0px; background: #ccc; } #calendar-view-results .calendar-date-to {background: #f1f1f1;} #calendar-view-results .calendar-description {float: left; padding: 5px;} #calendar-view-results .calendar-description p {color: #0c5b25; font-size: 18px; line-height: 22px; margin: 0px 0px 5px 0px; padding: 0px;} #calendar-view-results .calendar-description p+p {margin: 0px; padding: 0px; color: #333; font-size: 16px; line-height: 20px;} #calendar-view-results .calendar-thin-arrow-btn {position: absolute; top: 0px; right: 0px;height: 86px; width: 40px;background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 0px -140px no-repeat;} #calendar-view-detail {} #calendar-detail-content-left .calendar-section {color: #0c5b25; font-weight: bold; } #calendar-detail-content-left ul {margin: 20px 0px 20px 0px; padding: 0px;list-style: none;} #calendar-detail-content-left ul li {background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 0px -353px no-repeat; padding: 0px 0px 0px 25px;} #calendar-detail-content-right p:first-child {font-size: 24px; line-height: 28px; margin: 0px 0px 20px 0px;} .cms-calendar {border-collapse: collapse; padding: 0px; margin: 0px;} .cms-calendar th, .cms-calendar tr { text-align: center; vertical-align: middle;} .cms-calendar th {font-weight: normal; padding: 0px;} .cms-calendar tr:first-child {height: 43px; background: #b4975e;; color: #f1f1f1;} .cms-calendar a {display: block;color: #333;} .cms-calendar tr:nth-child(1) a {color: #f1f1f1;} .cms-calendar tr:nth-child(1) a:hover {background: #4f4f4f; color: #fff;} .cms-calendar tr:nth-child(1) {font-size: 20px;} .cms-calendar tr:nth-child(1) th:nth-child(1) {} .cms-calendar tr:nth-child(1) th:nth-child(2) {font-weight: bold; text-transform: uppercase;} .cms-calendar tr:nth-child(1) th:nth-child(3) {} .cms-calendar tr:nth-child(2) {font-size: 14px;font-weight: normal; background: #f1f1f1;} .cms-calendar tr a:hover {background: #fff; color: #000;} .cms-calendar td {background: #f1f1f1; padding: 0px;} .cms-calendar td.calendar-last-month a,.cms-calendar td.calendar-next-month a {color: #adadad;} .cms-calendar td.calendar-active a {background: #dfdfdf; color: #333;} .cms-calendar td.calendar-today a,.cms-calendar td.calendar-today a:hover {background: #0c5b25; color: #fff;} .cms-calendar td.calendar-day-selected {background: #fff; color; #000;} .cms-calendar td a:hover {background: #fff; color: #000} /* ========================================================================== Transitions ========================================================================== */ #calendar-content #calendar-view-results .calendar-event .calendar-thin-arrow-btn,#calendar-sidebar .cms-calendar td a,#calendar-content #calendar-date-range .calendar-square-btn a, #calendar-sidebar #calendar-tools p:nth-child(2) .calendar-circle, #calendar-content #calendar-view-results .calendar-event:hover .calendar-description p:nth-child(1) {-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;} /* ========================================================================== Add Event Form ========================================================================== */ #add-event-form {background: #fff; padding: 20px; margin: 0px; width: 700px; overflow-x: hidden;} #add-event-form form {margin: 0px; width: 100%;} #add-event-form form .btn-submit {color: #fff; -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; background: #0c5b25; border: none; height: 40px; width: 150px;} #add-event-form form .btn-submit:hover {background: #081831;cursor: pointer; } #add-event-form label.error { color: red; font-size: 14px; font-weight: normal; padding: 5px 0px 0px 0px} /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (min-width: 0px) { #calendar-content, #calendar-date-range, #calendar-view-results .calendar-event { width: 100%} #calendar-view-results .calendar-description {border-bottom: 1px solid #ccc;} .cms-calendar { width: 100%; height:auto;} .cms-calendar a {padding: 2px; } #calendar-categories, #calendar-sidebar {width: 100%; } #calendar-header {} #calendar-content {float: none;} #calendar-header form {position: relative;border-bottom: 5px solid white;} #calendar-header form input[type="text"] { width: 100%;} #calendar-header ul {font-size: 14px; width: 100%; text-align: center} #calendar-header ul li {margin: 0px 0px 0px 7px; } #calendar-header ul li a { padding: 4px;} #calendar-categories { margin: 10px 0px 10px 0px;} #calendar-categories ul {padding: 15px 10px 5px 10px;} #calendar-categories p { padding: 5px 0px 5px 10px;font-size: 16px; font-weight: bold; } #calendar-tools {margin: 0px 0px 0px 0px;} #calendar-date-range {height: 33px; } #calendar-date-range p { font-size: 16px; font-weight: bold; padding: 5px 30px 0px 30px;} #calendar-date-range .calendar-square-btn a[rel="prev"] {position: absolute; top: 0px; left: 0px; height: 33px; width: 33px; background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 14px -48px no-repeat #0c5b25;} #calendar-date-range .calendar-square-btn a[rel="prev"]:hover {background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 14px -48px no-repeat #0a1c48;} #calendar-date-range .calendar-square-btn a[rel="next"] {position: absolute; top: 0px;right: 0px; height: 33px; width: 33px; background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 14px 13px no-repeat #0c5b25;} #calendar-date-range .calendar-square-btn a[rel="next"]:hover {background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 14px 13px no-repeat #0a1c48;} #calendar-view-results .calendar-event {margin: 10px 0px 10px 0px; } #calendar-view-results .calendar-date {width: 88px; height: 44px; margin: 0px 10px 0px 0px;} #calendar-view-results .calendar-date-from , #calendar-view-results .calendar-date-to {width: 44px; height: 44px; font-size: 24px;padding: 0px 0px 0px 0px;} #calendar-view-results .calendar-date-to {left: 44px; } #calendar-view-results .calendar-date-from .calendar-small , #calendar-view-results .calendar-date-to .calendar-small { margin: 0px 0px -6px 0px; text-transform: uppercase; font-size: 12px; } #calendar-view-results .calendar-date .calendar-circle { top: 12px; left: 32px; margin: 0px; font-size: 10px; position: absolute;background: #fff; color: #2e3641; width: 22px; height: 22px; padding:0px 0px 0px 8px;-webkit-border-radius: 20px;-moz-border-radius:20px;border-radius: 20px;z-index: 2; } #calendar-view-results .calendar-thin-arrow-btn {display: none;} #calendar-detail-content-left {width: 100%; margin: 10px 0px 10px 0px;} #calendar-detail-content-left img:first-child {width: 145px !important; height: auto !important;} #calendar-detail-content-right {width: 100%; margin: 10px 0px 10px 0px;} #calendar-detail-content-left .calendar-section { border-bottom: 1px solid #ccc; } #calendar-view-year .cms-calendar {margin: 0px 0px 10px 0px; } #calendar-detail-content-left .calendar-section i { display: static; } #calendar-detail-content-left .calendar-section a.active {color: #0c5b25} #calendar-detail-content-left #location-details, #calendar-detail-content-left #contact-details, #calendar-detail-content-left #share-details { display: none;} #calendar-detail-content-left #location-details.open, #calendar-detail-content-left #contact-details.open, #calendar-detail-content-left #share-details.open { display: block} #calendar-detail-content-left .calendar-section { font-size: 18px; } } @media only screen and (min-width: 768px) { #calendar-content, #calendar-date-range, #calendar-view-results .calendar-event { width: 475px;} #calendar-view-results .calendar-description { width: 235px;border-bottom: none;} .cms-calendar { width: 200px; height:200px;} .cms-calendar a {padding: 5px; } #calendar-content {float: right;} #calendar-categories, #calendar-sidebar {width: 200px; } #calendar-header {height: 43px; position: absolute; top: 0px; left: 0px;} #calendar-header form {position: absolute; top: 6px; right: 6px; border-bottom: none;} #calendar-header form input[type="text"] { width: 174px;} #calendar-header ul {font-size: 16px; height: 48px; position: absolute; top: 10px; right: 194px; width: auto;text-align: left; } #calendar-header ul li {margin: 0px 0px 0px 8px; } #calendar-header ul li a { padding: 12px;} #calendar-categories { margin: 26px 0px 25px 0px;} #calendar-categories ul {padding: 30px 25px 20px 25px;} #calendar-categories p { padding: 10px 0px 10px 10px;font-size: 20px; font-weight: normal;} #calendar-content { margin: 70px 0px 0px 0px;} #calendar-tools {margin: 0px 0px 20px 0px;} #calendar-date-range {height: 53px; } #calendar-date-range p { font-size: 24px; font-weight: normal; padding: 15px 0px 0px 0px;} #calendar-date-range .calendar-square-btn a[rel="prev"] {position: absolute; top: 0px; left: 0px; height: 53px; width: 53px; background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 24px -37px no-repeat #0c5b25;} #calendar-date-range .calendar-square-btn a[rel="prev"]:hover {background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 24px -37px no-repeat #0a1c48;} #calendar-date-range .calendar-square-btn a[rel="next"] {position: absolute; top: 0px;right: 0px; height: 53px; width: 53px; background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 24px 23px no-repeat #0c5b25;} #calendar-date-range .calendar-square-btn a[rel="next"]:hover {background: url(/skins/tallulah_falls/includes/calendar/img/icons.png) 24px 23px no-repeat #0a1c48;} #calendar-view-results .calendar-event {margin: 10px 0px 25px 0px; } #calendar-view-results .calendar-date {width: 168px; height: 84px; margin: 0px 20px 0px 0px;} #calendar-view-results .calendar-date-from , #calendar-view-results .calendar-date-to {width: 84px; height: 84px; font-size: 44px;padding: 5px 0px 0px 0px;} #calendar-view-results .calendar-date-to {left: 84px; } #calendar-view-results .calendar-date-from .calendar-small , #calendar-view-results .calendar-date-to .calendar-small { margin: 0px 0px 15px 0px; text-transform: uppercase; font-size: 14px; } #calendar-view-results .calendar-date .calendar-circle { top: 30px; left: 72px; margin: 0px; font-size: 14px; position: absolute;background: #fff; color: #2e3641; width: 22px; height: 22px; padding:0px 0px 0px 5px;-webkit-border-radius: 20px;-moz-border-radius:20px;border-radius: 20px;z-index: 2;} #calendar-view-results .calendar-thin-arrow-btn {display:block;} #calendar-detail-content-left {width: 145px; float: left; margin: 0px 0px 20px 0px;} #calendar-detail-content-right {width: 310px; float: left; margin: 0px 0px 20px 20px; } #calendar-detail-content-left .calendar-section { border-bottom: none; } #calendar-view-year .cms-calendar {float: left; width: 48%; margin: 1%; height: 300px;} #calendar-detail-content-left .calendar-section i { display: none; } #calendar-detail-content-left .calendar-section a, #calendar-detail-content-left .calendar-section a:hover {cursor: default; color: #0c5b25} #calendar-detail-content-left #location-details, #calendar-detail-content-left #contact-details, #calendar-detail-content-left #share-details { display: block;} #calendar-detail-content-left .calendar-section { font-size: 20px; } } @media only screen and (min-width: 992px) { #calendar-content, #calendar-date-range, #calendar-view-results .calendar-event { width: 655px;} #calendar-view-results .calendar-description { width: 415px;} .cms-calendar { width: 240px; height: 240px;} .cms-calendar a {padding: 7px; } #calendar-categories, #calendar-sidebar {width: 240px; } #calendar-header ul {font-size: 18px; } #calendar-header ul li {margin: 0px 0px 0px 15px; } #calendar-detail-content-left {width: 195px; float: left; margin: 10px 0px 20px 0px;} #calendar-detail-content-left img:first-child {width: 195px !important; height: auto !important; overflow: hidden;} #calendar-detail-content-right {width: 440px; float: left; margin: 0px 0px 20px 20px; } } @media only screen and (min-width: 1200px) { #calendar-content, #calendar-date-range, #calendar-view-results .calendar-event { width: 855px;} #calendar-view-results .calendar-description { width: 615px;} #calendar-detail-content-right {width: 640px;} } @media only screen and (min-width: 1270px) { #calendar-content, #calendar-date-range, #calendar-view-results .calendar-event { width: 855px;} #calendar-view-results .calendar-description { width: 615px;} #calendar-detail-content-right {width:640px; } }