/* Theme Name: HOTPOT - Custom Wordpress theme Theme URI: http://www.hotpot-amsterdam.com Description: Custom style Wordpress theme for HOTPOT Author: Jasper Mijdam Author URI: http://jaspermijdam.nl Version: 1 */ /* HTML5 Reset Wordpress Theme :: style.css ---------------------------------------------------------- We have learned much from/been inspired by/taken code where offered from: Eric Meyer :: http://ericmeyer.com HTML5 Doctor :: http://html5doctor.com and the HTML5 Boilerplate :: http://html5boilerplate.com Special thanks: The Wordpress theme owes its start to an empty theme authored by Chris Coyier & Jeff Starr: http://digwp.com -------------------------------------------------------------------------------*/ /* Let's default this puppy out -------------------------------------------------------------------------------*/ /* RESET */ /* ----------------------------------------- */ /* Global reset */ /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul, li { list-style:none } caption, th { text-align:left } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal } q:before, q:after { content:''} /* Global reset-RESET */ /* The below restores some sensible defaults */ a img { border:none } /* Gets rid of IE's blue borders */ /* JM DESIGN */ /* Ligature in Safari missing FIX */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td, div.description { font-feature-settings:"liga" 0 !important; font-variant-ligatures: none !important; } @font-face { font-family: 'FranklinGothicURWCom-BooIta'; src: url('../fonts/186770_0.eot'); src: url('../fonts/186770_0.eot?#iefix') format('embedded-opentype'), url('../fonts/186770_0.woff') format('woff'), url('../fonts/186770_0.ttf') format('truetype'); -moz-font-feature-settings: "liga=0"; -moz-font-feature-settings: "liga" 0; -webkit-font-variant-ligatures: no-common-ligatures; } @font-face { font-family: 'FranklinGothicURWCom-Boo'; src: url('../fonts/186770_1.eot'); src: url('../fonts/186770_1.eot?#iefix') format('embedded-opentype'), url('../fonts/186770_1.woff') format('woff'), url('../fonts/186770_1.ttf') format('truetype'); -moz-font-feature-settings: "liga=0"; -moz-font-feature-settings: "liga" 0; -webkit-font-variant-ligatures: no-common-ligatures; } @font-face { font-family: 'CentraleSansThin'; src: url('../fonts/centrale_sans_thin-webfont.eot'); src: url('../fonts/centrale_sans_thin-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/centrale_sans_thin-webfont.woff') format('woff'), url('../fonts/centrale_sans_thin-webfont.ttf') format('truetype'), url('../fonts/centrale_sans_thin-webfont.svg#CentraleSansThin') format('svg'); font-weight: normal; font-style: normal; -moz-font-feature-settings: "liga=0"; -moz-font-feature-settings: "liga" 0; -webkit-font-variant-ligatures: no-common-ligatures; } @font-face { font-family: 'Knockout-HTF47-Bantamweight'; src: url('../fonts/Knockout-HTF47-Bantamweight.eot'); src: local('☺'), url('../fonts/Knockout-HTF47-Bantamweight.woff') format('woff'), url('../fonts/Knockout-HTF47-Bantamweight.ttf') format('truetype'), url('../fonts/Knockout-HTF47-Bantamweight.svg') format('svg'); font-weight: normal; font-style: normal; -moz-font-feature-settings: "liga=0"; -moz-font-feature-settings: "liga" 0; -webkit-font-variant-ligatures: no-common-ligatures; } /* Content opmaak */ /*-moz-font-feature-settings ligaturen bugfix voor Firefox/Mozilla */ h1, h2, h3, h4, h5, h6 {font-family:'FranklinGothicURWCom-Boo'; font-weight: normal;} h1 {font-size: 24px; margin:10px 0 16px;} h2 {font-size: 20px; margin:16px 0 10px;} p, ul, ol, a, span, em, strong, italic { font: 16px/24px 'FranklinGothicURWCom-Boo'; -moz-font-feature-settings: "liga" 0; -webkit-font-variant-ligatures: no-common-ligatures; } p {margin:0 0 6px 0;} ol li {list-style-type: decimal; list-style-position: outside; margin-left: 20px;padding-left: 6px;} ol, ul {margin: 15px 0;} ul.dashed li {list-style: disc; list-style-position: outside; margin-left: 20px;padding-left: 6px;} * { margin: 0; padding: 0; } body {background:#f7f7f7 url(../images/bg-home.jpg) repeat-y center center fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; -moz-font-feature-settings: "calt=0,liga=0"; -webkit-font-variant-ligatures: no-common-ligatures; z-index:1; margin-bottom: 40px;} body.about {background-image: url('../images/bg-about.jpg');} body.contact {background-image: url('../images/bg-contact.jpg');} body.nieuws {background-image: url('../images/bg-nieuws.jpg');} body.portfolio {background-image: url('../images/bg-portfolio.jpg');} body.vacatures {background-image: url(../images/bg-home.jpg); background-color: #f7f7f7;} ul.qtrans_language_chooser {position: absolute; top: -69px; right: 123px;} /*ul.qtrans_language_chooser {position: absolute; top: -111px; right: 123px;} */ ul.qtrans_language_chooser li {float:left; display:block;} #page-wrap ul.qtrans_language_chooser li a.qtrans_flag_en { background: url(../images/lang-sprite.png) no-repeat 0 0; width: 34px; height: 28px; } #page-wrap ul.qtrans_language_chooser li a.qtrans_flag_en:hover {background-position:0 -29px; } #page-wrap ul.qtrans_language_chooser li.active a.qtrans_flag_en {background-position:0 -29px; } #page-wrap ul.qtrans_language_chooser li a.qtrans_flag_nl { background: url(../images/lang-sprite.png) no-repeat -34px -29px; width: 34px; height: 28px; } #page-wrap ul.qtrans_language_chooser li a.qtrans_flag_nl:hover {background-position:-34px 0; } #page-wrap ul.qtrans_language_chooser li.active a.qtrans_flag_nl {background-position:-34px 0; } #content p a, #content p a:active {color:#414245; text-decoration:underline;} #content p a:hover {color:#000;} #content.portfolio a, #content.portfolio a:active {color:#414245; text-decoration:underline;} #content.portfolio a:hover {color:#000;} em {font-family:'FranklinGothicURWCom-BooIta';} a {text-decoration:none;} a img {border: none;} a.button {color:#414245; text-decoration:underline;} #bg { position: fixed; top: 0; left: 0;} .bgwidth { width: 100%; } .bgheight { height: 100%; } .textReplacement {text-indent:-9998px; height:1px; display: none;} #page-wrap { position: relative; width: 999px; margin:0 auto;} #logo {margin:110px auto 0 auto; width:751px;} #menu {margin:52px auto 0 auto; width:571px;} #navigation {font-family:'CentraleSansThin'; text-transform:uppercase; font-size:12px; height:39px;} #navigation li {display:block; float:left; list-style-type:none;} #navigation a {display:block; text-align:center; height:32px; text-decoration:none; color:#0b0b0b; padding-top:7px;} #home-url a {width:95px; line-height:19px; background:url(../images/menu-sprite.png) no-repeat -3px 0;} #home-url a:hover, #home-url a.active {background:url(../images/menu-sprite.png) no-repeat -3px -44px;} #about-url a {width:95px; line-height:19px; background:url(../images/menu-sprite.png) no-repeat -98px 0;} #about-url a:hover, #about-url a.active {background:url(../images/menu-sprite.png) no-repeat -98px -44px;} #team-url a {width:92px; line-height:18px; background:url(../images/menu-sprite.png) no-repeat -193px 0;} #team-url a:hover, #team-url a.active {background:url(../images/menu-sprite.png) no-repeat -193px -44px;} #portfolio-url a {width:95px; line-height:20px; background:url(../images/menu-sprite.png) no-repeat -98px 0;} #portfolio-url a:hover, #portfolio-url a.active {background:url(../images/menu-sprite.png) no-repeat -98px -44px;} #vacatures-url a {width:95px; line-height:20px; background:url(../images/menu-sprite.png) no-repeat -98px 0;} #vacatures-url a:hover, #vacatures-url a.active {background:url(../images/menu-sprite.png) no-repeat -98px -44px;} #news-url a {width:95px; line-height:20px; background:url(../images/menu-sprite.png) no-repeat -98px 0;} #news-url a:hover, #news-url a.active {background:url(../images/menu-sprite.png) no-repeat -98px -44px;} #contact-url a {width:95px; line-height:20px; background:url(../images/menu-sprite.png) no-repeat -98px 0;} #contact-url a:hover, #contact-url a.active {background:url(../images/menu-sprite.png) no-repeat -98px -44px;} #content {margin-top:80px;} #content .newsitem {width:999px;} #content .newsitem p {width:999px; font-family:'FranklinbgothicURWCom-Boo'; text-align: center; margin-bottom:20px;} #content .newsitem strong {color:#8d8d41; font-weight: normal; font-size:18px; letter-spacing:-1px; font-family:'CentraleSansThin', Sans-serif; text-transform:uppercase;} #content .newsitem em {font-family:'FranklinGothicURWCom-BooIta';} #content .alignCenter {text-align: center;} #contact {background:transparent url('../images/contact.jpg') no-repeat center top; width:331px; height:284px; margin:0 auto; text-transform: uppercase; -webkit-font-smoothing: antialiased;} #contact .address {float:left; color:#ffff00; width:200px; text-align:right; padding-top:52px; font-family:'FranklinGothicURWCom-Boo', sans-serif; font-size: 16px;} #contact .address #contact-email {color:#ffff00; text-decoration: none;} #contact .address a {color:#ffff00; text-shadow: 0px 0px 2px #168b9a; text-decoration: none;} #contact .acrostichon {float:left; width:119px; margin-top:52px; color:#fff; font-family:'FranklinGothicURWCom-Boo', sans-serif;} .acrostichon p span {color:#33ffff; margin-left:10px;} #socialmedia {width:360px; margin:30px auto 0 auto;} #socialmedia a {margin-left: 5px;} #socialmedia a:first-child {margin-left: 0px;} #socialmedia a:hover {opacity: 0.9;} #newsletter {float:left; margin:8px 12px 80px 0; font-size:14px; font-family:'FranklinbgothicURWCom-Boo'; line-height: 24px;} #footer {margin:92px 0 60px 0; clear:both;} #footer p {font-family:'Knockout-HTF47-Bantamweight', Sans-serif; font-size:20px; letter-spacing:3px; color:#333333; text-transform:uppercase; text-align:center;} p#footerCopyright {font-family:'FranklinGothicURWCom-Boo'; letter-spacing:1px; color:#666666; font-size:12px; text-transform: uppercase; clear: both; float: right; margin: 40px 110px 40px 0;} body.page-id-10 #footer p {color:#000099;} body.page-id-26 #footer p {color:#999933;} /* Content als IMG */ #content img.page {margin:60px auto; display:block;} #content img.page.overons {margin:-5px auto 42px auto;} /* about */ #content.about {margin-top:46px;} #content.about .introduction {width:750px; margin: 0 auto; text-align: justify;} .about .intro {font-size: 18px;} #content .textWrapper {width:750px; margin: 0 auto; text-align: left;} #content.vacatures strong {font-size:24px;} .about .teamPhoto {display:block; width:800px; margin:0 auto; text-align: center;} .caption {display: block; font-family: 'FranklinGothicURWCom-Boo'; font-size: 16px;} .glow { z-index:1; -webkit-box-shadow: 0px 0px 20px 10px rgba(248, 248, 247, .75); -moz-box-shadow: 0px 0px 20px 10px rgba(248, 248, 247, .75); box-shadow: 0px 0px 20px 10px rgba(248, 248, 247, .75); } /* portfolio */ #content.portfolio .screenshot {margin-right:19px; min-width:380px; min-height:260px; margin-top:5px;} .screenshot .caption {font-size:12px; text-transform:uppercase; color:#121212; font-family:'Knockout-HTF47-Bantamweight', Sans-serif; letter-spacing:2px; text-shadow:0px 0px 1px rgb(51, 51, 51); text-shadow:0px 0px 1px rgba(51, 51, 51, 0.35);} #content.portfolio #portfolio-list li a {font-size:20px; text-transform:uppercase; color:#686862; font-family:'Knockout-HTF47-Bantamweight', Sans-serif; letter-spacing:2px; text-decoration: none; outline: none;} #content.portfolio .description {padding-top:1px; padding-left: 427px; -moz-font-feature-settings: "liga" 0;} #content.portfolio h3 {font: 16px/24px 'FranklinGothicURWCom-Boo'; font-weight: normal; text-transform: uppercase; color:#666; float:left; margin-right:5px;} #content.portfolio a {font: 16px/24px 'FranklinGothicURWCom-Boo'; font-weight: normal; -moz-font-feature-settings: "liga" 0;} #content.portfolio .description p {margin-bottom:14px;} /*portfolio */ #content.portfolio .screenshot {float:left;} /* Bios */ #biography a, #biography a:active {color:#414245; text-decoration:none; border-bottom: 1px solid #000; padding-bottom:0px;} #biography a:hover {color:#000; border-bottom: 1px solid #000;} a.closeButton {float:right; text-transform:uppercase; color:#333333; font-family:'CentraleSansThin', Sans-serif; font-size:15px; text-decoration:none; margin:7px 30px 0 0;} #biography {width:820px; margin:0 auto;} .photo {float:left; margin:97px 0 0 0;} .biography {width:398px; float:right; margin:97px 0 0 0;} .biography h1 {font-size:22px; text-transform:uppercase; color:#686862; font-family:'Knockout-HTF47-Bantamweight', Sans-serif; letter-spacing:2px;} .biography p {font-family:'FranklinGothicURWCom-Boo', Sans-serif; font-size:16px; font-weight:200; color:#333333; line-height: 22px; margin:5px 0px;} #biography .linkedin.button {text-decoration:none; float:right; border-bottom:none;} /* ----- */ /* Custom Vertical Tabs */ .ui-tabs-vertical { /* a border is required for IE otherwise the tab panels will not be aligned correctly. */ width:999px; position: relative; border: none; margin:0 auto; } .ui-tabs-vertical .ui-tabs-vertical-tab-column { position: absolute; left: 0; margin: 0; width: 200px; min-width: 200px; } .ui-tabs-vertical .ui-tabs-vertical-tab-column ul { list-style: none; margin: 0px; padding: 0px; } /* css for tab that is open */ .ui-tabs-vertical .ui-tabs-vertical-tab-column ul li.ui-tabs-active, .ui-tabs-vertical .ui-tabs-vertical-tab-column ul li.ui-state-default { border-bottom: 5px solid transparent; text-align:right; margin: 4px 0 0 0; padding-left: 7px; padding-right: 10px; padding-bottom: 6px; min-height:20px; z-index: 10; } .ui-tabs-vertical .ui-tabs-vertical-tab-column ul li.ui-tabs-active a { border-bottom: 5px solid #FFFF00; } /* css for tab that is closed */ .ui-tabs-vertical .ui-tabs-vertical-tab-column ul li.ui-state-default { background: none; background-repeat:repeat-x; } /* css for tab hover */ .ui-tabs-vertical .ui-tabs-vertical-tab-column ul li a:hover { border-bottom: 5px solid #FFFF00; } /* css for link on tab that's open */ .ui-tabs-vertical .ui-tabs-vertical-tab-column ul li.ui-state-default a, .ui-tabs-vertical .ui-tabs-vertical-tab-column ul li.ui-state-active a { font: 11px Helvetica, Arial, sans-serif; font-weight: bold; margin: 0px; padding: 0px; text-decoration: none; color: #ff0084; } /* css for link on tab that's closed */ .ui-tabs-vertical .ui-tabs-vertical-tab-column ul li.ui-state-default a { color: #999999; } .ui-tabs-vertical .ui-tabs-vertical-content-column { padding: 0px; margin: 0px; margin-left:204px; min-height:; } /* css for the content panels */ .ui-tabs-vertical .ui-tabs-vertical-content-column .ui-tabs-panel { padding-left:0; padding-right: 7px; padding-bottom: 3px; margin: 0px; } /* Wordpress stuff */ img.aligncenter {display:block; margin:0 auto;} .clearBoth {clear: both;}