/* -------------------------------------- CSS for hebedesign.com Written by Hilde Skjoelberg - hilde@hebedesign.com Original design from 2006 Rewritten CSS 2010 Copyright - Hilde Skj¿lberg TABLE OF CONTENTS: 1 - RESET 2 - TYPOGRAPHY 2.1 - Typekit fonts 3 - GENERAL LAYOUT 4 - GENERAL STYLING 4.1 - Header 4.2 - Menu 4.3 - Submenu 4.4 - Content 4.5 - Footer 5 - SITE SPECIFIC 5.1 - Welcome 5.2 - Bio 5.3 - CV 5.4 - Work 5.5 - Links 6 - EFFECTS AND SCRIPTS 6.1 - AnythingSlider 7 - CSS(3) ENHANCEMENTS 8 - RESPONSIVE TWEAKS 9 - LITTLE HELPERS --------------------------------------- */ /* ------------------------------------------------------ 1 - RESET ------------------------------------------------------- */ html, body, p {margin:0; padding:0; border:0; outline:0; vertical-align:baseline;} :focus {overflow: hidden;} img {margin: 0; padding: 0; border: none;} ol, ul {margin: 0; padding: 0; list-style: none;} /* ------------------------------------------------------ 2 - TYPOGRAPHY ------------------------------------------------------- */ body {line-height: 1.1em; font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;} strong {font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: bold;} h3, #submenu ul, em {font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Arial Narrow, Arial, Helvetica, sans-serif; font-weight: 300;} #submenu, #content {font-size: .8em; text-align: right;} #content p {line-height: 1.5em;} .sup {position : relative; top:-.5em; font-size : 68%; } .btw {font-size: .8em; font-style: italic;} /* --- 2.1 Typekit fonts --- */ .hilde {font-family:"hilde-sharp-1","hilde-sharp-2","Helvetica Neue",sans-serif;} /* ------------------------------------------------------ 3 -GENERAL LAYOUT ------------------------------------------------------- */ /*body {color: #fff; background: #666 url(pattern_carbon.png) 0 0 repeat; }*/ /* -- Alternativ bakgrunn med bilde -- finn evt. et bedre egnet! -- */ body {color: #fff; background: #031108 url(bildebakgrunn.jpg) center center fixed no-repeat; -moz-background-size: cover; background-size: cover;} @media only all and (max-width: 1024px) and (max-height: 768px;) { body {-moz-background-size: 1024px 640px; background-size: 1024px 640px;} } #wrapper {width: 1000px; margin: 100px auto 0; padding: 3px; background: transparent url(skyggebak3.png) 0 0 no-repeat;} #top {height: 100px; margin-bottom: 20px;} #menu {float: left; width: 320px; height: 460px; margin: 0 20px 0 0;} #submenu {position: relative; float: left; width: 290px; height: 440px; margin: 0 20px 0 0; background: #888; border: 10px solid #fff;} #content {position: relative; float: left; width: 290px; height: 440px; overflow: hidden; margin: 0; background-color: #333; background-image: url(bak_content_transp.png); border: 10px solid #fff;} #footer {clear: both; margin: 0; padding: 0;} .welcome #submenu {background: #888 url(bak_welcome.jpg) 0 0 no-repeat;} .bio #submenu {background: #465e73 url(bak_bio.jpg) top right no-repeat;} .cv #submenu {background: #ae7f0b;} .work #submenu {background: #734673;} .links #submenu {background: #467365;} .welcome #content {background-color: #333;} .bio #content {background-color: #25313c;} .cv #content {background-color: #5b4306;} .work #content {background-color: #3c253c;} .links #content {background-color: #253c35;} #submenu h3, #content h3 {margin: 10px; font-size: 2.2em;} /* PROBLEMATISK! a {white-space: nowrap;} - vurdere runde hjørner? */ a:link, a:visited {padding: 1px 2px; color: #fff; text-decoration: underline;} a:hover, a.active {color: #000; background: #fff; text-decoration: none; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 4px;} a.tight {padding: 0;} h3 a:link, h3 a:visited, h3 a:hover {text-decoration: none;} /* ------------------------------------------------------ 4 - GENERAL STYLING ------------------------------------------------------- */ /* --- 4.1 Header --- */ #top h1 {margin: 0; padding: 0;} #top h1 a {border: 10px solid #fff;} #top h1 a:link, #top h1 a:visited {display: block; width: 300px; height: 80px; padding: 0; overflow: hidden; background: #fff url(logo.png) 0 0 no-repeat; text-decoration: none; text-indent: -5000px;} #top h1 a:hover {background-position: 0 -100px; text-decoration: none;} #top h2, #top p, #top ul {visibility: hidden;} /* --- 4.2 Menu --- */ #menu ul li {margin: 0 0 20px; background: transparent;} #menu li.links {margin: 0;} #menu ul li a {border: 10px solid #fff;} #menu ul li a:link, #menu ul li a:visited {display: block; width: 300px; height: 80px; padding: 0; text-decoration: none; text-indent: -5000px; } #menu li.bio a:link, #menu li.bio a:visited {background: #fff url(menusprite.png) 0 0 no-repeat;} #menu li.bio a:hover, #menu li.bio.active a {background: #fff url(menusprite.png) 0 -100px no-repeat;} #menu li.cv a:link, #menu li.cv a:visited {background: #fff url(menusprite.png) -320px 0 no-repeat;} #menu li.cv a:hover, #menu li.cv.active a {background: #fff url(menusprite.png) -320px -100px no-repeat;} #menu li.work a:link, #menu li.work a:visited {background: #fff url(menusprite.png) -640px 0 no-repeat;} #menu li.work a:hover, #menu li.work.active a {background: #fff url(menusprite.png) -640px -100px no-repeat;} #menu li.links a:link, #menu li.links a:visited {background: #fff url(menusprite.png) -960px 0 no-repeat;} #menu li.links a:hover, #menu li.links.active a {background: #fff url(menusprite.png) -960px -100px no-repeat;} /* --- 4.3 Submenu --- */ #submenu p, #submenu ul {position: absolute; right: 10px; bottom: 10px;} #submenu ul.menu li {margin: 4px 0; font-size: 1.5em; line-height: 1.2em;} #submenu ul.menu li a {padding-left: 17px; text-decoration: none;} #submenu ul.menu li a:hover, #submenu ul.menu li a.active {background: transparent url(hover_arrow2.png) 0 50% no-repeat;} #submenu ul.fact li {margin: 2px 0; font-size: 1.15em;} #submenu ul.fact li a {text-decoration: none;} #submenu ul.fact li a:hover {background: #fff;} /* --- 4.4 Content --- */ #content p, #content ul, #content dl {margin: 1em 10px 0;} #content .scroll {overflow: auto; margin: 0; padding: 0;} #content .tall {position: relative; height: 400px;} #content .small {position: relative; height: 350px;} #content .bottom {position: absolute; bottom: 10px; right: 0;} #content ul.bullet, #content.anythingSlider .wrapper ul.bullet {padding-left: 20px; list-style-type: disc;} #content ul.bullet li.space {margin-top: 20px;} #content #contentmenu {position: absolute; bottom: 0; height: 50px; width: 100%; text-align: center; font-size: .9em; line-height: 1.5em; color: #888; background: #fff;} #content #contentmenu ul {position: absolute; bottom: -3px; width: 100%;} #content ul#subcontentmenu {position: absolute; bottom: 5px; height: 10px; width: 100%; margin: 0; text-align: center; font-size: .9em; color: #888; z-index: 102;} #content #contentmenu p, #content #contentmenu ul, #content #contentmenu dl {margin: 0;} #content #contentmenu a:link, #content #subcontentmenu a:link {color: #666; text-decoration: none;} #content #contentmenu a:visited, #content #subcontentmenu a:visited {color: #888; text-decoration: none;} #content #contentmenu a:hover, #content #contentmenu a:focus, #content #subcontentmenu a:hover, #content #subcontentmenu a:focus {color: #e25300; text-decoration: underline; background: rgba(0,0,0,0.1); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;} #content #contentmenu ul li, #content ul#subcontentmenu li {display: inline;} #content #contentmenu ul li a, #content ul#subcontentmenu li a {padding: 2px 5px;} /* --- 4.5 Footer --- */ #footer {clear: both; margin: 0 10px 0 0; padding: 20px 0; font-size: .7em; text-align: center; color: #aaa;} #footer p {width: 290px; margin: 0 auto; padding: 2px 10px; font-weight: bold; background-color: rgba(0,0,0,0.3);} #footer a:link, #footer a:visited {color: #ddd; text-decoration: none;} #footer a:hover {background: #000; text-decoration: none;} #footer ul {visibility: hidden;} /* ------------------------------------------------------ 5 - SITE SPECIFIC ------------------------------------------------------- */ /* --- 5.1 Welcome --- */ .welcome #submenu p {padding: 0 3px; background: rgb(0,0,0); background: rgba(0,0,0,0.3);} #lastseen {position: absolute; bottom: 55px; right: 0;} #lastseen dt {margin: 16px 0 2px; padding: 3px; font-size: 1.1em; color: #333; background: rgb(51,51,51); background: rgba(17,17,17,0.2); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;} #lastseen dt a:link, #lastseen dt a:visited {text-decoration: none;} #lastseen dt a:hover, #lastseen dt a:active {color: #fff; background: none; border-bottom: 1px dotted #fff;} #lastseen dl img {margin-left: 5px; vertical-align: middle;} #lastseen dd a:hover {background: none;} /* --- 5.2 BIO --- */ .bio h4, .bio #content .wrapper p, .bio #content .wrapper ul {text-align: left;} .bio h4 {margin: 20px 0 10px 10px; text-transform: uppercase; font-size: .8em;} .bio #content.elsewhere ul#subcontentmenu {bottom: 0; padding: 35px 0 5px; background: #fff; z-index: 102;} .bio #content.elsewhere ul.links {position: absolute; bottom: 55px; right: 5px; font-size: 1.2em;} .bio #content.elsewhere ul.links li {margin: 5px 0;} .bio #content.elsewhere ul.links a {padding-left: 17px;} .bio #content.elsewhere ul.links a:hover {background: transparent url(hover_arrow2.png) 0 50% no-repeat;} /* --- 5.3 CV --- */ .cv #content dl, .cv #content ul {position: absolute; right: 0; bottom: 10px;} .cv #content dl dt {margin-top: 15px;} .cv #content dl dd {margin: 0; padding: 0;} .cv #content dl dt + dd {font-size: 1.3em; font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Arial Narrow, Arial, Helvetica, sans-serif; font-weight: 300;} /*.cv #content ul {margin: 30px 5px 0 0;}*/ .cv #content ul li {margin: 14px 0 0;} .cv #content #skilltable {position: absolute; right: 5px; bottom: 5px; text-align: left;} .cv #content #skilltable thead th {visibility: hidden;} .cv #content #skilltable tbody th {padding: 10px; text-align: right; font-size: 1.3em; font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Arial Narrow, Arial, Helvetica, sans-serif; font-weight: 300;} .cv #content #skilltable td span {display: block; height: 25px; width: 140px; background: transparent url(sprite_skillstars.png) 0 0 no-repeat; text-indent: -5000px;} .cv #content #skilltable td span.five {background: transparent url(sprite_skillstars.png) 0 -50px no-repeat;} .cv #content #skilltable td span.four {background: transparent url(sprite_skillstars.png) 0 -100px no-repeat;} .cv #content #skilltable td span.three {background: transparent url(sprite_skillstars.png) 0 -150px no-repeat;} .cv #content #skilltable td span.two {background: transparent url(sprite_skillstars.png) 0 -200px no-repeat;} .cv #content #skilltable td span.one {background: transparent url(sprite_skillstars.png) 0 -250px no-repeat;} /* --- 5.4 WORK --- */ .work #content p.copy {position: absolute; bottom: 52px; left: 3px; font-size: .9em; color: #aaa; z-index: 101;} .work #content.anythingSlider p.copy {left: -4px} /* Photo */ /* Downloads */ .work #content li.jacko {background: #88211b url(bak_shape_jacko.png) 0 0 no-repeat;} .work #content li.kokomo {background: #3c253c url(bak_shape_kokomo.png) 0 0 no-repeat;} .work #content li.revolution {background: #3c253c url(bak_shape_revolution.jpg) 0 0 no-repeat;} .work #content li.ribbons {background: #3c253c url(bak_shape_ribbons.png) 0 0 no-repeat;} .work #content li.skaters {background: #3c253c url(bak_shape_skaters.jpg) 0 0 no-repeat;} .work #content li.skyline {background: #3c253c url(bak_shape_skylines.png) 0 0 no-repeat;} .work #content p a {padding-left: 20px;} .work #content p a:hover {text-decoration: none; background: transparent url(hover_arrow_down.png) 0 50% no-repeat; -moz-border-radius : 3px; -webkit-border-radius : 3px; border-radius: 3px;} /* --- 5.5 LINKS --- */ .links #content ul {position: absolute; right: 5px; bottom: 5px;} /* ------------------------------------------------------ 6 - EFFECTS AND SCRIPTS ------------------------------------------------------- */ /* --- 6.1 AnythingSlider --- */ /* Selve innholdsboksen */ #content.anythingSlider .wrapper {position: absolute; top: 0; left: 0; width: 290px; height: 400px; overflow: auto; margin: 0;} #content.anythingSlider .wrapper ul {position: absolute; top: 0; left: 0; width: 32700px; margin: 0; list-style: none;} #content.anythingSlider .wrapper ul li {display: block; float: left; height: 400px; width: 290px; margin: 0; padding: 0; -moz-border-radius : 10px; -webkit-border-radius : 10px; border-radius: 10px;} /* Navigasjonsmenyen i bunnen */ #content.anythingSlider .slidermenu {position: absolute; bottom: 0; height: 50px; width: 100%; text-align: center; background: #fff; z-index: 100;} #content.anythingSlider .slidermenu ul {margin: 8px 0;} #content.anythingSlider .slidermenu li {display: inline; margin: 0 5px;} /* NBNBNB! Sjekk fix for IE!!! Hva med IE7 og IE8? Bruke inline-table? Og sjekk hvorfor den aktive hopper ned!!! */ #content.anythingSlider .slidermenu li a {display: inline-block; height: 10px; width: 10px; margin: 0; padding: 0; background: transparent url(contentmenu_dots.gif) 50% 0 no-repeat; text-indent: -5000px;} #content.anythingSlider .slidermenu li a:visited {background-position: 50% -20px;} #content.anythingSlider .slidermenu li a:hover {background-position: 50% -40px;} #content.anythingSlider .slidermenu li a:focus {display: inline-table;} #content.anythingSlider .slidermenu li a.aktiv {background-position: 50% -60px;} /* Navigasjonspiler over innhold */ #content.anythingSlider .slidermenu li.arrow {display: block; height: 315px; width: 150px; position: absolute; top: -340px; background: url(navarrows_transp.png) -500px 0 no-repeat; text-indent: -5000px; cursor: pointer;} #content.anythingSlider .slidermenu li.forward {right: -5px;} #content.anythingSlider .slidermenu li.back {left: -5px;} #content.anythingSlider .slidermenu li.forward:hover {background-position: 95px 100px;} #content.anythingSlider .slidermenu li.back:hover {background-position: -5px -400px;} /* Fixes ul in ul*/ #content.anythingSlider .wrapper ul ul {position: static; overflow: visible; width: auto;} #content.anythingSlider .wrapper ul ul li {float: none; height: auto; width: auto;} /* local tweaks */ .work #content.anythingSlider {background: #fff;} .bio #content.anythingSlider .wrapper {top: 40px; height: 360px;} .bio #content.anythingSlider .slidermenu li.arrow {height: 30px; top: -35px; background: transparent url(navarrows_small_transp.png) 1000px 1000px no-repeat;} .bio #content.anythingSlider .slidermenu li.forward {background-position: right 10px;} .bio #content.anythingSlider .slidermenu li.back {background-position: 5px 10px;} .bio #content.anythingSlider .slidermenu li.forward:hover {background-position: right -490px;} .bio #content.anythingSlider .slidermenu li.back:hover {background-position: 5px -490px;} .bio #content.anythingSlider .wrapper ul ul.bullet li {display: list-item; list-style: outside disc; margin: 7px 5px; padding: 0;} .bio #content.anythingSlider .wrapper ul ul.bullet li.space {margin-top: 20px;} .bio #content.anythingSlider .wrapper ul ul.bullet li a:link, .bio #content.anythingSlider .wrapper ul ul.bullet li a:visited {text-decoration: none; background: rgba(0,0,0,0.1); -webkit-border-radius: 2px; -moz-border-radius: 4px; border-radius: 2px;} .bio #content.anythingSlider .wrapper ul ul.bullet li a:hover, .bio #content.anythingSlider .wrapper ul ul.bullet li a:active {color: #000; background: #fff;} /* ------------------------------------------------------ 7 - CSS(3) ENHANCEMENTS ------------------------------------------------------- */ /* smalere border (flytt opp om permanent), runde hjorner, css3-skygge */ #top h1 a, #menu ul li a, #submenu, #content { border: 7px solid #fff; -moz-border-radius : 15px; -webkit-border-radius : 15px; border-radius: 15px; overflow: hidden; -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.6); -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.6); box-shadow: 0 5px 10px rgba(0,0,0,0.6); } /* justerte marger for smalere border */ #top h1 a, #menu ul li {margin-bottom: 26px;} #submenu {margin-right: 26px;} #submenu ul.menu li a:hover, #submenu ul.menu li a.active {-moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius: 5px; } .bio #content.elsewhere ul.links a:hover {-moz-border-radius : 6px; -webkit-border-radius : 6px; border-radius: 6px; } /* forsok paa runde hjorner paa bilder - mislykket enn saa lenge */ #content img {-webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;} .work #content p.copy {text-shadow: 0 0 0 #000;} #footer p { background-color: rgba(0,0,0,0.3); -moz-border-radius : 10px; -webkit-border-radius : 10px; border-radius: 10px; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); } /* ------------------------------------------------------ 8 - RESPONSIVE TWEAKS ------------------------------------------------------- */ @media screen and (max-height: 768px) { #wrapper {margin-top: 50px;} /* narrow top margin to prevent scrolling */ } /* ------------------------------------------------------ 9 - LITTLE HELPERS ------------------------------------------------------- */ .invisible {display: none;} .clear {clear: both;} .floatfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /*auto-cleares floats*/