/* Slider ------------------------------------------------------------------------------------------- */ /* SLIDER CONTAINERS ================================================== */ .slider { width:100%; height:100%; overflow:hidden; .slider-container-mask { text-align: center; width: 100%; height: 100%; overflow: hidden; .slider-container { position: absolute; top: 0px; left: -2160px; width: 100%; height: 100%; text-align: center; display: block; background-color: @white; .slider-item-container { //overflow:hidden; display:table-cell; vertical-align:middle; } } } } /* SLIDER ELEMENTS ================================================== */ .slider { img, embed, object, video, iframe { max-width: 100%; } } /* SLIDER NAV ================================================== */ .slider { //position: relative; .nav-previous, .nav-next { position:absolute; top: 0px; width: @feature-nav-width; color: #DBDBDB; font-size:@base-font-small; .nav-container { height:100px; position:absolute; } .icon { margin-top:@feature-nav-icon-wh/2; margin-bottom:@base-space; } .date { font-size: @base-font; font-weight: bold; line-height: @base-line; text-transform: uppercase; margin-bottom:5px; } .date, .title { line-height:14px; a { color: @color-nav-description; } small { display:none; } } } .nav-previous:hover, .nav-next:hover { color: @color-dark-second; cursor: pointer; } .nav-previous { float: left; text-align:left; .icon { margin-left: @base-space; .icon-previous(); } .date, .title { text-align:left; padding-left:@base-space; } } .nav-previous:hover { .icon { margin-left: @base-space - 5; } } .nav-next { float: right; text-align:right; .icon { margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh; .icon-next() } .date, .title { text-align:right; padding-right:@base-space; } } .nav-next:hover { .icon { margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh + 5; } } } /* SLIDE CONTENT ================================================== */ .slider { .slider-item { position:absolute; width:700px; height:100%; padding:0px; margin:0px; //overflow: hidden; display:table; overflow-x:hidden; overflow-y:auto; .content { display:table-cell; vertical-align:middle; /* All Slides ================================================== */ .pad-top { .text { .container { padding-top: @base-space; } } } .pad-right { .text { .container { padding-right: @base-space; } } } .pad-left { .text { .container { padding-left: @base-space*2; } } } .content-container { display:table; vertical-align:middle; .text { width:40%; max-width:50%; min-width:120px; display:table-cell; vertical-align:middle; .container { display:table-cell; vertical-align:middle; text-align:left; -webkit-hyphens:auto; -moz-hyphens:auto; -ms-hyphens:auto; hyphens:auto; word-wrap:break-word; } } .media { width:100%; min-width:50%; float: left; .media-wrapper { margin-left: auto; margin-right: auto; .media-container { display:inline-block; line-height:0px; padding:0px; max-height:100%; //overflow:hidden; /* MEDIA SHADOWS AND BORDERS ================================================== */ .media-frame, .media-image img { border: 1px solid; border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line; background:@color-background; } .soundcloud { border: 0; } .media-image { display: inline-block; } .media-shadow { position: relative; z-index: 1; background:@color-background; } .media-shadow:before, .media-shadow:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: @color-dark-fourth; -webkit-box-shadow: 0 15px 10px @color-dark-fourth; -moz-box-shadow: 0 15px 10px @color-dark-fourth; box-shadow: 0 15px 10px @color-dark-fourth; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } .media-shadow::after { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); right: 10px; left: auto; } span.messege { display:block; vertical-align:middle; margin-left:auto; margin-right:auto; text-align:center; background:@color-background; //margin-top: 50%; font-size: 28px; font-weight: bold; text-transform: uppercase; } .plain-text { display:table; .container { display:table-cell; vertical-align:middle; font-size: @base-font; line-height:@base-line; color: @color-feature-description; p { margin-bottom:@base-line; } } } .twitter { text-align:left; margin-left: auto; margin-right: auto; margin-bottom:@base-space; clear:both; blockquote { font-size: @base-font; line-height: @base-line; color:@color-feature-description; p { font-size: 28px; line-height: 36px; margin-bottom: 6px; padding-top: 10px; background-color:@white; color:@color-feature-title; //margin-left:10px; } .quote-mark { color:@color-dark-third; } } .created-at { .icon-twitter(); width:24px; height:24px; overflow:hidden; margin-left:@base-space; display:inline-block; float:right; .opacity(25); } .created-at:hover { .opacity(100); } .vcard { float:right; margin-bottom:@base-space; //position: relative; a { color: @color-dark-second; } a:hover { text-decoration: none; .fn { text-decoration: underline; } } .fn, .nickname { padding-left: 42px; } .fn { display:block; //display:inline; font-weight: bold; } .nickname { margin-top:3px; display:block; color: @color-dark-third; } .avatar { float:left; //position: absolute; display: block; width: 32px; height: 32px; img { //border: 0px solid #999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } } } } .wikipedia { font-size: @base-font; line-height: @base-line; text-align:left; margin-left: auto; margin-right: auto; margin-bottom:@base-space; clear:both; .wiki-source { margin-bottom:@base-space; font-size: 13px; line-height: 19px; font-style: italic; } h4 { border-bottom: 1px solid @color-line; margin-bottom:5px; } p { font-size: 13px; line-height: 19px; } } .map { line-height: normal; z-index:200; text-align:left; background-color:@white; img { max-height:none !important; max-width:none !important; border:0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .google-map { height:100%; width:100%; } .map-attribution { position: absolute; z-index: 201; //right: 0px; bottom: 0px; width:100%; overflow:hidden; .attribution-text { height: 19px; overflow:hidden; -webkit-user-select: none; line-height: 19px; margin-right: 60px; padding-left: 65px; font-family: Arial, sans-serif; font-size: 10px; //font-weight: bold; color: #444; white-space: nowrap; color:@color-base; text-shadow:1px 1px 1px @color-dark-second; //direction: ltr; text-align: center; a { color:@color-base !important; } } } } } .credit { color: @color-credit; text-align: right; display: block; margin: 0 auto; margin-top:6px; .text-font(@base-font-small - 1); //max-height:16px; //overflow:auto; } .caption { text-align:left; margin-top:@base-font-small - 1; color: @color-caption; .text-font(@base-font-small); text-rendering: optimizeLegibility; //max-height:45px; //overflow-x:hidden; //overflow-y:auto; } } } } .media.text-media { .media-wrapper { .media-container { border: none; background-color: @white; } } } } /* Text and Media Slides ================================================== */ .content-container.layout-text-media { .text-media { padding-right:@base-space; border-right: 1px solid @color-dark-fifth;//@color-line; } } /* Text Only Slides ================================================== */ .content-container.layout-text { width:100%; .text { width:100%; max-width:100%; .container { display:block; vertical-align:middle; text-align:left; padding:0px; width: 90%; text-align:left; margin-left: auto; margin-right: auto; } } } /* Media Only Slides ================================================== */ .content-container.layout-media { width:100%; .text { width:100%; height:100%; max-width:100%; display:block; text-align:center; .container { display:block; text-align:center; width:100%; margin-left: none; margin-right: none; } } .media { width:100%; min-width:50%; float: none; .media-wrapper { display:block; .media-container { margin-left: auto; margin-right: auto; //overflow: hidden; line-height:0px; padding:0px; } } } .twitter, .wikipedia { max-width:70%; } } } } }