/* Theme Name: Starkers Theme URI: http://viewportindustries.com/products/starkers Description: The totally nude Wordpress theme! Version: 4.0 Author: Elliot Jay Stocks & Keir Whitaker Author URI: http://viewportindustries.com Tags: starkers, naked, clean, basic */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/reset.css"; div, article, section, header, footer, nav, li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; /* Don't forget to style your body to avoid user overrides */ } html { overflow:auto; } html, body { height:100%; } body { background:#2d4243; } #content { position:absolute; width:810px; height:100%; left:50%; margin-left:-405px; } #logo { float:left; width:122px; height:136px; margin-right:20px; } #logo a { display:block; width:122px; height:136px; background:#fff url('imgs/logo.png') no-repeat; } header { margin-top:36px; } .home header { display: none; } .home { overflow: hidden;} .intro-nav { position: absolute; font-size: 26px; text-align: left; width: 256px; top: 150px; left: 50%; margin-left: -128px; z-index:999; } .intro-nav li { border-bottom:1px solid #ddd; padding-bottom: 2px; width: 100%; margin-bottom: 5px; } .intro-nav a { color: #fff; } #llave { text-align: center; margin-top: 40px; } .home #llave { display: none; } #amp { position: absolute; top: 100px; width: 100%; height: 402px; } #amp1, #amp2 { position: absolute; top: 0; left: 50%; margin-left: -204px; width: 408px; height: 402px; z-index: 1; } #amp1 { background: url('imgs/amp1.png') no-repeat; } #amp2 { background: url('imgs/amp2.png') no-repeat; } #nav-container { float:left; width:554px; height:136px; background:#fff url('imgs/logo-bg.png') no-repeat; } .breakfast #nav-container, .wc #nav-container, .pets #nav-container, .booking #nav-container, .special-offers #nav-container { width:280px; } nav { float:left; margin-left:109px; margin-top:18px; width:144px; } .subnav { display:none; float:left; margin-left:50px; margin-top:18px; width:228px; } .page-template-room-php .subnav { display:inline; } nav li, .subnav li { border-bottom:1px solid #bbb; line-height: 1.5; } nav li a, .subnav li a { display:block; width:100%; } nav li a:hover, .subnav li a:hover { background:url('imgs/key.png') no-repeat right 5px; } .page-template-room-php #rooms-btn, .standard-double-room #standard-double-room-btn, .balcony-double-room #balcony-double-room-btn, .superior-balcony-double-room #superior-balcony-double-room-btn, .gallery-suite #gallery-suite-btn, .booking #booking-btn, .special-offers #special-offers-btn, .location #location-btn { font-weight:bold; background:url('imgs/key.png') no-repeat right 5px; } .map-link { display:none; } .map-link a:hover, .map-link a.active { background:url('imgs/map-pin.png') no-repeat right 3px !important; } .standard-double-room .standard-map-btn, .balcony-double-room .balcony-map-btn, .superior-balcony-double-room .superior-map-btn, .gallery-suite .gallery-map-btn { display:block; } #buttons-container { float:right; width:104px; height:136px; } #buttons { width:84px; padding:6px 10px 2px 10px; background:#fff; } #buttons li { float:left; width:28px; height:28px; } #buttons li a { width:28px; height:28px; display:block; } .breakfast-btn { background:url('imgs/kitchen.png') no-repeat; } .wc-btn { background:url('imgs/wc.png') no-repeat; } .pets-btn { background:url('imgs/pets.png') no-repeat; } .fb-btn { background:url('imgs/fb.png') no-repeat; } .ta-btn { background:url('imgs/ta.png') no-repeat; } .instagram-btn { background:url('imgs/instagram.png') no-repeat; } #video-container { background:#fff; height:28px; margin-top:8px; } #video-btn { display:block; position:absolute; width:23px; height:14px; top:50%; left:50%; margin-left:-11px; margin-top:-7px; background:url('imgs/video.png') no-repeat; } #video-btn:hover, .video #video-btn { background-position:-23px; } #buttons li a:hover, .breakfast .breakfast-btn, .wc .wc-btn, .pets .pets-btn { background-position:-28px; } #lang-nav-container { margin-top:8px; } #lang-nav-container select { border: 0 none; background: #fff; width: 100%; height: 28px; } .maximage-nav { position:absolute; right:0; bottom:112px; } .next-img { display:block; width:82px; height:127px; background:url('imgs/next.png') no-repeat; } /* Rooms */ .room-container { position:absolute; bottom:36px; right:0; } .room-info { width:250px; } .room-info, .room-nav, .room-map { padding:23px 52px 5px 23px; } .room-info, .room-map { background:#fff; } .room-map { margin-top:36px; position:relative; float:right; padding-bottom:23px; } .room-info h2, .room-info p { margin-bottom:18px; } .room-info img { vertical-align:baseline; } .close-btn, .info-btn, .close-map { position:absolute; top:14px; right:14px; width:26px; height:26px; } .close-btn, .close-map { background:url('imgs/close.png') no-repeat; } .info-btn { background:url('imgs/info.png') no-repeat; } .room-nav, .room-map { display:none; } .page-template-room-php .next-img { } /* Breakfast */ .breakfast-info { background:#fff; margin-top:36px; float:right; padding:23px 52px 5px 23px; } .breakfast-info h2, .breakfast-info div { float:left; } .breakfast-info h2 { width:160px; font-weight:bold; } /* Pets */ .pets-info { background:#fff; margin-top:36px; float:right; padding:23px 52px 5px 23px; } .pets-info p { margin-bottom:18px; } /* Booking */ .booking-info { background:#fff; margin-top:36px; padding:0; } /* Special offers */ .offers-info { background:#fff; margin-top:36px; float:right; padding:23px 52px 5px 23px; } /* Location */ .location-info { background:#fff; margin-top:36px; float:right; padding:23px 52px 23px 23px; } .location-info p { margin-bottom:18px; } .location-info a { text-decoration:underline; } .location-nav { padding-bottom:23px; border-bottom:1px solid #ccc; margin-bottom:23px; } .location-nav div { float:left; width:90px; margin-right:15px; padding-top:9px; } .location-nav a { padding-top:14px; text-decoration:none; } .location-nav a:hover, .location-nav a.active { background:url('imgs/key.png') no-repeat left top; } .address-info div, .parking-info div, .how-to-arrive-info div { float:left; width:215px; margin-right:30px; } .eixample-info, .parking-info, .map-info, .barcelona-tips-info, .how-to-arrive-info, .access-and-baggage-info { display:none; } .eixample-img { float:left; width:330px; margin-right:30px; } .eixample-img img { width:300px; } .eixample-text { float:left; width:330px; margin-right:30px; } .map-info { position:relative; } .mapa { text-align:center; } .map-info a { text-decoration:none; display:block; position:absolute; bottom:0; right:23px; } .map-info a:hover { text-decoration:underline; } /* Video */ .vid { margin-top:36px; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ @font-face { font-family: 'sterlingdisplayroman'; src: url('fonts/sterlingdisplay-htf-roman-webfont.eot'); src: url('fonts/sterlingdisplay-htf-roman-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sterlingdisplay-htf-roman-webfont.woff') format('woff'), url('fonts/sterlingdisplay-htf-roman-webfont.ttf') format('truetype'), url('fonts/sterlingdisplay-htf-roman-webfont.svg#sterlingdisplayroman') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Chronicle'; src: url('fonts/ChronicleDisp-Semibold.eot'); src: local('☺'), url('fonts/ChronicleDisp-Semibold.woff') format('woff'), url('fonts/ChronicleDisp-Semibold.ttf') format('truetype'), url('fonts/ChronicleDisp-Semibold.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Chronicle'; src: url('fonts/ChronicleDisp-Black.eot'); src: local('☺'), url('fonts/ChronicleDisp-Black.woff') format('woff'), url('fonts/ChronicleDisp-Black.ttf') format('truetype'), url('fonts/ChronicleDisp-Black.svg') format('svg'); font-weight: bold; font-style: normal; } body, input, textarea { font:13px/18px sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight:normal; } a { color:#000; text-decoration:none; } #nav-container { font-family:'Chronicle',serif; line-height:1; } nav { text-transform:uppercase; } nav a { color:#000 !important; } .map-link { font-style:italic; padding-left:10px; } .map-link a.active { font-weight:bold; } .room-info h2 { font-weight:bold; text-transform:uppercase; } .location-nav a.active { font-weight:bold; } #intro { color: #fff; font-family: 'sterlingdisplayroman',serif; font-size: 26px; line-height: 1.35; text-align: center; font-weight: lighter; margin:0 auto; margin-top: 40px; width: 795px; } .home #intro { display: none; margin-top: 140px; } /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /* 400 and up */ @media screen and (min-width:400px) { { /* Place your styles here for all widths greater than 400px */ } } /* Retina Display */ @media screen and (-webkit-min-device-pixel-ratio:2) { { /* Place your styles here for all 'Retina' screens */ } }