/* Theme Name: Namaste Apartment Theme URI: http://courchevelnamastes.com/ Description: A bespoke theme created for courchevelnamaste.com Version: 1.0 Author: Andrew McCullough */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/reset.css"; * {box-sizing: border-box;} 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 */ } ::-moz-selection { background:#ff0; color:#333; } ::selection { background:#ff0; color:#333; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @font-face { font-family: 'swiss thin'; src: url('../type/Swiss721BT-Thin.eot'); src: local('Swiss 721 Thin'), local('Swiss 721 Thin'), url('../type/Swiss721BT-Thin.otf') format('opentype'); } @font-face { font-family: 'swiss Roman'; src: url('../type/Swiss721BT-Roman.eot'); src: local('Swiss 721'), local('Swiss 721'), url('../type/Swiss721BT-Roman.otf') format('opentype'); } @font-face { font-family: 'blok-regular'; src: url('type/Blokletters-Potlood.eot'); src: local('Blokletters Potlood Potlood'), local('Blokletters-Potlood'), url('type/Blokletters-Potlood.ttf') format('truetype'); } /* 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) */ body, input, textarea { /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ font-family: "omnes-pro", Arial, Helvetica, sans-serif; color:#fff; font-size:14px; font-weight:200; } h1, h2, h3, h4, h5, h6 { font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ font-family: "jubilat" ,Georgia, "Times New Roman", Times, serif ,'swiss thin' , Arial, Helvetica; font-weight:400; color: #fff; margin:0; text-transform: uppercase; } h1 ,h2 {font-size: 20px; line-height: 20px; } a{text-decoration:none; color:inherit;} a:hover{color:#9CF;} /* HELPER STYLES */ .row{position:relative; width:100%;} .centered-h{text-align: center;} /* Namaste Styles */ #wrapper{width:100%; overflow: hidden; height:auto;} /* MENU */ .site-header{ display:inline-block; text-align: center; width:100%; height:120px;} #site-navigation{display: inline-block; text-align: center; height: 67px; background: rgba(50, 50, 40 ,.74); padding: 0 40px; width: 100%; } .menu-main-menu-container{display:inline-block; vertical-align: top; margin-top:25px;} ul#menu-main-menu.menu{display: inline-block; vertical-align: top;} .menu-main-menu-container li.menu-item { display:inline-block; vertical-align: top; text-align: left; height:100%; overflow:visible;} .menu-main-menu-container li.menu-item:hover >a{color: #f60;} .menu-main-menu-container p.menu-divider{display:inline-block; vertical-align: top; text-align: center; padding:0 5px; font-size:16px; } .menu-main-menu-container li.menu-item:last-child p.menu-divider{display: none;} .menu-main-menu-container li.menu-item:hover .sub-menu{display:block;} .menu-main-menu-container li.menu-item a { font-family:"jubilat" , Georgia,"Times New Roman",Times,serif;color:#fff; font-weight: 400; line-height:16px; font-size:16px; text-transform: uppercase;} .menu-main-menu-container .sub-menu li.menu-item a{ background-color: #fff; width: 124px; color: #665; display: inline-block; padding: 2px 3px 0;} .main-menu-container .current-page-item{} .menu-main-menu-container .sub-menu{ display:none; text-align: left;} .menu-main-menu-container .sub-menu li.menu-item{display: block; max-width:50px;} .menu-main-menu-container .sub-menu p.menu-divider{display:none;} .menu-main-menu-container li.menu-item.current-menu-item > a{color:#ff9900;} .nav-toggle-container{display:none; width:80px;} img{width:100%;} #namaste-logo-container{position:absolute; top:110px; left:20px; width:200px; } .home #namaste-logo-container{position:absolute; top:150px; left:35px; width:250px; z-index:200; } #namaste-logo-container:hover{cursor:pointer; } #content { border-left: 2px dotted #FFFFFF; display: none; margin: 0 0 0 230px; overflow: hidden; position: relative; top: 0; width:100%; max-width: 850px; } #content_box {background:rgba(50, 50, 40, 0.75); float: left; height: auto; margin: 120px 0 0; overflow: visible; padding: 30px; width: 530px;} #content_box a{color:#ff9900;} .home #content , .home #content_box{margin-left:0; display:inline-block; } .home #content_box{width:320px; margin-top:0; padding-top:120px;} .sub_nav_wrapper{ display:inline-block; background:rgba(0, 0, 0, 0.7); width:150px; position:absolute; top:0px; right:-150px; } .sub_nav_flyout{width:150px; height:25px; line-height:25px; background:url(../images/dark_transparent.png); background-repeat:repeat;padding:0px; border-bottom:1px dotted #fff;} .sub_nav_flyout:hover {background:rgba(111 ,207 ,242 , 1); cursor:pointer;} .sub_nav_flyout:hover a{color: #666;} .sub_nav_flyout a{ display:block; font-family:Georgia, "Times New Roman", Times, serif; height:25px; line-height:25px; padding-left:5px; margin:0;} .sub_nav_flyout a.current-page-item{ background:rgba(111 ,207 ,242 , 1);} .active{background:url(../images/blue_transparent.png);} footer{position:fixed; bottom:0px; right:0px; display:block;} /* PHOTOGRAPHS */ .page-template-photographs-php #wrapper #content {width:100%; margin:0 auto; height:80%; overflow: hidden; border:none;} .page-template-photographs-php #wrapper #content #content_box{display:none;} #thumb-tray.load-item{ background:none; box-shadow: none; height:80px; margin-bottom:30px;} #thumb-tray #thumb-back{} #thumb-tray #thumb-forward{} #thumb-tray.load-item ul#thumb-list{} #thumb-tray.load-item ul#thumb-list li{ height:76px; width:100px; border:2px solid #ffffff;} #thumb-tray.load-item ul#thumb-list li img { height: auto; opacity: 1; transition: all 100ms ease-in-out 0s; width: 100px; } #controls-wrapper.load-item{ background:none; bottom:; height:0px; z-index:-100;} #controls-wrapper #controls{display:none;} #play-button{} #tray-button{} ul#slide-list{} /* AVAILABILITY */ /* NAMASTE CONTACT FORM */ .wpcf7-form{width:280px;} div.wpcf7 img.ajax-loader{width:32px;} .wpcf7-form-control.wpcf7-submit{width:50px; color:#ffffff; background-color:#666666; border:none;} .wpcf7-form-control{ color:#333333; width:280px; margin-bottom:10px;} /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:909px) { .sub_nav_wrapper { margin:0; left:0px; top:-75px;} } /* upto 850px */ @media screen and (max-width:850px) { /* Place your styles here for all widths less than 850px */ #content{ margin:0;} .sub_nav_wrapper { top:0px; left:auto; right:-150px;} } @media screen and (max-width:750px) { /* Place your styles here for all widths less than 750px */ #content{width:100%;} .nav-toggle-container{display:block;} .nav-toggle-container a{display:block; width:100%; height: 100%;} #namaste-logo-container .home #namaste-logo-container{display:inline-block; position:relative; float:left; top:0px; clear:both; margin-left: 20px; margin-top: 20px; left:0px; width:200px; } .menu-main-menu-container , #menu-main-menu{width:100%; margin-top:0;} .menu-main-menu-container li.menu-item{ background-color:#333333; border- bottom:1px dotted #ffffff; width:100%; display:block; padding:3px 0 3px 40px;} .menu-main-menu-container >li.menu-item.current-menu-item, .menu-main-menu-container .sub-menu li.menu-item.current-menu-item{background: none repeat scroll 0 0 #6FCFF2; } .menu-main-menu-container li.menu-item.current-menu-item a{color:#ffffff;} .menu-main-menu-container li.menu-item.current-menu-parent >a{color:#ff9900;} .menu-main-menu-container li.menu-item a {display:inline-block; font-size :24px; line-height:1.2; } .menu-main-menu-container p.menu-divider {display:none; line-height: 1.2; font-size: 24px;} .menu-main-menu-container .sub-menu li.menu-item{width:100%; max-width:100%;} #content_box, .home #content_box { float: left; height: auto; margin: 20px 0 0; overflow: visible; padding: 30px; width:90%; max-width: 480px;} #content_box p , #content_box h2 {width:90%; max-width:460px;} .site-header{height:auto; overflow:hidden; text-align:left; padding-left: 0px;} #site-navigation{ display:none; width:100%; height: auto; overflow: hidden; position: static; top:28px; left:0; text-align: left; } } /* 633 and up */ @media screen and (max-width:633px) { .sub_nav_wrapper{display: none;} } /* 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 */ } }