/* ======================================================================= *Project: http://www.bohem.se/ *Reason: Style *Client: http://www.bohem.se/ *Author(s): Kim Gunnarsson hello@kimgunnarsson.com http://kimgunnarsson.com http://gravityhill.se Gravityhill © 2011 mimik.nu & Gravityhill.se. All rights reserved. If you find any good code that you want. You may only copy it if you understand it. ======================================================================= STRUCTURE: RESET FONT-FACE LESS IS MORE GENERAL MATRIXCODE ==== RESET & HACK ========================================================== */ /*----HTML5 ✰ Boilerplate----*/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; list-style:none;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace,sans-serif}body,select,input,textarea{color:#444}h1,h2,h3,h4,h5,h6{font-weight:bold}ul,ol{margin:0;}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub{vertical-align:sub;font-size:smaller}sup{vertical-align:super;font-size:smaller}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type=button],input[type=submit],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;box-shadow:0 0 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr}.hidden{display:none;visibility:hidden}.visuallyhidden{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1} /* ==== FONT-FACE ========================================================= */ /* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 29, 2011 */ @font-face { /* This declaration targets Internet Explorer */ font-family: 'BaskervilleBoldRegular'; src: url('baskerville-bold-webfont.eot'); } @font-face { /* This declaration targets everything else */ font-family: 'BaskervilleBoldRegular'; src: url(//:) format('no404'), url('fonts/baskerville-bold-webfont.woff') format('woff'), url('fonts/baskerville-bold-webfont.ttf') format('truetype'), url('fonts/baskerville-bold-webfont.svg#webfonttBcAPUSU') format('svg'); font-weight: normal; font-style: normal; } @font-face { /* This declaration targets Internet Explorer */ font-family: 'BaskervilleOldFaceRegular'; src: url('fonts/baskvill-webfont.eot'); } @font-face { /* This declaration targets everything else */ font-family: 'BaskervilleOldFaceRegular'; src: url(//:) format('no404'), url('fonts/baskvill-webfont.woff') format('woff'), url('fonts/baskvill-webfont.ttf') format('truetype'), url('fonts/baskvill-webfont.svg#webfontEth0F6iI') format('svg'); font-weight: normal; font-style: normal; } @font-face { /* This declaration targets Internet Explorer */ font-family: 'BaskervilleNormal'; src: url('fonts/baskerville_normal-webfont.eot'); } @font-face { /* This declaration targets everything else */ font-family: 'BaskervilleNormal'; src: url(//:) format('no404'), url('fonts/baskerville_normal-webfont.woff') format('woff'), url('fonts/baskerville_normal-webfont.ttf') format('truetype'), url('fonts/baskerville_normal-webfont.svg#webfont3v5dKVY7') format('svg'); font-weight: normal; font-style: normal; } @font-face { /* This declaration targets Internet Explorer */ font-family: 'BaskervilleNormalItalic'; src: url('fonts/baskerville_normal-italic-webfont.eot'); } @font-face { /* This declaration targets everything else */ font-family: 'BaskervilleNormalItalic'; src: url(//:) format('no404'), url('fonts/baskerville_normal-italic-webfont.woff') format('woff'), url('fonts/baskerville_normal-italic-webfont.ttf') format('truetype'), url('fonts/baskerville_normal-italic-webfont.svg#webfontP4rVCDYc') format('svg'); font-weight: normal; font-style: normal; } /* ==== LESS IS MORE ======================================================== */ /*-----------BORDER RADIUS----------*/ .border-radius (@radius: 2px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; -o-border-radius:@radius; behavior: url(PIE/PIE.htc); } /*-----------GRADIENT----------*/ .linear-gradient( @begin: black, @end: white, @switch : 100% ) { background: @begin; background: -webkit-gradient(linear, 0 0, 0 100%, from(@begin), color-stop(@switch, @end)); background: -moz-linear-gradient(top, @begin, @end @switch); background: -o-linear-gradient(top, @begin, @end @switch); background: linear-gradient(top, @begin, @end @switch); -pie-background: linear-gradient(@begin, @end); behavior: url(PIE/PIE.htc); } /*-----------BOX SHADOW----------*/ .box-shadow( @x : 0px, @y : 1px, @blur : 2px, @spread : 1px, @color : #000 ) { -webkit-box-shadow: @x @y @blur @spread @color; -moz-box-shadow: @x @y @blur @spread @color; box-shadow: @x @y @blur @spread @color; -o-box-shadow: @x @y @blur @spread @color; behavior: url(PIE/PIE.htc); } /*-----------TRANSITION----------*/ .transition( @what : all, @length : 250ms, @easing : ease-in-out ) { -webkit-transition: @what @length @easing; -moz-transition: @what @length @easing; -o-transition: @what @length @easing; transition: @what @length @easing; } /*-----------TRANSFORM----------*/ .transform( @params ) { -webkit-transform: @params; -moz-transform: @params; transform: @params; } /* ==== GENERAL ======================================= */ html { overflow-y: scroll;} html, body {height: 100%;} #wrap{min-height: 100%; width:860px; margin:0 auto; padding:0 0 0 45px;} #main {overflow:auto; padding-bottom: 50px;} /* must be same height as the footer */ #footer{position: relative; margin: -50px auto 0 auto; /* negative value of footer height */ height: 50px; clear:both; width:920px; } body{ /*background:url(img/bg.jpg) center center no-repeat;*/ font-family: 'BaskervilleNormal'; background:#000; } img.bg{ width: 100%; position: fixed; top: 0; left: 0; bottom:0; z-index:-10; margin:0; padding:0; } .container{height: 100%; position:relative; z-index:1; } h1,h2,h3,h4,h5,h6{ font-weight:normal; text-shadow:0px 1px 1px #000;} h1{ font-size:30px; color:#fff; margin:0 0 40px 0;} h2{} h3{} h4{} h5{} h6{} ::-moz-selection { background: #000; color:#fff; text-shadow: none; } ::selection{ background: #000; color:#fff; text-shadow: none; } a, a:visited{ color: #CBA41E; -webkit-tap-highlight-color:none; text-decoration:none; outline: none; outline: 0; &:hover, &:active, &:focus { color: #fff; text-decoration:underline; } } .menu{ font-family:Arial, Helvetica, sans-serif; width:860px; height:100px; ul{ li{float:left;} li a{ .border-radius; margin:0 10px 0 0; display:block; text-decoration:none; padding:8px 20px; font-size:11px; background:#000; color:#fff; text-transform:uppercase; .transition; &:hover{ background:#fff; color:#000; } } li.current_page_item a{ background:#fff; color:#000; &:hover{ background:#000; color:#fff;} } } } img.logo{float:right;.transition; margin: -85px 10px 0 0; &:hover{ opacity:0.6; } } /* ==== SUPERSIZED JQUERY PLUGIN============================================ */ #supersized-loader { position:absolute; top:50%; left:50%; z-index:10; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background-color:#111; background:rgba(0,0,0,0.8) url(img/progress.gif) no-repeat center center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;} #supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; } #supersized img{ position:relative; display:none; outline:none; border:none; } #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/ #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/ #supersized a { z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111;} #supersized a.prevslide { z-index:-20; } #supersized a.activeslide { z-index:-10; } #supersized a.prevslide img, #supersized a.activeslide img{ display:inline; } /* ==================================================================================== */ .box1, .box2{float:left; background: rgb(0, 0, 0); /* The Fallback */ background: rgba(0, 0, 0, 0.7); .border-radius; padding:45px 25px; color:#fff; text-shadow:0 2px 0px #000; a{font-style:italic; font-family: 'BaskervilleNormalItalic'; color:#fcbf6c; text-decoration:underline; font-size:18px; text-shadow:none;} } .box1{width:380px; margin:0 10px 10px 0; font-size:17px; line-height:25px;} .box2{width:360px; margin:0 0px 10px 0; position:relative; h2{ font-size:18px; text-transform:uppercase; margin:-25px 0 15px 0;} img{background:#999; width:145px; height:145px; float:right; margin:0 0 0 10px; a{margin:0;}} a{margin:10px 0 0 0; display:block;} } a.italic {} .box2 .webshop { position:absolute; bottom:0; white-space:nowrap; } .box2 .webshop a { display:inline; margin:0; font-style:normal; font-family: 'BaskervilleNormal'; text-decoration: none; } #banner{ padding:5px; width:910px; margin:0 auto; background:#0b0b0b; opacity:0.8; .border-radius; overflow:hidden; } .pics{ overflow:hidden; width:840px; } #inner{width:5000px; height:40px; } #inner a{float:left;} a.slide-left,a.slide-right{ text-shadow:0 2px 0px #000; text-decoration:none; line-height:10px; font-size:28px; color:#fff; width:25px; display:inline-block; margin:10px 0 0 0; } a.slide-left{float:left; margin-right:10px;} a.slide-right{float:right;} #sidebar{ min-height:350px; margin:0 20px 0 0; .border-radius; width:140px; padding:15px; background:#000; background: rgba(0, 0, 0, 0.7); float:left; ul{ li.current-cat{display:block; a{text-decoration:underline;} } li{ font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; line-height:22px; font-size:11px; ul.children{ display:none; li{font-size:9px; line-height:16px; margin:0 0 0 10px; a{ &:before{content:'- '}} } } } a{color:#fff; } } } h1#sorttitle{color:#fff; font-size:42px; margin:-20px 0 20px 11px; } h2.sorttitle{color:#fff; font-size:18px; span{text-transform:capitalize; color:#dcae25;}} .sortiment-content{ width:650px; //background: rgba(0, 0, 0, 0.7); padding:15px 0; .border-radius; margin:0 0 0 0px; float:left; color:#fff; ul{ li{ font-family:Verdana, Geneva, sans-serif; .border-radius; margin:0 5px 5px 0; width:185px; height:145px; border:solid rgba(0, 0, 0, 0.5) 8px; float:left; display:block; .transition; &:hover{border:solid rgba(0, 0, 0, 0.7) 8px;} a{ display:block; width:185px; height:145px; } em{font-style:normal; font-weight:bold; } } } } .mimikbox{ background:#fff; .border-radius(16px); z-index:55; border:solid 2px #666; color:#000; padding:10px; position:absolute; top:20%; left:50%; margin:0 0 0 -250px; width:515px; display:none; .border-radius(16px); z-index:55; a.close{display:block; width:35px; height:35px; background: url(img/close.png) 0 0 no-repeat; position:absolute; margin:-20px 0 0 500px;} .boxnav{display:inline;} } .popupbg{ } #uppdrag a {color:#dda836; font-size:14px;} #uppdrag { color: #959595; font-size: 15px; line-height: 20px; } /* === Om bohem ==== */ .om-box{ background:#000; background: rgba(0, 0, 0, 0.7); padding:15px; margin:0 0 25px 0; } #om-content{ color: #959595; font-size: 15px; line-height: 20px; margin: -5px 0 0; } /* ==== NYHETER ===== */ .news-box { background:#000; background: rgba(0, 0, 0, 0.7); padding:15px; margin:0 0 25px 0; min-height:750px; } #newsbox2{ margin:-770px 0 0 0; width:530px; } .news-box3 { background:#000; background: rgba(0, 0, 0, 0.7); padding:15px; margin:0 0 25px 0; min-height:625px; } .news-post{ .contenter{ min-height:150px;} img.attachment-post-thumbnail{ margin-top: 10px; float:left; width:145px; height:145px; padding:0 15px 0 0 !important; } .bread{ color:#959595; font-size:14px; margin:-10px 0 0 0; padding-left:160px; a{color:#CBA41E;} } } .newsimg{ float:right; padding:0 0 15px 15px; } #newsbox{margin:-135px 0 0 0;} #signup{float:right; width:285px; margin:0 0 10px 0; h3{margin:0 0 5px 0;} p{ font-family: 'BaskervilleNormalItalic'; font-size:13px; padding:0 0 10px 0; color:#959595;} form{} #email{ width:269px; margin:0px 0 0 0 !important; border:none; padding:3px 8px; overflow:hidden; font-size:11px; background:#28231a; color:#cba41e; font-size:14px; font-family: 'BaskervilleNormalItalic'; } .wpcf7-submit{ border:none; padding:4px 8px; font-size:14px; float:right; margin:5px 0 0 0; background:none; color:#cba41e; font-family: 'BaskervilleNormalItalic'; } } hr{ border-color:#444444;} .news-box h3{ font-size:18px; margin:0 0 20px 0; padding:0 0 0 160px; color:#fff; text-transform:uppercase; } /* .news-box .wp-post-image{ float:left; padding:0 15px 0 0;} .news-box p {color:#959595; font-size:15px; line-height:20px; margin:-5px 0 0 0; } .news-box hr{} */ #news-page{text-align:center; width:540px;} #news-page a{color:#fff; text-transform:uppercase; font-size:14px;} /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:url(img/overlay.png) repeat 0 0;} #colorbox{} #cboxTopLeft{width:21px; height:21px; background:url(img/controls.png) no-repeat -100px 0;} #cboxTopRight{width:21px; height:21px; background:url(img/controls.png) no-repeat -129px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(img/controls.png) no-repeat -100px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(img/controls.png) no-repeat -129px -29px;} #cboxMiddleLeft{width:21px; background:url(img/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(img/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(img/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(img/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff; overflow:hidden;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0; background:url(img/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious.hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(img/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} #cboxNext.hover{background-position:-50px -25px;} #cboxLoadingOverlay{background:url(img/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(img/loading.gif) no-repeat center center;} #cboxClose{position:absolute; bottom:0; right:0; background:url(img/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} #cboxClose.hover{background-position:-25px -25px;} /* The following fixes a problem where IE7+ replaces a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); ") } /* ==== Referenser ==== */ ol.referens{ margin:15px 0 0 0px; color:#959595; } ol.referens li{ list-style-type: none; list-style-position:outside; height:125px; } .om-box ol.referens#om { padding-left: 162px; } .om-box ol.referens#om li{ list-style-type: none; list-style-position:outside; height:95px; float:left; margin:0 0 6px 0; } ol.referensli h4{ font-size:20px; font-weight:normal; font-family:BaskervilleNormal; margin:0 0 15px 0; } ol.referens li .thumb{ float:left; padding:0; margin:0 6px 0 0; width:95px; height:95px; img.attachment-referens-thumbnail{ cursor:pointer;} } ol.referens li .thumb img{ padding:0; margin:0; width:95px; height:95px; } ol.referens li .thumb-stor{ display:none; position:absolute; margin:-160px 0 0 -250px; top:50%; left:50%; background:#fff; .border-radius(16px); z-index:55; border:solid 2px #CCC; color:#000; padding:10px; a.close{ display:block; width:35px; height:35px; background: url(img/close.png) 0 0 no-repeat; position:absolute; margin:-20px 0 0 500px; } } ol.referens li .thumb-stor img{ width: 515px; height:325px; } ol.referens li .thumb-stor a{ color:#000 !important;} /*==== Kontakt ==== */ #wpcf7-f2-p26-o1{} #wpcf7-f2-p26-o1 form{} #wpcf7-f2-p26-o1 form input, #wpcf7-f2-p26-o1 form textarea{ font-family: 'BaskervilleNormalItalic'; border:none; padding:0px 8px; width:290px; background:#28231a; color:#cba41e; font-size:14px; margin:4px 0 0 0; } #wpcf7-f2-p26-o1 form textarea{ height:80px;} #wpcf7-f2-p26-o1 form .wpcf7-submit{ margin:0 15px 0 0; float:right; background:none; width:50px;} div.wpcf7-validation-errors, div.wpcf7-mail-sent-ng { border: 2px solid #F7E700; width: 250px; } span.wpcf7-not-valid-tip {display:none !important;} .ie7 .right { margin: 0 0 0 -300px !important; } .ie7 .newsimg { position:relative; z-index:55; } .ie9 #wpcf7-f1-t1-o1{ margin:10px 0 0 0 !important;} .ie9 .news-box {height:760px !important;}