/*
--------------------------------------------------------
Smashingmagazine.com CSS Stylesheet
Author:   Vitaly Friedman, Sven Lennartz
Version:  29 June 2007
------------------------------------------------------- */

/* Body Styles
----------------------------------------------- */
     body {
          background-color:#fff;
          color:#000000;
          font-family:Verdana,Arial,Helvetica,sans-serif;
          font-size:0.6em;
          line-height:2em;
          margin-top: 0;
          margin-bottom: 5px;
          padding: 0;
     }

     h1,h2,h3,h4 {
          font-weight:normal;
          letter-spacing:-1px;
          margin:0;
     }

     a:link, a:hover, a:focus, a:active {
     	  color:#d3d3d3;
     	  text-decoration: none;
          outline: none;
     }
	 a:visited{
     	  color:#d3d3d3;
     	  text-decoration: none;
          outline: none;
          }
     a:hover {
     	  color:#a9a9a9;
          text-decoration: underline;
     }
     
     p.showcase {
     	margin-left: 2em;
     }

/* Wrapper Styles
----------------------------------------------- */
     #wrap {
           margin: 0 auto;
           width: 815px;
           background-color: #fff;
           border: 0;
     }
					
     #banner {
           margin: 0 auto;
           width: 815px;
           background-color: #fff;
           border: 1;
     }

     #contentmain {
          font-size: 1em;
          font-weight: normal;
          color: #aaa;
     }

/* Header Styles
----------------------------------------------- */
     #header {
          width: 500px;
          padding: 0;
          margin: 0 0px 0 0;
          background-color: #fff;
          padding: 1em 0 0 2em;
     }

     #header h1 {
          background:#fff url(http://www.smashingmagazine.com/images/logo/logo.gif) no-repeat;
          width: 100%;
          height: 62px;
          overflow: hidden;
          margin: 0;
          padding: 0;
          z-index: 30;
          float: left;
     }

     #header h1 a {
          display: block;
          text-indent: -500px;
          width: 100%;
          border: 0;
          height: 62px;
          font: 1.5em "Lucida Sans Unicode", Georgia;
          text-decoration: none;
          color: #E87830;
          border-bottom: 1px solid #E87830;
     }

     #header h1 a:hover {
          color:#CC0000;
          text-decoration: none;
          border: 0;
          border-bottom: 1px solid #CC0000;
     }

     #logo {
          background-image:url("http://www.alvit.de/smash-logo.jpg");
          background-repeat:no-repeat;
          width:100%;
          height:67px;
          margin-bottom:12px;
          cursor:pointer;
     }

/* Content Containers, Content Styling
----------------------------------------------- */
     #news {
          margin: 15px 15px 0 15px;
          width:790px;
     }
     
     #news .words {
          width:545px;
          float:left;
          padding:5px;
          font-size:1.2em;
     }
     
     #news .words h2 a,#news .single h2 a {
          padding:0;
          text-decoration:none;
          background-color:rgb(255, 255, 255);
          font-size:2.4em;
          margin-bottom:17px;
          font-weight:normal;
          font-family:"Helvetica", "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif;
          line-height:1.3em;
          color:#A7B63F;
          text-decoration: underline;
          border: none;
          /*
          color: #ca1717;
          */
     }

     * html #news .words h2 a, * html #news .single h2 a {
          font-size:1.7em;
     }
     
     #news .words h2 a:hover,#news .single h2 a:hover {
          padding:0;
          color:#58bbeb;
          background-color:rgb(255, 255, 255);
          text-decoration: underline;
          border: none;
     }
    
     #news .words .left,#news .single .left {
          font-size:11px;
          color:#aaa;
          margin-bottom:10px;
     }
     
     #news .post {
          font-family:Verdana, Georgia, "Times New Roman", Times, serif;
          font-size:1em;
          color:#000000;
          line-height:1.66em;
          margin:0;
          padding:0;
     }
     
     #news .words a,#news .single a {
          color:#0040B6;
          font-weight:bold;
          text-decoration: none;
          border-bottom:1px dotted #0040B6;
     }
     
     #news .words a:focus,#news .words a:active, #news .words a:hover,#news .words ul li a:visited:hover,#news .single a:focus,#news .single a:active,#news .single a:hover,#news .single ul li a:visited:hover {
          color:#CC0000;
          text-decoration:none;
          border-bottom:1px solid #cc0000;
     }
     
     #news .single p a:visited:hover,#news .words p a:visited:hover {
          border-bottom:1px solid #cc0000;
          color: #cc0000;
          text-decoration:none;
     }
     
     #news .words p a:visited,#news .single p a:visited {
          color:#5999DE;
          padding:1px 0;
          border-bottom: 1px solid #5999de;
     }
     
     #news .words h2 a:active,
     #news .single h2 a:active {
          color:#58bbeb;
          background-color: #F1FAFD;
          text-decoration:underline;
          border: none;
     }

     #news .words h2 a:focus,
     #news .single h2 a:focus {
          color:#58bbeb;
          text-decoration:underline;
          border: none;
     }

     #news .words ul li a:visited,
     #news .words li a:visited,
     #news .words p a:visited,#news .single p a:visited {
          color:#5999DE;
          padding:1px 0;
          border-bottom: 1px solid #5999de;
          text-decoration: none;
     }
     
     #news .words ul li,
     #news .single ul li,
     #news ul li {
          margin:5px 0 5px 2em;
          list-style-type: square;
     }
     
     #news .words h3,#news .single h3 {
          font-family:"Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif;
          font-size:2.3em;
          line-height:1.3em;
          font-weight:normal;
          letter-spacing:-1px;
          color:#000000;
          padding:0.35em 0 0.15em 0;
          border-bottom:3px solid #333;
          margin-right: 16px;
     }
    
     #news .words h4,#news .single h4 {
          font-family:"Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif;
          font-size:2.1em;
          line-height:1.3em;
          font-weight:normal;
          letter-spacing:-1px;
          color:#111;
          padding:0.35em 0 0.15em 0;
          border-bottom:3px solid #222;
          margin-right: 16px;
          margin-left: 1em;
     }

     #news .pgentry {
          border-bottom:1px dotted rgb(226, 226, 226);
          margin-bottom:3px;
          margin-top: 1.1em;
     }
     
     #news .ntentry {
          margin-bottom:2px;
          margin-top:2px;
     }
     
     #news .pgentry img {
          border:1px solid rgb(239, 239, 239);
          margin:0px;
          padding:0px;
          display:block;
     }
     
     #news .pgentry ul li {
          padding-top: 3px;
     }
     
     .single ul li, .pgentry ul li, #news ul li {
          padding-top: 3px;
     }
     
     #news .facts h2 {
          padding:0;
          color:rgb(51, 51, 51);
          font-weight:bold;
          font-size:12px;
          margin-top:0;
          margin-bottom:2px;
     }
     
     #news .facts h2 a {
          border-bottom:1px dotted rgb(202, 23, 23);
          text-decoration:none;
          color:rgb(51, 51, 51);
     }
     
     #news .clear {
          width:100%;
          height:8px;
          background-color:rgb(255, 255, 255);
     }
     
     #news .single {
          padding:5px;
          width:525px;
          float:left;
          margin-right:20px;
          font-size:12px;
          line-height:17px;
          background-color:rgb(255, 255, 255);
          color:rgb(68, 68, 68);
     }
     
     #news .single .left {
          font-size:0.9em;
          color:#ccc;
          margin-bottom:10px;
     }

/* Sidebars Styling
----------------------------------------------- */
     #news .sidebars {
          padding: 0;
          width:200px;
          float:right;
          line-height:14px;
     }
     
     #news .sidebars .head {
          background-image:url('browse_head.gif');
          background-repeat:no-repeat;
          width:100%;
          height:25px;
     }
     
     #news .sidebars h2 {
          background-color:#a10000;
          padding:5px;
          color:#fff;
          font:1.2em Verdana, Georgia;
          margin-bottom:5px;
          font-weight:bold;
          -moz-border-radius: 3px;
     }
     
     #news .sidebars h2 a {
          border-bottom:1px dotted rgb(85, 85, 85);
          text-decoration:none;
          color:rgb(51, 51, 51);
     }
     
     #news .sidebars h3 {
          background-color: #5280BC;
          padding:5px;
          color:#fff;
          font:1.2em Verdana, Georgia;
          margin-top:12px;
          margin-bottom:5px;
          font-weight:bold;
          -moz-border-radius: 3px;
     }
     
     #news .sidebars ul {
          margin:0 0.75em 0 0.75em;
          padding:0;
          list-style-type:none;
          font-size:11px;
     }
     
     #news .sidebars ul.pop {
          margin:0;
          list-style-type:none;
          font-size:11px;
     }
     
     #news .sidebars ul li {
          list-style-type:none;
          font-weight:normal;
          font-size: 1.1em;
          margin: 0;
     }
     
     #news .sidebars ul.pop li {
          padding: 0 3px;
     }
     
     #news .sidebars ul.pop li a {
          padding: 5px;
     }
     
     #news .sidebars ul li a {
          color: #0066CC;
          padding:3px 0.75em 5px 0.75em;
          display:block;
          font-size: 0.9em;
          border-bottom: 1px solid #ebebff;
     }
     
     * html body #news .sidebars ul.pop li {
               margin: 0;
               display: inline;
     }

     * html body #news .sidebars ul.pop li a
      {
               padding:5px;
               margin: 0;
     }
     
     * html body #news .sidebars ul li {
               margin: 0;
               display: inline;
     }
          * html body #news .sidebars ul li a {
               padding:5px;
               margin: 0;
     }
     
     #news .sidebars ul li a:hover {
          background-color: #fff;
          border-bottom: 1px solid #EBEBFF;
     }
     
     #news .sidebars ul.pop li a:visited {
          background-color: #FAFAFF;
          border-bottom: 1px solid #EBEBFF;
          text-decoration: none;
     }

     * html body #news .sidebars ul.pop li a:visited
      {
               padding:5px;
               margin: 0;
     }

     .block {
          background-color: #F6F6FF;
     }
     
     .ablock {
          background-color: #fff;
     }
     .ablock p {
          text-align: center;
     }

/* Comments Styling
----------------------------------------------- */
     #commentarea {
          width:525px;
          float:left;
          padding-left:5px;
          font-family:Verdana,Arial,Helvetica,sans-serif;
          font-size:11px;
          margin-top:10px;
     }
     
     #commentarea h3 {
          margin:0;
          color:rgb(102, 102, 102);
          font-weight:normal;
          line-height:1.3em;
     }
     
     .commentsblock {
          margin:0.5em;
          padding:1em;
     }
     
     .commentsblock textarea {
          width:250px;
     }
     
     .commentsblock input,.commentsblock textarea {
          border:1px solid rgb(209, 209, 209);
     }
     
     .commentauthor {
          display:block;
          font-size:1.5em;
     }
     
     ol.commentlist {
          margin:1.5em 0 0;
          padding:0;
          color: #333;
          font-family: Helvetica, Verdana, Arial, sans-serif;
          font-size: 1.1em;
     }
     
     ol.commentlist p {
          line-height: 1.5em;
     }
     
     ol.commentlist li {
          margin: 1.3em 0;
     }
     
     ol.commentlist li.alt:hover,
     ol.commentlist li.norm:hover {
          background-color: #fff;
     }

     ol.commentlist li.alt {
          padding:1px 20px 1px 20px;
          line-height: 1.6em;
          border: 1px solid #CDDFEF;
          background-color: #F3F7FB;
          -moz-border-radius: 5px;
     }

     ol.commentlist li.norm {
          background-color: #F3F7FB;
          padding:1px 20px 1px 20px;
          line-height: 1.6em;
          border: 1px solid #CDDFEF;
          background-color: #F3F7FB;
          -moz-border-radius: 5px;
     }     

     ol.commentlist li.author {
          padding:1px 20px 1px 20px;
          line-height: 1.6em;
          border: 1px solid #FFEF8A;
          background-color: #FFFAE0;
          -moz-border-radius: 8px;
     }

    ol.commentlist li.author p.commenter {
          padding: 3px 15px 3px 10px;
          margin: 0px -20px; 
          background: #FFF6BF;
          border-bottom: 2px solid #fff;

}
     p.commenter {
          padding: 3px 15px 3px 10px;
          margin: 0px -20px; 
          background: #E4ECF6;
          border-bottom: 2px solid #fff;
     }

     .commenttext p {
          margin-left: 10px;
     }

     ol.commentlist a {
          border-bottom:1px dotted rgb(202, 23, 23);
          color:rgb(85, 85, 85);
          text-decoration:none;
          display:inline;
          line-height:1.5em;
     }
         
     ol.commentlist span {
          background-color:#fff;
          padding:3px 1px;
     }
     
     .cauthor {
          font-weight:normal;
          font-size:0.8em;
          background-color: #fff;
          border-right: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          padding: 2px;
          padding-left: 4px;
     }
     .cauthor strong {
          background-color: #fff;
          padding: 4px;
          margin-left: -4px;
     }
     
     .cauthor a {
          color:rgb(85, 85, 85);
          font-size:12px;
          font-weight:bold;
          text-decoration:none;
     }
          
     .alt2 {
          border-top:2px solid rgb(255, 211, 36);
          border-bottom:2px solid rgb(255, 211, 36);
          margin:10px auto;
          padding:5px 20px 5px 45px;
          background:rgb(255, 255, 255) none repeat;
     }
     
     .comment-even,.comment-preview {
          background-color:rgb(248, 250, 252);
     }
     
     .comment-odd {
          background-color:rgb(255, 255, 255);
     }
     
     .authorcomment {
          background-color:#f0FDBE;
          color:#333;
     }
     
     .comment-favatar {
          margin:2px 0 0;
          background:transparent none repeat scroll center;
          float:right;
          width:16px;
          height:16px;
     }
         
     .trackback-favatar {
          margin:2px 6px 0 2px;
          background:transparent none repeat scroll center;
          width:16px;
          height:16px;
          float:left;
          cursor:pointer;
     }
     
     .trackback {
          font-size: 0.9em;
     }
     
     .comment-gravatar img {
          border:1px solid rgb(165, 165, 163);
          margin:0;
          padding:2px;
          background:rgb(255, 255, 255) url('avatar.jpg') no-repeat scroll center;
          float:right;
          width:30px;
          height:30px;
     }
     
     #commentform textarea {
          width:90%;
     }
     
     .gravatar {
          border:0 none;
          margin-right:-5px;
          float:right;
     }
     
     ol.commentlist blockquote {
          border:1px solid rgb(235, 235, 235);
          padding:1px;
          background:rgb(248, 250, 252) url('blockquote.gif') no-repeat scroll left top;
          line-height:normal;
          font-size:10px;
     }

     .commentsblock textarea:focus,.commentsblock textarea:focus,.commentsblock input:focus {
          border:1px solid rgb(161, 161, 161);
          background:rgb(238, 238, 238) none repeat;
     }
     
     ol.commentlist a:hover,.cauthor a:hover {
          color:rgb(34, 34, 34);
          text-decoration:none;
     }
     .commallow {
          font-size: 0.9em;
          line-height: 1.6em;
     }
     input, textarea {
     font-family: Helvetica, Verdana, "Lucida Sans Unicode", sans-serif;
     font-size: 1.2em;
     }
/* Deckbar Styling
----------------------------------------------- */
     #login {
          background:rgb(217, 212, 192) none repeat;
          overflow:hidden;
          width:100%;
     }
     
     #deckcontent {
          padding:2px;
          font-size:12px;
          color:rgb(51, 51, 51);
          line-height:normal;
          margin-top:5px;
     }
     
     #deckcontent img {
          vertical-align:middle;
     }
     
     #deckcontent a {
          padding:3px;
          margin-right:25px;
          background-color:rgb(247, 245, 240);
          text-decoration:none;
          color:rgb(51, 51, 51);
     }
     
     #deckcontent a:hover {
          background-color:rgb(224, 220, 205);
     }
     
     #login-button {
          border-top:3px solid rgb(217, 212, 192);
          width:100%;
          text-align:center;
     }
     
     #login-button a img,a:visited img,a:hover img {
          border:medium none;
     }

/* Search Styling
----------------------------------------------- */
     #search {
          float:right;
          margin-right:5px;
          width:300px;
          vertical-align:middle;
     }
     
     #searchimage {
          float:left;
          margin-left:5px;
          margin-right:90px;
          width:300px;
          vertical-align:middle;
     }
     
     #searchform .field {
          border:1px solid rgb(164, 158, 135);
          font-family: "Helvetica", verdana, sans-serif;
          font-size:10pt;
          background-color:rgb(247, 247, 242);
          width:205px;
     }
     
     #searchpg {
          padding:2px;
          width:100%;
          background-color:rgb(242, 242, 245);
          margin-bottom:7px;
     }
     
     #searchpg h3 {
          margin:0;
          padding:0;
          font-size:12px;
          font-weight:bold;
     }

/* Footer Styling
----------------------------------------------- */
     #preclear {
          width:100%;
          height:30px;
          background-color:rgb(255, 255, 255);
     }
     
     #footer {
          width:815px;
          background-color:rgb(247, 247, 242);
          color:rgb(17, 17, 17);
          font-size: 0.9em;
          margin: 0;
          padding: 0;
          border-top: 1px solid #E6E6E6;
          border-bottom: 1px solid #E6E6E6;
          }
     
     #footer p {
          padding:0.1em 1em 0.1em 3em;
     }
     
     #footer a {
          color: #0040B6;
          text-decoration: none;
          border-bottom: 1px dotted #0040b6;
     }
     #footer a:hover {
          color: #cc0000;
          text-decoration: none;
          border-bottom: 1px dotted #cc0000;
     }

/* Tag Cloud Styling
----------------------------------------------- */
     ul#tagcloud {
          padding:0;
          margin:0;
          text-align:left;
          list-style:none;
          line-height:200%;
     }
     
     ul#tagcloud li {
          display:inline;
          font-size:70%;
          color:#ccc;
          background:none;
          padding:0;
     }
     
     ul#tagcloud li.t1 a {
          color:#797979;
          font-size:120%;
     }
     
     ul#tagcloud li.t2 a {
          color:#6d6d6d;
          font-size:160%;
     }
     
     ul#tagcloud li.t3 a {
          color:#616161;
          font-size:190%;
     }
     
     ul#tagcloud li.t4 a {
          color:#555555;
          font-size:210%;
     }
     
     ul#tagcloud li.t5 a {
          color:#484848;
          font-size:230%;
     }
     
     ul#tagcloud li.t6 a {
          color:#3c3c3c;
          font-size:250%;
     }
     
     ul#tagcloud li.t7 a {
          color:#303030;
          font-size:270%;
     }
     
     ul#tagcloud li.t8 a {
          color:#242424;
          font-size:290%;
     }
     
     ul#tagcloud li.t9 a {
          color:#181818;
          font-size:310%;
     }
     
     ul#tagcloud li.t10 a {
          color:#0c0c0c;
          font-size:330%;
     }
     
     #news ul#tagcloud {
          padding-left:0;
     }
     
     .tags {
          background-color:#F0F5F7;
     }
     .tags p {
          font-size: 0.9em;
          padding: 5px;
     }
     ul#tagcloud li a, ul#tagcloud li a:link {
          text-decoration:none;
     }
     ul#tagcloud li a:hover {
     text-decoration: underline;
     }

/* Code Snippets, Styling
----------------------------------------------- */
     code {
          background-color: #eeeeee;
          padding: 1px;
     }
     ol.code {
          padding: 5px;
          margin: 3px;
     }
     .code {
          background-color: #E6F2E6;
          border: 1px solid #ccc;
          padding: 5px;
     }
     .code code {
          background: transparent;
          display: block;
          padding: 3px;
          margin-bottom: 0;
     }
     .code li {
          background: #F2F8F2;
          margin: 0 0 1px 2.2em;
          padding: 2px;
     }
     .code li:hover {
          background: #fff;
     }
     .indent1 { margin-left: 1em; }
     .indent2 { margin-left: 2em; }
     .indent3 { margin-left: 3em; }
     .indent4 { margin-left: 4em; }

/* Misc. elements, Styling
----------------------------------------------- */
     blockquote {
          background-color:#EFF4FA;
          padding:10px;
     }
     
     abbr {
          text-decoration: none;
     }
     
     abbr:hover {
          cursor: help;
     }
     span.grey {
          color: #bfbfbf;
     }
     img {
          border: none !important;
     }
     .excerpt {padding: 0;
          margin: 0;
     }
     .metadata { /* Time and category for blog entries */
          display: block;
          margin-top: 6px;
          color: #bbb;
     }    
     .metadata a,
     .chronodata a {
          color: #777;
     }
     
     .chronodata {
     	padding: 2px 0 2px 20px ;
     	background: url('http://www.smashingmagazine.com/images/time.png') left center no-repeat;
     	}
     
     .chronodata:after {
     	content: ".";
     	}
     
     .tagdata {
     	display: block;
     	padding: 2px 0 2px 2px;
     	/* background: url('http://www.smashingmagazine.com/images/tag_blue.png') left center no-repeat; */
     	}
     
     .datum {
          font-size: 0.9em;
          color: #777;
     }
     .imgban {
          margin: 12px 0 12px 0;
     }

     ul.bookmarks {
          margin: 15px 0;
          padding: 0;
     }

     ul.bookmarks li {
          display: inline;
          font-size: 0.8em;
     }

/* Advertisement Styling
----------------------------------------------- */
     .g_right {
          float:left;
          padding: 0px 9px 4px 0;
          width: 338px;
          margin-left:0px;
     }
     
     .ttop img, .tbottom img {
          padding: 5px;
          display:block;
     }
     
     .ttop, .tbottom {
          border: 1px solid #eee;
          -moz-border-radius: 3px;
     }
     
     .ttop:hover, .tbottom:hover {
          border: 1px solid #ccc;
     }
     .ttop {
          margin-bottom: 10px;
     }
     .tbottom {
          margin-top: 10px;
     }
     .ad {
          text-align:center;
          padding:5px;
          background-color:#fafafa;
     }
     .adv a img {
          border: 0;
     }
     #banner {
          text-align: center;
     }
     
.shortcuts {
	margin: 15px 15px 5px 15px;
	font-size: 0.9em;
	border: 1px solid #D8E5FD;
}

.shortcuts td {
padding: 3px 8px;
border-right: 1px solid #eee;
}

.shortcuts tr.selected td {
	background-color: #3d80df;
	color: #ffffff;
	font-weight: bold;
	border-left: 1px solid #346DBE;
	border-bottom: 1px solid #7DAAEA;
}

.shortcuts tr.pdd td {
	background-color: #F5F9FE;
	color: #333;
          border-top: 1px solid #EBF2FE;
          border-bottom: 1px solid #EBF2FE;
}