/* Theme Name: Work-a-holic Theme URI: http://graphpaperpress.com/ Description: Showcase your work on the web. Version: 3.0.1 Author: Chandra Maharzan for Graph Paper Press Author URI: http://graphpaperpress.com/ Tags: minimalistic, clean, fixed width, three column, two column, separate blog, portfolio License: GPL */ /* load 960 framework */ @import url("library/960/reset.css"); @import url("library/960/text.css"); /*@import url("library/960/960.css");*/ @import url("library/nav/superfish.css"); /* global styles */ body {background: #3a5274 url('http://appear.dk/templates/view/da_DK/default/images/bg.jpg')repeat;margin: 20px 0;color:#666; box-shadow: 10px 10px 5px #000; font-family: "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", sans-serif; font-weight: 300; font-size:13px;} html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2 {color:#444;} h3 { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", sans-serif; font-weight:300; } a {text-decoration: none; color: #7ca3ce} a:hover {text-decoration: underline; color: #27518c} h4 {font-size:18px;margin:10px 0;padding:0;color:#666; font-weight:thin;} h5 { font-size: 105%; font-weight: bold; text-shadow:0px 1px 1px #eee;} strong {font-weight: bold;} em {font-style: italic} .yui3-u-1-3 {width:32%;} /* headers */ #header {margin-top: 25px;margin-bottom: 25px;} #header #logo {float:left} #header h1 {font-family: 'Neucha', sans-serif; margin:0 0 -10px 0;text-transform: lowercase;font-size: 48px;padding:0;line-height: 1; word-spacing: -10px; color: #3a5274; } #header h1 a {color: #333;border:none;} #header h1 a:hover {color:#666; border:none; text-decoration:none;} #header .description {color:#999;font-size: 100%; text-transform: capitalize; } #logo {padding:0 0 10px 0;} /* intro text */ #introduction h2 {font-size:200%;font-family: Georgia, serif; margin:0 0 5px 0;padding:0; letter-spacing:-1px;} #introduction h3 {line-height:1.3;color: #999;font-size: 18px; padding-right:10px;} #introduction span {background: transparent url(images/tilo.png) top left no-repeat; font-family: "Neucha"; padding:15px; color: #ad8f32; font-size:120%; padding:10px 22px;} /* twitter */ #twitter {background:url(images/twitter-bg.gif) 0px 30px no-repeat;margin-bottom:25px;} #twitter-top {background:url(images/twitter-top.gif) 0 0 no-repeat;} #twitter_update_list {list-style:none;margin:0;padding:0;background:url(images/twitter-bot.gif) left bottom no-repeat;min-height:80px;} #twitter_update_list li {list-style: none;margin:0;padding:25px 70px 15px 20px;line-height: 1.3; font-size:82%} #twitter_update_list li span {display: block} #twitter_update_list li .twitter-timestamp {color: #CCC;display: block;font-size: 80%;font-weight: bold;padding-top: 10px;text-align: right;text-transform: uppercase;} #twitter_update_list li a.twitter-link {display:none;} /* Navigation Highlights */ /*.current-cat a, .current_page_item a {font-weight:bold;}*/ .sf-menu a:hover{color:#d852bc;} /* NAVIGATION - Search for something */ #search { position: relative; float: right; top: 0px; height:44px; width:165px;} #search #s { float: left; display: block; margin:0;padding: 7px 5px 7px 20px; width: 140px; border: none; font-size: 12px; color: #88a0b5; vertical-align: bottom; background: #ebf1f6 url(images/search.png) 4px 7px no-repeat;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;line-height: 1; border:1px solid #d3dbe2;} #search #s:hover { color: #666;background: #fff url(images/search.png) 4px 7px no-repeat;} #contact {float:right;} /* Portfolio Gallery */ #gallery {border:1px solid #CCCCCC;float:left;margin:0 15px 15px 0;width:284px;} #gallery-nav {margin:2px 0 25px 0;padding: 0;list-style: none;} #gallery-nav li { display: inline; margin:0;padding:4px 2px; background:#f6ede7; } #gallery-nav li.current {background: #e5ded6; } #gallery-nav li.current a {color:#666} #gallery-nav li a {color:#aaa;font-weight: bold; border: none; padding:5px} /* content */ #content h2 {text-transform: capitalize;margin-bottom: 15px;font-weight: bold; } #content div.portfolio{margin:2px; } #tidbits {margin-top:10px;} #content div.portfolio a.thumb {display: block;position: relative;overflow: hidden;height: 134px;padding: 15px;color: #333;border:none;line-height: 1.2;border: 1px solid transparent;} #content div.portfolio h4 {position:relative;} #content div.portfolio a:focus, #content div.portfolio a:hover { text-decoration: none; } #content div.portfolio img {position: absolute;top: 8px;left: 8px;width: 284px;height: 150px;border: 0;z-index:3;} #content div.portfolio section.title { width: 245px; position:absolute;bottom:50px;left:9px;padding:10px 10px 10px 15px; line-height: 1.2; background: black; color: white; z-index: 1000; font-size: 80%; -webkit-box-shadow: 0px 0px 15px black; opacity: 0.8; } #content div.portfolio section.title:hover {opacity:1; cursor:pointer;} section.title a, section.title a:hover, span.title a:focus { color:white; text-decoration: none; } #content div.portfolio span.category { position:absolute;bottom:0;left:0;margin:0 20px 20px 8px; font-size:12px;color:#aaa; z-index: 1000;} img.thumbnail {-webkit-box-shadow: #333 0px 0px 5px;-moz-box-shadow: #333 0px 0px 5px;box-shadow: #333 0px 0px 5px;} /*Category box base*/ #content div.portfolio span.category a {font-size:14px;padding:10px 20px 14px;} /*Different types of categories*/ #content div.portfolio span.category a {background: #fff;border:1px solid #707070;color: #2E2E2E;opacity: 0.6; } #content div.portfolio span.category a:hover {opacity: 1; } /* prev next navigation */ .navigation, .navigation-archive {clear: both;margin-bottom: 20px;height: 33px;text-align:center} .next {background: url(images/next.gif) 0 -66px no-repeat;width: 85px; height: 33px;float: right} .prev {background: url(images/prev.gif) 0 -66px no-repeat;width: 115px; height: 33px;float: right} .next a {background: url(images/next.gif) 0 0 no-repeat;} .prev a {background: url(images/prev.gif) 0 0 no-repeat;} .next a, .prev a {float:right;display:block; height:33px;text-indent:-9999px;border:none;} .next a {width:85px;} .prev a {width:115px;} .next a:hover, .prev a:hover {background-position: 0px -33px;border:none} .navigation-archive .prev {float:left} /* widgets */ h3.sub {margin-bottom:15px;} h3.sub img{ margin: 0px 5px -8px 0px;} .item ul li {display: block;list-style:none;border-top:1px solid #ddd;margin:0;padding:8px 0;} .item ul li a {display: block;border: none;font-weight: bold;} .item dt {font-weight: bold;float:left;width:80px;padding-bottom:7px;clear:left} .item dd {padding-bottom:7px;} #tilo-thumb {float:left; margin:0px 10px 10px 0; border:1px solid #333;} .portfolio p {margin: 0;padding: 0;font-family:Georgia,Times; font-style: italic;font-size: 12px;} .item h4 {color:#666;margin-bottom: 10px} .textwidget {margin-bottom:30px; padding: 0px 10px; text-align:justify;} #wp-calendar {width: 100%} #wp-calendar td {text-align: center;} #wp-calendar thead {font-weight: bold;background: #eee} #wp-calendar td#prev {text-align: left} #wp-calendar td#next {text-align: right} /* Content Area */ .post { padding: 0 30px 0 0; text-align: justify;} .postmetadata {font-size: 12px;} small {color: #bbb} hr.dotted {border:none;border-bottom: 1px dotted #ccc } .pagetitle, .post h2 {margin-top:10px} .post h3 a{font-weight: bold} /* Form Elements */ input,textarea {border: 1px solid #cacaca ;padding:6px; background: white;line-height: 1} #submit {font-weight: bold; padding: 5px 10px;border:1px solid #aaa} /* Comments */ #respond h3 {border-bottom: 1px solid #ddd;padding-bottom:7px} .commentlist {padding: 0;margin: 0;} .commentlist li {margin: 10px 0 0px;padding: 10px 10px 10px 10px;list-style: none;border:1px solid #ddd; } .commentlist li ul {padding: 0;margin: 0;} .commentlist li ul li {margin-right: 0px;margin-left: 0px;} .commentlist li .avatar {float: left;border: 1px solid #eee;padding: 2px;background: #fff;margin-right:10px} .commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;} .commentmetadata {font-weight: normal;font-size: 11px} .children { padding: 0; } .nocomments {text-align: center;margin: 0;padding: 0;} .commentmetadata {margin: 0 0 10px 0;display: block;} .even, .alt {background:#f8f6f2;} ul.children li.odd {background: #f6ede7;} .thread-odd {background: #f6ede7;} .thread-even {background:#f8f6f2;} .depth-1 {} .says {display:none;} .cancel-comment-reply small {font-size:1em;} .bypostauthor {background: #fff} .cancel-comment-reply {margin-bottom: 20px} /*Buttons*/ /*Tabs*/ .yui3-tab { background: transparent url(images/button_bg.png) left top repeat-x; border:1px solid #bbb; border-radius:18px; font-size:100%; padding: 0px 20px !important; color:#333; text-decoration: none; margin:0 5px 0 0 !important; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .yui3-tab a, .yui3-tab a:hover, .yui3-tab a:focus { color: #333; text-decoration: none; outline: none; } .yui3-tab:hover { background-position: 0px -33px; text-decoration: none; color:#304562; border-color: #5376a5; } .yui3-tab-selected { background-position: 0px -65px; color: #333; border-color: #888; outline: none; top:1px; } /*AWESOME BUTTON*/ .button { display: inline; outline: none; cursor: pointer; text-align: center; text-decoration: none; padding: 4px 20px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); background: #9de679; } .button:hover { text-decoration: none; } .button:active { position: relative; top: 1px; } a.white { color: #333; border: solid 1px #c2c2c2; background: #f3f3f3 -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#c2c2c2)); background: #f3f3f3 -moz-linear-gradient(top, #f3f3f3, #c2c2c2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#c2c2c2'); } a.white:active { color: #555; background: #f3f3f3 -webkit-gradient(linear, left top, left bottom, from(#c2c2c2), to(#f3f3f3)); background: #f3f3f3 -moz-linear-gradient(top, #c2c2c2, #f3f3f3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c2c2c2', endColorstr='#f3f3f3'); } a.green { color: #3a6731; border: solid 1px #79bf6b; background: #9de679 -webkit-gradient(linear, left top, left bottom, from(#9de679), to(#79bf6b)); background: #9de679 -moz-linear-gradient(top, #9de679, #79bf6b); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9de679', endColorstr='#79bf6b'); } a.green:active { color: #396630; background: #9de679 -webkit-gradient(linear, left top, left bottom, from(#79bf6b), to(#9de679)); background: #9de679 -moz-linear-gradient(top, #79bf6b, #9de679); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bf6b', endColorstr='#9de679'); } /*Overlays*/ .yui3-overlay-mask { background:black; opacity:0.6;} .yui3-overlay { background: white; border:1px solid #221c1c; padding:30px; -webkit-box-shadow: 0px 0px 15px #333; } /*Under Construction*/ .yui3-overlay-content {color: #c8c8c8; } .yui3-widget-hd {text-transform: capitalize;font-size:140%; color:#333; margin-bottom: 8px; font-weight: bold;} #underConstruction .yui3-overlay-text { float: right; margin-right:10px; font-size:110%; color:#999; } #underConstruction .yui3-overlay-image { margin-top:5px; margin-left: 0px;} #underConstruction .yui3-widget-ft { text-transform: uppercase; font-size:80%; font-weight:bold; margin-top:25px; text-align: center; color: #999;} /* better IE6 support */ body { _height: 100%; } /*Contact Me*/ #contact {margin-top:6px;} #contactForm .yui3-widget-hd { background: transparent url(images/contact-header.jpg) 0px 0px no-repeat; height:97px; padding-top:10px; margin-left:0px;} #contactForm .yui3-widget-hd div { font-size:75%; color:#999; font-weight:normal; text-transform: none; margin:10px 0;} #contactForm form { color: #333;font-size:100%;} #contactForm form label {text-align:right; margin:5px 15px 0 0;} #contactForm #contactButtonRow { margin-right: 63px; } #contactForm form a.button { float:right; margin:15px 10px 0 0;} /*CSS ANIMATIONS*/ /*from Matt Kawakami finger tips*/ .yui3-overlay.animate { -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -webkit-transform-origin: 0 0; opacity: 0; } .yui3-overlay.rotate-3d.animate { -webkit-animation-name: rotate3danim; -webkit-transform-origin: 50% 50%; } @-webkit-keyframes rotate3danim { from { -webkit-transform: perspective(600) rotateX(0deg); opacity: 1; } to { -webkit-transform: perspective(600) rotateX(180deg); opacity: 0; } }