/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";


/* Page
-------------------------------------------------------------- */

#page { margin: 0 auto; width: 850px;}

/* Error
-------------------------------------------------------------- */
#error div {width: 500px; margin: 0px auto 0px;text-align: center;}
#error div p {font-size: 0.9em; color: #777; text-align: center;}


/* Header
-------------------------------------------------------------- */

#header       	 { width: 850px; text-align: left; margin: 0px auto 0px auto; overflow: hidden; height: 152px; padding: 20px 0px 0px 0px;}
#header .top 		 { float: left; width: 850px; height:120px; overflow: hidden; margin: 0px 0px 0px 0px; font-size: 0.9em;}
#header .top a.logo {float:left;}
#header .top img { margin: 13px 0px 0px 20px;}

#header #navigation {list-style: none; margin:0; padding:0;float:right; display:block; width: 606px; overflow:hidden;}
#header #navigation li {float: left; margin-left: 1px; display:inline;}
#header #navigation a * {display: none;}
#header #navigation a { height: 32px;display: block;background: url(/grafika/buttons.gif) 0px -32px no-repeat; cursor: pointer;}
#header #navigation a .hover { height: 32px;display: block;background: url(/grafika/buttons.gif) no-repeat; cursor: pointer;}
#header #navigation a.uvod { background-position: 0 -64px; width: 100px;}
#header #navigation a.uvod-a, #header #navigation .highlight a.uvod-a:hover,#header #navigation a.uvod-a .hover { background-position: 0 -32px; width: 100px;}
#header #navigation .highlight a.uvod:hover,#header #navigation a.uvod .hover {background-position: 0 0px;}
#header #navigation a.blog {background-position: -202px -64px;width: 100px;}
#header #navigation a.blog-a, #header #navigation .highlight a.blog-a:hover,#header #navigation a.blog-a .hover { background-position: -202px -32px; width: 100px;}
#header #navigation .highlight a.blog:hover,#header #navigation a.blog .hover {background-position: -202px 0px;}
#header #navigation a.aktivity { background-position: -505px -64px;width: 100px; }
#header #navigation a.aktivity-a, #header #navigation .highlight a.aktivity-a:hover,#header #navigation a.aktivity-a .hover { background-position: -505px -32px; width: 100px;}
#header #navigation .highlight a.aktivity:hover,#header #navigation a.aktivity .hover {background-position: -505px 0px;}
#header #navigation a.portfolio {background-position: -101px -64px;width: 100px;}
#header #navigation a.portfolio-a, #header #navigation .highlight a.portfolio-a:hover,#header #navigation a.portfolio-a .hover { background-position: -101px -32px; width: 100px;}
#header #navigation .highlight a.portfolio:hover,#header #navigation a.portfolio .hover {background-position: -101px 0px;}
#header #navigation a.profil {background-position: -303px -64px;width: 100px;}
#header #navigation a.profil-a, #header #navigation .highlight a.profil-a:hover,#header #navigation a.profil-a .hover { background-position: -303px -32px; width: 100px;}
#header #navigation .highlight a.profil:hover,#header #navigation a.profil .hover {background-position: -303px 0px;}
#header #navigation a.kontakt {background-position: -404px -64px;width: 100px;}
#header #navigation a.kontakt-a, #header #navigation .highlight a.kontakt-a:hover,#header #navigation a.kontakt-a .hover { background-position: -404px -32px; width: 100px;}
#header #navigation .highlight a.kontakt:hover,#header #navigation a.kontakt .hover {background-position: -404px 0px;}

#header .top div ul {width: 405px; float:right; list-style:none;  text-align:right; margin: 0; padding: 0;}
#header .top div ul li {text-align: left; float:left; padding: 1px 0px 0px 0px;}
#header .top div { float:left;display:inline; width:500px; height: 58px; margin: 60px 0px 0px 30px;}
#header .top div ul a {color:#fff; font-weight: normal;}
#header .top div a.twitter {color:#33aad6; font-weight: bold; padding: 2px 15px 3px 30px; width: 40px; height:21px;overflow: hidden; margin: 0px 6px 0px 0px;float:left; display:block;background: transparent url(/grafika/content-background-twitter-status-top.gif) 0px 0px no-repeat;}


/* Body
-------------------------------------------------------------- */

#body { margin-top: 0px; background: #fff; }

/* White padding */
.outer-container {background: #fff url(../grafika/content-bottom.gif) no-repeat center bottom; padding: 20px 0px 20px 0px;}



/* Blueprints
-------------------------------------------------------------- */

/* All content is here */
.container { background: #fff; padding: 0px 0px 0px 0px; width: 810px; padding: 0px 20px 0px 20px;margin: 0 auto;}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
  background: url(../grafika/blueprint_grid_82+22x18.png); 
}

/* Body margin for a sensile default look. */
body {
  margin:1.5em 0 3.5em 0;	
}


/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8 {float:left;margin-right: 22px;}

/* The last column in a row needs this class. */
div.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1  { width: 82px;}
.span-2  { width: 186px;}
.span-3  { width: 290px;}
.span-4  { width: 394px;}
.span-5  { width: 498px;}
.span-6  { width: 602px;}
.span-7  { width: 706px;}
.span-8, div.span-8 { width: 810px; margin: 0; }


/* Add these to a column to append empty cols. */
.append-1  { padding-right: 104px;}
.append-2  { padding-right: 208px;}
.append-3  { padding-right: 312px;}
.append-4  { padding-right: 416px;}
.append-5  { padding-right: 520px;}
.append-6  { padding-right: 624px;}
.append-7  { padding-right: 728px;}


/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 104px;}
.prepend-2  { padding-left: 208px;}
.prepend-3  { padding-left: 312px;}
.prepend-4  { padding-left: 416px;}
.prepend-5  { padding-left: 520px;}
.prepend-6  { padding-left: 624px;}
.prepend-7  { padding-left: 728px;}



/* Border on right hand side of a column. */
div.border {
  padding-right:10px;
  margin-right:11px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right:74px;
  margin-right:71px;
  border-right: 1px solid #eee;
}

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -104px;}
.pull-2 { margin-left: -208px;}
.pull-3 { margin-left: -312px;}
.pull-4 { margin-left: -416px;}
.pull-5 { margin-left: -520px;}
.pull-6 { margin-left: -624px;}
.pull-7 { margin-left: -728px;}
.pull-8 { margin-left: -832px;}

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8 {float:left;position:relative;}


.push-1 { margin: 0 -104px 1.5em 104px;}
.push-2 { margin: 0 -208px 1.5em 208px;}
.push-3 { margin: 0 -312px 1.5em 312px;}
.push-4 { margin: 0 -416px 1.5em 416px;}
.push-5 { margin: 0 -520px 1.5em 520px;}
.push-6 { margin: 0 -624px 1.5em 624px;}
.push-7 { margin: 0 -728px 1.5em 728px;}
.push-8 { margin: 0 -832px 1.5em 832px;}

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8 {float:right;position:relative;}

p img.left {
float:left;
margin: 0.6em 1.1em 0.5em 0;
padding:0;
}




/* Blog 
-------------------------------------------------------------- */




.post {background: url(/grafika/content-background-tribal-spacer.gif) center bottom no-repeat; padding: 0px 0px 60px 0px; margin-bottom: 2em;}

.post .category, .post .comments {margin: 0px 0px 0px 10px;}
.post .postmeta {display: block; padding: 0px 0px 1.5em 17px;background: url(/grafika/content-icon-clock-small.gif) -1px 0px no-repeat;}
.post .category {display: inline-block; padding: 0px 0px 0px 17px;background: url(/grafika/content-icon-categories-small.gif) -2px 0px no-repeat; }
.post .comments {display: inline-block; padding: 0px 0px 0px 17px;background: url(/grafika/content-icon-comments-small.gif) -2px 0px no-repeat; }

.post-next {display:block; width: 161px; padding: 0px 0px 0px 25px; background: url(/grafika/content-icon-left.gif) left 1px no-repeat; float:left;}
.post-previous {display:block; width: 161px; padding: 0px 25px 0px 0px; background: url(/grafika/content-icon-right.gif) right 1px no-repeat; float:right;}
.more-link-box {display:block; padding: 1.5em 0px 1.5em 22px; text-align: left; background: url(/grafika/content-icon-book.gif) 1px 1.55em no-repeat;}


.commentlist {list-style:none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
.comment {padding: 0px; margin: 0px 0px 10px 0px;}
.comment p {margin:0; padding:10px;}
.comment .author {padding: 15px 0px 0px 0px; font-size: 0.8em;}
.comment .vcard {font-style: normal; overflow:hidden; padding:0px 0px 0px 5px; }
.comment .wrap {background: #f4f4f4; border: 1px solid #ddd;}
.unapproved {color: #f00;}
.bypostauthor .wrap {background: #fddea6; border: 1px solid #eccd95; border-collapse: collapse;}

.author {width: 300px; float:left;}
img.avatar {float:right;}

.posts table.formular td {vertical-align:top; border:0; margin:0; padding:0px 0px 2px 0px;}
.posts table.formular tr { padding: 0px 0px 0px 0px; margin:0;}
.posts table.formular td label {display: block; float: left; width: 100px; padding:0.4em 0px 0px 2px; background: url(../grafika/arrow-bullet.gif) 88% 9px no-repeat; vertical-align:middle; font-weight: normal; font-size: 0.8em;}
.posts table.formular td input {display: block; float: left; width: 280px; background:#fafafa url(../grafika/input-bgr.gif) center top repeat-x; border:1px solid #ffcc91; vertical-align:middle; padding:4px;}
.posts table.formular td textarea {display: block; float: left; width: 280px; height:200px; background:#fafafa url(../grafika/input-bgr.gif) center top repeat-x; border:1px solid #ffcc91;padding:4px;font-size:inherit;margin:0;}
.posts table.formular td input.button {display: block; float: left; width: 10em; background:#d77c13; text-align:center; padding: 3px; border:0; font-weight:normal; color:#ffffff;cursor:pointer; font-size: 0.8em;}
.posts table.formular td input.button:hover {background:#ffa033; cursor:pointer}

.search-field {background: #000 url(/grafika/content-background-search.jpg) 0px 0px no-repeat; text-align:center;  min-height:400px; height:auto !important; height:400px; padding: 10px; width: 166px; margin: 0px 0px 22px 0px;}
#wp-calendar {width: 166px;border-collapse: collapse;	margin: 0px auto 2em auto; display:block; text-align:center;}
#wp-calendar caption {background: transparent; color: #ccc; font-weight: bold; text-align:center;}
#wp-calendar td, #wp-calendar th {text-align:center; border:0; padding:5px 4px 5px 5px; margin:0;}
#wp-calendar td {color: #ddd;}
#wp-calendar th {color: #fff;}

.search-field h3 {text-align: center; color: #ddd; font-weight: bold; font-family: 'Tahoma', sans-serif; font-size: 1.1em; letter-spacing:0px; margin: 2em 0px 0.5em 0px;}

.social p {margin:0px 0px 0.4em 0px;}

.tags {display:block; margin:1em 0px 1em 0px; background: url(/grafika/content-icon-tags.gif) 0px 0.2em no-repeat;}
.tags ul { margin:0px 0px 0px 1.8em; padding: 0.2em 0.2em 0.2em 0.2em;}
.tags ul li { float:left; display:inline; margin: 0px 0.5em 0px 0px; list-style:none;}

.tbox {width: 144px; height: 20px; margin: 0px auto 10px auto; padding:5px 8px 1px 8px; background: #000; border: 1px solid #412502; color:#fff; display:block; vertical-align:top;}
.monthly-archive {text-align:center; color: #ccc; list-style:none; }
.monthly-archive li {width: 130px;}
.monthly-archive li a {text-align:center;}

ul.add-bullet {list-style:none; padding: 0px 0px 22px 0px; margin:0px 0px 0em 0px; }
ul.add-bullet li a, .middle-column ul li a {display: inline-block; background: url(/grafika/arrow-bullet.gif) 0px 0.7em no-repeat; padding: 0px 0px 0px 13px;}

div.right-column {padding-bottom: 25em; background: url(/grafika/content-background-blog-side.jpg) 0px bottom no-repeat;}

.middle-column h3 { padding: 0px 0px 0px 22px; }
.middle-column h3.categories {background: url(/grafika/content-icon-categories.gif) 1px 1px no-repeat;}
.middle-column h3.new, .textbox h3.new {background: url(/grafika/content-icon-blank.gif) 1px 1px no-repeat;}
.middle-column h3.comments {background: url(/grafika/content-icon-comments.gif) 1px 1px no-repeat;}
.middle-column h3.twitter {background: url(/grafika/content-icon-twitter.gif) 1px 1px no-repeat;}
.middle-column h3.blogs {background: url(/grafika/content-icon-blogs.gif) 1px 1px no-repeat;}
.middle-column ul {list-style:none; background: url(/grafika/content-background-small-spacer.gif) 0px bottom no-repeat; padding: 0px 0px 40px 0px; width:186px; margin:0px 0px 2em 0px;}
.middle-column ul li { width: 186px; margin-bottom: 0.5em;}
.middle-column ul li a small {color: #aaa;}

h3.feed-options { padding: 0px 0px 0px 22px;background: url(/grafika/content-icon-feed.gif) 1px 1px no-repeat;}
.feeds {list-style:none; padding:0; margin:0;}
.feeds li {padding: 0.2em 0px 0.2em 0px; display:block;}
.feeds .rss {background: url(/grafika/content-icon-rss.gif) 6.5em 1px no-repeat; margin:0; padding: 0px 23px 0px 0px; }
.feeds .atom {background: url(/grafika/content-icon-atom.gif) 6.5em 1px no-repeat; margin:0; padding: 0px 23px 0px 0px; }

ul.grey {color:#777;}
.aktivity ul.grey {padding: 2.3em 0 0 0;}
ul.main {color: #444;}
ul.other {color: #777;}

li span.label {display: inline-block; width:9em; color: #777;}
.add-bullet li.email {background: url(/grafika/content-icon-mail.gif) 20em 1px no-repeat;}
.add-bullet li.icq {background: url(/grafika/content-icon-icq.gif) 20em 1px no-repeat;}
.add-bullet li.mobile {background: url(/grafika/content-icon-telephone.gif) 20em 1px no-repeat;}
.add-bullet li.skype {background: url(/grafika/content-icon-skype.gif) 20em 1px no-repeat;}

#page .more-link {margin:1.2em 0 0 0; display:block; clear:both;}
#wp-calendar caption {width:100%;}

/* Content
-------------------------------------------------------------- */


.kontakt table.formular td {vertical-align:top; border:0; margin:0; padding:0px 0px 2px 0px;}
.kontakt table.formular tr { padding: 0px 0px 0px 0px; margin:0;}
.kontakt table.formular td label {display: block; float: left; width: 186px; padding:0.4em 0px 0px 2px; background: url(../grafika/arrow-bullet.gif) 93% 9px no-repeat; vertical-align:middle; font-weight: normal; font-size: 1em;}
.kontakt table.formular td input {display: block; float: left; width: 300px; background:#fafafa url(../grafika/input-bgr.gif) center top repeat-x; border:1px solid #ffcc91; vertical-align:middle; padding:4px;}
.kontakt table.formular td textarea {display: block; float: left; width: 300px; height:200px; background:#fafafa url(../grafika/input-bgr.gif) center top repeat-x; border:1px solid #ffcc91;padding:4px;font-size:inherit;margin:0;}
.kontakt table.formular td input.button {display: block; float: left; width: 10em; background:#d77c13; text-align:center; padding: 3px; border:0; font-weight:bold; color:#ffffff;cursor:pointer; font-size: 1em;}
.kontakt table.formular td input.button:hover {background:#ffa033; cursor:pointer}

#customForm input.error, #customForm textarea.error{ background: #f8dbdb; border-color: #e77776;}
.kontakt #error {color:#fff; background: #e91f1f; text-align:center;}
.kontakt #error.valid  {background: #00b019;}
.kontakt #error {padding: 10px; margin: 1em 0px 2em 0px;}
.kontakt #error p {padding:0; margin:0; color:#fff;}
.kontakt #error ul {list-style:none; margin:0;}



.add-bullet li { margin:0; padding: 0px 0px 0px 0px; }
.add-bullet li.facebook {background: url(/grafika/content-icon-share-facebook.gif) 8em 1px no-repeat;}
.add-bullet li.twitter {background: url(/grafika/content-icon-share-twitter.gif) 8em 1px no-repeat;}
.add-bullet li.deviantart {background: url(/grafika/content-icon-share-deviantart.gif) 8em 1px no-repeat;}
.add-bullet li.lastfm {background: url(/grafika/content-icon-share-lastfm.gif) 8em 1px no-repeat;}
.add-bullet li.linkedin {background: url(/grafika/content-icon-share-linkedin.gif) 8em 1px no-repeat;}

.to-portfolio {background: url(/grafika/content-icon-portfolio.gif) 1px 1.55em no-repeat;}

.exact-1 {height:9em;}
.exact-p {height:11em;}
.last-project p {color: #777; font-size:0.8em; text-align:center; margin:0; padding:0; }
.last-project img, .project img {margin:0px 0px 5px 0px; }


.project p {color: #777; font-size:0.8em; text-align:center; margin:0; padding:0; }


a.external, a.external:link, .a.external:visited, a.external:hover, a.external:active {color: #777; font-weight: normal; background: url(/grafika/content-icon-external-micro.gif) right 1px no-repeat; padding: 0px 14px 0px 0px;}
a.download, a.download:link, .a.download:visited, a.download:hover, a.download:active {color: #777; font-weight: normal; background: url(/grafika/content-icon-download-micro.gif) right 0px no-repeat; padding: 0px 14px 0px 0px;}


.textbox h2, .textbox h3 { padding: 0px 0px 0px 22px; }
h2.lastwork {background: url(/grafika/content-icon-lastwork.gif) 1px 2px no-repeat;}
h3.contactpromo {background: url(/grafika/content-icon-world.gif) 1px 3px no-repeat;}
h2.contactpromo {background: url(/grafika/content-icon-world.gif) 1px 2px no-repeat;}
h2.activitiespromo {background: url(/grafika/content-icon-bulb.gif) 1px 1px no-repeat;}
h3.lastpost {background: url(/grafika/content-icon-lastpost.gif) 1px 1px no-repeat;}

h2.me {background: url(/grafika/content-icon-me.gif) 0px 3px no-repeat;}
h2.knowledge {background: url(/grafika/content-icon-gear.gif) 0px 2px no-repeat;}
h2.leisure {background: url(/grafika/content-icon-heart.gif) 0px 2px no-repeat;}
h2.school {background: url(/grafika/content-icon-school.gif) 0px 2px no-repeat;}
h2.employer {background: url(/grafika/content-icon-employer.gif) 0px 2px no-repeat;}

h3.music {background: url(/grafika/content-icon-music.gif) 0px 2px no-repeat;}
h3.social {background: url(/grafika/content-icon-social.gif) 0px 2px no-repeat;}
h3.reading {background: url(/grafika/content-icon-reading.gif) 0px 2px no-repeat;}
h3.friends {background: url(/grafika/content-icon-friends.gif) 0px 2px no-repeat;}

h2.web {background: url(/grafika/content-icon-lcd.gif) 0px 2px no-repeat;}
h2.gfx {background: url(/grafika/content-icon-photo.gif) 0px 2px no-repeat;}
h2.logo {background: url(/grafika/content-icon-crown.gif) 0px 2px no-repeat;}
h2.foto {background: url(/grafika/content-icon-camera.gif) 0px 2px no-repeat;}

h2.letter {background: url(/grafika/content-icon-letter.gif) 0px 2px no-repeat;}
h3.other {background: url(/grafika/content-icon-mouse.gif) 0px 2px no-repeat;}
h3.coop {background: url(/grafika/content-icon-brick.gif) 0px 3px no-repeat;}


.profil .background-box { height: 156px; padding-bottom: 22px;}
.aktivity .background-box { height: 156px; padding-bottom: 22px;}
.portfolio .background-box { height: 156px; padding-bottom: 22px;}
.kontakt .background-box { height: 156px; padding-bottom: 22px;}
.uvod .background-box { height: 306px; padding-bottom: 22px;}
.uvod .background-box p {display:block; padding: 0px 80px 0em 28px;color:#555; margin:0px 0px 1em 0px;}

.background-box h1 {font-family: "Georgia", serif; font-size:47px;color:#000; padding: 0.8em 1.5em 0.3em 28px; margin:0;}
.background-box p {}
.promo {height: 60px; padding: 0px 0px 0px 50px;  display:block;}
.promo.first {margin: 45px 0px 0px 0px;}
.promo.follow {background: url(../grafika/content-icon-bird.gif) no-repeat left top;}
.promo.pdf {background: url(../grafika/content-icon-pdf.gif) no-repeat left top;}
.promo.grabrss {background: url(../grafika/content-icon-grabrss.gif) no-repeat left top;}

.promo.da {background: url(../grafika/content-icon-da.gif) no-repeat left 1px;}

.promo h3 {font-size: 1.6em; padding: 0.2em 0px 0px 0px; margin:0;}
.promo span {font-size: 0.9em;}

.profil {background: #fff url(../grafika/content-background-profile.jpg) no-repeat center -50px;}
.aktivity {background: #fff url(../grafika/content-background-profile.jpg) no-repeat center -50px;}
.portfolio {background: #fff url(../grafika/content-background-profile.jpg) no-repeat center -50px;}
.kontakt {background: #fff url(../grafika/content-background-profile.jpg) no-repeat center -50px;}
.uvod {background: #fff url(../grafika/content-background-profile.jpg) no-repeat center 100px;}






/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #E5ECF9; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.45em;
  border: none; 
}
hr.space {
  background: transparent;
  color: #fff;
  border: 0;
  
}



/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: inline-block;}
* html .clearfix,
* html .container {height: 1%;}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }

/* Footer
-------------------------------------------------------------- */
#footer {background: #0c0c0c url(../grafika/footer.gif) no-repeat center bottom; padding: 20px 20px 20px 20px; overflow:hidden; min-height:17.5em; height:auto !important; height:17.5em;}

.underground {text-align:center; font-size: 0.9em; color: #555; padding: 20px 0px 0px 0px;}
.underground a, .underground a:link, .underground a:visited {color: #555;}