/* -------------------------------------- CSS for mobile version of hebedesign.com Written by Hilde Skjoelberg - hilde@hebedesign.com Started autumn 2010 Copyright - Hilde SkjÀlberg TABLE OF CONTENTS (from original css): 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;} .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: #031108 url(mini_metalback.gif) repeat;} a:link, a:visited {padding: 1px 2px; color: #ccc; text-decoration: none;} a:hover, a.active, a:focus {color: #fff; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0);} a.tight {padding: 0;} #submenu {text-align: center;} #submenu h3 {display: none;} #content {position: relative; margin: 0 auto; width: 290px; min-height: 440px; overflow: hidden; border: 15px solid #fff; border-bottom: none;} .welcome #content {background-color: #333;} .bio #content {background-color: #25313c;} .cv #content {background-color: #5b4306; min-height: 390px;} .work #content {background-color: #3c253c;} .links #content {background-color: #253c35;} #footer {width: 320px; margin: -10px auto 0; padding: 20px 0 2px; text-align: center; } /* ------------------------------------------------------ 4 - GENERAL STYLING ------------------------------------------------------- */ /* --- 4.1 Header --- */ #top h1 {margin: 0; padding: 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5);} #top h1 a:link, #top h1 a:visited {display: block; width: 100%; height: 19px; padding: 12px 0; font-size: .8em; font-weight: normal; text-align: center; color: #fff; background: #b5bdc8; background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); text-decoration: none; border-bottom: 1px solid #222;} #top h2, #top p, #top ul {display: none;} /* --- 4.2 Menu --- */ #menu {position:relative; float:left; width:100%; background: #1b1b1b; background: -moz-linear-gradient(100% 100% 90deg, #3e3e3e, #1b1b1b); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e3e3e), to(#1b1b1b)); border-top: 1px solid #555; border-bottom: 1px solid rgba(90,90,90,0.4); overflow:hidden;} #menu ul {clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center;} #menu ul li {float:left; list-style:none; margin:0; padding:0; position:relative; right:50%;} #menu ul li a {display:block; margin:0; padding:8px 22px; font-size: .9em; text-shadow: 0 1px 3px #000; border-right: 1px solid rgba(0,0,0,0.8); border-left: 1px solid rgba(255,255,255,0.1); line-height:1.3em;} #menu ul li a:hover {background: -moz-linear-gradient(100% 100% 90deg, #3e3e3e, #222); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#1b1b1b)); color:#fff;} #menu ul li a.active, #menu ul li a.active:hover {background: -moz-linear-gradient(100% 100% 90deg, #3e3e3e, #222); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#1b1b1b));} #menu ul li:first-child a {border-left: none;} #menu ul li:last-child a {border-right: none;} /* --- 4.3 Submenu --- */ #submenu { position:relative; float:left; width:100%; height: 45px; background: #1b1b1b; background: -moz-linear-gradient(100% 100% 90deg, #2e2e2e, #1b1b1b); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2e2e2e), to(#1b1b1b)); overflow:hidden;} #submenu ul {clear:left; float:left; list-style:none; margin:10px 0; padding:0; position:relative; left:50%; text-align:center;} #submenu ul li {float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; font-size: .9em;} #submenu ul li a {display:block; margin:0; padding:4px 10px; background:rgba(0,0,0,0.4); color:#eee; text-decoration:none; line-height:1.3em; -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.8); -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.8); box-shadow: inset 2px 2px 2px rgba(0,0,0,0.8); border-left: 1px solid rgba(255,255,255,0.1);} #submenu ul li:first-child a {border-left: none; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;} #submenu ul li:last-child a {-webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;} #submenu ul li a:hover {background: #333; color:#fff; border-left: 1px solid rgba(255,255,255,0.0);} #submenu ul li a.active, #submenu ul li a.active:hover {color:#fff; background: #444; border-left: 1px solid #111;} /* --- 4.4 Content --- */ #content {text-align: right;} #content h3 {font-size: 1.9em; text-align: right; margin: 10px;} #content p, #content ul, #content dl {margin: 1em 10px 0; font-size: .9em;} #content #contentmenu {position: absolute; top: 390px; height: 50px; width: 100%; text-align: center; font-size: .9em; line-height: 1.5em; color: #888; background: #fff;} #content #contentmenu ul {position: absolute; top: 20px; width: 100%;} #content ul#subcontentmenu {position: absolute; top: 415px; 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 p.copy {display: none;} #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: 5px 7px; margin: 0 3px;} #footer {color: #888; background: #fff; font-size: .6em;} #footer ul {display: none;} /* ------------------------------------------------------ 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); -moz-border-radius: 4px; -webkit-border-radius: 4px; 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;} /* contact form */ #contact {margin: 30px 0 0; padding: 0;} #contact label {display: block; clear: left; float: left; width: 80px; margin-top: 12px; padding-right: 8px; text-align: right;} #contact input, #contact textarea {float: left; width: 185px; margin-top: 12px; padding: 3px; background: #eee; border: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #contact img {float: left; margin-top: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;} #contact input#security_code {width: 85px; margin-left: 8px;} #contact #send {width: 91px; margin: 15px 0 10px 188px;} /* --- 5.2 BIO --- */ .bio h4, .bio #content .wrapper p, .bio #content .wrapper ul {text-align: left;} .bio #submenu {position: relative; margin: 0 auto 1px; width: 290px; min-height: 390px; overflow: hidden; background: #465e73 url(bak_bio.jpg) no-repeat top right; border: 15px solid #fff; border-bottom: 50px solid #fff;;} .bio #submenu ul {position: absolute; bottom: 0; right: 0; padding: 10px;} .bio #submenu li {display: block; text-align: right; text-shadow: 2px 2px 5px rgba(0,0,0,0.5);} .bio h4 {margin: 20px 0 10px 10px; text-transform: uppercase; font-size: .8em;} .bio #content.elsewhere ul#subcontentmenu {position: absolute; top: 345px; padding: 25px 0 15px; background: #fff;} .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: 8px 5px 10px 17px;} .bio #content.elsewhere ul.links a:hover, .bio #content.elsewhere ul.links a:focus {color: #25313c; background: transparent url(hover_arrow2.png) no-repeat 0 50%; text-decoration: none;-webkit-border-radius: 2px; -moz-border-radius: 4px; border-radius: 2px;} .bio #content.elsewhere ul.links a:after {content: " "; display: inline-block; vertical-align: middle; width: 28px; height: 28px; margin-left: 5px;} .bio #content.elsewhere .flickr a:after {background: transparent url(socialicons.png) no-repeat 0 0;} .bio #content.elsewhere .twitter a:after {background: transparent url(socialicons.png) no-repeat 0 -40px;} .bio #content.elsewhere .dribbble a:after {background: transparent url(socialicons.png) no-repeat 0 -80px;} .bio #content.elsewhere .vimeo a:after {background: transparent url(socialicons.png) no-repeat 0 -120px;} .bio #content.elsewhere .lastfm a:after {background: transparent url(socialicons.png) no-repeat 0 -160px;} .bio #content.elsewhere .linkedin a:after {background: transparent url(socialicons.png) no-repeat 0 -200px;} /* --- 5.3 CV --- IKKKKKKKE FERDIG!*/ .cv #content dl {margin-top: 35px; font-size: .8em;} .cv #content dl dt {margin-top: 15px;} .cv #content dl dd {margin: 0; padding: 0;} .cv #content dl dt + dd {font-size: 1.2em; 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 {margin: 25px 15px 0 0; text-align: left;} .cv #content #skilltable thead th {visibility: hidden; display: none;} .cv #content #skilltable tbody th {padding: 10px; text-align: right; font-size: 1em; 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) no-repeat 0 0; text-indent: -5000px;} .cv #content #skilltable td span.five {background: transparent url(sprite_skillstars.png) no-repeat 0 -50px;} .cv #content #skilltable td span.four {background: transparent url(sprite_skillstars.png) no-repeat 0 -100px;} .cv #content #skilltable td span.three {background: transparent url(sprite_skillstars.png) no-repeat 0 -150px;} .cv #content #skilltable td span.two {background: transparent url(sprite_skillstars.png) no-repeat 0 -200px;} .cv #content #skilltable td span.one {background: transparent url(sprite_skillstars.png) no-repeat 0 -250px;} /* --- 5.4 WORK --- */ .work #content p.bottom {display: none;} .work li p {display: none;} .work.web li p {display:block;} .photo #content #contentmenu li:last-child, .photo #content ul#subcontentmenu li:last-child {display: none;} /* Downloads */ .work #content li.jacko {background: #88211b url(bak_shape_jacko.png) no-repeat 0 0;} .work #content li.kokomo {background: #3c253c url(bak_shape_kokomo.png) no-repeat 0 0;} .work #content li.revolution {background: #3c253c url(bak_shape_revolution.jpg) no-repeat 0 0;} .work #content li.ribbons {background: #3c253c url(bak_shape_ribbons.png) no-repeat 0 0;} .work #content li.skaters {background: #3c253c url(bak_shape_skaters.jpg) no-repeat 0 0;} .work #content li.skyline {background: #3c253c url(bak_shape_skylines.png) no-repeat 0 0;} .work #content p a {padding-left: 20px;} .work #contentt ul#subcontentmenu {position: absolute; top: 345px; padding: 25px 0 15px; background: #fff;} /* Web */ .work #content li.flipclock {background: #282828 url(web_flipclock.png) no-repeat 0 0;} .work #content li.listaadmin {background: #ddd url(web_listaadmin.jpg) no-repeat 0 0;} .work #content li.listaadmin h3, .work #content li.vk2 h3 {text-shadow: 0 0 7px #000;} .work #content li.vk1 {background: #ebebe6 url(web_vektklubb1.png) no-repeat 0 0;} .work #content li.vk1 h3 {margin-top: 70px; color: #4c515c;} .work #content li.vk1 p {color: #4c515c;} .work #content li.vk2 {background: #ebebe6 url(web_vektklubb2.png) no-repeat 0 0;} .work #content li.vg404 {background: transparent url(web_vg404.jpg) no-repeat 0 0;} .work #content li.vg404 p {margin-top: 300px;} .work #content li.vg404 p a {display: block;} .work #content li.oscar {background: transparent url(web_academy.jpg) no-repeat 0 0;} /* Web - live example: shiny buttons */ .work #content li.shinybuttons {background: #333 url(bg_noise333.png) repeat;} .work #content li.shinybuttons p {margin: 40px 0 0;text-align: center;} .work #content li.shinybuttons button {margin: 10px; padding: 13px 30px; color: rgba(255,255,255,0.9); font-size: .9em; letter-spacing: 1px; text-decoration: none; border: 1px solid #222; text-shadow: 0 2px 4px rgba(0,0,0,0.6); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; opacity: 0.9; cursor: pointer;} .work #content li.shinybuttons .shinybutton {background: #163744; background: -moz-linear-gradient(top, #62838f 0%, #3c5f6d 50%, #355865 51%, #163744 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62838f), color-stop(50%,#3c5f6d), color-stop(51%,#355865), color-stop(100%,#163744)); -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.2), inset 0 2px 2px rgba(255,255,255,0.3); -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3); box-shadow: 0 2px 3px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3); text-shadow: 0 2px 2px rgba(0,0,0,0.6);} .work #content li.shinybuttons .shinybutton:hover, .work #content li.shinybuttons .shinybutton:active {color: #fe0; background: #163744; background: -moz-linear-gradient(top, #be6585 0%, #a34264 50%, #9b3a5c 51%, #751b3c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#be6585), color-stop(50%,#a34264), color-stop(51%,#9b3a5c), color-stop(100%,#751b3c));} .work #content li.shinybuttons .shinybutton2 {background-color: #983659; background-image: -moz-linear-gradient(top, rgba(250,250,250,0.2) 0%, rgba(200,200,200,0.1) 48%, rgba(102,102,102,0.2) 51%, rgba(0,0,0,0.3) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(250,250,250,0.2)), color-stop(48%,rgba(200,200,200,0.1)), color-stop(51%,rgba(102,102,102,0.2)), color-stop(100%,rgba(0,0,0,0.3))); -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.2), inset 0 2px 2px rgba(255,255,255,0.3); -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3); box-shadow: 0 2px 3px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;} .work #content li.shinybuttons .shinybutton2:hover, .work #content li.shinybuttons .shinybutton2:active {background-color: #7a2; color: #000;} .work #content li.shinybuttons .insetbutton {padding: 8px 30px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color: #4f565a; background-image: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.6) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(51%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.6))); -moz-box-shadow: 0 1px 0 rgba(240,240,240,0.2), inset 0 1px 1px rgba(255,255,255,0.2); -webkit-box-shadow: 0 1px 0 rgba(240,240,240,0.2), inset 0 1px 1px rgba(255,255,255,0.2); box-shadow: 0 1px 0 rgba(240,240,240,0.2), inset 0 1px 1px rgba(255,255,255,0.2);} .work #content li.shinybuttons .insetbutton:hover, .work #content li.shinybuttons .insetbutton:active {font-weight: bold; color: #000; text-shadow: 0 1px 1px rgba(255,255,255,0.3); background-color: #aaa;} /* soft buttons */ .work #content li.softbuttons { text-align: center; background: #e8e8e8 url(pattern_softDiamond.png) repeat 0 0; } .work #content li.softbuttons h3 {text-align: right; color: #3d779b;} .work #content li.softbuttons p {position: relative; margin: 50px 0 0;} .work #content li.softbuttons button {cursor: pointer;} .work #content .bigSoftBtn {display: block; width: 140px; margin: 0 auto; padding: 30px 10px; color: #3194c6; background: #edebe5; font-size: 1em; font-weight: bold; text-decoration: none; text-shadow: 0 1px 1px #fff; border: 1px solid #f7f5f1; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f6f2), to(#edebe5)); background: -moz-linear-gradient(#f8f6f2, #edebe5); -moz-box-shadow: inset 0 0 2px #fff, 0 0 6px rgba(68,51,17,.3), 0 14px 0 #c3bdb3, 0 16px 2px rgb(147,140,129), 0 0 2px rgba(0,0,0,.1), 0 24px 1px rgba(147,140,129,0.2); -webkit-box-shadow: inset 0 0 2px #fff, 0 0 6px rgba(68,51,17,.3), 0 14px 0 #c3bdb3, 0 16px 2px rgb(147,140,129), 0 0 2px rgba(0,0,0,.1), 0 24px 1px rgba(147,140,129,0.2); box-shadow: inset 0 0 2px #fff, 0 0 6px rgba(68,51,17,.3), 0 14px 0 #c3bdb3, 0 16px 2px rgb(147,140,129), 0 0 2px rgba(0,0,0,.1), 0 24px 1px rgba(147,140,129,0.2); } .work #content .bigSoftBtn:active, .work #content .bigSoftBtn:focus { margin-top: 52px; margin-bottom: -2px; text-shadow: 0 0 15px rgba(49,148,198,.3); background: #fff; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#edebe5)); background: -moz-linear-gradient(#fafafa, #edebe5); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: inset 0 0 2px #fff, 0 0 6px rgba(68,51,17,.3), 0 12px 0 #c3bdb3, 0 14px 2px rgb(147,140,129), 0 0 2px rgba(0,0,0,.1), 0 20px 1px rgba(147,140,129,0.2); -webkit-box-shadow: inset 0 0 2px #fff, 0 0 6px rgba(68,51,17,.3), 0 12px 0 #c3bdb3, 0 14px 2px rgb(147,140,129), 0 0 2px rgba(0,0,0,.1), 0 20px 1px rgba(147,140,129,0.2); box-shadow: inset 0 0 2px #fff, 0 0 6px rgba(68,51,17,.3), 0 12px 0 #c3bdb3, 0 14px 2px rgb(147,140,129), 0 0 2px rgba(0,0,0,.1), 0 20px 1px rgba(147,140,129,0.2); } /* soft buttons: play, pause, stop */ .work #content .softBtn {margin: 150px auto;} .work #content .softBtn button {display: inline-block; margin: 0 2px; padding: 7px; height: 44px; width: 44px; text-indent: -5000px; color: rgba(255,255,255,.1); overflow: hidden; border: none; background: #cecece; background: -moz-linear-gradient(top, rgba(206,206,206,.6) 0%, rgba(252,252,252,.6) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(206,206,206,.6)), color-stop(100%, rgba(252,252,252,.6))); -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow: inset 0 2px 2px #ccc; -webkit-box-shadow: inset 0 2px 2px #ccc; box-shadow: inset 0 2px 2px #ccc;} .work #content .softBtn button:before {content: ""; display: block; height: 30px; width: 30px; margin: 0; z-index: 2; background: #e0e0e0 url(softbtn_sprite.png) no-repeat 0 50%; background: url(softbtn_sprite.png) no-repeat 0 50%, -moz-linear-gradient(top, #f0f0f0 0%, #dedede 100%); background: url(softbtn_sprite.png) no-repeat 0 50%, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#dedede)); -moz-box-shadow: 0 2px 3px #888, 0 0 2px #aaa, inset 0 2px 2px #fff; -webkit-box-shadow: 0 2px 3px #888, 0 0 2px #aaa, inset 0 2px 2px #fff; box-shadow: 0 2px 3px #888, 0 0 2px #aaa, inset 0 2px 2px #fff; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; } .work #content .softBtn button:hover:before, .work #content .softBtn button:active:before { background: url(softbtn_sprite.png) no-repeat 0 50%, -moz-linear-gradient(top, rgba(206,206,206,.9) 0%, rgba(252,252,252,.9) 100%); background: url(softbtn_sprite.png) no-repeat 0 50%, -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(206,206,206,.9)), color-stop(100%, rgba(252,252,252,.9))); -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; } .work #content .softBtn button:nth-child(2):before, .work #content .softBtn button:nth-child(2):hover:before {background-position: -40px 50%;} .work #content .softBtn button:nth-child(3):before, .work #content .softBtn button:nth-child(3):hover:before {background-position: -80px 50%;} /* soft ala VK */ .work #content .vkBtn {margin: 15px auto; padding: 10px 25px; font-size: 14px; font-weight: bold; color: #fff; border: 1px solid #3d779b; text-decoration: none; text-shadow: 1px 1px 3px rgba(58,68,18,0.6); background: #6ca9da; background: -moz-linear-gradient(top, #6ca9da 0%, #5289ab 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6ca9da), color-stop(100%,#5289ab)); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 5px #aaa, 0 3px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff; -webkit-box-shadow: 0 0 5px #aaa, 0 3px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff; box-shadow: 0 0 5px #aaa, 0 3px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff;} .work #content .vkBtn:hover, .work #content .vkBtn:focus {margin-top: 14px; cursor: pointer; text-shadow: 1px 1px 3px rgba(58,68,18,0.9); -moz-box-shadow: 0 0 5px #aaa, 0 5px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff; -webkit-box-shadow: 0 0 5px #aaa, 0 1px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff; box-shadow: 0 0 5px #aaa, 0 5px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff;} .work #content .vkBtn:active {margin-top: 16px; text-shadow: 1px 1px 3px rgba(58,68,18,0.9); -moz-box-shadow: 0 0 5px #aaa, 0 1px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff; -webkit-box-shadow: 0 0 5px #aaa, 0 1px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff; box-shadow: 0 0 5px #aaa, 0 1px 3px rgba(71,41,3,0.6), inset 0 1px 2px #fff;} /* ------------------------------------------------------ 6 - EFFECTS AND SCRIPTS ------------------------------------------------------- */ /* --- 6.1 AnythingSlider --- */ #content.anythingSlider {position: relative;} /* Selve innholdsboksen */ #content.anythingSlider .wrapper {overflow: auto; margin: 0;} #content.anythingSlider .wrapper ul {width: 32700px; margin: 0; list-style: none;} #content.anythingSlider .wrapper ul li {display: block; float: left; height: 400px; width: 290px; margin: 0; padding: 0;} /* Navigasjonsmenyen i bunnen */ #content.anythingSlider .slidermenu {position: absolute; top: 380px; height: 60px; width: 100%; text-align: center; background: #fff; z-index: 100;} #content.anythingSlider .slidermenu ul {margin: 6px 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) no-repeat 50% 0; 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: 60px; width: 60px; position: absolute; top: -200px; background: transparent url(navarrows_transp.png) no-repeat -500px 0; text-indent: -5000px; cursor: pointer;} #content.anythingSlider .slidermenu li.forward, #content.anythingSlider .slidermenu li.forward:hover {right: -18px; background-position: 0 0;} #content.anythingSlider .slidermenu li.back, #content.anythingSlider .slidermenu li.back:hover {left: -16px; background-position: 0 -500px;} /* 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; border: none;} /* local tweaks */ .bio #content.anythingSlider .wrapper ul li {border-top: none;} .bio #content.anythingSlider .slidermenu li.arrow {top: -50px;} .bio #content.anythingSlider .wrapper ul ul.bullet li {display: list-item; list-style: outside disc; margin: 5px 10px 5px 25px; padding: 0;} .bio #content.anythingSlider .wrapper ul ul.bullet li.space {margin-top: 20px;} /* ------------------------------------------------------ 9 - LITTLE HELPERS ------------------------------------------------------- */ .invisible {display: none;} .clear {clear: both;} .floatfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /*auto-cleares floats*/