/*----------------------------------------------------------------------
  typography.css
  ==============
  - only styling that affects content goes here...

  important colors:
  - #ffc664 // light yellow
  - #500000 // dark red
  - #ad6c00 // another highlight-color for secondary content
  - #b1730d // and another highlight-color for secondary content...
  - #c0c0c0 // gray no.1
  - #808080 // gray no.2
  - #303030 // gray no.1

  sizes:
  - 479px // maximal width for content items
  - 471px // maximal width for images that are sourround by links
    (border, padding)
  - 469px // maximal width for secondary content items
----------------------------------------------------------------------*/




/*----------------------------------------------------------------------
----  GENERAL STUFF  ---------------------------------------------------
----------------------------------------------------------------------*/

/* fonts */
@font-face {
    font-family: FamilianElder;
    src: url(/style/familianelder.TTF);
    font-weight:400;
}

/* base */
body {
  font:80%/150% "Lucida Sans Unicode",Verdana,Arial,sans-serif;
  margin:0;
  padding:0;
}

/* headlines */
h1 {
  font:normal 2.1em/1.1em FamilianElder, "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  color:#ffc664;
  border-bottom:1px solid #ffc664;
  margin-bottom:0.5em;
  letter-spacing:0em;
}
h1 span {
  text-transform:uppercase;
  font-style: normal;
}
h1 em{
  color:#000000;
  font-style: normal;
}
h2 {
  font:normal 1.6em/1.1em FamilianElder, "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  margin:1em 0 0.25em;
  color:#000;
  /*border-bottom:1px solid #000;*/
}
h3 {
  font:bold 1em/1.1em "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  margin:1em 0 0.75em;
}

/* paragraphs */
p {
  margin:0 0 1em;
}

/* lists */
ul,ol {
  margin:0 0 1em;
  list-style:none;
}
/* custom list bullets: bullet2.gif="+", bullet.gif=arrow */
#content li {
  padding:0.1em 0 0.1em 20px;
  /*background:url(img/bullet.gif) no-repeat 4px 6px;*/
  background:url(img/bullet2.gif) no-repeat 4px 5px;
}
/* links */
a {
  -moz-outline:none;
  color:#ffc664;
  text-decoration:none;
  border-bottom:1px solid #000;
}
a:hover {
  color:#fff;
  border-bottom:1px solid #fff
}
/* image links */
a img {
  display:block;
  border:2px solid #ffc664;
  padding:2px;
  background:#520000;
}
a:hover img {
  border:2px solid #000;
}
/* breadcrumb on articles */
#content ul.breadcrumb {
  text-align:right;
  margin:-5px 0 0 0;
}
#content ul.breadcrumb li {
  padding:0;
  background:none;
  display:inline;
  /*text-transform:uppercase;*/
}
h3 strong {
  text-transform:uppercase;
  border-bottom:1px solid #500000;
  display:inline;
}
button {
  font:bold 110% "Lucida Sans Unicode",Verdana,Arial,sans-serif;
  padding:2px 5px;
}

strong {
  text-shadow: #000 0px 0px 2px;
}

/* some general classes
----------------------------------------------------------------------*/

/* floated headlines? not used anymore... */
h3.left {
  margin:10px 0 5px 0;
  line-height:1.5em;
  white-space:nowrap;
  float:none;
  /*width:70px;*/
}
/* for some decoration on headlines like "//" */
ul.box em {
  font-style:normal;
  color:#500000;
  letter-spacing:-0.07em;
}
h3 span,p.box span {
  color:#500000;
  letter-spacing:-0.07em;
}
/* box or image placement around text */
.left {
  float:left;
  margin:0 10px 5px 0;
}
.right {
  float:right;
  margin:0 0 5px 10px;
}


/* secondary content
-------------------------------------------------*/
#secondary-content a,
#secondary-content li {
  color:#ad6c00;
  border:none;
}
#secondary-content a:hover {
  color:#fff;
  text-decoration:none;
  border:none;
}
#secondary-content li.active a {
  color:#ad6c00;
  text-decoration:none;
  font-weight:bold;
  cursor:default;
}
#secondary-content .box {
  width:155px;
  float:left;
  padding-left:5px;
}
#secondary-content ul{
  list-style:none;
}
#secondary-content h2{
  border-bottom:1px solid #ffc664;
  margin: 0 0 2px 0;
  color:#ffc664;
}
#secondary-content .none{
  text-decoration:none;
}


/*----------------------------------------------------------------------
----  MISC STUFF  ------------------------------------------------------
----------------------------------------------------------------------*/


/* portfolio stuff
----------------------------------------------------------------------*/

div.portfolio-showcase {
  margin:30px 0;
  width:479px;
  overflow:hidden;
}
div.portfolio-showcase h2 {
  font-size:22px;
  font-weight:normal;
  border-bottom:none;
}
div.portfolio-showcase.odd h2 {
  color:#200000;
  margin: 0 207px -0px 0;
  width:270px;
  display:inline;
  float:right;
}
div.portfolio-showcase.even h2 {
  color:#000000;
  margin: 0 0 -0px 217px;
  width:270px;
  display:inline;
  float:left;
}
#content p.category {
  color:#ad6c00;
  font-size:20px;
  float:left;
  margin:-10px 15px 0;
  width:251px;

  font-family: FamilianElder, Verdana;
}
#content div.box{
  width:483px;
  height:96px;
  margin:10px 0;
  overflow:hidden;
  clear:both;
}
* html #content div.box {
  width:479px;
}
#content div.box{
  background:url(img/portfolio_bg.gif)  no-repeat;
}
#content div.portfolio-showcase.even div.box{
  background:url(img/portfolio_bg1.gif)  no-repeat;
}
#content div.portfolio-showcase.odd div.box{
  background:url(img/portfolio_bg2.gif)  no-repeat;
}
div.portfolio-showcase img{
  border:none;
}
div.portfolio-showcase p.image{
  width:195px;
  height:90px;
  overflow:hidden;
}
div.portfolio-showcase.even p.image{
  margin: 3px 3px;
  display:inline;
  float:left;
}
div.portfolio-showcase.odd p.image{
  margin: 3px 7px 3px 0px;
  display:inline;
  float:right;
}
div.portfolio-showcase p.image a span{
  width:195px;
  height:90px;
  display:block;
  text-indent:-9999px;
  letter-spacing:-9999px;
  background-position:0 0;
  border:none;
}
div.portfolio-showcase p.image a:hover span{
  background-position:0 -90px;
  border:none;
}
#content div.box div.description {
  color:#ffc664;
  font-size:16px;
  width:446px;
  height:45px;
  margin:10px 18px 10px 15px;
  overflow:hidden;
}
#content div.portfolio-showcase div.box div.description {
  display:inline;
  width:247px;
  height:58px;
}
div.portfolio-showcase.even div.box div.description {
  float:left;
}
div.portfolio-showcase.odd div.box div.description {
  float:right;
  text-align:right;
}


/* profile page stuff
----------------------------------------------------------------------*/

/* last.fm charts to shwo what im listening to :o) */
#content ul.box.currently-listening li {
  padding:0;
  background:none;
}
#content ul.box.currently-listening li a{
  white-space:nowrap;
}
#content ul.box.currently-listening {
  width:379px;
  display:inline;
  float:left;
  background:#a40000 url(img/last_scrobbled.gif) no-repeat 2px 50%;
  padding-left:100px;
  border:1px solid #520000;
  border-width:1px 0;
  margin:1em 0 0;
  overflow:hidden;
}
* html #content ul.box.currently-listening {
  width:479px;
}
#content ul.box.currently-listening li,
#content ul.box.currently-listening li span {
  display:block;
  padding:0.2em 0;
  white-space:nowrap;
}
#content ul.box.currently-listening li.even,
#content ul.box.currently-listening li span.even {
  background:#9a0000;
}
.lastfmad {
  clear:both;
  margin-left:110px;
}
.lastfmad a {
  border:none;
  text-decoration:underline;
  color:#520000;
}
h3.left.currently-listening {
  display:none;
}
/* put an icon beneath the list */
h3.left.programs {
  padding-left:110px;
}
#content ul.box.programs {
  background:url(img/knowledges.gif) left top no-repeat;
  padding-left:110px;
}
h3.left.languages {
  padding-left:110px;
}
#content ul.box.languages {
  background:url(img/code.gif) left top no-repeat;
  padding-left:110px;
}


/* contact form
----------------------------------------------------------------------*/

/* needed a wrapper :( */
.zemContactForm div.letter {
  border:2px solid #000;
  background:url(img/mail_bg.gif) 100% 0;
  display:block;
  width:430px;
  margin:0 15px;
}
/* place a nice stamp somewhere */
.zemContactForm div.stamp{
  background:url(img/mail_stamp.gif) 100% 7px no-repeat;
  padding:15px 0 0;
  margin:0 15px;
}
/* style errors a little bit */
#content ul.zemError {
  margin:0 0 1em 20px;
}
#content ul.zemError li{
  background:url(img/bullet3.gif) no-repeat 0 50%;
  padding:3px 0 3px  13px;
  color:#ffc664;
}
/* form elements */
.zemContactForm fieldset {
  border:none;
}
.zemContactForm legend {
  display:none;
}
.zemContactForm label {
  color:#500000;
  display:block;
  text-transform:uppercase;
  cursor:pointer;
}
.zemContactForm label:hover {
  color:#000;
}
.zemContactForm textarea,.zemContactForm input {
  border:1px solid #500000;
  border-top:2px solid #500000;
  background:#fff;
  padding:2px 3px;
  font:12px "Lucida Console","Courier New", monospace;
  color:#500000;
  width:150px;
}
.zemContactForm label:hover textarea,
.zemContactForm label:hover input {
  background-color:#000;
  color:#fff;
  border-color:#000;
}
.zemContactForm label textarea:focus,
.zemContactForm label input:focus {
  background-color:#500000;
  color:#ffc664;
  border-color:#500000;
}
.zemContactForm textarea {
  display:block;
  width:390px;
  height:196px;
  background:#fff;
}


/* start page
----------------------------------------------------------------------*/
.specialized {
  padding-left:135px;
  background:url(img/laptop.gif) 0 50% no-repeat;
  font-size:1.15em;
  margin:1em 0;
  color:#ffc664;
  text-shadow: #000 0px 1px 2px;
}


/* image showcase
----------------------------------------------------------------------*/

#image-showcase div {
  position:absolute;/*
  top:50%;
  left:50%;*/
  display:block;
  margin:5px;
}
#image-showcase div a {
  display:block;
  overflow:hidden;
  border:none;
}
#image-showcase div a:hover {
  border:none;
}
#image-showcase a img {
  border:none;
  display:block;
  padding:0;
  cursor:default;
}
/* darken the rest of the page */
#image-showcase span.dark {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  background:#000;
}
/* close button */
#image-showcase a span {
  display:none;
  position:absolute;
  top:0;
  right:0;
  width:18px;
  height:18px;
  background:url(img/img_showcase_x.gif) 0 0;
  cursor:pointer;
}
#image-showcase a span:hover {
  background-position:0 -18px;
}
#image-showcase a:hover span {
  display:block;
}
/* nice border around tha image */
#image-showcase span.box {
  display:block;
  position:absolute;
}
#image-showcase span.box.top-left,
#image-showcase span.box.top-right,
#image-showcase span.box.bottom-left,
#image-showcase span.box.bottom-right {
  background:#808080;
  width:12px;
  height:12px;
}
#image-showcase span.box.top-left { left:-12px; top:-12px; background:url(img/img_showcase_tl.gif); }
#image-showcase span.box.top-right { right:-12px; top:-12px; background:url(img/img_showcase_tr.gif); }
#image-showcase span.box.bottom-left { left:-12px; bottom:-12px; background:url(img/img_showcase_bl.gif); }
#image-showcase span.box.bottom-right { right:-12px; bottom:-12px;background:url(img/img_showcase_br.gif); }

#image-showcase span.box.top,
#image-showcase span.box.bottom {
  left:0;
  background:#303030;
  width:100%;
  height:12px;
}
#image-showcase span.box.top { top:-12px; background:url(img/img_showcase_t.gif); }
#image-showcase span.box.bottom { bottom:-12px; background:url(img/img_showcase_b.gif); }

#image-showcase span.box.left,
#image-showcase span.box.right {
  top:0;
  background:#303030;
  height:100%;
  width:12px;
}
#image-showcase span.box.left { left:-12px; background:url(img/img_showcase_l.gif); }
#image-showcase span.box.right { right:-12px; background:url(img/img_showcase_r.gif); }


#image-showcase span.box2,
#image-showcase span.box3 {
  display:block;
  position:absolute;
  background:#000;
  width:1px;
  height:2px;
}
#image-showcase span.box3 {
  width:2px;
  height:1px;
}
#image-showcase span.box2.top-left,#image-showcase span.box3.top-left { left:0;top:0; }
#image-showcase span.box2.top-right,#image-showcase span.box3.top-right { right:0;top:0 }
#image-showcase span.box2.bottom-left,#image-showcase span.box3.bottom-left { left:0;bottom:0; }
#image-showcase span.box2.bottom-right,#image-showcase span.box3.bottom-right { right:0;bottom:0 }



/* comments (speechbubble)
----------------------------------------------------------------------*/

ol.comments {
  margin:20px 0;
}
ol.comments li {
  background:url(img/comment_bubble_top.gif) no-repeat 0 0;
  padding:11px 0 0 0;
  margin:10px 0;
}
ol.comments li.odd {
  text-align:right;
}
ol.comments li p{
  margin:0 0 5px;
}
ol.comments li div.comment_body {
  background:url(img/comment_bubble_bg.gif) repeat-y 0 0;
  overflow:hidden;
  padding:0 10px 0 10px;
  color:#808080;
}
ol.comments li div.comment_body div.usericon {
  width:48px;
  height:48px;
  float:left;
  padding:1px;
  margin:0 10px 0 0;
  border:1px solid #808080;
  background:#000 url(img/usericon_default.png) 50% no-repeat;
}
ol.comments li.odd  div.comment_body div.usericon {
  float:right;
  margin:0 0 0 10px;
}
ol.comments li p.comment_footer {
  background:url(img/comment_bubble_bottom.gif) no-repeat 0 0;
  padding:10px 10px 0 10px;
  overflow:hidden;
  margin:0;
  line-height:24px;
}
ol.comments li p.comment_footer strong {
  background:url(img/comment_bubble_arrow.gif) no-repeat 100% 0;
  padding:0 40px 0 0;
  font-size:16px;
  float:left;
  display:block;
}
ol.comments li.odd p.comment_footer strong {
  float:right;
  padding:0 0 0 40px;
  background:url(img/comment_bubble_arrow_right.gif) no-repeat 0 0;
}
#secondary-content ol.comments li p.comment_footer a {
  color:#303030;
}
#secondary-content ol.comments li p.comment_footer strong a {
  color:#fff;
}
#secondary-content ol.comments li p.comment_footer a:hover {
  text-decoration:underline;
}
ol.comments li p.comment_footer span {
  display:none;
}


/* comments form
----------------------------------------------------------------------*/

form#txpCommentInputForm {
  display:block;
  width:382px;
  margin:0 auto;
}
form#txpCommentInputForm label {
  text-transform:uppercase;
  color:#b1730d;
  line-height:16px;
  cursor:pointer;
}
form#txpCommentInputForm label:hover {
  color:#ffc563;
}
form#txpCommentInputForm textarea,
form#txpCommentInputForm input {
  border:1px solid #ffc563;
  border-top:2px solid #ffc563;
  background:#b1730d url(img/comment_form_bg.gif);
  padding:2px 3px;
  font:12px "Lucida Console","Courier New", monospace;
  color:#573600;
  width:150px;
}
form#txpCommentInputForm textarea {
  display:block;
  width:374px;
  height:120px;
}
form#txpCommentInputForm label:hover textarea,
form#txpCommentInputForm label:hover input,
form#txpCommentInputForm label textarea:focus,
form#txpCommentInputForm label input:focus {
  background:#ffc563;
  color:#000;
}
#secondary-content form#txpCommentInputForm h2{
  border-bottom:1px solid #ffc664;
  margin: 0 0 15px 0;
}