/* Theme Name: Bikkelhart Theme URI: Description: Theme build by Eskeemo | Cool Creations Version: 1.0 Author: Emiel Nawijn-Knip Tags: fixed width, three columns, widgets */ /* GLOBAL RESET reset for all html elements ================================================================== */ * {font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0} html {height: 100%} body {background:#fff;color:#000;min-height:100%;text-align:left;position:relative} img, fieldset, abbr, acronym {border:0} table {border-collapse:collapse;border-spacing:0;width:100%} address, caption, cite, code, dfn, em, strong, var {font-style:normal;font-weight:normal} caption {text-align:left} q:before, q:after, blockquote:before, blockquote:after {content:''} input, select, textarea, button {font-size:1em;line-height:normal;width:auto} input, select {vertical-align:middle} textarea {height:auto;overflow:auto} ul, ol, li {list-style-type:none;padding:0;margin:0} a {color:inherit;cursor:pointer} /* MAIN STYLE general definitions (wrappers, fonts, tags) ================================================================== */ /* sticky footer */ html, body, #wrapper {height:100%} body > #wrapper {height:auto;min-height:100%} body {font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:18px;background:url(../images/background.jpg) top repeat-x} #wrapper {margin:auto;width:960px;height:100%} #header {position:relative;height:100px;margin-bottom:30px} #content {position:relative;padding-bottom:235px;padding-top:25px;border-top:solid 2px #dcdcd8} #home {position:relative;padding-bottom:235px} #footer {position:relative;margin-top:-215px;height:215px;clear:both;background-image:url(../images/footer.jpg) } .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix {display:inline-block} /* Hides from IE-mac \*/ * html .clearfix {height:1%} .clearfix {display:block} /* End hide from IE-mac */ /* wrappers */ #container {margin:auto;width:900px} #canvas {background:url(../images/canvas.png) no-repeat;height:384px;width:937px;margin:-15px auto 20px} .contentbox {position:relative;float:left;width:266px;margin:0 25px;padding-left:4px;z-index:9999} /* standard tags */ a {color:#ed8522;text-decoration:none} a:hover {text-decoration:underline} em {font-style:italic} strong {font-weight:bold} /* standard fonts */ h1 {font-family:Tahoma,Geneva,sans-serif;font-size:18px;text-transform:uppercase;margin-bottom:10px} h2 {font-family:Tahoma,Geneva,sans-serif;font-size:14px;font-weight:normal;text-transform:uppercase;color:#fff;padding-bottom:12px} h3 {font-family:Tahoma,Geneva,sans-serif;font-size:14px;color:#ed8522;margin:12px 0 10px} h4 {font-family:Tahoma,Geneva,sans-serif;font-size:16px;text-transform:uppercase;padding-bottom:5px} h5 {font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold} h6 {} p {font-size:12px;line-height:1.5em;padding-bottom:12px} /* predefined classes */ .red {color:#ed8522;font-weight:bold} .white {color:#fff;font-weight:bold} .red-bullet {background:url(../images/bullet-red.png) no-repeat center left;font-weight:bold;padding-left:8px;color:#ed8522} .white-bullet {background:url(../images/bullet-white.png) no-repeat center left;padding-left:8px;color:#fff;font-weight:bold} .bullet {list-style-image:url(../images/bullet-open.png);margin-left:16px} .checkmark {list-style-image:url(../images/checkmark.png);margin-left:16px} .boldcheckmark {list-style-image:url(../images/checkmark.png);margin-left:16px;padding-top:12px;font-weight:bold} .empty {list-style-image:none;margin-left:16px} a.button {background:url(../images/button.png) no-repeat;float:left;width:145px;height:27px;margin-top:12px;padding:5px 0 0 21px;color:#fff} a:hover.button {background:url(../images/button-hover.png) no-repeat;text-decoration:none} /* HEADER SECTION header elements (logo, navigation, welcome, search) ================================================================== */ /* logo */ #logo {position:absolute;bottom:10px;left:0} #logo a {cursor:pointer} /* top navigation */ #topnav {position:absolute;top:0;right:0;background:url(../images/topnav-bg.png) no-repeat;width:138px;height:30px;padding:5px 0 10px;text-align:center} #topnav a{font-family:Georgia,Times,serif;font-size:12px;color:#e7e7e7;padding:0 2px} #topnav a:hover {color:#fff;text-decoration:underline} /* main navigation */ #nav {position:absolute;bottom:0;right:0} #nav li {float:left;list-style:none;margin-left:30px} #nav li.back {border-bottom:2px solid #ed8522;height:17px;z-index:8;position:absolute;margin-left:0px} #nav li.current_page_item {border-bottom:2px solid #ed8522} #nav li a {font-family:Georgia,Times,serif;font-size:16px;color:#000;text-decoration:none;z-index:10;position:relative;display:block;height:17px} /* SIDEBAR SECTION sidebar elements for multiple sidebars ================================================================== */ /* left sidebar portfolio */ #caroussel {margin:10px 0 0 -10px;height:450px} #flashcontent {height:100%} /* sidebar teammembers */ #sidebar-team {position:relative;float:left;width:170px;margin-right:35px} #sidebar-team h4 {font-size:18px} #lead {padding-bottom:20px} #lead .team {background:#f3f3f3;padding:5px;margin:5px 0;width:100%} #jobs .team {background:#ed8522;padding:5px;margin:5px 0;width:100%} #lead .name {border-bottom:1px solid #dcdcd8;font-weight:bold;padding-bottom:2px} #jobs .name {border-bottom:1px solid #ffffff;font-weight:bold;padding-bottom:2px} #jobs .name a {color:#ffffff} .function p {font-size:11px;padding:2px 0 0 0} .backbutton {background:url(../images/backbutton.jpg) no-repeat;height:27px;width:160px;margin-top:4px;padding:4px 0 0 20px} .backbutton a {font-size:11px;font-weight:bold;color:#fff} .backbutton a:hover {color:#ed8522} /* sidebar with quotes */ #sidebar-quotes {position:relative;float:right;width:245px;padding:53px 0 30px;margin-right:-10px} #sidebar-quotes img {margin-left:11px} .quotescollection_randomquote {background:url(../images/quotes-back.png) no-repeat top;margin:25px 0;padding:30px 0px 0 28px} .quotescollection_randomquote q {background:url(../images/quotes-open.png) no-repeat left;color:#fff;padding:25px} .quotescollection_randomquote cite {display:block;padding:10px 5px;text-align:right} .quotescollection_author {font-style:italic;color:#ed8522;padding-right:20px} .quotescollection_source {display:block;font-style:italic;color:#ed8522;padding-right:20px} /* sidebar weblog */ #sidebar-blog {position:relative;float:right;width:25%} /* FOOTER SECTION footer elements (border, columns) ================================================================== */ /* general */ #border {float:left;background:url(../images/footer-border.jpg) repeat-x;width:100%;height:28px} #footer p {padding:0;line-height:1.6em} #footer img {float:left;padding-right:5px;margin:-10px -5px 10px -20px} .twitter {background:url(../images/twitter.png) no-repeat left;padding:10px 0 7px 27px;margin-left:80px;line-height:3.5em;color:#fff} .linkedin {background:url(../images/linkedin.png) no-repeat left;padding:10px 0 8px 27px;margin-left:10px;line-height:3.5em;color:#fff} #footer .white-bullet {line-height:2.5em;font-weight:normal} /* twitter feeds */ a.twitter-link {font-weight:normal;color:#000;font-style:italic} a.twitter-link:hover {text-decoration:underline} a.twitter-user {font-weight:normal;color:#000;font-style:italic} a.twitter-user:hover {text-decoration:underline} .twitter-timestamp {font-weight:normal;color:#fff;display:block;} /* jobs */ #footer h5 a {color:#fff} #footer h6 p {font-size:11px;font-weight:normal;line-height:1.0em;margin-bottom:6px} /* WEBLOG SECTION weblog elements () ================================================================== */ /* general */ #weblog {position:relative;float:left;width:70%} /* PAGES SECTION page exclusive elements ================================================================== */ /* homepage */ #home p a {color:#ed8522} #home p a.button {color:#fff} /* Easy Slider */ #slider {margin-left:28px;padding-top:40px} #slider ul, #slider li {margin:0;padding:0;list-style:none;color:#fff} #slider li {width:880px;height:358px;display:block;overflow:hidden} #slider .img_txt {width:340px;height:250px;float:left;padding-top:5px} #slider .img_txt h1 {color:#fff;margin-top:-6px;line-height:1.5em} #slider .img_txt h1 .sub {color:#ee8522} #slider .img_txt p {padding-bottom:12px;color:#fff} #slider img {float:left;padding:0px 10px 0 0} .slider_title {position:absolute;margin-top:-14px;color:#fff;text-align:center;display:none} .current .slider_title {display:block!important;color:#fff} #scroller {position:absolute;z-index:1000;height:22px;margin-top:3px;padding:0;text-align:center;left:0} /* Easy slider controls */ ol#controls {display:block;position:absolute;margin-top:-78px;margin-left:20px} ol#controls li {margin:0;padding:0;float:left;list-style:none;display:block} ol#controls li a {display:block;z-index:1500;height:22px;background:url(../images/slider-point.png) no-repeat 50% 6px;font-size:0px;color:#000000} /* portfolio page */ #portfolio {position:relative;float:left;width:450px;padding:24px 0 30px} #portfolio h1 {font-size:14px;color:#ed8522;padding-bottom:11px;border-bottom:solid 1px #dcdcd8} #portfolio h6 {width:50%} #portfolio p {padding:0 0 12px} .right {margin-top:-18px;padding-left:50%} .right2 {margin-top:-18px;padding-left:50%;padding-bottom:12px} #portfolio a.slider-button {background:url(../images/slider-button.png) no-repeat;float:left;width:145px;height:27px;margin-top:12px;padding:5px 0 0 10px;color:#fff} #portfolio a:hover.slider-button {background:url(../images/slider-button-hover.png) no-repeat;text-decoration:none} #portfolio ul {margin:-12px 0 12px} #rightbar {float:right;padding-top:52px} #rightbar a img {clear:both;float:right;padding-bottom:12px} #rightbar img {clear:both;float:right;padding-bottom:12px} /* partners page */ #partnerholder {position:relative;float:left;margin-left:-15px;width:105%} #partners {position:relative;float:left;width:30%;margin:10px 16px 0px 15px;padding-bottom:30px} .logo {margin:0 0 5px -10px} .title {font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:bold} .subtitle {font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#ed8522;border-bottom:1px solid #dcdcd8;width:94%} .subtitle p {padding:2px 0} .content p {padding:6px 0;width:95%} /* about us page */ #aboutus {position:relative;float:left;width:450px;padding:24px 0 0} #aboutus ul {margin:-12px 0 12px} #aboutus h1 {font-size:14px;color:#ed8522;padding-bottom:11px;border-bottom:solid 1px #dcdcd8} #aboutus h1 p {color:#000} .bio {padding-left:20px} /* contact page */ #contact {position:relative;float:left;width:51%;padding-right:10px} #mapholder {position:relative;float:left;width:416px;height:376px;background: url(../images/map-back.png) no-repeat left top;margin-left:15px} #map {float:left;width:400px;height:360px;margin:8px} .mapimage {width:100px;height:16px} .mapagraph {width:125px;height:14px;font-size:11px;font-weight:bold} /* contactform - general */ #contactform {position:relative;padding-top:0px;min-height:300px;line-height:2.0em} * html #contactform {height:300px} /*IE6 CSS fix for min-height */ form {display:inline-block} /*in order to correctly show AJAX-features */ form p {float:left;padding-top:9px;line-height:1.3em;font-size:11px;font-weight:bold;width:125px} label {clear:both;float:left;width:65px;font-weight:bold} input {float:left;padding:4px 4px 4px 24px;width:200px;border:1px solid #dcdcd8;color:#ed8522;height:14px;margin-bottom:10px} textarea {float:left;padding:4px;width:220px;height:100px;border:1px solid #dcdcd8;color:#ed8522;margin-bottom:10px} input:hover, textarea:hover {border-color:#ed8522} input:focus, textarea:focus {border-color:#ed8522} input#name {background:url(../images/form-name.png) no-repeat left} input#email {background:url(../images/form-mail.png) no-repeat left} input#phone {background:url(../images/form-phone.png) no-repeat left} input#Human_Check {padding-left:50px;width:40px;background:url(../images/form-check.png) no-repeat left} input#button {clear:both;background:url(../images/form-button.png) no-repeat left;width:91px;height:27px;border:none;margin:10px 15px 0 65px} input#button:hover {background:url(../images/form-button_hover.png) no-repeat left} input#button-en {background:url(../images/form-button-en.png) no-repeat left;width:91px;height:27px;border:none;margin:10px 15px 0 65px} input#button-en:hover {background:url(../images/form-button-en_hover.png) no-repeat left} /* contactform - AJAX elements */ .FAIL {background:url(../images/form-error.png) no-repeat;height:20px;color:#ed8522;font-size:11px !important;margin-left:7px;padding:0 0 5px 20px;float:left} .PASS {background: url(../images/form-pass.png) no-repeat;height:20px;width:16px;margin-left:7px;float:left} .AJAX_TIMEOUT {background-color:#ed8522;padding:10px;font-weight:bold;color:#fff;margin-bottom:30px} .AJAX_RESPONSE {font-weight:bold} #FORM_LOAD {position:absolute;top:0;bottom:0;left:0;height:100%;width:100%;background:url(../images/EA_Form_Load.gif) no-repeat center;background-color:#fff;opacity:.55;-moz-opacity:0.55;filter:alpha(opacity=55)}