/* @override 
	http://jonnotie/stylesheets/main.css
	http://jonnotie/css/main.css
	http://jonnotie.nl/css/main.css
*/

/* @group basics */

* {
  padding: 0;
  margin: 0;
}

body, html {
  height: 100%;
  background: #5a6e70 url(/images/basics/bg.png) repeat center -5px;
}

body {
  font: 14px/20px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
  color: #fffeff;
}

body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}

.container {
  width: 940px;
  margin: 0 auto;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
}

.container:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0
}

#wrapper {
  margin-bottom: -157px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
}

#push {
  clear: both;
  height: 157px;
}

h1 {
  text-shadow: rgba(36,59,67,0.57) 0 -1px 1px;
  display: none;
  margin-bottom: 20px;
}

h2 {
  text-shadow: rgba(36,59,67,0.57) 0 -1px 1px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 26px;
}

h3 {
  text-shadow: rgba(36,59,67,0.57) 0 -1px 1px;
  font-size: 16px;
  line-height: 22px;
}

p {
  text-shadow: rgba(36,59,67,0.57) 0 -1px 1px;
  margin-bottom: 20px;
}

img {
  border-style: none;
  border-width: 0;
  vertical-align: bottom;
}

object {
}

embed {
  vertical-align: bottom;
}

a:link,
a:visited {
  color: #fffeff;
  font-weight: bold;
  outline: none;
}

a:link:hover,
a:visited:hover {
  color: #233941;
  font-weight: bold;
  text-shadow: none;
}

a:link:active,
a:visited:active {
  color: #463d58;
  font-weight: bold;
}



/* @end */

/* @group essentials */

/* @group header */

#header {
  height: 285px;
  position: relative;
  background: url(/images/essentials/header/bg.png) 0 -130px;
}

#header .container {
  height: 285px;
}

/* @group logo */

#logo {
  background-image: url(/images/essentials/header/logo.png);
  display: block;
  width: 226px;
  height: 58px;
  text-indent: -9999px;
  position: absolute;
  left: 7px;
  top: 40px;
  overflow: hidden;
}

#slogan {
  background-image: url(/images/essentials/header/slogan.png);
  width: 340px;
  text-indent: -9999px;
  height: 46px;
  position: absolute;
  left: 10px;
  top: 118px;
  display: block;
}



/* @end */

/* @group bokeh */

.glow {
  width: 100%;
  height: 215px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/images/essentials/header/glow.png) no-repeat;
}

.bokeh-1 {
  width: 100%;
  height: 171px;
  display: block;
  position: absolute;
  background: url(/images/essentials/header/lights-1.png) -30% 0;
}

.bokeh-2 {
  width: 100%;
  height: 171px;
  display: block;
  position: absolute;
  background: url(/images/essentials/header/lights-2.png) -60% 0;
}

.bokeh-3 {
  width: 100%;
  height: 171px;
  display: block;
  position: absolute;
  background: url(/images/essentials/header/lights-3.png) -90% 0;
}



/* @end */

/* @group navigation */

#navigation {
  height: 70px;
  overflow: hidden;
  position: absolute;
  width: 940px;
  left: 10px;
  top: 215px;
}

#navigation li {
  height: 70px;
  float: left;
  list-style-position: outside;
  list-style-type: none;
}

#navigation li a {
  text-indent: -9999px;
  background-image: url(/images/essentials/header/navigation.png);
  height: 70px;
  float: left;
  overflow: hidden;
}

#navigation li#nav-portfolio a {
  width: 164px;
  height: 70px;
}

#navigation li#nav-portfolio a:hover {
  background-position: 0 -70px;
}

#navigation li#nav-portfolio a:active {
  background-position: 0 -140px;
}

#page-portfolio #navigation li#nav-portfolio a {
  background-position: 0 -140px;
}

#page-work #navigation li#nav-portfolio a {
  background-position: 0 -140px;
}

/* --- */

#navigation li#nav-templates a {
  width: 197px;
  height: 70px;
  background-position: -164px 0;
}

#navigation li#nav-templates a:hover {
  background-position: -164px -70px;
}

#navigation li#nav-templates a:active {
  background-position: -164px -140px;
}

#page-templates #navigation li#nav-templates a {
  background-position: -164px -140px;
}

#page-template #navigation li#nav-templates a {
  background-position: -164px -140px;
}

/* --- */

#navigation li#nav-blog a {
  width: 140px;
  height: 70px;
  background-position: -360px 0;
}

#navigation li#nav-blog a:hover {
  background-position: -360px -70px;
}

#navigation li#nav-blog a:active {
  background-position: -360px -140px;
}

#page-blog #navigation li#nav-blog a {
  background-position: -360px -140px;
}

/* --- */

#navigation li#nav-contact {
  float: right;
}

#navigation li#nav-contact a {
  width: 153px;
  height: 70px;
  background-position: -500px 0;
}

#navigation li#nav-contact a:hover {
  background-position: -500px -70px;
}

#navigation li#nav-contact a:active {
  background-position: -500px -140px;
}

#page-contact #navigation li#nav-contact a {
  background-position: -500px -140px;
}

/* --- */

#navigation li#nav-about {
  float: right;
}

#navigation li#nav-about a {
  width: 137px;
  height: 70px;
  background-position: -698px 0;
}

#navigation li#nav-about a:hover {
  background-position: -698px -70px;
}

#navigation li#nav-about a:active {
  background-position: -698px -140px;
}

#page-about #navigation li#nav-about a {
  background-position: -698px -140px;
}



/* @end */

/* @group video */

#video_thumb {
  width: 390px;
  height: 240px;
  display: block;
  position: absolute;
  top: 40px;
  right: 5px;
  background-image: url(/images/essentials/header/video.png);
  overflow: hidden;
  padding: 10px;
}

#video_thumb a {
  width: 90px;
  height: 65px;
  background-image: url(/images/essentials/header/play.png);
  display: block;
  text-indent: -9999px;
  margin: 86px auto 0;
  overflow: hidden;
  line-height: 65px;
}

#video_thumb a:hover {
  background-position: 0 -65px;
}

#video_thumb a:active {
  background-position: 0 -130px;
}

#hide {
  display: none;
}



/* @end */



/* @end */

/* @group content */

#content {
  background: url(../images/essentials/content/bg.png) repeat-x ;
  z-index: 1;
  position: relative;
  margin-bottom: -35px;
  padding: 34px 0 40px;
}

#content .text {
  float: right;
  padding-top: 3px;
  width: 200px;
}



/* @end */

/* @group footer */

#footer {
  height: 122px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  padding-top: 35px;
  background: url(/images/essentials/footer/bg.png) 0 0;
}

/* @group copyright */

#copyright {
  float: left;
  width: 430px;
  height: 89px;
  color: #aab8b3;
  font-size: 12px;
  line-height: 20px;
  padding-top: 33px;
  position: relative;
  background-repeat: no-repeat;
}

#copyright p {
  margin-bottom: 0;
}

#copyright em {
  font-size: 11px;
  line-height: 20px;
  color: #4a5f63;
  font-weight: normal;
}



/* @end */

/* @group contact */

#contact {
  float: right;
  width: 300px;
  height: 89px;
  color: #aab8b3;
  font-size: 12px;
  line-height: 20px;
  padding-top: 33px;
  padding-left: 100px;
  position: relative;
  background-repeat: no-repeat;
}

#contact p {
  margin-bottom: 0;
}

#contact a:link,
#contact a:visited {
  color: #95a5a2;
  font-style: normal;
  font-weight: normal;
}

#contact a:link:hover,
#contact a:visited:hover {
  color: #fffeff;
  font-weight: normal;
  font-style: normal;
}

#contact a:link:active,
#contact a:visited:active {
  color: #5a6e70;
  font-weight: normal;
  font-style: normal;
}

#contact .vcard {
  overflow: hidden;
}

/* --- */

#contact .left {
  float: left;
  width: 180px;
}

#contact .right {
  float: right;
  width: 100px;
}

/* --- */

#contact #download-vcard {
  position: absolute;
  top: 34px;
  left: 0;
  width: 63px;
  height: 59px;
  background-image: url(/images/essentials/footer/contact.png);
  text-indent: -9999px;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
}

#contact:hover #download-vcard {
  background-position: 0 -59px;
}

#contact:hover #download-vcard:hover {
  opacity: 0.5;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
}



/* @end */

/* @group projects */

#projects {
  float: left;
  width: 175px;
  height: 87px;
  padding-top: 35px;
}

#projects a {
  background-image: url(/images/essentials/footer/365psd.png);
  width: 129px;
  height: 58px;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
}

#projects a:hover {
  opacity: 0.5;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
}



/* @end */



/* @end */



/* @end */

/* @group modules */

/* @group action */

#action {
  overflow: hidden;
  margin-bottom: 20px;
  border-top: 1px dotted #4d6165;
  width: 200px;
  padding: 20px 0 0;
}



/* @end */

/* @group download */

#download {
  overflow: hidden;
  margin-bottom: 20px;
  border-top: 1px dotted #4d6165;
  padding: 20px 0 0;
  width: 200px;
}

#download a.download {
  float: right;
}

#download a.preview {
  font-size: 12px;
  line-height: 34px;
  float: left;
  text-decoration: none;
}



/* @end */



/* @end */

/* @group assets */

.info {
  color: #243b43;
  text-shadow: rgba(170,184,179,0.17) 0 1px 0;
}

/* @group donate */

#donate button {
  width: 281px;
  height: 68px;
  background-image: url(/images/assets/donate.png);
  display: block;
  position: absolute;
  top: 70px;
  right: 0;
  text-indent: -9999px;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  background-color: transparent;
  border-style: none;
  border-width: 0;
  cursor: pointer;
}

#donate button span {
  display: none;
}

#donate button:hover {
  background-position: 0 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  opacity: 0.5;
}

#donate button:active {
  background-position: 0 -136px;
}



/* @end */

/* @group buttons */

.btn {
  height: 34px;
  width: 30px;
  display: block;
  text-indent: -9999px;
  border-style: none;
  border-width: 0;
  padding: 0;
  margin: 0;
  font-size: 34px;
  line-height: 34px;
  overflow: hidden;
  background-color: transparent;
  cursor: pointer;
}

.btn span {
  display: block;
}

.btn:hover {
  background-position: 0 -34px;
}

.btn:active {
  background-position: 0 -68px;
}

/* --- */

.btn.visit {
  background-image: url(/images/assets/buttons/visit.png);
  width: 79px;
}

.btn.download {
  background-image: url(/images/assets/buttons/download.png);
  width: 123px;
}

.btn.screenshot {
  background-image: url(/images/assets/buttons/screenshot.png);
  width: 131px;
}

.btn.view {
  background-image: url(/images/assets/buttons/view.png);
  width: 83px;
}

.btn.preview {
  background-image: url(/images/assets/buttons/preview.png);
  width: 110px;
}

.btn.send {
  background-image: url(/images/assets/buttons/send.png);
  width: 85px;
}



/* @end */



/* @end */

/* @group pages */

/* @group thanks */

#page-thanks #thanks {
  width: 261px;
  height: 171px;
  text-indent: -9999px;
  background-image: url(/images/pages/thanks/thanks.png);
  margin: 70px auto;
}



/* @end */

/* @group awww */

#page-awww #awww {
  width: 259px;
  height: 162px;
  text-indent: -9999px;
  background-image: url(/images/pages/awww/aww.png);
  margin: 70px auto;
}



/* @end */

/* @group error */

#page-error #error {
  width: 564px;
  height: 119px;
  text-indent: -9999px;
  background-image: url(/images/pages/error/404.png);
  margin: 70px auto;
}



/* @end */

/* @group contact */

#page-contact h2 {
  margin-bottom: 13px;
}

#page-contact #content {
  padding-top: 0;
  padding-bottom: 0;
}

/* --- */

#page-contact #hi {
  padding-top: 34px;
  background: url(/images/essentials/content/item.png) 0 bottom;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,254,255,0.02);
}

#page-contact #thank {
  padding-top: 34px;
  background: url(/images/essentials/content/item.png) 0 bottom;
  padding-bottom: 14px;
}

#page-contact #sayhi {
  float: left;
  width: 300px;
}

#page-contact #available {
  float: right;
  width: 430px;
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
  text-align: right;
  padding-top: 33px;
}

/* --- */

#page-contact form {
  padding-top: 33px;
}

#page-contact form div {
  margin-bottom: 15px;
}

/* --- */

#page-contact label {
  display: block;
  color: #243b43;
  margin-bottom: 5px;
  text-shadow: rgba(170,184,179,0.17) 0 1px 0;
}

#page-contact input {
  height: 25px;
  width: 240px;
  border-width: 0;
  border-style: none;
  padding: 5px 50px 0 10px;
  background-image: url(/images/assets/form/input.png);
  background-color: transparent;
  vertical-align: bottom;
  outline: 0;
  font: 14px/20px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
  color: #f9f9fa;
  text-shadow: #050e11 0 1px 1px;
}

#page-contact input:focus {
  background-position: 0 -30px;
  -webkit-box-shadow: 0px 0px 5px #b7a2e4;
  -moz-box-shadow: 0px 0px 5px #b7a2e4;
}

#page-contact textarea {
  height: 158px;
  width: 580px;
  border-width: 0;
  border-style: none;
  background-color: transparent;
  vertical-align: middle;
  padding: 6px 10px;
  background-image: url(/images/assets/form/textarea.png);
  outline: 0;
  font: 14px/20px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
  color: #f9f9fa;
  text-shadow: #050e11 0 1px 1px;
  resize: none;
  overflow: auto;
}

#page-contact textarea:focus {
  background-position: 0 -170px;
  -webkit-box-shadow: 0px 0px 5px #b7a2e4;
  -moz-box-shadow: 0px 0px 5px #b7a2e4;
}

#page-contact .optional input {
  background-image: url(/images/assets/form/input-optional.png);
  width: 280px;
  padding: 5px 10px 0;
  height: 25px;
}

#page-contact .error input {
  background-image: url(/images/assets/form/input-error.png);
}

#page-contact .error input:focus {
  background-position: 0 -30px;
}

#page-contact .error textarea {
  background: url(/images/assets/form/textarea-error.png) 0 0;
}

#page-contact .error textarea:focus {
  background-position: 0 -170px;
}

/* --- */

#page-contact button {
  float: right;
  margin: 3px -2px 0 0;
}

/* --- */

#page-contact form .left {
  width: 300px;
  float: left;
}

#page-contact form .right {
  width: 600px;
  float: right;
}



/* @end */

/* @group about */

#page-about #me {
  margin-left: -5px;
  float: left;
  width: 510px;
}

#page-about #office {
  float: left;
  padding-top: 0;
  width: 170px;
  margin-left: 10px;
  margin-right: -5px;
}

#page-about #office img {
  margin-bottom: 10px;
}

#page-about .text {
  width: 220px;
  float: right;
  margin-left: 35px;
  display: inline;
}

/* --- */



/* @end */

/* @group work */

#page-work .thumbs {
  float: left;
  width: 710px;
  margin-left: -5px;
}

#page-work .thumbs img {
  margin-bottom: 10px;
}



/* @end */

/* @group template */

#page-template .thumbs {
  float: left;
  width: 710px;
  margin-left: -5px;
}

#page-template .thumbs img {
  margin-bottom: 10px;
}

#page-template .info {
  color: #243b43;
  text-shadow: rgba(170,184,179,0.17) 0 1px 0;
  text-transform: lowercase;
}



/* @end */

/* @group portfolio */

/* @group content */

#page-portfolio #content {
  padding: 0;
}



/* @end */

/* @group header */

#page-portfolio #header {
  height: 415px;
  background-position: 0 0;
}

#page-portfolio #header .container {
  height: 415px;
}

#page-portfolio #navigation {
  top: 345px;
}

#page-portfolio .glow {
  height: 345px;
}

#page-portfolio #logo {
  top: 96px;
}

#page-portfolio #slogan {
  top: 187px;
  width: 450px;
  height: 56px;
  background-image: url(/images/pages/portfolio/slogan.png);
}

/* @end */

/* @group item */

.item {
  height: 231px;
  background-image: url(/images/essentials/content/item.png);
  padding-top: 34px;
  padding-bottom: 35px;
}

.item h2 {
  text-transform: lowercase;
}

.item p {
  color: #243b43;
  text-shadow: rgba(170,184,179,0.17) 0 1px 0;
  text-transform: lowercase;
}

/* --- */

.item .container {
  width: 400px;
  padding-left: 550px;
  padding-right: 10px;
  height: 138px;
  padding-top: 92px;
}

.item.last {
  background-image: none;
}

.item .btn {
  position: absolute;
  top: 101px;
  right: 9px;
}

/* --- */

.item .thumb {
  position: absolute;
  top: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  left: 5px;
}

.item .thumb:hover {
  opacity: 0.5;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
}

/* --- */

.item .template {
  background-image: url(../images/assets/label.png);
  width: 62px;
  height: 62px;
  text-indent: -9999px;
  display: block;
  position: absolute;
  top: 2px;
  left: 431px;
}



/* @end */



/* @end */

/* @group templates */

#page-templates #content {
  padding: 0;
}



/* @end */

/* @group process */

#page-process #video {
  padding: 10px;
  width: 700px;
  height: 395px;
  background-image: url(../images/pages/screencast/video.png);
  float: left;
  margin-left: -10px;
}

#page-process #video embed {
  height: 395px;
  width: 700px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -moz-border-radius: 2px;
}

#page-process h2 {
  margin-bottom: 13px;
}


/* @end */



/* @end */