a /*--GLOBAL --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ html, body {margin: 0; padding: 0;} body {background-image: url('/areas/national/content/images/body-bg.png'); font-family: 'Segoe UI','Proxima Nova','Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 14px; color: #424242;} .clear {clear: both;} br.clear {clear: both; margin: 0px; padding: 0px;} .content-section {margin-bottom: 40px; position: relative;} /*Links*/ a {color: #3299bb; text-decoration: none} a:hover {text-decoration: underline} a.gray-link {color: #999; text-decoration: none;} a.gray-link:hover {color: #424242; text-decoration: underline;} /*Headings*/ h1 {font-size: 26px; color: #3299bb; font-weight: normal; margin: 0; line-height: normal;} h2 {font-size: 18px; color: Black; border-bottom: 1px dotted #bdbdbd; margin: 0 0 20px 0; padding: 0 0 7px 0; line-height: 20px;} h3 {font-size: 18px; color: #3299bb; font-weight: normal; margin: 0 0 10px 0; line-height: 20px;} h4 {font-size: 14px; font-weight: bold; color: #424242; margin: 0 0 10px 0;} h4 a {color: #424242;} h4 a:hover {color: #3299bb; text-decoration: none;} p {line-height: 20px;} img {border: none;} .subtext {color: #999;} /*Inline dotted ul*/ ul.dotted {margin: 0px; padding: 0px;} ul.dotted li {display: inline; background: url('/areas/national/content/images/list-separator.png') no-repeat left center; padding: 0 10px 0 15px;} ul.dotted li.first {background: none; padding-left: 0;} ul.dotted li.last {padding-right: 0;} /*Link - All from section*/ .content-section a.show-all {position: absolute; right: 0px; top: 0px; display: none;} .content-section:hover a.show-all {display: block; width: 40px; height: 20px; background-color: #424242; color: White; text-align: center; text-decoration: none;} .content-section:hover a.show-all:hover {color: #ff9900;} /*--LAYOUT --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*Top bar*/ #top-bar {width: 970px; padding: 15px 25px 10px 25px; margin: 0 auto; font-size: 12px;} #top-bar .language {float: left; color: #999;} #top-bar .language a {margin: 0 10px;} #top-bar .language a.selected {color: #424242; font-weight: bold;} #top-bar .user-info {display:none; float: right;} /*TODO: PRIKAZATI KO BO NA VOLJO*/ /*Page shadows*/ .top-shadow {width: 970px; margin: 0 auto; padding: 0 25px; height: 15px; background-image: url('/areas/national/content/images/wrapper-bg-top.png'); background-repeat: no-repeat;} .bottom-shadow {width: 970px; margin: 0 auto; padding: 0 25px; height: 15px; background-image: url('/areas/national/content/images/wrapper-bg-bottom.png'); background-repeat: no-repeat;} /*Wrappers and shadows*/ #page-wrapper, #page-header, #navigation, #page-content, #bottom-navigation {width: 970px; margin: 0 auto; padding: 0 25px; background-image: url('/areas/national/content/images/wrapper-bg.png');} #page-content {padding-bottom:20px;} /*Header*/ #page-header {padding-top: 40px; padding-bottom: 50px;} #page-header .logo {float: left; display: inline;} #page-header .search {float: right; position: relative;} #page-header .search input[type="text"] {width: 280px; height:28px; padding: 0 30px 0 10px; border: 1px solid #bdbdbd;} #page-header .search label {margin-right: 10px; color: #999; text-transform: uppercase;} #page-header .search input[type="submit"] {position: absolute; right: 7px; top: 7px; display: block; height: 16px; width: 16px; border: none; background: url('/areas/national/content/images/page-search-button.png') no-repeat; cursor: pointer;} /*Page navigation*/ #navigation {height: 30px; background-image: url('/areas/national/content/images/navigation-bg.png');} #navigation .item {float: left; height: 30px; padding: 0 11px; line-height: 30px; border-right: 1px solid white;} #navigation .item a {color: White; font-weight: bold; text-decoration: none; text-transform: uppercase;} #navigation .item:hover {background-color: White; border-top: 3px solid #ff9900; border-right: none; padding-right:16px; margin-top: -3px;} #navigation .item:hover a {color: #424242;} #page-museum #navigation .museums, #page-exhibition #navigation .exhibitions, #page-event #navigation .events, #page-collection #navigation .collections, #page-author #navigation .authors, #page-article #navigation .articles, #page-calendar #navigation .calendar, #page-activity #navigation .activities, #page-search #navigation .search {background-color: White; border-top: 3px solid #ff9900; border-right: none; padding-right:16px; margin-top: -3px;} #page-museum #navigation .museums a, #page-exhibition #navigation .exhibitions a, #page-event #navigation .events a, #page-collection #navigation .collections a, #page-author #navigation .authors a, #page-article #navigation .articles a, #page-calendar #navigation .calendar a, #page-activity #navigation .activities a, #page-search #navigation .search a {color: #424242;} /*Bottom navigation*/ #bottom-navigation {height: 30px; line-height: 30px; border-top: 1px solid #f0f0f0; text-align: center;} /*Copyright*/ #copyright-bar {width: 970px; padding: 0 25px; margin: 0 auto; font-size: 12px; color: #999; padding: 15px 0;} #copyright-bar .claim {float: left;} #copyright-bar .info {float: right;} #copyright-bar a {color: #999;} #copyright-bar a:hover {color: #424242;} /*--COMMON --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*Breadcrumbs*/ #breadcrumbs {float: left; width: 640px;} #breadcrumbs ul {margin: 0px; padding: 20px 0 0 0; list-style: none;} #breadcrumbs ul li {float: left; background: url('/areas/national/content/images/breadcrumb-arrow.png') no-repeat left 9px; padding: 0 10px 0 17px;} #breadcrumbs ul li.first {background: none; padding-left: 0;} #breadcrumbs ul li.last {padding-right: 0;} /*social*/ #socialBar {float: right; width: 310px; padding-top: 20px; text-align: right;} /*Banner*/ #image-banner {width: 640px; height: 320px; position: relative;} #image-banner .item {display: none; position: absolute; top: 0; left: 0; z-index: 10;} #image-banner .item.active {display:block} #image-banner img.photo {width: 640px; height: 320px;} #image-banner img.banner-gradient {position: absolute; bottom: 0; left: 0; z-index: 1;} #image-banner .content {position: absolute; bottom: 20px; left: 20px; z-index: 100;} #image-banner .content .title {display: block; color: White; font-size: 26px; font-weight: bold;} #image-banner .content .title a {text-decoration: none; color: White;} #image-banner .content .title a:hover {text-decoration: none;} #image-banner .content .subtitle {color: #ff9900;} #image-banner .dots {position: absolute; top: 10px; color: White; z-index: 1000;} #image-banner .dot {float: left; margin-left:10px; width: 17px; height: 17px; border: 3px solid white; background-color: white; cursor:pointer;} #image-banner .dot.colored {background-color: #ff9900;} /*Featured: Exhibitions and events, authors, museums*/ .featured .item.big {width: 310px;} .featured .item.big img {width: 310px; height:145px;} .featured .item.small {width: 145px;} .featured .item.small img {display: block; width: 145px; height: 145px;} .featured .item .content {height: 200px; border-left: 1px solid #bdbdbd; padding-top: 10px; position: relative;} .featured .item h3 {border-left: 3px solid #bdbdbd; padding-left: 5px;} .featured .item p {padding-left: 5px; margin: 0px;} .featured .item .description {position: absolute; bottom: 0; left: 0;} /*Object item*/ .object-item {float: left; width: 145px; height: 145px; margin: 0 20px 20px 0; position: relative;} .object-item.last {margin-right: 0;} .object-item img {width: 145px; height: 145px;} .object-item .overlay-text {position: absolute; left: 0; bottom: 0; height: 35px; width: 135px; background-image: url('/areas/national/content/images/transparent-black-bg.png'); padding: 3px 5px; overflow: hidden;} .object-item .overlay-text h4 {color: White; line-height: 17px;} .object-item .overlay-text h4 a {color: White;} .object-item .overlay-text span {display: block; color: White; font-size: 12px;} .object-item .overlay-text .museum-name {margin-top: 20px;} .object-item .overlay-text .date {font-style: italic; font-weight: bold;} /*Activity item - big*/ .activity-item {width: 310px; float: left; margin-right: 20px; margin-bottom: 20px; position: relative;} .activity-item img {width:310px; height:140px;} .activity-item .data {background-color: #f8f8f8; border-bottom: 1px solid #ccc; padding: 5px 10px; height: 68px;} .activity-item h4 {margin: 3px; height: 38px;} .activity-item .type {position: absolute; top: 10px; left: 0; height: 30px; line-height: 30px; color: White; font-weight: bold; padding: 0 10px; background-image: url('/areas/national/content/images/transparent-black-bg.png');} /*Activity item - small*/ .activity-item.small {width: 227px; margin-bottom: 0;} .activity-item.small img {width:227px; height:120px;} /* PRE LONG WORD OR URLS*/ .wrap_longwords p{ white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ } /* Social .twitter .item .showSocialPost {position: absolute; right: 0; top: 0; height: 30px; width: 50px; background: url('/areas/national/content/images/twitter-show.png') no-repeat right center; display: none; cursor: pointer;} .twitter .item:hover .showSocialPost {display: block;} .twitter .item {background: url('/areas/national/content/images/twitter-quote.png') no-repeat left top; padding: 0 0 0 40px; margin-top: 20px; position: relative;} .twitter h4 {margin-bottom: 0px;} .twitter p {margin: 10px 0 0 0; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; overflow:hidden;}*/ .twitter .item {background: white; border: 1px solid #cccccc; margin-bottom: 20px; -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1); -webkit-border-radius: 3px; border-radius: 3px; } .twitter .item .post-image {padding: 10px 10px 0 10px; width: 290px;} .twitter .item .content {padding: 10px 10px 10px 10px; word-wrap: break-word;} .twitter .item .options {padding: 7px 10px; background: #ebebeb;} .twitter .item .options .more {float: left;color: #3073a2;cursor: pointer;} .social-numbers {float: right; font-weight: bold;} .social-numbers .likes {background: url('/areas/national/content/images/fb-likes.png') no-repeat left 3px; padding-left: 18px;} .social-numbers .comments {background: url('/areas/national/content/images/fb-comments.png') no-repeat left 4px; padding-left: 15px; margin-left: 8px;} .social-numbers .retweets {background: url('/areas/national/content/images/tw-retweet.png') no-repeat left 4px; padding-left: 21px; margin-left: 8px;} .twitter .item h3 {font-size: 12px;} /* Social - Popup */ .social-popup { z-index:10000; background-color: white; width: 500px; padding: 20px; border:1px solid #666; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; border: 1px solid #cccccc; -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2); -webkit-border-radius: 3px; border-radius: 3px; font-family: 'Segoe UI','Proxima Nova','Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 14px; line-height: 20px; color: #4c4c4c;} .social-popup h2,h3,h4 { margin: 0;padding: 0;border: 0;} .social-popup .subtext {color: #999;font-size: 12px; } .social-popup .image {text-align: center;} .social-popup .image img {max-width: 500px; max-height: 400px;} .social-popup .content {margin-top: 15px; margin-bottom: 15px; position: relative;} .social-popup .content p {padding-top: 10px;} .social-popup a { color: #3073a2;cursor: pointer;} .social-popup .content .social-numbers {right: 20px;} .social-popup .comments h2{ padding-bottom: 10px;} .social-popup .comments {padding-top: 15px; border-top: 1px solid #ccc;} .social-popup .comments .item {margin-bottom: 20px;} .social-popup .comments .item div.text h3{ display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px;-webkit-margin-end: 0px; font-weight: bold; margin: 0; font-size: 14px; color: #4c4c4c;} .social-popup .comments .item div.text p{ margin: 0;} .social-popup .comments .item img {float: left; width: 50px; height: 50px; margin-right: 20px; padding-top: 5px;} .social-popup .comments .item .text {float: left; width: 430px;} /*Fast search*/ #fast-search .menu {height: 30px; background-color: #424242;} #fast-search .menu a.item {display: block; float: left; height: 30px; width: 90px; line-height: 30px; margin-left: 10px; text-align: center; color: White;} #fast-search .menu a.item.selected, #fast-search .menu a.item:hover {background-color: White; color: #424242; text-decoration:none; border-top: 3px solid #ff9900; margin-top: -3px; font-weight: bold; cursor:pointer;} #fast-search .secondary-menu {font-size: 12px; text-align:center; font-weight: bold; margin-top: 10px; margin-bottom: 10px;} #fast-search .secondary-menu a {color: #424242; cursor:pointer;} #fast-search .secondary-menu a.selected, #fast-search .secondary-menu a:hover {color: #ff9900; text-decoration: none;} #fast-search #fast-search-results .item {padding: 10px 0; background-color: #fafafa; border-top: 1px solid #e5e5e5;} #fast-search #fast-search-results .item img {margin-left: 10px; float: left; width: 40px; height: 40px;} #fast-search #fast-search-results .item .content {float: left; width: 240px; margin-left: 10px; color: #424242;} #fast-search #fast-search-results .item a {color: #424242;} #fast-search #fast-search-results .item a:hover {color: #3299bb;} /*Filters*/ .filter-group {margin-bottom: 30px;} .filter-name.subtext {text-transform: uppercase; margin: 0 0 10px 0; color: #424242; font-weight: bold; padding-left: 20px; cursor: pointer;} .filter-name.collapsed {background: url('/areas/national/content/images/filter-name-arrow-right.png') no-repeat left center;} .filter-name.expanded {background: url('/areas/national/content/images/filter-name-arrow-down.png') no-repeat left center;} /*Regular filter*/ .regular-filter .list {margin-left: 20px; padding-left: 10px; border-left: 1px solid #bdbdbd;} .regular-filter .list a {display: block; margin-bottom: 5px; color: #424242; cursor:pointer;} .regular-filter .list a:hover {color: #ff9900; text-decoration: none;} .regular-filter .list a.selected {font-weight: bold; color: #f90;} /*Alphabet filter*/ .alphabet-filter a.letter {display: block; float: left; margin: 0 10px 10px 0; width: 25px; height: 25px; background-color: #424242; text-align: center; line-height: 25px; color: White; font-weight: bold; text-decoration: none; cursor: pointer;} .alphabet-filter a.letter.last {margin-right: 0px;} .alphabet-filter a.letter.selected, .alphabet-filter a.letter:hover {background-color: #ff9900;} .alphabet-filter .big-letter {float: left; width: 60px; font-size: 60px; color: #bdbdbd; font-weight:bold;} .alphabet-filter .list {float: left; width: 220px; padding-left: 10px; margin-top: 20px; border-left: 1px solid #bdbdbd; min-height: 50px;} .alphabet-filter .list a {display: block; margin-bottom: 5px; color: #424242;} .alphabet-filter .list a:hover {color: #ff9900; text-decoration: none; cursor:pointer;} .alphabet-filter .list a.selected {font-weight: bold; color: #f90;} /*Museum type filter*/ #museum-type-filter {position: relative; z-index: 10000;} #museum-type-filter .selection-box {height: 30px; width: 310px; background-color: #424242; line-height: 30px;} #museum-type-filter .selected-item {width: 280px; padding: 0 10px; margin: 0; line-height: 30px; color: White; font-weight: bold; background: url('/areas/national/content/images/dropdown-arrow.png') no-repeat right center; cursor: pointer;} #museum-type-filter .dropdown {position: absolute; right: 0px; top: 31px; width: 490px; padding: 20px; background-color: #424242; display:none;} #museum-type-filter .dropdown .column {float: left; width:150px; padding-right: 20px;} #museum-type-filter .dropdown .column.last {padding: 0;} #museum-type-filter .dropdown a {display: block; margin-bottom: 5px; color: White; cursor: pointer;} #museum-type-filter .dropdown a:hover {color: #ff9900; text-decoration: none;} #museum-type-filter .dropdown a.selected {color: #ff9900; font-weight: bold;} /*Pagination*/ #pagination {margin-top: 10px; margin-bottom: 40px;} #pagination a {display: block; cursor: pointer; color: #424242;} #pagination a:hover {color: #424242;} #pagination a.prev {float: left; width: 80px;} #pagination a.next {float: right; width: 80px; text-align: right;} #pagination .page-numbers {float: left; width: 480px; text-align: center;} #pagination .page-numbers a {display: inline; padding: 0 10px;} #pagination .page-numbers a.selected {font-weight: bold; color: #ff9900;} /*Details site paging*/ .details-paging {position: absolute; right: 0; top: 10px;} .details-paging span {padding: 5px 0 0 0; font-size: 14px;} .details-paging a {padding: 5px;} /*--HOME --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #home .left-column {float: left; width: 640px; margin-top: 30px;} #home .right-column {float: right; width: 310px; margin-top: 30px;} /*Featured*/ #home .featured.exhibitions .item {float: left; margin: 0 20px 0 0;} #home .featured.exhibitions .item.small .museum-and-lasting {position: absolute; bottom: 0; left: 0;} #home .featured.exhibitions .item.last {margin-right: 0px;} #home .featured.author, #home .featured.museum {float: left; width: 310px; margin-right: 20px;} #home .featured.museum {margin-right: 0px;} /*Explore map - Slovenia*/ /*#home .explore-map .container {position: relative; width: 640px; height: 260px;} #home .explore-map .container a {cursor: pointer;} #home .explore-map .container .slovenia-map {position: absolute; top: 0px; left: 0px;} #home .explore-map .container .dot {position: absolute; width: 24px; height:24px; background: url('/areas/national/content/images/map-dot-small.png') no-repeat center center;} #home .explore-map .container .dot.big {background: url('/areas/national/content/images/map-dot-big.png') no-repeat center center;} #home .explore-map .tip {position: absolute; top: 0; left: 410px; width:220px;} #home .explore-map .container .list.left {position: absolute; left:330px; top: 110px;} #home .explore-map .container .list.right {position: absolute; left:490px; top: 110px;} #home .explore-map .container .list ul {width: 140px; list-style: none; margin: 0; padding: 0;} #home .explore-map .container .list a {color: #424242;} #home .explore-map .container .list a:hover, #home .explore-map .container .list a.selected {color: #ff9900; text-decoration: none; font-weight: bold;} #home .explore-map .container #ljubljana {left: 120px; top: 130px;} #home .explore-map .container #maribor {left: 256px; top: 46px;} #home .explore-map .container #celje {left: 210px; top: 98px;} #home .explore-map .container #slovenj-gradec {left: 185px; top: 50px;} #home .explore-map .container #idrija {left: 62px; top: 136px;} #home .explore-map .container #kocevje {left: 162px; top: 198px;} #home .explore-map .container #murska-sobota {left: 314px; top: 26px;} #home .explore-map .container #kranj {left: 104px; top: 96px;} #home .explore-map .container #piran {left: 12px; top: 216px;} #home .explore-map .container #nova-gorica {left: 20px; top: 144px;} #home .explore-map .container #novo-mesto {left: 200px; top: 170px;} #home .explore-map .container #postojna {left: 86px; top: 174px;} #home .explore-map .container #skofja-loka {left: 98px; top: 112px;}*/ /*Last added objects*/ #home .last-added-objects .item {width: 145px; float: left; margin-right: 20px;} #home .last-added-objects .item.last {margin-right: 0;} #home .last-added-objects .item img {width: 145px;} #home .last-added-objects .item span {font-size: 12px;} #home .last-added-objects .item hr {border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid #bdbdbd; width: 40px; height: 1px; margin: 10px 0;} /*Last added activities*/ #home .activity-item {margin-bottom: 0;} #home div.activity-item div.data { height: 80px;} /*Museum of the week*/ #home .museum-of-the-week h3 {margin-top: 10px;} #home .museum-of-the-week img {width:310px; height:145px;} #home .museum-of-the-week .item {padding: 5px 0; border-top: 1px solid #f0f0f0;} #home .museum-of-the-week a.more {float: right;} /*Articles*/ #home .articles .item {margin-top: 20px;} #home .articles .item img {float: left; width:40px; height: 40px;} #home .articles .item .content {float: right; width: 260px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0;} #home .articles h4 {margin-bottom: 0px;} #home .articles p {margin: 10px 0 0 0;} /*--LIST PAGES - COMMON --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .list-page .left-column {float: left; width: 640px; margin-top: 20px;} .list-page .right-column {float: right; width: 310px; margin-top: 20px;} .list-page .weekly-recommendation {height: 320px;} /*vi�ina mora biti ista kot vi�ina bannerja*/ .list-page .weekly-recommendation h4 {margin-bottom: 0px;} .list-page .weekly-recommendation h2 {margin-bottom: 10px;} .list-page .weekly-recommendation span {display: block;} .list-page .weekly-recommendation .address {margin-top: 10px; padding: 0 0 0 40px; background: url('/areas/national/content/images/weekly-recommendation-address.png') no-repeat left 6px;} .list-page .weekly-recommendation .contact {margin-top: 10px; padding: 0 0 0 40px; background: url('/areas/national/content/images/weekly-recommendation-contact.png') no-repeat left 6px;} .list-page .filtered-list h2 {margin-bottom: 0;} .list-page #active-filters {padding: 15px 0 15px 10px; background-color: #fafafa;} .list-page #active-filters .item.first {padding-left: 0px; background: none;} .list-page #active-filters .item {display: inline; background: url('/areas/national/content/images/list-separator.png') no-repeat left center; padding: 0 20px;} .list-page #active-filters .item span.filter-type {font-size: 12px; text-transform: uppercase;} .list-page #active-filters .item span.filter-value {margin-left: 10px;} .list-page #active-filters a {color: #ff9900; cursor:pointer;} .list-page .filtered-list #results {margin-top: 20px;} .list-page .filtered-list #results .item {margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0;} .list-page .filtered-list #results .item img {float: left; width: 145px; height: 145px;} .list-page .filtered-list #results .item .content {float: right; padding-left: 20px; width: 475px;} .list-page .filtered-list #results .item h3 {margin-bottom: 0;} /*--COLLECTIONS --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*Collage*/ #collections .collage {position: relative; height: 240px; width: 970px; margin-top: 20px; overflow: hidden;} #collections .collage img {position: absolute;} #collections .collage .object1 {top: 0; left: 0; width: 240px; height: 240px;} #collections .collage .object2 {top: 0; left: 240px; width: 100px; height: 120px;} #collections .collage .object3 {top: 0; left: 340px; width: 200px; height: 120px;} #collections .collage .object4 {top: 0; left: 540px; width: 100px; height: 120px;} #collections .collage .object5 {top: 0; left: 640px; width: 240px; height: 240px;} #collections .collage .object6 {top: 0; left: 880px; width: 90px; height: 120px;} #collections .collage .object7 {top: 120px; left: 240px; width: 200px; height: 120px;} #collections .collage .object8 {top: 120px; left: 440px; width: 200px; height: 120px;} #collections .collage .object9 {top: 120px; left: 880px; width: 90px; height: 120px;} #collections .collage .banner-gradient {position: absolute; bottom: -30px; left: 0; z-index: 1;} #collections .collage .caption {position: absolute; right: 20px; bottom: 20px; color: White; font-size: 26px; font-weight: bold; z-index: 2;} /*Last added, most-viewed, object-search*/ #collections .last-added {width: 310px; float: left; margin-right: 20px;} #collections .most-viewed {width: 310px; float: left;} #collections .object-search form {height: 280px; margin-top: 70px; margin-bottom: 20px;} /*Object search*/ #collections .object-search label {display: block; float: left; width: 90px; text-transform: uppercase; font-size: 12px; color: #999; line-height: 30px;} #collections .object-search input[type="text"] {float: right; width: 190px; height:28px; padding: 0 10px; border: 1px solid #bdbdbd; margin-bottom: 20px;} #collections .object-search input[type="submit"] {border: none; width: 80px; height: 30px; background-color: #bdbdbd; color: White; font-weight: bold; text-transform: uppercase; float: right; cursor: pointer;} #collections .object-search input[type="submit"]:hover {background-color: #ff9900;} /*Collection item*/ .collection-small-item {float:left; margin-right: 20px; width: 310px; margin-bottom: 40px;} .collection-small-item .objects {float: left; width: 100px; border-right: 1px solid #bdbdbd; height: 90px; overflow: hidden;} .collection-small-item img {float: left; margin-right: 10px; margin-bottom: 10px; width:40px; height:40px;} .collection-small-item .data {float: left; width: 199px; padding-left: 10px;} .collection-small-item .data h3 {margin-bottom: 0;} /*--AUTHORS --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*Collage*/ #authors .collage {position: relative; height: 240px; width: 640px; overflow: hidden;} #authors .collage img {position: absolute;} #authors .collage .author1 {top: 0; left: 0; width: 240px; height: 240px;} #authors .collage .author2 {top: 0; left: 240px; width: 100px; height: 120px;} #authors .collage .author3 {top: 0; left: 340px; width: 200px; height: 120px;} #authors .collage .author4 {top: 0; left: 540px; width: 100px; height: 120px;} #authors .collage .author5 {top: 120px; left: 240px; width: 200px; height: 120px;} #authors .collage .author6 {top: 120px; left: 440px; width: 200px; height: 120px;} #authors .collage .author7 {top: 240px; left: 0; width: 200px; height: 120px;} #authors .collage .author8 {top: 240px; left: 200px; width: 140px; height: 120px;} #authors .collage .author9 {top: 240px; left: 340px; width: 200px; height: 120px;} #authors .collage .author10 {top: 240px; left: 540px; width: 100px; height: 120px;} #authors .collage .banner-gradient {position: absolute; bottom: -30px; left: 0; z-index: 1;} #authors .collage .caption {position: absolute; right: 20px; bottom: 20px; color: White; font-size: 26px; font-weight: bold; z-index: 2;} /*Featured authors*/ #authors .featured.author {float: left; width: 310px; margin-right: 20px;} #authors .featured.author.last {margin-right: 0px;} /*Other authors*/ #authors .other-authors .item {float: left; margin-right: 20px; margin-bottom: 20px;} #authors .other-authors .item h4 {margin: 5px 0 0 0;} /*--ACTIVITIES --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #activities .left-column {float: left; width: 310px;} #activities .right-column {float: right; width: 640px;} #activities h2.top-heading {margin-top: 20px; margin-bottom: 0px;} /*--SINGLE PAGES - COMMON --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .single-page .left-column {float: left; width: 310px; margin-top: 20px;} .single-page .right-column {float: right; width: 640px; margin-top: 20px;} .single-page .document-image {width: 310px;} /*Document information*/ .single-page .information { overflow: hidden; } .single-page .information .address span {display: block;} .single-page .information .address .name {font-weight: bold;} .single-page .information table {padding: 0; margin-top: 30px; border-collapse:collapse;} .single-page .information table td.subtext { width: 100px; } .single-page .information table td p.wrap_longwords { width: 150px;margin: 0;padding: 0;} .single-page .information .map {margin-top: 30px; width: 310px; height: 200px;} /*Hours and admission table*/ .single-page table.hours-admission {width: 100%} .single-page table.hours-admission td.left {width: 40%; text-align: left;} .single-page table.hours-admission td.right {width: 60%; text-align: right;} .single-page .main {float: left; width: 475px; margin-right: 20px;} .single-page .side {float: right; width: 145px;} /*Museums list*/ .single-page .museums-list .item {margin-bottom: 15px;} .single-page .museums-list h4 {margin-bottom: 0px;} /*Usual lists*/ .single-page .usual-list .item {margin-top: 20px;} .single-page .usual-list .item img {float: left; width: 40px; height: 40px; margin-right: 10px;} .single-page .usual-list .content {float: left; width: 425px;} .single-page .usual-list .item h3 {margin-bottom: 0;} .single-page .usual-list .item p {border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; margin-bottom: 0px;} /*Wider usual list*/ .single-page .wider-usual-list .item {margin-top: 20px;} .single-page .wider-usual-list .item img {float: left; width: 40px; height: 40px;} .single-page .wider-usual-list .content {float: right; width: 590px;} .single-page .wider-usual-list .item h3 {margin-bottom: 0;} .single-page .wider-usual-list .item p {border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; margin-bottom: 0px;} .single-page .collections-list .item {margin-right: 20px; width: 475px; margin-bottom: 40px;} .single-page .collections-list .item .objects {float: left; width: 200px; border-right: 1px solid #bdbdbd; height: 90px; overflow: hidden;} .single-page .collections-list .item img {float: left; margin-right: 10px; margin-bottom: 10px;} .single-page .collections-list .item .data {float: left; width: 263px; padding-left: 10px;} .single-page .collections-list .item .data h3 {margin-bottom: 0;} /*--1 COLLECTION, 1 CITY --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #one-collection .about{margin-top: 20px;} #one-collection .about .image {float: left; width: 310px; height: 200px;} #one-collection .about .desc {float: right; width: 640px;} /*--1 CITY --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #city #city-banner {position: relative; width: 970px; height: 290px; margin-top: 20px;} #city #city-banner .gradient {position: absolute; bottom: 0; left: 0} #city #city-banner .name {display: block; position: absolute; bottom: 20px; right: 20px; color: White; font-size: 26px; font-weight: bold;} #city #city-exhibitions {width: 475px; float: right;} #city #city-museums {width: 475px; float: left;} #city.single-page .collections-list .item {float: left;} /*--1 OBJECT --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #one-object h1 {margin: 20px 0;} #one-object #about-object {position: relative} #one-object .object-navigation {position: absolute; top: 7px; right: 0;} #one-object #object-image {float: left; width: 475px; text-align: center;} #one-object #object-data {float: right; width: 475px;} #one-object #object-data .more-images img {width: 50px; height: 50px; margin-right: 5px; cursor:pointer;} #one-object #object-data table {width: 100%; margin-top: 20px; border-collapse: collapse;} #one-object #object-data table .subtext {width: 180px; text-transform: uppercase; font-size: 12px;} #one-object #object-data table td {border-bottom: 1px solid #f0f0f0; padding: 3px 0;} #one-object #author-information img {float: left; width: 145px; height: 145px;} #one-object #author-information .content {float: right; width: 475px;} /*--1 ARTICLE --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #one-article .read-also .item {margin-top: 20px;} #one-article .read-also .item img {float: left; width: 40px; height: 40px;} #one-article .read-also .content {float: right; width: 590px;} #one-article .read-also .item h3 {margin-bottom: 0;} #one-article .read-also .item p {border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; margin-bottom: 0px;} /*--1 ACTIVITY --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #one-activity .about {margin-top: 20px;} #one-activity .about h1 {margin-bottom: 20px;} #one-activity .about .img-and-desc {float: left; width: 700px;} #one-activity .about .img-and-desc img {float: left; margin: 0 20px 10px 0;} #one-activity .about .img-and-desc p {margin-top: 0;} #one-activity .about .data {width: 220px; float: right; background-color: #f8f8f8; border-top: 1px solid #ccc; padding: 0 10px 50px 10px; position: relative;} #one-activity .about .data span {display: block;} #one-activity .about .data span.big {font-size: 18px; font-weight: bold;} #one-activity .about .data span.subtext {margin-top: 10px;} #one-activity .query-button {display: block; position: absolute; bottom: 0; left: 0; width: 240px; height: 40px; line-height: 40px; padding: 0 10px 0 60px; color: white; font-weight: bold; font-size: 16px; text-decoration: none; background: url('/areas/national/content/images/activity-query-button.png') no-repeat;} #one-activity .left-column {width: 310px; float:left;} #one-activity .right-column {width: 640px; float: right;} #one-activity .left-column .information .map {display: none;} #reservation-box {display:none; z-index:10000; background-color: White; width:610px; min-height: 200px; padding-bottom: 20px;} #reservation-box .top-bar {background-color: #f8f8f8; height: 80px; padding: 20px;} #reservation-box .top-bar img {float: left; width: 80px; height: 80px;} #reservation-box .top-bar .content {float: right; width: 470px;} #reservation-box input[type="text"] {height: 30px; line-height: 30px; border: 1px solid #bdbdbd; margin-bottom: 10px; padding: 0 10px;} #reservation-box input[type="text"]:focus {border-color: #999} #reservation-box label {display: block; margin-bottom: 5px;} #reservation-box select {width: 50px; line-height: 30px; margin-bottom: 10px; padding: 5px;} #reservation-box select option {text-align: left;} #reservation-box .date-and-time {float: left; width: 190px; padding: 0 30px 0 20px; margin-top: 20px;} #reservation-box .contact-info {float: right; width: 320px; padding: 0 20px 0 29px; border-left: 1px solid #ccc; margin-top: 20px;} #reservation-box .date-and-time input[type="text"] {width: 168px;} #reservation-box .contact-info input[type="text"] {width: 298px;} #reservation-box input[type="submit"] {display: block; float: right; margin: 10px 20px 0 0; border: none; width: 240px; height: 40px; line-height: 40px; padding: 0 10px 0 60px; color: white; font-weight: bold; font-size: 16px; background: url('/areas/national/content/images/activity-query-button.png') no-repeat; cursor:pointer;} #reservation-box a.close {float: left; display: block; height: 40px; line-height: 40px; cursor: pointer; margin: 10px 0 0 20px; font-weight: bold;} /*Date picker*/ .ui-datepicker {background-color: #f8f8f8; border: 1px solid #999; width: 188px; border-top: none;} .ui-datepicker-header {background-color: #f2f2f2; position: relative; height: 30px;} .ui-datepicker-prev {position: absolute; left: 0; bottom: 5px; display: block; width: 20px; height: 20px; background: url('/areas/national/content/images/filter-name-arrow-left.png') no-repeat center center; cursor: pointer;} .ui-datepicker-next {position: absolute; left: 168px; bottom: 5px;display: block; width: 20px; height: 20px; background: url('/areas/national/content/images/filter-name-arrow-right.png') no-repeat center center; cursor: pointer;} .ui-datepicker-prev span, .ui-datepicker-next span {display: none;} .ui-datepicker-title {position: absolute; left: 20px; bottom: 5px; width:148px; text-align: center; font-weight: bold;} .ui-datepicker-calendar th {width: 25px; background: none; color: #3299bb} .ui-datepicker-calendar td {width: 25px; text-align: center;} .ui-datepicker-calendar td:hover {background-color: #ff9900;} .ui-datepicker-calendar td a {color: #424242; text-decoration: none; font-weight: bold;} .ui-datepicker-calendar td:hover a {color: White;} .ui-datepicker-calendar td.ui-datepicker-current-day {background-color: #e5e5e5;} .ui-datepicker-calendar td.ui-datepicker-other-month {visibility: hidden; background: none;} /*--SEARCH --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #search .left-column {float: left; width: 640px; margin-top: 20px;} #search .right-column {float: right; width: 310px; margin-top: 20px;} /*Basic search form*/ #search .search-form {margin: 30px auto 30px auto; width: 540px; position: relative;} #search .search-form input[type="text"] {height:28px; border: 1px solid #bdbdbd;} #search .search-form label.keyword {display: block; color: #999;} #search .search-form input[type="text"]#keyword {width: 498px; padding: 0 30px 0 10px;} #search .search-form input[type="submit"].keyword {position: absolute; right: 9px; top: 27px; display: block; height: 16px; width: 16px; border: none; background: url('/areas/national/content/images/page-search-button.png') no-repeat; cursor: pointer;} /*Advanced search form*/ #search .search-form .advanced {margin-top: 20px; display: none;} #search .search-form .advanced .field {float: left; width: 250px; margin-right: 40px;} #search .search-form .advanced .field.last {margin-right: 0;} #search .search-form .advanced input[type="text"] {float: right; width: 410px; height: 28px; padding: 0 10px; margin-bottom: 10px;} #search .search-form .advanced .field input[type="text"] {width: 120px;} #search .search-form .advanced label {float: left; margin-bottom: 10px; height: 30px; line-height: 30px; text-transform: uppercase; font-size: 12px;} #search .search-form .advanced input[type="submit"] {border: none; width: 80px; height: 30px; background-color: #bdbdbd; color: White; font-weight: bold; text-transform: uppercase; float: right; cursor: pointer;} #search .search-form .advanced input[type="submit"]:hover {background-color: #ff9900;} #search .search-form a.show-hide-advanced .hide {display: none; background: url('/areas/national/content/images/advanced-search-arrow-up.png') no-repeat right center; padding-right: 15px;} #search .search-form a.show-hide-advanced .show {background: url('/areas/national/content/images/advanced-search-arrow-down.png') no-repeat right center; padding-right: 15px;} #search .search-form a.show-hide-advanced {float: right; cursor: pointer; margin-top: 10px;} #search .search-form a.show-hide-advanced:hover {text-decoration: none;} /*Search results*/ #search #results .item {margin-bottom: 20px;} #search #results .item img {float: left; width: 60px; height: 60px; margin-right: 20px;} #search #results .item .content {float: left; width: 540px;} /*Results count*/ #search .left-column #results-count {position: absolute; top: 3px; right: 0; font-weight: bold;} #search .left-column #results-count .subtext {font-size: 12px; font-weight: normal;} /*Basic search filters*/ #search .show a {display: block; height: 30px; width: 290px; padding-left: 20px; color: #424242; font-weight: bold; line-height: 30px; cursor:pointer;} #search .show a.selected {color: White; background-color: #424242;} #search .show a:hover {text-decoration: none; color: #ff9900;} /*--CALENDAR --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #calendar .left-column {float: left;width: 310px;} #calendar .right-column {float: right; width: 644px;} #calendar h2.full {margin-top: 20px;} #calendar .month-picker a {display: block; height: 30px; width: 170px; padding-left: 20px; color: #424242; font-weight: bold; line-height: 30px;} #calendar .month-picker a.selected {color: White; background-color: #424242;} #calendar .month-picker a:hover {text-decoration: none; color: #ff9900;} #calendar .day-picker a { display: block; float: left; width: 73px; height: 60px; margin: 0 10px 10px 0; background-color: #f7f7f7; color: #424242; text-decoration: none; font-size: 20px; font-weight: bold; padding: 0 5px; } #calendar .day-picker a.empty {visibility: hidden;} #calendar .day-picker a.has-data {background-color: #40c2ed; color: White;} #calendar .day-picker a.has-data:hover, #calendar .day-picker a.selected {background-color: #ff9900;} #calendar #results .item {margin-bottom: 20px;} #calendar #results .item img {float: left; width:210px; height: 140px;} #calendar #results .item .content {float: right; width: 425px;} #calendar #results .item .content h3 {margin-bottom: 0px;} #calendar #results .item .content p {padding-bottom: 20px; margin-bottom: 0; border-bottom: 1px solid #f0f0f0;min-height: 65px;} #calendar div.calendar-filters { margin-top: 10px;} #calendar .menu {height: 30px; background-color: #424242;} #calendar .menu a.item {display: block; float: left; height: 30px; width: 90px; line-height: 30px; margin-left: 10px; text-align: center; color: White;} #calendar .menu a.item.selected, #calendar .menu a.item:hover {background-color: White; color: #424242; text-decoration:none; border-top: 3px solid #ff9900; margin-top: -3px; font-weight: bold; cursor:pointer;} #calendar #active-filters {padding: 15px 0 15px 10px; background-color: #fafafa;} #calendar #active-filters .item.first {padding-left: 0px; background: none;} #calendar #active-filters .item {display: inline; background: url('/areas/national/content/images/list-separator.png') no-repeat left center; padding: 0 20px;} #calendar #active-filters .item span.filter-type {font-size: 12px; text-transform: uppercase;} #calendar #active-filters .item span.filter-value {margin-left: 10px;} #calendar #active-filters a {color: #ff9900; cursor:pointer;} /*--ABOUT --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #about .left-column {float: left; width: 640px; margin-top: 20px;} #about .right-column {float: right; width: 310px; margin-top: 20px;} #about .description .intro-text {font-size: 18px; font-style:italic; line-height: 25px;} #about .contact-info img.logo {float: left; padding: 0 20px;} #about .contact-info .content {float: right; width: 210px;} #about .contact-info .content h4 {margin: 0;} #about .contact-info span {display: block;} #about .contact-info span.subtext {margin-top: 10px;} #about .mobile-apps div {position: relative; margin-bottom: 40px;} #about .mobile-apps .store-button {position: absolute; display: block; right: -20px; top: 75px; width: 110px; height: 50px; color: White; padding-left: 40px; text-decoration: none;} #about .mobile-apps .store-button span.download-from {display: block; font-size: 12px; padding-top: 5px;} #about .mobile-apps .store-button span.store-name {display: block; font-size: 16px; font-weight: bold;} #about .mobile-apps .store-button.apple {background: #3299bb url('/areas/national/content/images/apple-store.png') no-repeat 10px center; } #about .mobile-apps .store-button.android {background: #3299bb url('/areas/national/content/images/google-play.png') no-repeat 10px center; } #about .mobile-apps .store-button.windows {background: #3299bb url('/areas/national/content/images/windows-store.png') no-repeat 10px center; } #about .mobile-apps .app-name {position: absolute; right: 0px; top: 50px; width: 130px;} /*--STYLES FOR VALIDATION HELPERS --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .field-validation-error {color: #ff0000;} .field-validation-valid {display: none;} .input-validation-error {border: 1px solid #ff0000; background-color: #ffeeee;} .validation-summary-errors {font-weight: bold; color: #ff0000;} .validation-summary-valid {display: none;} .error {color: #333; background: #ffe5e5; border:1px solid #990000; margin:10px; padding:10px;} .success {color: #333; background: #e5ffe5; border:1px solid Green; margin:10px; padding:10px;} .infomsg { padding: 10px 10px; font-size: 14px; margin-bottom: 20px; -webkit-border-radius: 3px; border-radius: 3px; border-style: solid; border-width: 1px; color: White; background-color: #339bb9; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #339bb9); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #339bb9 #339bb9 #22697d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .infomsg p {margin-right: 20px; margin: 0;} /* SHOW SOCIAL POST --------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #social-post-box {display:none; z-index:10000; background-color: White; width:600px; padding: 20px; max-height: 400px; overflow-x: hidden; overflow-y:auto; position: relative;} #social-post-box h4 {margin: 0;} #social-post-box .avatar {float: left; margin-right: 10px;} #social-post-box a.close {position:absolute; right: 20px; top: 20px; cursor: pointer;} #cookies-warning-box { text-align: center; position:fixed; bottom: 0; left: 0; width: 100%; height: auto; padding: 0; border: 1px solid #bf0000; background: #fef0cd; z-index: 9999; opacity: 0.9; } #cookies-warning-box p { margin: 0;padding: 3px;} #cookies-warning-box p.cookies-title{padding: 5px; background: rgb(253, 216, 149);font-weight: bold;} #document-main-image { margin-bottom: 15px; } #document-other-images a{ cursor: pointer;} div.document-tags { padding: 20px 0 0 0; } a.document-tag { display: inline-block; padding: 3px; padding-right: 10px; padding-left: 10px; background: #c9e9f9; color: black; margin-right: 5px; margin-bottom: 3px; cursor: pointer; padding-bottom: 5px; margin-top: 3px; } p.document-copyright { padding-top: 15px; } #museum-facilities { border-bottom: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4; margin-top:15px; margin-bottom: 10px; display:inline-block; width:100%; } #museum-facilities a.museum-facility { line-height: 50px; margin-top: 10px; margin-bottom: 10px; display: block; float: left; margin-right: 10px; margin-left: 5px; font-weight: bold; } #museum-facilities i.museum-facility { width: 50px; height: 50px; line-height: 50px; margin-top: 10px; margin-bottom: 10px; float: left; display: block; cursor: pointer; } #museum-facilities i.parking { background: url("/areas/Cms/Content/images/facilities.png") -490px -70px; } #museum-facilities i.wifi { background: url("/areas/Cms/Content/images/facilities.png") -370px -10px; } #museum-facilities i.disabled { background: url("/areas/Cms/Content/images/facilities.png") -10px -70px; } #museum-facilities i.shop { background: url("/areas/Cms/Content/images/facilities.png") -10px -130px; } #museum-facilities i.cafe { background: url("/areas/Cms/Content/images/facilities.png") -430px -70px; } #museum-facilities i.library { background: url("/areas/Cms/Content/images/facilities.png") -70px -130px; } #museum-facilities i.rent { background: url("/areas/Cms/Content/images/facilities.png") -130px -130px; } #museum-facilities i.lift { background: url("/areas/Cms/Content/images/facilities.png") -490px -10px; } #museum-facilities i.luggage { background: url("/areas/Cms/Content/images/facilities.png") -130px -10px; } #museum-facilities i.cloackroom { background: url("/areas/Cms/Content/images/facilities.png") -70px -10px; } #museum-facilities i.parenting { background: url("/areas/Cms/Content/images/facilities.png") -250px -70px; } #museum-facilities i.membership { background: url("/areas/Cms/Content/images/facilities.png") -430px -10px; } #museum-facilities i.atm { background: url("/areas/Cms/Content/images/facilities.png") -10px -10px; } #museum-facilities i.lostfound { background: url("/areas/Cms/Content/images/facilities.png") -310px -10px; } #museum-facilities i.pets { background: url("/areas/Cms/Content/images/facilities.png") -70px -70px; } /* To be used with cookieCuttr by Chris Wharton (http://cookiecuttr.com) */ .cc-cookies { position:fixed; width: 90%; left: 0; top: 0; padding: 0.5em 5%; background: #565656; background: rgba(86,86,86,0.95); color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 -1px 0 rgba(0,0,0,0.35); z-index: 99999; text-align: center; color: #fff; } .cc-cookies a, .cc-cookies a:hover { color: #fff; text-decoration: underline; } .cc-cookies a:hover { text-decoration: none; } .cc-overlay { height: 100%; padding-top: 25%; } .cc-cookies-error { float: left; width: 90%; text-align: center; margin: 1em 0 2em 0; background: #fff; padding: 2em 5%; border: 1px solid #ccc; font-size: 18px; color: #333; } .cc-cookies a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { display: inline-block; color: #fff; text-decoration: none; background: #7DAF3B; padding: 0.5em 0.75em; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,0.25); text-shadow: 0 -1px 0 rgba(0,0,0,0.35); -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; } .cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline { background: #af3b3b; margin-left: 0.5em; } .cc-cookies a.cc-cookie-reset { background: #f15b00; } .cc-cookies a:hover.cc-cookie-accept, .cc-cookies-error a:hover.cc-cookie-accept, .cc-cookies a:hover.cc-cookie-decline, .cc-cookies-error a:hover.cc-cookie-decline, .cc-cookies a:hover.cc-cookie-reset { background: #000; -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; } .cc-cookies-error a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-decline { display: block; margin-top: 1em; } .cc-cookies.cc-discreet { width: auto; padding: 0.5em 1em; left: auto; top: auto; } .cc-cookies.cc-discreet a.cc-cookie-reset { background: none; text-shadow: none; padding: 0; text-decoration: underline; } .cc-cookies.cc-discreet a:hover.cc-cookie-reset { text-decoration: none; } @media screen and (max-width: 768px) { .cc-cookies a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { display: block; margin: 1em 0; } } @media screen and (max-width: 480px) { .cc-cookies { position: relative; float: left; } }